/* Lane B, v3 (research/v2/DESIGN-v3.md, 29 Oct 2026): the buying and hand-off pages (pricing, demo, demo ready,
   order, cancel, service checks; account adds account.css). Barry: too washed out, too "AI", add a dark mode. So:
   every colour is a token (both themes), cards are crisp (--r-card, --c-line, --shadow-card, a 3 px product edge),
   headings keep patch.css's normal width, heads sit left, and the patch-lead colours mark what's live. Each page
   still asks one thing at a time; the flows are the unchanged legacy scripts. */

/* ---------- Shared ---------- */
/* Scripts show and hide parts with the hidden attribute; it must win over the display a part sets. */
.pg-pricing [hidden],.pg-demo [hidden],.pg-account [hidden],.pg-handoff [hidden]{display:none!important}
:root{
 --i-tick:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 6.4 4.6 9.4 10.5 2.6' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
 --i-dash:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6h7' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
 --i-clock:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='4.6' fill='none' stroke='black' stroke-width='1.5'/%3E%3Cpath d='M6 3.6V6l1.7 1.2' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
 --i-bang:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 2.4v4.4M6 9.3v.3' stroke='black' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E");
 /* Soft state tints made from the status tokens, so they follow the theme. */
 --tint-up:color-mix(in srgb,var(--c-up) 14%,transparent);
 --tint-warn:color-mix(in srgb,var(--c-warn) 16%,transparent)
}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3) var(--s-5)}
.ticks{display:grid;gap:10px;list-style:none;color:var(--c-ink-2)}
.ticks li{position:relative;padding-left:26px}
.ticks li::before{content:'';position:absolute;left:0;top:.42em;width:14px;height:14px;background:var(--c-act);-webkit-mask:var(--i-tick) center/contain no-repeat;mask:var(--i-tick) center/contain no-repeat}
.sequence p{color:var(--c-ink-2)}
.sequence strong{color:var(--c-ink);font-weight:600}
.sequence code,.ticks code,.prose code,.disclosure__body code,.facts code{white-space:normal;overflow-wrap:anywhere}
.input--num{max-width:160px;font-variant-numeric:tabular-nums}
.field__error[hidden]{display:none}
.field>legend{padding:0;margin-bottom:7px;font-weight:600;font-size:15px}
fieldset.field{margin:0;padding:0;border:0;min-width:0}
.helpline{font-size:15px;color:var(--c-ink-3)}

/* A crisp card: surface, hairline, a low shadow and, when it belongs to a product, a 3 px edge in its colour (--k). */
.order,.trial__panel,.receipt,.choice,.checks,.cta__panel{position:relative;border:1px solid var(--c-line);border-radius:var(--r-card);background:var(--c-surface);box-shadow:var(--shadow-card)}
.order,.trial__panel,.receipt{overflow:hidden}
.order::before,.trial__panel::before,.receipt::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:var(--k,var(--k-blue))}
/* A small technical label: mono, quiet, with a square of the card's colour. */
.tag{display:inline-flex;align-items:center;gap:8px;font:600 13px/1.2 var(--f-mono);letter-spacing:.01em;color:var(--c-ink-3)}
.tag::before{content:'';flex:none;width:8px;height:8px;border-radius:2px;background:var(--k,var(--k-blue))}

/* Status lines the legacy scripts write to (data-state error / success). They take focus on error, so they read
   as one calm sentence on a soft tint, never a banner. */
.status{font-size:15px;line-height:1.5;color:var(--c-ink-2)}
.status:empty{display:none}
.status:focus{outline:none}
.status:focus-visible{outline:2px solid var(--c-focus);outline-offset:3px}
.status[data-state=error]{padding:12px 16px;border-radius:var(--r-ctl);background:var(--c-note-err);color:var(--c-note-err-ink)}
.status[data-state=success]{padding:12px 16px;border-radius:var(--r-ctl);background:var(--tint-up);color:var(--c-ink)}
.status a{color:inherit;font-weight:600;text-decoration:underline;text-underline-offset:.2em}

