:root {
  --surface: #0f0f14;
  --surface-dim: #0f0f14;
  --surface-bright: #39383e;
  --surface-lowest: #09090d;
  --surface-low: #16161c;
  --surface-container: #1c1c23;
  --surface-high: #26252d;
  --surface-highest: #33323a;
  --on-surface: #ece9f1;
  --on-surface-variant: #c0c0c0;
  --outline: #8b8b8b;
  --outline-variant: #353535;
  --primary: #d6f1f5;
  --primary-container: #3aa6b9;
  --on-primary: #0b2a30;
  --on-primary-container: #1f6b78;
  --primary-fixed: #9fdbe6;
  --primary-fixed-dim: #3aa6b9;
  --secondary: #fface8;
  --secondary-container: #ff24e4;
  --tertiary: #c8b2ff;
  --tertiary-container: #e1d2ff;
  --on-tertiary-container: #7213ff;
  --warm: #ffc98a;
  --error: #ffb4ab;
  --spectrum: linear-gradient(90deg, #7213ff, #2e6bff 22%, #00f0ff 44%, #7dffb2 60%, #ffd36b 76%, #ff24e4);
  --spectrum-vertical: linear-gradient(180deg, #7213ff, #00f0ff 45%, #ffd36b 75%, #ff24e4);
  --glass: color-mix(in srgb, var(--surface-low) 62%, transparent);
  --glass-border: color-mix(in srgb, var(--on-surface) 12%, transparent);
  --radius-sm: 0.25rem;
  --radius: 0.625rem;
  --radius-md: 0.875rem;
  --radius-lg: 1.125rem;
  --radius-xl: 1.75rem;
  --radius-2xl: 2.5rem;
  --shadow-brand: 0 0 48px color-mix(in srgb, var(--primary-container) 16%, transparent);
  --shadow-magenta: 0 0 48px color-mix(in srgb, var(--secondary-container) 12%, transparent);
  --shadow-deep: 0 40px 120px -20px rgb(0 0 0 / 70%), 0 12px 40px -12px rgb(0 0 0 / 60%);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --content-width: 1320px;
  --reading-width: 720px;
}

@font-face {
  font-family: "Sora";
  src: url("../fonts/sora-regular.woff2") format("woff2");
  font-weight: 400 600;
  font-display: swap;
}

@font-face {
  font-family: "Sora";
  src: url("../fonts/sora-bold.woff2") format("woff2");
  font-weight: 700 800;
  font-display: swap;
}

@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/hanken-grotesk-regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/hanken-grotesk-semibold.woff2") format("woff2");
  font-weight: 600 700;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

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

html {
  color-scheme: dark;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--surface);
  color: var(--on-surface);
  font-family: "Hanken Grotesk", system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Clip decorative bleed (hero glows) at the viewport edge; on body the value
   would propagate to the viewport and still leave scrollable overflow. */
main { overflow-x: clip; }

/* Film grain over the whole page keeps large dark areas from banding. */
body::after {
  position: fixed;
  inset: 0;
  z-index: 60;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  content: "";
  opacity: 0.045;
  pointer-events: none;
}

img { display: block; max-width: 100%; }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
::selection { background: color-mix(in srgb, var(--primary-container) 36%, transparent); color: var(--primary); }

:focus-visible {
  outline: 3px solid var(--primary-container);
  outline-offset: 4px;
}

h1, h2, h3, p { margin-top: 0; }

h1, h2, h3 {
  font-family: "Sora", system-ui, sans-serif;
  text-wrap: balance;
}

h1, h2 {
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1.02;
}

h3 { letter-spacing: -0.02em; }

h1 span, h2 span { color: var(--primary-fixed-dim); }

p { color: var(--on-surface-variant); text-wrap: pretty; }

code { font-family: "JetBrains Mono", monospace; }

/* Scroll reveals only engage once the effects script marks the page ready,
   so content is never hidden without JavaScript. */
@media (prefers-reduced-motion: no-preference) {
  .motion-ready [data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
  }
  .motion-ready [data-reveal].is-visible { opacity: 1; transform: none; }
}

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

.section-shell {
  width: min(calc(100% - 96px), var(--content-width));
  margin-inline: auto;
}

.section { padding-block: 136px; }

.section-heading { max-width: 780px; margin-bottom: 56px; }
.centered-heading { margin-inline: auto; text-align: center; }
.section-heading h2, .feature-copy h2, .privacy-copy h2, .open-source-section h2, .final-inner h2, .download-notes h2 {
  margin-bottom: 24px;
  font-size: clamp(2.4rem, 4.6vw, 4.25rem);
}
.section-heading > p:last-child:not(.eyebrow), .feature-copy > p:not(.eyebrow), .privacy-copy > p:not(.eyebrow), .open-source-section > div > p:not(.eyebrow), .final-inner > p:not(.eyebrow) {
  font-size: 1.15rem;
  line-height: 1.6;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  backdrop-filter: blur(20px) saturate(1.4);
}
.site-header::after {
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: var(--spectrum);
  content: "";
  opacity: 0.4;
}

.header-inner {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.site-navigation { display: flex; align-items: center; gap: 6px; }
.site-navigation > a:not(.button) { padding: 8px 14px; border-radius: 999px; color: var(--on-surface-variant); font-weight: 600; text-decoration: none; transition: color 160ms ease, background 160ms ease; }
.site-navigation > a:not(.button):hover { background: color-mix(in srgb, var(--on-surface) 7%, transparent); color: var(--primary); }
.site-navigation .header-action { margin-left: 10px; }
.menu-button { display: none; }

.site-footer {
  position: relative;
  background: var(--surface-lowest);
}
.site-footer::before {
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: var(--spectrum);
  content: "";
  opacity: 0.35;
}

.footer-inner {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(320px, 1.2fr);
  gap: 56px 80px;
  padding-block: 80px 40px;
}

.footer-brand p { max-width: 400px; margin: 20px 0 0; }
.footer-links { display: grid; grid-template-columns: repeat(3, minmax(140px, 1fr)); gap: 12px 32px; }
.footer-links a { color: var(--on-surface-variant); text-decoration: none; transition: color 160ms ease; }
.footer-links a:hover { color: var(--primary-fixed); }
.footer-meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; margin: 0; padding-top: 28px; border-top: 1px solid var(--outline-variant); color: var(--outline); font: 500 0.75rem/1.5 "JetBrains Mono", monospace; letter-spacing: 0.04em; }
.footer-meta a { color: var(--on-surface-variant); text-underline-offset: 3px; }

@media (max-width: 900px) {
  .section-shell { width: min(calc(100% - 48px), var(--content-width)); }
  .section { padding-block: 96px; }
  .menu-button { display: inline-flex; }
  .site-navigation {
    position: absolute;
    inset: 72px 0 auto;
    display: none;
    padding: 18px 24px 28px;
    border-bottom: 1px solid var(--outline-variant);
    background: var(--surface-low);
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }
  .site-navigation.is-open { display: flex; }
  .site-navigation > a { min-height: 48px; display: flex; align-items: center; padding-inline: 12px; }
  .site-navigation .header-action { justify-content: center; margin: 8px 0 0; }
  .footer-links { grid-template-columns: repeat(2, minmax(140px, 1fr)); }
}

@media (max-width: 600px) {
  .section-shell { width: calc(100% - 32px); }
  .section { padding-block: 80px; }
  .footer-inner { grid-template-columns: 1fr; gap: 40px; }
  .footer-links { grid-template-columns: 1fr 1fr; }
  .footer-meta { grid-column: auto; }
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 12px;
  left: 12px;
  padding: 12px 18px;
  border-radius: var(--radius);
  background: var(--primary-container);
  color: var(--on-primary);
  font-weight: 700;
  transform: translateY(-180%);
}
.skip-link:focus { transform: translateY(0); }

.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--on-surface); font: 700 1.05rem/1 "Sora", sans-serif; letter-spacing: -0.02em; text-decoration: none; }
.brand img { filter: drop-shadow(0 0 14px color-mix(in srgb, var(--primary-container) 40%, transparent)); transition: transform 400ms var(--ease-spring); }
.brand:hover img { transform: rotate(-12deg) scale(1.06); }
.brand span b { color: var(--primary-fixed-dim); font-weight: inherit; }
.external-mark { margin-left: 4px; font-size: 0.8em; }

