/* ==========================================================
   FULL-WIDTH RAIL LAYOUTS (NOIZE shell style). The extension spans columns 3 to 10.
   Type from the scale only; blocks sit on the grid rows (170 / 290–330 / 548).
   ========================================================== */
.x-full .headline{ position:absolute; top:170px; left:0; width:min(880px, 88%); margin:0; font:var(--t-headline); letter-spacing:var(--ls-headline); text-wrap:balance; }
.x-full .idx{ display:block; margin:0 0 var(--s-1); font:var(--t-mono); color:var(--quiet); }
.x-full ol, .x-full ul{ list-style:none; margin:0; padding:0; }
.x-full h3{ margin:0 0 var(--s-1); font:var(--t-title); letter-spacing:var(--ls-title); }
.x-full h4{ margin:0 0 var(--s-1); font:var(--t-lead-strong); }
.x-full li p{ margin:0; font:var(--t-small); color:var(--mid); text-wrap:pretty; }

/* long-form */
.lf-cols{ position:absolute; top:330px; left:0; width:100%; display:grid; grid-template-columns:1fr 1fr; gap:0 36px; }
.lf-cols p{ margin:0; font:var(--t-lead); color:var(--mid); text-wrap:pretty; }
.lf-quote{ position:absolute; top:548px; left:0; width:75%; margin:0; padding-top:var(--s-2); border-top:1px solid var(--hairline); }
.lf-quote blockquote{ margin:0 0 var(--s-1); font:var(--t-title); letter-spacing:var(--ls-title); text-wrap:balance; }
.lf-quote figcaption{ font:var(--t-small); color:var(--quiet); }

/* nine decisions */
.grid-3x3{ position:absolute; top:290px; left:0; width:100%; display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--s-3) 28px; }
.grid-3x3 li{ border-top:1px solid var(--hairline); padding-top:var(--s-2); }

/* phases */
.phases{ position:absolute; top:330px; left:0; width:100%; display:grid; grid-template-columns:repeat(3, 1fr); gap:0 28px; }
.phases li{ border-top:1px solid var(--hairline); padding-top:var(--s-2); }
.phases .lead{ margin:0 0 var(--s-2); font:var(--t-lead); color:var(--ink); }

/* brand architecture */
.arch{ position:absolute; top:290px; left:-16px; width:calc(100% + 32px); border-collapse:collapse; }   /* 16px past the text column each side, so the ink row reaches out and every row's text shares one edge */
.arch th:first-child, .arch td:first-child{ padding-left:16px !important; }
.arch th:last-child, .arch td:last-child{ padding-right:16px; }
.arch th, .arch td{ padding:var(--s-2) var(--s-2) var(--s-2) 0; border-top:1px solid var(--hairline); text-align:left; vertical-align:top; font:var(--t-small); color:var(--mid); }
.arch thead th{ border-top:0; padding-top:0; color:var(--quiet); font:var(--t-small-medium); }
.arch tbody th{ font:var(--t-small-strong); color:var(--ink); width:18%; }
.arch td.expr{ font:var(--t-small-strong); color:var(--ink); width:36%; }
/* rules sit on the text column (inset 16px at each end); only the ink row reaches out */
.arch tbody > tr > *{ border-top:0 !important; background:linear-gradient(var(--hairline), var(--hairline)) 0 0 / 100% 1px no-repeat; }
.arch tbody > tr > :first-child{ background-position:16px 0; background-size:calc(100% - 16px) 1px; }
.arch tbody > tr > :last-child{ background-size:calc(100% - 16px) 1px; }
/* the highlighted row is one rounded ink bar: no rule of its own, none from the next row under its
   corners, and the seam cover stops before the rounded end */
.arch tr.master > *{ background:var(--ink); color:var(--paper); border-top-color:transparent; box-shadow:1px 0 0 var(--ink); }
.arch tr.master > :last-child{ box-shadow:none; }
.arch tr.master + tr > *{ border-top-color:transparent; }   /* shadow covers subpixel seams */
.arch tr.master > :first-child{ border-radius:10px 0 0 10px; }
.arch tr.master > :last-child{ border-radius:0 10px 10px 0; }
.arch tr.master td{ color:rgba(255,255,255,.72); }
.arch tr.master td.expr{ color:var(--paper); }
.lay-architecture .notes{ position:absolute; top:643px; left:0; width:100%; display:grid; grid-template-columns:1fr 1fr; gap:0 36px; }

