/* Assurance card row: height increased 40% (248px/20vw to 347px/28vw) */
.home-product-stage .product-collage { grid-template-rows: minmax(420px, 34vw) minmax(347px, 28vw) !important; }
/* Hero copy: paragraph and actions sit low, buttons bottom-aligned with the media caption */
@media (min-width: 821px) {
  .bank-campaign-hero .bank-campaign-copy { align-self: stretch !important; display: flex !important; flex-direction: column !important; justify-content: flex-end !important; padding-bottom: 0 !important; }
  .bank-campaign-hero .bank-campaign-copy .bank-campaign-kicker { margin-top: auto !important; }
  .bank-campaign-hero .bank-campaign-copy h1 { margin-top: clamp(14px, 1.6vw, 24px) !important; }
  .bank-campaign-hero .bank-campaign-copy > p { margin-top: clamp(18px, 2vw, 30px) !important; margin-bottom: clamp(20px, 2.4vw, 34px) !important; }
  .bank-campaign-hero .bank-campaign-actions { margin-top: 0 !important; margin-bottom: 0 !important; }
}
/* Home: bright by default, dark top bar; no theme toggle on this page */
#se-theme-btn { display: none !important; }
/* No Enter Terminal CTA in the logged-out header on this page, login happens
   from Start Sealing instead. The nav grid was built for 3 narrow commands
   plus a wide 4th slot, without that slot the 3 remaining commands span the
   full row evenly instead of leaving a gap where it used to sit. */
