/* PrivateOps site: base styles (desktop-first). Size sheets override this. */
/* nav */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .6s; background: rgba(7,7,7,.82); backdrop-filter: blur(14px); border-bottom: 1px solid var(--rule); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--white); font: 400 1.65rem/1 var(--serif); letter-spacing: -.01em; }
.brand svg { width: 36px; height: 36px; }
.nav ul { display: flex; gap: 30px; list-style: none; margin: 0; padding: 0; }
.nav ul a { text-decoration: none; font: 500 .75rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--smoke); padding: 14px 0; transition: color .15s; }
.nav ul a:hover { color: var(--white); }
.nav .btn { padding: 12px 18px; min-height: 44px; }

/* hero */
.hero { padding-block: clamp(56px, 10vw, 140px) clamp(48px, 7vw, 96px); }
.hero > .label { display: flex; gap: 14px; align-items: center; margin-bottom: clamp(24px, 4vw, 48px); }
.hero > .label::before { content: ""; width: 40px; height: 1px; background: var(--gold); }
.hero .lede { margin: clamp(24px, 3vw, 40px) 0 0; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-price { margin: 20px 0 0; font: 500 .8125rem/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fog); }

/* approval console (the hero does the thing) */
.console { margin-top: clamp(48px, 7vw, 96px); border: 1px solid var(--rule); background: var(--carbon); }
.console-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--rule); }
.console-bar .tag { color: var(--void); background: var(--chalk); padding: 4px 8px; font: 500 .6875rem/1 var(--mono); letter-spacing: .14em; }
.console-tools { display: flex; align-items: center; gap: 18px; }
.toggle { appearance: none; background: none; border: 0; color: var(--fog); font: 500 .75rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; padding: 15px 0; }
.toggle .track { width: 34px; height: 18px; border: 1px solid var(--ash); position: relative; transition: border-color .2s; }
.toggle .track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; background: var(--smoke); transition: transform .2s, background .2s; }
.toggle[aria-pressed="true"] .track { border-color: var(--white); }
.toggle[aria-pressed="true"] .track::after { transform: translateX(16px); background: var(--white); }
.toggle:hover { color: var(--white); }

.queue { list-style: none; margin: 0; padding: 0; }
.item { display: grid; grid-template-columns: 56px minmax(0,1fr) auto; gap: 8px 24px; align-items: start; padding: 24px 20px; border-bottom: 1px solid var(--rule); transition: background .25s; }
.item:last-child { border-bottom: 0; }
.item .n { font: 400 2rem/1 var(--serif); color: var(--ash); }
.item .meta { margin: 0 0 8px; }
.item .msg { margin: 0; color: var(--chalk); font-size: 1.125rem; line-height: 1.5; max-width: 60ch; }
.item .why { margin: 10px 0 0; color: var(--smoke); font-size: .9375rem; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.actions .btn { padding: 11px 16px; min-height: 44px; font-size: .875rem; }
.item[data-state="sent"] { background: var(--ink); }
.item[data-state="sent"] .msg { color: var(--smoke); }
.item[data-state="sent"] .n { color: var(--white); }
.item[data-state="skipped"] .msg { color: var(--ash); text-decoration: line-through; text-decoration-color: var(--steel); }
.stamp { font: 500 .75rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--white); padding: 12px 0; }
.stamp.muted { color: var(--smoke); }
.empty { padding: 56px 20px; text-align: center; }
.empty p { margin: 0 0 20px; font: 400 clamp(1.6rem, 3vw, 2.4rem)/1.1 var(--serif); color: var(--white); }
.console-foot { padding: 14px 20px; border-top: 1px solid var(--rule); color: var(--smoke); font-size: .875rem; }

/* sections */
section { padding: clamp(72px, 10vw, 150px) 0; }
.sec-head { display: grid; grid-template-columns: 1fr 2fr; gap: 24px 48px; margin-bottom: clamp(40px, 6vw, 80px); align-items: end; }
.sec-head p { margin: 0; max-width: 44ch; }

