/* NSTACK website v3. Loads after site.css and v2.css and changes only what three skills asked for, so v2 stays the
   baseline and every v3 decision is in this file.
     design-principles  every text style passes WCAG AA, one type scale in whole pixels, spacing on a 4px grid,
                        four radii (tag, control, card, pill).
     saas-design        fewer identical grids on Home, compositions that change from section to section, one featured
                        tile that breaks the industry grid, quiet hover states that light the drawings.
     content-humanizer  lives in the HTML. The facet chips that repeated each paragraph are gone, so .facets is unused
                        on Home and rare elsewhere. */

/* 1 · Tokens */
:root {
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 48px; --s-10: 64px;
  --r-tag: 4px; --r-control: 6px; --r-card: 10px; --r-pill: 999px;
  --t-card: 17px; --t-card-lh: 24px;
  --t-card-lg: 21px; --t-card-lg-lh: 28px;
  --t-body-sm: 15px;
}

/* 2 · Contrast. The faint ink (40% in light, 54% in dark) measured about 2.5:1 on canvas, under the 4.5:1 AA floor
   for text. Text that used it moves to the muted ink; icons and bullets keep it. Figure labels follow. */
.eyebrow .sep, .menucap, .themeopt small, .table td .sub.mono, .launchcap .keys, .pillar .n, .ucgrid .here, .foot li.fsub,
.ctile .caps em[data-develop="true"] { color: var(--studio-ink-muted); }
.viz-node-subtitle, .viz-row-value, .viz-linklabel, .sc-vp-f { fill: var(--studio-ink-muted); }

/* 3 · Type scale in whole pixels: 11 and 12 for mono labels, 13 and 14 for interface text, 15 for card body,
   16 and 17 for reading, then the card titles at 17 and 21. */
.layer .idx { font-size: 12px; }
.v2-ind .tile .live, .case .live, .layer .v2-strip .cap, .tag, .menucap, .foot li.fsub { font-size: 11px; }
.typechip, .themeopt small, .table td .sub.mono, .v2-dev .codebar { font-size: 12px; }
.menurow span, .table .hosts a, .table .hosts > .mono, .playbtn, .v2-dev pre { font-size: 13px; }
.marquee li, .btn.sm, .menuitem, .car-tabs [role="tab"], .uc .cz { font-size: 14px; }
.bento .tile figcaption, .durables p, .controls p, .vector p, .case p, .v2-card p, .v2-ind .tile p, .table td, .ucgrid p { font-size: var(--t-body-sm); line-height: 1.55; }
.table td b, .def p { font-size: 16px; }
.uc .outcome { font-size: 17px; }
.case h3, .controls h3, .durables h3, .v2-card h3, .v2-ind .tile h3, .vector.minor h3 { font-size: var(--t-card); line-height: var(--t-card-lh); letter-spacing: -0.012em; }
.vector h3 { font-size: var(--t-card-lg); line-height: var(--t-card-lg-lh); letter-spacing: -0.018em; }

/* 4 · Spacing on the 4px grid, and four radii */
.v2-head, .v2-split .copy, .v2-pagehero .copy, .v2-play .copy, .v2-durable .durable-top .copy { gap: var(--s-6); }
.v2-hero .copy { gap: var(--s-6); }
.v2-hero .proof { gap: var(--s-4); padding-top: var(--s-4); }
.layer { gap: var(--s-4); }
.case { padding: var(--s-4) var(--s-5) var(--s-5); }
.vector { padding: var(--s-6); border-radius: var(--r-card); }
.v2-card, .v2-ind .tile { padding: var(--s-6); gap: var(--s-3); }
.controls li { padding: var(--s-6) var(--s-6) 28px; gap: var(--s-3); }
.durables { gap: var(--s-7) var(--gutter); }
.bento .tile figcaption { padding: var(--s-3) var(--s-4) var(--s-4); }
.facets li { padding: 0 var(--s-3); }
.btn.sm { padding: 0 var(--s-3); border-radius: var(--r-control); }
.menurow { padding: var(--s-2) var(--s-3); }

