/* Reset, body, links, focus, skip link, buttons. Hover is gated; press is an instant inversion. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 8px; color-scheme: light; }
@media (min-width: 900px) { html { scroll-padding-top: 72px; } }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  font-stretch: var(--w-body); font-weight: 400;
  font-size: var(--fs-body); line-height: 1.45;
  -webkit-font-smoothing: antialiased; overflow-wrap: break-word;
}
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; height: auto; }
b { font-weight: 700; }
a { color: inherit; }
mark { background: var(--hi); color: var(--ink); }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.label {
  font-stretch: var(--w-label); font-weight: 600; font-size: 14px; line-height: 1.2;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.poster, .h2 {
  font-stretch: var(--w-poster); font-weight: 900; text-transform: uppercase;
  letter-spacing: -0.02em; line-height: 0.86;
}
.h2 { font-size: var(--fs-h2); letter-spacing: -0.015em; line-height: 0.88; margin-bottom: 28px; text-wrap: balance; }
.h3 {
  font-stretch: var(--w-h3); font-weight: 800; font-size: var(--fs-h3);
  text-transform: uppercase; letter-spacing: -0.01em; line-height: 0.95;
}
.lead { font-size: var(--fs-lead); font-weight: 500; line-height: 1.25; max-width: 30em; }

:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 9px var(--hi); }
.clause--inv :focus-visible, .foot :focus-visible, .bar :focus-visible, .pricebox :focus-visible { outline-color: var(--paper); }

.skip {
  position: absolute; left: 8px; top: -80px; z-index: 100; background: var(--hi); color: var(--ink);
  padding: 12px 16px; font-weight: 700; text-decoration: none;
}
.skip:focus { top: 8px; }

.btn {
  display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 20px;
  background: var(--ink); color: var(--paper); border: 0; border-radius: 0; cursor: pointer;
  font: inherit; font-stretch: var(--w-label); font-weight: 700; font-size: 14px; letter-spacing: 0.06em;
  text-transform: uppercase; text-decoration: none; text-align: center; line-height: 1.15;
  -webkit-tap-highlight-color: transparent;
}
.btn--xl { min-height: 56px; width: 100%; }
.btn--sm { min-height: 44px; min-width: 96px; width: auto; padding: 0 16px; }
.btn--hi { background: var(--hi); color: var(--ink); }
.btn--text {
  background: none; color: var(--ink); min-height: 44px; padding: 0; justify-content: flex-start;
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px;
}
.btn[disabled] { background: none; color: var(--ink); outline: 1px dotted var(--ink); outline-offset: -1px; cursor: not-allowed; }
/* Hover is a light cue (a 4px yellow ring). Press is the full, instant inversion, so a mouse click is still seen. */
@media (hover: hover) and (pointer: fine) {
  .btn { transition: box-shadow 150ms ease; }
  .btn:hover { box-shadow: inset 0 0 0 4px var(--hi); }
  .btn--hi:hover { box-shadow: inset 0 0 0 4px var(--paper); }
  .btn--text:hover { box-shadow: none; text-decoration-thickness: 4px; }
  .btn[disabled]:hover { box-shadow: none; }
}
.btn:active, .btn:hover:active { background: var(--hi); color: var(--ink); box-shadow: none; transition: none; }
.btn--hi:active, .btn--hi:hover:active { background: var(--paper); }
.btn--text:active, .btn--text:hover:active { background: none; }
.btn[disabled]:active { background: none; }
.touch-only { display: none; }
@media (pointer: coarse) { .touch-only { display: inline; } .mouse-only { display: none; } }
[data-fit] { word-spacing: 0.07em; }