/* Nexus landing kit (R-078, themes lane 2026-11-04): the Foundry landing grammar (LandingHero, HomeSection) in the estate kit.
   Full-bleed hero band, section bands with a 1280px column, one sticky stack, floating-control gutters. Tokens only; both modes;
   the network accent comes from --nx-accent, --nx-accent-ink and --nx-accent-strong. Contract: docs/estate/LANDING_KIT.md. */
.nxl {
  --nxl-col: none; /* full width (owner 2026-11-04, ACCOUNT_EXPERIENCE_BAR section 8): the band fills the window, the gutter is --nx-gutter = max(16px, 3vw) */
  /* the column keeps clear of the floating dock (its width is published by nexus-accessibility) at the start, and of back-to-top at the end */
  --nxl-pad: var(--nx-gutter);
  --nxl-pad-start: max(var(--nx-gutter), calc(var(--nexus-dock-w, 0px) + var(--nx-space-3)));
  --nxl-pad-end: var(--nx-gutter);
  --nxl-band: clamp(4rem, 2.5rem + 4vw, 6rem);
  --nxl-float-gap: 5.5rem; /* bottom and end inset a legend or an overlay keeps from the window corner: back-to-top lives there */
  --nxl-rail-h: 3rem;      /* the rail's own height, measured by nexus-landing.js */
  inline-size: 100%; color: var(--nx-text-primary); background: var(--nx-bg-canvas);
}
@media (min-width: 48rem) { .nxl { --nxl-pad-end: max(var(--nx-gutter), 4.5rem); } }
/* a wide column for working pages (the Governance Studio workspace): same dock-aware padding, up to --nxl-col-wide */
.nxl { --nxl-col-wide: none; }
.nxl :is(.nxl-wrap, .nxl-hero__inner)[data-wide] { max-inline-size: var(--nxl-col-wide); }
.nxl :where(h1, h2, h3, p, ul, ol, dl, dd, figure) { margin: 0; }
.nxl :where(ul, ol) { padding: 0; list-style: none; }

/* ---- mono micro label (Foundry .pp-mono-label) */
.nxl-mono { font: 500 11px/1.2 var(--nx-font-mono); letter-spacing: .16em; text-transform: uppercase; font-variant-numeric: tabular-nums lining-nums; color: var(--nx-text-secondary); }

/* ---- the hero band: bleeds to the window edge; the stage (map, globe or twin) fills it; the copy sits over a scrim */
.nxl-hero { position: relative; isolation: isolate; display: grid; align-items: end; min-block-size: clamp(30rem, 72vh, 46rem); overflow: clip; border-block-end: 1px solid var(--nx-border-hairline); background: var(--nx-bg-canvas); }
/* compact hero (tool pages such as the Governance Studio): the same band, shorter, no scroll-to-fold height; the facts strip is dropped */
.nxl-hero[data-compact] { min-block-size: clamp(11rem, 24vh, 15rem); }
.nxl-hero[data-compact] .nxl-hero__inner { padding-block: var(--nx-space-8) var(--nx-space-5); gap: var(--nx-space-3); }
.nxl-hero[data-compact] .nxl-hero__title { font-size: clamp(26px, 1.6vw + 18px, 36px); max-inline-size: 28ch; }
.nxl-hero[data-compact] .nxl-hero__tagline { font-size: clamp(15px, .3vw + 14px, 17px); }
.nxl-hero[data-compact] :is(.nxl-facts, .nxl-hero__text) { display: none; }
/* no stage painted (no image, video, canvas, svg or cover, or an <img> with no src): the band is the copy's own height, not an empty
   30rem block above it. The scrim and the hairline stay. */