/* 5 · Home */

/* The promise: the three layers stand on a faint dot field, the same paper the product's figures are drawn on */
.v3-hero .lead { max-width: 30em; }
.v3-hero .art { isolation: isolate; }
.v3-hero .art::before {
  content: ""; position: absolute; inset: -4% -6% -2% 4%; z-index: -1; pointer-events: none;
  background-image: radial-gradient(circle, color-mix(in oklab, var(--studio-ink) 12%, transparent) 1px, transparent 1.4px);
  background-size: 20px 20px; background-position: center;
  -webkit-mask-image: radial-gradient(closest-side, #000 35%, transparent 100%); mask-image: radial-gradient(closest-side, #000 35%, transparent 100%);
}
.v3-hero .art > svg { position: relative; }

/* 01 · The gap: the statement runs wide, and the scattered systems sit under its tail, beside the body */
.v3-gap .wrap { row-gap: var(--s-7); align-items: start; }
.v3-gap .statement { grid-column: 1 / span 10; grid-row: 2; font-size: clamp(34px, 4.3vw, 62px); line-height: 1.04; }
.v3-gap .body { grid-column: 1 / span 5; grid-row: 3; margin-top: var(--s-2); }
.v3-gap .art { grid-column: 7 / -1; grid-row: 3; height: 260px; margin-top: calc(-1 * var(--s-9)); }

/* One request, played through: title and lead read across, the track runs the full width under them */
.v3-play .wrap { row-gap: var(--s-6); align-items: end; }
.v3-play .copy { grid-column: 1 / span 6; }
.v3-play .side { grid-column: 8 / span 5; display: grid; gap: var(--s-6); justify-items: start; }
.v3-play .side .lead { max-width: 30em; }
.v3-play .art { grid-column: 3 / -1; height: clamp(280px, 28vw, 400px); margin-top: var(--s-2); }

/* 04 · Industries: the live industry takes a double tile, and the last tile invites the next one */
.v3-cases .cases { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); }
.v3-cases .case.feature { grid-column: span 2; grid-row: span 2; grid-template-rows: 1fr auto auto auto; gap: var(--s-3); padding: var(--s-6); }
.v3-cases .case.feature .amb { height: auto; min-height: 220px; margin: 0 0 var(--s-2); }
.v3-cases .case.feature h3 { font-size: var(--t-card-lg); line-height: var(--t-card-lg-lh); letter-spacing: -0.018em; }
.v3-cases .case.feature p { font-size: 16px; line-height: 1.55; max-width: 30em; }
.v3-cases .case.feature .live { top: var(--s-5); right: var(--s-5); }
.case .go { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--s-1); font-size: 14px; font-weight: 600; color: var(--studio-ink); }
.case .go .ico { color: var(--studio-ink-muted); transition: transform 220ms var(--ease-out); }
.case:hover .go .ico { transform: translateX(3px); color: currentColor; }
.v3-cases .case.more { align-content: end; grid-template-rows: auto auto auto; background: transparent; border-style: dashed; border-color: var(--studio-line-strong); }
.v3-cases .case.more:hover { background: var(--studio-surface); }

/* 05 · On the record: copy with a short key and value list, and two figures under one pair of tabs */
.v3-record .wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--s-8); align-items: start; }
.v3-record .copy { grid-column: 1 / span 5; display: grid; gap: var(--s-6); justify-items: start; }
.v3-record .copy .lead { max-width: 30em; }
.v3-record .v3-figtabs { grid-column: 7 / span 6; gap: var(--s-4); }
.v3-figtabs .car-tabs { justify-self: start; }
.v3-figtabs [data-slide] .fig { margin: 0; }
.v3-kv { width: 100%; margin: var(--s-2) 0 0; border-top: 1px solid var(--studio-line-strong); }
.v3-kv > div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--s-4); padding: var(--s-3) 0; border-bottom: 1px solid var(--studio-line); }
.v3-kv dt { font: 500 11px/22px var(--font-studio-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--studio-ink); }
.v3-kv dd { margin: 0; font-size: var(--t-body-sm); line-height: 22px; color: var(--studio-ink-soft); }

