/* design\components.css: the CSS of the components in design\components.md ("Night rally"): the header, the footer,
   the buttons, the stop icon, the section heads, the quiz and the form box, the picker, the exit popup, the call bar,
   the field card, the band and the motif. Every page uses these classes as they are; a page's own CSS only places and
   sizes its parts, with the tokens of system.css. */

/* ---------- the page ---------- */
*, *::before, *::after { box-sizing: border-box; }
main { display: block; }
:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 3px; }
a { color: var(--c-accent); }
.wrap { width: min(100% - 2 * var(--gutter), var(--max-w)); margin-inline: auto; }
.sec { position: relative; padding-block: var(--section-y); }
.sec--night { background: var(--c-night); }
.sec--edge { overflow: hidden; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

/* ---------- headings: white, heavy and a little wide, color only on the key words ---------- */
.display, .sec-title, .card-title {
  margin: 0; color: var(--c-on-ink); font-family: var(--font-display); font-stretch: var(--wide); letter-spacing: -.012em;
}
.display { font-size: var(--fs-display); font-weight: 900; line-height: .98; }
.sec-title { font-size: var(--fs-h2); font-weight: 880; line-height: 1.02; }
.card-title { font-size: var(--fs-h3); font-weight: 820; line-height: 1.12; letter-spacing: -.005em; }
.gold { color: var(--c-accent); }
.red { color: var(--c-red); }
.sec-line { margin: 18px 0 0; max-width: 62ch; color: var(--c-soft-on-ink); font-size: clamp(17px, 1.28vw, 20px); line-height: 1.55; }
.sec-head { position: relative; max-width: 880px; margin-bottom: clamp(34px, 4.2vw, 60px); }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head--center .sec-line { margin-inline: auto; }
/* the motif under a section's headline: a short climbing zigzag in the logo's red (a picture, never a label) */
.sec-mark { display: block; width: 74px; height: 26px; margin: 0 0 18px; color: var(--c-red); }
.sec-head--center .sec-mark { margin-inline: auto; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 58px; padding: 0 28px;
  border: 0; border-radius: 12px; font: 800 17px/1.1 var(--font-display); font-stretch: var(--wide-ui); letter-spacing: .005em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) linear, box-shadow var(--dur-med) var(--ease-out), color var(--dur-fast) linear;
}
.btn--main {
  background: var(--c-red); color: #fff;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .2), 0 18px 36px -16px var(--c-glow-red);
}
.btn--main:hover { background: var(--c-red-hot); transform: translateY(-2px); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .2), 0 24px 44px -16px var(--c-glow-red); }
.btn--main:active { transform: translateY(1px); }
.btn--ghost { background: transparent; color: var(--c-on-ink); box-shadow: inset 0 0 0 2px var(--c-line-on-ink); }
.btn--ghost:hover { color: var(--c-accent); box-shadow: inset 0 0 0 2px var(--c-accent); }
.btn--s { min-height: 46px; padding: 0 18px; font-size: 15.5px; border-radius: 10px; gap: 9px; }
.btn--s .btn__icon { width: 18px; height: 18px; }
.btn__icon { flex: none; width: 22px; height: 22px; }
.btn:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 3px; }

.cta { display: grid; justify-items: start; gap: 14px; }
.cta--center { justify-items: center; }
.cta-line { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; color: var(--c-soft-on-ink); font: 600 14px/1.35 var(--font-text); }
.cta--center .cta-line { justify-content: center; }
.cta-line span { display: inline-flex; align-items: center; gap: 6px; }
.cta-line svg { width: 15px; height: 15px; color: var(--c-accent); flex: none; }
.text-link { display: inline-flex; align-items: center; gap: 8px; color: var(--c-on-ink); font: 750 16px/1.2 var(--font-display); font-stretch: var(--wide-ui); text-decoration: none; border-bottom: 2px solid var(--c-accent); padding-bottom: 3px; }
.text-link:hover { color: var(--c-accent); }
.text-link svg { flex: none; width: 20px; height: 20px; }