.nxl-hero:is([data-stage="none"], :not(:has(> .nxl-hero__stage > :where(video, canvas, svg, .nx-cover, iframe, img[src]:not([src=""]))))) { min-block-size: 0; }
.nxl-hero:is([data-stage="none"], :not(:has(> .nxl-hero__stage > :where(video, canvas, svg, .nx-cover, iframe, img[src]:not([src=""]))))) .nxl-hero__inner { padding-block-start: var(--nx-space-10, 2.5rem); }
.nxl-hero__stage { position: absolute; inset: 0; z-index: -2; }
.nxl-hero__stage > :where(img, iframe, video, canvas) { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.nxl-hero__stage > .nx-cover { position: absolute; inset: 0; }
.nxl-hero__stage > svg { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.nxl-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(to top, var(--nx-bg-canvas) 0, color-mix(in srgb, var(--nx-bg-canvas) 78%, transparent) 38%, transparent 78%); }
.nxl-hero__inner { inline-size: 100%; max-inline-size: var(--nxl-col); margin-inline: auto; padding-block: calc(var(--nxl-band) * .8) var(--nx-space-8); padding-inline: var(--nxl-pad-start) var(--nxl-pad-end); box-sizing: border-box; display: grid; gap: var(--nx-space-5); }
.nxl-hero__meta, .nxl-head__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-space-3); }
.nxl-rule { inline-size: 1.5rem; block-size: 0; border-block-start: 1px solid var(--nx-border-default); }
.nxl-hero__title { font-size: clamp(32px, 2.9vw + 8px, 46px); font-weight: 500; line-height: 1.06; letter-spacing: -.034em; text-wrap: balance; max-inline-size: 18ch; }
.nxl-hero__tagline { max-inline-size: 54ch; font-size: clamp(17px, .4vw + 15px, 19px); font-weight: 500; line-height: 1.45; letter-spacing: -.01em; color: var(--nx-text-primary); }
.nxl-hero__text { max-inline-size: 58ch; font-size: 15px; line-height: 1.6; color: var(--nx-text-secondary); }
.nxl-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-space-3); }
/* hairline fact strip under the hero copy: counts from registries, never telemetry */
.nxl-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--nx-space-5) var(--nx-space-6); padding-block-start: var(--nx-space-5); border-block-start: 1px solid var(--nx-border-hairline); }
.nxl-facts dd { margin: var(--nx-space-2) 0 0; font: 500 clamp(24px, 1vw + 20px, 32px)/1 var(--nx-font-mono); letter-spacing: -.02em; font-variant-numeric: tabular-nums lining-nums; color: var(--nx-text-primary); }
.nxl-facts dd.is-accent { color: var(--nx-accent-text, var(--nx-accent)); }
/* an overlay or legend on the stage keeps clear of back-to-top and the window edge */
.nxl-legend { position: absolute; inset-block-end: var(--nxl-float-gap); inset-inline-end: var(--nxl-float-gap); z-index: 2; max-inline-size: min(22rem, calc(100% - 2 * var(--nx-gutter))); padding: var(--nx-space-3) var(--nx-space-4); border: 1px solid var(--nx-border-default); border-radius: var(--nx-radius); background: var(--nx-bg-surface); font-size: var(--nx-fs-sm); }
@media (max-width: 47.99rem) { .nxl-legend { position: static; margin: var(--nx-space-3) var(--nx-gutter) 0; max-inline-size: none; } }

/* ---- one sticky stack: the estate header, then this rail, flush; the header publishes where its visible edge is */
.nxl-rail { position: sticky; inset-block-start: var(--nxh-visible-bottom, 0px); z-index: 20; display: flex; align-items: center; gap: var(--nx-space-5); min-block-size: var(--nxl-rail-h); padding-inline: calc(max(0px, (100% - var(--nxl-col)) / 2) + var(--nxl-pad-start)) calc(max(0px, (100% - var(--nxl-col)) / 2) + var(--nxl-pad-end)); box-sizing: border-box; background: var(--nx-bg-canvas); border-block-end: 1px solid var(--nx-border-hairline); }
.nxl-rail__label { flex: none; display: inline-flex; align-items: center; gap: var(--nx-space-2); }
.nxl-rail__count { display: inline-grid; place-items: center; min-inline-size: 1.5rem; padding-inline: .3rem; border-radius: var(--nx-radius-chip); background: var(--nx-bg-muted); color: var(--nx-text-primary); font: 500 11px/1.6 var(--nx-font-mono); }
.nxl-rail ol { display: flex; gap: var(--nx-space-1); min-inline-size: 0; overflow-x: auto; scrollbar-width: none; }
.nxl-rail ol::-webkit-scrollbar { display: none; }
.nxl-rail a { display: inline-flex; align-items: center; min-block-size: 2.75rem; padding-inline: var(--nx-space-3); border-block-end: 2px solid transparent; color: var(--nx-text-secondary); font-size: var(--nx-fs-sm); text-decoration: none; white-space: nowrap; }
.nxl-rail a:hover { color: var(--nx-text-primary); }
.nxl-rail a[aria-current="true"] { color: var(--nx-text-primary); border-block-end-color: var(--nx-accent); }
.nxl-rail a:focus-visible { outline: 2px solid var(--nx-focus, var(--nx-accent)); outline-offset: -2px; }
.nxl-section { scroll-margin-block-start: calc(var(--nxh-visible-bottom, 0px) + var(--nxl-rail-h) + var(--nx-space-2)); }
.nxl-hero + .nxl-rail { margin-block-start: 0; }