/* Two-way choice drawn as one well, from toggle buttons (aria-pressed), matching .seg. */
.toggle{display:inline-flex;gap:2px;padding:4px;border-radius:var(--r-fig);background:var(--c-sunken);min-width:0}
.toggle button{height:38px;padding:0 18px;border:0;border-radius:var(--r-ctl);background:transparent;color:var(--c-ink-2);font:560 14.5px/1 var(--f-sans);white-space:nowrap;cursor:pointer;transition:color .14s,background-color .14s,box-shadow .14s}
.toggle button:hover{color:var(--c-ink)}
.toggle button[aria-pressed=true]{background:var(--c-surface);color:var(--c-ink);box-shadow:var(--shadow-card),0 0 0 1px var(--c-line)}
.toggle button:focus-visible{outline:2px solid var(--c-focus);outline-offset:1px;position:relative;z-index:1}
.toggle button:disabled{color:var(--c-ink-3);cursor:not-allowed}
/* On narrow phones the second half of a label is still read out, but not shown. */
@media (max-width:420px){.toggle__more{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}

/* Real screens sit in the shared .window frame; a ring marks the one field that matters on a real screenshot.
   The veil is the page's overlay colour, so in dark mode the rest of the screen dims like a spotlight. */
.shot{margin:0}
.shot .fig-cap{margin-top:var(--s-4)}
.callout{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.callout__veil{fill:var(--c-overlay);opacity:.42}
.callout__ring{fill:none;stroke:var(--c-act);stroke-width:4}

/* The closing panel: a crisp card wired with the six patch-lead colours along its top edge, as on the home page. */
.cta{padding:0 0 var(--s-10)}
.cta__panel{display:grid;justify-items:center;gap:var(--s-4);padding:clamp(40px,5vw,72px) var(--s-6);overflow:hidden;text-align:center}
.cta__panel::before{content:'';position:absolute;left:50%;top:0;width:min(420px,70%);height:4px;transform:translateX(-50%);border-radius:0 0 4px 4px;
 background:linear-gradient(90deg,var(--k-blue) 0 16.6%,var(--k-aqua) 0 33.3%,var(--k-violet) 0 50%,var(--k-orange) 0 66.6%,var(--k-yellow) 0 83.3%,var(--k-green) 0)}
.cta__panel .t-lede{max-width:31em}
.cta__panel .actions{justify-content:center;margin-top:var(--s-2)}

/* ---------- Pricing (v4, 9 Nov 2026) ----------
   Barry: "I'm not a fan of how the pricing pages look ... not exactly clear to users how to make an account ... it
   should wow the user ... Keep it in theme with the idea of the platform." So the page is a bench with two things on
   it. On the left the machine: the plans as four units in a rack (css/rack.css), and what every plan includes. On the
   right the paperwork: one slip that holds the plan and its total, how long, and the account itself, in three
   numbered steps. A patch lead runs from the chosen unit into the slip (js/purchase.mjs). The flows are still the
   unchanged legacy scripts; the whole bench is the checkout form. */
.buy-head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--s-4) var(--s-7);align-items:end;padding:clamp(36px,5vw,72px) 0 var(--s-7)}
.buy-head__text{display:grid;gap:var(--s-3)}
.buy-head .t-lede{max-width:none}

.pick{padding:0 0 var(--s-9);scroll-margin-top:calc(var(--header-h) + 8px)}
.bench{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 400px;grid-template-rows:auto 1fr;gap:var(--s-7) clamp(48px,5.6vw,88px);align-items:start}
.bench__size{grid-column:1;grid-row:1;display:grid;gap:var(--s-4);min-width:0}
.bench__incl{grid-column:1;grid-row:2;min-width:0}
.slip{grid-column:2;grid-row:1/span 2}

/* A step: its number as a port label, then what to do. Real steps, in order. */
.step__head{display:grid;gap:6px}
.step__title{display:flex;align-items:center;gap:12px;font-size:21px;line-height:1.25;font-weight:600;letter-spacing:-.012em}
.step__n{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:5px;box-shadow:inset 0 0 0 1px var(--c-line-3);font:600 12.5px/1 var(--f-mono);letter-spacing:0;color:var(--c-ink-2)}
.step__line{padding-left:36px;font-size:15px;line-height:1.5;color:var(--c-ink-2)}
.pick__notes{padding-left:2px;font-size:14.5px;color:var(--c-ink-3)}

/* What every plan includes: one quiet list under the rack. */
.incl{display:grid;gap:var(--s-4);padding-top:var(--s-6);border-top:1px solid var(--c-line-2)}
.incl__title{font-size:17px;line-height:1.3;font-weight:600;letter-spacing:-.008em}
.incl .ticks{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px var(--s-6);font-size:15px;line-height:1.5}
.incl__note{font-size:14px;color:var(--c-ink-3)}

