/* SOURCE: the owner's sketch, claude.ai artifact TieQVwAtzrKjSx6QcdrhwM, version 1794425106-9f37, file assets/site.1142c4cd8c.css
   (sha256 1142c4cd8ceabb28...), made by Claude on the web at the owner's request, 11 Nov 2026. Kept whole as version 3's base;
   every change is in v3.css, loaded after it. */
/* MitigLane, design pass 2 (11 November 2026). Presentation only.
   Idea: paper and night. Pages are neutral paper; the sky, the product and the closing call sit in night windows.
   Layout: fluid. The page fills the window between gutters that step up with its width (16, 24, 40, 64); running text keeps its own measure.
           Each page opens with a night card; cards below it sit on a 24px grid.
   Type: one family (Inter, served from this site), two weights (400, 600), five steps (40 / 28 / 18 / 16 / 12).
         Headings are regular weight and tight; the emphasised words carry the second weight.
   Space: 8px unit (8 16 24 40 64 96 128). Radii by role: 16 card, 12 inset, 8 small, pill for controls.
   Colour: one accent, Arcturus gold. Status colours are semantic and separate from it.
   Any picture of the product (.prod) keeps the product's own navy in both themes. */

@font-face { font-family: 'Inter'; src: url('fonts/inter-var.woff2') format('woff2'); font-weight: 400 600; font-style: normal; font-display: swap }
/* Inter with its optical-size axis, cut to Latin-1 and typographic punctuation, weights 400 to 600. Licence: /assets/fonts/OFL-inter.txt.
   The metric-matched fallback keeps the swap still. */
@font-face { font-family: 'Inter Fallback'; src: local('Arial'), local('Helvetica'); size-adjust: 107%; ascent-override: 90%; descent-override: 22%; line-gap-override: 0% }

:root {
  --sans: 'Inter', 'Inter Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif: var(--sans); --mono: var(--sans); /* one family; the old names resolve to it */
  --max: 2400px; /* only the very widest windows get side margins */
  --gut: max(16px, env(safe-area-inset-left, 0px));
  --gut-r: max(16px, env(safe-area-inset-right, 0px));
  /* one spacing scale */
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 40px; --s5: 64px; --s6: 96px; --s7: 128px;
  --sec: 96px; --pad: 24px; --pad-l: 24px;
  --r-card: 16px; --r-panel: 16px; --r-in: 12px; --r-sm: 8px; --r-pill: 999px;
  --t: 180ms ease-out;
  /* Paper */
  --bg: #FAFAF8; --bg2: #F2F2EF; --panel: #FFFFFF; --panel2: #F6F6F3;
  --ink: #101216; --ink2: #3C3F46; --ink3: #646872; --em: #101216;
  --gold: #FFD15C; --gold-ink: #8A5A00; --on-gold: #14110A; --gold-soft: rgba(255, 209, 92, .24);
  --hair: rgba(16, 18, 22, .10); --hair2: rgba(16, 18, 22, .18); --hover: rgba(16, 18, 22, .06);
  --shadow: 0 1px 2px rgba(16, 18, 22, .04), 0 4px 12px -4px rgba(16, 18, 22, .08);
  --shadow-up: 0 2px 4px rgba(16, 18, 22, .05), 0 16px 32px -12px rgba(16, 18, 22, .18);
  --btn: inset 0 1px 0 rgba(255, 255, 255, .45), 0 1px 2px rgba(16, 18, 22, .16);
  --btn-up: inset 0 1px 0 rgba(255, 255, 255, .45), 0 2px 4px rgba(16, 18, 22, .10), 0 12px 24px -8px rgba(138, 90, 0, .5);
  --s-aff: #D24E0A; --s-ok: #11815A; --s-inc: #66728F; --s-unc: #5E6576; --pt: rgba(16, 18, 22, .5); --link-line: rgba(16, 18, 22, .14);
  --focus: #8A5A00;
  --night: #070B1D; --night-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 2px 4px rgba(7, 11, 29, .12), 0 24px 48px -24px rgba(7, 11, 29, .55);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #090B12; --bg2: #0D1019; --panel: #12151F; --panel2: #181C28;
  --ink: #F2F4F8; --ink2: #C2C7D3; --ink3: #9299AA; --em: #FFD15C;
  --gold: #FFD15C; --gold-ink: #FFD15C; --on-gold: #14110A; --gold-soft: rgba(255, 209, 92, .14);
  --hair: rgba(242, 244, 248, .10); --hair2: rgba(242, 244, 248, .2); --hover: rgba(242, 244, 248, .08);
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 12px -4px rgba(0, 0, 0, .5);
  --shadow-up: 0 2px 4px rgba(0, 0, 0, .5), 0 16px 32px -12px rgba(0, 0, 0, .8);
  --btn: inset 0 1px 0 rgba(255, 255, 255, .45), 0 1px 2px rgba(0, 0, 0, .4);
  --btn-up: inset 0 1px 0 rgba(255, 255, 255, .45), 0 2px 4px rgba(0, 0, 0, .5), 0 12px 24px -8px rgba(255, 209, 92, .4);
  --s-aff: #FF7A3D; --s-ok: #6FD8A3; --s-inc: #8E9BB5; --s-unc: #BAC2D0; --pt: rgba(242, 244, 248, .46); --link-line: rgba(242, 244, 248, .10);
  --focus: #FFD15C;
  --night: #0E1326; --night-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 2px 4px rgba(0, 0, 0, .4), 0 24px 48px -24px rgba(0, 0, 0, .8);
  color-scheme: dark } }
