/* Self-hosted fonts (SIL Open Font License 1.1): Archivo, Overpass, Overpass Mono, latin subset, from Google Fonts. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('fonts/archivo-400-900.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Overpass';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/overpass-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Overpass';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/overpass-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Overpass';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/overpass-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Overpass';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/overpass-800.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Overpass Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/overpass-mono-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Overpass Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/overpass-mono-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* NorthSky home prototype. One world: the movement area of an airfield.
   Navy asphalt, painted white markings, taxiway yellow. Red only at the holding position. */
:root {
  --asphalt: #0e1620;
  --navy: #1a2633;
  --navy-2: #24364a;
  --paint: #f4f6f8;
  --paint-dim: #b9c7d6;
  --taxi: #ffc60b;
  --hold: #d0202e;
  --threshold: #38e08a;
  --strip-buff: #f1e3b0;
  --strip-blue: #a9d3f2;
  --ink: #0b1118;
  --display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --text: "Overpass", system-ui, sans-serif;
  --data: "Overpass Mono", ui-monospace, monospace;
  --gutter: clamp(1rem, 4vw, 3.5rem);
  --line-x: clamp(1rem, 4vw, 3.5rem);
  --ease: cubic-bezier(.16, 1, .3, 1);
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 4.5rem; scrollbar-color: var(--taxi) var(--asphalt); }
body { margin: 0; background: var(--asphalt); color: var(--paint); font-family: var(--text); font-size: 1.0625rem; line-height: 1.55; overflow-x: clip; }
::selection { background: var(--taxi); color: var(--ink); }
a { color: inherit; text-underline-offset: .2em; }
:focus-visible { outline: 3px solid var(--taxi); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--display); margin: 0; text-wrap: balance; letter-spacing: -.02em; }
h1, h2 { overflow-wrap: break-word; hyphens: auto; }
h1 { font-stretch: 112%; font-weight: 850; font-size: clamp(2.3rem, 5.4vw, 5rem); line-height: .98; letter-spacing: -.03em; }
@media (max-width: 480px) { h1 { font-size: clamp(1.9rem, 9vw, 2.3rem); } }
h2 { font-stretch: 108%; font-weight: 800; font-size: clamp(1.8rem, 3.6vw, 3.2rem); line-height: 1.02; }
h3 { font-stretch: 100%; font-weight: 750; font-size: 1.25rem; line-height: 1.15; letter-spacing: -.01em; }
p { margin: 0; text-wrap: pretty; }
.measure { max-width: 62ch; }
.dim { color: var(--paint-dim); }
.data { font-family: var(--data); font-variant-numeric: tabular-nums; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 1rem; top: 1rem; z-index: 99; background: var(--taxi); color: var(--ink); padding: .6rem 1rem; }
.proto { background: var(--navy-2); color: var(--paint-dim); font-size: .8rem; padding: .35rem var(--gutter); }
svg.arr { width: 1.1em; height: 1.1em; flex: none; stroke: currentColor; fill: none; stroke-width: 2.6; stroke-linecap: square; }

/* the taxi centreline: one unbroken route down the page */
.page { position: relative; }
.page::before { content: ""; position: absolute; top: 0; bottom: 0; left: var(--line-x); width: 6px; background: var(--taxi); z-index: 3; pointer-events: none; }
section, footer { position: relative; padding: clamp(4rem, 9vw, 8rem) var(--gutter) clamp(4rem, 9vw, 8rem) calc(var(--line-x) + clamp(1.5rem, 4vw, 4rem)); }
section > * + * { margin-top: 1.5rem; }
section > h2 + * { margin-top: 1.25rem; }

/* nav */
.nav { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: clamp(.75rem, 2vw, 2rem); padding: .8rem var(--gutter) .8rem calc(var(--line-x) + clamp(1.5rem, 4vw, 4rem)); background: var(--asphalt); border-bottom: 1px solid var(--navy-2); flex-wrap: wrap; }
.nav .brand { display: flex; align-items: center; gap: .6rem; font-family: var(--display); font-stretch: 112%; font-weight: 850; font-size: 1.35rem; text-decoration: none; margin-right: auto; }
.nav .brand img { height: 1.6rem; width: auto; }
.nav ul { display: flex; gap: clamp(.75rem, 1.6vw, 1.6rem); list-style: none; margin: 0; padding: 0; font-weight: 600; font-size: .97rem; }
.nav ul a { text-decoration: none; padding-block: .3rem; border-bottom: 3px solid transparent; }
.nav ul a:hover { border-color: var(--taxi); }
.nav .lang { border: 2px solid var(--paint); padding: .15rem .5rem; font-weight: 800; font-size: .85rem; text-decoration: none; }
.nav .lang:hover { border-color: var(--taxi); }
.nav .ctl { font: inherit; font-weight: 600; font-size: .85rem; color: var(--paint-dim); background: transparent; border: 1px solid var(--navy-2); padding: .25rem .6rem; cursor: pointer; }
.nav .ctl:hover { color: var(--paint); border-color: var(--paint-dim); }
.nav .ctl[aria-pressed="true"] { color: var(--paint); border-color: var(--paint-dim); }
.nav .menu { display: none; }
@media (max-width: 480px) {
  .nav .ctl .wide { display: none; }
  .nav { gap: .5rem; padding-left: calc(var(--line-x) + 1rem); }
  .nav .brand { gap: .4rem; font-size: 1.2rem; }
  .nav .brand img { height: 1.25rem; }
  .nav .ctl, .nav .lang { padding-inline: .45rem; }
}
@media (max-width: 860px) {
  .nav .menu { display: inline-block; }
  .nav nav { order: 9; flex-basis: 100%; }
  .nav ul { display: none; flex-direction: column; gap: 0; padding-top: .5rem; }
  .nav ul.open { display: flex; }
  .nav ul a { display: block; padding: .7rem 0; border-bottom: 1px solid var(--navy-2); }
}