.button-row { display: flex; flex-wrap: wrap; gap: 12px; }
.button {
  position: relative;
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 24px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  transition: border-color 200ms ease, background 200ms ease, box-shadow 300ms ease, transform 300ms var(--ease-spring);
}
.button:hover { transform: translateY(-2px); }
.button:active { transform: translateY(0) scale(0.98); }
.button-primary { background: var(--primary-container); color: var(--on-primary); box-shadow: inset 0 1px color-mix(in srgb, white 60%, transparent), 0 10px 40px -8px color-mix(in srgb, var(--primary-container) 60%, transparent); }
.button-primary:hover { background: var(--primary-fixed); box-shadow: inset 0 1px white, 0 14px 60px -6px color-mix(in srgb, var(--primary-container) 70%, transparent); }
.button-secondary { border-color: var(--glass-border); background: color-mix(in srgb, var(--on-surface) 5%, transparent); color: var(--on-surface); backdrop-filter: blur(12px); }
.button-secondary:hover { border-color: color-mix(in srgb, var(--primary-container) 50%, transparent); background: color-mix(in srgb, var(--on-surface) 9%, transparent); }
.header-action { min-height: 42px; padding: 8px 20px; }

.eyebrow, .card-detail, .platform-spec, .status-chip, .availability-note {
  font: 500 0.75rem/1.4 "JetBrains Mono", monospace;
  letter-spacing: 0.12em;
}
.eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 20px; color: var(--primary-fixed-dim); }
.eyebrow::before { width: 22px; height: 1px; background: currentColor; content: ""; opacity: 0.7; }
.centered-heading .eyebrow::after { width: 22px; height: 1px; background: currentColor; content: ""; opacity: 0.7; }
.text-link { color: var(--primary-fixed); font-weight: 700; text-decoration-color: color-mix(in srgb, var(--primary-container) 44%, transparent); text-underline-offset: 5px; transition: color 160ms ease; }
.text-link:hover { color: var(--primary); text-decoration-color: currentColor; }
.text-link span[aria-hidden] { display: inline-block; transition: transform 300ms var(--ease-spring); }
.text-link:hover span[aria-hidden] { transform: translateX(4px); }
.centered-action { margin: 40px 0 0; text-align: center; }

.gradient-text {
  background: linear-gradient(100deg, var(--primary-container) 10%, var(--primary) 45%, var(--primary-container) 55%, #7dffb2 90%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 9s ease-in-out infinite alternate;
}
@keyframes shimmer { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }

.menu-button {
  min-width: 52px;
  min-height: 44px;
  border: 1px solid var(--outline-variant);
  border-radius: 999px;
  background: var(--surface-container);
  color: var(--on-surface);
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.menu-button-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.menu-lines, .menu-lines::before, .menu-lines::after { width: 20px; height: 2px; display: block; border-radius: 2px; background: currentColor; content: ""; transition: transform 160ms ease; }
.menu-lines { position: relative; }
.menu-lines::before { position: absolute; top: -6px; }
.menu-lines::after { position: absolute; top: 6px; }
.menu-button[aria-expanded="true"] .menu-lines { background: transparent; }
.menu-button[aria-expanded="true"] .menu-lines::before { top: 0; transform: rotate(45deg); }
.menu-button[aria-expanded="true"] .menu-lines::after { top: 0; transform: rotate(-45deg); }

.app-shot {
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  background: var(--surface-lowest);
  box-shadow: var(--shadow-deep), var(--shadow-brand);
}
.app-shot img { width: 100%; height: auto; }
.window-bar { height: 38px; display: flex; align-items: center; gap: 7px; padding-inline: 16px; border-bottom: 1px solid var(--outline-variant); background: var(--surface-low); }
.window-bar span { width: 10px; height: 10px; border-radius: 50%; background: var(--surface-highest); }
.window-bar span:nth-child(2) { background: color-mix(in srgb, var(--secondary) 60%, var(--surface-highest)); }
.window-bar span:nth-child(3) { background: var(--primary-container); box-shadow: 0 0 10px var(--primary-container); }
.window-bar b { margin-left: auto; color: var(--outline); font: 500 0.625rem/1 "JetBrains Mono", monospace; letter-spacing: 0.14em; }

.status-dot { position: relative; width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: #7dffb2; box-shadow: 0 0 12px #7dffb2; }
.status-dot::after { position: absolute; inset: -4px; border: 1px solid #7dffb2; border-radius: 50%; content: ""; animation: ping 2.4s var(--ease-out) infinite; }
@keyframes ping { from { opacity: 0.8; transform: scale(0.6); } to { opacity: 0; transform: scale(2.2); } }
.status-chip { padding: 7px 12px; border: 1px solid var(--outline-variant); border-radius: 999px; }
.status-progress { border-color: var(--primary-container); color: var(--primary-fixed); }
.status-pending { border-color: var(--secondary); color: var(--secondary); }
.status-available { border-color: color-mix(in srgb, #7dffb2 60%, transparent); background: color-mix(in srgb, #7dffb2 9%, transparent); color: #b6ffd5; }

.icon { width: 1.5em; height: 1.5em; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Before/after comparison. --split is the share of the frame showing the
   default render; the developed render sits underneath at full size. */
.compare { position: relative; margin: 0; }
.compare-media {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
  cursor: ew-resize;
  touch-action: pan-y;
  user-select: none;
  --split: 50%;
}
.compare-media picture, .compare-media img { width: 100%; height: 100%; }
.compare-media img { object-fit: cover; }
.compare-before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--split)) 0 0); }
.compare-divider { position: absolute; inset: 0 auto 0 var(--split); width: 2px; margin-left: -1px; background: var(--primary); box-shadow: 0 0 18px var(--primary-container), 0 0 2px var(--primary-container); pointer-events: none; }
.compare-handle {
  position: absolute;
  top: 50%;
  left: var(--split);
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border: 3px solid var(--primary);
  border-radius: 50%;
  background: var(--primary-container);
  color: var(--on-primary);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--primary-container) 22%, transparent), 0 0 40px var(--primary-container);
  transform: translate(-50%, -50%);
  transition: transform 300ms var(--ease-spring), box-shadow 300ms ease;
  pointer-events: none;
}
.compare-handle svg { width: 30px; fill: currentColor; }
.compare-media:hover .compare-handle, .compare-media.is-dragging .compare-handle { transform: translate(-50%, -50%) scale(1.1); }
.compare-media:has(.compare-range:focus-visible) .compare-handle { box-shadow: 0 0 0 4px var(--surface), 0 0 0 7px var(--primary-container), 0 0 40px var(--primary-container); }
.compare-label { position: absolute; top: 18px; padding: 6px 12px; border: 1px solid var(--glass-border); border-radius: 999px; background: color-mix(in srgb, var(--surface-lowest) 55%, transparent); color: var(--on-surface); font: 500 0.68rem/1.3 "JetBrains Mono", monospace; letter-spacing: 0.1em; text-transform: uppercase; backdrop-filter: blur(10px); pointer-events: none; }
.compare-label-before { left: 18px; }
.compare-label-after { right: 18px; color: var(--primary-fixed); }
.compare-range { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); opacity: 0; }