/* delivery stages */
.stages{ position:absolute; top:290px; left:0; width:100%; display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--s-4) 28px; }
.stages li{ border-top:1px solid var(--hairline); padding-top:var(--s-2); }

/* chapter: a breath between acts */
.lay-chapter .ch-body{ position:absolute; top:170px; left:0; width:min(900px, 90%); display:flex; flex-direction:column; gap:var(--s-3); }
.lay-chapter .ch-k{ margin:0; font:var(--t-small-medium); color:var(--quiet); }
.lay-chapter .ch-title{ margin:0; font:var(--t-display); font-size:64px; line-height:1; letter-spacing:-.045em; text-wrap:balance; }
.lay-chapter .ch-line{ margin:0; max-width:560px; font:var(--t-lead); color:var(--mid); text-wrap:pretty; }
.lay-chapter .ch-list{ position:absolute; top:643px; left:0; width:100%; display:flex; flex-wrap:wrap; gap:6px 28px; padding-top:var(--s-2); border-top:1px solid var(--hairline); }
.lay-chapter .ch-list li{ font:var(--t-small); color:var(--mid); }

/* cover and close: the deck's bookends are its dark moments */
.rail[data-layout="cover"], .rail[data-layout="close"]{ background:#0a0a0a; color:#fff; }
.rail[data-layout="cover"] .spine .wordmark, .rail[data-layout="close"] .spine .wordmark{ color:#fff; }
.rail[data-layout="cover"] .title, .rail[data-layout="cover"] .sub{ opacity:0; }
.rail[data-layout="close"] .sub{ color:rgba(255,255,255,.62); }
.rail[data-layout="cover"] .circle, .rail[data-layout="cover"] .nav .track,
.rail[data-layout="close"] .circle, .rail[data-layout="close"] .nav .track{ background:rgba(255,255,255,.14); color:#fff; }
.rail[data-layout="cover"] .track button:hover:not([disabled]), .rail[data-layout="close"] .track button:hover:not([disabled]){ background:rgba(255,255,255,.22); box-shadow:none; }
.lay-cover{ left:33px !important; }
.lay-cover .cover-client{ position:absolute; top:170px; left:0; margin:0; font:var(--t-display); letter-spacing:var(--ls-display); }
.lay-cover .cover-title{ position:absolute; top:236px; left:0; width:min(760px, 90%); margin:0; font:var(--t-headline); letter-spacing:var(--ls-headline); color:rgba(255,255,255,.62); text-wrap:balance; }
.lay-cover .cover-meta{ position:absolute; top:643px; left:0; margin:0; display:flex; gap:var(--s-1); font:var(--t-lead); color:rgba(255,255,255,.62); }
.lay-close .statement{ color:#fff; }
.lay-close .intro{ color:rgba(255,255,255,.62) !important; width:520px; }
.lay-close .contact{ position:absolute; top:548px; left:0; padding-top:var(--s-2); border-top:1px solid rgba(255,255,255,.2); width:520px; }
.lay-close .contact p{ margin:0; font:var(--t-lead); color:rgba(255,255,255,.62); }
.lay-close .contact .who{ font:var(--t-lead-strong); color:#fff; margin-bottom:var(--s-1); }

/* ---------- investment calculator (NOIZE UI, Apple-style controls) ---------- */
/* the calculator takes the whole page: no page name beside it, and it stops above the nav */
.rail[data-layout="investment"] :is(.title, .sub){ display:none; }
.ext.lay-investment{ left:33px; right:33px; width:auto; }
.lay-investment .inv{ bottom:96px !important; grid-template-rows:minmax(0, 1fr); }
/* the summary: its body scrolls if it must, and the pay button sits in a fixed foot, always in reach */
.lay-investment .inv-sum{ max-height:100%; padding:0; gap:0; overflow:clip; }
.inv-sum-body{ flex:1 1 auto; min-height:0; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; padding:22px 24px 16px; display:flex; flex-direction:column; gap:var(--s-2); }
.inv-sum-foot{ flex:none; padding:12px 24px 22px; display:flex; flex-direction:column; gap:8px; border-top:1px solid var(--grey-line); }
.inv-years button{ white-space:nowrap; }
.lay-investment .inv{ position:absolute; top:150px; bottom:33px; left:0; width:100%; display:grid; grid-template-columns:1.45fr 1fr; gap:36px; }
.inv-plan{ display:flex; flex-direction:column; min-height:0; }
.inv-head{ display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:var(--s-3); }
.inv-h{ margin:0; font:var(--t-title); letter-spacing:var(--ls-title); }
.inv-years{ display:inline-flex; height:40px; padding:3px; gap:2px; border-radius:999px; background:var(--fill); }
.inv-years button{ height:34px; padding:0 16px; border-radius:999px; font:var(--t-control); color:var(--mid); transition:background-color .3s var(--ease), color .3s; }
.inv-years button[aria-pressed="true"]{ background:var(--paper); color:var(--ink); font-weight:600; box-shadow:0 1px 2px rgba(0,0,0,.12), 0 3px 8px rgba(0,0,0,.08); }
.inv-search{ position:relative; display:block; margin-bottom:var(--s-2); }
.inv-search::before{ content:""; position:absolute; left:13px; top:13px; width:14px; height:14px; opacity:.55; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%231d1d1f' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='6' cy='6' r='4.5'/%3E%3Cpath d='m9.5 9.5 3 3'/%3E%3C/svg%3E") no-repeat center/contain; }
.inv-search input{ width:100%; height:40px; border:0; border-radius:12px; background:var(--fill); padding:0 14px 0 36px; font:var(--t-lead); color:var(--ink); outline:none; -webkit-appearance:none; appearance:none; }
.inv-search input:focus{ background:var(--paper); box-shadow:0 0 0 1.5px var(--ink); }
.inv-list{ flex:1; min-height:0; overflow-y:auto; padding-right:8px; scrollbar-width:thin; }
.inv-stage{ padding:var(--s-2) 0; border-top:1px solid var(--hairline); }
.inv-stage header{ display:flex; align-items:baseline; gap:var(--s-2); margin-bottom:6px; }
.inv-stage header b{ font:var(--t-title); letter-spacing:var(--ls-title); }
.inv-stage header span{ font:var(--t-small); color:var(--quiet); }
.inv-stage header em{ margin-left:auto; font:var(--t-small-strong); font-style:normal; }
.inv-cat{ border-top:1px solid var(--grey-line); }
.inv-stage header + .inv-cat{ border-top:0; }
.inv-group{ width:100%; display:flex; align-items:center; gap:10px; padding:14px 8px; text-align:left; }
/* hover lifts the chevron and the count to ink: no fill, so nothing butts against the hairlines */
.inv-group svg{ width:12px; height:12px; flex:none; color:var(--quiet); transition:rotate .3s var(--ease), color .2s; }
.inv-group:hover svg, .inv-group:hover span{ color:var(--ink); }
.inv-cat.is-open .inv-group svg{ rotate:90deg; }
.inv-group b{ font:var(--t-lead-strong); color:var(--ink); }
.inv-group span{ font:var(--t-small); color:var(--quiet); }
.inv-group em{ margin-left:auto; font:var(--t-small-medium); font-style:normal; color:var(--ink); }
.inv-cat-items{ padding:0 0 8px 22px; }
@media (prefers-reduced-motion: reduce){ .inv-group svg{ transition:none; } }
.inv-item{ width:100%; display:flex; align-items:center; gap:var(--s-2); padding:8px 8px; border-radius:10px; text-align:left; transition:background-color .2s; }
.inv-item:hover{ background:var(--mist); }
.inv-check{ width:18px; height:18px; border-radius:6px; background:var(--fill); flex:none; display:grid; place-items:center; transition:background-color .2s; }
.inv-item.is-on .inv-check{ background:var(--ink); }
.inv-item.is-on .inv-check::after{ content:""; width:8px; height:4px; border:1.5px solid var(--paper); border-top:0; border-right:0; transform:rotate(-45deg) translate(1px, -1px); }
.inv-name{ flex:1; font:var(--t-small); color:var(--ink); }
.inv-item:not(.is-on) .inv-name{ color:var(--mid); }
.inv-name small{ display:block; margin-top:1px; font:var(--t-small); color:var(--quiet); }
.inv-price{ font:var(--t-small-medium); color:var(--ink); white-space:nowrap; }
.inv-price small{ font:var(--t-small); color:var(--quiet); }
.inv-empty{ font:var(--t-small); color:var(--quiet); }
.inv-sum{ align-self:start; border-radius:18px; background:var(--mist); padding:22px 24px; display:flex; flex-direction:column; gap:var(--s-2); }
.inv-sum-k{ margin:0; font:var(--t-small-medium); color:var(--quiet); }
.inv-sum dl{ margin:0; }
.inv-sum dl div{ display:flex; justify-content:space-between; padding:8px 0; border-top:1px solid var(--hairline); font:var(--t-small); color:var(--mid); }
.inv-sum dd{ margin:0; color:var(--ink); font:var(--t-small-medium); }
.inv-sum .inv-total{ padding-top:12px; }
.inv-sum .inv-total dt{ font:var(--t-lead-strong); color:var(--ink); }
.inv-sum .inv-total dd{ font:var(--t-title); letter-spacing:var(--ls-title); }
.inv-note{ margin:0; font:var(--t-small); color:var(--quiet); }
.inv-pay{ border:0; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.inv-pay legend{ font:var(--t-small-strong); margin-bottom:8px; padding:0; }
.inv-opt{ border-radius:12px; background:var(--paper); box-shadow:0 0 0 1px var(--grey-line); transition:box-shadow .2s; }
.inv-opt.is-on{ box-shadow:0 0 0 1.5px var(--ink); }
.inv-opt label{ display:flex; gap:10px; align-items:flex-start; padding:12px; cursor:pointer; }
.inv-pay input[type="radio"]{ margin:2px 0 0; accent-color:var(--ink); }
.inv-opt label > span{ display:flex; flex-direction:column; gap:2px; }
.inv-pay b{ font:var(--t-small-strong); } .inv-pay small{ font:var(--t-small); color:var(--mid); }
/* the plan's terms, inside its card under a hairline: label · − value + · what it comes to */
.inv-terms{ margin:0 12px; padding:4px 0 6px; border-top:1px solid var(--grey-line); }
.inv-term{ display:grid; grid-template-columns:1fr auto; grid-template-areas:"k step" "v step"; align-items:center; column-gap:12px; padding:8px 0 8px 26px; }
.inv-term + .inv-term{ border-top:1px solid var(--grey-line); }
.inv-term-k{ grid-area:k; font:var(--t-small-strong); color:var(--ink); }
.inv-term-v{ grid-area:v; font:var(--t-small); color:var(--mid); }
.inv-step{ grid-area:step; display:inline-flex; align-items:center; height:34px; padding:3px; gap:2px; border-radius:999px; background:var(--fill); }
.inv-step button{ width:28px; height:28px; border-radius:999px; font:var(--t-control); color:var(--ink); display:grid; place-items:center; transition:background-color .2s; }
.inv-step button:hover:not([disabled]){ background:var(--paper); box-shadow:0 1px 2px rgba(0,0,0,.12); }
.inv-step button[disabled]{ color:var(--quiet); opacity:.5; }
.inv-num{ display:inline-flex; align-items:baseline; justify-content:center; min-width:52px; padding:0 2px; }
.inv-num input{ width:3.2ch; min-width:0; border:0; padding:0; background:none; text-align:right; font:var(--t-small-strong); color:var(--ink); outline:none; }
.inv-num input:only-child{ text-align:center; width:4ch; }
.inv-num i{ font:var(--t-small-strong); font-style:normal; color:var(--ink); }
.inv-step:has(input:focus){ box-shadow:0 0 0 1.5px var(--ink); }
.inv-go{ height:44px; border-radius:999px; background:var(--ink); color:var(--paper); font:var(--t-control); display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.inv-go svg{ width:14px; height:14px; transition:transform .2s var(--ease); }
.inv-go:hover svg{ transform:translateX(3px); }
.inv-go-note{ margin:0; font:var(--t-small); color:var(--mid); text-align:center; }

/* chapter openers are the deck's black screens, like the cover and the close: each act starts dark */
.rail[data-layout="chapter"]{ background:#0a0a0a; color:#fff; }
.rail[data-layout="chapter"] .spine .wordmark{ color:#fff; }
.rail[data-layout="chapter"] .sub{ color:rgba(255,255,255,.55); }
.rail[data-layout="chapter"] .circle, .rail[data-layout="chapter"] .nav .track{ background:rgba(255,255,255,.14); color:#fff; }
.rail[data-layout="chapter"] .track button:hover:not([disabled]){ background:rgba(255,255,255,.22); box-shadow:none; }
.lay-chapter .ch-title{ color:#fff; }
.lay-chapter .ch-line{ color:rgba(255,255,255,.62); }
.lay-chapter .ch-list{ border-top-color:rgba(255,255,255,.18); }
.lay-chapter .ch-list li{ color:rgba(255,255,255,.55); }
.lay-chapter .ch-list:empty{ display:none; }

/* domains: the addresses themselves at display scale, each on a hairline with its status */
.dm-list{ position:absolute; top:340px; left:0; width:100%; list-style:none; margin:0; padding:0; }
.dm-list li{ display:grid; grid-template-columns:1fr auto; grid-template-areas:"name status" "note status"; column-gap:var(--s-4); row-gap:var(--s-1); align-items:center; padding:var(--s-4) 0; border-top:1px solid var(--grey-line); }
.x-full .dm-list .dm-name{ grid-area:name; margin:0; font:600 84px/1 var(--shell); letter-spacing:-.045em; color:var(--ink); }
.x-full .dm-list .dm-note{ grid-area:note; margin:0; font:var(--t-lead); color:var(--mid); }
.x-full .dm-list .dm-status{ grid-area:status; margin:0; display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 18px; border-radius:999px; background:var(--fill); font:var(--t-control); color:var(--ink); }
.dm-status i{ width:8px; height:8px; border-radius:50%; background:var(--ink); }

/* bank transfer sheet: over the calculator, one detail per row with its own copy button */
.inv-modal{ position:fixed; inset:0; z-index:50; display:grid; place-items:center; background:rgba(29,29,31,.28); animation:inv-fade .25s var(--ease) both; }
.inv-modal-card{ width:min(440px, 92%); border-radius:20px; background:var(--paper); padding:26px 28px 24px; box-shadow:0 24px 60px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.08); animation:inv-rise .35s cubic-bezier(0.32, 0.72, 0, 1) both; }
.inv-modal-h{ margin:0; font:var(--t-title); letter-spacing:var(--ls-title); color:var(--ink); }
.inv-modal-sub{ margin:6px 0 16px; font:var(--t-small); color:var(--mid); }
.inv-modal dl{ margin:0; }
.inv-modal dl div{ display:grid; grid-template-columns:1fr auto minmax(36px, auto); align-items:center; gap:10px; padding:8px 0; border-top:1px solid var(--grey-line); }
.inv-modal dt{ font:var(--t-small); color:var(--mid); }
.inv-modal dd{ margin:0; font:var(--t-small-strong); color:var(--ink); font-variant-numeric:tabular-nums; text-align:right; }
.inv-copy{ width:36px; height:30px; border-radius:999px; display:grid; place-items:center; color:var(--mid); font:var(--t-mono); transition:background-color .2s, color .2s; }
.inv-copy svg{ width:15px; height:15px; }
.inv-copy:hover{ background:var(--mist); color:var(--ink); }
.inv-copy.is-done{ width:auto; padding:0 8px; color:var(--ink); background:var(--mist); }
.inv-modal-note{ margin:14px 0 18px; font:var(--t-small); color:var(--mid); }
.inv-modal-note b{ color:var(--ink); font-weight:600; }
.inv-modal-acts{ display:grid; grid-template-columns:auto 1fr; gap:8px; }
.inv-modal-done{ height:44px; padding:0 20px; border-radius:999px; background:var(--fill); font:var(--t-control); color:var(--ink); }
@keyframes inv-fade{ from{ opacity:0; } }
@keyframes inv-rise{ from{ opacity:0; translate:0 14px; scale:.98; } }
@media (prefers-reduced-motion: reduce){ .inv-modal, .inv-modal-card{ animation:none; } }