/* ---- the section band: a hairline above, a 1280px column inside, an alternating tone */
.nxl-section { border-block-start: 1px solid var(--nx-border-hairline); background: var(--nx-bg-canvas); }
.nxl-section[data-tone="alt"] { background: var(--nx-bg-surface); }
.nxl-wrap { max-inline-size: var(--nxl-col); margin-inline: auto; box-sizing: border-box; padding-block: var(--nxl-band); padding-inline: var(--nxl-pad-start) var(--nxl-pad-end); }
.nxl-section[data-compact] .nxl-wrap { padding-block: calc(var(--nxl-band) * .75); }
.nxl-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--nx-space-5) var(--nx-space-10); }
.nxl-head__text { max-inline-size: 45rem; display: grid; gap: var(--nx-space-4); }
.nxl-title { font-size: clamp(26px, 1.4vw + 18px, 36px); font-weight: 500; line-height: 1.12; letter-spacing: -.026em; text-wrap: balance; }
.nxl-lede { max-inline-size: 62ch; font-size: clamp(15.5px, .3vw + 14px, 16.5px); line-height: 1.6; color: var(--nx-text-secondary); }
.nxl-head__action { flex: none; }
.nxl-body { margin-block-start: clamp(2.5rem, 2rem + 1vw, 3rem); min-inline-size: 0; }

/* ---- body: card grid (nexus_cards() markup; the kit card owns its columns) */
.nxl-body .nx-cards-wrap { inline-size: 100%; }

/* ---- body: tabbed explorer; with no script every panel shows in turn */
.nxl-tablist { display: flex; gap: var(--nx-space-1); overflow-x: auto; border-block-end: 1px solid var(--nx-border-hairline); scrollbar-width: thin; }
.nxl-tab { flex: none; min-block-size: 2.75rem; padding: 0 var(--nx-space-4); border: 0; border-block-end: 2px solid transparent; margin-block-end: -1px; background: none; color: var(--nx-text-secondary); font: inherit; font-size: var(--nx-fs-sm); cursor: pointer; }
.nxl-tab:hover { color: var(--nx-text-primary); }
.nxl-tab[aria-selected="true"] { color: var(--nx-text-primary); border-block-end-color: var(--nx-accent); font-weight: 600; }
.nxl-tab:focus-visible { outline: 2px solid var(--nx-focus, var(--nx-accent)); outline-offset: -2px; }
.nxl-tabpanel { padding-block: var(--nx-space-6) 0; display: grid; gap: var(--nx-space-5); grid-template-columns: minmax(0, 1fr); }
.nxl-tabs[data-ready] .nxl-tabpanel[hidden] { display: none; }
.nxl-tabs:not([data-ready]) .nxl-tabpanel + .nxl-tabpanel { border-block-start: 1px solid var(--nx-border-hairline); margin-block-start: var(--nx-space-6); }
.nxl-tabs:not([data-ready]) .nxl-tablist { display: none; }
@media (min-width: 64rem) { .nxl-tabpanel--split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--nx-space-10); } }
.nxl-stage-box { min-block-size: 16rem; border: 1px solid var(--nx-border-default); border-radius: var(--nx-radius); background: var(--nx-bg-muted); overflow: clip; }
.nxl-stage-box > :where(img, iframe, canvas) { display: block; inline-size: 100%; block-size: 100%; }
.nxl-stage-box > svg { display: block; inline-size: 100%; block-size: 100%; }

/* ---- body: capability table (a real table; scrolls inside its frame on phones, the first column stays) */
.nxl-table-frame { overflow-x: auto; border: 1px solid var(--nx-border-default); border-radius: var(--nx-radius); background: var(--nx-bg-canvas); }
.nxl-table { inline-size: 100%; min-inline-size: 38rem; border-collapse: separate; border-spacing: 0; font-size: var(--nx-fs-sm); }
.nxl-table caption { text-align: start; padding: var(--nx-space-4); caption-side: top; }
.nxl-table :where(th, td) { padding: var(--nx-space-3) var(--nx-space-4); text-align: start; vertical-align: top; border-block-start: 1px solid var(--nx-border-hairline); }
.nxl-table thead th { font: 500 11px/1.2 var(--nx-font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--nx-text-secondary); background: var(--nx-bg-surface); border-block-start: 0; }
.nxl-table tbody th { position: sticky; inset-inline-start: 0; background: var(--nx-bg-canvas); font-weight: 600; color: var(--nx-text-primary); }
.nxl-table td { color: var(--nx-text-secondary); }
.nxl-yes::before { content: ""; display: inline-block; inline-size: .55rem; block-size: .55rem; margin-inline-end: .5rem; border-radius: 50%; background: var(--nx-accent); }
.nxl-no::before { content: ""; display: inline-block; inline-size: .55rem; block-size: .55rem; margin-inline-end: .5rem; border-radius: 50%; border: 1px solid var(--nx-text-secondary); box-sizing: border-box; }

