/* ============================================================
   INVESTOR PORTAL. A sign-in screen over the bridge photograph,
   then a one-page dashboard: a sticky left third for the
   welcome and the two carousels, glass panels on the right.
   The glass panels are the one place a corner is rounded.
   ============================================================ */

.ip { background: var(--band-4); overflow-x: clip; }
.ip b { font-weight: inherit; color: var(--ink); }
.ip input::placeholder { color: var(--ink-45); }

/* the 8.5px mono used for metadata */
.ip .hc-mono--xs, .ip-glass__meta { font-size: 8.5px; }

.ip-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 300;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gray);
}

/* ---- nav, shared ---- */
.ip-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 32px var(--gutter);
}
.ip-brand { display: flex; align-items: center; gap: 10px; }
.ip-brand__home { display: flex; align-items: center; gap: 10px; }
.ip-brand img { height: 18px; width: auto; }
.ip-brand .hc-display { font-size: 13px; letter-spacing: 0.1em; }
.ip-brand__home:hover .hc-display { color: var(--ink); }
.ip-brand a.hc-outline:hover { color: var(--ink); }
.ip-nav__link {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-62);
}
.ip-nav__link:hover { color: var(--ink); }
.ip-nav__right { display: flex; align-items: center; gap: 20px; flex: none; }

/* ============================================================
   SIGN IN
   ============================================================ */
.ip-signin {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding-bottom: 28px;
  background-color: var(--band-1);
  background-image:
    linear-gradient(to right,
      rgba(var(--band-1-rgb), 0.9) 0%,
      rgba(var(--band-1-rgb), 0.45) 40%,
      rgba(var(--band-1-rgb), 0.15) 64%,
      rgba(var(--band-1-rgb), 0.75) 100%),
    linear-gradient(to top,
      rgba(var(--band-4-rgb), 0.96) 0%,
      rgba(var(--band-4-rgb), 0.5) 34%,
      rgba(var(--band-1-rgb), 0) 58%,
      rgba(var(--band-1-rgb), 0.55) 100%),
    url('/images/hero-bluebridge.jpg');
  background-size: cover;
  background-position: 56% 40%;
}
.ip-signin[hidden] { display: none; }

.ip-signin__head {
  margin-top: auto;
  padding: 0 var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.ip-signin__head h1 { font-size: clamp(36px, 4.2vw, 56px); line-height: 0.94; font-weight: 900; }

.ip-form {
  margin-top: auto;
  padding: 0 var(--gutter);
  display: flex;
  flex-wrap: wrap;
  gap: 24px 32px;
  align-items: stretch;
}
.ip-pick {
  --acc: var(--orange);
  flex: 1 1 0;
  min-width: 150px;
  max-width: 230px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  color: var(--ink);
}
.ip-pick--prospect { --acc: var(--ink); }
.ip-pick__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--ink-22);
  transition: border-color var(--transition);
}
.ip-pick__name { display: flex; align-items: center; justify-content: space-between; }
.ip-pick__name .hc-display { font-size: 16px; line-height: 1; }
.ip-pick__box { width: 9px; height: 9px; border: 1px solid var(--orange); transition: background var(--transition); }
.ip-pick--prospect .ip-pick__box { border-color: var(--ink-62); }
.ip-pick__desc { font-size: 12.5px; font-weight: 300; line-height: 1.5; color: var(--gray); }
.ip-pick .ip-pick__body { border-top-color: var(--acc); }
.ip-pick .ip-pick__box { background: var(--acc); }

.ip-form__rule { width: 1px; background: var(--ink-22); }

.ip-fields {
  flex: 1 1 0;
  min-width: 220px;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ip-fields__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--ink-22);
}
.ip-fields input {
  padding: 6px 0 8px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--ink-28);
  border-radius: 0;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.08em;
  outline: none;
  transition: border-color var(--transition);
}
.ip-fields input:focus { border-bottom-color: var(--orange); }
.ip-submit {
  align-self: flex-start;
  display: flex;
  gap: 10px;
  padding: 4px 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: color 0.2s ease, gap 0.2s ease;
}
.ip-submit:hover { color: var(--orange); gap: 16px; }
.ip-submit[disabled] { opacity: 0.5; cursor: progress; }
.ip-submit[disabled]:hover { color: var(--ink); gap: 10px; }

