@font-face { font-family: 'Archivo Black'; src: url('fonts/ArchivoBlack-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Space Mono'; src: url('fonts/SpaceMono-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Space Mono'; src: url('fonts/SpaceMono-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url('fonts/SpaceGrotesk-Latin-Variable.woff2') format('woff2'); font-weight: 300 700; font-style: normal; font-display: swap; }

.hitl-frame {
  --h-paper: #FAF7F2;
  --h-ink: #1A1515;
  --h-indigo: #5059FF;
  --h-tint: #E9E6F3;
  --h-muted: #645D59;
  --h-rule: 0.3125cqw;
  --h-offset: 0.8333cqw;
  position: relative;
  isolation: isolate;
  width: 100%;
  aspect-ratio: 16 / 9;
  container-type: inline-size;
  overflow: hidden;
  background: var(--h-paper);
  color: var(--h-ink);
  font-family: 'Space Grotesk', sans-serif;
  text-align: left;
}
.hitl-frame *, .hitl-frame *::before, .hitl-frame *::after { box-sizing: border-box; }
.hitl-frame :is(h1, h2, h3, p, figure, blockquote) { margin: 0; }
.h-display { font-family: 'Archivo Black', sans-serif; font-weight: 400; text-transform: uppercase; line-height: 0.96; letter-spacing: -0.035em; }
.h-mono { font-family: 'Space Mono', monospace; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; }
.h-chrome { position: absolute; top: 6%; left: 5%; right: 5%; display: flex; justify-content: space-between; align-items: center; gap: 2cqw; font-size: 1.15cqw; line-height: 1.4; }
.h-chrome .h-label { border: 0.16cqw solid currentColor; padding: 0.35cqw 0.65cqw; }
.h-footer { position: absolute; left: 5%; right: 5%; bottom: 5.5%; display: flex; justify-content: space-between; gap: 2cqw; font: 400 1.15cqw/1.35 'Space Mono', monospace; }
.h-indigo-text { color: var(--h-indigo); }
.h-border { border: var(--h-rule) solid var(--h-ink); }
.h-shadow { box-shadow: var(--h-offset) var(--h-offset) 0 var(--h-ink); }
.h-indigo { background: var(--h-indigo); color: var(--h-paper); }
.h-dark { background: var(--h-ink); color: var(--h-paper); }
.h-logo { display: block; width: 100%; height: 100%; object-fit: contain; background: #F5F1E8; }
.h-logo-box { position: absolute; overflow: visible; aspect-ratio: 1; background: #F5F1E8; border: var(--h-rule) solid var(--h-ink); }
.h-cover-title { position: absolute; left: 6%; top: 24%; width: 56%; font-size: 8.9cqw; }
.h-cover-title span { display: block; }
.h-cover-title .h-indigo-text { margin-top: 0.12em; }
.h-cover-logo { width: 27%; right: 7%; top: 24%; }
.h-cover-byline { position: absolute; left: 6%; top: 68%; font-size: 1.8cqw; line-height: 1.4; }
.h-signal-title { position: absolute; left: 6%; top: 24%; width: 80%; font-size: 9.3cqw; }
.h-signal-title span { display: block; }
.h-decision-rail { position: absolute; left: 6%; right: 6%; bottom: 18%; display: grid; grid-template-columns: repeat(4, 1fr); border: 0.2cqw solid var(--h-paper); font-size: 1.35cqw; }
.h-decision-rail span { padding: 1.1cqw; text-align: center; }
.h-decision-rail span + span { border-left: 0.2cqw solid var(--h-paper); }
.h-decision-rail .h-selected { background: var(--h-paper); color: var(--h-ink); }
.h-explainer-title { position: absolute; left: 6%; top: 22%; width: 88%; font-size: 5.6cqw; }
.h-flow { position: absolute; left: 6%; right: 6%; bottom: 22%; display: grid; grid-template-columns: 1fr 3cqw 1fr 3cqw 1fr; gap: 1.1cqw; align-items: stretch; }
.h-flow-card { padding: 1.5cqw; border: var(--h-rule) solid var(--h-ink); min-width: 0; background: var(--h-tint); }
.h-flow-card.h-feature { background: var(--h-indigo); color: var(--h-paper); box-shadow: var(--h-offset) var(--h-offset) 0 var(--h-ink); }
.h-flow-card .h-step { font: 700 1.1cqw/1.3 'Space Mono', monospace; margin-bottom: 1.1cqw; }
.h-flow-card h3 { font-size: 2.8cqw; margin-bottom: 0.8cqw; }
.h-flow-card p { font-size: 1.65cqw; line-height: 1.3; }
.h-flow-arrow { position: relative; align-self: center; height: 0.25cqw; background: var(--h-ink); }
.h-flow-arrow::after { content: ''; position: absolute; right: 0; top: -0.4cqw; width: 0.9cqw; height: 0.9cqw; border-right: 0.25cqw solid var(--h-ink); border-top: 0.25cqw solid var(--h-ink); transform: rotate(45deg); }
.h-comparison-title { position: absolute; left: 6%; top: 22%; width: 88%; font-size: 6.4cqw; }
.h-ledger { position: absolute; left: 6%; right: 6%; bottom: 20%; display: grid; grid-template-columns: 1fr 1fr; border: var(--h-rule) solid var(--h-ink); }
.h-ledger > div + div { border-left: var(--h-rule) solid var(--h-ink); }
.h-ledger h3 { padding: 1.1cqw 1.6cqw; font: 700 1.5cqw/1.3 'Space Mono', monospace; background: var(--h-ink); color: var(--h-paper); }
.h-ledger .h-emphasis h3 { background: var(--h-indigo); }
.h-ledger p { padding: 1.8cqw 1.6cqw; font-size: 2.65cqw; font-weight: 600; line-height: 1.2; }
.h-ledger .h-emphasis { background: var(--h-tint); }
.h-quote { position: absolute; left: 8%; top: 25%; right: 8%; font-size: 6.6cqw; }
.h-quote::before { content: ''; position: absolute; top: -4.3cqw; left: 0; width: 7cqw; height: 0.65cqw; background: var(--h-indigo); }
.h-quote cite { display: block; margin-top: 2.5cqw; font: normal 400 1.55cqw/1.5 'Space Mono', monospace; text-transform: none; letter-spacing: 0; }
.h-stack-title { position: absolute; left: 6%; top: 24%; width: 43%; font-size: 9cqw; }
.h-stack-card { position: absolute; left: 53%; top: 25%; width: 37%; background: var(--h-indigo); color: var(--h-paper); padding: 2.3cqw; }
.h-stack-card h3 { font-size: 2.8cqw; margin-bottom: 1.8cqw; }
.h-stack-card ol { list-style: none; padding: 0; margin: 0; }
.h-stack-card li { font-size: 1.9cqw; line-height: 1.4; padding: 1cqw 0; border-top: 0.15cqw solid currentColor; }
.h-stack-card li span { font: 400 1.1cqw/1.4 'Space Mono', monospace; display: block; opacity: 0.9; margin-bottom: 0.35cqw; }
.h-caption-title { position: absolute; top: 23%; left: 6%; width: 76%; font-size: 6.4cqw; }
.h-caption-box { position: absolute; left: 8%; right: 8%; bottom: 8%; text-align: center; font: 700 3.8cqw/1.24 'Space Grotesk', sans-serif; }
.h-caption-box mark { background: var(--h-indigo); color: var(--h-paper); padding: 0.1em 0.24em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.h-caption-rule { position: absolute; left: 8%; right: 8%; top: 48%; height: 0.2cqw; background: var(--h-paper); opacity: 0.3; }
.h-outro-logo { width: 27%; left: 7%; top: 21%; }
.h-outro-title { position: absolute; left: 41%; top: 24%; width: 53%; font-size: 7.5cqw; }
.h-outro-copy { position: absolute; left: 41%; top: 65%; font-size: 2cqw; font-weight: 500; }
.h-outro-site { position: absolute; left: 41%; top: 74%; font: 700 1.75cqw/1.3 'Space Mono', monospace; color: var(--h-indigo); }
.h-outro-band { position: absolute; bottom: 0; left: 0; right: 0; height: 9%; background: var(--h-indigo); color: var(--h-paper); display: flex; justify-content: space-between; align-items: center; padding: 0 5%; font: 400 1.15cqw/1.2 'Space Mono', monospace; }

/* Portrait is re-composed on a 1080 x 1920 canvas; it is never a landscape crop. */
.hitl-frame[data-ratio='portrait'] { aspect-ratio: 9 / 16; }
.hitl-frame[data-ratio='portrait'] .h-chrome { top: 7%; font-size: 2.1cqw; }
.hitl-frame[data-ratio='portrait'] .h-chrome .h-label { padding: 0.7cqw 1cqw; border-width: 0.3cqw; }
.hitl-frame[data-ratio='portrait'] .h-footer { bottom: 18%; font-size: 2.05cqw; }
.hitl-frame[data-ratio='portrait'] .h-cover-title { top: 19%; left: 8%; width: 84%; font-size: 14.5cqw; }
.hitl-frame[data-ratio='portrait'] .h-cover-logo { top: 45%; right: 28%; width: 44%; }
.hitl-frame[data-ratio='portrait'] .h-cover-byline { top: 75%; left: 8%; font-size: 3.9cqw; }
.hitl-frame[data-ratio='portrait'] .h-signal-title { top: 25%; left: 8%; font-size: 14cqw; }
.hitl-frame[data-ratio='portrait'] .h-decision-rail { bottom: 25%; left: 8%; right: 8%; grid-template-columns: 1fr 1fr; border-width: 0.4cqw; font-size: 2.6cqw; }
.hitl-frame[data-ratio='portrait'] .h-decision-rail span { padding: 2.8cqw; }
.hitl-frame[data-ratio='portrait'] .h-decision-rail span:nth-child(3) { border-left: 0; }
.hitl-frame[data-ratio='portrait'] .h-decision-rail span:nth-child(n+3) { border-top: 0.4cqw solid var(--h-paper); }
.hitl-frame[data-ratio='portrait'] .h-explainer-title { left: 8%; top: 18%; width: 84%; font-size: 9.4cqw; }
.hitl-frame[data-ratio='portrait'] .h-flow { left: 8%; right: 8%; top: 38%; bottom: 21%; grid-template-columns: 1fr; grid-template-rows: 1fr 3cqw 1fr 3cqw 1fr; gap: 1.4cqw; }
.hitl-frame[data-ratio='portrait'] .h-flow-card { padding: 2.4cqw; }
.hitl-frame[data-ratio='portrait'] .h-flow-card .h-step { font-size: 1.9cqw; margin-bottom: 0.9cqw; }
.hitl-frame[data-ratio='portrait'] .h-flow-card h3 { font-size: 5.2cqw; margin-bottom: 0.7cqw; }
.hitl-frame[data-ratio='portrait'] .h-flow-card p { font-size: 3.9cqw; }
.hitl-frame[data-ratio='portrait'] .h-flow-arrow { height: 100%; width: 0.35cqw; justify-self: center; }
.hitl-frame[data-ratio='portrait'] .h-flow-arrow::after { top: auto; bottom: 0; right: -0.35cqw; transform: rotate(135deg); }
.hitl-frame[data-ratio='portrait'] .h-comparison-title { top: 20%; left: 8%; width: 84%; font-size: 11cqw; }
.hitl-frame[data-ratio='portrait'] .h-ledger { left: 8%; right: 8%; bottom: 24%; grid-template-columns: 1fr; }
.hitl-frame[data-ratio='portrait'] .h-ledger > div + div { border-left: 0; border-top: var(--h-rule) solid var(--h-ink); }
.hitl-frame[data-ratio='portrait'] .h-ledger h3 { font-size: 2.5cqw; padding: 2.2cqw 3cqw; }
.hitl-frame[data-ratio='portrait'] .h-ledger p { font-size: 4.6cqw; padding: 3cqw; }
.hitl-frame[data-ratio='portrait'] .h-quote { top: 29%; font-size: 10.4cqw; }
.hitl-frame[data-ratio='portrait'] .h-quote::before { top: -8cqw; width: 14cqw; height: 1.1cqw; }
.hitl-frame[data-ratio='portrait'] .h-quote cite { font-size: 2.8cqw; margin-top: 7cqw; }
.hitl-frame[data-ratio='portrait'] .h-stack-title { top: 19%; left: 8%; width: 84%; font-size: 17cqw; }
.hitl-frame[data-ratio='portrait'] .h-stack-card { top: 46%; left: 8%; width: 82%; padding: 4cqw; }
.hitl-frame[data-ratio='portrait'] .h-stack-card h3 { font-size: 5cqw; margin-bottom: 4cqw; }
.hitl-frame[data-ratio='portrait'] .h-stack-card li { font-size: 4cqw; padding: 1.8cqw 0; }
.hitl-frame[data-ratio='portrait'] .h-stack-card li span { font-size: 2cqw; }
.hitl-frame[data-ratio='portrait'] .h-caption-title { top: 23%; left: 8%; width: 84%; font-size: 13cqw; }
.hitl-frame[data-ratio='portrait'] .h-caption-rule { top: 51%; }
.hitl-frame[data-ratio='portrait'] .h-caption-box { top: auto; bottom: 8.333%; font-size: 6.667cqw; }
.hitl-frame[data-ratio='portrait'] .h-outro-logo { top: 17%; left: 28%; width: 44%; }
.hitl-frame[data-ratio='portrait'] .h-outro-title { top: 48%; left: 8%; width: 84%; font-size: 13cqw; text-align: center; }
.hitl-frame[data-ratio='portrait'] .h-outro-copy { left: 8%; top: 69%; width: 84%; font-size: 3.6cqw; text-align: center; }
.hitl-frame[data-ratio='portrait'] .h-outro-site { left: 8%; top: 74%; width: 84%; font-size: 2.85cqw; text-align: center; }
.hitl-frame[data-ratio='portrait'] .h-outro-band { bottom: 18%; height: 5%; padding: 0 8%; font-size: 2cqw; }

.hitl-frame[data-ratio='square'] { aspect-ratio: 1; }
.hitl-frame[data-ratio='square'] .h-chrome, .hitl-frame[data-ratio='square'] .h-footer { font-size: 1.6cqw; }
.hitl-frame[data-ratio='square'] .h-cover-title { top: 20%; width: 85%; font-size: 12.3cqw; }
.hitl-frame[data-ratio='square'] .h-cover-logo { top: 51%; right: 8%; width: 29%; }
.hitl-frame[data-ratio='square'] .h-cover-byline { top: 67%; left: 6%; width: 50%; font-size: 2.3cqw; }
.hitl-frame[data-ratio='square'] .h-signal-title { top: 29%; font-size: 12cqw; }
.hitl-frame[data-ratio='square'] .h-decision-rail { bottom: 24%; font-size: 1.8cqw; }
.hitl-frame[data-ratio='square'] .h-explainer-title { top: 25%; font-size: 7.3cqw; }
.hitl-frame[data-ratio='square'] .h-flow { bottom: 28%; }
.hitl-frame[data-ratio='square'] .h-flow-card { padding: 2cqw 1.2cqw; }
.hitl-frame[data-ratio='square'] .h-flow-card h3 { font-size: 3.1cqw; }
.hitl-frame[data-ratio='square'] .h-flow-card p { font-size: 2cqw; }
.hitl-frame[data-ratio='square'] .h-comparison-title { top: 25%; font-size: 8cqw; }
.hitl-frame[data-ratio='square'] .h-ledger { bottom: 26%; }
.hitl-frame[data-ratio='square'] .h-ledger p { font-size: 3.5cqw; padding: 3cqw 2cqw; }
.hitl-frame[data-ratio='square'] .h-quote { top: 33%; font-size: 8.4cqw; }
.hitl-frame[data-ratio='square'] .h-quote cite { font-size: 2.2cqw; margin-top: 5cqw; }
.hitl-frame[data-ratio='square'] .h-stack-title { top: 22%; width: 87%; font-size: 12cqw; }
.hitl-frame[data-ratio='square'] .h-stack-card { top: 51%; left: 29%; width: 62%; padding: 3cqw; }
.hitl-frame[data-ratio='square'] .h-stack-card li { font-size: 2.6cqw; }
.hitl-frame[data-ratio='square'] .h-stack-card li span { font-size: 1.6cqw; }
.hitl-frame[data-ratio='square'] .h-caption-title { top: 25%; font-size: 8.4cqw; }
.hitl-frame[data-ratio='square'] .h-caption-rule { top: 52%; }
.hitl-frame[data-ratio='square'] .h-caption-box { top: auto; bottom: 8%; font-size: 5cqw; }
.hitl-frame[data-ratio='square'] .h-outro-logo { top: 15%; left: 35%; width: 30%; }
.hitl-frame[data-ratio='square'] .h-outro-title { top: 51%; left: 6%; width: 88%; font-size: 10cqw; text-align: center; }
.hitl-frame[data-ratio='square'] .h-outro-copy { top: 74%; left: 6%; width: 88%; text-align: center; font-size: 2.6cqw; }
.hitl-frame[data-ratio='square'] .h-outro-site { top: 81%; left: 6%; width: 88%; text-align: center; font-size: 2cqw; }
.hitl-frame[data-ratio='square'] .h-outro-band { font-size: 1.5cqw; }