/* ---- body: operating model (ordered steps joined by a rule) */
.nxl-model { display: grid; gap: var(--nx-space-6); grid-template-columns: minmax(0, 1fr); counter-reset: nxl; }
.nxl-model > li { position: relative; display: grid; gap: var(--nx-space-2); padding-block-start: var(--nx-space-5); border-block-start: 1px solid var(--nx-border-default); }
.nxl-model > li::before { content: ""; position: absolute; inset-block-start: -.3rem; inset-inline-start: 0; inline-size: .6rem; block-size: .6rem; border-radius: 50%; background: var(--nx-accent); }
.nxl-model h3 { font-size: var(--nx-fs-md); font-weight: 600; }
.nxl-model p { font-size: var(--nx-fs-sm); line-height: 1.55; color: var(--nx-text-secondary); }
@media (min-width: 48rem) { .nxl-model { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .nxl-model { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--nx-space-8); } }

/* ---- body: questions (native details: no script) */
.nxl-faq { display: grid; border-block-start: 1px solid var(--nx-border-hairline); max-inline-size: 52rem; }
.nxl-q { border-block-end: 1px solid var(--nx-border-hairline); }
.nxl-q > summary { display: flex; justify-content: space-between; align-items: center; gap: var(--nx-space-4); min-block-size: 3.5rem; cursor: pointer; font-weight: 500; list-style: none; }
.nxl-q > summary::-webkit-details-marker { display: none; }
.nxl-q > summary::after { content: ""; flex: none; inline-size: .55rem; block-size: .55rem; border-inline-end: 2px solid var(--nx-text-secondary); border-block-end: 2px solid var(--nx-text-secondary); transform: rotate(45deg); transition: transform var(--nx-motion-fast) var(--nx-ease); }
.nxl-q[open] > summary::after { transform: rotate(-135deg); }
.nxl-q > summary:focus-visible { outline: 2px solid var(--nx-focus, var(--nx-accent)); outline-offset: 2px; }
.nxl-q > div { padding-block: 0 var(--nx-space-5); max-inline-size: 62ch; color: var(--nx-text-secondary); line-height: 1.6; }

/* ---- the closing band: the next step */
.nxl-close { border-block-start: 1px solid var(--nx-border-hairline); background: var(--nx-bg-surface); }
.nxl-close .nxl-wrap { display: grid; gap: var(--nx-space-5); justify-items: start; }
.nxl-close .nxl-title { max-inline-size: 22ch; }

/* ---- the accent button (primary action over the stage): accent fill, the ink the token names */
.nxl-btn { display: inline-flex; align-items: center; gap: var(--nx-space-2); min-block-size: 2.75rem; padding: 0 var(--nx-space-5); border: 1px solid transparent; border-radius: var(--nx-radius); background: transparent; color: var(--nx-text-primary); font: inherit; font-size: var(--nx-fs-sm); font-weight: 600; text-decoration: none; cursor: pointer; }
.nxl-btn:hover { background: var(--nx-bg-muted); }
/* a ghost button is the default (no border, a hover fill); the outline button keeps one hairline; the primary is the accent fill (owner 2026-11-04, section 9 of the account bar) */
.nxl-btn[data-variant="outline"] { border-color: var(--nx-border-default); }
.nxl-btn[data-variant="outline"]:hover { border-color: var(--nx-text-secondary); }
/* one primary across home and plugin pages (owner 2026-11-06, visual drift audit c): the homepage primary token */
.nxl-btn[data-variant="primary"] { background: var(--nx-primary-bg); border-color: var(--nx-primary-bg); color: var(--nx-primary-ink); }
.nxl-btn[data-variant="primary"]:hover { background: var(--nx-primary-hover); border-color: var(--nx-primary-hover); }
.nxl-btn:focus-visible { outline: 2px solid var(--nx-focus, var(--nx-accent)); outline-offset: 2px; }
.nxl-link { display: inline-flex; align-items: center; min-block-size: 2.75rem; gap: var(--nx-space-2); color: var(--nx-text-primary); font-size: var(--nx-fs-sm); font-weight: 500; text-decoration: none; border-block-end: 1px solid transparent; }
.nxl-link:hover { border-block-end-color: var(--nx-accent); }

@media (prefers-reduced-motion: reduce) { .nxl *, .nxl *::before, .nxl *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
@media print { .nxl-rail { position: static; } .nxl-hero { min-block-size: 0; } .nxl-hero::after { display: none; } }