/* Hero panel: the Today view rendered in place of the old hero illustration.
   Scoped to .hp-* so it never collides with Framer's generated classes.
   1u = 1px at a 760px-wide slot, so the frame scales with the slot like the SVG did. */
.hp-wrap {
  width: 100%;
  height: 100%;
  /* Size containment so the frame can scale with the slot's height as well as width. */
  container-type: size;
}
.hp {
  /* Prefer scaling to height; never smaller than width/760 nor larger than width/600. */
  --u: clamp(calc(100cqw / 760), calc(100cqh / 760), calc(100cqw / 600));
  --hp-surface: #1a1614;
  --hp-on: #f4ede6;
  --hp-on-muted: #a3978e;
  --hp-rule: rgba(244, 237, 230, 0.1);
  --hp-card: #fbf8f4;
  --hp-ink: #17120f;
  --hp-muted: #6e645d;
  --hp-card-rule: #e8e1d9;
  --hp-accent: #f55038;
  --hp-done: #8fbf9a;
  --hp-sans: "Inter", "Inter Placeholder", -apple-system, "Segoe UI", sans-serif;
  --hp-display: "Inter Display", "Inter Display Placeholder", "Inter", sans-serif;
  --hp-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  background: var(--hp-surface);
  color: var(--hp-on);
  font-family: var(--hp-sans);
  font-feature-settings: "cv11", "ss01";
  border-radius: calc(var(--u) * 24);
  padding: calc(var(--u) * 28) calc(var(--u) * 28) calc(var(--u) * 32);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: calc(var(--u) * 24);
  text-align: left;
  -webkit-font-smoothing: antialiased;
}
.hp::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.16;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0.9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.hp > * { position: relative; }
.hp p, .hp h2, .hp h3, .hp ul { margin: 0; }
.hp ul { padding: 0; list-style: none; }

/* Header and section label share one voice: small mono caps. */
.hp-bar, .hp-label {
  font-family: var(--hp-mono);
  font-size: calc(var(--u) * 12);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hp-on-muted);
}
.hp-bar {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.hp-bar strong { color: var(--hp-on); font-weight: 500; }
.hp-label { margin: 0 0 calc(var(--u) * 6); }

/* The one lifted object: the decision. */
.hp-decision {
  background: var(--hp-card);
  color: var(--hp-ink);
  border-radius: calc(var(--u) * 16);
  padding: calc(var(--u) * 28) calc(var(--u) * 30) calc(var(--u) * 28);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--u) * 18);
}
.hp-pill {
  display: inline-block;
  font-family: var(--hp-mono);
  font-size: calc(var(--u) * 12);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: calc(var(--u) * 6) calc(var(--u) * 10) calc(var(--u) * 5);
  border-radius: 999px;
  background: var(--hp-accent);
  color: #fff;
  font-weight: 500;
}
.hp-decision h2 {
  font-family: var(--hp-display);
  font-size: calc(var(--u) * 34);
  line-height: 1.12;
  font-weight: 500;
  letter-spacing: -0.025em;
  text-wrap: balance;
  color: var(--hp-ink);
}
.hp-decision > p {
  font-size: calc(var(--u) * 17);
  line-height: 1.45;
  color: var(--hp-muted);
}
.hp-evidence {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--u) * 10);
  width: 100%;
  padding-top: calc(var(--u) * 4);
}
.hp-evidence li {
  border-top: 1px solid var(--hp-card-rule);
  padding-top: calc(var(--u) * 10);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
  min-width: 0;
}
.hp-src {
  font-family: var(--hp-mono);
  font-size: calc(var(--u) * 11);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hp-muted);
}
.hp-val {
  font-size: calc(var(--u) * 15);
  line-height: 1.35;
  color: var(--hp-ink);
  font-variant-numeric: tabular-nums;
}
.hp-actions {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
  width: 100%;
  padding-top: calc(var(--u) * 6);
}
.hp-btn {
  font-family: var(--hp-mono);
  font-size: calc(var(--u) * 13);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: calc(var(--u) * 14) calc(var(--u) * 20);
  border-radius: 999px;
  border: 1px solid transparent;
  line-height: 1;
  white-space: nowrap;
}
.hp-btn-primary { background: var(--hp-accent); color: #fff; }
.hp-btn-secondary { border-color: var(--hp-card-rule); color: var(--hp-ink); }
.hp-note {
  margin-left: auto;
  font-size: calc(var(--u) * 13);
  color: var(--hp-muted);
  text-align: right;
  max-width: 26ch;
  line-height: 1.35;
}

/* Handled: plain rows, one sentence each, anchored to the bottom edge. */
.hp-handled { margin-top: auto; }
.hp-rows { display: flex; flex-direction: column; }
.hp-rows li {
  display: grid;
  grid-template-columns: calc(var(--u) * 16) calc(var(--u) * 44) 1fr;
  gap: calc(var(--u) * 14);
  align-items: baseline;
  padding: calc(var(--u) * 13) 0;
  border-top: 1px solid var(--hp-rule);
  font-size: calc(var(--u) * 16);
  line-height: 1.4;
}
.hp-rows li:last-child { padding-bottom: 0; }
.hp-mark {
  width: calc(var(--u) * 14);
  height: calc(var(--u) * 14);
  border-radius: 50%;
  align-self: center;
  background: var(--hp-done);
  display: inline-grid;
  place-items: center;
}
.hp-mark::after {
  content: "";
  width: calc(var(--u) * 6);
  height: calc(var(--u) * 3.2);
  border-left: calc(var(--u) * 1.6) solid var(--hp-surface);
  border-bottom: calc(var(--u) * 1.6) solid var(--hp-surface);
  transform: translateY(-15%) rotate(-45deg);
}
.hp-rows time {
  font-family: var(--hp-mono);
  font-size: calc(var(--u) * 12.5);
  letter-spacing: 0.04em;
  color: var(--hp-on-muted);
  font-variant-numeric: tabular-nums;
}
.hp-text { color: var(--hp-on); }

/* Below desktop the Framer slot has a fixed or flex-grown height sized for the old
   image. Let it take the panel's height instead. Doubled class beats Framer's rule. */
@media (max-width: 1199.98px) {
  .framer-ctGah .framer-1fdo4xi.framer-1fdo4xi { height: auto; min-height: 100vh; }
  .framer-ctGah .framer-divj3a.framer-divj3a { flex: none; height: auto; }
  .hp-wrap, .hp { height: auto; }
  .hp-wrap { container-type: inline-size; }
  .hp { --u: calc(100cqw / 760); }
  .hp-handled { margin-top: 0; }
}
@media (min-width: 810px) and (max-width: 1199.98px) {
  .hp-wrap { max-width: 720px; }
}
@media (max-width: 809.98px) {
  .hp { --u: calc(100cqw / 520); }
  .hp-evidence { grid-template-columns: 1fr 1fr; }
  .hp-evidence li:last-child, .hp-note { display: none; }
}