@media (forced-colors: active) {
  .button, .app-shot, .workflow-card, .platform-card { forced-color-adjust: auto; }
  .hero-glow, body::after { display: none; }
}

/* Shared hero glow for inner pages */
.download-hero, .guide-hero, .error-page { position: relative; isolation: isolate; }
.download-hero::before, .guide-hero::before, .error-page::before {
  position: absolute;
  inset: -80px -20vw auto;
  z-index: -1;
  height: 720px;
  background: radial-gradient(ellipse 50% 60% at 20% 30%, color-mix(in srgb, var(--primary-container) 16%, transparent), transparent 70%), radial-gradient(ellipse 40% 50% at 85% 20%, color-mix(in srgb, var(--on-tertiary-container) 26%, transparent), transparent 70%);
  content: "";
  pointer-events: none;
}

/* Download */
.download-hero { padding-block: 120px 72px; }
.download-hero h1 { margin-bottom: 28px; font-size: clamp(3.2rem, 8vw, 7rem); }
.download-hero > p { max-width: 720px; font-size: 1.2rem; }
.launch-status { max-width: 560px; display: flex; align-items: center; gap: 16px; margin-top: 36px; padding: 18px 22px; border: 1px solid var(--glass-border); border-radius: var(--radius-lg); background: var(--glass); backdrop-filter: blur(12px); }
.launch-status div { display: grid; }
.launch-status b { color: var(--on-surface); }
.launch-status span { color: var(--on-surface-variant); }
.recommendation-panel { position: relative; max-width: 900px; display: flex; align-items: center; justify-content: space-between; gap: 32px; margin-top: 20px; padding: 28px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--primary-container) 50%, var(--outline-variant)); border-radius: var(--radius-xl); background: linear-gradient(115deg, color-mix(in srgb, var(--primary-container) 12%, var(--surface-low)), var(--surface-low) 60%); box-shadow: var(--shadow-brand); }
.recommendation-panel::after { position: absolute; inset: auto 0 0; height: 2px; background: var(--spectrum); content: ""; opacity: 0.7; }
.recommendation-panel .eyebrow { margin-bottom: 8px; }
.recommendation-panel h2 { margin: 0 0 6px; font-size: 1.5rem; letter-spacing: -0.02em; }
.recommendation-panel p:last-child { margin-bottom: 0; }
.recommendation-panel .button { flex: 0 0 auto; }
.noscript-note { max-width: 760px; margin-top: 18px; color: var(--error); }
.platform-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.platform-card { position: relative; min-height: 380px; display: flex; flex-direction: column; padding: 32px; border: 1px solid var(--outline-variant); border-radius: var(--radius-xl); background: linear-gradient(160deg, var(--surface-container), var(--surface-low)); transition: border-color 300ms ease, transform 500ms var(--ease-spring); }
.platform-card:hover { border-color: color-mix(in srgb, var(--primary-container) 45%, var(--outline-variant)); transform: translateY(-4px); }
.platform-card:target { border-color: var(--primary-container); box-shadow: var(--shadow-brand); }
.platform-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.platform-icon { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 16px; background: color-mix(in srgb, var(--primary-container) 12%, transparent); color: var(--primary-fixed-dim); }
.platform-card h3 { margin: 44px 0 6px; font-size: 1.9rem; }
.platform-card code { padding: 1px 5px; border: 1px solid var(--outline-variant); border-radius: var(--radius-sm); background: var(--surface-lowest); color: var(--primary-fixed); font-size: 0.85em; }
.platform-spec { color: var(--primary-fixed-dim); }
.availability-note { margin-top: auto; padding-top: 24px; color: var(--on-surface); }
.platform-action { margin-top: 22px; }
.platform-action[hidden] { display: none; }
.platform-guide-link { margin-top: 18px; font-size: 0.92rem; }
.download-notes { border-top: 1px solid var(--outline-variant); }
.notes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 48px 0; }
.notes-grid article { padding: 28px; border: 1px solid var(--outline-variant); border-radius: var(--radius-lg); background: var(--surface-low); }
.notes-grid article > span { color: var(--primary-fixed-dim); font: 500 0.75rem/1 "JetBrains Mono", monospace; }
.notes-grid h3 { margin: 32px 0 10px; font-size: 1.2rem; }
.notes-grid p { margin: 0; }
.release-evidence { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 1fr); gap: 48px; align-items: end; border-top: 1px solid var(--outline-variant); }
.release-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 0; overflow: hidden; border: 1px solid var(--outline-variant); border-radius: var(--radius-lg); background: var(--outline-variant); }
.release-facts div { padding: 22px; background: var(--surface-low); }
.release-facts dt { margin-bottom: 6px; color: var(--on-surface-variant); font: 500 0.7rem/1.2 "JetBrains Mono", monospace; letter-spacing: 0.08em; text-transform: uppercase; }
.release-facts dd { margin: 0; color: var(--on-surface); font-weight: 600; }
.release-links { grid-column: 1 / -1; margin-top: 0; }
.release-links [hidden] { display: none; }

/* 404 */
.error-page { min-height: 72vh; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.error-page h1 { max-width: 860px; margin-bottom: 24px; font-size: clamp(3rem, 8vw, 7rem); }
.error-page p:not(.eyebrow) { font-size: 1.2rem; }

/* Guides */
.guide-hero { padding-block: 72px 72px; }
.breadcrumb { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 56px; color: var(--outline); font: 500 0.75rem/1.4 "JetBrains Mono", monospace; letter-spacing: 0.06em; }
.breadcrumb a { color: var(--on-surface-variant); text-underline-offset: 4px; }
.guide-hero-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.65fr); align-items: end; gap: clamp(48px, 8vw, 130px); }
.guide-hero h1 { max-width: 940px; margin-bottom: 28px; font-size: clamp(3rem, 6.4vw, 6.2rem); }
.guide-summary { max-width: 760px; margin-bottom: 34px; font-size: clamp(1.125rem, 1.7vw, 1.35rem); line-height: 1.6; }
.guide-facts { margin: 0; padding: 8px 24px; border: 1px solid var(--glass-border); border-radius: var(--radius-xl); background: var(--glass); backdrop-filter: blur(14px); }
.guide-facts div { display: grid; grid-template-columns: 96px 1fr; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--outline-variant); }
.guide-facts div:last-child { border-bottom: 0; }
.guide-facts dt { color: var(--outline); font: 500 0.7rem/1.5 "JetBrains Mono", monospace; letter-spacing: 0.08em; text-transform: uppercase; }
.guide-facts dd { margin: 0; color: var(--on-surface); font-weight: 600; }
.guide-visual { padding-bottom: 88px; }
.guide-visual .app-shot { max-width: 1240px; margin-inline: auto; }