/* a line under the form for what went wrong, or right */
.ip-msg {
  margin: 0;
  font-size: 12.5px;
  font-weight: 300;
  line-height: 1.5;
  color: #f0a58a;
}
.ip-msg.is-ok { color: var(--ink-62); }
.ip-msg[hidden] { display: none; }

/* the passkey and the access code, the two other ways in */
.ip-alts { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding-top: 12px; border-top: 1px solid var(--ink-14); }
.ip-alt {
  padding: 2px 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--ink-62);
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 300;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: left;
  transition: color var(--transition);
}
.ip-alt:hover { color: var(--ink); }
.ip-alt[hidden] { display: none; }
#passkeyIn { color: var(--ink); }
#passkeyIn:hover { color: var(--orange); }

/* 05 sign-in: the passkeys on the account, and the password */
.ip-keys { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px 40px; align-items: start; }
.ip-keys__list { display: flex; flex-direction: column; }
.ip-key {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--ink-14);
}
.ip-key:last-child { border-bottom: 1px solid var(--ink-14); }
.ip-key > span:first-child { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ip-key .hc-display { font-size: 14px; line-height: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ip-key .hc-mono { font-size: 8.5px; }
.ip-key button { margin-left: auto; flex: none; }
.ip-keys__none { margin: 0; padding: 14px 0; border-top: 1px solid var(--ink-14); border-bottom: 1px solid var(--ink-14); font-size: 13px; font-weight: 300; color: var(--gray); }
.ip-keys__side { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.ip-keys__lede { margin: 0; font-size: 13px; font-weight: 300; line-height: 1.65; color: var(--gray); }
.ip-keys__lede em { font-style: normal; color: var(--ink); }
.ip-pw { align-self: stretch; padding-top: 12px; border-top: 1px solid var(--ink-14); }
.ip-pw summary { cursor: pointer; list-style: none; color: var(--ink-62); transition: color var(--transition); }
.ip-pw summary::-webkit-details-marker { display: none; }
.ip-pw summary::after { content: ' +'; }
.ip-pw[open] summary::after { content: ' \2212'; }
.ip-pw summary:hover { color: var(--ink); }
.ip-pw__form { display: flex; flex-direction: column; gap: 12px; padding-top: 14px; max-width: 320px; }
.ip-pw__form input {
  padding: 6px 0 8px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--ink-28);
  border-radius: 0;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.08em;
  outline: none;
  transition: border-color var(--transition);
}
.ip-pw__form input:focus { border-bottom-color: var(--orange); }
@media (max-width: 900px) {
  .ip-keys { grid-template-columns: minmax(0, 1fr); }
}

.ip-signin__foot {
  padding: 0 var(--gutter);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
}
.ip-signin__foot a { color: var(--ink); }
.ip-signin__foot a:hover { color: var(--orange); }

/* ============================================================
   DASHBOARD
   ============================================================ */
.ip-dash {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--band-1);
}
.ip-dash[hidden] { display: none; }

.ip-ground {
  position: fixed;
  inset: -6%;
  background-image: url('/images/hero-bluebridge.jpg');
  background-size: cover;
  background-position: 56% 42%;
  transform: translate(-2%, 0) scale(1.07);
}
.ip-scrim {
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(to right,
      rgba(var(--band-1-rgb), 0.93) 0%,
      rgba(var(--band-1-rgb), 0.78) 38%,
      rgba(var(--band-1-rgb), 0.66) 100%),
    linear-gradient(to top,
      rgba(var(--band-4-rgb), 0.94) 0%,
      rgba(var(--band-4-rgb), 0.55) 52%,
      rgba(var(--band-1-rgb), 0.55) 100%);
}
.ip-tint {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.ip-tint--lm   { background: radial-gradient(ellipse 1000px 620px at 70% 100%, rgba(var(--orange-rgb), 0.2), transparent 70%); }
.ip-tint--lcjr { background: radial-gradient(ellipse 1000px 620px at 80% 100%, rgba(var(--lcjr-green-rgb), 0.18), transparent 70%); }
.ip-dash[data-hold="lm"] .ip-tint--lm,
.ip-dash[data-hold="lcjr"] .ip-tint--lcjr { opacity: 1; }

.ip-nav--sticky {
  position: sticky;
  top: 0;
  z-index: 5;
  min-width: 0;
  padding: 24px var(--gutter);
  background: linear-gradient(to bottom, rgba(var(--band-1-rgb), 0.92), rgba(var(--band-1-rgb), 0));
}
.ip-nav--sticky .hc-chip { align-self: center; }

.ip-grid {
  position: relative;
  z-index: 2;
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, 2fr);
  gap: clamp(32px, 4vw, 64px);
  padding: 16px var(--gutter) 48px;
}
.ip-divider { align-self: stretch; background: var(--ink-22); }

/* ---- left third ---- */
.ip-left {
  position: sticky;
  top: 72px;
  align-self: start;
  min-width: 0;
  min-height: calc(100vh - 96px);
  padding-bottom: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
}
.ip-intro { display: flex; flex-direction: column; gap: 18px; }
.ip-hello { display: flex; flex-direction: column; gap: 10px; }
.ip-dash .fx--soft[data-row] { transform-origin: 0 100%; }
.ip-welcome {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  font-size: clamp(17px, 1.6vw, 22px);
  font-weight: 300;
  line-height: 1.3;
}
.ip-welcome .is-name { font-weight: 400; }
.ip-namechip {
  padding: 1px 8px;
  border: 1px dashed var(--ink-45);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray);
}
.ip-head {
  min-height: 2em;
  font-size: clamp(22px, 2.6vw, 46px);
  line-height: 0.94;
  font-weight: 900;
  text-wrap: balance;
}
.ip-head .fx { transform-origin: 0 50%; }