/* The slip: the plan and its total, then how long, then the account. Paper beside hardware. */
.slip{position:relative;display:grid;min-width:0;border:1px solid var(--c-line);border-radius:var(--r-card);background:var(--c-surface);box-shadow:var(--shadow-card),0 34px 64px -46px rgba(16,24,40,.5);scroll-margin-top:calc(var(--header-h) + 16px)}
.slip__head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:8px var(--s-4);padding:24px 28px 22px}
.slip__plan{display:grid;gap:4px;min-width:0}
.slip .order__name{font-family:var(--f-display);font-size:26px;line-height:1.15;font-weight:600;letter-spacing:-.012em}
.slip .order__spec{font:500 12.5px/1.4 var(--f-mono);letter-spacing:.005em;color:var(--c-ink-3)}
.slip__total{display:grid;justify-items:end;gap:3px;text-align:right}
.slip__total-k{font:600 12px/1.2 var(--f-mono);color:var(--c-ink-3)}
.slip__total strong{font-family:var(--f-display);font-size:clamp(34px,3vw,40px);line-height:1;font-weight:600;letter-spacing:-.014em;font-variant-numeric:tabular-nums}
.slip__total strong[data-empty]{max-width:8.5em;font-family:var(--f-sans);font-size:14.5px;line-height:1.35;font-weight:560;letter-spacing:0;color:var(--c-ink-2)}
.slip__note{grid-column:1/-1;font-size:14.5px;line-height:1.5;color:var(--c-ink-2)}
.slip__note:empty{display:none}
.slip .order__for{grid-column:1/-1}
/* The slip's own socket, on its edge, with the lead's plug in it. */
.slip__jack{position:absolute;left:-18px;top:25px;width:34px;height:26px;border-radius:4px;background:#0a0e14;box-shadow:inset 0 2px 3px rgba(0,0,0,.8),0 0 0 1px rgba(0,0,0,.4),0 1px 0 rgba(255,255,255,.08)}
.slip__jack i{position:absolute;left:4px;right:4px;top:4px;bottom:3px;border-radius:3px;background:var(--k-blue);box-shadow:inset 0 -4px 0 rgba(0,0,0,.22),inset 0 2px 0 rgba(255,255,255,.25)}
.slip__jack i::after{content:'';position:absolute;left:8px;right:8px;top:4px;height:3px;border-radius:2px;background:rgba(255,255,255,.55)}
html:not(.js) .slip__jack{display:none}

.slip__step{display:grid;gap:var(--s-4);min-width:0;padding:22px 28px 26px;border-top:1px solid var(--c-line)}
/* Under the plan and its total the rule is a tear line: the top of the slip is the part that changes. */
.slip__head+.slip__step{border-top:1px dashed var(--c-line-3)}
.slip__step .step__title{font-size:18px}
.slip__lede{margin-top:-6px;font-size:14.5px;line-height:1.5;color:var(--c-ink-2)}
.slip .toggle{display:flex}
.slip .toggle button{flex:1 1 0;padding:0 6px;font-size:14px}
.pick__line{font-size:14.5px;line-height:1.5;color:var(--c-ink-2)}

/* How long: four windows in one strip, and one line that says what the chosen one works out at. */
.span{display:grid;gap:10px}
.span__opts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-radius:var(--r-ctl);background:var(--c-surface);box-shadow:inset 0 0 0 1px var(--c-line-2)}
.span__opt{position:relative;display:grid;align-content:center;justify-items:center;gap:3px;min-width:0;padding:11px 4px 12px;cursor:pointer;transition:background-color .14s,box-shadow .14s}
.span__opt+.span__opt{box-shadow:inset 1px 0 0 var(--c-line-2)}
.span__opt:first-child{border-radius:var(--r-ctl) 0 0 var(--r-ctl)}
.span__opt:last-child{border-radius:0 var(--r-ctl) var(--r-ctl) 0}
.span__opt input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.span__len{font-size:13px;line-height:1.2;font-weight:560;color:var(--c-ink-3)}
.span__price{font-size:15.5px;line-height:1.2;font-weight:600;letter-spacing:-.01em;color:var(--c-ink);font-variant-numeric:tabular-nums}
.span__opt:hover{background:var(--c-surface-2)}
.span__opt:has(input:checked){z-index:1;background:var(--c-signal-wash);box-shadow:inset 0 0 0 2px var(--c-act)}
.span__opt:has(input:checked) .span__len{color:var(--c-ink)}
.span__opt:has(input:focus-visible){z-index:2;outline:2px solid var(--c-focus);outline-offset:2px}
.span__rate{min-height:2.9em;font-size:13.5px;line-height:1.45;color:var(--c-ink-3)}
.slip .renew{margin-top:0}
.slip .input--num{max-width:140px}

/* The one primary: what happens, and what it comes to. */
.slip .btn--block{white-space:normal;line-height:1.2;padding:0 20px}
.slip .btn--block:has(.btn__amt){justify-content:space-between}
.btn__amt{font-variant-numeric:tabular-nums;font-weight:600}
.slip .order__stripe{margin-top:-4px}

/* The patch lead from the chosen unit to the slip (two-column layout, with script). */
.bench__lead{position:absolute;inset:0;z-index:2;width:100%;height:100%;overflow:visible;pointer-events:none;opacity:0;transition:opacity .3s}
.bench__lead[data-on]{opacity:1}
.bench__lead path{fill:none;stroke-linecap:round;stroke-dasharray:1 1}
/* The first time the lead appears it runs out from the unit to the slip (js/purchase.mjs sets the class once and
   takes it off when the run ends, so nothing later can replay it). */