:root[data-theme="dark"] {
  --bg: #090B12; --bg2: #0D1019; --panel: #12151F; --panel2: #181C28;
  --ink: #F2F4F8; --ink2: #C2C7D3; --ink3: #9299AA; --em: #FFD15C;
  --gold: #FFD15C; --gold-ink: #FFD15C; --on-gold: #14110A; --gold-soft: rgba(255, 209, 92, .14);
  --hair: rgba(242, 244, 248, .10); --hair2: rgba(242, 244, 248, .2); --hover: rgba(242, 244, 248, .08);
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 12px -4px rgba(0, 0, 0, .5);
  --shadow-up: 0 2px 4px rgba(0, 0, 0, .5), 0 16px 32px -12px rgba(0, 0, 0, .8);
  --btn: inset 0 1px 0 rgba(255, 255, 255, .45), 0 1px 2px rgba(0, 0, 0, .4);
  --btn-up: inset 0 1px 0 rgba(255, 255, 255, .45), 0 2px 4px rgba(0, 0, 0, .5), 0 12px 24px -8px rgba(255, 209, 92, .4);
  --s-aff: #FF7A3D; --s-ok: #6FD8A3; --s-inc: #8E9BB5; --s-unc: #BAC2D0; --pt: rgba(242, 244, 248, .46); --link-line: rgba(242, 244, 248, .10);
  --focus: #FFD15C;
  --night: #0E1326; --night-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 2px 4px rgba(0, 0, 0, .4), 0 24px 48px -24px rgba(0, 0, 0, .8);
  color-scheme: dark }
@media (min-width: 600px) { :root { --gut: max(24px, env(safe-area-inset-left, 0px)); --gut-r: max(24px, env(safe-area-inset-right, 0px)) } }
@media (min-width: 1000px) { :root { --pad-l: 64px; --gut: max(40px, env(safe-area-inset-left, 0px)); --gut-r: max(40px, env(safe-area-inset-right, 0px)) } }
@media (min-width: 1440px) { :root { --gut: max(64px, env(safe-area-inset-left, 0px)); --gut-r: max(64px, env(safe-area-inset-right, 0px)) } }
@media (min-width: 1100px) { :root { --sec: 128px } }

/* Night: the sky's own palette, the same in both themes. Everything inside reads these tokens. */
.hero, .phead, .field, .way-pic {
  --ink: #F3F5FA; --ink2: #C3C9D8; --ink3: #939BB0; --em: #FFD15C;
  --panel: #111936; --panel2: #16204A;
  --gold-ink: #FFD15C; --gold-soft: rgba(255, 209, 92, .14);
  --hair: rgba(243, 245, 250, .10); --hair2: rgba(243, 245, 250, .2); --hover: rgba(243, 245, 250, .08);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 12px -4px rgba(0, 0, 0, .4);
  --shadow-up: 0 2px 4px rgba(0, 0, 0, .4), 0 16px 32px -12px rgba(0, 0, 0, .7);
  --btn: inset 0 1px 0 rgba(255, 255, 255, .45), 0 1px 2px rgba(0, 0, 0, .4);
  --btn-up: inset 0 1px 0 rgba(255, 255, 255, .45), 0 2px 4px rgba(0, 0, 0, .5), 0 12px 24px -8px rgba(255, 209, 92, .4);
  --s-aff: #FF7A3D; --s-ok: #6FD8A3; --s-inc: #8E9BB5; --s-unc: #BAC2D0; --pt: rgba(243, 245, 250, .46); --link-line: rgba(243, 245, 250, .12);
  --focus: #FFD15C;
  color: var(--ink2); color-scheme: dark;
}

* { box-sizing: border-box }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 88px }
html, body { margin: 0 }
body { background: var(--bg); color: var(--ink2); font-family: var(--sans); font-size: 16px; font-weight: 400; line-height: 1.65; font-optical-sizing: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility }
h1, h2, h3, h4, p, ul, ol, dl, figure { margin: 0 }
ul, ol { padding: 0 }
img, svg, canvas { display: block; max-width: 100% }
a { color: inherit }
b, strong, th { font-weight: 600 }
em { font-style: normal }
::selection { background: var(--gold); color: var(--on-gold) }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px }
.w { width: 100%; max-width: calc(var(--max) + var(--gut) + var(--gut-r)); margin-inline: auto; padding-left: var(--gut); padding-right: var(--gut-r) }
.mono { font-family: var(--sans); font-size: 16px; font-weight: 400 }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
.skip { position: absolute; left: 16px; top: -80px; z-index: 50; background: var(--gold); color: var(--on-gold); padding: 8px 16px; font-weight: 600; text-decoration: none; border-radius: var(--r-pill) }
.skip:focus { top: 16px }
.js-only { display: none } .js .js-only { display: inline-flex }

/* ---------- type: five steps, two weights ---------- */
h1, .h1 { font-size: clamp(32px, 3.6vw, 40px); line-height: 1.15; letter-spacing: -.03em; font-weight: 400 }
h2, .h2 { font-size: clamp(24px, 2.6vw, 28px); line-height: 1.2; letter-spacing: -.025em; font-weight: 400 }
h3, h4, .h3 { font-size: 18px; line-height: 1.35; letter-spacing: -.01em; font-weight: 600 }
h1, h2, h3, h4, .h1, .h2, .h3 { font-family: var(--sans); color: var(--ink); text-wrap: balance }
.h1 em, .h2 em, .h3 em { color: var(--em); font-style: normal; font-weight: 600 }
.eb, .soon, .chip, .rgrp-h, .ft h2, .draft b { font-size: 12px; line-height: 1.35; letter-spacing: .08em; text-transform: uppercase; font-weight: 600 }
.eb { color: var(--gold-ink) }
.lede { color: var(--ink2); font-size: 18px; line-height: 1.6; max-width: 52ch }
.p { color: var(--ink2); max-width: 60ch }
.p b, .lede b { color: var(--ink); font-weight: 600 }
.soon { display: inline-flex; align-items: center; gap: 8px; color: var(--ink3) }
.soon::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px var(--gold-soft) }
.cap { font-size: 12px; line-height: 1.5; letter-spacing: .01em; color: var(--ink3); font-weight: 400 }
.stack { display: flex; flex-direction: column; gap: var(--s2); min-width: 0 }
.ctas { display: flex; gap: var(--s2) var(--s3); align-items: center; flex-wrap: wrap }
.sec-h { display: flex; flex-direction: column; gap: var(--s2); margin-bottom: var(--s4); max-width: 720px }
main p a:not(.btn):not(.ghost), main li a:not(.btn):not(.ghost), main dd a:not(.btn):not(.ghost) { color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold-ink); text-decoration-thickness: 2px; text-underline-offset: 4px; border-radius: var(--r-sm); transition: color var(--t) }
main p a:not(.btn):not(.ghost):hover, main li a:not(.btn):not(.ghost):hover, main dd a:not(.btn):not(.ghost):hover { color: var(--gold-ink) }