.guide-body { display: grid; grid-template-columns: minmax(0, var(--reading-width)) minmax(220px, 290px); justify-content: center; align-items: start; gap: clamp(56px, 9vw, 140px); padding-bottom: 120px; }
.guide-article > section { padding-block: 64px; border-top: 1px solid var(--outline-variant); scroll-margin-top: 88px; }
.guide-article > section:first-child { padding-top: 0; border-top: 0; }
.guide-article h2 { margin-bottom: 24px; font-size: clamp(2rem, 4vw, 3.2rem); }
.guide-article h3 { font-size: 1.15rem; }
.guide-article p:not(.eyebrow), .guide-article li { font-size: 1.08rem; line-height: 1.7; }
.guide-article code { padding: 2px 6px; border: 1px solid var(--outline-variant); border-radius: var(--radius-sm); background: var(--surface-lowest); color: var(--primary-fixed); font: 500 0.85em/1.5 "JetBrains Mono", monospace; }
.check-list { display: grid; gap: 14px; margin: 28px 0 0; padding: 0; list-style: none; }
.check-list li { position: relative; padding-left: 34px; color: var(--on-surface-variant); }
.check-list li::before { position: absolute; top: 0.45em; left: 0; width: 18px; height: 18px; border-radius: 50%; background: color-mix(in srgb, var(--primary-container) 18%, transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='m5 9.5 2.5 2.5 5.5-6' fill='none' stroke='%233aa6b9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; content: ""; }
.numbered-steps { display: grid; gap: 12px; margin: 32px 0; padding: 0; list-style: none; }
.numbered-steps li { display: grid; grid-template-columns: 54px 1fr; gap: 18px; padding: 24px; border: 1px solid var(--outline-variant); border-radius: var(--radius-lg); background: var(--surface-low); }
.numbered-steps li > span, .guide-step-grid article > span { color: var(--primary-fixed-dim); font: 500 0.76rem/1.5 "JetBrains Mono", monospace; }
.numbered-steps h3 { margin: 0 0 6px; }
.numbered-steps p { margin-bottom: 0; }
.guide-step-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 32px 0; }
.guide-step-grid article { min-height: 250px; display: flex; flex-direction: column; padding: 22px; border: 1px solid var(--outline-variant); border-radius: var(--radius-lg); background: linear-gradient(160deg, var(--surface-container), var(--surface-low)); }
.guide-step-grid h3 { margin: auto 0 10px; }
.guide-step-grid p { margin-bottom: 0; font-size: 0.98rem; line-height: 1.55; }
.notice-panel { position: relative; margin-top: 28px; padding: 24px 24px 24px 28px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--primary-container) 40%, var(--outline-variant)); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--primary-container) 6%, var(--surface-low)); }
.notice-panel::before { position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--primary-container); content: ""; }
.notice-panel strong { color: var(--on-surface); }
.notice-panel p { margin: 8px 0 0; font-size: 1rem; }
.guide-sidebar { position: sticky; top: 104px; padding: 26px; border: 1px solid var(--glass-border); border-radius: var(--radius-xl); background: var(--glass); backdrop-filter: blur(18px); }
.guide-sidebar nav { display: grid; margin-block: 18px 28px; }
.guide-sidebar nav a { padding: 9px 12px; border-radius: 10px; color: var(--on-surface-variant); text-decoration: none; transition: background 160ms ease, color 160ms ease; }
.guide-sidebar nav a:hover { background: color-mix(in srgb, var(--primary-container) 10%, transparent); color: var(--primary-fixed); }
.sidebar-callout { padding-top: 24px; border-top: 1px solid var(--outline-variant); }
.sidebar-callout strong { color: var(--on-surface); }
.sidebar-callout p { margin: 8px 0 18px; }
.sidebar-callout .button { width: 100%; }
.faq-list { display: grid; gap: 10px; }
.faq-list details { border: 1px solid var(--outline-variant); border-radius: var(--radius-lg); background: var(--surface-low); transition: border-color 200ms ease; }
.faq-list details[open] { border-color: color-mix(in srgb, var(--primary-container) 40%, var(--outline-variant)); }
.faq-list summary { position: relative; padding: 20px 56px 20px 22px; color: var(--on-surface); font: 600 1.05rem/1.5 "Sora", sans-serif; list-style: none; cursor: pointer; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { position: absolute; top: 50%; right: 22px; color: var(--primary-fixed-dim); content: "+"; font: 400 1.5rem/1 "Sora", sans-serif; transform: translateY(-50%); transition: transform 300ms var(--ease-spring); }
.faq-list details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-list details p { margin: 0; padding: 0 22px 22px; font-size: 1rem; }
.related-guides { border-top: 1px solid var(--outline-variant); background: var(--surface-lowest); }
.related-guides h2 { margin-bottom: 32px; font-size: clamp(2rem, 4vw, 3.5rem); }
.related-guide-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.related-guide-links a { display: grid; gap: 8px; padding: 28px; border: 1px solid var(--outline-variant); border-radius: var(--radius-lg); background: var(--surface-low); text-decoration: none; transition: border-color 200ms ease, transform 400ms var(--ease-spring); }
.related-guide-links a:hover { border-color: var(--primary-container); transform: translateY(-4px); }
.related-guide-links b { color: var(--on-surface); font-family: "Sora", sans-serif; }
.related-guide-links span { color: var(--on-surface-variant); }

@media (max-width: 980px) {
  .platform-grid { grid-template-columns: 1fr; }
  .platform-card { min-height: 0; }
  .guide-hero-grid, .guide-body { grid-template-columns: 1fr; }
  .guide-facts { max-width: 680px; }
  .guide-sidebar { position: static; }
  .guide-sidebar nav { grid-template-columns: repeat(2, 1fr); column-gap: 24px; }
}

@media (max-width: 650px) {
  .download-hero { padding-block: 80px 48px; }
  .download-hero h1 { font-size: clamp(2.9rem, 15vw, 4.7rem); }
  .recommendation-panel { align-items: stretch; flex-direction: column; }
  .notes-grid, .release-evidence, .release-facts { grid-template-columns: 1fr; }
  .guide-hero { padding-block: 52px 48px; }
  .breadcrumb { margin-bottom: 40px; }
  .guide-hero h1 { font-size: clamp(2.75rem, 14vw, 4.5rem); }
  .guide-visual { padding-bottom: 48px; }
  .guide-body { padding-bottom: 72px; }
  .guide-article > section { padding-block: 50px; }
  .guide-step-grid, .related-guide-links { grid-template-columns: 1fr; }
  .guide-step-grid article { min-height: 210px; }
  .guide-sidebar nav { grid-template-columns: 1fr; }
  .numbered-steps li { grid-template-columns: 1fr; gap: 8px; }
}

/* Hero */
.hero { position: relative; padding-top: 104px; text-align: center; isolation: isolate; }
.hero-aurora { position: absolute; inset: -120px 0 auto; z-index: -1; height: 900px; pointer-events: none; }
.hero-aurora span { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.55; animation: drift 18s ease-in-out infinite alternate; }
.hero-aurora span:nth-child(1) { width: 620px; height: 420px; left: 8%; top: 120px; background: color-mix(in srgb, var(--primary-container) 36%, transparent); }
.hero-aurora span:nth-child(2) { width: 520px; height: 380px; right: 6%; top: 60px; background: color-mix(in srgb, var(--on-tertiary-container) 42%, transparent); animation-delay: -6s; }
.hero-aurora span:nth-child(3) { width: 460px; height: 300px; left: 40%; top: 380px; background: color-mix(in srgb, var(--secondary-container) 20%, transparent); animation-delay: -12s; }
@keyframes drift { from { transform: translate3d(-30px, 0, 0) scale(1); } to { transform: translate3d(40px, 30px, 0) scale(1.12); } }
.hero-copy { position: relative; }
.release-line { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin: 0 0 32px; padding: 8px 16px; border: 1px solid var(--glass-border); border-radius: 999px; background: var(--glass); color: var(--on-surface-variant); font: 500 0.75rem/1.5 "JetBrains Mono", monospace; letter-spacing: 0.04em; backdrop-filter: blur(12px); }
.hero h1 { margin-bottom: 28px; font-size: clamp(3.4rem, 9.2vw, 8.4rem); line-height: 0.96; }
.hero-summary { max-width: 700px; margin: 0 auto 36px; color: var(--on-surface); font-size: clamp(1.15rem, 1.9vw, 1.45rem); line-height: 1.5; opacity: 0.86; }
.hero-actions { justify-content: center; }
.hero-stage { position: relative; margin-top: 80px; perspective: 1800px; }
.hero-compare { border-radius: var(--radius-2xl); box-shadow: var(--shadow-deep), 0 0 120px -20px color-mix(in srgb, var(--primary-container) 35%, transparent); }
.hero-compare .compare-media { aspect-ratio: 1200 / 753; border: 1px solid var(--glass-border); border-radius: var(--radius-2xl); }
@media (prefers-reduced-motion: no-preference) {
  .hero-compare { animation: stage-rise 1400ms var(--ease-out) both 150ms; }
  @keyframes stage-rise { from { opacity: 0; transform: rotateX(14deg) translateY(80px) scale(0.96); } }
}
.hero-recipe { position: absolute; right: 22px; top: 116px; width: 210px; padding: 16px 18px; border: 1px solid var(--glass-border); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--surface-lowest) 58%, transparent); text-align: left; backdrop-filter: blur(16px) saturate(1.3); cursor: default; }
.hero-recipe .card-detail { margin-bottom: 10px; color: var(--primary-fixed-dim); }
.hero-recipe dl { display: grid; gap: 6px; margin: 0; }
.hero-recipe div { display: flex; justify-content: space-between; gap: 12px; }
.hero-recipe dt { color: var(--on-surface-variant); font-size: 0.85rem; }
.hero-recipe dd { margin: 0; color: var(--on-surface); font: 500 0.8rem/1.6 "JetBrains Mono", monospace; }
.hero-compare .compare-label { top: auto; bottom: 22px; }
.photo-credit { margin-top: 20px; color: var(--outline); font: 500 0.72rem/1.6 "JetBrains Mono", monospace; letter-spacing: 0.03em; }
.photo-credit span { color: var(--primary-fixed-dim); }

