/* NXT design system — marketing layer: site sections, home story, ecosystem map, discovery,
   pricing, product landing heroes, auth, docs, legal and status. Loaded on site/focus chrome only. */

@layer marketing {
  /* ---------- Night surface (hero, security, CTA): ink canvas with its own readable tokens ---------- */
  .hero, .sec-night, .cta-band, .auth-side {
    --c-bg: #000000; --c-surface: #0D0D0D; --c-surface2: #000000; --c-elevated: #161616; --c-border: #262626; --c-border-strong: #3D3D3D;
    --c-text: #F5F5F5; --c-muted: #A3A3A3; --c-subtle: #5C5C5C; --c-link: #FFFFFF; --c-focus: #FFFFFF; --c-focus-inner: #000000; --c-primary-soft: #262626;
    --c-primary: #FFFFFF; --c-on-primary: #000000; --c-primary-hover: #D6D6D6; --c-accent: #FFFFFF; --c-on-accent: #000000; --c-on-error: #000000;
    --p: var(--c-primary); --pa: var(--c-accent); --pon: var(--c-on-primary); --p-ink: var(--c-link); --p-soft: var(--c-primary-soft);
    --c-success: #F0F0F0; --c-success-soft: #1F1F1F; --c-error: #FFFFFF; --c-error-soft: #2B2B2B; --c-info: #DEDEDE; --c-info-soft: #1C1C1C; --c-warning: #CCCCCC; --c-warning-soft: #1A1A1A;
    background: var(--c-bg); color: var(--c-text); color-scheme: dark;
  }
  .hero .btn-secondary, .sec-night .btn-secondary, .cta-band .btn-secondary { --b-bg: #0D0D0D; --b-fg: #F5F5F5; --b-bd: #3D3D3D; --b-hover: #1A1A1A; }

  /* ---------- Sections & rhythm ---------- */
  .sec { padding: clamp(64px, 9vw, 128px) 0; position: relative; }
  .sec-tight { padding: var(--s-12) 0; }
  .sec-raised { background: var(--c-surface); border-block: 1px solid var(--c-border); }
  .sec-brand { background: var(--c-primary); color: var(--c-on-primary); }
  .section-head { display: grid; gap: var(--s-3); margin-bottom: clamp(var(--s-8), 5vw, var(--s-12)); max-width: 760px; }
  .section-head.is-center { margin-inline: auto; text-align: center; justify-items: center; }
  .section-head .eyebrow { margin: 0; }
  .section-lede, .section-head > p:not(.eyebrow) { font-size: var(--t-lead); line-height: var(--lh-lead); color: var(--c-muted); margin: 0; max-width: 62ch; }
  .h-section { font: var(--fw-h1) clamp(1.875rem, 1.2rem + 2.6vw, 3.25rem)/1.04 var(--font-display); letter-spacing: -0.035em; }
  .split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(var(--s-8), 6vw, var(--s-20)); align-items: center; }
  .split.is-reverse .split-copy { order: 2; }
  .split-copy { display: grid; gap: var(--s-5); align-content: start; }
  .split-copy .h-section { margin: 0; }
  .split-copy > .btn, .split-copy > .row { justify-self: start; }
  @media (max-width: 1023px) { .split { grid-template-columns: minmax(0, 1fr); } .split.is-reverse .split-copy { order: 0; } }

  .features { list-style: none; padding: 0; margin: var(--s-4) 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-8); }
  .features li { margin: 0; display: grid; gap: 6px; align-content: start; }
  .features h3, .features h4 { font: 600 var(--t-h4)/1.35 var(--font-sans); }
  .features p { margin: 0; color: var(--c-muted); font-size: var(--t-small); }
  .feature-icon { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r-sm); background: var(--c-primary-soft); color: var(--c-link); }
  @media (max-width: 560px) { .features { grid-template-columns: minmax(0, 1fr); } }

  /* Framed preview (always labelled sample/preview) */
  .preview { margin: 0; border-radius: var(--r-xl); border: 1px solid var(--c-border); background: var(--c-surface); box-shadow: var(--e-3); overflow: hidden; }
  .preview-bar { display: flex; gap: 6px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--c-border); background: var(--c-surface2); font: 500 var(--t-caption)/1 var(--font-mono); color: var(--c-muted); }
  .preview-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--c-border-strong); }
  .preview-bar span { margin-left: var(--s-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .preview-body { padding: var(--s-5); }
  .preview-label { display: flex; gap: 6px; align-items: center; padding: 8px 14px; border-top: 1px solid var(--c-border); font-size: var(--t-caption); color: var(--c-muted); background: var(--c-surface2); }
  .pv-account { display: grid; gap: var(--s-3); }
  .pv-row { display: flex; justify-content: space-between; gap: var(--s-3); padding-bottom: var(--s-3); border-bottom: 1px solid var(--c-border); font-size: var(--t-small); }
  .pv-k { color: var(--c-muted); }
  .pv-v { font-weight: 600; }
  .pv-products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
  .pv-prod { display: flex; gap: var(--s-2); align-items: center; padding: var(--s-2); border: 1px solid var(--c-border); border-radius: var(--r-sm); background: var(--c-bg); min-width: 0; }
  .pv-prod span { display: grid; min-width: 0; }
  .pv-prod strong { font-size: var(--t-small); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pv-prod small { color: var(--c-muted); font-size: var(--t-caption); }
  .pv-usage { display: grid; grid-template-columns: 1fr auto; gap: 6px var(--s-3); align-items: center; }
  .pv-bar { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--c-surface2); overflow: hidden; order: 3; }
  .pv-bar i { display: block; height: 100%; background: var(--c-primary); border-radius: inherit; }
  .pv-log { list-style: none; margin: 0; padding: 0; display: grid; }
  .pv-log li { display: grid; grid-template-columns: 68px auto minmax(0, 1fr); gap: var(--s-3); align-items: center; padding: 10px 0; border-bottom: 1px solid var(--c-border); font-size: var(--t-small); margin: 0; }
  .pv-log li:last-child { border-bottom: 0; }
  .pv-t { color: var(--c-muted); font-family: var(--font-mono); font-size: var(--t-caption); }
  .pv-caps { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-3); }
  .pv-caps li { display: flex; gap: var(--s-3); align-items: flex-start; margin: 0; font-weight: 500; }
  .pv-caps .i { color: var(--c-success); margin-top: 2px; }
  @media (max-width: 480px) { .pv-log li { grid-template-columns: auto minmax(0, 1fr); } .pv-t { grid-column: 1 / -1; } .pv-products { grid-template-columns: minmax(0, 1fr); } }

  /* ---------- Home: hero with the ecosystem ---------- */
  .is-home .gh-site { position: fixed; left: 0; right: 0; background: color-mix(in srgb, #000000 70%, transparent); border-bottom-color: rgb(255 255 255 / 0.06);
    --c-text: #F5F5F5; --c-muted: #A3A3A3; --c-surface: #0D0D0D; --c-surface2: #1A1A1A; --c-border: #2B2B2B; --c-border-strong: #3D3D3D; --c-link: #FFFFFF; --c-elevated: #141414; --c-focus: #FFFFFF; --c-focus-inner: #000000; --c-primary-soft: #262626; --c-primary: #FFFFFF; --c-on-primary: #000000; --c-primary-hover: #D6D6D6; --c-accent: #FFFFFF; --p: var(--c-primary); --pa: var(--c-accent); --pon: var(--c-on-primary); color-scheme: dark; }
  .is-home .gh-site .wordmark { color: #fff; }
  .hero { position: relative; overflow: hidden; padding: calc(var(--layout-header) + clamp(40px, 7vw, 96px)) 0 clamp(56px, 8vw, 112px); isolation: isolate; }
  .hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
      radial-gradient(60% 50% at 78% 38%, rgb(255 255 255 / 0.12), transparent 70%),
      radial-gradient(30% 30% at 88% 12%, rgb(255 255 255 / 0.10), transparent 70%),
      linear-gradient(rgb(255 255 255 / 0.035) 1px, transparent 1px) 0 0 / 48px 48px,
      linear-gradient(90deg, rgb(255 255 255 / 0.035) 1px, transparent 1px) 0 0 / 48px 48px;
    mask-image: radial-gradient(120% 90% at 60% 30%, #000 40%, transparent 85%); }
  .hero-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); grid-template-areas: 'copy map' 'copy panel'; grid-template-rows: auto 1fr; gap: var(--s-6) clamp(var(--s-8), 4vw, var(--s-16)); align-items: start; }
  .hero-panel .eco-cards { max-width: 560px; margin-inline: auto; }
  .hero-copy { grid-area: copy; display: grid; gap: var(--s-6); align-content: start; }
  .hero-map { grid-area: map; align-self: start; }
  .hero-panel { grid-area: panel; }
  .hero-kicker { display: inline-flex; gap: 10px; align-items: center; margin: 0; color: var(--c-muted); }
  .hero-node { width: 8px; height: 8px; border-radius: 2px; background: #FFFFFF; box-shadow: 0 0 12px rgb(255 255 255 / 0.6); }
  .hero h1 { color: #F5F5F5; font-size: clamp(2.5rem, 1.2rem + 4.6vw, 5.25rem); line-height: 0.98; }
  .hero h1 span { display: block; }
  .hero-accent { color: #8F8F8F; }
  .hero .lede { color: #B5B5B5; margin: 0; max-width: 54ch; }
  .hero-ctas { gap: var(--s-3); }
  .hero-ghost { --b-fg: var(--c-text); --b-bd: var(--c-border-strong); --b-hover: rgb(255 255 255 / 0.06); }
  .hero-facts { display: flex; gap: var(--s-8); margin: var(--s-2) 0 0; padding-top: var(--s-5); border-top: 1px solid var(--c-border); }
  .hero-facts div { display: grid; gap: 4px; }
  .hero-facts dt { font: var(--fw-overline) var(--t-overline)/1.2 var(--font-mono); letter-spacing: var(--tr-overline); text-transform: uppercase; color: var(--c-muted); }
  .hero-facts dd { margin: 0; font: 650 1.75rem/1 var(--font-display); letter-spacing: -0.03em; color: #fff; }
  @media (max-width: 1023px) {
    .hero-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'copy' 'map' 'panel'; }
    .hero-map { max-width: 560px; width: 100%; justify-self: center; }
  }

  /* Ecosystem map */
  .eco { position: relative; aspect-ratio: 1; width: 100%; max-width: 640px; margin-inline: auto; container-type: inline-size; }
  .eco-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .eco-orbit { fill: none; stroke: rgb(255 255 255 / 0.10); stroke-width: 0.25; stroke-dasharray: 0.6 1.2; }
  .eco-orbit.is-inner { stroke: rgb(255 255 255 / 0.25); stroke-dasharray: none; }
  .eco-arc { fill: none; stroke: rgb(255 255 255 / 0.35); stroke-width: 0.45; stroke-linecap: round; }
  .eco-line { stroke: rgb(255 255 255 / 0.10); stroke-width: 0.25; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke var(--d-base), stroke-width var(--d-base); }
  .eco-line.is-on { stroke: #FFFFFF; stroke-width: 0.45; }
  .eco-group { position: absolute; translate: -50% -50%; font: 600 clamp(0.5625rem, 1.6cqi, 0.6875rem)/1.2 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: #8F8F8F; white-space: nowrap; pointer-events: none; }
  .eco-hub { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; justify-items: center; gap: 8px; text-decoration: none; color: #fff; border-radius: var(--r-lg); padding: 6px; }
  .eco-hub .mark { width: clamp(44px, 12cqi, 72px); height: auto; box-shadow: 0 0 0 1px rgb(255 255 255 / 0.12), 0 0 48px rgb(255 255 255 / 0.24); border-radius: 22%; }
  .eco-hub-label { font: 650 clamp(0.6875rem, 2.2cqi, 0.875rem)/1 var(--font-display); letter-spacing: 0.08em; }
  .eco-node { position: absolute; translate: -50% -50%; display: grid; justify-items: center; gap: 6px; padding: 4px; border-radius: var(--r-md); color: #CCCCCC; text-decoration: none; transition: transform var(--d-base) var(--ease-spring), color var(--d-fast); }
  .eco-node .mark { width: clamp(30px, 8.6cqi, 52px); height: auto; box-shadow: 0 0 0 1px rgb(255 255 255 / 0.10), 0 8px 24px rgb(0 0 0 / 0.4); border-radius: 22%; transition: box-shadow var(--d-base); }
  .eco-label { font: 650 clamp(0.5625rem, 1.9cqi, 0.75rem)/1 var(--font-display); letter-spacing: 0.06em; white-space: nowrap; }
  .eco-node:hover, .eco-node:focus-visible, .eco-node.is-active { color: #fff; transform: scale(1.08); text-decoration: none; }
  .eco-node:hover .mark, .eco-node:focus-visible .mark, .eco-node.is-active .mark { box-shadow: 0 0 0 2px var(--pa), 0 0 32px rgb(255 255 255 / 0.28); }
  .eco-node:focus-visible, .eco-hub:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }
  @container (max-width: 380px) { .eco-label { display: none; } .eco-group { display: none; } }
  @media (prefers-reduced-motion: no-preference) {
    .eco.is-pending .eco-node { opacity: 0; transform: scale(0.6); }
    .eco.is-pending .eco-line { stroke-dashoffset: 1; }
    .eco.is-ready .eco-node { transition: opacity var(--d-slow) var(--ease-out) var(--eco-delay, 0ms), transform var(--d-slow) var(--ease-spring) var(--eco-delay, 0ms), color var(--d-fast); }
    .eco.is-ready .eco-line { transition: stroke-dashoffset 900ms var(--ease-out), stroke var(--d-base); }
    .eco-hub .mark { animation: nxt-hub 4s var(--ease-in-out) infinite; }
    @keyframes nxt-hub { 50% { box-shadow: 0 0 0 1px rgb(255 255 255 / 0.12), 0 0 72px rgb(255 255 255 / 0.34); } }
  }

  /* Ecosystem detail cards: :target without JS, .is-active with JS */
  .eco-cards { position: relative; }
  .eco-card { display: none; padding: var(--s-5); border-radius: var(--r-lg); border: 1px solid var(--c-border); background: linear-gradient(160deg, rgb(255 255 255 / 0.04), rgb(255 255 255 / 0.01)); backdrop-filter: blur(8px); outline: none; }
  .eco-card:target, .eco-cards:not(:has(.eco-card:target)) .eco-card-default { display: block; }
  .eco-cards.is-js .eco-card { display: none; }
  .eco-cards.is-js .eco-card.is-active { display: block; animation: nxt-card-in var(--d-slow) var(--ease-out); }
  @keyframes nxt-card-in { from { opacity: 0; transform: translateY(6px); } }
  .eco-card-head { display: flex; gap: var(--s-3); align-items: center; margin-bottom: var(--s-3); }
  .eco-name { margin: 0; font: 650 1.25rem/1.1 var(--font-display); letter-spacing: -0.01em; color: #fff; }
  .eco-name span { color: var(--pa); }
  .eco-card-default .eco-name span { color: #FFFFFF; }
  .eco-meta { margin: 4px 0 0; display: flex; gap: 8px; align-items: center; font-size: var(--t-caption); color: var(--c-muted); }
  .eco-tag { margin: 0 0 6px; font-weight: 600; color: #E3E3E3; }
  .eco-desc { margin: 0 0 var(--s-3); }
  .eco-caps { list-style: none; padding: 0; margin: 0 0 var(--s-4); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px var(--s-4); font-size: var(--t-small); color: #CCCCCC; }
  .eco-caps li { margin: 0; padding-left: 14px; position: relative; }
  .eco-caps li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 6px; height: 6px; border-radius: 2px; background: var(--pa, #FFFFFF); }
  .eco-hint { display: flex; gap: 6px; align-items: center; margin: 0; }
  @media (max-width: 480px) { .eco-caps { grid-template-columns: minmax(0, 1fr); } }

  /* ---------- Discovery ---------- */
  .discover { display: grid; gap: 0; border-top: 1px solid var(--c-border); }
  .disc-group { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: var(--s-8); padding: var(--s-8) 0; border-bottom: 1px solid var(--c-border); }
  .disc-head { position: sticky; top: calc(var(--layout-header) + var(--s-6)); align-self: start; display: grid; gap: var(--s-2); }
  .disc-num { font: 500 var(--t-small)/1 var(--font-mono); color: var(--c-muted); }
  .disc-head h2, .disc-head h3 { font: var(--fw-h2) clamp(1.5rem, 1.2rem + 1vw, 2rem)/1.05 var(--font-display); letter-spacing: -0.03em; }
  .disc-head p { margin: 0; }
  .disc-list { list-style: none; padding: 0; margin: 0; display: grid; }
  .disc-list li { margin: 0; }
  .disc-item { display: grid; grid-template-columns: 40px minmax(0, 1.1fr) minmax(0, 1fr) auto; gap: var(--s-4); align-items: center; padding: var(--s-4) var(--s-3); margin-inline: calc(var(--s-3) * -1); border-radius: var(--r-md); color: var(--c-text); text-decoration: none; transition: background-color var(--d-fast); }
  .disc-item + .disc-item, .disc-list li + li .disc-item { border-top: 1px solid var(--c-border); }
  .disc-item:hover { background: var(--p-soft); text-decoration: none; }
  .disc-main { display: grid; gap: 2px; min-width: 0; }
  .disc-name { font: 650 1.125rem/1.1 var(--font-display); letter-spacing: -0.01em; }
  .disc-name span { color: var(--p-ink); }
  .disc-tag { color: var(--c-muted); font-size: var(--t-small); }
  .disc-go { display: flex; gap: var(--s-3); align-items: center; color: var(--c-muted); }
  .disc-go .i { transition: transform var(--d-base) var(--ease-out); }
  .disc-item:hover .disc-go .i { transform: translateX(4px); color: var(--p-ink); }
  @media (max-width: 1023px) { .disc-group { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); } .disc-head { position: static; } .disc-caps { display: none; } .disc-item { grid-template-columns: 40px minmax(0, 1fr) auto; } }
  @media (max-width: 480px) { .disc-go .pill { display: none; } }

  /* Directory (/products) */
  .directory { display: grid; border-top: 1px solid var(--c-border); }
  .dir-row { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: var(--s-6); padding: var(--s-6) 0; border-bottom: 1px solid var(--c-border); }
  .dir-row > :is(h2, h3) { font: var(--fw-h2) 1.375rem/1.1 var(--font-display); letter-spacing: -0.02em; }
  .dir-items { display: grid; gap: var(--s-2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
  .dir-item { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--s-3); align-items: start; padding: var(--s-3); border-radius: var(--r-md); color: var(--c-text); text-decoration: none; border: 1px solid transparent; transition: background-color var(--d-fast), border-color var(--d-fast); }
  .dir-item:hover { background: var(--p-soft); border-color: var(--c-border); text-decoration: none; }
  .dir-item strong { display: block; }
  .dir-item small { display: block; color: var(--c-muted); line-height: 1.4; margin-top: 2px; }
  @media (max-width: 767px) { .dir-row { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); } }

  /* ---------- Architecture ---------- */
  .arch { display: grid; gap: 0; border: 1px solid var(--c-border); border-radius: var(--r-xl); overflow: hidden; background: var(--c-surface); }
  .arch-layer { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: var(--s-4) var(--s-6); align-items: center; padding: var(--s-6); border-top: 1px solid var(--c-border); }
  .arch-layer:first-child { border-top: 0; }
  .arch-layer > .overline { margin: 0; display: inline-flex; gap: 8px; align-items: center; }
  .arch-layer > p.small { grid-column: 2; margin: 0; }
  .arch-marks { display: flex; flex-wrap: wrap; gap: 6px; }
  .arch-mark { display: inline-grid; transition: transform var(--d-base) var(--ease-spring); }
  .arch-mark:hover { transform: translateY(-3px); }
  .arch-layer.is-core { background: linear-gradient(90deg, var(--c-primary-soft), transparent 80%); position: relative; }
  .arch-layer.is-core::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--c-primary); }
  .arch-services { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; }
  .arch-services li { margin: 0; padding: 6px 12px; border-radius: var(--r-sm); background: var(--c-surface); border: 1px solid var(--c-border); font-size: var(--t-small); font-weight: 600; }
  @media (max-width: 767px) { .arch-layer { grid-template-columns: minmax(0, 1fr); } .arch-layer > p.small { grid-column: 1; } }

  /* ---------- Security band ---------- */
  .sec-night { overflow: hidden; }
  .sec-night::before { content: ''; position: absolute; inset: 0; background: radial-gradient(50% 60% at 85% 50%, rgb(255 255 255 / 0.072), transparent 70%); pointer-events: none; }
  .sec-night .wrap { position: relative; }
  .sec-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-4); }
  .sec-list li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--s-3); margin: 0; color: #CCCCCC; }
  .sec-list .i { color: #FFFFFF; margin-top: 2px; }

  /* ---------- Pricing pointer, CTA band ---------- */
  .price-band { display: grid; grid-template-columns: minmax(0, 1.4fr) auto; gap: var(--s-8); align-items: end; padding: clamp(var(--s-8), 5vw, var(--s-12)); border-radius: var(--r-xl); border: 1px solid var(--c-border); background: var(--c-surface); box-shadow: var(--e-1); }
  .price-band .h-section { margin: var(--s-2) 0 var(--s-4); }
  .price-band p.small { display: flex; gap: 6px; align-items: center; margin-top: var(--s-4); }
  @media (max-width: 1023px) { .price-band { grid-template-columns: minmax(0, 1fr); } }
  .cta-band { overflow: hidden; isolation: isolate; text-align: left; }
  .cta-band::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(40% 80% at 10% 100%, rgb(255 255 255 / 0.14), transparent 70%), radial-gradient(30% 50% at 95% 0%, rgb(255 255 255 / 0.12), transparent 70%); }
  .cta-inner { display: grid; gap: var(--s-8); }
  .cta-band h2 { color: #fff; font-size: clamp(2.25rem, 1.2rem + 4.4vw, 5rem); }

  /* ---------- Reveal on scroll (only below-the-fold elements, only with JS, only with motion) ---------- */
  @media (prefers-reduced-motion: no-preference) {
    .reveal.is-pending { opacity: 0; transform: translateY(18px); }
    .reveal.is-in { opacity: 1; transform: none; transition: opacity var(--d-slower) var(--ease-out), transform var(--d-slower) var(--ease-out); }
  }

  /* ---------- Pricing page ---------- */
  .pricing-head { padding: var(--s-16) 0 var(--s-6); }
  .pricing-head .section-head { margin-bottom: var(--s-8); }
  .pp-account-body { display: grid; gap: var(--s-4); }
  .pp-account-body > * { margin: 0; }
  .pricing-bar { position: sticky; top: calc(var(--layout-header) + 8px); z-index: var(--z-raised); display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: space-between; align-items: center; padding: 8px; border-radius: var(--r-md); background: color-mix(in srgb, var(--c-bg) 86%, transparent); backdrop-filter: blur(12px); border: 1px solid var(--c-border); }
  .seg-note { font-size: var(--t-caption); color: var(--c-success); font-weight: 700; }
  .pricing-groups { overflow-x: auto; max-width: 100%; scrollbar-width: none; }
  .pricing-groups span { white-space: nowrap; }
  .pricing:has(input[name='billing'][value='month']:checked) .price-y { display: none; }
  .pricing:has(input[name='billing'][value='year']:checked) .price-m { display: none; }
  .pricing:has(input[name='group'][value='work']:checked) .pp[data-group]:not([data-group='work']),
  .pricing:has(input[name='group'][value='ai-dev']:checked) .pp[data-group]:not([data-group='ai-dev']),
  .pricing:has(input[name='group'][value='life']:checked) .pp[data-group]:not([data-group='life']),
  .pricing:has(input[name='group'][value='creative']:checked) .pp[data-group]:not([data-group='creative']) { display: none; }
  .pp { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: var(--s-8); padding: var(--s-10) 0; border-top: 1px solid var(--c-border); scroll-margin-top: calc(var(--layout-header) + 80px); }
  .pp-side { position: sticky; top: calc(var(--layout-header) + 96px); align-self: start; display: grid; gap: var(--s-3); }
  .pp-id { display: flex; gap: var(--s-3); align-items: center; }
  .pp-id h2 { font: 650 1.375rem/1.1 var(--font-display); letter-spacing: -0.02em; }
  .pp-id .pill { margin-top: 4px; }
  .pp-tag { margin: 0; font-weight: 600; }
  .pp-side p.small { margin: 0; }
  .pp-more { display: inline-flex; gap: 4px; align-items: center; font-weight: 600; }
  .pp-account { grid-template-columns: minmax(0, 1fr); padding: var(--s-6); border: 1px solid var(--c-border); border-radius: var(--r-lg); background: var(--c-surface); gap: var(--s-4); margin-bottom: var(--s-4); }
  .pp-account-body p { max-width: 80ch; }
  .plans { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
  .plan { position: relative; display: grid; gap: var(--s-4); align-content: start; padding: var(--s-6); border: 1px solid var(--c-border); border-radius: var(--r-lg); background: var(--c-surface); }
  .plan[data-tier='business'], .plans-1 .plan { box-shadow: var(--e-1); }
  .plans-1 { grid-template-columns: minmax(0, 640px); }
  .plans-1 .ticks { columns: 2; column-gap: var(--s-6); display: block; }
  .plans-1 .ticks li { break-inside: avoid; margin-bottom: 6px; }
  @media (max-width: 560px) { .plans-1 .ticks { columns: 1; } }
  .plans-2 .plan[data-tier='business'] { border-color: color-mix(in srgb, var(--p, var(--c-primary)) 50%, var(--c-border)); }
  .plans-2 .plan[data-tier='business']::before { content: ''; position: absolute; left: var(--s-6); right: var(--s-6); top: -1px; height: 2px; background: var(--p, var(--c-primary)); border-radius: 0 0 2px 2px; }
  .plan-top h3 { font: 650 1.125rem/1.2 var(--font-display); letter-spacing: -0.01em; margin-bottom: 4px; }
  .plan-top p { margin: 0; }
  .plan .price { margin: 0; display: grid; gap: 2px; }
  .price-n { font: 650 2.25rem/1 var(--font-display); letter-spacing: -0.035em; }
  .price-u { font-size: var(--t-small); color: var(--c-muted); }
  .save { display: inline-flex; gap: 4px; align-items: center; margin: 6px 0 0; font-size: var(--t-small); font-weight: 700; color: var(--c-success); }
  .plan-status { margin: 6px 0 0; }
  .plan-desc { margin: 0; color: var(--c-muted); }
  .plan-list .overline { margin-bottom: var(--s-2); }
  .limits.inline { display: flex; flex-wrap: wrap; gap: 6px 20px; }
  .compare { margin-top: var(--s-4); }
  .compare > summary { display: inline-flex; gap: 8px; align-items: center; font-weight: 600; font-size: var(--t-small); color: var(--c-link); padding: 6px 0; }
  .compare .table-wrap { margin-top: var(--s-3); }
  .compare th[scope='row'] { background: none; color: var(--c-text); font-size: var(--t-small); white-space: normal; letter-spacing: 0; }
  .faq { display: grid; }
  .faq details { border-bottom: 1px solid var(--c-border); padding: var(--s-4) 0; }
  .faq summary { font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: var(--s-4); }
  .faq summary::after { content: '+'; color: var(--c-muted); font-weight: 400; font-size: 1.25rem; line-height: 1; transition: transform var(--d-base) var(--ease-out); }
  .faq details[open] summary::after { transform: rotate(45deg); }
  .faq p { margin: var(--s-3) 0 0; color: var(--c-muted); }
  @media (max-width: 1023px) { .pp { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); } .pp-side { position: static; } }

  /* ---------- Product landing (shared hero; product teams extend in /assets/p/<id>.css) ---------- */
  .phero { position: relative; overflow: hidden; isolation: isolate; padding: clamp(56px, 8vw, 112px) 0; background: #000000; color: #fff; --p: #FFFFFF; --pa: #FFFFFF; --pon: #000000; --c-primary: #FFFFFF; --c-on-primary: #000000; --c-accent: #FFFFFF; --c-focus-inner: #000000;
    --c-text: #fff; --c-muted: rgb(255 255 255 / 0.78); --c-border: rgb(255 255 255 / 0.14); --c-border-strong: rgb(255 255 255 / 0.28); --c-surface: rgb(255 255 255 / 0.06); --c-surface2: rgb(0 0 0 / 0.2); --c-bg: #000000; --c-link: #fff; --c-focus: #FFFFFF; --c-success: #FFFFFF; color-scheme: dark; }
  .phero::before { content: ''; position: absolute; inset: 0; z-index: -2; background: radial-gradient(60% 80% at 85% 20%, rgb(255 255 255 / 0.14), transparent 70%), linear-gradient(rgb(255 255 255 / 0.04) 1px, transparent 1px) 0 0 / 48px 48px, linear-gradient(90deg, rgb(255 255 255 / 0.04) 1px, transparent 1px) 0 0 / 48px 48px; }
  .phero-motif { position: absolute; right: -6%; top: 50%; translate: 0 -50%; width: 58%; height: 130%; z-index: -1; color: #fff; opacity: 0.16; }
  .phero-motif .motif-node { fill: var(--pa); }
  .phero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(var(--s-8), 5vw, var(--s-16)); align-items: center; }
  .phero-copy { display: grid; gap: var(--s-5); }
  .phero-id { display: flex; gap: var(--s-3); align-items: center; margin: 0; }
  .phero-name { font: 650 1.25rem/1 var(--font-display); letter-spacing: 0.02em; }
  .phero-name span { color: var(--pa); }
  .phero .badge-brand { background: rgb(255 255 255 / 0.12); color: #fff; }
  .phero h1 { color: #fff; font-size: clamp(2.5rem, 1.4rem + 4.4vw, 5rem); }
  .phero .lede { color: rgb(255 255 255 / 0.82); margin: 0; }
  .phero .btn { --b-bg: #fff; --b-fg: #000000; --b-hover: rgb(255 255 255 / 0.88); }
  .phero .btn-secondary { --b-bg: transparent; --b-fg: #fff; --b-bd: rgb(255 255 255 / 0.4); --b-hover: rgb(255 255 255 / 0.08); }
  .phero-note { display: flex; gap: 8px; align-items: center; margin: 0; color: rgb(255 255 255 / 0.74); }
  .phero .preview { background: rgb(0 0 0 / 0.55); backdrop-filter: blur(12px); border-color: rgb(255 255 255 / 0.14); }
  @media (max-width: 1023px) { .phero-grid { grid-template-columns: minmax(0, 1fr); } }
  .cap-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 1px; background: var(--c-border); border: 1px solid var(--c-border); border-radius: var(--r-lg); overflow: hidden; }
  .cap-grid li { margin: 0; display: grid; gap: var(--s-3); padding: var(--s-6); background: var(--c-surface); font-weight: 600; font-size: 1.0625rem; }
  .cap-n { font: 500 var(--t-small)/1 var(--font-mono); color: var(--c-link); }
  .plan-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--s-3); margin-bottom: var(--s-4); }
  .plan-chip { display: grid; gap: 4px; padding: var(--s-5); border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-bg); color: var(--c-text); text-decoration: none; transition: border-color var(--d-fast); }
  .plan-chip:hover { border-color: var(--c-border-strong); text-decoration: none; }
  .plan-chip-name { font-weight: 650; }
  .plan-chip-price { font: 650 1.75rem/1.1 var(--font-display); letter-spacing: -0.03em; }
  .privacy-note { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-5); border-radius: var(--r-lg); background: var(--c-surface); border: 1px solid var(--c-border); }
  .privacy-note .i { color: var(--c-link); margin-top: 2px; }
  .privacy-note p { margin: 0; }

  /* ---------- Generic content pages (about, enterprise, developers, support, legal, blog) ---------- */
  .section { padding: clamp(56px, 8vw, 104px) 0; }
  .section-tight { padding: var(--s-10) 0; }
  .section-alt { background: var(--c-surface); border-block: 1px solid var(--c-border); }
  .section > .wrap > .display-2:first-child, .section .prose > .display-2:first-child, .section .stack > .display-2:first-child { margin-bottom: var(--s-4); }
  .section .grid-2 { gap: clamp(var(--s-8), 5vw, var(--s-16)); }
  .section .stack > h2 { font: 600 var(--t-h3)/1.3 var(--font-sans); margin-top: var(--s-6); }
  .section details { border-bottom: 1px solid var(--c-border); padding: var(--s-3) 0; }
  .section details summary { font-weight: 600; }
  .section details p { margin: var(--s-2) 0 0; color: var(--c-muted); }
  .pillars { display: grid; gap: var(--s-8) var(--s-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
  .pillar h3 { margin-bottom: var(--s-2); }
  .pillar p { color: var(--c-muted); margin: 0; }
  article.dir-row h2 { font: 650 1.25rem/1.2 var(--font-display); }

  /* Docs */
  .doc-layout { display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: clamp(var(--s-8), 5vw, var(--s-16)); padding: var(--s-12) var(--layout-gutter) var(--s-24); }
  .doc-nav { position: sticky; top: calc(var(--layout-header) + var(--s-6)); align-self: start; display: grid; gap: 2px; font-size: var(--t-small); max-height: calc(100dvh - var(--layout-header) - 48px); overflow-y: auto; padding-right: var(--s-2); }
  .doc-nav form { margin-bottom: var(--s-4); }
  .doc-nav .input { min-height: 36px; font-size: var(--t-small); }
  .doc-nav p { margin: var(--s-4) 0 var(--s-1); }
  .doc-nav p strong { font: var(--fw-overline) var(--t-overline)/1.2 var(--font-mono); letter-spacing: var(--tr-overline); text-transform: uppercase; color: var(--c-muted); }
  .doc-nav a { color: var(--c-muted); text-decoration: none; padding: 6px 10px; border-radius: var(--r-sm); font-weight: 500; }
  .doc-nav a:hover { color: var(--c-text); background: var(--c-surface2); }
  .doc-nav a[aria-current='page'] { color: var(--c-text); background: var(--c-primary-soft); font-weight: 600; }
  @media (max-width: 860px) { .doc-layout { grid-template-columns: minmax(0, 1fr); } .doc-nav { position: static; max-height: none; } }

  /* Status */
  .status-row { display: flex; justify-content: space-between; gap: var(--s-4); padding: var(--s-4) var(--s-2); border-bottom: 1px solid var(--c-border); }
  .status-row > span:last-child { display: inline-flex; align-items: center; font-weight: 600; font-size: var(--t-small); }

  /* ---------- Auth (focus chrome) ---------- */
  .auth { min-height: calc(100dvh - var(--layout-header)); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
  .auth-side { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-10); padding: clamp(var(--s-10), 6vw, var(--s-20)); }
  .auth-side::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 60% at 20% 110%, rgb(255 255 255 / 0.152), transparent 70%), radial-gradient(30% 30% at 90% 10%, rgb(255 255 255 / 0.10), transparent 70%), linear-gradient(rgb(255 255 255 / 0.03) 1px, transparent 1px) 0 0 / 40px 40px, linear-gradient(90deg, rgb(255 255 255 / 0.03) 1px, transparent 1px) 0 0 / 40px 40px; }
  .auth-side .h-display { font-size: clamp(2.25rem, 1.4rem + 2.6vw, 3.75rem); color: #fff; }
  .auth-points { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-4); color: #CCCCCC; }
  .auth-points li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--s-3); margin: 0; }
  .auth-points .i { color: #FFFFFF; margin-top: 2px; }
  .auth-marks { display: flex; flex-wrap: wrap; gap: 6px; opacity: 0.9; }
  .auth-main { display: flex; justify-content: center; align-items: flex-start; padding: clamp(var(--s-10), 7vw, var(--s-20)) var(--layout-gutter); }
  .auth-main > div { width: 100%; max-width: 420px; display: grid; gap: var(--s-5); align-content: start; }
  .auth-main h1 { font: 650 clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem)/1.1 var(--font-display); letter-spacing: -0.03em; }
  .auth-main h1 + p { margin-top: calc(var(--s-3) * -1); }
  .auth-main .form { max-width: none; gap: var(--s-4); }
  .auth-main .btn-block { min-height: 44px; }
  .auth-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--r-md); background: var(--c-primary-soft); color: var(--c-link); }
  .auth-icon.is-ok { background: var(--c-success-soft); color: var(--c-success); }
  .auth-steps { display: flex; gap: 6px; }
  .auth-steps i { width: 24px; height: 3px; border-radius: 2px; background: var(--c-border-strong); }
  .auth-steps i.is-on { background: var(--c-primary); }
  .auth-alt { display: grid; gap: var(--s-3); }
  .auth-foot { padding-top: var(--s-4); border-top: 1px solid var(--c-border); font-size: var(--t-small); color: var(--c-muted); }
  .success-check .ck { stroke-dasharray: 30; stroke-dashoffset: 30; animation: nxt-check var(--d-slower) var(--ease-out) 0.15s forwards; }
  @keyframes nxt-check { to { stroke-dashoffset: 0; } }
  @media (max-width: 960px) { .auth { grid-template-columns: minmax(0, 1fr); } .auth-side { display: none; } .auth-main { padding-top: var(--s-8); } }

  /* Subscribe page (shown instead of a product app when the workspace has no plan) */
  .subscribe { position: relative; padding: clamp(48px, 7vw, 96px) 0; background: linear-gradient(180deg, var(--p-soft, var(--c-primary-soft)), transparent 60%); }
  .subscribe-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(var(--s-8), 5vw, var(--s-16)); align-items: start; }
  .subscribe-copy { display: grid; gap: var(--s-5); }
  .subscribe-copy > * { margin: 0; }
  .subscribe-who { display: flex; gap: var(--s-2); align-items: flex-start; font-weight: 500; }
  .subscribe-who .i { color: var(--c-link); margin-top: 3px; }
  .subscribe-switch { display: grid; gap: var(--s-2); padding: var(--s-4); border: 1px solid var(--c-border-strong); border-radius: var(--r-md); background: var(--c-surface); }
  .subscribe-switch > .overline { margin: 0; }
  .subscribe-switch .btn { justify-content: flex-start; }
  .subscribe-plans > .overline { margin-bottom: var(--s-3); }
  .subscribe .plan .price { display: flex; gap: var(--s-2); align-items: baseline; }
  @media (max-width: 1023px) { .subscribe-grid { grid-template-columns: minmax(0, 1fr); } }
}