/* one rhythm between sections; a card section directly under the opening card joins it on the 24px grid */
main > section, .sec { padding-top: var(--sec) }
main > .hero + section, main > .phead + section { padding-top: var(--s3) }
main > .phead + section:has(> .sec-h) { padding-top: var(--sec) }
main > section:last-child { padding-bottom: 0 }

/* ---------- header ---------- */
.hd { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: var(--s2); min-height: 72px; background: color-mix(in srgb, var(--bg) 84%, transparent); -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px) }
.hd.w { max-width: none; padding-left: max(var(--gut), calc((100% - var(--max)) / 2)); padding-right: max(var(--gut-r), calc((100% - var(--max)) / 2)) }
.wm { font-size: 18px; line-height: 1.35; font-weight: 600; letter-spacing: -.02em; text-decoration: none; color: var(--ink); white-space: nowrap; border-radius: var(--r-sm); transition: color var(--t) }
.wm:hover { color: var(--gold-ink) }
.nav { display: none; gap: var(--s1); margin-left: var(--s4) }
.nav a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: var(--r-pill); text-decoration: none; color: var(--ink2); font-size: 16px; font-weight: 400; transition: background var(--t), color var(--t) }
.nav a:hover { color: var(--ink); background: var(--hover) }
.nav a[aria-current="page"] { color: var(--ink); font-weight: 600; background: var(--hover) }
.hd-r { margin-left: auto; display: flex; align-items: center; gap: var(--s1) }
.theme { display: none; width: 40px; height: 40px; place-items: center; background: var(--panel); border: 1px solid var(--hair); border-radius: var(--r-pill); color: var(--ink); cursor: pointer; padding: 0; transition: transform var(--t), box-shadow var(--t), border-color var(--t) }
.js .theme { display: grid }
.theme svg { width: 16px; height: 16px }
.theme:hover, .menu summary:hover { transform: translateY(-2px); box-shadow: var(--shadow-up); border-color: var(--hair2) }
.menu { position: relative }
.menu summary { list-style: none; cursor: pointer; background: var(--panel); border: 1px solid var(--hair); border-radius: var(--r-pill); padding: 0 16px; min-height: 40px; display: flex; align-items: center; font-size: 16px; font-weight: 600; color: var(--ink); transition: transform var(--t), box-shadow var(--t), border-color var(--t) }
.menu summary::-webkit-details-marker { display: none }
.menu-p { position: absolute; right: 0; top: calc(100% + 8px); min-width: 240px; background: var(--panel); border: 1px solid var(--hair); border-radius: var(--r-card); padding: 8px; display: flex; flex-direction: column; box-shadow: var(--shadow-up) }
.menu-p a { padding: 8px 16px; text-decoration: none; color: var(--ink); border-radius: var(--r-in); font-weight: 400; transition: background var(--t) }
.menu-p a:hover, .menu-p a[aria-current="page"] { background: var(--hover) }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; background: var(--gold); color: var(--on-gold); font-family: var(--sans); font-weight: 600; font-size: 16px; line-height: 1; letter-spacing: -.005em; padding: 0 24px; border-radius: var(--r-pill); text-decoration: none; white-space: nowrap; border: 0; cursor: pointer; box-shadow: var(--btn); transition: transform var(--t), box-shadow var(--t) }
.btn:hover { transform: translateY(-2px); box-shadow: var(--btn-up) }
.btn:active { transform: translateY(0); box-shadow: var(--btn) }
.btn.big { min-height: 48px }
.btn.dark { background: var(--gold); color: var(--on-gold) }
.hd .btn { min-height: 40px; padding: 0 16px }
.cta-l { display: none }
.ghost { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; color: var(--ink); font-weight: 600; text-decoration: none; border-radius: var(--r-sm); transition: color var(--t) }
.ghost::after { content: ""; width: 16px; height: 16px; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform var(--t) }
.ghost:hover { color: var(--gold-ink) } .ghost:hover::after { transform: translateX(4px) }
@media (max-width: 479px) { .hd .btn { display: none } }
@media (min-width: 980px) { .nav { display: flex } .menu { display: none } .cta-l { display: inline } .cta-s { display: none } }

/* ---------- surfaces: one card ---------- */
.panel, .tile, .way, .outs li, .legal section, .step, .addr { background: var(--panel); border: 1px solid var(--hair); border-radius: var(--r-card); box-shadow: var(--shadow) }
.panel { padding: var(--pad) }
@media (min-width: 900px) { .panel { padding: var(--s4) } }
.tile, .way, .outs li, .step { transition: transform var(--t), box-shadow var(--t), border-color var(--t) }
@media (hover: hover) { .tile:hover, .way:hover, .outs li:hover, .step:hover { transform: translateY(-4px); box-shadow: var(--shadow-up); border-color: var(--hair2) } }
.tile { padding: var(--pad); display: flex; flex-direction: column; gap: var(--s1); min-width: 0 }
.tile p { color: var(--ink2) }
.tile > .dl, .tile > .tick { margin-top: var(--s1) }
.glyph { width: 40px; height: 40px; border-radius: var(--r-in); display: grid; place-items: center; background: var(--gold-soft); color: var(--gold-ink); flex: none; margin-bottom: var(--s1) }
.glyph svg { width: 24px; height: 24px }