/* 06 · Trust: one ledger read across two columns, in place of a third card grid */
.v3-ledger { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-9); margin: 0; border-top: 1px solid var(--studio-line-strong); }
.v3-ledger > div { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-6); align-items: baseline; padding: var(--s-5) 0; border-bottom: 1px solid var(--studio-line); }
.v3-ledger dt { display: grid; gap: var(--s-1); font-size: 16px; line-height: 22px; font-weight: 600; letter-spacing: -0.01em; color: var(--studio-ink); }
.v3-ledger dt .cap { transition: color 220ms var(--ease-out); }
.v3-ledger dd { margin: 0; font-size: var(--t-body-sm); line-height: 1.55; color: var(--studio-ink-soft); }
.v3-ledger > div:hover dt .cap { color: var(--studio-tone-data); }

/* 6 · Hover: a card's drawing darkens a step and its data-tone line lights, so the art answers the pointer */
.case .amb .a-s, .vector .amb .a-s, .v2-card .amb .a-s { transition: stroke 320ms var(--ease-out); }
.case:hover .amb .a-s, .vector:hover .amb .a-s, a.v2-card:hover .amb .a-s,
.case:focus-visible .amb .a-s, .vector:focus-visible .amb .a-s, a.v2-card:focus-visible .amb .a-s { stroke: color-mix(in srgb, var(--studio-ink) 40%, var(--amb-bg)); }
.case:hover .amb .a-s.lt, .vector:hover .amb .a-s.lt, a.v2-card:hover .amb .a-s.lt { stroke: color-mix(in srgb, var(--studio-ink) 26%, var(--amb-bg)); }
.case:hover .amb .a-s.dt, .vector:hover .amb .a-s.dt, a.v2-card:hover .amb .a-s.dt { stroke: var(--studio-tone-data); }

/* 7 · Responsive */
@media (max-width: 1180px) {
  .v3-cases .cases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v3-cases .case.feature { grid-row: auto; }
  .v3-cases .case.feature .amb { min-height: 180px; }
}
@media (max-width: 959px) {
  .v3-gap .statement, .v3-gap .body, .v3-gap .art { grid-column: 1 / -1; grid-row: auto; }
  .v3-gap .art { height: 200px; margin-top: 0; }
  .v3-play .copy, .v3-play .side, .v3-play .art { grid-column: 1 / -1; }
  .v3-play .art { height: 220px; margin-top: 0; }
  .v3-record .copy, .v3-record .v3-figtabs { grid-column: 1 / -1; }
  .v3-ledger { grid-template-columns: 1fr; }
  .v3-ledger > div { grid-template-columns: 1fr; gap: var(--s-2); }
}
/* On a phone the live industry keeps its drawing; the rest read as a short list, one line each */
@media (max-width: 560px) {
  .v3-cases .cases { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--studio-line); }
  .v3-cases .case.feature { grid-column: auto; margin-bottom: var(--s-4); }
  .v3-cases .case:not(.feature) { grid-template-rows: auto auto; gap: var(--s-1); padding: var(--s-4) 0; border: 0; border-bottom: 1px solid var(--studio-line); border-radius: 0; background: transparent; }
  .v3-cases .case:not(.feature):hover { transform: none; }
  .v3-cases .case:not(.feature) .amb { display: none; }
  .v3-cases .case.more { border-style: solid; }
  .v3-kv > div { grid-template-columns: 1fr; gap: 2px; }
}

/* 8 · Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .case .amb .a-s, .vector .amb .a-s, .v2-card .amb .a-s, .v3-ledger dt .cap { transition: none; }
}
:root[data-motion="reduce"] .case .amb .a-s, :root[data-motion="reduce"] .vector .amb .a-s, :root[data-motion="reduce"] .v2-card .amb .a-s { transition: none; }