/* Quantum EDGE website prototype: layout and components.
   Built only from the tokens in tokens.css. Throwaway prototype code. */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 26px;
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
a { color: var(--orange-text); }
a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
h1, h2, h3, p, figure, blockquote { margin: 0; }
b, strong { font-weight: var(--fw-ui); }
p { text-wrap: pretty; }
::selection { background: var(--selected); color: var(--ink); }

.skip-link { position: absolute; left: 16px; top: -48px; z-index: 50; padding: 10px 16px; border-radius: var(--radius-md); background: var(--ink); color: var(--surface); font-weight: var(--fw-ui); text-decoration: none; }
.skip-link:focus { top: 12px; color: var(--surface); }

/* ---------- Layout ---------- */
.container { max-width: 1280px; margin: 0 auto; padding-inline: 40px; }
.section { padding-block: var(--space-24); background: var(--surface); color: var(--ink); }
.section--panel { background: var(--panel); }
.section.section--flush-top { padding-top: 0; } /* .section twice so the phone padding below does not undo it */
.stack { display: flex; flex-direction: column; gap: var(--space-12); }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(520px, 100%), 1fr)); gap: var(--space-4); }
.grid-2--quotes { grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr)); }
@media (max-width: 640px) {
  .container { padding-inline: 20px; }
  .section { padding-block: var(--space-16); }
}

/* ---------- Type ---------- */
.label { font-size: 20px; line-height: 26px; font-weight: var(--fw-ui); letter-spacing: .01em; text-transform: uppercase; color: var(--role-section-label); } /* orange-text: brand orange passes 4.5:1 only at large sizes */
.display, .hero__title { font-weight: var(--fw-display); letter-spacing: -.02em; text-wrap: balance; }
.headline { font-weight: var(--fw-display); font-size: clamp(38px, 4vw, 56px); line-height: 1.1; letter-spacing: -.015em; text-wrap: balance; }
.lead { font-size: 21px; line-height: 32px; color: var(--ink-muted); max-width: 30em; }
.title { font-size: 34px; line-height: 40px; font-weight: var(--fw-title); letter-spacing: -.01em; }
.muted { color: var(--ink-muted); }
.strong { color: var(--ink); font-weight: var(--fw-ui); }
.caption { font-size: 13px; line-height: 18px; font-weight: var(--fw-quiet); color: var(--ink-muted); }
.em { color: var(--role-text-em); font-weight: var(--fw-ui); }       /* in running text and card titles */
.em-sm { color: var(--role-text-em-small); font-weight: var(--fw-ui); }    /* below 19px */
:is(.display, .hero__title, .headline, .phero__title, .site-footer__cta h2) :is(.em, b, strong) { font-weight: inherit; } /* the orange key phrase keeps the heading weight; the color marks it */
:is(.display, .hero__title, .headline, .phero__title, .site-footer__cta h2, .title, .bridge__title) .em { color: var(--role-heading-em); } /* brand orange at 24px and above */
.mono { font-family: var(--font-mono); }

/* Section headings: centred headline with an orange key phrase, optional lead underneath, no eyebrow label */
.section-head { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); max-width: 980px; margin-inline: auto; text-align: center; }
.section-head .headline { max-width: 20em; }
.section-head .lead { max-width: 34em; }
.section-head__brand { height: 40px; width: auto; margin-bottom: 4px; } /* names the platform the heading refers to */
@media (max-width: 640px) { .section-head__brand { height: 32px; } }

/* ---------- Buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 8px 22px; border-radius: var(--radius-button); border: 1.5px solid transparent; /* one notch slimmer than the original 12px */
  font: inherit; font-weight: var(--fw-ui); font-size: 15px; line-height: 20px; letter-spacing: .02em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: transparent; color: var(--orange-text); border-color: var(--orange); } /* outline only, as in the Quantum EDGE app */
.btn--primary:hover { background: var(--action); border-color: var(--action); color: var(--on-action); }
.btn--secondary { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--secondary:hover { border-color: var(--ink); color: var(--ink); }
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-6); }
.link-arrow { display: inline-flex; align-items: center; gap: 6px; color: var(--orange-text); font-weight: var(--fw-ui); text-decoration: none; }
.link-arrow::after { content: "→"; transition: transform .18s ease; }
.link-arrow:hover { color: var(--orange-text); }
.link-arrow:hover::after { transform: translateX(4px); }