/* ---------- the header ---------- */
.site-header {
  position: absolute; inset: 0 0 auto 0; z-index: 60; display: flex; align-items: center; gap: 20px;
  padding: 12px var(--gutter); background: transparent;
}
.site-header__logo { display: block; flex: none; border-radius: 8px; }
/* the stacked logo whole only where its words read (116 px tall, the computer at the top); wherever the header is
   compact its red mark alone, the top 59% of the file (the words start at 72%), cropped by the box, never by a new file */
.site-header__logo img { display: block; width: 127px; height: 116px; object-fit: cover; object-position: 50% 0; }
.site-header__nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.nav__item > a:not(.btn) {
  display: block; padding: 11px 14px; border-radius: 10px; color: var(--c-on-ink); text-decoration: none;
  font: 700 15.5px/1 var(--font-display); font-stretch: var(--wide-ui); transition: background-color var(--dur-fast) linear, color var(--dur-fast) linear;
}
.nav__item > a:not(.btn):hover { background: color-mix(in srgb, var(--c-on-ink) 9%, transparent); }
.nav__item > a[aria-current="page"] { color: var(--c-accent); }
.nav__item--sec { margin-left: 10px; }
.site-header__menu { display: none; }
/* once the page scrolls: a brand-blue bar, the logo smaller (scroll-driven; a browser without it keeps the header at the top) */
@supports (animation-timeline: scroll()) {
  .site-header { position: fixed; animation: hdr-bar linear both; animation-timeline: scroll(root); animation-range: 0 170px; }
  .site-header__logo img { animation: hdr-logo linear both; animation-timeline: scroll(root); animation-range: 0 170px; }
}
@keyframes hdr-bar {
  from { background: transparent; box-shadow: none; padding-block: 12px; }
  to { background: color-mix(in srgb, var(--c-brand) 95%, transparent); box-shadow: 0 12px 30px -14px rgba(0, 0, 0, .7), inset 0 -1px 0 var(--c-line-on-ink); padding-block: 7px; }
}
@keyframes hdr-logo { from { width: 127px; height: 116px; } to { width: 85px; height: 46px; } }

@media (max-width: 1080px) {
  .site-header { gap: 12px; }
  .site-header__logo img { width: 97px; height: 52px; }
  @keyframes hdr-logo { from { width: 97px; height: 52px; } to { width: 82px; height: 44px; } }
  .site-header__nav {
    display: none; position: fixed; inset: 0; z-index: -1; margin: 0; padding: 140px var(--gutter) 40px;
    background: radial-gradient(120% 70% at 100% 0%, color-mix(in srgb, var(--c-brand-light) 40%, transparent), transparent 60%), var(--c-brand);
  }
  .site-header[data-open] .site-header__nav { display: block; }
  .site-header[data-open] { background: transparent; animation: none; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 6px; }
  .nav__item > a:not(.btn) { padding: 16px 4px; font-size: 26px; font-weight: 850; border-radius: 0; box-shadow: inset 0 -1px 0 var(--c-line-on-ink); }
  .nav__item--sec { margin: 18px 0 0; }
  .nav__item--sec .btn { width: 100%; min-height: 56px; font-size: 18px; }
  .site-header__cta { margin-left: auto; }
  .site-header__menu {
    display: grid; place-content: center; gap: 5px; flex: none; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 10px;
    background: color-mix(in srgb, var(--c-on-ink) 10%, transparent); color: var(--c-on-ink); cursor: pointer;
  }
  .site-header__menu i { display: block; width: 20px; height: 2.5px; border-radius: 2px; background: currentColor; transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) linear; }
  .site-header[data-open] .site-header__menu i:nth-child(2) { transform: translateY(7.5px) rotate(45deg); }
  .site-header[data-open] .site-header__menu i:nth-child(3) { opacity: 0; }
  .site-header[data-open] .site-header__menu i:nth-child(4) { transform: translateY(-7.5px) rotate(-45deg); }
}
@media (max-width: 560px) {
  .site-header { padding-inline: 14px; }
  .site-header__logo img { width: 89px; height: 48px; }
  @keyframes hdr-logo { from { width: 89px; height: 48px; } to { width: 78px; height: 42px; } }
  .site-header__cta { padding: 0 14px; font-size: 14.5px; }
  .site-header__cta .btn__icon { display: none; }
}
@media (max-width: 359px) { .site-header__cta { display: none; } .site-header__menu { margin-left: auto; } }

