/* ============================================================
   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 3rem;
}
.site-footer__brand p { margin-top: 1rem; font-size: .88rem; color: var(--muted); max-width: 24em; }
.site-footer h4 { font-family: var(--font-mono); font-size: .7rem; font-weight: 500; letter-spacing: .12em; 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); }
.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-family: var(--font-mono); font-size: .72rem; letter-spacing: .04em; 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-07 redesign) --------------------------
   The page answers in the order a buyer worries: the price, the one number
   that changes, what every plan already includes. Cards carry ONLY what
   differs - price, allowance, sizing - the sameness lives in the .inc strip
   below, said once. */

/* hosting: a segmented switch in the deck's head, not a decision gate */
.deck-host { display: grid; justify-items: end; gap: .55rem; }
.hseg { display: inline-flex; padding: 3px; border: 1px solid var(--line-strong);
  border-radius: 12px; background: var(--bg); }
.hseg label { position: relative; display: flex; align-items: baseline; gap: .5em;
  padding: .5em 1.05em; border-radius: 9px; cursor: pointer;
  font-size: .9rem; font-weight: 560; color: var(--muted); white-space: nowrap;
  transition: background .15s ease, color .15s ease; }
.hseg label small { font-family: var(--font-mono); font-size: .58rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.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 { background: var(--brand); color: #fff; }
.hseg label.is-on small { color: rgba(255, 255, 255, .72); }
.hseg label:focus-within { outline: 2px solid var(--brand);
  outline-offset: 2px; }
.hseg-line { font-size: .84rem; color: var(--muted); max-width: 34em;
  text-align: right; line-height: 1.55; }
@media (max-width: 860px) {
  .deck-host { justify-items: start; }
  .hseg-line { text-align: left; }
}

/* the deck: three cards that differ in three lines */
.plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px; align-items: stretch; }
@media (max-width: 900px) { .plan-grid { grid-template-columns: minmax(0, 1fr); } }
.plan-card { position: relative; display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--r-panel);
  background: var(--bg); padding: 24px 26px 22px; }
.plan-card--lead { border-color: var(--brand);
  box-shadow: 0 0 0 1px var(--brand), 0 18px 40px -22px rgba(34, 84, 121, .45); }
.plan-card__top { display: flex; align-items: baseline;
  justify-content: space-between; gap: 1rem; }
.plan-name { font-family: var(--font-mono); font-size: .72rem; font-weight: 700;
  letter-spacing: .14em; color: var(--copper); text-transform: uppercase; }
.plan-flag { font-family: var(--font-mono); font-size: .56rem; font-weight: 700;
  letter-spacing: .12em; color: var(--brand); text-transform: uppercase;
  border: 1px solid var(--brand-wash-2); background: var(--brand-wash);
  border-radius: 99px; padding: .3em .8em; white-space: nowrap; }
.plan-size { margin-top: .35rem; font-size: .9rem; color: var(--muted); }
.plan-price { margin: 1.05rem 0 0; display: flex; align-items: baseline; gap: 7px; }
.plan-amount { font-size: 2.5rem; font-weight: 650; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; }
.plan-per { color: var(--muted); }
.plan-note { color: var(--muted); font-size: .84rem; margin-top: .1rem; }
/* the highlighted line: who the plan is best for */
.plan-alw { display: flex; align-items: baseline; gap: .45rem;
  margin: 1.15rem 0 1.35rem; padding-top: 1.05rem;
  border-top: 1px solid var(--line); }
.plan-alw b { font-size: 1.18rem; font-weight: 650; letter-spacing: -.014em;
  font-variant-numeric: tabular-nums; }
.plan-alw span { font-size: .92rem; color: var(--muted); }
.plan-buy { width: 100%; text-align: center; margin-top: auto; }
.plan-under { margin-top: .6rem; text-align: center; font-size: .78rem;
  color: var(--faint); }

/* 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-family: var(--font-mono); font-size: .68rem; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--muted); background: var(--bg);
    border: 1px solid var(--line); border-radius: 10px;
    padding: .66em .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(--brand); border-color: var(--brand); }
  .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(82vw, 340px);
    scroll-snap-align: center;
    transition: transform .25s ease, opacity .25s ease;
  }
}

/* the by-quote tier: a quiet full strip under the deck */
.plan-band { margin-top: 18px; border: 1px solid var(--line);
  border-radius: var(--r-panel); background: var(--bg-tint);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .5rem 2rem; align-items: center; padding: 20px 26px; }
.plan-band__name { min-width: 15em; max-width: 17em; }
.plan-band__q { display: block; font-size: 1.05rem; font-weight: 650;
  letter-spacing: -.012em; line-height: 1.4; }
.plan-band__desc { font-size: .92rem; color: var(--muted); line-height: 1.6;
  max-width: 52em; }
@media (max-width: 900px) {
  .plan-band { grid-template-columns: minmax(0, 1fr); padding: 20px 22px; }
  .plan-band .btn { justify-self: start; }
}
.deck-foot { color: var(--muted); font-size: .85rem; max-width: 56em;
  margin-top: 1.6rem; }
.deck-foot a { color: var(--brand); }

/* 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__grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 10fr) minmax(0, 9fr);
  gap: clamp(1.2rem, 3.5vw, 3.6rem); align-items: center;
}
.hero__copy { max-width: 44rem; padding-block: clamp(1rem, 3vw, 2.6rem); }
.hero__copy .lead { margin-top: 1.4rem; }
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem; margin-top: 2.3rem; }

/* the hero object is a pre-rendered Cycles ORBIT - 41 real views of the
   clay figure on alpha. home.js scrubs them with the cursor (idle: a slow
   sway), painting the two nearest frames cross-faded on the canvas. The
   still underneath is the LCP image and every fallback; the canvas fades
   in over it when the centre frame is ready. No CSS 3D anywhere: the
   rotation IS rendered, so hidden faces genuinely come into view. */
.hero__vis { position: relative; margin: 0; min-width: 0; }
.hero__stage { position: relative; }
.hero__still { width: 100%; max-width: none; height: auto; display: block; }
.hero__orbit {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; transition: opacity .45s ease;
}
/* the per-angle videos: stacked, JS drives each one's opacity */
.hero__vid {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none;
}
.hero__stage.is-live .hero__orbit { opacity: 1; }
.hero__stage.is-live .hero__still { visibility: hidden; }

@media (max-width: 960px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__vis { order: 2; max-width: 560px; justify-self: center; }
  .hero__copy { padding-bottom: 0; }
}

/* ---------- 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 ----------
   No numbering, no choreography theater: content simply RISES a step as its
   section enters the view (main.js flags .in-view), staggered by --rise.
   Without html.fx (motion refused / JS dead) everything stands complete. */
html.fx [data-rise] {
  opacity: 0; translate: 0 26px;
  transition: opacity .85s cubic-bezier(.22, .61, .21, 1),
              translate .85s cubic-bezier(.22, .61, .21, 1);
  transition-delay: calc(var(--rise, 0) * 95ms);
}
html.fx .in-view [data-rise] { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) {
  html.fx [data-rise] { opacity: 1; translate: 0 0; transition: none; }
}

/* ---------- 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; }

/* ---------- 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; }
}

/* 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 ----------
     The rendered object is a desktop story; on the phone the hero is the
     sentence, the lead and the demo button, and nothing else. */
  .hero { padding-top: 2.1rem; padding-bottom: 2.3rem; }
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .hero__vis { display: none; }
  .hero__copy { padding-block: 0; }
  .hero__cta { margin-top: 1.7rem; }

  /* ---------- 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; }
}