@keyframes lead-in{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:no-preference){
 .bench__lead.lead--in path{animation:lead-in .7s var(--ease-out) .2s backwards}
}
.lead__shade{stroke:rgba(16,24,40,.12);stroke-width:8}
.lead__line{stroke:var(--k-blue);stroke-width:5;filter:drop-shadow(0 0 calc(var(--k-glow) * 5px) var(--k-blue))}
.lead__dot{fill:#fff;stroke:var(--k-blue);stroke-width:2.5;opacity:0}
:root[data-theme=dark] .lead__shade{stroke:rgba(0,0,0,.4)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .lead__shade{stroke:rgba(0,0,0,.4)}}

/* The plan cards below are the account page's (Change plan); the pricing page's plans are the rack. A card is one
   toggle button. Its name is "Choose Lite: 6 vCPU, 8 GB RAM"; the price and example describe it. */
.tier{position:relative;display:grid;grid-template-rows:auto auto 1fr;align-content:start;gap:var(--s-2);width:100%;margin:0;padding:24px 22px;border:1px solid var(--c-line);border-radius:var(--r-card);background:var(--c-surface);color:var(--c-ink);font:inherit;text-align:left;cursor:pointer;box-shadow:var(--shadow-card);-webkit-tap-highlight-color:transparent;transition:border-color .16s var(--ease),box-shadow .16s var(--ease),transform .2s var(--ease-out)}
.tier:hover{border-color:var(--c-line-3)}
.tier:active{transform:translateY(1px)}
.tier:focus-visible{outline:2px solid var(--c-focus);outline-offset:3px}
.tier[aria-pressed=true]{border-color:var(--c-act);box-shadow:inset 0 0 0 1px var(--c-act),var(--shadow-card)}
.tier__head{display:grid;gap:6px;padding-right:32px}
.tier__name{font-size:19px;line-height:1.25;font-weight:600;letter-spacing:-.012em}
.tier__spec{font:550 13px/1.3 var(--f-mono);letter-spacing:.005em;color:var(--c-ink-3)}
.tier__price{display:grid;margin-top:var(--s-4);font-size:15px;color:var(--c-ink-3)}
.tier__price strong{display:block;margin-bottom:6px;font-family:var(--f-display);font-size:clamp(34px,3vw,44px);line-height:1;font-weight:600;letter-spacing:-.012em;color:var(--c-ink);font-variant-numeric:tabular-nums}
html.js [data-active-mode=fixed] .tier__price [data-col=on_demand],html.js [data-active-mode=on_demand] .tier__price [data-col=fixed]{display:none}
html:not(.js) .tier__price [data-col=on_demand] strong{font-size:24px;margin-top:var(--s-3)}
.tier__fit{align-self:end;margin-top:var(--s-4);padding-top:var(--s-4);border-top:1px solid var(--c-line);font-size:14px;line-height:1.45;color:var(--c-ink-2)}
.tier__tick{position:absolute;top:22px;right:20px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--c-line-3);transition:background-color .16s,box-shadow .16s}
.tier__tick::after{content:'';width:12px;height:12px;background:var(--c-act-ink);-webkit-mask:var(--i-tick) center/contain no-repeat;mask:var(--i-tick) center/contain no-repeat;opacity:0;transition:opacity .16s}
.tier[aria-pressed=true] .tier__tick{background:var(--c-act);box-shadow:none}
.tier[aria-pressed=true] .tier__tick::after{opacity:1}
.tier:hover .tier__tick{box-shadow:inset 0 0 0 1.5px var(--c-ink-3)}
.tier[aria-pressed=true]:hover .tier__tick{box-shadow:none}