/* Trust strip */
.trust-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-block: 88px 0; color: var(--on-surface); text-decoration: none; }
.trust-strip span { min-height: 64px; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 14px 18px; border: 1px solid var(--outline-variant); border-radius: 999px; background: var(--surface-low); font-weight: 600; text-align: center; transition: border-color 200ms ease, background 200ms ease; }
.trust-strip:hover span { border-color: color-mix(in srgb, var(--primary-container) 36%, var(--outline-variant)); }
.trust-strip .icon { color: var(--primary-fixed-dim); }

/* Workflow */
.workflow-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.workflow-card { position: relative; display: flex; flex-direction: column; padding: 16px 16px 30px; border: 1px solid var(--outline-variant); border-radius: var(--radius-xl); background: linear-gradient(160deg, var(--surface-container), var(--surface-low)); transition: transform 500ms var(--ease-spring), border-color 300ms ease; }
.workflow-card:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--primary-container) 40%, var(--outline-variant)); }
.workflow-card.featured-card { border-color: color-mix(in srgb, var(--primary-container) 50%, var(--outline-variant)); box-shadow: var(--shadow-brand); }
.workflow-card > :not(.workflow-visual) { margin-inline: 16px; }
.workflow-visual { position: relative; aspect-ratio: 16 / 11; overflow: hidden; margin-bottom: 28px; border-radius: calc(var(--radius-xl) - 8px); background: var(--surface-lowest); }
.step-number { color: var(--primary-fixed-dim); font: 500 0.75rem/1 "JetBrains Mono", monospace; letter-spacing: 0.1em; }
.workflow-card h3 { margin: 14px 0 12px; font-size: 1.5rem; }
.workflow-card p { margin-bottom: 22px; }
.card-detail { margin-top: auto; color: var(--outline); }

.cull-visual { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px; }
.cull-thumb { position: relative; overflow: hidden; border: 2px solid transparent; border-radius: 10px; }
.cull-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cull-thumb i { position: absolute; left: 8px; bottom: 6px; color: #ffd36b; font: normal 700 0.7rem/1 sans-serif; letter-spacing: 0.08em; text-shadow: 0 1px 4px black; }
.cull-thumb.is-pick { border-color: var(--primary-container); }
.cull-thumb.is-reject img { filter: grayscale(1) brightness(0.45); }
.cull-thumb.is-reject i { inset: 50% auto auto 50%; color: var(--secondary); font-size: 1.4rem; transform: translate(-50%, -50%); }

.develop-visual img { width: 100%; height: 100%; object-fit: cover; }
.slider-stack { position: absolute; right: 12px; bottom: 12px; width: 52%; display: grid; gap: 9px; padding: 14px; border: 1px solid var(--glass-border); border-radius: 12px; background: color-mix(in srgb, var(--surface-lowest) 62%, transparent); backdrop-filter: blur(12px); }
.slider-stack span { position: relative; display: block; height: 22px; }
.slider-stack b { position: absolute; top: 0; color: var(--on-surface-variant); font: 500 0.6rem/1 "JetBrains Mono", monospace; }
.slider-stack span::before { position: absolute; inset: auto 0 2px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--primary-container) var(--v), var(--outline-variant) var(--v)); content: ""; }
.slider-stack span::after { position: absolute; left: var(--v); bottom: -2px; width: 11px; height: 11px; margin-left: -5px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 8px var(--primary-container); content: ""; }

.export-visual { display: grid; grid-template-columns: 1fr 1fr; align-content: center; gap: 12px; padding: 24px; background: radial-gradient(circle at 70% 30%, color-mix(in srgb, var(--on-tertiary-container) 30%, transparent), transparent 60%), var(--surface-lowest); }
.file-chip { display: grid; gap: 4px; padding: 14px; border: 1px solid var(--outline-variant); border-radius: 12px; background: var(--surface-container); }
.file-chip b { font: 700 1.1rem/1 "Sora", sans-serif; }
.file-chip i { color: var(--outline); font: normal 500 0.65rem/1.2 "JetBrains Mono", monospace; }
.file-chip.is-hero { border-color: var(--primary-container); background: color-mix(in srgb, var(--primary-container) 12%, var(--surface-container)); }
.file-chip.is-hero i { color: var(--primary-fixed); }

