.band--opening {
  padding-top: calc(var(--band-pad) * 0.5);
  padding-bottom: var(--band-pad);
}
.band--closing { padding-bottom: calc(var(--band-pad) * 0.72); }
main :is(p, li) { text-wrap: pretty; }
.home-opening {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "title  title"
    "copy   figure";
  column-gap: var(--space-4);
  row-gap: var(--space-4);
  align-items: start;
}
.home-opening-title {
  grid-area: title;
  max-width: 30ch;
  margin-bottom: 0;
  text-wrap: balance;
}
.home-opening-copy { grid-area: copy; align-self: center; }
.home-opening-copy > :last-child { margin-bottom: 0; }
.home-opening-figure {
  grid-area: figure;
  margin: 0;
}
.home-points {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  max-width: var(--max-measure);
}
.home-points li {
  position: relative;
  padding-left: var(--space-3);
  margin-bottom: var(--space-2);
  color: var(--color-ink);
}
.home-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 12px;
  height: 3px;
  border-radius: 999px;
  background: var(--color-blue);
}
.home-figure {
  margin: var(--space-5) 0 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.home-figure figcaption {
  font-size: var(--type-small);
  color: var(--color-ink-soft);
  margin-top: var(--space-3);
  max-width: var(--max-measure);
}
.home-flow {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  max-width: 48rem;
}
.home-flow-step {
  display: flex;
  gap: var(--space-4);
  align-items: baseline;
  border-top: 1px solid var(--color-rule);
  padding: var(--space-4) 0;
  margin: 0;
}
.home-flow-step:first-child { border-top: none; padding-top: 0; }
.home-flow-number {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: 3rem;
  line-height: 1;
  color: var(--color-blue);
  flex: 0 0 auto;
  min-width: 1.6ch;
  font-variant-numeric: tabular-nums lining-nums;
}
.home-flow-body h3 { margin-bottom: var(--space-1); }
.home-flow-body p { margin-bottom: 0; }
.pair {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: var(--space-5);
}
.pair-side {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pic-eyebrow {
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: var(--type-small);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--color-ink-soft);
  margin: 0 0 var(--space-2);
  max-width: none;
  text-align: center;
}
.pic-eyebrow.is-after { color: var(--color-blue-deep); }
.pic-eyebrow.on-blue { color: var(--color-on-blue); }
.pic-eyebrow .brand-initial { color: var(--color-crimson-small); }
.pic-arrow {
  align-self: center;
  color: var(--color-rule-strong);
  flex: 0 0 auto;
}
.phone {
  --phone-w: 236px;
  width: var(--phone-w);
  font-size: calc(var(--phone-w) / 14.75);
  background: var(--color-ink);
  border-radius: 2.25em;
  padding: 0.625em;
  box-shadow: var(--shadow-sm);
}
.phone-screen {
  position: relative;
  min-height: 24.75em;
  background: var(--color-white);
  border-radius: 1.75em;
  padding: 0.875em 0.875em 1.375em;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.phone-notch {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 5.125em;
  height: 1.25em;
  background: var(--color-ink);
  border-radius: 0 0 0.75em 0.75em;
}
.phone-status-row {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: 0.7em;
  color: var(--color-ink);
}
.phone-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding-bottom: 1.25em;
}
.phone-call-label {
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: 0.7em;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--color-ink-soft);
  margin: 0 0 0.5em;
  max-width: none;
}
.phone-number {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: 1.35em;
  color: var(--color-ink);
  margin: 0 0 0.55em;
  max-width: none;
}
.phone-tag-slot {
  min-height: 1.875em;
  display: flex;
  justify-content: center;
  align-items: center;
}
.phone-tag {
  background: var(--color-crimson-deep);
  color: var(--color-white);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: 0.8em;
  padding: 0.3125em 0.875em;
  border-radius: 0.5em;
}
.phone-tag-quiet {
  font-family: var(--font-body);
  font-size: 0.8em;
  color: var(--color-ink-soft);
}
.phone-actions {
  display: flex;
  justify-content: center;
  gap: 2.5em;
  flex: 0 0 auto;
}
.phone-btn {
  width: 3.375em;
  height: 3.375em;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.phone-btn svg { width: 1.5em; height: 1.5em; }
.phone-btn.is-idle {
  background: none;
  border: 0.125em solid var(--color-rule-strong);
}
.phone-btn.is-idle svg { fill: var(--color-rule-strong); }
.phone-btn.is-pressed { transform: scale(1.06); }
.phone-btn.is-pressed svg { fill: var(--color-white); }
.phone-btn.is-pressed.is-decline {
  background: var(--color-crimson-deep);
  box-shadow: 0 0 0 0.4375em color-mix(in srgb, var(--color-crimson-deep) 20%, transparent),
              0 0 0 0.875em color-mix(in srgb, var(--color-crimson-deep) 9%, transparent);
}
.phone-btn.is-pressed.is-answer {
  background: var(--color-green);
  box-shadow: 0 0 0 0.4375em color-mix(in srgb, var(--color-green) 24%, transparent),
              0 0 0 0.875em color-mix(in srgb, var(--color-green) 11%, transparent);
}
.phone-decline-icon { transform: rotate(135deg); transform-origin: center; }
.home-phone-pair { gap: var(--space-3); }
.fig {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums lining-nums;
  margin: 0;
  line-height: 1.1;
  max-width: none;
}
.fig.is-before {
  font-weight: var(--weight-bold);
  font-size: 1.25rem;
  color: var(--color-ink-soft);
}
.fig.is-after {
  font-weight: var(--weight-display);
  font-size: clamp(1.5rem, 0.95rem + 2.4vw, 2.125rem);
  color: var(--color-blue);
}
.dial-side .fig {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  text-align: center;
}
.dial {
  width: var(--dial-w, 224px);
  height: auto;
  display: block;
  margin-bottom: var(--space-3);
}
.dial-face { fill: var(--color-white); stroke: var(--color-rule); stroke-width: 1; }
.dial-tick-min { stroke: var(--color-rule); stroke-width: 1; stroke-linecap: round; fill: none; }
.dial-tick-hour { stroke: var(--color-rule-strong); stroke-width: 1.6; stroke-linecap: round; fill: none; }
.dial-numeral {
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: 11px;
  fill: var(--color-rule-strong);
  text-anchor: middle;
  dominant-baseline: middle;
}
.dial-hub { fill: var(--color-ink); }
.dial-wedge-spent { fill: color-mix(in srgb, var(--color-rule-strong) 30%, var(--color-white)); }
.dial-rim-spent { fill: none; stroke: var(--color-rule-strong); stroke-width: 6; stroke-linecap: round; }
.dial-wedge-tuned { fill: color-mix(in srgb, var(--color-blue) 34%, var(--color-white)); }
.dial-rim-tuned { fill: none; stroke: var(--color-blue); stroke-width: 6; stroke-linecap: round; }
.oa { --arrow-drop: 176px; }
.oa-card {
  position: relative;
  width: 272px;
  min-height: 328px;
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-3) var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.oa-card--void {
  background: none;
  border: 1.5px solid var(--color-rule);
}
.oa-card--ink {
  background: var(--color-blue-deep);
  border: 1.5px solid var(--color-blue-deep);
  box-shadow: 0 3px 6px oklch(22% 0.012 260 / 12%),
              0 24px 52px oklch(22% 0.012 260 / 14%),
              inset 0 1px 0 oklch(100% 0 0 / 14%);
}
.oa-mark {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
}
.oa-mark svg { width: 15px; height: 15px; }
.oa-mark--no { background: var(--color-crimson-deep); }
.oa-mark--yes { background: var(--color-green); }
.oa-num {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: 1.2rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.005em;
  margin: 0;
  max-width: none;
}
.oa-card--void .oa-num { color: var(--color-rule-strong); }
.oa-card--ink .oa-num { color: var(--color-on-blue); }
.oa-fields {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  flex: 1 1 auto;
}
.oa-label {
  display: block;
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: 0.625rem;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  margin-bottom: 7px;
}
.oa-card--void .oa-label { color: var(--color-ink-soft); }
.oa-card--ink .oa-label { color: color-mix(in srgb, var(--color-on-blue) 62%, transparent); }
.oa-rule { display: block; height: 1px; background: var(--color-rule); }
.oa-written {
  display: block;
  height: 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-on-blue) 78%, transparent);
}
.w-88 { width: 88%; }
.w-72 { width: 72%; }
.w-58 { width: 58%; }
.w-46 { width: 46%; }
.oa-foot { min-height: 34px; display: flex; align-items: center; }
.oa-seal {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: var(--color-blue);
  color: var(--color-white);
  border-radius: 999px;
  padding: 6px 14px 6px 8px;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: 0.68rem;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
}
.oa-seal svg { width: 15px; height: 15px; flex: 0 0 auto; }
.home-quote {
  margin: 0 auto;
  max-width: var(--shell-width-wide);
}
.home-quote::before {
  content: "";
  display: block;
  width: 48px;
  height: 4px;
  border-radius: 999px;
  background: var(--color-crimson);
  margin: 0 0 var(--space-4);
}
.home-quote blockquote {
  margin: 0;
  max-width: 42rem;
  font-family: var(--font-display);
  font-weight: var(--weight-body);
  font-size: var(--type-lead);
  line-height: var(--line-lead);
  color: var(--color-ink);
}
.home-quote blockquote p {
  color: inherit;
  max-width: none;
  margin: 0 0 var(--space-3);
}
.home-quote figcaption {
  font-family: var(--font-body);
  font-size: var(--type-small);
  font-weight: var(--weight-bold);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--color-ink-soft);
  margin-top: var(--space-3);
}
.home-close { text-align: center; }
.home-close h2 { margin-left: auto; margin-right: auto; text-wrap: balance; }
.home-close p { margin-left: auto; margin-right: auto; text-wrap: balance; }
.home-close .home-actions { justify-content: center; }
.band-blue .phone-call-label { color: var(--color-ink-soft); }
.band-blue .phone-number { color: var(--color-ink); }
.band-blue .phone-tag-quiet { color: var(--color-ink-soft); }
.home-close-figure {
  margin: 0 0 var(--space-5);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.home-close-figure .phone { --phone-w: 184px; }
@media (max-width: 720px) {
  .home-opening {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "title"
      "copy"
      "figure";
    row-gap: var(--space-4);
  }
  .home-opening-figure { justify-self: center; }
  .home-opening-title { max-width: none; }
}
@media (max-width: 640px) {
  .pair {
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
  }
  .pair .pic-arrow { transform: rotate(90deg); }
  .dial-pair {
    flex-direction: row;
    align-items: stretch;
    gap: var(--space-1);
  }
  .dial-pair .pic-arrow { transform: none; width: 30px; }
  .dial { --dial-w: 128px; margin-bottom: var(--space-2); }
  .dial-side .pic-eyebrow { min-height: 2.4em; }
  .fig.is-before { font-size: 1.0625rem; }
  .dial-side .fig { align-items: flex-start; min-height: 3.75rem; }
  .home-opening-figure .phone { --phone-w: 208px; }
  .home-figure { margin-top: var(--space-4); align-items: center; }
  .home-figure figcaption { text-align: center; }
  .home-flow-step { gap: var(--space-3); }
  .home-flow-number { font-size: 2.25rem; }
}