/* ---------- the opening night card: home hero and inner page heads ---------- */
.hero, .phead { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) }
.hero::before, .phead::before { content: ""; position: absolute; z-index: -1; inset: 0 var(--gut-r) 0 var(--gut); border-radius: var(--r-card); background: var(--night); border: 1px solid var(--hair); box-shadow: var(--night-shadow) }
main > .hero, main > .phead { margin-top: var(--s1) }
.hero.w { padding: 0 calc(var(--gut-r) + var(--pad-l)) 0 calc(var(--gut) + var(--pad-l)) }
.hero-t { position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--s2); padding-block: 40px 16px }
.hero-t .ctas, .phead .ctas, .phead .addr { margin-top: var(--s3) }
.hero-t .soon { margin-top: var(--s1) }
.sky { position: relative; display: flex; flex-direction: column; gap: var(--s2); height: 480px; margin-inline: calc(-1 * var(--pad-l)); padding-bottom: var(--s3) }
/* stacked, the sky fades in under the text above it; side by side, the card's own edge frames it */
.sky canvas { flex: 1 1 0; min-height: 0; width: 100%; height: 0; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 64px); mask-image: linear-gradient(to bottom, transparent, #000 64px) }
.sky-leg { flex: none; padding-inline: var(--s3); display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center }
.k { display: inline-flex; align-items: center; gap: 8px }
.k i { width: 8px; height: 8px; display: inline-block; flex: none }
.k .srv { border-radius: 50%; background: var(--ink2) }
.k .end { background: var(--ink2); clip-path: polygon(50% 0, 100% 100%, 0 100%) }
.k .sen { border: 2px solid var(--ink2); border-radius: 2px }
@media (min-width: 1100px) {
  .hero.w { grid-template-columns: minmax(0, min(46%, 560px)) minmax(0, 1fr); gap: var(--s3); min-height: 560px; padding-right: var(--gut-r) }
  .hero-t { padding-block: 64px; justify-content: center }
  .sky { height: auto; margin: 0 }
  .sky-leg { justify-content: flex-end }
  .sky canvas { -webkit-mask-image: radial-gradient(80% 80% at 50% 46%, #000 60%, transparent 100%); mask-image: radial-gradient(80% 80% at 50% 46%, #000 60%, transparent 100%) }
}
@media (min-width: 1600px) { .hero.w { min-height: 640px } }

/* the two ways in: the first screen's second act */
.ways-sec { position: relative; z-index: 2 }
.ways { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3) }
@media (min-width: 900px) { .ways { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
.way { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s2); align-content: start; padding: var(--pad); border: 0 }
/* the card's edge is drawn over its picture, so the night runs to the corner */
.way::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--hair); pointer-events: none }
.way-pic { width: calc(100% + 2 * var(--pad)); aspect-ratio: 600 / 168; margin: calc(-1 * var(--pad)) calc(-1 * var(--pad)) var(--s1); background: var(--night) }
.way-pic svg { width: 100%; height: 100% }
.way-pic line, .way-pic path.l { stroke: var(--link-line) }
.way-pic .dl { stroke: var(--ink3); stroke-dasharray: 2 5; opacity: .6 }
.way-pic .dot { fill: var(--s-ok) } .way-pic .dot.a { fill: var(--s-aff) } .way-pic .dot.u { fill: none; stroke: var(--s-unc); stroke-dasharray: 2 2 }
.way-pic .sen { fill: none; stroke: var(--ink); stroke-width: 2; opacity: .8 }
.way-pic .st { fill: var(--gold) } .way-pic .gl { fill: var(--gold); opacity: .3; filter: blur(24px) }
.chip { display: inline-flex; align-items: center; gap: 8px; align-self: start; justify-self: start; color: var(--gold-ink); background: var(--gold-soft); padding: 8px 16px; border-radius: var(--r-pill) }
.chip i { width: 8px; height: 8px; display: inline-block }
.chip .srv { border-radius: 50%; background: currentColor }
.chip .end { background: currentColor; clip-path: polygon(50% 0, 100% 100%, 0 100%) }
.way p { color: var(--ink2); max-width: 48ch }
.both { margin-top: var(--s3); color: var(--ink3) }

/* ---------- the product on its own stage ---------- */
.stage { position: relative; border-radius: var(--r-panel); padding: var(--pad); background: var(--bg2); border: 1px solid var(--hair) }
@media (min-width: 900px) { .stage { padding: var(--s5) } }
.stage .shot { max-width: 1440px; margin: 0 auto }
.stage .cap { text-align: center; margin-top: var(--s3) }
.feats { display: grid; gap: var(--s3); grid-template-columns: minmax(0, 1fr); margin-top: var(--s3) }
@media (min-width: 680px) { .feats { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (min-width: 1100px) { .feats { grid-template-columns: repeat(4, minmax(0, 1fr)) } }

/* ---------- two routes that join ---------- */
.routes { display: flex; flex-direction: column; gap: var(--s4) }
.rgrp { display: flex; flex-direction: column; gap: var(--s2) }
.rgrp-h { display: flex; align-items: center; gap: 8px; color: var(--gold-ink) }
.rgrp-h i { width: 8px; height: 8px; display: inline-block }
.rgrp-h .srv { border-radius: 50%; background: currentColor }
.rgrp-h .end { background: currentColor; clip-path: polygon(50% 0, 100% 100%, 0 100%) }
.rgrp-h .bth { width: 16px; height: 4px; border-radius: 2px; background: currentColor }
.steps { list-style: none; display: grid; gap: var(--s2); grid-template-columns: minmax(0, 1fr) }
.step { display: flex; flex-direction: column; gap: var(--s1); padding: var(--pad); background: var(--panel2); border-radius: var(--r-in); box-shadow: none; min-width: 0 }
.step .n { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--gold-soft); color: var(--gold-ink); font-size: 16px; line-height: 1; font-weight: 600; margin-bottom: var(--s1) }
.step p { color: var(--ink2) }
.merge { display: none }
@media (min-width: 680px) { .rgrp.srv-r .steps, .rgrp.end-r .steps { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (min-width: 1100px) {
  .routes { display: grid; grid-template-columns: minmax(0, 1.2fr) 96px minmax(0, 1fr); grid-template-rows: auto auto; gap: var(--s4) 0; align-items: start }
  .rgrp.srv-r { grid-column: 1; grid-row: 1 } .rgrp.end-r { grid-column: 1; grid-row: 2 }
  .rgrp.bth-r { grid-column: 3; grid-row: 1 / span 2 }
  .merge { display: block; grid-column: 2; grid-row: 1 / span 2; width: 100%; height: 100%; padding-inline: var(--s1); color: var(--gold-ink) }
}

/* ---------- product card band, outcomes, two-way cards ---------- */
.pcard { display: grid; gap: var(--s3) var(--s4); grid-template-columns: minmax(0, 1fr) }
@media (min-width: 1000px) { .pcard { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) auto; align-items: center } }
.pname { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap }
.pname b { font-size: clamp(24px, 2.6vw, 28px); font-weight: 600; letter-spacing: -.025em; line-height: 1.2; color: var(--ink) }
.star { width: 24px; height: 24px; fill: var(--gold-ink); flex: none }
.pways { display: flex; flex-direction: column; gap: var(--s2) }
.pways div { display: flex; gap: 16px; align-items: baseline; color: var(--ink2) }
.pways b { color: var(--ink); font-weight: 600 }
.pways i { flex: none; width: 8px; height: 8px; display: inline-block; background: var(--gold-ink); transform: translateY(-1px) }
.pways .srv { border-radius: 50% }
.pways .end { clip-path: polygon(50% 0, 100% 100%, 0 100%) }
.plinks { display: flex; flex-direction: column; gap: var(--s1); align-items: flex-start }

.outs { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3) }
@media (min-width: 700px) { .outs { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (min-width: 1100px) { .outs { grid-template-columns: repeat(5, minmax(0, 1fr)) } }
.outs li { padding: var(--pad); display: flex; flex-direction: column; gap: var(--s2); min-width: 0 }
.outs p { color: var(--ink2) }
.oc { display: inline-flex; align-items: center; gap: 8px; font-size: 18px; line-height: 1.35; letter-spacing: -.01em; font-weight: 600; color: var(--ink) }
.oc::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--s-ok); flex: none }
.oc.aff::before { border-radius: 2px; transform: rotate(45deg); background: var(--s-aff) }
.oc.inc::before { background: linear-gradient(90deg, var(--s-inc) 50%, transparent 50%); box-shadow: inset 0 0 0 2px var(--s-inc) }
.oc.unc::before { background: transparent; border: 2px dashed var(--s-unc) }
.oc.na::before { border-radius: 2px; height: 4px; background: var(--ink2) }

.duo { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3) }
@media (min-width: 900px) { .duo { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
.duo ul, .tick { list-style: none; display: flex; flex-direction: column; gap: var(--s1) }
.duo li, .tick li { color: var(--ink2); padding-left: 16px; position: relative }
.duo li::before, .tick li::before { content: ""; position: absolute; left: 0; top: .65em; width: 6px; height: 6px; border-radius: 50%; background: var(--gold-ink) }
.req { margin-top: var(--s3) }
.cap.req { max-width: 88ch }

.grid3 { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3) }
@media (min-width: 760px) { .grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (min-width: 1100px) { .grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)) } }