/* Window options, totals, the renewal box and the lab line: shared with the account page's panels. */
.win__opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.win__opt{position:relative;display:grid;align-content:start;gap:2px;min-width:0;padding:12px 14px 13px;border:1px solid var(--c-line-2);border-radius:var(--r-ctl);background:var(--c-surface);cursor:pointer;transition:border-color .14s,box-shadow .14s}
.win__opt input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.win__opt:hover{border-color:var(--c-line-3)}
.win__opt:has(input:checked){border-color:var(--c-act);box-shadow:inset 0 0 0 1px var(--c-act)}
.win__opt:has(input:focus-visible){outline:2px solid var(--c-focus);outline-offset:2px}
.win__len{font-size:14px;font-weight:600;color:var(--c-ink-2)}
.win__price{font-size:18px;font-weight:600;letter-spacing:-.01em;color:var(--c-ink);font-variant-numeric:tabular-nums}
.win__off{font-size:12.5px;line-height:1.35;color:var(--c-ink-3)}
.order__total{display:grid;gap:6px;padding-top:var(--s-5);border-top:1px solid var(--c-line-2)}
.order__amount{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-3);font-weight:600;font-size:16px}
.order__amount strong{font-family:var(--f-display);font-size:clamp(40px,3.5vw,52px);line-height:1;font-weight:600;letter-spacing:-.012em;font-variant-numeric:tabular-nums}
.order__amount strong[data-empty]{font-family:var(--f-sans);font-size:16px;font-weight:560;letter-spacing:0;color:var(--c-ink-2)}
.order__note{font-size:14.5px;color:var(--c-ink-2)}
.order__for{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;font-size:14.5px;color:var(--c-ink-2)}
.order__for[hidden]{display:none}
.order__for strong{color:var(--c-ink);font-weight:600}
.order__for-x{padding:0;border:0;background:none;font:inherit;font-size:13.5px;color:var(--c-signal);text-decoration:underline;text-underline-offset:.2em;cursor:pointer}
.order__for-x:focus-visible{outline:2px solid var(--c-focus);outline-offset:2px;border-radius:2px}
.order__for-need{flex-basis:100%;font-weight:600;color:var(--c-warn)}
.renew{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:10px;margin-top:var(--s-3);padding:12px 14px;border:1px solid var(--c-line-2);border-radius:var(--r-ctl);background:var(--c-surface);cursor:pointer}
.renew[hidden]{display:none}
.renew:has(.renew__box:checked){border-color:var(--c-signal);box-shadow:0 0 0 1px var(--c-signal)}
.renew__box{width:18px;height:18px;margin:2px 0 0;accent-color:var(--c-signal)}
.renew__box:focus-visible{outline:2px solid var(--c-focus);outline-offset:2px}
.renew__text{display:grid;gap:2px;min-width:0}
.renew__name{font-weight:600;color:var(--c-ink)}
.renew__price{font-size:14px;color:var(--c-ink-2)}
.renewstate{display:grid;gap:8px;margin-top:var(--s-4);padding:12px 14px;border:1px solid var(--c-line);border-radius:var(--r-ctl);background:var(--c-surface-2)}
.renewstate[hidden]{display:none}
.renewstate__text{font-size:15px;line-height:1.55;color:var(--c-ink-2)}
.renewstate__term{font-weight:600;color:var(--c-ink)}
.renewstate__actions:has([hidden]:only-child){display:none}
@media (forced-colors:active){.renew,.renewstate{border:1px solid CanvasText}}
.runbox{display:grid;gap:6px;width:100%;max-width:30em;padding:14px 16px;border:1px solid var(--c-line);border-left:3px solid var(--c-signal);border-radius:var(--r-ctl);background:var(--c-surface)}
.runbox[hidden]{display:none}
.runbox__tag{font:600 12.5px/1.2 var(--f-mono);letter-spacing:.02em;color:var(--c-ink-3)}
.runbox__title{font-size:17px;line-height:1.35;font-weight:600;color:var(--c-ink)}
.runbox__title a{color:inherit}
.runbox__text{font-size:15px;line-height:1.55;color:var(--c-ink-2)}
@media (forced-colors:active){.runbox{border:1px solid CanvasText}}
.order__stripe{display:flex;gap:8px;align-items:flex-start;margin-top:-6px}
.order__stripe svg{flex:none;width:14px;height:14px;margin-top:3px;color:var(--c-ink-3)}
.pick__demo{margin-top:var(--s-3);padding-top:var(--s-5);border-top:1px solid var(--c-line-2);font-size:15.5px;line-height:1.55;color:var(--c-ink-2)}

/* Questions: the heading beside the disclosures. */
.qs{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s-6) var(--s-9);align-items:start}
.qs__head{display:grid;gap:var(--s-4);position:sticky;top:calc(var(--header-h) + 40px)}
.qs .disclosure__body{font-size:16px}
.qs .disclosure__body p+p{margin-top:var(--s-3)}

/* ---------- Free demo ---------- */
.trial{padding:clamp(40px,5.4vw,80px) 0 var(--s-10)}
.trial__grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:var(--s-7) clamp(40px,6vw,96px);align-items:start}
.trial__copy{display:grid;gap:var(--s-5);padding-top:var(--s-5)}
.trial__copy .t-title{max-width:12em}
.trial__copy .t-lede{max-width:25em}
.trial__facts{margin-top:var(--s-2);max-width:28em}
.trial__panel{display:grid;gap:var(--s-5);padding:clamp(24px,2.8vw,36px);scroll-margin-top:calc(var(--header-h) + 16px)}
.trial__title{font-family:var(--f-display);font-size:24px;line-height:1.15;font-weight:600;letter-spacing:-.012em}
.trial__form{display:grid;gap:var(--s-4)}
.trial__form .input[aria-disabled=true]{background:var(--c-sunken);color:var(--c-ink-3);cursor:not-allowed}
.trial__start{font-size:14px;color:var(--c-ink-3);text-align:center}
.trial__alt{padding-top:var(--s-4);border-top:1px solid var(--c-line);font-size:14.5px;color:var(--c-ink-2);text-align:center}