/* principles ledger */
.ledger { border-top: 1px solid var(--rule); }
.row { display: grid; grid-template-columns: 90px minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px 40px; padding: clamp(28px, 4vw, 52px) 0; border-bottom: 1px solid var(--rule); align-items: baseline; transition: background .2s; }
.row:hover { background: linear-gradient(90deg, var(--ink), transparent 70%); }
.row .i { font: 500 .8125rem/1 var(--mono); color: var(--smoke); letter-spacing: .1em; }
.row h3 { font: 400 clamp(1.8rem, 3.4vw, 2.9rem)/1.02 var(--serif); letter-spacing: -.015em; color: var(--white); margin: 0; }
.row p { margin: 0; max-width: 46ch; }

/* build list */
.builds { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.build { background: var(--void); padding: 32px 28px 36px; min-height: 240px; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; transition: background .2s; }
.build:hover { background: var(--ink); }
.build:nth-child(1) { grid-column: span 7; }
.build:nth-child(2) { grid-column: span 5; }
.build:nth-child(3) { grid-column: span 4; }
.build:nth-child(4) { grid-column: span 4; }
.build:nth-child(5) { grid-column: span 4; }
.build h3 { font: 400 clamp(1.6rem, 2.4vw, 2.2rem)/1.05 var(--serif); color: var(--white); margin: 12px 0 0; }
.build p { margin: 0; color: var(--fog); max-width: 40ch; }

/* process */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 0; position: relative; counter-reset: s; }
.steps li { padding: 0 28px 0 0; position: relative; }
.steps li::before { content: ""; display: block; height: 1px; background: var(--steel); margin-bottom: 28px; }
.steps li::after { content: ""; position: absolute; top: -4px; left: 0; width: 9px; height: 9px; background: var(--white); }
.steps h3 { font: 400 1.9rem/1.05 var(--serif); color: var(--white); margin: 10px 0 12px; }
.steps p { margin: 0; font-size: 1rem; }

/* inverted: who */
.paper { background: var(--paper); color: #2b2b2b; }
.paper .label { color: #5a5a5a; }
.paper .grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 48px 80px; align-items: end; }
.paper blockquote { margin: 0; font: 400 clamp(2rem, 4.6vw, 4rem)/1.04 var(--serif); letter-spacing: -.02em; color: var(--void); }
.paper p { margin: 0 0 16px; color: #2b2b2b; max-width: 42ch; }
.paper .rules { margin: 28px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--mist); }
.paper .rules li { padding: 14px 0; border-bottom: 1px solid var(--mist); display: flex; justify-content: space-between; gap: 16px; font-size: .9375rem; }
.paper .rules span:first-child { font: 500 .75rem/1.6 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #5a5a5a; }

/* contact */
.contact { text-align: left; }
.contact a.big { display: inline-block; margin-top: 28px; font: 400 clamp(2rem, 6.4vw, 6rem)/1 var(--serif); color: var(--white); text-decoration: none; letter-spacing: -.02em; border-bottom: 1px solid var(--steel); padding-bottom: 8px; transition: border-color .2s; overflow-wrap: anywhere; }
.contact a.big:hover { border-color: var(--white); }

footer { border-top: 1px solid var(--rule); padding: 36px 0 56px; color: var(--smoke); font-size: .875rem; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 16px 40px; justify-content: space-between; align-items: center; }
footer a { color: var(--fog); }

/* anchors land below the sticky nav */
section { scroll-margin-top: 68px; }

/* ---------- tile visuals (decorative, example data) ---------- */
.viz { margin: 0; color: var(--fog); font: 500 .8125rem/1.4 var(--mono); }
.receipt { display: grid; grid-template-columns: 1fr auto; gap: 6px 24px; max-width: 320px; padding: 16px 18px; border: 1px dashed var(--ash); background: var(--carbon); text-transform: uppercase; letter-spacing: .06em; }
.receipt span:nth-child(even) { text-align: right; }
.receipt b { color: var(--white); padding-top: 8px; border-top: 1px solid var(--steel); font-weight: 500; }
.receipt b:last-child { text-align: right; }
.bars { max-width: 360px; }
.bars .cols { display: flex; align-items: flex-end; gap: 8px; height: 84px; border-bottom: 1px solid var(--steel); }
.bars .cols i { flex: 1; background: var(--steel); display: block; }
.bars .cols i.hi { background: var(--white); }
.bars figcaption { display: flex; gap: 8px; margin-top: 8px; font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--smoke); }
.bars figcaption span { flex: 1; }
.bars figcaption b { flex: 1.4; text-align: right; color: var(--white); font-weight: 500; white-space: nowrap; }
.pin { display: flex; align-items: center; gap: 10px; }
.pin i { width: 18px; height: 18px; border: 1px solid var(--ash); display: block; }
.pin i.on { background: var(--white); border-color: var(--white); }
.pin span { margin-left: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--smoke); }
.draft { display: grid; gap: 10px; max-width: 320px; position: relative; padding-right: 72px; }
.draft .ln { display: block; height: 10px; background: var(--steel); }
.draft .ln.short { width: 60%; background: var(--white); }
.draft .held { position: absolute; right: 0; top: -2px; padding: 4px 8px; border: 1px solid var(--white); color: var(--white); text-transform: uppercase; letter-spacing: .14em; font-size: .6875rem; }
.stock { display: grid; gap: 8px; text-transform: uppercase; letter-spacing: .08em; }
.stock span:first-child { color: var(--white); }
.stock span:last-child { color: var(--smoke); }