.launch-p { display: grid; gap: var(--s4); grid-template-columns: minmax(0, 1fr) }
@media (min-width: 1100px) { .launch-p { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: end } }
.launch-p .addr { margin-top: var(--s1) }

/* trust panel */
.trust { display: grid; gap: var(--s3) var(--s4); grid-template-columns: minmax(0, 1fr) }
@media (min-width: 1100px) { .trust { grid-template-columns: minmax(0, .9fr) repeat(3, minmax(0, 1fr)); align-items: start } }
.trust .it { display: flex; flex-direction: column; gap: var(--s1) }
.trust .it p { color: var(--ink2) }

/* the closing field: the night again */
.field { background: var(--night); border: 1px solid var(--hair); border-radius: var(--r-panel); padding: var(--s4) var(--pad); display: grid; gap: var(--s3) var(--s5); grid-template-columns: minmax(0, 1fr); align-items: end; box-shadow: var(--night-shadow) }
@media (min-width: 1000px) { .field { padding: var(--s5); grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) } }
.field p { color: var(--ink2) }

/* ---------- inner page head, with the quiet constellation ---------- */
.phead { gap: var(--s4) }
.phead.w { padding: 40px calc(var(--gut-r) + var(--pad-l)) 40px calc(var(--gut) + var(--pad-l)) }
.phead .txt { display: flex; flex-direction: column; gap: var(--s2); min-width: 0 }
.qc { display: none; width: 100%; max-width: 800px; height: 100%; max-height: 320px; justify-self: end }
.qc line { stroke: var(--link-line); stroke-width: 1 }
.qc circle { fill: var(--pt) }
.qc .gl { fill: var(--gold); opacity: .3; filter: blur(24px) }
.qc .st { fill: var(--gold) }
@media (min-width: 1000px) { .phead.w { grid-template-columns: minmax(0, 640px) minmax(0, 1fr); align-items: center; padding-block: 64px } .qc { display: block; min-height: 240px } }
.crumb { color: var(--ink3) }
.crumb a { color: var(--ink2); text-decoration: underline; text-decoration-color: var(--gold-ink); text-decoration-thickness: 2px; text-underline-offset: 4px; border-radius: var(--r-sm); transition: color var(--t) } .crumb a:hover { color: var(--gold-ink) }

/* ---------- contact, legal ---------- */
.addr { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; padding: 8px 8px 8px 24px; max-width: 480px; border-radius: var(--r-pill); align-self: flex-start; width: 100% }
.addr .mono { color: var(--ink); user-select: all; overflow-wrap: anywhere }
.addr .btn { margin-left: auto; min-height: 40px; padding: 0 16px }
.dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 24px }
.dl dt { color: var(--ink3) }
.dl dd { margin: 0; color: var(--ink); overflow-wrap: anywhere }
.code { font-family: var(--sans); font-weight: 400; font-size: 16px; line-height: 1.65; background: var(--panel2); border: 1px solid var(--hair); border-radius: var(--r-in); padding: var(--pad); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); margin: 0 }
.draft { display: flex; gap: 0 var(--s2); align-items: center; flex-wrap: wrap; padding: 8px 16px; border-radius: var(--r-in); color: var(--ink2); background: var(--gold-soft); align-self: flex-start; margin-top: var(--s1) }
.draft b { color: var(--gold-ink); white-space: nowrap }
.legal { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3) }
@media (min-width: 900px) { .legal { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
.legal section { padding: var(--pad); display: flex; flex-direction: column; gap: var(--s1); min-width: 0 }
.legal p, .legal li { color: var(--ink2); max-width: 68ch }
@media (min-width: 1600px) { .legal { grid-template-columns: repeat(4, minmax(0, 1fr)) } }
.legal ul { list-style: none; display: flex; flex-direction: column; gap: var(--s1) }
.legal li { padding-left: 16px; position: relative }
.legal li::before { content: ""; position: absolute; left: 0; top: .65em; width: 6px; height: 6px; border-radius: 50%; background: var(--gold-ink) }
.ph { color: var(--gold-ink); background: var(--gold-soft); font-family: var(--sans); font-size: 16px; border-radius: var(--r-sm); -webkit-box-decoration-break: clone; box-decoration-break: clone }

/* ---------- footer ---------- */
.ft { background: var(--bg2); padding-block: var(--s6) var(--s4); margin-top: var(--sec) }
.ft.w { max-width: none; padding-left: max(var(--gut), calc((100% - var(--max)) / 2)); padding-right: max(var(--gut-r), calc((100% - var(--max)) / 2)) }
.ft-g { display: grid; gap: var(--s4) var(--s3); grid-template-columns: repeat(2, minmax(0, 1fr)) }
.ft-g > div { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s1); min-width: 0 }
.ft-g .first, .ft-g .co { grid-column: 1 / -1 }
.ft h2 { color: var(--ink3); margin-bottom: var(--s1) }
.ft a { color: var(--ink2); text-decoration: none; border-radius: var(--r-sm); transition: color var(--t) }
.ft a:not(.wm):hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold-ink); text-decoration-thickness: 2px; text-underline-offset: 4px }
.ft .wm { color: var(--ink) } .ft .wm:hover { color: var(--gold-ink) }
.ft .first p { color: var(--ink2); max-width: 30ch }
.ft .co p { color: var(--ink3); max-width: 72ch }
.ft .co b { color: var(--ink2); font-weight: 600 }
.ft-b { margin-top: var(--s5); display: flex; flex-wrap: wrap; gap: 8px 24px; color: var(--ink3); font-size: 12px; line-height: 1.5; letter-spacing: .01em }
@media (min-width: 900px) { .ft-g { grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, .8fr)) } .ft-g .first { grid-column: auto } }
@media (min-width: 1500px) { .ft-g { grid-template-columns: minmax(0, 1.2fr) repeat(4, minmax(0, .7fr)) minmax(0, 1.8fr) } .ft-g .co { grid-column: auto } }