/* The live seat count: one RJ45 socket per demo that can run at once, its link LED lit while that seat is free (and
   glowing in the dark, like the home page's patch panel). The words always carry the number. */
.seatline{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--s-3) var(--s-4);padding:14px 16px;border:1px solid var(--c-line);border-radius:var(--r-ctl);background:var(--c-surface-2)}
.seats{display:flex;gap:6px}
.seats:empty{display:none}
.seats i{position:relative;width:30px;height:24px;border-radius:5px;background:var(--c-socket);box-shadow:inset 0 0 0 1px var(--c-line-2),inset 0 1px 2px rgba(0,0,0,.18)}
.seats i::before{content:'';position:absolute;left:7px;right:7px;top:7px;bottom:5px;border-radius:2px 2px 3px 3px;background:var(--c-socket-2);box-shadow:inset 0 2px 3px rgba(0,0,0,.3)}
.seats i::after{content:'';position:absolute;top:3px;right:3px;width:5px;height:5px;border-radius:50%;background:var(--c-line-3);transition:background-color .2s,box-shadow .2s}
.seats i.is-free::after{background:var(--c-led);box-shadow:0 0 0 2px var(--c-led-glow),0 0 calc(4px + var(--k-glow) * 8px) var(--c-led-glow)}
.seatline__text{grid-column:2;font-size:15px;line-height:1.45;color:var(--c-ink)}
.seats:empty+.seatline__text{grid-column:1/-1}
.seatline[data-state=checking] .seatline__text,.seatline[data-state=unknown] .seatline__text{color:var(--c-ink-2)}
.seatline__actions{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-4);font-size:15px}
.seatline__actions[hidden]{display:none}

/* Text beside a real screen. */
.show{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s-7) var(--s-9);align-items:center}
.show__text{display:grid;gap:var(--s-5);align-content:start}
.show__text .t-lede{max-width:25em}
.show--flip{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.show--flip .show__text{order:2}
.show .sequence{gap:var(--s-4)}

/* ---------- Hand-off pages ---------- */
.handoff{padding:clamp(40px,5.4vw,88px) 0 var(--s-9)}
.handoff__grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:var(--s-7) clamp(40px,6vw,96px);align-items:start}
.handoff__head{display:grid;gap:var(--s-5);align-content:start;justify-items:start;max-width:36em}
.handoff__head .t-title{max-width:13em}
.handoff__head .actions{margin-top:var(--s-1)}
.handoff__head--solo{margin:0 0 var(--s-7)}
.handoff__aside{color:var(--c-ink-2);font-size:15.5px}
.handoff__body{display:grid;gap:var(--s-6)}
/* The order states arrive after the page paints; the section keeps the viewport's height so nothing below it moves on screen. */
.pg-order .handoff{min-height:calc(100svh - var(--header-h))}
.handoff-foot{padding-bottom:var(--s-9)}

/* The state mark: one round mark. A turning ring while checking, a tick once confirmed, a dash when nothing was taken. */
.mark{display:grid;place-items:center;width:52px;height:52px;margin:0;border-radius:50%;background:var(--c-sunken);box-shadow:inset 0 0 0 1px var(--c-line)}
.mark::after{content:'';width:22px;height:22px;background:var(--c-ink-3);-webkit-mask:var(--i-dash) center/contain no-repeat;mask:var(--i-dash) center/contain no-repeat}
.mark--ok,[data-order-view=confirmed] .mark{background:var(--tint-up)}
.mark--ok::after,[data-order-view=confirmed] .mark::after{background:var(--c-up);-webkit-mask-image:var(--i-tick);mask-image:var(--i-tick)}
[data-order-view=failed] .mark{background:var(--tint-warn)}
[data-order-view=failed] .mark::after{background:var(--c-warn);-webkit-mask-image:var(--i-bang);mask-image:var(--i-bang)}
[data-order-view=waiting] .mark{background:var(--t-blue)}
[data-order-view=waiting] .mark::after{background:var(--c-act);-webkit-mask-image:var(--i-clock);mask-image:var(--i-clock)}
[data-order-view=checking] .mark{background:var(--t-blue)}
[data-order-view=checking] .mark::after{width:22px;height:22px;border:2.5px solid var(--c-act);border-right-color:transparent;border-radius:50%;background:none;-webkit-mask:none;mask:none;animation:spin .8s linear infinite}