/* ---------- the stop icon (each part places it) ---------- */
.stop {
  position: absolute; z-index: 6; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%;
  background: color-mix(in srgb, var(--c-ink) 72%, transparent); color: var(--c-on-ink); cursor: pointer;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c-on-ink) 24%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background-color var(--dur-fast) linear;
}
.stop:hover { background: var(--c-brand); }
.stop svg { width: 15px; height: 15px; }
/* the tour's own stop icon shows one icon at a time, as the runtime's [data-stop] does */
[data-kit-tabs-stop] .stop__play { display: none; }
[data-kit-tabs-stop][aria-pressed="true"] .stop__play { display: inline; }
[data-kit-tabs-stop][aria-pressed="true"] .stop__pause { display: none; }

/* ---------- media that fills its box ---------- */
.fill { position: absolute; inset: 0; overflow: hidden; }
.fill > img, .fill > video, .fill > picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }

/* ---------- the field card: a booking landing over footage ---------- */
.fcard {
  display: grid; grid-template-columns: 54px minmax(0, 1fr); align-items: center; gap: 14px; width: max-content; max-width: min(400px, 100%);
  padding: 16px 24px 16px 16px; border-radius: 18px; background: var(--c-paper); color: var(--c-ink);
  box-shadow: 0 26px 50px -18px rgba(2, 2, 24, .85), 0 0 0 1px rgba(255, 255, 255, .6), 0 0 60px -10px var(--c-glow-gold);
}
.fcard__icon { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 14px; background: var(--c-accent); color: var(--c-on-gold); }
.fcard__icon svg { width: 27px; height: 27px; }
.fcard__title { display: block; font: 820 19px/1.2 var(--font-display); font-stretch: var(--wide-ui); color: var(--c-ink); }
.fcard__sub { display: block; margin-top: 4px; font: 500 15px/1.3 var(--font-text); color: var(--c-ink-soft); }
.fcard__tag {
  position: absolute; top: -11px; right: 14px; padding: 4px 9px; border-radius: 7px; background: var(--c-red); color: #fff;
  font: 800 12.5px/1 var(--font-display); font-stretch: var(--wide-ui); letter-spacing: .04em; text-transform: uppercase; transform: rotate(3deg);
}