/* ---------- Tags ---------- */
.tag { display: inline-flex; align-items: center; padding: 2px 9px; border: 1px solid currentColor; border-radius: var(--radius-full); font-size: 12px; line-height: 16px; font-weight: var(--fw-ui); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.tag--available { color: var(--success); }
.tag--dev { color: var(--hardware); } /* in development: blue, so it reads apart from the orange actions */
.tag--hardware { color: var(--hardware); background: var(--hardware-soft); border-color: transparent; padding: 3px 9px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.site-header.is-scrolled { border-bottom-color: var(--line); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 68px; }
.site-header__logo img { height: 24px; width: auto; }
.site-header__logo--company img { height: 36px; } /* its wordmark is set small beside the mark, so it needs more height to match the nav */
.site-nav { display: flex; align-items: center; gap: 28px; font-weight: var(--fw-ui); font-size: 16px; }
.site-nav a:not(.btn) { position: relative; color: var(--ink); text-decoration: none; padding-block: 6px; }
.site-nav a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform .2s ease; }
.site-nav a:not(.btn):hover::after { transform: scaleX(1); }
/* Solutions dropdown: products grouped by foundation */
.nav-drop { position: relative; }
.nav-drop__toggle { display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; border: 0; background: none; color: var(--ink); font: inherit; cursor: pointer; }
.nav-drop__toggle svg { transition: transform .2s ease; }
.nav-drop__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-drop__toggle.is-current { box-shadow: inset 0 -2px 0 var(--orange); }
.nav-drop__panel { position: absolute; top: calc(100% + 14px); left: 50%; z-index: 30; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; width: min(620px, calc(100vw - 32px)); padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: 0 2px 6px rgb(16 25 33 / 6%), 0 18px 44px rgb(16 25 33 / 14%); opacity: 0; visibility: hidden; transform: translate(-50%, -6px); transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s; }
.nav-drop__panel::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; } /* keeps hover alive across the gap */
.nav-drop.is-open .nav-drop__panel { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
.nav-drop__group { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nav-drop__kicker { padding: 0 12px 6px; font-size: 12px; line-height: 16px; font-weight: var(--fw-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.site-nav .nav-drop__panel a { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: var(--radius-md); }
.site-nav .nav-drop__panel a::after { display: none; }
.site-nav .nav-drop__panel a:hover, .site-nav .nav-drop__panel a:focus-visible { background: var(--panel); }
.site-nav .nav-drop__panel a[aria-current="page"] { background: var(--selected); }
.nav-drop__panel strong { display: flex; align-items: center; gap: 8px; font-size: 16px; line-height: 22px; font-weight: var(--fw-title); }
.nav-drop__panel a span { font-size: 14px; line-height: 20px; font-weight: 400; color: var(--ink-muted); }
.nav-drop__badge { padding: 1px 8px; border: 1px solid currentColor; border-radius: var(--radius-full); color: var(--hardware); font-size: 10px; line-height: 14px; font-style: normal; font-weight: var(--fw-ui); letter-spacing: .06em; text-transform: uppercase; }
.site-nav .nav-drop__panel a.nav-drop__all { margin-top: auto; color: var(--orange-text); font-size: 14px; font-weight: var(--fw-ui); }
.nav-toggle { display: none; background: none; border: 0; padding: var(--space-2); color: var(--ink); cursor: pointer; }
.nav-toggle svg { display: block; }
@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .site-nav { display: none; position: absolute; left: 0; right: 0; top: 68px; flex-direction: column; align-items: stretch; gap: 0; padding: var(--space-3) 20px var(--space-6); background: var(--surface); border-bottom: 1px solid var(--line); }
  .site-nav a:not(.btn) { padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
  .site-nav a:not(.btn)::after { display: none; }
  .site-nav .btn { margin-top: var(--space-4); align-self: flex-start; }
  .site-header.is-open .site-nav { display: flex; max-height: calc((100svh / var(--zoom, 1)) - 68px); overflow-y: auto; }
  /* In the phone menu the dropdown opens in place, as an indented list */
  .nav-drop__toggle { width: 100%; justify-content: space-between; padding: var(--space-3) 0; border-bottom: 1px solid var(--line); text-align: left; }
  .nav-drop__toggle.is-current { box-shadow: none; color: var(--orange-text); }
  .nav-drop__panel { position: static; display: none; width: auto; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 12px 0 16px 12px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none; transition: none; }
  .nav-drop__panel::before { content: none; }
  .nav-drop.is-open .nav-drop__panel { display: grid; transform: none; }
  .site-nav .nav-drop__panel a { padding: 8px 10px; border-bottom: 0; }
  .nav-drop__kicker { padding: 0 10px 2px; }
}

/* ---------- Hero ---------- */
.hero { padding-block: 64px 88px; display: flex; flex-direction: column; gap: 40px; }
.hero__top { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.hero__title { font-size: clamp(46px, 5.6vw, 82px); line-height: 1.02; max-width: 15em; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; }
.hero__text { display: flex; flex-direction: column; gap: 32px; align-items: flex-start; padding-top: 8px; }
.hero__text .lead { font-size: 22px; line-height: 34px; }
.hero__media { position: relative; }
.hero__frame { position: relative; aspect-ratio: 16 / 10; border-radius: var(--radius-lg); overflow: hidden; background: var(--panel); }
.hero__screen { position: relative; z-index: 1; width: min(400px, 70%); margin: -132px 0 0 -40px; padding: 8px; display: flex; flex-direction: column; gap: 8px; border-radius: var(--radius-lg); background: var(--panel-inset); border: 1px solid var(--line); }
.hero__screen figcaption { padding: 0 6px 4px; transition: opacity .4s ease; }

/* Hero sequence: real scenes crossfade with a slow zoom; the screenshot follows the scene */
.hero__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; opacity: 0; transform: scale(1); transition: opacity 1.2s ease, transform 0s linear 1.2s; }
.hero__photo.is-active { opacity: 1; }
.hero__shots { position: relative; aspect-ratio: 1837 / 1016; border-radius: var(--radius-md); overflow: hidden; background: #141414; }
.hero__shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left top; opacity: 0; transition: opacity .8s ease .25s; }
.hero__shot.is-active { opacity: 1; }
.hero__dots { position: absolute; top: 16px; right: 16px; z-index: 1; display: flex; gap: 6px; padding: 4px 10px; border-radius: var(--radius-full); background: rgba(16, 25, 33, .45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hero__dots button { width: 30px; padding: 9px 0; border: 0; background: none; cursor: pointer; }
.hero__dots span { position: relative; display: block; height: 3px; border-radius: 2px; overflow: hidden; background: rgba(255, 255, 255, .45); }
.hero__dots span::after { content: ""; position: absolute; inset: 0; background: var(--orange); transform: scaleX(0); transform-origin: left; }
.hero__dots [aria-current="true"] span::after { transform: scaleX(1); }
@media (prefers-reduced-motion: no-preference) {
  .hero__photo.is-active { transform: scale(1.06); transition: opacity 1.2s ease, transform 9s linear; }
  .is-playing .hero__dots [aria-current="true"] span::after { transform: scaleX(0); animation: dot-fill var(--hero-dur, 7s) linear forwards; }
  .is-playing.is-paused .hero__dots [aria-current="true"] span::after { animation-play-state: paused; }
}
@keyframes dot-fill { to { transform: scaleX(1); } }
:root:not([data-hero="sequence"]):not([data-hero="both"]):not([data-hero="screens"]) .hero__dots { display: none; }

/* Option: depth. Photo and screenshot drift a few pixels against each other with the pointer.
   Uses the individual translate/scale properties so it never fights the load-in animation. */
:root[data-hero="parallax"] .hero__photo.is-active { transform: none; scale: 1.08; translate: calc(var(--px, 0) * -12px) calc(var(--py, 0) * -8px); transition: opacity 1.2s ease, translate .6s cubic-bezier(.2, .7, .2, 1); }
:root[data-hero="parallax"] .hero__screen { translate: calc(var(--px, 0) * 18px) calc(var(--py, 0) * 12px); transition: translate .6s cubic-bezier(.2, .7, .2, 1); }

/* Option: cryostat line drawing */
.hero__cryo, .hero__instrument { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }
:root[data-hero="cryostat"] .hero__cryo { display: block; }
:root[data-hero="instrument"] .hero__instrument { display: block; }
:root[data-hero="cryostat"] .hero__photo, :root[data-hero="instrument"] .hero__photo { visibility: hidden; }
:root[data-hero="instrument"] .hero__screen { display: none; }
.hero__cryo { background: var(--panel); }
.cryo-grid { fill: none; stroke: var(--line); stroke-width: 1; opacity: .6; }
.cryo-plate { fill: var(--hardware-soft); stroke: var(--hardware); stroke-width: 1.5; }
.cryo-rod { stroke: var(--hardware); stroke-width: 1.5; }
.cryo-line { fill: none; stroke: var(--hardware); stroke-width: 1.1; opacity: .75; }
.cryo-leader { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 3 3; }
.cryo-label { font-family: var(--font-mono); font-size: 12px; fill: var(--ink-muted); }
.cryo-title { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .08em; fill: var(--hardware); }
.cryo-holder { fill: var(--surface); stroke: var(--hardware); stroke-width: 1.5; }
.cryo-qpu { fill: var(--role-graphic); }
.cryo-halo { fill: var(--role-graphic); opacity: 0; }
/* VIDYAQAR system drawing: software in orange, hardware in blue, matching the reference-configuration list */
.sys-sw { fill: var(--surface); stroke: var(--role-graphic); stroke-width: 1.5; stroke-linejoin: round; }
.sys-sw-line { fill: none; stroke: var(--role-graphic); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sys-sw-line--thin { stroke-width: 1; opacity: .7; }
.sys-sw-line--dash { stroke-dasharray: 3 3; }
.sys-port { fill: var(--hardware); }
.sysdraw .cryo-label { font-size: 14px; }
.sysdraw .sys-name { fill: var(--ink); font-family: var(--font-sans); font-weight: var(--fw-ui); } /* component names in the body face; only the temperature scale stays in mono */
.sysdraw .cryo-qpu, .sysdraw .cryo-halo { fill: var(--hardware); }
/* Phones get a taller drawing (fridge under the rack) so the labels stay readable */
.sysdraw.sysdraw--phone { display: none; }
@media (max-width: 640px) { .sysdraw.sysdraw--wide { display: none; } .sysdraw.sysdraw--phone { display: block; max-width: 420px; margin-inline: auto; } .sysmap .sysmap__visual { padding: 12px; } }
@media (prefers-reduced-motion: no-preference) {
  :is(.hero__cryo.is-drawing, .sysdraw.is-visible) .draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1s cubic-bezier(.4, 0, .2, 1) forwards; animation-delay: var(--d, 0s); }
  :is(.hero__cryo.is-drawing, .sysdraw.is-visible) .cryo-plate { fill-opacity: 0; animation: draw 1s cubic-bezier(.4, 0, .2, 1) forwards, fill-in .6s ease forwards; animation-delay: var(--d, 0s), calc(var(--d, 0s) + .6s); }
  :is(.hero__cryo.is-drawing, .sysdraw.is-visible) .fade { opacity: 0; animation: fade-in .6s ease forwards; animation-delay: var(--d, 0s); }
  :is(.hero__cryo.is-drawing, .sysdraw.is-visible) .cryo-halo { transform-box: fill-box; transform-origin: center; animation: halo 2.6s ease-out 2.4s infinite; }
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fill-in { to { fill-opacity: 1; } }
@keyframes fade-in { to { opacity: 1; } }

/* Industry options: batch, platform stack, scale, test floor, design loop */
.hero__batch, .hero__lifecycle, .hero__scale, .hero__floor, .hero__loop { position: absolute; inset: 0; display: none; }
:root[data-hero="batch"] .hero__batch, :root[data-hero="lifecycle"] .hero__lifecycle, :root[data-hero="scale"] .hero__scale, :root[data-hero="floor"] .hero__floor, :root[data-hero="loop"] .hero__loop, :root[data-hero^="fullfloor"] .hero__floor { display: block; }
:root[data-hero="batch"] .hero__photo, :root[data-hero="lifecycle"] .hero__photo, :root[data-hero="scale"] .hero__photo, :root[data-hero="floor"] .hero__photo, :root[data-hero="loop"] .hero__photo, :root[data-hero^="fullfloor"] .hero__photo { visibility: hidden; }
:root[data-hero="batch"] .hero__screen, :root[data-hero="lifecycle"] .hero__screen, :root[data-hero="scale"] .hero__screen, :root[data-hero="floor"] .hero__screen, :root[data-hero="loop"] .hero__screen, :root[data-hero^="fullfloor"] .hero__screen { display: none; }
.hero__panel-bar { position: absolute; top: 0; left: 0; right: 0; z-index: 1; display: flex; justify-content: space-between; gap: 12px; padding: 14px 18px; font-family: var(--font-mono); font-size: 12px; line-height: 18px; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--line); background: var(--surface); }

/* Batch: a grid of QPUs moving through test */
.hero__batch { background: var(--surface); color: var(--ink); }
.batch-grid { position: absolute; top: 48px; bottom: 44px; left: 0; right: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 64px)); gap: clamp(6px, 2vw, 14px); place-content: center; padding: 16px; }
.batch-chip { position: relative; aspect-ratio: 1; border: 1.5px solid var(--line); border-radius: 8px; background: var(--panel-inset); transition: border-color .3s ease, background-color .3s ease; }
.batch-chip::before { content: ""; position: absolute; inset: 30%; border: 1.5px solid var(--line-strong); border-radius: 3px; transition: border-color .3s ease, background-color .3s ease; }
.batch-chip::after { content: ""; position: absolute; inset: 16%; border: 1px dashed var(--line); border-radius: 4px; }
.batch-chip.is-testing { border-color: var(--role-graphic); }
.batch-chip.is-testing::before { border-color: var(--role-graphic); background: color-mix(in srgb, var(--role-graphic) 35%, transparent); }
.batch-chip.is-pass { border-color: var(--success); background: color-mix(in srgb, var(--success) 14%, var(--panel-inset)); }
.batch-chip.is-pass::before { border-color: var(--success); background: var(--success); }
.batch-chip.is-flag { border-color: var(--error); background: color-mix(in srgb, var(--error) 14%, var(--panel-inset)); }
.batch-chip.is-flag::before { border-color: var(--error); background: var(--error); }
@media (prefers-reduced-motion: no-preference) { .batch-chip.is-testing { animation: chip-blink .8s ease-in-out infinite alternate; } }
@keyframes chip-blink { to { border-color: color-mix(in srgb, var(--orange) 40%, transparent); } }
.batch-legend { position: absolute; left: 0; right: 0; bottom: 0; height: 44px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 20px; padding: 0 16px; border-top: 1px solid var(--line); font-size: 13px; line-height: 18px; font-weight: var(--fw-quiet); color: var(--ink-muted); background: var(--surface); }
.batch-legend span { display: inline-flex; align-items: center; gap: 8px; }
.batch-legend i { width: 12px; height: 12px; border-radius: 3px; border: 1.5px solid var(--line-strong); }
.batch-legend i.is-testing { border-color: var(--role-graphic); }
.batch-legend i.is-pass { border-color: var(--success); background: var(--success); }
.batch-legend i.is-flag { border-color: var(--error); background: var(--error); }

/* Platform stack: every stage of QPU development on one platform, writing to one record */
.hero__lifecycle { background: var(--panel); color: var(--ink); }
.pstack { position: absolute; top: 48px; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 8px; padding: 16px; }
.pstack__band { flex: none; display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 34px; padding: 4px 14px; border-radius: var(--radius-md); font-size: 13px; line-height: 18px; font-weight: var(--fw-ui); text-align: center; }
.pstack__band--platform { background: var(--action); color: var(--on-action); }
.pstack__band--record { justify-content: space-between; min-height: 40px; border: 1px solid var(--line); background: var(--surface); text-align: left; }
.pstack__band--sdk { background: var(--ink); color: var(--surface); font-weight: var(--fw-ui); }
.pstack__slots { flex: none; display: flex; gap: 6px; }
.pstack__slots i { width: 18px; height: 8px; border-radius: 2px; background: var(--line); transition: background-color .3s ease; }
.pstack__slots i.is-on { background: var(--role-graphic); transition-delay: .45s; }
.pstack__cols { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.pstack__col { position: relative; display: grid; grid-template-rows: 1fr 1.4fr 1fr; gap: 4px; min-width: 0; }
.pstack__cell { display: flex; align-items: center; justify-content: center; min-width: 0; hyphens: none; padding: 4px; border-radius: var(--radius-sm); border: 1.5px solid var(--line); background: var(--surface); text-align: center; font-size: 12px; line-height: 15px; font-weight: var(--fw-ui); transition: background-color .3s ease, border-color .3s ease, color .3s ease; }
.pstack__cell--flow { color: var(--ink-muted); }
.pstack__cell--stage { font-size: 12px; line-height: 16px; font-weight: var(--fw-ui); }
.pstack__cell--hw { border-color: transparent; background: var(--hardware-soft); color: var(--hardware); }
.pstack__pulse { position: absolute; left: 50%; top: -8px; width: 2px; height: 8px; margin-left: -1px; background: var(--role-graphic); opacity: 0; transition: opacity .3s ease; }
.pstack__col.is-done .pstack__cell--stage { border-color: color-mix(in srgb, var(--role-graphic) 40%, var(--line)); }
.pstack__col.is-active .pstack__cell--hw { background: var(--hardware); color: var(--on-hardware); }
.pstack__col.is-active .pstack__cell--stage { border-color: var(--role-graphic); transition-delay: .15s; }
.pstack__col.is-active .pstack__cell--flow { border-color: var(--role-graphic); color: var(--role-graphic-text); transition-delay: .3s; }
.pstack__col.is-active .pstack__pulse { opacity: 1; transition-delay: .45s; }

/* Scale: real device layouts, from a 5-qubit test chip to kilo-qubit processors */
.hero__scale { background: var(--panel); }
.hero__scale-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero__scale-count { position: absolute; top: 72px; left: 28px; display: flex; align-items: baseline; gap: 10px; }
.hero__scale-count [data-scale-n] { font-size: 54px; line-height: 1; font-weight: var(--fw-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--ink); }
.hero__scale-unit { font-size: 18px; font-weight: var(--fw-title); color: var(--ink-muted); }
.scale-steps { position: absolute; left: 0; right: 0; bottom: 0; height: 44px; display: flex; justify-content: center; align-items: center; gap: clamp(6px, 2.4vw, 18px); border-top: 1px solid var(--line); background: var(--surface); font-family: var(--font-mono); font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.scale-steps span { padding: 2px 8px; border-radius: var(--radius-full); transition: color .3s ease, background-color .3s ease; }
.scale-steps span.is-on { background: var(--action); color: var(--on-action); }

/* Test floor and design loop: real text in a layout, with wires drawn between the pieces */
.wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.wire { fill: none; stroke: var(--line-strong); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.wire--data { stroke: color-mix(in srgb, var(--role-graphic) 55%, var(--line)); stroke-dasharray: 4 5; }
.wire-head { fill: var(--line-strong); }
.wire-head--data { fill: var(--role-graphic); }
.pulse { fill: var(--role-graphic); }

/* Test floor: every test system and every team on one platform */
.hero__floor { background-color: var(--panel); background-image: radial-gradient(circle, color-mix(in srgb, var(--line-strong) 30%, transparent) 1px, transparent 1.5px); background-size: 18px 18px; background-position: 9px 9px; color: var(--ink); }
.floor { position: absolute; inset: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: clamp(28px, 8%, 60px); padding: 24px clamp(16px, 4.5%, 32px); }
.floor .wires { z-index: 1; } /* ports and packets sit on the card edges */
.floor .wire { stroke: color-mix(in srgb, var(--line-strong) 55%, var(--panel)); }
.wire-port { fill: var(--surface); stroke: color-mix(in srgb, var(--line-strong) 75%, var(--panel)); stroke-width: 1.5; transition: fill .5s ease, stroke .5s ease; }
.wire-port.is-live { fill: var(--role-graphic); stroke: var(--role-graphic); transition-duration: .1s; }
.packet-trail { fill: none; stroke: var(--role-graphic); stroke-width: 2.5; stroke-linecap: round; opacity: .45; }
.packet-head { fill: var(--role-graphic); }
.floor__icon { flex: none; width: 42px; height: 35px; fill: none; stroke: var(--hardware); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.floor__teams, .floor__stations { position: relative; display: flex; flex-direction: column; }
/* Device Analytics: the teams in order along the top, the record underneath, results flowing back through it */
.floor--teams { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; justify-items: center; row-gap: 52px; }
.floor--teams .floor__teams { flex-direction: row; gap: 30px; }
.floor--teams .floor__team { position: relative; }
.floor--teams .floor__team + .floor__team::before { content: "→"; position: absolute; right: calc(100% + 8px); top: 50%; transform: translateY(-50%); font-size: 15px; font-weight: var(--fw-ui); color: var(--ink-muted); }
.floor--teams .floor__screen { width: 86px; height: 54px; }
.floor--teams .floor__core { width: min(300px, 70%); }
@media (max-width: 640px) {
  .floor--teams .floor__teams { gap: 14px; }
  .floor--teams .floor__team + .floor__team::before { right: calc(100% + 2px); font-size: 11px; }
  .floor--teams .floor__screen { width: 60px; height: 38px; }
}
.floor__teams { gap: 8px; }
.floor__stations { gap: 10px; }
.floor__team { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 8px 4px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: 0 1px 2px rgb(16 25 33 / 4%), 0 6px 18px rgb(16 25 33 / 5%); font-size: 12px; line-height: 16px; font-weight: var(--fw-ui); color: var(--ink-muted); transition: border-color .5s ease; }
.floor__team.is-receiving, .floor__team.is-sending { border-color: color-mix(in srgb, var(--role-graphic) 50%, var(--line)); transition-duration: .15s; }
/* Team screens: small dark app views that change when results arrive */
.floor__screen { display: block; width: 68px; height: 43px; border-radius: 6px; background: #1a1a1a; }
.floor__screen .wafer { fill: #222222; stroke: #4a4a4a; stroke-width: 1.2; }
.floor__screen .die { transition: fill .6s ease; }
.floor__screen .grid { stroke: #2c2c2c; stroke-width: 1; }
.floor__screen .coupler { stroke: #474747; stroke-width: 2; stroke-linecap: round; }
.floor__screen circle { transition: fill .6s ease; }
.floor__screen .sweep { fill: none; stroke: var(--role-graphic); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.floor__team.is-receiving .sweep { animation: ln-draw .9s ease-out; }
@keyframes ln-draw { from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; } }
.floor__screen .bar { fill: #4d4d4d; transform-box: fill-box; transform-origin: bottom; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.floor__screen .bar--new { fill: var(--role-graphic); }
.floor__screen .trace { fill: none; stroke: #6a6a6a; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; transition: stroke .6s ease; }
.floor__screen .trace--new { stroke: var(--role-graphic); stroke-width: 1.5; }
.floor__screen .label { fill: #8d8d8d; font-family: var(--font-mono); font-size: 6.5px; font-weight: 600; }
.floor__station { position: relative; display: flex; align-items: center; gap: 12px; padding: 8px 20px 8px 8px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: 0 1px 2px rgb(16 25 33 / 4%), 0 6px 18px rgb(16 25 33 / 5%); }
.floor__badge { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; background: var(--hardware-soft); }
.floor__badge .floor__icon { width: 28px; height: 24px; }
.floor__station b { display: block; font-size: 14px; line-height: 18px; font-weight: var(--fw-ui); }
.floor__station small { display: block; font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.floor__led { position: absolute; top: 9px; right: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--line); transition: background-color .3s ease, box-shadow .3s ease; }
.floor__station.is-sending .floor__led { background: var(--role-graphic); box-shadow: 0 0 0 3px color-mix(in srgb, var(--role-graphic) 22%, transparent); }
.floor__core { position: relative; justify-self: center; width: 100%; max-width: 200px; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px 18px 20px; border: 1.5px solid var(--role-graphic); border-radius: var(--radius-lg); background: var(--surface); box-shadow: 0 1px 2px rgb(16 25 33 / 5%), 0 10px 28px rgb(16 25 33 / 7%); }
.floor__core img { display: block; width: 100%; max-width: 160px; height: auto; }
.floor__core span { font-size: 13px; line-height: 18px; font-weight: var(--fw-quiet); color: var(--ink-muted); text-align: center; }

/* Design loop: design, fabrication and measurement, with measured parameters flowing back */
.hero__loop { background: var(--panel); color: var(--ink); }
.loop { position: absolute; top: 48px; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; padding: 12px clamp(16px, 5%, 32px); }
.loop__note { position: relative; margin: 0 0 64px; text-align: center; font-size: 14px; line-height: 20px; font-weight: var(--fw-ui); color: var(--role-graphic-label); }
.loop__row { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(22px, 7%, 48px); }
.loop__card { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 22px 10px 20px; border: 1.5px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); text-align: center; }
.loop__card b { font-size: 17px; line-height: 22px; font-weight: var(--fw-title); }
.loop__card small { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.loop__card .floor__icon { margin-bottom: 8px; }
.loop__card--measure { border-color: var(--role-graphic); }
.loop__out { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(22px, 7%, 48px); margin-top: 30px; }
.loop__out span { grid-column: 3; justify-self: center; padding: 5px 14px; white-space: nowrap; border-radius: var(--radius-full); border: 1px solid var(--line); background: var(--surface); font-size: 13px; line-height: 18px; font-weight: var(--fw-ui); color: var(--ink-muted); text-align: center; }

@media (max-width: 640px) {
  .hero__frame { aspect-ratio: 4 / 3; }
  :root[data-hero="lifecycle"] .hero__frame, :root[data-hero="loop"] .hero__frame, :root[data-hero="floor"] .hero__frame, :root[data-hero^="fullfloor"] .hero__frame { aspect-ratio: 1 / 1; }
  .batch-grid { grid-template-columns: repeat(6, minmax(0, 32px)); gap: 8px; padding: 10px; }
  .hero__panel-bar { padding: 10px 12px; font-size: 10px; }
  .batch-legend { font-size: 11px; gap: 4px 12px; }
  .pstack, .loop { top: 39px; }
  .pstack { gap: 6px; padding: 10px; }
  .pstack__band { min-height: 28px; padding: 3px 8px; font-size: 11px; line-height: 14px; }
  .pstack__band--record { min-height: 32px; }
  .pstack__slots { gap: 3px; }
  .pstack__slots i { width: 9px; }
  .pstack__cols { gap: 5px; }
  .pstack__col { gap: 3px; }
  .pstack__cell { hyphens: manual; padding: 2px; border-width: 1px; font-size: 8.5px; line-height: 11px; letter-spacing: -.01em; }
  .pstack__cell--stage { font-size: 9.5px; line-height: 12px; }
  .pstack__pulse { top: -6px; height: 6px; }
  .hero__scale-count { top: 54px; left: 16px; }
  .hero__scale-count { gap: 6px; }
  .hero__scale-count [data-scale-n] { font-size: 30px; }
  .hero__scale-unit { font-size: 12px; }
  .scale-steps { height: 38px; font-size: 11px; }
  .scale-steps span { padding: 2px 6px; }
  /* Phones: the floor stands up. Teams in a row on top, the record in the middle, test systems in a row below */
  .floor { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; align-content: center; row-gap: 44px; column-gap: 0; padding: 14px 10px; }
  .floor__teams, .floor__stations { flex-direction: row; gap: 6px; }
  .floor__team, .floor__station { flex: 1 1 0; min-width: 0; }
  .floor__team { gap: 4px; padding: 5px 5px 4px; border-radius: 8px; font-size: 10px; line-height: 13px; }
  .floor__screen { width: 100%; height: auto; aspect-ratio: 76 / 48; border-radius: 4px; }
  .floor__station { flex-direction: column; justify-content: flex-start; gap: 5px; padding: 6px 4px 7px; border-radius: 8px; text-align: center; }
  .floor__station small { display: none; }
  .floor__station b { font-size: 10.5px; line-height: 13px; }
  .floor__badge { width: 30px; height: 30px; border-radius: 6px; }
  .floor__badge .floor__icon { width: 21px; height: 18px; }
  .floor__led { top: 5px; right: 5px; width: 5px; height: 5px; }
  .floor__core { max-width: 230px; padding: 12px 14px 10px; gap: 6px; }
  .floor__core img { max-width: 150px; }
  .floor__core span { font-size: 11px; line-height: 14px; }
  /* Bar labels sit at either end rather than squeezing into their segments */
  .cycle__labels { justify-content: space-between; }
  .cycle__labels span { flex: none !important; }
  .loop { padding: 10px 12px; }
  .loop__note { margin-bottom: 52px; font-size: 11px; line-height: 15px; }
  .loop__row, .loop__out { gap: 18px; }
  .loop__card { padding: 10px 4px; }
  .loop__card .floor__icon { width: 28px; height: 24px; margin-bottom: 4px; }
  .loop__card b { font-size: 12px; line-height: 16px; }
  .loop__card small { font-size: 9.5px; line-height: 12px; }
  .loop__out span { padding: 3px 8px; white-space: normal; font-size: 10px; line-height: 13px; }
}

/* Option: instrument panel */
.hero__instrument { background-color: var(--surface); background-image: linear-gradient(#1a1a1a 1px, transparent 1px), linear-gradient(90deg, #1a1a1a 1px, transparent 1px); background-size: 40px 40px; color: var(--ink); }
.hero__instrument-bar { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; gap: 12px; padding: 14px 18px; font-family: var(--font-mono); font-size: 12px; line-height: 18px; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--line); background: var(--surface); }
.hero__instrument-canvas { position: absolute; left: 0; right: 0; top: 48px; bottom: 34px; width: 100%; height: calc(100% - 82px); display: block; }
.hero__instrument-label { position: absolute; left: 0; top: 0; padding: 2px 8px; border-radius: var(--radius-full); background: var(--panel); font-family: var(--font-mono); font-size: 12px; line-height: 18px; color: var(--role-graphic-label); white-space: nowrap; opacity: 0; transition: opacity .4s ease; }
.hero__instrument-label.is-on { opacity: 1; }
.hero__instrument-axis { position: absolute; left: 0; right: 0; bottom: 0; height: 34px; display: flex; justify-content: space-between; align-items: center; padding: 0 18px; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 12px; color: var(--ink-muted); background: var(--surface); }

/* Option 14 · Full-bleed test floor: a dark, full-height first section where the test floor fills the stage */
:root[data-hero^="fullfloor"] .hero {
  --gutter: max(40px, calc((100% - 1200px) / 2));
  position: relative; isolation: isolate; max-width: none; margin: 0;
  min-height: calc((100svh / var(--zoom, 1)) - 68px); padding: clamp(24px, (4svh / var(--zoom, 1)), 48px) var(--gutter) clamp(28px, (5svh / var(--zoom, 1)), 64px);
  color: var(--ink);
  background-size: 22px 22px; background-position: 11px 11px;
}
:root[data-hero="fullfloor"] .hero { background-color: #070707; background-image: radial-gradient(circle, rgb(255 255 255 / 7%) 1px, transparent 1.6px); }
:root[data-hero^="fullfloor"] .hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
:root[data-hero="fullfloor"] .hero::before { background: radial-gradient(ellipse 55% 55% at 66% 66%, rgb(220 68 10 / 14%), transparent 70%), linear-gradient(#070707, transparent 22%, transparent 80%, #070707); }
:root[data-hero^="fullfloor"] .hero__frame { background: transparent; border-radius: 0; overflow: visible; }
:root[data-hero^="fullfloor"] .hero__photo { display: none; } /* its slow zoom would spill out of the unclipped frame */
:root[data-hero^="fullfloor"] .hero__floor { background: transparent; }
:root[data-hero="fullfloor"] .floor .wire { stroke: rgb(255 255 255 / 22%); }
:root[data-hero="fullfloor"] .wire-port { fill: #070707; stroke: rgb(255 255 255 / 45%); }
:root[data-hero="fullfloor"] .wire-port.is-live { fill: var(--role-graphic); stroke: var(--role-graphic); }
:root[data-hero^="fullfloor"] .packet-head { filter: drop-shadow(0 0 5px var(--role-graphic)); }
:root[data-hero="fullfloor"] .packet-trail { opacity: .6; }
:root[data-hero="fullfloor"] .floor__team, :root[data-hero="fullfloor"] .floor__station { border-color: #2a2a2a; background: #111111; box-shadow: none; }
:root[data-hero="fullfloor"] .floor__team.is-receiving, :root[data-hero="fullfloor"] .floor__team.is-sending { border-color: color-mix(in srgb, var(--role-graphic) 60%, #2a2a2a); }
:root[data-hero="fullfloor"] .floor__screen { background: #040404; }
:root[data-hero="fullfloor"] .floor__led { background: #3a3a3a; }
:root[data-hero="fullfloor"] .floor__core { border-color: var(--role-graphic); background: #0c0c0c; box-shadow: 0 0 0 1px var(--role-graphic), 0 0 90px rgb(220 68 10 / 32%); }
:root[data-hero="fullfloor"] .floor__core img { content: url("../logos/qe-wordmark-reverse.svg"); }
:root[data-hero="fullfloor"] .site-header.on-dark { background: rgb(7 7 7 / 94%); border-bottom-color: transparent; }
:root[data-hero="fullfloor"] .site-header.on-dark .site-header__logo img { content: url("../logos/quantrolox-reverse.svg"); }
@media (min-width: 1280px) {
  /* one centred composition: heading, buttons, then the test floor across the full width */
  :root[data-hero^="fullfloor"] .hero { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto clamp(360px, calc((64svh / var(--zoom, 1)) - 120px), 600px); align-content: center; gap: clamp(18px, (3svh / var(--zoom, 1)), 32px) 0; }
  :root[data-hero^="fullfloor"] .hero__top { grid-column: 1; align-items: center; gap: clamp(14px, (2.4svh / var(--zoom, 1)), 24px); text-align: center; }
  :root[data-hero^="fullfloor"] .hero__title { max-width: 13em; font-size: clamp(50px, min(6.4vw, (9.4svh / var(--zoom, 1))), 98px); text-align: center; text-wrap: balance; }
  :root[data-hero^="fullfloor"] .hero__grid { display: contents; }
  :root[data-hero^="fullfloor"] .hero__text { grid-row: 2; align-items: center; padding: 0; }
  :root[data-hero^="fullfloor"] .hero__text .btn-row { justify-content: center; }
  :root[data-hero^="fullfloor"] .hero__media { grid-row: 3; align-self: stretch; }
  :root[data-hero^="fullfloor"] .hero__frame { height: 100%; aspect-ratio: auto; }
  /* matching tile columns either side of the core */
  :root[data-hero^="fullfloor"] .floor { grid-template-columns: 264px minmax(0, 1fr) 264px; column-gap: 32px; padding: 36px 0 12px; }
  :root[data-hero^="fullfloor"] .floor__teams, :root[data-hero^="fullfloor"] .floor__stations { gap: 14px; }
  :root[data-hero^="fullfloor"] .floor__team, :root[data-hero^="fullfloor"] .floor__station { box-sizing: border-box; width: 100%; height: 76px; padding: 12px 18px 12px 12px; gap: 14px; }
  :root[data-hero^="fullfloor"] .floor__team { flex-direction: row; font-size: 15px; line-height: 20px; color: var(--ink); }
  :root[data-hero^="fullfloor"] .floor__screen { flex: none; width: 82px; height: 52px; }
  :root[data-hero^="fullfloor"] .floor__badge { width: 52px; height: 52px; border-radius: 10px; }
  :root[data-hero^="fullfloor"] .floor__badge .floor__icon { width: 34px; height: 29px; }
  :root[data-hero^="fullfloor"] .floor__station b { font-size: 15px; line-height: 20px; }
  :root[data-hero^="fullfloor"] .floor__station small { font-size: 13px; line-height: 18px; }
  :root[data-hero^="fullfloor"] .floor__core { max-width: 280px; gap: 12px; padding: 30px 24px 26px; }
  :root[data-hero^="fullfloor"] .floor__core img { max-width: 210px; }
  :root[data-hero^="fullfloor"] .floor__core span { font-size: 15px; line-height: 20px; }
  :root[data-hero^="fullfloor"] .floor__teams::before, :root[data-hero^="fullfloor"] .floor__stations::before { position: absolute; left: 0; bottom: calc(100% + 12px); font-size: 13px; line-height: 18px; font-weight: var(--fw-ui); color: var(--ink-muted); white-space: nowrap; }
  :root[data-hero^="fullfloor"] .floor__teams::before { content: "Your teams"; }
  :root[data-hero^="fullfloor"] .floor__stations::before { content: "Your systems"; }
}
@media (min-width: 1280px) and (max-height: 880px) {
  /* short screens: the same tiles, a size smaller, so the whole floor fits its row */
  :root[data-hero^="fullfloor"] .floor { padding-top: 30px; padding-bottom: 6px; }
  :root[data-hero^="fullfloor"] .floor__teams, :root[data-hero^="fullfloor"] .floor__stations { gap: 10px; }
  :root[data-hero^="fullfloor"] .floor__team, :root[data-hero^="fullfloor"] .floor__station { height: 64px; padding: 9px 16px 9px 9px; gap: 12px; }
  :root[data-hero^="fullfloor"] .floor__screen { width: 72px; height: 46px; }
  :root[data-hero^="fullfloor"] .floor__badge { width: 46px; height: 46px; }
  :root[data-hero^="fullfloor"] .floor__core { padding: 24px 20px 20px; }
  :root[data-hero^="fullfloor"] .floor__teams::before, :root[data-hero^="fullfloor"] .floor__stations::before { bottom: calc(100% + 8px); }
}
@media (max-width: 1279px) { :root[data-hero^="fullfloor"] .hero { min-height: 0; } }
@media (max-width: 640px) {
  :root[data-hero^="fullfloor"] .hero { --gutter: 20px; min-height: 0; padding-block: 32px 40px; }
}

/* Option 15 · the same stage in the light palette: soft grey, white tiles, a warm glow behind the core */
:root[data-hero="fullfloorlight"] .hero { background-color: #ffffff; background-image: radial-gradient(circle, rgb(16 25 33 / 9%) 1px, transparent 1.6px); }
:root[data-hero="fullfloorlight"] .hero::before { background: radial-gradient(ellipse 55% 55% at 66% 66%, rgb(220 68 10 / 9%), transparent 70%), linear-gradient(#ffffff, transparent 22%, transparent 80%, #ffffff); }
:root[data-hero="fullfloorlight"] .floor .wire { stroke: color-mix(in srgb, var(--line-strong) 70%, #ffffff); }
:root[data-hero="fullfloorlight"] .wire-port { fill: #ffffff; }
:root[data-hero="fullfloorlight"] .floor__team, :root[data-hero="fullfloorlight"] .floor__station { border-color: #e2e2e2; box-shadow: 0 1px 2px rgb(16 25 33 / 5%), 0 14px 34px rgb(16 25 33 / 8%); }
:root[data-hero="fullfloorlight"] .floor__core { border-color: var(--role-graphic); box-shadow: 0 0 0 1px var(--role-graphic), 0 18px 70px rgb(220 68 10 / 24%); }
:root[data-hero="fullfloorlight"] .packet-head { filter: drop-shadow(0 0 4px rgb(220 68 10 / 70%)); }

/* Equipment on the floor (homepage, Industry, Device Analytics): teams sit at monitors showing the app,
   systems are instruments with a name, a type and a live status. A system in use streams into Quantum EDGE. */
:root { --sys-on: #1a7a33; --sys-starting: #b06a00; }
:root[data-hero] .floor__team--mon { height: auto; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; gap: 3px; color: var(--ink); }
.mon { flex: none; display: flex; flex-direction: column; align-items: center; }
.mon__bezel { position: relative; padding: 7px 4px 3px; border-radius: 5px; background: linear-gradient(#3a3f45, #23272b); box-shadow: 0 1px 0 rgb(255 255 255 / 12%) inset, 0 8px 18px rgb(16 25 33 / 16%); transition: box-shadow .3s ease; }
.mon__bar { position: absolute; top: 2.5px; left: 5px; display: flex; gap: 2.5px; }
.mon__bar b { width: 2.5px; height: 2.5px; border-radius: 50%; background: #6b7178; }
.mon__bar b:first-child { background: var(--role-graphic); }
.mon .floor__screen { width: 64px; height: 40px; border-radius: 2px; }
.mon__neck { width: 8px; height: 5px; background: linear-gradient(#5c6167, #3d4247); clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%); }
.mon__foot { width: 30px; height: 3px; border-radius: 2px 2px 3px 3px; background: #2e3237; }
.mon__label { display: flex; flex-direction: column; align-items: center; font-size: 12px; line-height: 15px; font-weight: var(--fw-ui); color: var(--ink); white-space: nowrap; text-align: center; }
.mon__label small { font-size: 11px; line-height: 14px; font-weight: var(--fw-quiet); color: var(--ink-muted); }
.floor__team--mon.is-receiving .mon__bezel, .floor__team--mon.is-sending .mon__bezel { box-shadow: 0 0 0 2px color-mix(in srgb, var(--role-graphic) 65%, transparent), 0 10px 26px rgb(220 68 10 / 22%); transition-duration: .1s; }
.floor--teams .mon .floor__screen { width: 86px; height: 54px; }
/* side by side (not stacked): the team is as wide as its monitor, so the wire plugs into the monitor; the name may overhang */
@media (min-width: 641px) { :root[data-hero="floor"] .floor:not(.floor--teams) .floor__team--mon .mon__label { width: 0; } }

/* systems */
.floor__station.sys { align-items: center; gap: 10px; padding: 7px 12px 7px 7px; transition: opacity .5s ease, border-color .5s ease; }
.sys .floor__led { display: none; }
.sys__art { flex: none; display: grid; place-items: center; width: 46px; height: 42px; border-radius: 8px; background: linear-gradient(var(--hardware-soft), color-mix(in srgb, var(--hardware-soft) 55%, #ffffff)); transition: filter .5s ease; }
.sys__art svg { width: 40px; height: 34px; }
.sys__art .m { fill: #ffffff; stroke: var(--hardware); stroke-width: 1.4; }
.sys__art .d { fill: var(--hardware); }
.sys__art .s { fill: none; stroke: var(--hardware); stroke-width: 1.6; stroke-linecap: round; }
.sys__art .t { fill: none; stroke: color-mix(in srgb, var(--hardware) 45%, #ffffff); stroke-width: 1.2; }
.sys__art .w { fill: color-mix(in srgb, var(--hardware) 30%, #ffffff); stroke: var(--hardware); stroke-width: 1; }
.sys__art .g { fill: #16324a; stroke: var(--hardware); stroke-width: 1.2; }
.sys__art .q { fill: var(--role-graphic); }
.sys__art .v { fill: none; stroke: var(--role-graphic); stroke-width: 1.5; stroke-dasharray: 2.5 2; }
.sys__art .p { fill: none; stroke: color-mix(in srgb, var(--role-graphic) 70%, #ffffff); stroke-width: 1.3; stroke-linecap: round; }
.sys__meta { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.floor__station .sys__meta b { font-family: var(--font-mono); font-size: 12.5px; line-height: 16px; font-weight: 800; letter-spacing: .02em; }
.floor__station .sys__meta small { font-size: 11px; line-height: 14px; color: var(--ink-muted); white-space: nowrap; }
.sys__status { display: inline-flex; align-items: center; gap: 5px; margin-top: 3px; font-size: 10.5px; line-height: 14px; font-weight: var(--fw-ui); color: var(--ink-muted); white-space: nowrap; transition: color .4s ease; }
.sys__status::before { content: ""; box-sizing: border-box; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.sys__who { margin-left: -1px; } /* the status row's gap stands in for the space before " · " */
/* states: offline (dimmed, wire faded), coming online (amber, blinking), online (green), reserved or in class (orange, streaming) */
.sys[data-state="online"] .sys__status { color: var(--sys-on); }
.sys[data-state="starting"] .sys__status { color: var(--sys-starting); }
.sys[data-state="starting"] .sys__status::before { animation: sys-blink 1s ease-in-out infinite; }
.sys[data-state="reserved"] .sys__status, .sys[data-state="class"] .sys__status { color: var(--role-graphic-text); }
.sys[data-state="reserved"] .sys__status::before, .sys[data-state="class"] .sys__status::before { box-shadow: 0 0 0 3px color-mix(in srgb, var(--role-graphic) 22%, transparent); }
:root[data-hero] .sys[data-state="reserved"], :root[data-hero] .sys[data-state="class"] { border-color: color-mix(in srgb, var(--role-graphic) 45%, var(--line)); }
.sys[data-state="offline"] { opacity: .6; }
.sys[data-state="offline"] .sys__status { color: #8a9096; }
.sys[data-state="offline"] .sys__status::before { background: none; border: 1.5px solid currentColor; }
.sys[data-state="offline"] .sys__art { filter: grayscale(1); }
@keyframes sys-blink { 50% { opacity: .25; } }
.floor .wire.is-off { opacity: .25; transition: opacity .5s ease; }
.floor .wire-port.is-off { opacity: .35; }
:root[data-hero] .floor .wire.is-streaming { stroke: color-mix(in srgb, var(--role-graphic) 70%, #ffffff); stroke-width: 2.2; stroke-dasharray: 5 7; animation: wire-flow .7s linear infinite; }
:root[data-hero] .floor .wire-port.is-streaming { fill: var(--role-graphic); stroke: var(--role-graphic); }
@keyframes wire-flow { from { stroke-dashoffset: 12; } to { stroke-dashoffset: 0; } }

/* homepage, desktop: bigger equipment; the name sits a fixed step left of its monitor so the wire plugs into the monitor */
@media (min-width: 1280px) {
  :root[data-hero^="fullfloor"] .floor__team--mon { flex-direction: row-reverse; gap: 14px; }
  :root[data-hero^="fullfloor"] .floor__team--mon .mon__label { flex: 0 0 124px; align-items: flex-start; font-size: 15px; line-height: 20px; text-align: left; }
  :root[data-hero^="fullfloor"] .floor__team--mon .mon__label small { font-size: 12px; line-height: 16px; }
  :root[data-hero^="fullfloor"] .floor__teams::before { left: 30px; }
  :root[data-hero^="fullfloor"] .mon__bezel { padding: 10px 5px 5px; border-radius: 7px; }
  :root[data-hero^="fullfloor"] .mon__bar { top: 3.5px; left: 7px; gap: 3px; }
  :root[data-hero^="fullfloor"] .mon__bar b { width: 3.5px; height: 3.5px; }
  :root[data-hero^="fullfloor"] .mon .floor__screen { width: 86px; height: 54px; }
  :root[data-hero^="fullfloor"] .mon__neck { width: 12px; height: 9px; }
  :root[data-hero^="fullfloor"] .mon__foot { width: 44px; height: 4px; }
  :root[data-hero^="fullfloor"] .floor__station.sys { height: auto; min-height: 84px; padding: 10px 14px 10px 10px; gap: 12px; }
  :root[data-hero^="fullfloor"] .sys__art { width: 64px; height: 56px; border-radius: 10px; }
  :root[data-hero^="fullfloor"] .sys__art svg { width: 54px; height: 45px; }
  :root[data-hero^="fullfloor"] .floor__station .sys__meta b { font-size: 14px; line-height: 18px; }
  :root[data-hero^="fullfloor"] .floor__station .sys__meta small { font-size: 12px; line-height: 16px; }
  :root[data-hero^="fullfloor"] .sys__status { margin-top: 4px; font-size: 11px; }
}
@media (min-width: 1280px) and (max-height: 880px) {
  :root[data-hero^="fullfloor"] .floor__station.sys { min-height: 74px; padding-block: 8px; }
  :root[data-hero^="fullfloor"] .mon .floor__screen { width: 76px; height: 48px; }
  :root[data-hero^="fullfloor"] .sys__art { width: 56px; height: 50px; }
}
/* homepage, tablets: one centred column, with the floor standing up */
@media (min-width: 641px) and (max-width: 1279px) {
  :root[data-hero^="fullfloor"] .hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px 0; padding-bottom: 48px; }
  :root[data-hero^="fullfloor"] .hero__top { align-items: center; text-align: center; }
  :root[data-hero^="fullfloor"] .hero__title { margin-inline: auto; text-align: center; text-wrap: balance; }
  :root[data-hero^="fullfloor"] .hero__grid { display: contents; }
  :root[data-hero^="fullfloor"] .hero__text { align-items: center; padding: 0; }
  :root[data-hero^="fullfloor"] .hero__text .btn-row { justify-content: center; }
  :root[data-hero^="fullfloor"] .hero__frame { aspect-ratio: auto; height: 540px; }
  :root[data-hero^="fullfloor"] .floor { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; align-content: center; row-gap: 56px; column-gap: 0; padding: 14px 6%; }
  :root[data-hero^="fullfloor"] .floor__teams, :root[data-hero^="fullfloor"] .floor__stations { flex-direction: row; gap: 16px; }
  :root[data-hero^="fullfloor"] .floor__team, :root[data-hero^="fullfloor"] .floor__station { flex: 1 1 0; min-width: 0; }
  :root[data-hero^="fullfloor"] .floor__core { max-width: 260px; }
  :root[data-hero^="fullfloor"] .mon .floor__screen { width: 100px; height: 63px; }
  :root[data-hero^="fullfloor"] .mon__label { font-size: 13px; line-height: 17px; }
}
/* Industry on tablets: the floor frame is shorter, so the equipment packs tighter */
@media (min-width: 641px) and (max-width: 1279px) {
  :root[data-hero="floor"] .floor:not(.floor--teams) { padding-block: 10px; }
  :root[data-hero="floor"] .floor:not(.floor--teams) .floor__teams { gap: 4px; }
  :root[data-hero="floor"] .floor:not(.floor--teams) .floor__stations { gap: 8px; }
  :root[data-hero="floor"] .floor:not(.floor--teams) .mon .floor__screen { width: 54px; height: 34px; }
  :root[data-hero="floor"] .floor:not(.floor--teams) .floor__station.sys { padding: 5px 10px 5px 5px; }
  :root[data-hero="floor"] .floor:not(.floor--teams) .sys__art { width: 40px; height: 36px; }
  :root[data-hero="floor"] .floor:not(.floor--teams) .sys__art svg { width: 34px; height: 29px; }
}
/* phones and tablets: just "Reserved", without who holds it */
@media (max-width: 1279px) { .sys__who { display: none; } }
/* phones: the floor stands up, so every tile is a small column */
@media (max-width: 640px) {
  .floor__teams { gap: 10px; }
  .mon .floor__screen, .floor--teams .mon .floor__screen { width: 60px; height: 38px; }
  .mon__bezel { padding: 7px 3px 3px; }
  .mon__label { font-size: 11px; line-height: 14px; white-space: normal; }
  .mon__label small { font-size: 10px; line-height: 13px; }
  .floor__station.sys { flex-direction: column; justify-content: flex-start; gap: 6px; padding: 8px 6px; text-align: center; }
  .sys__meta { align-items: center; }
  .floor__station .sys__meta small { display: none; }
  .sys__status { margin-top: 2px; font-size: 10px; }
  .sys__art { width: 52px; height: 46px; }
  .sys__art svg { width: 44px; height: 37px; }
}
@media (prefers-reduced-motion: reduce) { .floor .wire.is-streaming, .sys[data-state="starting"] .sys__status::before { animation: none; } }

/* Platform deployment diagrams in the hero's equipment style: the instrument drawing, a mono name, its type */
.dep__node .sys__art { width: 52px; height: 46px; }
.dep__node .sys__art svg { width: 44px; height: 37px; }
.dep b.dep__name { font-family: var(--font-mono); font-size: 14px; line-height: 18px; letter-spacing: .02em; }
.dep__node .dep__text small { margin-bottom: 1px; }
.dep__node--hw { padding: 10px 14px 10px 10px; gap: 12px; box-shadow: 0 1px 2px rgb(16 25 33 / 5%), 0 10px 26px rgb(16 25 33 / 7%); }
.dep__node--cloud { box-shadow: 0 0 0 1px var(--role-graphic), 0 14px 46px rgb(220 68 10 / 20%); }
.dep__node--focus { box-shadow: 0 0 0 1px var(--role-graphic), 0 10px 26px rgb(220 68 10 / 16%); }
@media (max-width: 640px) {
  .dep__stack .dep__node .sys__art { width: 46px; height: 40px; }
  .dep__stack .dep__node .sys__art svg { width: 38px; height: 32px; }
}
/* Multi-system, multi-user: teams on the left, the record in the middle, systems on the right */
.dep--both { display: grid; grid-template-columns: max-content 72px max-content 72px max-content; justify-content: center; align-items: center; }
.dep--both .dep__stack--users { grid-column: 1; grid-row: 1; }
.dep--both .dep__node--cloud { grid-column: 3; grid-row: 1; min-width: 200px; }
.dep--both .dep__stack--sys { grid-column: 5; grid-row: 1; }
.dep--both .dep__stack .dep__node { min-width: 0; }
.dep__node--sim { border: 1.5px dashed var(--line-strong); }
/* users: no card, the name to the left of a monitor showing Quantum EDGE; the wire leaves the monitor */
.dep--both .dep__node--user { padding: 0; border: 0; background: none; box-shadow: none; gap: 12px; justify-content: flex-end; min-width: 0; }
.arch__item .xp__media .dep__user { font-size: 14px; line-height: 18px; font-weight: var(--fw-ui); color: var(--ink); white-space: nowrap; }
.dep__node--user .mon .floor__screen { width: 70px; height: 44px; background: #050505; }
.dep--both .dep__stack--users { gap: 14px; }
@media (max-width: 1000px) {
  .dep--both .dep__stack .dep__node--user { flex-direction: column-reverse; gap: 4px; padding: 0; }
  .arch__item .xp__media .dep__user { font-size: 12px; line-height: 15px; }
}
@media (max-width: 1000px) {
  .dep--both { grid-template-columns: minmax(0, 1fr); row-gap: 36px; }
  .dep--both .dep__stack--users, .dep--both .dep__node--cloud, .dep--both .dep__stack--sys { grid-column: 1; grid-row: auto; }
  .dep--both .dep__stack { flex-direction: row; gap: 8px; }
  .dep--both .dep__stack .dep__node { flex: 1; flex-direction: column; text-align: center; padding: 8px 6px; min-width: 0; }
  .dep--both .dep__stack .dep__sdk { justify-content: center; }
  .dep--both .dep__stack .dep__owner { position: static; order: 9; }
  .dep--both .dep__node--cloud { justify-self: center; }
}
@media (max-width: 640px) { /* three tiles a row: smaller type so names and the SDK label fit */
  .dep--both .dep__stack { gap: 6px; }
  .dep--both .dep__stack b { font-size: 11.5px; line-height: 14px; }
  .dep--both .dep__stack small { display: block; font-size: 10px; line-height: 13px; }
  .dep--both .dep__stack--sys small { display: none; }
  .xp__media .dep.dep--both .dep__stack .dep__sdk img { height: 8px; top: .7px; }
  .dep.dep--both .dep__stack .dep__sdk b { font-size: 9.5px; line-height: 10px; }
  .dep--both .dep__stack .dep__owner { font-size: 9.5px; line-height: 12px; }
  .dep.dep--both { padding-inline: 12px; }
  .dep--both .dep__stack .dep__node { padding-inline: 3px; }
  .dep--both .dep__stack .dep__sdk { flex-wrap: wrap; row-gap: 2px; } /* very narrow tiles: SDK drops under the wordmark rather than spilling out */
}
/* Hero trace: a live-looking measurement sweep along the hero's base */
.hero-trace { position: relative; height: 76px; margin-block: -16px -8px; display: none; }
:root[data-hero="trace"] .hero-trace, :root[data-hero="both"] .hero-trace { display: block; }
.hero-trace__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero-trace__label { position: absolute; bottom: 2px; left: 0; transform: translateX(14px); padding: 2px 8px; border-radius: var(--radius-full); background: var(--surface); font-family: var(--font-mono); font-size: 12px; line-height: 18px; color: var(--role-graphic-label); white-space: nowrap; opacity: 0; transition: opacity .4s ease; }
.hero-trace__label.is-on { opacity: 1; }

/* Prototype-only switcher for comparing hero treatments */
.proto-switch { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 40; display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: var(--radius-full); background: var(--ink); color: #ffffff; font-size: 13px; line-height: 18px; font-weight: 700; }
.proto-switch__label { padding: 0 6px 0 10px; color: #b5b5b5; font-weight: 600; }
.proto-switch button { width: 30px; height: 30px; border: 0; border-radius: var(--radius-full); background: transparent; color: #ffffff; font: inherit; font-size: 18px; line-height: 1; cursor: pointer; }
.proto-switch button:hover { background: #2a2a2a; }
.proto-switch select { height: 30px; padding: 0 10px; border: 0; border-radius: var(--radius-full); background: var(--action); color: #ffffff; font: inherit; cursor: pointer; }
@media (max-width: 640px) { /* a compact switcher so it covers less of the page */
  .proto-switch { right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); font-size: 12px; }
  .proto-switch__label { display: none; }
  .proto-switch select { max-width: 200px; height: 28px; padding: 0 8px; }
  .proto-switch button { width: 26px; height: 28px; }
}
@media (max-width: 960px) {
  .hero__grid { grid-template-columns: 1fr; gap: 40px; }
  .hero__screen { margin: -96px 0 0 16px; width: min(360px, 80%); }
}
.news-link { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border: 1px solid var(--line); border-radius: var(--radius-full); color: var(--ink); font-weight: var(--fw-ui); font-size: 15px; line-height: 20px; text-decoration: none; transition: border-color .18s ease; }
.news-link:hover { border-color: var(--orange); color: var(--ink); }
.news-link__tag { padding: 2px 10px; border-radius: var(--radius-full); background: var(--action); color: var(--on-action); font-weight: var(--fw-ui); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.news-link__arrow { color: var(--orange-text); transition: transform .18s ease; }
.news-link:hover .news-link__arrow { transform: translateX(3px); }
@media (max-width: 640px) {
  .news-link { flex-wrap: nowrap; border: 0; padding: 0; gap: 8px; font-size: 13.5px; }
  .news-link__tag { flex: 0 0 auto; }
}

/* Load-in: visible by default, animated only where motion is welcome */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .rise { animation: rise .7s cubic-bezier(.2, .7, .2, 1) both; }
  .hero__title.rise { animation-delay: .06s; }
  .hero__text.rise { animation-delay: .16s; }
  .hero__frame.rise { animation-delay: .22s; }
  .hero__screen.rise { animation-delay: .42s; }
}

/* ---------- Proof bar ---------- */
.proof-bar { border-block: 1px solid var(--line); }
.hero + .section { border-top: 1px solid var(--line); } /* where no proof bar follows the hero, keep the edge */
.proof-bar__inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.proof-bar__item { padding: 22px 24px; color: var(--ink-muted); font-size: 16px; line-height: 24px; }
.proof-bar__item strong { color: var(--ink); font-weight: var(--fw-ui); }
.proof-bar__item + .proof-bar__item { border-left: 1px solid var(--line); }
.proof-bar__item:first-child { padding-left: 0; }
@media (max-width: 900px) {
  .proof-bar__item, .proof-bar__item:first-child { padding: 14px 0; }
  .proof-bar__item + .proof-bar__item { border-left: 0; border-top: 1px solid var(--line); }
}

/* ---------- Why it matters ---------- */
.stat-card { background: var(--surface); border-radius: var(--radius-lg); padding: 36px; display: flex; flex-direction: column; gap: 16px; }
.stat-card__kicker { font-size: 13px; line-height: 18px; font-weight: var(--fw-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.stat-card__value { font-weight: var(--fw-display); font-size: 76px; line-height: 1; letter-spacing: -.035em; }
.stat-card__punch { font-weight: var(--fw-ui); color: var(--role-tile-footer); margin-top: auto; padding-top: 8px; }
.cycle { display: flex; flex-direction: column; gap: 8px; padding-block: 6px; }
.cycle__bar { display: flex; gap: 3px; height: 14px; }
.cycle__seg { border-radius: 3px; background: var(--line); }
.cycle__seg--slow { background: var(--role-graphic); }
.cycle__labels { display: flex; gap: 3px; font-size: 13px; line-height: 18px; font-weight: var(--fw-quiet); color: var(--ink-muted); }
.cycle__labels span:last-child { color: var(--role-graphic-label); font-weight: var(--fw-ui); }
/* Seven equal years: same bar as the test cycle, labelled at each end */
.cycle--years .cycle__seg { flex: 1; }
.cycle--years .cycle__labels { justify-content: space-between; }
/* Islands: four systems, each with its own data, linked by broken lines */
.islands { display: flex; align-items: flex-start; padding-block: 6px; }
.islands__node { flex: 0 0 auto; width: 82px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; font-size: 13px; line-height: 16px; font-weight: var(--fw-quiet); color: var(--ink-muted); }
.islands__node b { width: 18px; height: 18px; border-radius: var(--radius-full); background: var(--role-graphic); box-shadow: 0 0 0 5px color-mix(in srgb, var(--role-graphic) 18%, transparent); }
.islands__link { flex: 1 1 0; min-width: 18px; display: flex; align-items: center; gap: 2px; height: 18px; margin-inline: -14px; }
.islands__link i { flex: 1; border-top: 2px dashed var(--ink-muted); opacity: .45; }
.islands__link svg { flex: 0 0 auto; width: 10px; height: 14px; fill: none; stroke: var(--ink-muted); stroke-width: 1.6; stroke-linecap: round; }
.people { display: flex; align-items: flex-end; gap: 10px; padding-block: 2px; }
.fridge { width: 26px; height: 34px; margin-left: 8px; fill: var(--ink-muted); stroke: var(--ink-muted); }
.fridge rect { stroke: none; }
.fridge path { fill: none; stroke-width: 2; }
.person { width: 26px; height: 34px; fill: var(--line); }
.person--on { fill: var(--role-graphic); }

/* ---------- Solutions: two doors and the product detail ---------- */
.door { background: var(--panel); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.door__media { overflow: hidden; }
.door__img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.door:hover .door__img { transform: scale(1.03); }
.door__body { padding: 28px 28px 32px; display: flex; flex-direction: column; gap: 14px; flex: 1 1 auto; }
.door__actions { margin-top: auto; padding-top: 12px; }

/* Product accordion: each row opens in place, one open per door */
.acc { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--line); }
.acc__item { border-radius: var(--radius-md); transition: background-color .2s ease; }
.acc__item:not(.is-open) + .acc__item:not(.is-open) { box-shadow: 0 -1px 0 var(--line); }
.acc__item.is-open { background: var(--selected); }
.acc__trigger {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);
  margin: 0; padding: 14px 14px; border: 0; border-radius: var(--radius-md);
  background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer;
  transition: background-color .18s ease;
}
.acc__item:not(.is-open) .acc__trigger:hover { background: color-mix(in srgb, var(--selected) 50%, transparent); }
.acc__head { display: flex; flex-direction: column; gap: 2px; }
.acc__name { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 19px; line-height: 26px; font-weight: var(--fw-title); }
.acc__prop { color: var(--ink-muted); }
.acc__icon { flex: 0 0 auto; stroke: var(--orange-text); transition: transform .25s ease; }
.acc__item.is-open .acc__icon { transform: rotate(180deg); }
.acc__panel { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .3s cubic-bezier(.2, .7, .2, 1); }
.js .acc__item:not(.is-open) .acc__panel { grid-template-rows: 0fr; }
.acc__inner { overflow: hidden; min-height: 0; }
.acc__content { padding: 0 14px 18px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.acc__for { font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.acc__for strong { color: var(--ink); font-weight: var(--fw-ui); margin-right: 4px; }
@media (prefers-reduced-motion: reduce) { .acc__panel, .acc__icon { transition: none; } }
.acc__head { gap: 8px; }
.acc__name { gap: 12px; min-height: 26px; }

/* Product lockups. Academy is the real artwork; Lab, Industry, Threads and VIDYAQAR are
   placeholders built to the Academy lockup's proportions: QE mnemonic, hairline rule,
   name in wide-tracked capitals as tall as the mark. */
.plogo { --h: 22px; display: inline-flex; align-items: center; gap: calc(var(--h) * .45); height: var(--h); }
.plogo__mark { height: var(--h); width: auto; }
.plogo__rule { width: 1px; height: 100%; background: var(--ink); }
.plogo__name { font-family: Jost, var(--font-sans); font-weight: 600; font-size: calc(var(--h) * 1.38); line-height: 1; letter-spacing: .2em; text-transform: uppercase; color: var(--ink); margin-right: -.2em; white-space: nowrap; }
.plogo--hardware .plogo__name { color: var(--hardware); }
.plogo--long .plogo__name { font-size: calc(var(--h) * 1.1); letter-spacing: .08em; margin-right: -.08em; } /* long product names: tighter so the placeholder lockup fits its column */   /* VIDYAQAR: standalone wordmark, hardware blue */
.plogo-img { height: calc(22px / .885); width: auto; margin-block: calc(-22px * .065); }
@media (max-width: 640px) {
  .plogo { --h: 17px; }
  .plogo-img { height: calc(17px / .885); margin-block: calc(-17px * .065); }
}

/* ---------- Platform (dark section) ---------- */
.section--grid {
  background-color: var(--surface);
  background-image: linear-gradient(#111 1px, transparent 1px), linear-gradient(90deg, #111 1px, transparent 1px);
  background-size: 48px 48px; background-position: center top;
}
.feature-stack { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.feature { background: var(--panel); border-radius: var(--radius-lg); padding: 28px 32px; display: flex; gap: 20px; align-items: flex-start; flex: 1 1 auto; border: 1px solid transparent; transition: border-color .18s ease; }
.feature:hover { border-color: var(--line); }
.feature__icon { flex: 0 0 auto; width: 28px; height: 28px; fill: none; stroke: var(--role-graphic); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; margin-top: 2px; }
.feature__title { display: block; font-size: 19px; line-height: 26px; font-weight: var(--fw-title); margin-bottom: 4px; }
.screen-card { background: var(--panel); border-radius: var(--radius-lg); padding: var(--space-4); display: flex; flex-direction: column; justify-content: center; gap: 12px; min-width: 0; }
.screen-card img { border-radius: 8px; }
.code-card { background: var(--panel); border-radius: var(--radius-lg); padding: var(--space-8); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: var(--space-6) 40px; align-items: center; }
.code-card__text { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.code-window { background: var(--panel-inset); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; min-width: 0; }
.code-window__bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: 12px; line-height: 18px; color: var(--ink-muted); }
.code-window__file { flex: none; color: var(--ink); }
.code-window__note { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.code { margin: 0; padding: 18px 20px; font-family: var(--font-mono); font-size: 15px; line-height: 26px; color: var(--ink); overflow-x: auto; white-space: pre; }
.code .ln { display: inline-block; width: 2ch; margin-right: 18px; color: var(--line-strong); text-align: right; user-select: none; }
.code .k { color: var(--orange-text); }
.code .s { color: #4cc768; }
.code-window__bar--split { border-top: 1px solid var(--line); }
/* Notebook cell: the SDK snippet as it looks in Jupyter (prompt gutter, bordered input) */
.nb { display: flex; flex-direction: column; gap: 6px; padding: 16px 16px 16px 10px; }
.nb__cell { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; align-items: start; padding-left: 8px; }
.nb__cell.is-active::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: 2px; background: var(--role-graphic); }
.nb__prompt { padding-top: 9px; font-family: var(--font-mono); font-size: 13px; line-height: 22px; color: var(--ink-muted); text-align: right; }
.nb__output { margin: 0; padding: 2px 12px; font-family: var(--font-mono); font-size: 13px; line-height: 20px; color: var(--ink-muted); white-space: pre-wrap; overflow-wrap: anywhere; }
.nb__cell--out .nb__prompt { padding-top: 2px; }
.nb .nb__input { margin: 0; padding: 8px 12px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); font-size: 15px; line-height: 24px; overflow-x: auto; }
@media (max-width: 640px) {
  .nb { padding: 12px 10px 12px 4px; }
  .code-window__bar { gap: 8px; padding: 10px 12px; font-size: 11px; }
  .nb__cell { grid-template-columns: 34px minmax(0, 1fr); gap: 6px; padding-left: 6px; }
  .nb__prompt { font-size: 11.5px; }
  .nb .nb__input { padding: 7px 10px; font-size: 12.5px; line-height: 21px; }
}

/* Agent prompt: the same run asked in plain language, styled as Experiment Timeline's own command input */
.agent-prompt { --et-input: #102e2f; --et-border: #5f8a96; --et-text: #e2e2e2; --et-button: #808080; position: relative; min-height: 84px; margin: 16px 20px 18px; padding: 10px 14px 40px; border: 1px solid var(--et-border); border-radius: 4px; background: var(--et-input); font-family: var(--font-mono); font-size: 14px; line-height: 22px; color: var(--et-text); }
.agent-prompt__text { display: block; min-height: 22px; }
.agent-prompt__text:empty::before { content: "Enter your command here..."; color: #a3adad; }
.agent-prompt__text.is-typing:empty::after { display: none; }
.agent-prompt__text.is-typing::after { content: ""; display: inline-block; width: 1px; height: 1.15em; margin-left: 1px; vertical-align: -.2em; background: var(--et-text); }
.agent-prompt__send { position: absolute; right: 10px; bottom: 9px; display: grid; place-items: center; width: 44px; height: 24px; border-radius: var(--radius-full); background: var(--et-button); transition: filter .3s ease; }
.agent-prompt__text:not(.is-typing) + .agent-prompt__send { filter: brightness(1.2); }
.agent-prompt__send svg { width: 12px; height: 12px; fill: #ffffff; }
.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; }
@media (max-width: 640px) {
  .code-card { padding: var(--space-6) var(--space-4); }
  .code { padding: 14px; font-size: 12.5px; line-height: 22px; }
  .code .ln { margin-right: 10px; }
  .agent-prompt { min-height: 76px; margin: 14px; padding: 9px 12px 38px; font-size: 12.5px; line-height: 20px; }
}

/* ---------- Customers ---------- */
.map { display: flex; flex-direction: column; gap: 20px; }
.map__canvas svg, .map__canvas img { width: 100%; height: auto; display: block; }
.map__canvas .map-land { fill: var(--line); }
.map__canvas .map-hot, .map__canvas .map-marker { fill: var(--role-graphic); }
.map__canvas .map-halo { fill: var(--role-graphic); }
.map__canvas .map-office { fill: none; stroke: var(--ink); } /* a ring around the office city's dot */
.map__canvas .map-office-label { fill: var(--ink); stroke: var(--surface); font-family: var(--font-sans); font-weight: var(--fw-ui); } /* office city names; the stroke keeps them legible over land dots */
@media (max-width: 640px) { .map__canvas .map-office-labels { display: none; } } /* too small to read at phone width */
@media (prefers-reduced-motion: no-preference) {
  .js .map__canvas .map-hot, .js .map__canvas .map-markers { opacity: 0; transition: opacity 1s ease .2s; }
  .js .map.is-visible .map__canvas .map-hot, .js .map.is-visible .map__canvas .map-markers { opacity: 1; }
  .map__canvas .map-halo { transform-box: fill-box; transform-origin: center; animation: halo 2.4s ease-out infinite; }
}
@keyframes halo { 0% { transform: scale(.6); opacity: .55; } 80%, 100% { transform: scale(2); opacity: 0; } }
.map__legend { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4) var(--space-8); border-top: 1px solid var(--line); padding-top: 20px; }
.map__keys { display: flex; flex-wrap: wrap; gap: var(--space-3) 28px; font-size: 15px; line-height: 22px; font-weight: var(--fw-quiet); }
.map__key { display: inline-flex; align-items: center; gap: var(--space-2); }
.map__dot { width: 12px; height: 12px; border-radius: var(--radius-full); background: var(--role-graphic); }
.map__ring { box-sizing: border-box; width: 16px; height: 16px; border-radius: var(--radius-full); border: 2px solid var(--ink); background: radial-gradient(circle, var(--role-graphic) 0 3.5px, transparent 4px); } /* matches the map: a ring around a customer dot */

.quote::before { content: "“"; display: block; height: 40px; margin-bottom: 4px; font-size: 80px; line-height: 1; font-weight: var(--fw-display); color: var(--role-graphic); }
.quote__text { font-size: 21px; line-height: 31px; font-weight: var(--fw-text); letter-spacing: -.005em; }
.quote__context { margin-top: var(--space-3); font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.quote footer { margin-top: var(--space-4); font-size: 15px; line-height: 22px; font-weight: var(--fw-quiet); color: var(--ink-muted); }
/* Attribution with the organisation's logo: one-colour logos so three brands sit calmly beside the orange */
.quote__by { display: flex; align-items: center; gap: 16px; padding-top: var(--space-4); border-top: 1px solid var(--line); }
.quote__logo { flex: none; display: block; height: 40px; width: auto; max-width: 132px; object-fit: contain; filter: grayscale(1); opacity: .85; }
.quote__logo--todo { display: grid; place-items: center; width: 112px; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); font-size: 11px; line-height: 14px; font-weight: var(--fw-ui); text-align: center; color: var(--ink-muted); filter: none; opacity: 1; }
/* A mark without its name (Rigetti) is set beside the name, like the vendor wall lockups */
.quote__org { flex: none; display: flex; align-items: center; gap: 10px; font-size: 26px; line-height: 1; font-weight: 800; letter-spacing: -.01em; color: var(--ink); opacity: .7; }
.quote__org .quote__logo { height: 34px; opacity: 1; }
@media (max-width: 640px) { .quote__by { flex-direction: column; align-items: flex-start; gap: 10px; } .quote__logo { height: 34px; } }
.story { margin-top: 24px; background: var(--panel); border-radius: var(--radius-lg); overflow: hidden; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); }
.story__img { width: 100%; height: 100%; min-height: 360px; object-fit: cover; }
.story__body { padding: 44px; display: flex; flex-direction: column; gap: 20px; justify-content: center; }
.story .quote__text { font-size: 25px; line-height: 35px; }
@media (max-width: 640px) { .story__body { padding: 28px 22px; } .story .quote__text { font-size: 20px; line-height: 29px; } }
.story__stat { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; border-top: 1px solid var(--line); padding-top: 20px; }
.story__stat-value { font-weight: var(--fw-display); font-size: 48px; line-height: 1; letter-spacing: -.02em; }
.quote-card { background: var(--panel); border-radius: var(--radius-lg); padding: var(--space-8); }
.quote-card { display: flex; flex-direction: column; }
.quote-card > .quote__by { margin-top: auto; } /* attributions line up along the bottom of paired cards */
.quote-card > .quote__context + .quote__by { margin-top: auto; }
.quote-card .quote__context { margin-bottom: var(--space-4); }
.quote__stat { flex-wrap: nowrap; align-items: center; margin-top: var(--space-4); }
.quote__stat > .muted { min-width: 0; } /* number on the left, text beside it */
.quote__stat + .quote__by { border-top: 0; padding-top: var(--space-3); } /* the stat already draws the divider */

/* ---------- White paper ---------- */
.feature-card { background: var(--panel); border-radius: var(--radius-lg); overflow: hidden; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); }
.feature-card__body { padding: 44px; display: flex; flex-direction: column; gap: var(--space-4); justify-content: center; align-items: flex-start; }
.feature-card__media { overflow: hidden; min-height: 320px; max-height: 440px; }
.feature-card__img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.feature-card:hover .feature-card__img { transform: scale(1.03); }

/* ---------- Product pages ---------- */
/* Product hero: lockup, proposition, and the product itself */
.phero { padding-block: 64px 80px; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 7fr); gap: 56px; align-items: center; }
.phero__text { display: flex; flex-direction: column; gap: 28px; align-items: flex-start; }
.phero__lockup { height: 34px; width: auto; }
.phero__title { font-weight: var(--fw-display); letter-spacing: -.02em; font-size: clamp(46px, 4.9vw, 70px); line-height: 1.04; text-wrap: balance; }
.phero__text .lead { font-size: 21px; line-height: 32px; }
.phero__title--long { font-size: clamp(42px, 4.3vw, 62px); }
.phero__media { position: relative; padding-bottom: 16%; }
.phero__shot { width: 100%; border-radius: var(--radius-lg); box-shadow: 0 2px 4px rgb(16 25 33 / 8%), 0 24px 48px rgb(16 25 33 / 14%); }
.phero__shot--front { position: absolute; left: -7%; bottom: 0; width: 54%; border: 1px solid var(--line); border-radius: 10px; }
.phero__media.rise { animation-delay: .18s; }
@media (max-width: 960px) {
  .phero { grid-template-columns: minmax(0, 1fr); gap: 40px; padding-block: 40px 56px; }
  .phero__shot--front { left: 4%; }
}

/* Cohort pictogram: one expert, fifty learners */
.cohort { display: flex; align-items: flex-end; gap: 16px; padding-block: 2px; }
.cohort__grid { width: 150px; height: 75px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32'%3E%3Ccircle cx='12' cy='7' r='5' fill='%23d6d6d6'/%3E%3Cpath d='M3 30v-7a9 9 0 0 1 18 0v7z' fill='%23d6d6d6'/%3E%3C/svg%3E"); background-size: 15px 15px; background-repeat: repeat; }

/* Annotated screenshot: numbered pins on the image, explained below */
.annot { display: flex; flex-direction: column; gap: 24px; padding: var(--space-4); border-radius: var(--radius-lg); background: var(--panel); }
.annot__frame { position: relative; }
.annot__frame img { width: 100%; border-radius: 8px; }
.annot__pin { position: absolute; left: var(--x); top: var(--y); display: grid; place-items: center; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: var(--role-graphic); color: #ffffff; font-size: 15px; font-weight: var(--fw-ui); box-shadow: 0 0 0 6px color-mix(in srgb, var(--role-graphic) 30%, transparent); }
.annot figcaption { padding: 4px 8px 8px; }
.annot__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 16px 40px; color: var(--ink-muted); }
.annot__list li { display: flex; gap: 14px; align-items: flex-start; }
.annot__n { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--role-graphic); color: #ffffff; font-size: 14px; font-weight: var(--fw-ui); }
@media (max-width: 640px) { .annot__pin { width: 24px; height: 24px; margin: -12px 0 0 -12px; font-size: 13px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--role-graphic) 30%, transparent); } }

/* Course tracks */
.tracks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr)); gap: var(--space-4); align-items: start; }
.track { background: var(--surface); border-radius: var(--radius-lg); padding: 32px; display: flex; flex-direction: column; gap: 20px; }
.track__head { display: flex; gap: 16px; align-items: flex-start; }
.track__step { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--role-graphic); color: #ffffff; font-weight: var(--fw-ui); }
.track__title { margin: 0 0 4px; font-size: 22px; line-height: 28px; font-weight: var(--fw-title); }
.courses { list-style: none; margin: 0; padding: 0; counter-reset: course; border-top: 1px solid var(--line); }
.course { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); font-weight: var(--fw-title); counter-increment: course; }
.course::before { content: counter(course, decimal-leading-zero); min-width: 2ch; padding-top: 1px; font-family: var(--font-mono); font-size: 13px; font-weight: 400; color: var(--ink-muted); }
.course__name { flex: 1; min-width: 0; }
.course__name small { display: block; margin-top: 2px; font-size: 14px; line-height: 20px; font-weight: 400; color: var(--ink-muted); }
.tag--type { flex: none; color: var(--ink-muted); }

/* Path: Academy leads to VIDYAQAR (orange for software, blue for hardware) */
.path { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.path__stage { --bar: var(--role-graphic); position: relative; display: flex; flex-direction: column; gap: 10px; padding: 32px 28px 28px; border-radius: var(--radius-lg); background: linear-gradient(var(--bar), var(--bar)) top / 100% 4px no-repeat, var(--card, var(--panel)); }
.section--panel .path__stage { --card: var(--surface); }
.path__stage--hardware { --bar: var(--hardware); }
.path__stage + .path__stage::before { content: "→"; position: absolute; left: -26px; top: 50%; z-index: 1; display: grid; place-items: center; width: 28px; height: 28px; margin-top: -14px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--ink-muted); font-size: 15px; line-height: 1; }
.path__n { font-size: 13px; line-height: 18px; font-weight: var(--fw-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.path__brand { display: flex; align-items: center; height: 30px; }
.path__brand .plogo { --h: 18px; }
.path__brand .plogo-img { height: calc(18px / .885); }
.path__title { margin: 0; font-size: 20px; line-height: 26px; font-weight: var(--fw-title); }
.path__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; padding-top: 20px; border-top: 1px solid var(--line); }
@media (max-width: 860px) {
  .path { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .path__stage + .path__stage::before { content: "↓"; left: 50%; top: -24px; margin: 0 0 0 -14px; }
}

/* Product hero with a photo instead of screenshots */
.phero__wordmark, .phero__wordmark .plogo { --h: 30px; }
@media (max-width: 640px) { .phero__wordmark .plogo--long { --h: 22px; } }
.phero__media--photo { padding-bottom: 0; }
.phero__photo { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; object-position: center 30%; border-radius: var(--radius-lg); }
.phero__chip { position: absolute; left: 16px; bottom: 16px; padding: 6px 12px; border-radius: var(--radius-full); background: color-mix(in srgb, var(--surface) 90%, transparent); font-size: 13px; line-height: 18px; font-weight: var(--fw-ui); color: var(--ink); }

/* System map: the drawing on one side, the parts on the other (blue = hardware, orange = software) */
.sysmap { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 40px; align-items: center; }
.sysmap__visual { padding: var(--space-4); border-radius: var(--radius-lg); background: var(--panel); }
.sysdraw { display: block; width: 100%; height: auto; }
.sysmap__caption { padding: 4px 8px 4px; }
.sysphoto { margin: 0; display: grid; gap: 12px; }
.sysphoto__img { width: 100%; max-width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-lg); }
.sysphoto__caption { padding-inline: 8px; }
.syslist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.syslist__item { display: flex; gap: 16px; align-items: flex-start; padding: 14px 0; } /* no divider lines: they clashed with the section's grid */
.syslist__item:first-child { border-top: 0; padding-top: 0; }
.syslist__dot { flex: none; width: 12px; height: 12px; margin-top: 7px; border-radius: 50%; background: var(--hardware); }
.syslist__item--sw .syslist__dot { background: var(--role-graphic); }
.syslist__title { display: block; font-size: 18px; line-height: 26px; font-weight: var(--fw-title); }
.syslist__model { display: block; margin-bottom: 4px; font-family: var(--font-mono); font-size: 13px; line-height: 18px; color: var(--hardware); }
.syslist__item--sw .syslist__model { color: var(--role-text-em); }
/* software rows name the product with its logo, on a white pill beside the heading that links to its page */
.syslist__item--sw .syslist__title { display: inline-block; vertical-align: middle; } /* the logo pill sits on the heading line */
.syslist__pill { display: inline-flex; vertical-align: middle; align-items: center; margin-left: 12px; padding: 5px 12px; border-radius: var(--radius-full); background: #ffffff; transition: box-shadow .18s ease; }
.syslist__pill img { display: block; height: 15px; width: auto; }
.syslist__pill:hover { box-shadow: 0 0 0 2px var(--orange); }
.syslist__pill:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.syslist__label { margin: 0 0 16px; font-size: 13px; line-height: 18px; font-weight: var(--fw-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.syslist__note { padding-top: 16px; }
@media (max-width: 960px) { .sysmap { grid-template-columns: minmax(0, 1fr); } }
.story--white { background: var(--surface); margin-top: 0; }

/* What's included: a checklist grid */
.included { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: var(--space-4); }
.included li { display: flex; gap: 14px; align-items: flex-start; padding: 24px; border-radius: var(--radius-lg); background: var(--panel); color: var(--ink-muted); }
.included__tick { flex: none; position: relative; width: 26px; height: 26px; border-radius: 50%; background: var(--role-graphic); }
.included__tick::after { content: ""; position: absolute; left: 9px; top: 6px; width: 6px; height: 11px; border: solid #ffffff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.included .included__cta { align-items: center; justify-content: center; background: transparent; border: 1px dashed var(--line-strong); }

/* ---------- Shared blocks for Platform, Lab, Industry, Threads and Company ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: var(--space-4); }
.phero__brand { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.feature-card--flip .feature-card__media { order: -1; }
.feature-card__media--shot { display: flex; align-items: center; justify-content: center; min-height: 0; max-height: none; padding: 32px; background: #141414; }
.feature-card__code { width: 100%; box-shadow: 0 12px 32px rgb(0 0 0 / 35%); }
.feature-card__code .o { color: var(--ink-muted); }
@media (max-width: 640px) { .feature-card__code .code-window__note { display: none; } }
.feature-card__body .link-arrow { display: inline; } /* inline, so the arrow stays with the text when it wraps */
.feature-card__body .link-arrow::after { display: inline-block; margin-left: 6px; }
.feature-card__media--shot img { width: 100%; height: auto; border-radius: 8px; box-shadow: 0 12px 32px rgb(0 0 0 / 35%); }
.stack-sm { display: flex; flex-direction: column; gap: var(--space-4); }
.section--panel .feature, .section--panel .feature-card { background: var(--surface); }
.section:not(.section--panel) .stat-card { background: var(--panel); } /* stat cards on a white section */
.section--panel .product, .section--panel .quote-card { background: var(--surface); }

/* Placeholders for content still to come (prototype) */
.ph { display: grid; place-items: center; min-height: 88px; padding: 16px; border: 1px dashed var(--line-strong); border-radius: var(--radius-md); font-size: 13px; line-height: 18px; font-weight: var(--fw-ui); color: var(--ink-muted); text-align: center; }
.logo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap: var(--space-4); }
.ph--story { min-height: 320px; border-radius: var(--radius-lg); font-size: 15px; }

/* Architecture: your teams, Quantum EDGE, your hardware */
.arch { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr); gap: 44px; align-items: center; } /* side columns fit their content, centred on the taller core */
.arch__col { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: var(--radius-lg); background: var(--surface); }
.arch__col--core { box-shadow: inset 0 0 0 2px var(--role-graphic); }
.arch__col--hw { background: linear-gradient(var(--hardware), var(--hardware)) top / 100% 4px no-repeat, var(--surface); }
.arch__col + .arch__col::before { content: "\2194"; position: absolute; left: -37px; top: 50%; z-index: 1; display: grid; place-items: center; width: 30px; height: 30px; margin-top: -15px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--ink-muted); font-size: 16px; line-height: 1; }
.arch__head { font-size: 13px; line-height: 18px; font-weight: var(--fw-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.arch__core-logo { height: 30px; width: auto; align-self: center; margin-block: 2px 8px; } /* the column's title: larger and centred over the features */
.arch__item { padding: 14px 16px; border-radius: var(--radius-md); background: var(--panel); }
.arch__item strong { display: block; font-size: 16px; line-height: 22px; font-weight: var(--fw-title); }
.arch__item span { display: block; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.arch__col--core .arch__item strong { color: var(--role-text-em); }
.arch__col--hw .arch__item strong { color: var(--hardware); }
/* Explore mode (opt-in: data-explore on .arch, which site.js turns into .arch--explore).
   A core feature opens in place: the teams and hardware columns fade, the core widens, then the feature opens.
   Without explore mode the items render as the static diagram and the screens stay hidden. */
.arch__hint, .xp__icon, .xp__body { display: none; }
.xp__head { display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; }
.arch--explore { --xp-ease: cubic-bezier(.4, 0, .2, 1); transition: grid-template-columns .25s var(--xp-ease), gap .25s var(--xp-ease); }
.arch--explore .arch__col:not(.arch__col--core) { min-width: 0; transition: opacity .13s var(--xp-ease); }
.arch--explore .arch__col + .arch__col::before { transition: opacity .13s var(--xp-ease); }
.arch--explore.is-faded .arch__col:not(.arch__col--core), .arch--explore.is-faded .arch__col + .arch__col::before { opacity: 0; }
.arch--explore.is-gone .arch__col:not(.arch__col--core) { visibility: hidden; max-height: 0; padding-block: 0; overflow: hidden; }
.arch--explore.is-wide { grid-template-columns: minmax(0, 0fr) minmax(0, 1fr) minmax(0, 0fr); gap: 0; }
.arch--explore .arch__hint { display: block; margin-top: -4px; font-size: 13px; line-height: 18px; font-weight: var(--fw-quiet); color: var(--ink-muted); }
.arch--explore .xp { padding: 0; border: 1.5px solid transparent; transition: border-color .13s var(--xp-ease), background-color .13s var(--xp-ease), box-shadow .13s var(--xp-ease); }
.arch--explore .xp:hover { border-color: var(--line-strong); }
.arch--explore .xp.is-active { border-color: var(--orange); background: var(--surface); box-shadow: 0 8px 26px rgb(16 25 33 / 10%); }
.arch--explore .xp__head { position: relative; padding: 14px 52px 14px 16px; cursor: pointer; border-radius: inherit; transition: padding .15s var(--xp-ease); }
.arch--explore .xp__head:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.arch--explore .xp__head > span { overflow: hidden; max-height: 60px; transition: max-height .15s var(--xp-ease), opacity .1s var(--xp-ease); }
.arch--explore .xp__icon { position: absolute; right: 14px; top: 14px; display: grid; place-items: center; width: 26px; height: 26px; border: 1.5px solid currentColor; border-radius: 50%; color: var(--orange-text); font-size: 17px; font-style: normal; font-weight: var(--fw-ui); line-height: 1; transition: transform .15s var(--xp-ease), top .15s var(--xp-ease); }
.arch--explore .xp.is-active .xp__icon { transform: rotate(45deg); }
.arch--explore.is-focused .xp:not(.is-active) .xp__head { padding-block: 11px; }
.arch--explore.is-focused .xp:not(.is-active) .xp__head > span { max-height: 0; opacity: 0; } /* the other features shrink to their names */
.arch--explore.is-focused .xp:not(.is-active) .xp__icon { top: 9px; }
.arch--explore .xp__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .23s var(--xp-ease); }
.arch--explore .xp.is-open .xp__body { grid-template-rows: 1fr; }
.xp__inner { min-height: 0; overflow: hidden; }
.xp__media { padding: 0 16px 16px; opacity: 0; transform: translateY(6px); transition: opacity .15s var(--xp-ease), transform .15s var(--xp-ease); }
.xp.is-open .xp__media { opacity: 1; transform: none; transition-delay: .06s; }
.xp__media img, .xp__code { max-width: 920px; margin-inline: auto; }
.xp__media img { display: block; width: 100%; height: auto; border-radius: var(--radius-md); box-shadow: 0 2px 6px rgb(16 25 33 / 10%); }
.xp__code { display: grid; place-items: center; padding: 28px; border-radius: var(--radius-md); background: var(--panel); color: var(--ink); }
.xp__code .code-window { width: min(620px, 100%); }
.arch__item .xp__media span { display: revert; font-size: revert; line-height: revert; } /* keep the diagram item styles off the code */

/* Deployment views inside the Platform expanders: a small diagram of where things run, then what that means.
   Wires are drawn by site.js from data-to (ids), so the labels stay real text at any width. */
.xp__deploy { max-width: 920px; margin-inline: auto; display: flex; flex-direction: column; gap: 14px; }
.dep { position: relative; padding: 22px; border-radius: var(--radius-lg); background-color: var(--panel); background-image: radial-gradient(circle, color-mix(in srgb, var(--line-strong) 30%, transparent) 1px, transparent 1.5px); background-size: 18px 18px; }
.dep__wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.dep__wire { fill: none; stroke: color-mix(in srgb, var(--line-strong) 70%, var(--panel)); stroke-width: 1.5; }
.dep__pulse { fill: var(--role-graphic); }
.dep__node { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.dep__badge { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 8px; background: var(--hardware-soft); }
.dep__badge .floor__icon { width: 26px; height: 22px; }
.dep__node--app .dep__badge { background: var(--control); }
.dep__node--app .floor__icon { stroke: var(--ink); }
.dep__text { min-width: 0; }
.dep b { display: block; font-size: 14px; line-height: 18px; font-weight: var(--fw-ui); color: var(--ink); }
.dep small { display: block; font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.xp__media .dep img { width: auto; height: 20px; margin-inline: 0; border-radius: 0; box-shadow: none; }
/* Complete record: every system's lab PC writes to one record */
.dep--hub { display: grid; grid-template-columns: minmax(0, 1fr) minmax(40px, 110px) minmax(0, 1.15fr); align-items: center; }
.dep__stack { grid-column: 1; display: flex; flex-direction: column; gap: 10px; }
.dep--fan { grid-template-columns: minmax(0, 1.15fr) minmax(40px, 110px) minmax(0, 1fr); }
.dep--fan .dep__stack { grid-column: 3; grid-row: 1; }
.dep--fan .dep__node--cloud { grid-column: 1; grid-row: 1; }
.dep__node--cloud { grid-column: 3; flex-direction: column; align-items: center; gap: 8px; padding: 18px 14px; border: 1.5px solid var(--role-graphic); text-align: center; }
.dep__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.dep__chips em { padding: 3px 10px; border-radius: var(--radius-full); background: var(--selected); font-size: 12px; line-height: 16px; font-style: normal; font-weight: var(--fw-ui); color: var(--ink); }
/* Measurement: the browser drives the lab PC, which drives the instruments */
.dep--chain { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); column-gap: 56px; align-items: center; }
.dep--chain .dep__node--cloud { grid-column: auto; align-self: stretch; justify-content: center; }
/* the Quantum EDGE SDK lockup: mnemonic, rule, SDK */
.dep__owner { position: absolute; top: 6px; right: 10px; font-size: 11px; line-height: 14px; font-style: italic; color: var(--ink-muted); } /* quiet note: this system is the customer's, not ours */
.dep__sdk { display: flex; align-items: baseline; gap: 4px; margin-top: 5px; } /* SDK set on the wordmark's baseline */
.xp__media .dep .dep__sdk img { position: relative; top: 1.25px; height: 14px; } /* the EDGE baseline sits 1.25px above the image bottom */
.dep .dep__sdk b { font-size: 16.6px; line-height: 1; font-weight: 800; color: var(--role-text-em); } /* cap height matches EDGE; the wordmark's own orange */ /* the full "Quantum EDGE SDK": a feature, not a product lockup */
.dep__node--focus { border: 1.5px solid var(--role-graphic); box-shadow: 0 6px 18px rgb(220 68 10 / 12%); }
.dep__text .dep__chips { justify-content: flex-start; margin-top: 5px; }
.dep__more { margin: 0; text-align: center; }
.dep__more .link-arrow { display: inline; } /* inline, so the arrow stays with the text when it wraps */
.dep__more .link-arrow::after { display: inline-block; margin-left: 6px; }
.dep__note { margin: -4px 0 0; font-size: 13px; line-height: 18px; font-weight: var(--fw-quiet); text-align: center; color: var(--ink-muted); }
/* what it means: three cards, each with a screen or code */
.dep-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.dep-card { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 10px 10px 14px; border-radius: var(--radius-lg); background: var(--panel); }
.xp__media .dep-card img { aspect-ratio: 16 / 10; object-fit: cover; object-position: center; margin-bottom: 6px; border-radius: var(--radius-md); } /* card-sized crops of the screens, so they read at this size */
.dep-card b { display: block; padding-inline: 4px; font-size: 15px; line-height: 20px; font-weight: var(--fw-ui); color: var(--ink); }
.dep-card p { margin: 0; padding-inline: 4px; font-size: 13px; line-height: 19px; color: var(--ink-muted); }
.xp__media .dep-card img[data-full] { cursor: zoom-in; transition: box-shadow .15s ease; }
.xp__media .dep-card img[data-full]:hover, .xp__media .dep-card img[data-full]:focus-visible { box-shadow: 0 0 0 2px var(--orange); outline: none; }
/* click a card's screen to see the whole thing */
.shot-view { max-width: min(1400px, 94vw); padding: 0; border: 0; border-radius: var(--radius-lg); background: #000; color: #fff; }
.shot-view::backdrop { background: rgb(0 0 0 / 72%); }
.shot-view img { display: block; width: 100%; height: auto; max-height: calc(84vh / var(--zoom, 1)); object-fit: contain; }
.shot-view figcaption { display: flex; justify-content: space-between; gap: 16px; padding: 10px 16px; font-size: 14px; line-height: 20px; font-weight: var(--fw-ui); }
.shot-view button { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.dep-card__code { aspect-ratio: 16 / 10; margin-bottom: 6px; overflow: hidden; border-radius: var(--radius-md); background: var(--panel-inset); color: var(--ink); }
/* Experiment templates: the control-stack logos on a light panel, in place of a screenshot */
.dep-card__logos { aspect-ratio: 16 / 10; margin-bottom: 6px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); place-items: center; gap: 10px 14px; padding: 14px 16px; border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--line); }
.xp__media .dep-card .dep-card__logos img { aspect-ratio: auto; width: auto; max-width: 100%; height: 22px; object-fit: contain; margin: 0; border-radius: 0; box-shadow: none; }
.xp__media .dep-card .dep-card__logos img[alt="Zurich Instruments"] { height: 30px; } /* its mark is small inside the artwork */
.dep-card__code .code { padding: 10px 12px; font-size: 10.5px; line-height: 16px; overflow: hidden; }
.dep-card__code .o { color: var(--ink-muted); }
.dep-card__agent { display: flex; align-items: center; }
.dep-card__agent .agent-prompt { flex: 1; min-height: 0; margin: 12px; padding: 8px 10px 34px; font-size: 12px; line-height: 18px; }
/* Polish: one orange frame (the Quantum EDGE column), compact diagrams centred in their panel,
   and the open feature's content aligned with its heading */
.arch--explore .xp.is-active { border-color: var(--line); box-shadow: none; }
.arch--explore.is-focused .arch__hint { display: none; }
.xp__deploy { max-width: none; gap: 12px; }
.xp__media { padding-top: 2px; }
.dep { padding: 26px 22px; }
.dep__node { min-width: 220px; }
.dep__node--cloud { min-width: 240px; padding: 16px 22px; }
.dep--chain { grid-auto-columns: max-content; justify-content: center; column-gap: 88px; }
.dep--hub, .dep--fan { grid-template-columns: max-content 120px max-content; justify-content: center; }
.dep__stack .dep__node { min-width: 260px; }
.dep--chain { align-items: stretch; } /* every box in a chain the same height */
.dep-card__code { display: flex; align-items: center; }
.dep-card__code .code { width: 100%; font-size: 12.5px; line-height: 19px; }
.dep-card__agent .agent-prompt { font-size: 13px; line-height: 19px; }
.arch__item .xp__media .agent-prompt__text { display: block; } /* the diagram's span reset must not undo the prompt */
.arch__item .xp__media .agent-prompt__send { display: grid; }
@media (max-width: 900px) {
  .dep-list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .dep { padding: 14px; }
  .dep--hub { grid-template-columns: minmax(0, 1fr); row-gap: 36px; }
  .dep--fan .dep__node--cloud { grid-column: 1; grid-row: 1; }
  .dep--fan .dep__stack { grid-column: 1; grid-row: 2; }
  .dep__stack { flex-direction: row; gap: 6px; }
  .dep__stack .dep__node { flex: 1; flex-direction: column; text-align: center; padding: 8px 6px; }
  .dep__stack small { display: none; }
  .dep__stack .dep__sdk { justify-content: center; }
  .dep__stack .dep__sdk { gap: 3px; } /* narrow side-by-side tiles: a smaller SDK lockup, same proportions */
  .xp__media .dep .dep__stack .dep__sdk img { height: 10px; top: .9px; }
  .dep .dep__stack .dep__sdk b { font-size: 11.9px; }
  .dep-card__code .code { font-size: 11px; line-height: 17px; padding: 10px; }
  .dep-card__agent .agent-prompt { font-size: 12px; line-height: 18px; }
  .dep__stack .dep__owner { position: static; order: 9; } /* narrow tiles: under the name, not over the icon */
  .dep__node--cloud { grid-column: 1; }
  .dep--chain { grid-auto-flow: row; row-gap: 28px; }
  .dep--chain { grid-auto-columns: minmax(0, 1fr); justify-content: stretch; }
  .dep--hub, .dep--fan { justify-content: stretch; }
  .dep__node, .dep__node--cloud, .dep__stack .dep__node { min-width: 0; }
}
@media (max-width: 900px) { .xp__media { padding: 0 12px 12px; } .xp__code { padding: 14px; } }
@media (prefers-reduced-motion: reduce) { .arch--explore, .arch--explore .arch__col, .arch--explore .arch__col::before, .arch--explore .xp, .arch--explore .xp__head, .arch--explore .xp__head > span, .arch--explore .xp__icon, .arch--explore .xp__body, .xp__media { transition: none !important; } }
@media (min-width: 901px) { /* a wider, tighter core so the six features stay close to the side columns' height */
  .arch { grid-template-columns: minmax(0, 1fr) minmax(0, 1.75fr) minmax(0, 1fr); gap: 40px; }
  .arch__col + .arch__col::before { left: -35px; }
  .arch__col--core { gap: 8px; }
  .arch--explore .arch__col--core { padding-top: 22px; }
  .arch--explore .arch__hint { position: absolute; top: 24px; right: 24px; margin: 0; } /* on the logo's row */
  .arch--explore .xp__head { padding: 11px 16px; }
  .arch--explore .xp__head strong { padding-right: 36px; } /* only the name makes room for the + */
  .arch--explore .xp__icon { top: 9px; }
  .arch__item span { text-wrap: pretty; }
}
@media (min-width: 1200px) { .arch { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); } }
@media (max-width: 900px) {
  .arch { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .arch__col + .arch__col::before { content: "\2195"; left: 50%; top: -36px; margin: 0 0 0 -15px; }
}

/* Product family: one platform, five ways in */
.products { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: var(--space-4); }
.products__group { display: flex; flex-direction: column; gap: 14px; }
.products__kicker { font-size: 13px; line-height: 18px; font-weight: var(--fw-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.product { display: flex; flex-direction: column; gap: 12px; padding: 24px; border: 1px solid transparent; border-radius: var(--radius-lg); background: var(--panel); color: var(--ink); text-decoration: none; transition: border-color .18s ease; }
.product:hover { border-color: var(--line-strong); color: var(--ink); }
.product__name { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-height: 30px; }
.product p { flex: 1; margin: 0; font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.product .link-arrow { font-size: 15px; }

/* Steps in four (engagement), built on the path cards */
.path--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) and (min-width: 861px) {
  .path--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .path--4 .path__stage + .path__stage::before { display: none; }
}
@media (max-width: 860px) { .path--4 { grid-template-columns: minmax(0, 1fr); } }

/* Lifecycle line: one record follows the device */
.lifeline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.lifeline li { position: relative; padding: 36px 8px 0; text-align: center; font-size: 15px; line-height: 20px; font-weight: var(--fw-ui); }
.lifeline li::before { content: ""; position: absolute; top: 9px; left: 0; right: 0; height: 2px; background: var(--line-strong); }
.lifeline li:first-child::before { left: 50%; }
.lifeline li:last-child::before { right: 50%; }
.lifeline li::after { content: ""; position: absolute; top: 2px; left: 50%; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: var(--role-graphic); box-shadow: 0 0 0 4px var(--surface); }
.lifeline small { display: block; margin-top: 4px; font-size: 13px; line-height: 18px; font-weight: 400; color: var(--ink-muted); }
@media (max-width: 760px) {
  .lifeline { grid-template-columns: minmax(0, 1fr); }
  .lifeline li { padding: 0 0 22px 36px; text-align: left; }
  .lifeline li::before { top: 0; bottom: 0; left: 9px; right: auto; width: 2px; height: auto; }
  .lifeline li:first-child::before { top: 9px; left: 9px; }
  .lifeline li:last-child::before { bottom: auto; height: 9px; right: auto; }
  .lifeline li::after { left: 2px; margin-left: 0; }
}

/* Company: milestones, leadership, offices, news */
.milestones { list-style: none; width: 100%; max-width: 820px; margin: 0 auto; padding: 0; }
.milestones li { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 24px; padding: 18px 0; border-top: 1px solid var(--line); }
.milestones li:last-child { border-bottom: 1px solid var(--line); }
.milestones__when { font-weight: var(--fw-ui); color: var(--role-graphic-label); }
@media (max-width: 640px) { .milestones li { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
.team { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: var(--space-4); }
.member { display: flex; flex-direction: column; gap: 2px; padding: 24px; border-radius: var(--radius-lg); background: var(--panel); }
.member__photo { display: grid; place-items: center; width: 76px; height: 76px; margin-bottom: 14px; border: 1px dashed var(--line-strong); border-radius: 50%; font-size: 11px; line-height: 14px; font-weight: var(--fw-ui); text-align: center; color: var(--ink-muted); }
.member strong { font-size: 18px; line-height: 24px; font-weight: var(--fw-title); }
.member span { font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.offices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: var(--space-4); }
.office { display: flex; flex-direction: column; gap: 4px; padding: 20px 22px; border-radius: var(--radius-lg); background: var(--panel); }
.office strong { font-size: 17px; line-height: 24px; font-weight: var(--fw-title); }
.office span { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.section--panel .office, .section--panel .member { background: var(--surface); }
.news { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: var(--space-4); }
.news-card { display: flex; flex-direction: column; gap: 10px; padding: 26px; border-radius: var(--radius-lg); background: var(--surface); color: var(--ink); text-decoration: none; }
.news-card:hover { color: var(--ink); }
.news-card__date { font-size: 13px; line-height: 18px; font-weight: var(--fw-ui); color: var(--ink-muted); }
.news-card h3 { margin: 0; flex: 1; font-size: 19px; line-height: 26px; font-weight: var(--fw-title); }

/* Company: leadership initials, wider team, funding, careers */
.member__img { width: 84px; height: 84px; margin-bottom: 14px; border-radius: 50%; object-fit: cover; background: var(--panel); }
.member__photo--initials { border: 0; background: var(--selected); color: var(--role-text-em); font-size: 22px; line-height: 1; font-weight: var(--fw-title); letter-spacing: .02em; }
.team--leaders { grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); }
.roster-wrap { display: flex; flex-direction: column; gap: 16px; padding-top: 8px; }
.roster__title { margin: 0; font-size: 20px; line-height: 28px; font-weight: var(--fw-title); }
.roster { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; border-top: 1px solid var(--line); }
@media (max-width: 900px) { .roster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .roster { grid-template-columns: minmax(0, 1fr); } }
.roster li { display: grid; grid-template-columns: 48px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.roster img { grid-row: 1 / span 2; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: var(--panel); }
.roster strong { align-self: end; font-size: 15px; line-height: 22px; font-weight: var(--fw-ui); }
.roster span { align-self: start; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.funding { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px; align-items: stretch; }
.funding__rounds { display: flex; flex-direction: column; gap: 16px; }
.round { display: flex; flex-direction: column; gap: 6px; padding: 26px 28px; border-radius: var(--radius-lg); background: var(--panel); }
.round__amount { font-size: 44px; line-height: 1; font-weight: var(--fw-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.round__what { color: var(--ink-muted); font-size: 15px; line-height: 22px; }
.round__what strong { display: block; color: var(--ink); font-size: 17px; line-height: 24px; font-weight: var(--fw-title); }
.investors { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-content: start; }
.investors li { display: flex; align-items: center; min-height: 72px; padding: 16px 22px; border: 1px solid var(--line); border-radius: var(--radius-lg); font-size: 18px; line-height: 24px; font-weight: var(--fw-title); }
.careers { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px; align-items: start; }
.roles { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.role a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 24px; align-items: center; padding: 18px 4px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.role a:hover .role__title { color: var(--orange-text); }
.role__title { font-size: 18px; line-height: 24px; font-weight: var(--fw-title); transition: color .18s ease; }
.role__where { grid-row: 2; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.role .link-arrow { grid-row: 1 / span 2; grid-column: 2; font-size: 15px; }
.values { display: flex; flex-direction: column; gap: 14px; padding: 26px 28px; border-radius: var(--radius-lg); background: var(--panel); }
.values__title { margin: 0 0 2px; font-size: 13px; line-height: 18px; font-weight: var(--fw-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.value { display: flex; flex-direction: column; gap: 2px; }
.value strong { font-size: 16px; line-height: 22px; font-weight: var(--fw-title); }
.value span { font-size: 15px; line-height: 22px; color: var(--ink-muted); }
@media (max-width: 900px) { .funding, .careers { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .investors { grid-template-columns: minmax(0, 1fr); }
  .investors li { min-height: 56px; font-size: 16px; }
  .round { padding: 22px; }
  .round__amount { font-size: 38px; }
  .role .link-arrow { display: none; }
}

/* Insights: page intro, news list, blog cards, research list */
.ihero { padding-block: 64px 48px; display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.ihero .lead { max-width: 36em; }
.ihero__jump { display: flex; flex-wrap: wrap; gap: 8px; }
.ihero__jump a { padding: 6px 16px; border: 1px solid var(--line); border-radius: var(--radius-full); color: var(--ink); font-weight: var(--fw-ui); text-decoration: none; }
.ihero__jump a:hover { border-color: var(--orange); }
.newslist, .pubs { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.newslist a { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 4px 28px; padding: 16px 4px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.newslist__date { font-size: 14px; line-height: 24px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.newslist__title { font-size: 17px; line-height: 24px; font-weight: var(--fw-title); }
.newslist a:hover .newslist__title, .pubs a:hover .pub__title { color: var(--orange-text); }
.news--4 { grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); }
.section:not(.section--panel) .news-card { background: var(--panel); }
.pubs a { display: flex; flex-direction: column; gap: 2px; padding: 18px 4px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.pub__venue { font-size: 14px; line-height: 20px; font-weight: var(--fw-ui); color: var(--role-text-em); } /* journals keep their own casing (npj, arXiv) */
.pub__title { font-size: 18px; line-height: 26px; font-weight: var(--fw-title); transition: color .18s ease; }
.pub__authors { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
@media (max-width: 640px) {
  .ihero { padding-block: 40px 32px; }
  .newslist a { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .newslist__date { font-size: 13px; line-height: 18px; }
  .newslist__title { font-size: 16px; line-height: 22px; }
  .pub__title { font-size: 16px; line-height: 23px; }
}

/* Logo band: instruments and frameworks Quantum EDGE works with, set in one grey, one centred row */
.logo-band { border-bottom: 1px solid var(--line); }
.phero + .logo-band { border-top: 1px solid var(--line); }
.phero + .section:not(.section--panel):not([data-theme]) { border-top: 1px solid var(--line); } /* white section straight under a white hero */ /* straight under a hero, keep the top edge the proof bar used to draw */
.logo-band--section { border: 0; }
.logo-band--arch { padding-top: 8px; }
.logo-band__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 36px; padding-block: 18px; }
.logo-band__label { margin: 0; font-size: 14px; line-height: 20px; font-weight: var(--fw-ui); color: var(--ink-muted); white-space: nowrap; }
.logo-band__logos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 30px; }
.logo-band__logos img { display: block; width: auto; height: 21px; filter: grayscale(1) brightness(0); opacity: .58; }
.logo-band__logos img[data-logo="zi"] { height: 27px; }
.logo-band__logos img[data-logo="qm"] { height: 24px; }
.logo-band__logos img[data-logo="qblox"] { height: 19px; }
.logo-band__more { font-size: 14px; font-weight: var(--fw-ui); color: var(--ink-muted); }
.logo-band__logos img[data-logo="brown"] { height: 30px; }
.logo-band__logos img[data-logo="mahe"] { height: 26px; }
.logo-band__logos img[data-logo="berkeley"] { height: 20px; }
.logo-band__logos img[data-logo="sjsu"] { height: 24px; }
.logo-band__logos img[data-logo="utm"] { height: 28px; filter: grayscale(1) contrast(1.1); opacity: .7; } /* keep the seal's detail */
.logo-band__logos img[data-logo="napoli"] { height: 30px; }
.logo-band__logos img[data-logo="nqcc"] { height: 28px; filter: grayscale(1) contrast(1.2); opacity: .72; } /* keep the white lettering in the square */
.logo-band__lockup img { height: 24px; opacity: 1; } /* the lockup already fades as a whole */
.logo-band__todo { padding: 3px 10px; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); font-size: 13px; font-weight: 700; color: var(--ink-muted); } /* logo still to come */
.logo-band--section .logo-band__logos { gap: 20px 44px; }
.logo-band--section .logo-band__logos img { height: 26px; }
.logo-band--section .logo-band__logos img[data-logo="zi"] { height: 34px; }
.logo-band--section .logo-band__logos img[data-logo="qm"] { height: 30px; }
.logo-band--section .logo-band__logos img[data-logo="qblox"] { height: 24px; }
.section--compact { padding-block: 64px; }
@media (max-width: 640px) {
  .logo-band__inner { gap: 10px; padding-block: 16px; }
  .logo-band__logos, .logo-band--section .logo-band__logos { gap: 12px 22px; }
  .logo-band__logos img, .logo-band--section .logo-band__logos img { height: 18px; }
  .logo-band__logos img[data-logo="zi"], .logo-band--section .logo-band__logos img[data-logo="zi"] { height: 23px; }
  .logo-band__logos img[data-logo="qm"], .logo-band--section .logo-band__logos img[data-logo="qm"] { height: 21px; }
  .logo-band__logos img[data-logo="qblox"], .logo-band--section .logo-band__logos img[data-logo="qblox"] { height: 16px; }
  .section--compact { padding-block: 48px; }
}

/* Prototype-only review note */
.proto-note { display: inline-flex; padding: 4px 12px; border-radius: var(--radius-full); background: #fff1b8; color: #5c4700; font-size: 13px; line-height: 18px; font-weight: var(--fw-ui); }

/* ---------- Footer ---------- */
.site-footer { background: var(--panel); border-top: 1px solid var(--line); padding-block: 72px 32px; }
.site-footer__cta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--space-6); padding-bottom: 56px; border-bottom: 1px solid var(--line); }
.site-footer__cta-text { display: flex; flex-direction: column; gap: var(--space-3); }
.site-footer__cta h2 { font-weight: var(--fw-display); font-size: clamp(34px, 3.6vw, 52px); line-height: 1.15; letter-spacing: -.02em; max-width: 18em; text-wrap: balance; }
.site-footer__grid { display: grid; grid-template-columns: minmax(220px, 1.6fr) repeat(4, minmax(140px, 1fr)); gap: 32px; padding-block: 48px; }
.site-footer__grid:first-child { padding-top: 0; } /* no call to action above it (homepage, forms): the footer's own padding is enough */
.site-footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.site-footer__brand img { height: 24px; width: auto; }
.site-footer__col { display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 22px; }
.site-footer__col a { color: var(--ink); text-decoration: none; }
.site-footer__col a:hover { color: var(--orange-text); }
.site-footer__col span { color: var(--ink-muted); }
.site-footer__heading { font-size: 13px; line-height: 18px; font-weight: var(--fw-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 4px; }
.site-footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; border-top: 1px solid var(--line); padding-top: var(--space-6); }
.site-footer__company { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.site-footer__company img { height: 22px; width: auto; }
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 20px; font-size: 13px; font-weight: var(--fw-quiet); }
.site-footer__legal a { color: var(--ink-muted); text-decoration: none; }
.site-footer__legal a:hover { color: var(--ink); }
@media (max-width: 960px) { .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .site-footer__brand { grid-column: 1 / -1; } }

/* ---------- Scroll reveal (only with JS, only where motion is welcome) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1); }
  .js [data-reveal].is-visible { opacity: 1; transform: none; }
}

/* ---------- Phones: tighter cards, two-up grids ---------- */
@media (max-width: 640px) {
  .stat-card { padding: 26px 22px; gap: 12px; }
  .islands__node { width: 66px; font-size: 11.5px; line-height: 14px; }
  .islands__link { margin-inline: -10px; min-width: 14px; }
  .stat-card__value { font-size: 52px; }
  .feature { padding: 22px; gap: 14px; }
  .feature-card__body { padding: 28px 22px; }
  .track { padding: 24px 20px; }
  .tag--type { display: none; } /* the track heading already says reading or interactive */
  .logo-grid, .team { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ph { min-height: 64px; font-size: 12px; }
  .member { padding: 18px 16px; }
  .member__photo, .member__img { width: 60px; height: 60px; margin-bottom: 10px; }
  .member strong { font-size: 16px; line-height: 22px; }
  .member span { font-size: 13px; line-height: 18px; }
  .included li { padding: 18px; }
  .annot { padding: 10px; gap: 18px; }
}

/* Prototype: ?still skips the intro animation, for screenshots */
.still .rise, .still.js [data-reveal] { animation: none !important; opacity: 1 !important; transform: none !important; }

/* Platform: the vendor-neutral wall, grouped like the "Your hardware" column */
.vendor-wall { max-width: 1100px; margin-inline: auto; padding-top: 8px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.vendor-wall__title { margin: 0; font-size: 14px; line-height: 20px; font-weight: var(--fw-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.vendor-wall__rows { width: 100%; }
.vendor-wall__row { display: grid; grid-template-columns: 170px minmax(0, 1fr); align-items: center; gap: 24px; padding: 16px 0; border-top: 1px solid var(--line); }
.vendor-wall__row:last-child { border-bottom: 1px solid var(--line); }
.vendor-wall__label { margin: 0; font-size: 13px; line-height: 18px; font-weight: var(--fw-ui); color: var(--ink-muted); }
.vendor-wall .logo-band__logos { justify-content: flex-start; gap: 16px 34px; }
.vendor-wall .logo-band__logos img { height: 24px; }
.vendor-wall .logo-band__logos img[data-logo="zi"] { height: 32px; }
.vendor-wall .logo-band__logos img[data-logo="qm"] { height: 28px; }
.vendor-wall .logo-band__logos img[data-logo="qblox"] { height: 22px; }
.vendor-wall .logo-band__logos img[data-logo="bluefors"] { height: 15px; }
.vendor-wall .logo-band__logos img[data-logo="maybell"] { height: 26px; }
.vendor-wall .logo-band__logos img[data-logo="qdoxford"] { height: 30px; }
.vendor-wall .logo-band__logos img[data-logo="quantware"] { height: 18px; }
.vendor-wall .logo-band__logos img[data-logo="semiqon"] { height: 22px; }
.vendor-wall .logo-band__logos img[data-logo="conscience"] { height: 28px; }
.vendor-wall .logo-band__logos img[data-logo="diraq"] { height: 26px; }
.logo-band__lockup { display: flex; align-items: center; gap: 8px; font-size: 19px; line-height: 1; font-weight: 800; letter-spacing: -.01em; color: #101921; opacity: .58; }
.vendor-wall .logo-band__lockup img { height: 26px; opacity: 1; }
.vendor-wall__more { margin: 0; font-size: 14px; font-weight: var(--fw-ui); color: var(--ink-muted); }
/* an open slot at the end of a row: your own instruments or devices plug in too */
.vendor-wall__own { display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border: 1.5px dashed var(--line-strong); border-radius: 9999px; font-size: 14px; line-height: 20px; font-weight: var(--fw-ui); color: var(--ink-muted); white-space: nowrap; }
.vendor-wall__own span { font-size: 17px; line-height: 1; color: var(--role-text-em); }
@media (max-width: 640px) {
  .vendor-wall__row { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 14px 0; }
  .vendor-wall .logo-band__logos { gap: 14px 26px; }
  .vendor-wall .logo-band__logos img { height: 19px; }
  .vendor-wall .logo-band__logos img[data-logo="zi"] { height: 26px; }
  .vendor-wall .logo-band__logos img[data-logo="qm"] { height: 22px; }
  .vendor-wall .logo-band__logos img[data-logo="bluefors"] { height: 12px; }
  .vendor-wall .logo-band__logos img[data-logo="qdoxford"] { height: 24px; }
  .vendor-wall .logo-band__logos img[data-logo="quantware"] { height: 15px; }
  .vendor-wall .logo-band__lockup { font-size: 16px; }
  .vendor-wall .logo-band__lockup img { height: 21px; }
}

/* Platform hero: a real Quantum EDGE view; the user switches systems from the menu in the top bar */
.phero__media--record { padding-bottom: 0; }
.prec { position: relative; display: flex; flex-direction: column; gap: 52px; text-align: left; }
.pr-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.pr-wires .w { fill: none; stroke: color-mix(in srgb, var(--line-strong) 70%, #ffffff); stroke-width: 1.5; transition: opacity .4s ease; }
.pr-wires .w.is-idle { opacity: .35; }
.pr-wires .w.is-live { stroke: color-mix(in srgb, var(--role-graphic) 70%, #ffffff); stroke-width: 2.2; stroke-dasharray: 5 7; animation: pr-flow .7s linear infinite; }
@keyframes pr-flow { from { stroke-dashoffset: 12; } to { stroke-dashoffset: 0; } }
.pr-wires .port { fill: #ffffff; stroke: var(--line-strong); stroke-width: 1.5; }
.pr-wires .port.is-live { fill: var(--role-graphic); stroke: var(--role-graphic); }
/* the app */
.pr-win { position: relative; z-index: 1; border-radius: 12px; background: #000000; box-shadow: 0 0 0 1px #1e1e1e, 0 24px 60px rgb(16 25 33 / 22%); color: #ffffff; font-family: var(--font-sans); }
.pr-top { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.pr-rack { width: 18px; height: 16px; fill: #b5b5b5; flex: none; }
.pr-flow { width: 18px; height: 16px; margin: 0 -4px 0 auto; fill: none; stroke: #b5b5b5; stroke-width: 1.3; flex: none; } /* beside the run pill, as in the product */
.pr-select { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 14px; min-width: 170px; padding: 7px 14px; border-radius: 9999px; background: #2a2a2a; font-size: 14px; font-weight: 800; transition: background .2s ease; }
.pr-select.is-pressed { background: #3a3a3a; }
.pr-select svg { width: 11px; height: 8px; fill: none; stroke: #ffffff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pr-menu { position: absolute; z-index: 3; top: calc(100% + 6px); left: 0; min-width: 100%; padding: 6px; border-radius: 10px; background: #1e1e1e; box-shadow: 0 0 0 1px #333333, 0 18px 40px rgb(0 0 0 / 50%); opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity .18s ease, transform .18s ease; }
.pr-menu.is-open { opacity: 1; transform: none; }
.pr-opt { display: flex; flex-direction: column; gap: 1px; padding: 7px 10px; border-radius: 6px; white-space: nowrap; }
.pr-opt b { font-size: 13px; font-weight: 800; }
.pr-opt.is-current b { color: #f0642a; }
.pr-opt.is-hover { background: #7a2d10; }
.pr-run { display: flex; align-items: center; gap: 10px; padding: 7px 14px; border-radius: 9999px; background: #2a2a2a; font-size: 13px; font-weight: 600; color: #e6e6e6; }
.pr-ok { flex: none; width: 16px; height: 16px; background: radial-gradient(circle at 8.00px 1.90px, #1fa8a4 1.2px, transparent 1.8px), radial-gradient(circle at 12.31px 3.69px, #1fa8a4 1.2px, transparent 1.8px), radial-gradient(circle at 14.10px 8.00px, #1fa8a4 1.2px, transparent 1.8px), radial-gradient(circle at 12.31px 12.31px, #1fa8a4 1.2px, transparent 1.8px), radial-gradient(circle at 8.00px 14.10px, #1fa8a4 1.2px, transparent 1.8px), radial-gradient(circle at 3.69px 12.31px, #1fa8a4 1.2px, transparent 1.8px), radial-gradient(circle at 1.90px 8.00px, #1fa8a4 1.2px, transparent 1.8px); animation: pr-spin .9s steps(8) infinite; } /* the product's run indicator: a ring of teal dots with one gap, turning while the timer runs */
@keyframes pr-spin { to { transform: rotate(360deg); } }
.pr-time { font-weight: 600; color: #21b5ae; font-variant-numeric: tabular-nums; }
.pr-body { padding: 4px 14px 14px; transition: opacity .25s ease; }
.pr-body.is-switching { opacity: .15; }
.pr-title { margin: 0 0 8px; font-size: 14px; font-weight: 800; color: #ffffff; }
.pr-meta { display: flex; gap: 22px; margin-bottom: 10px; }
.pr-meta span { display: block; font-size: 11px; color: #b5b5b5; }
.pr-meta b { font-size: 13px; font-weight: 800; }
.pr-table { border-radius: 4px; background: #050505; box-shadow: 0 0 0 1px #2a2a2a; font-family: var(--font-mono); font-size: 11.5px; line-height: 15px; color: #e2e2e2; overflow: hidden; }
.pr-row { display: grid; grid-template-columns: 150px 92px minmax(0, 1fr) 58px; gap: 10px; align-items: center; padding: 7px 10px; border-bottom: 1px dashed #2a2a2a; white-space: nowrap; }
.pr-row > span { overflow: hidden; text-overflow: ellipsis; }
.pr-date { font-style: normal; }
.pr-row--head { font-family: var(--font-sans); font-size: 11.5px; font-weight: 800; color: #ffffff; border-bottom: 1px solid #333333; }
.pr-rows { height: 152px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent); }
.pr-rows .pr-row:first-child { background: #3a1606; }
.pr-rows .pr-row.is-new { animation: pr-in .5s ease-out; }
@keyframes pr-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.pr-cursor { position: absolute; z-index: 4; left: 0; top: 0; width: 16px; height: 20px; opacity: 0; transition: transform .6s cubic-bezier(.4, 0, .2, 1), opacity .3s ease; pointer-events: none; }
.pr-cursor svg { width: 16px; height: 20px; fill: #ffffff; stroke: #000000; stroke-width: 1.2; filter: drop-shadow(0 2px 3px rgb(0 0 0 / 50%)); }
.pr-cursor.is-on { opacity: 1; }
/* the systems under the app */
.pr-systems { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.pr-sys { display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 10px; border: 1px solid #e2e2e2; border-radius: var(--radius-lg); background: var(--surface); box-shadow: 0 1px 2px rgb(16 25 33 / 5%), 0 12px 30px rgb(16 25 33 / 8%); transition: border-color .35s ease, opacity .35s ease; opacity: .7; }
.pr-sys.is-active { opacity: 1; border-color: color-mix(in srgb, var(--role-graphic) 55%, var(--line)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--role-graphic) 40%, transparent), 0 12px 30px rgb(220 68 10 / 12%); }
.pr-sys .sys__art { width: 46px; height: 42px; }
.pr-sys .sys__art svg { width: 38px; height: 32px; }
.pr-sys__meta { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pr-sys__meta b { font-family: var(--font-mono); font-size: 13px; line-height: 16px; font-weight: 800; color: var(--ink); }
.pr-sys__meta span { font-size: 11.5px; line-height: 15px; color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1100px) { .pr-row { grid-template-columns: 140px 84px minmax(0, 1fr); } .pr-row > span:nth-child(4) { display: none; } }
@media (max-width: 640px) {
  .prec { gap: 40px; }
  .pr-top { gap: 8px; padding: 10px; }
  .pr-flow { display: none; }
  .pr-select { min-width: 0; flex: 1; padding: 6px 12px; font-size: 13px; }
  .pr-run { margin-left: auto; padding: 6px 10px; gap: 6px; font-size: 11px; }
  .pr-meta { gap: 14px; }
  .pr-table { font-size: 11.5px; }
  .pr-row { grid-template-columns: 64px minmax(0, 1fr); gap: 8px; padding: 7px 8px; }
  .pr-date { display: none; } /* phones: time only */
  .pr-row > span:nth-child(2) { display: none; }
  .pr-systems { gap: 8px; }
  .pr-sys { flex-direction: column; text-align: center; padding: 8px 6px; gap: 6px; }
  .pr-sys__meta span { white-space: normal; font-size: 12px; line-height: 15px; }
}
@media (prefers-reduced-motion: reduce) { .pr-wires .w.is-live, .pr-ok { animation: none; } }

/* Company: investors named in groups, as plain names, no amounts */
.vendor-wall--backers { max-width: 1000px; padding-top: 0; }
.backers { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 36px; }
.backers li { font-size: 18px; line-height: 26px; font-weight: var(--fw-title); color: var(--ink); }
@media (max-width: 640px) { .backers { gap: 6px 22px; } .backers li { font-size: 16px; line-height: 24px; } }

/* the Quantum EDGE wordmark set inside a heading, sized to the cap height and sitting on the baseline */
.h-wordmark { display: inline-block; height: .9em; width: auto; vertical-align: -.1em; } /* the wordmark's light "Quantum" needs more height than the cap height to hold its own next to 800-weight text */

/* Homepage: the central record band and the onboarding bridge */
.mem__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: center; }
.mem__copy .headline { text-wrap: balance; margin-top: 8px; }
.mem__copy .lead { margin-top: 16px; margin-bottom: 24px; }
.mem__points { list-style: none; margin: 28px 0 24px; padding: 0; display: grid; gap: 18px; }
.mem__points li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding-top: 16px; border-top: 1px solid var(--line); }
.mem__n { font-family: var(--font-mono); font-size: 13px; line-height: 26px; color: var(--role-graphic-label); }
.mem__points b { display: block; font-size: 18px; line-height: 26px; font-weight: var(--fw-title); }
.mem__points p { margin: 2px 0 0; color: var(--ink-muted); }
.mem__visual { margin: 0; position: relative; }
.mem__win { box-shadow: 0 0 0 1px #2a2a2a, 0 24px 60px rgb(0 0 0 / 50%); }
.mem__agent { position: relative; z-index: 2; width: min(78%, 460px); margin: -40px 0 0 auto; padding-top: 12px; border-radius: 12px; background: #000000; box-shadow: 0 0 0 1px #2f4a50, 0 18px 50px rgb(0 0 0 / 60%); }
.mem__tag { margin-left: 20px; font-size: 11px; line-height: 14px; font-weight: var(--fw-ui); letter-spacing: .06em; text-transform: uppercase; color: #8fb8bf; }
.mem__agent .agent-prompt { margin-top: 8px; }
.mem__caption { margin-top: 14px; color: var(--ink-muted); }
.bridge { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 36px; padding: 26px 36px; border-radius: var(--radius-lg); background: var(--panel); } /* a quiet panel, no orange outline */
.bridge__main { display: flex; flex-direction: column; gap: 14px; }
.bridge > .btn { align-self: flex-end; } /* the CTA sits in the bottom-right corner */
.bridge__title { margin: 0; font-size: 30px; line-height: 36px; font-weight: var(--fw-title); color: var(--ink); text-wrap: balance; }
.bridge__flow { display: flex; align-items: center; gap: 12px; }
.bridge__flow .plogo { --h: 18px; }
.bridge__flow .plogo-img { box-sizing: content-box; height: 21px; margin: 0; padding: 10px 14px; border-radius: var(--radius-md); background: var(--surface); } /* each product lockup sits on its own white tile */

.bridge .link-arrow { display: inline; font-size: 17px; } /* inline, so the arrow stays with the text when it wraps */
.bridge .link-arrow::after { display: inline-block; margin-left: 6px; }
.bridge__arrow { width: 40px; height: 12px; fill: none; stroke: var(--role-graphic); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.bridge__to { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; } /* Lab and Industry are parallel destinations, stacked at the two ends of the fork */
.bridge__fork { width: 56px; height: 92px; flex: none; fill: none; stroke: var(--role-graphic); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bridge__flow > .bridge__arrow { display: none; } /* phones only, see below */
.bridge__logo { display: flex; border-radius: var(--radius-md); transition: box-shadow .18s ease; } /* each product tile links to its page */
.bridge__logo:hover { box-shadow: 0 0 0 1.5px var(--orange); }
.bridge__logo:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (max-width: 960px) {
  .mem__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .bridge { padding: 22px; }
}
@media (max-width: 560px) {
  .mem__agent { width: 92%; margin-top: -24px; }
}

/* Homepage: partner banner, one slow scrolling row of logos (two copies of the list loop seamlessly) */
.partners__title { margin: 0 0 20px; text-align: center; font-size: 14px; line-height: 20px; font-weight: var(--fw-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.partner-band { overflow: hidden; padding-block: 18px; border-block: 1px solid var(--line); -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.partner-band__track { display: flex; width: max-content; animation: partner-scroll 80s linear infinite; }
.partner-band:hover .partner-band__track { animation-play-state: paused; }
.partner-band__list { list-style: none; margin: 0; padding: 0 56px 0 0; display: flex; align-items: center; gap: 56px; }
.partner-band__list img { display: block; width: auto; height: 28px; filter: grayscale(1) brightness(0); opacity: .58; }
.partner-band__lockup { display: flex; align-items: center; gap: 8px; font-size: 20px; line-height: 1; font-weight: 800; letter-spacing: -.01em; color: #101921; opacity: .58; white-space: nowrap; }
.partner-band__lockup img { height: 26px; opacity: 1; }
.partner-band__list img[data-logo="qblox"] { height: 22px; }
.partner-band__list img[data-logo="bluefors"] { height: 15px; }
.partner-band__list img[data-logo="quantware"] { height: 18px; }
.partner-band__list img[data-logo="treq"] { height: 22px; }
.partner-band__list img[data-logo="semiqon"] { height: 22px; }
.partner-band__list img[data-logo="zi"] { height: 34px; }
.partner-band__list img[data-logo="qdoxford"], .partner-band__list img[data-logo="oxford"], .partner-band__list img[data-logo="quic"], .partner-band__list img[data-logo="bf"] { height: 32px; }
.partner-band__list img[data-logo="jyu"], .partner-band__list img[data-logo="oulu"] { height: 54px; margin-block: -10px; }
.partner-band__list img[data-logo="qedc"] { height: 50px; margin-block: -8px; } /* small lettering under a large mark */
.partner-band__list img[data-logo="nqcc"], .partner-band__list img[data-logo="vtt"], .partner-band__list img[data-logo="innovateuk"] { height: 32px; filter: grayscale(1) contrast(1.2); opacity: .7; } /* keep white lettering in their coloured boxes */
@keyframes partner-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .partner-band { -webkit-mask-image: none; mask-image: none; }
  .partner-band__track { animation: none; width: auto; justify-content: center; }
  .partner-band__list { flex-wrap: wrap; justify-content: center; gap: 24px 40px; padding: 0 16px; }
  .partner-band__list[aria-hidden="true"] { display: none; }
}
.still .partner-band__track { animation: none; } /* screenshots */
@media (max-width: 640px) {
  .partner-band__list { gap: 40px; padding-right: 40px; }
  .partner-band__list img { height: 22px; }
}

/* Academy: a larger "In use at" strip, for emphasis */
.logo-band--lg .logo-band__inner { gap: 14px 48px; padding-block: 28px; }
.logo-band--lg .logo-band__label { font-size: 16px; }
.logo-band--lg .logo-band__logos { gap: 18px 44px; }
.logo-band--lg .logo-band__logos img { height: 28px; }
.logo-band--lg .logo-band__logos img[data-logo="brown"] { height: 42px; }
.logo-band--lg .logo-band__logos img[data-logo="mahe"] { height: 36px; }
.logo-band--lg .logo-band__logos img[data-logo="berkeley"] { height: 28px; }
.logo-band--lg .logo-band__logos img[data-logo="sjsu"] { height: 33px; }
.logo-band--lg .logo-band__logos img[data-logo="utm"] { height: 40px; }
@media (max-width: 640px) {
  .logo-band--lg .logo-band__logos img { height: 22px; }
  .logo-band--lg .logo-band__logos img[data-logo="brown"], .logo-band--lg .logo-band__logos img[data-logo="utm"] { height: 30px; }
}

/* Industry: systems and teams as two compact lists */
.scope { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr)); gap: var(--space-4); }
.scope__col { min-width: 0; padding: 24px 28px 12px; border-radius: var(--radius-lg); background: var(--panel); }
.scope__list { list-style: none; margin: 10px 0 0; padding: 0; }
.scope__list li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 16px; align-items: start; padding: 14px 0; border-top: 1px solid var(--line); }
.scope__list li:first-child { border-top: 0; }
.scope__list b { display: block; font-size: 17px; line-height: 24px; font-weight: var(--fw-title); }
.scope__list .muted { display: block; }

/* Industry: what the edition adds to Lab */
.incl { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: center; }
.incl__head .headline { margin-top: 8px; text-wrap: balance; }
.incl__head .lead { margin: 16px 0 20px; }
.syslist__partner { display: inline-block; } /* the arrow follows the last word when the link wraps */
.syslist__partner::after { display: inline-block; margin-left: 6px; }
/* a closing nudge under a run of feature cards, pointing to the Platform page for the detail */
.more-detail { margin: 0; text-align: center; font-size: 17px; color: var(--ink-muted); text-wrap: balance; }
.more-detail .link-arrow { display: inline; margin-left: 4px; } /* inline, so the arrow stays with the text when it wraps */
.more-detail .link-arrow::after { display: inline-block; margin-left: 6px; }
.incl__list { list-style: none; margin: 0; padding: 8px 28px; border-radius: var(--radius-lg); background: var(--surface); }
.incl__list li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 16px; padding: 16px 0; border-top: 1px solid var(--line); }
.incl__list li:first-child { border-top: 0; }
.incl__list b { display: block; font-size: 17px; line-height: 24px; font-weight: var(--fw-title); }
.incl__list p { margin: 2px 0 0; }
@media (max-width: 900px) { .incl { grid-template-columns: minmax(0, 1fr); gap: 28px; } }

/* Industry hero: the floor diagram drawn like the homepage hero (open, light, names beside the monitors) */
:root[data-hero="floor"] .phero__media--floor { padding-bottom: 0; }
@media (min-width: 641px) {
  :root[data-hero="floor"] .phero__media--floor .hero__frame { aspect-ratio: auto; height: clamp(440px, 38vw, 540px); background: transparent; border-radius: 0; overflow: visible; }
  :root[data-hero="floor"] .phero__media--floor .hero__floor { background-color: transparent; background-image: radial-gradient(ellipse 58% 58% at 56% 56%, rgb(220 68 10 / 8%), transparent 70%), radial-gradient(circle, rgb(16 25 33 / 9%) 1px, transparent 1.6px); background-size: 100% 100%, 18px 18px; background-position: 0 0, 9px 9px; }
  :root[data-hero="floor"] .phero__media--floor .floor { padding: 34px 0 8px; column-gap: clamp(22px, 4%, 40px); }
  :root[data-hero="floor"] .phero__media--floor .floor__teams { gap: 12px; }
  :root[data-hero="floor"] .phero__media--floor .floor__team--mon { flex-direction: row-reverse; gap: 12px; }
  :root[data-hero="floor"] .phero__media--floor .floor:not(.floor--teams) .floor__team--mon .mon__label { width: auto; flex: 0 0 118px; align-items: flex-start; font-size: 13px; line-height: 17px; text-align: left; }
  :root[data-hero="floor"] .phero__media--floor .floor__teams::before, :root[data-hero="floor"] .phero__media--floor .floor__stations::before { position: absolute; bottom: calc(100% + 10px); font-size: 12px; line-height: 16px; font-weight: var(--fw-ui); color: var(--ink-muted); white-space: nowrap; }
  :root[data-hero="floor"] .phero__media--floor .floor__teams::before { content: "Your teams"; left: 0; }
  :root[data-hero="floor"] .phero__media--floor .floor__stations::before { content: "Your systems"; left: 0; }
  :root[data-hero="floor"] .phero__media--floor .floor .wire { stroke: color-mix(in srgb, var(--line-strong) 70%, #ffffff); }
  :root[data-hero="floor"] .phero__media--floor .wire-port { fill: #ffffff; }
  :root[data-hero="floor"] .phero__media--floor .floor__station { border-color: #e2e2e2; box-shadow: 0 1px 2px rgb(16 25 33 / 5%), 0 14px 34px rgb(16 25 33 / 8%); }
  :root[data-hero="floor"] .phero__media--floor .floor__core { border-color: var(--role-graphic); box-shadow: 0 0 0 1px var(--role-graphic), 0 18px 60px rgb(220 68 10 / 22%); }
}
/* Industry hero: give the diagram room (wider share, or the full width once the hero stacks), and fix the systems column so changing statuses never resize the cards */
@media (min-width: 1200px) {
  /* the text column only as wide as its longest heading word, so the diagram gets the rest and its wires have room */
  .phero--floor { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 40px; }
}
@media (max-width: 1199px) {
  .phero--floor { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .phero--floor .phero__media--floor { width: 100%; max-width: 820px; justify-self: center; }
}
@media (min-width: 641px) {
  :root[data-hero="floor"] .phero__media--floor .floor { grid-template-columns: auto minmax(150px, 1fr) 240px; }
  :root[data-hero="floor"] .phero__media--floor .floor__station { box-sizing: border-box; width: 100%; }
  :root[data-hero="floor"] .phero__media--floor .sys__meta { flex: 1; }
  :root[data-hero="floor"] .phero__media--floor .sys__status { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
}
@media (min-width: 1200px) {
  :root[data-hero="floor"] .phero__media--floor .floor { grid-template-columns: auto minmax(150px, 1fr) 228px; column-gap: clamp(28px, 5.5%, 48px); }
  :root[data-hero="floor"] .phero__media--floor .floor:not(.floor--teams) .floor__team--mon .mon__label { flex-basis: 112px; }
}

/* Ecosystem page: featured partnership stories and partner cards (logo, name, one line) */
.story-card { background: var(--surface); }
.story-card .label { font-size: 14px; line-height: 20px; }
.story-card h3 { font-size: 21px; line-height: 28px; flex: 0 0 auto; }
.story-card p { margin: 0; flex: 1; }
.partners-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: var(--space-4); }
.partner { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 22px 24px; border-radius: var(--radius-lg); background: var(--panel); }
.section--panel .partner { background: var(--surface); }
.partner__logo { height: 48px; display: flex; align-items: center; }
.partner__logo img { display: block; width: auto; height: auto; max-width: 160px; max-height: 30px; filter: grayscale(1) brightness(0); opacity: .66; }
.partner__logo img[data-logo="rigetti"], .partner__logo img[data-logo="qdoxford"], .partner__logo img[data-logo="quic"], .partner__logo img[data-logo="qbn"], .partner__logo img[data-logo="oxford"] { max-height: 38px; }
.partner__logo img[data-logo="jyu"], .partner__logo img[data-logo="oulu"], .partner__logo img[data-logo="qedc"] { max-height: 48px; }
.partner__logo img[data-logo="nqcc"], .partner__logo img[data-logo="vtt"] { max-height: 38px; filter: grayscale(1) contrast(1.2); opacity: .75; } /* keep the white lettering in their boxes */
.partner__wordmark { font-size: 21px; line-height: 1; font-weight: 800; letter-spacing: -.01em; color: var(--ink); opacity: .7; }
.partner__body { display: flex; flex-direction: column; gap: 6px; }
.partner__body b { font-size: 17px; line-height: 24px; font-weight: var(--fw-title); }
.partner__body p { margin: 0; }
.partner__body .link-arrow { margin-top: 4px; font-size: 14px; }

/* Platform Measurement: one card with a Python call and the same step asked of an agent */
.dep-card__both { flex-direction: column; align-items: stretch; justify-content: center; gap: 6px; padding: 12px 14px; }
.dep-card__both .code { padding: 0; }
.dep-card__or { display: flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: var(--fw-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.dep-card__or::before, .dep-card__or::after { content: ""; flex: 1; height: 1px; background: color-mix(in srgb, var(--ink-muted) 35%, transparent); }
.dep-card__both .agent-prompt { min-height: 0; margin: 0; padding: 7px 64px 7px 10px; font-size: 12px; line-height: 18px; }
.dep-card__both .agent-prompt__send { bottom: 50%; transform: translateY(50%); }
@media (max-width: 640px) { /* phones: the code-or-prompt card grows to fit instead of clipping, and a long line scrolls inside it */
  .dep-card__both .code { padding: 0; font-size: 9px; line-height: 15px; overflow-x: auto; }
  .dep-card__code.dep-card__both { aspect-ratio: auto; padding: 14px 10px; }
}

/* Homepage hero button lands on the two doors, with room under the sticky header */
#doors { scroll-margin-top: 24px; }

/* Homepage hero button: the arrow bobs three times once the hero has risen in, then rests */
.btn__nudge { display: inline-block; }
@keyframes nudge { 0%, 100% { transform: none; } 40% { transform: translateY(4px); } }
@media (prefers-reduced-motion: no-preference) {
  .btn__nudge { animation: nudge .9s ease-in-out 1.3s 3; }
  .btn:hover .btn__nudge { animation: nudge .9s ease-in-out infinite; }
}
.still .btn__nudge { animation: none !important; }

/* Partners: four tracks, a few featured partners each, the rest in a slow logo strip */
.partners-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.partner > .products__kicker { margin-bottom: -6px; }
.partner--role { background: transparent; border: 1px dashed var(--line-strong); }
.section--panel .partner--role { background: transparent; }
.partner-band--page { border-block: 0; padding-block: 14px; }
.partner-band--page .partner-band__track { animation-duration: 55s; }
.partner-band__list img[data-logo="rigetti"], .partner-band__list img[data-logo="qbn"] { height: 34px; }
.partner-band__list img[data-logo="aqsolotl"], .partner-band__list img[data-logo="qm"], .partner-band__list img[data-logo="berkeley"] { height: 24px; }
.partner-band__list img[data-logo="conscience"], .partner-band__list img[data-logo="maybell"], .partner-band__list img[data-logo="diraq"] { height: 28px; }
.partners-note { margin: 0; font-size: 15px; }
.cert-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); counter-reset: none; }
.cert-steps li { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 24px; border-radius: var(--radius-lg); background: var(--panel); }
.cert-steps__n { font-family: var(--font-mono, ui-monospace, monospace); font-size: 14px; font-weight: 700; color: var(--role-graphic-label); }
.cert-steps b { font-size: 21px; line-height: 28px; font-weight: var(--fw-title); }
.cert-steps p { margin: 0; }
@media (max-width: 900px) {
  .partners-grid--3, .cert-steps { grid-template-columns: minmax(0, 1fr); }
}
.partner-band--page .partner-band__list img[data-logo="jyu"], .partner-band--page .partner-band__list img[data-logo="oulu"] { height: 64px; margin-block: -14px; }

/* VIDYAQAR system drawing: the Quantum EDGE screen uses the same monitor as the homepage and Platform diagrams */
.sys-mon__bezel { fill: url(#sys-bezel); stroke: rgb(255 255 255 / 16%); stroke-width: 1; }
.sys-mon__dot { fill: #6b7178; }
.sys-mon__dot--on { fill: var(--role-graphic); }
.sys-mon__screen { fill: #1a1a1a; }
.sys-mon__neck { fill: #4a4f55; }
.sys-mon__foot { fill: #2e3237; stroke: rgb(255 255 255 / 16%); stroke-width: 1; }

/* a product lockup inside a headline (Industry: "Everything in [QE | Lab]") */
.plogo--inline { --h: .74em; vertical-align: -.06em; margin-inline: .06em; }
.plogo-img--inline { display: inline-block; height: .84em; margin: 0 .06em; vertical-align: -.055em; } /* a product lockup inside a headline, sitting on its baseline */

/* Partner program (Lasse's site structure, 2026-10-23): hub, four partner-type pages, certification, and the interest form */
.nav-drop__panel--single { grid-template-columns: minmax(0, 1fr); width: min(360px, calc(100vw - 32px)); }
@media (min-width: 1201px) { .site-footer__grid { grid-template-columns: minmax(200px, 1.4fr) repeat(5, minmax(110px, 1fr)); } }
@media (max-width: 1200px) and (min-width: 961px) { .site-footer__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } .site-footer__brand { grid-column: 1 / -1; } }
.crumb { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: var(--fw-ui); color: var(--ink-muted); text-decoration: none; }
.crumb::before { content: "←"; }
.crumb:hover { color: var(--orange-text); }
.ptype-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.ptype-card { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); color: var(--ink); text-decoration: none; transition: border-color .2s ease, box-shadow .2s ease; }
.ptype-card:hover { border-color: var(--orange); box-shadow: 0 8px 24px rgb(16 25 33 / 8%); }
.ptype-card b { font-size: 21px; line-height: 28px; font-weight: var(--fw-title); }
.ptype-card p { margin: 0; flex: 1; }
.ptype-callout { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; padding: 32px; border-radius: var(--radius-lg); background: var(--panel); }
.ptype-callout > div { max-width: 40em; }
.ptype-callout .title { margin: 4px 0 8px; }
.ptype-callout p { margin: 0; }
.ptype-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.ptype-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 28px; border-radius: var(--radius-lg); background: var(--surface); }
.ptype-col p { margin: 0; }
.ptype-list { margin: 0; padding-left: 1.1em; display: flex; flex-direction: column; gap: 6px; color: var(--ink-muted); }
.ptype-layers { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ptype-layers li { padding: 4px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-full); font-size: 13px; font-weight: var(--fw-ui); color: var(--hardware); }
.ptype-see { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.apply { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.apply-form { display: flex; flex-direction: column; gap: 16px; padding: 32px; border-radius: var(--radius-lg); background: var(--surface); }
.apply-form label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: var(--fw-ui); color: var(--ink); }
.apply-form input, .apply-form select, .apply-form textarea { box-sizing: border-box; width: 100%; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); color: var(--ink); font: inherit; font-weight: 400; }
.apply-form input:focus, .apply-form select:focus, .apply-form textarea:focus { outline: 2px solid var(--orange); outline-offset: 1px; border-color: transparent; }
.apply-form textarea { resize: vertical; }
.apply-form .proto-note, .apply-form__done { margin: 0; }
.apply-form__done { padding: 12px 14px; border-radius: 8px; background: color-mix(in srgb, var(--sys-on) 12%, var(--surface)); font-weight: var(--fw-ui); }
.apply-next ol { list-style: none; margin: 14px 0 0; padding: 0; counter-reset: next; display: flex; flex-direction: column; gap: 18px; }
.apply-next li { counter-increment: next; display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 12px; }
.apply-next li::before { content: counter(next); grid-row: span 2; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--role-graphic); color: #ffffff; font-weight: var(--fw-ui); font-size: 14px; }
.apply-next b { font-size: 17px; }
.section--tight-top { padding-top: 48px; }
@media (max-width: 900px) {
  .ptype-grid, .ptype-cols, .apply { grid-template-columns: minmax(0, 1fr); }
  .apply { gap: 32px; }
}
@media (max-width: 640px) { .ptype-card, .ptype-col, .apply-form, .ptype-callout { padding: 22px; } }
.apply-form .proto-note { align-self: flex-start; }
.section--panel .cert-steps li { background: var(--surface); }
.story__img--shot { object-fit: contain; padding: 32px; background: #141414; box-sizing: border-box; }
.story__note { margin: 0; max-width: 30em; }
/* stat number and its description share one row; the description wraps beside the number */
.story__stat { flex-wrap: nowrap; align-items: center; }
.story__stat-value { flex: none; white-space: nowrap; }
.story__stat > .muted { flex: 1 1 auto; min-width: 0; }
@media (max-width: 400px) { .story__stat { flex-wrap: wrap; } }
.text-link { color: var(--ink); font-weight: var(--fw-ui); text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.text-link:hover { color: var(--orange-text); }
.scope__note { margin: 0 0 14px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 14px; font-weight: var(--fw-ui); color: var(--role-text-em); }

/* Industry: example organizations, each feeding one central record (Option A, chosen 2026-10-26) */
/* shared bits */
.mini { display: grid; place-items: center; width: 34px; height: 31px; border-radius: 7px; background: linear-gradient(var(--hardware-soft), color-mix(in srgb, var(--hardware-soft) 55%, #ffffff)); }
.mini svg { width: 28px; height: 24px; }
.mini .m { fill: #ffffff; stroke: var(--hardware); stroke-width: 1.6; }
.mini .d { fill: var(--hardware); }
.mini .s { fill: none; stroke: var(--hardware); stroke-width: 1.8; stroke-linecap: round; }
.mini .t { fill: none; stroke: color-mix(in srgb, var(--hardware) 45%, #ffffff); stroke-width: 1.4; }
.mini .w { fill: color-mix(in srgb, var(--hardware) 30%, #ffffff); stroke: var(--hardware); stroke-width: 1.2; }
.mini .q { fill: var(--role-graphic); }
.team-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--radius-full); background: color-mix(in srgb, var(--role-graphic) 10%, var(--surface)); color: var(--role-graphic-text); font-size: 12.5px; font-weight: var(--fw-ui); white-space: nowrap; }
.team-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--role-graphic); }
.record-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 16px; padding: 16px 24px; border: 1.5px solid var(--role-graphic); border-radius: var(--radius-lg); background: var(--surface); box-shadow: 0 8px 24px rgb(220 68 10 / 10%); }
.record-bar img { height: 20px; width: auto; }
.record-bar span { font-size: 15px; font-weight: var(--fw-ui); color: var(--ink); }

/* Option A: example organizations side by side, all feeding one central record */
.orgs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.org { position: relative; display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 22px 22px 20px; border-radius: var(--radius-lg); background: var(--panel); }
.org__kicker { font-size: 12px; font-weight: var(--fw-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.org__name { margin: -8px 0 0; font-size: 19px; line-height: 26px; font-weight: var(--fw-title); }
.org__systems { display: flex; flex-direction: column; gap: 10px; }
.org__site { display: flex; flex-direction: column; gap: 6px; }
.org__site-label { font-size: 12px; font-weight: var(--fw-ui); color: var(--ink-muted); }
.org__icons { display: flex; flex-wrap: wrap; gap: 6px; }
.org__count { font-size: 13px; color: var(--ink-muted); }
.org__teams { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); }
.orgs-wires { position: relative; height: 44px; }
.orgs-wires svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.orgs-wires path { fill: none; stroke: var(--role-graphic); stroke-width: 1.5; stroke-dasharray: 4 4; }
.works-with { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 22px; margin-top: 28px; font-size: 14px; color: var(--ink-muted); }
.works-with b { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.works-with span { display: inline-flex; align-items: center; gap: 8px; font-weight: var(--fw-ui); color: var(--ink); }

@media (max-width: 900px) { .orgs { grid-template-columns: minmax(0, 1fr); } .orgs-wires { height: 28px; } }
/* v219 fixes: named system tiles; straight stems from each card to the Quantum EDGE bar (stacked cards chain down on phones) */
.orgs { margin-bottom: 32px; }
.org::after { content: ""; position: absolute; left: 50%; top: 100%; height: 32px; border-left: 2px dashed var(--role-graphic); transform: translateX(-1px); }
.org__name { margin: 0; }
.org__icons { gap: 6px; }
.sys-tile { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; padding: 5px 5px 4px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.sys-tile b { font-family: var(--font-mono); font-size: 10.5px; line-height: 12px; font-weight: 800; letter-spacing: .02em; color: var(--ink); }
.record-bar { padding-block: 22px; border-width: 2px; box-shadow: 0 10px 30px rgb(220 68 10 / 16%); }
.record-bar img { height: 30px; } /* the shared platform under every organization: the strongest element in the diagram */
@media (max-width: 900px) { .orgs { gap: 32px; } }
.orgs__heading { display: block; margin: 0 0 12px; }
/* phones and narrow tablets: cards stack on the left, the Quantum EDGE bar runs vertically down the right, each card wired across to it */
@media (max-width: 900px) {
  .orgs-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 60px; column-gap: 22px; align-items: stretch; }
  .orgs-wrap .orgs__heading { grid-column: 1 / -1; }
  .orgs-wrap .orgs { gap: 16px; margin-bottom: 0; }
  .orgs-wrap .org::after { left: 100%; top: 50%; width: 22px; height: 0; border-left: 0; border-top: 2px dashed var(--role-graphic); transform: translateY(-1px); }
  .orgs-wrap .record-bar { flex-direction: column; flex-wrap: nowrap; padding: 0; gap: 0; }
  .orgs-wrap .record-bar img { flex: none; width: 198px; max-width: none; height: 26px; transform: rotate(90deg); }
}

/* Certified for VIDYAQAR is about hardware, so its page swaps the orange accents for hardware blue */
.page-hardware .phero__title .em { color: var(--hardware); } /* the section headings keep the usual orange */
.page-hardware .cert-steps li { box-shadow: inset 0 3px 0 var(--hardware); }
.page-hardware .cert-steps__n { color: var(--hardware); }
.page-hardware .section--panel { background: color-mix(in srgb, var(--hardware-soft) 45%, var(--panel)); }

/* VIDYAQAR system section: deep hardware blue instead of black (trial, 2026-10-26) */
.section--blue[data-theme="dark"] { --surface: #0b2238; --panel: #10304d; --panel-inset: #0a1f33; --line: #23507a; --ink-muted: #dde7f0; --hardware-soft: #163d61; }
.section--blue.section--grid { background-image: linear-gradient(#0f2c48 1px, transparent 1px), linear-gradient(90deg, #0f2c48 1px, transparent 1px); }
/* VIDYAQAR is hardware: blue proposal buttons, ticks, and link (trial, 2026-10-26) */
.btn--hardware { background: transparent; color: var(--hardware); border-color: var(--hardware); }
.btn--hardware:hover { background: var(--hardware); border-color: var(--hardware); color: var(--on-hardware); }
.included--hardware .included__tick { background: var(--hardware); }
.link-arrow--hardware, .link-arrow--hardware:hover { color: var(--hardware); }
/* the system illustration sits on a light card inside the blue section, so its blue linework has full contrast */
.section--blue .sysmap__visual { color-scheme: light; --panel: #f4f8fb; --surface: #ffffff; --hardware: #1a6694; --hardware-soft: #d3e0ea; --line: #d9e2ea; --line-strong: #9fb3c4; --ink: #101921; --ink-muted: #4a5058; background: var(--panel); }

/* Phone pass (2026-10-26): long button labels wrap instead of pushing the page wider; the onboarding bridge stacks */
@media (max-width: 640px) {
  .btn { white-space: normal; text-align: center; }
  .bridge__flow { flex-wrap: wrap; row-gap: 10px; }
}
/* Phone pass, part 2 */
.nav-toggle__x { display: none; }
.site-header.is-open .nav-toggle__bars { display: none; }
.site-header.is-open .nav-toggle__x { display: inline; }
.xp__head strong { text-wrap: balance; }
@media (max-width: 900px) {
  .feature-card--flip .feature-card__media { order: 0; } /* stacked cards keep the same text-then-image order */
}
@media (max-width: 960px) {
  .site-footer__grid > .site-footer__col:last-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .bridge__flow { flex-direction: column; align-items: flex-start; }
  .bridge__fork { display: none; } /* too wide beside the stacked lockups on a phone: a single down arrow leads to both */
  .bridge__flow > .bridge__arrow { display: block; transform: rotate(90deg); width: 26px; margin-left: 8px; }
  .ptype-see .products__kicker { flex-basis: 100%; }
  .apply-form input, .apply-form select { min-height: 48px; }
  .team--leaders { grid-template-columns: minmax(0, 1fr); }
  .team--leaders .member { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 14px; align-items: center; }
  .team--leaders .member__img { grid-row: span 2; width: 56px; height: 56px; margin: 0; }
}

/* Platform feature list, chosen on review (A2): each feature is a white card with a "See how +" pill that becomes "Hide ×",
   and opening draws the diagram on: Quantum EDGE first, its wires out to the systems and users, then they, the caption and cards rise in */
.arch--explore .xp { border-color: var(--line); background: var(--surface); transition: border-color .13s var(--xp-ease), box-shadow .13s var(--xp-ease), transform .13s var(--xp-ease); }
.arch--explore .xp:not(.is-active):hover { border-color: var(--orange); box-shadow: 0 6px 18px rgb(16 25 33 / 10%); transform: translateY(-1px); }
.arch--explore .xp__head { padding-right: 16px; } /* only the name makes room for the pill, so the summary runs the full width */
.arch--explore .xp__head strong { padding-right: 104px; }
.arch--explore .xp__head > span { max-height: 140px; } /* room for a four-line summary on phones */
.arch--explore .xp__icon { top: 10px; width: auto; height: 24px; padding: 0 9px 0 11px; display: flex; gap: 6px; border-radius: var(--radius-full); font-size: 0; transform: none; }
.arch--explore .xp__icon::before { content: "See how"; font-size: 12.5px; }
.arch--explore .xp__icon::after { content: "+"; font-size: 17px; transition: transform .15s var(--xp-ease); }
.arch--explore .xp.is-active .xp__icon { transform: none; }
.arch--explore .xp.is-active .xp__icon::before { content: "Hide"; }
.arch--explore .xp.is-active .xp__icon::after { transform: rotate(45deg); }
.arch--explore .xp:hover .xp__icon { background: var(--orange); border-color: var(--orange); color: #fff; }
.arch--explore.is-focused .xp:not(.is-active) .xp__icon { top: 10px; }

@keyframes xp-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes xp-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes xp-show { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .arch--explore .xp.is-open { --lag: .45s; } /* the caption and cards wait for the wires */
  .arch--explore .xp.is-open :is(.xp__code, .xp__media > img, .dep__note, .dep-card, .dep__more) { animation: xp-rise .42s var(--xp-ease) both; animation-delay: calc(var(--d, 0s) + var(--lag, 0s)); }
  .arch--explore .xp.is-open .dep__note { --d: .14s; }
  .arch--explore .xp.is-open .dep-card:nth-child(1) { --d: .22s; }
  .arch--explore .xp.is-open .dep-card:nth-child(2) { --d: .3s; }
  .arch--explore .xp.is-open .dep-card:nth-child(3) { --d: .38s; }
  .arch--explore .xp.is-open .dep-card:nth-child(4) { --d: .46s; }
  .arch--explore .xp.is-open .dep__more { --d: .5s; }
  .arch--explore .xp.is-open .dep__wire { stroke-dasharray: 1; animation: xp-draw .55s .15s var(--xp-ease) both; } /* site.js gives each wire pathLength=1 */
  .arch--explore .xp.is-open .dep__pulse { animation: xp-show .2s .7s both; }
  .arch--explore .xp.is-open .dep > :not(.dep__wires, .dep__node--cloud) { animation: xp-rise .35s .5s var(--xp-ease) both; }
}

/* ---------- Large screens ---------- */
/* On big monitors the 1280px layout would sit in a narrow strip with small type, so the whole page
   scales up in steps. Height counts too, so an ultrawide (3440 x 1440) scales like a 2560 x 1440 screen. */
@media (min-width: 1800px) and (min-height: 1000px) { html { zoom: 1.125; --zoom: 1.125; } }
@media (min-width: 2200px) and (min-height: 1240px) { html { zoom: 1.25; --zoom: 1.25; } }
@media (min-width: 2800px) and (min-height: 1500px) { html { zoom: 1.5; --zoom: 1.5; } }
/* Viewport units are zoomed too, so anything sized to the screen height divides by the zoom (var(--zoom), 1 elsewhere). */

/* Homepage contact: two calls to action side by side, one for customers and one for investors */
.cta-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: var(--space-4); }
.cta-box { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: 40px; border-radius: var(--radius-lg); background: var(--panel); }
.cta-box h2 { font-weight: var(--fw-display); font-size: clamp(28px, 2.6vw, 36px); line-height: 1.2; letter-spacing: -.015em; max-width: 16em; text-wrap: balance; }
.cta-box h2 .em { font-weight: inherit; color: var(--role-heading-em); }
.cta-box .btn-row { margin-top: auto; padding-top: var(--space-4); }
@media (max-width: 640px) { .cta-box { padding: 28px 24px; } }

/* Investor interest form: a link out for visitors on the wrong form, paired selects, optional tags, a consent checkbox */
.apply-switch { margin: 0; font-size: 15px; color: var(--ink-muted); }
.apply-switch .link-arrow { display: inline; margin-left: 4px; }
.apply-switch .link-arrow::after { display: inline-block; margin-left: 6px; }
.apply-form select { min-height: 48px; } /* as tall as the text fields */
.apply-form__req { margin: 0; }
.apply-form__pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 16px; }
.apply-form__opt { margin-left: 6px; font-weight: var(--fw-quiet); color: var(--ink-muted); }
.apply-form label.apply-form__check { flex-direction: row; align-items: flex-start; gap: 10px; font-weight: 400; line-height: 22px; }
.apply-form .apply-form__check input { flex: none; width: 20px; height: 20px; min-height: 0; margin: 1px 0 0; padding: 0; accent-color: var(--action); }
.apply-form__group { margin: 0; padding: 0; border: 0; min-width: 0; }
.apply-form__group legend { margin-bottom: 8px; padding: 0; font-size: 14px; font-weight: var(--fw-ui); color: var(--ink); }
.apply-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.apply-form label.apply-chip { position: relative; display: inline-flex; font-weight: var(--fw-quiet); }
.apply-form .apply-chip input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; opacity: 0; cursor: pointer; }
.apply-chip span { padding: 9px 16px; border: 1px solid var(--line-strong); border-radius: var(--radius-full); background: var(--surface); line-height: 20px; transition: background-color .15s ease, border-color .15s ease; }
.apply-chip input:checked + span { border-color: var(--action); background: var(--selected); }
.apply-chip input:checked + span::before { content: "✓ "; color: var(--orange-text); }
.apply-chip input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.apply-chip:hover span { border-color: var(--ink); }


/* ---------- Colour roles by semantic tag ----------
   Pages tag elements with data-ui so colours can be assigned by role in tokens.css:
   tile-header  the kicker or label that opens a card or tile
   tile-footer  the closing line of a card (punch line, quote attribution)
   infographic  a drawn diagram or chart; its marks use --role-graphic, its captions --role-graphic-label */
[data-ui="tile-header"] { color: var(--role-tile-header); }
[data-ui="tile-footer"] { color: var(--role-tile-footer); }
:is(.stat-card__kicker, .path__n, .products__kicker, .news-card__date)[data-ui="tile-header"] { color: var(--role-tile-header-small); }

/* Contact form: two tracks chosen by the first question; only the chosen track's fields show */
.apply-tracks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 12px; }
.apply-form label.apply-track { position: relative; display: block; font-weight: 400; }
.apply-form .apply-track input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; opacity: 0; cursor: pointer; }
.apply-track span { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 16px 18px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface); transition: background-color .15s ease, border-color .15s ease; }
.apply-track b { font-size: 17px; line-height: 22px; font-weight: var(--fw-title); color: var(--ink); }
.apply-track small { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.apply-track:hover span { border-color: var(--ink); }
.apply-track input:checked + span { border-color: var(--action); box-shadow: inset 0 0 0 1px var(--action); background: var(--selected); }
.apply-track input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.apply-form__track { display: flex; flex-direction: column; gap: 16px; min-width: 0; margin: 0; padding: 0; border: 0; }
.apply-chip span { display: inline-flex; align-items: center; gap: 6px; }
.apply-chip__logo { height: 16px; width: auto; } /* product pills show the product lockup */


/* Homepage: the "Find the right product for your team" button sits below the diagram */
:root[data-hero^="fullfloor"] .hero__text { order: 1; }
@media (min-width: 1280px) {
  :root[data-hero^="fullfloor"] .hero { grid-template-rows: auto clamp(360px, calc((64svh / var(--zoom, 1)) - 120px), 600px) auto; }
  :root[data-hero^="fullfloor"] .hero__media { grid-row: 2; } :root[data-hero^="fullfloor"] .hero__text { grid-row: 3; }
}

/* Homepage product rows link straight to their product pages (no expanding panel) */
a.acc__trigger { text-decoration: none; }
a.acc__trigger .acc__icon { transition: transform .18s ease; } a.acc__trigger:hover .acc__icon { transform: translateX(3px); }

/* Homepage hero: the data ripples (site.js) draw on this canvas, over the dot grid and under the edge fades */
.hero-ripples { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; pointer-events: none; }

/* Homepage bridge strip, medium screens: heading on top, then the diagram with the button beside it */
@media (min-width: 900px) and (max-width: 1299px) {
  .bridge { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; row-gap: 14px; }
  .bridge__main { display: contents; }
  .bridge__title { grid-column: 1 / -1; }
  .bridge__flow { grid-column: 1; grid-row: 2; } .bridge > .btn { grid-column: 2; grid-row: 2; align-self: center; }
}

/* Footer: the registered companies, as on quantrolox.com */
.site-footer__entities { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 8px 32px; padding-block: 0 var(--space-6); }
.site-footer__entities p { margin: 0; font-size: 12px; line-height: 18px; color: var(--ink-muted); }
.site-footer__entities b { margin-right: 6px; font-weight: var(--fw-ui); color: var(--ink); }

/* Company: the last roster tile invites applicants to the open roles */
.roster__you a { display: contents; color: inherit; text-decoration: none; }
.roster .roster__plus { grid-row: 1 / span 2; display: grid; place-items: center; width: 48px; height: 48px; box-sizing: border-box; border: 1.5px dashed var(--orange); border-radius: 50%; color: var(--orange); font-size: 24px; line-height: 1; }
.roster .roster__you span:last-child { color: var(--orange-text); font-weight: var(--fw-ui); }
.roster__you:hover .roster__plus { background: var(--selected); }

/* Homepage bridge strip, wide screens: one row with the heading on the left, the diagram in the middle, and the button on the right */
@media (min-width: 1300px) {
  .bridge { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; column-gap: 32px; }
  .bridge__main { display: contents; }
  .bridge__title { grid-column: 1; grid-row: 1; font-size: 26px; line-height: 32px; }
  .bridge__flow { grid-column: 2; grid-row: 1; }
  .bridge > .btn { grid-column: 3; grid-row: 1; justify-self: end; align-self: center; }
}