/* Gallery */
.gallery-section { position: relative; background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--on-tertiary-container) 18%, transparent), transparent 60%), var(--surface-lowest); }
.gallery-heading { display: grid; grid-template-columns: 1.1fr 0.9fr; align-items: end; gap: 48px; margin-bottom: 56px; }
.gallery-heading h2 { margin: 0; font-size: clamp(2.4rem, 4.6vw, 4.25rem); }
.gallery-heading > p { margin: 0; font-size: 1.1rem; }
.gallery-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.gallery-card .compare-media { aspect-ratio: 3 / 2; border: 1px solid var(--glass-border); border-radius: var(--radius-xl); }
.gallery-card { display: grid; grid-template-rows: 1fr auto; gap: 14px; border-radius: var(--radius-xl); }
.gallery-card .compare-handle { width: 44px; height: 44px; }
.gallery-card .compare-handle svg { width: 24px; }
.gallery-card figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.gallery-card figcaption b { font-family: "Sora", sans-serif; }
.gallery-card figcaption span { color: var(--outline); font: 500 0.72rem/1.4 "JetBrains Mono", monospace; }
.gallery-credit { margin: 36px 0 0; color: var(--outline); font-size: 0.9rem; }
.gallery-credit a { color: var(--on-surface-variant); }