/* ---------- the quiz (the kit's form with steps) and every form box ---------- */
.quiz {
  position: relative; width: min(100%, 580px); padding: 20px 22px 20px; border-radius: var(--radius-l); color: var(--c-on-ink);
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--c-brand-light) 38%, transparent) 0%, transparent 55%),
    linear-gradient(180deg, color-mix(in srgb, var(--c-brand) 92%, #fff 0%) 0%, var(--c-brand-dark) 100%);
  box-shadow: var(--shadow-l), inset 0 0 0 1px color-mix(in srgb, var(--c-on-ink) 16%, transparent), 0 0 70px -20px var(--c-glow-blue);
}
.quiz__top { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 14px; }
.quiz__title { margin: 0; font: 850 19px/1.15 var(--font-display); font-stretch: var(--wide); color: var(--c-on-ink); }
.quiz__count { margin: 0; font: 700 13.5px/1 var(--font-text); color: var(--c-soft-on-ink); counter-reset: qat var(--kit-at, 1); white-space: nowrap; }
.quiz__count b::before { content: counter(qat); }
.quiz__marks { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 8px 0 4px; padding: 0; list-style: none; }
.quiz__marks li { height: 6px; border-radius: 6px; background: color-mix(in srgb, var(--c-on-ink) 18%, transparent); transition: background-color var(--dur-med) var(--ease-out); }
.quiz__marks li[aria-current="step"], .quiz__marks li[data-kit-past] { background: var(--c-accent); }
.quiz__step { margin: 0; padding: 0; border: 0; min-width: 0; }
.quiz__q { display: block; width: 100%; padding: 12px 0 12px; font: 800 clamp(18px, 1.5vw, 21px)/1.22 var(--font-display); font-stretch: var(--wide-ui); color: var(--c-on-ink); }
.quiz__choices { display: grid; gap: 8px; }
.quiz__choices--goal { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.quiz__choices--list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.quiz__error { grid-column: 1 / -1; margin: 4px 0 0; color: var(--c-accent); font: 700 14px/1.3 var(--font-text); }
.quiz__opt { position: relative; display: block; cursor: pointer; }
.quiz__opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.quiz__opt span {
  display: flex; align-items: center; gap: 10px; min-height: 52px; height: 100%; padding: 10px 14px; border-radius: 12px;
  background: color-mix(in srgb, var(--c-on-ink) 9%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c-on-ink) 22%, transparent);
  color: var(--c-on-ink); font: 650 15px/1.25 var(--font-text); transition: background-color var(--dur-fast) linear, box-shadow var(--dur-fast) linear, transform var(--dur-fast) var(--ease-out);
}
.quiz__opt span::before {
  content: ''; flex: none; width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c-on-ink) 55%, transparent);
  transition: box-shadow var(--dur-fast) linear, background-color var(--dur-fast) linear;
}
.quiz__opt--num span { justify-content: center; padding: 8px 4px; font: 850 21px/1 var(--font-display); font-stretch: var(--wide-ui); }
.quiz__opt--num span::before { display: none; }
.quiz__opt:hover span { background: color-mix(in srgb, var(--c-on-ink) 15%, transparent); transform: translateY(-1px); }
.quiz__opt input:focus-visible + span { outline: 3px solid var(--c-accent); outline-offset: 2px; }
.quiz__opt input:checked + span, .quiz__opt[data-kit-on] span { background: var(--c-accent); color: var(--c-on-gold); box-shadow: inset 0 0 0 1.5px var(--c-accent), 0 10px 24px -12px var(--c-glow-gold); }
.quiz__opt input:checked + span::before, .quiz__opt[data-kit-on] span::before { background: var(--c-on-gold); box-shadow: inset 0 0 0 4px var(--c-accent), inset 0 0 0 9px var(--c-on-gold); }
.quiz__nav { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.quiz__next {
  display: inline-flex; align-items: center; gap: 8px; margin-left: auto; min-height: 46px; padding: 0 18px 0 20px; border: 0; border-radius: 10px;
  background: transparent; color: var(--c-accent); box-shadow: inset 0 0 0 2px var(--c-accent);
  font: 800 15px/1 var(--font-display); font-stretch: var(--wide-ui); cursor: pointer; transition: background-color var(--dur-fast) linear, color var(--dur-fast) linear;
}
.quiz__next::after { content: ''; width: 16px; height: 16px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10h11m-4.5-4.5L15 10l-4.5 4.5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10h11m-4.5-4.5L15 10l-4.5 4.5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.quiz__next:hover { background: var(--c-accent); color: var(--c-on-gold); }
.quiz__back { min-height: 46px; padding: 0 6px; border: 0; background: none; color: var(--c-soft-on-ink); font: 700 15px/1 var(--font-text); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.quiz__nav .btn { flex: 1; }
.quiz__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
.field { display: grid; gap: 6px; min-width: 0; }
.field label { font: 700 14px/1.2 var(--font-text); color: var(--c-on-ink); }
.field label span { font-weight: 500; color: var(--c-soft-on-ink); }
.field input, .field textarea, .field select {
  width: 100%; min-height: 50px; padding: 12px 14px; border: 0; border-radius: 10px; background: var(--c-paper); color: var(--c-ink);
  font: 500 16px/1.3 var(--font-text); box-shadow: inset 0 0 0 2px transparent; transition: box-shadow var(--dur-fast) linear;
}
.field input:focus, .field textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--c-accent), 0 0 0 4px color-mix(in srgb, var(--c-accent) 30%, transparent); }
.field[data-kit-invalid] input { box-shadow: inset 0 0 0 2px var(--c-red-on-ink); }
.field .quiz__error { margin: 0; }
.quiz__top .quiz__line { grid-column: 1 / -1; margin: 0; gap: 4px 14px; font-size: 13.5px; }
@media (max-width: 520px) {
  .quiz { padding: 16px 14px 16px; border-radius: 18px; }
  .quiz__choices--goal { gap: 6px; }
  .quiz__opt--num span { min-height: 50px; font-size: 19px; }
  .quiz__choices--list { grid-template-columns: 1fr; }
  .quiz__fields { grid-template-columns: 1fr; }
  .quiz__opt span { min-height: 48px; }
}

/* ---------- the picker (the exit popup and any band) ---------- */
.picker { margin: 0; padding: 0; border: 0; min-width: 0; }
.picker__legend { padding: 0; margin-bottom: 10px; font: 750 15px/1.2 var(--font-display); font-stretch: var(--wide-ui); color: var(--c-on-ink); }
.picker__row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.picker__pill { position: relative; display: block; cursor: pointer; }
.picker__pill input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.picker__pill span {
  display: grid; place-items: center; min-height: 50px; border-radius: 12px; background: color-mix(in srgb, var(--c-on-ink) 10%, transparent);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c-on-ink) 24%, transparent); color: var(--c-on-ink); font: 850 19px/1 var(--font-display); font-stretch: var(--wide-ui);
}
.picker__pill input:checked + span { background: var(--c-accent); color: var(--c-on-gold); box-shadow: none; }
.picker__pill input:focus-visible + span { outline: 3px solid var(--c-accent); outline-offset: 2px; }

