/* ============================================================
   Corda Health: the product design system.
   Built to the Corda Health Brand Book (#3 Colour, #4 Typography,
   #9 Digital). One blue, Hanken Grotesk, warm paper ground,
   aqua reserved for health data. No pills, no serif.
   ============================================================ */
:root {
  /* Neutrals */
  --canvas: #FFFFFF;
  --page: #F7F2EA;
  --ink: #0E0F1A;
  --slate-600: #5A5D70;
  --slate-400: #9498AB;
  --hairline: #E9E2CF;
  --mist: #F1F2FE;

  /* Brand: clinical blue */
  --blue: #2B22F0;
  --blue-800: #14108F;

  /* Health data */
  --aqua: #12A1AE;
  --aqua-700: #0B7F8B;
  --aqua-100: #D8F2F4;
  --orange: #FFA94D;
  --orange-700: #B86A10;
  --amber-100: #FFF1DF;
  --coral: #FF6B81;
  --coral-700: #D6455C;
  --coral-100: #FFE4E9;
  --track: #F1F1F5;
  --bubble: #F5F5F8;

  /* Semantic aliases used by the app */
  --paper: var(--canvas);
  --paper-2: #FBF8F1;
  --paper-3: var(--mist);
  --paper-dark: #0E0F1A;
  --ink-80: rgba(14, 15, 26, .82);
  --ink-60: var(--slate-600);
  --ink-40: var(--slate-400);
  --ink-16: rgba(14, 15, 26, .16);
  --ink-08: rgba(14, 15, 26, .06);
  --rule: var(--hairline);
  --accent: var(--blue);
  --ok: var(--aqua);
  --ok-text: var(--aqua-700);
  --warn: var(--orange);
  --warn-text: var(--orange-700);
  --bad: var(--coral);
  --bad-text: var(--coral-700);

  --sans: "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;
  --text: var(--sans);

  --r-sm: 4px;
  --r: 6px;
  --r-lg: 8px;

  --e1: 0 1px 2px rgba(14,15,26,.04), 0 4px 12px rgba(14,15,26,.04);
  --e2: 0 12px 32px rgba(20,16,143,.10);
  --e3: 0 32px 80px rgba(20,16,143,.18);

  --ease: cubic-bezier(.32, .72, 0, 1);
  --maxw: 1200px;
  /* Type scale for micro-labels: one eyebrow tier, one label tier */
  --fs-eyebrow: .68rem;
  --fs-label: .64rem;
}
/* Ops watch: dark-first instrument mode (full token swap) */
html[data-ops="1"] {
  --canvas: #0E0F1A;
  --page: #0E0F1A;
  --ink: #F1F2FE;
  --ink-80: rgba(241, 242, 254, .85);
  --ink-60: rgba(241, 242, 254, .64);
  --ink-40: rgba(241, 242, 254, .45);
  --ink-16: rgba(241, 242, 254, .16);
  --ink-08: rgba(241, 242, 254, .07);
  --rule: rgba(241, 242, 254, .14);
  --track: #1B1D33;
  --paper: #0E0F1A;
  --paper-2: #151626;
  --paper-3: #1B1D33;
  --accent: #7B74FF; /* the one blue, lifted for dark surfaces (contrast) */
  --ok: #3FC1CE;
  --ok-text: #6ED4DE;
  --warn: #FFB066;
  --warn-text: #FFC084;
  --bad: #FF8A9B;
  --bad-text: #FFA9B6;
  --e2: 0 12px 32px rgba(0,0,0,.4);
}
/* ---------------- Base ---------------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  font-family: var(--sans);
  background: var(--page);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.55;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
.mono { font-family: var(--sans); font-variant-numeric: tabular-nums; }
::selection { background: var(--blue); color: #fff; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.hidden { display: none !important; }
/* ---------------- Masthead ---------------- */
.masthead {
  display: flex;
  align-items: center;
  gap: 2.2rem;
  margin: 0;
  width: 100%;
  padding: 1rem max(2rem, calc((100vw - var(--maxw)) / 2 + 2rem));
  background: var(--canvas);
  border-bottom: 1px solid var(--rule);
}
html[data-ops="1"] .masthead { background: transparent; }
.wordmark { display: flex; align-items: center; text-decoration: none; }
.lockup svg { height: 34px; width: auto; display: block; }
.lockup-paper { display: none; }
html[data-ops="1"] .lockup-screen { display: none; }
html[data-ops="1"] .lockup-paper { display: block; }
.mast-nav { flex: 1; display: flex; align-items: center; gap: 1.6rem; margin-left: 1rem; }
.nav-console, .nav-landing { flex: 1; display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; }
.m-link {
  font-size: .85rem;
  font-weight: 500;
  color: var(--slate-600);
  text-decoration: none;
  position: relative;
  padding: .4rem 0;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  transition: color .2s var(--ease);
}
.m-link svg { flex: none; color: var(--slate-400); transition: color .2s var(--ease); }
.m-link:hover svg { color: var(--ink); }
.m-link[aria-current="page"] svg { color: var(--blue); }
.m-link:hover { color: var(--ink); }
.m-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: .45rem;
  height: 2px;
  border-radius: 1px;
  background: var(--blue);
  transform: scaleX(0);
  transition: transform .25s var(--ease);
}
.m-link[aria-current="page"] { color: var(--blue); font-weight: 600; }
.m-link[aria-current="page"]::after { transform: scaleX(1); }
.abadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 .3rem;
  margin-left: .45rem;
  font-size: .62rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  border-radius: var(--r-sm);
  background: var(--amber-100);
  color: var(--orange-700);
}
.abadge.crit { background: var(--coral-100); color: var(--coral-700); }
html[data-ops="1"] .abadge { background: rgba(255, 176, 102, .16); color: var(--warn-text); }
html[data-ops="1"] .abadge.crit { background: rgba(255, 138, 155, .16); color: var(--bad-text); }
@keyframes badgePop {
  0% { transform: scale(1); }
  40% { transform: scale(1.45); }
  100% { transform: scale(1); }
}
.abadge.pop { animation: badgePop .5s var(--ease); }
.mast-right { margin-left: auto; display: flex; align-items: center; gap: .7rem; }
.dateline { font-size: .62rem; letter-spacing: .1em; color: var(--slate-400); font-weight: 500; white-space: nowrap; }
/* ---------------- Buttons ---------------- */
.act-btn {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.4rem;
  border-radius: var(--r);
  background: var(--blue);
  border: 1px solid var(--blue);
  color: #fff;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .02em;
  transition: background-color .2s var(--ease), box-shadow .2s var(--ease), transform .15s var(--ease);
}
.act-btn:hover { background: var(--blue-800); border-color: var(--blue-800); box-shadow: var(--e2); }
.act-btn:active { transform: scale(.985); }
.act-btn.quiet { background: var(--canvas); border-color: var(--hairline); color: var(--ink); box-shadow: var(--e1); }
.act-btn.quiet:hover { border-color: var(--slate-400); box-shadow: var(--e2); }
/* ---------------- View & sections ---------------- */
.view {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 2rem 5rem;
  min-height: 60dvh;
  flex: 1 0 auto;
  width: 100%;
}
/* Keyboard focus ring everywhere: except the view container, a programmatic handoff, not a tab stop */
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: var(--r-sm); }
.view:focus, .view:focus-visible { outline: none; }
.sec {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding: 1.9rem 0 1.2rem;
}
.sec-title {
  font-size: clamp(1.8rem, 3.6vw, 2.35rem);
  line-height: 1.08;
  font-weight: 500;
  letter-spacing: -.02em;
}
.sec-title .thin { font-weight: 300; color: var(--slate-400); }
.sec .index {
  font-size: var(--fs-eyebrow);
  letter-spacing: .16em;
  color: var(--blue);
  font-weight: 700;
  white-space: nowrap;
}
.sec-meta {
  display: flex;
  gap: 1.4rem;
  font-size: .68rem;
  letter-spacing: .08em;
  color: var(--slate-400);
  font-weight: 500;
  flex-wrap: wrap;
  font-variant-numeric: tabular-nums;
}
.sec-meta .red { color: var(--coral-700); font-weight: 600; }
/* ---------------- Summary band ---------------- */
.band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--canvas);
  border-radius: var(--r-lg);
  border: 1px solid var(--rule);
  box-shadow: var(--e1);
}
.band > div { padding: 1.4rem 1.5rem 1.2rem; border-right: 1px solid var(--hairline); }
.band > div:last-child { border-right: 0; }
.b-label { display: block; font-size: var(--fs-label); letter-spacing: .1em; color: var(--slate-400); font-weight: 600; margin-bottom: .45rem; }
.b-value {
  font-size: 2.5rem;
  font-weight: 300;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.b-value small { font-size: .95rem; font-weight: 500; color: var(--slate-400); margin-left: .15em; }
.b-foot {
  margin-top: .55rem;
  font-size: .62rem;
  letter-spacing: .08em;
  color: var(--slate-400);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: .45em;
}
.b-foot a { color: var(--blue); font-weight: 600; text-decoration: none; }
.b-foot a:hover { text-decoration: underline; }
.b-mark { width: 6px; height: 6px; border-radius: 2px; display: inline-block; }
.b-mark.ok { background: var(--ok); }
.b-mark.warn { background: var(--warn); }
.b-mark.bad { background: var(--bad); }
/* ---------------- Pulse grid & meter ---------------- */
.pulse-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  background: var(--canvas);
  border-radius: var(--r-lg);
  border: 1px solid var(--rule);
  box-shadow: var(--e1);
  margin-top: 1.2rem;
}
.pulse-left { border-right: 1px solid var(--hairline); padding: 1.8rem; }
.pulse-right { padding: 1.8rem; }
.meter { max-width: 420px; }
.meter-row { display: flex; align-items: baseline; gap: .5rem; }
.meter-num { font-size: 3.2rem; font-weight: 300; line-height: 1; font-variant-numeric: tabular-nums; }
.meter-pct { font-size: .66rem; letter-spacing: .1em; color: var(--slate-400); font-weight: 600; }
.meter-cap { font-size: .88rem; color: var(--slate-600); margin: .5rem 0 1rem; }
.meter-track {
  height: 8px;
  border-radius: var(--r-sm);
  background: var(--track);
  position: relative;
  overflow: hidden;
}
.meter-fill {
  position: absolute;
  inset: 0;
  border-radius: var(--r-sm);
  background: var(--blue);
  transform-origin: left;
  transform: scaleX(var(--pct, 0));
  transition: transform 1.1s var(--ease);
}
.meter-scale {
  display: flex;
  justify-content: space-between;
  font-size: .6rem;
  letter-spacing: .08em;
  color: var(--slate-400);
  font-weight: 500;
  margin-top: .4rem;
  font-variant-numeric: tabular-nums;
}
/* ---------------- Ledger ---------------- */
.ledger { display: flex; flex-direction: column; }
.led-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem 0;
  border-bottom: 1px solid var(--hairline);
}
.led-row:last-child { border-bottom: 0; }
.led-l {
  display: flex;
  align-items: center;
  gap: .6em;
  font-size: .74rem;
  letter-spacing: .06em;
  font-weight: 600;
  color: var(--slate-600);
}
.led-v {
  font-size: 1.2rem;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.led-v a { color: var(--blue); text-decoration: none; font-size: .85rem; font-weight: 600; }
.led-v a:hover { text-decoration: underline; }
/* Square status mark */
.rg-mark { width: 6px; height: 6px; border-radius: 2px; display: inline-block; flex: none; background: var(--slate-400); }
.rg-mark.green { background: var(--aqua); }
.rg-mark.amber { background: var(--orange); }
.rg-mark.red { background: var(--coral); }
/* ---------------- Register ---------------- */
.rg-head, .rg-row {
  display: grid;
  grid-template-columns: 3rem minmax(13rem, 1.6fr) .8fr .55fr .55fr 1.1fr 7.5rem;
  gap: 1rem;
  align-items: center;
}
.rg-head {
  padding: 1.1rem 1.25rem .6rem;
  font-size: .64rem;
  letter-spacing: .1em;
  color: var(--slate-400);
  font-weight: 600;
}
section.data-card {
  background: var(--canvas);
  border-radius: var(--r-lg);
  border: 1px solid var(--rule);
  box-shadow: var(--e1);
  margin-top: 1.2rem;
  overflow: hidden;
}
section.data-card .rg-head { padding-top: 1.3rem; }
section.data-card .rg-row:last-child { border-bottom: 0; }
.rg-row {
  position: relative;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--hairline);
  border-radius: 0;
  cursor: pointer;
  transition: background-color .15s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
.rg-row:hover { background: var(--paper-2); transform: translateY(-1px); box-shadow: var(--e1); z-index: 1; }
/* Hover arrow slides in, inviting the click */
.rg-row::after {
  content: '→';
  position: absolute;
  right: 1.25rem;
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  opacity: 0;
  color: var(--blue);
  font-weight: 600;
  font-size: .9rem;
  transition: transform .2s var(--ease), opacity .2s var(--ease);
  pointer-events: none;
}
.rg-row:hover::after, .rg-row:focus-visible::after { transform: translateY(-50%) translateX(0); opacity: 1; }
.rg-num { font-size: .68rem; color: var(--slate-400); font-weight: 600; font-variant-numeric: tabular-nums; }
.rg-id { display: flex; gap: .8rem; align-items: flex-start; min-width: 0; }
.rg-name { font-size: 1.05rem; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }
.rg-sub { font-size: .64rem; letter-spacing: .06em; color: var(--slate-400); font-weight: 500; margin-top: .22rem; }
.rg-val { font-variant-numeric: tabular-nums; font-size: 1rem; font-weight: 500; color: var(--ink); }
.rg-val.t-red { color: var(--coral-700); font-weight: 700; }
.rg-val.t-amber { color: var(--orange-700); font-weight: 700; }
.rg-val.t-green { color: inherit; }
.rg-bar { height: 8px; border-radius: var(--r-sm); background: var(--track); position: relative; overflow: hidden; }
.rg-bar i {
  position: absolute;
  inset: 0;
  border-radius: var(--r-sm);
  background: var(--aqua);
  transform-origin: left;
  transform: scaleX(var(--w, 0));
  transition: transform 1s var(--ease);
}
.rg-meta {
  font-size: .62rem;
  letter-spacing: .06em;
  color: var(--slate-400);
  text-align: right;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1.7;
}
/* ---------------- Patient detail ---------------- */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: 2rem;
  font-size: .7rem;
  letter-spacing: .08em;
  font-weight: 600;
  color: var(--slate-600);
  min-height: 48px;
  transition: color .2s var(--ease);
}
.back-link:hover { color: var(--blue); }
.back-link svg { width: 15px; height: 15px; }
.pd-band {
  display: grid;
  grid-template-columns: 7fr 5fr;
  background: var(--canvas);
  border-radius: var(--r-lg);
  border: 1px solid var(--rule);
  box-shadow: var(--e1);
  margin-top: 1rem;
}
.pd-main { border-right: 1px solid var(--hairline); padding: 2rem; }
.pd-side { padding: 2rem; }
.chip-row { display: flex; gap: .5rem; margin-top: 1rem; flex-wrap: wrap; }
.chip {
  border-radius: var(--r-sm);
  padding: .4em .75em;
  font-size: .64rem;
  letter-spacing: .06em;
  font-weight: 600;
  background: var(--track);
  color: var(--slate-600);
}
.chip.green { background: var(--aqua-100); color: var(--aqua-700); }
.chip.amber { background: var(--amber-100); color: var(--orange-700); }
.chip.neutral { background: var(--track); color: var(--slate-600); }
.v-band {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  background: var(--canvas);
  border-radius: var(--r-lg);
  border: 1px solid var(--rule);
  box-shadow: var(--e1);
  margin-top: 1.2rem;
  overflow: hidden;
}
.v-cell { padding: 1.4rem 1.3rem; border-right: 1px solid var(--hairline); }
.v-cell:last-child { border-right: 0; }
.v-l { font-size: var(--fs-label); letter-spacing: .1em; color: var(--slate-400); font-weight: 600; }
.v-v {
  font-size: 1.9rem;
  font-weight: 300;
  line-height: 1.15;
  margin: .5rem 0 .35rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.v-v small { font-size: .62rem; font-weight: 600; letter-spacing: .08em; color: var(--slate-400); margin-left: .3em; }
.v-s { font-size: .62rem; letter-spacing: .08em; font-weight: 600; }
.v-s.green { color: var(--ok-text); }
.v-s.amber { color: var(--warn-text); }
.v-s.red { color: var(--bad-text); }
.v-s.none { color: var(--slate-400); }
/* Chart */
.chart-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  padding: 2.6rem 0 1rem;
  flex-wrap: wrap;
}
.chart-title { font-size: 1.3rem; font-weight: 600; letter-spacing: -.01em; }
.chart-sub { font-size: .66rem; letter-spacing: .06em; color: var(--slate-400); font-weight: 500; margin-top: .25rem; }
.chart-wrap {
  background: var(--canvas);
  border-radius: var(--r-lg);
  border: 1px solid var(--rule);
  box-shadow: var(--e1);
  padding: 1.5rem;
}
.chart-wrap svg { width: 100%; height: auto; display: block; }
.gridline { stroke: var(--hairline); }
.ax { fill: var(--slate-400); font-size: 10px; font-family: var(--sans); font-weight: 500; }
.ax-bold { fill: var(--ink); font-size: 12px; font-weight: 700; font-family: var(--sans); }
.th-red { stroke: var(--coral); stroke-dasharray: 5 4; }
.th-amber { stroke: var(--orange); stroke-dasharray: 2 4; }
.th-grey { stroke: var(--hairline); stroke-dasharray: 2 4; }
.th-lab { fill: var(--slate-400); font-size: 9.5px; font-family: var(--sans); font-weight: 600; letter-spacing: .06em; }
.bar { fill: var(--aqua); opacity: .85; transition: opacity .2s var(--ease); }
.bar:hover { opacity: 1; }
.bar.red { fill: var(--coral); opacity: 1; }
.bar.amber { fill: var(--orange); opacity: 1; }
/* Tabs */
.tabs { display: flex; gap: .9rem; flex-wrap: wrap; }
.tab {
  font-size: .68rem;
  letter-spacing: .06em;
  font-weight: 600;
  color: var(--slate-400);
  padding: .5rem .8rem;
  border-radius: var(--r);
  min-height: 48px;
  transition: color .2s var(--ease), background-color .2s var(--ease);
}
.tab:hover { color: var(--ink); background: var(--mist); }
.tab.active { color: #fff; background: var(--blue); }
/* Schedule */
.sched { list-style: none; }
.sched li {
  display: flex;
  align-items: baseline;
  gap: .9rem;
  padding: .7rem 0;
  border-bottom: 1px solid var(--hairline);
}
.s-time { font-size: .72rem; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--slate-600); min-width: 3.2em; }
.s-mark { width: 9px; height: 9px; border-radius: 2px; background: var(--canvas); border: 1.5px solid var(--hairline); flex: none; align-self: center; }
.s-label { font-size: .92rem; color: var(--ink-80); flex: 1; }
.sched li.done .s-mark { background: var(--aqua); border-color: var(--aqua); }
.sched li.done .s-label { color: var(--slate-400); text-decoration: line-through; }
.s-req { font-size: .6rem; letter-spacing: .06em; color: var(--slate-400); font-weight: 600; }
/* ---------------- Alerts ---------------- */
/* One tag component in two contexts: Notices (light) and the Ops chronology (dark) */
.a-tag, .ops-tag {
  font-size: var(--fs-label);
  letter-spacing: .08em;
  font-weight: 700;
  border-radius: var(--r-sm);
  padding: .4em .7em;
  white-space: nowrap;
  text-align: center;
}
.a-tag.red, .ops-tag.red { background: var(--coral-100); color: var(--coral-700); }
.a-tag.amber, .ops-tag.amber { background: var(--amber-100); color: var(--orange-700); }
.a-tag.green, .ops-tag.green { background: var(--aqua-100); color: var(--aqua-700); }
.ops-tag.grey { background: var(--ink-08); color: var(--ink-40); }
.alert-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "tag who  time"
    "msg msg  act";
  gap: .45rem 1rem;
  align-items: center;
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid var(--hairline);
  transition: background-color .15s var(--ease);
}
.alert-row:not(.acked):hover { background: var(--paper-2); }
.alert-row .a-tag { grid-area: tag; font-size: .58rem; }
.alert-row .a-who { grid-area: who; font-weight: 600; font-size: .88rem; }
.alert-row .a-time { grid-area: time; justify-self: end; }
.alert-row .a-msg { grid-area: msg; }
.alert-row .a-act { grid-area: act; justify-self: end; min-width: 0; }
.alert-row:last-child { border-bottom: 0; }
@keyframes ackPulse {
  0% { box-shadow: 0 0 0 0 rgba(43, 34, 240, .30); }
  100% { box-shadow: 0 0 0 14px rgba(43, 34, 240, 0); }
}
.alert-row.acking { animation: ackPulse .55s var(--ease); }
.alert-row.acked { opacity: .55; }
.alert-row.empty { display: block; padding: 1.2rem 1.25rem; }
.a-who { font-size: .85rem; font-weight: 600; }
.a-who a { text-decoration: none; color: var(--blue); }
.a-who a:hover { text-decoration: underline; }
.a-msg { font-size: .95rem; color: var(--ink); line-height: 1.5; }
.a-time { font-size: .64rem; letter-spacing: .06em; color: var(--slate-400); font-weight: 500; white-space: nowrap; }
.a-act { min-width: 9.5rem; text-align: right; }
.act-btn.sm, .a-act .act-btn { min-height: 44px; padding: 0 1rem; font-size: .7rem; }
.stitle-row {
  padding: 2rem 0 .6rem;
  font-size: var(--fs-label);
  letter-spacing: .1em;
  color: var(--ink-40);
  font-weight: 600;
  font-family: var(--sans);
}
/* ---------------- Chat ---------------- */
.chat-plain {
  background: var(--canvas);
  border-radius: var(--r-lg);
  border: 1px solid var(--rule);
  box-shadow: var(--e1);
  margin-top: 2rem;
  overflow: hidden;
}
.chat-thread { padding: 1.8rem; display: flex; flex-direction: column; gap: 1.2rem; }
.msg { max-width: 72%; }
.msg.me { align-self: flex-end; text-align: right; }
.m-time { font-size: .62rem; letter-spacing: .06em; color: var(--slate-400); font-weight: 600; margin-bottom: .3rem; }
.m-text {
  font-size: .95rem;
  line-height: 1.55;
  color: var(--ink-80);
  background: var(--bubble);
  border-radius: var(--r);
  padding: .8rem 1rem;
  display: inline-block;
  text-align: left;
}
.msg.me .m-text { background: var(--blue); color: #fff; }
.chat-form { display: flex; border-top: 1px solid var(--hairline); }
.chat-form input {
  flex: 1;
  border: 0;
  background: var(--canvas);
  padding: 1.1rem 1.4rem;
  font: inherit;
  color: inherit;
  min-height: 56px;
}
.chat-form input:focus { outline: none; background: var(--mist); box-shadow: inset 0 0 0 1px var(--blue); }
.chat-form input.shake { animation: shake .4s var(--ease); }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(4px); }
  75% { transform: translateX(-2px); }
}
.chat-form .act-btn { border-radius: 0; }
.chat-note {
  padding: .8rem 1.4rem;
  font-size: .62rem;
  letter-spacing: .06em;
  color: var(--slate-400);
  font-weight: 500;
  border-top: 1px solid var(--hairline);
}
/* ---------------- Colophon ---------------- */
.colophon {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  max-width: var(--maxw);
  margin: 0 auto;
  width: 100%;
  flex-shrink: 0;
  padding: 1.4rem 2rem 2.2rem;
  font-size: .62rem;
  letter-spacing: .08em;
  color: var(--slate-400);
  font-weight: 500;
}
.kbd { font-weight: 700; color: var(--slate-600); }
/* ---------------- Toasts ---------------- */
.toasts {
  position: fixed;
  right: 1.4rem;
  bottom: 1.4rem;
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  max-width: 340px;
}
.toast {
  position: relative;
  overflow: hidden;
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--blue);
  border-radius: var(--r);
  box-shadow: var(--e2);
  padding: .85rem 1rem;
  cursor: pointer;
  animation: slipIn .45s var(--ease);
}
/* Perceivable lifetime: the life-bar counts down the toast's remaining time */
.toast::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: var(--blue);
  opacity: .35;
  transform-origin: left;
  animation: toastLife var(--life, 6s) linear forwards;
}
.toast.amber::after { background: var(--orange); }
.toast.red::after { background: var(--coral); }
.toast.teal::after, .toast.green::after { background: var(--aqua); }
@keyframes toastLife { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.toast .t-close {
  position: absolute;
  top: .25rem;
  right: .25rem;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--r);
  background: transparent;
  color: var(--slate-400);
  font-size: .8rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.toast .t-close:hover { background: var(--mist); color: var(--ink); }
.toast.leaving { transform: translateX(24px); opacity: 0; transition: transform .3s var(--ease), opacity .3s var(--ease); }
.toast.amber { border-left-color: var(--orange); }
.toast.red { border-left-color: var(--coral); }
.toast.teal, .toast.green { border-left-color: var(--aqua); }
.t-title { font-size: var(--fs-label); letter-spacing: .1em; font-weight: 700; margin-bottom: .25rem; }
.t-body { font-size: .85rem; color: var(--slate-600); }
@keyframes slipIn {
  from { transform: translateY(12px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
/* ---------------- Ops watch ---------------- */
.ops-band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--paper-2);
  border-radius: var(--r-lg);
  border: 1px solid var(--rule);
  box-shadow: var(--e1);
  margin-top: 1.2rem;
}
.ops-band > div { padding: 1.3rem 1.5rem; border-right: 1px solid var(--rule); }
.ops-band > div:last-child { border-right: 0; }
.tl-wrap {
  background: var(--paper-2);
  border-radius: var(--r-lg);
  border: 1px solid var(--rule);
  box-shadow: var(--e1);
  padding: 1.4rem 1.4rem .8rem;
  margin-top: 1.2rem;
}
.tl-wrap svg { width: 100%; height: auto; display: block; }
.tl-axis { stroke: var(--ink-16); }
.tl-hourline { stroke: var(--ink-08); }
.tl-lane { font-size: 10px; font-family: var(--sans); font-weight: 600; letter-spacing: .1em; fill: var(--ink-40); }
.tl-hour { font-size: 10px; font-family: var(--sans); font-weight: 500; fill: var(--ink-40); font-variant-numeric: tabular-nums; }
.tl-crit { fill: var(--bad); }
.tl-rout { fill: var(--warn); }
.tl-ack { fill: var(--ok); }
.tl-rt-stem { stroke: var(--accent); stroke-width: 1.5; opacity: .8; }
.tl-rt-stem.open { stroke-dasharray: 3 3; opacity: 1; }
.tl-rt-cap { fill: var(--accent); }
.tl-legend {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: 0 0 .7rem;
  font-size: .64rem;
  letter-spacing: .1em;
  color: var(--ink-40);
  font-weight: 600;
}
.tl-legend .k { display: inline-flex; align-items: center; gap: .45em; }
.tl-legend .sw { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
/* The legend swatches are HTML spans: SVG fill classes do not paint them.
   Give the colour key real backgrounds so the timeline can be decoded. */
.tl-legend .sw.tl-crit { background: var(--bad); }
.tl-legend .sw.tl-rout { background: var(--warn); }
.tl-legend .sw.tl-ack { background: var(--ok); }
.tl-legend .sw-stem { width: 14px; height: 2px; border-radius: 1px; background: var(--accent); }
.tl-legend .sw-stem.open { background: none; border-top: 2px dashed var(--accent); height: 0; }
.ops-rows {
  background: var(--paper-2);
  border-radius: var(--r-lg);
  border: 1px solid var(--rule);
  box-shadow: var(--e1);
  margin-top: 1.2rem;
  overflow: hidden;
}
.ops-row {
  display: grid;
  grid-template-columns: 4.6rem 9rem 1fr 7rem 7.5rem;
  gap: 1.1rem;
  align-items: center;
  padding: .9rem 1.25rem;
  border-bottom: 1px solid var(--rule);
}
.ops-row:last-child { border-bottom: 0; }
.ops-row.open { background: var(--ink-08); }
.ops-t { font-size: .74rem; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink-60); }
.ops-who { font-size: .85rem; font-weight: 600; }
.ops-who a { text-decoration: none; color: var(--accent); }
.ops-who a:hover { text-decoration: underline; }
.ops-what { font-size: .9rem; color: var(--ink-80); }
.ops-resp {
  font-size: .66rem;
  letter-spacing: .04em;
  color: var(--ink-40);
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.ops-resp.hot { color: var(--bad-text); }
html[data-ops="1"] .ops-tag.red { background: rgba(255,138,155,.14); color: var(--bad-text); }
html[data-ops="1"] .ops-tag.amber { background: rgba(255,176,102,.14); color: var(--warn-text); }
html[data-ops="1"] .ops-tag.green { background: rgba(63,193,206,.14); color: var(--ok-text); }
/* ---------------- Reveal choreography ---------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
[data-reveal].on { opacity: 1; transform: none; }
/* ---------------- Responsive ---------------- */
@media (max-width: 1020px) {
  .rg-head, .rg-row { grid-template-columns: 2.4rem minmax(10rem, 1.5fr) .8fr .55fr 1.1fr 6.5rem; }
  .rg-head span:nth-child(5), .rg-row > .rg-val:nth-child(5) { display: none; }
  .v-band { grid-template-columns: repeat(3, 1fr); }
  .v-cell:nth-child(3n) { border-right: 0; }
  .v-cell { border-bottom: 1px solid var(--hairline); }
  .pd-band, .pulse-grid { grid-template-columns: 1fr; }
  .pd-main, .pulse-left { border-right: 0; border-bottom: 1px solid var(--hairline); }
}
@media (max-width: 860px) {.mast-nav { margin-left: 0; gap: 1.1rem; flex-wrap: wrap; }
.nav-console, .nav-landing { gap: 1.1rem; }
.m-link { font-size: .8rem; }
.dateline { display: none; }
}
@media (max-width: 768px) {.view { padding: 0 1.25rem 3.5rem; }
.tl-wrap, .chart-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tl-wrap svg, .chart-wrap svg { min-width: 640px; }
.masthead { padding: .75rem max(1.25rem, calc((100vw - var(--maxw)) / 2 + 1.25rem)); gap: .55rem 1rem; flex-wrap: wrap; }

  /* Row 1: wordmark + right slot (demo CTA on the landing);
row 2: nav takes the full width */
  .wordmark { order: 1; }
.mast-right { order: 2; }
.mast-nav { order: 3; flex-basis: 100%; margin-left: 0; }
.mast-right { gap: .5rem; }
.mast-right .act-btn { min-height: 44px; padding: 0 .9rem; font-size: .72rem; }
.chat-form input { font-size: 16px; }
.colophon { flex-direction: column; align-items: center; text-align: center; gap: .4rem; }
.sec { padding-top: 2rem; }
.band { grid-template-columns: repeat(2, 1fr); }
.band > div:nth-child(2n) { border-right: 0; }
.band > div:nth-child(-n+2) { border-bottom: 1px solid var(--hairline); }
.rg-head { display: none; }
.rg-head, .rg-row { grid-template-columns: 1.8rem 1fr auto; }
.rg-row { gap: .7rem; }
.rg-row > .rg-val:nth-child(n+4):nth-child(-n+6),
  .rg-row > .rg-bar { display: none; }
.rg-meta { display: none; }
.alert-row { grid-template-columns: auto 1fr; grid-template-areas: "tag time" "who who" "msg msg" "act act"; }
.alert-row .a-act { justify-self: stretch; text-align: right; min-width: 0; }
.alert-row .a-act .act-btn { width: 100%; }
.v-band { grid-template-columns: repeat(2, 1fr); }
.v-cell:nth-child(2n) { border-right: 0; }
.chat-thread { padding: 1.2rem; }
.msg { max-width: 88%; }
.toasts { left: 1rem; right: 1rem; max-width: none; }
.ops-band { grid-template-columns: repeat(2, 1fr); }
.ops-band > div:nth-child(2n) { border-right: 0; }
.ops-band > div:nth-child(-n+2) { border-bottom: 1px solid var(--rule); }
.ops-row { grid-template-columns: 4rem 1fr auto; }
.ops-row .ops-what { grid-column: 1 / -1; order: 4; }
.ops-row .ops-tag { display: none; }
}
@media (prefers-reduced-motion: reduce) {* { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
/* Keep the hover arrow clear of the row's last text column ("Logged") */
section.data-card .rg-head > span:last-child { padding-right: 2.75rem; }
section.data-card .rg-row .rg-meta { padding-right: 2.75rem; }
/* Consistency: repeated inline styles retired to the sheet */
.b-foot a, .led-v a { text-decoration: underline; text-underline-offset: 3px; }
.rg-head span:last-child { text-align: right; }
.pulse-right .a-msg { padding: 1rem 0; }
.led-v.watch { font-size: .85rem; }
/* Consistency: inline styles retired from the view generators */
.rg-id-main { min-width: 0; }
.led-v.small { font-size: .88rem; }
.led-note { font-size: .55rem; letter-spacing: .14em; color: var(--ink-40); }
.meter.gap { margin-top: 2rem; }
/* Critical toasts persist until dismissed: no countdown bar on an escalation */
.toast.red::after { animation: none; opacity: .55; }



/* ============================================================
   Corda Health: Landing
   Soft gradient hero, live plate, Night footer
   ============================================================ */
/* ---------------- Landing chrome swap ---------------- */
body.on-product .nav-console { display: none; }
body:not(.on-product) .nav-landing { display: none; }
/* The header demo CTA belongs to the landing only */
.mast-cta { display: none; }
body.on-product .mast-cta { display: inline-flex; }
a.act-btn { text-decoration: none; }
/* ---------------- Landing nav (in-view) ---------------- */

/* ---------------- Hero ---------------- */
.lp-hero {
  position: relative;
  overflow: visible;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 2.4rem calc(50vw - 50%) 0;
}
.lp-hero-bg {
  position: absolute;
  inset: 0 0 -30rem 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(247, 242, 234, 0) 46%, #F7F2EA 97%),
    radial-gradient(760px 500px at 88% -10%, rgba(43, 34, 240, .17), rgba(43, 34, 240, 0) 62%),
    radial-gradient(680px 540px at 76% 118%, rgba(18, 161, 174, .14), rgba(18, 161, 174, 0) 60%),
    linear-gradient(118deg, #F7F2EA 0%, #F1F2FE 48%, #DDE4FE 100%);
}
.lp-hero-grid { position: relative; z-index: 1; }
.lp-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: 3.5rem;
  align-items: center;
  padding: 3.2rem 0 5.4rem;
}
.lp-kicker {
  font-size: var(--fs-eyebrow);
  letter-spacing: .16em;
  font-weight: 700;
  color: var(--blue-800);
  margin-bottom: 1.4rem;
  display: flex;
  align-items: center;
  gap: .8rem;
}
.lp-kicker::before {
  content: "";
  width: 34px;
  height: 3px;
  flex: none;
  background: linear-gradient(90deg, #14108F, #2B22F0 45%, #7B74FF);
}
.lp-title {
  font-size: clamp(2.6rem, 5.2vw, 4.2rem);
  line-height: 1.04;
  letter-spacing: -.03em;
  font-weight: 800;
  color: var(--ink);
}
.lp-title .thin { font-weight: 500; color: var(--blue); }
.lp-lede {
  margin-top: 1.4rem;
  max-width: 34em;
  font-size: 1.06rem;
  line-height: 1.65;
  color: var(--slate-600);
}
.lp-cta-row { display: flex; gap: .9rem; margin-top: 2.2rem; flex-wrap: wrap; }
.lp-quiet-note {
  margin-top: 1.4rem;
  font-size: .64rem;
  letter-spacing: .06em;
  color: var(--slate-600);
  font-weight: 500;
}
.lp-hero .act-btn { background: var(--blue); color: #F7F2EA; border-color: transparent; }
.lp-hero .act-btn.quiet { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
/* Live console plate */
.lp-plate {
  position: relative;
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--e2);
  padding: 1.5rem;
}
.lp-plate-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 1.1rem;
}
.lp-plate-title { font-size: var(--fs-label); letter-spacing: .1em; font-weight: 700; color: var(--slate-400); }
.lp-plate-live { font-size: var(--fs-label); letter-spacing: .1em; font-weight: 700; color: var(--aqua-700); display: inline-flex; align-items: center; gap: .4em; }
.lp-plate-live .dot { width: 6px; height: 6px; border-radius: 1px; background: var(--aqua); }
.lp-plate-vals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.lp-plate-vals > div { padding: 1rem; background: var(--paper-2); border-radius: var(--r); }
.lp-v-label { font-size: var(--fs-label); letter-spacing: .1em; color: var(--slate-400); font-weight: 600; }
.lp-v-num {
  font-size: 2rem;
  font-weight: 300;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.lp-v-num small { font-size: .58rem; font-weight: 600; letter-spacing: .08em; color: var(--slate-400); margin-left: .25em; }
.lp-plate-chart { margin-top: 1.1rem; }
.lp-plate-chart svg { width: 100%; height: auto; display: block; }
.lp-plate-foot {
  margin-top: 1rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: .6rem;
  letter-spacing: .08em;
  color: var(--slate-400);
  font-weight: 500;
}
/* Sparkline */
.lp-spark { fill: none; stroke: var(--blue); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.lp-spark-dot { fill: var(--blue); }
/* Schedule mini list (bento) */
.lp-sched-mini { list-style: none; margin-top: 1.4rem; }
.lp-sched-mini li { display: flex; align-items: center; gap: .7rem; padding: .55rem 0; border-bottom: 1px solid var(--hairline); font-size: .86rem; color: var(--ink-80); }
.lp-sched-mini li:last-child { border-bottom: 0; }
.lp-sched-mini li.done { color: var(--slate-400); text-decoration: line-through; }
.lp-sched-mini .s-mark { width: 9px; height: 9px; border-radius: 2px; flex: none; background: var(--canvas); border: 1.5px solid var(--hairline); }
.lp-sched-mini li.done .s-mark { background: var(--aqua); border-color: var(--aqua); }
/* Footer misc */
.lp-foot-col button {
  color: rgba(247, 242, 234, .72);
  font-size: .8rem;
  min-height: 44px;
  padding: 0 1.1rem;
}
.lp-foot-col button:hover { color: var(--canvas); }
.lp-foot-note { margin-top: .8rem; font-size: .78rem; line-height: 1.6; color: rgba(247, 242, 234, .45); }
/* ---------------- Sections ---------------- */
.lp-sec { padding: 5.5rem 0 0; position: relative; z-index: 1; }
@media (max-width: 768px) {
  .lp-hero-bg { inset: 0 0 -20rem 0; }
}
.lp-sec-head { max-width: 44rem; margin-bottom: 2.4rem; }
.lp-sec-index { font-size: var(--fs-eyebrow); letter-spacing: .16em; font-weight: 700; color: var(--blue); margin-bottom: .7rem; }
.lp-sec-title { font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height: 1.12; letter-spacing: -.02em; font-weight: 800; color: var(--ink); }
.lp-sec-title .thin { font-weight: 500; color: var(--slate-400); }
/* Bento */
.lp-bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.1rem;
}
.lp-cell {
  background: var(--canvas);
  border-radius: var(--r-lg);
  border: 1px solid var(--rule);
  box-shadow: var(--e1);
  padding: 2rem;
  grid-column: span 6;
}
.lp-cell.wide { grid-column: span 7; }
.lp-cell.narrow { grid-column: span 5; }
.lp-cell-k { font-size: var(--fs-eyebrow); letter-spacing: .16em; font-weight: 700; color: var(--blue); margin-bottom: .8rem; }
.lp-cell-t { font-size: 1.35rem; font-weight: 500; letter-spacing: -.01em; color: var(--ink); margin-bottom: .6rem; }
.lp-cell-d { font-size: .95rem; line-height: 1.6; color: var(--slate-600); }
.lp-cell-fig {
  margin-top: 1.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--hairline);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.lp-cell-fig > div { font-variant-numeric: tabular-nums; }
.lp-cell-fig .n { font-size: 1.5rem; font-weight: 300; color: var(--ink); line-height: 1.2; }
.lp-cell-fig .l { font-size: .58rem; letter-spacing: .08em; color: var(--slate-400); font-weight: 600; margin-top: .2rem; }


/* Threshold table: the markup is a plain table;
these are its real rules */
.lp-th-table { width: 100%; margin-top: 1.4rem; border-top: 1px solid var(--hairline); border-collapse: collapse; }
.lp-th-table td { padding: .6rem 0; border-bottom: 1px solid var(--hairline); font-size: .82rem; color: var(--slate-600); font-variant-numeric: tabular-nums; }
.lp-th-table td:first-child { color: var(--ink); font-weight: 600; padding-right: 1rem; }
.lp-th-table td:last-child { text-align: right; }
/* Outcomes strip */
.lp-outcomes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
}
.lp-out {
  background: var(--canvas);
  border-radius: var(--r-lg);
  border: 1px solid var(--rule);
  box-shadow: var(--e1);
  padding: 2rem;
}
.lp-out .n { font-size: 2.8rem; font-weight: 300; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--ink); }
.lp-out .n small { font-size: .9rem; font-weight: 500; color: var(--slate-400); margin-left: .1em; }
.lp-out .l { margin-top: .5rem; font-size: .66rem; letter-spacing: .1em; color: var(--slate-400); font-weight: 600; }
/* Pricing */
.lp-tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
  align-items: stretch;
}
.lp-tier {
  background: var(--canvas);
  border-radius: var(--r-lg);
  border: 1px solid var(--rule);
  box-shadow: var(--e1);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  position: relative;
}
.lp-tier { transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.lp-tier.featured { box-shadow: var(--e3); border: 1px solid var(--blue); }
.lp-tier:hover { transform: translateY(-3px); box-shadow: var(--e3); }
.lp-tier-tag {
  position: absolute;
  top: -11px;
  left: 2rem;
  background: var(--blue);
  color: var(--canvas);
  font-size: .58rem;
  letter-spacing: .14em;
  font-weight: 700;
  border-radius: var(--r-sm);
  padding: .45em .8em;
}
.lp-tier-k { font-size: var(--fs-eyebrow); letter-spacing: .16em; font-weight: 700; color: var(--blue); margin-bottom: .9rem; }
.lp-tier-t { font-size: 1.4rem; font-weight: 500; letter-spacing: -.01em; color: var(--ink); }
.lp-tier-d { font-size: .88rem; color: var(--slate-600); margin-top: .4rem; line-height: 1.55; }
.lp-price { margin: 1.6rem 0; padding: 1.1rem 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.lp-price .amount { font-size: 2.6rem; font-weight: 300; line-height: 1; font-variant-numeric: tabular-nums; color: var(--ink); }
.lp-price .per { font-size: .62rem; letter-spacing: .1em; color: var(--slate-400); font-weight: 600; margin-left: .4em; }
.lp-tick-list { list-style: none; flex: 1; }
.lp-tick-list li {
  display: flex;
  gap: .6em;
  align-items: baseline;
  font-size: .88rem;
  color: var(--ink-80);
  padding: .32rem 0;
}
.lp-tick-list li::before { content: "▪"; color: var(--aqua); font-size: .7em; flex: none; }
.lp-tick-list li.dim { color: var(--slate-400); }
.lp-tick-list li.dim::before { content: "·"; color: var(--slate-400); }
.lp-tier .act-btn { margin-top: 1.5rem; justify-content: center; width: 100%; }
.lp-price-note { margin-top: 1.2rem; font-size: .64rem; letter-spacing: .04em; color: var(--slate-400); font-weight: 500; }
/* ---------------- Footer ---------------- */
.lp-footer {
  margin-top: 6rem;
  background: #1B1A17;
  color: rgba(247, 242, 234, .72);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.lp-footer-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 4rem 2rem 2rem;
}
.lp-foot-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 2.5rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(247, 242, 234, .14);
}
.foot-lockup svg { height: 44px; width: auto; display: block; }
.lp-foot-brand p { margin-top: .9rem; font-size: .88rem; line-height: 1.65; max-width: 26em; }
.lp-foot-col .h {
  font-size: .6rem;
  letter-spacing: .14em;
  font-weight: 700;
  color: rgba(247, 242, 234, .45);
  margin-bottom: 1rem;
}
.lp-foot-col ul { list-style: none; }
.lp-foot-col li { padding: .28rem 0; }
.lp-foot-col a { color: rgba(247, 242, 234, .72); text-decoration: none; font-size: .86rem; display: inline-block; padding: .7rem 0; }
.lp-foot-col a:hover { color: var(--canvas); }
.lp-foot-base {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 1.6rem;
  font-size: .62rem;
  letter-spacing: .08em;
  color: rgba(247, 242, 234, .4);
  font-weight: 500;
}
/* ---------------- Responsive ---------------- */
@media (max-width: 1020px) {
  .lp-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .lp-hero-grid > * { min-width: 0; }
  .lp-cell, .lp-cell.wide, .lp-cell.narrow { grid-column: span 12; }
  .lp-foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {.lp-hero { padding-top: 2.5rem; }
.lp-sec { padding-top: 3.5rem; }
.lp-outcomes, .lp-tiers { grid-template-columns: 1fr; }
.lp-plate-vals { grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.lp-v-num { font-size: 1.5rem; }
.lp-footer-inner { padding: 3rem 1.25rem 1.5rem; }
.lp-foot-grid { grid-template-columns: 1fr; gap: 2rem; }
}
/* ---------------- Access request form ---------------- */
.lp-title-lg { font-size: clamp(2rem, 4.5vw, 3rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; margin: .9rem 0 0; }
.lp-title-lg .thin { font-weight: 500; color: var(--slate-400); }
.lp-lede-sm { max-width: 34rem; color: var(--slate-600); font-size: 1.02rem; line-height: 1.65; margin: 1.1rem 0 0; }
.lp-lede-sm strong { color: var(--ink); font-weight: 600; }
.access-wrap { max-width: 34rem; margin: 0 auto; padding: 3.5rem 0 5rem; }
.af-card {
  margin-top: 2.2rem;
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--e1);
  padding: 2rem;
}
.af-card.done { text-align: left; }
.af-field { display: block; margin-bottom: 1.25rem; }
.af-label { display: block; font-size: var(--fs-label); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--slate-600); margin-bottom: .45rem; }
.af-label em { color: var(--blue); font-style: normal; }
.af-field input, .af-field textarea {
  width: 100%;
  border: 1px solid var(--hairline);
  background: var(--canvas);
  padding: .8rem 1rem;
  font: inherit;
  font-size: 16px; /* iOS zoom guard */
  color: var(--ink);
  border-radius: var(--r);
}
.af-field input:focus, .af-field textarea:focus { outline: none; background: var(--canvas); border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
.af-field textarea { resize: vertical; min-height: 84px; }
.af-field.bad input, .af-field.bad textarea { border-color: var(--coral-700); }
.af-err { display: block; min-height: 1.1rem; font-size: .78rem; color: var(--coral-700); margin-top: .3rem; }
.af-two { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.af-foot { display: flex; align-items: center; gap: 1.1rem; margin-top: 1.6rem; }
.af-note { font-size: .8rem; color: var(--slate-600); }
.af-check { width: 44px; height: 44px; border: 1.5px solid var(--ok-text); color: var(--ok-text); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; margin-bottom: 1.2rem; }
.af-done-t { font-size: 1.3rem; font-weight: 700; letter-spacing: -.02em; margin: 0 0 .4rem; }
.af-done-d { color: var(--slate-600); font-size: .92rem; margin: 0 0 1.6rem; }
.af-done-steps { border-top: 1px solid var(--hairline); }
.af-step { display: flex; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--hairline); font-size: .92rem; line-height: 1.55; }
.af-step .n { font-family: var(--sans); font-variant-numeric: tabular-nums; color: var(--blue); font-weight: 600; }
.af-done-actions { display: flex; gap: .9rem; flex-wrap: wrap; margin-top: 1.6rem; }
@media (max-width: 768px) {.af-card { padding: 1.4rem 1.1rem; }
.af-two { grid-template-columns: 1fr; gap: 0; }
.af-foot { flex-direction: column; align-items: flex-start; gap: .8rem; }
.af-foot .act-btn { width: 100%; min-height: 48px; }
}


/* The landing page carries its own footer;
the app colophon stands down there */
body.on-product .colophon { display: none; }
/* The landing footer ends the page: it breaks out of the view's side and
   bottom padding, so the dark block runs the full column width and sits
   flush at the bottom, as its square bottom corners intend */
body.on-product .lp-footer { margin-left: -2rem; margin-right: -2rem; margin-bottom: -5rem; }

@media (max-width: 640px) {
  .lp-hero-grid { padding: 2rem 0 3.8rem; }
}

@media (max-width: 768px) {
  body.on-product .lp-footer { margin-left: -1.25rem; margin-right: -1.25rem; }
}