.receipt{display:grid;gap:var(--s-5);padding:clamp(24px,2.8vw,36px)}
.receipt__foot{font-size:14px;color:var(--c-ink-3)}
.facts{display:grid;margin:0}
.facts>div{display:grid;grid-template-columns:minmax(120px,.36fr) minmax(0,1fr);gap:var(--s-1) var(--s-4);padding:13px 0;border-top:1px solid var(--c-line)}
.facts>div:first-child{border-top:0;padding-top:0}
.facts>div:last-child{padding-bottom:0}
.facts dt{font-size:14.5px;font-weight:560;color:var(--c-ink-3)}
.facts dd{margin:0;min-width:0;font-size:15.5px;font-weight:540;overflow-wrap:anywhere}
.facts dd .cmd{margin-top:2px}
.facts--receipt dd{font-variant-numeric:tabular-nums}
.facts .cmd code{white-space:normal;overflow-wrap:break-word;word-break:normal}
.facts--receipt>div:has(.cmd){grid-template-columns:minmax(0,1fr);gap:8px}
.next{display:grid;gap:var(--s-4)}

/* Cancel: two ways back, side by side. */
.choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4);max-width:920px}
.choice{display:grid;gap:var(--s-3);align-content:start;justify-items:start;padding:clamp(24px,2.6vw,32px)}
.choice h2{font-size:20px;line-height:1.3;font-weight:600;letter-spacing:-.014em}
.choice p{color:var(--c-ink-2);font-size:16px}
.choice .btn{margin-top:var(--s-2)}
.choices__more{margin-top:var(--s-7)}

/* Service checks */
.checks{display:grid;max-width:720px;margin:0;padding:var(--s-2) var(--s-6)}
.checks__row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--s-4);padding:var(--s-4) 0;border-top:1px solid var(--c-line)}
.checks__row:first-child{border-top:0}
.checks dt{display:grid;gap:2px}
.checks dt strong{font-weight:600}
.checks dt span{font-size:14px;color:var(--c-ink-3)}
.checks dd{margin:0;display:inline-flex;align-items:center;gap:8px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--c-ink-2)}
.checks dd::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--c-line-3)}
.checks dd[data-state=ready]{color:var(--c-ink)}
.checks dd[data-state=ready]::before{background:var(--c-led);box-shadow:0 0 0 3px var(--c-led-glow),0 0 calc(var(--k-glow) * 8px) var(--c-led-glow)}
.checks dd[data-state=error]::before{background:var(--c-down)}

/* The demo-ready page picks its wording before it paints (inline script sets data-demo-named on <html>). */
html:not([data-demo-named]) .v-named,html[data-demo-named] .v-anon{display:none}

/* The demo clock (30 Oct 2026, purchase-handoff.mjs initDemoClock): time left under the sign-in button; from 10 minutes
   left it offers Keep this lab, and when time is up the head says the demo has been deleted and the mark turns to a clock. */
.democlock{display:grid;gap:var(--s-2);justify-items:start;width:100%;max-width:30em;padding:14px 16px;border:1px solid var(--c-line);border-radius:var(--r-ctl);background:var(--c-surface-2)}
.democlock__time{display:flex;align-items:baseline;gap:var(--s-3);margin:0}
.democlock__label{font-size:14.5px;font-weight:560;color:var(--c-ink-3)}
.democlock__time strong{font-size:22px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--c-ink)}
.democlock__note{margin:0;font-size:15px;line-height:1.5;color:var(--c-ink-2)}
.democlock .actions{margin-top:var(--s-1)}
[data-demo-phase=soon] .democlock{border-color:var(--c-warn);background:var(--tint-warn)}
[data-demo-phase=soon] .democlock__note{color:var(--c-ink)}
[data-demo-phase=ended] .mark{background:var(--t-blue)}
[data-demo-phase=ended] .mark::after{background:var(--c-act);-webkit-mask-image:var(--i-clock);mask-image:var(--i-clock)}