/* ---------- the site's motif: the red ribbon arrow ---------- */
@property --rib { syntax: '<number>'; inherits: true; initial-value: 1; }
@property --rib-end { syntax: '<number>'; inherits: true; initial-value: 1; }
.ribbon { display: block; overflow: visible; }
.ribbon__body { stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--rib, 1) * 100); }
/* the folds shade the ribbon as the logo's darker red does (their own .16, kept here, since a CSS opacity beats the
   attribute), and the head comes with them once the ribbon is drawn */
.ribbon__fold { opacity: calc(var(--rib-end, 1) * .16); }
.ribbon__head { opacity: var(--rib-end, 1); }
/* a ribbon drawing itself: a part gives it a time or a scroll timeline */
@keyframes rib-draw { 0% { --rib: 0; --rib-end: 0; } 88% { --rib-end: 0; } 100% { --rib: 1; --rib-end: 1; } }

/* ---------- a band on footage (the closing band) ---------- */
/* clip, not hidden: a hidden overflow is a scroll container, and a ribbon drawing on the page's scroll would read the
   band's own (still) scroll instead */
.band { position: relative; overflow: hidden; overflow: clip; isolation: isolate; }
.band__media { position: absolute; inset: 0; z-index: -2; }
.band__shade { position: absolute; inset: 0; z-index: -1; }

