/* Project Blueprint — redesign draft D: Apple product-page canon (site/DESIGN.md).
   White and #f5f5f7 chapters, true-black pro chapters, one blue, system type,
   and the real app window given the whole stage. Borrowed from the CAD vendors:
   a sticky bar that always carries the price and the buy button. */

:root {
  color-scheme: light;
  --white: #ffffff; --gray: #f5f5f7; --black: #000000; --tile-dark: #1d1d1f;
  --ink: #1d1d1f; --ink-2: #6e6e73; --hair: #d2d2d7; --fill: #e8e8ed; --fill-h: #dededf;
  --blue: #0071e3; --blue-h: #0077ed; --link: #0066cc;
  --bg: var(--white); --tile: var(--gray);
  --ok: #1a7f37; --bad: #b3282d;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", "Segoe UI", system-ui, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --gutter: clamp(20px, 4vw, 44px);
  --sec: clamp(88px, 10vw, 140px);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --win: 0 24px 48px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06);
}
.dark { --ink: #f5f5f7; --ink-2: #a1a1a6; --hair: #424245; --fill: rgba(255, 255, 255, 0.14); --fill-h: rgba(255, 255, 255, 0.22); --link: #2997ff; --bg: var(--black); --tile: var(--tile-dark); background: var(--black); color: var(--ink); }
.dark :focus-visible { outline-color: rgba(120, 180, 255, 0.9); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 64px; }
body { margin: 0; background: var(--white); color: var(--ink); font: 400 1.0625rem/1.47 var(--sans); letter-spacing: -0.01em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; accent-color: var(--blue); }
::selection { background: rgba(0, 113, 227, 0.22); }
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid rgba(0, 113, 227, 0.6); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
p { margin: 0; }
small { font-size: 0.875rem; }
b, strong { font-weight: 600; }
[hidden] { display: none !important; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 60; padding: 10px 16px; background: var(--blue); color: #fff; border-radius: 980px; }
.skip-link:focus { top: 8px; }
.wrap { width: min(100% - 2 * var(--gutter), 1120px); margin-inline: auto; }
.narrow { width: min(100% - 2 * var(--gutter), 980px); margin-inline: auto; }

/* nav: one bar, always carrying the buy button */
.site-nav { position: sticky; top: 0; z-index: 40; background: rgba(255, 255, 255, 0.8); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
.nav-inner { display: flex; align-items: center; gap: 28px; min-height: 52px; width: min(100% - 2 * var(--gutter), 1120px); margin-inline: auto; }
.nav-brand { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-size: 1.0625rem; font-weight: 600; white-space: nowrap; }
.nav-brand:hover { text-decoration: none; }
.nav-brand img { width: 22px; height: 22px; }
.nav-links { display: flex; gap: 26px; margin-left: auto; }
.nav-links a { color: var(--ink); font-size: 0.75rem; opacity: 0.82; white-space: nowrap; padding: 6px 0; }
.nav-links a:hover, .nav-links a[aria-current="page"] { opacity: 1; text-decoration: none; }
.nav-actions { display: flex; align-items: center; gap: 14px; }
.nav-release { font-size: 0.75rem; color: var(--ink-2); white-space: nowrap; }
.nav-price { font-size: 0.75rem; color: var(--ink-2); white-space: nowrap; }
@media (max-width: 860px) {
  .nav-inner { flex-wrap: wrap; gap: 0 12px; }
  .nav-brand { min-height: 48px; }
  .nav-actions { margin-left: auto; }
  .nav-links { order: 3; width: calc(100% + 2 * var(--gutter)); margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); gap: 22px; border-top: 1px solid rgba(0, 0, 0, 0.08); overflow-x: auto; scrollbar-width: none; }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a { padding: 11px 0; }
  .nav-release, .nav-price { display: none; }
  html { scroll-padding-top: 110px; }
}

/* buttons */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 11px 22px; border: 0; border-radius: 980px; background: var(--fill); color: var(--ink); font: 400 1.0625rem/1.2 var(--sans); letter-spacing: -0.01em; text-align: center; cursor: pointer; transition: background-color 0.2s var(--ease); }
.button:hover { background: var(--fill-h); text-decoration: none; }
.button-primary { background: var(--blue); color: #fff; }
.button-primary:hover { background: var(--blue-h); }
.button-sm, .button-small { min-height: 30px; padding: 5px 13px; font-size: 0.75rem; }
.button-large { min-height: 52px; padding: 14px 28px; }
.button-full { width: 100%; }
.button .price { opacity: 0.85; }
.button-row { display: flex; flex-wrap: wrap; gap: 12px; }
.more { font-size: 1.0625rem; }
.more::after { content: " ›"; }

/* type */
.display { font-size: clamp(2.75rem, 6.6vw, 5.25rem); font-weight: 700; line-height: 1.04; letter-spacing: -0.025em; }
.h2 { font-size: clamp(2rem, 4.6vw, 3.5rem); font-weight: 700; line-height: 1.07; letter-spacing: -0.022em; }
.h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 600; line-height: 1.17; letter-spacing: -0.015em; }
.intro { margin-top: 18px; font-size: clamp(1.1875rem, 2vw, 1.5rem); line-height: 1.38; color: var(--ink-2); font-weight: 400; }
.fine { font-size: 0.8125rem; line-height: 1.5; color: var(--ink-2); }
.fine + .fine { margin-top: 8px; }
.center { text-align: center; }
.center .intro, .center .fine { margin-inline: auto; }
.intro { max-width: 34em; }

/* chapters */
.sec { padding-block: var(--sec); }
.gray { background: var(--gray); --bg: var(--gray); --tile: var(--white); }
.head { max-width: 860px; }
.center .head, .head.center { margin-inline: auto; }

/* hero */
.hero { padding-top: clamp(56px, 8vw, 110px); padding-bottom: var(--sec); overflow: hidden; }
.hero .name { font-size: clamp(1.25rem, 2vw, 1.75rem); font-weight: 600; color: var(--ink-2); margin-bottom: 10px; }
.hero .display { margin-inline: auto; }
.hero .intro { margin-top: 22px; }
.hero-cta { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 14px 22px; justify-content: center; align-items: center; }
.hero .fine { margin-top: 20px; max-width: 46em; }
.window { margin: clamp(48px, 7vw, 88px) auto 0; width: min(100% - 2 * var(--gutter), 1240px); border-radius: 12px; overflow: hidden; background: #0e0f12; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 40px 100px rgba(0, 0, 0, 0.6); transform-origin: 50% 0; transform: scale(calc(0.88 + var(--p, 1) * 0.12)); will-change: transform; }
.window img { width: 100%; }
.readout { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin: clamp(48px, 6vw, 80px) 0 0; padding: 0; list-style: none; text-align: center; }
.readout b { display: block; font-size: clamp(1.75rem, 4.4vw, 3.5rem); font-weight: 700; line-height: 1.05; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.readout span { display: block; margin-top: 6px; font-size: 0.875rem; color: var(--ink-2); }
.readout-note { margin-top: 26px; }
@media (max-width: 720px) { .readout { grid-template-columns: repeat(2, 1fr); row-gap: 28px; } .readout li:last-child { grid-column: 1 / -1; } }

/* tiles */
.tiles { display: grid; gap: 20px; margin-top: clamp(40px, 5vw, 64px); }
.tiles-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tiles-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tile { background: var(--tile); border-radius: 28px; padding: clamp(26px, 3.2vw, 40px); display: flex; flex-direction: column; text-align: left; transition: box-shadow 0.3s var(--ease); }
.tile p { margin-top: 10px; color: var(--ink-2); font-size: 0.9375rem; line-height: 1.5; }
.tile ul { margin: 14px 0 0; padding: 0; list-style: none; color: var(--ink-2); font-size: 0.9375rem; line-height: 1.5; }
.tile li + li { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--hair); }
.tile-wide { grid-column: 1 / -1; }
.tile-dark { background: var(--tile-dark); color: #f5f5f7; --ink-2: #a1a1a6; --hair: #424245; --link: #2997ff; --fill: rgba(255, 255, 255, 0.14); --fill-h: rgba(255, 255, 255, 0.22); }
@media (max-width: 960px) { .tiles-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tiles-3 { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .tiles-4 { grid-template-columns: 1fr; } }

.plat .h3 { font-size: 1.75rem; }
.plat-req { min-height: 2.9em; }
.plat-actions { display: grid; gap: 10px; margin-top: 22px; }
.plat-tag { font-size: 0.75rem; font-weight: 600; color: var(--ink-2); margin-left: 6px; vertical-align: 0.3em; }
.meter { margin-top: 18px; }
.meter-bar { height: 4px; border-radius: 4px; background: var(--fill); overflow: hidden; }
.meter-bar span { display: block; height: 100%; width: 0; background: var(--blue); }
.tile .meter-text { font-size: 0.8125rem; margin-top: 8px; }

/* media chapters */
.media { margin: clamp(40px, 5vw, 72px) auto 0; width: min(100% - 2 * var(--gutter), 1120px); position: relative; }
.media img { width: 100%; border-radius: 16px; box-shadow: var(--win); background: #fff; }
.dark .media img { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 30px 80px rgba(0, 0, 0, 0.6); }
.pin { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); padding: 8px 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.96); color: #1d1d1f; font-size: 0.875rem; font-weight: 600; white-space: nowrap; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); font-variant-numeric: tabular-nums; }
.pin small { font-size: 0.75rem; font-weight: 400; color: #6e6e73; margin-left: 4px; }
@media (max-width: 600px) { .pin { display: none; } }
.specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin: clamp(40px, 5vw, 64px) 0 0; text-align: left; }
.specs.two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; margin-inline: auto; }
.specs > div { padding-top: 18px; border-top: 1px solid var(--hair); }
.specs dt { font-size: 1.1875rem; font-weight: 600; letter-spacing: -0.015em; }
.specs dd { margin: 6px 0 0; color: var(--ink-2); font-size: 0.9375rem; line-height: 1.5; }
@media (max-width: 720px) { .specs, .specs.two { grid-template-columns: 1fr; gap: 20px; } }
.strip { overflow-x: auto; border-radius: 16px; }
.strip img { min-width: 760px; border-radius: 0; }

.values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px) 32px; margin: clamp(44px, 6vw, 80px) 0 0; text-align: center; }
.values dt { font-size: clamp(1.75rem, 3.6vw, 2.75rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; }
.values dd { margin: 6px 0 0; color: var(--ink-2); font-size: 0.9375rem; }
@media (max-width: 560px) { .values { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* pricing */
.price-card { width: min(100%, 560px); margin: clamp(40px, 5vw, 64px) auto 0; background: var(--white); border-radius: 28px; padding: clamp(28px, 4vw, 48px); text-align: center; box-shadow: var(--win); }
.price-card .h3 { font-size: 1.5rem; }
.price-card .badge { display: inline-block; margin-top: 8px; font-size: 0.875rem; color: var(--ink-2); }
.price { margin-top: 22px; }
.price strong { display: block; font-size: clamp(4rem, 9vw, 6rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.price span { display: block; margin-top: 8px; color: var(--ink-2); }
.price-card ul { margin: 26px 0; padding: 0; list-style: none; text-align: left; }
.price-card li { padding: 12px 0; border-top: 1px solid var(--hair); }
.price-card li:last-child { border-bottom: 1px solid var(--hair); }
.price-card .button + .button { margin-top: 10px; }
.price-note { margin-top: 18px; }

.cta-final .hero-cta { margin-top: 32px; }
.cta-final .more { display: block; margin-top: 22px; }

/* FAQ */
.faq-list, .faq { max-width: 820px; margin: clamp(32px, 4vw, 56px) auto 0; text-align: left; }
.faq details, .faq-list details { border-top: 1px solid var(--hair); }
.faq details:last-of-type, .faq-list details:last-of-type { border-bottom: 1px solid var(--hair); }
.faq summary, .faq-list summary { display: grid; grid-template-columns: minmax(0, 1fr) 20px; gap: 18px; align-items: center; padding: 20px 0; font-size: clamp(1.0625rem, 1.6vw, 1.3125rem); font-weight: 600; letter-spacing: -0.015em; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker, .faq-list summary::-webkit-details-marker { display: none; }
.faq summary::after, .faq-list summary::after { content: ""; width: 11px; height: 11px; justify-self: center; border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: rotate(45deg) translate(-2px, -2px); transition: transform 0.3s var(--ease); }
.faq details[open] summary::after, .faq-list details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq details p, .faq-list details p { padding: 0 40px 22px 0; color: var(--ink-2); max-width: 62ch; }
.faq .faq-a { padding: 0 40px 22px 0; color: var(--ink-2); } .faq .faq-a p { padding: 0; } .faq .faq-a > * + * { margin-top: 0.7em; }
.faq-more { margin-top: 26px; font-size: 0.9375rem; color: var(--ink-2); }

/* form */
.register-form { width: min(100%, 720px); margin: clamp(32px, 4vw, 56px) auto 0; display: grid; gap: 18px; text-align: left; }
.rf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 560px) { .rf-row { grid-template-columns: 1fr; } }
.rf-field label, .field label { display: block; font-size: 0.875rem; margin-bottom: 6px; color: var(--ink); }
.rf-opt { color: var(--ink-2); } .rf-req { color: #e30000; }
.rf-field input, .rf-field textarea, .rf-field select, .field input, .field select { width: 100%; min-height: 50px; padding: 13px 14px; border: 1px solid var(--hair); border-radius: 12px; background: #fff; color: var(--ink); font: inherit; }
.rf-field textarea { resize: vertical; }
.rf-field ::placeholder { color: var(--ink-2); opacity: 1; }
.rf-field input:focus, .rf-field textarea:focus, .rf-field select:focus, .field input:focus, .field select:focus { outline: 0; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.22); }
.rf-error { color: #e30000; font-size: 0.875rem; margin-top: 6px; }
.rf-hp { position: absolute; left: -9999px; }
.rf-consent { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; font-size: 0.875rem; color: var(--ink-2); }
.rf-consent input { width: 18px; height: 18px; margin: 2px 0 0; }
.rf-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: center; }
.rf-status { font-size: 0.875rem; color: var(--ink-2); }

/* footer */
.site-footer { background: var(--gray); color: var(--ink-2); font-size: 0.75rem; line-height: 1.5; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 3fr)); gap: 28px; width: min(100% - 2 * var(--gutter), 1120px); margin-inline: auto; padding: 40px 0 28px; }
.footer-brand { display: flex; gap: 12px; align-items: flex-start; }
.footer-brand img { width: 28px; height: 28px; }
.footer-brand strong { display: block; color: var(--ink); font-size: 0.875rem; }
.footer-brand span { display: block; }
.footer-col strong { display: block; color: var(--ink); margin-bottom: 8px; }
.footer-col a { display: block; padding: 4px 0; color: #424245; }
.site-footer .legal { width: min(100% - 2 * var(--gutter), 1120px); margin-inline: auto; padding: 18px 0 32px; border-top: 1px solid var(--hair); }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }

/* ---------- reading pages ---------- */
.read { width: min(100% - 2 * var(--gutter), 720px); margin-inline: auto; }
.page-head { padding: clamp(40px, 6vw, 80px) 0 clamp(28px, 4vw, 44px); }
.breadcrumbs { font-size: 0.75rem; color: var(--ink-2); margin-bottom: clamp(20px, 3vw, 36px); }
.breadcrumbs a { color: var(--ink-2); }
.breadcrumbs span[aria-hidden] { margin: 0 4px; }
.page-head h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); font-weight: 700; line-height: 1.06; letter-spacing: -0.024em; }
.lede { margin-top: 18px; font-size: clamp(1.1875rem, 2vw, 1.4375rem); line-height: 1.4; color: var(--ink-2); }
.page-head .button-row { margin-top: 26px; }
.page-head .button-row ~ p { margin-top: 14px; color: var(--ink-2); }
.platform-note { margin-top: 14px; font-size: 0.875rem; color: var(--ink-2); }
.legal-updated { margin-top: 16px; color: var(--ink-2); }
.tb { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: clamp(22px, 3vw, 32px) 0 0; padding-top: 18px; border-top: 1px solid var(--hair); font-size: 0.875rem; color: var(--ink-2); }
.tb > div { display: flex; gap: 6px; }
.tb dt::after { content: ":"; }
.tb dd { margin: 0; color: var(--ink); }
.prose { padding-bottom: var(--sec); }
.prose.wrap { width: min(100% - 2 * var(--gutter), 980px); }
.prose > * + * { margin-top: 1.15em; }
.prose h2 { margin-top: 2.2em; font-size: clamp(1.625rem, 3vw, 2.125rem); font-weight: 700; line-height: 1.12; letter-spacing: -0.02em; scroll-margin-top: 72px; }
.prose > h2:first-child, .prose > section:first-child > h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 1.8em; font-size: 1.3125rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.015em; }
.prose h2 + *, .prose h3 + * { margin-top: 0.7em; }
.prose ul, .prose ol { padding-left: 1.3em; margin-bottom: 0; }
.prose li + li { margin-top: 0.45em; }
.prose li::marker { color: var(--ink-2); }
.prose code, .prose kbd { font: 0.875em var(--mono); padding: 2px 6px; border-radius: 6px; background: var(--gray); }
.prose hr { border: 0; border-top: 1px solid var(--hair); margin: 2.4em 0; }
.prose section > * + * { margin-top: 1.15em; }
.prose section > h2 + * { margin-top: 0.7em; }
.answer, .note, .legal-note, .toc, .author { background: var(--gray); border-radius: 18px; padding: 22px 26px 24px; }
.answer-label { display: block; margin-bottom: 6px; font-size: 0.875rem; font-weight: 600; color: var(--ink-2); }
.answer p { font-size: 1.1875rem; line-height: 1.45; }
.note > * + * { margin-top: 0.7em; }
.toc strong { display: block; font-size: 0.875rem; font-weight: 600; color: var(--ink-2); margin-bottom: 8px; }
.toc ol { margin: 0; padding-left: 1.4em; columns: 2; column-gap: 32px; }
.toc li { break-inside: avoid; } .toc li + li { margin-top: 0.3em; }
@media (max-width: 600px) { .toc ol { columns: 1; } }
.prose .steps, .prose .picks { list-style: none; padding: 0; }
.steps { counter-reset: step; }
.steps > li { counter-increment: step; position: relative; padding: 18px 0 18px 3.4rem; border-top: 1px solid var(--hair); margin: 0; }
.steps > li:last-child { border-bottom: 1px solid var(--hair); }
.steps > li::before { content: counter(step); position: absolute; left: 0; top: 16px; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-size: 0.9375rem; font-weight: 600; }
.steps > li > strong:first-child { display: block; }
.picks li { padding: 14px 0; border-top: 1px solid var(--hair); margin: 0; }
.picks li:last-child { border-bottom: 1px solid var(--hair); }
.picks li > strong:first-child { display: block; }
.table-wrap { overflow-x: auto; scrollbar-width: thin; }
.prose .table-wrap:not(.req), .prose figure.wide, .prose .card-grid { width: min(100vw - 2 * var(--gutter), 980px); margin-left: calc((100% - min(100vw - 2 * var(--gutter), 980px)) / 2); max-width: none; }
.prose.wrap .card-grid { width: auto; margin-left: 0; }
table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.45; }
caption { text-align: left; padding: 10px 0; font-weight: 600; }
th, td { padding: 13px 16px 13px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--hair); }
thead th, table:not(:has(thead)) tr:first-child th:not([scope="row"]) { font-size: 0.8125rem; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
tbody th { font-weight: 600; }
tr.is-us th, tr.is-us td { background: var(--gray); }
tr.is-us th { box-shadow: -16px 0 0 var(--gray); } tr.is-us td:last-child { box-shadow: 16px 0 0 var(--gray); }
td.num, th.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.table-wrap:not(.req) table { min-width: 560px; }
.legal-body table { min-width: 760px; }
.table-note { margin-top: 0.6em !important; font-size: 0.8125rem; color: var(--ink-2); }
.yes { color: var(--ok); font-weight: 600; } .no { color: var(--bad); font-weight: 600; } .part { font-weight: 600; }
figure { margin: 0; }
.prose figure img { width: 100%; border-radius: 16px; box-shadow: var(--win); background: #fff; }
figcaption { margin-top: 14px; font-size: 0.8125rem; color: var(--ink-2); text-align: center; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; }
.stat { background: var(--gray); border-radius: 18px; padding: 18px 20px; }
.stat b { display: block; font-size: 1.625rem; font-weight: 700; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; }
.stat span { display: block; font-size: 0.875rem; color: var(--ink-2); }
.fit { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fit > div { background: var(--gray); border-radius: 18px; padding: 22px 24px 24px; }
.fit h3 { margin-top: 0; }
@media (max-width: 640px) { .fit { grid-template-columns: 1fr; } }
.author { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; margin-top: 3em !important; font-size: 0.9375rem; color: var(--ink-2); }
.author img { width: 48px; height: 48px; } .author p + p { margin-top: 0.6em; } .author strong { color: var(--ink); }
.sources { font-size: 0.9375rem; color: var(--ink-2); } .sources li { overflow-wrap: anywhere; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.card { display: flex; flex-direction: column; gap: 4px; background: var(--gray); border-radius: 18px; padding: 24px 26px 26px; color: var(--ink); transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease); }
.card:hover { text-decoration: none; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08); transform: translateY(-2px); }
.card-tag { font-size: 0.8125rem; font-weight: 600; color: var(--ink-2); }
.card-title, .card h3 { font-size: 1.3125rem; font-weight: 600; line-height: 1.19; letter-spacing: -0.015em; margin: 0; }
.card p { margin: 4px 0 0; font-size: 0.9375rem; color: var(--ink-2); }
.card p::after { content: " ›"; color: var(--link); }
.hub-section { margin-top: clamp(44px, 6vw, 72px) !important; }
.hub-section > h2 { margin-top: 0; } .hub-section > p { color: var(--ink-2); } .hub-section .card-grid { margin-top: 20px; }
.related .card-grid { margin-top: 18px; }
.cta-band { background: #000; color: #f5f5f7; padding: var(--sec) 0; text-align: center; --ink: #f5f5f7; --ink-2: #a1a1a6; --fill: rgba(255, 255, 255, 0.14); --fill-h: rgba(255, 255, 255, 0.22); --link: #2997ff; }
.cta-band h2 { font-size: clamp(2rem, 4.6vw, 3.5rem); font-weight: 700; line-height: 1.07; letter-spacing: -0.022em; }
.cta-band p { margin: 18px auto 0; max-width: 34em; font-size: clamp(1.0625rem, 1.6vw, 1.3125rem); color: #a1a1a6; }
.cta-band .button-row { margin-top: 30px; justify-content: center; }
.cta-band small { display: block; margin-top: 16px; color: #a1a1a6; }
.cta-band :focus-visible { outline-color: rgba(120, 180, 255, 0.9); }
.tool { background: var(--gray); border-radius: 28px; padding: clamp(22px, 3vw, 36px); }
.tool > h2 { margin: 0; font-size: 1.5rem; }
.tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 980px; background: var(--fill); }
.tabs button { min-height: 36px; padding: 6px 16px; border: 0; border-radius: 980px; background: transparent; color: var(--ink); font: 0.875rem var(--sans); cursor: pointer; }
.tabs button[aria-selected="true"] { background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12); font-weight: 600; }
.tool [role="tabpanel"] > * + * { margin-top: 16px; }
.tool-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.tool-out { background: #fff; border-radius: 18px; padding: 20px 22px 22px; min-height: 5.5rem; }
.tool-out b { display: block; margin: 4px 0 6px; font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.tool-out .muted, .muted { font-size: 0.9375rem; color: var(--ink-2); }
.tool-out.is-warn b { color: var(--bad); }
.legal-siblings { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 3em; padding-top: 20px; border-top: 1px solid var(--hair); }
/* launch toggles, driven by /api/site-config exactly as on the previous site */
.when-pre { display: none !important; }
.win-live, .win-buy, .linux-live { display: none; }
html.windows-on .win-live, html.windows-buy-on .win-buy, html.linux-on .linux-live { display: revert; }
html.windows-on .win-soon, html.linux-on .linux-soon { display: none; }
html.windows-on .tile.win-live { display: flex; }
/* Linux sold as its own product (html.linux-buy-on) or, until then, through the Windows licence */
.linux-own { display: none; }
html.linux-buy-on .linux-own { display: revert; }
html.linux-buy-on .linux-shared { display: none; }
html.windows-on a.button.win-live, html.windows-buy-on a.button.win-buy, html.linux-on a.button.linux-live { display: inline-flex; }
.draft-flag { position: fixed; right: 14px; bottom: 14px; z-index: 50; padding: 6px 12px; border-radius: 980px; background: #1d1d1f; color: #fff; font-size: 0.6875rem; pointer-events: none; }

/* one motion system: fade and rise */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
  .js [data-reveal].in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .window { transform: none; } }
@media print { .draft-flag, .site-nav, .cta-band { display: none; } }

/* draft E: one pinned scene, scrubbed by scroll. The house illustration flattens
   into its own floor plan, then the scroll walks a whole takeoff: calibrate,
   areas, lengths, counts, an RFI, revision B, totals. */
.hero { padding-bottom: clamp(24px, 4vw, 56px); }
.scene { position: relative; }
.scene-stage { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: center; gap: clamp(8px, 1.6vh, 18px); padding: 24px 0 48px; overflow: hidden; }
.scene-layers { width: min(100%, 1400px); }
.scene-art { margin: 0; }
.scene-art img { width: 100%; }
.scene-plan { margin-top: 24px; padding: 0 var(--gutter); }
.plan-sheet { background: #fff; border-radius: 10px; padding: clamp(6px, 1.4vw, 18px); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); max-width: 1100px; margin-inline: auto; }
.plan-svg { width: 100%; height: auto; display: block; }
.revb { opacity: 0; }
.scene-tools, .scene-totals { list-style: none; margin: 0; padding: 0 var(--gutter); display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; font-size: 0.8125rem; color: #a1a1a6; }
.scene-tools li { padding: 6px 12px; border-radius: 8px; background: #1d1d1f; white-space: nowrap; transition: background-color 0.3s var(--ease), color 0.3s var(--ease); }
.scene-totals li { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 980px; background: #1d1d1f; white-space: nowrap; }
.scene-totals li[style]::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.scene-totals b { color: #f5f5f7; font-variant-numeric: tabular-nums; }
.scene-steps { list-style: none; margin: 0; padding: 0 var(--gutter); display: grid; gap: 14px; text-align: center; max-width: 60rem; }
.scene-steps strong { display: block; font-size: clamp(1.5rem, 3.6vw, 2.75rem); font-weight: 700; letter-spacing: -0.022em; line-height: 1.1; }
.scene-steps span { display: block; margin-top: 8px; font-size: clamp(0.9375rem, 1.5vw, 1.1875rem); color: #a1a1a6; }
.scene-end { text-align: center; }
.scene-note { text-align: center; padding: 0 var(--gutter); }
.proof .window { margin-top: clamp(40px, 5vw, 64px); }
@media (prefers-reduced-motion: no-preference) {
  .js .scene { height: 1100vh; }
  .js .scene-stage { position: sticky; top: 52px; height: calc(100vh - 52px); height: calc(100svh - 52px); padding: 0; }
  .js .scene-layers { position: relative; width: min(100%, 1400px, 100vh); aspect-ratio: 16 / 9; perspective: 1500px; }
  .js .scene-art { position: absolute; inset: 0; opacity: calc(1 - var(--b, 0)); transform: scale(calc(1.2 - var(--a, 0) * 0.2)); transform-origin: 50% 55%; will-change: transform, opacity; }
  .js .scene-art img { -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--r, 130%) - 16%), transparent var(--r, 130%)); mask-image: linear-gradient(90deg, #000 calc(var(--r, 130%) - 16%), transparent var(--r, 130%)); }
  .js .scene-plan { position: absolute; inset: 0; margin: 0; padding: 0; display: grid; place-items: center; opacity: var(--b, 0); transform: rotateX(calc((1 - var(--b, 0)) * 56deg)) scale(calc(0.78 + var(--b, 0) * 0.22)); transform-origin: 50% 60%; will-change: transform, opacity; }
  .js .plan-sheet { height: 100%; aspect-ratio: 232 / 150; max-width: 100%; margin: 0; display: grid; place-items: center; }
  .js .plan-svg { max-height: 100%; }
  .js .cal, .js .tk, .js .wl-chip, .js .ct, .js .rfi { opacity: 0; }
  .js .ct { transition: opacity 0.25s var(--ease), transform 0.35s var(--ease); transform: scale(0.3); transform-box: fill-box; transform-origin: center; }
  .js .ct.in { opacity: 1; transform: none; }
  .js .pl-overall path, .js .pl-overall text { transition: stroke 0.4s var(--ease), fill 0.4s var(--ease); }
  .js .scene[data-ch="1"] .pl-overall path { stroke: #0071e3; stroke-width: 0.5; }
  .js .scene[data-ch="1"] .pl-overall text { fill: #0071e3; font-weight: 700; }
  .js .scene-tools, .js .scene-totals { opacity: var(--b, 0); }
  .js .scene-tools li.on { background: #0071e3; color: #fff; }
  .js .scene-totals li { opacity: 0.28; transition: opacity 0.4s var(--ease); }
  .js .scene-totals li.live { opacity: 1; }
  .js .scene-steps { display: block; position: relative; width: 100%; height: 5.6em; }
  .js .scene-steps li { position: absolute; inset: 0; padding: 0 var(--gutter); opacity: 0; transform: translateY(16px); transition: opacity 0.45s var(--ease), transform 0.45s var(--ease); }
  .js .scene-steps li.on { opacity: 1; transform: none; }
  .js .scene-end { opacity: 0; transform: translateY(12px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); pointer-events: none; }
  .js .scene.done .scene-end { opacity: 1; transform: none; pointer-events: auto; }
  .js .scene-note { opacity: var(--b, 0); }
}
@media (max-width: 860px) {
  .js .scene-stage { top: 96px; height: calc(100svh - 96px); }
  .scene-tools, .scene-totals { font-size: 0.6875rem; gap: 4px; }
  .scene-tools li, .scene-totals li { padding: 4px 8px; }
  .scene-totals .room { display: none; }
  .js .scene-steps { height: 7.4em; }
}
@media (max-height: 760px) and (min-width: 861px) { .scene-note { display: none; } .js .scene-layers { width: min(100%, 1400px, 88vh); } }

/* keep any wide child from widening the page on phones (sticky still works with clip) */
main { overflow-x: clip; }
.strip { max-width: calc(100vw - 2 * var(--gutter)); }
.site-nav { overflow-x: clip; }
@media (max-width: 860px) { .nav-links { min-width: 0; max-width: 100vw; flex: 0 0 auto; } }

/* states set by site.js and checkout.js */
.availability { margin-top: 18px; display: flex; gap: 8px; align-items: center; justify-content: center; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #1a7f37; flex: none; }
.availability.is-sold-out .status-dot { background: var(--ink-2); }
.meter.is-low .meter-bar span { background: #c73a3f; }
.meter.is-sold-out .meter-bar span { background: var(--ink-2); }
[data-launch-href].is-disabled, [data-launch-href][aria-disabled="true"] { background: var(--fill); color: var(--ink-2); pointer-events: none; }
[data-launch-href][aria-busy="true"] { opacity: 0.7; pointer-events: none; }
.rf-field input.is-invalid { border-color: #e30000; }
.rf-status.is-ok { color: #1a7f37; } .rf-status.is-err { color: #e30000; }
.register-form.is-done .rf-row, .register-form.is-done .rf-field, .register-form.is-done .rf-consent, .register-form.is-done .rf-turnstile, .register-form.is-done #rf-submit { display: none; }
.register-form.is-done .rf-status { font-size: 1.1875rem; font-weight: 600; }
.rf-spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.4); border-top-color: #fff; animation: rf-spin 0.8s linear infinite; }
@keyframes rf-spin { to { transform: rotate(360deg); } }
.rf-turnstile:empty { display: none; }

.readout.four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 720px) { .readout.four { grid-template-columns: repeat(2, 1fr); } .readout.four li:last-child { grid-column: auto; } }

.plat-any { margin-top: 14px; }
.tile .plat-any { font-size: 0.8125rem; }