:root {
  color-scheme: dark;
  --bg: #0d0a12;
  --surface: #17121e;
  --ink: #faf5ef;
  --muted: #b7afbf;
  --line: #302738;
  --blue: #d5b8ff;
  --mint: #ffbf86;
}
* { box-sizing: border-box; }
html { scroll-padding-top: 108px; }
body {
  position: relative;
  isolation: isolate;
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  /* Native Apple typography matches the actual Mac/iPhone product. */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.7;
  letter-spacing: .1px;
  -webkit-font-smoothing: antialiased;
}
/* Ambient light and a fading fine grid: CSS-only, behind all content. */
body::before, body::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
body::before {
  background:
    radial-gradient(ellipse 65% 650px at 12% 160px, #e8945122, transparent 75%),
    radial-gradient(ellipse 50% 520px at 95% 550px, #a077d11c, transparent 75%),
    radial-gradient(ellipse 75% 450px at 50% 1250px, #ffbf8610, transparent 80%),
    radial-gradient(ellipse 55% 650px at 0% 82%, #e8945114, transparent 75%);
}
body::after {
  background-image:
    linear-gradient(#ffbf860a 1px, transparent 1px),
    linear-gradient(90deg, #ffbf860a 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: linear-gradient(#0008, transparent 1000px);
  mask-image: linear-gradient(#0008, transparent 1000px);
}
a { color: var(--blue); text-underline-offset: 5px; }
a:hover { color: var(--ink); }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--mint); outline-offset: 6px; }
img { display: block; max-width: 100%; height: auto; }
.wrap { width: min(1120px, calc(100% - 64px)); margin-inline: auto; }
.skip { position: fixed; left: 24px; top: -100px; background: var(--ink); color: var(--bg); padding: 12px 18px; z-index: 10; border-radius: 8px; }
.skip:focus { top: 12px; }
header { position: sticky; top: 20px; z-index: 5; margin-top: 20px; background: transparent; }
.header-inner {
  display: flex; justify-content: space-between; align-items: center;
  width: min(1000px, calc(100% - 48px)); min-height: 72px; gap: 24px;
  padding: 10px 20px;
  background: rgba(23, 18, 30, .65);
  border: 1px solid #ffffff24; border-radius: 20px;
  box-shadow: 0 12px 36px #0005, inset 0 1px 0 #ffffff0a;
  -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%);
}
.brand { min-height: 44px; }
.brand { display: flex; align-items: center; gap: 11px; font-size: 20px; font-weight: 650; letter-spacing: -.6px; text-decoration: none; color: var(--ink); }
.brand img { width: 36px; height: 36px; border-radius: 9px; box-shadow: 0 0 0 1px #ffffff14, 0 4px 12px #0006; }
nav { display: flex; gap: 28px; align-items: center; }
nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 500; text-decoration: none; color: var(--muted); }
nav a[aria-current=page] { color: var(--ink); }
nav .language { padding: 0 17px; border: 1px solid #ffffff1c; border-radius: 999px; color: var(--ink); box-shadow: inset 0 1px 0 #ffffff08; }
.hero { padding: 100px 0 60px; text-align: center; }
.hero > div { max-width: 900px; margin-inline: auto; }
.eyebrow { color: var(--mint); font-size: 12px; line-height: 1.5; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; margin: 0 0 26px; }
.hero .eyebrow { display: inline-block; padding: 8px 16px; border: 1px solid #ffbf8628; border-radius: 999px; background: #ffbf8607; }
h1 { font-size: clamp(44px, 5.7vw, 76px); line-height: 1.06; font-weight: 650; letter-spacing: -3px; text-wrap: balance; margin: 0 0 28px; }
h2 { font-size: clamp(34px, 3.6vw, 48px); line-height: 1.12; font-weight: 550; letter-spacing: -1.7px; text-wrap: balance; margin: 0 0 24px; }
h3 { font-size: 23px; line-height: 1.3; font-weight: 550; letter-spacing: -.55px; }
.lead { font-size: 20px; line-height: 1.65; color: var(--muted); max-width: 690px; }
.hero h1 span { display: block; }
.hero .lead { margin: 0 auto; }
.actions { display: flex; justify-content: center; gap: 24px; align-items: center; flex-wrap: wrap; margin: 32px 0 20px; }
.actions > a:not(.button) { min-height: 44px; display: inline-flex; align-items: center; font-size: 15px; color: #d0d3d9; text-decoration: none; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 24px; background: #f1f3f5; color: #111316; border: 1px solid #fff; border-radius: 999px; font-size: 15px; font-weight: 650; letter-spacing: -.15px; text-decoration: none; box-shadow: 0 2px 6px #0004, inset 0 1px 0 #fff; }
.button:hover { color: #111316; background: #fff; box-shadow: 0 0 24px #ffffff12; }
.note { color: var(--muted); font-size: 13px; line-height: 1.7; }
.hero .note { margin-bottom: 0; }
.product { margin: 0; padding: 16px 0 100px; }
.product-stage { position: relative; padding: 24px 0 60px; isolation: isolate; }
.product-stage::before { content: ""; position: absolute; z-index: -1; inset: -60px -20px -30px; background: radial-gradient(ellipse at 50% 45%, #ffbf861a, transparent 65%); pointer-events: none; }
.desktop { width: 94%; border: 1px solid #ffffff26; border-radius: 13px; box-shadow: 0 32px 80px #0009, 0 0 0 5px #ffffff03; }
.phone { position: absolute; z-index: 1; width: 23%; right: 0; bottom: 0; border: 2px solid #505257; border-radius: 30px; box-shadow: 0 18px 50px #000b, 0 0 0 5px #111; }
.caption { display: flex; justify-content: space-between; gap: 28px; margin-top: 26px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.section { padding: 104px 0; border-top: 1px solid var(--line); }
.section-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 100px; }
.section p { color: var(--muted); }
.section-grid > div > p:first-of-type { margin-top: 0; }
.steps { list-style: none; padding: 0; margin: 0; counter-reset: step; }
.steps li { display: grid; grid-template-columns: 36px 1fr; gap: 18px; padding: 28px 0; border-bottom: 1px solid var(--line); }
.steps li:first-child { padding-top: 0; }
.steps li:last-child { border-bottom: 0; padding-bottom: 0; }
.steps li::before { counter-increment: step; content: counter(step, decimal-leading-zero); color: var(--mint); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; padding-top: 6px; }
.steps h3 { margin: 0 0 12px; }
.steps p { margin: 0; font-size: 16px; }
.section-grid:not(#workflow) { position: relative; }
.section-grid:not(#workflow)::before { content: ""; position: absolute; width: 84px; height: 2px; background: var(--mint); top: -1px; }
.section-grid:not(#workflow) a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; margin-top: 10px; }
.requirements { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 26px; }
.requirements > div { padding: 30px 32px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: inset 0 1px 0 #ffffff04; }
.requirements h3 { margin: 0 0 16px; }
.requirements p { margin: 0; font-size: 16px; }
footer { padding: 32px 0 42px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.footer-inner { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.footer-links { display: flex; gap: 24px; flex-wrap: wrap; }
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; color: var(--muted); }
.footer-links a:hover { color: var(--ink); }
.document { max-width: 820px; padding: 90px 0 100px; overflow-wrap: anywhere; }
.document h1 { font-size: clamp(40px, 5vw, 62px); letter-spacing: -2px; }
.document .lead { font-size: 20px; }
.document h2 { font-size: 26px; line-height: 1.3; letter-spacing: -.6px; margin: 54px 0 18px; }
.document p, .document li { color: var(--muted); }
.document strong { color: #e0e3e8; font-weight: 600; }
.document ul { padding-left: 24px; }
.document li { margin-bottom: 8px; }
.policy-summary { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 28px 32px; margin: 36px 0; }
.policy-summary p { margin: 0; }
.document .date { font-size: 13px; }
.contact { padding: 28px 32px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); margin: 36px 0 54px; }
.contact .address { display: block; margin-top: 18px; overflow-wrap: anywhere; }
.contact .note { margin-bottom: 0; }
details { border-bottom: 1px solid var(--line); padding: 12px 0; }
summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; cursor: pointer; font-size: 17px; font-weight: 500; min-height: 56px; padding: 10px 0; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; color: var(--muted); font-size: 24px; font-weight: 300; flex-shrink: 0; }
details[open] summary::after { content: "−"; }
details p { margin: 8px 32px 22px 0; font-size: 16px; }
code { font-size: .9em; }
@media (max-width: 900px) {
  .hero { padding-top: 76px; }
  .section-grid { gap: 48px; }
  .section { padding: 76px 0; }
  nav { gap: 20px; }
  .phone { border-radius: 24px; }
}
@media (max-width: 600px) {
  html { scroll-padding-top: 160px; }
  .wrap { width: calc(100% - 40px); }
  header { top: 12px; margin-top: 12px; }
  .header-inner { width: calc(100% - 24px); flex-wrap: wrap; gap: 4px; padding: 10px 12px; min-height: 0; border-radius: 18px; }
  .brand { font-size: 19px; }
  .brand img { width: 32px; height: 32px; }
  nav { width: 100%; justify-content: space-between; gap: 8px; }
  nav a { font-size: 13px; }
  nav .language { padding: 0 12px; }
  .hero { padding: 62px 0 32px; }
  h1 { font-size: clamp(38px, 10vw, 54px); letter-spacing: -1.7px; line-height: 1.1; }
  h2 { font-size: 36px; letter-spacing: -1.2px; }
  .hero .eyebrow { font-size: 10px; letter-spacing: 1.6px; margin-bottom: 22px; }
  .lead, .document .lead { font-size: 17px; line-height: 1.7; }
  .actions { gap: 10px 20px; margin-top: 24px; }
  .hero .note { font-size: 12px; }
  .product { padding-bottom: 58px; }
  .product-stage { padding: 16px 0 28px; }
  .product-stage::before { inset-inline: 0; }
  .desktop { width: 100%; border-radius: 6px; }
  .phone { position: static; width: 46%; margin: 24px auto 0; border-radius: 18px; border-width: 1px; box-shadow: 0 8px 20px #000a, 0 0 0 2px #111; }
  .product-stage { display: flex; flex-direction: column; }
  .desktop { order: -1; }
  .caption { flex-direction: column; gap: 6px; margin-top: 20px; font-size: 12px; }
  .section { padding: 60px 0; }
  .section-grid { grid-template-columns: 1fr; gap: 30px; }
  .steps li { gap: 12px; grid-template-columns: 30px 1fr; }
  .requirements { grid-template-columns: 1fr; gap: 16px; }
  .requirements > div { padding: 24px; }
  .document { padding: 56px 0 72px; }
  .document h1 { font-size: 40px; letter-spacing: -1.4px; }
  .document h2 { margin-top: 40px; }
  .contact, .policy-summary { padding: 24px; }
  .footer-inner { gap: 8px; }
  .footer-links { gap: 20px; }
}
@media (max-width: 360px) {
  nav { gap: 4px; }
  nav a { font-size: 12px; }
  nav .language { padding-inline: 8px; }
}
@media (prefers-reduced-motion: no-preference) {
  a { transition: color .16s ease, background .16s ease, box-shadow .16s ease; }
}
@media print {
  header { position: static; }
  body { background: white; color: black; }
  body::before, body::after { display: none; }
  .document p, .document li, .document strong, .note { color: #333; }
  .document { max-width: none; padding-block: 20px; }
  details > p { display: block; }
}

/* Fictional, code-native product illustration; never a captured cluster. */
.button { background: #ffd2a5; border-color: #ffe3c7; color: #25150b; box-shadow: 0 2px 6px #0004, inset 0 1px 0 #ffeddc; }
.button:hover { background: #ffe3c7; color: #25150b; }
.workbench { background: #15131b; overflow: hidden; font-size: 14px; line-height: 1.4; }
.windowbar { display: flex; justify-content: space-between; align-items: center; height: 46px; padding: 0 20px; background: #201a29; color: #d6cede; font-size: 12px; }
.traffic { letter-spacing: 4px; color: #a49aaa; font-size: 10px; }
.connection-dot { color: #bad7b6; font-size: 11px; }
.workbench-body { display: grid; grid-template-columns: 27% 1fr; }
.cluster-panel { position: relative; background: #1b1721; padding: 25px 16px 60px; border-right: 1px solid #332c3a; }
.cluster-panel > p { margin: 0 0 14px; font-size: 11px; text-transform: uppercase; letter-spacing: 1.4px; color: #928898; }
.cluster-active { background: #ffb57216; border: 1px solid #ffb57226; border-radius: 9px; padding: 13px 12px; margin: 0 0 28px; color: #ffd2a5; }
.cluster-active small { display: block; color: #c0ac9b; font-size: 10px; margin-top: 6px; }
.namespace-selected, .namespace-item { padding: 10px 12px; font-size: 12px; border-radius: 8px; color: #b8aebf; }
.namespace-selected { background: #9876bc24; color: #ddc3fc; }
.sidebar-bottom { position: absolute; bottom: 23px; left: 28px; color: #978a9f; font-size: 11px; }
.pod-panel { padding: 24px 36px 32px; }
.panel-title { display: flex; align-items: center; justify-content: space-between; margin: 0 0 22px; }
.panel-title small { font-size: 11px; color: #a697af; }
.panel-title h3 { font-size: 25px; margin: 7px 0 0; }
.pod-total { border: 1px solid #403348; color: #cfb6e9; padding: 6px 12px; border-radius: 10px; }
.search-illustration { padding: 11px 15px; border: 1px solid #3a3042; border-radius: 9px; color: #a697af; font-size: 12px; margin-bottom: 14px; }
.pod-row { display: grid; grid-template-columns: 8px 1fr 30px 40px; align-items: center; gap: 11px; padding: 15px 0; border-bottom: 1px solid #2e2635; font-size: 12px; }
.pod-row:first-of-type { color: #ffd2a5; }
.pod-row small { display: block; font-size: 10px; color: #9b8fa6; margin-top: 5px; }
.pod-dot { width: 6px; height: 6px; background: #b1d4a4; border-radius: 50%; }
.ready-count { color: #b1d4a4; font-size: 11px; }
.pod-usage { text-align: right; color: #b8aebf; }
.metric-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 23px; }
.metric { border: 1px solid #3c2d29; background: #211812; padding: 17px; border-radius: 12px; }
.metric small, .phone-metric small { font-size: 10px; color: #cdb09a; text-transform: uppercase; letter-spacing: .9px; }
.metric strong, .phone-metric strong { display: block; color: #ffc185; font-size: 27px; font-weight: 600; margin: 9px 0; }
.metric strong span, .phone-metric strong span { font-size: 11px; color: #bdae9f; font-weight: 400; }
.graph { display: flex; gap: 3px; height: 59px; align-items: flex-end; border-bottom: 1px solid #b683572c; margin-top: 12px; }
.graph i { flex: 1; border-top: 2px solid #ffc185; background: linear-gradient(#dd914246, #dd914208); border-radius: 1px 1px 0 0; }
.ram { border-color: #3c2e4e; background: #21192a; }
.ram small { color: #bb9bdc; }
.ram strong { color: #d2a4ff; }
.ram .graph { border-color: #a880d130; }
.ram .graph i { border-color: #d2a4ff; background: linear-gradient(#b47be450, #b47be408); }
.phone-illustration { padding: 21px 20px; background: #161219; color: #f7f0fa; min-width: 195px; font-size: 12px; }
.phone-top { display: flex; justify-content: space-between; font-size: 10px; margin-bottom: 24px; font-weight: 600; }
.phone-illustration > small { font-size: 9px; text-transform: uppercase; color: #c79dec; letter-spacing: 1.5px; }
.phone-illustration h3 { font-size: 18px; margin: 10px 0 12px; }
.state-pill { font-size: 9px; color: #b1d4a4; background: #8ca68318; display: inline-block; border: 1px solid #89b8742b; border-radius: 99px; padding: 5px 9px; }
.phone-metric { margin-top: 19px; border: 1px solid #3c2d29; border-radius: 10px; padding: 12px; background: #211812; }
.phone-metric.ram { background: #21192a; border-color: #3c2e4e; }
.phone-metric strong { font-size: 23px; margin-bottom: 0; }
.phone-metric .graph { height: 32px; gap: 2px; margin-top: 8px; }
.phone-tools { display: flex; gap: 10px; margin-top: 21px; }
.phone-tools span { flex: 1; padding: 8px 5px; border-radius: 7px; border: 1px solid #55383c; text-align: center; color: #ffc185; font-size: 10px; }
.release { text-align: center; }
.release h2 { font-size: clamp(26px, 3.5vw, 38px); }
@media (max-width: 900px) {
 .pod-panel { padding: 22px; }
 .cluster-panel { padding-inline: 12px; }
 .pod-row { font-size: 10px; }
 .phone-illustration { padding: 18px 15px; min-width: 180px; }
 .metric { padding: 12px; }
 .sidebar-bottom { left: 20px; }
}
@media (max-width: 600px) {
 .windowbar { padding: 0 12px; font-size: 10px; height: 35px; }
 .traffic { font-size: 8px; letter-spacing: 1px; }
 .connection-dot { font-size: 8px; }
 .workbench-body { grid-template-columns: 1fr; }
 .cluster-panel { display: none; }
 .pod-panel { padding: 20px 18px; }
 .panel-title h3 { font-size: 23px; }
 .pod-row { font-size: 11px; }
 .metric strong { font-size: 25px; }
 .metric-cards { gap: 10px; }
 .phone-illustration { width: 60%; max-width: 250px; padding: 20px; }
 .phone-illustration h3 { font-size: 18px; }
 .phone-metric .graph { height: 38px; }
}