/* the floating notes tab */
a.pv-tab { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: max(16px, env(safe-area-inset-bottom, 0px)); z-index: 60; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: var(--r-pill); background: var(--ink); color: var(--bg); font: 600 12px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; box-shadow: var(--shadow-up); transition: transform var(--t), box-shadow var(--t) }
a.pv-tab::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gold) }
a.pv-tab:hover { transform: translateY(-2px) }

/* ---------- the product's own picture: navy, as the product looks ---------- */
.prod { --g0: #081437; --ps: #0F1D47; --ps2: #172A5C; --pl: #243665; --pm: #BECBE6;
  container-type: inline-size; container-name: prod; background: var(--ps); border: 1px solid var(--pl); border-radius: var(--r-card); color: #fff; font-family: var(--sans); font-size: 16px; line-height: 1.5; overflow: hidden; min-width: 0;
  box-shadow: 0 2px 4px rgba(8, 20, 55, .12), 0 24px 48px -16px rgba(8, 20, 55, .45) }
.prod-top { display: flex; align-items: center; gap: 8px; padding: 16px 24px; background: #030A23; border-bottom: 1px solid var(--pl); color: var(--pm) }
.prod-top svg { width: 16px; height: 16px; fill: #FFD15C }
.prod-top b { color: #fff; font-weight: 600 }
.prod-top .dots { margin-left: auto; display: flex; gap: 8px } .prod-top .dots i { width: 8px; height: 8px; border-radius: 50%; background: #243665 }
.prod-h { padding: 24px 24px 16px; display: flex; flex-direction: column; gap: 8px }
.prod-h .peb, .prod th, .kind { font-size: 12px; line-height: 1.35; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--pm) }
.prod-h .pt { font-size: 18px; line-height: 1.35; letter-spacing: -.01em; font-weight: 600 }
.prod .m { font-family: var(--sans); font-size: inherit; font-weight: inherit }
.prod table { width: 100%; border-collapse: collapse }
.prod th { text-align: left; padding: 8px 16px; background: var(--ps2); border-block: 1px solid var(--pl); white-space: nowrap }
.prod td { padding: 16px; border-bottom: 1px solid var(--pl); color: var(--pm); vertical-align: top }
.prod th:first-child, .prod td:first-child { padding-left: 24px }
.prod tr:last-child td { border-bottom: 0 }
.prod .host { color: #fff; font-weight: 600; display: flex; flex-direction: column; white-space: nowrap }
.prod .host span { font-weight: 400; color: var(--pm); font-size: 12px }
.prod .rs2 { display: block; font-size: 12px; margin-top: 8px; color: #fff }
.prod .cw, .prod .cx { display: none }
.prod td.m { white-space: nowrap }
@container prod (min-width: 520px) { .prod .cw { display: table-cell } .prod .rs2 { display: none } }
@container prod (min-width: 760px) { .prod .cx { display: table-cell } }
.prod .ev { padding: 16px 24px; background: var(--g0); border-top: 1px solid var(--pl); display: flex; flex-direction: column; gap: 8px }
.prod .ev .m { color: #fff; overflow-wrap: anywhere } .prod .ev .m.d { color: var(--pm) }
.vc { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; line-height: 24px; font-weight: 600; padding: 0 16px 0 8px; border-radius: var(--r-pill); border: 1px solid var(--pl); background: var(--ps2); color: #fff; white-space: nowrap }
.vc::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #6FD8A3; flex: none }
.vc.aff { color: #FFB48F; background: #2C2846; border-color: #744443 } .vc.aff::before { border-radius: 2px; transform: rotate(45deg); background: #FF7A3D }
.vc.unc { background: transparent; border-style: dashed; border-color: #BAC2D0; color: var(--pm) } .vc.unc::before { background: transparent; border: 2px dashed #BAC2D0 }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important } .btn:hover, .theme:hover, .menu summary:hover, .tile:hover, .way:hover, .outs li:hover, .step:hover, a.pv-tab:hover { transform: none } }

/* ===== Version 3: the owner's sketch, finished below the first screen (11 Nov 2026). Loaded after sketch.css. =====
   The first screen is the sketch's, untouched here except the parts the owner decided (the sentence under the map and the
   status marks in its legend). Below it:
   - ONE left edge: every heading and every block starts at the page gutter.
   - ONE section pattern: the section's label and heading above, its content below, on a 12-column grid. The two night cards
     (the opening hero and the closing launch card) bracket the page and are the only places a heading sits inside a card.
   - ONE vertical rhythm: the same space before every section.
   - Ruled rows and columns instead of boxes in boxes; no icon squares.
   - Evidence (versions, paths) in a mono again: JetBrains Mono, the product's own. */

@font-face { font-family: 'JetBrains Mono'; src: url('fonts/jbmono-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap }
:root { --mono: 'JetBrains Mono', ui-monospace, Consolas, monospace; --sec: 96px }
@media (min-width: 1100px) { :root { --sec: 96px } }
@media (max-width: 759px) { :root { --sec: 64px } }

/* ---------- the owner's decided additions to the first screen (each removable on its own) ---------- */
/* 1. the sentence under the map */
.map-note { padding-inline: var(--s3); color: var(--ink2); font-size: 14px; line-height: 1.5; max-width: 72ch }
@media (min-width: 1100px) { .map-note { align-self: flex-end; text-align: right } }
/* 2. the status marks in the map's legend, after the three shapes */
.k.st i { border-radius: 50% } .k.st .aff { background: var(--s-aff) } .k.st .ok { background: var(--s-ok) } .k.st .unc { background: transparent; border: 1.5px dashed var(--s-unc) }

/* ---------- the grid every lower section sits on ---------- */
.g12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s3) }
.g12 > * { min-width: 0 }
@media (max-width: 759px) { .g12 { grid-template-columns: minmax(0, 1fr) } .g12 > * { grid-column: 1 / -1 !important } }
.lower .sec-h { max-width: none; margin-bottom: var(--s4) }
.lower .rule { border-top: 1px solid var(--hair2) }

/* ---------- Arcturiq: the product picture at full width, no outer box; then the features, three leading ---------- */
.lower .shot { display: flex; flex-direction: column; gap: var(--s2) }
.lower .shot .cap { text-align: left; margin: 0 }
.prod .m { font-family: var(--mono); font-size: 14px; font-weight: 500; letter-spacing: 0 }
.prod .ev .m { font-size: 14px }
.lead3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s3); margin-top: var(--s5) }
.lead3 .feat { border-top: 2px solid var(--gold-ink); padding-top: var(--s3); display: flex; flex-direction: column; gap: var(--s1) }
.lead3 .h3 { font-size: clamp(20px, 1.5vw, 24px); letter-spacing: -.02em }
.lead3 p { color: var(--ink2); font-size: 16px; max-width: 46ch }
.rest5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--s3); margin-top: var(--s4) }
.rest5 .feat { border-top: 1px solid var(--hair2); padding-top: var(--s2); display: flex; flex-direction: column; gap: 4px }
.rest5 .h3 { font-size: 16px } .rest5 p { color: var(--ink2); font-size: 14px; line-height: 1.6 }
@media (max-width: 1099px) { .rest5 { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--s3) } }
@media (max-width: 759px) { .lead3, .rest5 { grid-template-columns: minmax(0, 1fr); row-gap: var(--s3) } }

/* ---------- Launch: the closing night card, its text on the same inset as the opening card's ---------- */
.lower .field { padding: var(--s5) var(--pad-l); grid-template-columns: minmax(0, 1fr); gap: var(--s3); align-items: start }
@media (min-width: 1000px) { .lower .field { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: end; column-gap: var(--s5) } }
@media (max-width: 999px) { .lower .field { padding: var(--s4) var(--pad) } }
.lower .field .h2 { color: var(--ink) }

/* ---------- the footer meets the bottom of the window ---------- */
body { min-height: 100vh; display: flex; flex-direction: column } main { flex: 1 0 auto }

/* ---------- the footer: from 900 to 1499 wide, the link columns spread so the last one meets the right edge ---------- */
@media (min-width: 900px) and (max-width: 1499px) { .ft-g { grid-template-columns: minmax(0, 1.4fr) repeat(4, max-content); justify-content: space-between; column-gap: var(--s5) } }

/* ---------- crispness: text and interface in HINTED static cuts of the same Inter (optical size 16, weights 400 and 600);
   headings keep the sketch's variable Inter with its optical sizes, so they look exactly as the sketch has them ---------- */
@font-face { font-family: 'Inter Text'; src: url('fonts/inter-text-400.woff2') format('woff2'); font-weight: 300 499; font-style: normal; font-display: swap }
@font-face { font-family: 'Inter Text'; src: url('fonts/inter-text-600.woff2') format('woff2'); font-weight: 500 800; font-style: normal; font-display: swap }
:root { --sans: 'Inter Text', 'Inter', 'Inter Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif }
h1, .h1, h2, .h2, .pname b, .lead3 .h3 { font-family: 'Inter', 'Inter Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif }

/* ===== 12 Nov, the owner's decisions: How it works as one night panel (treatment B) ===== */
/* How it works, treatment B (12 Nov sketch, second pass): the "two ways in" cards fold into this section, which moves up to sit
   right under the map. One NIGHT panel carries on the first screen: a drawing in the map's language (a sensor's solid links to
   its servers, top left; endpoints' dashed reports, below; the sensor's line runs ABOVE the endpoints, never to them), both reaching
   3, the star at 4 (Arcturiq decides), 5, and the line landing on the decision.
   Under the drawing, THREE columns at body size (By sensor, By agent, Both), each under its part of the drawing, each step
   with the same mark the drawing uses (rings; the star for 4). No panel shadow (over 24 px blur turns ClearType off). */
.nightp {
  --ink: #F3F5FA; --ink2: #C3C9D8; --ink3: #939BB0; --em: #FFD15C; --gold-ink: #FFD15C; --gold-soft: rgba(255, 209, 92, .14);
  --hair: rgba(243, 245, 250, .10); --hair2: rgba(243, 245, 250, .2); --s-aff: #FF7A3D; --s-ok: #6FD8A3; --s-unc: #BAC2D0; --link-line: rgba(243, 245, 250, .16);
  color: var(--ink2); color-scheme: dark;
  background: var(--night); border: 1px solid var(--hair); border-radius: var(--r-panel); padding: var(--s4) var(--pad);
  display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--s4) }
.nightp .h3 { color: var(--ink) }

/* the drawing */
.np-draw svg { display: block; width: 100%; height: auto; overflow: visible }
.np-draw .dw, .np-draw .dx { display: none }
.np-draw .dn { max-width: 360px; margin-inline: auto }
.np-draw .sp line { stroke: var(--link-line); stroke-width: 1.2 }
.np-draw .la, .np-draw .tk { fill: none; stroke: var(--ink3); stroke-width: 1.4 }
.np-draw .lb line { stroke: var(--ink3); stroke-width: 1.2; stroke-dasharray: 2 5; opacity: .8 }
.np-draw .dot { fill: var(--s-ok) } .np-draw .dot.a { fill: var(--s-aff) } .np-draw .dot.u { fill: none; stroke: var(--s-unc); stroke-dasharray: 2 2 }
.np-draw .sen { fill: var(--night); stroke: var(--ink); stroke-width: 2 }
.np-draw .mk { fill: var(--night); stroke: var(--gold-ink); stroke-width: 1.4 }
.np-draw text { fill: var(--gold-ink); font: 600 15px var(--sans); text-anchor: middle }
.np-draw .st { fill: var(--gold) } .np-draw .gl { fill: var(--gold); opacity: .28; filter: blur(22px) }

/* the words: three columns, body size; a step's mark beside it, the same mark as in the drawing */
.np-text { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5) var(--s4) }
.nightp .lh { display: flex; align-items: center; gap: 8px; margin: 0 0 var(--s1); color: var(--gold-ink); font-size: 12px; line-height: 20px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600 }
.nightp .lh i { width: 8px; height: 8px; display: inline-block; background: currentColor }
.nightp .lh .srv { border-radius: 50% } .nightp .lh .end { clip-path: polygon(50% 0, 100% 100%, 0 100%) } .nightp .lh .bth { width: 16px; height: 4px; border-radius: 2px }
.nightp .lw { color: var(--ink); font-size: 20px; line-height: 1.3; font-weight: 600; letter-spacing: -.015em; margin: 0 0 var(--s4) }
.nightp .col ol { list-style: none; margin: 0; padding: 0; display: grid; row-gap: var(--s4) }
.nightp .col li { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; padding-left: 48px }
.nightp .col li .h3 { font-size: 18px; line-height: 32px }
.nightp .col li p { color: var(--ink2); font-size: 17px; line-height: 1.6; max-width: 56ch }
.nightp .mk2 { position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1.4px var(--gold-ink); color: var(--gold-ink); font-size: 14px; font-weight: 600 }
.nightp .mk2.sx { box-shadow: none } .nightp .mk2.sx svg { width: 26px; height: 26px; fill: var(--gold) }
.nightp .vd { margin: 0 }

@media (min-width: 760px) {
  .nightp { padding: var(--s5) var(--pad-l) }
  .np-draw .dn { display: none } .np-draw .dw { display: block }
  .np-text { grid-template-columns: repeat(2, minmax(0, 1fr)) } .nightp .ct { grid-column: 1 / -1 }
  .nightp .lw { min-height: calc(2em * 1.3) }   /* two lines held for each column's title, so the steps start level */
}
@media (min-width: 1100px) {
  /* the three columns sit under their thirds of the drawing: servers, endpoints, then 3, the star and 5 */
  .np-text { grid-template-columns: repeat(3, minmax(0, 1fr)) } .nightp .ct { grid-column: auto }
}
/* wide: the drawing spans the panel; after 5 the line runs on, turns down, and lands on the decision beside the words */
@media (min-width: 1600px) {
  .nightp { grid-template-columns: 76% 24%; column-gap: 0 }
  .np-draw { grid-column: 1 / -1; grid-row: 1 } .np-draw .dw { display: none } .np-draw .dx { display: block }
  .np-text { grid-column: 1; grid-row: 2; padding-right: var(--s4) } .nightp .vd { grid-column: 2; grid-row: 2; align-self: start; position: relative }
  .nightp .vd::before { content: ""; position: absolute; left: 50%; top: calc(-1 * var(--s4)); height: var(--s4); border-left: 1.4px solid var(--ink3) }
  .nightp .vd::after { content: ""; position: absolute; z-index: 2; left: calc(50% - 4px); top: -4px; width: 9px; height: 9px; border-radius: 50%; background: var(--gold-ink) }
}

/* ===== 12 Nov: Security with its evidence, and the Launch close ===== */
/* Lower sections (12 Nov sketch).
   Products: one plate on one line (name, sentence, links); the two-ways list leaves (said twice above); plain links, so the launch
   card's is the page's only gold button.
   Security: three columns, each ending in the real line a visitor or a tool can fetch (security.txt fields; the site's own
   Content-Security-Policy header).
   Launch: the heading and its sentence together on the left, the button on the right on the same line, the star of the first
   screen at the close. */

.chk { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4) var(--s3) }
.chk .ck { display: flex; flex-direction: column; gap: var(--s1); border-top: 2px solid var(--gold-ink); padding-top: var(--s3); min-width: 0 }
.chk .ck .h3 { font-size: clamp(20px, 1.5vw, 24px); letter-spacing: -.02em }
.chk .ck p { color: var(--ink2); max-width: 46ch }
.chk .evl { display: block; margin-top: auto; padding: 10px 14px; background: var(--bg2); border: 1px solid var(--hair); border-radius: var(--r-sm); font-family: var(--mono); font-size: 13px; line-height: 1.5; color: var(--ink); overflow-wrap: anywhere }
.chk .ck p + .evl { margin-top: var(--s2) }
@media (min-width: 900px) { .chk { grid-template-columns: repeat(3, minmax(0, 1fr)) } .chk .ck p { flex: 1 0 auto } }

.lower .field.close { position: relative; overflow: hidden }
.field.close .cstar { position: absolute; top: 50%; right: 6%; width: 320px; height: 320px; transform: translateY(-50%); pointer-events: none }
.field.close .cstar .gl { fill: var(--gold); opacity: .3; filter: blur(30px) } .field.close .cstar .st { fill: var(--gold) }
.field.close .stack { position: relative; gap: var(--s2) }
.field.close .stack p { color: var(--ink2); max-width: 56ch }
.field.close .ctas { position: relative }
@media (min-width: 1000px) {
  .lower .field.close { grid-template-columns: minmax(0, 1fr); align-items: start; row-gap: var(--s4); padding-block: var(--s5); padding-right: 400px }
}
@media (max-width: 999px) { .field.close .cstar { width: 160px; height: 160px; top: -20px; right: -8px; transform: none } .lower .field.close { padding-top: 112px } }

/* the candidate: body text at 17 px (coordinator, 11 Nov 23:07, for the owner to confirm; 16 px was the sketch) */
body { font-size: 17px } .lead3 p { font-size: 17px }