/* ---------- redaction band ---------- */
.band { padding: clamp(80px, 12vw, 180px) 0; border-block: 1px solid var(--rule); background: var(--carbon); }
.statement { margin: 0 0 28px; font: 400 clamp(2.4rem, 7.4vw, 7.2rem)/.98 var(--serif); letter-spacing: -.025em; color: var(--white); max-width: 17ch; }
.rw { appearance: none; border: 0; border-radius: 0; font: inherit; letter-spacing: inherit; cursor: pointer; padding: 0 .1em; margin: 0 -.02em; color: transparent; background: var(--white); transition: background .3s, color .3s; }
.rw:hover { background: var(--mist); }
.rw[aria-pressed="true"] { color: var(--white); background: transparent; box-shadow: inset 0 -.06em 0 var(--white); }
.rw:focus-visible { outline: 2px solid var(--white); outline-offset: 4px; }

.display .dim { color: var(--smoke); }

/* ================= v3: the room, builds walkthrough, the door ================= */

/* the room diagram (hero visual) */
.room { margin: clamp(40px, 5vw, 72px) 0 0; }
.room svg { display: block; width: 100%; height: auto; border: 1px solid var(--rule); background: var(--carbon); }
.room figcaption { margin-top: 14px; }
.room .t-mono { font: 500 11px var(--mono); letter-spacing: .14em; fill: var(--smoke); text-transform: uppercase; }
.room .t-mono.hl { fill: var(--white); }
.room .t-sm { font: 500 15px var(--sans); fill: var(--fog); }
.room .t-big { font: 400 27px var(--serif); fill: var(--white); letter-spacing: -.01em; }
.room .o-box { fill: none; stroke: var(--ash); stroke-width: 1; }
.room .o-line { fill: none; stroke: var(--steel); stroke-width: 1; }
.room .o-line.dash { stroke: var(--ash); stroke-dasharray: 4 5; }
.room .wall { fill: var(--white); }
.room .gate { fill: var(--carbon); stroke: var(--white); stroke-width: 1; }
.room .room-box { fill: none; stroke: var(--rule); stroke-width: 1; }
.room .links path { stroke: var(--steel); stroke-width: 1; fill: none; }
.room .node rect { fill: var(--white); }
.room .packet { fill: var(--white); animation: packet 6s ease-in-out infinite; }
@keyframes packet {
  0%, 8% { transform: translateX(0); opacity: 0; }
  14% { opacity: 1; }
  60%, 88% { transform: translateX(98px); opacity: 1; }
  100% { transform: translateX(98px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .room .packet { animation: none; transform: translateX(98px); } }

/* walkthrough window */
.walk { border: 1px solid var(--steel); background: var(--carbon); }
.walk-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--rule); }
.walk-bar i { width: 9px; height: 9px; border: 1px solid var(--ash); display: block; }
.walk-bar span { margin-left: 10px; font: 500 .75rem/1 var(--mono); color: var(--smoke); letter-spacing: .06em; flex: 1; }
.walk-bar .tag { color: var(--void); background: var(--chalk); padding: 4px 8px; font: 500 .6875rem/1 var(--mono); letter-spacing: .14em; }
.walk-tabs { display: flex; border-bottom: 1px solid var(--rule); }
.walk-tabs button { appearance: none; background: none; border: 0; border-right: 1px solid var(--rule); color: var(--smoke); font: 500 .75rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; padding: 18px 26px; min-height: 48px; cursor: pointer; transition: color .15s, background .15s; }
.walk-tabs button:hover { color: var(--white); background: var(--ink); }
.walk-tabs button[aria-selected="true"] { color: var(--void); background: var(--white); box-shadow: inset 0 -3px 0 var(--gold); }
.walk-panel { min-height: 360px; }
.walk-panel[hidden] { display: none; }
.walk-panel .console { margin: 0; border: 0; background: transparent; }
.walk-panel .console-foot { display: none; }
.kpis { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); border-bottom: 1px solid var(--rule); }
.kpis > div { padding: 28px; border-right: 1px solid var(--rule); display: flex; flex-direction: column; gap: 10px; }
.kpis > div:last-child { border-right: 0; }
.kpis b { font: 400 clamp(2.6rem, 5vw, 4.6rem)/1 var(--serif); color: var(--white); letter-spacing: -.02em; }
.bars.wide { max-width: none; padding: 32px 28px 28px; }
.bars.wide .cols { height: 160px; }
.stocklist { list-style: none; margin: 0; padding: 12px 28px; }
.stocklist li { display: grid; grid-template-columns: 120px minmax(0,1fr) 220px; gap: 24px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--rule); color: var(--chalk); font: 400 1.5rem/1 var(--serif); }
.stocklist li:last-child { border-bottom: 0; }
.stocklist .bar { height: 10px; background: var(--ink); display: block; }
.stocklist .bar i { display: block; height: 100%; background: var(--white); }
.stocklist .label { text-align: right; }