/* Features bento */
.feature-copy { max-width: 820px; }
.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 0; padding: 0; list-style: none; }
.bento-tile { position: relative; display: flex; flex-direction: column; overflow: hidden; padding: 28px; border: 1px solid var(--outline-variant); border-radius: var(--radius-xl); background: linear-gradient(160deg, var(--surface-container), var(--surface-low)); }
.bento-tile h3 { margin: 0 0 8px; font-size: 1.3rem; }
.bento-tile p { margin: 0; }
.bento-hero { grid-column: span 2; grid-row: span 2; gap: 28px; background: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--primary-container) 14%, transparent), transparent 50%), linear-gradient(160deg, var(--surface-container), var(--surface-low)); }
.bento-hero h3 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.bento-hero .bento-text { max-width: 560px; }
.bento-hero .card-detail { margin-bottom: 12px; color: var(--primary-fixed-dim); }
.bento-shot { margin-top: auto; margin-right: -28px; margin-bottom: -28px; border-radius: var(--radius-lg) 0 0 0; }
.bento-visual { position: relative; height: 128px; margin-bottom: 24px; overflow: hidden; border-radius: var(--radius-md); background: var(--surface-lowest); }
.folder-visual { display: grid; align-content: center; gap: 6px; padding: 16px; font: 500 0.72rem/1 "JetBrains Mono", monospace; }
.folder-visual span { padding: 8px 10px; border-radius: 8px; color: var(--on-surface-variant); }
.folder-visual span:nth-child(2) { margin-left: 16px; }
.folder-visual span:nth-child(3) { margin-left: 32px; color: var(--outline); }
.folder-visual .is-open { background: color-mix(in srgb, var(--primary-container) 14%, transparent); color: var(--primary-fixed); }
.cut-visual { display: flex; align-items: center; justify-content: center; gap: 12px; }
.cut-visual span { display: grid; place-items: center; height: 38px; padding-inline: 12px; border-radius: 10px; background: var(--surface-container); font: 700 0.9rem/1 "Sora", sans-serif; }
.cut-visual .pick { width: 38px; padding: 0; background: var(--primary-container); color: var(--on-primary); }
.cut-visual .stars { color: #ffd36b; letter-spacing: 0.1em; }
.cut-visual .label { width: 22px; padding: 0; border-radius: 50%; background: var(--secondary-container); box-shadow: 0 0 14px var(--secondary-container); height: 22px; }
.cut-visual .pair { color: var(--primary-fixed); font-family: "JetBrains Mono", monospace; font-size: 0.8rem; }
.mask-visual img { width: 100%; height: 100%; object-fit: cover; }
.mask-ring { position: absolute; left: 58%; top: 16%; width: 42%; height: 70%; border: 2px dashed var(--primary); border-radius: 50%; box-shadow: 0 0 0 18px color-mix(in srgb, var(--primary-container) 10%, transparent); }
.mask-linear { position: absolute; inset: 0 0 48%; background: linear-gradient(to bottom, color-mix(in srgb, var(--warm) 34%, transparent), transparent); border-bottom: 1px dashed var(--warm); }
.version-visual { display: flex; align-items: center; justify-content: center; padding-left: 36px; }
.version-visual span { width: 58px; height: 74px; display: grid; place-items: end center; margin-left: -34px; padding-bottom: 8px; border: 1px solid var(--outline-variant); border-radius: 8px; background: linear-gradient(170deg, var(--surface-high), var(--surface-container)); box-shadow: -6px 0 16px rgb(0 0 0 / 40%); color: var(--outline); font: 500 0.65rem/1 "JetBrains Mono", monospace; transform: rotate(calc(var(--i, 0) * 1deg)); }
.version-visual span:nth-child(odd) { --i: -3; }
.version-visual span:nth-child(even) { --i: 3; }
.version-visual .is-current { border-color: var(--primary-container); color: var(--primary-fixed); transform: translateY(-8px); }
.safe-visual { display: flex; align-items: center; justify-content: center; gap: 10px; font: 500 0.7rem/1 "JetBrains Mono", monospace; }
.safe-visual span { padding: 10px 12px; border-radius: 8px; }
.safe-original { border: 1px solid #7dffb2; color: #b6ffd5; }
.safe-arrow { color: var(--outline); }
.safe-copy { background: var(--primary-container); color: var(--on-primary); }

/* Engine beam */
.engine-section { position: relative; overflow: hidden; }
.beam { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin: 0; padding: 72px 0 0; list-style: none; }
.beam::before { position: absolute; top: 20px; left: 0; right: 0; height: 3px; border-radius: 3px; background: var(--spectrum); box-shadow: 0 0 24px color-mix(in srgb, var(--primary-container) 50%, transparent); content: ""; }
.beam::after { position: absolute; top: 13px; left: 0; width: 17px; height: 17px; border-radius: 50%; background: white; box-shadow: 0 0 12px white, 0 0 32px var(--primary-container), 0 0 64px var(--primary-container); content: ""; animation: photon 6s var(--ease-out) infinite; }
@keyframes photon { 0% { left: 0; opacity: 0; } 8% { opacity: 1; } 88% { opacity: 1; } 100% { left: calc(100% - 17px); opacity: 0; } }
.beam li { position: relative; padding: 24px 20px; border: 1px solid var(--outline-variant); border-radius: var(--radius-lg); background: var(--surface-low); }
.beam li::before { position: absolute; top: -58px; left: 22px; width: 11px; height: 11px; border: 2px solid var(--surface); border-radius: 50%; background: var(--on-surface); content: ""; }
.beam li::after { position: absolute; top: -46px; left: 27px; width: 1px; height: 46px; background: linear-gradient(var(--outline), transparent); content: ""; }
.beam span { color: var(--primary-fixed-dim); font: 500 0.72rem/1 "JetBrains Mono", monospace; letter-spacing: 0.1em; }
.beam b { display: block; margin: 16px 0 8px; font: 700 1.1rem/1.3 "Sora", sans-serif; }
.beam p { margin: 0; font-size: 0.95rem; }
.engine-stats { display: grid; grid-template-columns: repeat(4, 1fr); margin: 56px 0 0; border-block: 1px solid var(--outline-variant); }
.engine-stats div { padding: 28px 20px; border-right: 1px solid var(--outline-variant); text-align: center; }
.engine-stats div:last-child { border-right: 0; }
.engine-stats dt { margin-bottom: 8px; color: var(--outline); font: 500 0.7rem/1.2 "JetBrains Mono", monospace; letter-spacing: 0.1em; text-transform: uppercase; }
.engine-stats dd { margin: 0; font: 700 clamp(1.1rem, 1.8vw, 1.5rem)/1.2 "Sora", sans-serif; background: linear-gradient(90deg, var(--primary), var(--primary-container)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* What is new */
.updates-section { border-block: 1px solid var(--outline-variant); background: var(--surface-lowest); }
.updates-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(48px, 7vw, 110px); }
.updates-copy h2 { margin-bottom: 24px; font-size: clamp(2.3rem, 4.2vw, 3.8rem); }
.updates-polish { margin: 0; font-size: 1.05rem; }
.updates-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.updates-list article { padding: 26px; border: 1px solid var(--outline-variant); border-radius: var(--radius-lg); background: var(--surface-low); }
.updates-list h3 { margin: 0 0 10px; font-size: 1.1rem; }
.updates-list p { margin: 0; }

/* Privacy */
.privacy-section { position: relative; overflow: hidden; }
.privacy-section::before { position: absolute; inset: 10% -10% auto auto; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, #7dffb2 16%, transparent), transparent 70%); content: ""; filter: blur(20px); }
.privacy-inner { position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(48px, 8vw, 140px); }
.privacy-copy h2 { font-size: clamp(2.8rem, 6vw, 5.4rem); }
.privacy-facts { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.privacy-facts li { display: grid; grid-template-columns: 52px 1fr; gap: 16px; padding: 26px; border: 1px solid var(--outline-variant); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--surface-low) 80%, transparent); backdrop-filter: blur(10px); }
.privacy-facts > li > span { color: #7dffb2; font: 500 0.8rem/1.6 "JetBrains Mono", monospace; }
.privacy-facts b { font: 700 1.15rem/1.3 "Sora", sans-serif; }
.privacy-facts p { margin: 6px 0 0; }

/* Platform guides */
.platform-guides-section { border-top: 1px solid var(--outline-variant); background: linear-gradient(180deg, var(--surface-lowest), var(--surface)); }
.guide-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.guide-card { min-height: 320px; display: flex; flex-direction: column; padding: 32px; border: 1px solid var(--outline-variant); border-radius: var(--radius-xl); background: linear-gradient(160deg, var(--surface-container), var(--surface-low)); color: inherit; text-decoration: none; transition: transform 500ms var(--ease-spring), border-color 300ms ease, box-shadow 300ms ease; }
.guide-card:hover { border-color: color-mix(in srgb, var(--primary-container) 55%, var(--outline-variant)); box-shadow: var(--shadow-brand); transform: translateY(-6px); }
.guide-card-icon { width: 56px; height: 56px; display: grid; place-items: center; margin-bottom: 36px; border-radius: 16px; background: color-mix(in srgb, var(--primary-container) 12%, transparent); color: var(--primary-fixed-dim); }
.guide-card .card-detail { margin: 0; }
.guide-card h3 { margin: 12px 0; font-size: 1.45rem; }
.guide-card .text-link { margin-top: auto; padding-top: 22px; }

/* Open source */
.open-source-section { display: grid; grid-template-columns: 0.8fr 1.2fr; align-items: center; gap: clamp(48px, 9vw, 150px); }
.source-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.source-actions a { position: relative; min-height: 170px; display: flex; flex-direction: column; padding: 26px; border: 1px solid var(--outline-variant); border-radius: var(--radius-lg); background: var(--surface-low); text-decoration: none; transition: border-color 200ms ease, background 200ms ease, transform 400ms var(--ease-spring); }
.source-actions a:hover { border-color: var(--primary-container); background: var(--surface-container); transform: translateY(-4px); }
.source-actions .icon { margin-bottom: auto; color: var(--primary-fixed-dim); }
.source-actions b { margin: 24px 0 6px; font-family: "Sora", sans-serif; }
.source-actions span { color: var(--on-surface-variant); }
.source-actions i { position: absolute; right: 22px; top: 20px; color: var(--primary-fixed-dim); font-style: normal; }

/* Final call to action */
.final-section { position: relative; overflow: hidden; padding-block: 180px 150px; background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--primary-container) 16%, transparent), transparent 55%), var(--surface-lowest); text-align: center; }
.final-orb { position: absolute; top: 56px; left: 50%; width: 88px; height: 88px; display: grid; place-items: center; border-radius: 50%; background: var(--primary-container); color: var(--on-primary); box-shadow: 0 0 0 10px color-mix(in srgb, var(--primary-container) 14%, transparent), 0 0 80px 10px color-mix(in srgb, var(--primary-container) 50%, transparent), 0 0 240px 60px color-mix(in srgb, var(--primary-container) 18%, transparent); transform: translateX(-50%); animation: float 6s ease-in-out infinite; }
.final-orb svg { width: 48px; fill: currentColor; }
@keyframes float { 50% { transform: translate(-50%, -10px); } }
.final-inner { position: relative; max-width: 840px; }
.final-inner h2 { font-size: clamp(2.8rem, 6vw, 5.4rem); }
.final-inner .eyebrow::after { width: 22px; height: 1px; background: currentColor; content: ""; opacity: 0.7; }
.final-inner .button-row { justify-content: center; margin-top: 34px; }

@media (max-width: 980px) {
  .trust-strip { grid-template-columns: repeat(2, 1fr); }
  .workflow-grid { grid-template-columns: 1fr; max-width: 620px; margin-inline: auto; }
  .gallery-heading { grid-template-columns: 1fr; gap: 20px; }
  .gallery-grid { grid-template-columns: 1fr; }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento-hero { grid-row: auto; }
  .beam { grid-template-columns: 1fr; padding: 0 0 0 44px; }
  .beam::before { top: 0; bottom: 0; left: 8px; right: auto; width: 3px; height: auto; background: var(--spectrum-vertical); }
  .beam::after { display: none; }
  .beam li::before { top: 28px; left: -42px; }
  .beam li::after { display: none; }
  .engine-stats { grid-template-columns: repeat(2, 1fr); }
  .engine-stats div:nth-child(2) { border-right: 0; }
  .engine-stats div:nth-child(-n+2) { border-bottom: 1px solid var(--outline-variant); }
  .updates-grid, .privacy-inner, .open-source-section { grid-template-columns: 1fr; }
  .guide-card-grid { grid-template-columns: 1fr; }
  .guide-card { min-height: 0; }
}

@media (max-width: 650px) {
  .hero { padding-top: 64px; }
  .hero h1 { font-size: clamp(3rem, 16vw, 4.6rem); }
  .release-line { font-size: 0.68rem; }
  .hero-stage { margin-top: 64px; }
  .hero-compare, .hero-compare .compare-media { border-radius: var(--radius-lg); }
  .hero-compare .compare-media { aspect-ratio: 4 / 5; }
  .hero-recipe { display: none; }
  .compare-label, .hero-compare .compare-label { top: auto; bottom: 12px; font-size: 0.6rem; }
  .compare-label-before { left: 12px; }
  .compare-label-after { right: 12px; }
  .trust-strip { grid-template-columns: 1fr; margin-top: 64px; }
  .bento { grid-template-columns: 1fr; }
  .bento-hero { grid-column: auto; }
  .updates-list, .source-actions { grid-template-columns: 1fr; }
  .privacy-facts li { grid-template-columns: 1fr; gap: 6px; padding: 22px; }
  .final-section { padding-block: 150px 100px; }
}

.pro-hero { padding-bottom: 84px; }
.pro-visual { padding-bottom: 0; }
.pro-visual .compare { border-radius: var(--radius-2xl); box-shadow: var(--shadow-deep), 0 0 120px -30px color-mix(in srgb, var(--on-tertiary-container) 60%, transparent); }
.pro-visual .compare-media { aspect-ratio: 1200 / 801; border: 1px solid var(--glass-border); border-radius: var(--radius-2xl); }
.pro-proof-strip { margin-top: 88px; border-block: 1px solid var(--outline-variant); background: var(--surface-lowest); }
.pro-proof-strip > div { display: grid; grid-template-columns: repeat(4, 1fr); }
.pro-proof-strip span { display: grid; gap: 6px; padding: 34px 24px; border-right: 1px solid var(--outline-variant); color: var(--on-surface-variant); text-align: center; }
.pro-proof-strip span:last-child { border-right: 0; }
.pro-proof-strip b { font: 700 clamp(1.4rem, 2.4vw, 2rem)/1.2 "Sora", sans-serif; background: linear-gradient(90deg, var(--primary), var(--primary-container)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pro-section .section-heading > p:last-child { font-size: 1.15rem; line-height: 1.65; }
.pro-section-alt { border-block: 1px solid var(--outline-variant); background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--primary-container) 8%, transparent), transparent 60%), var(--surface-lowest); }
.pro-pipeline { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin: 56px 0 0; padding: 0; list-style: none; }
.pro-pipeline::before { position: absolute; inset: -18px 0 auto; height: 3px; border-radius: 3px; background: var(--spectrum); box-shadow: 0 0 24px color-mix(in srgb, var(--primary-container) 50%, transparent); content: ""; }
.pro-pipeline li { min-height: 280px; display: flex; flex-direction: column; padding: 26px 22px; border: 1px solid var(--outline-variant); border-radius: var(--radius-lg); background: linear-gradient(170deg, var(--surface-container), var(--surface-low)); }
.pro-pipeline li > span, .pro-card-index { color: var(--primary-fixed-dim); font: 500 0.72rem/1.4 "JetBrains Mono", monospace; letter-spacing: 0.1em; }
.pro-pipeline b { margin-top: auto; color: var(--on-surface); font: 700 1.1rem/1.4 "Sora", sans-serif; }
.pro-pipeline p { margin: 10px 0 0; font-size: 0.96rem; }
.pro-card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.pro-card { position: relative; min-height: 300px; display: flex; flex-direction: column; overflow: hidden; padding: 34px; border: 1px solid var(--outline-variant); border-radius: var(--radius-xl); background: linear-gradient(160deg, var(--surface-container), var(--surface-low)); transition: border-color 300ms ease, transform 500ms var(--ease-spring); }
.pro-card::before { position: absolute; top: -40%; right: -20%; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, var(--card-glow, color-mix(in srgb, var(--primary-container) 18%, transparent)), transparent 70%); content: ""; }
.pro-card:nth-child(2) { --card-glow: color-mix(in srgb, var(--secondary-container) 16%, transparent); }
.pro-card:nth-child(3) { --card-glow: color-mix(in srgb, #7dffb2 14%, transparent); }
.pro-card:nth-child(4) { --card-glow: color-mix(in srgb, var(--warm) 16%, transparent); }
.pro-card:hover { border-color: color-mix(in srgb, var(--primary-container) 45%, var(--outline-variant)); transform: translateY(-4px); }
.pro-card h3 { position: relative; max-width: 480px; margin: auto 0 14px; font-size: clamp(1.5rem, 2.4vw, 2.2rem); }
.pro-card p { position: relative; max-width: 600px; margin-bottom: 0; font-size: 1.05rem; }
.pro-scope-section { display: grid; grid-template-columns: minmax(300px, 0.75fr) minmax(520px, 1.25fr); align-items: center; gap: clamp(48px, 7vw, 110px); }
.pro-scope-copy h2, .pro-raw-grid h2, .pro-boundary-grid h2 { margin-bottom: 24px; font-size: clamp(2.3rem, 4.2vw, 3.9rem); }
.pro-scope-copy > p:not(.eyebrow), .pro-raw-grid > div > p:not(.eyebrow) { font-size: 1.1rem; line-height: 1.65; }
.pro-chip-list { display: flex; flex-wrap: wrap; gap: 9px; margin: 28px 0 0; padding: 0; list-style: none; }
.pro-chip-list li { padding: 8px 12px; border: 1px solid var(--outline-variant); border-radius: 999px; background: var(--surface-low); color: var(--on-surface-variant); font: 500 0.72rem/1.3 "JetBrains Mono", monospace; }
.pro-raw-grid { display: grid; grid-template-columns: minmax(300px, 0.8fr) minmax(420px, 1fr); gap: clamp(52px, 9vw, 150px); }
.pro-feature-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 0; padding: 0; list-style: none; }
.pro-raw-grid .pro-feature-list { grid-template-columns: 1fr; }
.pro-feature-list li { display: grid; align-content: start; gap: 8px; padding: 26px; border: 1px solid var(--outline-variant); border-radius: var(--radius-lg); background: var(--surface-low); }
.pro-feature-list b { color: var(--on-surface); font: 700 1.08rem/1.35 "Sora", sans-serif; }
.pro-feature-list span { color: var(--on-surface-variant); }
.pro-delivery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.pro-delivery-grid article { display: grid; align-content: start; gap: 10px; padding: 28px 24px; border: 1px solid var(--outline-variant); border-radius: var(--radius-lg); background: linear-gradient(160deg, var(--surface-container), var(--surface-low)); }
.pro-delivery-grid b { color: var(--primary-fixed-dim); font: 700 1.1rem/1.3 "Sora", sans-serif; }
.pro-delivery-grid span { color: var(--on-surface-variant); }
.pro-boundary-section { padding-block: 104px; border-top: 1px solid var(--outline-variant); background: var(--surface-lowest); }
.pro-boundary-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(48px, 9vw, 150px); align-items: start; }
.pro-boundary-grid p:not(.eyebrow) { margin-bottom: 24px; font-size: 1.1rem; line-height: 1.65; }

@media (max-width: 980px) {
  .pro-scope-section, .pro-raw-grid, .pro-boundary-grid { grid-template-columns: 1fr; }
  .pro-pipeline { grid-template-columns: 1fr; padding-left: 28px; }
  .pro-pipeline::before { inset: 0 auto 0 0; width: 3px; height: auto; background: var(--spectrum-vertical); }
  .pro-pipeline li { min-height: 0; }
  .pro-pipeline b { margin-top: 18px; }
  .pro-scope-shot { order: -1; }
  .pro-delivery-grid, .pro-feature-list { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 650px) {
  .pro-visual .compare, .pro-visual .compare-media { border-radius: var(--radius-lg); }
  .pro-proof-strip > div, .pro-card-grid, .pro-delivery-grid, .pro-feature-list { grid-template-columns: 1fr; }
  .pro-proof-strip span { border-right: 0; border-bottom: 1px solid var(--outline-variant); }
  .pro-proof-strip span:last-child { border-bottom: 0; }
  .pro-card { min-height: 240px; padding: 28px; }
}