/* ============================================================
   Naxis Technologies - naxistechnologies.com
   Swiss-minimal system: white ground, hairline dividers, one
   structural accent (steel), copper annotation, registration
   grid at the periphery only - never under running text.
   ============================================================ */

@font-face {
  font-family: "InterVariable";
  src: url("../fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + var(--header-off) + 16px); }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  font-feature-settings: "cv05" 1, "ss01" 1;
  /* decorative absolutes (pattern patches, floating pills) may poke past
     the viewport; never grow a horizontal scrollbar for them */
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
h1, h2, h3, h4, p, dl, dd, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
::selection { background: var(--brand-wash-2); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 2px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: #fff; padding: .5rem 1rem; border-radius: 0 0 var(--r-ctl) 0;
}
.skip-link:focus { left: 0; }

/* ---------- typography ---------- */
.display {
  font-size: var(--fs-display);
  font-weight: 620;
  line-height: 1.03;
  letter-spacing: -.031em;
  text-wrap: balance;
}
h2, .h2 {
  font-size: var(--fs-h2);
  font-weight: 620;
  line-height: 1.12;
  letter-spacing: -.022em;
  text-wrap: balance;
}
h3, .h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.3; letter-spacing: -.012em; }
.lead   { font-size: var(--fs-lead); line-height: 1.6; color: var(--muted); max-width: 34em; }
.small  { font-size: var(--fs-small); color: var(--muted); }
.mono   { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .02em; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--copper);
  display: block;
  margin-bottom: 1.1rem;
}

/* the frontpage's section mark - the eyebrow text retired in its favor:
   a drafted copper rule, solid stroke then a fading registration tick,
   like a measure mark on a drawing */
.head-rule {
  display: block;
  width: 54px; height: 4px;
  margin-bottom: 1.15rem;
  border-radius: 99px;
  background: linear-gradient(90deg,
    var(--copper) 0 60%,
    transparent 60% 70%,
    rgba(208, 133, 66, .38) 70% 100%);
}

.prose p { max-width: 42em; }
.prose p + p { margin-top: 1em; }
.prose a { color: var(--brand); border-bottom: 1px solid var(--line-strong); }
.prose a:hover { border-bottom-color: var(--brand); }

/* ---------- layout ---------- */
.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container-wide { max-width: var(--container-wide); margin-inline: auto; padding-inline: var(--gutter); }

.section { padding-block: var(--sect); }
.section + .section { border-top: 1px solid var(--line); }
.section--tint { background: var(--bg-tint); }

/* section head: annotation number right-aligned, Swiss band */
.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 1rem 2rem;
  margin-bottom: clamp(2.2rem, 5vw, 3.6rem);
}
.section-head .lead { margin-top: 1rem; }

.cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(1.5rem,3.5vw,3rem); }
.cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(1.25rem,2.5vw,2rem); }

/* ---------- header: a floating pane of actual glass ----------
   Detached from the page edges, rounded, with the full glass construction:
   deep blur + saturation behind, a gradient light-catching rim (bright where
   the light hits, steel where it refracts away), an inner top highlight, a
   darker refracted bottom edge, one diagonal sheen streak, and a soft drop
   shadow that keeps it floating. main.js still swaps two classes:
   .is-away     - scrolling down: the pane rides off with the page
   .is-scrolled - anywhere below the top: a touch more body + lift
   The dropdown windows beneath it are untouched. */
body { padding-top: calc(var(--header-h) + var(--header-off)); }
.site-header {
  position: fixed; top: var(--header-off); left: 14px; right: 14px; z-index: 100;
  border-radius: 18px;
  background:
    linear-gradient(112deg, rgba(255, 255, 255, .28) 2%, rgba(255, 255, 255, 0) 30%),
    linear-gradient(180deg, rgba(252, 254, 255, .38), rgba(243, 247, 251, .20));
  -webkit-backdrop-filter: blur(26px) saturate(190%);
          backdrop-filter: blur(26px) saturate(190%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .85),
    inset 0 -1px 0 rgba(34, 84, 121, .07),
    inset 1px 0 0 rgba(255, 255, 255, .30),
    inset -1px 0 0 rgba(255, 255, 255, .22),
    0 2px 6px rgba(22, 33, 43, .04),
    0 14px 34px -14px rgba(22, 33, 43, .14);
  transform: translateY(0);
  transition: transform .42s cubic-bezier(.22, .61, .21, 1),
              background .3s ease, box-shadow .3s ease;
}
/* the rim: a 1px gradient ring, masked so only the border band paints */
.site-header::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  padding: 1px; pointer-events: none;
  background: linear-gradient(135deg,
    rgba(255, 255, 255, .95), rgba(255, 255, 255, .30) 28%,
    rgba(34, 84, 121, .20) 58%, rgba(255, 255, 255, .60) 96%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
}
.site-header.is-scrolled {
  background:
    linear-gradient(112deg, rgba(255, 255, 255, .32) 2%, rgba(255, 255, 255, 0) 30%),
    linear-gradient(180deg, rgba(252, 254, 255, .52), rgba(243, 247, 251, .32));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    inset 0 -1px 0 rgba(34, 84, 121, .08),
    inset 1px 0 0 rgba(255, 255, 255, .30),
    inset -1px 0 0 rgba(255, 255, 255, .22),
    0 3px 8px rgba(22, 33, 43, .05),
    0 20px 44px -16px rgba(22, 33, 43, .18);
}
.site-header.is-away { transform: translateY(calc(-100% - var(--header-off) - 8px)); box-shadow: none; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header { background: rgba(252, 253, 254, .95); }
}
.site-header__in {
  height: var(--header-h);
  display: flex; align-items: center; gap: clamp(1.1rem, 2.4vw, 2.4rem);
  padding-inline: max(12px, calc(var(--gutter) - 14px));
}
/* the header carries the logo itself - the real long-form lockup,
   nothing constructed from text */
.logo-link { display: inline-flex; align-items: center; flex: none; }
.logo-link img { height: 30px; width: auto; display: block;
  transition: transform .18s ease; }
.logo-link:hover img { transform: scale(1.03); }

.wordmark { display: flex; align-items: center; gap: .6rem; font-weight: 640; letter-spacing: -.02em; font-size: 1.06rem; }
.wordmark svg, .wordmark img { flex: none; }
.wordmark .mono { color: var(--faint); margin-left: .1rem; letter-spacing: .14em; }

.site-nav { display: flex; align-items: center; gap: clamp(.9rem, 1.9vw, 1.7rem); margin-left: auto; }
.nav-top {
  display: inline-flex; align-items: center; gap: .38rem;
  font-size: .92rem; color: var(--muted);
  padding: .4rem 0; white-space: nowrap;
  transition: color .15s ease;
}
.nav-top:hover, .nav-top.is-active { color: var(--ink); }
.nav-caret { width: 9px; height: 6px; margin-top: 1px; opacity: .55;
  transition: transform .2s ease; }

/* dropdown groups */
.nav-group { position: relative; }
.nav-drop {
  position: absolute; left: 50%; top: 100%; transform: translateX(-50%);
  padding-top: 12px;                    /* hover bridge */
  opacity: 0; visibility: hidden; translate: 0 -4px;
  transition: opacity .18s ease, translate .18s ease, visibility 0s linear .18s;
  z-index: 50;
}
.nav-drop__panel {
  min-width: 288px;
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
          backdrop-filter: saturate(160%) blur(16px);
  border: 1px solid rgba(34, 84, 121, .13);
  border-radius: var(--r-panel);
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 18px 44px rgba(22, 33, 43, .12);
  padding: .45rem;
  display: grid;
}
.nav-drop__item {
  display: grid; gap: .1rem;
  padding: .58rem .75rem; border-radius: var(--r-ctl);
  transition: background .12s ease;
}
.nav-drop__item b { font-size: .9rem; font-weight: 600; letter-spacing: -.008em; color: var(--ink); }
.nav-drop__item em { font-style: normal; font-size: .78rem; color: var(--muted); line-height: 1.35; }
.nav-drop__item:hover { background: var(--brand-wash); }
.nav-drop__item.is-active b { color: var(--brand); }
.nav-drop__item--overview { border-bottom: 1px solid var(--line); border-radius: var(--r-ctl) var(--r-ctl) 0 0;
  margin-bottom: .25rem; }
.nav-drop__item--overview b { color: var(--brand); }
@media (hover: hover) and (pointer: fine) {
  .nav-group:hover .nav-drop, .nav-group:focus-within .nav-drop {
    opacity: 1; visibility: visible; translate: 0 0; transition-delay: 0s;
  }
  .nav-group:hover .nav-caret { transform: rotate(180deg); }
}
.nav-group.is-open .nav-drop {
  opacity: 1; visibility: visible; translate: 0 0; transition-delay: 0s;
}
.nav-group.is-open .nav-caret { transform: rotate(180deg); }

/* right-side actions */
.site-header__cta { display: flex; align-items: center; gap: .7rem; flex: none; }
.nav-erp {
  color: var(--muted); letter-spacing: .12em; font-size: .68rem;
  border: 1px solid var(--line-strong); border-radius: 6px; padding: .42em .7em;
}
.nav-erp:hover { color: var(--ink); border-color: var(--faint); }
.nav-account {
  display: inline-grid; place-items: center;
  width: 36px; height: 36px; border-radius: 99px;
  color: var(--muted); border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, .5);
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.nav-account:hover { color: var(--brand); border-color: var(--brand); background: #fff; }
.nav-account.is-signed { color: var(--brand); border-color: rgba(34, 84, 121, .45); }
.nav-toggle { display: none; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--brand); color: #fff;
  font-size: .94rem; font-weight: 560; letter-spacing: -.006em;
  padding: .64em 1.15em; border-radius: var(--r-ctl);
  transition: background .15s ease;
}
.btn:hover { background: var(--brand-deep); }
.btn--ghost {
  background: transparent; color: var(--ink);
  border: 1px solid var(--line-strong);
}
.btn--ghost:hover { background: var(--bg-tint); border-color: var(--faint); }
.btn--lg { font-size: 1.02rem; padding: .78em 1.4em; }
.btn--danger { background: #b3362a; border-color: #b3362a; }
.btn--danger:hover { background: #9a2d23; border-color: #9a2d23; }
/* "Continue with Google": a neutral bordered button with the inline G */
.btn--google {
  display: flex; align-items: center; justify-content: center; gap: .6em;
  width: 100%; background: #fff; color: var(--ink);
  border: 1px solid var(--line); margin-bottom: 1.1rem;
}
.btn--google:hover { background: var(--bg-tint); border-color: var(--faint); }

/* the Live demo button - the same quiet steel control as everything else.
   The only thing that says "live" is the small steady dot; no gradients,
   no sweeps, no glow, no breathing. */
.btn--demo i {
  width: 7px; height: 7px; border-radius: 99px; flex: none;
  background: #45d17d;
  box-shadow: 0 0 0 2px rgba(69, 209, 125, .22);
}
.btn--demo-hero { padding: .8em 1.5em; font-size: 1.04rem; }
.btn--demo-quiet { margin-top: 1.2rem; font-size: .88rem; }

.link-more { font-size: .94rem; font-weight: 560; color: var(--brand); white-space: nowrap; }
.link-more::after { content: " \2192"; }
.link-more:hover { color: var(--brand-deep); }

/* ---------- registration grid (periphery only) ---------- */
.reg-grid { position: relative; }
.reg-grid::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cpath d='M53.5 60h13M60 53.5v13' stroke='%23225479' stroke-opacity='.24' stroke-width='1'/%3E%3C/svg%3E"),
    linear-gradient(var(--grid-fine) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-fine) 1px, transparent 1px);
  background-size: 120px 120px, 20px 20px, 20px 20px;
  background-position: 10px 10px, .5px .5px, .5px .5px;
}
.reg-grid > * { position: relative; z-index: 1; }
/* fade the pattern out before it reaches content */
.reg-grid--fade-b::before {
  -webkit-mask-image: linear-gradient(#000 55%, transparent 96%);
          mask-image: linear-gradient(#000 55%, transparent 96%);
}
.reg-grid--fade-t::before {
  -webkit-mask-image: linear-gradient(transparent 4%, #000 45%);
          mask-image: linear-gradient(transparent 4%, #000 45%);
}
.reg-grid--soft::before { opacity: .55; }

/* ---------- generic hero CTA row (subpages) ---------- */
.hero__cta { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.4rem; }

/* citation marks + source chips - the product's own idiom, reused by the
   frontpage graphics */
.cite {
  display: inline-grid; place-items: center; vertical-align: .18em;
  min-width: 1.05rem; height: 1.05rem; padding: 0 .2em; margin: 0 .1em;
  border-radius: 99px; background: var(--copper); color: #fff;
  font-family: var(--font-mono); font-size: .62rem; font-weight: 700;
  cursor: default;
}
.cchip {
  display: inline-flex; align-items: center; gap: .5rem;
  border: 1px solid var(--line); border-radius: 99px; background: var(--bg);
  padding: .28rem .8rem .28rem .3rem;
  font-size: .8rem; color: var(--muted);
}
.cchip i {
  font-style: normal; flex: none; width: 1.15rem; height: 1.15rem; border-radius: 99px;
  display: grid; place-items: center;
  background: var(--copper); color: #fff;
  font-family: var(--font-mono); font-size: .62rem; font-weight: 700;
}
/* the four stories: render on one side, short copy on the other. The studio
   stills are white-on-white - no frames, no borders; the objects and their
   shadows sit directly on the page. */
.feat { padding-block: clamp(3.6rem, 8vw, 6rem); border-top: 1px solid var(--line); }
.feat__grid {
  display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
  gap: clamp(1.6rem, 4.5vw, 4.5rem); align-items: center;
}
.feat--flip .feat__grid { grid-template-columns: minmax(0, 9fr) minmax(0, 11fr); }
.feat--flip .feat__vis { order: 2; }
.feat__vis { margin: 0; min-width: 0; }
.feat__vis img { width: 106%; max-width: none; height: auto; display: block;
  /* renders are composited on page white; a gentle fade hides the last
     trace of the floor gradient at the crop edge */
  -webkit-mask-image: radial-gradient(120% 120% at 50% 50%, #000 68%, transparent 99%);
          mask-image: radial-gradient(120% 120% at 50% 50%, #000 68%, transparent 99%);
}
.feat--flip .feat__vis img { margin-left: -6%; }
.feat__copy { min-width: 0; max-width: 34rem; }
.feat__copy h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
.feat__copy > p { margin-top: 1.1rem; color: var(--muted); line-height: 1.65; }
.feat__copy .hair-rows { margin-top: 1.6rem; }
.feat__more { margin-top: 1.5rem; font-weight: 560; }
.feat__more a { color: var(--brand); }
@media (max-width: 960px) {
  .feat__grid, .feat--flip .feat__grid { grid-template-columns: 1fr; }
  .feat--flip .feat__vis { order: 0; }
  .feat__vis img, .feat--flip .feat__vis img { width: 100%; margin: 0; }
}

/* ---------- stats band ---------- */
.stats {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  border-block: 1px solid var(--line);
}
.stat { padding: 1.9rem 1.6rem 1.7rem; }
.stat + .stat { border-left: 1px solid var(--line); }
.stat__n {
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  font-weight: 620; letter-spacing: -.03em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat__l { margin-top: .55rem; font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--muted); letter-spacing: .05em; text-transform: uppercase; }

/* ---------- acts (home narrative) ---------- */
.act { padding-block: var(--sect); border-top: 1px solid var(--line); }
.act__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.act__num {
  font-family: var(--font-mono); font-size: var(--fs-mono);
  color: var(--copper); letter-spacing: .16em; margin-bottom: 1.1rem; display: block;
}
.act h2 { max-width: 13em; }
.act .prose { margin-top: 1.4rem; }
.act__aside { min-width: 0; }
.act__more { margin-top: 1.8rem; }

/* ---------- hairline fact rows ---------- */
.hair-rows { border-top: 1px solid var(--line); }
.hair-rows > div {
  display: grid; grid-template-columns: minmax(9rem, 14rem) minmax(0,1fr);
  gap: 1.5rem; padding: .8rem 0;
  border-bottom: 1px solid var(--line);
}
.hair-rows dt { font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--muted); letter-spacing: .04em; padding-top: .18em; }
.hair-rows dd { font-size: .95rem; }

/* plain hairline list (one item per row) */
.hair-list { border-top: 1px solid var(--line); }
.hair-list > li { padding: .72rem 0; border-bottom: 1px solid var(--line); font-size: .95rem; display: flex; gap: 1rem; align-items: baseline; }
.hair-list .mono { color: var(--faint); flex: none; }

/* ---------- logo wall / tiles ---------- */
.wall { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 0; border: 1px solid var(--line); border-radius: var(--r-panel); overflow: hidden; }
.wall__tile {
  aspect-ratio: 7 / 5;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .7rem;
  background: var(--bg);
  box-shadow: 1px 1px 0 0 var(--line); /* inner hairlines without doubled borders */
  padding: 1rem;
}
.wall__tile img, .wall__tile svg { width: 30px; height: 30px; object-fit: contain; }
.wall__tile span { font-size: .78rem; color: var(--muted); text-align: center; line-height: 1.25; }
.wall__tile--more { background: var(--bg-tint); color: var(--brand); font-weight: 560; font-size: .9rem; }

/* ---------- catalog cards (integrations / channels) ---------- */
.cat-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1rem; }
.cat-card {
  border: 1px solid var(--line); border-radius: var(--r-panel);
  padding: 1.15rem 1.2rem 1.05rem;
  display: flex; flex-direction: column; gap: .55rem;
  background: var(--bg);
  transition: border-color .15s ease;
}
.cat-card:hover { border-color: var(--line-strong); }
.cat-card__top { display: flex; align-items: center; gap: .7rem; }
.cat-card__logo { width: 26px; height: 26px; flex: none; display: grid; place-items: center; }
.cat-card__logo img { width: 24px; height: 24px; object-fit: contain; }
.cat-card__name { font-weight: 600; font-size: .98rem; letter-spacing: -.01em; }
.cat-card__desc { font-size: .88rem; color: var(--muted); line-height: 1.5; }
.cat-card__meta { margin-top: auto; padding-top: .5rem; display: flex; gap: .9rem; font-family: var(--font-mono); font-size: .7rem; letter-spacing: .05em; color: var(--faint); text-transform: uppercase; }

/* filter chips - rectangular, not pills */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.8rem; }
.chip {
  font-family: var(--font-mono); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase;
  border: 1px solid var(--line); border-radius: 6px;
  padding: .42em .8em; color: var(--muted);
  transition: all .12s ease;
}
.chip:hover { border-color: var(--line-strong); color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ---------- plates & media frames (sharp decor) ---------- */
.plate {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-plate);
  box-shadow: var(--plate-shadow);
  background: var(--bg);
}
.media-frame {
  position: relative;
  aspect-ratio: 16 / 10;
  background:
    linear-gradient(var(--grid-fine) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-fine) 1px, transparent 1px),
    var(--bg-tint);
  background-size: 20px 20px, 20px 20px, auto;
  display: grid; place-items: center;
  overflow: hidden;
}
.media-frame > img, .media-frame > video { width: 100%; height: 100%; object-fit: cover; }
.media-frame__label {
  font-family: var(--font-mono); font-size: var(--fs-mono);
  color: var(--faint); letter-spacing: .12em; text-transform: uppercase;
  padding: 1rem; text-align: center;
}
.media-frame--video { aspect-ratio: 16 / 9; cursor: pointer; }

figcaption { font-family: var(--font-mono); font-size: .72rem; color: var(--faint); letter-spacing: .08em; text-transform: uppercase; margin-top: .7rem; }

/* ---------- diagram list (mono ledger look) ---------- */
.ledger {
  border: 1px solid var(--line-strong); border-radius: var(--r-plate);
  box-shadow: var(--plate-shadow); background: var(--bg);
  font-family: var(--font-mono); font-size: .8rem; line-height: 1.5;
}
.ledger > div { padding: .78rem 1.1rem; border-bottom: 1px solid var(--line); display: flex; gap: 1rem; align-items: baseline; }
.ledger > div:last-child { border-bottom: 0; }
.ledger b { font-weight: 600; color: var(--brand); flex: none; min-width: 7.5em; }
.ledger i { font-style: normal; color: var(--copper); }
.ledger span { color: var(--muted); }

/* ---------- CTA band ---------- */
.cta-band { border-top: 1px solid var(--line); }
.cta-band__in { padding-block: var(--sect); max-width: 46rem; }
.cta-band .display { font-size: clamp(2rem, 4.6vw, 3.3rem); }
.cta-band__actions { margin-top: 2.2rem; display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; }

/* ---------- forms ---------- */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.1rem 1.2rem; }
.field { display: flex; flex-direction: column; gap: .45rem; }
.field--full { grid-column: 1 / -1; }
.field label { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.field input, .field select, .field textarea {
  font: inherit; font-size: .96rem; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--r-ctl);
  padding: .62em .8em; width: 100%;
}
.field textarea { min-height: 9.5rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }

/* consent / opt-in rows: body-size text, checkbox in brand blue */
.check-row { display: flex; align-items: flex-start; gap: .55rem;
  font-size: .9rem; color: var(--ink); cursor: pointer; }
.check-row input[type="checkbox"] { width: 15px; height: 15px; margin-top: .18em;
  flex: none; accent-color: var(--brand); cursor: pointer; }
.form-note { font-size: .84rem; color: var(--faint); max-width: 36em; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* honeypot */

.form-result { border: 1px solid var(--line-strong); border-left: 3px solid var(--brand); border-radius: var(--r-ctl); padding: .9rem 1.1rem; font-size: .94rem; margin-bottom: 1.6rem; }
.form-result--err { border-left-color: var(--copper); }
.btn-link { background: none; border: 0; padding: 0; font: inherit; color: var(--brand); text-decoration: underline; cursor: pointer; }
.btn-link:hover { color: var(--brand-deep); }

/* ---------- trust library (Security & Compliance) ---------- */
.trust-group {
  font-family: var(--font-mono); font-size: .72rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--copper);
  margin: 2.6rem 0 .9rem;
}
.trust-group:first-of-type { margin-top: 0; }
.trust-rows { display: grid; gap: .6rem; }
.trust-row {
  border: 1px solid var(--line); border-radius: var(--r-panel);
  background: var(--bg);
  transition: border-color .15s ease;
}
.trust-row[open] { border-color: var(--brand); }
.trust-row summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem 1.25rem;
}
.trust-row summary::-webkit-details-marker { display: none; }
.trust-row__title { font-weight: 600; letter-spacing: -.01em; flex: 1; min-width: 0; }
.trust-pill {
  flex: none; font-family: var(--font-mono); font-size: .64rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .3em .8em; border-radius: 99px;
}
.trust-pill--read { background: var(--brand-wash-2); color: var(--brand); }
.trust-pill--prep { background: var(--bg-dip); color: var(--muted); }
.trust-row__caret { flex: none; font-family: var(--font-mono); color: var(--copper); font-size: 1.05rem; }
.trust-row[open] .trust-row__caret { transform: rotate(45deg); }
.trust-row__body {
  padding: .2rem 1.25rem 1.4rem;
  border-top: 1px solid var(--line);
  margin-top: 0;
}
.trust-row__body > * + * { margin-top: .9rem; }
.trust-row__sum { padding-top: 1rem; font-weight: 560; color: var(--ink); max-width: 52em; }
.trust-row__body p { font-size: .95rem; color: var(--muted); max-width: 56em; line-height: 1.65; }
.trust-row__body h4 {
  font-family: var(--font-mono); font-size: .7rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--copper);
  margin-top: 1.4rem;
}
.trust-row__body .hair-rows dd { color: var(--muted); }
.trust-list { list-style: none; }
.trust-list li {
  position: relative; padding: .55rem 0 .55rem 1.4rem;
  border-bottom: 1px solid var(--line); font-size: .95rem; color: var(--muted);
}
.trust-list li:last-child { border-bottom: 0; }
.trust-list li::before {
  content: ""; position: absolute; left: 0; top: 1.02em;
  width: 8px; height: 8px;
  background: var(--copper-wash-2);
  box-shadow: inset 0 0 0 1px rgba(168, 94, 36, .45);
}
.trust-row__req { font-size: .9rem; }
.trust-row__req a, .trust-foot a { color: var(--brand); }
.trust-foot { margin-top: 2.2rem; font-size: .95rem; color: var(--muted); max-width: 52em; }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: baseline; gap: 2rem;
  padding: 1.05rem 0; font-weight: 560; font-size: 1.02rem; letter-spacing: -.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-mono); color: var(--copper); font-size: 1.1rem; flex: none; }
.faq details[open] summary::after { content: "\2013"; }
.faq .faq__a { padding: 0 0 1.3rem; max-width: 44em; color: var(--muted); font-size: .96rem; }

/* ---------- code ---------- */
pre.code {
  font-family: var(--font-mono); font-size: .8rem; line-height: 1.6;
  background: var(--bg-tint); border: 1px solid var(--line); border-radius: var(--r-panel);
  padding: 1rem 1.2rem; overflow-x: auto; margin: 0;
}

/* ---------- paper / tutorial rows ---------- */
.doc-rows { border-top: 1px solid var(--line); }
.doc-row {
  display: grid; grid-template-columns: minmax(7rem, 10rem) minmax(0, 1fr) auto;
  gap: 1.5rem; align-items: baseline;
  padding: 1.15rem 0; border-bottom: 1px solid var(--line);
}
.doc-row__kind { font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--copper); letter-spacing: .08em; text-transform: uppercase; }
.doc-row__body h3 { font-size: 1.05rem; }
.doc-row__body p { font-size: .9rem; color: var(--muted); margin-top: .3rem; max-width: 40em; }
.doc-row__act { font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--muted); white-space: nowrap; }
.doc-row__act a { color: var(--brand); }

.tut-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.2rem; }
.tut-card { border: 1px solid var(--line); border-radius: var(--r-panel); overflow: hidden; background: var(--bg); }
.tut-card .media-frame { aspect-ratio: 16 / 9; border-bottom: 1px solid var(--line); }
.tut-card__body { padding: 1rem 1.15rem 1.15rem; }
.tut-card__body h3 { font-size: 1rem; }
.tut-card__body p { font-size: .86rem; color: var(--muted); margin-top: .35rem; }
.tut-card__meta { margin-top: .7rem; font-family: var(--font-mono); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }

/* empty states - factual, quiet */
.empty-note {
  border: 1px dashed var(--line-strong); border-radius: var(--r-panel);
  padding: 2.2rem 2rem; color: var(--muted); font-size: .95rem; max-width: 44em;
}

/* ---------- footer ----------
   The quiet steel field, with the auth-zone's oblique slices leaning
   through its right half - the same drafting-table language as the app's
   login page. Decor stays sharp (radius 0) and under the content. */
.site-footer {
  position: relative; overflow: hidden; isolation: isolate;
  border-top: 1px solid var(--line); background: var(--bg-tint);
  background-image:
    linear-gradient(var(--grid-fine) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-fine) 1px, transparent 1px);
  background-size: 20px 20px, 20px 20px;
  background-position: .5px .5px;
}
.site-footer::before {
  /* fade the drafting grid out before it reaches the reading columns */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, var(--bg-tint) 34%, rgba(245, 247, 249, .1) 78%);
}
.site-footer__slash { position: absolute; z-index: -1; top: -12%; bottom: -12%;
  transform: skewX(-18deg); pointer-events: none; }
.site-footer__slash--a { right: 16%; width: 74px; background: var(--brand); opacity: .08; }
.site-footer__slash--b { right: 9.5%; width: 20px; border: 1px solid rgba(208, 133, 66, .5);
  border-block: 0; }
.site-footer__slash--c { right: 27%; width: 7px; background: rgba(208, 133, 66, .12); }
.site-footer__body { position: relative; }
.site-footer__grid {
  display: grid; grid-template-columns: minmax(0, 5fr) repeat(4, minmax(0, 3fr));
  gap: 2.2rem; padding-block: 3.5rem 1.3rem;
}
.site-footer__brand p { margin-top: 1rem; font-size: .88rem; color: var(--muted); max-width: 24em; }
.site-footer h4 { font-size: .69rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-bottom: 1rem; }
.site-footer ul li + li { margin-top: .55rem; }
.site-footer ul a { font-size: .9rem; color: var(--muted); }
.site-footer ul a:hover { color: var(--ink); }

/* the Ask-AI annex: a hairline annex under the brand words - the
   invitation in the house sans, then the assistants' raw marks on the
   dark rail, each link carrying the prompt. */
.site-footer__askai { margin-top: 1.7rem; padding-top: 1.15rem;
  border-top: 1px solid rgba(255, 255, 255, .09); max-width: 24em; }
.site-footer__askai p.site-footer__askai-label { margin: 0; font-size: .9rem;
  color: rgba(217, 228, 238, .8); }
.site-footer__askai-row { display: flex; flex-wrap: wrap; gap: .4rem;
  margin-top: .55rem; margin-left: -.65rem; }
.site-footer .site-footer__askai-row a {
  display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 11px; color: rgba(217, 228, 238, .85);
  transition: color .15s ease, background-color .15s ease;
}
.site-footer .site-footer__askai-row a:hover { color: #fff;
  background: rgba(255, 255, 255, .08); }
.site-footer__askai-row svg { display: block; width: 24px; height: 24px; }
.site-footer__legal {
  border-top: 1px solid var(--line);
  padding-block: 1.3rem;
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between;
  font-size: .76rem; letter-spacing: .015em; font-variant-numeric: tabular-nums; color: var(--faint);
}

/* ---------- 404 ---------- */
.err-page { min-height: 55vh; display: grid; align-content: center;
  position: relative; overflow: clip; }
.err-page > .container { position: relative; z-index: 1; }

/* ============================================================
   Motion. html.fx (set inline in <head> only when the visitor
   allows motion) gates the LIVING graphics - the marquee belt,
   the typing bar, the page-flips, the drifting pills. There is
   deliberately NO entrance choreography: the page arrives whole,
   instantly (founder, 2026-07-17 - "stop the slow load visual").
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .cat-grid, .tut-grid, .cols-3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .wall { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .act__grid, .cols-2 { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .stat:nth-child(3) { border-left: 0; }
  .stat { border-top: 1px solid var(--line); }
  .stat:first-child, .stat:nth-child(2) { border-top: 0; }
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* ---------- header: compact ---------- */
@media (max-width: 860px) {
  .site-nav {
    display: none;
    position: fixed; top: calc(var(--header-h) + var(--header-off) + 8px);
    left: 14px; right: 14px;
    max-height: calc(100dvh - var(--header-h) - var(--header-off) - 22px);
    overflow-y: auto; overscroll-behavior: contain;
    flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(252, 253, 254, .92);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
            backdrop-filter: saturate(180%) blur(18px);
    border: 1px solid rgba(255, 255, 255, .6);
    border-radius: 16px;
    box-shadow: 0 24px 48px rgba(22, 33, 43, .14);
    padding: .5rem var(--gutter) 1.4rem; margin: 0;
  }
  .site-nav.is-open { display: flex; }
  .site-nav { background: rgba(252, 253, 254, .97); }
  html.nav-locked, html.nav-locked body { overflow: hidden; }
  .nav-top { width: 100%; padding: .85rem 0; font-size: 1.02rem;
    border-bottom: 1px solid var(--line); border-radius: 0;
    justify-content: space-between; }
  .nav-group { width: 100%; }
  .nav-group .nav-drop {
    position: static; transform: none; padding-top: 0;
    opacity: 1; visibility: visible; translate: 0 0;
    display: none;
  }
  .nav-group.is-open .nav-drop { display: block; }
  .nav-drop__panel {
    min-width: 0; background: transparent; border: 0; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    padding: .25rem 0 .6rem;
  }
  .nav-drop__item { padding: .55rem .65rem; }
  .nav-toggle {
    display: inline-block; position: relative;
    width: 38px; height: 36px;
    border: 1px solid var(--line-strong); border-radius: var(--r-ctl);
  }
  .nav-toggle span { position: absolute; left: 50%; top: 50%;
    width: 16px; height: 2px; margin: -1px 0 0 -8px;
    background: var(--ink); border-radius: 2px;
    transition: transform .22s ease; }
  .nav-toggle span:first-child { transform: translateY(-3.2px); }
  .nav-toggle span:last-child { transform: translateY(3.2px); }
  .nav-toggle[aria-expanded="true"] span:first-child { transform: rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:last-child { transform: rotate(-45deg); }
  .site-header__cta { gap: .55rem; margin-left: auto; }
  .btn--demo { font-size: .88rem; padding: .55em .95em; }
  .nav-erp { display: none; }
}

@media (max-width: 720px) {
  .cat-grid, .tut-grid { grid-template-columns: 1fr; }
  .wall { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .form-grid { grid-template-columns: 1fr; }
  .doc-row { grid-template-columns: 1fr; gap: .35rem; }
  .hair-rows > div { grid-template-columns: 1fr; gap: .15rem; }
  .section-head { grid-template-columns: 1fr; }
}

/* -- commerce: the pricing deck (2026-08-23, the reference build) -----------
   The founder's reference in light mode, built the way the reference is
   built: each card's ENTIRE background is one composed raster
   (bin/art/pricing-cards/compose.py -> assets/img/plans/card-*.webp) —
   translucent chiffon draped over the top edge, its glow pooling into an
   authored hue field with fine grain baked in. No wrapper stage: the
   three cards stand straight on a calm light ground. Light segmented
   pills, ink type on the wash, cents on the price, ink corner ribbon +
   luminous violet action on Team.

   2026-08-24: the field runs SIDEWAYS, not top to bottom. Each card is lit
   on the edges that face the middle of the deck — Starter on its right,
   Team on both, Enterprise on its left — so colour pools at the two
   gutters and every card keeps a calm core for its type. The rasters are
   5.25:1 for that reason: a 320px viewport stretches a card to 4.87:1, and
   a flat fall-through colour cannot continue a sideways wash. --pc-fall is
   now only the degrade-if-missing tone (compose.py prints it).

   2026-08-25: the crown is BIGGER and reaches the type. compose.py solves a
   crop of each veil render (a uniform window — the same picture, larger) that
   bleeds cloth off the top edge AND both side edges, carries .74-.86 of the
   zone as coloured fabric, and still has a hem crossing its last row. The
   zone grew 800/305 -> 800/375. Two failures are baked into those rules: at
   800/305 the hem sat at ~55% of the zone and the gap under it read as dead
   space, and sizing the window to the hem alone left the ribbon's own outline
   inside the frame so the border cut it — "manually cut out by border". */

#plans { border-top: 0;
  background: linear-gradient(180deg, #f3f1fa 0%, #f7f8fc 60%, #ffffff 100%); }
/* .page-pricing::before flat-lavender aurora override REMOVED 2026-08-27
   (founder: "pale blue glassy with orange lights behind it type of screen
   background, that's what these sections have in other pages"). It replaced
   the site aurora (body::before — steel/sky/copper/violet/teal pools) with a
   flat lavender page-wide, so #faq and .sec-blog — transparent, like every
   other page's — lost the glassy blue ground with the copper light that shows
   behind them site-wide. #plans keeps its OWN opaque ground above, so the deck
   stays calm while the aurora returns for the page's transparent sections. */
/* first section, and NOT a .page-hero: pull its own calm ground up under the
   fixed glass header the way a hero does, so the restored aurora's steel-blue
   top-left pool does not lens through the header as a blue strip. On mobile
   --header-h/off are 0px, so this resolves to no pull-up automatically. The
   inline padding-top was removed from the #plans tag so this wins cleanly. */
.page-pricing #plans {
  position: relative;
  margin-top: calc(-1 * (var(--header-h) + var(--header-off)));
  padding-top: calc(var(--header-h) + var(--header-off) + clamp(2.2rem, 4.5vw, 3.2rem));
}
#plans .hseg label, #plans .plan-tab { font-weight: 480; }
/* the seat count lives inside this label, so the box is held, not the digits */
.plan-extend #seat-buy { min-width: 12.7em; justify-content: center; }
/* the deck's head is the house one: copper mark, then the claim. The
   hosting sentence that used to sit under it was dropped 2026-08-25 —
   each card's own note already says which hosting is selected. */
#plans .section-head { margin-bottom: clamp(1.7rem, 3vw, 2.5rem);
  align-items: center; }
#plans .section-head .head-rule { margin-bottom: .9rem; }

/* the reference's segmented pills, in ink on the light ground */
.deck-host { display: grid; justify-items: end; gap: .6rem; }
.hseg { position: relative; display: inline-flex; padding: 4px; border-radius: 14px;
  background: rgba(255, 255, 255, .75); border: 1px solid rgba(22, 33, 43, .1);
  box-shadow: inset 0 1px 0 #fff, 0 8px 24px -14px rgba(58, 52, 110, .35);
  --seg-lead: .3s; --seg-trail: .46s;
  --seg-ease: cubic-bezier(.32, .72, 0, 1); }
.hseg label { position: relative; z-index: 1; display: flex; align-items: baseline;
  gap: .5em; padding: .52em 1.1em; border-radius: 10px; cursor: pointer;
  font-size: .9rem; color: rgba(22, 33, 43, .6);
  white-space: nowrap; transition: color .24s ease; }
.hseg label small { font-size: .64rem; font-weight: 600; letter-spacing: .02em;
  color: rgba(22, 33, 43, .42); transition: color .24s ease; }
.hseg input { position: absolute; opacity: 0; pointer-events: none; }
/* the lit option is a class the page JS sets - :has(:checked) misses the
   sibling UNcheck of a radio group in Blink, so the state is driven, not
   selected */
.hseg label.is-on { color: #2f2a45; overflow: hidden; isolation: isolate;
  box-shadow: inset 0 0 0 1px rgba(130, 120, 220, .35),
              0 0 14px -3px rgba(140, 132, 230, .5),
              0 3px 10px -4px rgba(90, 80, 170, .35); }
.hseg label.is-on::before { content: ""; position: absolute; inset: -45%;
  z-index: -1;
  background:
    radial-gradient(52% 130% at 18% 35%, rgba(142, 144, 214, .8),
                    rgba(142, 144, 214, 0) 72%),
    radial-gradient(34% 95% at 66% 0%, rgba(154, 196, 240, .75),
                    rgba(154, 196, 240, 0) 74%),
    radial-gradient(28% 85% at 86% 90%, rgba(214, 164, 228, .6),
                    rgba(214, 164, 228, 0) 74%),
    linear-gradient(120deg, #f3f0fc 0%, #e9e5f8 60%, #efeafa 100%);
  filter: blur(7px); }
.hseg label.is-on small { color: rgba(47, 42, 69, .62); }
/* the ring belongs to the KEYBOARD. :focus-within fires on a mouse click
   too, so every flip of the switch left a hard navy outline parked on the
   pill - which is most of why using it felt like something snagging. */
.hseg label:has(input:focus-visible) {
  outline: 2px solid var(--brand); outline-offset: 2px; }
@supports not selector(:has(*)) {
  .hseg label:focus-within {
    outline: 2px solid var(--brand); outline-offset: 2px; }
}

/* ---- THE LIT PILL TRAVELS (2026-08-26) ----------------------------------
   It used to be a costume each label put on: the rings and the blurred wash
   above hung off .is-on, so flipping Monthly/Annual made one pill vanish and
   another appear in the same frame. Now pages.js builds ONE .hseg__thumb per
   group and moves it; the rules above stay as the pre-JS and no-JS state and
   are handed over the moment the thumb exists (.has-thumb).

   The thumb is sized with left+right, NOT transform+width, and that is the
   whole mechanism: those two properties ARE the trailing and leading edges,
   so giving them different durations makes the pill reach ahead of itself
   and gather in behind - the stretch that reads as one liquid object instead
   of a box being teleported. transform+scaleX cannot do it here: the two
   options differ ~1.8x in width, and scaling that far smears the 10px radius
   and every ring in the box-shadow with it. Two abspos boxes' edges is a
   layout cost the compositor would rather not have; at this size it is
   nothing, and the look is the point. */
.hseg.has-thumb label.is-on { overflow: visible; isolation: auto;
  box-shadow: none; transition-delay: .09s; }
.hseg.has-thumb label.is-on::before { content: none; }
.hseg.has-thumb label.is-on small { transition-delay: .09s; }
.hseg__thumb { position: absolute; z-index: 0; top: 4px; bottom: 4px;
  left: 0; right: 100%; border-radius: 10px; pointer-events: none;
  overflow: hidden; isolation: isolate;
  box-shadow: inset 0 0 0 1px rgba(130, 120, 220, .35),
              0 0 14px -3px rgba(140, 132, 230, .5),
              0 3px 10px -4px rgba(90, 80, 170, .35); }
.hseg__thumb::before { content: ""; position: absolute; inset: -45%;
  z-index: -1;
  background:
    radial-gradient(52% 130% at 18% 35%, rgba(142, 144, 214, .8),
                    rgba(142, 144, 214, 0) 72%),
    radial-gradient(34% 95% at 66% 0%, rgba(154, 196, 240, .75),
                    rgba(154, 196, 240, 0) 74%),
    radial-gradient(28% 85% at 86% 90%, rgba(214, 164, 228, .6),
                    rgba(214, 164, 228, 0) 74%),
    linear-gradient(120deg, #f3f0fc 0%, #e9e5f8 60%, #efeafa 100%);
  filter: blur(7px); }
/* the press answers even when the tap changes nothing */
html.fx .hseg__thumb { transition: transform .34s var(--seg-ease); }
/* travelling: whichever edge LEADS gets the short duration, the one that
   trails gets the long one. Swap them by direction or the pill stretches
   backwards. */
html.fx .hseg--fwd .hseg__thumb {
  transition: left var(--seg-trail) var(--seg-ease),
              right var(--seg-lead) var(--seg-ease),
              transform .34s var(--seg-ease); }
html.fx .hseg--back .hseg__thumb {
  transition: left var(--seg-lead) var(--seg-ease),
              right var(--seg-trail) var(--seg-ease),
              transform .34s var(--seg-ease); }
.hseg.is-press .hseg__thumb { transform: scale(.982, .9); }
@media (max-width: 860px) { .deck-host { justify-items: start; } }

/* the deck: three cards, each ONE composed surface of its hue */
.plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.4vw, 18px); align-items: stretch; }
.plan-card { position: relative; display: flex; flex-direction: column;
  border: 1px solid var(--pc-line); border-radius: 18px; overflow: hidden;
  /* the card background IS the original composed raster (crown draping from
     the top, its field below — the texture we iterated to get right), only
     reflected out to 3x width. At the fixed scale --crown-w a COLLAPSED
     1/3-width card frames exactly the centre panel = the original card, cloth
     filling the top and both edges; the opened card, ~3x wider, lets that same
     cloth run out to the left and right. Never scaled to the card width, so it
     never stretches; --pc-fall shows below the raster on a very tall card. */
  --crown-w: 1232px;
  background: var(--pc-cardwide) top center / var(--crown-w) auto no-repeat var(--pc-fall);
  box-shadow: 0 3px 10px rgba(22, 33, 43, .07),
              0 34px 70px -38px var(--pc-glow); }
.plan-card--starter { --pc-a: #1f66c2;
  --pc-cardwide: url("../img/plans/card-wide-starter.webp");
  --pc-line: rgba(49, 134, 229, .4); --pc-glow: rgba(49, 134, 229, .55);
  --pc-fall: #fdfdfe; }
.plan-card--team { --pc-a: #a53f7e;
  --pc-cardwide: url("../img/plans/card-wide-team.webp");
  --pc-line: rgba(175, 70, 133, .42); --pc-glow: rgba(175, 70, 133, .48);
  --pc-fall: #fefdfe; }
.plan-card--enterprise { --pc-a: #2b8a68;
  --pc-cardwide: url("../img/plans/card-wide-enterprise.webp");
  --pc-line: rgba(53, 153, 119, .4); --pc-glow: rgba(53, 153, 119, .48);
  --pc-fall: #fdfefd; }
.plan-card--lead { --pc-line: rgba(175, 70, 133, .65);
  box-shadow: 0 3px 10px rgba(22, 33, 43, .07),
              0 42px 84px -40px var(--pc-glow); }

/* the crest is just a spacer now — the cloth lives in the card background
   (top), at the fixed --crown-w scale, so its on-screen height is constant
   whatever the card width; this only reserves that height for it.
   flex: none is LOAD-BEARING: the card is a flex column and this is a flex
   child, so with the default flex-shrink:1 it COLLAPSES toward 0 the moment
   the card's animated height drops below its content — which is exactly what
   happens mid-fold on close, and it dragged the whole checkout UP ~192px (the
   "content climbs / no stable Y" bug). Held rigid, the crown keeps its height
   and the content stays put while the shrinking card simply clips the foot. */
.plan-art { display: block; width: 100%; height: 192px; flex: none; }

/* the corner tag: the reference's ribbon, in ink over the fabric */
.plan-ribbon { position: absolute; top: 0; right: 22px; z-index: 2;
  background: #101116; color: #fff; text-align: center;
  font-size: .9rem; font-weight: 400; letter-spacing: .005em;
  line-height: 1.35;
  padding: .8em .95em 1.55em;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 13px), 50% 100%,
                     0 calc(100% - 13px));
  box-shadow: 0 6px 16px -6px rgba(16, 17, 22, .55); }
.plan-ribbon b { display: block; font-size: 1.15rem; font-weight: 500; }

.plan-card__body { display: flex; flex: 1 1 auto; flex-direction: column;
  padding: 12px 31px 30px; }
/* SEATS ARE THE HEADLINE, the price sits under them at body size
   (founder, 2026-08-25). The plans differ in seats and in nothing else, so
   the seat count is the only number on the card worth setting large; the
   price used to hold that slot and made three identical products look like
   three different ones. */
.plan-name { font-size: 1.28rem; font-weight: 500; letter-spacing: -.004em;
  line-height: 1.3; color: rgba(22, 33, 43, .74); }
.plan-seats { margin: .55rem 0 0; }
.plan-seats__k { display: block; font-size: .95rem; line-height: 1.3;
  color: rgba(22, 33, 43, .5); }
.plan-seats b { display: block; margin-top: .1rem;
  font-size: clamp(2.3rem, 3.1vw, 2.85rem); font-weight: 300;
  letter-spacing: -.014em; line-height: 1.05; color: var(--ink);
  font-variant-numeric: tabular-nums; }
.plan-seats__x { display: block; margin-top: .35rem; font-size: .93rem;
  color: var(--pc-a); }
.plan-price { margin: .95rem 0 0; display: flex; align-items: baseline;
  gap: 7px; white-space: nowrap; }
.plan-amount { font-size: 1.06rem; font-weight: 500; letter-spacing: 0;
  line-height: 1.3; color: var(--ink); font-variant-numeric: tabular-nums; }
.plan-per { color: rgba(22, 33, 43, .58); font-size: 1.02rem; font-weight: 400; }
/* the note carries the floor of the gap; .plan-buy's auto margin eats any
   slack above it, so the three actions stay level even though Enterprise
   runs a line longer */
.plan-note { color: rgba(22, 33, 43, .55); font-size: .9rem;
  margin: .35rem 0 1.5rem; }
.plan-buy { width: 100%; text-align: center; justify-content: center;
  margin-top: auto; font-size: 1.06rem; font-weight: 400;
  padding-block: .62em; border-radius: 11px; }
/* quiet actions: white glass on the wash (outranking the machined .btn
   skins lower in the file) */
.plan-card .btn--ghost, .pco .btn--ghost { background: rgba(255, 255, 255, .66);
  border-color: var(--pc-line); color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9); }
.plan-card .btn--ghost:hover, .pco .btn--ghost:hover { background: rgba(255, 255, 255, .92);
  border-color: var(--pc-a); box-shadow: inset 0 1px 0 #fff; }
/* the lit action: a LIGHT pill carrying three-four out-of-focus lights
   of different sizes and slightly different colours — big periwinkle,
   medium sky, small pink-lavender, medium steel — over pale lavender */
.plan-card .plan-buy--glow, .pco .plan-buy--glow { position: relative; overflow: hidden; isolation: isolate;
  border: 0; color: #2f2a45; background: #edeafa;
  box-shadow: 0 6px 20px -8px rgba(120, 110, 200, .45),
              0 0 26px -6px rgba(150, 140, 240, .38); }
.plan-card .plan-buy--glow::before, .pco .plan-buy--glow::before { content: ""; position: absolute;
  inset: -45% -10%; z-index: -1;
  background:
    radial-gradient(34% 150% at 12% 45%, rgba(142, 144, 214, .8),
                    rgba(142, 144, 214, 0) 70%),
    radial-gradient(20% 95% at 45% 15%, rgba(154, 196, 240, .75),
                    rgba(154, 196, 240, 0) 72%),
    radial-gradient(14% 70% at 68% 85%, rgba(214, 164, 228, .7),
                    rgba(214, 164, 228, 0) 74%),
    radial-gradient(24% 115% at 90% 38%, rgba(124, 150, 184, .65),
                    rgba(124, 150, 184, 0) 72%),
    linear-gradient(95deg, #f2effc 0%, #e9e5f8 55%, #efeafa 100%);
  filter: blur(9px); }
.plan-card .plan-buy--glow:hover, .pco .plan-buy--glow:hover { filter: brightness(1.03);
  box-shadow: 0 8px 24px -8px rgba(120, 110, 200, .55),
              0 0 30px -5px rgba(150, 140, 240, .5); }
.plan-under { margin: .7rem 0 0; text-align: center; font-size: .78rem;
  color: rgba(22, 33, 43, .48); }

/* what the plan carries, as thin-outline check rows. Tighter than the deck's
   first build: the list header was 1.72rem and the rows 1.02rem with 23px
   circles, which made six facts read like six paragraphs. The list is
   IDENTICAL on all three cards on purpose — the plans differ in seats and in
   nothing else, and the old ladder ("Everything in Starter, plus") implied a
   capability difference that does not exist. */
.plan-lists { margin-top: 1.55rem; padding-top: 1.45rem;
  border-top: 1px solid rgba(22, 33, 43, .12); }
.plan-lt { display: block; font-size: .93rem; font-weight: 500;
  letter-spacing: 0; line-height: 1.3; color: rgba(22, 33, 43, .52); }
.plan-lt + .plan-checks { margin-top: .95rem; }
.plan-checks { display: grid; gap: .62rem; }
.plan-checks li { position: relative; padding-left: 1.8rem; font-size: .97rem;
  font-weight: 400; line-height: 1.45; color: rgba(22, 33, 43, .74); }
.plan-checks li::before { content: ""; position: absolute; left: 0; top: .12em;
  width: 17px; height: 17px; border-radius: 50%;
  border: 1.4px solid rgba(22, 33, 43, .26); }
.plan-checks li::after { content: ""; position: absolute; left: 4.6px;
  top: calc(.12em + 5px); width: 7.5px; height: 4px;
  border-left: 1.6px solid rgba(22, 33, 43, .55);
  border-bottom: 1.6px solid rgba(22, 33, 43, .55);
  transform: rotate(-45deg); }

/* Enterprise runs one line longer under its seat count ("extends to 100"),
   which would drop its action and its list a line below the others. Reserving
   that line on every card is what keeps the three rows level — the deck's
   first build did the same job with a min-height on the blurb. */
@media (min-width: 901px) {
  .plan-seats { min-height: 6.2rem; }
}

/* the extension rail: the deck's FOURTH surface, not a white row under it
   (founder, 2026-08-25: "why is the little 'more than 30 people' slider not
   partaking in the same design as the cards????"). Same construction in a
   fourth hue — amber — but read for a wide row instead of a portrait card:
   the wash falls from the TOP and the silk stands on the LEFT.
   Both are rasters (bin/art/pricing-cards/rail.py), never CSS gradients:
   rail-wash.webp carries nothing across x on purpose, so stretching it to
   any rail width is lossless, and rail-art.webp is the veil on alpha so it
   floats on that wash exactly as the crowns float on the card fields. */
.plan-extend { margin-top: clamp(18px, 2.4vw, 26px); }
.plan-extend .prg-rail {
  --rail-a: #a85e24;                        /* the house copper, as ink */
  --rail-art: clamp(96px, 11.5vw, 168px);   /* the silk column, desktop */
  --rail-band: clamp(76px, 22vw, 108px);    /* the silk band, stacked */
  position: relative;
  padding-left: calc(var(--rail-art) + 26px);
  border: 1px solid rgba(240, 136, 45, .40);
  background: url("../img/plans/rail-wash.webp") center / 100% 100% no-repeat,
              #fffffe;
  box-shadow: 0 3px 10px rgba(22, 33, 43, .07),
              0 34px 70px -38px rgba(240, 136, 45, .42);
}
/* the veil. `left center / cover` is what lets one raster serve both boxes:
   the desktop column shows the hem, a narrow phone band crops to pure cloth,
   and neither ever shows the fabric's own outline being cut by the border.
   The mask is the one gradient here that is NOT in the raster, and it has to
   be: the panel's aspect swings from ~1:1 to ~4:1, so a baked feather could
   only ever be right at one of them. */
.prg-rail__art {
  position: absolute; left: 0; top: 0; bottom: 0; width: var(--rail-art);
  border-radius: 15px 0 0 15px; pointer-events: none;
  background: url("../img/plans/rail-art.webp") left center / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, #000 56%, rgba(0, 0, 0, 0) 100%);
          mask-image: linear-gradient(90deg, #000 56%, rgba(0, 0, 0, 0) 100%);
}
.plan-extend .prg-rail__q { font-weight: 600; }
.plan-extend .prg-slide__eur { color: var(--rail-a); }
.plan-extend .prg-slide__foot a,
.plan-extend .prg-rail__desc a { color: var(--rail-a); }

@media (max-width: 860px) {
  .plan-extend .prg-rail {
    padding: calc(var(--rail-band) + 16px) 16px 18px;
  }
  .prg-rail__art {
    top: 0; left: 0; right: 0; bottom: auto;
    width: auto; height: var(--rail-band);
    border-radius: 15px 15px 0 0;
    -webkit-mask-image: linear-gradient(180deg, #000 54%, rgba(0, 0, 0, 0) 100%);
            mask-image: linear-gradient(180deg, #000 54%, rgba(0, 0, 0, 0) 100%);
  }
}

/* the phone's plan carousel: names above as the dial, the deck snapping
   card by card beneath them; the card in hand stands a step taller (JS
   paints the scale/opacity as you swipe). Desktop never shows the tabs. */
.plan-tabs { display: none; }
@media (max-width: 900px) {
  .plan-tabs { display: flex; gap: .45rem; margin-bottom: 1rem; }
  .plan-tab {
    flex: 1 1 0; min-width: 0;
    font-size: .8rem; font-weight: 650; letter-spacing: .01em;
    color: var(--muted); background: var(--bg);
    border: 1px solid var(--line); border-radius: 10px;
    padding: .62em .4em; text-align: center;
    transition: color .18s ease, background .18s ease, border-color .18s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .plan-tab.is-on { color: #fff; background: var(--ink); border-color: var(--ink); }
  .plan-grid {
    display: flex; overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 14px;
    margin-inline: calc(-1 * var(--gutter));
    padding: 8px var(--gutter) 26px;
    scrollbar-width: none;
  }
  .plan-grid::-webkit-scrollbar { display: none; }
  .plan-card {
    flex: 0 0 min(84vw, 348px);
    scroll-snap-align: center;
    transition: transform .25s ease, opacity .25s ease;
  }
}

.deck-foot { color: var(--muted); font-size: .85rem; max-width: 56em;
  margin-top: 1.6rem; }
.deck-foot a { color: var(--brand); }

/* -- commerce: the card opens (2026-08-27) ---------------------------------
   "Start with X" turns the chosen card INTO the checkout, in place: the two
   others dissolve, the card unfolds sideways to the deck's full width — its
   liquid crown widening with it and re-lighting from BOTH gutters — and its
   face turns over to a three-step purchase (account / plan / payment), the
   card number a Stripe field mounted right here. The stage holds all three
   cards absolutely while the winner grows (left+width+height eased together,
   the hseg pill's physics at deck scale), then hands over to a clean
   single-column static state so later steps just grow the card naturally.
   The wide crown here is a PLACEHOLDER wash keyed to the plan hue until the
   bespoke both-sides raster lands (see assets/img/plans/SOURCES.txt). */
.deck-stage { position: relative; }
.plan-face { display: flex; flex: 1 1 auto; flex-direction: column;
  min-height: 0; }
.plan-face.is-out { display: none; }

/* the lift: every card goes absolute at its own box, the winner eases to
   fill the stage, the losers fade back and out */
.plan-grid.is-abs { position: relative; }
.plan-grid.is-abs .plan-card.is-abs { position: absolute; margin: 0; z-index: 1; }
.plan-grid.is-abs .plan-card.is-open { z-index: 3; }
html.fx .plan-card.is-abs.is-grow {
  transition: left .58s var(--seg-ease), top .58s var(--seg-ease),
              width .58s var(--seg-ease), height .58s var(--seg-ease); }
.plan-card.is-dismiss { opacity: 0; transform: translateY(12px) scale(.982);
  pointer-events: none; }
html.fx .plan-card.is-abs:not(.is-open) {
  transition: opacity .34s ease, transform .34s ease; }
/* the settled state: one card, full width, static, height by content */
.plan-grid.is-solo { grid-template-columns: 1fr; }
.plan-grid.is-solo .plan-card:not(.is-open) { display: none; }

/* the opened card: the SAME crown, SAME scale — only the window grows, so the
   full-width card reveals more of the very same picture (taller here, wider
   from the card itself). Field + crown rules already live on .plan-card. */
.plan-card.is-open .plan-ribbon { display: none; }
.plan-card.is-open .plan-card__body { padding: 0; }
/* opened: the crown stays the same height (fixed scale) — the extra width of
   the card is what lets the cloth run out to the sides, not a taller crop */
.plan-card.is-open .plan-art { height: 192px; }

/* the checkout panel ------------------------------------------------------- */
.pco { position: relative;
  padding: clamp(52px, 4.2vw, 70px) clamp(20px, 3vw, 46px) clamp(26px, 3.2vw, 44px); }
.pco[hidden] { display: none; }
/* class display rules (grid/flex) would otherwise out-rank the [hidden]
   attribute and keep collapsed rows and un-revealed fields on screen */
.pco [hidden] { display: none !important; }
/* the checkout does NOT dissolve in — it is simply present, and the card
   GROWING (behind its own overflow clip) is what reveals it. No content fade. */

.pco__back { position: absolute; top: clamp(14px, 1.7vw, 22px);
  left: clamp(16px, 2.4vw, 30px); z-index: 4;
  display: inline-flex; align-items: center; gap: .45em;
  border: 1.5px solid var(--pc-line); border-radius: 999px;
  background: rgba(255, 255, 255, .82); color: var(--ink);
  font-size: 1.02rem; font-weight: 500; padding: .5em 1.15em .5em .85em;
  cursor: pointer; box-shadow: 0 2px 10px -4px rgba(22, 33, 43, .2);
  transition: background .18s ease, border-color .18s ease, color .18s ease,
              box-shadow .18s ease; }
.pco__back:hover { background: #fff; border-color: var(--pc-a); color: var(--pc-a);
  box-shadow: 0 4px 16px -6px var(--pc-glow, rgba(22, 33, 43, .3)); }
.pco__back i { font-size: 1.5em; line-height: 0; margin-top: -2px; font-style: normal; }

.pco__grid { display: grid; align-items: start; justify-items: center;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(22px, 3vw, 52px); margin-top: clamp(4px, 1.2vw, 12px); }
/* the flow reads as ONE centred, readable column until Payment; at Payment the
   order joins it on the right */
.pco__flow { width: 100%; max-width: 620px; }
.pco.is-pay .pco__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, .9fr);
  justify-items: stretch; }
.pco.is-pay .pco__flow { max-width: none; }
.pco__eyebrow { margin: 0; font-size: .8rem; font-weight: 600;
  letter-spacing: .01em; color: var(--pc-a); }
.pco__h { margin: .2rem 0 .4rem; font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 500; letter-spacing: -.012em; line-height: 1.12; color: var(--ink); }

/* the steps */
.pco-step { border-top: 1px solid rgba(22, 33, 43, .1);
  padding: clamp(15px, 1.8vw, 22px) 0; }
.pco-step__head { display: flex; align-items: center; gap: .68rem; }
.pco-step__n { flex: none; display: grid; place-items: center;
  width: 27px; height: 27px; border-radius: 50%;
  border: 1.4px solid var(--pc-line); color: var(--pc-a);
  font-size: .9rem; font-weight: 600; font-variant-numeric: tabular-nums;
  background: rgba(255, 255, 255, .6); transition: background .2s, color .2s; }
.pco-step__head h3 { margin: 0; font-size: 1.06rem; font-weight: 500;
  color: var(--ink); flex: 1 1 auto; }
.pco-step.is-active .pco-step__n {
  background: var(--pc-a); color: #fff; border-color: var(--pc-a); }
.pco-step.is-done .pco-step__n { border-color: var(--pc-a);
  background: var(--pc-a); color: transparent; position: relative; }
.pco-step.is-done .pco-step__n::after { content: ""; position: absolute;
  left: 50%; top: 48%; width: 7px; height: 4px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: translate(-50%, -50%) rotate(-45deg); }
.pco-step__edit { border: 0; background: none; color: var(--pc-a);
  font-size: .84rem; cursor: pointer; padding: .2em .3em; }
.pco-step__edit:hover { text-decoration: underline; }
.pco-step__done { margin: .5rem 0 0 calc(27px + .68rem);
  font-size: .95rem; color: rgba(22, 33, 43, .66); }
.pco-done__who { font-weight: 500; color: var(--ink); }
.pco-step__body { margin-top: .85rem; }
.pco-step:not(.is-active) .pco-step__body[hidden] { display: none; }

/* fields */
.pco-field { display: grid; gap: .35rem; margin-top: .85rem; }
.pco-field label { font-size: .84rem; color: rgba(22, 33, 43, .62); }
.pco input[type="email"], .pco input[type="text"], .pco input[type="password"],
.pco input:not([type]) {
  width: 100%; padding: .72em .9em; font: inherit; color: var(--ink);
  background: rgba(255, 255, 255, .82); border: 1px solid rgba(22, 33, 43, .16);
  border-radius: 11px; transition: border-color .18s ease, box-shadow .18s ease; }
.pco input:focus { outline: none; border-color: var(--pc-a);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pc-a) 18%, transparent); }
.pco-reveal { animation: pco-reveal .32s var(--seg-ease) both; }
@keyframes pco-reveal { from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; } }
.pco-forgot { justify-self: end; font-size: .8rem; color: var(--pc-a);
  margin-top: .15rem; }
.pco-google { margin-bottom: .2rem; }
.pco-google .btn--google { width: 100%; justify-content: center; }
.pco-or { display: flex; align-items: center; gap: .8rem; margin: 1rem 0 .2rem;
  color: rgba(22, 33, 43, .45); font-size: .82rem; }
.pco-or::before, .pco-or::after { content: ""; flex: 1;
  border-top: 1px solid rgba(22, 33, 43, .12); }
.pco-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.pco-check { display: flex; gap: .6rem; margin-top: 1rem; cursor: pointer;
  font-size: .88rem; line-height: 1.45; color: rgba(22, 33, 43, .7); }
.pco-check input { margin-top: .15rem; width: 17px; height: 17px; flex: none;
  accent-color: var(--pc-a); }
.pco-check a { color: var(--pc-a); }

/* the in-checkout plan toggles */
.pco-opt { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem;
  margin-top: .9rem; }
.pco-opt__btn { text-align: left; padding: .68em .85em; cursor: pointer;
  border: 1px solid rgba(22, 33, 43, .16); border-radius: 12px;
  background: rgba(255, 255, 255, .6); color: var(--ink);
  transition: border-color .18s, box-shadow .18s, background .18s; }
.pco-opt__btn b { display: block; font-weight: 500; font-size: .96rem; }
.pco-opt__btn small { display: block; margin-top: .1rem; font-size: .77rem;
  color: rgba(22, 33, 43, .55); }
.pco-opt__btn.is-on { border-color: var(--pc-a); background: #fff;
  box-shadow: inset 0 0 0 1px var(--pc-a),
              0 6px 18px -12px color-mix(in srgb, var(--pc-a) 60%, transparent); }
.pco-seats { margin-top: 1.1rem; padding: 1rem 1.1rem; border-radius: 13px;
  border: 1px solid rgba(22, 33, 43, .12); background: rgba(255, 255, 255, .5); }
.pco-seats__top { display: flex; justify-content: space-between;
  align-items: baseline; margin-bottom: .6rem; }
.pco-seats__top label { font-size: .84rem; color: rgba(22, 33, 43, .62); }
.pco-seats__read b { font-size: 1.15rem; font-weight: 500;
  font-variant-numeric: tabular-nums; }
.pco-seats input[type="range"] { width: 100%; accent-color: var(--pc-a); }
.pco-seats__foot { margin: .6rem 0 0; font-size: .82rem; color: var(--muted); }
.pco-seats__foot a { color: var(--pc-a); }

.pco-continue { margin-top: 1.2rem; min-width: 13em; }
.pco-continue.is-busy { opacity: .7; pointer-events: none; }
.pco-msg { margin: .9rem 0 0; font-size: .88rem; color: #b0264a; }

/* the Stripe field + its placeholder */
.pco-pay-el { margin-top: .3rem; min-height: 92px; }
.pco-pay-ph { border: 1px dashed rgba(22, 33, 43, .2); border-radius: 12px;
  padding: 1rem; background: rgba(255, 255, 255, .45);
  display: grid; gap: .7rem; }
.pco-pay-ph__row { height: 40px; border-radius: 9px;
  background: linear-gradient(90deg, rgba(22, 33, 43, .06), rgba(22, 33, 43, .1)); }
.pco-pay-ph__row--split { width: 55%; }
.pco-pay-ph__note { margin: .1rem 0 0; grid-column: 1 / -1;
  font-size: .82rem; color: var(--muted); }
.pco-pay { margin-top: 1.2rem; width: 100%; }
.pco-pay[disabled] { opacity: .5; pointer-events: none; }
.pco-pay.is-busy { opacity: .7; pointer-events: none; }
.pco-fine { margin: .7rem 0 0; font-size: .78rem; color: rgba(22, 33, 43, .5); }

/* the running order appears ONLY at Payment — nothing to summarise before the
   plan is paid for, and You/Terms read calmer without it */
.pco__order { display: none; position: sticky; top: calc(var(--header-h, 64px) + 18px); }
.pco.is-pay .pco__order { display: block; }
.pco-ord { border: 1px solid var(--pc-line); border-radius: 16px;
  padding: clamp(18px, 2vw, 24px);
  background:
    radial-gradient(120% 80% at 100% 0%,
      color-mix(in srgb, var(--pc-a) 10%, transparent), transparent 60%),
    rgba(255, 255, 255, .78);
  box-shadow: 0 20px 50px -34px var(--pc-glow),
              inset 0 1px 0 rgba(255, 255, 255, .9); }
.pco-ord__k { margin: 0 0 .9rem; font-size: .84rem; font-weight: 600;
  color: rgba(22, 33, 43, .55); }
/* the hero of the order: what is actually charged today, €0 for the pilot */
.pco-ord__due { margin: 0 0 1.05rem; padding: 0 0 1.05rem;
  border-bottom: 1px solid rgba(22, 33, 43, .12); }
.pco-ord__duek { display: block; font-size: .82rem; font-weight: 600;
  color: rgba(22, 33, 43, .55); }
.pco-ord__dueeur { display: block; margin: .1rem 0 0; line-height: 1;
  font-size: clamp(2.9rem, 5vw, 3.7rem); font-weight: 300; color: var(--ink);
  font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.pco-ord__duesub { display: block; margin: .55rem 0 0; font-size: .84rem;
  line-height: 1.5; color: rgba(22, 33, 43, .62); }
.pco-ord__row { display: flex; justify-content: space-between; gap: 1rem;
  align-items: baseline; margin-bottom: .7rem; font-size: .93rem;
  color: rgba(22, 33, 43, .74); }
.pco-ord__row b { font-weight: 500; white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.pco-ord__total { display: flex; justify-content: space-between; gap: 1rem;
  align-items: baseline; padding-top: .85rem; margin-top: .3rem;
  border-top: 1px solid rgba(22, 33, 43, .14); }
.pco-ord__total > span { font-size: .9rem; color: rgba(22, 33, 43, .6); }
.pco-ord__total b { font-size: 1.5rem; font-weight: 500; color: var(--ink);
  font-variant-numeric: tabular-nums; }
.pco-ord__per { font-size: .92rem; font-weight: 400; color: rgba(22, 33, 43, .55); }
.pco-ord__config { margin: .55rem 0 0; font-size: .82rem;
  color: rgba(22, 33, 43, .52); }
.pco-ord__trust { margin: .9rem 0 0; font-size: .78rem; line-height: 1.5;
  color: rgba(22, 33, 43, .5); }

@media (max-width: 860px) {
  /* stack on a phone even at Payment — the is-pay 2-col rule out-specifies a
     bare .pco__grid, so it must be named here or the columns stay cramped */
  .pco__grid,
  .pco.is-pay .pco__grid { grid-template-columns: 1fr; gap: 1.4rem; }
  .pco__order { position: static; order: -1; }
  /* leave room at the top for the floating back button so it never lands on
     the order card (which sits first on a phone) */
  .pco { padding: 60px 18px 26px; }
  /* a phone card is ~full width in both states, so it frames the centre panel
     whole either way; the crown scale is smaller here, so its height is too */
  .plan-card { --crown-w: 1050px; }
  .plan-art, .plan-card.is-open .plan-art { height: 164px; }
}

/* -- commerce: the surfaces retract, the rail opens (2026-08-27) ------------
   Opening any surface grows it to the deck's place; the others go UP and are
   lost behind it. The seat rail is a fourth opener: from its low spot it rises
   to that same place and becomes the Enterprise checkout. The stage clips only
   while a move is in flight — a SETTLED checkout must stay free to grow as its
   payment step expands. */
.deck-stage.is-clip { overflow: hidden; }
/* the deck's config chrome steps aside while a checkout is open */
.deck-host.is-co-hidden, .plan-tabs.is-co-hidden { display: none; }

/* a non-opening surface retracts: up, faded, collapsed to nothing, behind. The
   winner never lives inside a retracted box (a card-open retracts the RAIL, a
   rail-open retracts the whole GRID), so collapsing it is always safe. */
/* a non-opener steps aside OUT OF FLOW (absolute, held at its own box by JS)
   and slides up + fades — never by collapsing its height, which snapped it away
   on open and popped it back DOWN on close. Out of flow it costs the stage no
   height, so the opener sizes cleanly; on close it slides back to exactly where
   it was and rejoins the flow. */
.plan-grid.is-retract,
.plan-extend.is-retract {
  position: absolute; margin: 0; z-index: 0; pointer-events: none; }
html.fx .plan-grid.is-retract,
html.fx .plan-extend.is-retract {
  transition: opacity .34s ease, transform .42s var(--seg-ease); }
.plan-grid.is-retract.is-away,
.plan-extend.is-retract.is-away { opacity: 0; transform: translateY(-30px); }

/* the rail as an opener: it lifts out of flow inside the stage and grows to the
   deck box, its resting row giving way to the checkout. Opened, it wears its
   OWN warm amber — the hue and the silk of its collapsed veil (rail-art.webp) —
   NOT the Enterprise green it used to borrow. The crown is card-wide-rail.webp:
   the same top-draped construction as a card's, generated from the rail's amber
   material (bin/art/pricing-cards/rail_wide.py), so the rail that opens reads as
   the same amber product it is when closed. */
.plan-extend.is-abs { position: absolute; top: 0; left: 0; margin: 0; z-index: 3; }
.plan-extend.is-open {
  --pc-a: #c46a19; --pc-line: rgba(240, 136, 45, .42);
  --pc-glow: rgba(240, 136, 45, .46); --pc-fall: #fffdf9; --crown-w: 1232px;
  margin: 0; padding: 0; overflow: hidden;
  border: 1px solid var(--pc-line); border-radius: 18px;
  background: url("../img/plans/card-wide-rail.webp")
              top center / var(--crown-w) auto no-repeat var(--pc-fall);
  box-shadow: 0 3px 10px rgba(22, 33, 43, .07),
              0 34px 70px -38px var(--pc-glow); }
.plan-extend.is-open .prg-rail { display: none; }
/* the crown band above the checkout, exactly like a card's .plan-art spacer,
   so an opened rail and an opened card show the same liquid crest */
.plan-extend.is-open::before { content: ""; display: block; width: 100%; height: 192px; }
/* (the opened rail's checkout is opaque from the start too — revealed by the
   rise, not a fade) */
@media (max-width: 860px) { .plan-extend.is-open::before { height: 164px; } }

/* the terms step: a short scrollable read that unlocks its accept button only
   at the end — a real "I have seen this", not a checkbox buried under the card */
.pco-terms__lead { margin: .2rem 0 .75rem; font-size: .9rem;
  color: rgba(22, 33, 43, .7); }
.pco-terms { position: relative;
  max-height: min(48vh, 420px); overflow-y: auto; overscroll-behavior: contain;
  padding: 1.2rem 1.4rem; border: 1px solid var(--pc-line); border-radius: 14px;
  background: color-mix(in srgb, var(--pc-a) 4%, #fff);
  box-shadow: inset 0 -22px 22px -18px rgba(22, 33, 43, .16);
  scrollbar-width: thin; transition: box-shadow .25s ease; }
/* the terms body is the SAME content rendered on /terms (includes/legal-terms.php),
   read in the site's own prose voice so the two can never drift */
.pco-terms__doc { font-size: .92rem; line-height: 1.62; color: rgba(22, 33, 43, .82); }
.pco-terms__doc > :first-child { margin-top: 0; }
.pco-terms__doc p { margin: 0 0 .9rem; }
.pco-terms__doc h2, .pco-terms__doc h3, .pco-terms__doc h4 {
  margin: 1.3rem 0 .5rem; font-size: 1rem; font-weight: 600; color: var(--ink); }
.pco-terms__doc ul { margin: 0 0 .9rem; padding-left: 1.2rem; }
.pco-terms__doc li { margin: .3rem 0; }
.pco-terms__doc a { color: var(--pc-a); border-bottom: 1px solid var(--pc-line); }
.pco-terms__doc a:hover { border-bottom-color: var(--pc-a); }
.pco-terms:focus-visible { outline: 2px solid var(--pc-a); outline-offset: 2px; }
.pco-terms.is-read { box-shadow: none; }
.pco-terms__list { margin: 0; padding: 0; list-style: none; display: grid; gap: .7rem; }
.pco-terms__list li { position: relative; padding-left: 1.4rem;
  font-size: .87rem; line-height: 1.5; color: rgba(22, 33, 43, .8); }
.pco-terms__list li::before { content: ""; position: absolute; left: 0; top: .5em;
  width: 8px; height: 8px; border-radius: 2px; background: var(--pc-a); opacity: .85; }
.pco-terms__list li b { color: var(--ink); font-weight: 600; }
.pco-terms__links { margin: .95rem 0 0; font-size: .82rem; color: rgba(22, 33, 43, .55); }
.pco-terms__links a { color: var(--pc-a); }
.pco-terms__end { display: block; height: 1px; }
.pco-terms__hint { display: flex; align-items: center; gap: .45rem; margin: .7rem 0 0;
  font-size: .82rem; color: var(--pc-a); font-weight: 500; transition: color .2s ease; }
.pco-terms__hint i { font-style: normal; animation: pco-nudge 1.4s ease-in-out infinite; }
.pco-terms__hint.is-read { color: rgba(22, 33, 43, .5); font-weight: 400; }
.pco-terms__hint.is-read i { animation: none; }
@keyframes pco-nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) { .pco-terms__hint i { animation: none; } }
.pco-terms__accept { margin-top: 1.1rem; min-width: 15em; }
.pco-terms__accept[disabled] { opacity: .5; pointer-events: none; }

@media (max-width: 860px) { .plan-extend.is-open { --crown-w: 1050px; } }

/* included everywhere: the sameness said once, beside the statement */
.inc-list { margin-top: 1.6rem; display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem 1.8rem;
  max-width: 38rem; }
.inc-list li { position: relative; padding-left: 1.15rem; font-size: .93rem;
  line-height: 1.5; }
.inc-list li::before { content: ""; position: absolute; left: 0; top: .42em;
  width: 8px; height: 8px; background: var(--copper-wash-2);
  box-shadow: inset 0 0 0 1px rgba(168, 94, 36, .45); }
@media (max-width: 440px) { .inc-list { grid-template-columns: minmax(0, 1fr); } }

/* ---------- the monthly statement (pricing hero) ----------
   The pricing argument as an artifact: a statement with ONE priced line.
   Everything the market meters - seats, documents, hosting - appears as
   a 0.00 line; overage appears as words. Dotted leaders, tabular money. */
.bill { padding: 1.35rem 1.5rem 1.25rem; max-width: 560px; margin-inline: auto; }
.bill__head { display: flex; justify-content: space-between; gap: 1rem;
  font-family: var(--font-mono); font-size: .62rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  padding-bottom: .85rem; border-bottom: 1px solid rgba(34, 84, 121, .12); }
.bill__head i { font-style: normal; color: var(--copper); }
.bill__row { padding: .58rem 0; font-size: .9rem; }
/* label, dotted leader and amount share one baseline; the empty leader box
   has no text, so its baseline is its bottom edge - the border sits ON the
   line the way a typed statement rules it */
.bill__line { display: flex; align-items: baseline; gap: .6rem; }
.bill__row small { display: block; font-size: .74rem;
  color: var(--faint); line-height: 1.45; margin-top: .12rem; }
.bill__lead { flex: 1; min-width: 2rem; height: .66em;
  border-bottom: 1px dotted var(--line-strong); }
.bill__row b { font-family: var(--font-mono); font-size: .84rem;
  font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: .02em;
  white-space: nowrap; }
.bill__row b.is-zero { color: var(--faint); font-weight: 500; }
.bill__row b.is-never { color: var(--copper); font-size: .64rem;
  letter-spacing: .1em; text-transform: uppercase; }
.bill__row--total { border-top: 1px solid rgba(34, 84, 121, .16);
  margin-top: .3rem; padding-top: .85rem; }
.bill__row--total span { font-weight: 650; }
.bill__row--total b { font-size: 1.05rem; color: var(--brand); }
.bill__foot { margin-top: .75rem; padding-top: .7rem;
  border-top: 1px solid rgba(34, 84, 121, .08);
  font-size: .78rem; color: var(--faint); line-height: 1.5; }

/* ---------- the month meter (allowance section) ----------
   A month of allowance as a gauge: the fill is today, the two marks are
   the only two things that ever happen - the 80% email and the 100%
   pause. The fill grows once when the section arrives (fx only). */
.gauge { padding: 1.35rem 1.5rem 1.3rem; }
.gauge__head { display: flex; align-items: center; gap: .7rem;
  font-family: var(--font-mono); font-size: .62rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 1.15rem; }
.gauge__head .mono { margin-left: auto; color: var(--faint); font-size: .6rem;
  letter-spacing: .1em; }
.gauge__bar { position: relative; height: 10px; border-radius: 99px;
  background: rgba(34, 84, 121, .1);
  box-shadow: inset 0 1px 2px rgba(22, 33, 43, .08); }
.gauge__fill { position: absolute; inset: 0 auto 0 0; width: var(--p, 62%);
  border-radius: 99px;
  background: linear-gradient(90deg, var(--brand), var(--brand-deep)); }
html.fx .gauge__fill { width: 0;
  transition: width 1.5s cubic-bezier(.25, .8, .25, 1) .35s; }
html.fx .in-view .gauge__fill { width: var(--p, 62%); }
.gauge__tick { position: absolute; top: -5px; bottom: -5px; width: 1.5px;
  background: var(--line-strong); }
.gauge__tick i { position: absolute; top: calc(100% + 7px); left: 50%;
  transform: translateX(-50%); font-style: normal;
  font-family: var(--font-mono); font-size: .58rem; letter-spacing: .06em;
  color: var(--faint); white-space: nowrap; }
.gauge__tick:last-child i { left: auto; right: -1px; transform: none; }
.gauge__rows { margin-top: 2.2rem; }
.gauge__row { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr);
  gap: .1rem .85rem; padding: .74rem 0; align-items: baseline; }
.gauge__row + .gauge__row { border-top: 1px solid rgba(34, 84, 121, .07); }
.gauge__row > i { font-style: normal; font-family: var(--font-mono);
  font-size: .68rem; font-weight: 700; color: var(--brand);
  font-variant-numeric: tabular-nums; }
.gauge__row--warn > i { color: var(--copper); }
.gauge__row b { font-size: .92rem; font-weight: 650; letter-spacing: -.008em; }
.gauge__row p { grid-column: 2; margin: 0; font-size: .86rem;
  color: var(--muted); line-height: 1.55; }
.gauge__foot { margin-top: .55rem; font-size: .84rem; }
.gauge__foot a { color: var(--brand); font-weight: 560; }
.gauge__foot a:hover { color: var(--brand-deep); }

/* checkout */
.order-box { border: 1px solid var(--line); border-radius: var(--r-panel);
  background: var(--bg-tint); padding: 6px 20px; margin: 1.6rem 0; }
.order-row { display: flex; justify-content: space-between; gap: 16px;
  padding: 13px 0; border-bottom: 1px solid var(--line); font-size: .95rem; }
.order-row--total { border-bottom: 0; font-weight: 650; }
.order-alt { padding: 10px 0 14px; font-size: .85rem; color: var(--muted); }
.auth-split { display: grid; grid-template-columns: 1fr 1fr; gap: 22px;
  margin-top: 1.4rem; }
@media (max-width: 760px) { .auth-split { grid-template-columns: 1fr; } }
.auth-col { border: 1px solid var(--line); border-radius: var(--r-panel);
  padding: 20px 22px; background: var(--bg); }
.auth-col h2 { font-size: 1.02rem; margin: 0 0 14px; }
.auth-col .field { margin-bottom: 12px; }
.auth-aside { margin: 12px 0 0; font-size: .85rem; }
.checkout-final { margin-top: 1.5rem; }
.muted-line { color: var(--muted); font-size: .92rem; }
.subdomain-row { display: flex; align-items: center; gap: 0; }
.subdomain-row input { flex: 1; border-top-right-radius: 0;
  border-bottom-right-radius: 0; }
.subdomain-suffix { border: 1px solid var(--line-strong); border-left: 0;
  background: var(--bg-dip); padding: 0 12px; align-self: stretch;
  display: flex; align-items: center; font-size: .82rem; color: var(--muted);
  border-radius: 0 var(--r-ctl) var(--r-ctl) 0; }
.hint-line { font-size: .82rem; color: var(--muted); margin-top: 6px; }

/* ---------- home FAQ (crawlable substance) ---------- */
.faq { padding-block: clamp(3rem, 7vw, 5.5rem); border-top: 1px solid var(--line);
  position: relative; overflow: clip; }
.faq > .container { position: relative; z-index: 1; }
.faq h2 { max-width: 20em; margin-bottom: clamp(1.8rem, 4vw, 2.8rem); }
/* the question rail + the answer card: a master–detail console. Questions
   are compact numbered rows on the left; the open answer arrives on the
   right as the assistant's own clay card (sticky, so it rides along the
   rail). Under 860px the same DOM folds to inline expansion - the answer
   card slots in right below its question. */
.qa {
  display: grid; grid-template-columns: minmax(0, 10fr) minmax(0, 11fr);
  /* explicit min-content rows + a trailing 1fr the answer spans THROUGH:
     a span that crosses a flexible track contributes nothing to intrinsic
     row sizing, so the rail packs tight no matter how tall the card is */
  grid-template-rows: repeat(var(--qn, 11), min-content) minmax(0, 1fr);
  gap: 0 clamp(1.4rem, 3.5vw, 3.2rem);
  align-items: start;
}
.qa__unit { display: contents; }
.qa__q {
  grid-column: 1;
  display: flex; align-items: baseline; gap: .85rem; width: 100%;
  text-align: left; cursor: pointer;
  padding: .74rem .85rem; border-radius: 10px;
  font: inherit; font-size: .95rem; font-weight: 560; letter-spacing: -.008em;
  line-height: 1.4; color: var(--ink); background: none; border: 0;
  transition: background .15s ease;
}
.qa__q .mono { font-size: .64rem; color: var(--copper); letter-spacing: .08em;
  flex: none; }
.qa__q:hover { background: var(--bg-tint); }
.qa__unit.is-open .qa__q { background: var(--brand-wash); }
.qa__unit.is-open .qa__q .mono { color: var(--brand); }
.qa__a {
  grid-column: 2; grid-row: 1 / -1; align-self: start;
  position: sticky; top: calc(var(--header-h) + var(--header-off) + 24px);
  display: none;
  border-radius: 20px;
  background: linear-gradient(160deg, #ffffff, #f0f4f8);
  border: 1px solid rgba(34, 84, 121, .08);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .95),
    inset 6px 8px 14px rgba(255, 255, 255, .7),
    inset -9px -11px 20px rgba(34, 84, 121, .07),
    0 3px 7px rgba(22, 33, 43, .04),
    0 26px 48px -22px rgba(34, 84, 121, .28);
  padding: 1.5rem 1.6rem 1.45rem;
}
.qa__unit.is-open .qa__a { display: block;
  animation: qa-in .34s cubic-bezier(.3, .8, .3, 1) both; }
@keyframes qa-in { 0% { opacity: 0; translate: 0 10px; } 100% { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) { .qa__unit.is-open .qa__a { animation: none; } }
.qa__mark { display: inline-grid; place-items: center; width: 34px; height: 34px;
  border-radius: 99px; background: #fff; border: 1px solid var(--line);
  box-shadow: 0 3px 8px -3px rgba(34, 84, 121, .3); margin-bottom: .85rem; }
.qa__mark img { width: 20px; height: 20px; }
.qa__a h3 { font-size: 1.02rem; letter-spacing: -.01em; margin-bottom: .55rem; }
.qa__a p { margin: 0; color: var(--muted); line-height: 1.68; font-size: .95rem; }
/* the doors out of an answer: every answer points somewhere deeper */
.qa__links { margin: 1rem 0 0; padding-top: .85rem;
  border-top: 1px solid rgba(34, 84, 121, .09);
  display: flex; flex-wrap: wrap; gap: .45rem .5rem; }
.qa__links a { display: inline-flex; align-items: center; gap: .4em;
  font-size: .78rem; font-weight: 560; color: var(--brand);
  border: 1px solid var(--line-strong); border-radius: 99px;
  padding: .32em .9em; background: #fff;
  transition: border-color .15s ease, background .15s ease; }
.qa__links a::after { content: "\2192"; color: var(--copper); font-size: .92em; }
.qa__links a:hover { border-color: var(--brand); background: var(--brand-wash); }
@media (max-width: 860px) {
  .qa { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 0; }
  .qa__q { grid-column: auto; }
  .qa__a { grid-column: auto; grid-row: auto; position: static;
    margin: .35rem 0 .95rem; padding: 1.1rem 1.15rem 1.05rem; border-radius: 14px; }
}

/* ============================================================
   Frontpage 2026-07 - hero split + five arguments + close.
   The registration-grid splotches are the app's own auth-zone
   pattern (P13), masked to patches at the stage periphery.
   Graphics lean clay: soft extruded plates, deep soft shadow
   pairs, big radii - while text stays on the Swiss baseline.
   ============================================================ */

/* ---------- the pattern splotches + oblique slices ---------- */
.hero__patch {
  position: absolute; z-index: 0; pointer-events: none;
  width: min(46vw, 620px); aspect-ratio: 1;
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='120'%20height='120'%3E%3Cpath%20d='M60%2054v12M54%2060h12'%20stroke='%23225479'%20stroke-opacity='.45'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='480'%20height='480'%3E%3Crect%20x='140'%20y='60'%20width='20'%20height='20'%20fill='%23225479'%20fill-opacity='.10'/%3E%3Crect%20x='380'%20y='200'%20width='20'%20height='20'%20fill='%23D08542'%20fill-opacity='.16'/%3E%3Crect%20x='60'%20y='340'%20width='20'%20height='20'%20fill='%23225479'%20fill-opacity='.10'/%3E%3Crect%20x='280.5'%20y='420.5'%20width='19'%20height='19'%20fill='none'%20stroke='%23225479'%20stroke-opacity='.22'/%3E%3C/svg%3E"),
    linear-gradient(rgba(34, 84, 121, .10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 84, 121, .10) 1px, transparent 1px),
    linear-gradient(rgba(34, 84, 121, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 84, 121, .055) 1px, transparent 1px);
  background-size: 120px 120px, 480px 480px, 120px 120px, 120px 120px, 20px 20px, 20px 20px;
  background-position: 0 0, 0 0, 60.5px 60.5px, 60.5px 60.5px, .5px .5px, .5px .5px;
  -webkit-mask-image: radial-gradient(closest-side, #000 18%, transparent 98%);
          mask-image: radial-gradient(closest-side, #000 18%, transparent 98%);
}
.hero__patch--tl { left: max(-8vw, -140px); top: -150px; }
/* bottom-right patch rides IN under the hero graphic - the loop has real
   alpha, so the registration pattern shows through around the clay object */
.hero__patch--br { right: -44px; bottom: -120px; opacity: .85; }
.hero__patch--close { left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: .6; }
.hero__slice { position: absolute; z-index: 0; pointer-events: none;
  top: -10%; bottom: -10%; transform: skewX(-18deg); }
.hero__slice--a { left: 6%; width: 34px; background: var(--brand); opacity: .05; }
.hero__slice--b { right: 4%; width: 48px; background: rgba(208, 133, 66, .05); }

/* ---------- hero ---------- */
.hero {
  position: relative; overflow: clip; isolation: isolate;
  /* ride up under the glass pane so the pattern lives behind it */
  margin-top: calc(-1 * (var(--header-h) + var(--header-off)));
  padding-top: calc(var(--header-h) + var(--header-off) + clamp(2.4rem, 5.5vw, 4.6rem));
  padding-bottom: clamp(1.6rem, 4vw, 3.2rem);
}
.hero__stackwrap {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(2rem, 4.5vw, 3.2rem);
}
.hero--stack .hero__copy { text-align: center; }
.hero__copy { max-width: 56rem; padding-block: clamp(.6rem, 2vw, 1.6rem); }
.hero__copy--center .head-rule { margin-inline: auto; }
.hero__copy .lead { margin-top: 1.4rem; margin-inline: auto; max-width: 44rem; }
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem; margin-top: 2.3rem; }
.hero__copy--center .hero__cta { justify-content: center; }

/* the hero object is the ASK CARD - a paper composer, same clay/paper
   recipe as the qfield bar - held in a frosted GLASS FRAME over the
   flowing glass ribbon (img/hero-flow.webp, generated art, brand
   palette). The bar types its questions via home.js (data-type-cycle);
   the pills are the sources, real marks only. */
.askstage {
  position: relative; width: 100%;
  border-radius: 30px; overflow: clip;
  padding: clamp(1.8rem, 4.5vw, 3.4rem) clamp(.9rem, 3vw, 3rem);
  background: url("../img/hero-flow.webp") center / cover no-repeat, #b8d2e4;
  box-shadow:
    0 3px 10px rgba(22, 33, 43, .08),
    0 40px 80px -34px rgba(34, 84, 121, .5);
}
.askglass {
  position: relative; width: min(880px, 100%); margin-inline: auto;
  padding: clamp(.65rem, 1.6vw, 1rem); border-radius: 26px;
  background: rgba(255, 255, 255, .2);
  border: 1px solid rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
          backdrop-filter: blur(14px) saturate(1.4);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .65),
    0 20px 44px -20px rgba(22, 33, 43, .4);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .askglass { background: rgba(255, 255, 255, .66); }
}
.askcard {
  position: relative; width: 100%;
  background: linear-gradient(160deg, #ffffff, #f2f6f9);
  border: 1px solid rgba(34, 84, 121, .1);
  border-radius: 22px; --r-ctl: 22px;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .95),
    inset -6px -8px 14px rgba(34, 84, 121, .07),
    0 3px 8px rgba(22, 33, 43, .05),
    0 30px 60px -22px rgba(34, 84, 121, .34);
}
.askcard__bar {
  display: flex; align-items: center; gap: .85em;
  padding: 1.1em 1.25em;
  font-size: clamp(1.02rem, 1.7vw, 1.26rem); font-weight: 560;
  letter-spacing: -.012em; color: var(--ink);
  border-bottom: 1px solid rgba(34, 84, 121, .09);
}
/* the plus - pure CSS cross, no icon asset */
.askcard__plus { position: relative; flex: none; width: 16px; height: 16px; opacity: .55; }
.askcard__plus::before, .askcard__plus::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%); background: var(--brand); border-radius: 2px;
}
.askcard__plus::before { width: 2px; height: 16px; }
.askcard__plus::after { width: 16px; height: 2px; }
.askcard__view { display: flex; align-items: center; min-width: 0; flex: 1 1 auto; }
.askcard__type { white-space: nowrap; overflow: hidden; display: block;
  min-height: 1.5em; line-height: 1.5; text-align: left; }
.askcard__caret { width: 2.5px; height: 1.15em; background: var(--brand); flex: none;
  border-radius: 2px; }
html.fx .askcard__caret { animation: caret-blink 1.06s steps(2) infinite; }
/* the voice glyph - five bars, breathing gently under fx */
.askcard__voice { display: flex; align-items: center; gap: 3px; flex: none; opacity: .5; }
.askcard__voice i { width: 2.5px; border-radius: 2px; background: var(--brand); }
.askcard__voice i:nth-child(1) { height: 8px; }
.askcard__voice i:nth-child(2) { height: 14px; }
.askcard__voice i:nth-child(3) { height: 18px; }
.askcard__voice i:nth-child(4) { height: 12px; }
.askcard__voice i:nth-child(5) { height: 7px; }
html.fx .askcard__voice i { animation: askvoice 1.9s ease-in-out infinite; transform-origin: center; }
html.fx .askcard__voice i:nth-child(2) { animation-delay: .18s; }
html.fx .askcard__voice i:nth-child(3) { animation-delay: .36s; }
html.fx .askcard__voice i:nth-child(4) { animation-delay: .54s; }
html.fx .askcard__voice i:nth-child(5) { animation-delay: .72s; }
@keyframes askvoice { 50% { transform: scaleY(.45); } }
/* the source pills */
.askcard__pills {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: .5rem; padding: .95em 1.1em 1.1em;
}
.askcard__pill {
  display: inline-flex; align-items: center; gap: .45em;
  padding: .4em .85em; border: 1px solid rgba(34, 84, 121, .12);
  border-radius: 999px; background: #fff;
  font-size: .85rem; font-weight: 560; color: var(--ink); white-space: nowrap;
}
.askcard__pill img { width: 18px; height: 18px; display: block; }
.askcard__morepill { display: inline-flex; align-items: center; gap: 3.5px; padding: 0 .4em; }
.askcard__morepill i { width: 3.5px; height: 3.5px; border-radius: 50%;
  background: var(--brand); opacity: .45; }
@media (prefers-reduced-motion: reduce) {
  html.fx .askcard__voice i, html.fx .askcard__caret { animation: none; }
}

/* ---------- section scaffolding ---------- */
.sec { padding-block: clamp(3.8rem, 8.5vw, 6.4rem); border-top: 1px solid var(--line);
  position: relative; overflow: clip; }
.sec > .container { position: relative; z-index: 1; }
.sec__more { margin-top: 1.5rem; font-weight: 560; }
.sec__more a { color: var(--brand); }
.section--tint.sec { border-top-color: transparent; }

/* ---------- scroll reveals ----------
   RETIRED 2026-08-23 by founder order: no scroll-in fade/slide anywhere -
   content stands complete from first paint. The data-rise attributes stay
   in the markup (structural selectors key off them) but carry no motion,
   and pages.js/home.js still stamp .in-view: that flag arms the in-section
   choreography (gauges, pipes, meters, stamps), which lives on. */

/* ---------- section pattern splotches ----------
   Each argument carries its own registration-pattern patch at the stage
   periphery - two recipes so neighbours never repeat, always faded to a
   splotch, always UNDER the content (z-index 0 vs the container's 1). */
.sec__patch {
  position: absolute; z-index: 0; pointer-events: none; aspect-ratio: 1;
  width: min(40vw, 540px);
  -webkit-mask-image: radial-gradient(closest-side, #000 16%, transparent 97%);
          mask-image: radial-gradient(closest-side, #000 16%, transparent 97%);
}
/* recipe: registration crosses over the fine drafting grid */
.sec__patch--plus {
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='120'%20height='120'%3E%3Cpath%20d='M60%2054v12M54%2060h12'%20stroke='%23225479'%20stroke-opacity='.4'/%3E%3C/svg%3E"),
    linear-gradient(rgba(34, 84, 121, .085) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 84, 121, .085) 1px, transparent 1px),
    linear-gradient(rgba(34, 84, 121, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 84, 121, .05) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 120px 120px, 20px 20px, 20px 20px;
  background-position: 0 0, 60.5px 60.5px, 60.5px 60.5px, .5px .5px, .5px .5px;
}
/* recipe: plotted cells over the coarse grid - the auth-zone's other voice */
.sec__patch--cells {
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='360'%20height='360'%3E%3Crect%20x='100'%20y='40'%20width='20'%20height='20'%20fill='%23225479'%20fill-opacity='.09'/%3E%3Crect%20x='260'%20y='140'%20width='20'%20height='20'%20fill='%23D08542'%20fill-opacity='.14'/%3E%3Crect%20x='40'%20y='240'%20width='20'%20height='20'%20fill='%23225479'%20fill-opacity='.09'/%3E%3Crect%20x='180.5'%20y='300.5'%20width='19'%20height='19'%20fill='none'%20stroke='%23225479'%20stroke-opacity='.2'/%3E%3C/svg%3E"),
    linear-gradient(rgba(34, 84, 121, .075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 84, 121, .075) 1px, transparent 1px);
  background-size: 360px 360px, 40px 40px, 40px 40px;
  background-position: 0 0, .5px .5px, .5px .5px;
}
.sec__patch--connect  { right: -150px; top: -120px; }
.sec__patch--context  { right: -150px; top: -130px; }
.sec__patch--person   { left: -170px; top: 6%; }
.sec__patch--anywhere { left: -150px; bottom: -130px; }
.sec__patch--secure   { right: -150px; top: -110px; }
.sec__patch--faq      { right: -170px; top: -130px; }
.sec__patch--choke    { left: -160px; top: -120px; }

/* ---------- 00 - the chokepoint: the long description, argued ----------
   Prose column carries the canon verbatim; the aside carries the capacity
   figure (ten plotted cells, the four copper ones the routing cost) and
   the two routes a question can take, drawn as scenes: the old route
   STAIRS DOWN through flat paper stops on sagging dashed hops and dies
   out in a dashed "eventually"; the Naxis route is one straight steel
   line through the clay tile, out to a cited clay answer. The shape is
   the argument; no box around any of it. */
.choke__grid {
  display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
  gap: clamp(1.8rem, 4.5vw, 4rem); align-items: start;
}
.choke__prose p { max-width: 36em; line-height: 1.72; }
.choke__aside { display: grid; gap: clamp(1.6rem, 3.2vw, 2.3rem); align-content: start; }
.choke__stat { border-top: 1px solid var(--line-strong); padding-top: 1.15rem; }
.choke__cells { display: flex; gap: 5px; margin-bottom: .9rem; }
.choke__cells i {
  width: 13px; height: 13px;
  box-shadow: inset 0 0 0 1px rgba(34, 84, 121, .3);
}
.choke__cells i:nth-child(-n+4) { background: var(--copper); box-shadow: none; }
/* the four cost cells stamp themselves in as the section arrives */
html.fx .sec-choke .choke__cells i:nth-child(-n+4) { opacity: 0; scale: .35;
  transition: opacity .4s ease, scale .45s cubic-bezier(.34, 1.4, .44, 1); }
html.fx .sec-choke .choke__cells i:nth-child(1) { transition-delay: .3s; }
html.fx .sec-choke .choke__cells i:nth-child(2) { transition-delay: .42s; }
html.fx .sec-choke .choke__cells i:nth-child(3) { transition-delay: .54s; }
html.fx .sec-choke .choke__cells i:nth-child(4) { transition-delay: .66s; }
html.fx .sec-choke.in-view .choke__cells i:nth-child(-n+4) { opacity: 1; scale: 1; }
.choke__num {
  display: block; font-size: clamp(3rem, 5.6vw, 4.3rem); font-weight: 650;
  letter-spacing: -.03em; line-height: 1; color: var(--brand);
  font-variant-numeric: tabular-nums;
}
.choke__stat p { margin: .55rem 0 0; color: var(--muted); line-height: 1.6;
  font-size: .95rem; max-width: 24em; }
.choke__routes { display: grid; gap: 1.9rem; }
.choke-route > b { display: block; font-size: .6rem; font-weight: 600;
  letter-spacing: .14em; color: var(--faint); margin-bottom: .8rem; }
.choke-route--new > b { color: var(--copper); }
/* the old route: a staircase sinking right and down, hop by dashed hop.
   Geometry is fixed (one-line chips ~30px tall, 11px row gap, --stepx
   indent per stop), so each elbow connector is a constant-size pseudo. */
.choke-route__steps { display: grid; gap: 11px; justify-items: start; --stepx: 46px; }
.rstep { position: relative; }
.rstep:nth-child(2) { margin-left: var(--stepx); }
.rstep:nth-child(3) { margin-left: calc(var(--stepx) * 2); }
.rstep:nth-child(4) { margin-left: calc(var(--stepx) * 3); }
.rstep:nth-child(5) { margin-left: calc(var(--stepx) * 4); }
.rstep + .rstep::before {
  content: ""; position: absolute;
  left: calc(14px - var(--stepx)); top: -11px;
  width: calc(var(--stepx) - 20px); height: 26px;
  border-left: 1.5px dashed var(--line-strong);
  border-bottom: 1.5px dashed var(--line-strong);
  border-bottom-left-radius: 11px;
}
.rchip {
  display: inline-flex; align-items: center; white-space: nowrap;
  border: 1px solid var(--line-strong); border-radius: 7px;
  background: var(--bg-tint); padding: .3rem .7rem;
  font-size: .8rem; line-height: 1.25; color: var(--muted);
  box-shadow: 1.5px 2px 0 rgba(34, 84, 121, .08);
}
/* each stop sits a touch askew - paper passed hand to hand */
.rstep:nth-child(1) .rchip { rotate: -.9deg; }
.rstep:nth-child(2) .rchip { rotate: .8deg; }
.rstep:nth-child(3) .rchip { rotate: -.7deg; }
.rstep:nth-child(4) .rchip { rotate: .9deg; }
.rstep:nth-child(5) .rchip { rotate: -.6deg; }
.rchip--q { background: var(--bg); color: var(--ink); font-weight: 560; }
.rchip--wait { border-style: dashed; background: transparent;
  color: var(--faint); box-shadow: none; }
html.fx .sec-choke .choke-route--old .rstep { opacity: 0; translate: -7px -5px;
  transition: opacity .45s ease, translate .45s ease; }
html.fx .sec-choke .choke-route--old .rstep:nth-child(2) { transition-delay: .1s; }
html.fx .sec-choke .choke-route--old .rstep:nth-child(3) { transition-delay: .2s; }
html.fx .sec-choke .choke-route--old .rstep:nth-child(4) { transition-delay: .3s; }
html.fx .sec-choke .choke-route--old .rstep:nth-child(5) { transition-delay: .4s; }
html.fx .sec-choke.in-view .choke-route--old .rstep { opacity: 1; translate: 0 0; }
/* the Naxis route: one straight line - clay question, the engine tile
   (the same Blender clay tile the ingest belt rides), a cited answer */
.choke-route__line { display: flex; align-items: center; gap: 8px; }
.rbub {
  font-size: .8rem; font-weight: 560; letter-spacing: -.008em; line-height: 1.35;
  color: var(--ink); padding: .5em .8em; min-width: 0;
}
.rbub--q {
  background: linear-gradient(150deg, #e3eef7, #cddfec);
  border-radius: 13px 13px 5px 13px;
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .9),
    inset -4px -5px 9px rgba(34, 84, 121, .12),
    0 3px 7px rgba(22, 33, 43, .06),
    0 14px 26px -12px rgba(34, 84, 121, .35);
}
.rbub--a {
  display: inline-block;
  background: #fff;
  border-radius: 13px 13px 13px 5px;
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .9),
    inset -4px -5px 9px rgba(22, 33, 43, .05),
    0 3px 7px rgba(22, 33, 43, .06),
    0 14px 26px -12px rgba(34, 84, 121, .3);
}
.rbub--a .rcites { margin-left: .4rem; vertical-align: -4px; }
.rtile {
  flex: none; width: 46px; height: 46px;
  display: grid; place-items: center;
  background: url("../img/clay-tile.png") center / contain no-repeat;
  filter: drop-shadow(0 5px 8px rgba(34, 84, 121, .16));
}
.rtile img { width: 20px; height: 20px; transform: translateY(-1px); }
.rwire { flex: 1 1 18px; min-width: 12px; height: 2px; border-radius: 2px;
  background: rgba(34, 84, 121, .45); }
.rcites { display: inline-flex; gap: 3px; }
.rcites i {
  font-style: normal; width: 1.05rem; height: 1.05rem; border-radius: 99px;
  display: grid; place-items: center; background: var(--copper); color: #fff;
  font-family: var(--font-mono); font-size: .58rem; font-weight: 700;
}
/* the direct route assembles itself after the staircase: wires draw,
   the tile lands, the answer arrives, the citations stamp on last */
html.fx .sec-choke .rwire { scale: 0 1; transform-origin: 0 50%;
  transition: scale .45s cubic-bezier(.3, .7, .3, 1) .62s; }
html.fx .sec-choke .rwire--b { transition-delay: .82s; }
html.fx .sec-choke .rtile { opacity: 0; scale: .5;
  transition: opacity .4s ease .68s, scale .5s cubic-bezier(.34, 1.45, .44, 1) .68s; }
html.fx .sec-choke .rbub--a { opacity: 0; translate: -6px 0;
  transition: opacity .45s ease 1s, translate .45s ease 1s; }
html.fx .sec-choke .rcites i { opacity: 0; scale: .3;
  transition: opacity .3s ease, scale .4s cubic-bezier(.34, 1.5, .44, 1); }
html.fx .sec-choke .rcites i:nth-child(1) { transition-delay: 1.3s; }
html.fx .sec-choke .rcites i:nth-child(2) { transition-delay: 1.42s; }
html.fx .sec-choke.in-view .rwire { scale: 1 1; }
html.fx .sec-choke.in-view .rtile { opacity: 1; scale: 1; }
html.fx .sec-choke.in-view .rbub--a { opacity: 1; translate: 0 0; }
html.fx .sec-choke.in-view .rcites i { opacity: 1; scale: 1; }
@media (max-width: 1120px) { .choke-route__steps { --stepx: 38px; } }
@media (max-width: 480px)  { .choke-route__steps { --stepx: 27px; } }
.choke__kicker {
  margin: clamp(2.6rem, 5.5vw, 3.8rem) auto 0; text-align: center;
  font-size: clamp(1.12rem, 1.9vw, 1.42rem); font-weight: 600;
  letter-spacing: -.012em; color: var(--ink); max-width: 34em;
}
.choke__kicker em { display: block; font-style: normal; margin-top: .4rem;
  color: var(--brand); font-weight: 650; }
@media (max-width: 860px) {
  .choke__grid { grid-template-columns: minmax(0, 1fr); }
  .choke__prose p { max-width: none; }
}

/* ---------- about: the wordmark hero + the our-solution board ----------
   The h1 is the drawn wordmark, not set type; the solution aside pairs the
   leader's-week meter with the never-again facts. */
.about-wordmark { line-height: 0; }
.about-wordmark img { width: min(440px, 88%); height: auto; display: block; }
.sec__patch--solution { right: -160px; top: -110px; }
.solution__aside { display: grid; gap: 1.35rem; align-content: start; }
/* the leader's-week meter, rebuilt 2026-07-24 as a real instrument:
   clay face, a wordless tick ruler over carved channel tracks, raised
   fills (the routing cost keeps its copper hazard stripe), and the bars
   FILL as the section scrolls in - the WITH NAXIS bar sweeps to full.
   Without motion everything stands complete. */
.capmeter {
  border-radius: 22px;
  background: linear-gradient(150deg, #fdfeff, #eef3f7);
  border: 1px solid rgba(34, 84, 121, .08);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .95),
    inset 6px 8px 14px rgba(255, 255, 255, .75),
    inset -9px -11px 20px rgba(34, 84, 121, .08),
    0 3px 7px rgba(22, 33, 43, .05),
    0 26px 48px -20px rgba(34, 84, 121, .3);
  padding: 1.25rem 1.35rem 1.15rem;
  display: grid; gap: .95rem;
}
.capmeter > b { font-size: .6rem; font-weight: 600; letter-spacing: .14em;
  color: var(--muted); }
/* the scale: ten hairline ticks over the track column, nothing spoken */
.capmeter__ruler { display: grid; grid-template-columns: 88px minmax(0, 1fr);
  gap: .8rem; margin-bottom: -.5rem; }
.capmeter__ruler::before { content: ""; }
.capmeter__ruler::after {
  content: ""; height: 7px; align-self: end;
  background-image: linear-gradient(90deg, var(--line-strong) 1px, transparent 1px);
  background-size: 10% 100%;
  border-right: 1px solid var(--line-strong);
}
.capmeter__row { display: grid; grid-template-columns: 88px minmax(0, 1fr);
  gap: .8rem; align-items: center; }
.capmeter__tag { font-size: .58rem; letter-spacing: .12em; color: var(--faint); }
.capmeter__bar { display: flex; height: 38px; border-radius: 10px; padding: 3px;
  background: var(--bg-dip);
  box-shadow: inset 0 1.5px 3px rgba(22, 33, 43, .13),
    inset 0 -1px 0 rgba(255, 255, 255, .85);
}
.capmeter__seg { width: var(--w); display: grid; align-items: center;
  min-width: 0; border-radius: 7px; }
.capmeter__seg + .capmeter__seg { border-left: 3px solid var(--bg-dip); }
.capmeter__seg i { font-style: normal; font-size: .66rem; font-weight: 560;
  letter-spacing: .01em; padding-inline: .66rem; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.capmeter__seg--work {
  background: linear-gradient(150deg, #316a97, #225479);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .28),
    inset -3px -4px 8px rgba(16, 42, 62, .25),
    0 2px 4px rgba(22, 51, 74, .22);
}
.capmeter__seg--work i { color: #fff; }
.capmeter__seg--route {
  background:
    repeating-linear-gradient(135deg, rgba(168, 94, 36, .3) 0 4px,
      rgba(168, 94, 36, .12) 4px 8px),
    #f6e7d8;
  box-shadow: inset 0 1px 2px rgba(122, 67, 21, .2);
}
.capmeter__seg--route i { color: #7a4315; }
.capmeter__note { font-size: .88rem; color: var(--muted); line-height: 1.6;
  margin: .05rem 0 0; max-width: 30em; }
/* the week fills itself in: work, then the routing cost; the second bar
   sweeps the whole track back */
html.fx .capmeter .capmeter__seg { width: 0; }
html.fx .capmeter .capmeter__seg i { opacity: 0; transition: opacity .5s ease; }
html.fx .capmeter .capmeter__row:nth-of-type(1) .capmeter__seg--work {
  transition: width 1s cubic-bezier(.25, 1, .3, 1) .25s; }
html.fx .capmeter .capmeter__row:nth-of-type(1) .capmeter__seg--route {
  transition: width .75s cubic-bezier(.25, 1, .3, 1) .95s; }
html.fx .capmeter .capmeter__row:nth-of-type(2) .capmeter__seg--work {
  transition: width 1.15s cubic-bezier(.25, 1, .3, 1) 1.35s; }
html.fx .in-view .capmeter .capmeter__seg { width: var(--w); }
html.fx .in-view .capmeter .capmeter__seg i { opacity: 1; }
html.fx .in-view .capmeter .capmeter__row:nth-of-type(1) .capmeter__seg--work i { transition-delay: 1s; }
html.fx .in-view .capmeter .capmeter__row:nth-of-type(1) .capmeter__seg--route i { transition-delay: 1.55s; }
html.fx .in-view .capmeter .capmeter__row:nth-of-type(2) .capmeter__seg--work i { transition-delay: 2.3s; }
@media (max-width: 500px) {
  .capmeter__row { grid-template-columns: minmax(0, 1fr); gap: .32rem; }
  .capmeter__ruler { grid-template-columns: minmax(0, 1fr); }
  .capmeter__ruler::before { display: none; }
}

/* ---------- 01 - ingest: the live meter over the source belt ---------- */
.sec-connect__grid {
  display: grid; grid-template-columns: minmax(0, 9fr) minmax(0, 11fr);
  gap: clamp(1.8rem, 4.5vw, 4rem); align-items: center;
}
.sec-connect__copy > p { color: var(--muted); line-height: 1.65; max-width: 34rem; }
.sec-connect__copy .hair-rows { margin-top: 1.6rem; }
.ingest {
  border-radius: 26px;
  background: linear-gradient(150deg, #fdfeff 0%, #eef3f7 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .95),
    inset 6px 8px 14px rgba(255, 255, 255, .8),
    inset -10px -12px 22px rgba(34, 84, 121, .09),
    0 3px 7px rgba(22, 33, 43, .05),
    0 30px 56px -22px rgba(34, 84, 121, .32);
  border: 1px solid rgba(34, 84, 121, .07);
  padding: clamp(1.6rem, 3.2vw, 2.6rem) 0 0;
  overflow: hidden;
}
.ingest__meter { display: grid; gap: .5rem; justify-items: center; text-align: center;
  padding-inline: clamp(1.2rem, 3vw, 2.4rem); position: relative; }
.ingest__n {
  font-size: clamp(2.5rem, 5.4vw, 3.9rem); font-weight: 650; letter-spacing: -.028em;
  line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums;
}
.ingest__l { color: var(--muted); letter-spacing: .14em; font-size: .64rem; }
.ingest__tick {
  position: absolute; right: clamp(.9rem, 2vw, 1.6rem); top: -.4rem;
  color: #2e9e62; font-size: .62rem; letter-spacing: .1em;
  opacity: 0; transition: opacity .3s ease;
}
.ingest__tick.on { opacity: 1; }
.ingest__belt { margin-top: clamp(1.4rem, 2.6vw, 2rem); display: grid; gap: .7rem;
  padding-bottom: 1.5rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.ingest__lane { display: flex; gap: .7rem; width: max-content;
  animation: belt 44s linear infinite; }
.ingest__lane--rev { animation-name: belt-rev; animation-duration: 52s; }
@keyframes belt     { to { transform: translateX(-50%); } }
@keyframes belt-rev { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .ingest__lane { animation: none; } }
/* each chip rides a Blender-rendered clay tile (alpha PNG); the SVG logo
   stays vector-crisp on top of it */
.ingest__chip {
  flex: none; width: 54px; height: 54px;
  display: grid; place-items: center;
  background: url("../img/clay-tile.png") center / contain no-repeat;
  filter: drop-shadow(0 5px 8px rgba(34, 84, 121, .16));
}
.ingest__chip img { width: 24px; height: 24px; object-fit: contain;
  transform: translateY(-1px); }
@media (max-width: 960px) {
  .sec-connect__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 02 - vague questions inside real doorways ----------
   Three clay chat windows - WhatsApp, Slack, Discord, by their own colors
   and marks - each carrying one deliberately vague question and a skeleton
   answer with its two citation dots. The ask bar types the rest. */
.ctxchats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.6vw, 1.8rem); align-items: start;
}
.ctxchat {
  border-radius: 22px; overflow: hidden;
  background: var(--cb, #f6f8fa);
  border: 1px solid rgba(34, 84, 121, .08);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .85),
    inset -8px -10px 18px rgba(34, 84, 121, .07),
    0 3px 7px rgba(22, 33, 43, .05),
    0 30px 54px -24px rgba(34, 84, 121, .34);
  transition: transform .25s ease, box-shadow .25s ease;
}
.ctxchat:nth-child(1) { rotate: -1.1deg; }
.ctxchat:nth-child(2) { rotate: .5deg; margin-top: 1.3rem; }
.ctxchat:nth-child(3) { rotate: 1.2deg; }
.ctxchat:hover { transform: translateY(-4px); }
.ctxchat__head {
  display: flex; align-items: center; gap: .55rem;
  padding: .72rem .95rem .66rem;
  background: var(--ch, #fff); color: var(--ci, var(--ink));
  font-size: .85rem;
}
.ctxchat__head img { width: 24px; height: 24px; border-radius: 7px; flex: none;
  background: #fff; padding: 3px; box-shadow: 0 1px 3px rgba(22, 33, 43, .2); }
.ctxchat__head b { font-weight: 650; letter-spacing: -.01em; }
.ctxchat__on { width: 6px; height: 6px; border-radius: 99px; background: #45d17d;
  margin-left: auto; box-shadow: 0 0 0 2.5px rgba(69, 209, 125, .22); }
.ctxchat__body { padding: 1rem .95rem 1.1rem; display: grid; gap: .65rem;
  background: var(--cbody, transparent); }
.ctxchat__q {
  justify-self: end; max-width: 88%;
  font-size: .92rem; font-weight: 560; letter-spacing: -.008em; line-height: 1.4;
  color: var(--qi, var(--ink));
  background: var(--qbub, #fff);
  border-radius: 15px 15px 5px 15px;
  padding: .55em .9em;
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .75),
    inset -3px -4px 7px rgba(22, 33, 43, .05),
    0 3px 7px rgba(22, 33, 43, .09);
}
.ctxchat__a {
  justify-self: start; width: 82%;
  background: var(--abub, #fff);
  border-radius: 15px 15px 15px 5px;
  padding: .75em .85em .7em;
  display: grid; gap: 7px;
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .9),
    inset -3px -4px 7px rgba(22, 33, 43, .05),
    0 3px 7px rgba(22, 33, 43, .09);
}
.ctxchat__bar { display: block; width: var(--w, 70%); height: 11px;
  border-radius: 7px; background: var(--barc, #d3dce3);
  box-shadow: inset 0 1px 2px rgba(22, 33, 43, .1); }
.ctxchat__cites { display: flex; gap: .35rem; margin-top: .15rem; }
.ctxchat__cites i {
  font-style: normal; width: 17px; height: 17px; border-radius: 99px;
  display: grid; place-items: center;
  background: var(--copper); color: #fff;
  font-family: var(--font-mono); font-size: .56rem; font-weight: 700;
}
/* the platforms, by their own colors */
.ctxchat--wa { --ch: #075e54; --ci: #fff; --cb: #ece5dd; --qbub: #d9fdd3;
  --abub: #fff; }
.ctxchat--wa .ctxchat__body {
  background-image: radial-gradient(rgba(34, 84, 121, .05) 1.5px, transparent 1.5px);
  background-size: 24px 24px;
}
.ctxchat--sl { --ch: #4a154b; --ci: #fff; --cb: #ffffff; --qbub: #eaf3ea;
  --abub: #f4f0f4; }
.ctxchat--sl .ctxchat__q { border-radius: 9px; }
.ctxchat--sl .ctxchat__a { border-radius: 9px; }
.ctxchat--dc { --ch: #5865f2; --ci: #fff; --cb: #f2f3f5; --qbub: #e0e3ff;
  --abub: #fff; }
/* the ask bar under the three windows */
.qfield__bar {
  position: relative; z-index: 1;
  width: min(640px, 92%);
  display: flex; align-items: center; gap: 2px;
  font-size: clamp(1.02rem, 2vw, 1.3rem); font-weight: 560; letter-spacing: -.012em;
  background: linear-gradient(160deg, #ffffff, #f2f6f9);
  border: 1px solid rgba(34, 84, 121, .1);
  border-radius: 20px;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .95),
    inset -6px -8px 14px rgba(34, 84, 121, .07),
    0 3px 8px rgba(22, 33, 43, .05),
    0 26px 52px -20px rgba(34, 84, 121, .32);
  padding: 1.05em 1.3em;
  margin: clamp(1.8rem, 4vw, 2.6rem) auto 0;
}
.qfield__caret { width: 2.5px; height: 1.15em; background: var(--brand); flex: none;
  border-radius: 2px; order: 2; }
html.fx .qfield__caret { animation: caret-blink 1.06s steps(2) infinite; }
@keyframes caret-blink { 50% { opacity: 0; } }
/* block + min-height so the bar keeps its height even mid-delete (an
   empty inline span would collapse and make the whole section jump) */
.qfield__type { white-space: nowrap; overflow: hidden; order: 1;
  display: block; min-height: 1.65em; }
.sec-context__note { margin-top: 1.4rem; color: var(--muted); max-width: 52em; line-height: 1.65; }
.sec-context__note em { font-style: normal; font-weight: 600; color: var(--ink); }
.sec-context__note a { color: var(--brand); font-weight: 560; white-space: nowrap; }
@media (max-width: 860px) {
  .ctxchats { grid-template-columns: minmax(0, 1fr); max-width: 400px; margin-inline: auto; }
  .ctxchat:nth-child(2) { margin-top: 0; }
}

/* ---------- 03 - one phone, app after app ---------- */
.anywhere__grid {
  display: grid; grid-template-columns: minmax(0, 9fr) minmax(0, 10fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.anywhere__copy > p { color: var(--muted); line-height: 1.65; max-width: 34rem; }
.anywhere__copy > p + p { margin-top: 1em; }
.phoneswitch { margin: 0; display: grid; justify-items: center; }
/* the handset: an iPhone - island up top, side keys, no chrome below */
.phone {
  position: relative;
  width: min(272px, 74vw); aspect-ratio: 9 / 18.4;
  border-radius: 44px;
  background: linear-gradient(150deg, #fcfdfe, #eaeff4);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .95),
    inset 5px 7px 12px rgba(255, 255, 255, .7),
    inset -8px -10px 18px rgba(34, 84, 121, .10),
    0 3px 8px rgba(22, 33, 43, .05),
    0 38px 68px -26px rgba(34, 84, 121, .40);
  border: 1px solid rgba(34, 84, 121, .09);
  padding: 12px;
}
.phone::before,                       /* volume pair, left flank */
.phone::after {                       /* power, right flank */
  content: ""; position: absolute; width: 3px; border-radius: 2px;
  background: linear-gradient(90deg, #dbe2e9, #b9c5cf);
}
.phone::before { left: -3px; top: 108px; height: 34px;
  box-shadow: 0 46px 0 #c3cfd8; }
.phone::after { right: -3px; top: 138px; height: 56px; }
.phone__screen {
  position: relative; width: 100%; height: 100%;
  border-radius: 33px; overflow: hidden;
  background: var(--bg-dip);
  box-shadow: inset 0 2px 6px rgba(34, 84, 121, .12);
}
.phone__island {
  position: absolute; top: 10px; left: 50%; translate: -50% 0;
  width: 35%; height: 18px; border-radius: 99px;
  background: #0b1116; z-index: 6;
  box-shadow: inset 0 1px 1.5px rgba(255, 255, 255, .10),
    0 1px 4px rgba(22, 33, 43, .35);
}
.phone__island::after {
  content: ""; position: absolute; right: 6px; top: 50%; translate: 0 -50%;
  width: 7px; height: 7px; border-radius: 99px;
  background: radial-gradient(circle at 35% 35%, #33414d, #0d151c 72%);
}
.phone__pages { position: absolute; inset: 0; }
/* the app switch, the way the phone itself does it: the current app drifts
   aside and shrinks a step back while the next one slides in over it -
   a deck of rounded cards changing hands, no flipping. */
.skin {
  position: absolute; inset: 5px;
  transform: translateX(106%) scale(.94);
  opacity: 0;
  pointer-events: none;
}
.skin.is-cur { transform: none; opacity: 1; z-index: 3; }
.skin.is-prev { z-index: 2; }
html.fx .skin.is-cur { animation: app-in .9s cubic-bezier(.3, .86, .24, 1) both; }
html.fx .skin.is-prev { animation: app-out .9s cubic-bezier(.5, .1, .46, 1) both; }
@keyframes app-in {
  0%   { transform: translateX(106%) scale(.94); opacity: 1; }
  100% { transform: translateX(0) scale(1); opacity: 1; }
}
@keyframes app-out {
  0%   { transform: translateX(0) scale(1); opacity: 1; }
  70%  { opacity: 1; }
  100% { transform: translateX(-42%) scale(.88); opacity: 0; }
}
.skin__face {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  border-radius: 26px; overflow: hidden;
  background: var(--skin-bg, #f4f6f8);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .55),
    inset -6px -8px 14px rgba(22, 33, 43, .06),
    0 10px 24px -10px rgba(22, 33, 43, .30);
}
/* receding apps dim a touch, like the switcher's depth cue */
.skin__face::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: rgba(22, 33, 43, 1);
  opacity: 0;
}
html.fx .skin.is-prev .skin__face::after { animation: app-dim .9s ease both; }
@keyframes app-dim { 0% { opacity: 0; } 100% { opacity: .14; } }
.skin__head {
  display: flex; align-items: center; gap: .55rem;
  padding: 2.45rem .9rem .7rem;   /* the island floats in this status zone */
  background: var(--skin-head, #fff); color: var(--skin-ink, var(--ink));
}
.skin__head img { width: 26px; height: 26px; border-radius: 8px;
  background: #fff; padding: 3px; box-shadow: 0 1px 3px rgba(22,33,43,.18); }
.skin__head b { font-size: .82rem; font-weight: 650; letter-spacing: -.01em; }
.skin__on { width: 6px; height: 6px; border-radius: 99px; background: #45d17d;
  margin-left: auto; box-shadow: 0 0 0 2.5px rgba(69, 209, 125, .22); }
.skin__canvas { flex: 1; display: flex; flex-direction: column;
  padding: .7rem .65rem .3rem;
  background: var(--skin-canvas, transparent); }
.skin__date {
  align-self: center; width: 52px; height: 14px; border-radius: 99px;
  background: rgba(255, 255, 255, .75);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 3px rgba(22, 33, 43, .08);
  margin-bottom: .65rem; flex: none;
}
/* the conversation, as clay: empty in/out bubbles, no words */
.skin__msgs { display: flex; flex-direction: column; gap: 7px; }
.skin__b {
  display: block; width: var(--w, 55%); height: 24px;
  border-radius: 13px;
  background: var(--skin-bub-in, #ffffff);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .85),
    inset -3px -4px 6px rgba(22, 33, 43, .06),
    0 2px 4px rgba(22, 33, 43, .07),
    0 8px 16px -6px rgba(22, 33, 43, .14);
}
.skin__b--in  { align-self: flex-start; border-bottom-left-radius: 5px; }
.skin__b--out { align-self: flex-end; border-bottom-right-radius: 5px;
  background: var(--skin-bub-out, var(--brand-wash-2)); }
.skin__composer {
  margin: .6rem .65rem .75rem; padding: .52rem .3rem .52rem .85rem;
  display: flex; align-items: center; gap: .5rem;
  background: #fff; border-radius: 99px;
  box-shadow: 0 1px 4px rgba(22, 33, 43, .1);
  font-size: .74rem; color: var(--faint);
}
.skin__composer span { flex: 1; white-space: nowrap; overflow: hidden; }
.skin__composer i {
  width: 26px; height: 26px; border-radius: 99px; flex: none; margin-right: .2rem;
  background: var(--skin-send, var(--brand));
  position: relative;
}
.skin__composer i::after {
  content: ""; position: absolute; left: 8px; top: 9px;
  width: 7px; height: 7px;
  border-top: 2px solid #fff; border-right: 2px solid #fff;
  transform: rotate(45deg);
}
/* the platforms, by their own colors - logos are the real marks, the
   out-bubble tint is each platform's own */
.skin--wa { --skin-head: #075e54; --skin-ink: #fff; --skin-send: #25d366;
  --skin-bg: #ece5dd; --skin-bub-out: #d9fdd3; }
.skin--wa .skin__canvas {
  background-image: radial-gradient(rgba(34, 84, 121, .05) 1.5px, transparent 1.5px);
  background-size: 26px 26px;
}
.skin--sl { --skin-head: #4a154b; --skin-ink: #fff; --skin-send: #007a5a;
  --skin-bg: #fff; --skin-bub-in: #f4f0f4; --skin-bub-out: #e8f5e9; }
.skin--sl .skin__composer { border: 1px solid var(--line-strong); border-radius: 10px;
  box-shadow: none; }
.skin--sl .skin__b { border-radius: 8px; }
.skin--tg { --skin-head: #37698a; --skin-ink: #fff; --skin-send: #2aabee;
  --skin-bg: #e3ebf2; --skin-bub-out: #d3ecff; }
.skin--tm { --skin-head: #5b5fc7; --skin-ink: #fff; --skin-send: #5b5fc7;
  --skin-bg: #f5f5f7; --skin-bub-out: #e4e4fb; }
.skin--tm .skin__composer { border-radius: 8px; }
.skin--vb { --skin-head: #7360f2; --skin-ink: #fff; --skin-send: #7360f2;
  --skin-bg: #f0eef8; --skin-bub-out: #e5dffc; }
@media (max-width: 960px) {
  .anywhere__grid { grid-template-columns: minmax(0, 1fr); }
  .phoneswitch { order: 2; }
}

/* ---------- 04 - two people, one question ---------- */
.twochat { display: grid; gap: 1.4rem; justify-items: center; }
.twochat__q { text-align: center; }
/* the question, as clay - same grammar as the hero's user bubble: steel
   wash, ink text, pillow shadows, a tail pointing down at the two answers */
.twochat__bubbleq {
  display: inline-block; position: relative;
  font-size: clamp(1rem, 1.9vw, 1.18rem); font-weight: 600; letter-spacing: -.012em;
  color: var(--ink);
  background: linear-gradient(150deg, #e3eef7, #cddfec);
  border-radius: 22px;
  padding: .7em 1.3em;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .9),
    inset 4px 5px 9px rgba(255, 255, 255, .6),
    inset -6px -8px 14px rgba(34, 84, 121, .13),
    0 3px 7px rgba(22, 33, 43, .05),
    0 22px 40px -18px rgba(34, 84, 121, .38);
}
.twochat__bubbleq::after {
  content: ""; position: absolute; left: 50%; bottom: -6px;
  width: 15px; height: 15px; translate: -50% 0; rotate: 45deg;
  background: linear-gradient(135deg, #d5e4f0, #cbdeeb);
  border-radius: 3px;
  box-shadow: inset -3px -3px 5px rgba(34, 84, 121, .12);
}
.twochat__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.6vw, 1.8rem); width: 100%; max-width: 62rem; }
.twochat__card {
  border-radius: 24px;
  background: linear-gradient(150deg, #ffffff, #f0f4f8);
  border: 1px solid rgba(34, 84, 121, .07);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .95),
    inset 6px 8px 14px rgba(255, 255, 255, .75),
    inset -9px -11px 20px rgba(34, 84, 121, .08),
    0 3px 7px rgba(22, 33, 43, .05),
    0 28px 52px -22px rgba(34, 84, 121, .30);
  padding: 1.3rem 1.4rem 1.2rem;
  display: grid; gap: .8rem; align-content: start;
}
.twochat__card header { display: flex; align-items: center; gap: .7rem; }
.twochat__badge {
  width: 38px; height: 38px; border-radius: 12px; flex: none;
  display: grid; place-items: center;
  background: var(--pc, var(--brand)); color: #fff;
  font-size: .78rem; font-weight: 700; letter-spacing: .02em;
}
.twochat__card header b { display: block; font-size: .95rem; letter-spacing: -.01em; }
.twochat__card header .mono { color: var(--faint); font-size: .62rem; letter-spacing: .14em; }
.twochat__card p { font-size: .95rem; line-height: 1.6; color: var(--ink); }
.twochat__card footer { display: flex; flex-wrap: wrap; gap: .45rem; }
.twochat__note { color: var(--muted); max-width: 46em; text-align: center; line-height: 1.65; }
.twochat__note a { color: var(--brand); font-weight: 560; white-space: nowrap; }
@media (max-width: 860px) { .twochat__pair { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 05 - the vault + the drawers ----------
   The one section allowed to go dark: the vault is a deep-steel slab
   (the sealed room itself), the white deployment unit inside it is the
   only thing lit. The four compliance plaques live UNDER it as drawers:
   at rest only their labelled bottom strip peeks out below the slab's
   edge; hover / focus / a first tap slides the whole clay plaque out. */
.sec-secure { background: linear-gradient(180deg, #fbfcfd, #ecf1f6); }
.secure__stack { position: relative; }
.secure__tabs {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.8rem, 2vw, 1.4rem);
  padding-inline: clamp(1.4rem, 3.2vw, 2.6rem);
  margin-bottom: 108px;              /* room for a plaque to slide into */
  --peek: 46px;
}
.stab { position: relative; display: block; height: var(--peek); z-index: 1; }
.stab:hover, .stab:focus-visible, .stab.is-open { z-index: 2; }
/* the plaque: a fat clay tile with a real bottom edge - the "3D box".
   At rest it hides under the vault, all but its labelled foot. */
.stab__box {
  display: grid; grid-template-rows: 1fr auto;
  min-height: 148px;
  border-radius: 16px;
  background: linear-gradient(160deg, #ffffff, #eef3f7);
  border: 1px solid rgba(34, 84, 121, .10);
  border-bottom: 6px solid #c6d2dc;  /* the extruded lower face */
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .95),
    inset 5px 7px 12px rgba(255, 255, 255, .65),
    inset -7px -9px 16px rgba(34, 84, 121, .07),
    0 16px 30px -14px rgba(34, 84, 121, .35);
  transform: translateY(calc(-100% + var(--peek)));
  /* the clip travels with the slide: only the peeking strip is painted OR
     hit-testable at rest, so hidden plaques can't sit over neighbours
     (the mobile 2×2 rows) or swallow their taps */
  clip-path: inset(calc(100% - var(--peek)) -24px -34px -24px);
  transition: transform .5s cubic-bezier(.26, 1, .34, 1),
              clip-path .5s cubic-bezier(.26, 1, .34, 1);
  will-change: transform, clip-path;
}
.stab:hover .stab__box,
.stab:focus-visible .stab__box,
.stab.is-open .stab__box {
  transform: translateY(0);
  clip-path: inset(-14px -24px -34px -24px);
}
@media (prefers-reduced-motion: reduce) { .stab__box { transition: none; } }
.stab__fact {
  padding: .95rem 1.05rem .7rem;
  font-size: .8rem; line-height: 1.5; color: var(--muted);
}
.stab__foot {
  display: flex; align-items: center; justify-content: center; gap: .55rem;
  height: calc(var(--peek) - 6px);
  padding-inline: .8rem;
  border-top: 1px solid rgba(34, 84, 121, .08);
  white-space: nowrap;
}
.stab__foot b { font-size: .88rem; font-weight: 700; letter-spacing: -.01em; color: var(--brand); }
.stab__foot b em { font-style: normal; font-family: var(--font-mono); font-size: .6rem;
  letter-spacing: .14em; color: var(--muted); font-weight: 500; }
.stab__foot .mono { font-size: .54rem; letter-spacing: .12em; color: var(--faint); }
.stab__foot i { font-style: normal; color: var(--brand); font-size: .82rem;
  opacity: 0; translate: -4px 0; transition: opacity .25s ease, translate .25s ease; }
.stab:hover .stab__foot i, .stab:focus-visible .stab__foot i,
.stab.is-open .stab__foot i { opacity: 1; translate: 0 0; }
.secure__vault {
  position: relative; z-index: 3;
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: clamp(1.4rem, 3.5vw, 3rem); align-items: center;
  border-radius: 26px;
  background:
    radial-gradient(120% 160% at 10% 0%, rgba(255, 255, 255, .16), transparent 44%),
    linear-gradient(155deg, #316a97 0%, #225479 48%, #142e44 100%);
  border: 1px solid rgba(16, 42, 62, .6);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .18),
    inset -12px -14px 28px rgba(10, 24, 36, .32),
    0 28px 56px -22px rgba(22, 51, 74, .5);
  padding: clamp(1.5rem, 3.2vw, 2.4rem);
  transition: transform .2s ease, box-shadow .2s ease;
}
.secure__vault:hover {
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .18),
    inset -12px -14px 28px rgba(10, 24, 36, .32),
    0 34px 68px -24px rgba(22, 51, 74, .6);
}
.secure__diagram { position: relative; min-height: 150px; display: grid; place-items: center; }
.secure__wall {
  position: absolute; inset: 0;
  border: 1.5px dashed rgba(255, 255, 255, .35); border-radius: 16px;
  background:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 20px 20px;
}
.secure__unit {
  position: relative; display: grid; justify-items: center; gap: .3rem;
  background: #fff; border-radius: 14px;
  border: 1px solid rgba(34, 84, 121, .14);
  box-shadow: 0 18px 36px -12px rgba(6, 16, 25, .55);
  padding: 1rem 1.5rem;
}
.secure__unit b { font-size: .92rem; letter-spacing: -.01em; }
.secure__unit em { font-style: normal; font-size: .56rem; letter-spacing: .14em; color: var(--faint); }
.secure__copy p { color: rgba(255, 255, 255, .85); line-height: 1.65; max-width: 34rem; }
.secure__copy .link-more { display: inline-block; margin-top: .9rem; color: #e9b47e; }
.secure__vault:hover .link-more { color: #fff; }
@media (max-width: 960px) {
  .secure__tabs { grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-inline: clamp(.9rem, 3vw, 1.6rem); row-gap: .8rem; }
  .secure__vault { grid-template-columns: minmax(0, 1fr); }
  .secure__diagram { min-height: 130px; width: 100%; }
}

/* ---------- close ---------- */
.home-close { position: relative; overflow: clip; isolation: isolate;
  border-top: 1px solid var(--line);
  padding-block: clamp(4.2rem, 10vw, 7rem); }
.home-close__in { position: relative; z-index: 1; display: grid; justify-items: center;
  text-align: center; gap: 1.3rem; }
.home-close__in .lead { max-width: 36em; }
.home-close__actions { display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: .9rem; margin-top: .8rem; }
.home-close__quiet { color: var(--muted); font-size: .94rem; font-weight: 560; }
.home-close__quiet:hover { color: var(--brand); }

/* ============================================================
   Subpages 2026-07 - the frontpage grammar carried inward.
   Every client-facing page opens with the same stage (patches at
   the periphery, head-rule, display), argues in .sec sections and
   clay objects, and closes with the centered close. pages.js
   (the subpage twin of home.js) drives the same rise reveals.
   ============================================================ */

/* ---------- page hero: the subpage opening stage ---------- */
.page-hero {
  position: relative; overflow: clip; isolation: isolate;
  margin-top: calc(-1 * (var(--header-h) + var(--header-off)));
  padding-top: calc(var(--header-h) + var(--header-off) + clamp(2.6rem, 6vw, 4.8rem));
  padding-bottom: clamp(2rem, 4.5vw, 3.4rem);
}
.page-hero__grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 10fr) minmax(0, 9fr);
  gap: clamp(1.6rem, 4vw, 4rem); align-items: center;
}
.page-hero__copy { max-width: 40rem; padding-block: clamp(.6rem, 2.5vw, 2rem); }
.page-hero--solo .page-hero__grid { grid-template-columns: minmax(0, 1fr); }
.page-hero--solo .page-hero__copy { max-width: 46rem; }
.page-hero__crumb {
  display: block; margin-bottom: 1rem;
  font-family: var(--font-mono); font-size: .68rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--faint);
}
.page-hero__crumb a { color: inherit; }
.page-hero__crumb a:hover { color: var(--brand); }
.page-hero__crumb i { font-style: normal; color: var(--copper); }
.page-hero .lead { margin-top: 1.35rem; }
.page-hero__aside { min-width: 0; }
@media (max-width: 960px) {
  .page-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .page-hero__aside { max-width: 520px; width: 100%; justify-self: center; }
}

/* ---------- clay: the pillow-panel primitive ----------
   The frontpage objects share one recipe; subpage components ride it. */
.clay {
  border-radius: 24px;
  background: linear-gradient(155deg, #ffffff, #f0f4f8);
  border: 1px solid rgba(34, 84, 121, .07);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .95),
    inset 6px 8px 14px rgba(255, 255, 255, .72),
    inset -9px -11px 20px rgba(34, 84, 121, .08),
    0 3px 7px rgba(22, 33, 43, .05),
    0 28px 52px -22px rgba(34, 84, 121, .30);
}
.clay--dip { background: linear-gradient(155deg, #eaf1f7, #d9e6f0); }

/* ---------- the pipeline console (security pipeline, run logs) ----------
   A mono ledger dressed as the product's own console: stages with their
   drafted indices, what each one checks, and the cadence it runs on. */
.pipe { overflow: hidden; }
.pipe__head {
  display: flex; align-items: center; gap: .7rem;
  padding: .95rem 1.35rem .8rem;
  border-bottom: 1px solid rgba(34, 84, 121, .1);
}
.pipe__head b {
  font-family: var(--font-mono); font-size: .7rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink);
}
.pipe__head .mono { margin-left: auto; color: var(--faint); font-size: .62rem;
  letter-spacing: .12em; }
.pipe__on { width: 7px; height: 7px; border-radius: 99px; flex: none;
  background: #45d17d; box-shadow: 0 0 0 2px rgba(69, 209, 125, .22); }
.pipe__stage {
  display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) auto;
  gap: .18rem 1rem; align-items: baseline;
  padding: .78rem 1.35rem .82rem;
}
.pipe__stage + .pipe__stage { border-top: 1px solid rgba(34, 84, 121, .07); }
.pipe__stage > .mono:first-child { grid-row: 1 / span 2; grid-column: 1;
  color: var(--copper); font-size: .66rem; }
.pipe__stage b { grid-column: 2; grid-row: 1; font-size: .92rem;
  font-weight: 600; letter-spacing: -.008em; }
/* the detail line is the only classless span in a stage - the .mono index
   and the .pipe__when tag must keep their own grid homes */
.pipe__stage > span:not([class]) { grid-column: 2 / -1; grid-row: 2;
  font-size: .86rem; color: var(--muted); line-height: 1.55; }
.pipe__when { grid-column: 3; grid-row: 1; align-self: center;
  font-family: var(--font-mono); font-size: .6rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--faint); white-space: nowrap; }

/* ---------- the certification track (ISO 27001 / SOC 2) ----------
   Four stations on one rail. Done stations are solid steel, the current
   one carries a copper ring, later ones stay drafted. */
.cert-track { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.2rem 1rem; position: relative; counter-reset: station; }
.cert-track::before {
  content: ""; position: absolute; left: 2%; right: 2%; top: 7px; height: 1px;
  background: var(--line-strong);
}
.cert-stop { position: relative; padding-top: 1.5rem; }
.cert-stop::before {
  content: ""; position: absolute; left: 0; top: 0;
  width: 15px; height: 15px; border-radius: 99px;
  background: var(--bg); border: 1.5px solid var(--line-strong);
}
.cert-stop.is-done::before { background: var(--brand); border-color: var(--brand); }
.cert-stop.is-now::before {
  background: #fff; border-color: var(--copper);
  box-shadow: 0 0 0 4px var(--copper-wash-2);
}
.cert-stop .mono { display: block; font-size: .6rem; letter-spacing: .14em;
  color: var(--faint); text-transform: uppercase; margin-bottom: .3rem; }
.cert-stop.is-done .mono { color: var(--brand); }
.cert-stop.is-now .mono { color: var(--copper); }
.cert-stop b { display: block; font-size: .95rem; font-weight: 600;
  letter-spacing: -.008em; margin-bottom: .3rem; }
.cert-stop p { font-size: .86rem; color: var(--muted); line-height: 1.55; max-width: 17em; }
@media (max-width: 860px) {
  .cert-track { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
  .cert-track::before { left: 7px; right: auto; top: 2%; bottom: 2%; width: 1px; height: auto; }
  .cert-stop { padding-top: 0; padding-left: 2rem; }
}

/* ---------- request slips ----------
   "Request to see" as the document itself: a paper slip on the desk -
   near-white, hairline edge, one folded corner - with the button that
   files the request from your account. Flatter than the clay objects on
   purpose: paper among clay. */
.req-plaque {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem 2rem; align-items: center;
  border-radius: 4px 18px 12px 12px;
  background: linear-gradient(165deg, #ffffff 60%, #f6f9fb);
  border: 1px solid var(--line);
  box-shadow:
    0 1px 2px rgba(22, 33, 43, .04),
    0 14px 26px -18px rgba(34, 84, 121, .30);
  padding: 1.25rem 1.5rem 1.2rem;
}
/* the folded corner: the sheet turned back at top-right */
.req-plaque::before {
  content: ""; position: absolute; top: 0; right: 0;
  width: 26px; height: 26px;
  background: linear-gradient(225deg, transparent 48%, #dde6ed 50%, #eef3f7 100%);
  border-left: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-bottom-left-radius: 8px;
  box-shadow: -2px 2px 4px -2px rgba(34, 84, 121, .25);
}
.req-plaque__meta { display: flex; align-items: center; gap: .7rem; margin-bottom: .45rem; }
.req-plaque__kind { font-family: var(--font-mono); font-size: .62rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--copper); }
.req-plaque b { display: block; font-size: 1.02rem; font-weight: 600; letter-spacing: -.01em; }
.req-plaque p { font-size: .88rem; color: var(--muted); line-height: 1.55;
  max-width: 44em; margin-top: .3rem; }
.req-plaque__act { display: grid; justify-items: start; gap: .45rem; }
.req-plaque__act .form-note { margin: 0; font-size: .76rem; max-width: 15rem; }
@media (max-width: 720px) {
  .req-plaque { grid-template-columns: minmax(0, 1fr); }
  .req-plaque__act { justify-items: start; }
}

/* ---------- the seals (compliance hub frameworks) ----------
   Status as form: a framework that is HELD is a pressed clay seal; one in
   preparation is the same seal still on the drafting table - a dashed
   blueprint outline with registration ticks, not yet stamped. */
.seal-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 1.8rem); }
.seal { display: grid; justify-items: center; gap: .9rem; text-align: center;
  padding-block: .4rem; }
.seal__disc {
  position: relative; width: min(138px, 34vw); aspect-ratio: 1;
  border-radius: 50%;
  display: grid; place-content: center; gap: .3rem;
  background: linear-gradient(150deg, #fdfeff, #e9eff5);
  border: 1px solid rgba(34, 84, 121, .12);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .95),
    inset 4px 6px 10px rgba(255, 255, 255, .65),
    inset -7px -9px 16px rgba(34, 84, 121, .12),
    0 3px 7px rgba(22, 33, 43, .05),
    0 20px 36px -18px rgba(34, 84, 121, .35);
  transition: transform .22s ease;
}
.seal:hover .seal__disc { transform: translateY(-3px) rotate(-1.5deg); }
/* the pressed ring - an embossed groove inside the rim */
.seal__disc::before {
  content: ""; position: absolute; inset: 11px; border-radius: 50%;
  border: 1.5px solid rgba(34, 84, 121, .22);
  box-shadow: inset 0 1.5px 3px rgba(34, 84, 121, .14),
              0 1px 0 rgba(255, 255, 255, .85);
  pointer-events: none;
}
.seal__disc b { font-size: .98rem; font-weight: 700; letter-spacing: -.01em;
  color: var(--brand); line-height: 1.15; }
.seal__disc .mono { font-size: .5rem; letter-spacing: .16em; color: var(--muted); }
/* not yet held: the same disc as a drafted outline - nothing pressed */
.seal__disc--drafted {
  background: transparent;
  border: 1.5px dashed var(--line-strong);
  box-shadow: none;
}
.seal__disc--drafted::before {
  border: 1px dashed rgba(34, 84, 121, .28); box-shadow: none;
}
/* registration ticks at the compass points - the mark awaiting its stamp */
.seal__disc--drafted::after {
  content: ""; position: absolute; inset: -7px; border-radius: 50%;
  background:
    linear-gradient(var(--grid-cross) 0 0) top center    / 1px 9px no-repeat,
    linear-gradient(var(--grid-cross) 0 0) bottom center / 1px 9px no-repeat,
    linear-gradient(var(--grid-cross) 0 0) center left   / 9px 1px no-repeat,
    linear-gradient(var(--grid-cross) 0 0) center right  / 9px 1px no-repeat;
  pointer-events: none;
}
.seal__disc--drafted b { color: var(--muted); }
.seal__disc--drafted .mono { color: var(--copper); }
.seal__fact { font-size: .82rem; color: var(--muted); line-height: 1.5;
  max-width: 15rem; }
.seal .link-more { font-size: .84rem; opacity: 0; translate: 0 -3px;
  transition: opacity .22s ease, translate .22s ease; }
.seal:hover .link-more, .seal:focus-visible .link-more { opacity: 1; translate: 0 0; }
@media (max-width: 860px) {
  .seal-row { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2rem; }
  .seal .link-more { opacity: 1; translate: 0 0; }
}

/* ---------- record card (structured data, rendered) ----------
   A database row the way the assistant re-tells it: a dated record with
   its rollups computed, not estimated. */
.record { padding: 1.15rem 1.3rem 1.2rem; }
.record__head { display: flex; align-items: baseline; gap: .7rem; margin-bottom: .7rem; }
.record__head b { font-size: .95rem; font-weight: 650; letter-spacing: -.01em; }
.record__head .mono { color: var(--faint); font-size: .6rem; letter-spacing: .14em; }
.record__head .mono:last-child { margin-left: auto; color: var(--copper); }
.record dl { display: grid; gap: 0; border-top: 1px solid rgba(34, 84, 121, .08); }
.record dl > div { display: grid; grid-template-columns: minmax(7rem, 9rem) minmax(0, 1fr);
  gap: 1rem; padding: .5rem 0; border-bottom: 1px solid rgba(34, 84, 121, .08); }
.record dt { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint); padding-top: .2em; }
.record dd { font-size: .88rem; color: var(--ink); }
.record dd em { font-style: normal; color: var(--copper); font-variant-numeric: tabular-nums; }

/* ---------- fact tiles: three quiet claims in a band ---------- */
.fact-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.9rem, 2vw, 1.3rem); }
.fact-tiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fact-tiles--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1080px) { .fact-tiles--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fact-tile { padding: 1.15rem 1.25rem 1.1rem; border-radius: 18px; }
.fact-tile .mono { display: block; font-size: .6rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--copper); margin-bottom: .5rem; }
.fact-tile b { display: block; font-size: 1rem; font-weight: 600; letter-spacing: -.01em;
  margin-bottom: .3rem; }
.fact-tile p { font-size: .86rem; color: var(--muted); line-height: 1.55; }
@media (max-width: 860px) { .fact-tiles { grid-template-columns: minmax(0, 1fr); } }

/* ---------- mini clay chip: a brand mark on its own small tile ---------- */
.mchip {
  flex: none; width: 32px; height: 32px; border-radius: 9px;
  display: grid; place-items: center;
  background: linear-gradient(150deg, #ffffff, #eef3f7);
  border: 1px solid rgba(34, 84, 121, .09);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, .9),
    inset -2px -3px 6px rgba(34, 84, 121, .08),
    0 2px 5px rgba(22, 33, 43, .08);
}
.mchip img, .mchip svg { width: 18px; height: 18px; object-fit: contain; }

/* ---------- the sync ledger (data-sources hero) ----------
   The deployment's own operations board: each source a row, each row a
   sweep - listing, diffing, fetching, indexed - with removals pruned.
   pages.js walks the board; without motion the states stand staggered. */
.syncboard { overflow: hidden; max-width: 560px; margin-inline: auto; }
.syncboard .pipe__head b { letter-spacing: .14em; }
.syncrow {
  display: grid; grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: .2rem .85rem; align-items: center;
  padding: .62rem 1.35rem .66rem;
}
.syncrow + .syncrow { border-top: 1px solid rgba(34, 84, 121, .07); }
.syncrow__chip { grid-row: 1 / span 2; }
.syncrow b { font-size: .86rem; font-weight: 600; letter-spacing: -.008em; }
.syncrow__state { font-family: var(--font-mono); font-size: .56rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--faint);
  white-space: nowrap; transition: color .25s ease; }
.syncrow.is-live .syncrow__state { color: var(--copper); }
.syncrow.is-done .syncrow__state { color: var(--brand); }
.syncrow__track { grid-column: 2 / -1; height: 3px; border-radius: 99px;
  background: rgba(34, 84, 121, .08); overflow: hidden; }
.syncrow__fill { display: block; height: 100%; width: var(--p, 0%);
  border-radius: 99px; background: var(--brand);
  transition: width .7s cubic-bezier(.3, .7, .3, 1), opacity .4s ease; }
.syncrow.is-done .syncrow__fill { opacity: .35; }
.syncboard__foot {
  display: flex; align-items: baseline; gap: .6rem;
  padding: .8rem 1.35rem .9rem;
  border-top: 1px solid rgba(34, 84, 121, .1);
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}
.syncboard__foot b { font-size: .88rem; letter-spacing: .02em; color: var(--ink);
  font-variant-numeric: tabular-nums; font-weight: 650; }
.syncboard__foot .ingest__tick { position: static; }

/* ---------- the resolved question (context hero) ----------
   A vague sentence under the assistant's annotation marks: each lifted
   word resolves below to an entity, a clause, a computed date - the
   citation idiom turned inward, scholarly apparatus as product truth. */
.resolve { padding: 1.4rem 1.5rem 1.35rem; max-width: 560px; margin-inline: auto; }
.resolve__label { display: flex; align-items: center; gap: .55rem;
  font-family: var(--font-mono); font-size: .62rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 1rem; }
.resolve__label i { width: 7px; height: 7px; border-radius: 99px; flex: none;
  font-style: normal; background: #45d17d;
  box-shadow: 0 0 0 2px rgba(69, 209, 125, .22); }
.resolve__q { font-size: clamp(1.15rem, 2vw, 1.3rem); font-weight: 600;
  letter-spacing: -.014em; line-height: 1.6; color: var(--ink); }
/* the annotated words stay plain text - only a small copper letter floats
   beside each one, the way a margin note marks a phrase */
.resolve__w { white-space: nowrap; }
.resolve__w sup {
  font-family: var(--font-mono); font-size: .52em; font-weight: 700;
  color: var(--copper); margin-left: .12em; vertical-align: .85em;
  letter-spacing: 0;
}
.resolve__rows { margin-top: 1.15rem; border-top: 1px solid rgba(34, 84, 121, .1); }
.resolve__row {
  display: grid; grid-template-columns: 1.5rem minmax(0, 1fr);
  gap: .15rem .7rem; align-items: baseline;
  padding: .62rem 0;
  border-bottom: 1px solid rgba(34, 84, 121, .07);
}
.resolve__row > i {
  font-style: normal; font-family: var(--font-mono); font-size: .56rem;
  font-weight: 700; color: #fff; background: var(--copper);
  border-radius: 99px; width: 1.15rem; height: 1.15rem;
  display: inline-grid; place-items: center; align-self: start; margin-top: .15rem;
}
.resolve__row b { font-size: .88rem; font-weight: 650; letter-spacing: -.008em; }
.resolve__row b em { font-style: normal; color: var(--muted); font-weight: 500; }
.resolve__row span { grid-column: 2; font-size: .8rem; color: var(--muted);
  line-height: 1.5; }
.resolve__row span .mono { font-size: .6rem; color: var(--faint);
  letter-spacing: .08em; }
.resolve__verdict {
  margin-top: 1rem; display: flex; align-items: center; gap: .6rem;
  font-size: .84rem; font-weight: 560; color: var(--ink);
}
.resolve__verdict .cchip { padding-block: .22rem; }
.resolve__or::before { content: "\B7\A0"; color: var(--muted); }
@media (max-width: 720px) {
  /* the chips keep their row; the "or" clause takes its own line */
  .resolve__verdict { flex-wrap: wrap; row-gap: .3rem; }
  .resolve__or { flex: 1 1 100%; }
  .resolve__or::before { content: ""; }
}

/* ---------- the patch bay (messaging hero) ----------
   One core wired to six doorways. The cables are drawn - registration-
   drawing language - and the assistant is mid-delivery on all of them:
   copper beads leave the core and travel OUT to every platform. Each wire
   is two strokes: the steel cable, and a copper bead overlay riding it.
   Paths are drawn port-to-core, so the outward run plays the dash pattern
   backwards; static (reduced-motion) keeps the beads frozen mid-wire at
   staggered heights - answers en route even when nothing moves. */
.patchbay { padding: 1.3rem 1.2rem 1.25rem; max-width: 560px; margin-inline: auto; }
.patchbay__ports { position: relative; z-index: 1;
  display: flex; justify-content: space-between; padding-inline: 4.7%; }
.patchbay__ports .mchip { width: 38px; height: 38px; border-radius: 11px; }
.patchbay__ports .mchip img { width: 21px; height: 21px; }
.patchbay__wires { display: block; width: 100%; height: 128px; margin-top: -2px; }
.patchbay__wires path { fill: none; stroke: rgba(34, 84, 121, .22);
  stroke-width: 1.5; }
.patchbay__wires path.pb-bead {
  stroke: var(--copper); stroke-width: 2;
  /* pathLength=100 on the overlay paths: one 7-unit bead per wire,
     whatever the real cable length */
  stroke-dasharray: 7 93; stroke-linecap: round;
}
/* frozen positions (no-motion truth): beads at different points of the run */
.patchbay__wires path.pb-bead:nth-of-type(2)  { stroke-dashoffset: -15; }
.patchbay__wires path.pb-bead:nth-of-type(4)  { stroke-dashoffset: -48; }
.patchbay__wires path.pb-bead:nth-of-type(6)  { stroke-dashoffset: -76; }
.patchbay__wires path.pb-bead:nth-of-type(8)  { stroke-dashoffset: -30; }
.patchbay__wires path.pb-bead:nth-of-type(10) { stroke-dashoffset: -62; }
.patchbay__wires path.pb-bead:nth-of-type(12) { stroke-dashoffset: -22; }
html.fx .patchbay__wires path.pb-bead {
  animation: pb-out 2.9s linear infinite;
}
/* dashoffset rising = the dash walks AGAINST the path direction: core -> port */
@keyframes pb-out { from { stroke-dashoffset: -100; } to { stroke-dashoffset: 7; } }
html.fx .patchbay__wires path.pb-bead:nth-of-type(2)  { animation-delay: -2.35s; }
html.fx .patchbay__wires path.pb-bead:nth-of-type(4)  { animation-delay: -1.20s; }
html.fx .patchbay__wires path.pb-bead:nth-of-type(6)  { animation-delay: -1.90s; }
html.fx .patchbay__wires path.pb-bead:nth-of-type(8)  { animation-delay: -0.50s; }
html.fx .patchbay__wires path.pb-bead:nth-of-type(10) { animation-delay: -1.55s; }
html.fx .patchbay__wires path.pb-bead:nth-of-type(12) { animation-delay: -0.85s; }
.patchbay__core { display: grid; justify-items: center; gap: .45rem;
  margin-top: -6px; }
.patchbay__disc {
  width: 74px; height: 74px; border-radius: 99px;
  display: grid; place-items: center;
  background: linear-gradient(150deg, #ffffff, #e9f0f6);
  border: 1px solid rgba(34, 84, 121, .12);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .95),
    inset -5px -6px 12px rgba(34, 84, 121, .1),
    0 3px 7px rgba(22, 33, 43, .06),
    0 18px 32px -14px rgba(34, 84, 121, .4);
}
.patchbay__disc img { width: 34px; height: 34px; }
.patchbay__core b { font-size: .88rem; font-weight: 650; letter-spacing: -.01em; }
.patchbay__strip {
  margin-top: 1.05rem; padding-top: .85rem;
  border-top: 1px solid rgba(34, 84, 121, .1);
  display: flex; justify-content: center; gap: .5rem 1.1rem; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: .56rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); text-align: center;
}
.patchbay__strip i { font-style: normal; color: var(--copper); }

/* ---------- the access matrix (permissions hero) ----------
   Documents by people: a filled bead may read, a drafted ring may not,
   a copper pin marks the per-file override. The admin's real map. */
.aclmap { padding: 1.35rem 1.5rem 1.2rem; max-width: 560px; margin-inline: auto;
  position: relative; overflow: hidden; }
.aclmap::before { /* faint drafting grid behind the matrix */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(var(--grid-fine) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-fine) 1px, transparent 1px);
  background-size: 20px 20px; opacity: .5;
  -webkit-mask-image: radial-gradient(120% 100% at 80% 0%, #000 30%, transparent 90%);
          mask-image: radial-gradient(120% 100% at 80% 0%, #000 30%, transparent 90%);
}
.aclmap > * { position: relative; }
.aclmap__grid { display: grid; grid-template-columns: minmax(0, 1fr) 56px 56px;
  align-items: center; }
.aclmap__grid > * { padding: .55rem 0; border-bottom: 1px solid rgba(34, 84, 121, .08); }
.aclmap__grid > .aclmap__doc:nth-last-child(3),
.aclmap__grid > .aclmap__doc:nth-last-child(3) ~ * { border-bottom: 0; }
.aclmap__who { justify-self: center; display: grid; justify-items: center; gap: .3rem;
  padding-bottom: .7rem; }
.aclmap__badge { width: 34px; height: 34px; border-radius: 11px;
  display: grid; place-items: center; color: #fff;
  font-size: .72rem; font-weight: 700; letter-spacing: .02em;
  background: var(--pc, var(--brand));
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .35),
    0 3px 7px -2px rgba(22, 33, 43, .3); }
.aclmap__who .mono { font-size: .52rem; letter-spacing: .12em; color: var(--faint); }
.aclmap__doc { min-width: 0; padding-right: 1rem; }
.aclmap__doc .mono { display: block; font-size: .58rem; letter-spacing: .06em;
  color: var(--faint); }
.aclmap__doc b { font-size: .86rem; font-weight: 600; letter-spacing: -.008em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.acl-dot { justify-self: center; width: 15px; height: 15px; border-radius: 99px;
  background: radial-gradient(circle at 32% 30%, #4d7ba3, var(--brand) 68%);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .45),
    0 2px 4px -1px rgba(34, 84, 121, .5); }
.acl-dot--no { background: none; box-shadow: none;
  border: 1.5px dashed var(--line-strong); }
.acl-dot--pin { position: relative;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .45),
    0 2px 4px -1px rgba(34, 84, 121, .5), 0 0 0 3px var(--copper-wash-2); }
.acl-dot--pin::after { content: ""; position: absolute; right: -4px; top: -4px;
  width: 8px; height: 8px; border-radius: 99px; background: var(--copper);
  border: 1.5px solid #fff; }
.aclmap__foot { margin-top: .9rem; padding-top: .8rem;
  border-top: 1px solid rgba(34, 84, 121, .1);
  font-family: var(--font-mono); font-size: .56rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); text-align: center; }
.aclmap__foot i { font-style: normal; color: var(--copper); }

/* ---------- the audit chain (compliance hero) ----------
   The log as an object: ledger tablets whose hashes interlock - each
   block carries the fingerprint of the one before, and the last block
   is the verification that walks the whole chain. */
.chainrow { display: grid; gap: 0; max-width: 480px; margin-inline: auto; }
.chainblock {
  border-radius: 14px;
  background: linear-gradient(150deg, #ffffff, #f0f4f8);
  border: 1px solid rgba(34, 84, 121, .09);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, .9),
    inset -4px -5px 10px rgba(34, 84, 121, .05),
    0 2px 5px rgba(22, 33, 43, .05),
    0 16px 30px -16px rgba(34, 84, 121, .3);
  padding: .78rem 1.05rem .7rem;
}
.chainblock__top { display: flex; align-items: baseline; gap: .7rem; }
.chainblock__top b { font-family: var(--font-mono); font-size: .62rem;
  font-weight: 700; letter-spacing: .14em; color: var(--brand); }
.chainblock__top .mono { margin-left: auto; font-size: .56rem;
  letter-spacing: .08em; color: var(--faint); }
.chainblock p { font-size: .84rem; color: var(--ink); line-height: 1.45;
  margin-top: .2rem; }
.chainblock__hash { display: flex; gap: 1rem; margin-top: .4rem;
  font-family: var(--font-mono); font-size: .56rem; letter-spacing: .05em;
  color: var(--faint); }
.chainblock__hash b { font-weight: 600; color: var(--copper); }
/* the interlock: two links joining block to block */
.chainlink { justify-self: center; position: relative; width: 22px; height: 26px; }
.chainlink::before, .chainlink::after {
  content: ""; position: absolute; left: 50%; translate: -50% 0;
  width: 9px; height: 15px; border-radius: 6px;
  border: 2px solid rgba(168, 94, 36, .75);
}
.chainlink::before { top: -2px; rotate: 14deg; }
.chainlink::after { bottom: -2px; rotate: -14deg;
  border-color: rgba(34, 84, 121, .45); }
.chainblock--verify {
  background:
    radial-gradient(120% 160% at 12% 0%, rgba(255, 255, 255, .14), transparent 46%),
    linear-gradient(155deg, #316a97 0%, #225479 52%, #17334a 100%);
  border-color: rgba(16, 42, 62, .55);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .16),
    inset -8px -9px 18px rgba(10, 24, 36, .3),
    0 20px 38px -16px rgba(22, 51, 74, .55);
}
.chainblock--verify .chainblock__top b { color: #e9b47e; }
.chainblock--verify .chainblock__top .mono,
.chainblock--verify .chainblock__hash { color: rgba(255, 255, 255, .55); }
.chainblock--verify p { color: rgba(255, 255, 255, .92); }
.chainblock--verify .chainblock__hash b { color: #7fd6a2; }

/* ---------- plotted facts ----------
   The spec-sheet <dl> is retired: facts sit as plotted points on a drafted
   rail - the registration grid's own cells, alternating steel / copper /
   stroked - each with its mono tag above the text. No full-width rules,
   more air, the brand's survey language instead of a table's. */
.plotfacts { position: relative; display: grid; gap: 1.1rem;
  padding-left: 1.75rem; align-content: start; }
.plotfacts::before {
  content: ""; position: absolute; left: 5px; top: .55rem; bottom: .55rem;
  width: 1px;
  background: linear-gradient(180deg, var(--line-strong), var(--line) 70%, transparent);
}
.plotfact { position: relative; }
.plotfact::before {
  content: ""; position: absolute; left: -1.75rem; top: .16em;
  width: 11px; height: 11px;
  background: rgba(34, 84, 121, .12);
  box-shadow: inset 0 0 0 1px rgba(34, 84, 121, .38);
}
.plotfact:nth-child(3n+2)::before {
  background: var(--copper-wash-2);
  box-shadow: inset 0 0 0 1px rgba(168, 94, 36, .45);
}
.plotfact:nth-child(3n)::before {
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(34, 84, 121, .30);
}
.plotfact b {
  display: block; font-family: var(--font-mono); font-size: .6rem;
  font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); margin-bottom: .24rem;
}
.plotfact p { margin: 0; font-size: .94rem; line-height: 1.6; color: var(--ink); }
.plotfact p a { color: var(--brand); }
/* breathing room when the facts follow running copy in the same column */
.sec-connect__copy .plotfacts, .prose + .plotfacts { margin-top: 1.7rem; }

/* ---------- the contact door: writing to us is an account action ---------- */
.signin-gate { padding: 1.7rem 1.8rem 1.6rem; border-radius: 20px; }
.signin-gate h2 { font-size: 1.4rem; letter-spacing: -.016em; margin: .65rem 0 .55rem; }
.signin-gate p { color: var(--muted); line-height: 1.66; font-size: .95rem; margin: 0; }

/* ---------- annotated facts (variant of the plotted rail) ----------
   The margin-note voice: each fact is an a/b/c annotation - a ringed
   copper letter, the term run-in bold, the detail following on the same
   line. The citation apparatus turned into a spec list; no rail, no
   boxes, just notes. */
.notefacts { display: grid; gap: 1rem; align-content: start;
  counter-reset: nf; }
.notefact { position: relative; padding-left: 2.1rem; counter-increment: nf; }
.notefact::before {
  content: counter(nf, lower-alpha); position: absolute; left: 0; top: .06em;
  width: 1.32rem; height: 1.32rem; border-radius: 99px;
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: .6rem; font-weight: 700;
  color: var(--copper); border: 1px solid rgba(168, 94, 36, .45);
  background: var(--copper-wash-2, rgba(208, 133, 66, .08));
}
.notefact b { font-size: .94rem; font-weight: 650; letter-spacing: -.008em;
  margin-right: .42em; }
.notefact p { display: inline; margin: 0; font-size: .93rem; line-height: 1.62;
  color: var(--muted); }
.notefact p a { color: var(--brand); }
.prose + .notefacts { margin-top: 1.7rem; }

/* ---------- fact tiles, compact (second variant) ----------
   Small clay tiles two abreast - the fact-tile idiom at spec-sheet scale.
   An odd last tile stretches the full row. */
.gridfacts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .7rem; align-content: start; }
.gridfact { border-radius: 14px; padding: .85rem .95rem .8rem;
  background: linear-gradient(160deg, #ffffff, #f0f4f8);
  border: 1px solid rgba(34, 84, 121, .08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    inset -4px -5px 10px rgba(34, 84, 121, .05),
    0 2px 5px rgba(22, 33, 43, .04),
    0 14px 26px -16px rgba(34, 84, 121, .25);
}
.gridfact:last-child:nth-child(odd) { grid-column: 1 / -1; }
.gridfact b { display: block; font-family: var(--font-mono); font-size: .58rem;
  font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  color: var(--muted); margin-bottom: .3rem; }
.gridfact p { margin: 0; font-size: .88rem; line-height: 1.55; color: var(--ink); }
.gridfact p a { color: var(--brand); }
.prose + .gridfacts { margin-top: 1.7rem; }
@media (max-width: 440px) {
  .gridfacts { grid-template-columns: minmax(0, 1fr); }
  .gridfact:last-child:nth-child(odd) { grid-column: auto; }
}

/* ============================================================
   About 2026-07-24 - the graphic half redrawn. Two voices, in
   turn: the DRAFTED SHEET (sharp plate, fine grid, registration
   crosses in the corners) for the company record and the boundary
   plan, and CLAY for the instrument and the drawer fronts.
   ============================================================ */

/* the drafted sheet face both plates share */
.draftsheet {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-plate);
  box-shadow: var(--plate-shadow);
  background-color: var(--bg);
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='11'%20height='11'%3E%3Cpath%20d='M5.5%201v9M1%205.5h9'%20stroke='%23225479'%20stroke-opacity='.45'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='11'%20height='11'%3E%3Cpath%20d='M5.5%201v9M1%205.5h9'%20stroke='%23225479'%20stroke-opacity='.45'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='11'%20height='11'%3E%3Cpath%20d='M5.5%201v9M1%205.5h9'%20stroke='%23225479'%20stroke-opacity='.45'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='11'%20height='11'%3E%3Cpath%20d='M5.5%201v9M1%205.5h9'%20stroke='%23225479'%20stroke-opacity='.45'/%3E%3C/svg%3E"),
    linear-gradient(rgba(34, 84, 121, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 84, 121, .05) 1px, transparent 1px);
  background-size: 11px 11px, 11px 11px, 11px 11px, 11px 11px, 20px 20px, 20px 20px;
  background-position: left 9px top 9px, right 9px top 9px,
    left 9px bottom 9px, right 9px bottom 9px, 0 0, 0 0;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat;
}

/* ---------- the company registration sheet (about hero) ---------- */
.regplate { padding: 1.25rem 1.4rem 1.05rem; }
.regplate__head { display: flex; align-items: baseline; gap: .7rem;
  margin-bottom: .75rem; padding-bottom: .6rem;
  border-bottom: 1px solid var(--line-strong); }
.regplate__head b { font-size: .98rem; font-weight: 700; letter-spacing: -.01em; }
.regplate__head .mono { color: var(--faint); font-size: .6rem; letter-spacing: .14em; }
.regplate__head .mono:last-child { margin-left: auto; color: var(--copper); }
.regplate dl { display: grid; }
.regplate dl > div { display: grid;
  grid-template-columns: minmax(6.5rem, 8.5rem) minmax(0, 1fr);
  gap: 1rem; padding: .52rem 0;
  border-bottom: 1px dotted var(--line-strong); }
.regplate dl > div:last-child { border-bottom: 0; }
.regplate dt { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint); padding-top: .2em; }
.regplate dd { font-size: .88rem; color: var(--ink); }
.regplate dd em { font-style: normal; color: var(--copper); font-variant-numeric: tabular-nums; }

/* ---------- the boundary plan (about - the position) ----------
   One deployment drawn as a plan view: the dashed client boundary, the
   white unit inside, the answer leaving on a straight line through the
   citation pair, the manifest sheet wired off the unit. The ringed
   letters are the SAME a b c d as the notes below - the notes are the
   plan's legend. Wordless; the text lives in the notes. */
/* title-adjacent section grids (founder, 07-24 r2): the copy column
   carries its own head, the graphic starts beside the h2 and ends with
   the paragraph block, so each section is one balanced composition */
.secgrid { align-items: stretch; }
.secgrid .section-head { margin-bottom: 1.5rem; }
.secgrid__copy { min-width: 0; }
.secgrid .solution__aside { align-content: space-between; }
.secgrid .gridfacts--plaques { align-content: space-between; }
.notefacts--grid { grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.05rem 2.8rem; margin-top: 2.1rem; }
@media (max-width: 700px) {
  .notefacts--grid { grid-template-columns: minmax(0, 1fr); }
}
.boundplan { position: relative; min-height: 300px; }
.boundplan__wall { position: absolute; inset: 9% 8%;
  border: 1.5px dashed rgba(34, 84, 121, .42); }
.boundplan__unit { position: absolute; left: 34%; top: 35%; width: 28%; height: 28%;
  display: grid; place-items: center;
  background: #fff; border: 1px solid rgba(34, 84, 121, .22); border-radius: 10px;
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .9),
    0 10px 22px -8px rgba(34, 84, 121, .4); }
.boundplan__ans { position: absolute; left: 62%; top: calc(49% - 1px);
  width: 28%; height: 2px; background: rgba(34, 84, 121, .5); }
.boundplan__cites { position: absolute; left: 92%; top: 49%;
  translate: -50% -50%; }
.boundplan__cites i { box-shadow: 0 0 0 3px #fff; }
.boundplan__sheet { position: absolute; left: 16%; top: 60%; width: 30px; height: 38px;
  background:
    repeating-linear-gradient(180deg, rgba(34, 84, 121, .3) 0 1px, transparent 1px 7px)
    content-box, #fff;
  padding: 8px 5px 6px;
  border: 1px solid rgba(34, 84, 121, .3);
  box-shadow: 2px 2.5px 0 rgba(34, 84, 121, .1); }
.boundplan__wire { position: absolute; left: calc(16% + 14px); top: 55%;
  width: calc(18% - 14px); height: 5.5%;
  border-left: 1px dotted rgba(34, 84, 121, .45);
  border-top: 1px dotted rgba(34, 84, 121, .45);
  border-top-left-radius: 5px; }
.bpin { position: absolute; translate: -50% -50%; z-index: 1;
  width: 1.32rem; height: 1.32rem; border-radius: 99px;
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: .6rem; font-weight: 700;
  font-style: normal; color: var(--copper);
  border: 1px solid rgba(168, 94, 36, .5);
  background:
    linear-gradient(rgba(208, 133, 66, .14), rgba(208, 133, 66, .14)), #fff;
  box-shadow: 0 2px 5px rgba(22, 33, 43, .14); }
.bpin--a { left: 62%; top: 35%; }
.bpin--b { left: 8%; top: 27%; }
.bpin--c { left: 76%; top: 49%; }
.bpin--d { left: calc(16% + 30px); top: 60%; }
/* the plan plots itself: the answer line draws, the pins stamp on */
html.fx .boundplan .boundplan__ans { scale: 0 1; transform-origin: 0 50%;
  transition: scale .55s cubic-bezier(.3, .7, .3, 1) .45s; }
html.fx .boundplan .boundplan__cites i { opacity: 0; scale: .3;
  transition: opacity .3s ease, scale .4s cubic-bezier(.34, 1.5, .44, 1); }
html.fx .boundplan .boundplan__cites i:nth-child(1) { transition-delay: .95s; }
html.fx .boundplan .boundplan__cites i:nth-child(2) { transition-delay: 1.07s; }
html.fx .boundplan .bpin { opacity: 0; scale: .45;
  transition: opacity .35s ease, scale .45s cubic-bezier(.34, 1.4, .44, 1); }
html.fx .boundplan .bpin--a { transition-delay: .5s; }
html.fx .boundplan .bpin--b { transition-delay: .66s; }
html.fx .boundplan .bpin--c { transition-delay: .82s; }
html.fx .boundplan .bpin--d { transition-delay: .98s; }
html.fx .in-view .boundplan .boundplan__ans { scale: 1 1; }
html.fx .in-view .boundplan .boundplan__cites i { opacity: 1; scale: 1; }
html.fx .in-view .boundplan .bpin { opacity: 1; scale: 1; }

/* ---------- solution aside: the instrument's readout ledger ----------
   The never-again facts drop their boxes: plotted-cell rows under the
   meter, ruled by dotted hairlines. */
.gridfacts--ledger { grid-template-columns: minmax(0, 1fr); gap: 0; }
.gridfacts--ledger .gridfact { border-radius: 0; background: none; border: 0;
  box-shadow: none; position: relative;
  padding: .8rem 0 .76rem 1.7rem;
  border-bottom: 1px dotted var(--line-strong); }
.gridfacts--ledger .gridfact:last-child { border-bottom: 0; }
.gridfacts--ledger .gridfact::before { content: ""; position: absolute;
  left: 2px; top: 1rem; width: 12px; height: 12px;
  background: rgba(208, 133, 66, .16);
  box-shadow: inset 0 0 0 1px rgba(168, 94, 36, .5); }
.gridfacts--ledger .gridfact b { font-family: var(--font-sans); font-size: .93rem;
  font-weight: 650; letter-spacing: -.008em; text-transform: none;
  color: var(--ink); margin-bottom: .16rem; }
.gridfacts--ledger .gridfact p { font-size: .88rem; color: var(--muted); }

/* ---------- operate: the four doors as drawer fronts ----------
   The compliance-drawer face carried over: clay plaques with a real
   extruded bottom edge. */
.gridfacts--plaques { gap: .9rem; }
.gridfacts--plaques .gridfact { border-radius: 12px;
  background: linear-gradient(160deg, #ffffff, #eef3f7);
  border: 1px solid rgba(34, 84, 121, .1);
  border-bottom: 6px solid #b5c4d1;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .95),
    inset 4px 6px 10px rgba(255, 255, 255, .6),
    inset -6px -8px 14px rgba(34, 84, 121, .06),
    inset 0 -1px 0 rgba(34, 84, 121, .16),
    0 16px 28px -14px rgba(34, 84, 121, .38);
  padding: .95rem 1.05rem .85rem; }

/* the way back out of a post: a real button, top right of the header */
.page-hero--post .page-hero__grid { position: relative; }
.post-backbtn { position: absolute; top: 0; right: 20px; z-index: 5; }
.post-backbtn span { color: var(--copper); }
@media (max-width: 700px) {
  .post-backbtn { position: static; justify-self: start;
    margin: 0 0 .4rem; order: -1; }
}

/* ---------- blog: the shelf ----------
   A real blog, in the site's grammar: cover images on hairline cards, tag
   chips, a search field. The newest post leads full-width; the rest sit
   in a two-column rack. */
.blog-tools { display: flex; flex-wrap: wrap; align-items: center;
  gap: .6rem 1rem; margin-bottom: clamp(1.6rem, 3.5vw, 2.4rem); }
.blog-search { position: relative; flex: 1 1 240px; max-width: 340px; }
.blog-search input {
  width: 100%; font: inherit; font-size: .92rem; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line-strong);
  border-radius: var(--r-ctl); padding: .5em .9em .5em 2.1em;
}
.blog-search input:focus { outline: 2px solid var(--brand); outline-offset: 1px;
  border-color: var(--brand); }
.blog-search svg { position: absolute; left: .7em; top: 50%; translate: 0 -50%;
  width: 15px; height: 15px; color: var(--faint); pointer-events: none; }
.blog-tools .chips { margin-bottom: 0; }
.blog-empty-note { display: none; }
.blog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.1rem, 2.5vw, 1.8rem); }
.bcard {
  grid-column: span 1; display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--r-panel);
  background: var(--bg); overflow: hidden;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.bcard:hover { border-color: var(--line-strong); transform: translateY(-2px);
  box-shadow: 0 14px 30px -18px rgba(34, 84, 121, .35); }
.bcard__cover { display: block; aspect-ratio: 16 / 9; overflow: hidden;
  border-bottom: 1px solid var(--line); background: var(--bg-tint); }
.bcard__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bcard__body { display: flex; flex-direction: column; gap: .55rem;
  padding: 1.15rem 1.3rem 1.2rem; flex: 1; }
.bcard__meta { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.bcard__meta .mono { font-size: .6rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--faint); }
.bcard__tags { display: flex; gap: .35rem; flex-wrap: wrap; }
.btag {
  font-family: var(--font-mono); font-size: .58rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--copper);
  background: var(--copper-wash); border-radius: 5px; padding: .3em .55em;
}
.bcard h2 { font-size: 1.22rem; letter-spacing: -.014em; line-height: 1.3; }
.bcard h2 a:hover { color: var(--brand); }
.bcard > .bcard__body > p { color: var(--muted); font-size: .92rem;
  line-height: 1.6; }
.bcard .link-more { margin-top: auto; padding-top: .5rem; }
/* the newest post leads: full row, cover beside the words */
.bcard--lead { grid-column: 1 / -1; display: grid;
  grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); }
.bcard--lead .bcard__cover { aspect-ratio: auto; height: 100%; min-height: 260px;
  border-bottom: 0; border-right: 1px solid var(--line); order: 2;
  border-left: 1px solid var(--line); border-right: 0; }
.bcard--lead .bcard__body { order: 1; padding: clamp(1.4rem, 3vw, 2.2rem);
  justify-content: center; gap: .7rem; }
.bcard--lead h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.bcard--lead > .bcard__body > p { font-size: 1rem; max-width: 34rem; }
@media (max-width: 860px) {
  .blog-grid { grid-template-columns: minmax(0, 1fr); }
  .bcard--lead { display: flex; flex-direction: column; }
  .bcard--lead .bcard__cover { order: 0; min-height: 0; aspect-ratio: 16 / 9;
    border-left: 0; border-bottom: 1px solid var(--line); }
}

/* ---------- blog: one post ---------- */
.post-cover { border-radius: 18px; overflow: hidden;
  border: 1px solid var(--line); background: var(--bg-tint);
  box-shadow: 0 24px 44px -26px rgba(34, 84, 121, .4); }
.post-cover img { width: 100%; height: auto; display: block; }
.post-meta { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  margin-top: 1.1rem; }
.post-meta .mono { font-size: .62rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--faint); }

/* the post body - long-form reading measure */
.post-body { max-width: 42em; font-size: 1.02rem; line-height: 1.75; }
.post-body p { margin: 0 0 1.1em; }
.post-body h2 { font-size: 1.45rem; letter-spacing: -.018em; margin: 2em 0 .6em; }
.post-body h2::before { content: ""; display: block; width: 40px; height: 3px;
  border-radius: 99px; margin-bottom: .75rem;
  background: linear-gradient(90deg, var(--copper) 0 60%, transparent 60% 70%,
    rgba(208, 133, 66, .38) 70% 100%); }
.post-body h3 { font-size: 1.12rem; margin: 1.6em 0 .45em; }
.post-body ul { margin: 0 0 1.1em; padding-left: 1.1em; list-style: none; }
.post-body li { position: relative; padding-left: .4em; margin-bottom: .35em; }
.post-body li::before { content: ""; position: absolute; left: -1.35em;
  top: .5em; width: 8px; height: 8px;
  background: var(--copper-wash-2);
  box-shadow: inset 0 0 0 1px rgba(168, 94, 36, .45); }
.post-body a { color: var(--brand); border-bottom: 1px solid var(--line-strong); }
.post-body a:hover { border-bottom-color: var(--brand); }
.post-body code { font-family: var(--font-mono); font-size: .85em;
  background: var(--bg-tint); border: 1px solid var(--line);
  border-radius: 5px; padding: .1em .35em; }
.post-body pre.code { margin: 0 0 1.2em; }
.post-body pre.code code { background: none; border: 0; padding: 0; }
/* figures: drafted illustrations on a plate */
.post-fig { margin: 1.8em 0; }
.post-fig img { width: 100%; height: auto; display: block;
  border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.post-fig figcaption { margin-top: .6rem; }
/* the in-text button: a link dressed as a control, for pointing at pages */
.post-btn {
  display: inline-flex; align-items: center; gap: .45em;
  font-size: .88rem; font-weight: 560; letter-spacing: -.006em;
  color: var(--brand); background: var(--bg);
  border: 1px solid var(--line-strong); border-radius: var(--r-ctl);
  padding: .5em 1em; margin: .15em .35em .15em 0;
  border-bottom-width: 2px; border-bottom-color: #c9d2da;
  transition: border-color .15s ease, background .15s ease,
              transform .12s ease;
}
.post-btn::after { content: "\2192"; font-size: .9em; }
.post-btn:hover { border-color: var(--brand); background: var(--brand-wash);
  transform: translateY(-1px); }
.post-body a.post-btn { border-bottom: 2px solid #c9d2da; }
.post-body a.post-btn:hover { border-color: var(--brand); }
/* the note block: a quiet clay aside with a copper mark */
.post-body blockquote {
  margin: 1.6em 0; padding: 1.05rem 1.3rem 1rem;
  background: linear-gradient(155deg, #fdfeff, #f0f4f8);
  border: 1px solid rgba(34, 84, 121, .09);
  border-radius: 14px;
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .9),
    0 10px 22px -16px rgba(34, 84, 121, .3);
}
.post-body blockquote::before { content: ""; display: block;
  width: 34px; height: 3px; border-radius: 99px; margin-bottom: .65rem;
  background: linear-gradient(90deg, var(--copper) 0 60%, transparent 60% 70%,
    rgba(208, 133, 66, .38) 70% 100%); }
.post-body blockquote p { margin: 0; font-size: .96rem; color: var(--ink); }
/* the section divider */
.post-rule { display: block; width: 54px; height: 4px; border-radius: 99px;
  margin: 2.2em 0;
  background: linear-gradient(90deg, var(--copper) 0 60%, transparent 60% 70%,
    rgba(208, 133, 66, .38) 70% 100%); }
/* more-from-the-blog strip under a post */
.post-more { margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.8rem; border-top: 1px solid var(--line); }
.post-more h2 { font-size: 1.15rem; letter-spacing: -.012em; margin-bottom: 1rem; }

/* ---------- the account door opens a menu ---------- */
.nav-group--account .nav-drop { left: auto; right: 0; transform: none; }
.nav-group--account .nav-drop__panel { min-width: 248px; }
@media (max-width: 860px) {
  /* on the compact header the icon is a plain door - no floating menu */
  .nav-group--account { width: auto; }
  .nav-group--account .nav-drop { display: none !important; }
}

/* subpage section variant: the tinted band keeps its patch under content */
.sec.section--tint { background: var(--bg-tint); }

/* ============================================================
   MOBILE 2026-07-20 - the phone gets its own chrome and its own
   section designs. Everything below is scoped to small screens;
   desktop is untouched. The grammar: the glass moves to a bottom
   bar (the typical four-door mobile menu), the top keeps only
   the wordmark, and the frontpage graphics become touchable
   card piles and folder tabs instead of spread-out grids.
   ============================================================ */

@media (max-width: 860px) {

  /* ---------- top: the wordmark, part of the page ----------
     No bar, no badge, no glass: the logo simply sits top left in the page
     flow and scrolls away with it, exactly like any other page element. */
  :root { --header-h: 0px; --header-off: 0px; }
  body { padding-top: 0; }
  .site-header {
    position: static; left: auto; right: auto; top: auto;
    border-radius: 0; background: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    box-shadow: none; transform: none; transition: none;
  }
  .site-header::before { display: none; }
  .site-header.is-away { transform: none; box-shadow: none; }
  .site-header.is-scrolled { background: none; box-shadow: none; }
  .site-header__in { height: auto; padding: 16px var(--gutter) 0; gap: 0; }
  .site-header .logo-link img { height: 30px; }
  .site-header__cta { display: none; }
  .site-nav { display: none !important; }
  html { scroll-padding-top: 16px; }
  /* the heroes rode up under the fixed pane; with the logo in flow they
     simply start where they are */
  .hero, .page-hero { margin-top: 0; }

  /* ---------- bottom: the glass menu ----------
     A fully rounded pill of ACTUAL GLASS. The middle is almost clear - a
     whisper of blur, the page readable straight through it. The EDGES do
     the optics: a 9px rim band samples its own much deeper blur, so what
     scrolls behind visibly smears and bends where the glass curves (the
     lens edge), under a lit 1.5px rim line. Centered with auto margins
     (no transform - it must center on every browser), and it rides away
     with downward scroll like the desktop pane. Four doors: Home,
     Pricing, the Live demo, Menu. */
  .mnav {
    position: fixed; z-index: 140;
    left: 13px; right: 13px; margin-inline: auto;
    max-width: 392px;
    bottom: max(12px, env(safe-area-inset-bottom, 0px));
    display: flex; align-items: stretch;
    height: 62px;
    border-radius: 999px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .32), rgba(255, 255, 255, .05) 46%,
        rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, .12)),
      linear-gradient(115deg, rgba(255, 255, 255, .18) 6%, rgba(255, 255, 255, 0) 38%,
        rgba(255, 255, 255, 0) 62%, rgba(255, 255, 255, .14) 94%),
      rgba(250, 253, 255, .07);
    -webkit-backdrop-filter: blur(3px) saturate(190%) brightness(1.04);
            backdrop-filter: blur(3px) saturate(190%) brightness(1.04);
    box-shadow:
      inset 0 1.5px 0 rgba(255, 255, 255, .9),
      inset 0 -1px 0 rgba(34, 84, 121, .16),
      0 4px 10px rgba(22, 33, 43, .06),
      0 22px 44px -16px rgba(22, 33, 43, .24);
    transform: translateY(0);
    transition: transform .42s cubic-bezier(.22, .61, .21, 1);
  }
  .mnav.is-away { transform: translateY(calc(100% + 22px)); }
  .mnav::before {
    /* the lens edge: only this rim band re-samples the backdrop with a
       deep blur, so the page distorts along the curve while the centre
       stays clear glass */
    content: ""; position: absolute; inset: 0; border-radius: inherit;
    padding: 9px; pointer-events: none;
    -webkit-backdrop-filter: blur(14px) saturate(210%) brightness(1.07);
            backdrop-filter: blur(14px) saturate(210%) brightness(1.07);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask-composite: exclude;
  }
  .mnav::after {
    /* the lit rim line riding the very edge */
    content: ""; position: absolute; inset: 0; border-radius: inherit;
    padding: 1.5px; pointer-events: none;
    background: linear-gradient(115deg,
      rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, .35) 26%,
      rgba(140, 175, 200, .6) 48%, rgba(255, 255, 255, .9) 72%,
      rgba(176, 200, 218, .5) 88%, rgba(255, 255, 255, .8) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask-composite: exclude;
  }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .mnav { background: rgba(252, 253, 254, .93); }
  }
  .mnav__btn {
    position: relative; z-index: 1;
    flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; padding-top: 1px;
    color: #3d4f60;
    border-radius: 999px;
    transition: color .15s ease, transform .12s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .mnav__btn:active { transform: scale(.93); }
  .mnav__btn.is-active, .mnav__btn.is-open { color: var(--brand); }
  .mnav__ico { width: 23px; height: 23px; }
  .mnav__ico svg { width: 100%; height: 100%; display: block; }
  .mnav__lbl {
    font-size: .6rem; font-weight: 600; letter-spacing: .04em; line-height: 1;
  }
  /* the demo door keeps its live dot */
  .mnav__btn--demo .mnav__dot { fill: #45d17d; }

  /* ---------- the small menu, sliding in from the left ---------- */
  .mnav-veil {
    position: fixed; inset: 0; z-index: 120;
    background: rgba(16, 26, 36, .26);
    opacity: 0; visibility: hidden;
    transition: opacity .26s ease, visibility 0s linear .26s;
  }
  .mnav-veil.is-on { opacity: 1; visibility: visible; transition-delay: 0s; }
  .mnav-sheet {
    position: fixed; z-index: 130;
    left: 13px;
    bottom: calc(max(12px, env(safe-area-inset-bottom, 0px)) + 74px);
    width: min(80vw, 330px);
    max-height: min(64dvh, 560px);
    overflow-y: auto; overscroll-behavior: contain;
    background:
      linear-gradient(115deg, rgba(255, 255, 255, .38) 0%, rgba(255, 255, 255, .05) 40%,
        rgba(255, 255, 255, .16) 100%),
      rgba(250, 253, 255, .40);
    -webkit-backdrop-filter: blur(22px) saturate(190%);
            backdrop-filter: blur(22px) saturate(190%);
    border-radius: 24px;
    box-shadow:
      inset 0 1.5px 0 rgba(255, 255, 255, .92),
      inset 0 -1px 0 rgba(34, 84, 121, .10),
      0 24px 56px -18px rgba(22, 33, 43, .32);
    padding: .9rem .55rem .7rem;
    transform: translateX(calc(-100% - 28px));
    visibility: hidden;
    transition: transform .34s cubic-bezier(.22, .61, .21, 1),
                visibility 0s linear .34s;
  }
  .mnav-sheet::before {
    /* the same lit glass edge as the pill */
    content: ""; position: absolute; inset: 0; border-radius: inherit;
    padding: 1.5px; pointer-events: none;
    background: linear-gradient(125deg,
      rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .30) 30%,
      rgba(140, 175, 200, .5) 55%, rgba(255, 255, 255, .8) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask-composite: exclude;
  }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .mnav-sheet { background: rgba(252, 253, 254, .96); }
  }
  .mnav-sheet.is-open { transform: translateX(0); visibility: visible; transition-delay: 0s; }
  .mnav-sheet__group {
    font-family: var(--font-mono); font-size: .62rem; font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase; color: var(--copper);
    padding: .55rem .75rem .3rem;
  }
  .mnav-sheet__item {
    display: grid; gap: .08rem;
    padding: .56rem .75rem; border-radius: var(--r-ctl);
  }
  .mnav-sheet__item b { font-size: .92rem; font-weight: 600; letter-spacing: -.008em; color: var(--ink); }
  .mnav-sheet__item em { font-style: normal; font-size: .76rem; color: var(--muted); line-height: 1.35; }
  .mnav-sheet__item:active { background: var(--brand-wash); }
  .mnav-sheet__item.is-active b { color: var(--brand); }
  html.mnav-locked, html.mnav-locked body { overflow: hidden; }

  /* content must be able to stop clear of the floating bar */
  .site-footer { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }

  /* ---------- concise: the phone reads tighter ---------- */
  :root {
    --fs-display: 2.12rem; --fs-h2: 1.54rem; --fs-h3: 1.12rem;
    --fs-lead: 1rem; --sect: 3rem;
  }
  .sec { padding-block: 2.9rem; }
  .section-head { margin-bottom: 1.6rem; }
  .head-rule { margin-bottom: .85rem; }
  .home-close { padding-block: 3.4rem; }

  /* ---------- hero: the words and the door ----------
     On the phone the stack tightens: sentence, lead, button, then the
     ask card full-width with a shorter pill row (the last pills tuck
     behind the dots). */
  .hero { padding-top: 2.1rem; padding-bottom: 2.3rem; }
  .hero__stackwrap { gap: 1.9rem; }
  .hero__copy { padding-block: 0; }
  .hero__cta { margin-top: 1.7rem; }
  .askstage { border-radius: 20px; padding: 1.15rem .55rem; }
  .askglass { border-radius: 18px; padding: .45rem; }
  .askcard { border-radius: 15px; --r-ctl: 15px; }
  .askcard__bar { padding: .95em 1em; }
  .askcard__pills { padding: .8em .8em .95em; gap: .4rem; }
  .askcard__pill { font-size: .78rem; padding: .36em .7em; }
  .askcard__pill img { width: 15px; height: 15px; }
  .askcard__pill:nth-child(n+6) { display: none; }
  .ingest__chip { width: 60px; height: 60px; border-radius: 17px; }
  .ingest__chip img { width: 27px; height: 27px; }
  .qa__a { padding: 0 1.1rem 1.1rem 1.1rem; }
  .bshelf { border-radius: 20px; padding: .7rem; }
  .site-footer::before { background-size: 160% auto; opacity: .12; }

  /* ---------- the registration splotches stay on the phone ----------
     Desktop parks them far past the stage edge, which on a 390px screen
     means invisible; the phone pulls each patch in so a real portion of
     it lives inside the viewport. */
  .hero__patch { width: min(88vw, 430px); }
  .hero__patch--tl { left: -20vw; top: -70px; }
  .hero__patch--br { right: -18vw; bottom: -50px; }
  .sec__patch { width: min(80vw, 400px); }
  .sec__patch--connect  { right: -18vw; top: -50px; }
  .sec__patch--context  { right: -20vw; top: -60px; }
  .sec__patch--person   { left: -22vw; top: 1.5%; }
  .sec__patch--anywhere { left: -20vw; bottom: -60px; }
  .sec__patch--secure   { right: -18vw; top: -40px; }
  .sec__patch--faq      { right: -22vw; top: -60px; }

  /* ---------- 02 + 03: the card piles ----------
     The three platform windows (and the two scoped answers) stack into a
     fanned pile - each card far enough out to recognise and tap, the top
     one straight. A tap (or the slow cycle) lifts the chosen card up out
     of the pile, then lays it back on top, straightened. JS gives the
     container its height and deals the pose classes; the choreography
     lives here, transform-only so it runs like glass. */
  .ctxchats.is-pile { display: block; position: relative; max-width: none; }
  .ctxchats.is-pile .ctxchat,
  .twochat__pair.is-pile .twochat__card {
    position: absolute; left: 50%; top: 0;
    width: min(300px, calc(100vw - 2 * var(--gutter) - 44px));
    margin: 0 !important;
    /* the scroll-rise props are pinned so the pile owns the motion; the
       transition is declared HERE (outranking the rise rule) so transform
       keeps tweening - a blanket `transition: none` was what made the
       shuffle look like three frames */
    opacity: 1; translate: 0 0;
    transition: transform .58s cubic-bezier(.3, .72, .24, 1);
    will-change: transform;
  }
  /* rest poses: the top card straight; the others fanned wide with a step
     of depth. Written with the card class so they outrank the desktop
     hover-lift even while touch keeps the tapped card in :hover. Each pose
     also names itself in --pp-from, so the promote arc below can start
     from wherever the card rests. */
  .ctxchats.is-pile { --pp-top: translate3d(-50%, 0, 0) rotate(0deg);
    --pp-apex: translate3d(-52%, -42%, 0) rotate(-6deg) scale(1.03); }
  .ctxchats.is-pile .ctxchat.pp-0 { z-index: 3; transform: translate3d(-50%, 0, 0) rotate(0deg); }
  .ctxchats.is-pile .ctxchat.pp-1 { z-index: 2; transform: translate3d(-36%, 7%, 0) rotate(4.6deg) scale(.965);
    --pp-from: translate3d(-36%, 7%, 0) rotate(4.6deg) scale(.965); }
  .ctxchats.is-pile .ctxchat.pp-2 { z-index: 1; transform: translate3d(-64%, 12.5%, 0) rotate(-5.2deg) scale(.935);
    --pp-from: translate3d(-64%, 12.5%, 0) rotate(-5.2deg) scale(.935); }
  .twochat__pair.is-pile { display: block; position: relative;
    --pp-top: translate3d(-60%, 0, 0) rotate(-1.8deg);
    --pp-apex: translate3d(-50%, -46%, 0) rotate(3deg) scale(1.03); }
  .twochat__pair.is-pile .twochat__card.pp-0 { z-index: 3; transform: translate3d(-60%, 0, 0) rotate(-1.8deg); }
  .twochat__pair.is-pile .twochat__card.pp-1 { z-index: 2; transform: translate3d(-40%, 8%, 0) rotate(4deg) scale(.965);
    --pp-from: translate3d(-40%, 8%, 0) rotate(4deg) scale(.965); }
  /* the promote: ONE continuous arc - out of the pile, up and aside, then
     laid down straight on top. The z rides IN the keyframes: on the way up
     the card stays behind the whole pile (drawn out of the stack), and only
     at the top of the swing does it take the front for the lay-down - never
     a teleport to the front at frame zero. No !important on z here, or the
     keyframed value would lose. */
  @keyframes pp-arc {
    0%    { transform: var(--pp-from, var(--pp-top)); z-index: 0; }
    46%   { transform: var(--pp-apex); z-index: 0; }
    46.1% { z-index: 4; }
    100%  { transform: var(--pp-top); z-index: 4; }
  }
  .is-pile .is-promote {
    animation: pp-arc .8s cubic-bezier(.33, .6, .28, 1) both;
  }
  @media (prefers-reduced-motion: reduce) {
    .is-pile .ctxchat, .is-pile .twochat__card { transition: none; }
    .is-pile .is-promote { animation: none; }
  }

  /* ---------- 05: secure, redrawn flat ----------
     No drawers on the phone: the vault is a compact dark card and the four
     plaques stand fully visible in a plain 2x2, each a straight door. */
  .secure__vault { border-radius: 20px; }
  .secure__diagram { min-height: 104px; }
  .secure__unit { padding: .75rem 1.05rem; }
  .secure__copy p { font-size: .93rem; }
  .secure__tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .7rem; row-gap: .7rem;
    padding-inline: 0; margin: .9rem 0 0;
  }
  .stab { height: auto; }
  .stab__box {
    transform: none; clip-path: none; transition: none;
    min-height: 0; border-radius: 14px; border-bottom-width: 4px;
  }
  .stab__fact { display: none; }
  .stab__foot {
    flex-direction: column; gap: .18rem; height: auto;
    padding: .68rem .5rem .6rem; border-top: 0; white-space: normal;
    text-align: center;
  }
  .stab__foot i { display: none; }

  /* ---------- FAQ heading breathes on a narrow column ---------- */
  .faq h2 { font-size: clamp(1.5rem, 6vw, 1.85rem); }

  /* ---------- contact: the door, the form and the facts, one centered
     column ---------- */
  .sec-contact .signin-gate,
  .sec-contact form,
  .sec-contact .gridfacts,
  .sec-contact .form-result {
    max-width: 27.5rem; margin-inline: auto;
  }
}

/* the bottom bar and its sheets exist only on the phone */
@media (min-width: 860.02px) {
  .mnav, .mnav-sheet, .mnav-veil { display: none; }
}

/* ---------- 01: the source folder (narrow screens) ----------
   Freshness / Setup / Records become one folder: three tabs overlapping a
   clay body, one open at a time, changing slowly on their own. home.js
   builds it from the hairline rows; without JS the rows simply stay. */
.foldtabs { display: none; }
@media (max-width: 720px) {
  .sec-connect .hair-rows { display: none; }
  .foldtabs { display: block; margin-top: 1.5rem; }
  .foldtabs__tabs { display: flex; align-items: flex-end; padding-left: 10px; }
  .foldtabs__tab {
    position: relative; z-index: 1;
    font-family: var(--font-mono); font-size: .66rem; font-weight: 600;
    letter-spacing: .09em; text-transform: uppercase; color: var(--muted);
    background: linear-gradient(180deg, #eef2f6, #e3eaf0);
    border: 1px solid rgba(34, 84, 121, .13); border-bottom: 0;
    border-radius: 11px 11px 0 0;
    padding: .52em .95em .62em;
    margin-right: -7px; margin-bottom: 0;
    transform: translateY(2px);
    transition: background .2s ease, color .2s ease, transform .2s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .foldtabs__tab.is-on {
    z-index: 3; color: var(--ink);
    background: linear-gradient(180deg, #ffffff, #f7fafc);
    transform: translateY(1px);
  }
  .foldtabs__body {
    position: relative; z-index: 2;
    min-height: 6.4em;
    border-radius: 0 14px 14px 14px;
    background: linear-gradient(155deg, #ffffff, #f0f4f8);
    border: 1px solid rgba(34, 84, 121, .13);
    box-shadow:
      inset 0 2px 0 rgba(255, 255, 255, .95),
      inset -7px -9px 16px rgba(34, 84, 121, .06),
      0 3px 7px rgba(22, 33, 43, .04),
      0 18px 34px -18px rgba(34, 84, 121, .3);
    padding: .95rem 1.1rem 1rem;
  }
  .foldtabs__body p { font-size: .93rem; line-height: 1.6; color: var(--ink); margin: 0; }
  html.fx .foldtabs__body p { animation: ft-in .3s ease both; }
  @keyframes ft-in { from { opacity: 0; translate: 0 7px; } to { opacity: 1; translate: 0 0; } }

  /* ---------- footer: ordered columns, the drafting pattern stays ---------- */
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.7rem 1.3rem; padding-block: 2.7rem 2.2rem; }
  .site-footer__brand { grid-column: 1 / -1; }
  .site-footer__brand p { font-size: .88rem; }
  .site-footer h4 { margin-bottom: .65rem; }
  .site-footer ul li + li { margin-top: .42rem; }
  .site-footer ul a { font-size: .92rem; }
  .site-footer__legal { flex-direction: column; align-items: center; gap: .3rem;
    text-align: center; }
}

/* ==================== the liquid glass material ==================== */
/* Direction 02 as a WORLD, not a coat of paint (founder, 2026-08-02: keep
   the graphics, everything around them changes). The page now lives the way
   the app does: one full-strength aurora fixed behind everything, content
   travelling over it in floating windows — clear glass where things are
   shown, paper where things are read — the chrome lensing the colour it
   floats on, the smoked-steel rail closing the page as the footer. The
   graphics themselves (the clay chat, the brand marks, the media frames and
   their registration grids) keep their own ground. This section sits last
   so it wins the source-order tie against everything it dresses. */

/* -- the aurora: colour pools at the edges, a white calm in the middle
   where the work sits. Fixed to the viewport — the page scrolls, this does
   not, and every glass pane lenses it. A breath of grain on top so the
   gradients read as atmosphere, not a render. -- */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(64% 54% at 8% 2%, var(--aur-steel), transparent 68%),
    radial-gradient(56% 50% at 94% 8%, var(--aur-sky), transparent 70%),
    radial-gradient(50% 46% at 90% 86%, var(--aur-copper), transparent 72%),
    radial-gradient(56% 52% at 4% 92%, var(--aur-violet), transparent 72%),
    radial-gradient(38% 34% at 36% 68%, var(--aur-teal), transparent 72%),
    linear-gradient(115deg, transparent 30%, rgba(127, 180, 216, .3) 46%,
                    rgba(186, 150, 214, .24) 58%, transparent 74%),
    linear-gradient(160deg, #eef4fa 0%, #e2ebf5 48%, #d3e2f0 100%);
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='220'%20height='220'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='.82'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23n)'%20opacity='.5'/%3E%3C/svg%3E");
  background-size: 220px 220px;
  opacity: .3; mix-blend-mode: overlay;
}

/* -- no windows (founder, 2026-08-04: the glass squares around every
   section are gone, site-wide). Content sits straight on the aurora the
   way the hero does; sections separate by breath and one low hairline.
   The GRAPHICS inside go glass instead — cards, chips, plaques. -- */
.sec, .section, .faq { border-top: 0; background: none; }
.section--tint { background: none; }
.section + .section { border-top: 0; }
.sec > .container, .sec > .container-wide,
.section > .container, .section > .container-wide,
.home-close > .container, .home-close > .container-wide,
.faq > .container { position: relative; z-index: 1; }
.sec + .sec, .sec + .faq, .faq + .home-close, .sec + .home-close,
.section + .section, .faq + .sec {
  border-top: 1px solid rgba(34, 84, 121, .12);
}

/* -- the floating chrome wears the floating-pane tier -- */
.site-header {
  background:
    linear-gradient(112deg, rgba(255, 255, 255, .30) 2%, rgba(255, 255, 255, 0) 30%),
    linear-gradient(180deg, var(--glass-strong), rgba(243, 247, 251, .38));
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
          backdrop-filter: blur(16px) saturate(1.4);
  box-shadow:
    inset 0 1px 0 var(--glass-edge),
    inset 0 -1px 0 rgba(34, 84, 121, .07),
    inset 1px 0 0 var(--glass-line),
    inset -1px 0 0 rgba(255, 255, 255, .30),
    0 2px 6px rgba(22, 33, 43, .04),
    0 14px 34px -14px rgba(22, 33, 43, .16);
}
.glass-refract .site-header {
  -webkit-backdrop-filter: blur(2px) url(#nx-dome) saturate(1.6);
          backdrop-filter: blur(2px) url(#nx-dome) saturate(1.6);
}
/* ...but NOT on a phone. The 860px block above already says "No bar, no badge,
   no glass: the logo simply sits top left in the page flow" and sets
   background/backdrop-filter/box-shadow to none — and then loses, because the
   floating-pane tier here declares the same selector later at the same
   specificity. The result was a glass bar across the top of every phone page,
   reading steel blue. Nobody caught it on /about or /pricing because those
   heroes are blue too and it blended; /data-sources opens peach and the seam
   was obvious. Undone here, after the tier that overrode it. */
@media (max-width: 860px) {
  .site-header,
  .glass-refract .site-header,
  .site-header.is-scrolled {
    background: none; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}
.nav-drop__panel {
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
          backdrop-filter: blur(16px) saturate(1.4);
  border-color: var(--glass-line);
  box-shadow: inset 0 1px 0 var(--glass-edge), 0 18px 44px rgba(22, 33, 43, .14);
}
.glass-refract .nav-drop__panel {
  -webkit-backdrop-filter: blur(3px) url(#nx-lens) saturate(1.6);
          backdrop-filter: blur(3px) url(#nx-lens) saturate(1.6);
}
.nav-account {
  background: var(--glass);
  border-color: var(--glass-line);
  box-shadow: inset 0 1px 0 var(--glass-edge);
}
.mnav, .mnav-sheet {
  background:
    linear-gradient(180deg, var(--glass-strong), rgba(243, 247, 251, .42));
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
          backdrop-filter: blur(16px) saturate(1.4);
}
.glass-refract .mnav-sheet {
  -webkit-backdrop-filter: blur(3px) url(#nx-lens) saturate(1.6);
          backdrop-filter: blur(3px) url(#nx-lens) saturate(1.6);
}
.glass-refract .mnav {
  -webkit-backdrop-filter: blur(2px) url(#nx-dome-m) saturate(1.6);
          backdrop-filter: blur(2px) url(#nx-dome-m) saturate(1.6);
}

/* -- plates and ledgers keep the drafted geometry (radius 0, the hard
   offset shadow); only the material turns to near-clear glass -- */
.plate, .ledger {
  background: rgba(255, 255, 255, .58);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.8);
          backdrop-filter: blur(var(--glass-blur)) saturate(1.8);
  box-shadow: inset 0 1px 0 var(--glass-edge), var(--plate-shadow);
}
.media-frame { box-shadow: inset 0 1px 0 var(--glass-edge); }

/* -- controls: the primary is the lit steel from the app — the one solid
   thing on any pane; the ghost is a glass control face -- */
.btn {
  background: linear-gradient(180deg, #2e6796 0%, #225479 55%, #1d4a6c 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 2px 8px rgba(16, 36, 58, .18);
  transition: background .15s ease, box-shadow .15s ease;
}
.btn:hover {
  background: linear-gradient(180deg, #285d89 0%, #1d4a6c 55%, #183f5d 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 3px 10px rgba(16, 36, 58, .22);
}
.btn--ghost {
  background: rgba(255, 255, 255, .55);
  border-color: var(--line-strong);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 1px 3px rgba(22, 33, 43, .05);
}
.btn--ghost:hover { background: rgba(255, 255, 255, .8); border-color: var(--faint); box-shadow: inset 0 1px 0 #fff, 0 2px 6px rgba(22, 33, 43, .07); }
.btn--google, .btn--danger { background-image: none; }
.btn--google { background: #fff; box-shadow: none; }
.btn--danger { background: #b3362a; box-shadow: none; }
.btn--danger:hover { background: #9a2d23; box-shadow: none; }

/* -- the footer is the rail: one tall pane of smoked-steel glass closing
   the page — a light bloom at the crown, a deeper foot, the aurora glowing
   through the tint (the app rail recipe, paia.css .chat-side) -- */
.site-footer {
  border-top: 0;
  background:
    radial-gradient(120% 50% at 50% -6%, rgba(159, 192, 216, .22), transparent 62%),
    radial-gradient(110% 34% at 50% 112%, rgba(3, 12, 22, .5), transparent 72%),
    linear-gradient(178deg, rgba(28, 55, 79, .88) 0%, rgba(18, 40, 60, .9) 52%, rgba(10, 26, 41, .94) 100%);
  -webkit-backdrop-filter: blur(4px) saturate(1.6);
          backdrop-filter: blur(4px) saturate(1.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10);
  color: rgba(217, 228, 238, .62);
}
.site-footer h4 { color: #eaf2f8; }
/* the light-world dressing — the slash sheets and the drafting-grid fade
   veil — reads as pale slabs on the smoked rail; the crown bloom and the
   aurora glowing through the tint are the decoration now */
.site-footer__slash { display: none; }
.site-footer::before { content: none; }
.site-footer a { color: rgba(217, 228, 238, .78); }
.site-footer a:hover { color: #fff; }
.site-footer ul a { color: rgba(217, 228, 238, .78); }
.site-footer ul a:hover { color: #fff; }
.site-footer__brand p { color: rgba(217, 228, 238, .62); }
.site-footer .logo-link img { filter: brightness(0) invert(1); opacity: .92; }
.site-footer__legal { color: rgba(215, 226, 235, .4); border-top-color: rgba(255, 255, 255, .09); }

/* ==================== the aurora seam: the travelling rim light ==================== */
/* The app glint, word for word: a slim comet of the aurora colours circling
   the border like light on the rim of held glass. One control wears it —
   Live demo. Full voice in the hero, soft in the chrome. A masked ring
   whose oversized conic simply rotates: plain transform, so it runs
   smoothly or not at all. */
.btn--demo { position: relative; }
.nx-seam {
  position: absolute; inset: -1.5px; border-radius: calc(var(--r-ctl) + 2.5px); padding: 3px;
  pointer-events: none; opacity: 1;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}
.nx-seam::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 150%; aspect-ratio: 1;
  transform: translate(-50%, -50%) rotate(0turn);
  background: conic-gradient(from 0deg,
    transparent 0deg 72deg,
    rgba(110, 176, 219, .32) 84deg,
    transparent 96deg,
    transparent 96deg 292deg,
    rgba(34, 84, 121, .62) 306deg,
    rgba(110, 176, 219, 1) 313deg 339deg,
    rgba(224, 241, 253, 1) 343deg,
    rgba(159, 192, 216, .95) 347deg,
    rgba(214, 128, 52, .85) 353deg,
    transparent 359deg);
  animation: nx-seam-turn 7s linear infinite;
}
.nx-seam.soft { padding: 1.75px; border-radius: calc(var(--r-ctl) + 1.5px); opacity: .72; }
.nx-seam.soft::before { animation-duration: 12s; }
@keyframes nx-seam-turn {
  to { transform: translate(-50%, -50%) rotate(1turn); }
}
@media (prefers-reduced-motion: reduce) { .nx-seam { display: none; } }

/* ============ the graphics go glass (founder, 2026-08-04) ============
   With the section windows gone, the material moves INTO the objects:
   the belt chips, the two answer cards, the vault, the plaques, the FAQ
   rail and the blog shelf all wear the glass themselves. */

/* -- the compliance badges under the hero chat: the real marks, raw on
   the aurora (house rule: no tile chrome around brand art) -- */
.hero__seals {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: 1.6rem 2rem; margin-top: clamp(.8rem, 2vw, 1.6rem);
  width: 100%; padding-inline: clamp(0rem, 2vw, 1.5rem);
}
@media (max-width: 900px) { .hero__seals { justify-content: center; } }
.hseal {
  display: grid; justify-items: center; gap: .4rem; flex: none;
  filter: drop-shadow(0 8px 14px rgba(16, 36, 58, .22));
  transition: transform .18s ease, filter .18s ease;
}
.hseal:hover {
  transform: translateY(-3px);
  filter: drop-shadow(0 12px 20px rgba(16, 36, 58, .3));
}
.hseal img { display: block; height: 74px; width: auto; }
/* the wordmark-shaped one (EU AI Act) sits lower and wider */
.hseal--wide img { height: 46px; }
.hseal__cap { font-size: .6rem; letter-spacing: .16em; color: var(--muted); }
@media (max-width: 640px) {
  .hero__seals { gap: 1.1rem 1.6rem; }
  .hseal img { height: 50px; }
  .hseal--wide img { height: 34px; }
  .hseal__cap { font-size: .5rem; }
}

/* -- the alternating rhythm: paper band / aurora / paper band, the whole
   way down. The paper bands are full-width veils with their own hairline
   edges; the aurora sections sit bare. hero(colour) → sources(paper) →
   context(aurora) → person(paper, colour stage inside) → anywhere(aurora)
   → secure(paper, dark vault pops) → faq(aurora) → blog(paper). -- */
.sec-connect, .sec-person, .sec-secure, .sec-blog {
  background: linear-gradient(180deg, rgba(252, 254, 255, .86), rgba(243, 248, 252, .72));
  border-block: 1px solid rgba(34, 84, 121, .1);
}

/* -- 01: the copy balances into two columns (prose left, the hairline
   facts right); the counter wears its live tick at its side; the belt
   runs the full viewport in two continuous lanes of fat glass tiles over
   a drifting ribbon of colour. Four repeats per lane in the markup keep
   the -50% loop longer than any viewport — the line never ends. -- */
.sec-connect__cols {
  display: grid; grid-template-columns: minmax(0, 10fr) minmax(0, 9fr);
  gap: clamp(1.6rem, 4vw, 4rem); align-items: start;
}
.sec-connect__cols .sec__more { margin-top: 1.1rem; }
.ingest {
  background: none; border: 0; box-shadow: none; border-radius: 0;
  width: 100vw; margin-left: calc(50% - 50vw);
  margin-top: clamp(1.8rem, 3.6vw, 3rem);
  padding: 0; overflow: visible;
}
.ingest__nrow { display: inline-flex; align-items: baseline; gap: .7rem; }
.ingest__tick { position: static; }
.ingest__belt {
  position: relative;
  margin-top: clamp(1.6rem, 3vw, 2.4rem); gap: 1.1rem;
  padding-block: clamp(1.4rem, 2.6vw, 2rem) clamp(1.6rem, 3vw, 2.2rem);
}
/* the ribbon of colour the tiles float over: a clean-edged band, hairline
   top and bottom. The art is an OVERSIZED layer (inset -14%) translated
   by --plx — with the offset clamped under 12% of the box in home.js, an
   edge can never enter the frame, however fast the scroll. */
.ingest__belt { border-block: 1px solid rgba(34, 84, 121, .16); overflow: clip; }
.ingest__belt::before {
  content: ""; position: absolute; inset: -14% 0; z-index: 0; pointer-events: none;
  background: url("../img/hero-flow.webp") center 42% / cover no-repeat;
  opacity: .55; filter: saturate(1.15);
  transform: translateY(var(--plx, 0px)); will-change: transform;
}
.ingest__lane { position: relative; z-index: 1; gap: 1.1rem; animation-duration: 80s; }
.ingest__lane--rev { animation-duration: 96s; }
.ingest__chip {
  width: 84px; height: 84px; border-radius: 22px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, .55) 46%, rgba(238, 246, 252, .38) 100%);
  border: 1px solid rgba(255, 255, 255, .85);
  box-shadow:
    inset 0 1.5px 0 #fff,
    inset 0 -14px 22px rgba(34, 84, 121, .12),
    0 18px 34px -16px rgba(16, 36, 58, .38);
  filter: none;
}
.ingest__chip img { width: 36px; height: 36px; transform: none; }
.sec-connect__copy { max-width: 46rem; }

/* -- 03: the whole exchange happens ON a stage of flowing glass — the
   same generated-art grammar as the hero, calmer water. The bubble and
   the two answers are true glass over it. -- */
.twochat__stage {
  position: relative; width: 100%; border-radius: 28px; overflow: clip;
  background: #cfd9ea;
  padding: clamp(1.7rem, 3.8vw, 3.1rem) clamp(1rem, 3vw, 2.6rem) clamp(2rem, 4.4vw, 3.4rem);
  display: grid; gap: clamp(1.2rem, 2.6vw, 1.8rem); justify-items: center;
  box-shadow:
    0 3px 10px rgba(22, 33, 43, .08),
    0 36px 72px -30px rgba(34, 84, 121, .45);
}
.twochat__stage::before {
  content: ""; position: absolute; inset: -14% 0; z-index: 0; pointer-events: none;
  background: url("../img/person-flow.webp") center / cover no-repeat;
  transform: translateY(var(--plx, 0px)); will-change: transform;
}
.twochat__stage > * { position: relative; z-index: 1; }
.twochat__bubbleq {
  background: rgba(255, 255, 255, .42);
  border: 1px solid rgba(255, 255, 255, .75);
  -webkit-backdrop-filter: blur(14px) saturate(1.6);
          backdrop-filter: blur(14px) saturate(1.6);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 18px 36px -16px rgba(16, 36, 58, .35);
}
.twochat__bubbleq::after {
  background: rgba(255, 255, 255, .6); box-shadow: none;
}
.twochat__card {
  background: rgba(255, 255, 255, .68);
  border: 1px solid rgba(255, 255, 255, .7);
  -webkit-backdrop-filter: blur(18px) saturate(1.7);
          backdrop-filter: blur(18px) saturate(1.7);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .85),
    0 26px 50px -22px rgba(16, 36, 58, .32);
}
.twochat__card .cchip {
  background: rgba(255, 255, 255, .72);
  border-color: rgba(255, 255, 255, .8);
}

/* -- 05: the vault is smoked glass; the plaques are frosted paper -- */
.secure__vault {
  background:
    radial-gradient(120% 160% at 10% 0%, rgba(255, 255, 255, .14), transparent 44%),
    linear-gradient(155deg, rgba(43, 86, 120, .84), rgba(16, 36, 54, .88));
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
          backdrop-filter: blur(16px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, .2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .24),
    0 30px 60px -24px rgba(16, 36, 58, .5);
}
.stab__box {
  background: linear-gradient(160deg, rgba(255, 255, 255, .86), rgba(240, 246, 251, .68));
  border-color: var(--glass-line);
  border-bottom-color: rgba(178, 198, 214, .8);
  box-shadow:
    inset 0 1px 0 var(--glass-edge),
    0 16px 30px -14px rgba(16, 36, 58, .3);
}

/* -- FAQ, rebuilt (founder: not a skin — the shape): a centered, weighted
   accordion. The head sits centre; every Q is a full-width glass row in
   one measured column; the answer unfolds inside its own row. The old
   rail/sticky-card grid is fully overridden here. -- */
.faq__grid {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(1.8rem, 4.5vw, 4.5rem); align-items: start;
}
.faq__intro { position: sticky; top: calc(var(--header-h) + var(--header-off) + 28px); }
.faq__intro h2 { max-width: 13em; }
.faq__intro p { margin-top: 1.1rem; color: var(--muted); line-height: 1.65; max-width: 24em; }
.faq__intro p a { color: var(--brand); font-weight: 560; white-space: nowrap; }
.qa { display: block; margin-top: .2rem; }
@media (max-width: 960px) {
  .faq__grid { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
  .faq__intro { position: static; }
}
.qa__unit {
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-rows: min-content 0fr;
  margin-bottom: .55rem;
  border-radius: 14px; overflow: clip;
  background: rgba(255, 255, 255, .5);
  border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: blur(10px) saturate(1.5);
          backdrop-filter: blur(10px) saturate(1.5);
  box-shadow:
    inset 0 1px 0 var(--glass-edge),
    0 14px 30px -20px rgba(16, 36, 58, .25);
  transition: background .18s ease, box-shadow .18s ease;
}
.qa__unit.is-open {
  background: rgba(255, 255, 255, .8);
  box-shadow:
    inset 0 1px 0 #fff,
    0 22px 44px -20px rgba(16, 36, 58, .3);
}
.qa__q {
  grid-column: auto;
  padding: .68rem 1rem; border-radius: 0; align-items: baseline;
  font-size: .9rem; gap: .7rem;
  transition: background .15s ease;
}
.qa__q::after {
  content: "+"; margin-left: auto; flex: none;
  color: var(--copper); font-size: 1.15em; font-weight: 600; line-height: 1;
  translate: 0 .08em;
}
.qa__unit.is-open .qa__q::after { content: "\2212"; color: var(--brand); }
.qa__q:hover { background: rgba(255, 255, 255, .55); }
.qa__unit.is-open .qa__q { background: none; box-shadow: none; }
/* the answer row: always in the grid, animated 0fr -> 1fr. Bottom space
   lives on the PARAGRAPH, not the box: a 0fr track collapses the row to
   nothing, but any margin or padding on the row's own box survives that
   collapse and shows as a sliver of the answer under every closed card.
   That is not theoretical — the phone rule below (@media max-width:860px,
   the pre-accordion rail layout) still set `margin: .35rem 0 .95rem`, and
   this reset zeroed its padding but not its margin, so every closed card
   on every FAQ page rendered a 20.8px band of the first answer line.
   Anything that adds box spacing to .qa__a has to be reset HERE. */
.qa__unit {
  transition: grid-template-rows .32s cubic-bezier(.3, .8, .3, 1),
              background .18s ease, box-shadow .18s ease;
}
.qa__unit.is-open { grid-template-rows: min-content 1fr; }
.qa__a {
  position: static; display: block; min-height: 0; overflow: hidden;
  grid-column: 1; grid-row: 2;   /* undo the old rail's column-2 placement */
  background: none; border: 0; box-shadow: none; border-radius: 0;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  margin: 0;                     /* see above — a margin survives the 0fr collapse */
  padding: 0 1.2rem 0 2.6rem;
}
.qa__unit.is-open .qa__a { display: block; animation: none; }
.qa__a h3, .qa__mark { display: none; }
.qa__a p { max-width: 46em; font-size: .9rem; line-height: 1.6; padding-bottom: 1.05rem; }
@media (prefers-reduced-motion: reduce) { .qa__unit { transition: none; } }

/* -- the blog shelf that closes the page: the lead post large on the
   left, the next two stacked beside it, the whole shelf on a washed
   ribbon that drifts on scroll -- */
.bshelf {
  position: relative; border-radius: 30px; overflow: clip;
  padding: clamp(1.1rem, 2.6vw, 1.9rem);
  box-shadow:
    0 3px 10px rgba(22, 33, 43, .06),
    0 32px 64px -28px rgba(34, 84, 121, .42);
}
.bshelf::before {
  content: ""; position: absolute; inset: -14% 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(rgba(255, 255, 255, .58), rgba(255, 255, 255, .58)),
    url("../img/person-flow.webp") center / cover no-repeat;
  transform: translateY(var(--plx, 0px)); will-change: transform;
}
.bshelf > * { position: relative; z-index: 1; }
.bpeek {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(1rem, 2vw, 1.4rem);
}
.bpeek__card--lead { grid-row: span 2; }
.bpeek__card--lead .bpeek__cover img { aspect-ratio: 16 / 9.6; }
.bpeek__card--lead .bpeek__body { padding: 1.25rem 1.4rem 1.45rem; gap: .55rem; }
.bpeek__card--lead .bpeek__body h3 { font-size: 1.34rem; }
.bpeek__card--lead .bpeek__body p { -webkit-line-clamp: 4; }
.bpeek__card:not(.bpeek__card--lead) {
  grid-template-rows: none; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
}
.bpeek__card:not(.bpeek__card--lead) .bpeek__cover { height: 100%; }
.bpeek__card:not(.bpeek__card--lead) .bpeek__cover img {
  height: 100%; min-height: 132px; aspect-ratio: auto;
}
.bpeek__card:not(.bpeek__card--lead) .bpeek__body p { -webkit-line-clamp: 2; }
.bpeek__card {
  display: grid; grid-template-rows: auto 1fr;
  border-radius: 18px; overflow: clip;
  background: linear-gradient(155deg, rgba(255, 255, 255, .74), rgba(240, 246, 251, .52));
  border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: blur(12px) saturate(1.5);
          backdrop-filter: blur(12px) saturate(1.5);
  box-shadow:
    inset 0 1px 0 var(--glass-edge),
    0 24px 48px -20px rgba(16, 36, 58, .26);
  transition: transform .2s ease, box-shadow .2s ease;
}
.bpeek__card:hover {
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 var(--glass-edge),
    0 30px 58px -22px rgba(16, 36, 58, .32);
}
.bpeek__cover { display: block; }
.bpeek__cover img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block;
}
.bpeek__body { padding: 1.05rem 1.2rem 1.25rem; display: grid; gap: .45rem; align-content: start; }
.bpeek__meta { font-size: .62rem; letter-spacing: .12em; color: var(--muted); }
.bpeek__body h3 { font-size: 1.04rem; letter-spacing: -.012em; line-height: 1.35; }
.bpeek__body h3 a { color: var(--ink); }
.bpeek__body h3 a:hover { color: var(--brand); }
.bpeek__body p {
  margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 960px) {
  .bpeek { grid-template-columns: minmax(0, 1fr); }
  .bpeek__card--lead { grid-row: auto; }
  .sec-connect__cols { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
}

/* -- the footer gets its pop: the ribbon glowing low in the steel, and a
   brand seam of light along its crown -- */
.site-footer::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("../img/hero-flow.webp") center 68% / cover no-repeat;
  opacity: .28; mix-blend-mode: screen; filter: saturate(1.25) brightness(.85);
  -webkit-mask-image: linear-gradient(105deg, transparent 34%, #000 68%);
          mask-image: linear-gradient(105deg, transparent 34%, #000 68%);
}
.site-footer::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 2;
  background: linear-gradient(90deg,
    transparent 4%, rgba(127, 180, 216, .9) 30%,
    rgba(208, 133, 66, .85) 62%, transparent 92%);
  opacity: .75; pointer-events: none;
}
.site-footer__body { position: relative; z-index: 1; }

/* -- the nav dropdowns firm up: glass at the edges, but the reading
   surface is near-paper — menu items must never fight the page behind
   them (founder: too transparent, hard to read) -- */
.nav-drop__panel,
.glass-refract .nav-drop__panel {
  background: linear-gradient(180deg, rgba(252, 254, 255, .96), rgba(244, 249, 252, .92));
}

/* ============ mobile polish (founder, 2026-08-04) ============ */
@media (max-width: 860px) {
  /* the bottom menu joins the NEW material: refraction where the engine
     has it, the header's clean glass elsewhere — the old deep-blur lens
     rim is gone */
  .mnav {
    background:
      linear-gradient(112deg, rgba(255, 255, 255, .3) 2%, rgba(255, 255, 255, 0) 34%),
      linear-gradient(180deg, var(--glass-strong), rgba(243, 247, 251, .4));
    -webkit-backdrop-filter: blur(14px) saturate(1.5);
            backdrop-filter: blur(14px) saturate(1.5);
  }
  .glass-refract .mnav {
    -webkit-backdrop-filter: blur(2px) url(#nx-dome-m) saturate(1.7);
            backdrop-filter: blur(2px) url(#nx-dome-m) saturate(1.7);
  }
  .mnav::before { display: none; }

  /* the top wordmark gets room to breathe */
  .site-header__in { padding: 24px var(--gutter) 12px; }
  .site-header .logo-link img { height: 34px; }

  /* the hero stage shows its colour past the glass, shapes concentric */
  .askstage { border-radius: 22px; padding: 1.9rem .9rem; }
  .askglass { border-radius: 17px; padding: .5rem; }
  .askcard { border-radius: 13px; --r-ctl: 13px; }

  /* the person stage hugs its content — no dead water below the cards */
  .twochat__stage { border-radius: 20px; gap: 1.05rem;
    padding: 1.2rem .75rem 1.35rem; }
}

/* the ask bar behaves like real texting everywhere: when the question
   outgrows the box, the tail and the caret stay in view and the start
   slides off left. Short lines keep sitting left (the caret's auto
   margin absorbs the free space). */
.askcard__view { justify-content: flex-end; overflow: hidden; }
.askcard__type { overflow: visible; flex: 0 0 auto; }
.askcard__caret { margin-right: auto; }

/* ============ the blog shelf on the phone: one post at a time ============
   A snap carousel with glass arrows and a lazy autoplay (home.js). The
   buttons exist in the markup always; only the phone shows them. */
.bpeek__btn { display: none; }
@media (max-width: 960px) {
  .bpeek {
    display: flex; overflow-x: auto; gap: .8rem;
    scroll-snap-type: x mandatory; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .bpeek::-webkit-scrollbar { display: none; }
  .bpeek__card, .bpeek__card:not(.bpeek__card--lead) {
    flex: 0 0 100%; scroll-snap-align: center;
    display: grid; grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
  }
  .bpeek__card--lead { grid-row: auto; }
  .bpeek__card:not(.bpeek__card--lead) .bpeek__cover img {
    aspect-ratio: 16 / 9; height: auto; min-height: 0;
  }
  .bpeek__card--lead .bpeek__cover img { aspect-ratio: 16 / 9; }
  .bpeek__card--lead .bpeek__body h3 { font-size: 1.08rem; }
  .bpeek__btn {
    display: grid; place-items: center;
    position: absolute; top: 50%; translate: 0 -50%; z-index: 2;
    width: 40px; height: 40px; border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .8);
    background: rgba(255, 255, 255, .78);
    -webkit-backdrop-filter: blur(8px) saturate(1.4);
            backdrop-filter: blur(8px) saturate(1.4);
    box-shadow: 0 8px 18px -8px rgba(16, 36, 58, .35);
    color: var(--brand); font-size: 1.5rem; line-height: 1; font-weight: 600;
    cursor: pointer; padding: 0 0 .2rem;
  }
  /* the arrows ride the cover image, not the text */
  .bpeek__btn { top: 26%; }
  .bpeek__btn--prev { left: .45rem; }
  .bpeek__btn--next { right: .45rem; }
}

/* -- no backdrop-filter (older engines): every pane carries its own paint;
   a firmer tint stands in for the missing lens -- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header, .nav-drop__panel, .mnav, .mnav-sheet { background: rgba(252, 253, 254, .95); }
  .plate, .ledger { background: #fff; }
  .btn--ghost { background: #fff; }
  .twochat__card, .bpeek__card { background: rgba(252, 254, 255, .95); }
  .qa__unit { background: rgba(252, 254, 255, .95); }
  .twochat__bubbleq { background: linear-gradient(150deg, #e3eef7, #cddfec); }
  .secure__vault {
    background:
      radial-gradient(120% 160% at 10% 0%, rgba(255, 255, 255, .16), transparent 44%),
      linear-gradient(155deg, #316a97 0%, #225479 48%, #142e44 100%);
  }
  .site-footer {
    background: linear-gradient(178deg, #1c374f 0%, #122840 52%, #0a1a29 100%);
  }
}



/* ================================================================
   PAGE INSTRUMENTS (2026-08-04 subpage redesign) — nine namespaced
   page fragments assembled below; each owns its page's new graphics.
   ================================================================ */

/* ==================== data-sources ==================== */
/* ============================================================
   FRAGMENT · data-sources — "The Sweep Clock"  (prefix .ds-)
   Freshness as a visible heartbeat: one shared ~18s clock
   (~13s dwell + ~5s sweep) drives every moving thing on the
   page. Hero: teal-over-ink aurora room (#0d2236 ground, teal
   pools + one warm gold bloom) under a smoked-glass sweep
   console — the beam is positioned by --sweep, written by the
   [data-sweepclock] fragment JS. Downpage echoes are CSS-only
   with the same 18s period and negative delays. Appended after
   main.css; every override of a shared class is scoped under a
   .ds- section root.
   ============================================================ */

/* ---------------- the shared clock ---------------- */
.ds-hero, .ds-sweep, .ds-structured, .ds-close {
  --ds-cycle: 18s;          /* the master period               */
  --ds-epoch: -9s;          /* land mid-cycle on load          */
}

/* ================= HERO — the dark sweep room ================= */
.ds-hero {
  background: #0d2236;
  color: #e8f1f7;
  border-bottom: 1px solid rgba(228, 178, 102, .22);
  padding-bottom: clamp(2.6rem, 5.5vw, 4.4rem);
}
/* the aurora pool: teal-to-ink with one warm gold bloom rising
   behind the console's left edge, a faint conic drift for depth */
.ds-hero__pool {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(52% 58% at 10% 16%, rgba(46, 142, 152, .42), transparent 70%),
    radial-gradient(46% 50% at 92% 4%,  rgba(28, 92, 122, .5),  transparent 72%),
    radial-gradient(40% 46% at 55% 98%, rgba(226, 158, 66, .34), transparent 70%),
    radial-gradient(58% 54% at 38% 72%, rgba(22, 70, 92, .55),  transparent 76%),
    conic-gradient(from 214deg at 62% 38%,
      transparent 0 38%, rgba(72, 178, 186, .09) 52%, transparent 68%),
    linear-gradient(163deg, #0f2740 0%, #0d2236 52%, #0a1b2c 100%);
}
/* copy on the dark ground */
.ds-hero .display { color: #f6fafc; }
.ds-hero .lead { color: rgba(210, 226, 237, .82); }
.ds-hero .page-hero__crumb { color: rgba(158, 186, 204, .8); }
.ds-hero .page-hero__crumb i { color: #e0a45c; }
.ds-hero .head-rule {
  background: linear-gradient(90deg,
    #e0a45c 0 60%, transparent 60% 70%, rgba(224, 164, 92, .42) 70% 100%);
}
.ds-hero .btn--ghost { color: #e6eef5; border-color: rgba(196, 220, 236, .38); }
.ds-hero .btn--ghost:hover { background: rgba(255, 255, 255, .08); border-color: rgba(196, 220, 236, .62); }
.ds-hero :focus-visible { outline-color: #6fd2c8; }
.ds-hero ::selection { background: rgba(64, 150, 162, .45); }

/* -------- the sweep console: smoked navy glass, gold rim -------- */
.ds-console {
  position: relative; z-index: 1;
  max-width: 560px; margin-inline: auto;
  border-radius: 22px; overflow: hidden;
  background: linear-gradient(165deg, rgba(19, 42, 63, .9), rgba(11, 26, 40, .87));
  -webkit-backdrop-filter: blur(14px) saturate(1.35);
          backdrop-filter: blur(14px) saturate(1.35);
  border: 1px solid rgba(228, 178, 102, .3);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .1),
    inset 0 0 44px rgba(8, 22, 36, .55),
    0 36px 66px -30px rgba(3, 10, 18, .85),
    0 0 90px -32px rgba(70, 180, 186, .42);
}
.ds-console__head {
  display: flex; align-items: center; gap: .7rem;
  padding: 1rem 1.35rem .85rem;
  border-bottom: 1px solid rgba(228, 178, 102, .16);
}
.ds-console__head b {
  font-family: var(--font-mono); font-size: .7rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: #f0e6d4;
}
.ds-console__head .mono {
  margin-left: auto; font-size: .62rem; letter-spacing: .12em;
  color: rgba(228, 178, 102, .78);
}
.ds-console__on {
  width: 7px; height: 7px; border-radius: 99px; flex: none;
  background: #45d17d;
  box-shadow: 0 0 0 2px rgba(69, 209, 125, .22), 0 0 10px rgba(69, 209, 125, .55);
}

.ds-console__rows { position: relative; }
.ds-row {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: .2rem .8rem; align-items: center;
  padding: .6rem 1.35rem .64rem;
}
/* the hairline gold top edge every row carries */
.ds-row + .ds-row { border-top: 1px solid rgba(228, 178, 102, .13); }
.ds-row__chip { grid-row: 1 / span 2; display: grid; place-items: center; }
.ds-row__chip img {
  width: 20px; height: 20px; object-fit: contain;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .55));
}
.ds-row > b { font-size: .85rem; font-weight: 600; letter-spacing: -.008em; color: #f2f7fa; }
.ds-row__state {
  font-family: var(--font-mono); font-size: .56rem; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(160, 190, 210, .62);
  white-space: nowrap; font-variant-numeric: tabular-nums;
  transition: color .25s ease;
}
.ds-row.is-live .ds-row__state { color: #ecb765; text-shadow: 0 0 8px rgba(236, 183, 101, .35); }
.ds-row.is-done .ds-row__state { color: #63cfc4; }
.ds-row__track {
  grid-column: 2 / -1; height: 3px; border-radius: 99px;
  background: rgba(255, 255, 255, .08); overflow: hidden;
}
.ds-row__fill {
  display: block; height: 100%; width: var(--p, 0%); border-radius: 99px;
  background: linear-gradient(90deg, #2f8f96, #5fd0c6);
  box-shadow: 0 0 8px rgba(95, 208, 198, .4);
  transition: width .6s cubic-bezier(.3, .7, .3, 1), opacity .4s ease;
}
.ds-row.is-done .ds-row__fill { opacity: .4; }
.ds-row[data-prune].is-done .ds-row__fill {
  background: linear-gradient(90deg, #b5763c, #e0a45c);
  box-shadow: 0 0 8px rgba(224, 164, 92, .4);
}

/* the travelling beam — positioned by --sweep (0→1), JS-written */
.ds-beam {
  position: absolute; left: 0; right: 0; height: 0;
  top: calc(var(--sweep, 0) * 100%);
  z-index: 2; pointer-events: none;
  opacity: 0; transition: opacity .35s ease;
}
.ds-console.is-sweeping .ds-beam { opacity: 1; }
.ds-beam::before {          /* the luminous hairline */
  content: ""; position: absolute; left: 4%; right: 4%; top: -.5px; height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(255, 220, 160, .9) 16%, #fff 50%,
    rgba(120, 222, 212, .9) 84%, transparent);
  box-shadow: 0 0 12px 1px rgba(255, 210, 140, .5);
}
.ds-beam::after {           /* the soft bloom in its wake */
  content: ""; position: absolute; left: 8%; right: 8%; top: -16px; height: 32px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255, 205, 130, .26), transparent 72%);
  filter: blur(6px);
}

.ds-console__foot {
  display: flex; align-items: baseline; gap: .6rem;
  padding: .85rem 1.35rem .95rem;
  border-top: 1px solid rgba(228, 178, 102, .18);
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(190, 210, 224, .62);
}
.ds-console__foot b {
  font-family: var(--font-sans);
  font-size: .92rem; letter-spacing: .02em; color: #fff;
  font-variant-numeric: tabular-nums; font-weight: 650;
}
.ds-console__foot .ingest__tick {
  position: static; color: #5fd39a; font-size: .62rem; letter-spacing: .1em;
  opacity: 0; transition: opacity .3s ease;
}
.ds-console__foot .ingest__tick.on { opacity: 1; }

/* ============ the paper reading bands (01, 02, FAQ) ============
   Warm paper, drafting registration grid at ~2%, clean hairline
   band edges — the patch collages are retired on this page. */
/* (.sec./.faq. prefixes beat main.css's .sec.section--tint and the
   .sec + .sec hairline rules at equal-or-higher specificity) */
.sec.ds-sweep, .sec.ds-structured, .faq.ds-faq {
  background:
    linear-gradient(rgba(34, 84, 121, .045) 1px, transparent 1px) .5px .5px / 24px 24px,
    linear-gradient(90deg, rgba(34, 84, 121, .045) 1px, transparent 1px) .5px .5px / 24px 24px,
    linear-gradient(180deg, rgba(253, 251, 247, .95), rgba(249, 245, 238, .88));
  border-top: 1px solid rgba(34, 84, 121, .12);
  border-bottom: 1px solid rgba(34, 84, 121, .1);
}
.sec.ds-structured { border-top: 0; }   /* 01 and 02 share one hairline */
.faq.ds-faq { border-top: 0; }

/* ---------------- 01 · the sweep log, restyled ----------------
   Paper board with giant low-opacity mono indices (the frozen 01–05
   set enormous behind each stage) and a CSS-only highlight walking
   the stages on the master period. */
.ds-log {
  border-radius: 18px; overflow: hidden;
  background: linear-gradient(170deg, #fffefb, #f6f2ea);
  border: 1px solid rgba(34, 84, 121, .13);
  box-shadow:
    inset 0 1.5px 0 #fff,
    0 2px 6px rgba(22, 33, 43, .05),
    0 28px 50px -26px rgba(120, 78, 30, .3);
}
.ds-log__head {
  display: flex; align-items: center; gap: .7rem;
  padding: .95rem 1.4rem .8rem;
  border-bottom: 1px solid rgba(34, 84, 121, .12);
}
.ds-log__head b {
  font-family: var(--font-mono); font-size: .7rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink);
}
.ds-log__head .mono { margin-left: auto; color: var(--copper); font-size: .62rem; letter-spacing: .12em; }

.ds-stage {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: .16rem 1rem; align-items: baseline;
  padding: 1rem 1.4rem 1.05rem 4.9rem;
}
.ds-stage + .ds-stage { border-top: 1px solid rgba(34, 84, 121, .09); }
/* the frozen index, set enormous and faint behind the stage */
.ds-stage > .mono:first-child {
  position: absolute; left: .55rem; top: 50%;
  transform: translateY(-52%);
  font-size: clamp(2.6rem, 4.6vw, 3.3rem); font-weight: 650;
  letter-spacing: -.02em; line-height: 1;
  color: rgba(34, 84, 121, .12);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.ds-stage > b { grid-column: 1; grid-row: 1; font-size: .95rem; font-weight: 620; letter-spacing: -.008em; }
.ds-stage > span:not([class]) {
  grid-column: 1 / -1; grid-row: 2;
  font-size: .87rem; color: var(--muted); line-height: 1.55;
}
.ds-stage__when {
  grid-column: 2; grid-row: 1; align-self: center;
  font-family: var(--font-mono); font-size: .6rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--faint); white-space: nowrap;
}
/* the walking highlight: each stage flashes in turn during the sweep
   window, same 18s period, staggered via --dsd, negative epoch */
.ds-stage:nth-child(2) { --dsd: calc(var(--ds-epoch)); }
.ds-stage:nth-child(3) { --dsd: calc(var(--ds-epoch) + .75s); }
.ds-stage:nth-child(4) { --dsd: calc(var(--ds-epoch) + 1.5s); }
.ds-stage:nth-child(5) { --dsd: calc(var(--ds-epoch) + 2.25s); }
.ds-stage:nth-child(6) { --dsd: calc(var(--ds-epoch) + 3s); }
html.fx .ds-stage::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg,
    rgba(64, 150, 162, .12), rgba(224, 164, 92, .1) 55%, transparent 92%);
  opacity: 0;
  animation: ds-stagewalk var(--ds-cycle) linear var(--dsd, 0s) infinite;
}
html.fx .ds-stage .ds-stage__when {
  animation: ds-tagwalk var(--ds-cycle) linear var(--dsd, 0s) infinite;
}
@keyframes ds-stagewalk {
  0%, 100% { opacity: 0; }
  1.6% { opacity: 1; }
  6.5% { opacity: 1; }
  11% { opacity: 0; }
}
@keyframes ds-tagwalk {
  0%, 100% { color: var(--faint); }
  1.6%, 6.5% { color: var(--copper); }
  11% { color: var(--faint); }
}

/* ---------------- 01 · the plotfacts spine glint ---------------- */
.ds-sweep .plotfacts::after {
  content: ""; position: absolute; left: 4.5px; top: .55rem;
  width: 2px; height: 46px; border-radius: 2px;
  background: linear-gradient(180deg,
    transparent, rgba(224, 164, 92, .9) 42%, rgba(110, 208, 198, .85) 62%, transparent);
  opacity: 0; pointer-events: none;
}
html.fx .ds-sweep .plotfacts::after {
  animation: ds-spine var(--ds-cycle) linear var(--ds-epoch) infinite;
}
@keyframes ds-spine {
  0%, 72% { top: .55rem; opacity: 0; }
  75% { opacity: 1; }
  94% { top: calc(100% - 3.4rem); opacity: .9; }
  97%, 100% { top: calc(100% - 3.4rem); opacity: 0; }
}
/* node dots flash as the pulse passes (filter only — the per-dot
   base colours in main.css stay untouched) */
.ds-sweep .plotfact:nth-child(1) { --dsg: calc(var(--ds-epoch) + .4s); }
.ds-sweep .plotfact:nth-child(2) { --dsg: calc(var(--ds-epoch) + 1.5s); }
.ds-sweep .plotfact:nth-child(3) { --dsg: calc(var(--ds-epoch) + 2.6s); }
.ds-sweep .plotfact:nth-child(4) { --dsg: calc(var(--ds-epoch) + 3.7s); }
html.fx .ds-sweep .plotfact::before {
  animation: ds-dot var(--ds-cycle) linear var(--dsg, 0s) infinite;
}
@keyframes ds-dot {
  0%, 74%, 84%, 100% { filter: none; }
  78% { filter: drop-shadow(0 0 6px rgba(224, 164, 92, .95)); }
}

/* ---------------- 02 · the glass record plate ----------------
   Glass exists here because a saturated copper/amber pool lives
   under it — the pool is the point, not a subtle material swap. */
.ds-recwrap { position: relative; }
.ds-recwrap::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: -9%; right: -9%; top: -12%; bottom: 2.4rem;
  background:
    radial-gradient(58% 54% at 52% 44%, rgba(216, 122, 40, .58), rgba(196, 98, 30, .3) 55%, transparent 76%),
    radial-gradient(36% 40% at 30% 70%, rgba(236, 168, 84, .42), transparent 72%),
    radial-gradient(30% 34% at 74% 26%, rgba(170, 78, 26, .38), transparent 70%);
  border-radius: 50%;
  filter: saturate(1.15);
}
.ds-plate {
  position: relative; z-index: 1;
  border-radius: 18px;
  background: linear-gradient(168deg, rgba(255, 253, 249, .95), rgba(251, 245, 236, .9));
  -webkit-backdrop-filter: blur(8px) saturate(1.3);
          backdrop-filter: blur(8px) saturate(1.3);
  border: 1px solid rgba(196, 122, 56, .38);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, .96),
    0 3px 8px rgba(70, 34, 8, .1),
    0 32px 58px -26px rgba(140, 70, 20, .5);
}
.ds-recwrap figcaption { position: relative; z-index: 1; }
/* the rim light: a masked ring whose comet travels the plate edge
   once per master cycle (holds still through the dwell) */
.ds-plate__seam {
  position: absolute; inset: -1px; border-radius: 19px; padding: 1.5px;
  pointer-events: none; opacity: .95;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}
.ds-plate__seam::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 175%; aspect-ratio: 1;
  transform: translate(-50%, -50%) rotate(0turn);
  background: conic-gradient(from 0deg,
    transparent 0 316deg,
    rgba(224, 164, 92, .0) 322deg,
    rgba(255, 205, 130, .9) 335deg 344deg,
    rgba(255, 241, 218, 1) 348deg,
    rgba(110, 208, 198, .7) 353deg,
    transparent 359deg);
}
html.fx .ds-plate__seam::before {
  animation: ds-seamturn var(--ds-cycle) linear var(--ds-epoch) infinite;
}
@keyframes ds-seamturn {
  0%, 72% { transform: translate(-50%, -50%) rotate(0turn); }
  100% { transform: translate(-50%, -50%) rotate(1turn); }
}
/* SYNCED 14:32 catches a brief specular glint on the same window */
html.fx .ds-structured .record__head .mono:last-child {
  animation: ds-synced var(--ds-cycle) linear var(--ds-epoch) infinite;
}
@keyframes ds-synced {
  0%, 80%, 96%, 100% { color: var(--copper); text-shadow: none; }
  86% { color: #d98a34; text-shadow: 0 0 10px rgba(255, 180, 90, .8); }
}

/* 02 · the gridfacts stay deliberately STILL — warm-paper plaques,
   inset top-light, crisp hairlines, zero motion */
.ds-structured .gridfact {
  border-radius: 12px;
  background: linear-gradient(165deg, #fffefb, #f6f1e8);
  border: 1px solid rgba(140, 90, 40, .14);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, .98),
    inset -4px -5px 10px rgba(140, 90, 40, .05),
    0 2px 5px rgba(70, 40, 12, .04),
    0 14px 26px -16px rgba(140, 90, 40, .22);
}

/* ================= CLOSE — one last quiet pass ================= */
.ds-close { position: relative; overflow: clip; isolation: isolate; }
.ds-close__pool {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(50% 68% at 50% 64%, rgba(20, 60, 84, .14), transparent 74%),
    radial-gradient(30% 44% at 63% 72%, rgba(64, 150, 162, .16), transparent 70%),
    radial-gradient(24% 36% at 40% 78%, rgba(224, 158, 66, .12), transparent 70%);
}
html.fx .ds-close__pool::after {
  content: ""; position: absolute; left: 18%; right: 18%; height: 1px; top: 10%;
  background: linear-gradient(90deg,
    transparent, rgba(110, 208, 198, .55) 30%, rgba(230, 176, 100, .6) 70%, transparent);
  box-shadow: 0 0 10px rgba(230, 176, 100, .35);
  opacity: 0;
  animation: ds-closepass var(--ds-cycle) linear var(--ds-epoch) infinite;
}
@keyframes ds-closepass {
  0%, 72% { top: 10%; opacity: 0; }
  75% { opacity: .65; }
  94% { top: 88%; opacity: .5; }
  96%, 100% { top: 88%; opacity: 0; }
}

/* ================= the phone story (≤860px) ================= */
@media (max-width: 860px) {
  /* the dark room goes full-bleed cleanly; the console fills the column */
  .ds-hero { padding-bottom: 2.6rem; }
  .ds-console { max-width: 100%; border-radius: 18px; }
  .ds-console__head, .ds-console__foot { padding-inline: 1rem; }
  .ds-row { grid-template-columns: 26px minmax(0, 1fr) auto; padding: .56rem 1rem .6rem; }
  .ds-row__chip img { width: 18px; height: 18px; }
  .ds-row > b { font-size: .82rem; }
  .ds-row__state { font-size: .52rem; }

  /* the log's giant indices step down, nothing clips */
  .ds-stage { padding: .9rem 1rem .95rem 3.6rem; }
  .ds-stage > .mono:first-child { font-size: 2.1rem; left: .55rem; }
  .ds-stage__when { font-size: .54rem; }
  .ds-log__head { padding-inline: 1rem; }

  /* the copper pool tucks in behind the plate */
  .ds-recwrap::before { left: -4%; right: -4%; top: -8%; bottom: 2.2rem; }
}
@media (max-width: 440px) {
  .ds-row { column-gap: .6rem; }
  .ds-console__foot { flex-wrap: wrap; row-gap: .2rem; }
}

/* ================= stillness (no motion) ================= */
@media (prefers-reduced-motion: reduce) {
  .ds-beam, .ds-plate__seam, .ds-close__pool::after, .ds-sweep .plotfacts::after { display: none; }
  .ds-stage::after, .ds-stage .ds-stage__when,
  .ds-sweep .plotfact::before,
  .ds-structured .record__head .mono:last-child { animation: none !important; }
}

/* ==================== context ==================== */
/* ============================================================
   CONTEXT — "The Resolve Chamber" (2026-08-04 redesign wave)
   The dark room under the question. Page identity: blue-violet
   dusk — deep indigo ground, violet + steel pools, gold as the
   one instrument colour (plumb lines, rims, the walking light).
   Namespaced .ctx-*; appended after main.css so ties are won.
   Motion: three ambient systems (pane parallax via data-plx,
   the 12s rim-light visit a→b→c, the 10s pipe rail walk), all
   gated on html.fx, all killed under prefers-reduced-motion.
   ============================================================ */

/* ---------- the chamber: full-bleed smoked indigo hero ---------- */
.ctx-chamber {
  background:
    radial-gradient(52% 46% at 10% 96%, rgba(122, 124, 199, .34), transparent 70%),
    radial-gradient(46% 44% at 88% 4%, rgba(52, 96, 150, .42), transparent 72%),
    radial-gradient(30% 24% at 68% 102%, rgba(214, 128, 52, .12), transparent 76%),
    conic-gradient(from 210deg at 62% 36%, transparent 60%,
      rgba(122, 130, 214, .06) 72%, transparent 86%),
    linear-gradient(168deg, #0d1126 0%, #0b0e21 55%, #090b1c 100%);
  border-bottom: 1px solid rgba(148, 138, 214, .32);
  padding-bottom: clamp(2.6rem, 5.5vw, 4.2rem);
}
/* the chamber floor: a drafting registration grid rising to the foot */
.ctx-chamber::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 36%;
  z-index: 0; pointer-events: none;
  background:
    linear-gradient(rgba(186, 196, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(186, 196, 255, .05) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 60%);
          mask-image: linear-gradient(180deg, transparent, #000 60%);
}

/* frozen copy, re-inked warm near-white for the dark ground */
.ctx-chamber .page-hero__crumb { color: rgba(226, 230, 248, .62); }
.ctx-chamber .page-hero__crumb i { color: #e2a05e; }
.ctx-chamber .display { color: #f4f1e8; }
.ctx-chamber .lead { color: rgba(222, 227, 244, .78); }
.ctx-chamber .head-rule {
  background: linear-gradient(90deg,
    #d08542 0 60%, transparent 60% 70%, rgba(226, 168, 94, .45) 70% 100%);
}
/* the CTAs in dark context: the demo keeps its lit steel; the ghost
   becomes a smoked-glass control with warm-white ink */
.ctx-chamber .btn--demo {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3),
    0 12px 26px -12px rgba(0, 0, 0, .65);
}
.ctx-chamber .btn--ghost {
  background: rgba(255, 255, 255, .06);
  color: #eef0fa;
  border-color: rgba(255, 255, 255, .3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .13);
}
.ctx-chamber .btn--ghost:hover {
  background: rgba(255, 255, 255, .13);
  border-color: rgba(255, 255, 255, .48);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);
}

/* ---------- the resolve apparatus ---------- */
.ctx-resolve { position: relative; max-width: 560px; margin-inline: auto; }
.ctx-resolve__label {
  display: flex; align-items: center; gap: .55rem;
  font-family: var(--font-mono); font-size: .62rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(226, 230, 248, .6);
  margin-bottom: 1.05rem;
}
.ctx-resolve__label i {
  width: 7px; height: 7px; border-radius: 99px; flex: none; font-style: normal;
  background: #45d17d; box-shadow: 0 0 0 2px rgba(69, 209, 125, .22);
}
html.fx .ctx-resolve__label i { animation: ctx-pulse 2.7s ease-in-out infinite; }
@keyframes ctx-pulse {
  50% { box-shadow: 0 0 0 5px rgba(69, 209, 125, .09); }
}

/* the question is the SURFACE: display scale, fixed (no parallax) */
.ctx-resolve__q {
  font-size: clamp(1.55rem, 2.6vw, 2.3rem); font-weight: 620;
  letter-spacing: -.022em; line-height: 1.3; color: #f4f1e8;
  text-wrap: balance;
}
.ctx-resolve__w { white-space: nowrap; }
.ctx-resolve__w sup {
  font-family: var(--font-mono); font-size: .48em; font-weight: 700;
  margin-left: .14em; vertical-align: .72em; letter-spacing: 0;
}
/* each referent keeps its own hue: a steel, b violet, c gold */
.ctx-resolve__w:nth-of-type(1) sup { color: #8fc1e8; }
.ctx-resolve__w:nth-of-type(2) sup { color: #aeb1f2; }
.ctx-resolve__w:nth-of-type(3) sup { color: #f0c890; }

/* ---------- the well: three glass panes at three depths ----------
   Panes stagger left→right down the chamber; each deeper pane is
   smaller, darker, more blurred. Every pane drops a gold plumb
   hairline from its own top edge up toward the question (anchored
   to the PANE, never to wrapped glyphs); deeper plumbs pass BEHIND
   the panes above and are read through their glass. */
.ctx-resolve__well {
  position: relative; overflow: hidden;
  padding: 2.4rem 0 1.1rem;
  display: grid; gap: 1.55rem;
}
.ctx-pane {
  position: relative; border-radius: 16px;
  padding: 1rem 1.2rem .95rem;
  background: rgba(21, 26, 52, var(--tint, .55));
  border: 1px solid rgba(226, 168, 94, .32);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .09),
    0 22px 44px -20px rgba(2, 4, 14, .85);
  -webkit-backdrop-filter: blur(var(--pblur, 8px)) saturate(1.3);
          backdrop-filter: blur(var(--pblur, 8px)) saturate(1.3);
  transform: translateY(var(--plx, 0px)) scale(var(--ps, 1));
  transform-origin: top center;
  will-change: transform;
}
.ctx-pane--a { z-index: 3; margin-right: 13%; --px: 18%; --tint: .5;  --pblur: 8px;  --ps: 1;   --vd: 0s; }
.ctx-pane--b { z-index: 2; margin-left: 6.5%; margin-right: 6.5%; --px: 46%; --tint: .6;  --pblur: 11px; --ps: .97; --vd: 4s; }
.ctx-pane--c { z-index: 1; margin-left: 13%; --px: 74%; --tint: .7;  --pblur: 14px; --ps: .94; --vd: 8s; }
.glass-refract .ctx-pane {
  -webkit-backdrop-filter: blur(calc(var(--pblur, 8px) - 4px)) url(#nx-lens) saturate(1.3);
          backdrop-filter: blur(calc(var(--pblur, 8px) - 4px)) url(#nx-lens) saturate(1.3);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ctx-pane { background: rgba(18, 22, 46, .95); }
}
/* the plumb hairline: lands brightest where it meets the pane */
.ctx-pane::before {
  content: ""; position: absolute; bottom: 100%; left: var(--px);
  width: 1px; height: 100vh; pointer-events: none;
  background: linear-gradient(180deg,
    transparent 0%, rgba(226, 168, 94, .14) 30%, rgba(226, 168, 94, .58) 100%);
}
/* the letter chip rides the plumb landing on the pane's top edge */
.ctx-pane > i {
  position: absolute; top: -.72rem; left: calc(var(--px) - .66rem); z-index: 1;
  width: 1.32rem; height: 1.32rem; border-radius: 99px;
  display: grid; place-items: center; font-style: normal;
  font-family: var(--font-mono); font-size: .58rem; font-weight: 700;
  background: #141833;
  box-shadow: 0 0 0 3px rgba(9, 11, 28, .6);
}
.ctx-pane--a > i { color: #8fc1e8; border: 1px solid rgba(127, 180, 216, .55); }
.ctx-pane--b > i { color: #aeb1f2; border: 1px solid rgba(150, 152, 220, .55); }
.ctx-pane--c > i { color: #f0c890; border: 1px solid rgba(226, 168, 94, .6); }
/* verbatim row text, warm ink on smoked glass */
.ctx-pane > b {
  display: block; font-size: .92rem; font-weight: 650;
  letter-spacing: -.008em; color: #f2efe6;
}
.ctx-pane > b em { font-style: normal; font-weight: 500; color: rgba(210, 216, 240, .74); }
.ctx-pane > span {
  display: block; margin-top: .2rem;
  font-size: .81rem; line-height: 1.55; color: rgba(206, 212, 236, .78);
}
.ctx-pane > span .mono {
  display: inline-block; margin-left: .2em;
  font-size: .6rem; letter-spacing: .1em; color: #d9b489;
}
/* the visit: one travelling rim light reads pane a → b → c on a 12s
   loop; the visited pane's rim and source tag brighten one step */
html.fx .ctx-pane::after {
  content: ""; position: absolute; inset: -1px; border-radius: 17px;
  pointer-events: none; opacity: 0;
  box-shadow: inset 0 0 0 1px rgba(240, 200, 144, .75);
  background: linear-gradient(118deg, rgba(240, 200, 144, .12), transparent 40%);
  animation: ctx-visit 12s ease-in-out infinite;
  animation-delay: var(--vd, 0s);
}
@keyframes ctx-visit {
  0%, 5%   { opacity: 0; }
  12%, 24% { opacity: 1; }
  33%, 100% { opacity: 0; }
}
html.fx .ctx-pane > span .mono {
  animation: ctx-tag 12s ease-in-out infinite;
  animation-delay: var(--vd, 0s);
}
@keyframes ctx-tag {
  0%, 5%   { color: #d9b489; }
  12%, 24% { color: #fbe3b8; }
  33%, 100% { color: #d9b489; }
}

/* ---------- the chamber floor: verdict chips + the honest out ---------- */
.ctx-resolve__verdict {
  margin-top: 1.1rem; display: flex; flex-wrap: wrap; align-items: center;
  gap: .6rem; font-size: .84rem; font-weight: 560; color: #ece8dc;
}
.ctx-resolve__verdict .cchip {
  padding-block: .24rem;
  background: rgba(20, 24, 48, .66);
  border-color: rgba(255, 255, 255, .18);
  color: rgba(224, 229, 246, .85);
}
.ctx-resolve__verdict .cchip i { background: #c07b3a; }
.ctx-resolve__or { color: rgba(226, 230, 248, .66); }
.ctx-resolve__or::before { content: "\B7\A0"; color: rgba(226, 230, 248, .4); }
/* the abstention breathes once per cycle, after pane c's visit */
html.fx .ctx-resolve__or { animation: ctx-breathe 12s ease-in-out infinite; }
@keyframes ctx-breathe {
  0%, 82% { color: rgba(226, 230, 248, .66); }
  90%     { color: #f6f2e6; }
  100%    { color: rgba(226, 230, 248, .66); }
}

/* ============================================================
   Below the chamber the page returns to paper. The descent motif
   carries down: the pipe ledger inherits the gold plumb rail.
   ============================================================ */

/* ---------- the answering sequence as a live sequencer ---------- */
.ctx-pipe { position: relative; }
/* the gold plumb rail, visual descendant of the chamber's lines,
   running 01 → 05 in the ledger's left margin */
.ctx-pipe::before {
  content: ""; position: absolute; left: .72rem; top: 3.4rem; bottom: 1.1rem;
  width: 1px; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(208, 133, 66, .55), rgba(208, 133, 66, .3) 80%, transparent);
}
/* the walking light: rides the rail 01 → 05 on a ~10s ambient loop */
html.fx .ctx-pipe::after {
  content: ""; position: absolute; left: calc(.72rem - 2.5px); top: 20%;
  width: 6px; height: 6px; border-radius: 99px; pointer-events: none;
  background: #e9b47e;
  box-shadow: 0 0 0 3px rgba(208, 133, 66, .16), 0 0 12px 2px rgba(233, 180, 126, .5);
  animation: ctx-rail 10s ease-in-out infinite;
}
@keyframes ctx-rail {
  0%       { top: 20%; opacity: 0; }
  3%       { opacity: 1; }
  12%      { top: 20%; }
  20%, 30% { top: 38%; }
  38%, 48% { top: 56%; }
  56%, 66% { top: 73%; }
  74%, 88% { top: 90%; opacity: 1; }
  94%, 100% { top: 90%; opacity: 0; }
}
/* each stage's numeral and WHEN tag brighten as the light passes */
html.fx .ctx-pipe .pipe__stage > .mono:first-child {
  animation: ctx-lit-num 10s ease-in-out infinite;
  animation-delay: var(--ld, 0s);
}
html.fx .ctx-pipe .pipe__when {
  animation: ctx-lit-when 10s ease-in-out infinite;
  animation-delay: var(--ld, 0s);
}
.ctx-pipe .pipe__stage:nth-child(2) { --ld: 0s; }
.ctx-pipe .pipe__stage:nth-child(3) { --ld: 2s; }
.ctx-pipe .pipe__stage:nth-child(4) { --ld: 3.8s; }
.ctx-pipe .pipe__stage:nth-child(5) { --ld: 5.6s; }
.ctx-pipe .pipe__stage:nth-child(6) { --ld: 7.4s; }
@keyframes ctx-lit-num {
  0%, 12%   { color: #e08a3c; }
  22%, 100% { color: #a85e24; }
}
@keyframes ctx-lit-when {
  0%, 12%   { color: #a85e24; }
  22%, 100% { color: #8a97a3; }
}
/* stage 05 takes a brief amber abstain glow when the light arrives */
html.fx .ctx-pipe .pipe__stage:nth-child(6) {
  animation: ctx-abstain 10s ease-in-out infinite;
  animation-delay: 7.4s;
}
@keyframes ctx-abstain {
  0%, 13%   { background: rgba(224, 164, 94, .1); }
  24%, 100% { background: rgba(224, 164, 94, 0); }
}

/* ---------- the guarantees inherit from the dissection ----------
   The shared rule turns gold plumb; the three ticks take the pane
   hues — steel a, violet b, gold c. */
.ctx-plots::before {
  background: linear-gradient(180deg,
    rgba(208, 133, 66, .6), rgba(208, 133, 66, .26) 70%, transparent);
}
.ctx-plots .plotfact:nth-child(1)::before {
  background: rgba(110, 150, 198, .24);
  box-shadow: inset 0 0 0 1px rgba(62, 108, 158, .55);
}
.ctx-plots .plotfact:nth-child(2)::before {
  background: rgba(122, 124, 199, .22);
  box-shadow: inset 0 0 0 1px rgba(112, 114, 190, .6);
}
.ctx-plots .plotfact:nth-child(3)::before {
  background: rgba(224, 160, 94, .26);
  box-shadow: inset 0 0 0 1px rgba(178, 110, 44, .6);
}

/* ---------- evidence: the notefacts break into a 2×3 ledger ---------- */
.ctx-notes { margin-top: 0; gap: 1.05rem 2.4rem; }
.ctx-notes .notefact {
  padding-bottom: .9rem;
  border-bottom: 1px solid rgba(34, 84, 121, .1);
}
.ctx-notes .notefact::before { font-variant-numeric: tabular-nums; }
.prose + .ctx-notes { margin-top: 0; }
/* the evidence ground carries a low drafting registration grid */
.ctx-evidence::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(rgba(34, 84, 121, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 84, 121, .04) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(180deg, transparent 2%, #000 30%, #000 78%, transparent 98%);
          mask-image: linear-gradient(180deg, transparent 2%, #000 30%, #000 78%, transparent 98%);
}

/* ---------- QA rail: only the open wash retints to the page gold ---------- */
.ctx-faq .qa__unit.is-open {
  background: linear-gradient(160deg, rgba(255, 252, 246, .9), rgba(250, 243, 232, .78));
  box-shadow: inset 0 1px 0 #fff, 0 22px 44px -20px rgba(122, 82, 32, .2);
}
.ctx-faq .qa__unit.is-open .qa__q::after { color: #b3702f; }

/* ---------- close: a quiet dusk pool, one gold rim — the last
   glance back at the chamber. Light enough that the ink text on
   top keeps full contrast. ---------- */
.ctx-close__pool {
  position: absolute; left: 50%; top: 50%; z-index: 0; pointer-events: none;
  translate: -50% -50%;
  width: min(680px, 92vw); aspect-ratio: 2.1; border-radius: 50%;
  background: radial-gradient(closest-side,
    rgba(64, 63, 122, .16), rgba(64, 63, 122, .09) 55%, transparent 74%);
}
.ctx-close__pool::before {
  content: ""; position: absolute; inset: 11%; border-radius: inherit;
  border: 1px solid rgba(208, 133, 66, .3);
}

/* ---------- the phone story (≤860px) ---------- */
@media (max-width: 860px) {
  /* the chamber goes clean full-bleed; the well tightens */
  .ctx-chamber { padding-bottom: 2.4rem; }
  .ctx-resolve__q { font-size: 1.45rem; }
  .ctx-resolve__well { padding-top: 1.9rem; gap: 1.6rem; }
  /* panes stack full width; parallax steps aside (transform ignores
     --plx so the engine can keep writing it harmlessly); plumbs stay
     pane-anchored so nothing chases wrapped glyphs */
  .ctx-pane,
  .ctx-pane--a, .ctx-pane--b, .ctx-pane--c {
    margin-left: 0; margin-right: 0;
    transform: scale(var(--ps, 1));
  }
  .ctx-pane--a { --px: 16%; }
  .ctx-pane--b { --px: 48%; }
  .ctx-pane--c { --px: 78%; }
  /* the close pool stays inside the band */
  .ctx-close__pool { width: 94vw; }
}
@media (max-width: 720px) {
  /* the chips keep their row; the "or" clause takes its own line */
  .ctx-resolve__verdict { row-gap: .35rem; }
  .ctx-resolve__or { flex: 1 1 100%; }
  .ctx-resolve__or::before { content: ""; }
}

/* ---------- reduced motion: fully-lit, fully-still boards ---------- */
@media (prefers-reduced-motion: reduce) {
  html.fx .ctx-resolve__label i,
  html.fx .ctx-pane::after,
  html.fx .ctx-pane > span .mono,
  html.fx .ctx-resolve__or,
  html.fx .ctx-pipe::after,
  html.fx .ctx-pipe .pipe__stage > .mono:first-child,
  html.fx .ctx-pipe .pipe__when,
  html.fx .ctx-pipe .pipe__stage:nth-child(6) { animation: none; }
  html.fx .ctx-pipe::after { display: none; }
  .ctx-pane { transform: scale(var(--ps, 1)); }
}

/* ==================== messaging ==================== */
/* ============================================================
   MESSAGING — "Same glass, different light: the doorway instrument"
   (frags/messaging.css — appended after everything in main.css)
   A full-bleed smoked-navy room over six per-channel hue pools that
   crossfade (Teams indigo / WhatsApp green / Slack aubergine /
   Telegram sky / SMS copper / widget brand-blue). The verbatim copy
   sheet mounts as the room's one PAPER surface; one Q&A exchange on
   glass re-skins per channel; the invariant "same identity" sheet
   never re-renders — the nx-seam stamps it at each swap.
   Namespaces: .msgdw (hero band), .msg- (sections). Retired on this
   page: .patchbay/.pb-bead, .clay hero tile, .mchip ports,
   .hero__patch--tl, .hero__slice--a, .hero__patch--close.
   ============================================================ */

/* ---------------- the room ---------------- */
.page-hero.msgdw {
  position: relative; overflow: clip; isolation: isolate;
  background: linear-gradient(178deg, #13293d 0%, #0f2436 55%, #0a1c2c 100%);
  border-top: 1px solid rgba(216, 166, 88, .30);
  border-bottom: 1px solid rgba(216, 166, 88, .34);
  padding-bottom: clamp(2.8rem, 5.5vw, 4.8rem);
}
/* the six pools: only the active layer lit, opacity-only crossfade */
.msgdw__pool {
  position: absolute; inset: -64px 0; z-index: 0; pointer-events: none;
  transform: translateY(var(--plx, 0px)); will-change: transform;
}
.msgdw__pl {
  position: absolute; inset: 0; opacity: 0;
}
html.fx .msgdw__pl { transition: opacity 1.1s ease; }
.msgdw__pl--teams {
  background:
    radial-gradient(52% 58% at 74% 24%, rgba(123, 131, 235, .50), transparent 70%),
    radial-gradient(46% 52% at 10% 88%, rgba(94, 100, 205, .34), transparent 72%);
}
.msgdw__pl--whatsapp {
  background:
    radial-gradient(52% 58% at 74% 24%, rgba(64, 199, 110, .44), transparent 70%),
    radial-gradient(46% 52% at 10% 88%, rgba(38, 150, 100, .30), transparent 72%);
}
.msgdw__pl--slack {
  background:
    radial-gradient(52% 58% at 74% 24%, rgba(176, 106, 179, .46), transparent 70%),
    radial-gradient(46% 52% at 10% 88%, rgba(120, 60, 130, .34), transparent 72%),
    radial-gradient(30% 34% at 46% 60%, rgba(236, 178, 46, .10), transparent 70%);
}
.msgdw__pl--telegram {
  background:
    radial-gradient(52% 58% at 74% 24%, rgba(85, 179, 230, .48), transparent 70%),
    radial-gradient(46% 52% at 10% 88%, rgba(40, 120, 180, .32), transparent 72%);
}
.msgdw__pl--sms {
  background:
    radial-gradient(52% 58% at 74% 24%, rgba(214, 128, 52, .44), transparent 70%),
    radial-gradient(46% 52% at 10% 88%, rgba(170, 96, 40, .28), transparent 72%);
}
.msgdw__pl--widget {
  background:
    radial-gradient(52% 58% at 74% 24%, rgba(110, 176, 219, .48), transparent 70%),
    radial-gradient(46% 52% at 10% 88%, rgba(52, 108, 152, .34), transparent 72%);
}
.msgdw[data-ch="teams"]    .msgdw__pl--teams,
.msgdw[data-ch="whatsapp"] .msgdw__pl--whatsapp,
.msgdw[data-ch="slack"]    .msgdw__pl--slack,
.msgdw[data-ch="telegram"] .msgdw__pl--telegram,
.msgdw[data-ch="sms"]      .msgdw__pl--sms,
.msgdw[data-ch="widget"]   .msgdw__pl--widget { opacity: 1; }

/* the smoked sheet + the ~4% drafting registration grid, one veil */
.msgdw__smoke {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px) 0 0 / 44px 44px,
    radial-gradient(120% 56% at 50% -8%, rgba(159, 192, 216, .16), transparent 62%),
    radial-gradient(110% 40% at 50% 112%, rgba(3, 12, 22, .55), transparent 72%),
    linear-gradient(178deg, rgba(16, 36, 54, .60), rgba(13, 30, 46, .52) 55%, rgba(8, 20, 32, .68) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .07),
    inset 0 -1px 0 rgba(0, 0, 0, .35);
}

/* the active channel's ink, one variable the whole band reads */
.msgdw[data-ch="teams"]    { --dwc: #8b93f2; }
.msgdw[data-ch="whatsapp"] { --dwc: #4cc96e; }
.msgdw[data-ch="slack"]    { --dwc: #c883cb; }
.msgdw[data-ch="telegram"] { --dwc: #58b8e8; }
.msgdw[data-ch="sms"]      { --dwc: #dd9a56; }
.msgdw[data-ch="widget"]   { --dwc: #7fbce4; }

/* ---------------- layout: paper left, instrument right ---------------- */
.msgdw__grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 23fr) minmax(0, 27fr);
  gap: clamp(1.8rem, 4vw, 4rem); align-items: center;
}

/* the mounted PAPER sheet: real shadow + rim so it reads mounted, not pasted */
.msgdw__paper {
  position: relative; border-radius: 22px;
  padding: clamp(1.5rem, 2.8vw, 2.5rem) clamp(1.4rem, 2.6vw, 2.3rem) clamp(1.7rem, 3vw, 2.6rem);
  background: linear-gradient(165deg, #ffffff 0%, #f3f7fa 100%);
  box-shadow:
    inset 0 1.5px 0 #fff,
    inset 0 -1px 0 rgba(34, 84, 121, .08),
    0 0 0 1px rgba(255, 255, 255, .16),
    0 2px 6px rgba(2, 10, 18, .35),
    0 28px 56px -20px rgba(2, 10, 18, .6),
    0 64px 100px -48px rgba(2, 10, 18, .55);
}
.msgdw__paper .display { font-size: clamp(2.1rem, 3.3vw, 3.05rem); }
.msgdw__paper .lead { font-size: clamp(1rem, 1.3vw, 1.1rem); max-width: 32em; }
.msgdw__paper .hero__cta { margin-top: 1.9rem; }

/* ---------------- the tab rail: raw marks on the dark ground ---------------- */
.msgdw__stage { display: grid; gap: .9rem; min-width: 0; }
.msgdw__tabs {
  display: flex; justify-content: space-between; align-items: end;
  gap: clamp(.3rem, 1vw, .8rem); padding-inline: .35rem;
}
.msgdw__tab {
  flex: none; display: grid; justify-items: center; gap: 7px;
  padding: .5rem .6rem .45rem; border-radius: 10px;
  -webkit-tap-highlight-color: transparent;
}
.msgdw__tab img, .msgdw__tab svg {
  width: 22px; height: 22px;
  filter: grayscale(1) brightness(1.75); opacity: .48;
  transition: filter .3s ease, opacity .3s ease, transform .3s ease;
}
/* the glyph channels (sms / widget) draw in light ink on the dark ground */
.msgdw__tab svg path, .msgdw__tab svg rect, .msgdw__tab svg circle { stroke: #d7e4ee; }
.msgdw__tab:hover img, .msgdw__tab:hover svg { opacity: .85; }
.msgdw__tab.is-on img, .msgdw__tab.is-on svg { filter: none; opacity: 1; transform: translateY(-1px); }
/* per-tab hue tick under the active mark */
.msgdw__tab::after {
  content: ""; width: 16px; height: 2px; border-radius: 99px;
  background: transparent; transition: background .3s ease;
}
.msgdw__tab[data-ch-btn="teams"]    { --tabhue: #8b93f2; }
.msgdw__tab[data-ch-btn="whatsapp"] { --tabhue: #4cc96e; }
.msgdw__tab[data-ch-btn="slack"]    { --tabhue: #c883cb; }
.msgdw__tab[data-ch-btn="telegram"] { --tabhue: #58b8e8; }
.msgdw__tab[data-ch-btn="sms"]      { --tabhue: #dd9a56; }
.msgdw__tab[data-ch-btn="widget"]   { --tabhue: #7fbce4; }
.msgdw__tab.is-on::after { background: var(--tabhue); }
.msgdw__tab:focus-visible { outline-color: #cfe0ee; }

/* ---------------- the glass: the exchange, product fidelity ---------------- */
.msgdw__glass {
  position: relative; border-radius: 20px;
  padding: 1.05rem 1.15rem 1.25rem;
  background: linear-gradient(165deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .04));
  border: 1px solid rgba(255, 255, 255, .22);
  -webkit-backdrop-filter: blur(12px) saturate(1.5);
          backdrop-filter: blur(12px) saturate(1.5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .26),
    0 26px 52px -24px rgba(2, 10, 18, .65);
}
.msgdw__core {
  display: flex; align-items: center; gap: .6rem;
  padding-bottom: .8rem; margin-bottom: .95rem;
  border-bottom: 1px solid rgba(255, 255, 255, .13);
}
.msgdw__disc {
  flex: none; width: 30px; height: 30px; border-radius: 99px;
  display: grid; place-items: center;
  background: linear-gradient(150deg, #ffffff, #e7eef5);
  border: 1px solid rgba(255, 255, 255, .55);
  box-shadow: inset 0 1px 0 #fff, 0 4px 10px -3px rgba(2, 10, 18, .6);
}
.msgdw__disc img { width: 18px; height: 18px; }
.msgdw__core b {
  font-size: .84rem; font-weight: 650; letter-spacing: -.008em;
  color: #edf4fa;
}
.msgdw__chat { display: grid; gap: .85rem; }

/* the question bubble: channel chrome — hue tint + per-doorway geometry */
.msgdw__q {
  justify-self: end; max-width: 92%; min-height: 4.6em;
  display: block;
  padding: .72rem .95rem .78rem;
  font-size: .92rem; font-weight: 560; letter-spacing: -.008em;
  line-height: 1.45; color: #f0f6fb;
  background: rgba(255, 255, 255, .10);
  background: color-mix(in srgb, var(--dwc, #7fbce4) 20%, rgba(10, 24, 38, .35));
  border: 1px solid rgba(255, 255, 255, .22);
  border-color: color-mix(in srgb, var(--dwc, #7fbce4) 42%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}
html.fx .msgdw__q {
  transition: border-radius .45s ease, background .6s ease, border-color .6s ease;
}
.msgdw__caret {
  display: inline-block; vertical-align: -2px; margin-left: 3px;
  width: 2px; height: 1em; border-radius: 2px;
  background: var(--dwc, #7fbce4); opacity: .4;
}
html.fx .msgdw__caret { opacity: 1; animation: msgdw-blink 1.06s steps(2) infinite; }
@keyframes msgdw-blink { 50% { opacity: 0; } }

/* per-doorway bubble geometry (the only chrome that swaps) */
.msgdw[data-ch="teams"]    .msgdw__q { border-radius: 8px; }
.msgdw[data-ch="whatsapp"] .msgdw__q { border-radius: 15px 15px 4px 15px; }
.msgdw[data-ch="slack"]    .msgdw__q { border-radius: 6px 6px 6px 14px; }
.msgdw[data-ch="telegram"] .msgdw__q { border-radius: 18px 18px 5px 18px; }
.msgdw[data-ch="sms"]      .msgdw__q { border-radius: 22px 22px 6px 22px; }
.msgdw[data-ch="widget"]   .msgdw__q { border-radius: 13px; border-style: solid; }
.msgdw[data-ch="teams"]    .msgdw__a { border-radius: 8px; }
.msgdw[data-ch="whatsapp"] .msgdw__a { border-radius: 15px 15px 15px 4px; }
.msgdw[data-ch="slack"]    .msgdw__a { border-radius: 6px 14px 6px 6px; }
.msgdw[data-ch="telegram"] .msgdw__a { border-radius: 18px 18px 18px 5px; }
.msgdw[data-ch="sms"]      .msgdw__a { border-radius: 22px 22px 22px 6px; }
.msgdw[data-ch="widget"]   .msgdw__a { border-radius: 13px; }

/* the answer: abstract citation-chip geometry — zero sentences, never a
   fake copyable token. Skeleton prose lines, then three concentric ring
   chips (the numbered-citation idiom drawn, not written). */
.msgdw__a {
  justify-self: start; width: min(88%, 30rem);
  display: grid; gap: 7px;
  padding: .85rem .95rem .8rem;
  background: linear-gradient(160deg, rgba(252, 254, 255, .95), rgba(238, 245, 250, .88));
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow:
    inset 0 1.5px 0 #fff,
    0 16px 32px -16px rgba(2, 10, 18, .55);
}
html.fx .msgdw__a {
  transition: border-radius .45s ease, opacity .4s ease, translate .4s ease;
}
.msgdw__a.is-out { opacity: 0; translate: 0 8px; }
.msgdw__aline {
  height: 7px; border-radius: 99px;
  background: linear-gradient(90deg, rgba(34, 84, 121, .22), rgba(34, 84, 121, .10));
}
.msgdw__aline:nth-child(2) { width: 82%; }
.msgdw__aline--short { width: 52%; }
.msgdw__cites {
  display: flex; align-items: center; gap: .45rem;
  margin-top: .5rem; padding-top: .6rem;
  border-top: 1px solid rgba(34, 84, 121, .12);
}
.msgdw__cites i {
  position: relative; width: 15px; height: 15px; border-radius: 99px;
  border: 1.5px solid var(--dwc, #7fbce4);
}
html.fx .msgdw__cites i { transition: border-color .6s ease; }
.msgdw__cites i::after {
  content: ""; position: absolute; inset: 3.5px; border-radius: 99px;
  background: var(--dwc, #7fbce4); opacity: .85;
}
html.fx .msgdw__cites i::after { transition: background .6s ease; }
.msgdw__cites::after {
  content: ""; margin-left: auto; width: 34px; height: 5px; border-radius: 99px;
  background: rgba(34, 84, 121, .14);
}

/* ---------------- the invariant sheet: stamped six times, never re-rendered */
.msgdw__stamp {
  --r-ctl: 14px;
  position: relative; margin: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem .7rem;
  padding: .68rem 1rem .74rem; border-radius: 14px;
  font-size: .68rem; font-weight: 640; letter-spacing: .13em;
  text-transform: uppercase; text-align: center;
  color: rgba(226, 237, 246, .82);
  background: linear-gradient(160deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .035));
  border: 1px solid rgba(255, 255, 255, .20);
  -webkit-backdrop-filter: blur(9px) saturate(1.4);
          backdrop-filter: blur(9px) saturate(1.4);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .22),
    0 16px 32px -18px rgba(2, 10, 18, .6);
}
.glass-refract .msgdw__stamp {
  -webkit-backdrop-filter: blur(2px) url(#nx-lens) saturate(1.5);
          backdrop-filter: blur(2px) url(#nx-lens) saturate(1.5);
}
.msgdw__stamp i { font-style: normal; color: #d8a658; }
/* the seam rests dim on the rim; each swap presses it bright — a stamp */
.msgdw__stamp .nx-seam { opacity: .26; transition: opacity .8s ease; }
.msgdw__stamp.is-stamp .nx-seam { opacity: 1; transition-duration: .12s; }

/* engines without backdrop-filter: firmer paint stands in */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .msgdw__glass { background: linear-gradient(165deg, rgba(30, 56, 80, .92), rgba(18, 38, 58, .9)); }
  .msgdw__stamp { background: rgba(24, 46, 68, .92); }
}

/* ---------------- 01 · identity: warm paper veil, hue-keylined plaques -- */
.msg-paper {
  background: linear-gradient(180deg, rgba(252, 254, 255, .86), rgba(243, 248, 252, .72));
  border-block: 1px solid rgba(34, 84, 121, .1);
}
/* the ambient patches step back toward the drafting-grid whisper */
.msg-sec .sec__patch, .msg-faq .sec__patch { opacity: .42; }

.msg-facts .gridfact {
  position: relative; border-radius: 14px;
  padding: .95rem 1.05rem .9rem 1.2rem;
  background: linear-gradient(165deg, rgba(255, 255, 255, .94), rgba(243, 248, 252, .8));
  border: 1px solid rgba(34, 84, 121, .1);
  -webkit-backdrop-filter: blur(8px) saturate(1.4);
          backdrop-filter: blur(8px) saturate(1.4);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, .95),
    0 2px 5px rgba(22, 33, 43, .04),
    0 16px 30px -18px rgba(16, 36, 58, .32);
}
/* the five doorway hues, one hairline keyline each */
.msg-facts .gridfact:nth-child(1) { --k: #33a35a; }   /* whatsapp green   */
.msg-facts .gridfact:nth-child(2) { --k: #8a4f8d; }   /* slack aubergine  */
.msg-facts .gridfact:nth-child(3) { --k: #2f95c9; }   /* telegram sky     */
.msg-facts .gridfact:nth-child(4) { --k: #6b6fc0; }   /* teams indigo     */
.msg-facts .gridfact:nth-child(5) { --k: #c07a3a; }   /* sms copper       */
.msg-facts .gridfact::before {
  content: ""; position: absolute; left: 0; top: 11px; bottom: 11px; width: 2px;
  border-radius: 2px; background: var(--k, var(--copper)); opacity: .8;
}
/* the link-tick: ring + bar, "recognised from message one" drawn */
.msg-facts .gridfact::after {
  content: ""; position: absolute; right: .85rem; top: .95rem;
  width: 21px; height: 10px; opacity: 1;
  background-image:
    radial-gradient(circle at 5px 5px, transparent 2.5px, var(--k, var(--copper)) 2.8px 4.1px, transparent 4.5px),
    linear-gradient(var(--k, var(--copper)), var(--k, var(--copper)));
  background-size: 10px 10px, 9px 2px;
  background-position: 0 0, 12px 4px;
  background-repeat: no-repeat;
}
/* the tick's one-step fill rides the section's rise */
html.fx .msg-facts .gridfact::after { opacity: .18; transition: opacity .7s ease .55s; }
html.fx .in-view .msg-facts .gridfact::after { opacity: 1; }
/* kickers leave the robot font: small caps sans */
.msg-facts .gridfact b, .msg-ledger .plotfact b {
  font-family: var(--font-sans); font-size: .67rem; font-weight: 700;
  letter-spacing: .09em;
}

/* ---------------- 02 · conduct: the ruled ledger, sealed ---------------- */
/* gold rim light on the vertical rule */
.msg-ledger.plotfacts::before {
  width: 1px; left: 5px;
  background: linear-gradient(180deg,
    rgba(216, 166, 88, .62), rgba(216, 166, 88, .30) 72%, transparent);
  box-shadow: 0 0 6px rgba(216, 166, 88, .22);
}
/* the signature seal: concentric ring + core, uniform down the ledger —
   the nth-child colour cycling of the base ticks is overridden flat */
.msg-ledger .plotfact::before,
.msg-ledger .plotfact:nth-child(3n)::before,
.msg-ledger .plotfact:nth-child(3n+2)::before {
  left: -1.85rem; top: .14em; width: 13px; height: 13px; border-radius: 99px;
  background: radial-gradient(circle, rgba(168, 94, 36, .95) 0 2.1px, transparent 2.7px);
  box-shadow:
    inset 0 0 0 1px rgba(168, 94, 36, .62),
    0 0 0 3px rgba(216, 166, 88, .14);
}

/* ---------------- FAQ: indexes and doors in the doorway-hue system ------- */
.msg-faq .qa__q .mono {
  font-family: var(--font-sans); font-variant-numeric: tabular-nums;
  font-size: .7rem; font-weight: 700; letter-spacing: .05em;
}
.msg-faq .qa__unit:nth-child(1) .qa__q .mono { color: #6b6fc0; }
.msg-faq .qa__unit:nth-child(2) .qa__q .mono { color: #2f9e58; }
.msg-faq .qa__unit:nth-child(3) .qa__q .mono { color: #8a4f8d; }
.msg-faq .qa__unit:nth-child(4) .qa__q .mono { color: #2f95c9; }
.msg-faq .qa__unit:nth-child(5) .qa__q .mono { color: #c07a3a; }
.msg-faq .qa__unit:nth-child(6) .qa__q .mono { color: #4a7ab5; }

/* ---------------- close: the room's quiet bookend (fixed hue, no cycle) -- */
.home-close.msg-close {
  border-top: 1px solid rgba(216, 166, 88, .34);
  border-bottom: 1px solid rgba(216, 166, 88, .26);
  background:
    radial-gradient(58% 92% at 20% 6%, rgba(110, 176, 219, .28), transparent 62%),
    radial-gradient(48% 84% at 84% 94%, rgba(122, 124, 199, .22), transparent 66%),
    linear-gradient(178deg, rgba(16, 36, 54, .94), rgba(10, 24, 38, .96));
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
          backdrop-filter: blur(10px) saturate(1.3);
}
.msg-close .display { color: #f2f7fb; }
.msg-close .lead { color: rgba(206, 222, 235, .76); }
.msg-close .home-close__quiet { color: rgba(206, 222, 235, .6); }
.msg-close .home-close__quiet:hover { color: #fff; }
.msg-close .btn--ghost {
  background: rgba(255, 255, 255, .09); color: #e9f1f8;
  border-color: rgba(255, 255, 255, .28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
}
.msg-close .btn--ghost:hover {
  background: rgba(255, 255, 255, .17); border-color: rgba(255, 255, 255, .45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .home-close.msg-close {
    background:
      radial-gradient(58% 92% at 20% 6%, rgba(110, 176, 219, .22), transparent 62%),
      linear-gradient(178deg, #12293e, #0a1826);
  }
}

/* ---------------- the phone story ---------------- */
@media (max-width: 860px) {
  .page-hero.msgdw { padding-bottom: 2.6rem; }
  .msgdw__grid { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .msgdw__paper {
    border-radius: 18px;
    padding: 1.35rem 1.15rem 1.5rem;
  }
  .msgdw__paper .display { font-size: 1.92rem; }
  .msgdw__stage { gap: .75rem; }
  /* the tab rail steps above the stage, centered; nothing floats over text */
  .msgdw__tabs { justify-content: center; flex-wrap: wrap; gap: .1rem .35rem; padding-inline: 0; }
  .msgdw__tab { padding: .42rem .5rem .4rem; }
  .msgdw__tab img, .msgdw__tab svg { width: 20px; height: 20px; }
  .msgdw__glass { border-radius: 16px; padding: .9rem .85rem 1.05rem; }
  .msgdw__core b { font-size: .8rem; }
  .msgdw__q { max-width: 100%; font-size: .88rem; min-height: 4.9em; }
  .msgdw__a { width: 100%; }
  .msgdw__stamp { font-size: .58rem; letter-spacing: .11em; padding: .6rem .7rem .66rem; }
  .msg-facts .gridfact::after { top: .85rem; right: .75rem; }
}
@media (max-width: 380px) {
  .msgdw__tab { padding: .38rem .38rem .36rem; }
}

/* reduced motion / still world: skin one stands complete, nothing pulses */
@media (prefers-reduced-motion: reduce) {
  .msgdw__pl, .msgdw__q, .msgdw__a, .msgdw__caret,
  .msgdw__cites i, .msgdw__cites i::after { transition: none; animation: none; }
}

/* ==================== permissions ==================== */
/* ============================================================
   PERMISSIONS — "The Scope Switchboard" (2026-08 redesign)
   One board, two askers, alternating. The hero is the only dark
   room on the page: a steel-blue pool (EC/SALES) meets a copper
   pool (DR/SUPPORT) in a gold seam; the ACL board stands astride
   it as smoked navy glass. An 8s CSS cycle hands the lit column
   from EC to DR — filled beads glow in their pool colour, the
   inactive column drops to drafted ink, Payroll stays dark under
   both. Sections 01/02 + FAQ stay paper; the board's bead/ring/
   pin become the page-wide marker vocabulary. All selectors are
   .perm- namespaced; base (unanimated) styles ARE the EC-active
   frame so reduced-motion / no-fx reads complete.
   ============================================================ */

/* ---------------- hero: the split room ---------------- */
.perm-hero {
  background: linear-gradient(180deg, #0d1f31 0%, #102436 55%, #0a1928 100%);
  color: #e8f0f7;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.perm-hero .display { color: #f2f7fb; }
.perm-hero .lead { color: rgba(203, 217, 230, .78); }
.perm-hero .page-hero__crumb { color: rgba(159, 178, 196, .72); }
.perm-hero .page-hero__crumb i { color: #e0a875; }
.perm-hero .btn--ghost { color: #e8f0f7; border-color: rgba(255, 255, 255, .28); }
.perm-hero .btn--ghost:hover { background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .5); }
/* the steel button needs a lift off the navy ground */
.perm-hero .btn--demo { background: #2b6392;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22),
    0 12px 26px -12px rgba(0, 0, 0, .65); }
.perm-hero .btn--demo:hover { background: #34719f; }

/* the two asker pools — pure CSS radial colour, no images. pages.js only
   writes --plx; the transform below is the consumer (data-plx .04 / .07). */
.perm-pool {
  position: absolute; z-index: 0; top: -22%; bottom: -22%; width: 74%;
  pointer-events: none;
  transform: translateY(var(--plx, 0px)); will-change: transform;
}
.perm-pool--ec { left: -12%;
  background: radial-gradient(56% 50% at 46% 52%,
    rgba(46, 110, 158, .58), rgba(34, 84, 121, .3) 55%, transparent 76%); }
.perm-pool--dr { right: -12%;
  background: radial-gradient(56% 50% at 54% 50%,
    rgba(198, 110, 44, .44), rgba(168, 94, 36, .22) 55%, transparent 76%); }

/* the seam: one flat gold hairline + a soft rim-light wash. Flat, never
   spectral — this is a rim light, not a prism. */
.perm-seamline {
  position: absolute; z-index: 0; top: 0; bottom: 0; left: 50%; width: 1px;
  transform: translateX(-50%); pointer-events: none;
  background: linear-gradient(180deg,
    transparent, rgba(233, 180, 126, .42) 28% 74%, transparent);
}
.perm-seamline::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -150px; right: -150px;
  background: radial-gradient(46% 42% at 50% 55%,
    rgba(233, 180, 126, .13), transparent 72%);
}

/* ---------------- the board: smoked navy glass ---------------- */
.perm-board {
  --colw: 58px;
  --r-ctl: 24px;               /* nx-seam rides this: 24 + 2.5 ≈ board radius */
  position: relative;
  max-width: 560px; margin-inline: auto;
  padding: 1.35rem 1.5rem 1.2rem;
  border-radius: 26px;
  background:
    radial-gradient(120% 160% at 12% 0%, rgba(255, 255, 255, .1), transparent 46%),
    linear-gradient(160deg, rgba(26, 52, 74, .92), rgba(16, 36, 54, .88));
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
          backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid rgba(233, 180, 126, .26);      /* gold rim */
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, .2),       /* inset top-light */
    inset 0 -18px 30px rgba(6, 16, 26, .35),
    0 34px 70px -28px rgba(4, 12, 22, .8);
}
/* faint drafting registration grid behind the matrix */
.perm-board::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(rgba(159, 192, 216, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(159, 192, 216, .07) 1px, transparent 1px);
  background-size: 20px 20px;
  -webkit-mask-image: radial-gradient(120% 100% at 80% 0%, #000 30%, transparent 90%);
          mask-image: radial-gradient(120% 100% at 80% 0%, #000 30%, transparent 90%);
}
.perm-board > *:not(.nx-seam) { position: relative; }
/* one seam sweep per half-cycle: 4s per turn against the 8s asker cycle */
.perm-board .nx-seam.soft::before { animation-duration: 4s; }

.perm-board__matrix { position: relative; }
.perm-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1fr) var(--colw) var(--colw);
  align-items: center;
}
.perm-grid > * { padding: .55rem 0;
  border-bottom: 1px solid rgba(159, 192, 216, .12); }
.perm-grid > .perm-doc:nth-last-child(3),
.perm-grid > .perm-doc:nth-last-child(3) ~ * { border-bottom: 0; }

.perm-who { justify-self: center; display: grid; justify-items: center;
  gap: .3rem; padding-bottom: .7rem; }
.perm-who .mono { font-size: .52rem; letter-spacing: .12em;
  color: rgba(168, 188, 206, .8); }
.perm-badge { width: 34px; height: 34px; border-radius: 11px;
  display: grid; place-items: center; color: #fff;
  font-size: .72rem; font-weight: 700; letter-spacing: .02em;
  background: var(--pc, var(--brand));
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .35),
    0 3px 10px -2px rgba(0, 0, 0, .5),
    0 0 18px -2px var(--pc, var(--brand)); }

.perm-doc { min-width: 0; padding-right: 1rem; }
.perm-doc .mono { display: block; font-size: .58rem; letter-spacing: .06em;
  color: rgba(148, 170, 190, .6); }
.perm-doc b { font-size: .86rem; font-weight: 600; letter-spacing: -.008em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block;
  color: #ecf4fb; }
/* base = EC-active frame: only EC's readable docs are lit */
.perm-doc--dr b { color: rgba(176, 193, 209, .42); }
.perm-doc--none b { color: rgba(176, 193, 209, .38); }

/* the dot cells: full-width grid cells (so the row hairline runs unbroken)
   holding the bead / ring marker */
.perm-cell { display: grid; place-items: center; min-width: 0; }
.perm-dot { display: block; width: 15px; height: 15px; border-radius: 99px; }
/* filled bead — EC base = lit in the blue pool colour */
.perm-dot--fill.perm-c-ec {
  background-color: #4f8fc4;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .5),
    0 0 0 1px rgba(140, 190, 230, .35),
    0 0 14px rgba(96, 166, 220, .55),
    0 0 30px rgba(60, 130, 190, .3);
}
/* filled bead — DR base = drafted ink (EC frame: DR is the inactive asker) */
.perm-dot--fill.perm-c-dr {
  background-color: #3d3227;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .07),
    0 0 0 1px rgba(230, 170, 110, 0),
    0 0 14px rgba(214, 140, 60, 0),
    0 0 30px rgba(190, 120, 50, 0);
}
/* drafted ring — may not read */
.perm-dot--ring { border: 1.5px dashed rgba(159, 192, 216, .5);
  background: none; }
.perm-cell--dr { opacity: .35; }             /* EC frame: DR column dropped */
.perm-cell--mute { opacity: .3; }            /* Payroll: dark under both */
/* the per-file override pin, lit constant through both phases */
.perm-dot--pin { position: relative; }
.perm-dot--pin::after { content: ""; position: absolute; right: -4px; top: -4px;
  width: 8px; height: 8px; border-radius: 99px; background: #d0854a;
  border: 1.5px solid #10222f;
  box-shadow: 0 0 8px rgba(214, 140, 60, .6); }

/* the lifted column-highlight chip, parked on EC in the base frame */
.perm-scan {
  position: absolute; z-index: 0; top: -4px; bottom: -2px;
  right: var(--colw); width: var(--colw);
  border-radius: 14px; pointer-events: none;
  background-color: rgba(110, 166, 214, .09);
  border: 1px solid rgba(140, 190, 230, .22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12),
    0 10px 22px -12px rgba(0, 0, 0, .5);
}

.perm-board__foot { margin-top: .9rem; padding-top: .8rem;
  border-top: 1px solid rgba(233, 180, 126, .18);
  font-family: var(--font-mono); font-size: .56rem; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(200, 214, 226, .55);
  text-align: center; }
.perm-board__foot i { font-style: normal; color: #e9b47e; }

/* ---------------- the 8s asker cycle ----------------
   Two decisive states, a .64s hand-over at each half. Every animation
   shares the 8s clock so the whole board flips as one machine. */
@keyframes perm-a       { 0%, 46% { opacity: 1; }   54%, 100% { opacity: .35; } }
@keyframes perm-b       { 0%, 46% { opacity: .35; } 54%, 100% { opacity: 1; } }
@keyframes perm-scan-move {
  0%, 46% { transform: translateX(0);
    background-color: rgba(110, 166, 214, .09);
    border-color: rgba(140, 190, 230, .22); }
  54%, 100% { transform: translateX(var(--colw));
    background-color: rgba(214, 140, 60, .09);
    border-color: rgba(230, 170, 110, .24); }
}
@keyframes perm-fill-ec {
  0%, 46% { background-color: #4f8fc4;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, .5),
      0 0 0 1px rgba(140, 190, 230, .35),
      0 0 14px rgba(96, 166, 220, .55),
      0 0 30px rgba(60, 130, 190, .3); }
  54%, 100% { background-color: #26394c;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, .07),
      0 0 0 1px rgba(140, 190, 230, 0),
      0 0 14px rgba(96, 166, 220, 0),
      0 0 30px rgba(60, 130, 190, 0); }
}
@keyframes perm-fill-dr {
  0%, 46% { background-color: #3d3227;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, .07),
      0 0 0 1px rgba(230, 170, 110, 0),
      0 0 14px rgba(214, 140, 60, 0),
      0 0 30px rgba(190, 120, 50, 0); }
  54%, 100% { background-color: #cd7a30;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, .45),
      0 0 0 1px rgba(230, 170, 110, .35),
      0 0 14px rgba(214, 140, 60, .55),
      0 0 30px rgba(190, 120, 50, .3); }
}
@keyframes perm-doc-a {
  0%, 46% { color: #ecf4fb; } 54%, 100% { color: rgba(176, 193, 209, .42); } }
@keyframes perm-doc-b {
  0%, 46% { color: rgba(176, 193, 209, .42); } 54%, 100% { color: #ecf4fb; } }

html.fx .perm-scan { animation: perm-scan-move 8s cubic-bezier(.75, 0, .25, 1) infinite; }
html.fx .perm-who--ec { animation: perm-a 8s cubic-bezier(.75, 0, .25, 1) infinite; }
html.fx .perm-who--dr { animation: perm-b 8s cubic-bezier(.75, 0, .25, 1) infinite; }
html.fx .perm-cell--ec { animation: perm-a 8s cubic-bezier(.75, 0, .25, 1) infinite; }
html.fx .perm-cell--dr { animation: perm-b 8s cubic-bezier(.75, 0, .25, 1) infinite; }
html.fx .perm-dot--fill.perm-c-ec { animation: perm-fill-ec 8s cubic-bezier(.75, 0, .25, 1) infinite; }
html.fx .perm-dot--fill.perm-c-dr { animation: perm-fill-dr 8s cubic-bezier(.75, 0, .25, 1) infinite; }
html.fx .perm-doc--ec b { animation: perm-doc-a 8s cubic-bezier(.75, 0, .25, 1) infinite; }
html.fx .perm-doc--dr b { animation: perm-doc-b 8s cubic-bezier(.75, 0, .25, 1) infinite; }

/* reduced motion: freeze the whole machine on the EC-active base frame
   (.nx-seam hides itself; the frame reads complete without the sweep) */
@media (prefers-reduced-motion: reduce) {
  html.fx .perm-scan,
  html.fx .perm-who--ec, html.fx .perm-who--dr,
  html.fx .perm-cell--ec, html.fx .perm-cell--dr,
  html.fx .perm-dot--fill.perm-c-ec, html.fx .perm-dot--fill.perm-c-dr,
  html.fx .perm-doc--ec b, html.fx .perm-doc--dr b { animation: none; }
}

/* who columns start from their own frame states */
.perm-who--dr { opacity: .35; }

/* ---------------- head-rule: the seam in miniature ---------------- */
.perm-rule { background: linear-gradient(90deg,
  var(--brand) 0 44%, transparent 44% 56%, var(--copper) 56% 100%); }
.perm-hero .perm-rule { background: linear-gradient(90deg,
  #5b93c4 0 44%, transparent 44% 56%, #d0854a 56% 100%); }

/* ---------------- paper sections: the board's marker vocabulary ------- */
/* plotfacts speak bead / pin / ring instead of the drafted squares */
.perm-plot .plotfact::before {
  width: 12px; height: 12px; border-radius: 99px; border: 0;
}
.perm-plot .plotfact:nth-child(3n+1)::before {
  background: radial-gradient(circle at 32% 30%, #4d7ba3, var(--brand) 68%);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .45),
    0 2px 4px -1px rgba(34, 84, 121, .5);
}
.perm-plot .plotfact:nth-child(3n+2)::before {
  background: radial-gradient(circle at 32% 30%, #4d7ba3, var(--brand) 68%);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .45),
    0 2px 4px -1px rgba(34, 84, 121, .5),
    0 0 0 3px var(--copper-wash-2);
}
.perm-plot .plotfact:nth-child(3n+2)::after {
  content: ""; position: absolute;
  left: calc(-1.75rem + 8px); top: calc(.16em - 3px);
  width: 7px; height: 7px; border-radius: 99px;
  background: var(--copper); border: 1.5px solid #fff;
}
.perm-plot .plotfact:nth-child(3n)::before {
  background: transparent; box-shadow: none;
  border: 1.5px dashed var(--line-strong);
}

/* notefacts: numbered copper chips, tabular digits, the board's row rule
   as a hairline left edge */
.perm-notes { border-left: 1px solid rgba(34, 84, 121, .14);
  padding-left: 1.35rem; }
.perm-notes .notefact::before {
  content: counter(nf);
  font-variant-numeric: tabular-nums;
  color: var(--copper); border-color: rgba(168, 94, 36, .5);
}

/* the section patches step back — the hero owns the atmosphere now */
.perm-patch { opacity: .6; }

/* FAQ link-chips lead with the filled bead: may-read, follow it */
.perm-faq .qa__links a::before {
  content: ""; width: 7px; height: 7px; border-radius: 99px; flex: none;
  background: radial-gradient(circle at 32% 30%, #4d7ba3, var(--brand) 68%);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .45);
}

/* ---------------- close band: the reprise on paper ---------------- */
.perm-close::before {              /* the gold hairline rising behind the ask */
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: 50%; top: 0; height: 46%; width: 1px; transform: translateX(-50%);
  background: linear-gradient(180deg,
    transparent, rgba(168, 94, 36, .5) 45% 82%, transparent);
}
.perm-close::after {               /* the twin pools, as memory */
  content: ""; position: absolute; z-index: 0; inset: 0; pointer-events: none;
  background:
    radial-gradient(34% 46% at 15% 55%, rgba(34, 84, 121, .07), transparent 70%),
    radial-gradient(34% 46% at 85% 55%, rgba(168, 94, 36, .06), transparent 70%);
}

/* ---------------- the phone story ---------------- */
@media (max-width: 860px) {
  .perm-pool { width: 92%; top: -12%; bottom: -12%; }
  .perm-pool--ec { left: -34%; }
  .perm-pool--dr { right: -34%; }
  .perm-seamline::before { left: -90px; right: -90px; }
}
@media (max-width: 480px) {
  .perm-board { --colw: 44px; padding: 1.1rem 1rem 1rem; border-radius: 22px;
    --r-ctl: 20px; }
  .perm-doc b { font-size: .78rem; }
  .perm-doc .mono { font-size: .54rem; }
  .perm-badge { width: 30px; height: 30px; border-radius: 10px;
    font-size: .66rem; }
  .perm-scan { border-radius: 12px; }
  .perm-board__foot { font-size: .5rem; letter-spacing: .09em; }
}

/* ==================== pricing ==================== */
/* ============================================================
   PRICING — "Dead Meters" (2026-08 redesign) · prefix .pr-
   Everything on this page moves except the price. One family of
   instruments: the machined glass slider rail, the flagship
   monthly statement in the page's single full-bleed navy room
   (#included), and the seat gauge — the only needle that moves.
   Rest of the page stays daylight paper. No number ever animates.
   Appended after main.css; overrides win at equal specificity.
   ============================================================ */

/* ---------- hero: paper opening, patches a step quieter ----------
   The page opens colourless on purpose — the first colour on the
   scroll belongs to the slider rail's aurora pool. */
.pr-hero .hero__patch--tl { opacity: .55; }
.pr-hero .hero__slice--a { opacity: .035; }

/* ============================================================
   THE INSTRUMENT MATERIAL — smoked glass, gold rim
   Near-solid navy tint carries legibility; the rim catch-light,
   the inset top-light and the painted colour beneath do the depth
   work on every engine. Chromium refracts through #nx-lens.
   ============================================================ */
.pr-glass {
  position: relative;
  background:
    linear-gradient(118deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, 0) 38%),
    rgba(16, 36, 54, .88);
  border: 1px solid rgba(212, 164, 86, .4);
  -webkit-backdrop-filter: blur(10px) saturate(1.25);
          backdrop-filter: blur(10px) saturate(1.25);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    inset 0 -1px 0 rgba(0, 0, 0, .28),
    0 3px 8px rgba(10, 22, 34, .25),
    0 34px 70px -30px rgba(10, 22, 34, .65);
  color: #e8eff6;
}
.glass-refract .pr-glass {
  -webkit-backdrop-filter: blur(3px) url(#nx-lens) saturate(1.5);
          backdrop-filter: blur(3px) url(#nx-lens) saturate(1.5);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .pr-glass { background: rgba(15, 33, 49, .97); }
}
/* light focus ink inside the dark instruments */
.pr-glass :focus-visible, .pr-room :focus-visible { outline-color: #9ccbef; }

/* ---------- the local aurora pools (colour lives here, not on paper) ----
   Crisp hairline-edged plates of layered radials on the deep teal-navy /
   brand-blue axis with offset copper accents — siblings of the room, not
   clones. They consume the pages.js parallax (--plx). Registration grid
   re-inked inside at ~4% white. */
.pr-pool {
  position: absolute; z-index: 0; pointer-events: none;
  border-radius: 30px;
  transform: translateY(var(--plx, 0px));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1),
              0 24px 50px -30px rgba(15, 36, 54, .55);
}
.pr-pool--rail {
  inset: -2.2rem -3.2rem -2.6rem;
  border: 1px solid rgba(212, 164, 86, .28);
  background:
    linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px),
    radial-gradient(70% 120% at 12% 0%, rgba(64, 130, 178, .55), transparent 62%),
    radial-gradient(55% 90% at 88% 12%, rgba(110, 176, 219, .34), transparent 66%),
    radial-gradient(48% 80% at 82% 100%, rgba(214, 128, 52, .30), transparent 68%),
    linear-gradient(150deg, #16344c, #0f2436);
  background-size: 22px 22px, 22px 22px, auto, auto, auto, auto;
}
.pr-pool--gauge {
  inset: -1.8rem -2.5rem -2.2rem;
  border: 1px solid rgba(64, 130, 178, .35);
  background:
    linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px),
    radial-gradient(60% 100% at 80% 8%, rgba(64, 130, 178, .5), transparent 64%),
    radial-gradient(50% 76% at 10% 90%, rgba(64, 150, 162, .3), transparent 66%),
    radial-gradient(40% 60% at 16% 12%, rgba(214, 128, 52, .22), transparent 70%),
    linear-gradient(200deg, #14324a, #102a40);
  background-size: 22px 22px, 22px 22px, auto, auto, auto, auto;
}

/* ---------- instrument 1: the seat-extension slider rail ---------- */
.pr-railhost { position: relative; isolation: isolate; margin-top: 26px; }
.pr-rail {
  z-index: 1; border-radius: 20px;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .5rem 2rem; align-items: center;
  padding: 22px 28px;
}
.pr-rail__name { min-width: 11em; max-width: 14em; }
.pr-rail__q {
  display: block; font-size: 1.05rem; font-weight: 650;
  letter-spacing: -.012em; line-height: 1.4; color: #f2f6fa;
}
.pr-rail__desc {
  font-size: .92rem; color: rgba(217, 228, 238, .78);
  line-height: 1.6; max-width: 52em;
}
.pr-rail__intro { margin: 0 0 .8rem; }
.pr-slide__row { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.pr-slide__read {
  display: flex; align-items: baseline; gap: .7rem; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.pr-slide__read b { font-size: 1.05rem; color: #ffffff; font-variant-numeric: tabular-nums; }
.pr-slide__read .mono { color: #e9c27b; font-size: .86rem; font-variant-numeric: tabular-nums; }
.pr-slide__foot { margin: .8rem 0 0; font-size: .9em; color: rgba(217, 228, 238, .66); }
.pr-slide__foot a {
  color: #9ccbef; font-weight: 560;
  border-bottom: 1px solid rgba(156, 203, 239, .35);
}
.pr-slide__foot a:hover { border-bottom-color: #9ccbef; }
/* the buy control rides the glass — a shade lighter than brand so it
   stands off the navy */
.pr-rail .btn { background: #2f6f9f; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 6px 16px -8px rgba(0, 0, 0, .5); }
.pr-rail .btn:hover { background: #3b80b3; }

/* the machined slider: dark inset channel, unlabelled detent hairlines
   every 5 seats (13 steps across 35–100 — no new visible numbers),
   polished thumb with a gold ring. */
.pr-slide__row input[type=range] {
  flex: 1 1 14rem; min-width: 11rem; height: 26px;
  -webkit-appearance: none; appearance: none;
  background: transparent; cursor: pointer; accent-color: #6eb0db;
}
.pr-slide__row input[type=range]:focus-visible {
  outline: 2px solid #9ccbef; outline-offset: 4px; border-radius: 99px;
}
.pr-slide__row input[type=range]::-webkit-slider-runnable-track {
  height: 8px; border-radius: 99px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .26) 0 1px, transparent 1px 7.6923%),
    linear-gradient(180deg, rgba(0, 0, 0, .35), rgba(255, 255, 255, .06)),
    rgba(255, 255, 255, .1);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .45), 0 1px 0 rgba(255, 255, 255, .08);
}
.pr-slide__row input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; margin-top: -5px; border-radius: 99px;
  background: linear-gradient(180deg, #ffffff, #cfdde8);
  border: 1px solid rgba(212, 164, 86, .85);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .5), inset 0 1px 0 #ffffff;
}
.pr-slide__row input[type=range]::-moz-range-track {
  height: 8px; border-radius: 99px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .26) 0 1px, transparent 1px 7.6923%),
    linear-gradient(180deg, rgba(0, 0, 0, .35), rgba(255, 255, 255, .06)),
    rgba(255, 255, 255, .1);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .45), 0 1px 0 rgba(255, 255, 255, .08);
}
.pr-slide__row input[type=range]::-moz-range-progress {
  height: 8px; border-radius: 99px;
  background: linear-gradient(90deg, #4082b2, #6eb0db);
}
.pr-slide__row input[type=range]::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 99px;
  background: linear-gradient(180deg, #ffffff, #cfdde8);
  border: 1px solid rgba(212, 164, 86, .85);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .5), inset 0 1px 0 #ffffff;
}

/* ============================================================
   THE STATEMENT ROOM — #included goes full-bleed smoked navy.
   Base gradient edge to edge, steel pool upper-left, copper pool
   low-right behind the statement, conic sheen for the lens to
   bend, white registration splotch, gold rim hairlines. The
   .sec border-top is re-inked gold; section--tint is retired
   from the markup.
   ============================================================ */
.pr-room {
  background: linear-gradient(180deg, #0e2334, #132c42);
  border-top: 1px solid rgba(212, 164, 86, .35);
  border-bottom: 1px solid rgba(212, 164, 86, .35);
  color: #e6eef5;
}
.pr-room__pool { position: absolute; z-index: 0; pointer-events: none; }
.pr-room__pool--steel {
  left: -12%; top: -18%; width: 64%; height: 90%;
  background: radial-gradient(closest-side, rgba(64, 130, 178, .32), transparent 70%);
}
.pr-room__pool--copper {
  right: -10%; bottom: -22%; width: 56%; height: 80%;
  background: radial-gradient(closest-side, rgba(196, 124, 60, .2), transparent 72%);
}
.pr-room__sheen {
  position: absolute; z-index: 0; pointer-events: none;
  right: 2%; top: 6%; width: 52%; height: 88%;
  background: conic-gradient(from 40deg at 58% 45%,
    transparent 0deg, rgba(255, 255, 255, .08) 32deg, transparent 84deg,
    transparent 360deg);
}
/* the house drafting grid, re-inked in white at 3%, splotch-masked */
.pr-room__grid {
  position: absolute; z-index: 0; pointer-events: none;
  left: -6%; top: -12%; width: min(46vw, 600px); aspect-ratio: 1;
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='120'%20height='120'%3E%3Cpath%20d='M60%2054v12M54%2060h12'%20stroke='%23ffffff'%20stroke-opacity='.16'/%3E%3C/svg%3E"),
    linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, .02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .02) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 120px 120px, 20px 20px, 20px 20px;
  background-position: 0 0, 60.5px 60.5px, 60.5px 60.5px, .5px .5px, .5px .5px;
  -webkit-mask-image: radial-gradient(closest-side, #000 18%, transparent 98%);
          mask-image: radial-gradient(closest-side, #000 18%, transparent 98%);
}
/* light ink at AA on navy — the global muted/faint vars fail silently here */
.pr-room h2 { color: #f4f8fb; }
.pr-room .sec-connect__copy > p { color: rgba(222, 232, 241, .8); }
.pr-room .inc-list li { color: #dfe9f2; }
.pr-room .inc-list li::before {
  background: rgba(214, 128, 52, .32);
  box-shadow: inset 0 0 0 1px rgba(233, 177, 116, .55);
}

/* ---------- instrument 2: the flagship monthly statement ----------
   Smoked-glass console, gold rim, travelling seam on the total row.
   The numbers are dead by design; only the dotted leaders draw —
   once, left to right, in a single step, one shared delay. */
.pr-bill {
  max-width: 560px; margin-inline: auto;
  padding: 1.45rem 1.6rem 1.35rem; border-radius: 20px;
  transform: translateY(var(--plx, 0px));
}
.pr-bill .bill__head {
  color: rgba(222, 232, 241, .74);
  border-bottom-color: rgba(255, 255, 255, .14);
}
.pr-bill .bill__head i { color: #e0a163; }
.pr-bill .bill__row b { color: #f4f8fb; }
.pr-bill .bill__row b.is-zero { color: rgba(230, 238, 245, .42); }
.pr-bill .bill__row b.is-never { color: #e0a163; }
.pr-bill .bill__row small { color: rgba(217, 228, 238, .62); }
.pr-bill .bill__lead { border-bottom-color: rgba(255, 255, 255, .32); }
.pr-bill .bill__row--total {
  position: relative; --r-ctl: 10px;
  border-top-color: rgba(212, 164, 86, .4);
  padding-inline: .6rem; margin-inline: -.6rem;
}
.pr-bill .bill__row--total b { color: #e9c27b; }
.pr-bill .bill__foot {
  color: rgba(217, 228, 238, .56);
  border-top-color: rgba(255, 255, 255, .1);
}
/* the leader sweep: live meters ruling themselves off at €0.00.
   One ≤500ms step, all rows together, fx-gated, motion-safe. */
html.fx .pr-bill .bill__lead {
  clip-path: inset(0 100% 0 0);
  transition: clip-path .5s ease-out .4s;
}
html.fx .pr-room.in-view .pr-bill .bill__lead { clip-path: inset(0 0 0 0); }
@media (prefers-reduced-motion: reduce) {
  html.fx .pr-bill .bill__lead { clip-path: none; transition: none; }
}

/* ---------- instrument 3: the seat gauge — the only moving needle ----
   Same glass family over its own steel-leaning pool. The existing
   html.fx .in-view fill animation (main.css) keeps driving --p. */
.pr-well { position: relative; isolation: isolate; }
.pr-well .pr-gauge { z-index: 1; }
.pr-gauge { border-radius: 20px; padding: 1.45rem 1.6rem 1.4rem; }
.pr-gauge .gauge__head { color: rgba(222, 232, 241, .74); }
.pr-gauge .gauge__head .mono { color: #e9c27b; }
.pr-gauge .gauge__bar {
  background: rgba(255, 255, 255, .12);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .4);
}
.pr-gauge .gauge__fill { background: linear-gradient(90deg, #4082b2, #6eb0db); }
.pr-gauge .gauge__tick { background: rgba(255, 255, 255, .45); }
.pr-gauge .gauge__tick i { color: rgba(217, 228, 238, .68); }
.pr-gauge .gauge__row + .gauge__row { border-top-color: rgba(255, 255, 255, .09); }
.pr-gauge .gauge__row > i { color: #9ccbef; }
.pr-gauge .gauge__row--warn > i { color: #e0a163; }
.pr-gauge .gauge__row b { color: #f2f6fa; }
.pr-gauge .gauge__row p { color: rgba(222, 232, 241, .74); }

/* ---------- checkout pipe: sharpened clay, deliberately NOT glass ----
   #after sits on the pale tint; the dark room stays unique. */
#after .pipe { border-radius: 18px; }
#after .pipe__head { border-bottom-color: rgba(34, 84, 121, .16); }
#after .pipe__stage + .pipe__stage { border-top-color: rgba(34, 84, 121, .12); }

/* ---------- close band: a shallow hairline-edged aurora wash so the
   two big buttons read against colour; crisp edges, no faded masks. */
.pr-close-wash {
  position: absolute; z-index: 0; left: 0; right: 0;
  top: 50%; height: min(58%, 340px); transform: translateY(-34%);
  pointer-events: none;
  border-top: 1px solid rgba(212, 164, 86, .25);
  border-bottom: 1px solid rgba(212, 164, 86, .25);
  background:
    radial-gradient(40% 90% at 30% 50%, rgba(64, 130, 178, .14), transparent 70%),
    radial-gradient(36% 80% at 72% 55%, rgba(214, 128, 52, .1), transparent 72%);
}

/* ============================================================
   THE PHONE STORY (≤860px) — the room goes full-bleed cleanly,
   pools run edge to edge behind their consoles, console padding
   loosens, nothing clips, floating accents step aside.
   ============================================================ */
@media (max-width: 860px) {
  .pr-railhost { margin-top: 20px; }
  .pr-rail {
    grid-template-columns: minmax(0, 1fr);
    gap: .9rem; padding: 20px 20px 22px;
  }
  .pr-rail__name { min-width: 0; max-width: none; }
  .pr-rail .btn { justify-self: start; }
  .pr-slide__read { width: 100%; justify-content: space-between; }
  .pr-pool--rail, .pr-pool--gauge {
    left: calc(-1 * var(--gutter)); right: calc(-1 * var(--gutter));
    border-radius: 0; border-left: 0; border-right: 0;
  }
  .pr-pool--rail { top: -1.4rem; bottom: -1.6rem; }
  .pr-pool--gauge { top: -1.2rem; bottom: -1.4rem; }
  .pr-bill { padding: 1.15rem 1.05rem 1.1rem; border-radius: 16px; }
  .pr-bill .bill__row--total { padding-inline: .45rem; margin-inline: -.45rem; }
  .pr-gauge { border-radius: 16px; padding: 1.2rem 1.1rem 1.15rem; }
  .pr-room__grid { left: -18vw; top: -6%; width: min(88vw, 430px); }
  .pr-room__sheen { right: -12%; width: 70%; }
  .pr-close-wash { height: 66%; }
}

/* ---------- #why: /contact's testimonial block, ported WHOLE (2026-08-26)
   Round 1 kept .ctcq__quote's class names and dropped everything that makes
   the card work: the navy ground it needs for contrast, the transparent
   cutout, the wedges. What was left was three stock photographs in 16:9
   boxes, i.e. a blog-post grid, and it was killed on sight. The card is not
   its border-radius; it is a white strip floating on navy with a person cut
   out of any ground at all. Port both halves or do not port it.
   So the whole /contact block comes over: .ctcq carries the slab, its
   diagonal texture and the amber display type (h2 joins h1 in the rule down
   in the contact block), .ctcq__list carries the three reasons that round 1
   had wrongly inflated into three testimonials, and .ctcq__quote carries the
   strip untouched - side by side, cutout bled into the right half, wedges
   live.
   /pricing adds exactly one thing: the seating. /contact stacks head, list
   and card down a 47.9vw column; here the band is full-bleed and the card
   sits BESIDE the copy, capped at the 35rem the base already sets so the
   strip keeps the reference's proportions instead of stretching to a half
   of 1440. */
.sec--slab { padding-block: 0; border-top: 0; }
.sec--slab .whyq {
  /* one class deeper than .ctcq on purpose: .ctcq's own padding and radius
     sit ~5900 lines further down this file, so a bare .whyq would tie on
     specificity and lose on file order.
     the section is already body-width and .sec is overflow:clip, so the
     bleed is the plain 100vw move. Both far corners curve now (founder,
     2026-08-27: "make the top left corner curve too") - a symmetric
     diagonal - and .ctcq's drop shadow is dropped: on a full-bleed band it
     only ever read as a smudge at the corners. /contact's .ctcq keeps both. */
  width: 100vw; margin-left: calc(50% - 50vw);
  padding: clamp(3.6rem, 6vw, 5.2rem) 0;
  border-radius: 110px 0 110px 0;
  box-shadow: none;
}
@media (max-width: 980px) {
  /* mirror .ctcq's own mobile step-down (72px), both far corners */
  .sec--slab .whyq { border-radius: 72px 0 72px 0; }
}
.sec--slab .whyq::before {
  /* .ctcq's diagonal retuned for a box that is wide and short instead of
     narrow and tall. The stock 135%/-55%/44% put the rotated square's APEX
     on frame at ~1440: a pointed dark arrow beside the headline, which is
     the one thing that construction never shows on /contact. Bigger square,
     pushed further left and down, so the apex clears the frame entirely and
     what crosses is a single broad seam with the deeper wash in the
     lower-left corner - the reference's actual read. */
  width: 120%; left: -85%; top: 30%;
}
.whyq__in {
  /* ONE gap token for both rows. The masthead's list and the second card
     have to start on the same x or the band reads as two unrelated grids
     stacked by accident; sharing the value makes that hold at every width
     instead of only at the one I happened to screenshot. */
  --whyq-gap: clamp(1rem, 2vw, 1.8rem);
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.8rem, 3.6vw, 3.2rem);
  position: relative; z-index: 1;
}
/* head left, the three reasons right. Stacking them instead left the whole
   top right of a full-bleed band as dead navy. Centred, not end-aligned:
   baseline-matching the display type to the last tick drops the headline
   into a bottom-heavy float with a hole above it. */
.whyq__say {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--whyq-gap); align-items: center;
}
.whyq .ctcq__list { margin-top: 0; }
.whyq__cards {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--whyq-gap); align-items: stretch;
}
/* the base caps the strip at 35rem for /contact's single column. Here two
   of them divide the container, which lands at ~37.5rem each - close enough
   to the reference's proportions that letting them fill beats leaving a
   hole between two cards that are supposed to read as one row. Grid stretch
   keeps both the same height, and figcaption's margin-top:auto (base rule)
   is what pins both attributions to the same line. */
.whyq .ctcq__quote { margin: 0; max-width: none; width: 100%; }

/* the cards give up two-across FIRST, and well before the masthead does.
   Two 35rem strips stop fitting around here; squeezed to ~458px the split
   turns the card into a square, the quote wraps to nine lines and the
   wedges become huge triangles. The reference is a WIDE FLAT STRIP or it is
   nothing, so below this they stack at the width they were measured at,
   left-aligned to the headline rather than centred (centring floats them
   off the page's own axis). */
@media (max-width: 1100px) {
  .whyq__cards { grid-template-columns: minmax(0, 1fr); }
  .whyq .ctcq__quote { max-width: 35rem; justify-self: start; }
}
@media (max-width: 900px) {
  .whyq__say { grid-template-columns: minmax(0, 1fr); }
  .whyq .ctcq__list { margin-top: clamp(1.2rem, 2.2vw, 1.8rem); }
}
}

/* ---------- the band's photographs sit in the house glass mat ----------
   .glv keeps an 18% gutter down its left because /affiliate and the old
   checkout block park a .glv__card in it. Nothing parks here: the mat is a
   frame for the photograph, not a stage for a card, so the gutter closes. */
.dsxz__asset .glv { width: 100%; }
.dsxz__asset .glv__scene { margin-left: 0; }

/* ==================== about ==================== */
/* ==================================================================
   ABOUT — "The Lit Boundary" (2026-08-04 redesign wave)
   Namespace: .abt-  ·  Colour identity: night blueprint — near-black
   blue ground, thin gold drafting lines. ONLY section 02 (.abt-room)
   goes dark; everything else stays daylight drafting paper.
   Governing rule: paper never animates; only powered-on things do.
   All motion sits behind html.fx + .in-view (pages.js observer).
   ================================================================== */

/* ---------------- hero: the registration sheet, sharpened -----------
   Paper stays paper and deliberately still. The graph-blue grid runs a
   step deeper so it foreshadows the night blueprint; corner crosses
   sharpen; the dl rules go crisp hairline; dt labels take copper. */
.abt-hero .draftsheet {
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='11'%20height='11'%3E%3Cpath%20d='M5.5%201v9M1%205.5h9'%20stroke='%23225479'%20stroke-opacity='.6'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='11'%20height='11'%3E%3Cpath%20d='M5.5%201v9M1%205.5h9'%20stroke='%23225479'%20stroke-opacity='.6'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='11'%20height='11'%3E%3Cpath%20d='M5.5%201v9M1%205.5h9'%20stroke='%23225479'%20stroke-opacity='.6'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='11'%20height='11'%3E%3Cpath%20d='M5.5%201v9M1%205.5h9'%20stroke='%23225479'%20stroke-opacity='.6'/%3E%3C/svg%3E"),
    linear-gradient(rgba(34, 84, 121, .075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 84, 121, .075) 1px, transparent 1px);
  box-shadow: inset 0 1px 0 #fff, var(--plate-shadow);
}
.abt-hero .regplate dl > div { border-bottom: 1px solid var(--line); }
.abt-hero .regplate dl > div:last-child { border-bottom: 0; }
.abt-hero .regplate dt { color: var(--copper); }
.abt-hero .regplate dd em { font-variant-numeric: tabular-nums; }
/* the backdrop patch leans navy-teal: the page's colour story points
   at the dark band ahead (the pattern itself is untouched) */
.abt-hero .hero__patch--tl::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(58% 58% at 38% 42%, rgba(16, 36, 54, .10), transparent 72%),
    radial-gradient(48% 48% at 72% 26%, rgba(64, 150, 162, .13), transparent 70%);
}

/* ---------------- 01: the capacity meter, promoted -------------------
   A true instrument plate: inset top-light, an engraved two-voice tick
   ruler, tabular figures. The bars keep the existing --w width fx fill;
   the percentage readouts (60/40/100) count up via the page's own
   fragment JS and land exactly on the frozen numbers. */
.abt-solution .capmeter {
  border-radius: 20px;
  background: linear-gradient(168deg, #ffffff 0%, #eef3f7 100%);
  border: 1px solid rgba(34, 84, 121, .12);
  box-shadow:
    inset 0 1.5px 0 #fff,
    inset 0 -1px 0 rgba(34, 84, 121, .06),
    0 3px 7px rgba(22, 33, 43, .05),
    0 26px 48px -20px rgba(34, 84, 121, .3);
}
.abt-solution .capmeter__tag { font-variant-numeric: tabular-nums;
  color: var(--muted); }
.abt-solution .capmeter__ruler::after {
  height: 9px;
  background-image:
    linear-gradient(90deg, rgba(34, 84, 121, .38) 1.5px, transparent 1.5px),
    linear-gradient(90deg, var(--line-strong) 1px, transparent 1px);
  background-size: 50% 100%, 10% 55%;
  background-position: 0 0, 0 100%;
  background-repeat: repeat-x, repeat-x;
  border-right: 1px solid rgba(34, 84, 121, .38);
}
.abt-solution .capmeter__seg {
  display: flex; align-items: center; justify-content: space-between;
  gap: .4rem; overflow: hidden;
}
.abt-solution .capmeter__seg i { flex: 1 1 auto; min-width: 0; }
.abt-ct {
  font-style: normal; flex: none;
  font-size: .72rem; font-weight: 650; letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
  padding-right: .62rem;
}
.capmeter__seg--work .abt-ct { color: #fff; opacity: .92; }
.capmeter__seg--route .abt-ct { color: #7a4315; }
/* the readout ledger: bottom hairlines only, copper plotted ticks */
.abt-solution .gridfacts--ledger .gridfact {
  border-bottom: 1px solid var(--line);
}
.abt-solution .gridfacts--ledger .gridfact:last-child { border-bottom: 0; }
.abt-solution .gridfacts--ledger .gridfact::before {
  background: var(--copper-wash-2);
  box-shadow: inset 0 0 0 1px rgba(168, 94, 36, .55);
}

/* ================= 02: THE ROOM — the lit boundary ==================
   The page's single dramatic move: a full-bleed smoked-navy room. The
   ground is painted, never pasted — opaque navy, two aurora pools
   drifting, a conic sheen, the registration grid in pale cyan, gold
   rim hairlines top and bottom. */
.sec.abt-room {
  /* .sec + .sec draws a steel hairline at (0,2,0); match-and-beat it so
     the room's own gold rims are the only edges */
  border-top: 0;
  padding-block: clamp(4.4rem, 9vw, 7rem);
  background:
    /* smoked-glass conic sheen */
    conic-gradient(from 214deg at 62% 38%,
      transparent 0 38%, rgba(120, 170, 205, .08) 50%, transparent 64%),
    /* the house registration grid, pale cyan, whisper-quiet */
    repeating-linear-gradient(0deg,
      rgba(140, 200, 230, .05) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg,
      rgba(140, 200, 230, .05) 0 1px, transparent 1px 44px),
    /* the opaque night ground */
    linear-gradient(180deg, #0e2334 0%, rgba(16, 36, 54, .98) 55%, #0c1f2f 100%);
}
.abt-room + .sec { border-top: 0; }
/* the aurora pools: teal low-left, copper upper-right, drifting slowly */
.abt-room::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(52% 60% at 14% 88%, rgba(45, 160, 170, .28), transparent 70%),
    radial-gradient(46% 54% at 86% 8%, rgba(196, 120, 60, .20), transparent 72%);
  background-size: 175% 175%, 175% 175%;
  background-repeat: no-repeat, no-repeat;
  background-position: 0% 100%, 100% 0%;
}
html.fx .abt-room::before {
  animation: abt-drift 40s ease-in-out infinite alternate;
  animation-play-state: paused;
}
html.fx .abt-room.in-view::before { animation-play-state: running; }
@keyframes abt-drift {
  to { background-position: 34% 66%, 68% 30%; }
}
/* gold rim hairlines + the one entry pass of light along the crown */
.abt-room::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(100deg, transparent,
      rgba(240, 210, 150, .95) 45%, rgba(255, 236, 200, 1) 50%,
      rgba(240, 210, 150, .95) 55%, transparent),
    linear-gradient(90deg, transparent 2%, rgba(214, 170, 90, .5) 28%,
      rgba(232, 192, 122, .72) 50%, rgba(214, 170, 90, .5) 72%, transparent 98%),
    linear-gradient(90deg, transparent 4%, rgba(214, 170, 90, .38) 50%, transparent 96%);
  background-size: 260px 2px, 100% 1px, 100% 1px;
  background-repeat: no-repeat;
  background-position: -280px 0, 0 0, 0 100%;
}
html.fx .abt-room.in-view::after {
  animation: abt-rim-pass 1.9s cubic-bezier(.4, .15, .2, 1) .35s forwards;
}
@keyframes abt-rim-pass {
  to { background-position: calc(100% + 280px) 0, 0 0, 0 100%; }
}

/* -- the head stands on the dark ground: gold rule, lit type -- */
.abt-room .section-head h2 { color: #f2f7fb; }
.abt-room .head-rule {
  background: linear-gradient(90deg,
    #d6aa5a 0 60%, transparent 60% 70%, rgba(232, 192, 122, .45) 70% 100%);
}

/* -- the prose: one lit paper sheet on the dark table (paper is for
   reading; it never animates beyond its rise) -- */
.abt-room .prose {
  background: linear-gradient(168deg, #ffffff, #f2f6f9);
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 18px;
  box-shadow:
    inset 0 1.5px 0 #fff,
    0 34px 64px -30px rgba(0, 0, 0, .65);
  padding: clamp(1.35rem, 2.6vw, 2.1rem);
}

/* -- the boundary plan, inverted: the night blueprint -- */
.abt-room .boundplan { min-height: 340px;
  transform: translateY(var(--plx, 0px)); }
.abt-room .draftsheet {
  border: 1px solid rgba(214, 170, 90, .3);
  background-color: #0b1d2c;
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='11'%20height='11'%3E%3Cpath%20d='M5.5%201v9M1%205.5h9'%20stroke='%237fb4d8'%20stroke-opacity='.55'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='11'%20height='11'%3E%3Cpath%20d='M5.5%201v9M1%205.5h9'%20stroke='%237fb4d8'%20stroke-opacity='.55'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='11'%20height='11'%3E%3Cpath%20d='M5.5%201v9M1%205.5h9'%20stroke='%237fb4d8'%20stroke-opacity='.55'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='11'%20height='11'%3E%3Cpath%20d='M5.5%201v9M1%205.5h9'%20stroke='%237fb4d8'%20stroke-opacity='.55'/%3E%3C/svg%3E"),
    linear-gradient(rgba(140, 200, 230, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(140, 200, 230, .06) 1px, transparent 1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    14px 14px 0 rgba(0, 0, 0, .28);
}
/* the travelling dashed wall: a repeating-gradient marching frame,
   crawling clockwise; paused until the room powers on */
.abt-room .boundplan__wall {
  border: 0;
  background-image:
    linear-gradient(90deg, rgba(226, 184, 110, .78) 0 7px, transparent 7px 14px),
    linear-gradient(90deg, rgba(226, 184, 110, .78) 0 7px, transparent 7px 14px),
    linear-gradient(180deg, rgba(226, 184, 110, .78) 0 7px, transparent 7px 14px),
    linear-gradient(180deg, rgba(226, 184, 110, .78) 0 7px, transparent 7px 14px);
  background-size: 14px 1.5px, 14px 1.5px, 1.5px 14px, 1.5px 14px;
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-position: 0 0, 0 100%, 0 0, 100% 0;
}
html.fx .abt-room .boundplan__wall {
  animation: abt-wall-travel 8s linear infinite;
  animation-play-state: paused;
}
html.fx .abt-room.in-view .boundplan__wall { animation-play-state: running; }
@keyframes abt-wall-travel {
  to { background-position: 14px 0, -14px 100%, 0 -14px, 100% 14px; }
}
/* the unit: the raw mark on dark — no tile chrome, just a breath of light */
.abt-room .boundplan__unit {
  background: radial-gradient(closest-side, rgba(140, 200, 230, .16), transparent 78%);
  border: 0; border-radius: 0; box-shadow: none;
}
.abt-room .boundplan__unit img {
  width: 34px; height: 34px; opacity: .96;
  filter: brightness(0) invert(1) drop-shadow(0 0 7px rgba(160, 210, 235, .55));
}
/* the answer line fires out through the citation pair (fx unchanged:
   main.css scales it 0 -> 1 on .in-view) */
.abt-room .boundplan__ans {
  background: linear-gradient(90deg, rgba(140, 200, 230, .85), rgba(232, 192, 122, .95));
  box-shadow: 0 0 8px rgba(160, 210, 235, .35);
}
.abt-room .boundplan__cites i {
  box-shadow: 0 0 0 2.5px rgba(11, 29, 44, .96), 0 0 12px rgba(214, 140, 60, .55);
}
/* the manifest sheet stays lit paper; its wire goes pale cyan */
.abt-room .boundplan__sheet {
  border: 1px solid rgba(226, 184, 110, .45);
  box-shadow: 2px 2.5px 0 rgba(0, 0, 0, .35);
}
.abt-room .boundplan__wire {
  border-left: 1px dotted rgba(140, 200, 230, .55);
  border-top: 1px dotted rgba(140, 200, 230, .55);
}
/* the a-d pins become gold-ringed lamps (reveal stagger unchanged) */
.abt-room .bpin {
  color: #f4d9a6;
  border: 1px solid rgba(232, 192, 122, .68);
  background:
    radial-gradient(circle at 50% 32%, rgba(232, 192, 122, .34), rgba(120, 80, 30, .10) 70%),
    rgba(18, 38, 55, .94);
  box-shadow:
    0 0 0 3px rgba(11, 29, 44, .85),
    0 0 14px rgba(230, 180, 100, .5);
}

/* -- the four "One ..." notes: true glass chips floating in the room,
   glass finally over colour; the legend lives in the room it annotates -- */
.abt-room .notefacts--grid {
  margin-top: clamp(2rem, 4.5vw, 3rem);
  gap: 1.05rem 1.05rem;
  transform: translateY(var(--plx, 0px));
}
.abt-room .notefact {
  padding: 1.05rem 1.2rem 1rem 3.15rem;
  border-radius: 14px;
  background: linear-gradient(168deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .05));
  border: 1px solid rgba(214, 170, 90, .34);
  -webkit-backdrop-filter: blur(8px) saturate(1.5);
          backdrop-filter: blur(8px) saturate(1.5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .26),
    0 20px 44px -20px rgba(0, 0, 0, .6);
}
.glass-refract .abt-room .notefact {
  -webkit-backdrop-filter: blur(2px) url(#nx-lens) saturate(1.6);
          backdrop-filter: blur(2px) url(#nx-lens) saturate(1.6);
}
.abt-room .notefact::before {
  left: 1.1rem; top: 1.14rem;
  color: #f4d9a6;
  border: 1px solid rgba(232, 192, 122, .68);
  background:
    radial-gradient(circle at 50% 32%, rgba(232, 192, 122, .3), rgba(120, 80, 30, .08) 70%),
    rgba(18, 38, 55, .9);
  box-shadow: 0 0 12px rgba(230, 180, 100, .45);
}
.abt-room .notefact b { color: #f2f7fb; }
.abt-room .notefact p { color: rgba(214, 228, 240, .76); }

/* ---------------- 03: operate — daylight drafting plaques ------------
   Nothing after the room competes with it: the drawer-front clay goes
   flat drafted paper — crisp hairlines, a hard offset shadow, plotted
   copper ticks. No glass here. */
.abt-operate .gridfacts--plaques { gap: .8rem; }
.abt-operate .gridfacts--plaques .gridfact {
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  box-shadow: inset 0 1px 0 #fff, 5px 5px 0 rgba(34, 84, 121, .07);
  padding: 1rem 1.1rem .95rem;
}
.abt-operate .gridfacts--plaques .gridfact b {
  display: flex; align-items: center; gap: .55em;
}
.abt-operate .gridfacts--plaques .gridfact b::before {
  content: ""; flex: none; width: 8px; height: 8px;
  background: var(--copper-wash-2);
  box-shadow: inset 0 0 0 1px rgba(168, 94, 36, .5);
}

/* ---------------- FAQ: the ask instrument -----------------------------
   A product-fidelity glass ask bar on a SLIM aurora strip (glass only
   over colour, never white) self-typing the six frozen questions via
   the existing data-type-cycle engine; the answers below stay lifted
   paper sheets. Everything scoped to .abt-faq — render_qa_rail serves
   thirteen pages and is not touched. */
.abt-faq > .container > div[data-rise]:first-child { text-align: center; }
.abt-faq .head-rule { margin-inline: auto; }
.abt-faq h2 { margin-inline: auto; margin-bottom: clamp(1.2rem, 2.6vw, 1.8rem); }
.abt-ask { max-width: 860px; margin: 0 auto clamp(1rem, 2.4vw, 1.5rem); }
.abt-ask__strip {
  border-radius: 20px;
  padding: clamp(.8rem, 2vw, 1.05rem);
  background:
    radial-gradient(70% 130% at 12% 100%, rgba(45, 160, 170, .42), transparent 66%),
    radial-gradient(62% 130% at 90% 0%, rgba(196, 120, 60, .34), transparent 68%),
    linear-gradient(168deg, #16344c, #0e2334);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    inset 0 -1px 0 rgba(214, 170, 90, .22),
    0 26px 52px -26px rgba(10, 26, 41, .62);
}
.abt-ask__bar {
  display: flex; align-items: center; gap: .8em;
  border-radius: 13px;
  padding: .85em 1.1em;
  font-size: clamp(.98rem, 1.5vw, 1.12rem); font-weight: 560;
  letter-spacing: -.01em; color: #f7fafc;
  background:
    linear-gradient(112deg, rgba(255, 255, 255, .22) 2%, rgba(255, 255, 255, .05) 42%),
    rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .38);
  -webkit-backdrop-filter: blur(8px) saturate(1.5);
          backdrop-filter: blur(8px) saturate(1.5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .38),
    0 14px 30px -16px rgba(0, 0, 0, .5);
}
.glass-refract .abt-ask__bar {
  -webkit-backdrop-filter: blur(2px) url(#nx-lens) saturate(1.6);
          backdrop-filter: blur(2px) url(#nx-lens) saturate(1.6);
}
/* the plus: pure CSS cross, lit */
.abt-ask__plus { position: relative; flex: none; width: 15px; height: 15px; opacity: .75; }
.abt-ask__plus::before, .abt-ask__plus::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%); background: #cfe4f2; border-radius: 2px;
}
.abt-ask__plus::before { width: 2px; height: 15px; }
.abt-ask__plus::after { width: 15px; height: 2px; }
/* real-texting overflow: long questions keep tail + caret in view */
.abt-ask__view {
  display: flex; align-items: center; justify-content: flex-end;
  min-width: 0; flex: 1 1 auto; overflow: hidden;
}
.abt-ask__type { white-space: nowrap; flex: 0 0 auto; display: block;
  min-height: 1.5em; line-height: 1.5; text-align: left; }
.abt-ask__caret { width: 2.5px; height: 1.15em; flex: none; margin-right: auto;
  margin-left: 2px; background: #e8c07a; border-radius: 2px; }
html.fx .abt-ask__caret { animation: abt-caret 1.06s steps(2) infinite; }
@keyframes abt-caret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  html.fx .abt-ask__caret { animation: none; }
}
/* the accordion below: lifted paper answer sheets, centered column */
.abt-faq .qa { max-width: 860px; margin-inline: auto; text-align: left; }
.abt-faq .qa__unit {
  background: linear-gradient(168deg, #ffffff, #f3f7fa);
  border: 1px solid rgba(34, 84, 121, .1);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: inset 0 1.5px 0 #fff, 0 14px 30px -20px rgba(16, 36, 58, .3);
}
.abt-faq .qa__unit.is-open {
  background: #fff;
  box-shadow: inset 0 1.5px 0 #fff, 0 22px 44px -20px rgba(16, 36, 58, .32);
}
.abt-faq .qa__q:hover { background: rgba(34, 84, 121, .05); }
/* the doors out: rcite-family citation chips — a plotted number, the
   label, the copper arrow */
.abt-faq .qa__links { counter-reset: abtlink; }
.abt-faq .qa__links a { counter-increment: abtlink; gap: .5em; }
.abt-faq .qa__links a::before {
  content: counter(abtlink);
  width: 1.05rem; height: 1.05rem; border-radius: 99px; flex: none;
  display: grid; place-items: center;
  background: var(--copper); color: #fff;
  font-size: .58rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ---------------- close: standard centered band ----------------------
   The demo button earns the travelling rim light (span.nx-seam in the
   markup); one quiet navy echo under the patch. */
.abt-close .hero__patch--close::after {
  content: ""; position: absolute; inset: 10%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(16, 36, 54, .12), transparent 74%);
}

/* ---------------- no backdrop-filter: firmer paint ------------------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .abt-room .notefact { background: rgba(22, 44, 62, .93); }
  .abt-ask__bar { background: rgba(22, 44, 62, .86); }
}

/* ---------------- the phone story ------------------------------------
   The dark room goes full-bleed cleanly, the plan keeps every element
   inside its plate, chips stack one wide, the ask strip stays slim. */
@media (max-width: 860px) {
  .abt-room { padding-block: 3.6rem 3.4rem; }
  .abt-room .prose { padding: 1.25rem 1.15rem; border-radius: 16px; }
  .abt-room .draftsheet { box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08), 9px 9px 0 rgba(0, 0, 0, .26); }
  .abt-ask__strip { border-radius: 16px; padding: .65rem; }
  .abt-ask__bar { border-radius: 11px; font-size: .95rem; padding: .75em .9em; }
}
@media (max-width: 700px) {
  .abt-room .boundplan { min-height: 260px; }
  .abt-room .boundplan__unit img { width: 28px; height: 28px; }
  .abt-room .notefacts--grid { gap: .8rem; margin-top: 1.7rem; }
  .abt-room .notefact { padding: .95rem 1.05rem .9rem 3rem; }
}
@media (max-width: 440px) {
  .abt-room .boundplan { min-height: 235px; }
  .abt-room .boundplan__sheet { width: 26px; height: 33px; }
}

/* ==================== contact ==================== */
/* ============================================================
   CONTACT — "The Lit Desk" (redesign wave 2026-08-04)
   The hero stays daylight; below it a crisp hairline horizon drops
   the whole contact section into the site's one dark room: deep navy
   ground, two parallax aurora pools, the house registration grid
   re-voiced in gold. One lit object — the enquiry form as a solid
   white PAPER sheet with an nx-seam travelling rim — and, to its
   right, five dark-glass dispatch chips on a gold bus-bar.
   `.sec-contact:focus-within` is the master switch: writing on the
   paper lifts its halo and sends a light pulse down the bus.
   All new classes are ctf- namespaced. Appended after main.css, so
   equal-specificity ties resolve here.
   ============================================================ */

/* ---------- the dark room ---------- */
.sec-contact {
  background:
    linear-gradient(180deg, rgba(16, 36, 54, .96), rgba(16, 36, 54, .88)),
    #0f2233;
  border-top: 1px solid rgba(12, 26, 38, .55);
}
/* gold rim-light along the top horizon, and a closing hairline that
   hands the room back to the footer — crisp edges, no fades downward */
.sec-contact::before,
.sec-contact::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px;
  z-index: 2; pointer-events: none;
  background: linear-gradient(90deg,
    rgba(232, 190, 130, 0) 2%,
    rgba(232, 190, 130, .5) 22%,
    rgba(232, 190, 130, .5) 78%,
    rgba(232, 190, 130, 0) 98%);
}
.sec-contact::before { top: 0; }
.sec-contact::after { bottom: 0; opacity: .55; }

/* the house 40px registration grid + crosses, night-voiced in gold */
.ctf-grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='120'%20height='120'%3E%3Cpath%20d='M60%2054v12M54%2060h12'%20stroke='%23E8BE82'%20stroke-opacity='.28'/%3E%3C/svg%3E"),
    linear-gradient(rgba(232, 190, 130, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232, 190, 130, .05) 1px, transparent 1px);
  background-size: 120px 120px, 40px 40px, 40px 40px;
  background-position: 0 0, .5px .5px, .5px .5px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 7%, #000 93%, transparent);
}

/* two aurora pools; pages.js [data-plx] writes --plx, they drift on it.
   .sec's overflow:clip keeps them inside the band at every width. */
.ctf-pool {
  position: absolute; z-index: 0; pointer-events: none; aspect-ratio: 1;
  border-radius: 50%;
  transform: translate3d(0, var(--plx, 0px), 0);
  will-change: transform;
}
.ctf-pool--a {
  width: min(58vw, 780px); left: -13%; bottom: -24%;
  background: radial-gradient(closest-side,
    rgba(80, 152, 210, .22), rgba(80, 152, 210, .10) 46%, transparent 72%);
}
.ctf-pool--b {
  width: min(46vw, 620px); right: -9%; top: -18%;
  background: radial-gradient(closest-side,
    rgba(216, 152, 72, .15), rgba(216, 152, 72, .06) 48%, transparent 74%);
}

/* ---------- the split: paper wide, dispatch narrow ---------- */
.sec-contact .cols-2.ctf-split {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(1.7rem, 3.6vw, 3.6rem);
  align-items: start;
}

/* ---------- the lit paper sheet ---------- */
.ctf-paperwrap { position: relative; }

/* the desk-lamp halo behind the sheet; :focus-within lifts it a loud,
   unmistakable step (opacity .45 -> 1 plus a gentle swell) */
.ctf-halo {
  position: absolute; inset: -9% -8% -12%; z-index: 0; pointer-events: none;
  opacity: .45;
  background:
    radial-gradient(58% 52% at 50% 40%, rgba(146, 196, 238, .32), transparent 70%),
    radial-gradient(85% 74% at 50% 56%, rgba(240, 205, 145, .13), transparent 76%);
  transition: opacity .5s ease, transform .5s ease;
}
.sec-contact:focus-within .ctf-halo { opacity: 1; transform: scale(1.05); }

.ctf-paper {
  position: relative; z-index: 1;
  background: #fff;
  border: 1px solid rgba(22, 33, 43, .12);   /* static rim: the sheet reads
                                                finished when nx-seam hides
                                                under reduced motion */
  border-radius: 18px;
  padding: clamp(1.3rem, 2.6vw, 2.1rem);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, .95),
    inset 0 -1px 0 rgba(34, 84, 121, .06),
    0 1px 2px rgba(4, 14, 24, .4),
    0 26px 64px -20px rgba(2, 10, 18, .8);
}
/* concentric seam ring for the big sheet (nx-seam's default ring is
   sized for controls) */
.ctf-paper > .nx-seam { inset: -2px; border-radius: 20px; padding: 2px; }

/* labels drop the mono voice (founder ban) — small non-mono caps */
.sec-contact .field label {
  font-family: var(--font-sans);
  font-size: .73rem; font-weight: 640;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted);
}
/* fields sit ON the paper: a whisper of tint so the sheet stays the
   brightest plane */
.sec-contact .field input,
.sec-contact .field textarea {
  background: #f7fafc;
  border-color: rgba(22, 33, 43, .16);
}
.sec-contact .field input:focus,
.sec-contact .field textarea:focus { background: #fff; }
/* browser autofill yellow never lands on the sheet */
.sec-contact .field input:-webkit-autofill,
.sec-contact .field input:-webkit-autofill:hover,
.sec-contact .field input:-webkit-autofill:focus,
.sec-contact .field textarea:-webkit-autofill {
  -webkit-box-shadow: inset 0 0 0 1000px #f7fafc;
  -webkit-text-fill-color: var(--ink);
}

/* result strip rides the paper — same frozen copy, soft lift */
.sec-contact .form-result {
  background: rgba(34, 84, 121, .05);
  border-color: rgba(34, 84, 121, .16);
  box-shadow: 0 2px 6px -3px rgba(22, 33, 43, .18);
}
.sec-contact .form-result--err {
  background: var(--copper-wash);
  border-color: rgba(168, 94, 36, .22);
}
.ctf-paper > .form-result:last-child { margin-bottom: 0; }

/* ---------- the dispatch column: five channel chips on a bus ---------- */
.ctf-dispatch {
  position: relative; z-index: 1; align-self: start;
  display: flex; flex-direction: column; gap: .65rem;
  padding-left: 24px;
}

/* 2px gold bus-bar down the column's left edge */
.ctf-bus {
  position: absolute; left: 3px; top: 12px; bottom: 12px; width: 2px;
  border-radius: 2px; overflow: hidden; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(232, 190, 130, 0),
    rgba(232, 190, 130, .5) 10%,
    rgba(232, 190, 130, .5) 90%,
    rgba(232, 190, 130, 0));
}
/* the travelling light pulse — armed by writing on the paper */
.ctf-bus::after {
  content: ""; position: absolute; left: 0; width: 100%; height: 24%;
  transform: translateY(-130%);
  background: linear-gradient(180deg,
    transparent, #ffe2ae 45%, #fff4dd 52%, transparent);
}
.sec-contact:focus-within .ctf-bus::after {
  animation: ctf-bus-run 1.5s linear infinite;
}
@keyframes ctf-bus-run {
  from { transform: translateY(-130%); }
  to   { transform: translateY(560%); }
}

/* near-solid dark glass chips, hairline gold rims */
.ctf-chip {
  position: relative;
  border-radius: 12px;
  padding: .82rem .95rem .78rem;
  background: linear-gradient(165deg, rgba(40, 68, 94, .86), rgba(20, 40, 58, .9));
  -webkit-backdrop-filter: blur(10px) saturate(150%);
          backdrop-filter: blur(10px) saturate(150%);
  border: 1px solid rgba(232, 190, 130, .22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .1),
    0 12px 28px -16px rgba(2, 10, 18, .85);
  transition: border-color .45s ease, box-shadow .45s ease;
}
.sec-contact:focus-within .ctf-chip {
  border-color: rgba(240, 205, 145, .52);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .15),
    0 12px 28px -14px rgba(2, 10, 18, .95);
}
/* kickers off mono too — same strings, new voice */
.ctf-chip b {
  display: block;
  font-size: .63rem; font-weight: 680;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(238, 213, 175, .92);
  margin-bottom: .3rem;
}
.ctf-chip p {
  margin: 0; font-size: .87rem; line-height: 1.55;
  color: rgba(226, 236, 244, .95);
}
/* brand links re-tinted for AA on the dark glass */
.ctf-chip p a {
  color: #96cdf2; font-weight: 560;
  border-bottom: 1px solid rgba(150, 205, 242, .35);
}
.ctf-chip p a:hover { color: #c4e3fa; border-bottom-color: rgba(196, 227, 250, .7); }

/* node dot per chip, centred on the bus (bus centre x = 4px) */
.ctf-node {
  position: absolute; left: -24.5px; top: 1.02rem;
  width: 9px; height: 9px; border-radius: 50%;
  background: #e8be82;
  box-shadow: 0 0 0 3px rgba(232, 190, 130, .16);
}
.sec-contact:focus-within .ctf-node {
  animation: ctf-node-breathe 1.5s ease-in-out infinite;
}
@keyframes ctf-node-breathe {
  50% { transform: scale(1.35); box-shadow: 0 0 0 5px rgba(232, 190, 130, .26); }
}

/* the Demo chip's permanent live dot — the demo is open right now */
.ctf-livedot {
  position: absolute; top: .9rem; right: .9rem;
  width: 8px; height: 8px; border-radius: 50%;
  background: #7fd6a8;
  box-shadow: 0 0 0 0 rgba(127, 214, 168, .5);
}
html.fx .ctf-livedot { animation: ctf-live 2.4s ease-out infinite; }
@keyframes ctf-live {
  0%   { box-shadow: 0 0 0 0 rgba(127, 214, 168, .5); transform: scale(1); }
  55%  { box-shadow: 0 0 0 7px rgba(127, 214, 168, 0); transform: scale(1.12); }
  100% { box-shadow: 0 0 0 0 rgba(127, 214, 168, 0); transform: scale(1); }
}

/* ---------- responsive ---------- */
/* the asymmetric split has higher specificity than main.css's generic
   .cols-2 collapse — restate it for the room */
@media (max-width: 960px) {
  .sec-contact .cols-2.ctf-split { grid-template-columns: minmax(0, 1fr); }
}

/* phone story: the dark band runs full-bleed (it already spans the
   viewport), the paper stacks first as one centred sheet, chips keep
   their single column and the bus stays vertical; nothing clips. */
@media (max-width: 860px) {
  /* main.css caps `form` at 27.5rem inside the section — the cap moves
     to the sheet and the dispatch instead so the paper never floats
     half-empty */
  .sec-contact form,
  .sec-contact .form-result { max-width: none; margin-inline: 0; }
  .ctf-paperwrap, .ctf-dispatch {
    width: 100%; max-width: 30rem; margin-inline: auto;
  }
  .ctf-paper { padding: 1.2rem 1.05rem 1.35rem; border-radius: 16px; }
  .ctf-paper > .nx-seam { border-radius: 18px; }
  .ctf-halo { inset: -6% -5% -8%; }
}

/* ---------- reduced motion: everything stands complete and still ---------- */
@media (prefers-reduced-motion: reduce) {
  html.fx .ctf-livedot,
  .sec-contact:focus-within .ctf-node,
  .sec-contact:focus-within .ctf-bus::after { animation: none; }
  .ctf-pool { transform: none; }
  .ctf-halo { transition: none; }
  .ctf-chip { transition: none; }
}

/* ==================== compliance ==================== */
/* ============================================================
   COMPLIANCE — "The Verifying Room" (2026-08-04 redesign wave)
   The site's one full-viewport smoked-navy chamber: the audit
   chain hangs as true glass blocks over painted aurora colour
   and recomputes itself on a ~9s ambient loop; a 1px chain-of-
   custody spine descends the paper body's left gutter, every
   fact instrument registering on it as a ring node; the close
   band reprises the chamber and the spine terminates in one
   final gold-ringed node behind the CTA. Appended after
   main.css — equal-specificity ties resolve to this block.
   All new classes are cmp- namespaced. Motion is html.fx-gated
   and reduced-motion-safe. No images, painted CSS only.
   ============================================================ */

/* ---------- the paper body: alternating warm near-white and a pale
   cool-grey tint carrying the drafting registration grid at ~4% ---------- */
/* double-class selectors: main.css carries .sec.section--tint at (0,2,0),
   so the grounds must sit at (0,2,0) too — the appended tie then wins */
.sec.cmp-sec, .faq.cmp-sec { background: linear-gradient(180deg, rgba(253, 254, 255, .92), rgba(249, 251, 253, .9)); }
.cmp-sec.cmp-sec--tint {
  background:
    linear-gradient(rgba(34, 84, 121, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 84, 121, .04) 1px, transparent 1px),
    linear-gradient(180deg, rgba(240, 245, 249, .94), rgba(234, 240, 246, .92));
  background-size: 22px 22px, 22px 22px, auto;
  background-position: .5px .5px, .5px .5px, 0 0;
}

/* ---------- the chain-of-custody spine ----------
   One 1px hairline at the same x in every section, so the page reads as
   one continuous ledger rail; each section registers on it as a ring node
   that lights (brand inner dot) when the section enters the view. */
.cmp-spine {
  position: absolute; z-index: 0; pointer-events: none;
  top: 0; bottom: 0; width: 1px;
  left: max(calc(var(--gutter) * .4), calc((100% - var(--container)) / 2 + 14px));
  background: rgba(34, 84, 121, .22);
}
.cmp-spine--head {
  background: linear-gradient(180deg, rgba(34, 84, 121, 0), rgba(34, 84, 121, .22) 3.5rem);
}
.cmp-spine--tail {
  background: linear-gradient(180deg, rgba(34, 84, 121, .22) calc(100% - 4.5rem), rgba(34, 84, 121, 0));
}
/* the ring node (::after) and its inner tick (::before) */
.cmp-spine::after {
  content: ""; position: absolute; left: 50%; translate: -50% 0;
  top: clamp(4rem, 9vw, 6.4rem);
  width: 13px; height: 13px; border-radius: 50%;
  background: #fff; border: 1.5px solid rgba(34, 84, 121, .4);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .9), 0 0 0 5px rgba(34, 84, 121, .1);
  transition: border-color .5s ease, box-shadow .5s ease;
}
.cmp-spine::before {
  content: ""; position: absolute; left: 50%; translate: -50% 0;
  top: calc(clamp(4rem, 9vw, 6.4rem) + 4.5px);
  width: 5px; height: 5px; border-radius: 50%;
  background: transparent; transition: background .5s ease .15s;
}
.in-view .cmp-spine::after {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .9), 0 0 0 5px rgba(34, 84, 121, .22);
}
.in-view .cmp-spine::before { background: var(--brand); }

/* ============================================================
   THE HERO CHAMBER — full-viewport smoked navy, painted only
   ============================================================ */
.cmp-hero {
  min-height: 100vh; min-height: min(100svh, 64rem);
  display: grid; align-content: center;
  background:
    linear-gradient(115deg, rgba(16, 36, 54, .5), rgba(16, 36, 54, .88) 55%),
    radial-gradient(60% 52% at 8% 4%, rgba(224, 164, 88, .34), transparent 66%),
    radial-gradient(52% 48% at 96% 96%, rgba(64, 150, 162, .3), transparent 70%),
    linear-gradient(165deg, #0d2438 0%, #0a1c2e 46%, #10314a 100%);
  box-shadow: inset 0 -1px 0 rgba(214, 167, 96, .5);   /* the gold exit rim */
}
/* the chamber's own registration grid, whisper-strength */
.cmp-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
  background-size: 110px 110px, 110px 110px, 22px 22px, 22px 22px;
  background-position: .5px .5px;
}
/* tight vignette closing the room */
.cmp-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(130% 100% at 50% 40%, transparent 52%, rgba(3, 10, 18, .55) 100%);
}
/* aurora pools — [data-plx] gives them a slow depth drift via pages.js */
.cmp-hero__pool {
  position: absolute; z-index: 0; pointer-events: none;
  aspect-ratio: 1; border-radius: 50%;
  transform: translate3d(0, var(--plx, 0px), 0);
}
.cmp-hero__pool--gold {
  width: min(58vw, 760px); left: -12%; top: -18%;
  background: radial-gradient(circle at 42% 40%, rgba(224, 164, 88, .48), rgba(214, 150, 74, .2) 46%, transparent 70%);
}
.cmp-hero__pool--teal {
  width: min(52vw, 680px); right: -14%; bottom: -24%;
  background: conic-gradient(from 200deg at 55% 55%,
    rgba(64, 150, 162, .4), rgba(30, 87, 130, .26) 35%,
    rgba(110, 176, 219, .12) 55%, transparent 70%);
  -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 30%, transparent 100%);
}
.cmp-hero > .container { position: relative; z-index: 1; }

/* copy floats on a paper panel, left */
.cmp-hero .page-hero__copy {
  background: linear-gradient(165deg, rgba(255, 255, 255, .97), rgba(243, 247, 251, .93));
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
          backdrop-filter: blur(10px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 22px;
  box-shadow:
    inset 0 1.5px 0 #fff,
    inset 0 -1px 0 rgba(34, 84, 121, .06),
    0 34px 70px -28px rgba(2, 10, 18, .85);
  padding: clamp(1.5rem, 3.2vw, 2.6rem);
}

/* ---------- the chain: true glass blocks over the colour ---------- */
.cmp-hero .chainrow { max-width: 500px; }
.cmp-hero .chainblock {
  position: relative;
  border-radius: 16px;
  background: linear-gradient(152deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .05) 55%, rgba(255, 255, 255, .09));
  border: 1px solid rgba(255, 255, 255, .22);
  -webkit-backdrop-filter: blur(12px) saturate(1.5);
          backdrop-filter: blur(12px) saturate(1.5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .3),
    inset 0 -1px 0 rgba(255, 255, 255, .06),
    0 24px 48px -22px rgba(2, 10, 18, .85);
}
.cmp-hero .chainblock__top b { color: #9fc8e8; }
.cmp-hero .chainblock__top .mono { color: rgba(214, 228, 240, .5); }
.cmp-hero .chainblock p { color: rgba(240, 247, 252, .93); }
.cmp-hero .chainblock__hash { color: rgba(203, 220, 235, .72); }
.cmp-hero .chainblock__hash b { color: #d9a86a; }

/* the chainlinks fuse into one continuous conductor rail */
.cmp-hero .chainlink { width: 14px; height: 26px; }
.cmp-hero .chainlink::before {
  top: -4px; bottom: -4px; left: 50%; translate: -50% 0; rotate: 0deg;
  width: 1.5px; height: auto; border: 0; border-radius: 0;
  background: linear-gradient(180deg, rgba(214, 167, 96, .08), rgba(214, 167, 96, .5), rgba(214, 167, 96, .08));
  opacity: .55;
}
.cmp-hero .chainlink::after {
  top: 50%; bottom: auto; left: 50%; translate: -50% -50%; rotate: 0deg;
  width: 7px; height: 7px; border-radius: 50%;
  border: 1.5px solid rgba(214, 167, 96, .6);
  background: rgba(10, 28, 46, .85);
}

/* the VERIFY block: navy-solid, gold-rimmed, the nx-seam circling it */
.cmp-hero .chainblock--verify {
  --r-ctl: 14.5px;   /* sizes the nx-seam ring to this block */
  -webkit-backdrop-filter: none; backdrop-filter: none;
  background:
    radial-gradient(120% 160% at 12% 0%, rgba(255, 255, 255, .12), transparent 46%),
    linear-gradient(155deg, #14395a 0%, #102c46 52%, #0a1f33 100%);
  border-color: rgba(214, 167, 96, .55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    inset 0 0 0 1px rgba(214, 167, 96, .14),
    0 26px 52px -20px rgba(0, 0, 0, .85);
}
.cmp-hero .chainblock--verify .chainblock__top b { color: #e6c088; }
.cmp-hero .chainblock--verify .chainblock__top .mono,
.cmp-hero .chainblock--verify .chainblock__hash { color: rgba(255, 255, 255, .55); }
.cmp-hero .chainblock--verify p { color: rgba(255, 255, 255, .92); }
.cmp-hero .cmp-count b { color: #ecc989; font-variant-numeric: tabular-nums; }
.cmp-hero .cmp-stamp b { color: #7fd6a2; }
.cmp-hero .chainblock--verify .nx-seam { opacity: .85; }

/* ---------- the recompute loop (~9s, html.fx + in-view gated) ----------
   Each lit element carries its moment as --t; all share the 9s period, so
   the stagger holds cycle after cycle: HASH lights, the identical PREV in
   the next block lights a beat later, the conductor carries the pulse
   down, and it lands on the gold-rimmed VERIFY block. */
@keyframes cmp-lit {
  0%, 100% { color: rgba(203, 220, 235, .72); text-shadow: none; }
  3%       { color: #f0d5a2; text-shadow: 0 0 12px rgba(230, 192, 136, .55); }
  11%      { color: #f0d5a2; text-shadow: 0 0 12px rgba(230, 192, 136, .55); }
  17%      { color: rgba(203, 220, 235, .72); text-shadow: none; }
}
@keyframes cmp-cond {
  0%, 100% { opacity: .55; }
  4%       { opacity: 1; }
  11%      { opacity: 1; }
  18%      { opacity: .55; }
}
@keyframes cmp-verify-pulse {
  0%, 100% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .14),
      inset 0 0 0 1px rgba(214, 167, 96, .14),
      0 26px 52px -20px rgba(0, 0, 0, .85);
  }
  4%, 16% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .18),
      inset 0 0 0 1px rgba(230, 192, 136, .5),
      0 0 34px -6px rgba(230, 192, 136, .38),
      0 26px 52px -20px rgba(0, 0, 0, .85);
  }
  26% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .14),
      inset 0 0 0 1px rgba(214, 167, 96, .14),
      0 26px 52px -20px rgba(0, 0, 0, .85);
  }
}
html.fx .cmp-hero.in-view .cmp-lit {
  animation: cmp-lit 9s linear infinite;
  animation-delay: var(--t, 0s);
}
html.fx .cmp-hero.in-view .chainlink::before {
  animation: cmp-cond 9s linear infinite;
  animation-delay: var(--t, 0s);
}
html.fx .cmp-hero.in-view .chainblock--verify {
  animation: cmp-verify-pulse 9s linear infinite;
  animation-delay: var(--t, 0s);
}
/* INTACT stamps once — a one-step rise, no tween */
@keyframes cmp-stamp {
  from { opacity: 0; translate: 0 5px; }
  to   { opacity: 1; translate: 0 0; }
}
html.fx .cmp-hero.in-view .cmp-stamp {
  animation: cmp-stamp .4s steps(1, end) 6.6s 1 backwards;
}

/* off-Chromium / no backdrop-filter: solid navy cards stand in for glass */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .cmp-hero .chainblock { background: rgba(15, 39, 60, .95); }
  .cmp-hero .chainblock--verify {
    background:
      radial-gradient(120% 160% at 12% 0%, rgba(255, 255, 255, .12), transparent 46%),
      linear-gradient(155deg, #14395a 0%, #102c46 52%, #0a1f33 100%);
  }
  .cmp-hero .page-hero__copy { background: #fdfeff; }
}

/* ============================================================
   FACT INSTRUMENTS — every one registers on the custody rail
   ============================================================ */

/* -- plotfacts: the ::before rail reads as a chain segment; markers become
   ring nodes with an inner tick. The nth-child colour confetti is killed:
   one state colour, uniform. -- */
.cmp-sec .plotfacts::before {
  left: 5px; width: 1px;
  background: linear-gradient(180deg, rgba(34, 84, 121, .28), rgba(34, 84, 121, .28) 88%, transparent);
}
.cmp-sec .plotfact::before,
.cmp-sec .plotfact:nth-child(3n+2)::before,
.cmp-sec .plotfact:nth-child(3n)::before {
  width: 11px; height: 11px; border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(34, 84, 121, .45);
}
.cmp-sec .plotfact::after {
  content: ""; position: absolute;
  left: calc(-1.75rem + 3.5px); top: calc(.16em + 3.5px);
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--copper);
}

/* -- notefacts: counter chips become sealed ring-nodes on a short hairline
   stem; letters and layout verbatim -- */
.cmp-sec .notefact::before {
  border: 1.5px solid rgba(34, 84, 121, .45);
  background: #fff; color: var(--brand);
  box-shadow: 0 0 0 3px rgba(34, 84, 121, .06);
}
.cmp-sec .notefact::after {
  content: ""; position: absolute;
  left: -14px; top: .76em; width: 13px; height: 1px;
  background: rgba(34, 84, 121, .25);
}

/* -- gridfacts: pressed paper — inset top-light, crisp hairline, concentric
   radii, one corner node dot. No glass on paper. -- */
.cmp-sec .gridfact {
  position: relative;
  border-radius: 14px;
  background: linear-gradient(160deg, #ffffff, #f3f7fa);
  border: 1px solid rgba(34, 84, 121, .14);
  box-shadow:
    inset 0 1.5px 0 #fff,
    inset 0 -1px 0 rgba(34, 84, 121, .05),
    0 2px 5px rgba(22, 33, 43, .04),
    0 14px 26px -18px rgba(34, 84, 121, .28);
}
.cmp-sec .gridfact::before {
  content: ""; position: absolute; top: 9px; right: 9px;
  width: 6px; height: 6px; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px rgba(34, 84, 121, .35);
}

/* ============================================================
   PIPELINES — running instruments: a stepped stage sweep walks
   01→05, lighting each cadence tag as it passes; the two boards
   run out of phase; the status dot breathes.
   ============================================================ */
.cmp-pipe { --ph: 0s; border: 1px solid rgba(34, 84, 121, .12); }
.cmp-pipe--b { --ph: 1.1s; }
.cmp-pipe .pipe__stage:nth-child(2) { --st: 0; }
.cmp-pipe .pipe__stage:nth-child(3) { --st: 1; }
.cmp-pipe .pipe__stage:nth-child(4) { --st: 2; }
.cmp-pipe .pipe__stage:nth-child(5) { --st: 3; }
.cmp-pipe .pipe__stage:nth-child(6) { --st: 4; }
@keyframes cmp-stage {
  0%, 100% { background-color: transparent; }
  2.4%     { background-color: transparent; }
  2.5%     { background-color: rgba(34, 84, 121, .06); }
  17.9%    { background-color: rgba(34, 84, 121, .06); }
  18%      { background-color: transparent; }
}
@keyframes cmp-when {
  0%, 100% { color: var(--faint); }
  2.4%     { color: var(--faint); }
  2.5%     { color: var(--copper); }
  17.9%    { color: var(--copper); }
  18%      { color: var(--faint); }
}
html.fx .cmp-sec.in-view .cmp-pipe .pipe__stage {
  animation: cmp-stage 11s linear infinite;
  animation-delay: calc(var(--st, 0) * 2.2s + var(--ph, 0s));
}
html.fx .cmp-sec.in-view .cmp-pipe .pipe__stage .pipe__when {
  animation: cmp-when 11s linear infinite;
  animation-delay: calc(var(--st, 0) * 2.2s + var(--ph, 0s));
}
@keyframes cmp-breathe {
  50% { box-shadow: 0 0 0 4px rgba(69, 209, 125, .14); opacity: .82; }
}
html.fx .cmp-sec .cmp-pipe .pipe__on { animation: cmp-breathe 3.4s ease-in-out infinite; }

/* ============================================================
   SEALS — true emboss; on hover the travelling rim light circles
   the disc (replacing the tilt-lift). Discs stay on paper.
   ============================================================ */
.cmp-sec .seal:hover .seal__disc,
.cmp-sec .seal:focus-visible .seal__disc {
  transform: none;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .95),
    inset 4px 6px 10px rgba(255, 255, 255, .65),
    inset -7px -9px 16px rgba(34, 84, 121, .12),
    0 3px 7px rgba(22, 33, 43, .05),
    0 24px 44px -18px rgba(34, 84, 121, .42);
}
.cmp-sec .seal__disc::before { border-color: rgba(34, 84, 121, .28); }
.cmp-sec .seal__disc .nx-seam {
  inset: -2.5px; padding: 2.5px; border-radius: 50%;
  opacity: 0; transition: opacity .3s ease;
}
.cmp-sec .seal__disc .nx-seam::before { animation-play-state: paused; }
.cmp-sec .seal:hover .seal__disc .nx-seam,
.cmp-sec .seal:focus-visible .seal__disc .nx-seam { opacity: 1; }
.cmp-sec .seal:hover .seal__disc .nx-seam::before,
.cmp-sec .seal:focus-visible .seal__disc .nx-seam::before { animation-play-state: running; }

/* ============================================================
   REQUEST PLAQUES — requestable ledger entries: the left accent
   becomes a node stem tying the slip to the custody rail.
   ============================================================ */
.cmp-ledger .req-plaque { border-color: rgba(34, 84, 121, .14); }
.cmp-ledger .req-plaque::after {
  content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--brand), rgba(34, 84, 121, .5) 18px, rgba(34, 84, 121, .12));
}

/* ============================================================
   TRUST LIBRARY — accordion kept; the open row gains a lit node
   on the spine side and the brand hairline border.
   ============================================================ */
.cmp-sec .trust-row { position: relative; background: rgba(255, 255, 255, .85); }
.cmp-sec .trust-row[open] {
  border-color: var(--brand);
  box-shadow: inset 0 1.5px 0 #fff, 0 16px 32px -24px rgba(34, 84, 121, .5);
}
.cmp-sec .trust-row[open]::before {
  content: ""; position: absolute; left: -5px; top: 1.2rem;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px rgba(34, 84, 121, .25);
}

/* ============================================================
   QUESTION RAIL — behaviour untouched; number buttons adopt
   ring-node markers, the open row gets paper-panel depth.
   ============================================================ */
.cmp-sec .qa__q .mono {
  display: inline-grid; place-items: center;
  min-width: 1.6rem; height: 1.6rem; border-radius: 50%;
  border: 1px solid rgba(168, 94, 36, .5); background: #fff;
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(22, 33, 43, .06);
  font-size: .56rem; letter-spacing: .04em; line-height: 1;
}
.cmp-sec .qa__unit.is-open .qa__q .mono {
  border-color: var(--brand); color: var(--brand); background: var(--brand-wash);
}
.cmp-sec .qa__unit.is-open {
  background: linear-gradient(165deg, #ffffff, #f4f8fb);
  box-shadow: inset 0 1.5px 0 #fff, 0 24px 48px -24px rgba(16, 36, 58, .35);
}

/* ============================================================
   THE CLOSE — chamber reprise: same painted smoked-navy ground,
   gold hairline rims, the seam on the band edge, and the spine's
   final gold-ringed node behind the CTA.
   ============================================================ */
/* (0,2,0): must out-cascade main.css's `.faq + .home-close` border rule */
.home-close.cmp-close {
  border-top: 1px solid rgba(214, 167, 96, .5);
  border-bottom: 1px solid rgba(214, 167, 96, .38);
  background:
    radial-gradient(52% 64% at 12% 0%, rgba(224, 164, 88, .26), transparent 64%),
    conic-gradient(from 220deg at 86% 100%, rgba(64, 150, 162, .24), rgba(30, 87, 130, .12) 40%, transparent 62%),
    linear-gradient(165deg, #0d2438 0%, #0a1c2e 48%, #10314a 100%);
}
.cmp-close::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 22px 22px; background-position: .5px .5px;
}
.cmp-close::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(120% 110% at 50% 45%, transparent 55%, rgba(3, 10, 18, .5) 100%);
}
/* the seam rides the band edge: scoped --r-ctl squares only the ring
   (never the buttons inside), and inset 0 keeps it inside overflow:clip */
.cmp-close__seam { --r-ctl: 0px; inset: 0; padding: 1.5px; opacity: .55; }
.cmp-close__stem {
  position: absolute; z-index: 0; pointer-events: none;
  left: 50%; top: 0; translate: -50% 0;
  width: 1px; height: clamp(2.2rem, 5vw, 3.4rem);
  background: linear-gradient(180deg, rgba(214, 167, 96, .6), rgba(214, 167, 96, .15));
}
.cmp-close__node {
  position: absolute; z-index: 0; pointer-events: none;
  left: 50%; top: clamp(2.2rem, 5vw, 3.4rem); translate: -50% -40%;
  width: 15px; height: 15px; border-radius: 50%;
  border: 1.5px solid rgba(230, 192, 136, .8);
  background: rgba(10, 28, 46, .9);
  box-shadow: 0 0 0 4px rgba(214, 167, 96, .12), 0 0 26px -4px rgba(230, 192, 136, .5);
}
.cmp-close__node::after {
  content: ""; position: absolute; inset: 4px; border-radius: 50%;
  background: #e6c088;
}
.cmp-close .display { color: #f2f7fc; }
.cmp-close .lead { color: rgba(211, 225, 238, .76); }
.cmp-close .btn--ghost {
  color: #eaf2f8;
  background: rgba(255, 255, 255, .09);
  border-color: rgba(255, 255, 255, .32);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
}
.cmp-close .btn--ghost:hover {
  color: #fff;
  background: rgba(255, 255, 255, .16);
  border-color: rgba(255, 255, 255, .5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
}

/* ============================================================
   THE PHONE STORY (<=860px) — the chamber goes full-bleed and
   quiet, the spine folds away, its ring nodes move inline above
   each section head, floating accents step aside.
   ============================================================ */
@media (max-width: 960px) {
  .cmp-hero .page-hero__aside { max-width: 520px; }
}
@media (max-width: 860px) {
  .cmp-hero {
    min-height: 0;
    padding-top: clamp(4.2rem, 12vw, 6rem);
    padding-bottom: clamp(2.6rem, 8vw, 3.4rem);
  }
  .cmp-hero .page-hero__copy { padding: 1.3rem 1.15rem 1.4rem; border-radius: 18px; }
  .cmp-hero__pool--gold { width: 120vw; left: -40vw; top: -22vw; }
  .cmp-hero__pool--teal { width: 110vw; right: -46vw; bottom: -30vw; }
  .cmp-hero .chainblock__hash { font-size: .6rem; flex-wrap: wrap; gap: .3rem 1rem; }
  /* the spine folds away; the node stands alone above the section head */
  .cmp-spine {
    top: 1.35rem; bottom: auto; height: 0; width: 0;
    left: var(--gutter);
    background: none;
  }
  .cmp-spine::after { top: 0; }
  .cmp-spine::before { top: 4.5px; }
  .cmp-spine--head, .cmp-spine--tail { background: none; }
  /* open trust rows: the node dot would poke past the gutter — tuck it */
  .cmp-sec .trust-row[open]::before { left: -4px; }
  .cmp-close__stem { height: 2rem; }
  .cmp-close__node { top: 2rem; }
}

/* ============================================================
   REDUCED MOTION — the room stands complete and still
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html.fx .cmp-hero.in-view .cmp-lit,
  html.fx .cmp-hero.in-view .chainlink::before,
  html.fx .cmp-hero.in-view .chainblock--verify,
  html.fx .cmp-hero.in-view .cmp-stamp,
  html.fx .cmp-sec.in-view .cmp-pipe .pipe__stage,
  html.fx .cmp-sec.in-view .cmp-pipe .pipe__stage .pipe__when,
  html.fx .cmp-sec .cmp-pipe .pipe__on {
    animation: none;
  }
  .cmp-hero__pool { transform: none; }
}

/* ==================== affiliate ==================== */
/* ============================================================
   /affiliate — "Settlement glass: three transfers clear in one
   panel" (2026-08-04 redesign wave). Daylight paper page; the
   money lives in ONE smoked-navy glass material shown as two
   faces — the hero finder's-fee bill and the deal pipe console —
   each floating over its own painted copper/blue pool. Glass
   exists only over colour; everything else is crisp hairline
   paper. All loops are CSS keyframes gated on html.fx + the
   .in-view stamp pages.js already applies; opacity/background-
   position only, long-period, dim. Namespace: .afl-
   ============================================================ */

/* ---------- the settlement material: one recipe, two faces ---------- */
.afl-glass {
  --afl-rim:     rgba(222, 168, 92, .35);   /* gold rim */
  --afl-hair:    rgba(222, 168, 92, .18);   /* internal gold hairline */
  --afl-ink-hi:  rgba(238, 244, 250, .95);  /* headline ink on glass */
  --afl-ink:     rgba(202, 216, 229, .82);  /* body ink on glass */
  --afl-ink-lo:  rgba(178, 196, 212, .68);  /* footnote ink */
  --afl-gold:    #f0c47c;                   /* the money ink */
  --afl-copper:  #e0a25f;                   /* annotation copper, lit for dark */
  position: relative; z-index: 1;
  border-radius: 24px;
  border: 1px solid var(--afl-rim);
  background:
    radial-gradient(130% 150% at 14% -6%, rgba(255, 255, 255, .12), transparent 46%),
    linear-gradient(158deg, rgba(26, 52, 76, .84), rgba(16, 36, 54, .88));
  -webkit-backdrop-filter: blur(14px) saturate(1.45);
          backdrop-filter: blur(14px) saturate(1.45);
  box-shadow:
    inset 0 1px 0 rgba(255, 226, 178, .26),
    inset 0 -1px 0 rgba(4, 12, 20, .45),
    0 3px 8px rgba(10, 24, 38, .16),
    0 34px 64px -26px rgba(10, 26, 42, .55);
}

/* ---------- the painted pools the glass sits over (CSS only) ---------- */
.afl-pool {
  position: absolute; z-index: 0; pointer-events: none;
  border-radius: 40px;
  background:
    linear-gradient(rgba(34, 84, 121, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 84, 121, .045) 1px, transparent 1px),
    conic-gradient(from 30deg at 58% 38%,
      rgba(214, 128, 52, .07), rgba(64, 140, 198, .05),
      rgba(214, 128, 52, .07)),
    radial-gradient(62% 58% at 24% 80%, rgba(212, 146, 70, .28), transparent 55%),
    radial-gradient(56% 52% at 84% 10%, rgba(64, 140, 198, .22), transparent 60%);
  background-size: 20px 20px, 20px 20px, 100% 100%, 100% 100%, 100% 100%;
  transform: translateY(var(--plx, 0px));
  will-change: transform;
}
.afl-heroside { position: relative; }
.afl-pool--hero { inset: -9% -11% -11% -13%; }
.afl-stage { position: relative; }
.afl-pool--deal { inset: -7% -9%; border-radius: 36px; }
/* the close band echoes the copper pool, dimmer and smaller */
.afl-pool--close {
  left: 50%; top: 50%; width: min(52vw, 620px); aspect-ratio: 1.5;
  transform: translate(-50%, -50%); opacity: .55; border-radius: 48px;
}

/* ================= face one: the finder's-fee bill ================= */
.afl-set { padding: 1.35rem 1.4rem 1.2rem; }
.afl-set .bill__head { color: rgba(198, 213, 227, .78);
  border-bottom: 1px solid var(--afl-hair); }
.afl-set .bill__head i { color: var(--afl-copper); }

/* the three month rows as z-offset translucent slips + the total strip */
.afl-slip {
  position: relative; border-radius: 10px;
  margin-top: .5rem; padding: .55rem .85rem .6rem;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(234, 196, 138, .15);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .10),
    0 8px 16px -12px rgba(2, 10, 18, .55);
  transform: translate(var(--afl-sx, 0px), var(--plx, 0px));
  will-change: transform;
}
.afl-slip--1 { --afl-sx: -4px; }
.afl-slip--2 { --afl-sx: 0px; background: rgba(255, 255, 255, .10);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .11),
    0 10px 20px -12px rgba(2, 10, 18, .6); }
.afl-slip--3 { --afl-sx: 4px; background: rgba(255, 255, 255, .12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12),
    0 12px 24px -12px rgba(2, 10, 18, .65); }
.afl-slip--t { --afl-sx: 0px; margin-top: .85rem;
  background: rgba(255, 255, 255, .15);
  border-color: rgba(238, 198, 128, .4);
  -webkit-backdrop-filter: blur(3px) saturate(1.4);
          backdrop-filter: blur(3px) saturate(1.4);
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 200, .22),
    0 14px 28px -12px rgba(2, 10, 18, .7); }
.glass-refract .afl-slip--t {
  -webkit-backdrop-filter: blur(3px) url(#nx-lens) saturate(1.5);
          backdrop-filter: blur(3px) url(#nx-lens) saturate(1.5);
}
.afl-set .bill__row { font-size: .9rem; }
.afl-set .bill__line span { color: var(--afl-ink-hi); }
.afl-set .bill__row small { color: rgba(190, 207, 222, .8); }
.afl-set .bill__lead { border-bottom-color: rgba(230, 190, 128, .34); }
.afl-set .bill__row b { color: #edc98f; }
.afl-set .bill__row--total { border-top: 0; padding-top: .6rem; }
.afl-set .bill__row--total .bill__line span { color: #fdf6ec; }
.afl-set .bill__row--total b { color: var(--afl-gold); }
.afl-set .bill__foot { color: var(--afl-ink-lo);
  border-top-color: rgba(255, 255, 255, .09); }

/* the clearing-sweep: a soft light visits each slip's leader in turn,
   left to right, on a ~9s cycle — a live instrument, never an entrance:
   rows are always fully present, only the sheen loops. */
.afl-slip--1::after, .afl-slip--2::after, .afl-slip--3::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; opacity: 0;
  background: linear-gradient(102deg,
    transparent 32%, rgba(255, 232, 196, .10) 46%,
    rgba(255, 240, 214, .22) 52%, transparent 68%)
    140% 0 / 220% 100% no-repeat;
}
html.fx .page-hero.in-view .afl-slip--1::after {
  animation: afl-sweep 9s linear infinite; }
html.fx .page-hero.in-view .afl-slip--2::after {
  animation: afl-sweep 9s linear infinite 2.7s; }
html.fx .page-hero.in-view .afl-slip--3::after {
  animation: afl-sweep 9s linear infinite 5.4s; }
@keyframes afl-sweep {
  0%   { opacity: 0; background-position: 140% 0; }
  4%   { opacity: 1; }
  22%  { opacity: 1; background-position: -40% 0; }
  27%  { opacity: 0; background-position: -60% 0; }
  100% { opacity: 0; background-position: -60% 0; }
}
/* the total strip wears the house seam — one lap per 9s cycle */
.afl-slip--t .nx-seam { inset: -2px; padding: 2px; border-radius: 12px;
  opacity: .85; }
.afl-slip--t .nx-seam::before { animation-duration: 9s; }

/* ================= face two: the pipe console ================= */
.afl-pipe .pipe__head { border-bottom: 1px solid var(--afl-hair); }
.afl-pipe .pipe__head b { color: rgba(238, 244, 250, .92); }
.afl-pipe .pipe__head .mono { color: var(--afl-copper); }
.afl-pipe .pipe__on { position: relative; }
.afl-pipe .pipe__on::after { content: ""; position: absolute; inset: -4px;
  border-radius: 99px; pointer-events: none; opacity: .3;
  box-shadow: 0 0 10px 2px rgba(69, 209, 125, .55); }
html.fx .sec.in-view .afl-pipe .pipe__on::after {
  animation: afl-live 2.6s ease-in-out infinite; }
@keyframes afl-live { 0%, 100% { opacity: .22; } 50% { opacity: .9; } }
.afl-pipe .pipe__stage { position: relative; }
.afl-pipe .pipe__stage + .pipe__stage {
  border-top: 1px solid rgba(255, 255, 255, .07); }
.afl-pipe .pipe__stage > .mono:first-child { color: var(--afl-copper); }
.afl-pipe .pipe__stage b { color: var(--afl-ink-hi); }
.afl-pipe .pipe__stage > span:not([class]) { color: var(--afl-ink); }
.afl-pipe .pipe__when { color: rgba(216, 227, 237, .95); opacity: .7; }
.afl-pipe .pipe__stage:nth-child(5) .pipe__when { color: var(--afl-gold); }

/* the hairline spine down the left gutter + its travelling pulse (~12s) */
.afl-pipe__spine {
  position: absolute; left: .75rem; top: 3.3rem; bottom: 1.2rem;
  width: 1px; pointer-events: none;
  background:
    linear-gradient(180deg, transparent,
      rgba(255, 214, 158, .9), transparent) 0 -30% / 100% 26% no-repeat,
    linear-gradient(180deg, rgba(222, 168, 92, 0),
      rgba(222, 168, 92, .3) 12%, rgba(222, 168, 92, .3) 88%, transparent);
}
html.fx .sec.in-view .afl-pipe__spine {
  animation: afl-pulse 12s linear infinite; }
@keyframes afl-pulse {
  0%   { background-position: 0 -30%, 0 0; }
  70%  { background-position: 0 130%, 0 0; }
  100% { background-position: 0 130%, 0 0; }
}
/* each stage tag brightens as the pulse passes its row */
html.fx .sec.in-view .afl-pipe .pipe__when {
  animation: afl-tag 12s linear infinite; }
html.fx .sec.in-view .afl-pipe .pipe__stage:nth-child(2) .pipe__when {
  animation-delay: 0s; }
html.fx .sec.in-view .afl-pipe .pipe__stage:nth-child(3) .pipe__when {
  animation-delay: 1.9s; }
html.fx .sec.in-view .afl-pipe .pipe__stage:nth-child(4) .pipe__when {
  animation-delay: 3.8s; }
html.fx .sec.in-view .afl-pipe .pipe__stage:nth-child(5) .pipe__when {
  animation-delay: 5.7s; }
@keyframes afl-tag {
  0%, 6% { opacity: .7; }
  11%    { opacity: 1; }
  22%    { opacity: .7; }
  100%   { opacity: .7; }
}
/* stage 04 fires three brief copper ticks as the pulse lands */
.afl-pipe .pipe__stage:nth-child(5)::after {
  content: ""; position: absolute; left: calc(.75rem - 2px); top: 50%;
  margin-top: -2.5px; width: 5px; height: 5px; border-radius: 99px;
  pointer-events: none; opacity: 0;
  background: var(--afl-copper);
  box-shadow: 0 0 8px 1px rgba(224, 162, 95, .6);
}
html.fx .sec.in-view .afl-pipe .pipe__stage:nth-child(5)::after {
  animation: afl-ticks 12s linear infinite; }
@keyframes afl-ticks {
  0%, 62%   { opacity: 0; }
  64%       { opacity: 1; }
  66%       { opacity: 0; }
  68%       { opacity: 1; }
  70%       { opacity: 0; }
  72%       { opacity: 1; }
  76%, 100% { opacity: 0; }
}

/* ================= the paper instruments ================= */
/* stats strip: the classless section never matched pages.js's reveal
   hosts — it now rides .sec (reveal fixed) with the section chrome
   dialled back to a quiet band. */
.afl-stats-sec { border-top: 0;
  padding-block: clamp(2rem, 5vw, 3.2rem) clamp(2.2rem, 5vw, 3.4rem); }
.afl-stats { position: relative; }
.afl-stats::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 1px; pointer-events: none;
  background: linear-gradient(90deg,
    rgba(212, 146, 70, 0), rgba(212, 146, 70, .75) 30%,
    rgba(64, 140, 198, .65) 70%, transparent);
}
html.fx .afl-stats::after { transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 1.3s cubic-bezier(.22, .61, .21, 1) .45s; }
html.fx .afl-stats-sec.in-view .afl-stats::after { transform: scaleX(1); }

/* gridfacts: paper tiles, hairline crisped, top-light kept */
.afl-facts .gridfact { border-color: rgba(34, 84, 121, .11);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .97),
    inset -4px -5px 10px rgba(34, 84, 121, .05),
    0 2px 5px rgba(22, 33, 43, .04),
    0 16px 30px -18px rgba(34, 84, 121, .28); }

/* notefacts: the counter kept, hairline rhythm tightened */
.afl-notes { gap: 0; }
.afl-notes .notefact { padding-block: .9rem .85rem; }
.afl-notes .notefact::before { top: calc(.9rem + .06em); }
.afl-notes .notefact:first-child { padding-top: 0; }
.afl-notes .notefact:first-child::before { top: .06em; }
.afl-notes .notefact + .notefact { border-top: 1px solid var(--line); }
.afl-notes .notefact:last-child { padding-bottom: 0; }

/* link ledger: ruled rows, the arrow slides 2px on hover; the live-demo
   row keeps its new-tab affordance */
.afl-ledger .gridfact b a { display: inline-flex; align-items: baseline;
  gap: .45em; transition: color .15s ease; }
.afl-ledger .gridfact b a::after { content: "\2192"; color: var(--copper);
  font-size: .9em; translate: 0 0; transition: translate .16s ease; }
.afl-ledger .gridfact b a[target="_blank"]::after { content: "\2197"; }
.afl-ledger .gridfact b a:hover { color: var(--brand); }
.afl-ledger .gridfact:hover b a::after,
.afl-ledger .gridfact b a:hover::after { translate: 2px 0; }

/* ================= phones ================= */
@media (max-width: 960px) {
  /* the fan settles flat: offsets to 0, plx ignored, pools tucked in */
  .afl-slip, .afl-pool { transform: none; }
  .afl-slip--1, .afl-slip--2, .afl-slip--3 { --afl-sx: 0px; }
  .afl-pool--hero { inset: -5% -5%; border-radius: 30px; }
  .afl-pool--deal { inset: -4% -4%; border-radius: 30px; }
}
@media (max-width: 860px) {
  .afl-set { padding: 1.15rem 1rem 1.05rem; }
  .afl-slip { padding: .55rem .7rem .58rem; }
  .afl-pipe .pipe__head { padding-inline: 1.1rem; }
  .afl-pipe .pipe__stage { padding-inline: 1.1rem; }
  .afl-pipe__spine { left: .6rem; }
  .afl-pipe .pipe__stage:nth-child(5)::after { left: calc(.6rem - 2px); }
  .afl-pool--close { width: min(80vw, 480px); }
}
@media (max-width: 420px) {
  /* the pools step fully behind their panels — no bleed into the gutters */
  .afl-pool--hero, .afl-pool--deal { inset: 0; border-radius: 26px;
    opacity: .8; }
}

/* ================= reduced motion: settled states, whole ================= */
@media (prefers-reduced-motion: reduce) {
  html.fx .page-hero.in-view .afl-slip--1::after,
  html.fx .page-hero.in-view .afl-slip--2::after,
  html.fx .page-hero.in-view .afl-slip--3::after,
  html.fx .sec.in-view .afl-pipe__spine,
  html.fx .sec.in-view .afl-pipe .pipe__when,
  html.fx .sec.in-view .afl-pipe .pipe__on::after,
  html.fx .sec.in-view .afl-pipe .pipe__stage:nth-child(5)::after {
    animation: none;
  }
  .afl-pipe .pipe__when { opacity: .9; }
  .afl-pipe .pipe__on::after { opacity: .5; }
  html.fx .afl-stats::after { transform: none; transition: none; }
  /* .nx-seam hides itself (main.css); the total strip keeps its gold rim */
}


/* ==== verify-pass patches (2026-08-04) ==== */
/* messaging: identity facts are paper, not ghosts — glass dies on pale bands */
.msg-facts .gridfact {
  background: #fff; border: 1px solid rgba(34, 84, 121, .14);
  box-shadow: 0 2px 6px rgba(22, 33, 43, .04), 0 14px 28px -18px rgba(34, 84, 121, .25);
}
/* messaging: idle doorway tabs keep their true brand colours, just quieter */
.msgdw__tab img, .msgdw__tab svg { filter: none; opacity: .5; }


/* ==================== cert-family ==================== */
/* ============================================================
   FRAGMENT · cert-family (gdpr / eu-ai / iso27001 / soc2)
   "The Verification Room — one sweep that stops at the truth"
   (frags/cert-family.css — appended after everything in main.css)

   Each page stays calm paper except ONE full-bleed Verification
   Room: the mechanism section (pipe console on gdpr/eu-ai,
   cert-track on iso27001/soc2) inverts to smoked-navy glass over
   a CSS-painted aurora pool, gold rim hairlines top and bottom,
   the nx-seam riding the board edge. Inside it the instrument
   RUNS perpetually: the pipe dwell-steps its four stages (12s,
   3s/stage) with the mono when-badge stamping as the scan
   passes; the cert-track's brand fill sweeps segment by segment
   to the copper NOW station and stops dead — it never crosses a
   hollow future stop — breathes twice, holds, fades, restarts
   (14s). The hero slice becomes a full-height painted colour
   column (glass pane + soft seam) foreshadowing the room; the
   close band whispers the same pool in daylight.

   Namespace: .crt- ; tint modifiers .crt--copper (gdpr,
   iso27001) / .crt--brand (eu-ai, soc2). Retired on this family
   (markup-side): .hero__patch--tl, .hero__patch--close, the
   .clay slab on the pipe, and the sec__patch spans inside the
   dark band. All motion is html.fx-gated and reduced-motion-
   safe; without fx every surface renders complete, fully lit,
   still. Painted CSS only — no images, no SVG.
   ============================================================ */

/* ---------------- the family's two inks ---------------- */
.crt--copper {
  --crt-tint-line: rgba(168, 94, 36, .6);        /* status hairlines on paper */
  --crt-pool-a:    rgba(216, 140, 58, .46);      /* room pool, page colour    */
  --crt-pool-b:    rgba(64, 150, 162, .3);       /* room pool, teal keel      */
  --crt-day-a:     rgba(214, 128, 52, .16);      /* daylight whisper          */
  --crt-day-b:     rgba(30, 87, 130, .11);
}
.crt--brand {
  --crt-tint-line: rgba(34, 84, 121, .55);
  --crt-pool-a:    rgba(110, 176, 219, .5);
  --crt-pool-b:    rgba(64, 150, 162, .32);
  --crt-day-a:     rgba(110, 176, 219, .18);
  --crt-day-b:     rgba(64, 150, 162, .1);
}

/* ---------------- calm paper ----------------
   The aurora world stays outside; the reading sections of this family
   sit on one near-white sheet (double-class so the appended tie beats
   main.css's .sec/.faq grounds). */
.sec.crt-sec, .faq.crt-sec {
  background: linear-gradient(180deg, rgba(253, 254, 255, .93), rgba(250, 252, 254, .9));
}
.page-hero.crt-hero {
  background: linear-gradient(180deg, rgba(253, 254, 255, .92), rgba(251, 253, 255, .88));
}

/* the registration patches on paper: rebuilt as the bare drafting grid,
   whisper strength — the plotted-cell and cross artwork retires here */
.crt-sec .sec__patch {
  background-image:
    linear-gradient(rgba(34, 84, 121, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 84, 121, .06) 1px, transparent 1px),
    linear-gradient(rgba(34, 84, 121, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 84, 121, .035) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 20px 20px, 20px 20px;
  background-position: .5px .5px, .5px .5px, .5px .5px, .5px .5px;
}

/* ================================================================
   HERO — paper copy, and the slice grown into a colour column
   ================================================================ */
.crt-hero .hero__slice.crt-slice {
  transform: none; top: 0; bottom: 0; opacity: 1;
  width: clamp(60px, 8vw, 122px);
  background:
    radial-gradient(150% 30% at 50% 6%, var(--crt-day-a), transparent 72%),
    radial-gradient(130% 26% at 50% 48%, var(--crt-day-b), transparent 74%),
    radial-gradient(160% 34% at 50% 92%, var(--crt-day-a), transparent 72%),
    linear-gradient(180deg, rgba(16, 36, 54, .07), rgba(16, 36, 54, .03) 42%, rgba(16, 36, 54, .08));
  border-inline: 1px solid rgba(34, 84, 121, .12);
}
/* the left (--a) column steps out of the text column on mid viewports */
.crt-hero .hero__slice--a.crt-slice {
  left: clamp(10px, calc((100% - var(--container)) / 2 - 140px), 6%);
}
/* the true glass pane riding the column, soft seam on its rim */
.crt-slice__pane {
  position: absolute; left: 10px; right: 10px; top: 15%; bottom: 15%;
  border-radius: 19px; --r-ctl: 18px;
  background: linear-gradient(170deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, .12) 55%, rgba(255, 255, 255, .22));
  border: 1px solid rgba(255, 255, 255, .6);
  -webkit-backdrop-filter: blur(6px) saturate(1.35);
          backdrop-filter: blur(6px) saturate(1.35);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .75),
    0 18px 36px -18px rgba(16, 36, 58, .35);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .crt-slice__pane { background: rgba(255, 255, 255, .55); }
}

/* ================================================================
   THE VERIFICATION ROOM — the one dark band per page
   ================================================================ */
.sec.crt-room {
  border-top: 1px solid rgba(214, 167, 96, .5);
  border-bottom: 1px solid rgba(214, 167, 96, .34);
  background: linear-gradient(165deg, #0e2334 0%, #0b1c2c 55%, #0e2740 100%);
  /* the room's own ink set — paper tokens stay untouched outside */
  --crt-ink:  #f2f7fb;
  --crt-body: #c9d9e6;
  --crt-mut:  #9db4c6;
}
.crt-room + .sec, .crt-room + .faq { border-top: 0; }

/* the aurora pool under the glass — brand steel + the page's colour */
.crt-room__pool {
  position: absolute; inset: -6% 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(46% 60% at 12% 18%, var(--crt-pool-a), transparent 70%),
    radial-gradient(40% 52% at 88% 8%, rgba(30, 87, 130, .52), transparent 72%),
    radial-gradient(44% 56% at 78% 94%, var(--crt-pool-b), transparent 72%),
    conic-gradient(from 210deg at 60% 40%,
      transparent 0 40%, rgba(110, 176, 219, .1) 52%, transparent 66%);
}
@keyframes crt-pool { from { translate: 0 -1.4%; } to { translate: 0 1.4%; } }
html.fx .crt-room.in-view .crt-room__pool {
  animation: crt-pool 46s ease-in-out infinite alternate;
}
/* the smoked glass the room is seen through */
.crt-room__glass {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(120deg, rgba(16, 36, 54, .6), rgba(16, 36, 54, .88) 62%);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
          backdrop-filter: blur(18px) saturate(1.25);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .06),
    inset 0 -1px 0 rgba(2, 10, 18, .5);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  /* plain smoked glass — solid, tuned darker so the pool still glows */
  .crt-room__glass { background: linear-gradient(120deg, rgba(13, 30, 45, .82), rgba(11, 25, 38, .93) 62%); }
}

/* copy re-inked for the dark ground */
.crt-room .section-head h2 { color: var(--crt-ink); }
.crt-room .head-rule {
  background: linear-gradient(90deg,
    #e0a45c 0 60%, transparent 60% 70%, rgba(224, 164, 92, .42) 70% 100%);
}
.crt-room .sec-connect__copy > p { color: var(--crt-body); }
.crt-room .sec-context__note { color: var(--crt-mut); }
.crt-room .sec-context__note a { color: #9fc8e8; }
.crt-room :focus-visible { outline-color: #6fd2c8; }
.crt-room ::selection { background: rgba(64, 150, 162, .45); }

/* ================================================================
   THE RUN CONSOLE — the pipe, clay retired, glass rows (gdpr/eu-ai)
   ================================================================ */
.crt-room .pipe.crt-board {
  position: relative; overflow: hidden;
  border-radius: 18px; --r-ctl: 16px;   /* sizes the seam ring */
  background: linear-gradient(152deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .04) 55%, rgba(255, 255, 255, .07));
  border: 1px solid rgba(255, 255, 255, .2);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
          backdrop-filter: blur(12px) saturate(1.4);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .22),
    inset 0 0 0 1px rgba(214, 167, 96, .1),
    0 30px 60px -26px rgba(0, 0, 0, .85);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .crt-room .pipe.crt-board { background: rgba(15, 39, 60, .94); }
}
/* the seam rides just inside the board edge (overflow stays hidden) */
.crt-board > .nx-seam { inset: 0; opacity: .8; }

.crt-board .pipe__head { border-bottom-color: rgba(255, 255, 255, .12); }
.crt-board .pipe__head b { color: var(--crt-ink); }
.crt-board .pipe__head .mono { color: var(--crt-mut); }
.crt-board .pipe__stage + .pipe__stage { border-top-color: rgba(255, 255, 255, .09); }
.crt-board .pipe__stage > .mono:first-child { color: #e0a45c; }
.crt-board .pipe__stage b { color: var(--crt-ink); }
.crt-board .pipe__stage > span:not([class]) { color: var(--crt-body); }
.crt-board .pipe__when { color: var(--crt-mut); transform-origin: right center; }

/* the green on-dot breathes */
@keyframes crt-on { 50% { box-shadow: 0 0 0 4px rgba(69, 209, 125, .13); opacity: .85; } }
html.fx .crt-room .pipe__on { animation: crt-on 3.6s ease-in-out infinite; }

/* the perpetual dwell-step scan: 12s loop, 3s per stage. Without fx the
   animations never attach and all four rows stand fully lit and still. */
.crt-board .pipe__stage:nth-child(2) { --st: 0; }
.crt-board .pipe__stage:nth-child(3) { --st: 1; }
.crt-board .pipe__stage:nth-child(4) { --st: 2; }
.crt-board .pipe__stage:nth-child(5) { --st: 3; }
@keyframes crt-row {
  0%, 100% { background-color: transparent; opacity: .8; }
  2%       { background-color: rgba(255, 255, 255, .05); opacity: 1; }
  21%      { background-color: rgba(255, 255, 255, .05); opacity: 1; }
  25%      { background-color: transparent; opacity: .8; }
}
/* the when-badge stamps as the scan reaches its row: 1.05 -> 1 + rim flash */
@keyframes crt-when {
  0%, 100% { color: var(--crt-mut); transform: scale(1); text-shadow: none; }
  2%       { color: #f0d5a2; transform: scale(1.05); text-shadow: 0 0 10px rgba(230, 192, 136, .5); }
  5%       { transform: scale(1); }
  20%      { color: #f0d5a2; transform: scale(1); text-shadow: 0 0 10px rgba(230, 192, 136, .45); }
  25%      { color: var(--crt-mut); transform: scale(1); text-shadow: none; }
}
html.fx .crt-room.in-view .crt-board .pipe__stage {
  animation: crt-row 12s linear infinite;
  animation-delay: calc(var(--st, 0) * 3s);
}
html.fx .crt-room.in-view .crt-board .pipe__when {
  animation: crt-when 12s linear infinite;
  animation-delay: calc(var(--st, 0) * 3s);
}

/* ================================================================
   THE SWEEP THAT STOPS — cert-track in the room (iso27001/soc2)
   ================================================================ */
/* the hollow hairline track, crisp in the dark */
.crt-room--track .cert-track::before { background: rgba(255, 255, 255, .22); }

/* stations */
.crt-room--track .cert-stop::before {
  background: transparent; border: 1px solid rgba(255, 255, 255, .38);
}
.crt-room--track .cert-stop.is-done::before {
  background: #6eb0db; border: 1.5px solid #6eb0db;
  box-shadow: 0 0 0 3px rgba(110, 176, 219, .16);
}
.crt-room--track .cert-stop.is-now::before {
  background: #0e2233; border: 1.5px solid #e0a45c;
  box-shadow: 0 0 0 4px rgba(224, 164, 92, .22);
}
.crt-room--track .cert-stop .mono { color: var(--crt-mut); }
.crt-room--track .cert-stop.is-done .mono { color: #9fc8e8; }
.crt-room--track .cert-stop.is-now .mono { color: #e6c088; }
.crt-room--track .cert-stop b { color: var(--crt-ink); }
.crt-room--track .cert-stop p { color: var(--crt-body); }

/* the fill is built from per-segment pieces: each DONE station owns the
   piece of rail between its dot and the next station's dot — pure grid
   math, so the sweep lands exactly on the copper NOW dot at any width
   and can never cross a hollow future stop. */
.crt-room--track .cert-stop:nth-child(1) { --seg: 0; }
.crt-room--track .cert-stop:nth-child(2) { --seg: 1; }
.crt-room--track .cert-stop:nth-child(3) { --seg: 2; }
.crt-room--track .cert-stop.is-done::after {
  content: ""; position: absolute;
  top: 6.5px; height: 2px; left: 14px; right: calc(-1rem - 7px);
  border-radius: 2px;
  background: linear-gradient(90deg, #57a2d4, #6eb0db);
  transform-origin: left center;
}
/* the loop: fill 1.12s per segment in sequence, halt at NOW, the copper
   station breathes twice, long hold, fade, restart (14s). Without fx the
   fill stands complete at the NOW station, still. */
@keyframes crt-seg {
  0%    { transform: scaleX(0); opacity: 1; }
  8%    { transform: scaleX(1); opacity: 1; }
  78%   { transform: scaleX(1); opacity: 1; }
  86%   { transform: scaleX(1); opacity: 0; }
  86.1% { transform: scaleX(0); opacity: 0; }
  100%  { transform: scaleX(0); opacity: 0; }
}
html.fx .crt-room--track.in-view .cert-stop.is-done::after {
  animation: crt-seg 14s linear infinite;
  animation-delay: calc(var(--seg, 0) * 1.12s);
}
@keyframes crt-nowpulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(224, 164, 92, .22); }
  2%       { box-shadow: 0 0 0 4px rgba(224, 164, 92, .22); }
  8%       { box-shadow: 0 0 0 9px rgba(224, 164, 92, .34); }
  14%      { box-shadow: 0 0 0 4px rgba(224, 164, 92, .22); }
  20%      { box-shadow: 0 0 0 9px rgba(224, 164, 92, .3); }
  26%      { box-shadow: 0 0 0 4px rgba(224, 164, 92, .22); }
}
/* --crt-now is set inline on the <ol> (iso27001: 3, soc2: 2): the breath
   begins exactly when the last segment lands */
html.fx .crt-room--track.in-view .cert-stop.is-now::before {
  animation: crt-nowpulse 14s linear infinite;
  animation-delay: calc((var(--crt-now, 2) - 1) * 1.12s);
}

/* ================================================================
   PAPER INSTRUMENTS — keep-and-restyle
   ================================================================ */
/* notefacts: concentric hairline rings on a copper gutter rule */
.crt-sec .notefacts { position: relative; }
.crt-sec .notefacts::before {
  content: ""; position: absolute; left: .66rem; top: .4rem; bottom: .45rem;
  width: 1px;
  background: linear-gradient(180deg,
    rgba(168, 94, 36, .28), rgba(168, 94, 36, .28) calc(100% - 2rem), transparent);
}
.crt-sec .notefact::before {
  background: #fdfeff; color: var(--copper);
  border: 1px solid rgba(168, 94, 36, .55);
  box-shadow: 0 0 0 3px #fdfeff, 0 0 0 4px rgba(168, 94, 36, .22);
  font-variant-numeric: tabular-nums;
}

/* gridfacts: pressed paper, inset top-light, status hairline in the
   page's slice colour along the top edge. Deliberately still. */
.crt-sec .gridfact {
  position: relative;
  border-radius: 12px;
  background: linear-gradient(160deg, #ffffff, #f4f8fb);
  border: 1px solid rgba(34, 84, 121, .13);
  box-shadow:
    inset 0 1.5px 0 #fff,
    inset 0 -1px 0 rgba(34, 84, 121, .05),
    0 2px 5px rgba(22, 33, 43, .04),
    0 16px 28px -20px rgba(34, 84, 121, .26);
}
.crt-sec .gridfact::before {
  content: ""; position: absolute; top: -1px; left: 12px; right: 12px; height: 1px;
  background: var(--crt-tint-line);
}

/* request plaques: the folded corner retires; the left edge speaks the
   room's honesty — solid brand for "Sent on request", hollow outline for
   "Not yet held". Radii concentric with the Request button. */
.crt-sec .req-plaque {
  border-radius: 14px;
  border: 1px solid rgba(34, 84, 121, .14);
  padding-left: 1.75rem;
}
.crt-sec .req-plaque::before {
  top: 0; right: auto; bottom: 0; left: 0;
  width: 4px; height: auto;
  background: var(--brand);
  border: 0; border-radius: 14px 0 0 14px;
  box-shadow: none;
}
.crt-sec .req-plaque:has(.trust-pill--prep)::before {
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(34, 84, 121, .45);
}

/* question rail: kept — only the hairline weight joins the new edges */
.crt-sec .qa__unit { border-color: rgba(34, 84, 121, .14); }
.crt-sec .qa__unit.is-open {
  box-shadow: inset 0 1.5px 0 #fff, 0 22px 44px -22px rgba(16, 36, 58, .32);
}

/* ================================================================
   THE CLOSE — the room's pool, in daylight, no glass, no dark
   ================================================================ */
.home-close.crt-close::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(44% 60% at 14% 18%, var(--crt-day-a), transparent 70%),
    radial-gradient(40% 54% at 86% 84%, var(--crt-day-b), transparent 72%),
    linear-gradient(180deg, rgba(253, 254, 255, .86), rgba(250, 252, 254, .8));
}

/* ================================================================
   THE PHONE STORY (≤860px)
   ================================================================ */
@media (max-width: 860px) {
  /* the hero column slims to a margin whisper; the pane rests */
  .crt-hero .hero__slice.crt-slice { width: 38px; border-inline-width: 1px; }
  .crt-slice__pane { display: none; }

  /* the room band runs full-bleed; the console breathes a touch tighter */
  .crt-board .pipe__stage { padding-inline: 1.1rem; }
  .crt-board .pipe__head { padding-inline: 1.1rem; }

  /* the track goes vertical (main.css flips the rail); the fill segments
     flip their axis with it and still stop dead on the NOW dot */
  .crt-room--track .cert-stop.is-done::after {
    top: 14px; bottom: calc(-1.4rem - 7px); left: 6.5px; right: auto;
    width: 2px; height: auto;
    background: linear-gradient(180deg, #57a2d4, #6eb0db);
    transform-origin: center top;
  }
  html.fx .crt-room--track.in-view .cert-stop.is-done::after {
    animation-name: crt-seg-v;
  }
}
@keyframes crt-seg-v {
  0%    { transform: scaleY(0); opacity: 1; }
  8%    { transform: scaleY(1); opacity: 1; }
  78%   { transform: scaleY(1); opacity: 1; }
  86%   { transform: scaleY(1); opacity: 0; }
  86.1% { transform: scaleY(0); opacity: 0; }
  100%  { transform: scaleY(0); opacity: 0; }
}
@media (max-width: 420px) {
  /* the longest when-badge ("NO SOURCE, NO CLAIM") gets its own line */
  .crt-board .pipe__stage { grid-template-columns: 2.1rem minmax(0, 1fr); }
  .crt-board .pipe__when {
    grid-column: 2; grid-row: 3; justify-self: start; margin-top: .3rem;
  }
}

/* ================================================================
   REDUCED MOTION — both loops die; everything stands lit
   (main.css already hides .nx-seam and stills [data-rise])
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  html.fx .crt-room.in-view .crt-room__pool,
  html.fx .crt-room .pipe__on,
  html.fx .crt-room.in-view .crt-board .pipe__stage,
  html.fx .crt-room.in-view .crt-board .pipe__when,
  html.fx .crt-room--track.in-view .cert-stop.is-done::after,
  html.fx .crt-room--track.in-view .cert-stop.is-now::before { animation: none; }
}


/* ==== round 11: the Glean-grammar imagery system (exemplar: data-sources hero) ====
   Two primitives, used together: a colour-graded photograph card with one
   frosted brand chip, and a crisp white product vignette overlapping it,
   both floating on a warm sunset wash. */
.glv { position: relative; padding: clamp(1.2rem, 2.6vw, 2rem);
  border-radius: 28px;
  background:
    radial-gradient(90% 70% at 85% 8%, rgba(255, 214, 168, .55), transparent 60%),
    radial-gradient(80% 60% at 10% 95%, rgba(160, 196, 226, .5), transparent 62%),
    linear-gradient(165deg, #fdf3e7 0%, #f6e3e6 48%, #e2ecf8 100%);
  box-shadow: 0 3px 10px rgba(22, 33, 43, .06), 0 30px 60px -28px rgba(34, 84, 121, .38);
}
.glv__scene { display: block; margin-left: 18%; border-radius: 18px; overflow: clip;
  box-shadow: 0 22px 44px -20px rgba(16, 36, 58, .45); position: relative; }
.glv__scene img { display: block; width: 100%; height: auto; }
.glv__chip { position: absolute; left: 14px; bottom: 14px;
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px;
  background: rgba(255, 255, 255, .55); border: 1px solid rgba(255, 255, 255, .75);
  -webkit-backdrop-filter: blur(10px) saturate(1.4); backdrop-filter: blur(10px) saturate(1.4);
  box-shadow: 0 8px 18px -8px rgba(16, 36, 58, .35); }
.glv__card { position: absolute; left: clamp(.9rem, 2vw, 1.8rem); bottom: clamp(.9rem, 2vw, 1.6rem);
  width: min(62%, 340px); border-radius: 16px; overflow: clip; background: #fff;
  box-shadow: 0 2px 8px rgba(22, 33, 43, .08), 0 26px 52px -22px rgba(16, 36, 58, .45);
  padding-bottom: .55rem; }
.glv__band { display: grid; place-items: start; height: 44px;
  background: linear-gradient(120deg, #2b62c9, #225479 70%); padding: 10px 0 0 12px; }
.glv__spark { width: 24px; height: 24px; border-radius: 8px; background: #fff; position: relative;
  display: block; box-shadow: 0 3px 8px rgba(10, 24, 40, .3); }
.glv__spark::before { content: ""; position: absolute; inset: 6px;
  background: #e8a84a; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.glv__title { display: block; padding: .7rem .9rem .1rem; font-size: 1.02rem;
  letter-spacing: -.012em; font-weight: 700; color: var(--ink); }
.glv__meta { display: block; padding: 0 .9rem .55rem; font-size: .74rem; color: var(--muted); }
.glv__row { display: grid; grid-template-columns: 20px 1fr; gap: .6rem; align-items: start;
  padding: .48rem .9rem; border-top: 1px solid rgba(34, 84, 121, .08); }
.glv__row img { margin-top: .1rem; }
.glv__row b { display: block; font-size: .86rem; letter-spacing: -.008em; color: #1f52b0; }
.glv__row span { display: block; font-size: .72rem; color: var(--muted); }
@media (max-width: 860px) {
  .glv { padding: .9rem; border-radius: 20px; }
  .glv__scene { margin-left: 0; }
  .glv__card { position: static; width: 100%; margin-top: .7rem; }
}


/* ================================================================
   ROUND 11 — IMAGE-LED PAGES (Glean grammar): ten page fragments.
   ================================================================ */

/* ======== about.css ======== */
/* ================================================================
   ROUND 11 · ABOUT — the human page, photography-led (.abp- prefix)
   The dark blueprint room (abt-) is stripped from the markup; the
   page sits on the site aurora. Three imagery moments, all in the
   .glv exemplar grammar from main.css round 11:
     1. hero — team-at-work wash panel, the company fact sheet as a
        white collection card riding the scene's lower edge;
     2. our solution — the leader-on-the-phone photograph with the
        leader's-week meter as a collection card over it;
     3. the position — the walk-through photograph beside the prose.
   Reuses .glv / .glv__scene / .glv__chip / .glv__card / .glv__band /
   .glv__spark / .glv__title / .glv__meta / .glv__row as-is; every
   new selector is .abp- prefixed.
   ================================================================ */

/* ---------------- hero: the fact-sheet collection card ----------------
   The exemplar composition adapted for a five-row card: the scene keeps
   its off-axis shift, the card sits in flow and rides up over the
   scene's lower-left edge, so the frosted mark chip moves to the free
   bottom-right corner. */
.abp-glv .glv__scene { margin-left: 14%; }
.abp-glv .glv__chip { left: auto; right: 14px; }
.abp-glv .glv__card {
  position: relative; left: auto; bottom: auto; z-index: 1;
  width: min(88%, 370px);
  margin: -3rem 0 0 clamp(.1rem, 1vw, .6rem);
}

/* the contact row's mailto keeps the card's link blue */
.abp-fact .glv__row b a {
  color: inherit; overflow-wrap: anywhere;
  border-bottom: 1px solid rgba(31, 82, 176, .28);
}
.abp-fact .glv__row b a:hover { border-bottom-color: #1f52b0; }

/* geometric row leads where no real mark applies (CSS primitives,
   on the row's 20px lead column) */
.abp-lead {
  display: block; width: 10px; height: 10px; border-radius: 50%;
  justify-self: center; margin-top: .3rem;
  background: #2b62c9;
}
.abp-lead--ring { background: none; border: 2px solid rgba(43, 98, 201, .55); }
.abp-lead--warm { background: #d08542; }

/* the reach row leads with the three real channel marks */
.abp-row--reach { grid-template-columns: auto minmax(0, 1fr); }
.abp-marks { display: inline-flex; gap: 4px; margin-top: .2rem; }
.abp-marks img { display: block; width: 16px; height: 16px; }

/* ---- the working shot: a graded scene with one frosted chip ---- */
.abp-shot { margin: 0; min-width: 0; }
.abp-shot__view { display: block; }
.abp-shot__scene { position: relative; display: block; border-radius: 18px;
  overflow: clip;
  box-shadow: 0 3px 10px rgba(22, 33, 43, .08), 0 26px 52px -24px rgba(16, 36, 58, .42); }
.abp-shot__scene img { display: block; width: 100%; height: auto; }

/* the solution aside stacks the figure over the ledger facts */
.abp-solution__aside { display: grid; gap: 1.7rem; align-content: start;
  min-width: 0; }

/* the position shot centres against its prose column */
.abp-position .abp-shot--pos { align-self: center; }

/* the frozen capacity note rides under the card, in body voice
   (deliberately NOT the mono figcaption base style) */
.abp-shot__note { margin: .85rem .2rem 0; font-size: .86rem; line-height: 1.6;
  color: var(--muted); max-width: 34rem; }

/* ---- the leader's-week meter as a white collection card, lifted
       onto the photograph's lower edge (Glean card-over-photo);
       band, spark, title and meta come from the .glv grammar ---- */
.abp-week { position: relative; z-index: 1; width: min(88%, 350px);
  margin: -3rem 0 0 clamp(.8rem, 2vw, 1.4rem);
  border-radius: 16px; overflow: clip; background: #fff;
  box-shadow: 0 2px 8px rgba(22, 33, 43, .08), 0 26px 52px -22px rgba(16, 36, 58, .45);
  padding-bottom: .85rem; }
.abp-week__row { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr);
  gap: .55rem; align-items: center; padding: .5rem .9rem 0; }
.abp-week__tag { font-size: .7rem; font-weight: 650; color: var(--muted);
  letter-spacing: .01em; }
.abp-week__bar { display: flex; gap: 3px; height: 26px; border-radius: 8px;
  overflow: hidden; min-width: 0; }
.abp-week__seg { width: var(--w); min-width: 0; display: flex; align-items: center;
  justify-content: space-between; gap: .35rem; padding-inline: .5rem;
  font-style: normal; background: linear-gradient(120deg, #2b62c9, #225479); }
.abp-week__seg em { font-style: normal; font-size: .6rem; letter-spacing: .01em;
  color: rgba(255, 255, 255, .88); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.abp-week__seg b { font-size: .66rem; font-weight: 700; color: #fff;
  font-variant-numeric: tabular-nums; }
.abp-week__seg--route { background: linear-gradient(120deg, #eaaa4e, #d08542); }
.abp-week__seg--route em, .abp-week__seg--route b { color: #47280a; }

/* ---- mobile story (<=860px): cards stack, photos run full width,
       nothing clips (main.css already rests the .glv panel and lets
       the scene go full-width at this break) ---- */
@media (max-width: 860px) {
  /* the base .abp-glv rules out-rank main.css's single-class 860 reset,
     so the scene shift and card lift are rested here explicitly */
  .abp-glv .glv__scene { margin-left: 0; }
  .abp-glv .glv__card { width: 100%; margin: .7rem 0 0; }
  .abp-week { width: 100%; margin: .7rem 0 0; }
  .abp-shot__note { max-width: none; margin-inline: .1rem; }
  .abp-shot__scene { border-radius: 16px; }
  .abp-solution__aside { gap: 1.3rem; }
}

/* ======== affiliate.css ======== */
/* ==================== affiliate ==================== */
/* ============================================================
   FRAGMENT · affiliate — round 11, the Glean grammar (prefix .afv-)
   Three imagery moments, each proving the sentence beside it:
   the hero recommendation (shared .glv wash panel — photo of one
   colleague walking another through a screen, the referral bill
   as a white card with the blue band, three stacked collection
   rows and the total), the mirrored deal composition (the
   explaining photographed + the journey card), and the honest
   conversation floating above the ledger of links. Extends the
   shared .glv system; appended after main.css, so bare .glv__*
   overrides here win the source-order tie.
   ============================================================ */

/* ---------- the referral bill: money rows inside the glv card ---------- */
.afv-bill .glv__meta { padding-bottom: .6rem; }
.afv-mrow {
  display: flex; align-items: baseline; gap: .7rem;
  padding: .5rem .9rem .52rem;
  border-top: 1px solid rgba(34, 84, 121, .08);
}
.afv-mrow > div { min-width: 0; }
.afv-mrow b {
  display: block; font-size: .84rem; font-weight: 650;
  letter-spacing: -.008em; color: var(--ink);
}
.afv-mrow span { display: block; font-size: .7rem; color: var(--muted); }
.afv-mrow i {
  margin-left: auto; font-style: normal; font-weight: 700;
  font-size: .9rem; letter-spacing: -.01em; color: #1f52b0;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* the total row: the band's blue returns as a tinted floor */
.afv-mrow--total {
  margin-top: .2rem; border-top: 2px solid rgba(43, 98, 201, .22);
  background: linear-gradient(180deg, rgba(43, 98, 201, .07), rgba(43, 98, 201, .02));
}
.afv-mrow--total b { color: #1f52b0; }
.afv-mrow--total i { font-size: 1.02rem; }

/* ---------- the deal section: the composition mirrors ---------- */
.afv-stage { min-width: 0; }
.afv-flip .glv__scene { margin-left: 0; margin-right: 18%; }
.afv-flip .glv__card { left: auto; right: clamp(.9rem, 2vw, 1.8rem); }
/* the chip keeps the exemplar's corner — opposite the card, never under it */

/* the euro tile: a CSS primitive standing in the icon column
   (scoped under .glv__row to outrank the shared `.glv__row span`) */
.glv__row .afv-euro, .afv-euro {
  display: grid; place-items: center; width: 20px; height: 20px;
  margin-top: .1rem; border-radius: 6px; color: #fff;
  font-size: .72rem; font-weight: 700; line-height: 1;
  background: linear-gradient(150deg, #2b62c9, #225479);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
}

/* ---------- the conversation photo above the ledger ---------- */
.afv-photo {
  position: relative; margin: 0 0 1.4rem; border-radius: 18px;
  overflow: clip;
  box-shadow: 0 3px 10px rgba(22, 33, 43, .08),
              0 26px 50px -24px rgba(16, 36, 58, .45);
}
.afv-photo img { display: block; width: 100%; height: auto; }

/* ---------- the close: one soft wash behind the last sentence ---------- */
.afv-close::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(46% 60% at 16% 22%, rgba(255, 214, 168, .34), transparent 70%),
    radial-gradient(42% 56% at 84% 80%, rgba(160, 196, 226, .32), transparent 72%);
}

/* ---------- the phone story (≤860px): panels stack, photos run
   full width, the cards drop under their scenes (shared .glv rules
   already re-seat .glv__scene and .glv__card) ---------- */
@media (max-width: 860px) {
  .afv-flip .glv__scene { margin-right: 0; }
  .afv-stage { max-width: 520px; margin-inline: auto; }
  .afv-photo { margin-bottom: 1.1rem; }
}

/* ======== cert-family.css ======== */
/* ==== round 12 · cert-family (gdpr / eu-ai / iso27001 / soc2) ====
   The dark certification rooms go light. Each page opens with a badge
   pavilion: the certification's real mark presented large on the approved
   warm wash (.glv base), one white mechanism vignette overlapping from the
   lower left — band, spark, rows, all exemplar classes. Down the page the
   same grammar carries the mechanism sequences: a graded photograph on a
   wash with the sequence re-told as a white card hanging off its lower
   edge (gdpr, eu-ai), or a photograph with a frosted badge chip standing
   beside the control facts (iso27001, soc2). New classes are .cf- ; the
   retired dark-room .crt- names stay untouched in main.css. No JS. */

/* ---------------- the badge pavilion (hero) ---------------- */
.cf-glv { min-height: clamp(380px, 33vw, 470px); display: grid; }
.cf-stage { position: relative; margin-left: 16%; align-self: stretch;
  display: grid; place-items: center;
  padding: clamp(1.4rem, 2.8vw, 2.2rem); }
.cf-stage::before { content: ""; position: absolute; inset: 8% 4%;
  background: radial-gradient(58% 52% at 52% 44%, rgba(255, 255, 255, .9), transparent 70%); }
.cf-stage img { position: relative; width: auto;
  filter: drop-shadow(0 20px 34px rgba(16, 36, 58, .26)) drop-shadow(0 2px 6px rgba(16, 36, 58, .14)); }
/* per-mark sizing: the SVG scales freely; the raster seals stay near their
   native pixels so the marks keep their edges */
.cf-stage--gdpr img { height: clamp(160px, 15vw, 208px); }
.cf-stage--iso img  { height: clamp(140px, 12.5vw, 170px); }
.cf-stage--soc img  { height: clamp(110px, 9.5vw, 126px); }
.cf-stage--euai img { height: auto; width: min(82%, 400px); }

/* ---------------- drafted state chips ----------------
   The vignette rows carry state, not source marks (real marks only;
   these are geometric primitives). */
.cf-st { display: block; width: 18px; height: 18px; border-radius: 6px;
  margin-top: .12rem; position: relative; }
.cf-st--done { background: linear-gradient(160deg, #2e6796, #1d4a6c);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); }
.cf-st--done::before { content: ""; position: absolute; left: 4px; top: 5px;
  width: 8px; height: 4.5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg); }
.cf-st--now { background: #fff; border: 2px solid #c06b2d; }
.cf-st--now::before { content: ""; position: absolute; inset: 3px;
  border-radius: 3px; background: #d68034; }
.cf-st--next { background: rgba(255, 255, 255, .72); border: 1.5px solid rgba(34, 84, 121, .32); }
.cf-st--next::before { content: ""; position: absolute; inset: 5.5px;
  border-radius: 2px; background: rgba(34, 84, 121, .3); }
/* state rows read as ink, not links: only real links keep the blue */
.cf-glv .glv__row b { color: var(--ink); }
.cf-glv .glv__row--now b { color: #a35410; }

/* ---------------- the sequence panel (gdpr, eu-ai) ----------------
   Graded photo shifted right on the wash, frosted chip on its right
   corner, the mechanism sequence as a white card hanging off the lower
   left edge — the approved sweep-log composition. */
.cf-glvp .glv__scene { margin-left: 14%; }
.cf-glvp .glv__chip { left: auto; right: 14px; }
.cf-glvp .glv__chip img { width: 26px; height: 26px; object-fit: contain; }
.cf-card--flow { position: relative; left: auto; bottom: auto; z-index: 1;
  width: min(84%, 416px); margin: -4.6rem auto 0 0; }
.cf-meta { font-size: .66rem; font-weight: 600; letter-spacing: .1em;
  color: var(--faint); padding-bottom: .6rem; }
.cf-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0 .6rem; align-items: baseline;
  padding: .48rem .9rem .5rem;
  border-top: 1px solid rgba(34, 84, 121, .08); }
.cf-row__n { font-size: .78rem; font-weight: 700; color: #1f52b0;
  font-variant-numeric: tabular-nums; }
.cf-row > div > b { display: block; font-size: .85rem; font-weight: 650;
  letter-spacing: -.008em; color: var(--ink); }
.cf-row > div > span { display: block; font-size: .72rem; line-height: 1.45;
  color: var(--muted); }
.cf-row__tag { max-width: 7.2em; text-align: right; align-self: start;
  padding-top: .12em; font-size: .56rem; font-weight: 650;
  letter-spacing: .11em; line-height: 1.5; color: var(--faint); }

/* ---------------- the photograph card (iso27001, soc2) ----------------
   Graded scene, one frosted badge chip, standing beside the facts. */
.cf-shot { margin: 0; position: relative; border-radius: 18px; overflow: clip;
  box-shadow: 0 3px 10px rgba(22, 33, 43, .08), 0 26px 52px -22px rgba(16, 36, 58, .42); }
.cf-shot img { display: block; width: 100%; height: auto; }
.cf-shot .glv__chip img { width: 26px; height: 26px; object-fit: contain; }
.cf-factside { display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 7fr);
  gap: clamp(1.4rem, 3.2vw, 2.8rem); align-items: center; }
.cf-factside .gridfacts { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ---------------- the certification track (iso27001, soc2) ----------------
   The stations as white paper cards on one warm wash; state chips carry
   done / in-progress / next. */
.cf-trackwash { padding: clamp(1.2rem, 2.6vw, 2rem); }
.cf-track { list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.9rem, 1.8vw, 1.4rem); }
.cf-stop { display: grid; align-content: start; gap: .5rem;
  border-radius: 16px; background: #fff;
  padding: 1.15rem 1.2rem 1.25rem;
  box-shadow: 0 2px 8px rgba(22, 33, 43, .08), 0 26px 52px -22px rgba(16, 36, 58, .35); }
.cf-stop .cf-st { margin: 0 0 .15rem; }
.cf-stop__k { font-size: .66rem; font-weight: 650; letter-spacing: .12em;
  color: var(--faint); font-variant-numeric: tabular-nums; }
.cf-stop b { font-size: 1rem; font-weight: 700; letter-spacing: -.01em;
  color: var(--ink); }
.cf-stop p { font-size: .84rem; line-height: 1.55; color: var(--muted); }
.cf-stop.is-now { border: 1px solid rgba(214, 150, 74, .6);
  box-shadow: 0 2px 8px rgba(22, 33, 43, .08), 0 26px 52px -22px rgba(16, 36, 58, .35),
    0 0 0 4px rgba(214, 150, 74, .14); }
.cf-stop.is-now .cf-stop__k { color: #a35410; }

/* ---------------- mobile: pavilion stacks (base .glv already parks the
   card), stations and facts go single column, photos run full width,
   nothing clips ---------------- */
@media (max-width: 1100px) {
  .cf-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .cf-glv { min-height: 0; }
  .cf-stage { margin-left: 0; min-height: 250px; padding: 1.6rem 1rem; }
  .cf-stage--gdpr img { height: 150px; }
  .cf-stage--iso img  { height: 132px; }
  .cf-stage--soc img  { height: 110px; }
  .cf-stage--euai img { width: min(86%, 330px); }
  .cf-glvp .glv__scene { margin-left: 0; }
  .cf-card--flow { width: 100%; margin: .7rem 0 0; }
  .cf-row { padding-inline: .75rem; }
  .cf-row__tag { max-width: 6.4em; font-size: .52rem; }
  .cf-trackwash { padding: .9rem; border-radius: 20px; }
  .cf-track { grid-template-columns: minmax(0, 1fr); }
  .cf-factside { grid-template-columns: minmax(0, 1fr); }
  .cf-factside .gridfacts { grid-template-columns: minmax(0, 1fr); }
  .cf-shot { border-radius: 14px; }
}

/* ======== compliance.css ======== */
/* ==== round 13: compliance — the light field hero (+ round-11 imagery) ====
   The vault went light (founder 08-19): the hero is one full-bleed generated
   field — layered glass planes under wireframe graph grids, copper glints on
   a pale sky (img/compliance/hero-field.webp, flux-ultra, rig:
   bin/art/compliance-hero) — with the copy and the audit-register card
   riding ON the field. Message: security first, as architecture. The rest
   of the page keeps the round-11 imagery system on the light ground. */

/* ---------------- the field hero ---------------- */
.cpxh {
  background: #e9edf4;                       /* the scene's own sky, for the load beat */
  padding-bottom: clamp(3.2rem, 6.5vw, 5.6rem);
}
/* the scene IS the section (the glean.com/platform/security grammar, ours):
   one luminous field with the glass shield and the ribbon wave, laid cover
   under the copy; the certification chips are baked into the raster. */
.cpxh__field { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.cpxh__field img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
/* one soft clearing under the copy column: the wave stays visible as a
   whisper beneath the text, the way the reference keeps its copy zone white */
.cpxh__veil {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(52% 68% at 22% 55%,
    rgba(250, 251, 253, .85), rgba(250, 251, 253, .4) 56%, transparent 78%);
}
.cpxh__grid {
  position: relative; z-index: 1;
  display: flex; align-items: center;
}
.cpxh__grid .page-hero__copy { flex: 0 1 40rem; }

/* the /context crumb recipe verbatim (see the .pmxh notes) */
.cpxh .page-hero__crumb {
  display: flex; align-items: center; gap: .55rem;
  font-family: var(--font-sans); font-size: 1.05rem; font-weight: 500;
  letter-spacing: -.006em; text-transform: none; color: var(--muted);
  margin-bottom: 1.1rem;
}
.cpxh .page-hero__crumb img { width: 24px; height: 24px; object-fit: contain; }
.cpxh .page-hero__crumb i { font-style: normal; color: var(--copper); }
.cpxh .page-hero__crumb b {
  font-weight: 520; letter-spacing: .012em;
  background-image: linear-gradient(90deg, var(--brand), #d08542);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

@media (min-width: 1700px) {
  /* ultrawide cover crops top+bottom; bias the window upward so the shield
     keeps its air under the nav (the deep silk yields instead) */
  .cpxh__field img { object-position: center 30%; }
}
@media (max-width: 1180px) {
  .cpxh__grid .page-hero__copy { flex-basis: 30rem; }
}
@media (max-width: 960px) {
  /* the tall scene rides UNDER the copy, bottom-anchored and uncropped: its
     own calm top melts into the section ground, so it still reads as one
     full-bleed field while the shield and the chips land below the CTAs */
  .cpxh { background: #eef1f7; padding-bottom: clamp(25rem, 140vw, 40rem); }
  .cpxh__veil { display: none; }
  .cpxh__field { inset: auto 0 0 0; display: flex; justify-content: center; }
  .cpxh__field img {
    width: min(100%, 30rem); height: auto; object-fit: contain;
  }
}

/* register-row glyphs on the vignette card: geometric tiles, no artwork */
.cmv-tick {
  width: 18px; height: 18px; margin-top: .1rem; border-radius: 6px;
  background: linear-gradient(150deg, #2b62c9, #225479);
  position: relative; display: block;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 2px 5px -2px rgba(16, 36, 58, .5);
}
.cmv-tick::after {
  content: ""; position: absolute; left: 5px; top: 4.5px;
  width: 7px; height: 4.5px;
  border-left: 1.8px solid #fff; border-bottom: 1.8px solid #fff;
  transform: rotate(-45deg); border-radius: .5px;
}
.cmv-tick--ok { background: linear-gradient(150deg, #e8a84a, #cf8a34); }

/* ---------------- the badge lockup (06) ----------------
   Four white vignette cards on one sunset wash; each mark is the real
   badge asset, raw on the paper (no tile chrome). */
.cmv-certwash {
  position: relative; border-radius: 28px;
  padding: clamp(1.2rem, 2.6vw, 2rem);
  background:
    radial-gradient(90% 70% at 85% 8%, rgba(255, 214, 168, .55), transparent 60%),
    radial-gradient(80% 60% at 10% 95%, rgba(160, 196, 226, .5), transparent 62%),
    linear-gradient(165deg, #fdf3e7 0%, #f6e3e6 48%, #e2ecf8 100%);
  box-shadow: 0 3px 10px rgba(22, 33, 43, .06), 0 30px 60px -28px rgba(34, 84, 121, .38);
}
.cmv-certs {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.9rem, 1.8vw, 1.4rem);
}
.cmv-cert {
  display: grid; align-content: start; gap: .55rem;
  border-radius: 16px; background: #fff;
  padding: 1.15rem 1.2rem 1.2rem;
  box-shadow: 0 2px 8px rgba(22, 33, 43, .08), 0 26px 52px -22px rgba(16, 36, 58, .35);
  transition: transform .22s ease, box-shadow .22s ease;
}
.cmv-cert:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 8px rgba(22, 33, 43, .08), 0 32px 60px -22px rgba(16, 36, 58, .45);
}
.cmv-cert__mark { display: flex; align-items: center; height: 64px; }
.cmv-cert__mark img { display: block; width: auto; height: auto; max-height: 56px; max-width: 100%; }
.cmv-cert__mark--wide img { max-height: 40px; }
.cmv-cert__row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.cmv-cert__row b { font-size: 1rem; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.cmv-cert__status {
  font-size: .62rem; font-weight: 650; letter-spacing: .12em;
  padding: .18rem .55rem; border-radius: 99px;
  background: var(--brand-wash-2); color: var(--brand);
}
.cmv-cert p { font-size: .85rem; line-height: 1.55; color: var(--muted); }
.cmv-cert .link-more { font-size: .88rem; margin-top: .1rem; }

/* ---------------- the document register (07) ----------------
   The three requestable artifacts as white register-card vignettes:
   blue band + spark on top (the round-11 card grammar), the plaque body
   below, all three floating on the same wash. */
.cmv-registerwash {
  position: relative; border-radius: 28px;
  padding: clamp(1.2rem, 2.6vw, 2rem);
  background:
    radial-gradient(90% 70% at 12% 6%, rgba(255, 214, 168, .5), transparent 60%),
    radial-gradient(80% 60% at 92% 96%, rgba(160, 196, 226, .5), transparent 62%),
    linear-gradient(200deg, #fdf3e7 0%, #f6e3e6 48%, #e2ecf8 100%);
  box-shadow: 0 3px 10px rgba(22, 33, 43, .06), 0 30px 60px -28px rgba(34, 84, 121, .38);
}
.cmv-register {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.9rem, 1.8vw, 1.4rem);
}
.cmv-reg {
  display: flex; flex-direction: column;
  border-radius: 16px; overflow: clip; background: #fff;
  box-shadow: 0 2px 8px rgba(22, 33, 43, .08), 0 26px 52px -22px rgba(16, 36, 58, .35);
}
.cmv-reg .glv__band { flex: none; }
.cmv-reg .req-plaque {
  flex: 1; border: 0; border-radius: 0; box-shadow: none;
  background: #fff;
  grid-template-columns: minmax(0, 1fr); align-content: start; gap: .8rem;
  padding: 1rem 1.2rem 1.2rem;
}
.cmv-reg .req-plaque::before { display: none; }   /* band replaces the folded corner */
.cmv-reg .req-plaque__act { align-self: end; }

/* ---------------- the trust reading room (08) ---------------- */
.cmv-trusthead {
  display: grid; grid-template-columns: minmax(0, 9fr) minmax(0, 11fr);
  gap: clamp(1.6rem, 4vw, 4rem); align-items: center;
  margin-bottom: clamp(1.8rem, 4vw, 3rem);
}
.cmv-trusthead .section-head { margin-bottom: 0; }
.cmv-photo { margin-left: 0; border-radius: 14px; }
/* the portrait, dressed: the GENERATED silk wash (the arch section's
   family, trust-wash) as the field around a frost frame (house glass +
   the header's rim ring), the photograph riding inside - no chip */
.cmv-glv {
  position: relative; overflow: clip;
  padding: clamp(1.6rem, 3vw, 2.6rem);
  background: linear-gradient(165deg, #f6efe6 0%, #e9eef7 100%);
}
.cmv-glv__wash {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
  filter: saturate(1.3) contrast(1.04);
}
.cmv-glass { z-index: 1; }
.cmv-glass {
  display: block; position: relative;
  padding: clamp(.7rem, 1.2vw, 1rem);
  border-radius: 22px;
  background:
    linear-gradient(112deg, rgba(255, 255, 255, .38) 2%, rgba(255, 255, 255, .06) 34%),
    linear-gradient(180deg, rgba(252, 254, 255, .42), rgba(243, 247, 251, .22));
  -webkit-backdrop-filter: blur(14px) saturate(160%);
          backdrop-filter: blur(14px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .85),
    inset 0 -1px 0 rgba(34, 84, 121, .07),
    0 18px 40px -18px rgba(22, 33, 43, .28);
}
/* the rim: the header's 1px gradient ring, only the band paints */
.cmv-glass::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  padding: 1px; pointer-events: none;
  background: linear-gradient(135deg,
    rgba(255, 255, 255, .95), rgba(255, 255, 255, .30) 28%,
    rgba(34, 84, 121, .20) 58%, rgba(255, 255, 255, .60) 96%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
}

/* ---------------- the mobile story ---------------- */
@media (max-width: 1100px) {
  .cmv-certs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cmv-register { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .cmv-certwash, .cmv-registerwash { padding: .9rem; border-radius: 20px; }
  .cmv-trusthead { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
  .cmv-photo { width: 100%; }
}
@media (max-width: 560px) {
  .cmv-certs { grid-template-columns: minmax(0, 1fr); }
}

/* ------------- the architecture figure: photos that follow the rail -------
   Founder round 2: the abstract still is dead. The figure is a certwash-
   shaped colour panel (this round's generated wash art as its ground), the
   about-page glass mat riding it, and inside the mat a deck of REAL photos
   (Pexels, graded steel; provenance in img/compliance/SOURCES.txt), one per
   rail point. pages.js flips the deck with the live point; without motion
   the first photo stands. */
.cpxa__stage {
  position: relative; border-radius: 28px; overflow: clip;
  padding: clamp(1.1rem, 2.2vw, 1.7rem);
}
.cpxa__wash {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
  filter: saturate(1.3) contrast(1.04);
}
.cpxa__art {
  --mat: clamp(7px, .85vw, 13px);
  --matr: clamp(20px, 2.2vw, 26px);
  position: relative; z-index: 1;
  margin: 0; padding: var(--mat); border-radius: var(--matr);
  border: 1px solid var(--glass-line);
  /* thinner frost than the about mat: the wash's colour must read
     through the ring, not be painted out by it */
  background:
    linear-gradient(112deg, rgba(255, 255, 255, .30) 2%, rgba(255, 255, 255, 0) 32%),
    linear-gradient(180deg, rgba(255, 255, 255, .30), rgba(243, 247, 251, .16));
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
          backdrop-filter: blur(14px) saturate(1.5);
  box-shadow:
    inset 0 1px 0 var(--glass-edge),
    inset 0 -1px 0 rgba(34, 84, 121, .07),
    inset 1px 0 0 var(--glass-line),
    inset -1px 0 0 rgba(255, 255, 255, .30),
    0 0 0 1px rgba(34, 84, 121, .09),
    0 2px 6px rgba(22, 33, 43, .05),
    0 30px 58px -28px rgba(34, 84, 121, .5);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .cpxa__art { background: rgba(255, 255, 255, .72); }
}
.cpxa__deck {
  position: relative; aspect-ratio: 1 / 1;
  border-radius: calc(var(--matr) - var(--mat));
  overflow: clip;
}
.cpxa__deck img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity .55s ease;
}
.cpxa__deck img.is-cur { opacity: 1; }
/* the panel owns the space left of the list (founder round 3: larger,
   lower): wider figure track than the conduct 8fr, bottom edge riding
   the rail's last point, square photo so the frame out-scales the wash */
@media (min-width: 961px) {
  .cpxa-grid.msgv-grid--flip { grid-template-columns: minmax(0, 9.5fr) minmax(0, 10.5fr); }
  .cpxa-grid .msgv-figwrap { align-self: end; }
}
@media (prefers-reduced-motion: reduce) {
  .cpxa__deck img { transition: none; }
}

/* ------------- the trust library: a messy pile of papers -------------
   The frontpage phone pile (.ctxchats is-pile / buildPile), carried to
   EVERY viewport for the library. In the pile a paper shows only its
   head - kicker, pill, title, summary, the first body lines dissolving
   at the fold (a pile is browsed, never scrolled; the full text stays
   in the DOM). Side glass arrows walk the pile; the promote lifts a
   sheet FULLY CLEAR of the pile before it lands on top, z flipping only
   at the clear apex, so occlusion stays physical the whole flight.
   Hover or click on the front paper opens the reading state: the sheet
   grows out of the pile to the middle of the frame (transform-only FLIP
   in pages.js), full text fitted to the viewport - long documents turn
   two-column broadsheet rather than ever scrolling. Without JS (no
   .is-live) the papers stand as a plain readable list, bodies open. */
/* z 30: the pile block outranks its sibling head/photo, so a paper in
   flight passes OVER the section's furniture, never behind the photo
   card (its own z-indexes are trapped inside this stacking context) */
.cpxp { position: relative; z-index: 30; margin-top: 2.2rem; }
.cpxp__pile { position: relative; }
.cpxp__paper {
  width: min(600px, calc(100% - 1.5rem));
  margin: 0 auto 1rem;
  background: linear-gradient(178deg, #fffefb, #fbf9f4);
  border: 1px solid rgba(34, 84, 121, .14);
  border-radius: 10px;
  padding: 1.35rem 1.55rem 1.15rem;
  box-shadow:
    0 1px 2px rgba(22, 33, 43, .07),
    0 12px 22px -14px rgba(34, 84, 121, .38);
}
.cpxp__pile.is-live .cpxp__paper {
  position: absolute; left: 50%; top: 0; margin: 0;
  overflow: hidden;   /* a pile card CLIPS - wide layouts window inside it */
  transition: transform var(--pp-move, .58s) cubic-bezier(.3, .72, .24, 1),
              box-shadow .3s ease;
  will-change: transform;
  cursor: pointer;
}
.cpxp__pile.is-live .cpxp__paper.pp-0 { cursor: pointer; }
/* the front paper's hover is an AFFORDANCE, not an opening: a slight
   grow and lift that says "click me" - the click does the expanding */
.cpxp__pile.is-live .cpxp__paper.pp-0:hover:not(.is-zoom):not(.is-promote):not(.is-demote) {
  transform: translate3d(-50%, -5px, 0) scale(1.022);
  transition-duration: .22s;
  box-shadow:
    0 2px 4px rgba(22, 33, 43, .08),
    0 20px 34px -16px rgba(34, 84, 121, .46);
}
.cpxp__paper:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.cpxp__head { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.cpxp__kicker {
  font-size: .74rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
}
.cpxp__title { margin: .55rem 0 0; font-size: 1.18rem; letter-spacing: -.014em; }
.cpxp__sum { margin: .45rem 0 0; font-size: .93rem; line-height: 1.55; color: var(--muted); }
.cpxp__body {
  margin-top: .9rem; padding-top: .9rem;
  border-top: 1px solid rgba(34, 84, 121, .10);
  font-size: .92rem; line-height: 1.6;
}
/* in the pile the body is a tease clipped at the fold - never a
   scrollbar on a sheet of paper. The dissolve is painted by the fold
   VEIL below (not a mask), so it rides and crossfades with the flight. */
.cpxp__pile.is-live .cpxp__paper:not(.is-zoom) .cpxp__body {
  max-height: 5.6rem; overflow: hidden;
}
/* the fold veil: paper-coloured gradient pinned to the box's bottom
   edge. A real element (pages.js injects it) because its crossfade is
   a WAAPI leg of the flight - CSS transitions die at the reparents,
   WAAPI rides through them. Base opacity 1 = the pile's tease fade;
   the flight animates it out as the window opens, back in closing. */
.cpxp__fold {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 4.2rem; z-index: 2; pointer-events: none;
  border-radius: 0 0 10px 10px;
  background: linear-gradient(180deg, rgba(251, 249, 244, 0), #fbf9f4 88%);
}
.cpxp__body h4 { margin: 1rem 0 .3rem; font-size: .95rem; }
.cpxp__body p { margin: .45rem 0; color: var(--muted); }
.cpxp__body .hair-rows { margin: .6rem 0; }
/* rest poses: the top paper straight, the rest fanned messily, deep ones
   clustering - every pose names itself in --pp-from + --pp-z for the arc */
.cpxp__pile.is-live { --pp-top: translate3d(-50%, 0, 0) rotate(0deg);
  --pp-apex: translate3d(-52%, -118%, 0) rotate(-3.4deg) scale(1.03);
  --pp-deep: translate3d(-51.5%, 11.8%, 0) rotate(-1.6deg) scale(.917); }
.cpxp__pile.is-live .pp-0 { z-index: 10; transform: translate3d(-50%, 0, 0) rotate(0deg); }
.cpxp__pile.is-live .pp-1 { z-index: 9; --pp-z: 9; transform: translate3d(-41%, 2.4%, 0) rotate(3.8deg) scale(.985);  --pp-from: translate3d(-41%, 2.4%, 0) rotate(3.8deg) scale(.985); }
.cpxp__pile.is-live .pp-2 { z-index: 8; --pp-z: 8; transform: translate3d(-59.5%, 4.2%, 0) rotate(-4.4deg) scale(.972);--pp-from: translate3d(-59.5%, 4.2%, 0) rotate(-4.4deg) scale(.972); }
.cpxp__pile.is-live .pp-3 { z-index: 7; --pp-z: 7; transform: translate3d(-43.5%, 6.4%, 0) rotate(2.9deg) scale(.958);--pp-from: translate3d(-43.5%, 6.4%, 0) rotate(2.9deg) scale(.958); }
.cpxp__pile.is-live .pp-4 { z-index: 6; --pp-z: 6; transform: translate3d(-56.5%, 8%, 0) rotate(-3.3deg) scale(.946); --pp-from: translate3d(-56.5%, 8%, 0) rotate(-3.3deg) scale(.946); }
.cpxp__pile.is-live .pp-5 { z-index: 5; --pp-z: 5; transform: translate3d(-46%, 9.4%, 0) rotate(2.1deg) scale(.936);  --pp-from: translate3d(-46%, 9.4%, 0) rotate(2.1deg) scale(.936); }
.cpxp__pile.is-live .pp-6 { z-index: 4; --pp-z: 4; transform: translate3d(-54%, 10.4%, 0) rotate(-2.4deg) scale(.928);--pp-from: translate3d(-54%, 10.4%, 0) rotate(-2.4deg) scale(.928); }
.cpxp__pile.is-live .pp-7 { z-index: 3; --pp-z: 3; transform: translate3d(-48%, 11.2%, 0) rotate(1.4deg) scale(.922); --pp-from: translate3d(-48%, 11.2%, 0) rotate(1.4deg) scale(.922); }
.cpxp__pile.is-live .pp-8 { z-index: 2; --pp-z: 2; transform: translate3d(-51.5%, 11.8%, 0) rotate(-1.6deg) scale(.917);--pp-from: translate3d(-51.5%, 11.8%, 0) rotate(-1.6deg) scale(.917); }
/* the promote: pulled straight up OUT of the pile - the apex rides fully
   above the tallest silhouette - then laid down on top. z holds the
   paper's own depth while it slides out from under its cover (physical:
   a sheet pulled from a pile) and flips only at the apex, where nothing
   overlaps, so the flip has no frame to show. */
@keyframes cpxp-arc {
  0%    { transform: var(--pp-from, var(--pp-top)); z-index: var(--pp-z, 1); }
  46%   { transform: var(--pp-apex); z-index: var(--pp-z, 1); }
  46.1% { transform: var(--pp-apex); z-index: 11; }
  100%  { transform: var(--pp-top); z-index: 11; }
}
.cpxp__pile.is-live .is-promote { animation: cpxp-arc var(--pp-dur, .85s) cubic-bezier(.33, .62, .24, 1) both; }
/* the deal: NEXT sends the front sheet to the back - same clear-air
   apex, z flipping downward instead, landing in the deepest pose */
@keyframes cpxp-out {
  0%    { transform: var(--pp-top); z-index: 11; }
  46%   { transform: var(--pp-apex); z-index: 11; }
  46.1% { transform: var(--pp-apex); z-index: 1; }
  100%  { transform: var(--pp-deep); z-index: 1; }
}
.cpxp__pile.is-live .is-demote { animation: cpxp-out var(--pp-dur, .85s) cubic-bezier(.33, .62, .24, 1) both; }
/* the arrows: tall glass capsules riding the pile's sides - the site
   header's own material (layered sheen + backdrop + masked 1px rim
   ring), never a row of buttons below */
.cpxp__nav { position: absolute; inset: 0; pointer-events: none; }
.cpxp__pile:not(.is-live) + .cpxp__nav { display: none; }
.cpxp__arrow {
  position: absolute; top: 50%; z-index: 12; pointer-events: auto;
  width: 46px; height: 96px; border-radius: 999px;
  transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--brand);
  border: 0;
  background:
    linear-gradient(112deg, rgba(255, 255, 255, .34) 2%, rgba(255, 255, 255, 0) 34%),
    linear-gradient(180deg, rgba(250, 253, 255, .60), rgba(238, 244, 250, .38));
  -webkit-backdrop-filter: blur(22px) saturate(180%);
          backdrop-filter: blur(22px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .90),
    inset 0 -1px 0 rgba(34, 84, 121, .09),
    inset 1px 0 0 rgba(255, 255, 255, .32),
    inset -1px 0 0 rgba(255, 255, 255, .24),
    0 2px 6px rgba(22, 33, 43, .06),
    0 18px 36px -16px rgba(22, 33, 43, .28);
  transition: background .28s ease, box-shadow .28s ease,
              transform .28s cubic-bezier(.3, .7, .3, 1.25);
}
/* the header's rim: a 1px gradient ring, masked so only the band paints */
.cpxp__arrow::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  padding: 1px; pointer-events: none;
  background: linear-gradient(165deg,
    rgba(255, 255, 255, .95), rgba(255, 255, 255, .30) 30%,
    rgba(34, 84, 121, .20) 62%, rgba(255, 255, 255, .60) 96%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
}
.cpxp__arrow--prev { left: max(10px, calc(50% - 410px)); }
.cpxp__arrow--next { right: max(10px, calc(50% - 410px)); }
.cpxp__arrow svg {
  width: 20px; height: 20px;
  transition: transform .28s cubic-bezier(.3, .7, .3, 1.25);
}
.cpxp__arrow:hover {
  transform: translateY(-50%) scale(1.04);
  background:
    linear-gradient(112deg, rgba(255, 255, 255, .34) 2%, rgba(255, 255, 255, 0) 34%),
    linear-gradient(180deg, rgba(252, 254, 255, .60), rgba(243, 247, 251, .40));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .92),
    inset 0 -1px 0 rgba(34, 84, 121, .08),
    inset 1px 0 0 rgba(255, 255, 255, .32),
    inset -1px 0 0 rgba(255, 255, 255, .24),
    0 3px 8px rgba(22, 33, 43, .06),
    0 22px 44px -18px rgba(22, 33, 43, .26);
}
.cpxp__arrow--prev:hover svg { transform: translateX(-2px); }
.cpxp__arrow--next:hover svg { transform: translateX(2px); }
.cpxp__arrow:active { transform: translateY(-50%) scale(.97); }
.cpxp__arrow:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
/* the index strip: the pile's ring unrolled, front document centred -
   distance from centre = clicks of next or previous. Labels jump. */
.cpxp__strip {
  position: relative; height: 2.5rem; margin-top: 1.1rem; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
}
.cpxp__strip:empty { display: none; }
/* the lens: a fixed glass frame at dead centre in the house material -
   the names travel the ribbon and the incoming one settles inside it;
   it breathes to each name's width */
.cpxp__lens {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  height: 1.95rem; border-radius: 999px;
  padding: 0 .8rem; box-sizing: content-box;
  pointer-events: none;
  background:
    linear-gradient(112deg, rgba(255, 255, 255, .55) 2%, rgba(255, 255, 255, 0) 40%),
    linear-gradient(180deg, rgba(252, 254, 255, .85), rgba(240, 246, 251, .55));
  -webkit-backdrop-filter: blur(10px) saturate(150%);
          backdrop-filter: blur(10px) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    inset 0 -1px 0 rgba(34, 84, 121, .07),
    0 0 0 1px rgba(34, 84, 121, .10),
    0 6px 14px -8px rgba(22, 33, 43, .30);
  transition: width .38s cubic-bezier(.32, .72, 0, 1);
}
/* the name-stones ride the ribbon absolutely; each order change slides
   them to their new slot, greying away from the centre - one click
   legible, four a ghost - and lifting to full ink under the pointer */
.cpxp__stone {
  position: absolute; left: 0; top: 50%;
  border: 0; background: none; font: inherit; font-size: .78rem;
  color: var(--ink); letter-spacing: .012em; white-space: nowrap;
  padding: .3rem .15rem; cursor: pointer;
  will-change: transform;
  transition: transform .42s cubic-bezier(.32, .72, 0, 1),
              opacity .3s ease, font-size .2s ease;
}
.cpxp__stone--d1 { opacity: .58; }
.cpxp__stone--d2 { opacity: .38; }
.cpxp__stone--d3 { opacity: .22; }
.cpxp__stone--d4 { opacity: .12; }
.cpxp__stone:hover { opacity: 1; }
.cpxp__stone:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; }
.cpxp__stone--cur {
  font-size: .8rem; font-weight: 650; letter-spacing: -.004em;
}
@media (max-width: 700px) {
  .cpxp__strip { height: 2.2rem; margin-top: .95rem; }
  .cpxp__lens { height: 1.72rem; padding: 0 .6rem; }
  .cpxp__stone { font-size: .72rem; }
  .cpxp__stone--cur { font-size: .75rem; }
}
/* the reading state: the front paper grows out of the pile into the
   frame over a frosted veil. Fitted, never scrolled on desktop; long
   documents turn two-column broadsheet instead. Touch keeps an inner
   scroll (fitting a long paper onto a phone is not reading). */
.cpxp__veil {
  position: fixed; inset: 0; z-index: 990;
  background: rgba(16, 28, 40, .34);
  -webkit-backdrop-filter: blur(9px) saturate(110%);
          backdrop-filter: blur(9px) saturate(110%);
  opacity: 0; transition: opacity .34s ease;
}
.cpxp__veil.is-on { opacity: 1; }
/* the reading sheet is PORTALED to <body> while open: every [data-rise]
   ancestor keeps translate:0 0 after its rise, which makes it the
   containing block for position:fixed - inside the pile the sheet's
   viewport coordinates land relative to the section instead. On the body
   the frame is the true viewport and the veil/sheet layering is flat. */
/* STRUCTURE LAW: the sheet never re-dresses the paper - same padding,
   same title, same wrap width (the flight magnifies instead), so the
   text's structure is byte-identical expanded and collapsed */
.cpxp__paper.is-zoom {
  position: fixed; left: 0; top: 0; margin: 0; z-index: 991;
  cursor: auto;
  transform-origin: 0 0;
  will-change: transform, height;
  transition: none;   /* WAAPI owns every flight (and its reversal) */
  box-shadow:
    0 1px 2px rgba(22, 33, 43, .08),
    0 34px 90px -28px rgba(22, 33, 43, .50),
    0 90px 160px -60px rgba(34, 84, 121, .42);
}
/* in flight the box clips its unfurling text and the chip waits its turn */
.cpxp__paper.is-zoom.is-flying { overflow: hidden; }
.cpxp__paper.is-zoom.is-flying .cpxp__close { opacity: 0; }
/* the return leg rides IN the pile: same dress (is-zoom stays on), pile
   coordinates - the page's scroll carries sheet and pile together, so
   closing during a scroll never chases or lands stale */
.cpxp__pile.is-live .cpxp__paper.is-zoom.is-return {
  position: absolute; left: 50%; top: 0; z-index: 11;
  overflow: hidden;
  transition: none;
  /* shading is a WAAPI flight leg - no state shadow of its own here */
}
.cpxp__paper.is-zoom.is-flying .cpxp__body,
.cpxp__paper.is-zoom.is-return .cpxp__body { overflow: hidden; }
/* the WIDE documents (data-wide) carry their canonical two-column
   layout in BOTH states: the pile paper is a window onto its top-left
   corner (right edge melting, like the fold), and expanding only grows
   the window - the format itself never changes. Gate = where the wide
   sheet genuinely fits, so opening can never have to shrink it. */
@media (min-width: 1150px) {
  .cpxp__pile.is-live .cpxp__paper[data-wide] .cpxp__body,
  .cpxp__paper.is-zoom[data-wide] .cpxp__body {
    width: 1012px;
    column-count: 2; column-gap: 2.6rem;
    column-rule: 1px solid rgba(34, 84, 121, .08);
    font-size: .88rem; line-height: 1.55;
  }
  .cpxp__pile.is-live .cpxp__paper[data-wide] .cpxp__body h4,
  .cpxp__paper.is-zoom[data-wide] .cpxp__body h4 { break-after: avoid; margin-top: .85rem; }
  .cpxp__pile.is-live .cpxp__paper[data-wide] .cpxp__body p,
  .cpxp__paper.is-zoom[data-wide] .cpxp__body p,
  .cpxp__pile.is-live .cpxp__paper[data-wide] .cpxp__body li,
  .cpxp__paper.is-zoom[data-wide] .cpxp__body li,
  .cpxp__pile.is-live .cpxp__paper[data-wide] .cpxp__body .hair-rows > div,
  .cpxp__paper.is-zoom[data-wide] .cpxp__body .hair-rows > div { break-inside: avoid; }
  .cpxp__pile.is-live .cpxp__paper[data-wide] .hair-rows > div,
  .cpxp__paper.is-zoom[data-wide] .hair-rows > div {
    grid-template-columns: minmax(7rem, 9.5rem) minmax(0, 1fr); gap: .9rem;
  }
  .cpxp__paper[data-wide] .cpxp__sum { max-width: 550px; }
  /* the RIGHT melt is a veil too: the paper's own gradient pinned to
     the box's right edge, riding the width animation - same WAAPI
     crossfade as the fold. Present on every paper, shown only while
     its paper carries data-wide (wideness can be promoted at load). */
  /* the melt spans the BODY's vertical range only - pages.js seats its
     top at the body's offset so the head (kicker, pill, title, summary)
     never wears a fade it has no reason to */
  .cpxp__paper[data-wide] .cpxp__melt {
    display: block; position: absolute; top: 0; bottom: 0; right: 0;
    width: 7rem; z-index: 2; pointer-events: none;
    border-radius: 0 10px 10px 0;
    background: linear-gradient(178deg, #fffefb, #fbf9f4);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 74%);
            mask-image: linear-gradient(90deg, transparent, #000 74%);
  }
}
.cpxp__melt { display: none; }
.cpxp__paper.is-zoom.is-scroll { display: flex; flex-direction: column; overflow: hidden; }
.cpxp__paper.is-zoom.is-scroll .cpxp__body {
  flex: 1; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
.cpxp__close {
  position: absolute; top: -13px; right: -13px; z-index: 3;
  width: 40px; height: 40px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--brand);
  border: 1px solid rgba(255, 255, 255, .80);
  background: linear-gradient(155deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .58));
  -webkit-backdrop-filter: blur(12px) saturate(150%);
          backdrop-filter: blur(12px) saturate(150%);
  box-shadow:
    inset 0 1px 0 #fff,
    0 0 0 1px rgba(34, 84, 121, .09),
    0 10px 22px -10px rgba(22, 33, 43, .40);
  transition: transform .2s ease, opacity .22s ease;
}
.cpxp__close:hover { transform: scale(1.08); }
.cpxp__close:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
/* the sheet takes the dialog focus (no ring - keyboard tabbing still
   rings the chip itself); the head pill steps clear of the corner chip */
.cpxp__paper.is-zoom:focus { outline: none; }
/* mouse-origin focus never rings a pile paper; keyboard focus still does */
.cpxp__pile .cpxp__paper:focus:not(:focus-visible) { outline: none; }
.cpxp__paper.is-zoom .cpxp__head { padding-right: 2.4rem; }
/* the request action carried in from the plaques (opened cards) */
.cpxp__req { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  margin-top: 1.3rem; }
.cpxp__req .form-note { margin: 0; max-width: 24em; }
.cpxp__close svg { width: 14px; height: 14px; }
body.cpxp-lock { overflow: hidden; }
html:not(.fx) .cpxp__pile.is-live .cpxp__paper,
html:not(.fx) .cpxp__paper.is-zoom,
html:not(.fx) .cpxp__veil { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .cpxp__pile.is-live .cpxp__paper,
  .cpxp__paper.is-zoom { transition: none; }
  .cpxp__pile.is-live .is-promote,
  .cpxp__pile.is-live .is-demote { animation: none; }
  .cpxp__veil { transition: none; }
}
@media (max-width: 700px) {
  .cpxp__paper { padding: 1.1rem 1.05rem .95rem; }
  .cpxp__pile.is-live .cpxp__paper:not(.is-zoom) .cpxp__body { max-height: 4.6rem; }
  .cpxp__arrow { width: 30px; height: 72px; }
  .cpxp__arrow--prev { left: 0; }
  .cpxp__arrow--next { right: 0; }
  .cpxp__arrow svg { width: 15px; height: 15px; }
  .cpxp__close { top: -10px; right: -8px; width: 38px; height: 38px; }
}

/* ======== contact.css ======== */
/* ==== round 11 · contact — the dispatch room goes light ==============
   The round-10 dark room (ctf-) is stripped from the markup; the section
   sits straight on the site aurora. Two objects remain: the enquiry form
   as a white paper sheet, and the five contact routes as a Glean vignette
   card over the reviewer photograph. New classes are ctc- prefixed.
   `.sec-contact` stays on the section for its form voice (non-mono
   labels, tinted fields, result strips) and is repainted light here —
   this block must sit after the round-10 contact block in source order,
   which appending to main.css guarantees. */

.sec-contact { background: none; border-top: 0; }
.sec-contact::before,
.sec-contact::after { content: none; }

/* the split: paper wide, routes narrow */
.sec-contact .cols-2.ctc-split {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(1.7rem, 3.6vw, 3.6rem);
  align-items: start;
}

/* the paper sheet, re-shadowed for a light ground */
.ctc-paper {
  position: relative; z-index: 1;
  background: #fff;
  border: 1px solid rgba(22, 33, 43, .10);
  border-radius: 18px;
  padding: clamp(1.3rem, 2.6vw, 2.1rem);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, .95),
    inset 0 -1px 0 rgba(34, 84, 121, .06),
    0 2px 8px rgba(22, 33, 43, .06),
    0 28px 56px -24px rgba(34, 84, 121, .35);
}

/* hero vignette: the frosted chip takes the scene's free corner —
   bottom-left belongs to the overlapping card here */
.ctc-glv .glv__chip { left: auto; right: 14px; }

/* the routes vignette: the exemplar composition flipped — the card
   first, the reviewer scene sliding up behind its lower edge */
.ctc-routes .glv__card {
  position: relative; z-index: 1;
  left: 0; bottom: 0;   /* clear the base card's absolute-seat offsets —
                           they'd shift a flow-positioned card, and this
                           rule outweighs the base mobile position:static */
  width: min(94%, 410px);
}
.ctc-routes .glv__scene { margin-left: 12%; margin-top: -3.4rem; }

/* row lead-ins that aren't raster marks: house glyphs on the row grid */
.ctc-rowglyph {
  display: grid; place-items: center;
  width: 20px; height: 20px; margin-top: .1rem;
}
.ctc-rowglyph svg { display: block; width: 20px; height: 20px; }

/* links inside vignette rows keep the card's link blue */
.ctc-routes .glv__row span a {
  color: #1f52b0;
  border-bottom: 1px solid rgba(31, 82, 176, .28);
}
.ctc-routes .glv__row span a:hover { border-bottom-color: #1f52b0; }

/* the demo row's quiet live dot — lit, not blinking */
.ctc-live {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  margin-left: .3rem; vertical-align: 2px;
  background: #2f9e63;
  box-shadow: 0 0 0 3px rgba(47, 158, 99, .16);
}

/* ---------- mobile: everything stacks, nothing clips ---------- */
@media (max-width: 960px) {
  .sec-contact .cols-2.ctc-split { grid-template-columns: minmax(0, 1fr); }
  .ctc-routes { max-width: 520px; width: 100%; justify-self: center; }
}
@media (max-width: 860px) {
  .ctc-paper { padding: 1.2rem 1.05rem 1.35rem; border-radius: 16px; }
  .ctc-routes .glv__card { width: 100%; margin-top: 0; }
  .ctc-routes .glv__scene { margin-left: 0; margin-top: .7rem; }
}

/* ======== context.css ======== */
/* ==== round 12 · context: the hero becomes the field ================
   The page now opens on one object instead of a boxed card:
   assets/img/context/hero-field.webp, a composed art-board in the
   reference's grammar — four nested translucent copper panes stacked so
   the tone steps DARKER at every rim (glass on glass, not four hairlines
   drawn on a flat wash), the word Context running copper→violet→steel
   across the core, and the departments, sources and kinds of record that
   orbit it on indigo hairlines.

   Two things live IN THE ASSET rather than in CSS. The dissolve at the
   outermost edge is a baked alpha ramp, because a CSS mask over a
   picture is one more thing to go wrong per engine and the ramp has to
   fall exactly where the art does, at every width. And the fade down its
   left flank is harder than the rest — that is what lets the field run
   toward the reading column without a scrim over it. The panes themselves
   stay crisp; softening them is what made round one read as a smudge.

   Layout: the copy column holds the container's left edge (the same
   padding-left trick as .dsxh__grid) and the field takes everything
   else, running out to the viewport's right edge — where its own alpha
   has already dissolved to nothing, so it reads as continuing past the
   screen without any label being cut to sell that.

   The round-11 .ctv-hero rules below are no longer referenced by the
   page; .ctv-photo (the evidence band) still is. */
/* The ground. The reference's OWN glow, ported whole (founder's call,
   2026-08-11, after two CSS reconstructions were rejected): Glean's hero
   glow is not CSS at all but one authored image laid across the card —
   hues mixed and diffused in paint, which is why it reads smooth where
   stacked radial-gradients read as separate lamps. hero-glow.webp is that
   asset (provenance in assets/img/context/SOURCES.txt), over their card's
   own near-white. Stretched 100%/100%, not cover: it is a soft wash, the
   stretch is invisible, and the composition — lime bottom-left, warm right
   flank — holds at every aspect ratio instead of cropping away. */
.ctxh {
  background: url("../img/context/hero-glow.4ca0f871.webp") center / 100% 100% no-repeat,
    #f9f9f9;
}



.ctxh__grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 40rem) minmax(0, 1fr);
  gap: clamp(1rem, 2.6vw, 2.6rem); align-items: center;
  padding-left: max(var(--gutter), calc((100vw - var(--container)) / 2));
  /* off the viewport edge, but only just: landing hard on it read as
     cropped, and the container's full right margin pulled the whole field
     back toward the middle of the page. */
  padding-right: clamp(12px, 2vw, 30px);
  min-height: min(72vh, 620px);
}
.ctxh__copy {
  position: relative; z-index: 2;   /* the field's faded flank passes behind */
  padding-block: clamp(.6rem, 2.5vw, 2rem);
}
.ctxh .lead { max-width: 34rem; }

/* the headline is inked to the ground it stands on, the way .dsxh__h1 is:
   a gradient across the words that ends in the same hues the wash gathers
   on the right — deep steel where the page is near-white, running violet to
   orange to amber as it travels toward the colour. */
.ctxh .display {
  background: linear-gradient(76deg,
    #16324a 0%, #2f5f9e 22%, #6f57c6 46%, #b6559e 68%, #e0762a 88%, #efa62a 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--brand-deep);
}

/* the eyebrow is the data-sources one: the mark beside sentence-case type,
   not a mono kicker (the house banned the robot font on labels) */
.ctxh .page-hero__crumb {
  display: flex; align-items: center; gap: .55rem;
  font-family: var(--font-sans); font-size: 1.05rem; font-weight: 500;
  letter-spacing: -.006em; text-transform: none; color: var(--muted);
  margin-bottom: 1.1rem;
}
.ctxh .page-hero__crumb img { width: 24px; height: 24px; object-fit: contain; }
.ctxh .page-hero__crumb i { font-style: normal; color: var(--copper); }

/* The field is right-aligned and WIDER than its column, so it grows back
   toward the copy instead of leaving a trench of white between them — its
   own left fade is what makes that safe. Its right edge stops at the
   viewport rather than hanging past it: the alpha already dissolves to
   nothing there, so it reads as continuing, and no label gets guillotined
   (a chip chopped mid-word reads as a broken image, not as a bleed). */
.ctxh__field {
  position: relative; min-width: 0; justify-self: end;
  max-width: 62rem;
  width: calc(100% + clamp(1.5rem, 12vw, 13rem));
}
.ctxh__field picture { display: block; position: relative; z-index: 1; }

/* THE RING GLASS (2026-08-12, "the rings around Context are meant to be
   glass blurring the background"). A baked raster cannot blur what the
   page paints behind it, so the blur is live: one backdrop-filter disc
   under each pane, stacked under the picture — the glow and the
   registration pattern genuinely frost where the rings lie, and the
   asset's hairline rims land on the discs' edges to seat them. Anchored
   in % OF THE IMG BOX: .ctxh__art shrink-wraps the img (unlike
   .ctxh__field, whose box the img does not fill when height-capped), so
   the render-printed disc anchor and pane diameters apply verbatim.
   ALL NUMBERS ARE RIG-PRINTED, PER RENDER — render.py prints "disc
   anchor" and "pane diameters" for both assets; update here AND in the
   ≤1100 override with the narrow set. Inner discs paint over outer ones,
   so the frost compounds toward the core the way the pane tints do. */
.ctxh__art { position: relative; z-index: 1; display: block;
             width: fit-content; margin-left: auto;
             --ax: 47.9%; --ay: 52.2%; }
.ctxh__lens {
  position: absolute; left: var(--ax); top: var(--ay); width: var(--d);
  aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%; pointer-events: none;
  -webkit-backdrop-filter: blur(7px) saturate(1.05);
          backdrop-filter: blur(7px) saturate(1.05);
}
.ctxh__lens:nth-child(1) { --d: 72.8%; }
.ctxh__lens:nth-child(2) { --d: 58.5%; }
.ctxh__lens:nth-child(3) { --d: 42.2%; }
.ctxh__lens:nth-child(4) { --d: 27.3%; }

/* THE ROW PANELS — the refraction round (2026-08-15, third pass of the
   image round). Founder's spec, verbatim mechanics: "the card needs to
   be glassomorphic with refraction and the lighting should be real css
   BEHIND the card along with the pattern" + "multiple colors per card
   in a nice assortment". Anatomy per row, back to front:
     .dsxz__field    the house registration pattern (unchanged)
     .ctxz-light     REAL CSS lighting — a stack of radial-gradient
                     lamps per row (the first image round's measured
                     colour assortments, saturated; behind frost the
                     lamps diffuse into one field, which is why CSS is
                     fine here where it failed for the hero glow)
     .ctxz-panel     the glass card, claim-card grammar EXACTLY
                     (.abm__glass): the card itself carries wash/rim/
                     shadow and NO filter; ::before = frost blur;
                     ::after = inset nx-lens refraction under
                     .glass-refract (Chromium; the filter is injected
                     by context.php) — sibling pseudos compose, the
                     card must never own a backdrop-filter or the
                     lens sees only its own wash (grey-slab trap).
     the art         TRANSPARENT scene, FULL-BLEED to the card edge
                     (zero padding — with a mat, frame-cut elements
                     stopped short of the rim and read as "abruptly
                     cut before reaching the edge of the card").
   The panel still CAPS the artwork's width (what keeps the images
   modest in the column). */
/* The lighting is the FIRST image round's measured wash, relocated
   behind the glass (founder: "i prefered the style of background
   colours you took in the beggining where they nicely blend together
   as one, just implemented correctly as a background"). Same recipe as
   that round's ground.py, in CSS: the SAME blob geometry and the SAME
   reference-measured inks — peach 243,199,178 / lilac 206,197,238 /
   sky 198,219,241 / lime 224,232,130 / rose 245,194,206 — at moderate
   alphas, overlapping, then a real blur() doing what the PIL gaussian
   did: melting the lamps into ONE continuous field. The box is sized
   well past the glow and every lamp fades out long before it, so the
   span never terminates the light ("borders outside the cards,
   cutting the light glow abruptly" — the box must never print). */
/* The box is deliberately FAR larger than the glow and every lamp is
   compressed toward its centre (positions mapped p' = 50 + (p-50)*.55,
   sizes *.55), so all paint fades to zero well inside the box: a
   background clips at the border-box, and any lamp still carrying
   alpha there prints a straight seam that blur only smears and a mask
   only dims — the founder caught that seam twice. Geometry, not
   masking, is the fix; there is NO mask here on purpose. */
.ctxz-light {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(190%, 64rem); aspect-ratio: 13 / 10;
  z-index: 0; pointer-events: none;
  filter: blur(26px);
}
.ctxz-light--index { background:
  radial-gradient(34% 36% at 41% 46%, rgba(243, 199, 178, .58), transparent 82%),
  radial-gradient(32% 31% at 62% 64%, rgba(206, 197, 238, .52), transparent 82%),
  radial-gradient(22% 21% at 70% 27%, rgba(224, 232, 130, .60), transparent 80%),
  radial-gradient(23% 21% at 30% 72%, rgba(198, 219, 241, .46), transparent 82%); }
.ctxz-light--language { background:
  radial-gradient(33% 28% at 50% 35%, rgba(206, 197, 238, .56), transparent 82%),
  radial-gradient(33% 31% at 36% 65%, rgba(243, 199, 178, .50), transparent 82%),
  radial-gradient(26% 25% at 69% 62%, rgba(198, 219, 241, .44), transparent 82%); }
.ctxz-light--map { background:
  radial-gradient(40% 40% at 49% 50%, rgba(243, 199, 178, .55), transparent 84%),
  radial-gradient(24% 22% at 70% 31%, rgba(198, 219, 241, .46), transparent 82%),
  radial-gradient(23% 21% at 29% 70%, rgba(206, 197, 238, .46), transparent 82%); }
.ctxz-light--personal { background:
  radial-gradient(30% 33% at 31% 54%, rgba(198, 219, 241, .50), transparent 82%),
  radial-gradient(30% 33% at 69% 54%, rgba(243, 199, 178, .52), transparent 82%),
  radial-gradient(25% 21% at 50% 31%, rgba(206, 197, 238, .48), transparent 82%); }
.ctxz-light--channels { background:
  radial-gradient(34% 34% at 51% 47%, rgba(206, 197, 238, .52), transparent 82%),
  radial-gradient(26% 24% at 31% 30%, rgba(243, 199, 178, .48), transparent 82%),
  radial-gradient(24% 22% at 70% 70%, rgba(245, 194, 206, .44), transparent 82%),
  radial-gradient(19% 17% at 27% 74%, rgba(224, 232, 130, .48), transparent 80%); }
.ctxz-light--api { background:
  radial-gradient(25% 23% at 71% 28%, rgba(224, 232, 130, .62), transparent 80%),
  radial-gradient(34% 32% at 38% 62%, rgba(243, 199, 178, .50), transparent 82%),
  radial-gradient(25% 23% at 61% 71%, rgba(206, 197, 238, .44), transparent 82%); }
.ctxz-panel {
  position: relative; z-index: 1; display: block;
  margin-inline: auto; max-width: 34rem;
  border-radius: 1.4rem; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(34, 84, 121, .09),
              0 22px 44px -26px rgba(22, 33, 43, .22);
}
.ctxz-panel img { display: block; width: 100%; height: auto; }
.ctxz-panel picture, .ctxz-panel > img { position: relative; z-index: 1; }
.ctxz-panel--glass {
  background:
    radial-gradient(120% 100% at 14% -12%, rgba(255, 255, 255, .38), transparent 55%),
    rgba(253, 254, 255, .22);
  border: 1px solid rgba(255, 255, 255, .70);
}
/* frost only — NO nx-lens on the row cards. Six SVG-reference
   backdrop-filters invalidated together on every scroll delta and
   Chromium blanked the whole viewport while re-rastering (measured on
   /dev: an instant jump into the ladder stayed PURE WHITE 400ms+;
   plain blur composites on the GPU and repaints instantly). The claim
   card keeps its single lens — one instance was always fine; six was
   the founder's "rendering is painful". */
.ctxz-panel--glass::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  border-radius: inherit;
  -webkit-backdrop-filter: blur(5px) saturate(1.2);
          backdrop-filter: blur(5px) saturate(1.2);
}
.ctxz-panel--paper {
  background:
    radial-gradient(120% 100% at 14% -12%, rgba(255, 255, 255, .8), transparent 55%),
    rgba(253, 254, 255, .97);
  border: 1px solid rgba(34, 84, 121, .08);
}
/* the load gate: an empty glass pane over the pattern while its scene
   downloads reads as breakage ("we shouldnt see the glass start off
   not existing... very ugly for a few seconds"). The art ships EAGER
   now, and each card stays invisible until its image is DECODED —
   context.php's inline script stamps .ctxz-ready via img.decode(), so
   card and scene arrive as one object. The field and the light are
   independent of the image and stand from first paint (decor, not
   breakage). JS-gated visibility follows the house data-rise
   precedent. */
.ctxz-panel { opacity: 0; transition: opacity .5s ease; }
.ctxz-panel.ctxz-ready { opacity: 1; }
/* the registration patch behind the panels: the shared .dsxz__field is
   shaped for data-sources' WIDE console crops (inset -10% -8% = a flat
   ellipse). Around this page's square-ish panels that reads as a smear
   running off both sides ("too far left and right, too little up and
   down") — pull the sides in, push the top and bottom out. Scoped to
   the page's own body class; data-sources keeps its shape. */
.pg-context .dsxz__field { inset: -22% 3%; }

/* the /about claim band rides below this hero re-aimed at context
   (founder, 2026-08-12: "the design of the about chokepoint section,
   a little taller"; second bump + the glass card 2026-08-15). Same .abm
   everything; a MODIFIER carries the extra air so the about band keeps
   its own height — three classes, because section.sec.abm ties on
   specificity and sits later in the file. */
section.sec.abm.abm--tall { padding-block: clamp(4.6rem, 7.8vw, 7rem); }

/* THE GLASS CARD: claim + ledger ride in one big pane over the band's
   registration pattern. Two layers of glass grammar from the console's
   direction 02: a translucent paper wash with a top-left light sweep so
   the type never fights the pattern for contrast, and the backdrop doing
   the glass work — nx-lens refraction where the same-document filter
   exists (.glass-refract, Chromium; injected by context.php's inline
   script), a clear-glass blur everywhere else. The pattern and the
   oblique slices are the "background" the founder wants seen bending:
   they pass BEHIND the card, and the displacement warps them at the
   pane while the card's own ink stays untouched — backdrop-filter never
   touches the element's own content, which is what keeps it readable. */
.abm--tall .abm__glass {
  position: relative; z-index: 1;
  border-radius: 1.6rem;
  /* WIDER than the container on purpose (founder 2026-08-15: "more wide")
     — the pane breaks the reading measure and lets the pattern run in
     from both flanks; the copy columns inside keep the container rhythm.
     Negative clamp: most at desktop, least on phones where the gutter
     is all the air there is. */
  margin-inline: clamp(-6rem, -4.5vw, -.75rem);
  padding: clamp(1.9rem, 4vw, 3.4rem) clamp(1.9rem, 4.2vw, 4rem);
  /* the milk is DOWN from .58/.42 — "i can barely see the pattern thru
     it": the glass shows the band, the light sweep only lifts the
     claim's corner enough to keep the ink comfortable */
  background:
    radial-gradient(120% 100% at 14% -12%, rgba(255, 255, 255, .38), transparent 55%),
    rgba(253, 254, 255, .26);
  border: 1px solid rgba(255, 255, 255, .70);
  box-shadow:
    0 0 0 1px rgba(34, 84, 121, .10),
    0 24px 48px -28px rgba(22, 33, 43, .20),
    inset 0 1px 0 rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: blur(4px) saturate(1.18);
          backdrop-filter: blur(4px) saturate(1.18);
}
/* THE LENS NEVER OWNS THE RIM — and NEVER SITS INSIDE ANOTHER FILTER.
   Two hard-won constraints. (1) Displacement at a boundary drags whatever
   crosses it — here the copper slices — into the pane as burnt smears, so
   the card's edge must be pure frost and the refraction must live on an
   inset layer whose edge only ever displaces already-soft frost. (2) An
   element with backdrop-filter is a BACKDROP ROOT: a descendant's
   backdrop-filter cannot see through it — the first inset-lens cut could
   only sample the card's own wash and screen-blended it into a flat grey
   slab. So under .glass-refract the CARD carries no filter at all: the
   frost (::before, inset 0) and the lens (::after, inset 16px) hang as
   SIBLING layers, and a later sibling's backdrop includes an earlier
   one's output — the same stacked-glass composition the hero's ring
   discs already prove on this page. Non-Chromium never activates the
   pseudos and keeps the card's own clear-glass blur. */
.abm--tall .abm__glass::before,
.abm--tall .abm__glass::after {
  content: ""; position: absolute; pointer-events: none; z-index: 0;
}
.abm--tall .abm__glass::before { inset: 0; border-radius: 1.6rem; }
.abm--tall .abm__glass::after  { inset: 16px; border-radius: 1.05rem; }
.glass-refract .abm--tall .abm__glass {
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}
/* the frost is also the lens's raw material — every point of blur here
   is structure the wave loses. 2.5px keeps the grid legible through the
   pane (founder: the pattern must SHOW) while still softening what the
   lens edge displaces. */
.glass-refract .abm--tall .abm__glass::before {
  -webkit-backdrop-filter: blur(2.5px) saturate(1.2);
          backdrop-filter: blur(2.5px) saturate(1.2);
}
.glass-refract .abm--tall .abm__glass::after {
  -webkit-backdrop-filter: url(#nx-lens) saturate(1.12);
          backdrop-filter: url(#nx-lens) saturate(1.12);
}
.abm--tall .abm__glass > .abm__grid { position: relative; z-index: 1; }

/* THE PATTERN. One continuous field radiating out of the circle — not a
   patch in the margin and a second copy inside the picture, which is what
   the last cut did and why it read as random spots. It lives here, on the
   field, centred on the disc, and the picture's panes are translucent, so
   the same pattern runs THROUGH the rings and on out into the page without
   a seam. THE ANCHOR IS A MEASURED NUMBER, PER ASSET, PER RENDER: the
   render trims on an alpha threshold, so the disc's position inside the
   file moves whenever outlying elements change (the 2026-08-11 cleanup
   shifted it 49.2/48.2 → 47.9/52.4). Re-measure after every render.py run
   — bin/art/context-field, disc at board (930,810), dpr3, alpha>=8 trim —
   and update here AND in the ≤1100 override (the narrow asset has its own
   number).

   It is the full house stack off .hero__patch / .abm, all six layers: fine
   20px rule, coarse 120px rule, the registration crosses, and the plotted
   steel and copper cells. Half of it was missing before.

   The box is wider than it is tall on purpose: closest-side makes the mask
   an ellipse, so the pattern dies vertically just as it reaches the hero's
   clipped top and bottom edges, and carries much further sideways. */
.ctxh__field::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: 47.9%; top: 52.2%; width: 212%; height: 134%;
  transform: translate(-50%, -50%);
  background-image:
    /* the oblique slices. They are PART OF THE PATTERN, not furniture laid on
       top of it: as a layer here they inherit the same radial mask, so they
       start at the circle and fade out with everything else instead of
       standing at arbitrary percentages across the hero. -18deg from
       vertical is the house skew, which is 72deg as a gradient angle.
       Period 1900px = TWO slices across the field at full width (one steel,
       one copper), and just the steel one on phones — the founder called
       three "too much" (2026-08-11). */
    repeating-linear-gradient(72deg,
      transparent 0 560px,
      rgba(34, 84, 121, .055) 560px 604px,
      transparent 604px 1150px,
      rgba(208, 133, 66, .055) 1150px 1202px,
      transparent 1202px 1900px),
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='120'%20height='120'%3E%3Cpath%20d='M60%2054v12M54%2060h12'%20stroke='%23225479'%20stroke-opacity='.45'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='480'%20height='480'%3E%3Crect%20x='140'%20y='60'%20width='20'%20height='20'%20fill='%23225479'%20fill-opacity='.10'/%3E%3Crect%20x='380'%20y='200'%20width='20'%20height='20'%20fill='%23D08542'%20fill-opacity='.16'/%3E%3Crect%20x='60'%20y='340'%20width='20'%20height='20'%20fill='%23225479'%20fill-opacity='.10'/%3E%3Crect%20x='280.5'%20y='420.5'%20width='19'%20height='19'%20fill='none'%20stroke='%23225479'%20stroke-opacity='.22'/%3E%3C/svg%3E"),
    linear-gradient(rgba(34, 84, 121, .10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 84, 121, .10) 1px, transparent 1px),
    linear-gradient(rgba(34, 84, 121, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 84, 121, .055) 1px, transparent 1px);
  background-size:
    auto, 120px 120px, 480px 480px, 120px 120px, 120px 120px, 20px 20px, 20px 20px;
  background-position:
    0 0, 0 0, 0 0, 60.5px 60.5px, 60.5px 60.5px, .5px .5px, .5px .5px;
  -webkit-mask-image: radial-gradient(closest-side, #000 34%,
    rgba(0,0,0,.72) 60%, rgba(0,0,0,.28) 82%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 34%,
    rgba(0,0,0,.72) 60%, rgba(0,0,0,.28) 82%, transparent 100%);
}
.ctxh__img {
  display: block; margin-left: auto;
  width: 100%; max-width: none; height: auto;
}
/* and it never makes the hero taller than a screen */
@media (min-width: 1101px) {
  .ctxh__img { width: auto; max-width: 100%; max-height: min(82vh, 820px); }
}

/* the squeeze band. Between the stack point and the container's full width
   the copy column is still 40rem while the field's column is whatever is
   left — at 1120px that left the field a third of its size beside a headline
   at full display scale, which reads as a broken image, not a small one.
   The column and the headline both come down until the container opens up. */
@media (min-width: 1101px) and (max-width: 1300px) {
  .ctxh__grid { grid-template-columns: minmax(0, 32rem) minmax(0, 1fr); }
  .ctxh .display { font-size: clamp(2.2rem, 4.6vw, 3.4rem); }
}

/* phone story: the field comes out from beside the copy and runs the full
   width under it, and swaps to hero-field-narrow.webp — which is its own
   composition, not a crop: fewer orbiters, larger type, every chip whole
   inside the frame, so the labels still read at 390px. */
@media (max-width: 1100px) {
  .ctxh__grid {
    grid-template-columns: minmax(0, 1fr); min-height: 0;
    padding-left: var(--gutter); padding-right: var(--gutter);
    gap: clamp(1.1rem, 4vw, 1.9rem);
  }
  .ctxh__copy { max-width: 40rem; }
  .ctxh .lead { max-width: none; }
  .ctxh__field {
    justify-self: stretch; max-width: none;
    width: calc(100% + 2 * var(--gutter));
    margin-inline: calc(-1 * var(--gutter));
  }
  /* stacked, the field is width-bound and a phone keeps it edge to edge. A
     1024-wide tablet does not: full-bleed there made a 924px-tall picture
     under a headline, a hero two and a half screens deep. Past the width
     where the cap bites, it centres instead. */
  .ctxh__img {
    margin-inline: auto;
    width: auto; max-width: 100%; max-height: min(58vh, 560px);
  }
  /* stacked, the pattern still radiates from the circle — it just has the
     full width to do it in, and less height. The narrow asset carries its
     OWN measured disc anchor (see the note on the base rule), and its own
     lens set: the narrow board's panes sit differently in its frame. */
  .ctxh__field::before { width: 168%; height: 122%; left: 52.7%; top: 48.2%; }
  .ctxh__art { margin-inline: auto; --ax: 52.7%; --ay: 48.2%; }
  .ctxh__lens:nth-child(1) { --d: 73.8%; }
  .ctxh__lens:nth-child(2) { --d: 57.2%; }
  .ctxh__lens:nth-child(3) { --d: 40.7%; }
  .ctxh__lens:nth-child(4) { --d: 34.6%; }
}

/* ==== round 11 · context: Glean-grammar imagery ====================
   Two moments, both on the .glv primitives from the data-sources
   exemplar. (1) Hero: photo of someone mid-question at her laptop on
   the sunset wash, overlapped by the resolution card — the question as
   the card title, its resolved terms as linked source rows. (2)
   Evidence: a conversation photograph beside the prose, frosted Drive
   chip, small "which document carried the day" card. New classes are
   ctv- prefixed; the round-10 ctx- dark-room classes are no longer
   referenced by the page. */

/* -- hero resolution card: the question is the title, terms resolve in
      the rows. Term in ink, resolution in the Glean link blue. -- */
.ctv-hero .glv__card { width: min(76%, 354px); }
.ctv-hero .glv__title { font-size: .98rem; }
.ctv-hero .glv__row b,
.ctv-photo .glv__row b { color: var(--ink); }
.ctv-hero .glv__row b em,
.ctv-photo .glv__row b em { font-style: normal; color: #1f52b0; }

/* -- the computed-date row mark: a geometric primitive, the card
      band's sparkle re-cut in copper (no brand owns a date) -- */
.ctv-cald { display: block; width: 20px; height: 20px; margin-top: .1rem;
  border-radius: 6px; position: relative;
  background: linear-gradient(160deg, #ffffff, #fdf3e7);
  border: 1px solid rgba(168, 94, 36, .45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9); }
.ctv-cald::before { content: ""; position: absolute; inset: 4px;
  background: var(--copper, #d08542);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }

/* -- evidence: photograph beside the prose (no wash panel — the photo
      IS the card), frosted chip bottom-left inherited from .glv__chip,
      the white card overlapping the photo's lower-left edge -- */
.ctv-evgrid { align-items: center; }
.ctv-photo { position: relative; min-width: 0; }
.ctv-photo__scene { margin-left: 0; border-radius: 20px; }
.ctv-photo__scene .glv__chip { left: auto; right: 14px; }
.ctv-photo__card { position: absolute; left: clamp(.9rem, 2vw, 1.6rem);
  bottom: clamp(.9rem, 2vw, 1.4rem); width: min(70%, 330px); }

/* -- mobile story: photos full-width, cards stack under their photos,
      nothing clips (base .glv already stacks its own card at 860px) -- */
@media (max-width: 860px) {
  .ctv-hero .glv__card { width: 100%; }
  .ctv-photo__card { position: static; width: 100%; margin-top: .7rem; }
  .ctv-photo__scene { border-radius: 16px; }
}

/* ======== data-sources.css ======== */
/* ==== data-sources · round 11: light hero + imagery in the Glean grammar ====
   The page keeps the approved .glv exemplar in the hero (now on the light
   aurora, no dark room) and carries the same grammar down the page: the
   sweep log and the Alfamart record re-told as white vignette cards
   overlapping graded photographs on sunset-wash panels.
   New classes are page-prefixed .dsx- (the retired dark-room .ds- names
   stay untouched in main.css). No JS, no animation. */

/* ---------- hero (.dsxh) · the product-in-a-window opening ----------
   glean.com/enterprise-search ported whole. Their row is copy 416 / gap 96
   / picture 948 inside a 1248 container, and the picture runs past the
   container to the page edge. Ours does the same by dropping .container:
   the row pads itself to the container's left edge and runs to the
   viewport on the right, so the window LANDS on the edge with all of it in
   frame. Nothing is cut - a console chopped through the middle of a card
   reads as a broken image, not as a bleed. */
/* The ground. This hero stands the site aurora and the registration pattern
   DOWN and lays the reference's own sky instead: pale lime-yellow into the
   top-left corner, peach across the top-right, lilac settling bottom-right,
   on near-white. It is the one page where the picture is the product and
   the page has to get out of its way. */
/* Measured off the reference rather than eyeballed: blur their hero down to
   a colour field and it is mostly WHITE - peach in the top-left corner, a
   pale lemon band running vertically through the middle-left, a whisper of
   periwinkle in the top-right and lower-left, and clean white everywhere
   around the window. Ours was a saturated yellow corner and a peach bar
   across the top, which is why it read "a little off". */
.dsxh { background: #fdfdfd; }
.dsxh::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(56% 52% at -2% -4%, rgba(255, 172, 140, .34), transparent 64%),
    radial-gradient(30% 82% at 25% 44%, rgba(216, 253, 73, .26), transparent 70%),
    radial-gradient(44% 40% at 101% -4%, rgba(122, 124, 199, .20), transparent 66%),
    radial-gradient(54% 44% at 2% 104%, rgba(216, 253, 73, .20), transparent 66%),
    radial-gradient(56% 46% at 96% 104%, rgba(122, 124, 199, .16), transparent 66%),
    #fdfdfd;
}
.dsxh__grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 26rem) minmax(0, 1fr);
  gap: clamp(1.2rem, 3.4vw, 3.6rem); align-items: center;
  padding-left: max(var(--gutter), calc((100vw - var(--container)) / 2));
  padding-right: clamp(10px, 1.6vw, 26px);
}
.dsxh__copy { padding-block: clamp(.6rem, 2.5vw, 2rem); }

/* the eyebrow is the reference's: a mark beside sentence-case type, not a
   mono kicker (the house banned the robot font on labels) */
.dsxh__eyebrow {
  display: flex; align-items: center; gap: .55rem; margin-bottom: 1.1rem;
  font-size: 1.05rem; font-weight: 500; letter-spacing: -.006em; color: var(--muted);
}
.dsxh__eyebrow img { width: 24px; height: 24px; object-fit: contain; }
.dsxh__eyebrow i { font-style: normal; color: var(--copper); }

/* their heading is a gradient across the words, and it is a MEDIUM size,
   not their display - at --fs-display's 89px this line would shatter a
   26rem column. Theirs travels navy -> electric blue -> orange; ours runs
   the aurora's own inks end to end - deep steel, sky blue, periwinkle, a
   rose transit, copper - so it reads as a spectrum rather than one hue
   fading. Every stop is a colour the app already uses. */
.dsxh__h1 {
  font-size: clamp(2.25rem, 4vw, 3.35rem); line-height: 1.06;
  background: linear-gradient(72deg,
    #1a4260 2%, #2f6fbe 26%, #7a7cc7 52%, #c2709d 72%, #d9822f 94%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--brand);
}
.dsxh .lead { margin-top: 1.3rem; }

/* the two colour fields. Without them the white window sits on a white
   page and the whole hero reads as empty - the same reason the frontpage
   ask card rides a coloured stage.
   Each is anchored the way the reference anchors it: the left one to the
   ROW, the right one to the PICTURE (their insets, as percentages, so it
   tracks the window at every width). That anchoring is what keeps the pill
   mostly BEHIND the console with only its rounded end emerging at the
   lower left - hang it off the section instead and the capsule lies across
   the reading column, which is where it went wrong. */
.dsxh__wash { position: absolute; z-index: 0; pointer-events: none; max-width: none; height: auto; }
.dsxh__wash--l { left: -34%; top: -67%; width: 91%; }
.dsxh__wash--r { left: -20.2%; top: -41%; width: 129.2%; z-index: -1; }

/* the picture is a door: the whole frame opens the demo */
.dsxh__shot {
  position: relative; display: block; min-width: 0; justify-self: end;
  isolation: isolate;     /* keeps the wash's -1 under the console, not the page */
}
.dsxh__shot picture { position: relative; z-index: 1; display: block; }
.dsxh__img { width: 100%; max-width: none; height: auto; }

/* the console's own "Open chat" keeps its travelling rim light. The box is
   the button's rect inside the art expressed in per-cent, so it tracks the
   image at every width. */
/* z-index 2 is load-bearing: .dsxh__shot isolates a stacking context for the
   wash (z -1), and the picture sits at z 1 — without this the travelling
   light paints UNDERNEATH the console and simply disappears. */
.dsxh__seam {
  /* per cent OF THE FILE. The canvas grew 2060x1512 -> 2245x1619 on 2026-08-09
     to stop the drop shadow being sliced at the edge, so these moved with it;
     re-derive them if the art is ever re-rendered again. */
  position: absolute; left: 10.14%; top: 16.58%; width: 16.42%; height: 4.25%;
  pointer-events: none; z-index: 2;
  /* the rim's corner is sized off this box in cqh (see .dsxh__rim rect) */
  container-type: size;
}

/* ---- this seam is drawn ON the rim, not faked across it (2026-08-10) ----
   Two earlier tries both broke at the two ENDS, for the same reason: they
   painted a light ACROSS the box and let a mask decide what showed.
     1. the house conic sweeps by ANGLE. This box is 5.4:1 (130 x 24.3 at
        1440px), where the short ends subtend ~21deg each against ~159deg for
        the long edges — the 67deg comet is three times wider than an entire
        end, so it flooded each end whole as a static bracket and then crawled
        the long edges diluted. Measured 15.9% of peak twice a lap.
     2. two half-height strips swept by distance fixed the darkness but not
        the ends: a HORIZONTAL gradient crossing a VERTICAL band lights all of
        it at once, and the top and bottom strips painted the cap's two halves
        from different parts of the comet — the right end lit blue-over-orange
        with a hard seam across its middle, then flashed off.
   The rim is a path, so the light belongs on the path. An SVG stroke's DASH
   is painted along the path: it bends round the corners, travels at true
   arc-length speed, and is ONE object, so there is no hand-over to go wrong
   and nothing special happens at the ends. pathLength="100" normalises the
   perimeter, so the dash is a PER-CENT of the rim and the comet stays the
   same fraction of it at every viewport width.
   The taper is ten stacked dashes sharing a trailing edge (markup), so the
   LONGEST reaches furthest forward and owns the tip. They are packed tightly
   near the tip and loosely at the tail, which puts the fine gradation where
   the eye is: copper flick, ice core, full-alpha sky body, then a tail that
   dissolves. All ten share one keyframe and move as one.
   Do NOT fold the per-layer offsets into the keyframe with calc(var(--a)):
   Chromium refuses to interpolate it and every layer sits frozen at 0% (it
   looks fine in Firefox, which does animate it — tested 08-10). */
.dsxh__rim {
  position: absolute; inset: 0; width: 100%; height: 100%;
  overflow: visible;            /* the stroke straddles the edge; 1px is outside */
  pointer-events: none;
}
.dsxh__rim rect {
  fill: none; stroke-width: 2px; stroke-linecap: round;
  /* geometry also sits on the element as presentation attributes, so a browser
     without CSS geometry properties still draws the ring; CSS only sharpens
     the corner. rx: the button in the art has a 13px corner on a 68.8px-tall
     rect = 18.9% of its height, and cqh makes that track the picture at every
     width (.dsxh__seam is the container). The old ring was a nominal 9.5px on
     a 24px box — nearly a pill, and it visibly bulged off the button's ends. */
  rx: 5px;
  rx: 18.9cqh;
  animation: dsxh-rim-run 9s linear infinite;
}
/* negative offset carries the dash FORWARD along the path; a rect's path
   starts at the top-left corner and runs clockwise, so the comet circles the
   way the conic used to. One lap = one full 100-unit pathLength. */
@keyframes dsxh-rim-run {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -100; }
}
@media (prefers-reduced-motion: reduce) { .dsxh__rim { display: none; } }
  100% { transform: translateX(-100%); }
}
@media (max-width: 1180px) {
  .dsxh__grid { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); }
}
/* one column: the shot still overruns the gutter rather than shrinking to a
   stamp. Below 960 the <picture> swaps to the narrow art (the console's own
   two-column layout), because the desktop frame at phone width is a console
   nobody can read - which is the whole point of showing one. That crop has
   no sidebar, so the seam has no button to ride. */
/* One column, and the picture stays inside the page here too. Below 960 the
   <picture> swaps to the narrow art (the console's own two-column layout);
   below 700 it swaps again to the reference's own phone answer - not the
   window shrunk to a stamp but a magnified, FEATHERED FRAGMENT of the live
   screen, where the fade is the edge and nothing is chopped. That crop has
   no sidebar, so the seam has no button to ride. */
@media (max-width: 960px) {
  .dsxh__grid {
    grid-template-columns: minmax(0, 1fr); gap: 2rem;
    padding-left: var(--gutter); padding-right: var(--gutter);
  }
  .dsxh__copy { max-width: 40rem; }
  .dsxh__shot { justify-self: stretch; }
  .dsxh__img { width: 100%; }
  .dsxh__seam { display: none; }
  .dsxh__wash--l { left: -46%; top: -30%; width: 130%; }
  .dsxh__wash--r { left: -26%; top: -34%; width: 150%; }
}

/* PHONE: no window at all. A console is a wide, dense thing; every phone
   answer for it — the whole frame shrunk to a stamp, or the magnified
   feathered fragment that replaced it — is a picture of software nobody can
   read, and it was carrying the hero. The opening is the sentence instead,
   on the page's own light. `display: none` also takes the link out of the
   accessibility tree, which is right: there is nothing left to open.
   The phone <source> is a 1x1 transparent pixel (see data-sources.php), so
   this costs a phone no download rather than a hidden 88KB. */
@media (max-width: 700px) {
  .dsxh__shot { display: none; }
  /* the picture was most of the hero's height; without it the copy should
     not sit in a tall empty box */
  .dsxh__grid { gap: 0; }
  .dsxh { padding-bottom: clamp(1.4rem, 6vw, 2.4rem); }
}

/* PHONE: the page must not OPEN on the site aurora.
   `body::before` is a fixed steel-blue wash sitting behind everything. On a
   desktop this hero hides it, because .page-hero pulls itself up under the
   floating header by --header-h. On a phone --header-h is 0 and the header is
   a static block in the flow, so the hero begins BELOW it and that top strip
   showed raw aurora — steel blue, hard seam, against a hero that opens peach.
   That is the "why is the header blue when the page starts yellow" of it.

   Fixed by extending the hero's own ground up over the strip and pushing its
   content back down by exactly as much, so nothing moves and no header height
   has to be guessed. The wordmark is lifted above the hero, or the ground it
   now sits on would paint straight over it. Scoped to .pg-dsx: every other
   page opens on the aurora deliberately. */
@media (max-width: 860px) {
  .pg-dsx .site-header { position: relative; z-index: 5; }
  .pg-dsx .dsxh {
    margin-top: calc(-1 * var(--dsx-cover, 220px));
    padding-top: calc(var(--dsx-cover, 220px) + clamp(2.6rem, 6vw, 4.8rem));
  }
}

/* ---------- the ingestion rows: the reference's zigzag ----------
   glean.com/enterprise-search's `.zigzag_grid`: a flex row, content column
   480 / gap 128 / asset ~524 inside a 1248 container, and the alternation
   is nothing cleverer than flex-direction: row-reverse on every other row.
   Same here at our container's scale. */
.dsxz { overflow: clip; }
/* WHITE, not the page's paper band. `section.sec:nth-of-type(even)` paints a
   pale blue-grey veil at .88/.74 alpha, so the aurora shows through it and
   greys the whole section — and that rule lives later in this file, so it
   has to be OUT-SPECIFIED, not just re-declared (same trick the blog shelf
   uses). Keeps the hero, these rows and the belt on one continuous ground.
   BOTH parities: the odd rule (`background:none` → raw aurora) also lives
   later and also ties the bare selector — /data-sources happens to land
   even, but /context's zigzag lands odd and shipped on the aurora until
   the odd variant was added (founder-caught, 2026-08-15). A dsxz section
   is white WHEREVER it lands. */
section.sec.dsxz,
section.sec.dsxz:nth-of-type(even),
section.sec.dsxz:nth-of-type(odd) {
  background: #fdfdfd;
  border-block: 0;
}
.dsxz__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(1.6rem, 4.6vw, 5rem);
}
.dsxz__row + .dsxz__row { margin-top: clamp(3rem, 7vw, 6.5rem); }
.dsxz__row--flip { flex-direction: row-reverse; }
.dsxz__say { flex: 0 1 23rem; max-width: 23rem; min-width: 0; }
.dsxz__pill {
  display: inline-block; margin-bottom: 1.1rem;
  padding: .34rem .85rem; border-radius: 999px;
  background: rgba(34, 84, 121, .07);
  border: 1px solid rgba(34, 84, 121, .08);
  font-size: .82rem; font-weight: 560; letter-spacing: -.004em; color: var(--muted);
}
.dsxz__say h2 { font-size: clamp(1.75rem, 2.9vw, 2.45rem); line-height: 1.12; }
.dsxz__say p {
  margin-top: 1.05rem; color: var(--muted); line-height: 1.65;
  font-size: var(--fs-lead);
}
.dsxz__link {
  display: inline-flex; align-items: center; gap: .45rem; margin-top: 1.4rem;
  font-size: 1.02rem; font-weight: 560; color: var(--brand);
}
.dsxz__link i { font-style: normal; font-size: 1.25em; line-height: 1;
  transition: transform .2s ease; }
.dsxz__link:hover { color: var(--brand-deep); }
.dsxz__link:hover i { transform: translateX(3px); }

/* the asset: a real image standing ON the naxis pattern, which is where
   the reference puts its dotted grid. The field is the frontpage hero's
   own background stack UNMASKED (identical values to .abm::before) - never
   a new pattern recipe - faded only at its outer edge so it reads as a
   field rather than a rectangle. */
/* The picture side takes the room, but it STAYS ON THE PAGE. Running it out
   to the page edge did make the console render at 1:1 - and read as a
   full-bleed slab. Inside the wide container it lands around 0.9x, which is
   legible without the section shouting. The asset carries its own shadow in
   the image's alpha, so it needs no padding: the shadow IS the breathing
   space, and padding here only shrinks the readable part. */
.dsxz__asset {
  position: relative; flex: 1 1 52rem; min-width: 0;
  display: flex; align-items: center; justify-content: center;
}
/* a whisper of the hero's sky under the pattern, so the panel reads as a
   place rather than a floating crop. The reference's asset panels sit on a
   colour wash for the same reason; hue rotates row to row. */
.dsxz__asset::before {
  content: ""; position: absolute; inset: -10% -8%; z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side, var(--zz-wash, rgba(216, 253, 73, .20)), transparent 78%);
}
.dsxz__row:nth-of-type(2) .dsxz__asset { --zz-wash: rgba(255, 172, 140, .20); }
.dsxz__row:nth-of-type(3) .dsxz__asset { --zz-wash: rgba(122, 124, 199, .18); }
.dsxz__field {
  position: absolute; inset: -10% -8%; z-index: 0; pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='120'%20height='120'%3E%3Cpath%20d='M60%2054v12M54%2060h12'%20stroke='%23225479'%20stroke-opacity='.45'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='480'%20height='480'%3E%3Crect%20x='140'%20y='60'%20width='20'%20height='20'%20fill='%23225479'%20fill-opacity='.10'/%3E%3Crect%20x='380'%20y='200'%20width='20'%20height='20'%20fill='%23D08542'%20fill-opacity='.16'/%3E%3Crect%20x='60'%20y='340'%20width='20'%20height='20'%20fill='%23225479'%20fill-opacity='.10'/%3E%3Crect%20x='280.5'%20y='420.5'%20width='19'%20height='19'%20fill='none'%20stroke='%23225479'%20stroke-opacity='.22'/%3E%3C/svg%3E"),
    linear-gradient(rgba(34, 84, 121, .10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 84, 121, .10) 1px, transparent 1px),
    linear-gradient(rgba(34, 84, 121, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 84, 121, .055) 1px, transparent 1px);
  background-size:
    120px 120px, 480px 480px, 120px 120px, 120px 120px, 20px 20px, 20px 20px;
  background-position:
    0 0, 0 0, 60.5px 60.5px, 60.5px 60.5px, .5px .5px, .5px .5px;
  -webkit-mask-image: radial-gradient(closest-side, #000 76%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 76%, transparent 100%);
}
.dsxz__asset img { position: relative; z-index: 1; width: 100%; height: auto; }

@media (max-width: 900px) {
  .dsxz__row, .dsxz__row--flip {
    flex-direction: column; align-items: stretch; gap: 1.6rem;
  }
  .dsxz__row + .dsxz__row { margin-top: clamp(2.6rem, 8vw, 4rem); }
  .dsxz__say { flex: none; max-width: 40rem; }
  .dsxz__asset { flex: none; }
}

/* ---------- the connector belt: the frontpage band, three lanes ----------
   Everything structural is inherited from .ingest__belt / __lane / __chip,
   so this stays one band with the frontpage even as that recipe changes.
   Two things are ours: the ribbon is re-inked to the hero's sky (the steel
   hero-flow.webp under this hero would fight the yellow), and the third
   lane runs left again on its own clock so lanes 1 and 3 never lock step. */
/* the band carries the hero's ground forward: without it the hero's white
   sky stops dead and the site aurora resumes as a grey-blue block behind
   this line, which reads as a seam rather than a section change */
.dsxbelt {
  position: relative; padding-top: clamp(2rem, 4.4vw, 3.4rem);
  background:
    radial-gradient(58% 140% at 3% -40%, rgba(216, 253, 73, .16), transparent 62%),
    radial-gradient(58% 140% at 97% -40%, rgba(122, 124, 199, .13), transparent 62%),
    #fdfdfd;
}
/* the claim and its door share one line */
.dsxbelt__say {
  max-width: 46rem; margin-inline: auto; text-align: center;
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: center; gap: .2rem clamp(1.4rem, 3vw, 2.6rem);
  font-size: var(--fs-lead); line-height: 1.5; color: var(--muted);
}
.dsxbelt__say b { color: var(--ink); font-weight: 620; }
/* no button chrome — it is a blue text door sitting on the same line.
   Pitched between the h1 gradient's light #2f6fbe and --brand #225479: the
   deep steel read as almost black on this near-white band and the door did
   not announce itself, but the full light blue was a shade too airy for it.
   6.05:1 on #fdfdfd, well clear of AA for body text; hover drops to --brand
   so the press still has somewhere darker to go. The chevrons inherit it. */
.dsxall__toggle {
  display: inline-flex; align-items: center; gap: .95rem;   /* the arrows sit
                                                               further right */
  padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
  font-size: inherit; font-weight: 580; color: #2a62a8;
  transition: color .16s;
}
.dsxall__toggle:hover { color: var(--brand);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
/* The door keeps its own line once the claim and it stop fitting on one.
   Its label changes width when it opens ("See them in detail" 137px ->
   "Hide them" 78px) and on a narrow screen that was enough to un-wrap the
   line: the block halved from 52px to 25px and the button jumped 34px UP,
   out from under the finger that had just tapped it, then back down on
   close. Given a line of its own it cannot rewrap, so it cannot move.
   Below ~565px is where the flip happens; 700px is the house breakpoint
   and clears it comfortably. */
@media (max-width: 700px) {
  .dsxbelt__say .dsxall__toggle { flex: 0 0 100%; justify-content: center; }
}
/* the two little arrows keep beckoning downward until it is open, then flip.
   `rotate` and `translate` are separate properties here on purpose: the
   chevron is a rotated square, so animating `transform` would drag it along
   its own diagonal instead of straight down. */
/* -.26em, not the old +.1em, because a rotated square hangs its ink BELOW its
   layout box: the two borders meet at the bottom-right corner, and rotating
   that corner 45deg about the centre puts the V's apex ~2.5px under the box
   while both arms sit on the box's vertical midline. So the ink of a 12px
   chevron lives entirely in its lower half, and the pair read low against
   the label even though the flexbox had centred them perfectly. The beckon
   leans downward too (-2px to +3px), which is the rest of the correction. */
.dsxall__chevs {
  display: grid; gap: 1px; margin-top: -.4em;
  transition: transform .34s cubic-bezier(.22, .61, .21, 1),
              margin-top .34s cubic-bezier(.22, .61, .21, 1);
}
.dsxall__chevs i {
  display: block; width: 12px; height: 12px;
  /* 4px, up from 2.2: at 11px across, a 2.2px stroke on this pale band was a
     hairline the eye slid off. Keep this a WHOLE number — Blink floors
     fractional border widths, so a 3.4px try rendered as 3px and looked like
     nothing had changed. The beckon floor came up with it (.35 -> .6), so the
     arrows never fade to a ghost mid-cycle. */
  border-right: 4px solid currentColor; border-bottom: 4px solid currentColor;
  rotate: 45deg; opacity: .8;
  animation: nx-chev-beckon 1.7s ease-in-out infinite;
}
.dsxall__chevs i:nth-child(2) { animation-delay: .2s; }
@keyframes nx-chev-beckon {
  0%, 100% { translate: 0 -2px; opacity: .6; }
  45%      { translate: 0 3px;  opacity: 1; }
}
/* Flipping open turns the pair over, so the ink that hung BELOW the box now
   hangs above it and the same negative margin would read high. Measured on
   /dev: margin shifts the ink by half its value (flex centres the MARGIN
   box), the ink is +3.38px low closed and -4.25px high open — hence -.4em
   and +.45em, both landing inside half a pixel of the label's centre. */
.dsxall__toggle[aria-expanded="true"] .dsxall__chevs {
  transform: rotate(180deg); margin-top: .45em;
}
.dsxall__toggle[aria-expanded="true"] .dsxall__chevs i { animation: none; opacity: .95; }
@media (prefers-reduced-motion: reduce) { .dsxall__chevs i { animation: none; } }

/* ================= the claim becomes the search field =================
   Opening the list turns "100+ connectors ready today." into the thing you
   search it with, in one move: a line draws itself round the claim and stays
   as the field's border, the box grows into a bar under it, the words go grey
   and are backspaced away, and the field then demonstrates itself by typing
   connector names. Nothing is thrown away and nothing new drops in — the
   sentence IS the input.
   The typing is a DEMO, not a search: filtering the 133-tile grid every few
   seconds would thrash the page right under the reader. It stops dead the
   moment the field is touched, and from then on what you type really does
   filter the list (pages.js). Sequence and durations live in pages.js; this
   file owns the shapes.  */
/* The delays belong to the OPENING only — they let the ring get a head start
   round the sentence before the box grows under it. Closing carries no delay,
   so "Hide them" snaps back to a sentence instead of hanging for a beat. */
/* --nd: the bar's corner. 1.34em is half its height — .58em padding top and
   bottom around a 1.5 line-height (2.66em tall) — so the field is a true
   stadium. It has to be a LENGTH, not a big number: CSS border-radius clamps
   proportionally and gives a stadium, but an SVG rect clamps rx and ry
   INDEPENDENTLY, so rx="999" became rx=width/2, ry=height/2 — a lens sitting
   around the pill instead of on it. The ring and the background read this
   same token, so they cannot disagree again. Re-derive it if the padding or
   the line-height moves. */
.dsxfind {
  --nd: 1.34em;
  position: relative; display: inline-block; max-width: 100%; text-align: left;
  border-radius: var(--nd);
  transition: background .3s ease, box-shadow .3s ease;
}
.dsxfind.is-bar { transition-delay: .2s; }
.dsxfind__say {
  display: block; padding: 0; white-space: nowrap;
  transition: padding .38s cubic-bezier(.22,.61,.21,1), color .3s ease;
}
/* The bar's HEIGHT is this element's line box, and an element with no text
   generates no line box at all — so every time the sentence emptied (between
   demo words, and for as long as the reader was typing into the input, which
   blanks this layer) the bar dropped to its padding and flashed as a thin
   line. A zero-width inline-block is content enough to keep the line box, and
   the strut then gives it the full line-height whatever is or isn't typed. */
.dsxfind__say::after { content: ""; display: inline-block; width: 0; }
.dsxfind.is-bar .dsxfind__say { transition-delay: .2s, 0s; }
.dsxfind__say b { color: var(--ink); font-weight: 620; transition: color .3s, font-weight .3s; }

/* the ring: the same dash-on-a-path trick as the hero rim. pathLength 100
   makes one lap one lap at any width, so dashoffset 100 -> 0 draws the line
   round the claim exactly once however long the sentence is. It does not
   disappear afterwards — it settles into the field's border. */
.dsxfind__ring {
  position: absolute; inset: 0; width: 100%; height: 100%;
  overflow: visible; pointer-events: none; opacity: 0;
  transition: opacity .18s ease;
}
.dsxfind__ring rect {
  fill: none; stroke: #2f6fbe; stroke-width: 1.5px;
  rx: var(--nd); ry: var(--nd);
  stroke-dasharray: 100; stroke-dashoffset: 100;
  /* round, so the dash's two ends overlap where they meet at the path's
     start instead of butting into a hairline notch on the top-left corner */
  stroke-linecap: round;
  transition: stroke .45s ease .5s;
}
.dsxfind.is-bar { background: #fff; box-shadow: 0 1px 2px rgba(4,14,24,.05), 0 10px 26px -14px rgba(9,26,42,.28); }
.dsxfind.is-bar .dsxfind__say { padding: .58em 1.15em .58em 2.6em; }
.dsxfind.is-bar .dsxfind__ring { opacity: 1; }
.dsxfind.is-bar .dsxfind__ring rect {
  stroke: rgba(22,33,43,.17);
  animation: dsxfind-draw .78s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes dsxfind-draw { to { stroke-dashoffset: 0; } }

/* the words grey out on their way to being deleted */
.dsxfind.is-grey .dsxfind__say { color: #93a2ae; }
.dsxfind.is-grey .dsxfind__say b { color: #93a2ae; font-weight: 400; }

/* magnifier: circle + handle, the drawn-pictogram vocabulary glyph_svg()
   already uses in includes/components.php, in currentColor so it can grey */
.dsxfind__glass {
  position: absolute; left: 1.02em; top: 50%; translate: 0 -50%;
  width: 1.12em; height: 1.12em; color: #93a2ae;
  opacity: 0; scale: .8; pointer-events: none;
  /* no delay on the way OUT — the delay is added by .is-bar below. It has to
     outlast the padding (.2s delay + .38s), or the glass arrives while the
     text is still sliding right and lands on top of the words. */
  transition: opacity .3s ease, scale .3s cubic-bezier(.2,1.4,.4,1);
}
.dsxfind__glass circle, .dsxfind__glass path {
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;
}
.dsxfind.is-bar .dsxfind__glass { opacity: 1; scale: 1; transition-delay: .62s; }

/* the real input rides exactly over the text layer. Transparent until the
   reader engages, so the demo shows through; then the demo dies, the caret
   and the ink turn on, and .dsxfind__say is emptied for good. */
.dsxfind__input {
  position: absolute; inset: 0; display: none;
  width: 100%; padding: .58em 1.15em .58em 2.6em;
  font: inherit; letter-spacing: inherit; color: transparent;
  caret-color: transparent; background: none; border: 0; border-radius: var(--nd);
  outline: none; -webkit-appearance: none; appearance: none;
}
.dsxfind__input::-webkit-search-cancel-button { display: none; }
.dsxfind.is-bar .dsxfind__input { display: block; }
.dsxfind.is-live .dsxfind__input { color: var(--ink); caret-color: #2f6fbe; }
.dsxfind.is-live .dsxfind__say { visibility: hidden; }
.dsxfind:focus-within .dsxfind__ring rect { stroke: #2f6fbe; stroke-width: 2px; }

.dsxfind__sr {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
/* a padded bar and a baseline row do not agree; centre them while it is one */
.dsxbelt__say.is-searching { align-items: center; }

/* filtered out. display:none, so the grid simply closes up. */
.dsxall__item.is-out { display: none; }
.dsxall__none { display: none; }
.dsxall.is-empty .dsxall__none {
  display: block; text-align: center; color: var(--muted);
  margin: 0 0 .4rem;
}
.dsxall__none b { color: var(--ink); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  /* no draw, no typing (pages.js skips both): the bar is simply there */
  .dsxfind, .dsxfind__say, .dsxfind__glass, .dsxfind__ring,
  .dsxfind__ring rect { transition: none; }
  .dsxfind.is-bar .dsxfind__ring rect { animation: none; stroke-dashoffset: 0; }
}

/* The panel does NOT animate its height. `grid-template-rows: 0fr -> 1fr`
   re-lays-out and repaints a ~5000px subtree of 128 tiles on every frame of
   the transition — measured at 39fps with 83ms frames, which is the lag. The
   height snaps now (one layout) and the MOTION is opacity plus translate,
   both composited, which costs the main thread nothing.
   Shut, the inner is `content-visibility: hidden`: those 128 tiles are not
   rendered at all — so they also stop costing anything on first paint of the
   page — while staying in the document for crawlers. */
.dsxall { display: block; height: 0; overflow: hidden; }
.dsxall.is-open { height: auto; }
/* The height is NOT animated, in either direction. Measured three ways:
   `grid-template-rows: 0fr->1fr` re-wraps 128 tiles every frame (191ms of
   blocked main thread), and animating the outer box's height is no better
   (31fps) because `overflow: hidden` means each frame paints more of a
   ~5000px patterned surface. A panel this tall cannot be height-animated
   smoothly, so the height snaps and ALL of the motion is composited: the
   sheet rises and fades, and the first rows of tiles cascade in behind it.
   ONLY the first 36 tiles get that cascade: putting the transition on all
   128 put 111ms of long tasks straight back on the main thread. */
/* The panel is its own band: a steel-blue gradient deepening toward the belt
   it sits above, wearing the FULL naxis registration pattern — the frontpage
   hero's own background stack, values verbatim, with the splotch mask off so
   it runs edge to edge (identical to the about page's band). The glass
   squares finally have something to sit on. */
.dsxall__in {
  position: relative; overflow: hidden; min-height: 0;
  /* containment keeps this subtree's layout and paint from touching the rest
     of the document at all */
  contain: content;
  content-visibility: hidden;
  opacity: 0; translate: 0 -30px;
  /* the resting rule is also the EXIT, and it is deliberately much shorter
     than the entrance: the height cannot collapse until the sheet has gone,
     and half a second of staring at a fading panel before it finally shuts is
     the slowest part of the whole control. Out in .22s, in over .5s/.66s. */
  transition: opacity .22s ease, translate .22s ease;
  /* intense at the top, gone by the bottom — the band arrives in colour and
     hands off to white before it reaches the belt */
  background: linear-gradient(180deg,
    #9dc4e0 0%, #b9d5e9 12%, #d6e6f2 32%,
    rgba(253, 253, 253, .72) 64%, #fdfdfd 88%, #fdfdfd 100%);
}
.dsxall.is-lit .dsxall__in {
  content-visibility: visible; opacity: 1; translate: 0 0;
  transition: opacity .5s ease, translate .66s cubic-bezier(.16, .74, .24, 1);
}
/* The tiles the eye can actually see cascade in a beat behind the sheet.
   The cascade is per ROW and pages.js is what decides who is in it, because
   the row width is a function of the viewport and NO `nth-child` count can
   end on a row boundary at every width. `-n+36` used to do it, and at 1440px
   the grid is 11 wide: it cut row 4 in half, three tiles fading in beside
   eight that were already solid. Ending on a row reads as deliberate,
   ending mid-row reads as broken.
   The delay lives on the ENTER rule only, so closing is not staggered too —
   on the way out all of it leaves together, in one short beat. */
/* NO transition on the resting rule, deliberately. The tag goes on while the
   panel is still shut, and it has to SNAP to 0 there: with a transition here
   the tile is still at ~1 when `is-lit` lands a frame later, so the reveal
   retargets 1 -> 1 and nothing ever moves. (That is the whole bug — the
   opacity was being set, it was just never committed before it was undone.)
   The exit beat is armed by `is-open` below, which is only ever on when the
   panel is actually on screen and there is something to fade out. */
.dsxall__item--rise { opacity: 0; translate: 0 14px; }
.dsxall.is-open .dsxall__item--rise {
  transition: opacity .2s ease, translate .2s ease;
}
.dsxall.is-lit .dsxall__item--rise {
  opacity: 1; translate: 0 0;
  transition: opacity .38s ease, translate .46s cubic-bezier(.16, .74, .24, 1);
  /* 4 rows x 68ms = a 204ms tail; + .46s it lands at ~664ms, WITH the sheet's
     own .66s rather than 700ms after it, which is what made the old one look
     like two separate animations. */
  transition-delay: calc(var(--row, 0) * 68ms);
}
/* the `.dsxall.is-lit` selectors above are three classes deep, so the opt-out
   has to reach the same depth or it silently loses and the motion plays anyway */
@media (prefers-reduced-motion: reduce) {
  .dsxall__item--rise,
  .dsxall.is-open .dsxall__item--rise,
  .dsxall.is-lit .dsxall__item--rise {
    opacity: 1; translate: 0 0; transition: none; transition-delay: 0s;
  }
}
/* `is-warm` renders the subtree while the panel is still height:0 — the 128
   tiles get laid out on hover/focus instead of in the frame the click lands,
   which is the ~200ms the button used to spend looking dead. `contain: content`
   above is what keeps that early layout off the rest of the document. */
.dsxall.is-open .dsxall__in,
.dsxall.is-warm .dsxall__in { content-visibility: visible; }
.dsxall__in::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='120'%20height='120'%3E%3Cpath%20d='M60%2054v12M54%2060h12'%20stroke='%23225479'%20stroke-opacity='.45'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='480'%20height='480'%3E%3Crect%20x='140'%20y='60'%20width='20'%20height='20'%20fill='%23225479'%20fill-opacity='.10'/%3E%3Crect%20x='380'%20y='200'%20width='20'%20height='20'%20fill='%23D08542'%20fill-opacity='.16'/%3E%3Crect%20x='60'%20y='340'%20width='20'%20height='20'%20fill='%23225479'%20fill-opacity='.10'/%3E%3Crect%20x='280.5'%20y='420.5'%20width='19'%20height='19'%20fill='none'%20stroke='%23225479'%20stroke-opacity='.22'/%3E%3C/svg%3E"),
    linear-gradient(rgba(34, 84, 121, .10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 84, 121, .10) 1px, transparent 1px),
    linear-gradient(rgba(34, 84, 121, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 84, 121, .055) 1px, transparent 1px);
  background-size:
    120px 120px, 480px 480px, 120px 120px, 120px 120px, 20px 20px, 20px 20px;
  background-position:
    0 0, 0 0, 60.5px 60.5px, 60.5px 60.5px, .5px .5px, .5px .5px;
  /* strong down both sides, faded through the middle where the squares are —
     the field stays continuous, it just steps back behind the content */
  -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .3) 26%,
    rgba(0, 0, 0, .14) 50%, rgba(0, 0, 0, .3) 74%, #000 100%);
          mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .3) 26%,
    rgba(0, 0, 0, .14) 50%, rgba(0, 0, 0, .3) 74%, #000 100%);
}
/* the band must not START and END on a hard rule. A short ramp at each edge
   carries the page's own ground into the blue and back out of it. */
.dsxall__in::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 90px;
  z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, #fdfdfd 0%, rgba(253, 253, 253, .55) 45%,
    rgba(253, 253, 253, 0) 100%);
}
.dsxall__in .hero__slice { top: -6%; bottom: -6%; z-index: 0; }
.dsxall__in .hero__slice--c { left: 53%; width: 30px; background: var(--brand); opacity: .045; }

.dsxall__wrap {
  /* the squares ARE the panel, so they take the screen: near full-bleed with
     only a slim margin, capped so it does not sprawl on a very wide monitor */
  position: relative; z-index: 1;
  max-width: min(97vw, 1900px); margin-inline: auto;
  padding: clamp(2rem, 3.8vw, 3.2rem) clamp(14px, 1.8vw, 30px) clamp(2.4rem, 4.4vw, 3.6rem);
}
/* FLEX, not a fixed column count. Locking the columns to divisors of 128 was
   the only way to avoid short rows, and it forced the squares up to 158px for
   a 40px mark — most of each tile was empty. Flex fits as many as the width
   allows and CENTRES the last row, so the tail reads as deliberate instead of
   as a half-empty line. */
.dsxall__list {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .9rem;
}
/* A GLASS SQUARE. The mark sits straight on the glass — a white tile inside
   the tile was a box in a box — and aspect-ratio 1 keeps it square whatever
   the column width works out to. Recipe is the frontpage belt chip's, grown
   up to hold type. */
.dsxall__item {
  /* --tile is the square, and every mark is a FRACTION of it (below), so the
     logo keeps its share of the tile at every width instead of being a fixed
     34px that shrank to a stamp on a big screen. */
  --tile: clamp(96px, 7.5vw, 116px);
  position: relative; z-index: 1; aspect-ratio: 1;
  flex: 0 0 var(--tile);
  /* Only the tiles near the viewport are rendered; the rest keep a placeholder
     box, and that box has to be the size the real one turns out to be or the
     panel reflows the moment they resolve. It used to say `auto 107px`, and
     `contain-intrinsic-size` sizes the CONTENT box — padding and border put
     another 19.6px on top, so every skipped row stood 20px too tall and the
     panel opened 1777px, then snapped to 1536px mid-animation, jumping
     everything below it up by 241px.
     No number here at all is the fix: the width is definite and the tile is
     `aspect-ratio: 1`, so the placeholder resolves through the very rule that
     sizes the rendered tile. Measured identical at 1440 and 390. */
  content-visibility: auto; contain-intrinsic-size: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .3rem; min-width: 0; padding: .45rem .3rem; text-align: center;
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .92) 0%,
    rgba(255, 255, 255, .58) 46%, rgba(238, 246, 252, .4) 100%);
  border: 1px solid rgba(255, 255, 255, .85);
  box-shadow:
    inset 0 1.5px 0 #fff,
    0 10px 22px -14px rgba(16, 36, 58, .34);
}
.dsxall__name {
  font-size: .72rem; font-weight: 540; line-height: 1.18; color: var(--ink);
  letter-spacing: -.006em;
}
.dsxall__mark { flex: none; display: grid; place-items: center; }
/* Just over half the tile across, up from a flat 34px — at 34 on a 107px
   square the mark was about a tenth of the tile by area and read as a stamp
   floating in an empty box. The square then came back DOWN (128 -> 116 cap)
   while this fraction went up, which holds the logo at roughly the size it
   had reached and spends the difference on the gutter between tiles instead.
   The rest of the square is the name plus the breathing room a glass chip
   needs, so this is close to the ceiling before two-line names collide with
   the logo (checked against every name in the catalogue at 1440 and 390). */
.dsxall__mark img, .dsxall__mark svg {
  width: calc(var(--tile) * .52); height: calc(var(--tile) * .52); object-fit: contain;
}
/* the app's own MEASURED classes: a lockup squeezed into a square is a
   sliver, and a mark that IS an app icon keeps its own rounded corners */
.dsxall__mark--wide img, .dsxall__mark--wide svg {
  width: calc(var(--tile) * .62); height: calc(var(--tile) * .26);
}
.dsxall__mark--flush img, .dsxall__mark--flush svg {
  width: calc(var(--tile) * .54); height: calc(var(--tile) * .54);
  border-radius: calc(var(--tile) * .092);
}

/* phone: three tighter tiles a row rather than two roomy ones — at 133
   connectors the two-column version is 11,000px of scrolling, and a list
   whose point is "look how many" should read dense, not endless */
@media (max-width: 700px) {
  /* the tile itself must NOT grow here — 27vw is what keeps three to a row at
     390px, and 29 would drop it to two and double the scroll. The mark grows
     instead, at a slightly smaller fraction because the name gets two lines
     more often in a narrower tile. */
  .dsxall__list { gap: .55rem; }
  .dsxall__item { --tile: clamp(96px, 27vw, 116px); padding: .4rem .28rem; gap: .28rem; }
  .dsxall__name { font-size: .68rem; }
  .dsxall__mark img, .dsxall__mark svg {
    width: calc(var(--tile) * .46); height: calc(var(--tile) * .46);
  }
  .dsxall__mark--wide img, .dsxall__mark--wide svg {
    width: calc(var(--tile) * .56); height: calc(var(--tile) * .23);
  }
  .dsxall__mark--flush img, .dsxall__mark--flush svg {
    width: calc(var(--tile) * .48); height: calc(var(--tile) * .48);
  }
}
/* no link rule here on purpose — the foot makes a promise, it does not send
   anyone to a form (2026-08-10) */
.dsxall__foot { margin-top: 1.7rem; font-size: .95rem; color: var(--muted); text-align: center; }
@media (prefers-reduced-motion: reduce) {
  .dsxall__in, .dsxall.is-lit .dsxall__in { transition: none; }
}

.dsxbelt__belt { margin-top: clamp(1.5rem, 3vw, 2.4rem); }
/* the ribbon is GENERATED ART, the same kind the frontpage belt rides
   (img/hero-flow.webp) - re-inked to this page's sky rather than the
   frontpage's steel and copper. Same mechanics as index: an oversized
   layer (inset -14%) translated by --plx, so no edge can enter the frame
   however fast the scroll. */
.dsxbelt__belt::before {
  background: url("../img/data-sources/belt-flow.webp") center 52% / cover no-repeat;
  opacity: 1; filter: saturate(1.22);
}
.dsxbelt__belt .ingest__lane:nth-of-type(3) { animation-duration: 92s; }

/* ---------- shared: a .glv variant whose card sits in flow, hanging off
   the photo's lower edge instead of floating inside it (the panel grows
   with the card, nothing clips) ---------- */
.dsx-logcard, .dsx-reccard {
  position: relative; left: auto; bottom: auto; z-index: 1;
}

/* ---------- 01 · the sweep log vignette: photo shifted right, log card
   overlapping from the lower left, frosted Naxis chip kept clear on the
   photo's right corner ---------- */
.dsx-glv2 .glv__scene { margin-left: 14%; }
.dsx-glv2 .glv__chip { left: auto; right: 14px; }
.dsx-logcard { width: min(82%, 408px); margin: -4.6rem auto 0 0; }
.dsx-meta {
  font-size: .66rem; font-weight: 600; letter-spacing: .1em;
  color: var(--faint); padding-bottom: .6rem;
}
.dsx-stage {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0 .6rem; align-items: baseline;
  padding: .48rem .9rem .5rem;
  border-top: 1px solid rgba(34, 84, 121, .08);
}
.dsx-stage__n {
  font-size: .78rem; font-weight: 700; color: #1f52b0;
  font-variant-numeric: tabular-nums;
}
.dsx-stage > div > b {
  display: block; font-size: .85rem; font-weight: 650;
  letter-spacing: -.008em; color: var(--ink);
}
.dsx-stage > div > span {
  display: block; font-size: .72rem; line-height: 1.45; color: var(--muted);
}
.dsx-stage__tag {
  max-width: 7.2em; text-align: right; align-self: start; padding-top: .12em;
  font-size: .56rem; font-weight: 650; letter-spacing: .11em;
  line-height: 1.5; color: var(--faint);
}

/* ---------- 02 · the record vignette: photo held left, record card
   overlapping from the lower right, SQL chip on the photo's left corner;
   the caption stays under the whole figure ---------- */
.dsx-recfig { margin: 0; min-width: 0; }
.dsx-glv3 .glv__scene { margin-left: 0; margin-right: 14%; }
.dsx-reccard { width: min(84%, 424px); margin: -4.6rem 0 0 auto; }
.dsx-record { padding: .95rem 1.05rem 1.05rem; }
.dsx-record dt {
  font-family: var(--font-sans); font-size: .7rem; font-weight: 650;
  letter-spacing: .03em; text-transform: none;
}
.dsx-record dl > div {
  grid-template-columns: minmax(5.2rem, 6.2rem) minmax(0, 1fr); gap: .7rem;
}
.dsx-tag {
  font-size: .6rem; font-weight: 650; letter-spacing: .12em;
  color: var(--faint); font-variant-numeric: tabular-nums;
}
.dsx-tag--synced { margin-left: auto; color: var(--copper); }
.dsx-recfig > figcaption {
  margin-top: .8rem; padding-left: .4rem;
  font-size: .8rem; color: var(--muted);
}

/* ---------- mobile story: panels go single-column, photos full width,
   cards stack under their photo, nothing clips ---------- */
@media (max-width: 860px) {
  .dsx-glv2 .glv__scene, .dsx-glv3 .glv__scene { margin-left: 0; margin-right: 0; }
  .dsx-logcard, .dsx-reccard { width: 100%; margin: .7rem 0 0; }
  .dsx-stage { padding-inline: .75rem; }
  .dsx-stage__tag { max-width: 6.4em; font-size: .52rem; }
  .dsx-recfig > figcaption { padding-left: .15rem; }
}

/* ======== messaging.css ======== */
/* ==================================================================
   MESSAGING (round 11) — image-led rebuild in the Glean grammar.
   Base primitives (.glv, .glv__scene/chip/card/band/spark/title/meta/row)
   come from main.css; everything new is msgv- prefixed.
   ================================================================== */

/* ---------------- hero: the ported ground ----------------
   The wash rides ONE wrapper spanning hero + first section (the
   reference's page grammar: their webp covers the whole wrap and the
   section content floats on it as a milky card), settling to house
   white before the tint section below. */
.msgv-washwrap {
  position: relative;
  background: url("../img/surfaces/hero-wash.webp") center top / cover no-repeat;
}
.msgv-washwrap::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 150px;
  background: linear-gradient(180deg, transparent, var(--bg));
  pointer-events: none;
}
/* no hairline under this hero — the wash continues into the section card */
.page-hero.msgv-hero { background: none; border-bottom: 0; }
/* the wrapper re-parents the two sections, so the site-wide even/odd
   paper bands must stand down inside it — both parities, always */
.msgv-washwrap section.sec:nth-of-type(even),
.msgv-washwrap section.sec:nth-of-type(odd) {
  background: none; border-block: 0;
}
/* the eyebrow is the house one (data-sources/context grammar: the mark
   beside sentence-case type) with the reference's gradient detail kept
   on the page word */
.msgv-eyebrow {
  display: flex; align-items: center; gap: .55rem;
  width: fit-content; margin-bottom: 1.05rem;
  font-family: var(--font-sans); font-size: 1.05rem; font-weight: 500;
  letter-spacing: -.006em; text-transform: none; color: var(--muted);
}
.msgv-eyebrow img { width: 24px; height: 24px; object-fit: contain; }
.msgv-eyebrow i { font-style: normal; color: var(--copper); }
.msgv-eyebrow b {
  font-weight: 520; letter-spacing: .012em;
  background-image: linear-gradient(90deg, var(--brand), #d08542);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
/* the house secondary hero CTA (founder 08-17): every subpage hero pairs
   Live demo with the SAME "See pricing" text-arrow link - this style was
   born here as the messaging page's cta2, now shared site-wide as .cta2.
   Spacing rides the link itself so every hero__cta row matches. */
.cta2 {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-left: .8rem;
  font-size: 1.05rem; font-weight: 560; color: var(--brand);
}
.cta2 svg { width: 15px; height: 13px; display: block; }
.cta2:hover { color: var(--brand-deep); text-decoration: underline; text-underline-offset: 4px; }
/* the section-below card — their measured panel material: milky
   translucent pane with the wide inset white glow, on the wash */
.msgv-panel {
  position: relative;
  background: rgba(255, 255, 255, .2);
  border-radius: 16px;
  box-shadow: inset 0 2px 158px rgba(255, 255, 255, .7);
  padding: clamp(2.2rem, 4vw, 3.75rem);
}
/* the engine showcase: centred heading on top, the rendered board below
   (bin/art/surfaces-engine/); art is eager so the pane never sits empty */
.msgv-panel--engine { padding: clamp(2rem, 3.4vw, 3.2rem) clamp(1.3rem, 2.8vw, 2.8rem); }
.msgv-panel__head { text-align: center; margin-bottom: clamp(1.5rem, 2.8vw, 2.4rem); }
.msgv-engine { display: block; width: 100%; height: auto; }

/* the doorway wall — the reference's connectors hero ported at its
   MEASURED values (1440, 16px rem): copy column 32rem, column gap 8rem,
   cards 112px solid white r16 (no border, no shadow), marks 48px,
   gaps 12px, rows of 6/5/6 at left 0/96px/0, every row running past
   the viewport edge — .page-hero's overflow:clip is the knife. The
   clamps only let the numbers breathe BELOW 1440; at 1440 they resolve
   to the measured values exactly. */
@media (min-width: 961px) {
  .msgv-hero__grid {
    grid-template-columns: minmax(0, 32rem) minmax(0, 1fr);
    gap: clamp(2.5rem, 8.9vw, 8rem);
  }
}
/* house type at the reference's SCALE — sizes only, everything else
   (weight, spacing, colour) stays the site's own .display/.lead */
.msgv-hero .display { font-size: clamp(2.5rem, 4.17vw, 3.75rem); }
.msgv-hero .lead { font-size: clamp(1.1rem, 1.67vw, 1.5rem); }
.msgv-wall {
  display: flex; flex-direction: column;
  gap: clamp(9px, .84vw, 12px);
}
.msgv-wall__row {
  position: relative;
  display: flex; gap: clamp(9px, .84vw, 12px);
}
.msgv-wall__row--b { left: clamp(56px, 6.67vw, 96px); }
.msgv-wall__row--d { left: clamp(18px, 2.23vw, 32px); }
.msgv-card {
  flex: 0 0 auto; display: grid; place-items: center;
  width: clamp(88px, 7.8vw, 112px); aspect-ratio: 1 / 1;
  border-radius: 16px;
  background: #fff;
}
.msgv-card > img, .msgv-card > svg { width: 42.9%; height: 42.9%; }
.msgv-card > img { object-fit: contain; }
/* drawn pictograms carry the house steel, not the muted catalog gray —
   beside full-colour brand marks the gray reads anonymous */
.msgv-card--glyph svg [stroke] { stroke: var(--brand); }

/* ------------- section figures: glv beside prose ------------- */
.msgv-figwrap { min-width: 0; }
.msgv-glv--sec .glv__card { width: min(66%, 330px); }
.msgv-rowglyph { display: grid; place-items: start; }
.msgv-rowglyph svg { width: 20px; height: 20px; margin-top: .1rem; }
.msgv-facts { margin-top: 1.7rem; }
.msgv-ledger { margin-top: 1.7rem; }

/* mirrored composition: graphic left, rail right (02). The rail column
   takes the wider track (founder: wider, further right) and the two
   columns centre on each other so the rail rides the phone's height. */
@media (min-width: 961px) {
  .msgv-grid--flip { grid-template-columns: minmax(0, 8fr) minmax(0, 12fr); align-items: center; }
  .msgv-grid--flip .msgv-figwrap { order: -1; }
}

/* ---------------- close: shallow echo of the hero ---------------- */
.msgv-close { background: linear-gradient(180deg, #fdfeff, #f4f8fb); }
.msgv-close__pool {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(44% 60% at 18% 100%, rgba(160, 196, 226, .28), transparent 70%),
    radial-gradient(40% 56% at 84% 100%, rgba(255, 214, 168, .3), transparent 70%);
}

/* ---------------- the doorway belt: a separator band ----------------
   The frontpage belt as pure punctuation between the engine panel and
   the conduct section - no copy, no meter. Structure is .ingest__belt /
   __lane / __chip from the frontpage recipe (connectors-page shape), so
   this stays one band with it as that recipe changes. Ours: the ribbon
   re-inked to this page's wash (peach and lilac glass on cream -
   generated art, the same kind as img/hero-flow.webp), and the four
   drawn doorways riding lane two among the brand marks, exactly as they
   ride the wall above. */
section.sec.msgv-beltsec:nth-of-type(odd),
section.sec.msgv-beltsec:nth-of-type(even) {
  /* both parities, always - out-specifies the site-wide nth-of-type veil,
     so adding a section above cannot repaint this band (washwrap shape).
     ZERO padding: a separator is the band itself, hairline to hairline -
     any breathing room around it belongs to the neighbouring sections.
     The warm ground still matters: the belt's edge mask thins the ribbon
     at the far left/right, and without a warm paper behind it those
     corners go aurora grey-blue (the seam this ground was added for). */
  border-block: 0;
  padding-block: 0;
  background:
    radial-gradient(52% 150% at 8% -30%, rgba(240, 185, 150, .2), transparent 62%),
    radial-gradient(52% 150% at 92% -30%, rgba(190, 184, 238, .22), transparent 62%),
    linear-gradient(180deg, #fdfcf9, #faf6ef);
}
.msgv-belt__belt { margin-top: 0; /* the inherited gap spaced a meter that is not here */ }
.msgv-belt__belt::before {
  background: url("../img/surfaces/belt-flow.webp") center 46% / cover no-repeat;
  opacity: 1; filter: saturate(1.08);
}
/* the drawn doorways (widget, email, SMS, API): same seat as the marks,
   inked the house steel like the wall's own glyph cards */
.msgv-belt__belt .ingest__chip svg { width: 36px; height: 36px; }
.msgv-belt__belt .ingest__chip svg [stroke] { stroke: var(--brand); }

/* ------------- the doorway phone: the frontpage 03 handset -------------
   Same graphic, same skins, same switch - only the SHELL is re-inked to
   a dark frame (founder), sitting on this page's white ground. The
   screen surround goes near-black with it, so the light app faces read
   inside a true bezel; everything within the apps stays the frontpage's. */
.msgv-phone .phone {
  background: linear-gradient(150deg, #323b47, #1a2029 52%, #10151c);
  border-color: rgba(9, 13, 18, .9);
  /* slim edges (founder: the 12px frame read as a heavy case): 6px of
     frame + 4px of screen surround. Radii stay concentric with the 44px
     shell: screen 38 = 44 - 6, app face 34 = 38 - 4. */
  padding: 6px;
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, .28),
    inset 0 -1px 0 rgba(255, 255, 255, .05),
    inset 4px 6px 10px rgba(255, 255, 255, .05),
    0 3px 8px rgba(22, 33, 43, .12),
    0 38px 68px -26px rgba(15, 24, 35, .6);
}
.msgv-phone .phone::before,
.msgv-phone .phone::after {
  background: linear-gradient(90deg, #4a5462, #242c36);
}
.msgv-phone .phone::before { box-shadow: 0 46px 0 #2d3540; }
.msgv-phone .phone__screen {
  background: #0c1117;
  border-radius: 38px;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .6);
}
.msgv-phone .skin { inset: 4px; }
.msgv-phone .skin__face { border-radius: 34px; }

/* ------------- the conduct rail: points one after another -------------
   The reference's auto-advancing point rail, set in house ink: a
   hairline rail through the dots, the live point wearing a steel
   bullseye and its detail unfolded, the segment beneath it draining
   brand-blue for the six seconds the point holds (height 6s linear, the
   reference's own clock), then the next point takes over. Click jumps.
   pages.js sets is-cur + explicit subwrap heights (height:auto cannot
   animate); without motion every point stands open (is-open). */
.msgv-conduct__intro { font-size: 1rem; max-width: 42rem; }
.msgv-rail { --rail-gap: 3.3rem; display: grid; gap: var(--rail-gap); margin-top: 2.6rem; }
.msgv-rail__item { position: relative; padding-left: 34px; cursor: pointer; }
.msgv-rail__seg {
  position: absolute; left: 4px; top: 16px; width: 2px;
  height: calc(100% + var(--rail-gap));
  background: #d9e0e6;
}
.msgv-rail__item:last-child .msgv-rail__seg { display: none; }
.msgv-rail__seg::after {
  content: ""; position: absolute; inset: 0 0 auto; height: 0;
  background: linear-gradient(180deg, #2a62a8 55%, rgba(42, 98, 168, 0));
  transition: none;
}
.msgv-rail__item.is-cur .msgv-rail__seg::after { height: 100%; transition: height 6s linear; }
.msgv-rail__dot {
  position: absolute; left: 1px; top: 12px; width: 8px; height: 8px;
  border-radius: 99px; background: #b9c5cf; z-index: 1;
  transition: all .25s ease;
}
.msgv-rail__item.is-cur .msgv-rail__dot,
.msgv-rail__item.is-open .msgv-rail__dot {
  left: -2px; top: 9px; width: 14px; height: 14px;
  background: #2a62a8;
  box-shadow: 0 0 0 5px rgba(42, 98, 168, .16);
}
.msgv-rail__dot::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 4px; height: 4px; border-radius: 99px; background: #fff;
  opacity: 0; transition: opacity .25s;
}
.msgv-rail__item.is-cur .msgv-rail__dot::after,
.msgv-rail__item.is-open .msgv-rail__dot::after { opacity: 1; }
.msgv-rail__item h3 {
  font-size: 1.5rem; line-height: 1.32; font-weight: 560;
  letter-spacing: -.014em; color: var(--muted); margin: 0;
  transition: color .3s;
}
.msgv-rail__item.is-cur h3,
.msgv-rail__item.is-open h3 { color: var(--ink); }
.msgv-rail__subwrap { height: 0; overflow: hidden;
  transition: height .45s cubic-bezier(.3, .7, .25, 1); }
.msgv-rail__item.is-open .msgv-rail__subwrap { height: auto; }
.msgv-rail__sub { padding-top: .6rem; font-size: 1rem; line-height: 1.55;
  color: var(--muted); max-width: 38rem; }

/* ---------------- mobile story (<=960 collapse, <=860 stack) ------- */
@media (max-width: 960px) {
  .msgv-figwrap { max-width: 520px; width: 100%; margin-inline: auto; }
  /* the wall compacts to a tile strip and keeps its right-edge bleed */
  .msgv-wallside { max-width: none; justify-self: stretch; }
  .msgv-card { width: clamp(58px, 13vw, 76px); border-radius: 12px; }
  .msgv-wall, .msgv-wall__row { gap: 8px; }
  .msgv-wall__row--b { left: 1.75rem; }
  .msgv-wall__row--d { left: .6rem; }
  /* their phone hero: centered column, gradient-clipped heading */
  .msgv-hero .page-hero__copy { text-align: center; margin-inline: auto; }
  .msgv-eyebrow { margin-inline: auto; }
  .msgv-hero .lead { margin-inline: auto; }
  .msgv-hero .hero__cta { justify-content: center; }
  .msgv-hero .display {
    background-image: linear-gradient(46deg, var(--brand) 28%, var(--copper) 69%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }
  .msgv-panel { padding: 1.6rem 1.15rem; }
}
@media (max-width: 860px) {
  .msgv-glv--sec .glv__card { width: 100%; }
  /* the rail's desktop scale is sized against the phone; on the stack
     it steps back down */
  .msgv-rail { --rail-gap: 2.3rem; margin-top: 2rem; }
  .msgv-rail__item h3 { font-size: 1.3rem; }
}

/* ======== permissions.css ======== */
/* ============================================================
   PERMISSIONS — round-11 imagery rebuild: "Two desks, two scopes"
   The dark switchboard is gone. The hero keeps the two-asker room
   only as ground — a steel pool (EC/Sales) left and a copper pool
   (DR/Support) right on ink — and hands the story to the Glean
   grammar: a wash panel with one photograph of two colleagues at
   their own desks, and TWO white profile cards overlapping it
   (org-chart idiom, initials avatars in colour rings), each
   listing what that person may see. Section 02 gets one graded
   photo with the frosted mark chip beside the branding prose.
   All new selectors are .pmv- prefixed; .glv/.glv__scene/
   .glv__chip base classes come from main.css round 11.
   ============================================================ */

/* ---------------- hero: the two-pool ground ---------------- */
.pmv-hero {
  background: #0e2133;
  color: #e8f1f7;
  border-bottom: 1px solid rgba(228, 178, 102, .22);
  padding-bottom: clamp(2.6rem, 5.5vw, 4.4rem);
}
.pmv-hero__pool {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(50% 58% at 10% 24%, rgba(46, 110, 158, .5), transparent 72%),
    radial-gradient(44% 52% at 92% 10%, rgba(198, 110, 44, .32), transparent 72%),
    radial-gradient(42% 46% at 56% 100%, rgba(226, 158, 66, .26), transparent 70%),
    radial-gradient(58% 54% at 38% 74%, rgba(20, 58, 84, .55), transparent 78%);
}
.pmv-hero .display { color: #f6fafc; }
.pmv-hero .lead { color: rgba(210, 226, 237, .82); }
.pmv-hero .page-hero__crumb { color: rgba(160, 186, 204, .8); }
.pmv-hero .page-hero__crumb i { color: #e0a45c; }
.pmv-hero .head-rule {
  background: linear-gradient(90deg,
    #e0a45c 0 60%, transparent 60% 70%, rgba(224, 164, 92, .42) 70% 100%);
}
.pmv-hero .btn--ghost { color: #e6eef5; border-color: rgba(196, 220, 236, .38); }
.pmv-hero .btn--ghost:hover { background: rgba(255, 255, 255, .08);
  border-color: rgba(196, 220, 236, .62); }
.pmv-hero :focus-visible { outline-color: #8fc3e8; }
.pmv-hero ::selection { background: rgba(46, 110, 158, .5); }

/* -------- the wash panel: photo up-right, cards below-left --------
   The scene keeps the exemplar's off-axis shift; the two profile
   cards ride up over its lower edge, staggered so EC leads. */
.pmv-glv .glv__scene { margin-left: 12%; }
/* the profile cards own the scene's lower edge, so the frosted mark
   chip rides the top-right corner instead of Glean's bottom-left */
.pmv-glv .glv__chip { left: auto; bottom: auto; right: 14px; top: 14px; }
.pmv-profs {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr 1fr; gap: .8rem;
  align-items: start;
  margin-top: -2.9rem;
  padding-inline: clamp(.1rem, 1vw, .7rem);
}
.pmv-prof--dr { margin-top: 1.5rem; }

/* the profile card — Glean org-chart idiom, kept white and quiet */
.pmv-prof {
  background: #fff; border-radius: 16px;
  box-shadow: 0 2px 8px rgba(22, 33, 43, .08),
    0 26px 52px -22px rgba(16, 36, 58, .45);
  padding: .7rem .75rem .3rem;
}
.pmv-prof--ec { --pc: #2e6e9e; --ring: rgba(46, 110, 158, .38); }
.pmv-prof--dr { --pc: #b4682c; --ring: rgba(198, 110, 44, .38); }
.pmv-prof__head {
  display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: .6rem;
  align-items: center; padding: .15rem .1rem .55rem .2rem;
}
.pmv-ava {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: .72rem; font-weight: 800; letter-spacing: .02em; color: #fff;
  background: var(--pc);
  box-shadow: 0 0 0 2px #fff, 0 0 0 4.5px var(--ring);
}
.pmv-prof__who b { display: block; font-size: .8rem; font-weight: 750;
  letter-spacing: -.01em; color: var(--ink); }
.pmv-prof__who span { display: block; font-size: .62rem; color: var(--muted); }
.pmv-prof__row {
  display: grid; grid-template-columns: 11px minmax(0, 1fr);
  gap: .1rem .45rem; align-items: start; padding: .4rem .1rem;
  border-top: 1px solid rgba(34, 84, 121, .08);
}
.pmv-prof__row b { display: block; font-size: .72rem; font-weight: 650;
  letter-spacing: -.008em; color: #1f52b0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pmv-prof__row > span { grid-column: 2; display: block;
  font-size: .6rem; color: var(--muted); }
.pmv-prof__row--off b { color: var(--muted); font-weight: 550; }
.pmv-dot { width: 9px; height: 9px; border-radius: 50%;
  justify-self: center; margin-top: .25rem; }
.pmv-dot--fill { background: var(--pc); }
.pmv-dot--ring { border: 1.5px solid rgba(96, 116, 136, .55); }

/* ------- section 02: one photograph beside the branding prose ------- */
.pmv-photo {
  position: relative; margin: 1.5rem 0 0; border-radius: 18px; overflow: clip;
  box-shadow: 0 3px 10px rgba(22, 33, 43, .08),
    0 26px 50px -24px rgba(34, 84, 121, .42);
}
.pmv-photo img { display: block; width: 100%; height: auto; }

/* ------------------------ the phone story ------------------------ */
@media (max-width: 860px) {
  /* main.css already rests the .glv panel and lets the scene go
     full-width; the cards stack under it, EC first, no overlap */
  .pmv-profs { grid-template-columns: minmax(0, 1fr); gap: .7rem;
    margin-top: .7rem; padding-inline: 0; }
  .pmv-prof--dr { margin-top: 0; }
  .pmv-photo { border-radius: 14px; }
}

/* ======== pricing.css ======== */
/* ============================================================
   PRICING — round 11, the Glean grammar · prefix .prg-
   The dark statement room is gone; the page is daylight end to
   end. Three moments on the exemplar's primitives (.glv base):
   the seat slider as a white instrument card on the warm wash,
   the monthly statement as a crisp white bill card under the
   blue band, and the checkout story told over a real photograph
   with the steps card overlapping it. No number ever animates;
   the painter JS and every #seat-* / .js-* hook are untouched.
   Appended after main.css; overrides win at equal specificity.
   ============================================================ */

/* the wash panels drift a beat behind the scroll (pages.js --plx) */
.prg-glv,
.prg-after { transform: translateY(var(--plx, 0px)); }

/* ---------- instrument 1: the seat-extension slider ----------
   .glv supplies the wash; the rail itself is the grammar's white
   card, full-width, keeping the name / desc / buy grid. */
.prg-railwrap { margin-top: 26px; }
.prg-rail {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .5rem 2rem; align-items: center;
  padding: 22px 26px; border-radius: 16px; background: #fff;
  box-shadow: 0 2px 8px rgba(22, 33, 43, .08),
              0 26px 52px -22px rgba(16, 36, 58, .35);
}
.prg-rail__name { min-width: 11em; max-width: 14em; }
.prg-rail__q {
  display: block; font-size: 1.05rem; font-weight: 650;
  letter-spacing: -.012em; line-height: 1.4; color: var(--ink);
}
.prg-rail__desc { font-size: .92rem; color: var(--muted); line-height: 1.6; }
.prg-rail__intro { margin: 0 0 .8rem; }
.prg-slide__row { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.prg-slide__read {
  display: flex; align-items: baseline; gap: .9rem; white-space: nowrap;
  min-width: 12.5em; justify-content: space-between;
}
.prg-slide__read b {
  font-size: 1.05rem; color: var(--ink); font-variant-numeric: tabular-nums;
}
.prg-slide__eur {
  color: var(--brand); font-weight: 650; font-size: .95rem;
  font-variant-numeric: tabular-nums;
}
.prg-slide__foot { margin: .8rem 0 0; font-size: .9em; color: var(--muted); }
.prg-slide__foot a { color: var(--brand); font-weight: 560; }
.prg-slide__foot a:hover { color: var(--brand-deep); }

/* The slider is PAINTED, not the browser's. A stepped range input teleports
   between its stops; here the native control is transparent and only supplies
   events, keyboard and AT behaviour, while the fill and the knob read --p off
   the wrapper (pricing.php sets it) and TRANSITION to it — so it glides from
   stop to stop. Motion off means motion off: the transitions go to 0s under
   prefers-reduced-motion and the figure stops tweening too. */
/* NOTHING IN THIS ROW MAY SIZE TO ITS OWN CONTENT. Measured before the fix:
   the buy button breathed 176 -> 183px between 35 and 100 seats, and the
   readout 168 -> 291px stole width from the slider itself (409 -> 279), so
   the track changed length under the knob while you were dragging it.
   The reservation goes on the CONTAINERS, not on the digits: padding a
   number out to 3ch does hold the width, but it parks visible air either
   side of "50" inside "Start with 50 seats". Tabular figures + a fixed box
   with the ends pinned gives the same stability with normal spacing. */
.prg-num { font-variant-numeric: tabular-nums; }
.prg-slide__slider {
  --knob: 22px;
  position: relative; display: block;
  flex: 0 0 clamp(180px, 24vw, 340px);
  height: 26px; isolation: isolate;
}
.prg-slide__slider input[type=range] {
  position: relative; z-index: 3; width: 100%; height: 100%; margin: 0;
  -webkit-appearance: none; appearance: none;
  background: transparent; opacity: 0; cursor: pointer;
}
.prg-slide__slider input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: var(--knob); height: var(--knob);
}
.prg-slide__slider input[type=range]::-moz-range-thumb {
  width: var(--knob); height: var(--knob); border: 0;
}
.prg-slide__rail, .prg-slide__fill {
  position: absolute; left: 0; top: 50%; height: 8px; margin-top: -4px;
  border-radius: 99px; pointer-events: none;
}
.prg-slide__rail { right: 0; background: rgba(22, 33, 43, .09);
  box-shadow: inset 0 1px 2px rgba(22, 33, 43, .12); }
.prg-slide__fill { z-index: 1;
  width: calc(var(--knob) / 2 + (100% - var(--knob)) * var(--p, 0));
  background: linear-gradient(90deg, #d98026, #b7651f);
  transition: width .22s cubic-bezier(.32, .72, 0, 1); }
.prg-slide__knob {
  position: absolute; z-index: 2; top: 50%;
  left: calc((100% - var(--knob)) * var(--p, 0));
  width: var(--knob); height: var(--knob); margin-top: calc(var(--knob) / -2);
  border-radius: 99px; border: 2px solid #fff; pointer-events: none;
  background: linear-gradient(180deg, #e08c31, #b7651f);
  box-shadow: 0 1px 4px rgba(120, 66, 16, .45);
  transition: left .22s cubic-bezier(.32, .72, 0, 1),
              transform .16s ease, box-shadow .16s ease;
}
.prg-slide__slider:hover .prg-slide__knob { transform: scale(1.06); }
.prg-slide__slider:active .prg-slide__knob {
  box-shadow: 0 1px 4px rgba(120, 66, 16, .5), 0 0 0 7px rgba(216, 128, 38, .18);
}
.prg-slide__slider:focus-within .prg-slide__knob {
  box-shadow: 0 1px 4px rgba(120, 66, 16, .5), 0 0 0 3px #fff,
              0 0 0 5px var(--rail-a, #a85e24);
}
@media (prefers-reduced-motion: reduce) {
  .prg-slide__fill, .prg-slide__knob { transition-duration: 0s; }
}

/* ---------- instrument 2: the statement vignette ----------
   The bill card goes crisp white under the exemplar's blue band;
   the base .bill styles (dotted leaders, tabular money) carry it. */
.prg-stmt {
  max-width: 480px; margin-inline: auto; border-radius: 16px;
  overflow: clip; background: #fff;
  box-shadow: 0 2px 8px rgba(22, 33, 43, .08),
              0 26px 52px -22px rgba(16, 36, 58, .45);
}
.prg-stmt .bill { padding-top: 1.05rem; max-width: none; }
/* labels leave the robot font; figures keep their tabular mono */
.prg-stmt .bill__head { font-family: var(--font-sans); font-size: .66rem; letter-spacing: .12em; }
.prg-gauge .gauge__head { font-family: var(--font-sans); font-size: .66rem; letter-spacing: .12em; }
.prg-gauge .gauge__head .mono { font-family: var(--font-sans); font-variant-numeric: tabular-nums; }

/* ---------- instrument 3: the checkout photograph ----------
   Photo + frosted chip + overlapping steps card, straight from the
   exemplar — mirrored, so the card covers the keyboard side and the
   photograph keeps its subject: the hands settling the paperwork.
   Only the rows swap brand marks for drafted indices. */
.prg-after .glv__scene { margin-left: 0; margin-right: 18%; }
.prg-after .glv__card { left: auto; right: clamp(.9rem, 2vw, 1.8rem); }
.prg-card { width: min(64%, 350px); }
.prg-step { grid-template-columns: 1.55rem minmax(0, 1fr); padding: .42rem .9rem; }
.prg-step > i {
  font-style: normal; font-weight: 700; font-size: .72rem;
  color: var(--brand); font-variant-numeric: tabular-nums;
  letter-spacing: .04em; margin-top: .18rem;
}
.prg-step b { font-size: .84rem; }
.prg-step span { font-size: .7rem; }
.prg-after .glv__chip img { display: block; }

/* ---------- mobile: cards stack, nothing clips ---------- */
@media (max-width: 860px) {
  .prg-railwrap { margin-top: 20px; }
  .prg-after .glv__scene { margin-right: 0; }
  .prg-rail { grid-template-columns: minmax(0, 1fr); gap: .9rem; padding: 18px 16px; }
  .prg-rail__name { min-width: 0; max-width: none; }
  .prg-rail .btn { justify-self: start; }
  .prg-slide__read { width: 100%; justify-content: space-between; }
  .prg-slide__slider { flex: 1 1 100%; }
  .prg-stmt { max-width: none; }
  .prg-card { width: 100%; }
}


/* ==== clean section changes (founder, 2026-08-04): a section boundary is
   a visible decision — the colour never just continues. Even-numbered
   sections wear the paper veil with hairline edges; heroes close on a
   hairline; the shelf band stands on its own veil everywhere. ==== */
.page-hero { border-bottom: 1px solid rgba(34, 84, 121, .1); }
section.sec:nth-of-type(even) {
  background: linear-gradient(180deg, rgba(252, 254, 255, .88), rgba(243, 248, 252, .74));
  border-block: 1px solid rgba(34, 84, 121, .1);
}
section.sec:nth-of-type(odd) { background: none; }
/* The blog shelf rides the AURORA, not a paper veil (founder, 2026-08-08):
   the ground it closes every page on is the same glassy blue-and-copper
   wash the FAQ above the CTA band sits on. It has to out-specify three
   rules that would otherwise paint it — the paper-band group, the
   nth-of-type(even) veil, and the .sec.sec-blog rule this replaces — so
   the position it happens to land in on a given page cannot change it. */
section.sec.sec-blog,
section.sec.sec-blog:nth-of-type(even),
section.sec.sec-blog:nth-of-type(odd) {
  background: none;
  border-block: 0;
}
/* the hairline the shelf used to get from its own border comes from the
   adjacency rule instead — except under the CTA band, which closes flat */
.abcta + .sec.sec-blog { border-top: 0; }


/* ================================================================
   BLOG SYSTEM (founder, 2026-08-04 night) — paper-white reading
   ground, a reading column that owns the screen, halo figures in
   glass, embed blocks for interactive graphics, seam buttons.
   ================================================================ */

/* the aurora stands down on blog surfaces: near-white paper, whisper
   of grain, the colour saved for the figures */
body.page-paper::before {
  background:
    radial-gradient(60% 40% at 90% 0%, rgba(160, 196, 226, .16), transparent 70%),
    linear-gradient(180deg, #ffffff 0%, #fbfcfe 60%, #f6f9fc 100%);
}
body.page-paper::after { opacity: .14; }

/* the reading column: ~60% of a 1440 screen, prose at a comfortable
   measure inside it; media may stand wider than the words */
.post-body { max-width: 58rem; margin-inline: auto; font-size: 1.05rem; line-height: 1.78; }
.post-body > p, .post-body > ul, .post-body > blockquote, .post-body > h2, .post-body > h3 {
  max-width: 46em;
}
@media (min-width: 1240px) {
  .post-body .post-fig, .post-body .post-embed, .post-body pre.code {
    margin-inline: -5rem;
  }
}

/* figures: the photograph on a colour halo, behind glass */
.post-fig { position: relative; margin: 2.2rem 0; }
.post-fig__halo {
  position: absolute; inset: -7% -5%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(52% 58% at 18% 22%, rgba(127, 180, 216, .55), transparent 70%),
    radial-gradient(48% 54% at 84% 30%, rgba(232, 168, 106, .5), transparent 72%),
    radial-gradient(50% 60% at 60% 90%, rgba(186, 150, 214, .42), transparent 72%);
  filter: blur(26px) saturate(1.2);
  border-radius: 40px;
}
.post-fig img {
  position: relative; z-index: 1; display: block; width: 100%; height: auto;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .75);
  box-shadow:
    0 0 0 1px rgba(34, 84, 121, .1),
    inset 0 1px 0 rgba(255, 255, 255, .8),
    0 24px 48px -20px rgba(16, 36, 58, .35);
}
.post-fig figcaption {
  position: relative; z-index: 1;
  margin-top: .7rem; font-size: .82rem; color: var(--muted); text-align: center;
}

/* embeds: interactive graphics stand on the same halo-and-glass stage */
.post-embed { position: relative; margin: 2.2rem 0; }
.post-embed > :first-child { position: relative; z-index: 1; }

/* code: a dark glass pane */
.post-body pre.code {
  position: relative; margin: 1.8rem 0; padding: 1.1rem 1.3rem;
  border-radius: 16px; overflow-x: auto;
  background: linear-gradient(165deg, rgba(28, 55, 79, .96), rgba(14, 32, 50, .97));
  color: #d7e4ee; font-size: .88rem; line-height: 1.6;
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 22px 44px -22px rgba(10, 26, 40, .5);
}

/* notes: paper with the copper edge */
.post-body blockquote {
  margin: 1.6rem 0; padding: 1rem 1.2rem;
  background: #fff; border-left: 3px solid var(--copper, #d08542);
  border-radius: 0 14px 14px 0;
  box-shadow: 0 2px 8px rgba(22, 33, 43, .05), 0 16px 32px -20px rgba(34, 84, 121, .25);
}
.post-body blockquote p { margin: 0; }

/* buttons: the demo grammar, travelling shine included (renderer injects
   the seam span into every [[text]](url) control) */
.post-btn {
  position: relative; display: inline-flex; align-items: center; gap: .5em;
  margin: .3rem 0 1rem; padding: .72em 1.35em;
  border-radius: var(--r-ctl, 12px); --r-ctl: 12px;
  background: linear-gradient(175deg, #2e6390, #225479 58%, #1b425f);
  color: #fff; font-weight: 620; font-size: .95rem; letter-spacing: -.008em;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .22),
    0 3px 8px rgba(22, 33, 43, .14),
    0 14px 28px -12px rgba(34, 84, 121, .55);
  transition: transform .16s ease, box-shadow .16s ease;
}
.post-btn:hover {
  transform: translateY(-2px); color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .22),
    0 5px 12px rgba(22, 33, 43, .16),
    0 20px 36px -14px rgba(34, 84, 121, .6);
}

/* the list page inherits the paper ground; the shelf cards get the
   glass edge on their covers */
body.page-paper .bcard__cover img {
  border: 1px solid rgba(255, 255, 255, .75);
  box-shadow: 0 0 0 1px rgba(34, 84, 121, .1), 0 18px 36px -18px rgba(16, 36, 58, .3);
  border-radius: 14px;
}

@media (max-width: 860px) {
  .post-body { font-size: 1rem; }
  .post-fig__halo { inset: -5% -3%; filter: blur(18px) saturate(1.2); }
}


/* blog patches: captions are prose, not code; the hero cover joins the
   glass family */
.post-fig figcaption {
  font-family: inherit; letter-spacing: 0; text-transform: none;
}
.post-cover img {
  border: 1px solid rgba(255, 255, 255, .75); border-radius: 18px;
  box-shadow: 0 0 0 1px rgba(34, 84, 121, .1), 0 24px 48px -20px rgba(16, 36, 58, .35);
}


/* ==== figures v2 (founder): the frontpage stage grammar per photo — the
   generated ribbon behind, the photo in a frosted glass frame, drifting
   on the parallax engine. Replaces the halo look wholesale. ==== */
.post-fig {
  position: relative; margin: 2.4rem 0; border-radius: 26px; overflow: clip;
  padding: clamp(1.1rem, 2.4vw, 1.9rem);
  box-shadow: 0 3px 10px rgba(22, 33, 43, .07), 0 32px 64px -28px rgba(34, 84, 121, .42);
}
.post-fig__halo { display: none; }
.post-fig__art {
  position: absolute; inset: -14% 0; z-index: 0; pointer-events: none;
  background-position: center; background-size: cover;
  transform: translateY(var(--plx, 0px)); will-change: transform;
}
.post-fig__glass {
  position: relative; z-index: 1; display: block; padding: .5rem;
  border-radius: 17px;
  background: rgba(255, 255, 255, .22);
  border: 1px solid rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
          backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 20px 44px -20px rgba(22, 33, 43, .4);
}
.post-fig__glass img {
  display: block; width: 100%; height: auto; border-radius: 12px;
  border: 0; box-shadow: none;
}
.post-fig figcaption {
  position: relative; z-index: 1; width: fit-content; margin: .7rem auto 0;
  padding: .38rem .85rem; border-radius: 10px;
  background: rgba(255, 255, 255, .84);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-size: .8rem; color: var(--ink); text-align: center;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .post-fig__glass { background: rgba(255, 255, 255, .75); }
  .post-fig figcaption { background: rgba(255, 255, 255, .95); }
}
@media (max-width: 860px) {
  .post-fig { border-radius: 18px; padding: .7rem; }
  .post-fig__glass { padding: .4rem; border-radius: 13px; }
}

/* the post button label must never lose to the prose link colour */
.post-body a.post-btn { color: #fff; }
.post-body a.post-btn:hover { color: #fff; }


/* ==== blog v3 tuning (founder): the words own ~60% of the screen; the
   figures pull inward with a fatter glass frame and less art border; no
   captions under images; the paper carries texture, never pure white ==== */
.post-body { max-width: 60rem; font-size: 1.06rem; }
.post-body > p, .post-body > ul, .post-body > blockquote,
.post-body > h2, .post-body > h3 { max-width: none; }

.post-fig {
  max-width: 46rem; margin-inline: auto;
  padding: clamp(.85rem, 1.8vw, 1.3rem);
}
@media (min-width: 1240px) {
  .post-body .post-fig { margin-inline: auto; }
}
.post-fig__glass { padding: .95rem; border-radius: 19px; }
.post-fig figcaption { display: none; }

/* texture: the drafting splotches walk down the article; grain lifts */
body.page-paper::after { opacity: .24; }
.post-main { position: relative; overflow: clip; }
.post-patch--a { right: -14vw; top: 12%; opacity: .8; }
.post-patch--b { left: -16vw; top: 52%; opacity: .7; }
@media (max-width: 860px) {
  .post-patch--a { right: -30vw; }
  .post-patch--b { left: -32vw; }
}


/* blog v3.1: the figure stage matches the text container edge-to-edge;
   the art border grows so the ribbon breathes around the bigger photo */
.post-fig { max-width: 60rem; padding: clamp(1.7rem, 3.6vw, 2.7rem); }


/* post-btn, settled: the old blog-era hover (pale wash background under
   white text = invisible label) and its underline bar are overridden for
   good. The button is steel in every state. */
.post-body a.post-btn,
.post-body a.post-btn:hover,
a.post-btn, a.post-btn:hover {
  color: #fff;
  background: linear-gradient(175deg, #2e6390, #225479 58%, #1b425f);
  border: 0; border-bottom: 0;
}
a.post-btn:hover { transform: translateY(-2px); }


/* ================================================================
   ABOUT 2026-08-05 (.abf- / .nx-zz prefix) — hero + the ported
   zig-zag. The zig-zag is the reference component's skeleton and
   values copied 1:1 (solutions-desktop-zig-zag_wrap family), then
   re-skinned: steel→sky→copper rim instead of theirs, registration
   dots for the paper, sans tag pills (house mono ban), Naxis inks.
   Widget mechanics: sticky 33rem square at top:22% + 120px offset,
   three UNIFORM square images absolutely stacked, opacity-swapped
   by the scroll engine at pages.js tail.
   ================================================================ */

/* ---------------- hero row one: mark | prism | words ----------------
   The grid stretches so the prism owns the full row height; each copy
   cell centres its own content against it. The mark cell is a hair
   under half so the wordmark reads big without crowding the rule. */
.abh-split {
  display: grid; align-items: stretch;
  grid-template-columns: minmax(0, 43%) 5px minmax(0, 1fr);
  gap: clamp(1.5rem, 3.6vw, 3.4rem);
}
.abh-split__mark, .abh-split__say {
  display: grid; align-content: center; min-width: 0;
}
.abh-split__say { padding-block: clamp(.6rem, 2.2vw, 1.9rem); }
.abh-split .page-hero__crumb { margin-bottom: 1.15rem; }
.abh-split .about-wordmark img { width: 100%; max-width: 27rem; }
.abh-split .lead { margin-top: 0; max-width: 34rem; }
.abh-split .hero__cta { margin-top: 1.9rem; }

/* the prism: the aurora's own inks stood on end and run through the
   spectrum, fading out at both caps so it reads as light between the
   halves rather than a table border. No glow — the line is the line. */
.abh-prism {
  --prism:
    rgba(42, 111, 168, 0) 0%, #2a6fa8 8%, #4fb1e6 26%, #34b3a6 44%,
    #7f7fd8 62%, #d1789b 78%, #e08a35 92%,
    rgba(224, 138, 53, 0) 100%;
  align-self: stretch; width: 5px; border-radius: 99px;
  background: linear-gradient(180deg, var(--prism));
}

/* the mission half's own title, well under the wordmark's weight */
.abh-mission {
  font-size: clamp(1.5rem, 2.3vw, 2rem);
  line-height: 1.16; letter-spacing: -.022em; font-weight: 620;
  margin-bottom: 1.05rem;
}

/* ---------------- hero row two: the photograph, in glass ----------
   Still now — the drift is gone. A mat of the site's own glass (the
   header's recipe) carries the photo, so the aurora shows through the
   rim and the picture sits IN something rather than on nothing. */
.abf-heroart {
  --mat: clamp(7px, .85vw, 13px);
  --matr: clamp(22px, 2.4vw, 30px);
  position: relative; margin: clamp(2rem, 4.5vw, 3.2rem) 0 0;
  padding: var(--mat); border-radius: var(--matr);
  border: 1px solid var(--glass-line);
  background:
    linear-gradient(112deg, rgba(255, 255, 255, .34) 2%, rgba(255, 255, 255, 0) 32%),
    linear-gradient(180deg, var(--glass-strong), rgba(243, 247, 251, .42));
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
          backdrop-filter: blur(16px) saturate(1.4);
  box-shadow:
    inset 0 1px 0 var(--glass-edge),
    inset 0 -1px 0 rgba(34, 84, 121, .07),
    inset 1px 0 0 var(--glass-line),
    inset -1px 0 0 rgba(255, 255, 255, .30),
    0 0 0 1px rgba(34, 84, 121, .09),
    0 2px 6px rgba(22, 33, 43, .05),
    0 34px 68px -30px rgba(34, 84, 121, .45);
}
.glass-refract .abf-heroart {
  -webkit-backdrop-filter: blur(3px) url(#nx-lens) saturate(1.6);
          backdrop-filter: blur(3px) url(#nx-lens) saturate(1.6);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .abf-heroart { background: rgba(255, 255, 255, .72); }
}
.abf-heroart img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 2.35; object-fit: cover;
  border-radius: calc(var(--matr) - var(--mat));
}

/* ---------------- hero, one column ---------------- */
@media (max-width: 860px) {
  /* the phone header is only the small wordmark, and this page opens with
     the SAME wordmark at full size a few pixels below it. Drop the small
     one here (the bottom glass pill still carries Home) and let the hero
     own the top of the page. */
  .pg-about .site-header { display: none; }
  /* the header carried ~46px of its own air; give a little of it back so
     the crumb doesn't sit on the viewport edge */
  .pg-about .page-hero { padding-top: clamp(2.9rem, 8vw, 4rem); }

  .abh-split { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
  .abh-split__say { padding-block: 0; }
  .abh-split .about-wordmark img { max-width: 20rem; }
  .abh-prism {
    width: 100%; max-width: 15rem; height: 5px; justify-self: start;
    background: linear-gradient(90deg, var(--prism));
  }
}
@media (max-width: 700px) {
  .abf-heroart img { aspect-ratio: 16 / 10; }
}

/* ================= the claim band =================
   A low WHITE band between the hero and the solution walk — the aurora
   stands down here — filled edge to edge with the registration pattern
   (.reg-grid does the drawing). Left: what the company actually does.
   Right: what a deployment holds itself to, in numbers. */
/* the element+two-class specificity is deliberate: it has to beat the
   site-wide section.sec:nth-of-type() veil that would otherwise paint
   the aurora straight back over this band. Closed top and bottom by a
   drafted DOUBLE rule — the hard edge, then a hairline 5px inside it. */
section.sec.abm {
  background: #fff;
  border-block: 1px solid var(--line-strong);
  box-shadow: inset 0 6px 0 -5px rgba(34, 84, 121, .22),
              inset 0 -6px 0 -5px rgba(34, 84, 121, .22);
  padding-block: clamp(2.9rem, 5.4vw, 4.4rem);
}

/* the FULL registration pattern: edge to edge, under everything, text
   included. Same background stack as the frontpage hero's .hero__patch —
   fine 20px grid, coarse 120px grid, registration crosses, plotted
   steel/copper cells — with the radial splotch mask taken OFF so it runs
   the whole band. The house alphas are what keep type readable over it;
   .sec already supplies position:relative and overflow:clip. */
.abm::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='120'%20height='120'%3E%3Cpath%20d='M60%2054v12M54%2060h12'%20stroke='%23225479'%20stroke-opacity='.45'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='480'%20height='480'%3E%3Crect%20x='140'%20y='60'%20width='20'%20height='20'%20fill='%23225479'%20fill-opacity='.10'/%3E%3Crect%20x='380'%20y='200'%20width='20'%20height='20'%20fill='%23D08542'%20fill-opacity='.16'/%3E%3Crect%20x='60'%20y='340'%20width='20'%20height='20'%20fill='%23225479'%20fill-opacity='.10'/%3E%3Crect%20x='280.5'%20y='420.5'%20width='19'%20height='19'%20fill='none'%20stroke='%23225479'%20stroke-opacity='.22'/%3E%3C/svg%3E"),
    linear-gradient(rgba(34, 84, 121, .10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 84, 121, .10) 1px, transparent 1px),
    linear-gradient(rgba(34, 84, 121, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 84, 121, .055) 1px, transparent 1px);
  background-size:
    120px 120px, 480px 480px, 120px 120px, 120px 120px, 20px 20px, 20px 20px;
  background-position:
    0 0, 0 0, 60.5px 60.5px, 60.5px 60.5px, .5px .5px, .5px .5px;
}
/* the diagonals: the hero's own oblique slices, three across the band */
.abm .hero__slice { top: -14%; bottom: -14%; }
.abm .hero__slice--a { left: 7%; width: 38px; }
.abm .hero__slice--b { right: 5%; width: 52px; }
.abm .hero__slice--c {
  left: 53%; width: 30px; background: var(--brand); opacity: .045;
}
.abm__grid {
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.9rem, 4.2vw, 4.2rem);
}
.abm__claim h2 {
  font-size: clamp(1.5rem, 2.5vw, 2.05rem);
  line-height: 1.19; letter-spacing: -.022em; font-weight: 620;
  max-width: 19em; text-wrap: balance;
}
.abm__claim p {
  margin-top: .95rem; max-width: 34em;
  font-size: 1rem; line-height: 1.6; color: var(--muted);
}
.abm__tag {
  display: inline-block; margin-bottom: 1.35rem;
  background: var(--bg-tint); border-radius: 1.5rem;
  padding: .38rem 1rem .45rem;
  font-size: .88rem; font-weight: 560; letter-spacing: .01em;
  color: rgba(22, 33, 43, .62);
}
/* the figures as a ruled ledger: the number in its own column, the line
   it belongs to set against it on the baseline */
.abm__mgrid { margin: 0; border-top: 1px solid var(--line-strong); }
.abm__m {
  display: grid; align-items: baseline;
  grid-template-columns: clamp(4.8rem, 8vw, 7.4rem) minmax(0, 1fr);
  gap: 0 clamp(.9rem, 1.6vw, 1.4rem);
  padding: .95rem 0 1.05rem;
  border-bottom: 1px solid var(--line-strong);
}
.abm__m dt {
  font-size: clamp(1.75rem, 2.9vw, 2.5rem); font-weight: 650;
  letter-spacing: -.03em; line-height: 1; color: var(--brand);
  font-variant-numeric: tabular-nums;
}
/* the registration grid's own alternation: steel cell, copper cell */
.abm__m:nth-child(2n) dt { color: var(--copper); }
.abm__m dd {
  margin: 0; font-size: .95rem; line-height: 1.5; color: var(--muted);
}
@media (max-width: 860px) {
  .abm__grid { grid-template-columns: minmax(0, 1fr); gap: 2.3rem; }
}

/* --terms: the ledger carrying TERMS OF THE OFFER rather than research
   figures. /about runs 85% / 250% / 2-5x and /context 0 / 15 / 1 inside a
   narrower glass card; a bare "1" or "0" in a column cut for "250%", at
   container-wide, sits marooned a hundred px from the line it belongs to.
   Narrow the figure column, and let the row it labels start where the eye
   expects it. */
.abm--terms .abm__m {
  grid-template-columns: clamp(3.2rem, 4.6vw, 4.4rem) minmax(0, 1fr);
  gap: 0 clamp(.8rem, 1.3vw, 1.15rem);
}

/* ---------------- the section field ---------------- */
/* white ground — element+two-class again, to beat the site-wide
   section.sec:nth-of-type() veil that otherwise hands this section back
   to the aurora. The only colour in here is the glow behind the widget. */
section.sec.abf {
  background: #fff;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(5rem, 9vw, 8rem);
}

/* ---------------- the ported component ----------------
   reference @1440: wrap 1248 · left 480 w/ 400px gaps · right
   sticky 528² @ top 22% (+120px) · border 2px grad @1.6rem ·
   dotted paper @1.5rem · imgs absolute, opacity-faded */
.nx-zz_container {
  max-width: 78rem; margin-inline: auto; padding-inline: var(--gutter);
}
.nx-zz_wrap {
  --zz-lead: 96px;   /* the widget's own drop from the top of the wrap */
  --zz-box:  39rem;  /* the widget's height — the rail aligns off this */
  display: flex; justify-content: space-between; align-items: flex-start;
}
.nx-zz_left {
  position: relative;                          /* the ribbon hangs off this */
  display: flex; flex-flow: column; gap: 0;    /* uneven, per item below */
  width: 42%; max-width: 32rem;
}
.nx-zz_tag {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-bottom: 2rem; line-height: 1.4;
}
.nx-zz_tag-text {
  background: var(--bg-tint); border-radius: 1.5rem;
  padding: .4rem 1rem .47rem;
  font-size: .95rem; font-weight: 500; letter-spacing: .01em;
  color: rgba(22, 33, 43, .6);
}
.nx-zz_heading {
  font-size: clamp(2.2rem, 3.4vw, 3rem);
  line-height: 1.18; letter-spacing: -.024em; font-weight: 620;
  text-wrap: balance;
}
/* the line is 5-10 words now, so it carries at lead weight */
.nx-zz_subtext {
  padding-top: 1.7rem; font-size: 1.16rem; line-height: 1.5;
  color: var(--muted); overflow: hidden;
}
.nx-zz_subtext p { margin: 0; }
.nx-zz_subtext .sec__more { margin-top: 1.35rem; font-size: .95rem; }
.nx-zz_subtext .sec__more a { color: var(--brand); }

/* ---- the rail's artwork: ONE continuous painted ribbon ----
   The three 3D objects are gone. A single vertical glass-paint ribbon (the
   index hero-flow language, keyed to alpha so the registration pattern
   reads straight through it) runs down the MIDDLE of the column for the
   whole rail, and the chapters alternate around it — left, right, right —
   floating over its soft edges. Ends fade so it starts and stops nowhere. */
.nx-zz_paint {
  position: absolute; z-index: 0; pointer-events: none;
  left: 50%; translate: -50% 0; top: -6rem; bottom: -6rem;
  width: clamp(7.5rem, 12vw, 10.5rem);
  /* feather all four sides: object-fit:cover crops the source, and a hard
     vertical cut down the side reads as a rectangle instead of a ribbon */
  -webkit-mask-image:
    linear-gradient(180deg, transparent 0, #000 7%, #000 92%, transparent 100%),
    linear-gradient(90deg,  transparent 0, #000 9%, #000 91%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(180deg, transparent 0, #000 7%, #000 92%, transparent 100%),
    linear-gradient(90deg,  transparent 0, #000 9%, #000 91%, transparent 100%);
          mask-composite: intersect;
}
.nx-zz_paint img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* the chapters ride over it, alternating side and sitting at uneven air */
.nx-zz_item { position: relative; z-index: 1; }
.nx-zz_item::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: -1.9rem -2.6rem -2.3rem;
  filter: blur(12px);
  background: radial-gradient(118% 104% at 50% 50%,
    rgba(255, 255, 255, .48) 0%, rgba(255, 255, 255, .44) 44%,
    rgba(255, 255, 255, .28) 72%, rgba(255, 255, 255, 0) 100%);
}
.nx-zz_item--a { width: min(19.5rem, 68%); margin-right: auto;
                 margin-top: calc(var(--zz-lead) + var(--zz-box) / 2); }
.nx-zz_item--b { width: min(19rem, 66%);   margin-left: auto; margin-top: 18rem; }
.nx-zz_item--c { width: min(20.5rem, 72%); margin-right: auto; margin-top: 26rem; }

/* ---- the widget: bigger, and framed in the registration pattern ---- */
.nx-zz_right {
  display: flex; justify-content: center; align-items: flex-start;
  width: 51%; max-width: var(--zz-box); height: var(--zz-box);
  position: sticky; top: 17%; margin-top: var(--zz-lead); overflow: visible;
}
/* the colour glow it floats on — the only colour on this white ground */
.nx-zz_right::before {
  content: ""; position: absolute; inset: -24%; z-index: 0;
  border-radius: 50%; pointer-events: none; filter: blur(56px);
  background: radial-gradient(closest-side,
    rgba(96, 172, 222, .95) 0%, rgba(96, 172, 222, .6) 46%, transparent 78%);
}
/* the frame IS the naxis pattern: a wide mat carrying the house stack */
.nx-zz_border {
  position: relative; z-index: 1;
  width: 100%; height: 100%;
  padding: clamp(19px, 2.4vw, 32px); border-radius: 2rem;
  border: 1px solid rgba(34, 84, 121, .2);
  background-color: #fff;
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='120'%20height='120'%3E%3Cpath%20d='M60%2054v12M54%2060h12'%20stroke='%23225479'%20stroke-opacity='.45'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='480'%20height='480'%3E%3Crect%20x='140'%20y='60'%20width='20'%20height='20'%20fill='%23225479'%20fill-opacity='.10'/%3E%3Crect%20x='380'%20y='200'%20width='20'%20height='20'%20fill='%23D08542'%20fill-opacity='.16'/%3E%3Crect%20x='60'%20y='340'%20width='20'%20height='20'%20fill='%23225479'%20fill-opacity='.10'/%3E%3Crect%20x='280.5'%20y='420.5'%20width='19'%20height='19'%20fill='none'%20stroke='%23225479'%20stroke-opacity='.22'/%3E%3C/svg%3E"),
    linear-gradient(rgba(34, 84, 121, .10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 84, 121, .10) 1px, transparent 1px),
    linear-gradient(rgba(34, 84, 121, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 84, 121, .055) 1px, transparent 1px);
  background-size:
    120px 120px, 480px 480px, 120px 120px, 120px 120px, 20px 20px, 20px 20px;
  background-position:
    0 0, 0 0, 60.5px 60.5px, 60.5px 60.5px, .5px .5px, .5px .5px;
  box-shadow: 0 30px 64px -34px rgba(34, 84, 121, .42);
}
/* NO fill: the artifacts are transparent, so the pattern mat runs
   unbroken behind them — that is the whole point of cutting them out */
.nx-zz_asset {
  position: relative; z-index: 1; overflow: hidden;
  display: flex; justify-content: center; align-items: center;
  width: 100%; height: 100%; border-radius: 1.35rem;
  background: none;
}
.nx-zz_imgbox {
  position: relative; display: flex; justify-content: center;
  align-items: center; width: 100%; height: 100%;
}
.nx-zz_img {
  position: absolute; inset: 0; z-index: 3;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .5s ease;
}
.nx-zz_img.is-on { opacity: 1; }

/* inline images serve the one-column story only */
.nx-zz_inline { display: none; }

/* the walk's own registration patches */
.sec__patch--abfa { right: -150px; top: -100px; }
.sec__patch--abfb { left: -170px; bottom: 8%; }

/* ---------------- one column (≤960px) ----------------
   The sticky widget stands down; every item carries its own image
   in the same gradient-rim frame. Nothing clips. */
@media (max-width: 960px) {
  .nx-zz_wrap { display: block; }
  .nx-zz_left { width: 100%; max-width: 100%; gap: 5.5rem; }
  .nx-zz_right { display: none; }
  .nx-zz_heading { font-size: clamp(1.9rem, 6.4vw, 2.5rem); }
  .nx-zz_subtext { padding-top: 1.4rem; font-size: 1.1rem; max-width: none; }
  .nx-zz_left { gap: 5.5rem; }
  .nx-zz_paint { display: none; }
  .nx-zz_item--a, .nx-zz_item--b, .nx-zz_item--c {
    display: block; width: 100%; margin: 0;
  }
  /* the phone's own copy of the widget wears the same pattern mat */
  .nx-zz_inline {
    display: block; margin: 1.9rem 0 0; padding: clamp(11px, 3.4vw, 16px);
    border-radius: 1.5rem; overflow: clip;
    border: 1px solid rgba(34, 84, 121, .16);
    background-color: #fff;
    background-image:
      url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='120'%20height='120'%3E%3Cpath%20d='M60%2054v12M54%2060h12'%20stroke='%23225479'%20stroke-opacity='.45'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='480'%20height='480'%3E%3Crect%20x='140'%20y='60'%20width='20'%20height='20'%20fill='%23225479'%20fill-opacity='.10'/%3E%3Crect%20x='380'%20y='200'%20width='20'%20height='20'%20fill='%23D08542'%20fill-opacity='.16'/%3E%3Crect%20x='60'%20y='340'%20width='20'%20height='20'%20fill='%23225479'%20fill-opacity='.10'/%3E%3Crect%20x='280.5'%20y='420.5'%20width='19'%20height='19'%20fill='none'%20stroke='%23225479'%20stroke-opacity='.22'/%3E%3C/svg%3E"),
      linear-gradient(rgba(34, 84, 121, .10) 1px, transparent 1px),
      linear-gradient(90deg, rgba(34, 84, 121, .10) 1px, transparent 1px),
      linear-gradient(rgba(34, 84, 121, .055) 1px, transparent 1px),
      linear-gradient(90deg, rgba(34, 84, 121, .055) 1px, transparent 1px);
    background-size:
      120px 120px, 480px 480px, 120px 120px, 120px 120px, 20px 20px, 20px 20px;
    background-position:
      0 0, 0 0, 60.5px 60.5px, 60.5px 60.5px, .5px .5px, .5px .5px;
    box-shadow: 0 20px 44px -26px rgba(34, 84, 121, .4);
  }
  .nx-zz_inline img {
    display: block; width: 100%; height: auto;
    border-radius: 1rem; background: none;
  }
}

/* ================================================================
   ABOUT — the CTA band (2026-08-07). Modelled on glean.com's
   .section_cta: full-bleed dark ground, one iridescent ribbon
   bleeding off both edges, a centred line, a white pill. Their dot
   field at the two ends is replaced by OUR registration pattern in
   white ink, masked to fade before it reaches the words.
   ================================================================ */
/* NOTE: a section that needs .in-view (for in-section choreography) must
   be in the reveal-host list at the top of pages.js. .abcta is in it.
   (The old hazard - [data-rise] children pinned invisible - is gone: the
   scroll-rise rule was retired 2026-08-23.) */
/* The ground is the EUROPEAN blue — EU flag reflex #003399, the same ink
   the GDPR and EU AI Act marks are drawn in. The artwork carries this blue
   itself and covers the whole band; the gradient is what paints before it
   decodes and what fills any sliver an extreme aspect ratio leaves, so it
   is tuned to the picture's own ground rather than to a separate design. */
section.sec.abcta, .abcta {
  position: relative; overflow: clip; isolation: isolate;
  background:
    radial-gradient(70% 60% at 62% 46%, #011A99, transparent 70%),
    linear-gradient(105deg, #00045F 0%, #010872 34%, #011288 62%, #011A99 100%);
  border-block: 0;
}
/* The art IS the band — glean's .cta_bg_graphic is height:100% and fully
   opaque, and that is the whole trick: the empty upper area is blue PAINTED
   INTO THE PICTURE, so there is no top edge to hide and the ribbon rises
   exactly where the composition wants it (low along the floor, a spectral
   plume climbing the right edge, feathering out into the blue on its own).
   NO MASK. A CSS fade over a short strip is a straight horizontal cut-off
   line at a fixed height, which is precisely what it looks like. Anchored
   to the floor so wide viewports crop the empty top, never the wave. */
.abcta__artwrap { position: absolute; z-index: 0; inset: 0; }
.abcta__art {
  display: block; width: 100%; height: 100%;
  object-fit: cover;   /* centred: verified clear of the words 1280→2560px */
}
/* the naxis pattern closing both ends — WHITE ink now that the ground is
   blue, the same job Glean's dot field does at the edges of their band */
.abcta__pat {
  position: absolute; z-index: 1; top: 0; bottom: 0; pointer-events: none;
  width: min(36%, 480px);
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='120'%20height='120'%3E%3Cpath%20d='M60%2054v12M54%2060h12'%20stroke='%23ffffff'%20stroke-opacity='.42'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='480'%20height='480'%3E%3Crect%20x='140'%20y='60'%20width='20'%20height='20'%20fill='%23ffffff'%20fill-opacity='.14'/%3E%3Crect%20x='380'%20y='200'%20width='20'%20height='20'%20fill='%23D08542'%20fill-opacity='.38'/%3E%3Crect%20x='60'%20y='340'%20width='20'%20height='20'%20fill='%23ffffff'%20fill-opacity='.14'/%3E%3Crect%20x='280.5'%20y='420.5'%20width='19'%20height='19'%20fill='none'%20stroke='%23ffffff'%20stroke-opacity='.30'/%3E%3C/svg%3E"),
    linear-gradient(rgba(255, 255, 255, .13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .13) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
  background-size:
    120px 120px, 480px 480px, 120px 120px, 120px 120px, 20px 20px, 20px 20px;
  background-position:
    0 0, 0 0, 60.5px 60.5px, 60.5px 60.5px, .5px .5px, .5px .5px;
}
/* two masks intersected: fade inward toward the words (as before) AND
   downward before the grid reaches the ribbon */
.abcta__pat--l {
  left: 0;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 24%, transparent 100%),
                      linear-gradient(180deg, #000 0 42%, transparent 72%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(90deg, #000 0, #000 24%, transparent 100%),
                      linear-gradient(180deg, #000 0 42%, transparent 72%);
          mask-composite: intersect;
}
.abcta__pat--r {
  right: 0;
  -webkit-mask-image: linear-gradient(270deg, #000 0, #000 24%, transparent 100%),
                      linear-gradient(180deg, #000 0 42%, transparent 72%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(270deg, #000 0, #000 24%, transparent 100%),
                      linear-gradient(180deg, #000 0 42%, transparent 72%);
          mask-composite: intersect;
}
.abcta > .container { position: relative; z-index: 2; }
/* empty blue all around the words. Measured off the reference: their band
   is 490px at 1440 with the pair sitting 32.6%..67.4% — a third of empty
   ground above it and a third below. Ours is near-symmetric, the bottom
   a little longer only because our ribbon crests higher on the left. */
.abcta__wrap {
  display: grid; justify-items: center; gap: clamp(1.9rem, 3.2vw, 2.8rem);
  padding-block: clamp(5rem, 12vw, 11rem) clamp(6.5rem, 15vw, 13.5rem);
  text-align: center;
}
.abcta__h {
  max-width: 18em; text-wrap: balance;
  font-size: clamp(2.25rem, 5vw, 4rem); line-height: 1.07;
  letter-spacing: -.032em; font-weight: 640; color: #fff;
}
/* on the blue ground the lit-steel face would read as a hole — the button
   is the white pill, the one bright solid thing in the band. The nx-seam
   straddles its edge, so the travelling light still reads against the blue. */
.abcta .btn--demo {
  background: #fff; color: #002B84;
  box-shadow: 0 18px 44px -18px rgba(0, 10, 46, .7), inset 0 -1px 0 rgba(0, 43, 132, .12);
}
.abcta .btn--demo:hover { background: #E7EEFC; color: #001F63; }
@media (max-width: 700px) {
  .abcta__wrap { padding-block: clamp(4.5rem, 14vw, 6.5rem) clamp(7.5rem, 34vw, 11rem); }
}

/* ============================================================
   /permissions hero (.pmxh) — the product-panel opening.
   Reference skeleton (glean.com/platform/browser-extension,
   measured 2026-08-17): copy | fixed art column on flex
   space-between; the section owns a warm-cream ground and ONE
   capsule light-field hung off the top-right at the measured
   anchor (left 41.7vw, top -46.9vw, 100vw wide) — the section's
   clip crops it. The field is repainted in the rig from a
   measured axis-LUT + cross-falloff so the lighting reads like
   the reference's; the art is a drawn no-content window behind
   the real File-access panel on a fading royal rim
   (bin/art/permissions-hero). Left column = the house product
   grammar (crumb + display + lead), same as /context and
   /surfaces. Rides .page-hero for header offset, clip and the
   bottom hairline.
   ============================================================ */
.pmxh { background: #f6f3eb; padding-bottom: clamp(2.8rem, 5vw, 4.4rem); }
/* this hero runs a step wider than the house container — the copy column
   plus the 44rem art panel need the room the reference gives them */
.pmxh .container { max-width: 1320px; }
.pmxh__glow {
  /* the field spans the WHOLE viewport now (the canvas grew leftward with a
     warm continuation over the copy side) — anchored at 0 so the light never
     cuts off mid-screen; the capsule sits at the same page position */
  position: absolute; z-index: 0; pointer-events: none; max-width: none;
  left: 0; top: -46.9vw; width: 141.7vw; height: 105.6vw;
}
.pmxh__grid {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(2rem, 5vw, 4.5rem);
}
.pmxh__grid .page-hero__copy { flex: 0 1 40rem; }

/* the /context crumb recipe verbatim: bare mark, sentence case, copper middot */
.pmxh .page-hero__crumb {
  display: flex; align-items: center; gap: .55rem;
  font-family: var(--font-sans); font-size: 1.05rem; font-weight: 500;
  letter-spacing: -.006em; text-transform: none; color: var(--muted);
  margin-bottom: 1.1rem;
}
.pmxh .page-hero__crumb img { width: 24px; height: 24px; object-fit: contain; }
.pmxh .page-hero__crumb i { font-style: normal; color: var(--copper); }
/* the page name carries the product-tree hue — the same brand->copper
   gradient ink the sibling product eyebrows wear */
.pmxh .page-hero__crumb b {
  font-weight: 520; letter-spacing: .012em;
  background-image: linear-gradient(90deg, var(--brand), #d08542);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* the picture is a picture — the demo door is the CTA, not the art
   (founder 08-17) */
.pmxh__art {
  position: relative; flex: 0 0 min(52%, 44rem);
  display: block; border-radius: 20px; overflow: hidden;
}
.pmxh__img { display: block; width: 100%; height: auto; }
.pmxh__glow-m { display: none; }

@media (max-width: 1180px) {
  .pmxh__grid .page-hero__copy { flex-basis: 24rem; }
}
@media (max-width: 960px) {
  /* the reference's mobile answer: single column, the art re-composed
     tighter with its own glow arc laid behind it */
  .pmxh__glow { display: none; }
  .pmxh__grid { flex-direction: column; align-items: stretch; gap: 2.4rem; }
  .pmxh__grid .page-hero__copy { flex: 0 1 auto; }
  .pmxh__art { flex: 0 0 auto; width: 100%; max-width: 32rem; margin-inline: auto; border-radius: 0; overflow: visible; }
  .pmxh__glow-m {
    display: block; position: absolute; z-index: 0; pointer-events: none;
    left: 50%; top: -9%; width: 106%; max-width: none; height: auto;
    transform: translateX(-50%);
  }
  .pmxh__art picture { position: relative; z-index: 1; display: block; }
}

/* ======== contact round (2026-08-22): the /about hero layout ========
   Hero: the about grammar verbatim (.abh-split + .abh-prism +
   .abf-heroart over the hero patches) - no hero CSS of its own.
   Below: the guided enquiry (.ctcf) in the page's OWN glass mat (the
   hero banner's abf recipe, so the two objects speak one material):
   paper card inside, the step RAIL on the left (dots on a spine, done =
   tick + the answers as the sub-line, current = lit gradient dot),
   panes on the right folding one at a time, topic chips as lifted
   selections. Without JS (or .ctcf-static after a server error) every
   pane stands open over a plain POST. */

#write { scroll-margin-top: 90px; }

/* ---- the write split: the reference's demo-page construction,
   taken literally this time: a SPLIT SCREEN. The navy slab bleeds to
   the viewport's left edge and owns the section's full height, square
   except the one big swept corner at bottom-right; display heading at
   scale, tick facts under it, the testimonial card straight after,
   navy running long below - the form card floats on the white right
   half. Stacks slab-first under 980px. */
.sec-contact.sec { padding-block: 0; }
.ctcw {
  /* the reference's row IS the viewport: the split owns the full
     width (exact bleed - this box's containing block is the centered
     container), the slab is simply the left column, and the form
     card centers in the white right half with real air both sides. */
  display: grid; grid-template-columns: minmax(0, 47.9%) minmax(0, 1fr);
  gap: 0; align-items: stretch;
  width: 100vw; margin-left: calc(50% - 50vw);
}
/* the image BEHIND the form - the house layering (index: stage >
   glass > card): the flow-ribbon art at full strength in a rounded
   clipped panel, the frosted shell floating ON it. The wrap widened
   by the stage's frame so the card keeps its 581px. */
.ctcf-stage {
  position: relative; border-radius: 30px; overflow: clip;
  padding: clamp(1rem, 2vw, 1.8rem);
  /* the WARM ribbon (the surfaces belt art) - founder: not so much
     blue; this is the page's own copper/apricot register */
  background: url("../img/surfaces/belt-flow.webp") center / cover no-repeat, #f3e6d8;
  box-shadow:
    0 3px 10px rgba(22, 33, 43, .08),
    0 40px 80px -34px rgba(34, 84, 121, .5);
}
.ctcw .ctcf-wrap {
  /* width matters: the base wrap's auto margins make a grid item
     shrink-to-fit (max-content), so without an explicit width the
     max-width cap past ~41rem never engages */
  width: 100%; max-width: 45.6rem;
  padding-inline: clamp(1.2rem, 2.2vw, 2rem);
  padding-block: clamp(3rem, 5vw, 4.5rem) clamp(2.2rem, 4vw, 3.4rem);
}
.ctcq {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: 0 0 110px 0;
  padding: clamp(3.2rem, 5.5vw, 5rem)
           clamp(2rem, 3.5vw, 3.4rem)
           clamp(3.2rem, 6vw, 5.5rem)
           /* the reference's content column is a CENTERED ~1440 grid:
              96px in at 1440, then the indent grows with the viewport
              ((vw-1440)/2 + 96 = 50vw - 624px). Identical to the old
              clamp up to 1440; past it the copy rides the page centre
              instead of hugging the screen edge. */
           max(clamp(2.2rem, 6.7vw, 6rem), calc(50vw - 624px));
  background: linear-gradient(168deg, #1d3a5f 0%, #16283e 100%);
  box-shadow: 0 2px 8px rgba(22, 33, 43, .08),
              0 34px 68px -30px rgba(16, 36, 58, .55);
}
.ctcq::before {
  /* the reference's texture, decoded from their background SVG: ONE
     huge 45deg-rotated square whose gradient melts into the ground
     colour on the far side - what survives is two crisp diagonal
     seams and a deeper wash in the lower-left corner. Same move in
     the house navy, nothing painted on top of the content. */
  content: ""; position: absolute; z-index: -1;
  width: 135%; aspect-ratio: 1;
  left: -55%; top: 44%;
  transform: rotate(45deg);
  background: linear-gradient(45deg, #0b1929 0%, #101f33 42%, #16283e 100%);
}
/* h2 joins h1 here: /pricing's #why slab is the same block under a
   section heading rather than a page heading. */
.ctcq h1,
.ctcq h2 {
  font-size: clamp(2.5rem, 3.9vw, 3.7rem); line-height: 1.06;
  letter-spacing: -.028em; font-weight: 640; max-width: 11em;
  background-image: linear-gradient(92deg, #e8a84a, #d08542 70%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.ctcq__list { list-style: none; margin: 2rem 0 0; padding: 0; max-width: 34rem; }
.ctcq__list li {
  position: relative; padding: .4rem 0 .4rem 2.1rem;
  color: rgba(255, 255, 255, .88); font-size: 1.02rem; line-height: 1.5;
}
.ctcq__list li b { color: #fff; font-weight: 640; }
.ctcq__list li::before {
  content: ""; position: absolute; left: .1rem; top: .78rem;
  width: 13px; height: 8px;
  border-left: 2.4px solid #e8a84a; border-bottom: 2.4px solid #e8a84a;
  transform: rotate(-45deg); border-radius: 1px;
}
/* the reference's quote card, taken at its measured word: a wide flat
   strip (their 560x242), 24px radius, feather shadow - contrast on the
   navy does the lifting - and the portrait is a chest-up studio cutout
   BLED edge-to-edge into the card's right half, never an inset thumb.
   Text column: quote up top, the attribution pinned at the foot. */
.ctcq__quote {
  margin: 2.6rem 0 0; display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 47%);
  gap: 0; align-items: stretch; max-width: 35rem;
  background: #fff; border-radius: 24px; overflow: hidden;
  box-shadow: 0 4px 18px -6px rgba(6, 14, 24, .38);
}
.ctcq__quote-in {
  display: flex; flex-direction: column;
  padding: 1.9rem 1.5rem 1.7rem 1.9rem;
}
.ctcq__quote blockquote {
  margin: 0; font-size: .95rem; font-weight: 460; line-height: 1.55;
  color: rgba(22, 33, 43, .78); letter-spacing: -.006em;
}
.ctcq__quote figcaption {
  /* deliberately NOT the mono figcaption base style */
  margin-top: auto; padding-top: .9rem; font-family: var(--font-sans);
  text-transform: none; letter-spacing: -.006em;
}
.ctcq__quote figcaption b {
  display: block; font-size: .88rem; font-weight: 640; color: var(--ink);
}
.ctcq__quote figcaption span {
  display: block; font-size: .78rem; color: var(--muted); margin-top: .1rem;
}
/* the art half, the founder's spec verbatim: the person is a
   TRANSPARENT PNG and the shapes are a SEPARATE layer behind it -
   two colourful triangles entering from the left, drawn by the cell
   itself so they run to the card's own edges instead of dying at an
   image boundary */
.ctcq__quote-art { position: relative; overflow: hidden; min-height: 15.1rem; }
.ctcq__quote-art::before,
.ctcq__quote-art::after { content: ""; position: absolute; inset: 0; }
.ctcq__quote-art::before {
  background: #e8a84a;
  clip-path: polygon(100% 10%, 36% 44%, 100% 72%);
}
.ctcq__quote-art::after {
  background: #2b62c9;
  clip-path: polygon(100% 44%, 50% 76%, 100% 106%);
}
.ctcq__quote-art img {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  object-fit: contain; object-position: center bottom;
}
/* the narrower right column runs the rail across the top, exactly the
   phone treatment, so the fields keep their width */
.ctcw .ctcf-grid { grid-template-columns: minmax(0, 1fr); gap: 1.3rem; }
.ctcw .ctcf-rail { flex-direction: row; justify-content: space-between; padding: 0 .4rem; }
.ctcw .ctcf-rail::before { left: 34px; right: 34px; top: 16px; bottom: auto; width: auto; height: 2px; }
.ctcw .ctcf-rail__item { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: .45rem; padding: 0; }
.ctcw .ctcf-rail__txt { padding: 0; text-align: center; }
.ctcw .ctcf-rail__txt b { font-size: .78rem; }
.ctcw .ctcf-rail__sub { display: none; }
@media (max-width: 980px) {
  .ctcw { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ctcq {
    /* the column is already the full-bleed .ctcw - no margin games */
    margin-inline: 0;
    border-radius: 0 0 72px 0;
    padding-inline: clamp(1.2rem, 5vw, 2.2rem);
    padding-block: clamp(2.6rem, 7vw, 3.6rem);
  }
  .ctcw .ctcf-wrap { padding-block: clamp(2rem, 5vw, 3rem) 1.6rem; }
}
@media (max-width: 480px) {
  .ctcq__quote { grid-template-columns: minmax(0, 1fr); }
  .ctcq__quote-art { min-height: 230px; }
}

.ctcf-wrap { max-width: 56rem; margin-inline: auto; }
.ctcf-alt {
  margin-top: 1.05rem; text-align: center;
  font-size: .8rem; color: var(--muted);
}
.ctcf-alt a { color: #1f52b0; border-bottom: 1px solid rgba(31, 82, 176, .28); }
.ctcf-alt a:hover { border-bottom-color: #1f52b0; }

/* the glass mat: the hero banner's recipe, holding paper instead of a
   photograph - the aurora reads through the rim on both */
.ctcf-shell {
  --mat: clamp(8px, .9vw, 14px);
  --matr: clamp(24px, 2.6vw, 32px);
  position: relative; padding: var(--mat); border-radius: var(--matr);
  border: 1px solid var(--glass-line);
  background:
    linear-gradient(112deg, rgba(255, 255, 255, .34) 2%, rgba(255, 255, 255, 0) 32%),
    linear-gradient(180deg, var(--glass-strong), rgba(243, 247, 251, .42));
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
          backdrop-filter: blur(16px) saturate(1.4);
  box-shadow:
    inset 0 1px 0 var(--glass-edge),
    inset 0 -1px 0 rgba(34, 84, 121, .07),
    0 0 0 1px rgba(34, 84, 121, .09),
    0 2px 6px rgba(22, 33, 43, .05),
    0 34px 68px -30px rgba(34, 84, 121, .45);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ctcf-shell { background: rgba(255, 255, 255, .72); }
}
.ctcf-card {
  background: #fff; border-radius: calc(var(--matr) - var(--mat));
  padding: clamp(1.5rem, 3vw, 2.4rem);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .95), 0 1px 3px rgba(22, 33, 43, .05);
}

.ctcf-grid {
  display: grid; grid-template-columns: 14.5rem minmax(0, 1fr);
  gap: clamp(1.5rem, 3.2vw, 2.8rem); align-items: start;
}

/* ---- the rail: three dots on a spine ---- */
.ctcf-rail { position: relative; display: flex; flex-direction: column; }
.ctcf-rail::before {
  content: ""; position: absolute; left: 16px; top: 30px; bottom: 30px;
  width: 2px; border-radius: 2px; background: rgba(34, 84, 121, .13);
}
.ctcf-rail__item {
  position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr);
  gap: .8rem; align-items: start; text-align: left;
  padding: .9rem 0; border: 0; background: none; font: inherit; cursor: default;
}
.ctcf-rail__dot {
  position: relative; z-index: 1; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: .85rem; font-weight: 640; color: var(--muted);
  background: #fff; box-shadow: inset 0 0 0 1.5px rgba(34, 84, 121, .22);
  transition: background-color .25s, box-shadow .25s, color .25s;
}
.ctcf-rail__txt { min-width: 0; padding-top: .1rem; }
.ctcf-rail__txt b {
  display: block; font-size: .95rem; font-weight: 630;
  letter-spacing: -.012em; color: var(--ink); line-height: 1.25;
}
.ctcf-rail__sub {
  display: block; font-size: .75rem; color: var(--muted); line-height: 1.4;
  margin-top: .18rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.ctcf.is-live .ctcf-rail__item.is-current .ctcf-rail__dot {
  color: #fff; background: linear-gradient(150deg, #2b62c9, #225479);
  box-shadow: 0 0 0 4px rgba(43, 98, 201, .14),
              inset 0 1px 0 rgba(255, 255, 255, .30),
              0 4px 10px -4px rgba(16, 36, 58, .45);
}
.ctcf.is-live .ctcf-rail__item.is-done { cursor: pointer; }
.ctcf.is-live .ctcf-rail__item.is-done .ctcf-rail__dot {
  color: transparent; background: #e8f0fb;
  box-shadow: inset 0 0 0 1.5px #2b62c9;
}
.ctcf.is-live .ctcf-rail__item.is-done .ctcf-rail__dot::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 10px; height: 6px; margin: -4px 0 0 -5px;
  border-left: 2px solid #2b62c9; border-bottom: 2px solid #2b62c9;
  transform: rotate(-45deg); border-radius: .5px;
}
.ctcf.is-live .ctcf-rail__item.is-done .ctcf-rail__sub { color: #1f52b0; }
.ctcf.is-live .ctcf-rail__item.is-done:hover .ctcf-rail__txt b { color: #1f52b0; }
.ctcf.is-live .ctcf-rail__item.is-locked .ctcf-rail__txt { opacity: .45; }
.ctcf-rail__item:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 10px; }

/* ---- the panes ---- */
.ctcf-step { position: relative; border: 0; padding: 0; margin: 0; min-width: 0; }
.ctcf-step legend {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.ctcf-pane__head { padding: .1rem 0 1.05rem; }
.ctcf-pane__head b {
  display: block; font-size: 1.18rem; font-weight: 640;
  letter-spacing: -.016em; color: var(--ink);
}
.ctcf-pane__head span {
  display: block; margin-top: .25rem;
  font-size: .85rem; color: var(--muted);
}
/* pane switching: the stage is ONE box at a STABLE height - pages.js
   measures the tallest pane once (and on resize) and pins the stage
   there. Panes swap in place with a short settle; nothing on the page
   moves. Inside step 2, picking a reason HIDES the other tiles (the
   chosen one stays with a Change link) and that topic's fields take
   the freed room - content trades places, the box never grows. */
.ctcf-fold { display: block; position: relative; }
.ctcf-fold__in { min-width: 0; }
.ctcf-step + .ctcf-step .ctcf-pane__head { padding-top: 1.4rem; }
.ctcf.is-live .ctcf-step + .ctcf-step .ctcf-pane__head { padding-top: .1rem; }
.ctcf.is-live .ctcf-panes {
  overflow: hidden; position: relative;
  /* the clip box breathes 8px past the content on every side, so
     focus rings and lifted-chip shadows at the edges never get cut;
     the negative margin hands the room back to the layout */
  padding: 8px; margin: -8px;
}
.ctcf.is-live .ctcf-step:not(.is-current) { display: none; }
/* pane swap = crossfade: the leaver lifts out over the arriving pane */
.ctcf.is-live .ctcf-step.is-exiting {
  display: block; position: absolute; inset: 8px 8px auto 8px;
  pointer-events: none;
  animation: ctcf-pane-out .17s ease forwards;
}
@keyframes ctcf-pane-out {
  to { opacity: 0; transform: translateY(-9px); }
}
@media (prefers-reduced-motion: reduce) {
  .ctcf.is-live .ctcf-step.is-exiting { display: none; animation: none; }
}
.ctcf.is-live .ctcf-topics.has-pick { grid-template-columns: minmax(0, 1fr); }
.ctcf.is-live .ctcf-topics.has-pick .ctcf-topic:not(.is-picked) { display: none; }
/* mid-flow the picked tile IS the way back to the grid */
.ctcf.is-live .ctcf-topics.has-pick .ctcf-topic.is-picked label {
  transform: none; cursor: pointer;
}
.ctcf.is-live .ctcf-topics.has-pick .ctcf-topic.is-picked:hover label {
  border-color: rgba(43, 83, 201, .8);
}
/* the collapse choreography: unpicked tiles bow out, the pick GLIDES
   to the head row (FLIP transform from pages.js), the topic's fields
   rise in; Change brings the grid back with the same rise */
.ctcf-topic { transition: opacity .17s ease, transform .17s ease; }
.ctcf-topic.is-leaving { opacity: 0; transform: scale(.96); pointer-events: none; }
.ctcf-topics.is-reopening .ctcf-topic {
  animation: ctcf-pane-in .26s cubic-bezier(.3, .7, .2, 1) backwards;
}
@media (prefers-reduced-motion: reduce) {
  .ctcf-topic { transition: none; }
  .ctcf-topics.is-reopening .ctcf-topic { animation: none; }
}
@keyframes ctcf-pane-in {
  from { opacity: 0; transform: translateY(9px); }
}
.ctcf.is-live .ctcf-step.is-current .ctcf-fold__in {
  animation: ctcf-pane-in .32s cubic-bezier(.3, .7, .2, 1) .1s backwards;
}
@media (prefers-reduced-motion: reduce) {
  .ctcf.is-live .ctcf-step.is-current .ctcf-fold__in { animation: none; }
}

/* fields sit on the paper as white sheets with hairlines */
.ctcf .field input, .ctcf .field select, .ctcf .field textarea {
  background: #fff; border-color: rgba(22, 33, 43, .16);
}
.ctcf .field label i {
  font-style: normal; text-transform: none; letter-spacing: 0;
  font-weight: 480; color: var(--muted); margin-left: .3rem;
}
.ctcf-sub {
  margin: 1.05rem 0 .45rem; font-size: .76rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
.ctcf-sub i { font-style: normal; font-weight: 480; letter-spacing: 0; text-transform: none; }
.ctcf-step__go { margin-top: 1.3rem; }
/* the hidden attribute must actually win over .btn's own display */
.ctcf [hidden] { display: none !important; }

/* ---- the form's own voice for errors and readiness: no browser
   bubbles, no dead clicks. Fields carry their message inline; the
   step's button stands grayed until the step is ready but still
   answers a click by pointing at what's missing. ---- */
.ctcf .field.is-err input, .ctcf .field.is-err select, .ctcf .field.is-err textarea {
  border-color: #c05348; background: #fdf6f5;
}
.ctcf .field.is-err input:focus, .ctcf .field.is-err textarea:focus {
  outline-color: #c05348; border-color: #c05348;
}
.ctcf-err {
  margin: .4rem 0 0; font-size: .78rem; font-weight: 530; color: #a63d34;
  animation: ctcf-pane-in .22s ease backwards;
}
/* the topic error FLOATS as a pill over the pane's foot instead of
   taking a flow row - so the pinned card ends exactly under the last
   tile and never reflows when the error comes and goes */
.ctcf-err--group {
  /* straddles the grid's bottom edge like a badge - clear of the
     tile's own text; the stage clip runs 10px past the fold (2px
     pin slack + 8px breathe pad), so the overhang must stay <10px */
  position: absolute; left: 0; right: 0; bottom: -.45rem;
  margin: 0 auto; width: fit-content; padding: .28rem .85rem;
  background: #fff; border: 1px solid rgba(166, 61, 52, .4);
  border-radius: 999px; box-shadow: 0 6px 18px -6px rgba(22, 33, 43, .3);
  z-index: 2;
}
@media (prefers-reduced-motion: reduce) { .ctcf-err { animation: none; } }
.ctcf .btn.is-idle {
  opacity: .45; filter: saturate(.55);
  box-shadow: none; transform: none; cursor: default;
}
.ctcf .btn.is-idle:hover { transform: none; box-shadow: none; }
.ctcf .btn.is-busy { opacity: .7; cursor: default; pointer-events: none; }
.ctcf-count {
  float: right; font-size: .72rem; color: var(--muted);
  font-variant-numeric: tabular-nums; margin-top: .35rem;
}
.ctcf-count.is-hot { color: #a63d34; }

/* the reason grid: ten radio tiles, glyph + name + hint; the pick
   LIFTS into the wash like every house selection */
.ctcf-topics {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: .6rem; margin-top: .2rem;
}
.ctcf-topic { position: relative; display: flex; }
/* nine tiles, two columns: the odd one out spans the full row so the
   grid closes balanced (the founder's construction - keep it) */
.ctcf-topics .ctcf-topic:last-child { grid-column: 1 / -1; }
.ctcf-topic input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.ctcf-topic label {
  flex: 1; display: grid; grid-template-columns: minmax(0, 1fr);
  justify-items: center; align-content: center; text-align: center;
  gap: .24rem; padding: .72rem .7rem .8rem; border-radius: 14px; cursor: pointer;
  border: 1px solid rgba(22, 33, 43, .14); background: #fff;
  box-shadow: 0 1px 2px rgba(22, 33, 43, .04);
  transition: border-color .18s, background-color .18s, transform .18s, box-shadow .18s;
}
.ctcf-topic label svg { margin-bottom: .06rem; }
.ctcf-topic b {
  font-size: .87rem; font-weight: 610; letter-spacing: -.01em;
  color: var(--ink); line-height: 1.25;
}
.ctcf-topic label > span {
  font-size: .73rem; color: var(--muted); line-height: 1.35;
}
.ctcf-topic:hover label { border-color: rgba(43, 83, 201, .45); }
.ctcf-topic input:checked + label {
  border-color: #2b62c9; background: #e8f0fb; transform: translateY(-1.5px);
  box-shadow: inset 0 0 0 1px #2b62c9, 0 8px 18px -10px rgba(43, 98, 201, .55);
}
.ctcf-topic input:checked + label b { color: #17427e; }
.ctcf-topic input:focus-visible + label { outline: 2px solid var(--brand); outline-offset: 1px; }
@media (max-width: 560px) {
  .ctcf-topics { grid-template-columns: minmax(0, 1fr); }
}

/* small option chips (deployment, timeline): paper pills */
.ctcf-chips { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: .2rem; }
.ctcf-chip { position: relative; display: inline-flex; }
.ctcf-chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.ctcf-chip label {
  display: inline-flex; align-items: center;
  padding: .55rem 1.05rem; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(22, 33, 43, .16); background: #fff;
  font-size: .86rem; font-weight: 570; letter-spacing: -.008em; color: #3b4a5a;
  box-shadow: 0 1px 2px rgba(22, 33, 43, .04);
  transition: border-color .18s, background-color .18s, color .18s,
              transform .18s, box-shadow .18s;
}
.ctcf-chip:hover label { border-color: rgba(43, 83, 201, .45); }
.ctcf-chip input:checked + label {
  border-color: #2b62c9; background: #e8f0fb; color: #17427e;
  transform: translateY(-1.5px);
  box-shadow: inset 0 0 0 1px #2b62c9, 0 7px 16px -9px rgba(43, 98, 201, .6);
}
.ctcf-chip input:focus-visible + label { outline: 2px solid var(--brand); outline-offset: 1px; }
.ctcf-chips--s label { padding: .42rem .9rem; font-size: .8rem; }

.ctcf-more { margin-top: 1.05rem; }
.ctcf.is-live .ctcf-more { display: none; }
.ctcf.is-live .ctcf-topics.has-pick ~ .ctcf-more.is-on {
  display: block;
  animation: ctcf-pane-in .3s cubic-bezier(.3, .7, .2, 1) .12s backwards;
}
@media (prefers-reduced-motion: reduce) {
  .ctcf.is-live .ctcf-topics.has-pick ~ .ctcf-more.is-on { animation: none; }
}

/* ---- one column: the rail turns and runs across the top ---- */
@media (max-width: 860px) {
  .ctcf-grid { grid-template-columns: minmax(0, 1fr); gap: 1.3rem; }
  .ctcf-rail { flex-direction: row; justify-content: space-between; padding: 0 .4rem; }
  .ctcf-rail::before { left: 34px; right: 34px; top: 16px; bottom: auto; width: auto; height: 2px; }
  .ctcf-rail__item { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: .45rem; padding: 0; }
  .ctcf-rail__txt { padding: 0; text-align: center; }
  .ctcf-rail__txt b { font-size: .78rem; }
  .ctcf-rail__sub { display: none; }
  .ctcf-card { padding: 1.15rem 1rem 1.4rem; }
}


/* ---- the shelf ground on /contact (founder, 2026-08-23, second
   pass: "no separator at all, no change in colour, nothing"): the
   blog section is a CONTINUATION of the write section's ground, not
   a section of its own. The write split loses its bottom hairline
   here; the shelf paints the FLAT end-value of the veil gradient
   above (restarting the gradient steps the colour at the seam) and
   carries no borders. The blog rule ties the aurora override up at
   the shelf block at (0,3,1) and wins by order - keep it below. ---- */
.pg-contact .sec-contact.sec {
  /* the split reaches the very top of the page (founder, 08-23: no
     strip above it - "the real sections reach above, blue and white").
     The pull-up equals the body's header allowance and both columns'
     top padding grows by the same amount, so content stays put and
     the floating header glides over the section colours - the same
     look scrolling already produces. On <=860 the header vars are 0
     and all of this degrades to exactly nothing. */
  margin-top: calc(-1 * (var(--header-h) + var(--header-off)));
  /* the hero is gone (founder, 08-23) - the split IS the page top.
     First-section parity would hand this section the ODD bare-aurora
     ground; pin the even-band veil it was designed on, because the
     blog section below continues this gradient's END value - the
     seamless seam depends on it. */
  background: linear-gradient(180deg, rgba(252, 254, 255, .88), rgba(243, 248, 252, .74));
  border-bottom: 0;
  /* .sec's overflow:clip guillotines the slab's drop shadow and the
     bottom patch at the section edge - the exact "cut at an invisible
     border" artifact. Unclip, and lift the section over the blog
     ground so the spill paints at full strength instead of being
     dimmed by the later sibling's veil. */
  overflow: visible; z-index: 2;
}
/* the top patch used to be cropped by the section clip at the hero
   boundary - keep that crop, now self-inflicted, so the hero edge
   stays byte-identical while the section itself is unclipped */
.pg-contact .ctcq {
  padding-top: calc(clamp(3.2rem, 5.5vw, 5rem) + var(--header-h) + var(--header-off));
}
@media (min-width: 981px) {
  .pg-contact .ctcw .ctcf-wrap {
    padding-top: calc(clamp(3rem, 5vw, 4.5rem) + var(--header-h) + var(--header-off));
  }
}
.pg-contact .sec__patch--secure { clip-path: inset(110px 0 0 0); }
@media (max-width: 860px) {
  .pg-contact .sec__patch--secure { clip-path: inset(40px 0 0 0); }
}
.pg-contact section.sec.sec-blog {
  background: rgba(243, 248, 252, .74);
  border-block: 0;
}
/* the shelf's own patch straddled the seam (top:-130px) and the clip
   turned it into a hard pattern edge exactly on the boundary - seat
   it fully below the seam; the radial mask fades it in softly with
   clean air above, so no pattern terminates on the line */
.pg-contact .sec-blog .sec__patch { top: 30px; }

/* ============================================================
   PRICING — the post-price trio on the wash + glass language (2026-08-27,
   founder). #safe ports /compliance's #architecture (msgv-rail + cpxa deck);
   #support swaps the .abm ledger's right column for a forward-deployed-
   engineer photo in the cpxa frame; #setup drops the flat dot-grid
   dsxz__field for that same frame. Reuses .msgv-rail / .cpxa__* / .abm /
   .dsxz wholesale — these rules only cover what those leave open here. */

/* #support + #setup carry a single still photo at 4:3 in the cpxa frame;
   #safe keeps the square 1:1 of the reused isolation deck. Later than
   .cpxa__deck (1/1) on purpose, so this wins at equal specificity. */
.cpxa__deck--wide { aspect-ratio: 4 / 3; }

/* #support: the engineer photo stands where the figures ledger did. The
   .abm__grid already sizes it (two equal tracks); it only needs not to
   overflow, and a cap once the grid stacks so a phone is not one huge photo. */
.abm__figure { min-width: 0; }
@media (max-width: 860px) {
  .abm__figure { max-width: 560px; margin-inline: auto; width: 100%; }
}

/* #setup: the wash + glass frame stands where the dot-grid dsxz__field did.
   .dsxz__asset is a flex centering box built for a bare <img>; the cpxa
   stage wants a plain block that fills the column, and the field's soft
   radial ground (.dsxz__asset::before) must not double under the wash. */
.dsxz__asset--wash { display: block; }
.dsxz__asset--wash::before { display: none; }
/* .dsxz__asset img (position:relative; width:100%; height:auto) out-specifies
   .cpxa__wash / .cpxa__deck img and drops the frame's layers into normal flow
   (a giant wash above a bare photo). Two-class selectors restore the cpxa
   frame's own absolute, cover-filled positioning inside the asset. */
.dsxz__asset--wash .cpxa__wash,
.dsxz__asset--wash .cpxa__deck img {
  position: absolute; inset: 0; width: 100%; height: 100%;
}

/* #2 (founder 2026-08-27): the trio was three flat-white bands in a row with
   border-block:0 — it read as one white slab, unlike the rest of the site
   which rotates a hue band to band and separates them. Each section now
   carries a soft aurora pool in its OWN hue (steel / copper / violet, the
   same hue its glass wash wears), and a top hairline restores the separation
   .dsxz removes. element + three classes beats section.sec.dsxz (0,2,1). */
section.sec.dsxz.prc-band--steel {
  background:
    radial-gradient(82% 62% at 10% -8%, rgba(120, 158, 206, .17), transparent 60%),
    radial-gradient(64% 56% at 104% 4%, rgba(214, 170, 116, .10), transparent 56%),
    #fbfcfe;
  border-top: 1px solid var(--line);
}
section.sec.dsxz.prc-band--violet {
  background:
    radial-gradient(82% 62% at 90% -8%, rgba(150, 138, 214, .17), transparent 60%),
    radial-gradient(60% 54% at -4% 4%, rgba(210, 168, 150, .09), transparent 56%),
    #fdfcfe;
  border-top: 1px solid var(--line);
}
/* #support keeps its .abm registration band; a faint warm pool on its image
   side ties it to the copper wash without touching the ledger pattern. */
section.sec.abm.prc-band--copper {
  background:
    radial-gradient(70% 80% at 100% 46%, rgba(216, 158, 104, .11), transparent 62%),
    #fff;
}