/* after panel: honest, empty until real */
.after { margin-top: 24px; border: 1px solid var(--rule); }
.after-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 28px; padding: 22px 28px; border-bottom: 1px solid var(--rule); }
.after-head h3 { margin: 0; font: 400 clamp(1.5rem, 2.4vw, 2.2rem)/1.1 var(--serif); color: var(--white); flex: 1; min-width: 260px; }
.after-cols { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); }
.after-cols > div { padding: 28px; }
.after-big { margin: 14px 0 10px; font: 400 clamp(2rem, 3.6vw, 3.2rem)/1.02 var(--serif); color: var(--white); letter-spacing: -.02em; }
.after-small { margin: 0; color: var(--smoke); max-width: 40ch; font-size: .9375rem; }
.after-small + .after-small { margin-top: 12px; }
.after-metrics { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--rule); }
.after-metrics li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 20px 28px; border-bottom: 1px solid var(--rule); color: var(--fog); }
.after-metrics li:last-child { border-bottom: 0; }
.after-metrics b { font: 400 2rem/1 var(--serif); color: var(--ash); }
.after-metrics li.head { padding-block: 16px; }

/* the door */
.door { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,1fr); gap: 48px clamp(40px, 7vw, 120px); align-items: end; }
.door-title { margin: 0 0 24px; font: 400 clamp(2.8rem, 7vw, 6.6rem)/.96 var(--serif); letter-spacing: -.025em; color: var(--void); }
.door-lede { margin: 0 0 28px; max-width: 40ch; color: #2b2b2b; font-size: 1.1875rem; }
.fit { display: grid; gap: 28px; }
.fit ul { margin: 12px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--mist); }
.fit li { padding: 14px 0; border-bottom: 1px solid var(--mist); color: #2b2b2b; }
.paper .fit .label { color: #5a5a5a; }
.door-price { margin: -12px 0 28px; color: #2b2b2b; font-weight: 600; }
.who { margin: 0 0 32px; padding: 0; list-style: none; border-top: 1px solid var(--mist); max-width: 40ch; }
.who li { display: flex; align-items: baseline; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--mist); color: #2b2b2b; }
.who b { font: 400 1.75rem/1 var(--serif); color: var(--void); min-width: 4.2em; }
#door { padding-block: clamp(80px, 11vw, 170px); }

@media (max-width: 960px) {
  .after-cols, .door { grid-template-columns: 1fr; }
  .after-metrics { border-left: 0; border-top: 1px solid var(--rule); }
  .kpis { grid-template-columns: 1fr; }
  .kpis > div { border-right: 0; border-bottom: 1px solid var(--rule); }
  .stocklist li { grid-template-columns: 70px minmax(0,1fr); font-size: 1.2rem; }
  .stocklist .label { grid-column: 2; text-align: left; }
  .room svg { min-width: 760px; }
  .room { overflow-x: auto; }
  .walk-tabs button { padding: 16px 16px; flex: 1; }
}

/* ---------- photography (illustrative mood images, greyscale) ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.bleed { position: relative; margin: clamp(48px, 6vw, 96px) 0 0; height: clamp(260px, 46vw, 640px); overflow: hidden; background: var(--void); }
.bleed img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; display: block; }
.bleed::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, var(--void) 0, transparent 22%, transparent 70%, var(--void) 100%); }
.bleed figcaption, .dev-photo figcaption, .photo-band .label { position: absolute; z-index: 2; right: var(--gutter); bottom: 14px; color: var(--smoke); }
.dev-photo { position: absolute; left: 0; bottom: 0; width: 46%; height: 22%; margin: 0; overflow: hidden; border: 1px solid var(--rule); }
.dev-photo img { width: 100%; height: 100%; object-fit: cover; display: block; filter: contrast(1.05); }
.dev-photo figcaption { right: 12px; bottom: 10px; left: auto; }
.photo-band { position: relative; min-height: clamp(380px, 52vw, 680px); display: flex; align-items: flex-end; overflow: hidden; padding: clamp(40px, 6vw, 96px) 0; background: var(--void); }
.photo-band > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.photo-band::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(7,7,7,.92) 0, rgba(7,7,7,.35) 55%, rgba(7,7,7,.1) 100%); }
.photo-band .wrap { position: relative; z-index: 2; }
.photo-line { margin: 0; font: 400 clamp(3rem, 8vw, 8rem)/.94 var(--serif); letter-spacing: -.025em; color: var(--white); max-width: 14ch; }

/* ================= configurator ================= */
.cfg { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.cfg-room svg { display: block; width: 100%; height: auto; border: 1px solid var(--rule); background: var(--carbon); }
.cfg-count { margin: 14px 0 0; color: var(--fog); }
.cfg-room .c-wall { fill: none; stroke: var(--rule); }
.cfg-room .c-mono { font: 500 11px var(--mono); letter-spacing: .14em; fill: var(--smoke); }
.cfg-room .c-mono.hl { fill: var(--white); }
.cfg-room .c-you { fill: var(--carbon); stroke: var(--white); stroke-width: 1.5; }
.cfg-room .cn .sq { fill: none; stroke: var(--ash); stroke-width: 1.2; stroke-dasharray: 3 3; transition: fill .25s, stroke .25s; }
.cfg-room .cn .lb { font: 400 24px var(--serif); fill: var(--ash); letter-spacing: -.01em; transition: fill .25s; }
.cfg-room .cn .ln { fill: none; stroke: var(--white); stroke-width: 1.4; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .5s ease; }
.cfg-room .cn.on .sq { fill: var(--white); stroke: var(--white); stroke-dasharray: none; }
.cfg-room .cn.on .lb { fill: var(--white); }
.cfg-room .cn.on .ln { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) { .cfg-room .cn .ln, .cfg-room .cn .sq, .cfg-room .cn .lb { transition: none; } }

.cfg-form { display: flex; flex-direction: column; gap: 28px; }
.cfg-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.cfg-form legend { padding: 0; margin-bottom: 12px; }
.cfg-parts { border-top: 1px solid var(--rule); }
.part { appearance: none; display: flex; align-items: center; gap: 18px; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--rule); color: var(--fog); padding: 18px 4px; min-height: 64px; cursor: pointer; font: inherit; transition: background .2s, color .2s; }
.part:hover { background: var(--ink); }
.part .mk { width: 20px; height: 20px; border: 1px solid var(--ash); flex: none; display: block; transition: background .2s, border-color .2s; }
.part .pt { display: flex; flex-direction: column; gap: 4px; }
.part b { font: 400 1.6rem/1.05 var(--serif); letter-spacing: -.01em; color: var(--chalk); font-weight: 400; }
.part small { font: 500 .6875rem/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--smoke); }
.part[aria-pressed="true"] { background: var(--white); }
.part[aria-pressed="true"] .mk { background: var(--void); border-color: var(--void); }
.part[aria-pressed="true"] b { color: var(--void); }
.part[aria-pressed="true"] small { color: #4a4a4a; }

.cfg-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.cfg .field { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cfg .field .opt { color: var(--ash); letter-spacing: .08em; margin-left: 8px; }
.cfg .sel { position: relative; }
.cfg .sel::after { content: ""; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; border-right: 1px solid var(--white); border-bottom: 1px solid var(--white); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.cfg select, .cfg textarea { appearance: none; width: 100%; background: var(--carbon); color: var(--white); border: 1px solid var(--ash); border-radius: 0; padding: 14px 16px; font: 400 1rem/1.4 var(--sans); min-height: 48px; }
.cfg textarea { resize: vertical; }
.cfg select:hover, .cfg textarea:hover { border-color: var(--smoke); }
.cfg textarea::placeholder { color: var(--smoke); }
.cfg select option { background: var(--carbon); color: var(--white); }
.cfg .seg { display: flex; flex-wrap: wrap; border: 1px solid var(--ash); width: fit-content; max-width: 100%; }
.cfg .seg button { appearance: none; background: none; border: 0; border-right: 1px solid var(--ash); color: var(--fog); font: 500 .75rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 14px 18px; min-height: 48px; cursor: pointer; transition: background .15s, color .15s; }
.cfg .seg button:last-child { border-right: 0; }
.cfg .seg button:hover { background: var(--ink); color: var(--white); }
.cfg .seg button[aria-pressed="true"] { background: var(--white); color: var(--void); }

.cfg-send { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding-top: 4px; }
.cfg-sum { margin: 0; font: 400 clamp(1.3rem, 2vw, 1.8rem)/1.2 var(--serif); color: var(--white); letter-spacing: -.01em; }
.cfg-fine { margin: 0; font-size: .875rem; color: var(--smoke); max-width: 52ch; }
.cfg-send .btn[aria-disabled="true"] { background: var(--graphite); color: var(--ash); border-color: var(--rule); cursor: not-allowed; }
.cfg-send .btn[aria-disabled="true"]:hover { background: var(--graphite); color: var(--ash); }

@media (min-width: 961px) {
  .cfg { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
  .cfg-room { position: sticky; top: 96px; }
  .cfg-row { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
}
@media (max-width: 640px) {
  .part b { font-size: 1.35rem; }
  .cfg .seg button { padding: 14px 14px; }
}

.how-label { margin: clamp(40px, 5vw, 64px) 0 14px; }
.cfg-steps { list-style: none; margin: 0 0 clamp(28px, 4vw, 48px); padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--rule); }
.cfg-steps li { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-right: 1px solid var(--rule); color: var(--chalk); }
.cfg-steps li:last-child { border-right: 0; }
.cfg-steps b { flex: none; width: 34px; height: 34px; display: grid; place-items: center; background: var(--white); color: var(--void); font: 500 .8125rem var(--mono); }
.cfg-steps span { font-size: 1.0625rem; line-height: 1.3; }
.cfg-steps li { transition: background .25s; }
.cfg-steps li.now { background: var(--ink); box-shadow: inset 0 -2px 0 var(--gold); }
.cfg-steps li.now b { background: var(--gold); }
.cfg-steps li.done b { background: transparent; color: var(--white); outline: 1px solid var(--steel); outline-offset: -1px; }
.cfg-steps li.done span { color: var(--smoke); text-decoration: line-through; text-decoration-color: var(--steel); }
@media (max-width: 800px) { .cfg-steps { grid-template-columns: 1fr; } .cfg-steps li { border-right: 0; border-bottom: 1px solid var(--rule); } .cfg-steps li:last-child { border-bottom: 0; } }

/* the nav stays up during the intro, so every part of the site is one click away */
.intro-live .nav { background: rgba(5,5,5,.55); }
#door, #book { scroll-margin-top: 84px; }
.after-head .label.gold { color: var(--gold); }

/* builds teaser (home) and builds page */
.teaser { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px; padding: clamp(28px, 4vw, 56px); border: 1px solid var(--steel); background: var(--carbon); text-decoration: none; color: inherit; transition: background .25s, border-color .25s; }
.teaser:hover { background: var(--white); border-color: var(--white); }
.teaser-main { display: flex; flex-direction: column; gap: 10px; }
.teaser-main b { font: 400 clamp(2rem, 4.6vw, 4rem)/1 var(--serif); letter-spacing: -.02em; color: var(--white); transition: color .25s; }
.teaser-main small { font-size: 1rem; color: var(--smoke); transition: color .25s; }
.teaser-go { display: inline-flex; align-items: center; gap: 12px; font: 500 .8125rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--white); transition: color .25s; }
.teaser .arrow { width: 22px; height: 1px; background: currentColor; position: relative; }
.teaser .arrow::after { content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
.teaser:hover .teaser-main b, .teaser:hover .teaser-go { color: var(--void); }
.teaser:hover .teaser-main small { color: #4a4a4a; }
.pagehead { padding-block: clamp(72px, 11vw, 150px) 0; }
.pagehead .lede { margin-top: 28px; max-width: 52ch; }
.builds-cta { padding-block: clamp(64px, 9vw, 130px); border-top: 1px solid var(--rule); margin-top: clamp(48px, 7vw, 100px); }
.builds-cta .title { margin-bottom: 28px; }
.nav ul a[aria-current="page"] { color: var(--white); box-shadow: inset 0 -2px 0 var(--gold); }

/* ---------- gold: highlights, more of them (brand kit v2.1, Chap 20 Oct) ---------- */
.sec-head > .label, .pagehead > .label { display: flex; align-items: center; gap: 14px; color: var(--gold); }
.sec-head > .label::before, .pagehead > .label::before { content: ""; width: 40px; height: 1px; background: var(--gold); flex: none; }
.ledger .row .i { color: var(--gold); }
.ledger .row:hover .i { color: var(--gold-deep); }
.room .t-mono.hl { fill: var(--gold); }
.room .gate { stroke: var(--gold); }
.room .packet { fill: var(--gold); }
.cfg-room .cn.on .sq { fill: var(--gold); stroke: var(--gold); }
.cfg-room .cn.on .ln { stroke: var(--gold); }
.cfg-room .c-mono.hl { fill: var(--gold); }
.part[aria-pressed="true"] { box-shadow: inset 4px 0 0 var(--gold); }
.teaser:not(:hover) .teaser-go { color: var(--gold); }
.paper .who { border-top: 2px solid var(--gold-deep); }

/* ---------- site audit, 20 Oct: plain parts, pricing, data ---------- */
.sec-sub { margin: 16px 0 0; max-width: 52ch; color: var(--fog); font-size: 1.0625rem; }
.build .label { display: flex; align-items: center; gap: 10px; }
.build .pn { font: 500 .75rem/1 var(--mono); color: var(--gold); }
.build h3 + p { margin-top: 12px; color: var(--fog); max-width: 42ch; }

.vlist { display: grid; gap: 12px; max-width: 480px; }
.vlist div { display: grid; grid-template-columns: minmax(0, 1fr) 90px minmax(0, auto); gap: 14px; align-items: center; }
.vlist span { color: var(--chalk); font: 400 .9375rem/1.3 var(--sans); }
.vlist .lvl { height: 6px; background: var(--ink); position: relative; display: block; }
.vlist .lvl::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: var(--w); background: var(--white); }
.vlist b { font-weight: 500; text-transform: uppercase; letter-spacing: .06em; font-size: .6875rem; color: var(--smoke); }
.vlist b.gold { color: var(--gold); }

.roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); max-width: 420px; }
.roles span { background: var(--carbon); padding: 10px 12px; display: grid; gap: 6px; color: var(--smoke); font-size: .6875rem; text-transform: uppercase; letter-spacing: .06em; }
.roles b { font: 400 1.2rem/1 var(--serif); color: var(--white); text-transform: none; letter-spacing: 0; }
.roles span:first-child b { color: var(--gold); }

.dcard { display: grid; gap: 10px; padding: 14px 16px; border: 1px solid var(--steel); background: var(--carbon); max-width: 340px; }
.dcard .dto { text-transform: uppercase; letter-spacing: .1em; font-size: .6875rem; color: var(--smoke); }
.dcard .dmsg { font: 400 1rem/1.4 var(--sans); color: var(--chalk); }
.dcard .dact { display: flex; gap: 8px; }
.dcard .dact b { font: 600 .75rem/1 var(--sans); padding: 8px 12px; border: 1px solid var(--ash); color: var(--fog); }
.dcard .dact b:first-child { background: var(--white); color: var(--void); border-color: var(--white); }

.olist { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); max-width: 380px; }
.olist span { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; background: var(--carbon); color: var(--chalk); letter-spacing: .06em; }
.olist em { font-style: normal; color: var(--smoke); text-transform: uppercase; font-size: .6875rem; }
.olist b { font-weight: 500; text-transform: uppercase; font-size: .6875rem; color: var(--smoke); }
.olist b.gold { color: var(--gold); }

.builds-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px; margin: 18px 0 0; }
.builds-foot a { display: inline-flex; align-items: center; gap: 12px; font: 500 .8125rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--white); text-decoration: none; padding: 14px 0; }
.builds-foot a:hover { color: var(--gold); }
.builds-foot .arrow, .steps-foot .arrow { width: 22px; height: 1px; background: currentColor; position: relative; display: inline-block; }
.builds-foot .arrow::after { content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }

.data-note { margin-top: 36px; display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 12px 40px; padding-top: 28px; border-top: 1px solid var(--rule); }
.data-note .label { color: var(--gold); grid-column: 1 / -1; }
.data-note p { grid-column: 2; margin: 0; max-width: 72ch; color: var(--fog); }

.price-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.price-steps li { background: var(--void); padding: 28px 24px 32px; display: flex; flex-direction: column; gap: 10px; }
.price-steps li.now { background: var(--ink); box-shadow: inset 0 3px 0 var(--gold); }
.ps-n { font: 400 2.4rem/1 var(--serif); color: var(--ash); }
.price-steps li.now .ps-n { color: var(--gold); }
.ps-price { font: 400 clamp(2rem, 3.2vw, 2.9rem)/1 var(--serif); color: var(--white); letter-spacing: -.02em; margin-top: 6px; }
.ps-price small { font: 500 .75rem/1 var(--mono); color: var(--smoke); margin-left: 6px; letter-spacing: .08em; }
.ps-when { font: 500 .6875rem/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--smoke); }
.price-steps p { margin: 8px 0 0; color: var(--fog); font-size: .9375rem; }
.steps-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px 40px; margin-top: 28px; }
.steps-foot p { margin: 0; max-width: 60ch; }
.steps-foot b { color: var(--white); font-weight: 600; }
.steps-foot .steps-cta { display: flex; flex-wrap: wrap; gap: 12px; }
#steps { scroll-margin-top: 68px; }

@media (max-width: 960px) {
  .price-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .data-note { grid-template-columns: 1fr; }
  .data-note p { grid-column: 1; }
}
@media (max-width: 599px) {
  .price-steps { grid-template-columns: 1fr; }
  .vlist div { grid-template-columns: minmax(0, 1fr) 60px; }
  .vlist b { grid-column: 1 / -1; }
  .roles { grid-template-columns: 1fr; }
}