/* Screen-size rules for the preserved static site. */
:root {
  --page-gutter: 28px;
  --content-width: 1180px;
  --journey-top: calc(env(safe-area-inset-top, 0px) + 88px);
  --journey-bottom: calc(env(safe-area-inset-bottom, 0px) + 52px);
  padding: 0;
}
html { width: 100%; scroll-padding-top: var(--journey-top); }
body { min-width: 0; width: 100%; }
h1, h2, h3 { letter-spacing: 0; }
h1 { font-size: 96px; }
h2 { font-size: 76px; }
h3 { font-size: 32px; }
img, input, select, textarea, canvas { max-width: 100%; }
.in { width: 100%; max-width: var(--content-width); min-width: 0; }
.sec { padding-inline: max(var(--page-gutter), env(safe-area-inset-left, 0px)); }
.sec .in > p, .pl p { max-width: 65ch; }
.pp, .gl2, .two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.pp > *, .gl2 > *, .two > *, .grid > *, .revgrid > *, .pl3 > * { min-width: 0; }
.grid, .revgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pl3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.btn { max-width: 100%; justify-content: center; text-align: center; overflow-wrap: anywhere; }
.brand { min-width: 0; }
.brand img, .lang, header .btn, .pass .hd img, .num button { flex-shrink: 0; }
header { padding-inline: max(12px, env(safe-area-inset-left, 0px)); }
header .in { max-width: var(--content-width); }
header .brand span { overflow: hidden; }
.lang { min-height: 44px; }
.tabs button, .chips button, .ftabs button { min-height: 44px; overflow-wrap: anywhere; }
.tabs button.on { color: var(--nv); opacity: .5; padding-left: 0; border-top-color: var(--ln); }
.pass .hd { min-width: 0; }
.pass .hd span { min-width: 0; overflow-wrap: anywhere; }
.pg h3 { font-size: 48px; }
.rt { font-size: 40px; overflow-wrap: anywhere; }
.st h3 { font-size: 56px; }
.stp > label:not(.f), .ql { font-size: 40px; }
.ftabs { flex-wrap: wrap; }
#q { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.f, .ch label, .nav, #fin { min-width: 0; }
select, input[type=date], input[type=number] { min-width: 0; }
.side .btn { word-break: normal; overflow-wrap: anywhere; }
footer { padding-inline: var(--page-gutter); padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px)); }
footer .in > * { min-width: 0; overflow-wrap: anywhere; }
#pjSticky { height: 100vh; height: 100svh; }
#pjBeats.beat {
  min-height: 0;
  padding: var(--journey-top) var(--page-gutter) var(--journey-bottom);
}
#pjBeats.beat .pn {
  min-width: 0;
  max-width: min(620px, 100%);
  max-height: calc(100dvh - var(--journey-top) - var(--journey-bottom));
  overflow-y: auto;
  pointer-events: auto;
  scrollbar-width: thin;
}
#pjBeats.beat h2 { font-size: 54px; }
#pjBeats.beat.hero .pn { max-width: min(760px, 100%); }
#pjBeats.beat.hero h2 { font-size: 76px; }
#pjBeats.beat.preparation {
  padding-top: calc(env(safe-area-inset-top, 0px) + 104px);
  padding-bottom: var(--journey-bottom);
}
#pjBeats.beat.preparation .pn {
  max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 104px - var(--journey-bottom));
}
#pjBeats.beat.preparation .tg li {
  background: var(--cta);
  border-color: var(--cta);
  color: var(--iv);
}
/* Avoid re-blurring moving footage beneath the fixed caption panel. */
#pjBeats.beat .pn {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
#pjCanvas { contain: paint; }
#pjGrain { display: none; }
@media (prefers-reduced-motion: reduce) {
  #pjBeats.beat { transition: none; }
}
#pjBeats.beat.min { padding-bottom: var(--journey-bottom); }
#pjBeats.beat.min .pn { padding-top: 6px; }
#pjBeats.beat.min .k { line-height: 1.5; }
#pjBeats.beat.min h2 { font-size: 26px; }
#pjProgress, #pjNote { bottom: calc(env(safe-area-inset-bottom, 0px) + 20px); }
#pjProgress { width: min(140px, 30%); }
#pjLoading { text-align: center; padding: 24px; }
#pjLoading .pj-bar { max-width: 80%; }
@media (min-width: 1600px) {
  :root { --content-width: 1400px; --page-gutter: 48px; }
  #pjBeats.beat { padding-inline: max(var(--page-gutter), calc((100% - 1600px) / 2)); }
}
@media (min-width: 2200px) {
  :root { --content-width: 1680px; }
  h2 { font-size: 88px; }
}
@media (max-width: 1100px) {
  h2 { font-size: 60px; }
  .grid, .revgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile { padding: 26px; }
  #pjBeats.beat h2 { font-size: 44px; }
  #pjBeats.beat.hero h2 { font-size: 60px; }
}
@media (max-width: 900px) {
  .pp, .gl2, .two { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .pl3 { grid-template-columns: minmax(0, 1fr); }
  h2 { font-size: 52px; }
}
@media (max-width: 760px) {
  :root { --page-gutter: 18px; }
  header .in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
  header .brand span { display: block; font-size: 9px; letter-spacing: 0; }
  .sec { padding-block: 52px; }
  h1 { font-size: 48px; }
  h2 { font-size: 40px; }
  h3 { font-size: 28px; }
  .grid, .revgrid { grid-template-columns: minmax(0, 1fr); }
  .grid, .pl3, .two, .jn, .pp { margin-top: 34px; }
  .pg h3 { font-size: 34px; }
  .rt { font-size: 32px; }
  .st h3 { font-size: 38px; }
  .jn { padding-left: 52px; }
  .st::before { left: -38px; }
  .stp > label:not(.f), .ql { font-size: 30px; }
  .pass { padding: 28px 24px; }
  .side { padding: 24px 18px; }
  .btn { padding: 14px 20px; letter-spacing: .06em; }
  #q { grid-template-columns: minmax(0, 1fr); }
  #pjBeats.beat .pn { padding: 20px; }
  #pjBeats.beat h2 { font-size: 32px; }
  #pjBeats.beat.hero h2 { font-size: 40px; }
  #pjBeats.beat.hero p.s { font-size: 17px; margin-top: 18px; }
  #pjBeats.beat.min h2 { font-size: 22px; }
  #pjBeats.beat .tg { gap: 6px; margin-top: 14px; }
  #pjBeats.beat .tg li { font-size: 12px; padding: 4px 10px; }
  .fcta { left: max(16px, env(safe-area-inset-left, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); }
  footer { padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 360px) {
  :root { --page-gutter: 14px; }
  body { font-size: 16px; }
  h2 { font-size: 34px; }
  .st h3 { font-size: 32px; }
  #pjBeats.beat.hero h2 { font-size: 34px; }
  #pjBeats.beat h2 { font-size: 28px; }
  #pjBeats.beat .pn { padding: 16px; }
  .stp > label:not(.f), .ql { font-size: 26px; }
  .num { gap: 16px; }
  .num output { font-size: 48px; }
}
@media (max-height: 600px) and (min-width: 600px) {
  :root { --journey-bottom: calc(env(safe-area-inset-bottom, 0px) + 36px); }
  #pjBeats.beat, #pjBeats.beat.preparation { align-items: flex-start; }
  #pjBeats.beat .pn { padding: 18px; }
  #pjBeats.beat h2, #pjBeats.beat.hero h2 { font-size: 30px; }
  #pjBeats.beat.hero p.s { font-size: 16px; margin-top: 12px; }
  #pjBeats.beat .k { margin-bottom: 10px; }
  #pjBeats.beat .btn { padding: 10px 16px; }
  #pjBeats.beat.min h2 { font-size: 22px; }
  #pjNote { display: none; }
}
/* Desktop opening: a prominent headline, centered on the left, even on short laptops. */
@media (min-width: 901px) and (orientation: landscape) {
  #pjBeats.beat.hero {
    align-items: center;
    justify-content: flex-start;
    padding-block: max(80px, env(safe-area-inset-top, 0px));
  }
  #pjBeats.beat.hero .pn {
    padding: 0;
    max-width: min(820px, 100%);
    max-height: calc(100dvh - 160px);
  }
  #pjBeats.beat.hero h2 { font-size: 84px; }
  #pjBeats.beat.hero p.s { font-size: 20px; margin-top: 24px; }
}
@media (min-width: 1600px) and (min-height: 701px) and (orientation: landscape) {
  #pjBeats.beat.hero h2 { font-size: 96px; }
}
@media (min-width: 901px) and (max-height: 700px) and (orientation: landscape) {
  #pjBeats.beat.hero h2 { font-size: 64px; }
  #pjBeats.beat.hero p.s { margin-top: 18px; }
}
@media (min-width: 901px) and (max-height: 600px) and (orientation: landscape) {
  #pjBeats.beat.hero h2 { font-size: 52px; }
  #pjBeats.beat.hero p.s { font-size: 18px; margin-top: 14px; }
}