/* signs: the page's controls are airfield signs */
.sign { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; font-weight: 700; font-size: clamp(1rem, 1.3vw, 1.125rem); letter-spacing: .01em; }
.sign > * { display: flex; align-items: center; gap: .6rem; padding: .9rem 1.3rem; text-decoration: none; }
.sign .dir { background: var(--taxi); color: var(--ink); box-shadow: 0 0 0 3px var(--ink), 0 12px 24px -14px rgba(0,0,0,.7); transition: background-color .25s var(--ease), transform .25s var(--ease); }
.sign .alt { padding-inline: 0; color: var(--paint); text-decoration: underline; text-decoration-color: var(--paint-dim); text-decoration-thickness: 1px; text-underline-offset: .3em; }
.sign .alt:hover { text-decoration-color: var(--taxi); text-decoration-thickness: 2px; }
.sign .dir:hover { background: #ffd84a; transform: translateY(-2px); }
.sign .man { background: var(--hold); color: #fff; box-shadow: 0 0 0 3px var(--ink), 0 12px 24px -14px rgba(0,0,0,.7); }
.sign .man:hover { background: #b51a26; }
.sign .dir:focus-visible { outline: 3px solid var(--ink); outline-offset: -8px; }
.sign .alt:focus-visible { outline: 3px solid var(--taxi); outline-offset: 4px; }

/* approach block */
.approach { min-height: min(92svh, 58rem); padding-top: clamp(3rem, 7vw, 6rem); background: linear-gradient(180deg, #080d14 0%, #142336 60%, #0a1019 60.2%); overflow: clip; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; }
.approach canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.approach > :not(canvas) { position: relative; }
.approach > .motion-ctl { min-height: 2.25rem; position: absolute; top: 1rem; right: var(--gutter, 1.25rem); z-index: 5; }
.approach .sign { justify-self: start; }
.approach h1, .approach h2 { max-width: 20ch; }
.approach .evidence { margin: 0 0 1.4rem; font: 600 .9rem/1.4 Overpass, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #b6c7d8; }
.approach .lede { font-size: clamp(1.05rem, 1.6vw, 1.3rem); max-width: 46ch; color: #d3dfeb; margin-bottom: 1.1rem; }
@media (max-width: 560px) {
  /* the lights get their own strip under the text: canvas anchored to the bottom, its horizon (40% up) is the sky/ground edge */
  .approach { --als-h: 32rem; padding-bottom: calc(var(--als-h) * .352 + 1.5rem); background: linear-gradient(180deg, #080d14 0%, #142336 calc(100% - var(--als-h) * .4), #0a1019 calc(100% - var(--als-h) * .4 + 2px)); }
  .approach canvas { inset: auto 0 0 0; height: var(--als-h); }
  .approach .sign { display: grid; grid-template-columns: minmax(0, 1fr); justify-self: stretch; }
  .approach .sign .dir { justify-content: space-between; }
}

/* landing: the runway video */
.landing { min-height: min(86svh, 50rem); padding-top: clamp(6rem, 14vw, 12rem); display: grid; align-content: end; isolation: isolate; overflow: clip; }
.landing video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; filter: grayscale(1) contrast(1.15) brightness(.75); }
.landing::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #1a2f4a; mix-blend-mode: color; opacity: .85; }
/* the night ground of the approach fades into the film, so the two scenes join without a seam */
.landing::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, #0a1019 0%, rgba(10,16,25,.75) 10%, rgba(14,22,32,.25) 28%, transparent 40%, transparent 52%, rgba(14,22,32,.82) 76%, var(--asphalt) 97%); }
.byline { display: flex; align-items: center; gap: .9rem; font-size: .95rem; color: #d3dfeb; }
.byline img { width: 3.5rem; height: 3.5rem; object-fit: cover; flex: none; border-bottom: 3px solid var(--taxi); }
.byline b { color: var(--paint); }
/* threshold markings, painted on the asphalt under the film */
.keys { height: clamp(2.2rem, 5vw, 4rem); margin: 0 var(--gutter) 0 calc(var(--line-x) + clamp(1.5rem, 4vw, 4rem)); opacity: .92;
  /* CS ADR-DSN.L.535: 12 stripes for a 45 m runway, stripe = gap, double spacing at the centreline: 6 stripes + 5 gaps (11 units) each side of a 2-unit gap, 24 units in all */
  background: repeating-linear-gradient(90deg, var(--paint) 0 calc(100% / 11), transparent calc(100% / 11) calc(200% / 11)) left / calc(100% * 11 / 24) 100% no-repeat, repeating-linear-gradient(90deg, var(--paint) 0 calc(100% / 11), transparent calc(100% / 11) calc(200% / 11)) right / calc(100% * 11 / 24) 100% no-repeat; }
@media (max-width: 560px) { .keys { height: 3rem; } }
.landing h2 { max-width: 18ch; font-size: clamp(2rem, 5vw, 4.4rem); }

/* stands: seven services as apron stands, rows not cards */
.stands ol { list-style: none; margin: 2.5rem 0 0; padding: 0; border-top: 3px solid var(--paint); }
.stands li { display: grid; grid-template-columns: 5.5rem minmax(0, 1.1fr) minmax(0, 1.4fr) auto; gap: 1rem 2rem; align-items: baseline; padding: 1.15rem 0; border-bottom: 1px solid var(--navy-2); }
.stands .des { font-family: var(--display); font-stretch: 68%; font-weight: 900; font-size: 2.2rem; line-height: 1; color: var(--taxi); }
.stands a.name { font-family: var(--display); font-weight: 750; font-size: clamp(1.15rem, 1.8vw, 1.5rem); text-decoration: none; }
.stands a.name:hover { text-decoration: underline; text-decoration-color: var(--taxi); text-decoration-thickness: 3px; }
.stands .ref { font-family: var(--data); font-size: .8rem; letter-spacing: .04em; color: var(--paint-dim); white-space: nowrap; }
@media (max-width: 860px) { .stands li { grid-template-columns: 3.4rem minmax(0, 1fr); } .stands li p, .stands .ref { grid-column: 2; white-space: normal; } }

/* strip bay */
.bay { background: var(--navy); }
.bay .cols { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.bay .cols > div > * + * { margin-top: 1.25rem; }
@media (min-width: 861px) { .bay .cols > div:first-child { position: sticky; top: 6rem; } }
.chips, .pchips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chips button, .pchips button { font: inherit; font-weight: 700; color: var(--paint); background: transparent; border: 2px solid var(--paint); padding: .5rem .9rem; cursor: pointer; transition: background-color .2s var(--ease), color .2s var(--ease); }
.chips button:hover, .pchips button:hover { border-color: var(--taxi); }
.chips button[aria-pressed="true"], .pchips button[aria-pressed="true"] { background: var(--taxi); border-color: var(--taxi); color: var(--ink); }
.strips { display: grid; gap: .5rem; }
.strip { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr) auto; align-items: stretch; min-height: 3.6rem; color: var(--ink); text-decoration: none; border-left: 12px solid var(--navy-2); box-shadow: 0 10px 18px -12px rgba(0,0,0,.8); transition: transform .35s var(--ease), opacity .35s var(--ease), filter .35s var(--ease); }
.strip > * { display: flex; align-items: center; padding: .5rem .8rem; border-right: 2px solid rgba(11,17,24,.3); }
.strip .id { font-family: var(--data); font-weight: 700; }
.strip .what { font-weight: 800; font-size: clamp(1rem, 1.5vw, 1.2rem); flex-direction: column; align-items: flex-start; justify-content: center; }
.strip .what small { font-weight: 700; font-size: .72rem; letter-spacing: .06em; }
.strip .go { border-right: 0; font-weight: 700; font-size: .9rem; }
.strip.buff { background: var(--strip-buff); } .strip.blue { background: var(--strip-blue); }
.strip:hover, .strip:focus-visible { transform: translateX(-.9rem); }
.strip.off { background: var(--navy-2); color: var(--paint-dim); box-shadow: none; }
.strip.off > * { border-right-color: rgba(244,246,248,.12); }
.strip.on { transform: translateX(-.9rem); }
@media (max-width: 860px) { .bay .cols { grid-template-columns: minmax(0, 1fr); } .strip:hover, .strip.on { transform: none; } }

/* network */
.network { background: radial-gradient(60rem 40rem at 70% 40%, #22364f, var(--navy) 50%, var(--asphalt)); overflow: clip; }
.network .stage { position: relative; margin-top: 2rem; }
.network canvas { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; cursor: crosshair; }
.network .readout { min-height: 3.2rem; font-size: 1.05rem; }
.network .readout b { color: var(--taxi); }
.network details { margin-top: 1rem; } .network summary { cursor: pointer; font-weight: 700; }
.network details ul { columns: 16rem 3; padding-left: 1.1rem; margin: .8rem 0 0; }
.network details li { break-inside: avoid; margin-bottom: .5rem; }
.network details a { color: var(--paint); }

/* self-service */
.self .cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3.5rem); margin-top: 2.5rem; }
.self h3 { padding-bottom: .6rem; border-bottom: 3px solid var(--taxi); }
.self ul { list-style: none; margin: .8rem 0 0; padding: 0; }
.self li a { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--navy-2); text-decoration: none; }
.self li a:hover { color: var(--taxi); }
.self li small { font-weight: 700; font-size: .72rem; letter-spacing: .06em; color: var(--paint-dim); white-space: nowrap; }
@media (max-width: 860px) { .self .cols { grid-template-columns: minmax(0, 1fr); } }

/* projects */
.projects { background: var(--paint); color: var(--ink); }
.projects :focus-visible { outline-color: var(--ink); }
.projects .dim { color: #44566a; }
.projects ul { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0 2.5rem; }
.projects li { padding: .8rem 0; border-top: 2px solid var(--ink); font-weight: 700; }
.projects li small { display: block; font-weight: 400; color: #44566a; }
.projects li small.tbc, .projects p.tbc { font-style: italic; color: #44566a; }
.projects .lead { display: grid; grid-template-columns: minmax(0, 1fr) 10rem; gap: clamp(1.5rem, 4vw, 3rem); align-items: end; }
.projects .lead > div { max-width: 62ch; }
.projects .lead > div > * + * { margin-top: 1.25rem; }
.projects figure { margin: 0; }
/* the source portrait is 280px square: never shown wider than 10rem */
.projects figure img { display: block; width: 10rem; height: 10rem; object-fit: cover; border-bottom: 6px solid var(--taxi); }
.projects figcaption { margin-top: .5rem; font-size: .85rem; font-weight: 700; color: #44566a; }
@media (max-width: 560px) { .projects .lead { grid-template-columns: minmax(0, 1fr); } }
.projects ::selection { background: var(--ink); color: var(--paint); }

/* holding position: the only red on the page */
.holdpos { background: var(--asphalt); padding-bottom: 0; }
/* sections after the holding position: the centreline stays stopped at the bars */
.holdpos ~ section::after { content: ""; position: absolute; z-index: 4; left: var(--line-x); width: 6px; top: 0; bottom: 0; background: var(--asphalt); }
/* ICAO runway-holding position, pattern A: two solid lines, then two dashed lines on the runway side */
.holdpos .bars { height: 3.15rem; margin: clamp(3rem, 6vw, 5rem) calc(-1 * var(--gutter)) 0 calc(-1 * (var(--line-x) + clamp(1.5rem, 4vw, 4rem))); background: linear-gradient(var(--taxi) 0 .45rem, transparent .45rem .9rem, var(--taxi) .9rem 1.35rem, transparent 1.35rem) 0 0 / 100% 1.35rem no-repeat, repeating-linear-gradient(90deg, var(--taxi) 0 1.4rem, transparent 1.4rem 2.6rem) 0 1.8rem / 100% .45rem no-repeat, repeating-linear-gradient(90deg, var(--taxi) 0 1.4rem, transparent 1.4rem 2.6rem) 0 2.7rem / 100% .45rem no-repeat; }
.holdpos h2 { max-width: 16ch; font-size: clamp(2.2rem, 5.6vw, 5rem); }
.contact { display: flex; flex-wrap: wrap; gap: .5rem 2.5rem; font-weight: 700; font-size: 1.05rem; }
.contact a { text-decoration-color: var(--taxi); text-decoration-thickness: 2px; }

footer { padding-block: 3.5rem; border-top: 1px solid var(--navy-2); font-size: .95rem; }
footer .logo { display: block; width: min(14rem, 60%); height: auto; margin-bottom: 2.5rem; }
footer .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 2rem; }
footer h3 { font-size: .95rem; margin-bottom: .6rem; }
footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
footer a { color: var(--paint-dim); text-decoration: none; display: inline-block; min-height: 1.5rem; padding-block: .3rem; } footer a:hover { color: var(--paint); }
footer small { display: block; margin-top: 2.5rem; color: var(--paint-dim); }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .strip, .sign .dir, .chips button { transition: none; } }

.seeall { display: inline-block; padding-block: .45rem; color: var(--paint); font-weight: 600; text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: 1px; }
.seeall:hover, .seeall:focus-visible { text-decoration-color: var(--taxi); text-decoration-thickness: 2px; }

/* products hub prototype (revision 4: card grid, one link target per card, no shadow) */
.phub { padding: clamp(2rem, 6vw, 4rem) clamp(1rem, 4vw, 3rem); }
.phub .plate { display: inline-block; margin: 1.5rem 0; padding: .9rem 1.4rem; background: var(--taxi); color: var(--ink); font-weight: 800; }
.pstatus { margin: 1rem 0 2rem; color: var(--paint-dim, #b9c7d6); }
.pgroup[hidden] { display: none; }
.pgroup h2 { margin: 2rem 0 1rem; }
.pgrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; align-items: stretch; }
@media (min-width: 720px) { .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pcard { border: 1px solid var(--shoulder, #24364a); border-top: 3px solid var(--paint); padding: 1.5rem; border-radius: 0; box-shadow: none; }
.pcard .kind { margin: 0 0 .5rem; font: 700 .72rem/1.3 Overpass, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--paint-dim, #b9c7d6); }
.pcard h3 { margin: 0; font-size: 1.25rem; font-weight: 750; line-height: 1.2; }
.pcard a { color: var(--paint); }
.pcard a:hover { text-decoration: underline; text-decoration-color: var(--taxi); text-decoration-thickness: 3px; }

/* /products/ hub: the departure board (owner decision 23 October 2026, mockup A in products-mockups/) */
.pboard h1 { max-width: 14ch; }
.pboard .lede { margin-top: 1.1rem; max-width: 56ch; color: var(--paint-dim); font-size: 1.15rem; }
.pboard .controls { margin: 2.2rem 0 1.2rem; display: grid; gap: .8rem; }
.pboard .controls p { font-weight: 700; }
.pboard .board { border-top: 3px solid var(--paint); }
.pboard .grp { margin-top: 2.6rem; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-bottom: .7rem; border-bottom: 1px solid var(--navy-2); }
.pboard .grp h2 { font-size: clamp(1.25rem, 2vw, 1.6rem); font-stretch: 100%; font-weight: 800; }
.pboard .grp .n { font-family: var(--data); color: var(--paint-dim); font-size: .85rem; }
.pboard .row { display: grid; grid-template-columns: 3.2rem minmax(0, 1.5fr) minmax(0, 1.6fr) 9.2rem 8.6rem 2.6rem; gap: 1.2rem; align-items: center; padding: 1.15rem 0; border-bottom: 1px solid var(--navy-2); text-decoration: none; color: var(--paint); transition: background-color .25s var(--ease); }
.pboard .row:hover, .pboard .row:focus-visible { background: var(--navy); }
.pboard .id { font-family: var(--data); font-weight: 700; color: var(--taxi); }
.pboard .nm { font-family: var(--display); font-weight: 780; font-size: clamp(1.1rem, 1.7vw, 1.4rem); line-height: 1.15; letter-spacing: -.01em; }
.pboard .sm { color: var(--paint-dim); font-size: .95rem; line-height: 1.45; }
.pboard .fmts { display: flex; gap: .35rem; flex-wrap: wrap; }
.pboard .fmt { font-family: var(--data); font-size: .75rem; font-weight: 700; letter-spacing: .06em; padding: .2rem .45rem; border: 1px solid var(--paint-dim); color: var(--paint); }
.pboard .pr { font-family: var(--data); font-size: .85rem; text-align: right; font-variant-numeric: tabular-nums; display: grid; gap: .1rem; }
.pboard .pr b { font-size: 1.05rem; }
.pboard .pr span { color: var(--paint-dim); }
.pboard .pr small { color: var(--paint-dim); font-size: .75rem; }
.pboard .go { justify-self: end; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; background: var(--taxi); color: var(--ink); }
.pboard .row:hover .go { background: var(--paint); }
.pboard .row .crs { font-family: var(--data); font-size: .72rem; letter-spacing: .06em; color: var(--ink); background: var(--strip-blue); padding: .15rem .4rem; margin-left: .6rem; vertical-align: .15em; }
.pboard .head { display: grid; grid-template-columns: 3.2rem minmax(0, 1.5fr) minmax(0, 1.6fr) 9.2rem 8.6rem 2.6rem; gap: 1.2rem; padding: .7rem 0; font-family: var(--data); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--paint-dim); }
.pboard .head span:nth-child(5) { text-align: right; }
.pboard [hidden] { display: none !important; }
.pboard .books { margin-top: 3rem; color: var(--paint-dim); }
@media (max-width: 980px) {
  .pboard .head { display: none; }
  .pboard .row { grid-template-columns: 2.6rem minmax(0, 1fr) 2.4rem; grid-template-areas: "id nm go" ". sm go" ". fm fm" ". pr pr"; row-gap: .5rem; }
  .pboard .pr { grid-template-columns: auto auto auto; justify-content: start; align-items: baseline; gap: .6rem; }
  .pboard .id { grid-area: id; } .pboard .nm { grid-area: nm; } .pboard .sm { grid-area: sm; } .pboard .fmts { grid-area: fm; } .pboard .pr { grid-area: pr; text-align: left; } .pboard .go { grid-area: go; align-self: start; }
}
.pboard section { padding: 0; }
.pboard .crs { font-family: var(--data); font-size: .75rem; letter-spacing: .06em; color: var(--ink); background: var(--strip-blue); padding: .15rem .4rem; margin-left: .6rem; vertical-align: .15em; }

/* /tools/ hub: grouped gates (owner decision 23 October 2026, mockup B1 in tools-mockups/) */
.ptools section { padding: 0; }
.ptools h1 { font-size: clamp(2rem, 4.4vw, 3.8rem); max-width: 20ch; }
.ptools .lede { margin-top: 1.1rem; max-width: 58ch; color: var(--paint-dim); font-size: 1.15rem; }
.ptools h2 { margin-top: clamp(2.5rem, 5vw, 3.5rem); font-size: clamp(1.3rem, 2.2vw, 1.8rem); font-stretch: 100%; }
.ptools .gates { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(21rem, 100%), 1fr)); gap: 1.4rem; }
.ptools .gate { background: var(--navy); border-top: 3px solid var(--paint); display: grid; grid-template-rows: auto 1fr auto; box-shadow: 0 16px 34px -22px rgba(0,0,0,.8); transition: transform .3s var(--ease); }
.ptools .gate:hover, .ptools .gate:focus-within { transform: translateY(-4px); }
.ptools .gate .top { display: flex; align-items: baseline; justify-content: space-between; padding: 1.2rem 1.4rem 0; }
.ptools .gate .des { font-family: var(--display); font-stretch: 112%; font-weight: 900; font-size: 3.4rem; line-height: .9; color: var(--taxi); letter-spacing: -.03em; }
.ptools .gate .min { font-family: var(--data); font-size: .85rem; color: var(--paint-dim); }
.ptools .gate .main { padding: 1rem 1.4rem 1.2rem; display: grid; gap: .7rem; align-content: start; }
.ptools .gate h3 { font-size: 1.35rem; line-height: 1.12; }
.ptools .gate p { color: var(--paint-dim); font-size: .98rem; }
.ptools .gate .for { font-size: .88rem; color: var(--paint); padding-top: .7rem; border-top: 1px solid var(--navy-2); }
.ptools .gate a.cta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: var(--taxi); color: var(--ink); text-decoration: none; font-weight: 800; padding: 1rem 1.4rem; min-height: 3.2rem; transition: background-color .25s var(--ease); }
.ptools .gate a.cta:hover, .ptools .gate a.cta:focus-visible { background: var(--paint); }
.ptools .how { margin-top: clamp(2.5rem, 5vw, 3.5rem); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; border-top: 1px solid var(--navy-2); padding-top: 1.6rem; }
.ptools .how b { display: block; font-family: var(--display); font-size: 1.2rem; margin-bottom: .4rem; }
.ptools .how span { color: var(--paint-dim); }
@media (max-width: 860px) { .ptools .how { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .ptools .gate { transition: none; } .ptools .gate:hover { transform: none; } }

.ptools .grp { margin-top: clamp(2.5rem, 5vw, 3.5rem); display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-bottom: .7rem; border-bottom: 1px solid var(--navy-2); }
.ptools .grp h2 { margin: 0; font-size: clamp(1.3rem, 2.2vw, 1.8rem); font-stretch: 100%; }
.ptools .grp .n { font-family: var(--data); color: var(--paint-dim); font-size: .85rem; }
.ptools .gates { margin-top: 1.4rem; }
.ptools .pchips { margin-top: 1.6rem; }
.ptools section { padding: 0; }
.ptools-how, .ptools-cta { border-top: 1px solid var(--navy-2); }
.ptools-how .steps { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.ptools-how .steps b { display: block; font-family: var(--display); font-size: 1.2rem; margin-bottom: .4rem; }
.ptools-how .steps span { color: var(--paint-dim); }
.ptools-how .scope { margin-top: 2.4rem; display: grid; gap: .6rem; max-width: 62ch; }
.ptools-cta h2 { font-size: clamp(1.4rem, 2.4vw, 2rem); }
@media (max-width: 860px) { .ptools-how .steps { grid-template-columns: minmax(0, 1fr); } }

/* NorthSky template samples. Extends ../phase2-home/world.css (DESIGN.md revision 2).
   Components here that DESIGN.md does not yet describe (breadcrumb, page head, form fields,
   tool widget, FAQ, price table, document page) are proposals for its next revision. */
[hidden] { display: none !important; }
:root { --paint-strong: #ffffff; --ink-dim: #44566a; }
.small { font-size: .9rem; }
code { font-family: var(--data); font-size: .85em; }

/* working pages are denser than the home scenes */
.tpl > section { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.tpl > section + section { border-top: 1px solid var(--navy-2); }
.tpl h2 { font-size: clamp(1.5rem, 2.6vw, 2.3rem); }
.tpl h3 { font-size: 1.1rem; }

/* page head */
.pagehead { padding-top: clamp(1.5rem, 3vw, 2.5rem); background: linear-gradient(180deg, #080d14 0%, var(--asphalt) 100%); }
.pagehead h1 { font-size: clamp(2.1rem, 4.4vw, 4rem); max-width: 22ch; }
.entry-content :is(h1,h2,h3,h4){overflow-wrap:break-word;hyphens:auto}
.pagehead h1{overflow-wrap:break-word;hyphens:auto}
.pagehead .lede { font-size: clamp(1.05rem, 1.5vw, 1.25rem); max-width: 58ch; color: #d3dfeb; }
.meta { font-size: .9rem; }

/* breadcrumb */
.crumbs ol { display: flex; flex-wrap: wrap; gap: .25rem .5rem; list-style: none; margin: 0 0 1.5rem; padding: 0; font-size: .88rem; font-weight: 600; color: var(--paint-dim); }
.crumbs li + li::before { content: "/"; margin-right: .5rem; color: var(--navy-2); font-weight: 400; }
.crumbs a { color: var(--paint-dim); text-decoration: none; }
.crumbs a:hover, .crumbs a.is-hover { color: var(--paint); text-decoration: underline; text-decoration-color: var(--taxi); text-decoration-thickness: 2px; }
.crumbs [aria-current] { color: var(--paint); }

/* draft and slot markers: unconfirmed content in italics with a visible note */
.slot { font-style: italic; color: var(--paint-dim); }
.slot .data { font-style: normal; font-size: .8rem; letter-spacing: .02em; border: 1px solid var(--navy-2); padding: .05rem .35rem; margin-right: .35rem; }
.slot-i { font-style: italic; color: var(--paint-dim); }

/* header additions: services disclosure, neutral header CTA */
.nav .sub-btn { font: inherit; font-weight: 600; font-size: .97rem; color: var(--paint); background: none; border: 0; border-bottom: 3px solid transparent; padding: .3rem 0; cursor: pointer; }
.nav .sub-btn::after { content: ""; display: inline-block; width: .45em; height: .45em; margin-left: .45em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-.2em) rotate(45deg); }
.nav .sub-btn[aria-expanded="true"]::after { transform: translateY(.05em) rotate(-135deg); }
.nav .sub-btn:hover { border-color: var(--taxi); }
.nav .sub-btn[data-current] { border-color: var(--paint); }
.nav li.has-sub { position: relative; }
.nav ul.sub { display: none; position: absolute; top: calc(100% + .9rem); left: -1rem; z-index: 20; min-width: 22rem; flex-direction: column; gap: 0; padding: .4rem 1rem; background: var(--asphalt); border: 1px solid var(--navy-2); border-top: 3px solid var(--paint); }
.nav ul.sub.open { display: flex; }
.nav ul.sub a { display: block; padding: .55rem 0; border-bottom: 1px solid var(--navy-2); }
.nav ul.sub li:last-child a { border-bottom: 0; }
.nav ul a[aria-current="page"] { border-color: var(--paint); }
.nav .navcta { border: 2px solid var(--paint-dim) !important; padding: .2rem .55rem !important; }
.nav .navcta:hover { border-color: var(--paint) !important; }
@media (max-width: 860px) {
  .nav ul.sub { position: static; min-width: 0; border: 0; padding: 0 0 0 1rem; }
  .nav .sub-btn { display: block; width: 100%; text-align: left; padding: .7rem 0; border-bottom: 1px solid var(--navy-2); }
  .nav .navcta { display: inline-block !important; margin: .7rem 0; }
}

/* sign additions */
.sign button { font: inherit; border: 0; cursor: pointer; }
.sign .alt { background: none; }
.sign .plain { color: var(--paint); background: transparent; box-shadow: inset 0 0 0 2px var(--paint); }
.sign .plain:hover { box-shadow: inset 0 0 0 2px var(--taxi); }
.sign .dir.is-hover { background: #ffd84a; transform: translateY(-2px); }
.sign .dir.is-focus { outline: 3px solid var(--ink); outline-offset: -8px; }
.sign .dir:active, .sign .dir.is-active { transform: none; background: var(--taxi); box-shadow: 0 0 0 3px var(--ink); }
.sign button:disabled, .sign button:disabled:hover { background: var(--navy-2); color: var(--paint-dim); box-shadow: none; transform: none; cursor: not-allowed; }
.textlink { font-weight: 700; text-decoration-color: var(--paint-dim); text-underline-offset: .3em; }
.textlink:hover { text-decoration-color: var(--taxi); text-decoration-thickness: 2px; }

/* text blocks */
.prose h2 { margin-top: 2.5rem; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose ul { max-width: 62ch; }
.prose ul, .ticks { padding-left: 1.2rem; }
.prose li + li, .ticks li + li { margin-top: .5rem; }
.prose li::marker, .ticks li::marker { color: var(--taxi); }
.list-plain { list-style: none; padding: 0; }
.list-plain li { padding: .5rem 0; border-bottom: 1px solid var(--navy-2); }

/* ruled rows */
.rows { list-style: none; margin: 1.25rem 0 0; padding: 0; border-top: 3px solid var(--paint); }
.rows li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .3rem 2rem; padding: .9rem 0; border-bottom: 1px solid var(--navy-2); }
.rows li > a { font-weight: 700; text-decoration: none; }
.rows li > a:hover, .rows li > a.is-hover { text-decoration: underline; text-decoration-color: var(--taxi); text-decoration-thickness: 3px; text-underline-offset: .25em; }
.rows .ref { font-family: var(--data); font-size: .78rem; letter-spacing: .04em; color: var(--paint-dim); }
.rows.two li { display: grid; grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); }
@media (max-width: 560px) { .rows.two li { grid-template-columns: minmax(0, 1fr); } }
.triple { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(1.5rem, 3vw, 2.5rem); margin-top: 2rem !important; }
.triple > div { border-top: 3px solid var(--paint); padding-top: 1rem; }
.triple p { margin-top: .6rem; }
@media (max-width: 860px) { .triple { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; } }
.standlist { list-style: none; padding: 0; border-top: 3px solid var(--paint); max-width: 62rem; }
.standlist li { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr) minmax(0, 1.2fr); gap: .3rem 1.5rem; align-items: baseline; padding: .8rem 0; border-bottom: 1px solid var(--navy-2); }
.standlist .des { font-family: var(--display); font-stretch: 68%; font-weight: 900; font-size: 1.6rem; color: var(--taxi); }
.standlist .name { font-family: var(--display); font-weight: 750; font-size: 1.15rem; }
@media (max-width: 560px) { .standlist li { grid-template-columns: 2.6rem minmax(0, 1fr); } .standlist li .slot { grid-column: 2; } }

/* FAQ: native details as ruled rows */
.faqlist { border-top: 3px solid var(--paint); max-width: 62rem; }
.faqlist details { border-bottom: 1px solid var(--navy-2); }
.faqlist summary { display: flex; justify-content: space-between; gap: 1.5rem; padding: 1rem 0; font-weight: 700; font-size: 1.05rem; cursor: pointer; list-style: none; }
.faqlist summary::-webkit-details-marker { display: none; }
.faqlist summary::after { content: "+"; flex: none; width: 1.6rem; height: 1.6rem; display: grid; place-items: center; border: 2px solid var(--paint-dim); font-weight: 800; line-height: 1; }
.faqlist details[open] summary::after { content: "\2212"; border-color: var(--paint); }
.faqlist summary:hover::after { border-color: var(--taxi); }
.faqlist .ans { padding: 0 0 1.2rem; max-width: 62ch; color: var(--paint-dim); }

/* tool widget */
.tw { margin-top: 2rem !important; display: grid; gap: 2rem; max-width: 52rem; }
.q { margin: 0; padding: 0; border: 0; min-width: 0; }
.q legend { font-weight: 700; font-size: 1.08rem; margin-bottom: .9rem; padding: 0; }
.q legend .data { color: var(--paint-dim); margin-right: .35rem; }
.q.invalid { border-left: 4px solid var(--paint); padding-left: 1rem; }
.q.inline { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
.q.inline legend { width: 100%; }
.opt, .check { display: flex; gap: .8rem; align-items: flex-start; padding: .6rem 0; cursor: pointer; }
.opt + .opt { border-top: 1px solid var(--navy-2); }
.q.inline .opt + .opt { border-top: 0; }
.opt small { display: block; font-size: .8rem; font-weight: 700; letter-spacing: .02em; color: var(--paint-dim); margin-top: .15rem; }
.opt input, .check input { appearance: none; flex: none; width: 1.3rem; height: 1.3rem; margin: .12rem 0 0; border: 2px solid var(--paint); background: transparent; display: grid; place-content: center; cursor: pointer; }
.opt input::before, .check input::before { content: ""; width: .6rem; height: .6rem; background: var(--ink); transform: scale(0); }
.opt input:checked, .check input:checked { background: var(--taxi); border-color: var(--taxi); }
.opt input:checked::before, .check input:checked::before { transform: scale(1); }
.check input:checked::before { width: .7rem; height: .4rem; background: none; border-left: 3px solid var(--ink); border-bottom: 3px solid var(--ink); transform: translateY(-.1rem) rotate(-45deg); }
.opt:hover input, .check:hover input { border-color: var(--taxi); }
.result { margin-top: 2rem !important; padding: 1.5rem; background: var(--navy); border-top: 3px solid var(--paint); max-width: 52rem; }
.result:focus { outline: 3px solid var(--taxi); outline-offset: 3px; }
.result h3 { font-size: clamp(1.3rem, 2.2vw, 1.8rem); margin: .5rem 0; }
.bands { list-style: none; padding: 0; margin-top: 1rem; }
.bands li { display: flex; gap: 1rem; padding: .4rem 0; border-top: 1px solid var(--navy-2); }
.bands .data { width: 4.5rem; color: var(--paint-dim); }
.notice { font-size: .95rem; }

/* form fields */
.fields { display: grid; gap: 1.4rem; max-width: 40rem; margin-top: 2rem !important; }
.field { display: grid; gap: .45rem; }
.field label:not(.check) { font-weight: 700; font-size: .95rem; }
.opt-l { font-weight: 600; font-size: .8rem; color: var(--paint-dim); margin-left: .35rem; }
.field input:not([type=checkbox]):not([type=radio]), .field textarea { font: inherit; color: var(--paint); background: #0b1118; border: 2px solid var(--paint-dim); border-radius: 0; padding: .7rem .8rem; width: 100%; }
.field input:hover, .field textarea:hover, .field input.is-hover { border-color: var(--paint); }
.field input.is-focus { outline: 3px solid var(--taxi); outline-offset: 3px; }
.field input:disabled, .field textarea:disabled { border-color: var(--navy-2); color: var(--paint-dim); cursor: not-allowed; }
.field textarea { resize: vertical; min-height: 9rem; }
.help { font-size: .88rem; color: var(--paint-dim); }
.field.invalid { border-left: 4px solid var(--paint); padding-left: 1rem; }
.field.invalid input, .field.invalid textarea { border: 3px solid var(--paint-strong); }
.fielderr { font-weight: 700; font-size: .92rem; color: var(--paint-strong); display: flex; gap: .55rem; align-items: baseline; }
.fielderr::before { content: ""; flex: none; width: .65rem; height: .65rem; background: var(--paint-strong); transform: rotate(45deg) translateY(-.05rem); }
.errsum { padding: 1rem 1.2rem; border: 3px solid var(--paint); font-weight: 700; }
.errsum:focus { outline: 3px solid var(--taxi); outline-offset: 3px; }
.errsum ul { margin: .5rem 0 0; padding-left: 1.2rem; font-weight: 600; }
.formstatus:empty { display: none; }
.formstatus { font-weight: 700; }
.row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; }
@media (max-width: 560px) { .row2 { grid-template-columns: minmax(0, 1fr); } }

/* price and checkout */
.price { border-collapse: collapse; width: 100%; max-width: 52rem; font-size: .98rem; }
.price th, .price td { text-align: left; padding: .8rem 1rem .8rem 0; border-bottom: 1px solid var(--navy-2); vertical-align: baseline; }
.price thead th { font-size: .8rem; font-weight: 700; letter-spacing: .02em; color: var(--paint-dim); border-bottom: 3px solid var(--paint); }
.price td.data { white-space: nowrap; }
@media (max-width: 560px) {
  .price thead { display: none; }
  .price tr { display: grid; padding: .8rem 0; border-bottom: 1px solid var(--navy-2); }
  .price td, .price th { border: 0; padding: .15rem 0; }
  .price td.data { white-space: normal; }
  .price td::before { content: attr(data-label); display: block; font-family: var(--text); font-size: .8rem; color: var(--paint-dim); }
}
.checkout { display: grid; gap: 1.5rem; max-width: 52rem; margin-top: 2.5rem !important; padding-top: 1.5rem; border-top: 1px solid var(--navy-2); }
.panel { padding: 1.3rem; background: var(--navy); border-top: 3px solid var(--paint); display: grid; gap: 1rem; }
.panel[hidden] { display: none; }

/* contact */
.kv { list-style: none; padding: 0; border-top: 3px solid var(--paint); max-width: 62rem; }
.kv li { display: grid; grid-template-columns: 11rem minmax(0, 14rem) minmax(0, 1fr); gap: .3rem 1.5rem; padding: .9rem 0; border-bottom: 1px solid var(--navy-2); }
.kv .k { font-weight: 700; color: var(--paint-dim); font-size: .9rem; }
.kv a { font-weight: 700; text-decoration-color: var(--taxi); text-decoration-thickness: 2px; }
@media (max-width: 860px) { .kv li { grid-template-columns: minmax(0, 1fr); } }
.steps { list-style: none; padding: 0; counter-reset: s; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem clamp(1.5rem, 3vw, 2.5rem); }
.steps li { counter-increment: s; border-top: 3px solid var(--paint); padding-top: 1rem; }
.steps li::before { content: counter(s); display: block; font-family: var(--display); font-stretch: 68%; font-weight: 900; font-size: 2rem; line-height: 1; color: var(--taxi); margin-bottom: .5rem; }
.steps p { margin-top: .5rem; }
@media (max-width: 860px) { .steps { grid-template-columns: minmax(0, 1fr); } }
.caution { background: var(--navy); }
.caution p.measure { font-size: 1.08rem; border-left: 4px solid var(--paint); padding-left: 1rem; }
.embed { border: 2px dashed var(--paint-dim); padding: 2rem 1.5rem; max-width: 52rem; display: grid; gap: .6rem; }

/* legal document */
.doc { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.toc { position: sticky; top: 6rem; font-size: .9rem; }
.toc-h { font-size: .8rem !important; font-family: var(--text); letter-spacing: .06em; text-transform: uppercase; color: var(--paint-dim); margin-bottom: .6rem; }
.toc ol { list-style: none; padding: 0; margin: 0; border-top: 3px solid var(--paint); }
.toc a { display: block; padding: .4rem 0; border-bottom: 1px solid var(--navy-2); color: var(--paint-dim); text-decoration: none; }
.toc a:hover { color: var(--paint); }
.doctext { max-width: 68ch; }
.doctext, .doctext a, .sources a { overflow-wrap: anywhere; }
.doctext > * + * { margin-top: 1rem; }
.doctext h2 { font-size: clamp(1.3rem, 2vw, 1.7rem); margin-top: 2.6rem; scroll-margin-top: 5rem; }
.doctext h3 { margin-top: 1.6rem; }
.doctext ul { padding-left: 1.2rem; }
.doctext li + li { margin-top: .4rem; }
.doctext table { border-collapse: collapse; width: 100%; font-size: .92rem; }
.doctext th, .doctext td { text-align: left; vertical-align: top; padding: .55rem .8rem .55rem 0; border-bottom: 1px solid var(--navy-2); }
.doctext thead th { border-bottom: 3px solid var(--paint); }
/* Tables in the block editor's table block (legal pages) scroll inside their own box on narrow screens. */
.wp-block-table { max-width: 100%; overflow-x: auto; }
.ns-card { min-width: 0; }
/* Long source URLs in lists and cells wrap instead of widening the page. */
.entry-content :is(li, p, td, th) { overflow-wrap: anywhere; }
/* Reading measure: running text stays near 65 characters per line on wide screens. */
.entry-content :is(p, li, dd) { max-width: 68ch; }
@media (max-width: 860px) { .doc { grid-template-columns: minmax(0, 1fr); } .toc { position: static; } .doctext table { display: block; overflow-x: auto; } }

/* states sheet */
.stgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1.5rem; margin-top: 2rem !important; }
.st { border-top: 3px solid var(--paint); padding-top: .8rem; display: grid; gap: .8rem; align-content: start; }
.st-name { font-weight: 800; font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; color: var(--paint-dim); }
.st-demo { padding: 1.2rem; background: #0b1118; display: grid; gap: .5rem; align-content: start; min-height: 5rem; }
.st-demo .sign { display: flex; }
.st-note { font-size: .88rem; color: var(--paint-dim); }
.navdemo { list-style: none; margin: 0; padding: 0; font-weight: 600; }
.navdemo a { text-decoration: none; padding-block: .3rem; border-bottom: 3px solid transparent; }
.navdemo a.is-hover { border-color: var(--taxi); }
.navdemo a.is-focus, .lang.is-focus, .crumbs a.is-focus { outline: 3px solid var(--taxi); outline-offset: 3px; }
.navdemo a[aria-current] { border-color: var(--paint); }
.navdemo .navcta { border: 2px solid var(--paint-dim); padding: .2rem .55rem; }
.st-demo .lang { border: 2px solid var(--paint); padding: .15rem .5rem; font-weight: 800; font-size: .85rem; text-decoration: none; justify-self: start; }
/* states added from the pack 03 round 1 sample check (15 October 2026): demo classes only */
.st-demo .opt.is-hover input { border-color: var(--taxi); }
.st-demo .opt.is-focus input, .st-demo .chips button.is-focus, .st-demo .ctl.is-focus, .st-demo .faqlist summary.is-focus, .st-demo .rows a.is-focus { outline: 3px solid var(--taxi); outline-offset: 3px; }
.st-demo .chips button.is-hover, .st-demo .lang.is-hover, .st-demo .lang:hover { border-color: var(--taxi); }
.st-demo .strips { padding-left: 1rem; }
.st-demo .strip.is-focus { outline: 3px solid var(--taxi); outline-offset: 3px; }
.st-demo .ctl { font: inherit; font-weight: 600; font-size: .85rem; color: var(--paint-dim); background: transparent; border: 1px solid var(--navy-2); padding: .25rem .6rem; justify-self: start; }
.st-demo .ctl.is-hover, .st-demo .ctl[aria-pressed="true"] { color: var(--paint); border-color: var(--paint-dim); }
.subdemo .sub-btn { font: inherit; font-weight: 600; color: var(--paint); background: none; border: 0; border-bottom: 3px solid var(--taxi); padding: .3rem 0; }
.subdemo .sub { list-style: none; padding: .3rem 0 0; margin: .5rem 0 0; border-top: 3px solid var(--paint); }
.subdemo .sub a { display: block; padding: .45rem 0; border-bottom: 1px solid var(--navy-2); text-decoration: none; }
.st-demo .crumbs ol { margin: 0; }
.st-demo .result { margin: 0 !important; }

/* index uses the home stand rows, with a fixed code column so descriptions align */
.tpl .stands { padding-top: clamp(2.5rem, 5vw, 4.5rem); }
@media (min-width: 861px) { .tpl .stands li { grid-template-columns: 5.5rem minmax(0, 1.1fr) minmax(0, 1.4fr) 11rem; } .tpl .stands .ref { text-align: right; white-space: normal; } }

/* certificate verify form: markup verbatim, styled only here */
.ns-verify label { font-weight: 700; }
.ns-verify p + p { margin-top: .6rem; }
.ns-verify p:last-child { margin-top: 1.2rem; }
.ns-verify input[type=text] { font: inherit; font-family: var(--data); color: var(--paint); background: #0b1118; border: 2px solid var(--paint-dim); border-radius: 0; padding: .7rem .8rem; width: min(100%, 24rem); }
.ns-verify input[type=text]:hover { border-color: var(--paint); }
.ns-verify button { appearance: none; border: 0; border-radius: 0; font: inherit; font-weight: 700; letter-spacing: .01em; padding: .9rem 1.3rem; cursor: pointer; background: var(--taxi); color: var(--ink); box-shadow: 0 0 0 3px var(--ink), 0 12px 24px -14px rgba(0,0,0,.7); }
.ns-verify button:hover { background: #ffd84a; }
.ns-verify button:focus-visible { outline: 3px solid var(--ink); outline-offset: -8px; }

.doctext figure { margin: 0; }
.doctext figcaption { margin-top: .5rem; font-size: .85rem; color: var(--paint-dim); }

/* print or save as PDF (tool pages): the page head and the result only, on white */
@media print {
  body, .tpl > section, .pagehead, .result { background: #fff !important; color: #000 !important; }
  .proto, .nav, footer, .page::before, .tpl > section:not(.pagehead):not(.widget), .crumbs, .widget > :not(.result):not(h2) { display: none !important; }
  .tpl > section { padding: 0 0 1rem !important; border: 0 !important; }
  .pagehead .lede, .result .dim, .bands .data { color: #333 !important; }
  .result { border-top: 2px solid #000; padding: 1rem 0; }
}

/* Product pages and the other generated pages built from block markup (ns-*, wp-block-*). From prototypes/phase2-home/product-page-mockups (variants A and B). */
.entry-content > .ns-sec, .entry-content > .ns-rail { padding-block: clamp(2.5rem, 5vw, 4.5rem); padding-inline: calc(var(--line-x) + 1.6rem) var(--gutter); }
.entry-content > .ns-sec > * { max-width: 72rem; margin-inline: auto; }
.entry-content > .ns-sec + .ns-sec, .entry-content > .ns-rail + .ns-sec { border-top: 1px solid var(--navy-2); }
.ns-sec.ns-alt { background: var(--navy); }
.ns-hero { background: linear-gradient(180deg, #080d14 0%, var(--asphalt) 100%); }
.ns-eyebrow { font-family: var(--data); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--taxi); margin: 0 0 .8rem; }
:is(.ns-sec, .ns-rail) h1 { font-size: clamp(2.1rem, 4.4vw, 4rem); max-width: 22ch; overflow-wrap: break-word; hyphens: auto; }
:is(.ns-sec, .ns-rail) h2 { font-size: clamp(1.5rem, 2.6vw, 2.3rem); margin-top: 2.5rem; }
:is(.ns-sec, .ns-rail) h2:first-child, :is(.ns-sec, .ns-rail) h1 + .ns-rule + h2 { margin-top: 0; }
:is(.ns-sec, .ns-rail) h3 { font-size: 1.1rem; margin-top: 1.6rem; }
.ns-rule { width: 4rem; height: 4px; background: var(--taxi); border: 0; margin: 1.2rem 0; opacity: 1; }
.ns-lead { font-size: clamp(1.05rem, 1.5vw, 1.25rem); max-width: 58ch; color: #d3dfeb; }
:is(.ns-sec, .ns-rail) p, :is(.ns-sec, .ns-rail) li { overflow-wrap: break-word; }
:is(.ns-sec, .ns-rail) p, :is(.ns-sec, .ns-rail) ul.wp-block-list:not(.ns-meta) { max-width: 66ch; }
:is(.ns-sec, .ns-rail) ul.wp-block-list:not(.ns-meta) { padding-left: 1.2rem; }
:is(.ns-sec, .ns-rail) li + li { margin-top: .5rem; }
:is(.ns-sec, .ns-rail) li::marker { color: var(--taxi); }
:is(.ns-sec, .ns-rail) a { color: var(--paint); text-decoration-color: var(--taxi); text-underline-offset: .2em; }
.ns-meta { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; gap: .6rem; max-width: 66ch; border-top: 1px solid var(--navy-2); padding-top: 1rem; }
.ns-meta li { margin: 0; display: grid; grid-template-columns: minmax(7rem, 11rem) minmax(0, 1fr); gap: .2rem 1rem; font-size: .95rem; color: var(--paint-dim); }
.ns-meta li strong { color: var(--paint); font-family: var(--data); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; }
@media (max-width: 560px) { .ns-meta li { grid-template-columns: minmax(0, 1fr); } }
:is(.ns-sec, .ns-rail) .wp-block-table { overflow-x: auto; max-width: none; margin: 1.2rem 0; }
:is(.ns-sec, .ns-rail) table { border-collapse: collapse; min-width: 34rem; width: 100%; font-size: .95rem; }
:is(.ns-sec, .ns-rail) th, :is(.ns-sec, .ns-rail) td { text-align: left; padding: .7rem .8rem; border-bottom: 1px solid var(--navy-2); vertical-align: top; }
:is(.ns-sec, .ns-rail) th { font-family: var(--data); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--paint-dim); }
:is(.ns-sec, .ns-rail) figcaption { font-size: .85rem; color: var(--paint-dim); }
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.2rem 0; }
.wp-block-button__link { appearance: none; border: 0; border-radius: 0; font: inherit; font-weight: 700; padding: .9rem 1.3rem; cursor: pointer; background: var(--taxi); color: var(--ink); text-decoration: none; display: inline-block; max-width: 100%; white-space: normal; }
.wp-block-button__link:hover { background: #ffd84a; }
.wp-block-button__link:focus-visible { outline: 3px solid var(--paint); outline-offset: 3px; }
.ns-store-panel { margin-top: 1rem; }

:is(.ns-sec, .ns-rail) h2 + p, :is(.ns-sec, .ns-rail) h2 + ul { margin-top: .9rem; }

/* Product page rail (variant B) */
.ns-rail { padding-inline: calc(var(--line-x) + 1.6rem) var(--gutter); display: grid; gap: 2rem; max-width: 84rem; margin-inline: auto; padding-block: clamp(2rem, 4vw, 3.5rem); }
.ns-rail { grid-template-columns: minmax(0, 1fr); }
.ns-rail-main { min-width: 0; }
.ns-rail-main h2 { margin-top: 2.5rem; }
.ns-rail-main > :first-child { margin-top: 0; }
.ns-rail-buy { min-width: 0; background: var(--navy); padding: 1.4rem; border-top: 4px solid var(--taxi); }
.ns-rail-buy table { min-width: 0; font-size: .9rem; }
.ns-rail-buy th, .ns-rail-buy td { padding: .5rem .4rem; }
.ns-rail-buy h2 { margin-top: 0; font-size: 1.4rem; }
.ns-rail-buy > * { max-width: none; }
.ns-rail-buy h3 { font-size: 1rem; }
@media (min-width: 960px) {
  .ns-rail { grid-template-columns: minmax(0, 1fr) minmax(24rem, 30rem); align-items: start; }
  /* The buy box grows downward with the page. It used to be sticky with its own scrollbar, so the consent boxes and Continue
     that appear after the first click sat below the fold of the box and had to be scrolled to (owner, 28 October 2026). */
  .ns-buybar a { display: none; }
}
@media (max-width: 959px) { .ns-buybar a { position: sticky; bottom: 0; display: block; text-align: center; background: var(--taxi); color: var(--ink); font-weight: 700; padding: .9rem 1rem; text-decoration: none; z-index: 5; } }
.ns-rail-main h2 + p, .ns-rail-main h2 + .wp-block-list { margin-top: .9rem; }
.ns-rail { padding-top: 1.5rem; }
.ns-buybar { margin: 0; }
@media (min-width: 960px) { .ns-buybar { display: none; } }
@media (max-width: 959px) { .ns-buybar { position: sticky; bottom: 0; z-index: 5; } .ns-buybar a { display: block; } }
.ns-rail-buy th { letter-spacing: 0; text-transform: none; font-size: .78rem; overflow-wrap: normal; word-break: normal; }
.ns-rail-buy td a { overflow-wrap: normal; }
/* Links that are buttons keep dark text on the yellow ground (the generic link rule above is more specific than .wp-block-button__link). */
:is(.ns-sec, .ns-rail) a.wp-block-button__link, :is(.ns-sec, .ns-rail) .wp-block-button__link, .ns-buybar a { color: var(--ink); text-decoration: none; }
.ns-rail-buy .wp-block-table { overflow-x: auto; }
/* WordPress's group layout lets the buy column size itself to its table; an explicit width keeps it inside its grid track (staging, 390 px). */
.ns-rail-buy, .ns-rail-main { width: 100%; }
.ns-buybar.is-hidden { display: none; }