/* ---- carousels ---- */
.ip-car { display: flex; flex-direction: column; gap: 12px; }
.ip-car__hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ip-car__paused { display: none; color: var(--ink-45); }
.ip-car.is-paused .ip-car__paused { display: inline; }
.ip-car__ctl { display: flex; align-items: center; gap: 12px; }
.ip-car__ctl button { padding: 2px 4px; border: 0; background: none; cursor: pointer; color: var(--ink); }
.ip-car__ctl button:hover { color: var(--orange); }

.ip-bar { display: flex; gap: 4px; }
.ip-bar button {
  flex: 1;
  padding: 6px 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.ip-bar button > span {
  position: relative;
  display: block;
  height: 2px;
  background: var(--ink-22);
  overflow: hidden;
}
.ip-bar i {
  position: absolute;
  inset: 0;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: var(--fill, var(--ink-62));
}
.ip-bar .is-done i { transform: scaleX(1); }
.ip-bar .is-run i { animation: ipProg var(--dur) linear forwards; }
.ip-car.is-paused .ip-bar i { animation-play-state: paused; }
@keyframes ipProg { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.ip-car__stack { min-height: 96px; }
.ip-car__stack--ann { min-height: 104px; }
.ip-card { display: flex; flex-direction: column; gap: 12px; color: var(--ink); }
.ip-card:hover { color: var(--ink); }
.ip-card__name { display: flex; align-items: center; gap: 12px; }
.ip-card__name img { height: 24px; width: auto; flex: none; }
.ip-card__name .hc-display,
.ip-card__text { font-size: 19px; line-height: 1.08; font-weight: 800; }
.ip-card__text { text-wrap: balance; }
.ip-card__pips { display: flex; align-items: center; gap: 4px; }
.ip-card__pips i { width: 9px; height: 9px; border: 1px solid rgba(var(--acc-rgb), 0.6); }
.ip-card__pips i.done { border-color: transparent; background: rgba(var(--acc-rgb), 0.5); }
.ip-card__pips i.cur { border-color: var(--acc); background: var(--acc); }
.ip-card__pips .hc-mono { margin-left: 10px; white-space: nowrap; }
.ip-card__pips .ip-card__count { margin-left: auto; padding-left: 8px; color: var(--acc); }
.ip-card__note { font-size: 8.5px; color: var(--ink-45); }
.ip-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ip-card__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.ip-card__who { color: var(--ink-45); }

.ip-tier {
  padding: 2px 6px;
  background: var(--tbg);
  color: var(--tfg);
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}
[data-tier="Public"]       { --tbg: var(--tier-public);       --tfg: var(--tier-public-ink); }
[data-tier="Confidential"] { --tbg: var(--tier-confidential); --tfg: var(--tier-confidential-ink); }
[data-tier="Restricted"]   { --tbg: var(--tier-restricted);   --tfg: var(--tier-restricted-ink); }
[data-tier="Internal"]     { --tbg: var(--tier-internal);     --tfg: var(--tier-internal-ink); }

/* ---- right two thirds ---- */
.ip-right {
  min-width: 0;
  min-height: calc(100vh - 96px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: end;
  gap: 16px;
  padding: 8px 0 16px;
}
.ip-glass {
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding: 28px 30px;
  border-radius: 20px;
  background: linear-gradient(160deg, rgba(var(--ink-rgb), 0.09), rgba(var(--ink-rgb), 0.025));
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  backdrop-filter: blur(24px) saturate(1.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.ip-glass--wide { grid-column: 1 / -1; }
.ip-glass__hd {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 300;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray);
}
.ip-glass__hd > span:first-child { display: flex; align-items: center; gap: 14px; }
.ip-glass__hd b { color: var(--orange); }

/* dashed placeholder box: every figure still to come from the ledger */
.ip-ph { align-self: flex-start; padding: 2px 7px; border: 1px dashed var(--ink-45); }
.ip-ph .hc-display { font-size: 18px; line-height: 1; font-weight: 900; color: var(--ink-28); font-variant-numeric: tabular-nums; }
.ip-ph--lg { padding: 2px 8px; }
.ip-ph--lg .hc-display { font-size: 26px; color: var(--ink-45); }
/* the same figures once they come from the ledger */
.ip-real { align-self: center; }
.ip-real--lg .hc-display { font-size: 26px; line-height: 1; font-weight: 900; color: var(--ink); font-variant-numeric: tabular-nums; }

/* 01 stake */
.ip-stake { display: flex; flex-wrap: wrap; align-items: center; gap: 28px clamp(28px, 3vw, 44px); }
.ip-donut { position: relative; width: 200px; height: 200px; flex: none; }
.ip-donut svg { display: block; overflow: visible; }
.ip-donut circle { fill: none; stroke-width: 20; }
.ip-donut__track { stroke: rgba(var(--ink-rgb), 0.07); }
.ip-donut__seg {
  cursor: pointer;
  transform-origin: 100px 100px;
  transition:
    stroke-dasharray 1.4s var(--ease-out-expo) var(--dl, 0s),
    transform 0.45s var(--ease-out-expo),
    opacity 0.3s ease;
}
.ip-donut__mid {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  pointer-events: none;
  text-align: center;
}
.ip-donut__mid .hc-mono { font-size: 8.5px; }
.ip-donut__mid .ip-ph { align-self: center; }

.ip-stake__side { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.ip-legend { display: flex; flex-direction: column; }
.ip-legend[hidden] { display: none; }
.ip-legend button {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border: 0;
  border-top: 1px solid var(--ink-14);
  background: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 300;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray);
  transition: opacity 0.3s ease, padding 0.3s var(--ease-out-expo);
}
.ip-legend button.is-dim { opacity: 0.45; }
.ip-legend button.is-act { padding-left: 10px; }
.ip-legend button.is-act .ip-legend__k { color: var(--ink); }
.ip-legend .ip-legend__k.is-you { color: var(--orange); }
.ip-legend__sw { width: 9px; height: 9px; flex: none; background: var(--c); }
.ip-legend__v { margin-left: auto; padding: 1px 6px; border: 1px dashed var(--ink-28); }
.ip-legend__v.is-real { border-color: transparent; color: var(--ink); font-variant-numeric: tabular-nums; }

.ip-outline { display: flex; flex-direction: column; gap: 12px; padding-top: 14px; border-top: 1px solid var(--ink-22); }
.ip-outline[hidden] { display: none; }
.ip-outline p { margin: 0; font-size: 14px; font-weight: 300; line-height: 1.6; color: var(--gray); }
.ip-outline em { font-style: normal; color: var(--ink); }
.ip-link { color: var(--ink); }

.ip-readouts { margin: 0; display: flex; flex-wrap: wrap; gap: 20px 40px; }
.ip-readouts > div { display: flex; flex-direction: column; gap: 8px; }
.ip-readouts dt { font-size: 8.5px; }
.ip-readouts dd { margin: 0; display: flex; }
.ip-readouts .is-real { padding: 3px 0; font-size: 18px; line-height: 1; font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* 02 letters */
.ip-letters { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 18px; }
.ip-letter { display: flex; flex-direction: column; gap: 14px; color: var(--ink); cursor: default; }
.ip-letter.is-locked { opacity: 0.45; }
.ip-letter__q { display: flex; align-items: baseline; gap: 8px; }
.ip-letter__q .hc-display { font-size: 34px; line-height: 0.9; font-weight: 900; transition: color var(--transition); }
.ip-letter:not(.is-locked):hover .hc-display { color: var(--orange); }
.ip-letter__y { font-family: var(--font-mono); font-size: 10px; font-weight: 300; letter-spacing: 0.16em; color: var(--gray); }
.ip-letter__body { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; border-top: 2px solid var(--tbg); }
.ip-letter__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ip-letter__ph {
  padding: 1px 6px;
  border: 1px dashed var(--ink-45);
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 300;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray);
}
.ip-letter .hc-mono:last-child { font-size: 8.5px; }

/* 03 papers and officers */
.ip-papers, .ip-officers { display: flex; flex-direction: column; }
.ip-papers { margin-bottom: -6px; }
.ip-paper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--ink-14);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 300;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: default;
}
.ip-paper.is-locked { color: var(--ink-45); }
.ip-paper > span:first-child { display: flex; align-items: center; gap: 10px; }
.ip-officers a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--ink-14);
}
.ip-officers a > span:first-child { display: flex; flex-direction: column; gap: 6px; }
.ip-officers .hc-display { font-size: 14px; line-height: 1; transition: color var(--transition); }
.ip-officers .hc-mono { font-size: 8.5px; }
.ip-officers a:hover .hc-display { color: var(--orange); }