/* ---------- Responsive ---------- */
@media (max-width:1180px){
 .tier{padding:22px 20px}
 .tier__tick{top:20px;right:18px}
}
/* Two columns with a narrower left: the rack's units stack their hardware under the name and price (css/rack.css). */
@media (min-width:1024px) and (max-width:1279px){
 .bench{column-gap:clamp(40px,4.6vw,56px)}
 .bench .rack{--u-cols:16px minmax(0,1fr) auto 34px 16px;--u-areas:'earl id price jack earr' 'earl hw hw hw earr' 'earl fit fit fit earr';--u-pad:14px 8px;--u-gap:12px;--u-in:18px}
 .bench .unit{row-gap:11px}
 .incl .ticks{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:1023px){
 .buy-head{grid-template-columns:minmax(0,1fr);align-items:start}
 .bench{grid-template-columns:minmax(0,1fr);grid-template-rows:none;row-gap:var(--s-6)}
 .bench__size,.bench__incl,.slip{grid-column:1;grid-row:auto}
 .slip{width:100%;max-width:560px}
 .slip__jack,.bench__lead{display:none}
 .trial__grid,.handoff__grid,.qs,.show{grid-template-columns:minmax(0,1fr)}
 .qs__head{position:static}
 .show--flip .show__text{order:0}
}
/* Tablets: the rack across the top, then the slip beside what every plan includes. */
@media (min-width:760px) and (max-width:1023px){
 .bench{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);column-gap:var(--s-6)}
 .bench__size{grid-column:1/-1}
 .slip{grid-column:1;grid-row:2;max-width:none}
 .bench__incl{grid-column:2;grid-row:2}
 .incl{padding-top:0;border-top:0}
 .incl .ticks{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
 .step__line{padding-left:0}
 .incl .ticks{grid-template-columns:minmax(0,1fr)}
 .slip{max-width:none}
 .slip__head{padding:20px 20px 18px}
 .slip__step{padding:20px 20px 22px}
 /* The account page's plan cards: each becomes a row: the tick, the name and size, the price on the right, the example under them. */
 .tier{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:none;grid-template-areas:'head price' 'fit fit';align-items:center;gap:8px var(--s-3);padding:16px 18px 16px 16px}
 .tier__head{grid-area:head;padding:0 0 0 34px}
 .tier__tick{top:18px;left:16px;right:auto}
 .tier__price{grid-area:price;margin:0;text-align:right;font-size:13.5px}
 .tier__price strong{margin-bottom:2px;font-size:28px}
 .tier__fit{grid-area:fit;margin:0;padding:0 0 0 34px;border:0;font-size:13.5px}
 .win__opts{grid-template-columns:minmax(0,1fr);gap:6px}
 .win__opt{grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:0 var(--s-3);padding:11px 14px}
 .win__opt .win__price{grid-column:2;grid-row:1}
 .win__opt .win__off{grid-column:1/-1}
 .choices{grid-template-columns:minmax(0,1fr)}
 .facts>div{grid-template-columns:minmax(0,1fr);gap:2px}
 .cta__panel{justify-items:start;text-align:left}
 .cta__panel::before{left:0;transform:none;border-radius:0 0 4px 0}
 .cta__panel .actions{justify-content:flex-start}
 .handoff .actions .btn,.cta__panel .btn,.choice .btn{flex:1 1 100%}
 .checks{padding:var(--s-1) var(--s-4)}
}
@media (max-width:360px){
 .span__opts{grid-template-columns:repeat(2,minmax(0,1fr))}
 .span__opt:nth-child(n){border-radius:0;box-shadow:inset 0 0 0 .5px var(--c-line-2)}
 .span__opt:nth-child(n):has(input:checked){box-shadow:inset 0 0 0 2px var(--c-act)}
 .tier__price strong{font-size:24px}
 .toggle button{font-size:13.5px}
 .seats i{width:24px;height:20px}
 .seats i::before{left:5px;right:5px;top:6px;bottom:4px}
}

/* ---------- Preferences ---------- */
@media (prefers-reduced-motion:reduce){.tier:active{transform:none}}
@media (forced-colors:active){
 .tier,.slip,.trial__panel,.receipt,.choice,.checks,.win__opt,.seatline,.cta__panel,.span__opts{border:1px solid CanvasText}
 .tier[aria-pressed=true],.win__opt:has(input:checked),.span__opt:has(input:checked){outline:3px solid Highlight;outline-offset:-3px}
 .step__n{border:1px solid CanvasText}
 .slip__jack,.bench__lead{display:none}
 .tier__tick{forced-color-adjust:none;box-shadow:inset 0 0 0 1.5px CanvasText}
 .tier[aria-pressed=true] .tier__tick{background-color:Highlight}
 .tier[aria-pressed=true] .tier__tick::after{background:HighlightText}
 .toggle button{border:1px solid ButtonText}
 .toggle button[aria-pressed=true]{outline:2px solid Highlight}
 .seats i::after{forced-color-adjust:none;background:CanvasText}
 .seats i.is-free::after{background:Highlight}
 .mark::after,.ticks li::before,.checks dd::before,.tag::before{forced-color-adjust:none;background:CanvasText}
 .status[data-state]{border:1px solid CanvasText}
 .callout__ring{stroke:Highlight}
}

/* Without script: no seat line or "checking" wording that would never resolve (the forms say they need JavaScript). */
html:not(.js) .v-js,html:not(.js) .seatline,html:not(.js) [data-order-view=checking] .mark,html.js .v-nojs{display:none}