.terminal-header.is-public .terminal-navigation { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
/* Bright home keeps the dark terminal bar */
html.se-bright .terminal-header { background: #061110 !important; border-bottom: 0 !important; box-shadow: none !important; }
html.se-bright .terminal-header * { color: #f2f4ef !important; }
html.se-bright .terminal-command { background: #101c1b !important; border-left: 0 !important; box-shadow: none !important; }
html.se-bright .terminal-command:hover { background: #172624 !important; }
html.se-bright .terminal-command small { color: #5bdbe4 !important; }
html.se-bright .terminal-command em, html.se-bright .terminal-account-main em { color: rgba(242, 244, 239, .55) !important; }
html.se-bright .terminal-account { background: #101c1b !important; }
html.se-bright .terminal-account-main small { color: #5bdbe4 !important; }
html.se-bright .terminal-account-main:hover, html.se-bright .terminal-account-main:focus-visible { color: #0b1713 !important; }
html.se-bright .terminal-account-main:hover b, html.se-bright .terminal-account-main:focus-visible b { color: #0b1713 !important; }
html.se-bright .terminal-account-main:hover small, html.se-bright .terminal-account-main:focus-visible small,
html.se-bright .terminal-account-main:hover em, html.se-bright .terminal-account-main:focus-visible em { color: #29451d !important; }
html.se-bright .terminal-logout:hover, html.se-bright .terminal-logout:focus-visible,
html.se-bright .terminal-logout:hover *, html.se-bright .terminal-logout:focus-visible * { color: #0b1713 !important; }
html.se-bright .terminal-brand-logo { filter: none !important; }
/* How it works: craft pass. Authored line breaks hold, the three bands read as one set. */
.landing-process .process-visual > strong { max-width: 340px !important; }
.landing-process .process-visual { min-height: 224px !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16) !important; }
.landing-process .process-visual.seal { min-height: 224px !important; }
.landing-process .process-visual.seal .seal-rings-svg { max-width: 640px !important; }
/* The Venn labels cross a light and a dark half of the same band: give them a reading edge. */
.landing-process .process-visual .seal-rings-svg .venn-label { paint-order: stroke; stroke: rgba(12, 21, 18, .55); stroke-width: 4px; stroke-linejoin: round; }
.landing-process .process-copy { align-self: center !important; }
/* Commitment banner: body copy sat on a cool grey over a warm photo and read weaker than the rule it carries. */
.landing-conversion .conversion-copy p { color: rgba(244, 241, 233, .88) !important; text-shadow: 0 1px 14px rgba(6, 17, 16, .55); }

/* ===== Dark home: complete register. Light stays light, dark is dark. ===== */
html:not(.se-bright) { --campaign-paper: #0c1512; --campaign-paper-soft: #121b17; --campaign-paper-deep: #0a110e; --campaign-ink: #f4f1e9; --campaign-line-light: rgba(244, 241, 233, .12); --campaign-muted: #93a09a; --campaign-shadow: 0 24px 70px rgba(0, 0, 0, .45); --paper: #0c1512; --ink: #f4f1e9; }
html:not(.se-bright) body, html:not(.se-bright) .landing-page { background: #0c1512 !important; color: #f4f1e9; }
/* Hero actions keep their register: primary flips to paper-on-dark, secondary to dark outline */
html:not(.se-bright) .bank-campaign-actions .primary { background: #f4f1e9 !important; color: #0b1713 !important; }
html:not(.se-bright) .bank-campaign-actions .primary small, html:not(.se-bright) .bank-campaign-actions .primary b, html:not(.se-bright) .bank-campaign-actions .primary i { color: #0b1713 !important; }
html:not(.se-bright) .bank-campaign-actions .secondary { background: rgba(255, 255, 255, .07) !important; border: 1px solid rgba(255, 255, 255, .14) !important; }
html:not(.se-bright) .bank-campaign-actions .secondary small, html:not(.se-bright) .bank-campaign-actions .secondary b, html:not(.se-bright) .bank-campaign-actions .secondary i { color: #f4f1e9 !important; }
/* Photo collage copy stays light-on-photo; accent cards keep ink-on-colour */
html:not(.se-bright) .collage-main .collage-copy span, html:not(.se-bright) .collage-main .collage-copy h2, html:not(.se-bright) .collage-main .collage-copy p { color: #ffffff !important; }
html:not(.se-bright) .collage-action { color: #0b1713 !important; }
html:not(.se-bright) .collage-receipt.collage-assurance-card { color: #f4f1e9 !important; }
html:not(.se-bright) .collage-rail.collage-assurance-card { color: #0b1713 !important; }
html:not(.se-bright) .collage-rail.collage-assurance-card > span { color: rgba(11, 23, 19, .62) !important; opacity: 1 !important; }
html:not(.se-bright) .collage-proof, html:not(.se-bright) .collage-proof h3, html:not(.se-bright) .collage-proof > span { color: #0b1713 !important; }
html:not(.se-bright) .mini-evidence, html:not(.se-bright) .mini-evidence b, html:not(.se-bright) .mini-evidence small { color: #0b1713 !important; }
/* Section CTAs */
html:not(.se-bright) .landing-cta.cobalt { background: #315ee8 !important; color: #ffffff !important; }
html:not(.se-bright) .landing-cta.lime { color: #0b1713 !important; }
/* Process visuals: captions on light gradients keep ink */
html:not(.se-bright) .process-visual.create strong, html:not(.se-bright) .process-visual.witness strong { color: #0b1713 !important; }
html:not(.se-bright) .process-visual.create .mock-lines span { background: rgba(11, 23, 19, .18); }
/* Three-ways route cards go dark */
html:not(.se-bright) .product-route-card { background: #121b17 !important; }
html:not(.se-bright) .product-route-content { background: #121b17 !important; }
html:not(.se-bright) .product-route-eyebrow { color: #52d8df !important; }
html:not(.se-bright) .product-route-title { color: #f4f1e9 !important; }
html:not(.se-bright) .product-route-question { color: rgba(244, 241, 233, .85) !important; }
html:not(.se-bright) .product-route-eyebrow { color: #93a09a !important; }
html:not(.se-bright) .product-route-description { color: rgba(244, 241, 233, .6) !important; }
html:not(.se-bright) .product-route-action { color: #52d8df !important; }
/* Immutable-memory band joins the dark register */
html:not(.se-bright) .landing-integrate.landing-light { background: #101915 !important; color: #f4f1e9 !important; }
html:not(.se-bright) .landing-integrate h2 { color: #f4f1e9 !important; }
html:not(.se-bright) .landing-integrate p { color: rgba(244, 241, 233, .65) !important; }
html:not(.se-bright) .memory-caption small { color: #52d8df !important; }
html:not(.se-bright) .memory-caption b { color: #f4f1e9 !important; }
/* Conversion quote on the photo stays light */
html:not(.se-bright) .cycle-principles article:last-child { color: #f4f1e9 !important; }
html:not(.se-bright) .conversion-quote { color: #f4f1e9 !important; }
html:not(.se-bright) .conversion-copy p { color: rgba(244, 241, 233, .75) !important; }

/* ==========================================================================
   Home banners
   Measured on the rendered page with alpha compositing against the real
   stacked background. Two defects, both in the campaign banner, plus the same
   accent token failing in five other places on the paper sections.
   ========================================================================== */

/* The banner caption sat cream on the pale part of its own photograph at
   1.41 to 1 against a 4.5 requirement. The scrim under it was too weak to
   carry light type, so it now ramps to a real dark base. */
html body .bank-campaign-media figcaption {
  /* The scrim was inset from the edges of its own photograph, so it read as a
     pasted rectangle. It now spans the frame and the inset comes from padding. */
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: auto !important;
  margin: 0 !important;
  background: linear-gradient(180deg, rgba(6, 19, 17, 0) 0%, rgba(6, 19, 17, .55) 42%, rgba(6, 19, 17, .92) 100%) !important;
  padding: clamp(56px, 7vw, 96px) clamp(22px, 2.6vw, 38px) clamp(20px, 2.2vw, 30px) !important;
}
html body .bank-campaign-media figcaption b,
html body .bank-campaign-media figcaption span {
  color: #faf8f2 !important;
  text-shadow: 0 1px 2px rgba(6, 19, 17, .5);
}

/* The orange accent measured 2.50 to 1 on paper and 2.26 on the integrate
   panel. Display sizes need 3, the small kickers need 4.5, so the display
   weight darkens just enough and the small weight darkens further. */
html body .bank-campaign-copy h1 em {
  color: #d9490c !important;
}

html body .landing-light .landing-kicker,
html body .landing-light .process-copy small,
html body .landing-light .home-verify-link span,
html body .integrate-copy .landing-kicker,
html body .cycle-copy .landing-kicker,
html body .bank-campaign-kicker {
  color: #a63a08 !important;
}

/* Secondary copy on the paper sections measured between 3.89 and 4.48. */
html body .landing-light .process-copy p,
html body .integrate-copy p,
html body .cycle-principles article:not(:last-child) p,
html body .collage-proof .mini-evidence small {
  color: rgba(11, 18, 16, .72) !important;
}

/* Footer legal and column labels measured 4.09 on the dark base. */
/* The second principle card is the dark one; its copy stays light. */
html body .cycle-principles article:last-child p {
  color: rgba(244, 241, 233, .78) !important;
}

html body .footer-v2 .footer-v2-cols div small,
html body .footer-v2 .footer-v2-legal span {
  color: rgba(244, 241, 233, .62) !important;
}

/* ==========================================================================
   Step 01 Create: the mock window was three blank bars and an empty circle.
   It now renders the sealed artifact card it is meant to be showing.
   ========================================================================== */
html body .process-visual .mock-window.is-artifact {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  grid-template-rows: auto auto !important;
  align-items: center;
  gap: 12px 14px !important;
  width: min(100%, 470px) !important;
  height: auto !important;
  padding: 16px 18px 0 !important;
  border-radius: 16px !important;
  background: #0b1210 !important;
  overflow: hidden;
}
/* banking-sharp paints every span inside .mock-window as a grey placeholder
   bar. Neutralise that inside the real card, then re-apply only the fills the
   card actually wants. */
html body .mock-window.is-artifact span,
html body .mock-window.is-artifact u,
html body .mock-window.is-artifact b,
html body .mock-window.is-artifact em,
html body .mock-window.is-artifact small,
html body .mock-window.is-artifact i {
  background: none !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

html body .mock-window.is-artifact .mock-avatar {
  grid-row: 1;
  width: 44px; height: 44px;
  border-radius: 50%;
  padding: 2.5px;
  box-sizing: border-box;
  background: conic-gradient(from -90deg, #34d399, #60a5fa 46%, #a78bfa 72%, #c7ff31 90%, #34d399);
}
html body .mock-window.is-artifact .mock-avatar img {
  width: 100%; height: 100%; display: block; object-fit: cover;
  border-radius: 50%; border: 2px solid #0b1210;
}
html body .mock-window.is-artifact .mock-id { grid-row: 1; display: grid; gap: 3px; min-width: 0; }
html body .mock-window.is-artifact .mock-title-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
html body .mock-window.is-artifact .mock-title-row b {
  font: 700 13.5px Inter, sans-serif; color: #f4f7f5;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html body .mock-window.is-artifact .mock-title-row em {
  flex: none; font: 700 8.5px "JetBrains Mono", ui-monospace, monospace; font-style: normal;
  letter-spacing: .12em; color: #0b1210; background: #c7ff31;
  padding: 3px 7px; border-radius: 999px;
}
html body .mock-window.is-artifact .mock-loc {
  font: 500 10px Inter, sans-serif; color: rgba(244, 247, 245, .55);
}
html body .mock-window.is-artifact .mock-chips { display: flex; gap: 10px; }
html body .mock-window.is-artifact .mock-chips u {
  text-decoration: none;
  font: 600 8px "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: .14em; color: rgba(244, 247, 245, .5);
}
html body .mock-window.is-artifact .mock-chips u.is-sealed { color: #34d399; }
html body .mock-window.is-artifact .mock-chips u.is-sealed::before { content: "\2713 "; }
html body .mock-window.is-artifact .mock-value { grid-row: 1; display: grid; gap: 4px; justify-items: end; }
html body .mock-window.is-artifact .mock-value b { font: 700 17px Inter, sans-serif; color: #f4f7f5; }
html body .mock-window.is-artifact .mock-value small {
  font: 500 8.5px "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: .1em; color: rgba(244, 247, 245, .45);
}
html body .mock-window.is-artifact .mock-bar {
  display: block; width: 86px; height: 3px; border-radius: 999px;
  background: rgba(255, 255, 255, .12); overflow: hidden;
}
html body .mock-window.is-artifact .mock-bar i {
  display: block; width: 100%; height: 100%;
  background: linear-gradient(90deg, #ff8a42, #d7f75b 55%, #59dce8);
}
html body .mock-window.is-artifact .mock-strip {
  grid-row: 2; grid-column: 1 / -1;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 14px -18px 0; padding: 9px 18px;
  background: rgba(255, 255, 255, .04);
  font: 600 8.5px "JetBrains Mono", ui-monospace, monospace; letter-spacing: .1em;
  color: rgba(244, 247, 245, .48);
}
html body .mock-window.is-artifact .mock-strip .s-gamma { color: #59dce8; }
html body .mock-window.is-artifact .mock-strip .s-sol { color: rgba(244, 247, 245, .8); }
html body .mock-window.is-artifact .mock-strip .s-up { color: #34d399; }
html body .mock-window.is-artifact .mock-strip .s-goal { margin-left: auto; }

@media (max-width: 900px) {
  html body .process-visual .mock-window.is-artifact { width: 100% !important; padding: 13px 14px 0 !important; }
  html body .mock-window.is-artifact .mock-strip { margin: 12px -14px 0; padding: 8px 14px; gap: 9px; }
  html body .mock-window.is-artifact .mock-strip .s-goal { margin-left: 0; }
}

/* re-applied after the reset */
html body .mock-window.is-artifact .mock-avatar {
  width: 44px !important; height: 44px !important; padding: 2.5px !important;
  border-radius: 50% !important;
  background: conic-gradient(from -90deg, #34d399, #60a5fa 46%, #a78bfa 72%, #c7ff31 90%, #34d399) !important;
}
html body .mock-window.is-artifact .mock-title-row em {
  padding: 3px 7px !important; border-radius: 999px !important;
  background: #c7ff31 !important; color: #0b1210 !important;
}
html body .mock-window.is-artifact .mock-bar {
  display: block !important; width: 86px !important; height: 3px !important;
  border-radius: 999px !important; background: rgba(255, 255, 255, .12) !important; overflow: hidden;
}
html body .mock-window.is-artifact .mock-bar i {
  display: block !important; width: 100% !important; height: 100% !important;
  background: linear-gradient(90deg, #ff8a42, #d7f75b 55%, #59dce8) !important;
}
html body .mock-window.is-artifact .mock-strip {
  margin: 14px -18px 0 !important; padding: 9px 18px !important;
  background: rgba(255, 255, 255, .04) !important;
  flex-wrap: nowrap !important;
  gap: 11px !important;
  white-space: nowrap;
}
html body .process-visual .mock-window.is-artifact { width: min(100%, 420px) !important; }
html body .process-visual.create { gap: clamp(18px, 2.4vw, 40px) !important; }
@media (max-width: 900px) {
  html body .mock-window.is-artifact .mock-strip { margin: 12px -14px 0 !important; padding: 8px 14px !important; }
}

/* Step 03 Seal: rings held left at scale, statement right, no labels. */
html body .process-visual.seal {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: clamp(20px, 3vw, 56px) !important;
}
html body .process-visual.seal .seal-rings-svg {
  flex: 0 0 auto !important;
  width: clamp(220px, 24vw, 330px) !important;
  height: auto !important;
  max-width: none !important;
  margin: 0 !important;
  overflow: visible;
}
html body .process-visual.seal > strong {
  flex: 0 1 auto;
  text-align: right;
}
@media (max-width: 900px) {
  html body .process-visual.seal { flex-direction: column !important; align-items: flex-start !important; }
  html body .process-visual.seal > strong { text-align: left; }
}


/* Step 03 Seal carries the sealed dial and the field rings behind it. */
html body .process-visual.seal {
  position: relative;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: clamp(20px, 3vw, 56px) !important;
  overflow: hidden;
}
html body .process-visual.seal .seal-dial-svg {
  position: relative;
  flex: 0 0 auto;
  width: clamp(150px, 15vw, 210px);
  height: auto;
  margin-left: clamp(6px, 1.4vw, 26px);
}
html body .process-visual.seal > strong { position: relative; flex: 0 1 auto; text-align: right; }
@media (max-width: 900px) {
  html body .process-visual.seal { flex-direction: column !important; align-items: flex-start !important; }
  html body .process-visual.seal .seal-dial-svg { margin-left: 0; }
  html body .process-visual.seal > strong { text-align: left; }
}

/* Step 02 Witness: the substrates a seal can be witnessed on, each shown
   sealed. Private is a lock because nothing leaves custody. */
html body .process-visual.witness {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: clamp(20px, 3vw, 56px) !important;
}
html body .witness-rails {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  gap: clamp(22px, 3vw, 52px);
  margin-left: clamp(4px, 1.2vw, 22px);
}
html body .witness-rails::before {
  content: "";
  position: absolute;
  left: 28px;
  right: 28px;
  top: 28px;
  height: 2px;
  background: linear-gradient(90deg, rgba(244, 241, 233, .18), rgba(244, 241, 233, .45), rgba(244, 241, 233, .18));
}
html body .witness-rails .wr-node {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 10px;
  width: 56px;
}
html body .witness-rails .wr-node i {
  position: relative;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #0b1a14;
  box-shadow: 0 0 0 2px rgba(244, 241, 233, .22);
}
html body .witness-rails .wr-node i svg { width: 26px; height: 26px; }
html body .witness-rails .wr-node i img { width: 26px; height: 26px; object-fit: contain; display: block; }
html body .witness-rails .wr-node u {
  position: absolute;
  top: 38px;
  right: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 0 2.5px #0b1a14;
  text-decoration: none;
}
html body .witness-rails .wr-node u::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 5px;
  width: 7px;
  height: 4px;
  border-left: 2px solid #06231a;
  border-bottom: 2px solid #06231a;
  transform: rotate(-45deg);
}
html body .witness-rails .wr-node b {
  font: 600 9px "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(244, 241, 233, .78);
  white-space: nowrap;
}
html body .process-visual.witness > strong { flex: 0 1 auto; max-width: 20ch; }
@media (max-width: 900px) {
  html body .process-visual.witness { flex-direction: column !important; align-items: flex-start !important; }
  html body .witness-rails { margin-left: 0; }
  html body .process-visual.witness > strong { max-width: none; }
}

/* Witness phone: the coherence profile from the mobile design. */
html body .witness-phone .wp-head { display: flex; align-items: center; gap: 11px; margin: 4px 0 16px; }
html body .witness-phone .wp-mark {
  display: grid; place-items: center; width: 34px; height: 34px; flex: none;
}
html body .witness-phone .wp-mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
html body .witness-phone .wp-head span { display: grid; gap: 2px; min-width: 0; }
html body .witness-phone .wp-head b { font: 700 16px Inter, sans-serif; color: #f4f7f5; }
html body .witness-phone .wp-head em {
  font: 600 8.5px "JetBrains Mono", ui-monospace, monospace; font-style: normal;
  letter-spacing: .17em; text-transform: uppercase; color: #34d399;
}

html body .witness-phone .wp-cards { display: grid; gap: 9px; }
html body .witness-phone .wp-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 8px 9px;
  padding: 9px 10px 0;
  border-radius: 11px;
  background: #0f1512;
  overflow: hidden;
}
html body .witness-phone .wp-card > * { background: none; }
html body .witness-phone .wp-avatar {
  grid-row: 1; width: 30px; height: 30px; border-radius: 50%; padding: 2px; box-sizing: border-box;
  background: conic-gradient(from -90deg, #34d399, #60a5fa 46%, #a78bfa 72%, #c7ff31 90%, #34d399);
}
html body .witness-phone .wp-avatar img {
  width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 50%; border: 1.5px solid #0f1512;
}
html body .witness-phone .wp-id { grid-row: 1; display: grid; gap: 2px; min-width: 0; }
html body .witness-phone .wp-title-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
html body .witness-phone .wp-title-row b {
  font: 700 9.5px Inter, sans-serif; color: #f4f7f5;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html body .witness-phone .wp-title-row em {
  flex: none; font: 700 6px "JetBrains Mono", ui-monospace, monospace; font-style: normal;
  letter-spacing: .1em; color: #0b1210; background: #c7ff31; padding: 2px 5px; border-radius: 999px;
}
html body .witness-phone .wp-loc { font: 500 7px Inter, sans-serif; color: rgba(244, 247, 245, .5); }
html body .witness-phone .wp-chips { display: flex; gap: 6px; }
html body .witness-phone .wp-chips u {
  text-decoration: none; font: 600 5.5px "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: .1em; color: rgba(244, 247, 245, .46);
}
html body .witness-phone .wp-chips u.is-sealed { color: #34d399; }
html body .witness-phone .wp-chips u.is-sealed::before { content: "\2713 "; }
html body .witness-phone .wp-value { grid-row: 1; display: grid; gap: 2px; justify-items: end; }
html body .witness-phone .wp-value b { font: 700 12px Inter, sans-serif; color: #f4f7f5; }
html body .witness-phone .wp-value small {
  font: 500 5.5px "JetBrains Mono", ui-monospace, monospace; letter-spacing: .08em; color: rgba(244, 247, 245, .42);
}
html body .witness-phone .wp-bar {
  display: block; width: 58px; height: 2px; border-radius: 999px;
  background: rgba(255, 255, 255, .12); overflow: hidden;
}
html body .witness-phone .wp-bar i {
  display: block; width: 100%; height: 100%;
  background: linear-gradient(90deg, #ff8a42, #d7f75b 55%, #59dce8);
}
html body .witness-phone .wp-strip {
  grid-row: 2; grid-column: 1 / -1;
  display: flex; align-items: center; gap: 7px; flex-wrap: nowrap; white-space: nowrap;
  margin: 7px -10px 0; padding: 5px 10px;
  background: rgba(255, 255, 255, .04);
  font: 600 5.5px "JetBrains Mono", ui-monospace, monospace; letter-spacing: .07em;
  color: rgba(244, 247, 245, .44);
}
html body .witness-phone .wp-strip .s-gamma { color: #59dce8; }
html body .witness-phone .wp-strip .s-sol { color: rgba(244, 247, 245, .78); }
html body .witness-phone .wp-strip .s-up { color: #34d399; }
html body .witness-phone .wp-strip .s-goal { margin-left: auto; }

/* the phone's event rows carry inherited type and fills; the card resets them */
html body .witness-phone .wp-card,
html body .witness-phone .wp-card * {
  background: none;
  box-shadow: none;
  letter-spacing: normal;
}
html body .witness-phone .wp-card { background: #0f1512 !important; }

/* explicit sizes, stated last so nothing inherited overrides them */
html body .witness-phone .wp-title-row b { font: 700 9.5px Inter, sans-serif !important; letter-spacing: -.01em !important; }
html body .witness-phone .wp-title-row em { font: 700 6px "JetBrains Mono", ui-monospace, monospace !important; letter-spacing: .1em !important; padding: 2px 5px !important; }
html body .witness-phone .wp-loc { font: 500 7px Inter, sans-serif !important; }
html body .witness-phone .wp-chips { flex-wrap: nowrap !important; white-space: nowrap; }
html body .witness-phone .wp-chips u { font: 600 5.5px "JetBrains Mono", ui-monospace, monospace !important; letter-spacing: .08em !important; }
html body .witness-phone .wp-value b { font: 700 12px Inter, sans-serif !important; }
html body .witness-phone .wp-value small { font: 500 5.5px "JetBrains Mono", ui-monospace, monospace !important; letter-spacing: .06em !important; }
html body .witness-phone .wp-strip,
html body .witness-phone .wp-strip span { font: 600 5.5px "JetBrains Mono", ui-monospace, monospace !important; letter-spacing: .06em !important; }