/* 04 company record */
.ip-record { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 28px; }
.ip-record > div { display: flex; flex-direction: column; gap: 7px; padding: 12px 0; border-top: 1px solid var(--ink-14); }
.ip-record dt { font-size: 8.5px; }
.ip-record dd { margin: 0; font-size: 13.5px; font-weight: 300; color: var(--ink); }

/* ---- footer ---- */
.ip-foot {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 40px;
  padding: 18px var(--gutter);
  border-top: 1px solid var(--border);
  background: rgba(var(--band-4-rgb), 0.7);
}
.ip-foot .ip-kicker { letter-spacing: 0.16em; gap: 8px; }
.ip-foot__end { margin-left: auto; }

/* ============================================================
   NARROW. The portal has no phone design yet; under 900px it
   becomes one column, and the left third stops being sticky.
   ============================================================ */
@media (max-width: 900px) {
  .ip-nav { padding: 22px var(--gutter); }
  .ip-nav--sticky { padding: 16px var(--gutter); }
  .ip-nav--sticky .hc-chip { display: none; }
  .ip-form__rule { display: none; }
  .ip-nav { gap: 12px; }
  .ip-brand .hc-display, .ip-nav__link { white-space: nowrap; }
  .ip-form { gap: 28px 24px; }
  .ip-pick { min-width: 0; max-width: none; flex: 1 1 calc(50% - 12px); }
  .ip-fields { max-width: none; flex-basis: 100%; }

  .ip-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; padding: 16px var(--gutter) 40px; }
  .ip-divider { display: none; }
  .ip-left { position: relative; top: auto !important; min-height: 0; gap: 36px; }
  .ip-right { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .ip-glass { padding: 24px 22px; }
  .ip-stake { justify-content: center; }
  .ip-letters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ip-foot__end { margin-left: 0; }
}