/* ---------- the exit popup ---------- */
.exit { width: min(100% - 32px, 560px); max-width: none; max-height: none; margin: auto; padding: 0; border: 0; background: transparent; color: var(--c-on-ink); overflow: visible; }
.exit::backdrop { background: color-mix(in srgb, var(--c-ink) 78%, transparent); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.exit__in {
  position: relative; overflow: hidden; padding: 34px 32px 30px; border-radius: 24px;
  background: radial-gradient(110% 80% at 0% 100%, color-mix(in srgb, var(--c-red) 30%, transparent), transparent 55%), linear-gradient(180deg, var(--c-brand), var(--c-brand-dark));
  box-shadow: var(--shadow-l), inset 0 0 0 1px color-mix(in srgb, var(--c-on-ink) 18%, transparent);
  transform: translateY(calc((1 - var(--kit-in, 1)) * 18px));
}
.exit[data-kit-on] .exit__in { animation: exit-in .5s var(--ease-out) both; }
@keyframes exit-in { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
/* the dialog itself takes the focus when it opens: its controls show the ring, not the box around the card */
.exit:focus, .exit:focus-visible { outline: none; }
/* the red arrow rises from behind the card and breaks out at its top right, drawing itself as the popup opens */
.exit__ribbon { position: absolute; right: -58px; top: -74px; width: 270px; pointer-events: none; filter: drop-shadow(0 14px 30px var(--c-glow-red)); }
.exit[data-kit-on] .exit__ribbon { animation: rib-draw .9s .15s var(--ease-out) both; }
.exit__body { position: relative; display: grid; gap: 16px; }
.exit__title { margin: 0; max-width: 15ch; font: 900 clamp(28px, 3.4vw, 36px)/1.02 var(--font-display); font-stretch: var(--wide); }
.exit__line { margin: 0; max-width: 40ch; color: var(--c-soft-on-ink); font-size: 16px; line-height: 1.5; }
.exit__cta .btn { width: 100%; }
.exit__close {
  position: absolute; top: 12px; right: 12px; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0;
  border-radius: 50%; background: color-mix(in srgb, var(--c-ink) 60%, transparent); color: var(--c-on-ink); cursor: pointer;
}
.exit__close:hover { background: var(--c-ink); }
html[data-kit-modal] { overflow: hidden; }

/* ---------- the call bar on the phone ---------- */
.callbar {
  position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 55; display: flex; gap: 8px; padding: 8px; border-radius: 16px;
  background: color-mix(in srgb, var(--c-ink) 88%, transparent); box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .8), inset 0 0 0 1px var(--c-line-on-ink);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transform: translateY(140%); transition: transform var(--dur-med) var(--ease-out);
}
.callbar[data-kit-on] { transform: none; }
.callbar a {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; border-radius: 11px; text-decoration: none;
  font: 800 15.5px/1 var(--font-display); font-stretch: var(--wide-ui);
}
.callbar__cta { flex: 1.5; background: var(--c-red); color: #fff; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .2); }
.callbar__cta .btn__icon { width: 18px; height: 18px; }
.callbar__alt { flex: 1; color: var(--c-on-ink); box-shadow: inset 0 0 0 1.5px var(--c-line-on-ink); }
@media (min-width: 900px) { .callbar { display: none; } }

/* ---------- the footer ---------- */
.site-footer { position: relative; overflow: hidden; padding: clamp(64px, 8vw, 110px) 0 28px; background: var(--c-ink); box-shadow: inset 0 1px 0 var(--c-line-on-ink); }
.site-footer__ribbon { position: absolute; right: -60px; bottom: -40px; width: min(54vw, 640px); opacity: .1; pointer-events: none; }
.site-footer__in {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr)); gap: 40px 32px;
  width: min(100% - 2 * var(--gutter), var(--max-w)); margin-inline: auto;
}
.site-footer__logo { display: inline-block; }
.site-footer__logo img { display: block; width: auto; height: 170px; }
.site-footer__line { max-width: 36ch; margin: 18px 0 0; color: var(--c-soft-on-ink); font-size: 16px; }
.site-footer__title { margin: 6px 0 14px; color: var(--c-accent); font: 800 14px/1 var(--font-display); font-stretch: var(--wide-ui); letter-spacing: .06em; text-transform: uppercase; }
.site-footer__col ul, .site-footer__legal ul { margin: 0; padding: 0; list-style: none; }
.site-footer__col li + li { margin-top: 4px; }
.site-footer__col a { display: inline-block; padding: 6px 0; color: var(--c-on-ink); font: 600 16px/1.3 var(--font-text); text-decoration: none; }
.site-footer__col a:hover { color: var(--c-accent); }
.site-footer__legal {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; padding-top: 22px;
  box-shadow: inset 0 1px 0 var(--c-line-on-ink); color: var(--c-soft-on-ink); font-size: 14px;
}
.site-footer__legal p { margin: 0; }
.site-footer__legal ul { display: flex; gap: 18px; }
.site-footer__legal a { color: var(--c-soft-on-ink); }
[data-planned] { opacity: .62; }
.btn[data-planned] { opacity: .62; }
@media (max-width: 760px) {
  .site-footer__in { grid-template-columns: 1fr 1fr; }
  .site-footer__brand { grid-column: 1 / -1; }
  .site-footer__logo img { height: 140px; }
  .site-footer { padding-bottom: 96px; }
}

/* ---------- reduced motion: the site's own transitions rest ---------- */
@media (prefers-reduced-motion: reduce) {
  .btn, .quiz__opt span, .callbar, .site-header__menu i { transition: none; }
  .exit[data-kit-on] .exit__in, .exit[data-kit-on] .exit__ribbon { animation: none; }
}
@media (max-width: 600px) {
  .exit__ribbon { right: 0; top: -60px; width: 210px; }
}