@font-face {
  font-family: Inter;
  src: url("./inter.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("./plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("./plex-mono-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

:root {
  color-scheme: dark;
  /* ground, one tone step up, two steps up */
  --ink: #0d0f0d;
  --panel: #161915;
  --panel-2: #1f231d;
  --panel-3: #2a2e26;
  --field: #2d3128;
  --text: #ecedea;
  --muted: #b4b8ad;
  --subtle: #959a8c;
  --amber: #ecb565;
  --amber-hi: #f6cf91;
  --amber-ink: #1c160c;
  --green: #b6c69a;
  --alert: #ff7b5c;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  /* type: display, heading, title, lead, body, small */
  --t-display: clamp(52px, 8.4vw, 136px);
  --t-heading: clamp(42px, 5.6vw, 88px);
  --t-title: clamp(24px, 2.4vw, 34px);
  --t-lead: clamp(18px, 1.45vw, 21px);
  --t-body: 16px;
  --t-small: 13px;
  --width: min(1320px, calc(100% - clamp(32px, 10vw, 160px)));
  --header-height: 76px;
  --response: cubic-bezier(.2, .78, .26, 1);
  --spring: cubic-bezier(.34, 1.4, .5, 1);
  font-family: Inter, system-ui, sans-serif;
  font-size: var(--t-body);
  background: var(--ink);
  color: var(--text);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-height); }
body { min-width: 280px; margin: 0; background: var(--ink); overflow-x: clip; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input { font: inherit; }
button { color: inherit; cursor: pointer; }
a, button, summary { -webkit-tap-highlight-color: #ecb5652b; }
:is(button, a, input, summary, [tabindex]):focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; }
::selection { background: var(--amber); color: var(--ink); }
code { font-family: var(--mono); font-size: 1em; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.shell { width: var(--width); margin-inline: auto; }
.section { padding-block: clamp(80px, 10vw, 150px); }
section[id] { scroll-margin-top: 0; }
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 30; padding: 12px 16px; background: var(--amber); color: var(--ink); transform: translateY(calc(-100% - 20px)); }
.skip-link:focus { transform: translateY(0); }
h1, h2, h3, p { margin-block-start: 0; }
h1, h2, h3 { font-weight: 600; text-wrap: balance; }
h2 { margin: 18px 0 0; font-size: var(--t-heading); line-height: .96; letter-spacing: -.065em; }
.eyebrow { display: flex; align-items: center; gap: 12px; margin: 0; color: var(--amber); font: 600 var(--t-small)/1.4 var(--mono); letter-spacing: .12em; }
.indicator { width: 8px; height: 8px; display: inline-block; flex: 0 0 8px; border-radius: 50%; background: currentColor; }
.rule { width: 28px; height: 2px; background: currentColor; flex: 0 0 28px; }

/* ---------- masthead ---------- */
.masthead { position: fixed; z-index: 20; inset: 0 0 auto; transition: background-color 260ms ease, backdrop-filter 260ms ease; }
.masthead.is-scrolled, .masthead.menu-open { background: #0d0f0de6; backdrop-filter: blur(14px); }
.masthead-inner { position: relative; display: grid; height: var(--header-height); grid-template-columns: 1fr auto 1fr; align-items: center; }
.brand { display: inline-flex; width: max-content; align-items: center; color: #f4f1e9; font-size: var(--t-body); font-weight: 760; letter-spacing: .24em; line-height: 1; }
.brand { transition: color 280ms ease, letter-spacing 420ms var(--response); }
.brand-mark { transition: transform 420ms var(--spring), background-color 280ms ease; }
.brand:is(:hover, :focus-visible) { color: var(--amber); letter-spacing: .26em; }
.brand:is(:hover, :focus-visible) .brand-mark { background: var(--amber-hi); transform: rotate(-6deg) scale(1.08); }
.brand-mark {
  display: inline-block; width: 30px; height: 30px; margin-right: 12px; background: var(--amber);
  clip-path: polygon(0 8%, 100% 8%, 89% 25%, 27% 25%, 15% 42%, 72% 42%, 61% 59%, 31% 59%, 19% 76%, 50% 76%, 39% 93%, 0 93%, 0 69%, 22% 36%, 0 36%);
}
.nav-location { display: flex; align-items: center; gap: 10px; color: #dedccf; font-size: var(--t-small); font-weight: 560; }
.nav-location .indicator { color: var(--amber); width: 6px; height: 6px; flex-basis: 6px; animation: blink 2.4s steps(2) infinite; }
.masthead-actions { display: flex; justify-self: end; align-items: center; gap: 10px; }
.button.compact { min-height: 44px; padding: 0 14px; gap: 10px; font-size: var(--t-small); }
.price-tag { padding: 3px 7px; background: var(--amber-ink); color: var(--amber-hi); font-size: var(--t-small); font-weight: 650; font-variant-numeric: tabular-nums; }
.menu-toggle {
  display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 14px;
  border: 0; background: var(--panel-2); color: var(--text); font-size: var(--t-small); font-weight: 600;
}
.menu-toggle[aria-expanded="true"] { background: var(--panel-3); color: var(--amber-hi); }
.menu-icon { width: 14px; height: 9px; border-block: 2px solid var(--amber); }
.menu-chevron { display: inline-block; width: 7px; height: 7px; margin: -4px 1px 0 2px; border: solid var(--amber); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform 290ms var(--response); }
.menu-toggle[aria-expanded="true"] .menu-chevron { transform: translateY(4px) rotate(225deg); }
.nav-progress { position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; pointer-events: none; background: var(--amber); transform: scaleX(var(--scroll-progress, 0)); transform-origin: left; }

.navigation {
  position: absolute; top: calc(100% + 8px); right: 0; width: min(600px, 100%);
  max-height: calc(100dvh - var(--header-height) - 24px); padding: 18px; overflow: auto; overscroll-behavior: contain;
  background: var(--panel-2); display: none;
}
.navigation.is-open { display: block; animation: nav-open 340ms var(--response); }
@keyframes nav-open { from { clip-path: inset(0 0 100%); transform: translateY(-10px); } to { clip-path: inset(0); transform: none; } }
.nav-heading { display: flex; align-items: center; gap: 10px; margin: 0 2px 14px; color: var(--amber); font-size: var(--t-small); font-weight: 650; }
.nav-destinations { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.nav-destinations a { display: flex; min-height: 64px; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-left: 3px solid transparent; background: var(--panel); }
.nav-destinations a:first-child { grid-column: 1 / -1; }
.nav-destinations strong { display: block; color: #eeeee6; font-size: var(--t-body); font-weight: 650; }
.nav-destinations small { display: block; margin-top: 3px; color: var(--muted); font-size: var(--t-small); }
.nav-arrow, .back-top span { color: var(--amber); }
.nav-destinations a[aria-current="location"] { background: var(--panel-3); border-left-color: var(--amber); }
.nav-destinations a[aria-current="location"] strong { color: var(--amber); }
.navigation.is-open a { animation: rise-in 300ms var(--response) backwards; }
.navigation.is-open a:nth-child(n + 2) { animation-delay: 30ms; }
.navigation.is-open a:nth-child(n + 4) { animation-delay: 60ms; }
.navigation.is-open a:nth-child(n + 6) { animation-delay: 90ms; }
.navigation.is-open a:nth-child(n + 8) { animation-delay: 120ms; }

/* ---------- buttons ---------- */
.action-row { display: flex; flex-wrap: wrap; gap: 12px; }
.button { display: inline-flex; min-height: 54px; align-items: center; justify-content: center; gap: 16px; padding: 0 20px; border: 0; font-size: var(--t-body); font-weight: 680; }
.button.primary { background: var(--amber); color: var(--amber-ink); }
.button.primary:hover { background: var(--amber-hi); }
.button.secondary { background: var(--panel-3); color: #f1efe6; gap: 10px; }
.button.secondary:hover { background: #363a30; }
.button.large { min-height: 64px; padding-inline: 28px; font-size: var(--t-lead); }
.terminal-symbol { color: var(--amber); font-weight: 760; letter-spacing: -.04em; }
.text-link { display: inline-flex; min-height: 44px; align-items: center; gap: 11px; color: var(--amber); font-size: var(--t-body); font-weight: 650; }
.text-link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- hero ---------- */
.hero { position: relative; display: grid; min-height: clamp(720px, 100svh, 1000px); isolation: isolate; grid-template-rows: 1fr auto auto; overflow: clip; }
.hero-backdrop, .hero-overlay, .hero-watch { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero-backdrop { overflow: hidden; background: #181c16; }
.hero-backdrop img { width: 100%; height: 100%; object-fit: cover; object-position: 66% 50%; transform: scale(1.14) translate3d(var(--parallax-x, 0px), calc(var(--parallax-y, 0px) + var(--drift, 0px)), 0); }
.hero-overlay {
  background:
    linear-gradient(0deg, var(--ink) 0%, #0d0f0de0 9%, #0d0f0d22 36%, transparent 62%, #0d0f0d99 100%),
    linear-gradient(90deg, #0b0d0bf2 0%, #0b0d0bb8 26%, #0b0d0b44 52%, transparent 78%);
}
.hero-watch { overflow: hidden; }
.radar { position: absolute; right: max(4vw, calc((100% - 1320px) / 2)); top: 50%; width: clamp(280px, 34vw, 520px); aspect-ratio: 1; transform: translateY(-46%); opacity: .9; }
.radar-ring { fill: none; stroke: #ecb56540; stroke-width: .6; }
.radar-cross { stroke: #ecb56530; stroke-width: .5; }
.radar-sweep path { fill: #ecb5652e; }
.radar-sweep { transform-origin: 0 0; animation: sweep 5.2s linear infinite; }
.blip { fill: var(--amber); opacity: .25; animation: blip 5.2s linear infinite; }
.blip.is-alert { fill: var(--alert); }
.b1 { animation-delay: -4.6s; } .b2 { animation-delay: -1.7s; } .b3 { animation-delay: -2.6s; } .b4 { animation-delay: -.9s; } .b5 { animation-delay: -4.1s; }
@keyframes sweep { to { transform: rotate(-360deg); } }
@keyframes blip { 0% { opacity: 1; r: 4.4; } 18% { opacity: .55; } 60%, 100% { opacity: .18; r: 2.6; } }
.hero-content { align-self: center; padding-block: calc(var(--header-height) + 64px) 40px; }
.hero h1 { margin: 0 0 28px; max-width: 12ch; color: #f4f1e8; font-size: var(--t-display); line-height: .9; letter-spacing: -.072em; }
.hero h1 .line { display: block; }
.hero h1 .accent { color: var(--amber); }
.hero-description strong { color: var(--amber-hi); font-weight: 650; }
.hero-description { max-width: 46ch; margin-bottom: 32px; color: #dcddd4; font-size: var(--t-lead); line-height: 1.55; }

.watch-log { position: relative; width: var(--width); height: 52px; margin: 0 auto 18px; padding: 0; list-style: none; overflow: hidden; background: #0d0f0df0; font-size: var(--t-small); line-height: 52px; color: #d8d9cf; }
.watch-log li { position: absolute; inset: 0 auto 0 0; padding: 0 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.watch-log li strong { color: var(--amber-hi); font-weight: 600; }
.log-time { color: var(--amber); margin-right: 12px; font-weight: 650; font-variant-numeric: tabular-nums; }
.watch-log li:not(:first-child) { display: none; }
.watch-log.is-live li { display: block; opacity: 0; transform: translateY(100%); transition: transform 520ms var(--response), opacity 300ms ease; }
.watch-log.is-live li.is-shown { opacity: 1; transform: none; }
.watch-log.is-live li.is-gone { opacity: 0; transform: translateY(-100%); }
.watch-log::before { content: "Live"; position: absolute; right: 0; top: 0; z-index: 1; padding: 0 16px; background: var(--alert); color: #200a04; font-weight: 700; line-height: 52px; }

.hero-index { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 56px; }
.hero-index a { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 14px; min-width: 0; min-height: 84px; padding: 14px 18px; background: #161915f2; }
.hero-index a:hover { background: #262a22; }
.hero-index strong { display: block; margin-bottom: 4px; font-size: var(--t-body); font-weight: 650; }
.hero-index small { display: block; color: var(--muted); font-size: var(--t-small); }
.index-arrow { color: var(--amber); }
.module-icon { position: relative; display: grid; width: 28px; height: 28px; place-items: center; color: var(--amber); }
.module-icon::before, .module-icon::after { content: ""; display: block; }
.module-icon.shield::before { position: absolute; inset: 2px 4px; background: currentColor; clip-path: polygon(50% 0, 100% 16%, 94% 65%, 78% 85%, 50% 100%, 22% 85%, 6% 65%, 0 16%, 50% 0, 50% 9%, 9% 22%, 14% 62%, 27% 78%, 50% 91%, 73% 78%, 86% 62%, 91% 22%, 50% 9%); }
.module-icon.shield::after { width: 9px; height: 5px; border: solid currentColor; border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg); }
.module-icon.storage::before { position: absolute; inset: 5px 2px; border: 2px solid currentColor; background: linear-gradient(currentColor, currentColor) 50% 49% / 100% 2px no-repeat; }
.module-icon.storage::after { justify-self: start; width: 3px; height: 3px; margin-left: 6px; border-radius: 50%; background: currentColor; transform: translateY(-4px); box-shadow: 0 8px currentColor; }
.module-icon.envelope::before { position: absolute; inset: 5px 2px; border: 2px solid currentColor; }
.module-icon.envelope::after { width: 13px; height: 13px; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-4px) rotate(45deg); }
.module-icon.spark::before { position: absolute; inset: 3px; background: currentColor; clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }

/* ---------- marquee ---------- */
.marquee { overflow: hidden; padding-block: 22px; background: var(--amber); color: var(--amber-ink); }
.marquee-track { display: flex; width: max-content; animation: marquee 46s linear infinite; }
.marquee span { display: inline-flex; align-items: center; gap: 28px; padding-right: 28px; font-size: var(--t-title); font-weight: 680; letter-spacing: -.04em; white-space: nowrap; }
.marquee span::after { content: ""; width: 14px; height: 14px; background: var(--amber-ink); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- system ---------- */
.section-heading { display: grid; grid-template-columns: 1.1fr .9fr; align-items: end; gap: clamp(25px, 5.5vw, 90px); margin-bottom: 40px; }
.section-heading > p { max-width: 42ch; margin: 0 0 6px; color: var(--muted); font-size: var(--t-lead); line-height: 1.6; }
.system-frame { display: grid; grid-template-columns: 1.3fr 1fr; gap: 6px; }
.system-visual { position: relative; min-height: 600px; isolation: isolate; overflow: hidden; background: #171b15; }
.scene-host, .scene-fallback { position: absolute; inset: 0; }
.scene-host canvas { width: 100%; height: 100%; display: block; cursor: grab; touch-action: pan-y pinch-zoom; }
.scene-host canvas:active { cursor: grabbing; }
.scene-top { position: absolute; top: 18px; left: 20px; right: 18px; display: flex; gap: 10px; justify-content: space-between; align-items: center; pointer-events: none; }
.scene-label { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: #0d0f0dd9; color: var(--amber); font-size: var(--t-small); font-weight: 600; }
.scene-label .indicator { width: 6px; height: 6px; flex-basis: 6px; animation: blink 2s steps(2) infinite; }
.icon-button { width: 44px; height: 44px; padding: 0; border: 0; background: #0d0f0dd9; color: var(--amber); font-size: var(--t-lead); pointer-events: auto; }
.icon-button:hover { background: var(--panel-3); }
.scene-caption { position: absolute; bottom: 18px; left: 20px; right: 20px; display: flex; justify-content: space-between; gap: 10px; margin: 0; color: #cdd0c0; font-size: var(--t-small); line-height: 1.4; pointer-events: none; }
.scene-caption span:last-child { color: var(--amber); font-weight: 650; }
.scene-fallback { display: grid; place-items: center; }
.fallback-layer {
  grid-area: 1 / 1; width: min(49%, 270px); aspect-ratio: 1.55;
  background: repeating-linear-gradient(90deg, #74765439 0 1px, transparent 1px 12px), linear-gradient(145deg, #3d411f, #201f14 82%);
  transform: rotate(-28deg) skew(27deg) translate(var(--offset), var(--offset));
}
.fallback-guardian { --offset: 58px; z-index: 1; }
.fallback-files { --offset: 0px; z-index: 2; }
.fallback-outpost { --offset: -58px; z-index: 3; }
[data-module="guardian"] .fallback-guardian, [data-module="files"] .fallback-files, [data-module="outpost"] .fallback-outpost { background: linear-gradient(145deg, #a9803f, #5b4321 82%); }
.system-controls { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.install-console { margin: 0; padding: 22px 24px; border: 0; background: #0b0d0b; }
.install-run { margin: 0 0 16px; color: #f0e7d3; font-size: var(--t-body); overflow-wrap: anywhere; }
.install-run .prompt { color: var(--amber); }
.install-run code { font-size: 1em; }
#install-command::after { content: ""; display: inline-block; width: .55em; height: 1.05em; margin-left: 4px; vertical-align: -2px; background: var(--amber); animation: blink 1.1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.install-step { position: relative; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin: 0; padding: 10px 0; color: #e7e8de; font-size: var(--t-body); font-weight: 560; cursor: pointer; }
.install-step.is-done { cursor: default; }
.install-step small { flex-basis: 100%; padding-left: 34px; color: var(--subtle); font-size: var(--t-small); font-weight: 400; }
.install-step input { position: absolute; opacity: 0; width: 22px; height: 22px; margin: 0; }
.install-step .box, .install-step .tick { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: 0 0 22px; background: var(--field); transform: translateY(5px); transition: background 180ms ease; }
.install-step .tick::after, .install-step input:checked + .box::after { content: ""; width: 6px; height: 11px; border: solid var(--amber-ink); border-width: 0 2.5px 2.5px 0; transform: translate(0, -1px) rotate(45deg); }
.install-step .tick { background: var(--green); }
.install-step input:checked + .box { background: var(--amber); }
.install-step input:focus-visible + .box { outline: 2px solid var(--amber); outline-offset: 3px; }
.install-step:hover .box { background: #45483b; }
.install-step:hover input:checked + .box { background: var(--amber-hi); }
.install-status { margin: 12px 0 0; color: var(--green); font-size: var(--t-small); }
.module-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.module-tabs button { min-height: 56px; padding: 10px 8px; border: 0; border-bottom: 3px solid transparent; background: var(--panel); color: var(--muted); font-size: var(--t-body); font-weight: 640; transition: background-color 180ms ease, color 180ms ease; }
.module-tabs button[aria-selected="true"] { background: var(--panel-3); color: var(--amber); border-bottom-color: var(--amber); }
.module-tabs button:hover { background: var(--panel-2); color: var(--amber-hi); }
.module-tabs button:focus-visible { outline-offset: -4px; }
.module-detail { flex: 1; padding: clamp(24px, 3vw, 40px); background: var(--panel); }
.module-detail:focus-visible { outline-offset: -6px; }
.module-type { margin-bottom: 12px; color: var(--amber); font-size: var(--t-small); font-weight: 650; line-height: 1.5; }
.module-detail h3 { margin: 0 0 14px; font-size: var(--t-title); line-height: 1.05; letter-spacing: -.05em; }
.module-detail > p:not(.module-type) { margin: 0 0 20px; color: var(--muted); font-size: var(--t-body); line-height: 1.6; }
.module-facts { display: grid; gap: 6px; margin: 0 0 8px; }
.module-facts div { display: grid; grid-template-columns: minmax(84px, .5fr) 1.5fr; gap: 10px; padding: 10px 12px; background: var(--panel-2); font-size: var(--t-body); line-height: 1.4; }
.module-facts dt { color: var(--subtle); font-size: var(--t-small); line-height: 1.6; font-weight: 600; }
.module-facts dd { margin: 0; color: #e4e5dc; }
.module-detail:not([hidden]) > * { animation: rise-in 420ms var(--response) backwards; }
.module-detail:not([hidden]) > :nth-child(2) { animation-delay: 40ms; }
.module-detail:not([hidden]) > :nth-child(3) { animation-delay: 80ms; }
.module-detail:not([hidden]) > :nth-child(4) { animation-delay: 120ms; }
.module-detail:not([hidden]) > :nth-child(5) { animation-delay: 160ms; }

/* ---------- shared feature copy ---------- */
.feature-copy > p:not(.eyebrow) { max-width: 46ch; margin: 26px 0 24px; color: var(--muted); font-size: var(--t-lead); line-height: 1.6; }
.feature-copy code { color: #ecdcbc; }
.feature-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.feature-list.two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
.feature-list li { display: flex; align-items: baseline; gap: 12px; color: #e2e2d8; font-size: var(--t-body); line-height: 1.5; }
.feature-list li::before { content: ""; width: 8px; height: 8px; flex: 0 0 8px; background: var(--amber); transform: translateY(-1px) rotate(45deg); }
.muted-list li { color: var(--muted); }
.muted-list li::before { background: var(--field); }
.feature-art { position: relative; margin: 0; min-width: 0; overflow: hidden; background: var(--panel); }
.feature-art img { width: 100%; height: auto; aspect-ratio: 1.32; object-fit: cover; transform: scale(var(--zoom, 1.1)) translate3d(0, var(--drift, 0px), 0); transition: transform 900ms var(--response); }
.feature-art:hover img { --zoom: 1.15; }
.corner { position: absolute; width: 22px; height: 22px; pointer-events: none; border-color: var(--amber); border-style: solid; }
.corner.top-left { top: 14px; left: 14px; border-width: 2px 0 0 2px; }
.corner.bottom-right { bottom: 14px; right: 14px; border-width: 0 2px 2px 0; }
.ui-bar { display: flex; align-items: center; gap: 10px; margin: 0; padding: 14px 18px; background: var(--panel-3); color: #e3e3d9; font-size: var(--t-small); font-weight: 600; line-height: 1.4; }
.ui-bar .indicator { color: var(--green); width: 7px; height: 7px; flex-basis: 7px; animation: blink 2s steps(2) infinite; }
.ui-count { margin-left: auto; color: var(--muted); }
.ui-count strong { color: var(--amber); font-weight: 600; }

/* ---------- guardian ---------- */
.guardian-band { padding-block: clamp(80px, 10vw, 150px); background: var(--panel); }
.guardian-layout { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: clamp(32px, 5.5vw, 90px); }
.guardian-ui { margin: 0; background: #0b0d0b; min-width: 0; }
.netmap { display: block; width: 100%; height: auto; padding: 10px 6px 0; }
.netmap .links path { fill: none; stroke: #ecb5654d; stroke-width: 1.4; stroke-dasharray: 3 5; animation: dash 1.6s linear infinite; }
.netmap .links .link-alert { stroke: #ff7b5cb3; stroke-width: 1.8; }
@keyframes dash { to { stroke-dashoffset: -16; } }
.netmap .packets circle { fill: var(--amber-hi); }
.netmap .packets .packet-alert { fill: var(--alert); }
.netmap .node rect { fill: var(--panel-2); }
.netmap .node text { fill: #e7e7dd; font: 600 13px Inter, sans-serif; text-anchor: middle; }
.netmap .node.hub rect { fill: var(--amber); }
.netmap .node.hub text { fill: var(--amber-ink); }
.netmap .node.alert rect { fill: #3a1d14; stroke: var(--alert); stroke-width: 1.5; animation: alert-pulse 1.4s ease-in-out infinite; }
.netmap .node.alert text { fill: #ffd2c6; }
.netmap .node.is-approved rect { fill: #24301c; stroke: var(--green); animation: none; }
.netmap .node.is-approved text { fill: #e2f0cc; }
.netmap .node.is-blocked { opacity: .35; }
.netmap .node.is-blocked rect { animation: none; stroke: #ff7b5c66; }
@keyframes alert-pulse { 50% { stroke-opacity: .25; } }
.alarms { display: grid; gap: 6px; margin: 0; padding: 6px; list-style: none; }
.alarms li { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 14px; padding: 12px 16px; border-left: 3px solid transparent; background: var(--panel); }
.alarms strong { font-size: var(--t-body); font-weight: 650; }
.alarms span { grid-column: 1; color: var(--muted); font-size: var(--t-small); line-height: 1.5; }
.alarms li.is-alert { border-left-color: var(--alert); }
.alarms li.is-alert strong { color: #ffd2c6; }
.alarms li.is-resolved { border-left-color: var(--green); }
.alarms li.is-resolved strong { color: #e2f0cc; }
.alarm-actions { grid-column: 2 !important; grid-row: 1 / span 2; display: flex; gap: 6px; }
.alarm-actions button, .proposal-actions button { min-height: 40px; padding: 0 14px; border: 0; background: var(--field); color: var(--text); font-size: var(--t-small); font-weight: 650; transition: background-color 180ms ease, transform 200ms var(--response); }
.alarm-actions button:first-child, .proposal-actions button:first-child { background: var(--amber); color: var(--amber-ink); }
.alarm-actions button:hover, .proposal-actions button:hover { background: #45483b; }
.alarm-actions button:first-child:hover, .proposal-actions button:first-child:hover { background: var(--amber-hi); }
.alarm-actions button:active, .proposal-actions button:active { transform: scale(.96); }

/* ---------- AI ---------- */
.ai-section { display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: clamp(32px, 5.5vw, 90px); }
.ai-chat { margin: 0; min-width: 0; background: #0b0d0b; }
.chat { display: grid; gap: 12px; padding: 22px; min-height: 420px; align-content: start; }
.msg { margin: 0; max-width: 88%; padding: 14px 18px; font-size: var(--t-body); line-height: 1.55; }
.msg.you { justify-self: end; background: var(--amber); color: var(--amber-ink); font-weight: 560; }
.msg.ai { background: var(--panel-2); color: #e7e7de; }
.msg.ai code { color: var(--amber-hi); }
.msg.tools { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; }
.msg.tools code { padding: 6px 10px; background: var(--panel); color: var(--green); font-size: var(--t-small); }
.msg.proposal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; max-width: 100%; border-left: 3px solid var(--amber); background: var(--panel-3); }
.msg.proposal strong { color: var(--amber-hi); }
.proposal-actions { display: flex; gap: 6px; }
.msg.proposal.is-applied { border-left-color: var(--green); }
.msg.proposal.is-applied strong { color: var(--green); }
.caret { display: inline-block; width: .5em; height: 1.05em; margin-left: 2px; vertical-align: -2px; background: var(--amber); animation: blink 1s steps(2) infinite; }

/* ---------- self-hosting ---------- */
.self-host-band { background: var(--panel); }
.self-host-layout { display: grid; grid-template-columns: .92fr 1.08fr; align-items: center; gap: clamp(30px, 5.2vw, 82px); padding-block: clamp(80px, 9vw, 130px); }
.principles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 0; }
.principles div { padding: 16px 18px; background: var(--panel-2); }
.principles dt { color: var(--amber); font-size: var(--t-body); font-weight: 650; }
.principles dd { margin: 6px 0 0; color: var(--muted); font-size: var(--t-body); line-height: 1.45; }
.device-art img { aspect-ratio: 1.45; }

/* ---------- files ---------- */
.feature { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: clamp(32px, 6vw, 100px); padding-block: clamp(80px, 10vw, 150px); }

/* ---------- outpost ---------- */
.outpost-band { padding-block: clamp(80px, 10vw, 150px); background: var(--panel); }
.outpost-layout { display: grid; grid-template-columns: .95fr 1.05fr; align-items: center; gap: clamp(32px, 5.5vw, 90px); }
.spam-check { position: relative; margin: 0; min-width: 0; overflow: hidden; background: #0b0d0b; }
.spam-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 6px; }
.spam-pick button { display: grid; gap: 4px; min-height: 72px; padding: 12px 14px; border: 0; border-bottom: 3px solid transparent; background: var(--panel); text-align: left; transition: background-color 180ms ease; }
.spam-pick strong { font-size: var(--t-body); font-weight: 650; }
.spam-pick span { color: var(--muted); font-size: var(--t-small); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spam-pick button:hover { background: var(--panel-2); }
.spam-pick button[aria-checked="true"] { background: var(--panel-3); border-bottom-color: var(--amber); }
.spam-result { position: relative; z-index: 1; padding: 18px 24px 26px; }
.spam-verdict { display: flex; align-items: baseline; gap: 16px; margin: 0 0 14px; }
.spam-verdict .score { font-size: var(--t-heading); font-weight: 680; line-height: .9; letter-spacing: -.06em; color: var(--alert); font-variant-numeric: tabular-nums; }
.spam-verdict .verdict { font-size: var(--t-title); font-weight: 620; letter-spacing: -.035em; }
.spam-check[data-level="safe"] .score { color: var(--green); }
.spam-check[data-level="mid"] .score { color: var(--amber); }
.meter { height: 8px; margin-bottom: 18px; background: var(--field); overflow: hidden; }
.meter span { display: block; height: 100%; width: 100%; background: var(--alert); transform: scaleX(var(--score, 1)); transform-origin: left; transition: transform 900ms var(--response), background-color 300ms ease; }
.spam-check[data-level="safe"] .meter span { background: var(--green); }
.spam-check[data-level="mid"] .meter span { background: var(--amber); }
.reasons { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.reasons li { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: baseline; padding: 11px 14px; background: var(--panel); font-size: var(--t-body); line-height: 1.45; }
.reasons li b { font-size: var(--t-small); font-weight: 700; color: var(--alert); white-space: nowrap; }
.reasons li.is-good b { color: var(--green); }
.reasons li.is-fresh { animation: rise-in 420ms var(--response) backwards; }
.spam-art { position: absolute; inset: auto 0 0 auto; width: 70%; opacity: .14; pointer-events: none; mask-image: linear-gradient(90deg, transparent, #000 60%); }

/* ---------- terminal ---------- */
.terminal-section { display: grid; grid-template-columns: 1fr 1.1fr; align-items: center; gap: clamp(30px, 6vw, 94px); }
.terminal-intro > p:not(.eyebrow) { max-width: 42ch; margin: 26px 0 26px; color: var(--muted); font-size: var(--t-lead); line-height: 1.6; }
.terminal-intro p code { color: #ecdcbc; }
.command-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; max-width: 420px; }
.command-options button { display: flex; min-height: 48px; align-items: center; justify-content: space-between; gap: 8px; border: 0; border-left: 3px solid transparent; background: var(--panel-2); padding: 4px 14px; color: #e0e4d4; font-size: var(--t-body); text-align: left; }
.command-options button span { color: var(--amber); }
.command-options button:hover, .command-options button.is-current { background: var(--panel-3); border-left-color: var(--amber); }
.terminal { min-width: 0; background: #0a0c0a; }
.terminal-titlebar { display: flex; align-items: center; gap: 13px; min-height: 54px; padding: 10px 16px; background: var(--panel-3); }
.terminal-titlebar code { font-size: var(--t-small); font-weight: 600; }
.demo-status { margin-left: auto; display: flex; gap: 8px; align-items: center; color: var(--green); font-size: var(--t-small); font-weight: 600; line-height: 1.4; }
.demo-status .indicator { width: 6px; height: 6px; flex-basis: 6px; animation: blink 2s steps(2) infinite; }
.terminal-output { height: 360px; overflow: auto; padding: 22px 20px; scrollbar-color: #505344 transparent; color: #cfd4c2; font: var(--t-body)/1.6 var(--mono); overflow-wrap: anywhere; }
.terminal-output:focus-visible { outline-offset: -3px; }
.terminal-output samp { display: block; margin: 0; font: inherit; white-space: pre-wrap; }
.terminal-output samp + .run-line { margin-top: 16px; }
.terminal-output .run-line { margin-bottom: 6px; color: #f4e7cb; font-weight: 600; }
.terminal-output .run-line::before { content: "$ "; color: var(--amber); }
.terminal-output .terminal-pass { color: var(--green); }
.terminal-output .terminal-warn { color: var(--amber); }
.terminal-output .terminal-message, .terminal-no-script { color: #aab09b; }
.terminal-no-script { padding: 0 16px; }
.terminal-input { display: flex; align-items: center; min-height: 56px; background: var(--panel); padding-left: 18px; font-size: var(--t-body); }
.terminal-input input { font-family: var(--mono); }
.terminal-input label { color: var(--amber); font-weight: 700; }
.terminal-input input { flex: 1; width: 100%; min-width: 0; min-height: 48px; padding: 10px; border: 0; background: transparent; color: var(--text); caret-color: var(--amber); }
.terminal-input input::placeholder { color: #9ba28f; }
.terminal-input input:focus-visible { outline-offset: -4px; }
.terminal-input button { align-self: stretch; padding: 0 16px; border: 0; background: var(--panel-3); color: #ece6d8; white-space: nowrap; }
.terminal-input button span { color: var(--amber); }
.terminal-input button:hover { background: #3a3d33; }
.terminal-input button:focus-visible { outline-offset: -4px; }

/* ---------- pricing ---------- */
.pricing-band { position: relative; overflow: hidden; background: var(--amber); color: var(--amber-ink); }
.pricing-band::before { content: "249"; position: absolute; right: -2vw; bottom: -.16em; font-size: clamp(240px, 38vw, 620px); font-weight: 780; line-height: 1; letter-spacing: -.08em; color: #0000000f; pointer-events: none; }
.pricing-layout { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 100px); padding-block: clamp(80px, 10vw, 150px); }
.pricing-band .eyebrow { color: var(--amber-ink); }
.pricing-band h2 { color: #120e07; }
.price { display: flex; align-items: flex-start; gap: 6px; margin: 34px 0 8px; line-height: .82; }
.price .currency { margin-top: .32em; font-size: var(--t-title); font-weight: 680; }
.price .amount { font-size: var(--t-display); font-weight: 760; letter-spacing: -.07em; font-variant-numeric: tabular-nums; }
.price-terms { max-width: 40ch; margin: 18px 0 28px; font-size: var(--t-lead); line-height: 1.55; color: #2e2614; }
.pricing-band .button.primary { background: var(--amber-ink); color: var(--amber-hi); }
.pricing-band .button.primary:hover { background: #000; }
.checkout-note { margin: 14px 0 0; font-size: var(--t-small); font-weight: 650; color: #3c321b; }
.checkout-note.is-flash { animation: flash 900ms var(--response); }
@keyframes flash { 0%, 40% { color: #000; transform: translateX(4px); } 100% { transform: none; } }
.pricing-lists { align-self: center; padding: clamp(24px, 3vw, 40px); background: #0d0f0d; color: var(--text); }
.pricing-lists h3 { margin: 0 0 16px; color: var(--amber); font-size: var(--t-lead); font-weight: 650; letter-spacing: -.01em; }
.pricing-lists .feature-list + h3 { margin-top: 30px; }

/* ---------- questions ---------- */
.compat-section { background: var(--ink); }
.compat-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(30px, 8vw, 113px); padding-block: clamp(80px, 10vw, 150px); }
.compat-layout > div:first-child { align-self: start; position: sticky; top: calc(var(--header-height) + 30px); }
.questions { display: grid; gap: 6px; }
.questions details { background: var(--panel); transition: background-color 200ms ease; }
.questions details[open] { background: var(--panel-2); }
.questions summary { display: flex; min-height: 64px; align-items: center; justify-content: space-between; gap: 14px; padding: 0 20px; cursor: pointer; list-style: none; color: #ecede4; font-size: var(--t-lead); font-weight: 620; letter-spacing: -.015em; }
.questions summary::-webkit-details-marker { display: none; }
.questions summary::after { content: "+"; color: var(--amber); font: 22px var(--mono); transition: transform 300ms var(--response); }
.questions details[open] summary::after { transform: rotate(45deg); }
.questions summary:hover { color: var(--amber-hi); }
.questions details p { max-width: 60ch; margin: 0; padding: 0 20px 22px; color: var(--muted); font-size: var(--t-body); line-height: 1.65; }
.questions details[open] p { animation: rise-in 360ms var(--response); }

/* ---------- footer ---------- */
.footer { overflow: hidden; background: var(--ink); }
.footer-mark { margin: 30px 0 0; padding: 0; font-size: min(25.5vw, 380px); font-weight: 800; line-height: .82; letter-spacing: -.07em; color: var(--panel-2); white-space: nowrap; user-select: none; }
.footer-mark .letter { display: inline-block; transition: color 400ms ease, transform 500ms var(--spring); }
.footer-mark .letter:hover { color: var(--amber); transform: translateY(-4%); }
.footer-mark.is-lit .letter { animation: letter-lit 1.6s var(--response) backwards; animation-delay: calc(var(--i) * 90ms); }
@keyframes letter-lit { 0% { color: var(--amber); transform: translateY(18%); } 60% { color: var(--amber); } 100% { color: var(--panel-2); transform: none; } }
.footer-row { display: grid; min-height: 96px; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.footer-row p { margin: 0; color: var(--subtle); font-size: var(--t-small); text-align: center; }
.back-top { display: flex; min-height: 44px; align-items: center; gap: 9px; justify-self: end; color: var(--muted); font-size: var(--t-small); font-weight: 600; }
.footer a:hover { color: var(--amber); }

/* ---------- control feedback ---------- */
:is(.menu-toggle, .button, .hero-index a, .nav-destinations a, .module-tabs button, .icon-button, .command-options button, .terminal-input button, .spam-pick button) {
  position: relative; isolation: isolate; overflow: hidden;
  transition: background-color 220ms ease, color 200ms ease, box-shadow 240ms ease, transform 260ms var(--response);
}
:is(.menu-toggle, .button, .hero-index a, .nav-destinations a, .module-tabs button, .icon-button, .command-options button, .terminal-input button, .spam-pick button)::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(111deg, transparent 32%, #ffe2ae33 48%, transparent 64%) 150% 0 / 245% 100% no-repeat; opacity: 0;
}
:is(.menu-toggle, .button, .hero-index a, .nav-destinations a, .icon-button, .command-options button, .terminal-input button, .spam-pick button):active { transform: scale(.98); }
:is(.button, .hero-index a, .nav-destinations a, .text-link, .back-top, .command-options button, .terminal-input button) > :is(.index-arrow, .nav-arrow, span[aria-hidden="true"]:last-child) { transition: transform 300ms var(--response); }
@media (hover: hover) {
  :is(.menu-toggle, .button, .hero-index a, .nav-destinations a, .module-tabs button, .icon-button, .command-options button, .terminal-input button, .spam-pick button):hover::before { animation: control-sweep 690ms var(--response); }
  :is(.menu-toggle, .button):hover:not(:active) { transform: translateY(-2px); }
  :is(.button, .hero-index a, .nav-destinations a, .text-link, .back-top, .command-options button, .terminal-input button):hover > :is(.index-arrow, .nav-arrow, span[aria-hidden="true"]:last-child) { transform: translate(3px, 1px); }
}
@keyframes control-sweep { 0% { background-position: 150% 0; opacity: 0; } 22% { opacity: 1; } 100% { background-position: -35% 0; opacity: 0; } }
@keyframes rise-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---------- entrances: hidden starting states only where motion is welcome ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .hero h1 .line { animation: line-up 900ms var(--response) backwards; }
  .js .hero h1 .line + .line { animation-delay: 110ms; }
  .js .hero .eyebrow { animation: rise-in 600ms var(--response) backwards; }
  .js .hero-description { animation: rise-in 700ms var(--response) 220ms backwards; }
  .js .hero .action-row { animation: rise-in 700ms var(--response) 320ms backwards; }
  .js .hero-index a { animation: rise-in 700ms var(--response) backwards; }
  .js .hero-index a:nth-child(1) { animation-delay: 420ms; }
  .js .hero-index a:nth-child(2) { animation-delay: 480ms; }
  .js .hero-index a:nth-child(3) { animation-delay: 540ms; }
  .js .hero-index a:nth-child(4) { animation-delay: 600ms; }
  .js .radar { animation: radar-in 1200ms var(--response) backwards; }
  @keyframes line-up { from { clip-path: inset(0 0 100% 0); transform: translateY(40%); } to { clip-path: inset(0 0 -10% 0); transform: none; } }
  @keyframes radar-in { from { opacity: 0; transform: translateY(-46%) scale(.7) rotate(40deg); } }

  .js [data-reveal] { transition: opacity 800ms var(--response), transform 900ms var(--response), clip-path 1000ms var(--response); }
  .js [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(48px); }
  .js .feature-art[data-reveal]:not(.is-in), .js .guardian-ui[data-reveal]:not(.is-in), .js .ai-chat[data-reveal]:not(.is-in), .js .spam-check[data-reveal]:not(.is-in), .js .terminal[data-reveal]:not(.is-in) { clip-path: inset(12% 0 12% 0); transform: translateY(30px) scale(.97); }
  .js [data-reveal].is-in { clip-path: inset(0); }
  .js [data-reveal] :is(.feature-list li, .principles div, .alarms li, .questions details, .module-facts div) { transition: opacity 600ms var(--response), transform 700ms var(--response); transition-delay: calc(var(--i, 0) * 70ms + 200ms); }
  .js [data-reveal]:not(.is-in) :is(.feature-list li, .principles div, .alarms li, .questions details) { opacity: 0; transform: translateX(-18px); }
  .js .section-heading[data-reveal] h2, .js .feature-copy[data-reveal] h2, .js .terminal-intro[data-reveal] h2, .js .pricing-head[data-reveal] h2, .js [data-reveal] > h2 { transition: transform 1000ms var(--response), opacity 800ms var(--response); }
  .js [data-reveal]:not(.is-in) h2 { opacity: 0; transform: translateY(30px); }
  .js .chat.is-scripted > :not(.is-shown) { display: none; }
  .js .chat.is-scripted > .is-shown { animation: rise-in 420ms var(--response); }
}

/* ---------- widths ---------- */
@media (max-width: 1100px) {
  .hero-index { grid-template-columns: repeat(2, 1fr); }
  .radar { opacity: .55; }
  .system-frame, .guardian-layout, .ai-section, .outpost-layout { grid-template-columns: 1fr; }
  .system-visual { min-height: 520px; }
  .feature, .self-host-layout, .terminal-section, .pricing-layout { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .feature, .self-host-layout, .terminal-section, .pricing-layout, .compat-layout { grid-template-columns: 1fr; }
  .compat-layout > div:first-child { position: static; }
  .footer-mark { margin-top: 100px; }
  .ai-section .feature-copy { grid-row: 1; }
  .feature .feature-copy { grid-row: 1; }
}
@media (max-width: 680px) {
  :root { --width: calc(100% - 32px); --header-height: 64px; }
  .masthead-inner { display: flex; justify-content: space-between; }
  .nav-location { display: none; }
  .button.compact { padding-inline: 10px; }
  .button.compact .price-tag { display: none; }
  .menu-toggle { gap: 9px; padding-inline: 11px; }
  .navigation { padding: 12px; }
  .nav-destinations { grid-template-columns: 1fr; }
  .hero { min-height: max(700px, 100svh); }
  .hero-backdrop img { object-position: 70% 58%; }
  .hero-overlay { background: linear-gradient(0deg, var(--ink), #0d0f0db8 18%, #0d0f0d33 46%, #0d0f0d5e 76%, #0d0f0dd0), linear-gradient(90deg, #0b0d0bd0, #0b0d0b55 70%); }
  .radar { right: -20%; top: 30%; width: 90vw; opacity: .4; }
  .hero-content { align-self: start; padding-top: calc(var(--header-height) + 52px); }
  .hero h1 { margin: 20px 0; }
  .hero-description { margin-bottom: 26px; }
  .button { min-height: 50px; padding-inline: 16px; gap: 10px; }
  .watch-log { font-size: var(--t-small); }
  .watch-log::before { padding: 0 10px; }
  .watch-log li { padding-right: 70px; }
  .hero-index { grid-template-columns: repeat(2, 1fr); }
  .hero-index a { grid-template-columns: 26px 1fr; gap: 10px; min-height: 72px; padding: 10px 12px; }
  .hero-index small, .index-arrow { display: none; }
  .section-heading { grid-template-columns: 1fr; gap: 18px; margin-bottom: 28px; }
  .system-visual { min-height: clamp(320px, 92vw, 440px); }
  .module-tabs button { min-height: 50px; }
  .feature-list.two-col, .principles { grid-template-columns: 1fr; }
  .alarms li { grid-template-columns: 1fr; }
  .alarm-actions { grid-column: 1 !important; grid-row: auto; margin-top: 8px; }
  .chat { padding: 14px; min-height: 0; }
  .msg { max-width: 100%; }
  .spam-pick { grid-template-columns: 1fr; }
  .spam-pick button { min-height: 58px; }
  .spam-result { padding: 16px; }
  .command-options { grid-template-columns: 1fr 1fr; max-width: none; }
  .command-options button { padding-inline: 10px; font-size: var(--t-small); }
  .terminal-output { height: 320px; padding-inline: 14px; font-size: var(--t-small); }
  .terminal-input input { font-size: 16px; }
  .footer-row { grid-template-columns: 1fr 1fr; }
  .footer-row p { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
  .hero-backdrop img, .feature-art img { transform: none; }
  .radar-sweep { transform: rotate(-40deg); }
  .blip { opacity: .8; }
  .marquee-track { flex-wrap: wrap; width: auto; justify-content: center; }
  .marquee span:nth-child(n + 13) { display: none; }
}