/* Perdix home page (body.pf), on top of site.css and perdix.css.
   Base rules = the simple page (also what shows without JavaScript): sections stacked, every text readable.
   html.pf-film = the slideshow: pinned stages, sequences scrubbed by the scroll (perdix-film.js).
   The slideshow is a dark film in both themes, like Apple's product pages: perdix-film-head.html locks the page to the
   dark theme while it shows (data-theme-lock), and the visitor's theme applies to the simple page. */

html.perdix:has(body.pf) {
  --px-head: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --px-body: var(--px-head);
  --px-r: 980px; /* pill buttons and chips */
  --px-r1: 12px; /* thumbnails, map tabs */
  --px-r2: 22px; /* panels and media of the hangar and the maps */
  --pf-gut: clamp(16px, 4vw, 64px);
  /* Height lost to a phone browser's bars while they show (0 on desktop); bottom texts sit above it. */
  --bars: calc(100vh - 100svh);
  --pf-bar: 52px; /* the Perdix bar */
  --pf-top: 124px; /* site header + Perdix bar, measured by the script */
  scroll-padding-top: 64px;
}
html.perdix:has(body.pf):not([data-theme="light"]) { --bg: #000; }
/* A smooth jump across the slideshow would run through every sequence: jumps are instant there. */
html.pf-film { scroll-behavior: auto; }
/* The theme button has nothing to switch while the slideshow shows (the simple page and the other pages keep it). */
html[data-theme-lock] [data-theme-toggle] { display: none; }
.pf { overflow-x: clip; }
.pf h1, .pf h2, .pf h3 { letter-spacing: -.035em; font-weight: 700; }
.pf .site-header { position: relative; }
.pf-film .pf .site-header, .pf-film .pf .subnav { --text: #f5f5f7; --text-2: #d2d2d7; --muted: #a1a1a6; --line: rgba(255, 255, 255, .1); --header-bg: rgba(0, 0, 0, .5); color: var(--text); }
.pf-film .pf .site-header { background: rgba(0, 0, 0, .35); color: var(--text); }
.pf-wrap { max-width: 1240px; margin: 0 auto; padding: 0 var(--pf-gut); }
.pf-nw { white-space: nowrap; }
.pf-br { display: none; }
@media (min-width: 760px) { .pf-br { display: inline; } }
.pf-link { color: var(--px-acc); text-decoration: none; font: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.pf-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.pf .px-btn { font-weight: 500; letter-spacing: -.01em; padding: 13px 22px; }
.pf-btn-quiet { background: rgba(255, 255, 255, .14); color: #f5f5f7; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.pf-btn-quiet:hover { background: rgba(255, 255, 255, .24); }

/* ---------- The Perdix bar: sticky at the top of this page, over the stages ---------- */
html.perdix .pf .subnav {
  position: sticky; top: 0; z-index: 40; border-bottom: 1px solid var(--line);
  background: var(--header-bg); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px);
}
.pf .subnav__bar { min-height: 52px; gap: 28px; flex-wrap: nowrap; padding-top: 0; padding-bottom: 0; }
.pf .subnav__title { font-size: 20px; font-weight: 700; letter-spacing: -.03em; color: var(--text); }
.pf .subnav__links { gap: 24px; font-size: 15px; flex-wrap: nowrap; }
/* Targets at least 32 px high (WCAG 2.5.8 asks for 24), and the current page marked by more than its colour. */
.pf .subnav__title, .pf .subnav__links a { display: inline-flex; align-items: center; min-height: 32px; }
.pf .subnav__links a[aria-current] { color: var(--text); box-shadow: inset 0 -2px 0 var(--px-acc); }
.pf-navx { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.pf-mode {
  display: inline-flex; align-items: center; gap: 7px; border: 0; background: none; color: var(--muted); cursor: pointer;
  font: 500 15px/1 var(--px-body); padding: 8px 0; white-space: nowrap;
}
.pf-mode svg { width: 17px; height: 17px; }
.pf-mode:hover, .pf-mode[aria-pressed="true"] { color: var(--text); }
.pf-mode[aria-pressed="true"] svg { color: var(--px-acc); }
.pf .pf-navcta { font-size: 14px; padding: 8px 15px; }
/* Phones: the five pages in the bar. "Perdix" is the link to the game page there (the "Le jeu" link leaves), the
   slideshow's mode button keeps only its icon, and when the links still do not fit they scroll sideways: the current
   one is brought into view and a fade marks the side that has more (perdix-game.js sets is-more-l / is-more-r). */
@media (max-width: 700px) {
  .pf .subnav__bar { gap: 10px; }
  .pf .subnav__links { position: relative; gap: 10px; min-width: 0; font-size: 14px; overflow-x: auto; scrollbar-width: none; }
  .pf .subnav__links::-webkit-scrollbar { display: none; }
  .pf .subnav__links a { white-space: nowrap; }
  .pf .subnav__links a:first-child { display: none; }
  .pf .subnav__title { font-size: 18px; }
  .pf .subnav__links.is-more-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); }
  .pf .subnav__links.is-more-l { -webkit-mask-image: linear-gradient(90deg, transparent, #000 32px); mask-image: linear-gradient(90deg, transparent, #000 32px); }
  .pf .subnav__links.is-more-l.is-more-r { -webkit-mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent); }
  .pf .pf-navcta { display: none; }
  .pf-mode { min-width: 32px; min-height: 32px; justify-content: center; }
  .pf-mode__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ---------- Stages (simple page): a dark film block, the picture on top, the text under it ---------- */
.pf-pin {
  --text: #f5f5f7; --text-2: #d2d2d7; --muted: #9a9ea6; --line: rgba(255, 255, 255, .14); --px-acc: #6aa9ff;
  position: relative; background: #000; color: var(--text);
}
.pf-stage { position: relative; display: flex; flex-direction: column; padding-bottom: 64px; }
.pf-hero .pf-stage { padding-bottom: 0; }
/* Simple page: the heading and its lines first, then the picture */
.pf-stage > :is(.pf-seq, .pf-phys__media, .pf-day__media) { order: 1; }
.pf-stage > .pf-day__ui { order: 2; }
.pf-shade, .pf-veil, .pf-phys__shade { display: none; }
.pf-seq, .pf-phys__media, .pf-day__media { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: #0b0e13; }
.pf-seq > :not(.pf-pause), .pf-seq__still img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pf-seq canvas { display: none; }
.pf-seq video { opacity: 0; transition: opacity .8s; }
.pf-seq.is-playing video { opacity: 1; }
@media (max-aspect-ratio: 4/5) { .pf-seq, .pf-day__media, .pf-phys__media { aspect-ratio: 4 / 5; } }
.pf-stage > :is(.pf-seq, .pf-phys__media, .pf-day__media) { margin-top: 28px; }
@media (min-width: 900px) {
  .pf-stage > :is(.pf-seq, .pf-phys__media, .pf-day__media) { width: calc(100% - 2 * var(--pf-gut)); max-width: 1240px; margin: 36px auto 0; border-radius: 28px; }
}
.pf-hero .pf-stage > .pf-seq { width: auto; max-width: none; margin: 0; border-radius: 0; }

/* Text blocks of a stage, stacked under the picture */
.pf-stage > :is(div, p, h2):not(.pf-seq, .pf-shade, .pf-veil, .pf-phys__shade, .pf-phys__media, .pf-day__media, .pf-views__frame, .pf-end__img, .pf-line__track) {
  position: relative; max-width: 860px; margin: 0 auto; padding: 0 var(--pf-gut);
}

.pf-pause {
  position: absolute; z-index: 3; top: 14px; right: 14px; width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; color: #fff; background: rgba(8, 10, 14, .5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: .8;
}
.pf-pause:hover, .pf-pause:focus-visible { opacity: 1; }
.pf-pause svg { width: 18px; height: 18px; }
.pf-i-play, .pf-pause.is-paused .pf-i-pause { display: none; }
.pf-pause.is-paused .pf-i-play { display: block; }
.pf-film .pf-pause:not(.pf-vpause) { display: none; }
/* The pause buttons of the looping clips (cards, views, tiles, the maps' flyover), at the top right of each clip. */
.pf-vpause { top: 12px; right: 12px; bottom: auto; width: 40px; height: 40px; }
.pf-vpause[hidden] { display: none !important; }
.pf-film .pf-views__frame > .pf-vpause { top: calc(var(--pf-bar) + 16px); right: 16px; }
.tr__flight > .pf-vpause { top: auto; bottom: 14px; right: 14px; }

/* Without JavaScript the clips cannot load: their posters show instead (in <noscript>), the first view only. */
html:not(.js) :is(.pf-card__m, .pf-views__pane, .pf-tile) video { display: none; }
html:not(.js) .pf-views__pane + .pf-views__pane, html:not(.js) .pf-views .pf-tabs { display: none; }
:is(.pf-card__m, .pf-views__pane, .pf-tile) noscript img { width: 100%; height: 100%; object-fit: cover; }
:is(.pf-card__m, .pf-views__pane, .pf-tile) noscript picture { display: block; height: 100%; }

/* Hero (simple page): the loop full screen, the name at the top, the buttons at the bottom */
.pf-hero .pf-stage { min-height: calc(100svh - 52px - 72px); display: flex; flex-direction: column; justify-content: space-between; }
.pf-hero .pf-seq { position: absolute; inset: 0; aspect-ratio: auto; }
.pf-hero .pf-shade { display: block; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, transparent 34%), linear-gradient(0deg, rgba(0, 0, 0, .75) 0%, transparent 46%); }
.pf-hero__top { text-align: center; padding-top: 9vh !important; }
.pf-hero h1 { font-size: clamp(84px, 16vw, 232px); line-height: .9; letter-spacing: -.055em; }
.pf-hero__lead { margin: 18px auto 0; max-width: 30em; font-size: clamp(19px, 1.7vw, 26px); line-height: 1.3; font-weight: 500; color: #e8e8ed; text-shadow: 0 1px 24px rgba(0, 0, 0, .55); }
.pf-hero__foot { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; padding-top: 32px !important; padding-bottom: 6vh !important; }
.pf-hero__when { font-size: 15px; color: var(--text-2); }
.pf-acts { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.pf-count { font-size: 15px; color: var(--text-2); }
.pf-count strong { font: 700 20px/1 var(--px-head); color: var(--text); font-variant-numeric: tabular-nums; }
.pf-hero__line { display: none; }
.pf-hero .pf-pause { top: auto; bottom: 16px; }
.pf-seq > .pf-pause { top: auto; bottom: 14px; }

/* Radio sentence */
.pf-words .pf-stage { padding: 14vh 0 12vh; }
.pf-words__p { max-width: 21em !important; text-align: center; font-size: clamp(28px, 4.4vw, 64px); line-height: 1.12; font-weight: 600; letter-spacing: -.035em; }
.pf-film .pf-w { opacity: .16; transition: opacity .25s linear; }

/* Radio details, figures */
.pf-flow { padding: 12vh 0; }
.pf-radio { padding-top: 0; background: #000; color: #f5f5f7; --text: #f5f5f7; --text-2: #d2d2d7; --muted: #9a9ea6; }
.pf-radio__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.pf-radio__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 28px; }
.pf-radio__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.45; color: var(--muted); }
.pf-radio__list strong { color: var(--text); font-weight: 600; }
.pf-radio__kb { font-size: .9em; }
.pf-figs__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin: 0 auto; text-align: center; max-width: 1180px; }
.pf-figs__row > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; }
.pf-figs dd { margin: 0; font-size: clamp(72px, 11vw, 168px); line-height: 1; font-weight: 700; letter-spacing: -.05em; font-variant-numeric: tabular-nums; color: var(--text); }
.pf-figs dt { margin-top: 12px; color: var(--muted); font-size: clamp(15px, 1.3vw, 19px); }
@media (max-width: 760px) {
  .pf-radio__grid { grid-template-columns: 1fr; }
  .pf-figs__row { grid-template-columns: 1fr; gap: 48px; }
}

/* Physics */
.pf-phys__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pf-phys__img--crash { display: none; }
.pf-phys h2 { font-size: clamp(36px, 5.6vw, 80px); line-height: 1; letter-spacing: -.045em; margin: 40px 0 24px; }
.pf-phys h3 { font-size: clamp(30px, 4vw, 56px); line-height: 1; letter-spacing: -.04em; margin: 40px 0 16px; }
.pf-phys__text p { font-size: clamp(19px, 1.9vw, 28px); line-height: 1.3; font-weight: 500; letter-spacing: -.018em; }
.pf-phys__text p + p { margin-top: .5em; }
.pf-dim { color: var(--muted); }

/* Views */
.pf-views .pf-stage { padding-top: 12vh; }
.pf-views__intro { text-align: center; margin-bottom: 40px !important; }
.pf-views__intro h2, .pf-turn__head h2, .pf-descent__head h2, .pf-day__head h2 { font-size: clamp(36px, 5.2vw, 76px); line-height: 1.02; letter-spacing: -.045em; }
.pf-views__intro p, .pf-turn__head p, .pf-descent__head p, .pf-day__head p { margin: 16px auto 0; max-width: 34em; color: var(--muted); font-size: clamp(17px, 1.4vw, 21px); }
.pf-views__frame { position: relative; aspect-ratio: 16 / 9; margin: 0 var(--pf-gut); border-radius: 28px; overflow: hidden; background: #0b0e13; max-width: 1240px; }
@media (min-width: 1320px) { .pf-views__frame { margin: 0 auto; } }
@media (max-width: 700px) { .pf-views__frame { aspect-ratio: 4 / 5; } }
.pf-views__pane { position: absolute; inset: 0; }
.pf-views__pane video { width: 100%; height: 100%; object-fit: cover; }
.pf-views__ui { display: flex; flex-direction: column-reverse; align-items: center; gap: 20px; margin-top: 24px; }
.pf-views__texts { position: relative; width: min(640px, 100%); text-align: center; font-size: clamp(17px, 1.45vw, 21px); line-height: 1.4; font-weight: 500; }
.pf-views__texts p { display: none; }
.pf-views__texts p.is-on { display: block; }
.pf-tabs { display: inline-flex; max-width: 100%; padding: 4px; gap: 2px; border-radius: 980px; background: rgba(40, 40, 44, .72); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); }
.pf-tabs button { border: 0; background: transparent; color: #c7c7cc; font: 500 15px/1 var(--px-body); padding: 11px 18px; border-radius: 980px; cursor: pointer; transition: background .3s, color .3s; white-space: nowrap; }
.pf-tabs button:hover { color: #fff; }
.pf-tabs button[aria-pressed="true"] { background: #f5f5f7; color: #000; }
.pf-tabs button:focus-visible { outline: 2px solid var(--px-acc); outline-offset: 2px; }
@media (max-width: 420px) { .pf-tabs button { padding: 10px 11px; font-size: 14px; } }

/* Carrier, aircraft, maps: a sequence with its texts */
.pf-carrier__title { font-size: clamp(44px, 8vw, 120px); line-height: .95; letter-spacing: -.05em; margin-top: 36px !important; }
.pf-carrier__t, .pf-turn__t, .pf-descent__t { font-size: clamp(20px, 2.6vw, 38px); line-height: 1.18; font-weight: 600; letter-spacing: -.028em; margin-top: 18px !important; }
.pf-turn__head, .pf-descent__head { margin-top: 36px !important; }

/* Row of aircraft (simple page: a swipeable row) */
.pf-line .pf-stage { padding: 4vh 0 12vh; }
.pf-line__track { display: flex; gap: clamp(14px, 1.6vw, 24px); padding: 0 var(--pf-gut) 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--pf-gut); }
.pf-card { flex: 0 0 auto; width: min(68vw, calc(58vh * 16 / 10)); margin: 0; scroll-snap-align: start; }
.pf-card__m { position: relative; aspect-ratio: 16 / 10; border-radius: clamp(18px, 2vw, 28px); overflow: hidden; background: #15181c; }
.pf-card__m video, .pf-card__m img { width: 100%; height: 100%; object-fit: cover; }
.pf-card__m picture { display: block; height: 100%; }
.pf-card figcaption, .pf-card p { margin-top: 16px; max-width: 34em; color: var(--muted); font-size: clamp(16px, 1.25vw, 19px); line-height: 1.42; }
.pf-card strong { color: var(--text); font-weight: 600; }
.pf-card figcaption .pf-link { white-space: nowrap; }
.pf-card--end { width: min(40vw, 460px); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 18px; }
.pf-card--end h3 { font-size: clamp(28px, 3vw, 44px); line-height: 1.05; }
.pf-card--end p { margin: 0; }
@media (max-width: 700px) {
  .pf-card { width: 84vw; }
  .pf-card__m { aspect-ratio: 4 / 5; }
  .pf-card--end { width: 76vw; }
}

/* Dawn to night (simple page: the buttons pick the hour) */
.pf-day__img { position: absolute; inset: 0; display: block; opacity: 0; }
.pf-day__img img { width: 100%; height: 100%; object-fit: cover; }
.pf-day__img:first-child { opacity: 1; }
.pf-day__head { text-align: center; margin-top: 36px !important; }
.pf-day__ui { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 28px !important; }
.pf-day__hour { font-size: clamp(24px, 2.6vw, 36px); font-weight: 600; letter-spacing: -.03em; min-height: 1.2em; }
.pf-day__rail { display: none; }
.pf-day .pf-tabs { flex-wrap: wrap; justify-content: center; border-radius: 26px; }
.pf-day .pf-tabs button { padding: 10px 14px; font-size: 14px; }

/* Maps tiles, school and challenges */
.pf-tiles { padding-top: 10vh; }
.pf-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(12px, 1.4vw, 20px); }
.pf-tile { position: relative; margin: 0; border-radius: clamp(18px, 2vw, 28px); overflow: hidden; background: #15181c; aspect-ratio: 16 / 10; color: #f5f5f7; }
.pf-tile video, .pf-tile img { width: 100%; height: 100%; object-fit: cover; }
.pf-tile figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 56px 24px 20px; background: linear-gradient(0deg, rgba(0, 0, 0, .78), rgba(0, 0, 0, 0)); font-size: clamp(17px, 1.4vw, 21px); font-weight: 600; letter-spacing: -.02em; }
.pf-tile figcaption span { display: block; margin-top: 4px; font-weight: 400; color: #d2d2d7; font-size: clamp(14px, 1.1vw, 16px); letter-spacing: -.01em; max-width: 36em; }
.pf-tile figcaption h2 { font-size: clamp(24px, 2.4vw, 34px); line-height: 1.05; letter-spacing: -.035em; }
.pf-tile--text figcaption { padding-top: 140px; }
.pf-grid--two .pf-tile { aspect-ratio: 4 / 3.4; }
.pf-more { margin: 28px 0 9vh; text-align: center; }
.pf-tile__more { display: inline-block; margin-top: 10px; font-size: clamp(15px, 1.1vw, 17px); font-weight: 500; letter-spacing: -.01em; color: #8cbcff; }
@media (max-width: 700px) {
  .pf-grid { grid-template-columns: 1fr; }
  .pf-grid--two .pf-tile { aspect-ratio: auto; display: flex; flex-direction: column; }
  .pf-grid--two .pf-tile img { aspect-ratio: 16 / 10; height: auto; }
  .pf-tile--text figcaption { position: static; padding: 20px; background: none; }
  .pf-tile__more { color: var(--px-acc); }
}

/* The ending: sign-up */
.pf-end .pf-stage { padding-top: 10vh; }
.pf-end__img { position: relative; margin: 0 var(--pf-gut); border-radius: 28px; overflow: hidden; aspect-ratio: 16 / 9; max-width: 1240px; }
@media (min-width: 1320px) { .pf-end__img { margin: 0 auto; } }
@media (max-aspect-ratio: 4/5) { .pf-end__img { aspect-ratio: 4 / 5; } }
.pf-end__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 78%; }
.pf-end__body { text-align: center; margin-top: 40px !important; display: flex; flex-direction: column; align-items: center; }
.pf-end h2 { font-size: clamp(40px, 6.4vw, 96px); line-height: 1; letter-spacing: -.05em; }
.pf-end__price { margin-top: 10px; font-size: clamp(19px, 1.8vw, 26px); font-weight: 500; color: var(--text-2); letter-spacing: -.02em; }
.pf-end .pf-count { margin-top: 12px; }
.pf-signup { margin-top: 22px; width: 100%; max-width: 520px; justify-content: center; flex-wrap: nowrap; }
.pf-signup input[type="email"] {
  flex: 1; min-width: 0; height: 50px; padding: 0 20px; border-radius: 980px !important; border: 1px solid rgba(255, 255, 255, .26) !important;
  background: rgba(255, 255, 255, .07) !important; color: #f5f5f7 !important; font: 400 17px var(--px-body);
}
.pf-signup input::placeholder { color: #9a9ea6; }
.pf-signup .px-btn { height: 50px; }
.pf-end .px-status { margin-top: 18px; background: rgba(255, 255, 255, .08); }
.pf-end__note { margin-top: 14px; max-width: 32em; color: var(--muted); font-size: 14px; }
.pf-end__more { margin-top: 18px; display: flex; gap: 10px 22px; justify-content: center; flex-wrap: wrap; font-size: 17px; }
@media (max-width: 520px) {
  .pf-signup { flex-direction: column; flex-wrap: wrap; }
  .pf-signup input[type="email"] { flex: none; }
}

/* The sign-up block that ends the hangar and the maps: dark in both themes, like the slideshow's ending and the
   school's. Its form takes the dark colours whatever the theme (the simple page's rules read these variables). */
.pf-cta {
  --text: #f5f5f7; --text-2: #d2d2d7; --muted: #9a9ea6; --line: rgba(255, 255, 255, .14); --px-acc: #6aa9ff;
  --hover-line: rgba(255, 255, 255, .26); --bg-raised: rgba(255, 255, 255, .07); --bg-alt: rgba(255, 255, 255, .08);
  background: #000; color: var(--text); padding: clamp(72px, 12vh, 140px) 0; text-align: center;
}
.pf-cta__in { display: flex; flex-direction: column; align-items: center; }
.pf-cta h2 { font-size: clamp(40px, 6.4vw, 88px); line-height: 1; letter-spacing: -.05em; }
.pf-cta__price { margin-top: 10px; font-size: clamp(19px, 1.8vw, 26px); font-weight: 500; color: var(--text-2); letter-spacing: -.02em; }
.pf-cta .pf-count { margin-top: 12px; }
html .pf-cta .pf-signup { justify-content: center; max-width: 520px; }
.pf-cta .px-status { margin-top: 18px; background: rgba(255, 255, 255, .08); }
.pf-cta__note { margin-top: 14px; max-width: 32em; color: var(--muted); font-size: 14px; }
.pf-cta__more, .pf-end__more { align-items: center; }
.pf-cta__more { margin-top: 22px; display: flex; gap: 10px 22px; justify-content: center; flex-wrap: wrap; font-size: 17px; }
.pf-wish { padding: 10px 18px !important; font-size: 15px; }

/* After the ending: share, vote, practical details, origin */
.pf-after { padding: 8vh 0 0; }
.pf-after__row { display: grid; justify-items: center; gap: 32px; }
.pf-vote { width: 100%; max-width: 760px; }
.pf-facts { padding-top: 8vh; }
.pf-facts h2 { font-size: clamp(32px, 3.6vw, 48px); line-height: 1.02; margin-bottom: 24px; }
.pf-facts dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; margin: 0; border-top: 1px solid var(--line); }
.pf-facts dl > div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.pf-facts dt { color: var(--muted); }
.pf-facts dd { margin: 0; }
.pf-origin { margin-top: 10vh; max-width: 760px; color: var(--text-2); display: grid; gap: 14px; }
.pf-origin h2 { margin-bottom: 4px; }
@media (max-width: 900px) {
  .pf-facts dl { grid-template-columns: 1fr; }
  .pf-facts dl > div { grid-template-columns: 110px minmax(0, 1fr); }
}

/* =====================================================================================
   The slideshow
   ===================================================================================== */
.pf-film .pf-pin { height: calc(var(--len, 300) * 1vh); }
.pf-film .pf-hero { --len: 300; }
.pf-film .pf-words { --len: 240; }
.pf-film .pf-phys { --len: 340; }
.pf-film .pf-views { --len: 460; }
.pf-film .pf-carrier { --len: 380; }
.pf-film .pf-turn { --len: 300; }
.pf-film .pf-line { --len: 300; } /* set in pixels by the script from the cards' width */
.pf-film .pf-day { --len: 400; }
.pf-film .pf-descent { --len: 300; }
.pf-film .pf-end { --len: 220; }

.pf-film .pf-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; padding: 0; min-height: 0; }
.pf-film .pf-stage > :last-child { padding-bottom: 0; }
.pf-film .pf-stage > :is(div, p, h2):not(.pf-seq, .pf-shade, .pf-veil, .pf-phys__shade, .pf-phys__media, .pf-day__media, .pf-views__frame, .pf-end__img, .pf-line__track) {
  position: absolute; left: 0; right: 0; max-width: none; margin: 0;
}
.pf-film [data-f] { will-change: opacity, transform; }
.pf-film .pf-stage > :is(.pf-seq, .pf-phys__media, .pf-day__media) { position: absolute; inset: 0; aspect-ratio: auto; width: auto; max-width: none; margin: 0; border-radius: 0; }
.pf-film .pf-stage { display: block; }
.pf-film .pf-seq canvas { display: block; }
.pf-film .pf-seq video { display: none; }
.pf-film .pf-seq.is-drawn .pf-seq__still { visibility: hidden; }
.pf-film .pf-shade { display: block; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, .5) 0%, transparent 32%), linear-gradient(0deg, rgba(0, 0, 0, .6) 0%, transparent 34%); }
.pf-film :is(.pf-turn, .pf-descent) .pf-shade { background: linear-gradient(180deg, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, .42) 34%, transparent 54%), linear-gradient(0deg, rgba(0, 0, 0, .62) 0%, transparent 36%); }
/* Grey lines over busy pictures: near white, with a soft shadow, over a darker top shade. */
.pf-film :is(.pf-views__intro, .pf-day__head, .pf-turn__head, .pf-descent__head) p { color: #ebebf0; text-shadow: 0 1px 2px rgba(0, 0, 0, .6), 0 2px 24px rgba(0, 0, 0, .55); }
.pf-film .pf-phys__text p { text-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 2px 24px rgba(0, 0, 0, .5); }
.pf-film .pf-dim { color: #c9cad0; }

/* Hero: it starts under the site header and the Perdix bar, which sit over its top */
.pf-film .pf-hero { margin-top: calc(-1 * var(--pf-top)); z-index: 2; }
/* The sentence is pinned under the hero's last screen: the hero lifts off it like a curtain, with no black screen
   between them (the words light up as it is uncovered, data-words). */
.pf-film .pf-words { margin-top: -100vh; z-index: 1; }
.pf-film .pf-hero__top { top: calc(var(--pf-top) + 5vh); padding-top: 0 !important; }
.pf-film .pf-hero__foot { top: auto; bottom: calc(var(--bars) + 6vh); padding: 0 var(--pf-gut) !important; }
.pf-film .pf-hero__line { display: block; top: auto; bottom: calc(var(--bars) + 12vh); text-align: center; padding: 0 var(--pf-gut);
  font-size: clamp(30px, 4.6vw, 64px); line-height: 1.08; font-weight: 600; letter-spacing: -.035em; text-shadow: 0 2px 40px rgba(0, 0, 0, .5); }
.pf-film .pf-veil { display: block; position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; }

/* Words */
.pf-film .pf-words .pf-stage { display: grid; place-items: center; }
.pf-film .pf-words__p { position: relative !important; margin: 0 auto !important; }

/* Physics */
.pf-film .pf-phys__img { transform-origin: 70% 22%; }
.pf-film .pf-phys__img--crash { display: block; opacity: 0; }
.pf-film .pf-phys__shade { display: block; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .55) 42%, rgba(0, 0, 0, .05) 75%); }
.pf-film .pf-phys__text { left: var(--pf-gut) !important; right: auto !important; top: 50%; translate: 0 -50%; max-width: min(640px, 88vw) !important; padding: 0 !important; }
.pf-film .pf-phys h2 { margin-top: 0; }
.pf-film .pf-phys h3 { margin-top: 0; }
@media (max-width: 700px) {
  .pf-film .pf-phys__shade { background: linear-gradient(0deg, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .65) 55%, rgba(0, 0, 0, .25) 100%); }
  .pf-film .pf-phys__text { top: auto; bottom: calc(var(--bars) + 7vh); translate: none; }
  .pf-film .pf-phys__img { object-position: 68% 50%; transform-origin: 68% 18%; }
}
@media (max-aspect-ratio: 4/5) {
  .pf-film .pf-phys__img:not(.pf-phys__img--crash) { object-position: 60% 50%; transform-origin: 60% 20%; }
}

/* Views */
.pf-film .pf-views .pf-stage { padding-top: 0; }
.pf-film .pf-views__intro { top: calc(var(--pf-bar) + 5vh); z-index: 2; margin: 0 !important; }
.pf-film .pf-views__frame { position: absolute; inset: 0; margin: 0; border-radius: 0; max-width: none; aspect-ratio: auto; will-change: clip-path; clip-path: inset(37vh 16vw 8vh 16vw round 28px); }
@media (max-width: 700px) { .pf-film .pf-views__frame { clip-path: inset(40vh 5vw 16vh 5vw round 28px); } }
.pf-film .pf-views__pane + .pf-views__pane { visibility: hidden; }
.pf-film .pf-views__frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(0, 0, 0, .72) 0%, transparent 34%); }
.pf-film .pf-views__ui { top: auto; bottom: calc(var(--bars) + 5vh); z-index: 3; flex-direction: column; margin: 0 !important; }
.pf-film .pf-views__texts { min-height: 4.2em; }
@media (max-width: 520px) { .pf-film .pf-views__texts { min-height: 7.2em; } }
.pf-film .pf-views__texts p { display: block; position: absolute; inset: 0 0 auto; opacity: 0; transform: translateY(8px); transition: opacity .45s, transform .45s; text-shadow: 0 1px 18px rgba(0, 0, 0, .6); }
.pf-film .pf-views__texts p.is-on { opacity: 1; transform: none; }

/* Carrier, aircraft, maps */
.pf-film .pf-carrier__title { top: calc(var(--pf-bar) + 7vh); text-align: center; }
.pf-film :is(.pf-carrier__t, .pf-turn__t, .pf-descent__t) { top: auto; bottom: calc(var(--bars) + 9vh); text-align: center; text-shadow: 0 2px 30px rgba(0, 0, 0, .5); }
.pf-film :is(.pf-carrier__t, .pf-turn__t, .pf-descent__t) { max-width: 24em !important; margin: 0 auto !important; }
.pf-film :is(.pf-turn__head, .pf-descent__head) { top: calc(var(--pf-bar) + 6vh); text-align: center; text-shadow: 0 2px 30px rgba(0, 0, 0, .5); }

/* Row of aircraft */
.pf-film .pf-line .pf-stage { display: flex; flex-direction: column; justify-content: center; padding: 52px 0 0; }
.pf-film .pf-line__track { overflow: visible; scroll-snap-type: none; will-change: transform; padding-bottom: 0; }

/* Day to night */
.pf-film .pf-day .pf-shade { background: linear-gradient(180deg, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, .42) 32%, transparent 52%), linear-gradient(0deg, rgba(0, 0, 0, .62) 0%, transparent 36%); }
.pf-film .pf-day__head { top: calc(var(--pf-bar) + 6vh); margin: 0 !important; }
.pf-film .pf-day__head h2 { font-size: clamp(44px, 7vw, 104px); line-height: .98; letter-spacing: -.05em; }
.pf-film .pf-day__ui { top: auto; bottom: calc(var(--bars) + 6vh); margin: 0 !important; }
.pf-film .pf-day__rail { display: block; position: relative; width: min(560px, 100%); height: 2px; background: rgba(255, 255, 255, .22); border-radius: 2px; }
.pf-film .pf-day__rail i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #fff; border-radius: 2px; }
@media (max-width: 520px) { .pf-film .pf-day .pf-tabs { display: none; } }

/* Ending */
.pf-film .pf-end .pf-stage { padding: 0; }
.pf-film .pf-end__img { position: absolute; inset: 0; margin: 0; border-radius: 0; aspect-ratio: auto; max-width: none; will-change: clip-path; }
.pf-film .pf-end__body { top: auto; bottom: calc(var(--bars) + 6vh); margin: 0 !important; padding: 0 var(--pf-gut) !important; }
@media (max-width: 520px) {
  .pf-film .pf-end h2 { font-size: 38px; }
  .pf-film .pf-end__price { font-size: 18px; }
  .pf-film .pf-end__body { bottom: calc(var(--bars) + 3vh); }
  .pf-film .pf-end__note { display: none; }
}
@media (max-height: 640px) and (min-width: 521px) { .pf-film .pf-end__note { display: none; } }

/* Tiles rising */
.pf-film [data-rise] { will-change: transform, opacity; }

@media (prefers-reduced-motion: reduce) {
  .pf-seq video, .pf-views__texts p, .pf-w { transition: none !important; }
}

/* =====================================================================================
   The simple page (html.pf-simple, and the page without JavaScript): a classic page.
   Below the hero, every section sits on the page's own background (it follows the light/dark theme),
   with its heading and text beside its picture on large screens (sides alternate) and above it on phones.
   One type scale, one spacing scale, pictures at their own ratio (16:9 on large screens, 4:5 on phones,
   matching the portrait cuts the page loads there).
   ===================================================================================== */
html:not(.pf-film) {
  --pf-sec: clamp(40px, 5vw, 72px); /* half the space between two sections */
  --pf-r: clamp(14px, 1.6vw, 22px);
}
html:not(.pf-film) .pf-pin:not(.pf-hero), html:not(.pf-film) .pf-radio {
  --text: inherit; --text-2: inherit; --muted: inherit; --line: inherit; --px-acc: inherit;
  background: var(--bg); color: var(--text);
}
html:not(.pf-film) .pf-flow { padding: var(--pf-sec) 0; }

/* Sections: one grid, heading and text in one column, the picture in the other */
html:not(.pf-film) :is(.pf-words, .pf-phys, .pf-carrier, .pf-views, .pf-turn, .pf-day, .pf-descent, .pf-end) .pf-stage {
  display: grid; grid-template-columns: minmax(0, 1fr); column-gap: clamp(40px, 5vw, 80px);
  max-width: 1240px; margin: 0 auto; padding: var(--pf-sec) var(--pf-gut);
}
html:not(.pf-film) :is(.pf-words, .pf-phys, .pf-carrier, .pf-views, .pf-turn, .pf-day, .pf-descent, .pf-end) .pf-stage > * {
  max-width: none; margin: 0 !important; padding: 0 !important; text-align: left; width: auto;
}
html:not(.pf-film) :is(.pf-phys, .pf-carrier, .pf-turn, .pf-day, .pf-descent, .pf-end) .pf-stage > :is(.pf-seq, .pf-phys__media, .pf-day__media, .pf-end__img) {
  order: 10; margin-top: 28px !important; border-radius: var(--pf-r); overflow: hidden; aspect-ratio: 16 / 9; background: var(--bg-alt);
}
/* Phones load the portrait cuts: their frame is 4:5 so nothing important is cropped away */
@media (max-aspect-ratio: 4/5) {
  html:not(.pf-film) :is(.pf-phys, .pf-carrier, .pf-turn, .pf-day, .pf-descent, .pf-end) .pf-stage > :is(.pf-seq, .pf-phys__media, .pf-day__media, .pf-end__img) { aspect-ratio: 4 / 5; }
}
@media (min-width: 900px) {
  html:not(.pf-film) :is(.pf-phys, .pf-carrier, .pf-turn, .pf-day, .pf-descent, .pf-end) .pf-stage {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: 1fr repeat(4, auto) 1fr; align-items: start;
  }
  /* An empty first row, so the text block sits in the middle of the picture's height */
  html:not(.pf-film) :is(.pf-phys, .pf-carrier, .pf-turn, .pf-day, .pf-descent, .pf-end) .pf-stage::before { content: ""; grid-column: 1; grid-row: 1; }
  html:not(.pf-film) :is(.pf-phys, .pf-carrier, .pf-turn, .pf-day, .pf-descent, .pf-end) .pf-stage > * { grid-column: 1; }
  html:not(.pf-film) :is(.pf-phys, .pf-carrier, .pf-turn, .pf-day, .pf-descent, .pf-end) .pf-stage > :is(.pf-seq, .pf-phys__media, .pf-day__media, .pf-end__img) {
    grid-column: 2; grid-row: 1 / -1; align-self: center; margin-top: 0 !important;
  }
  /* The picture on the left for every other section */
  html:not(.pf-film) :is(.pf-carrier, .pf-day, .pf-end) .pf-stage { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  html:not(.pf-film) :is(.pf-carrier, .pf-day, .pf-end) .pf-stage::before,
  html:not(.pf-film) :is(.pf-carrier, .pf-day, .pf-end) .pf-stage > * { grid-column: 2; }
  html:not(.pf-film) :is(.pf-carrier, .pf-day, .pf-end) .pf-stage > :is(.pf-seq, .pf-day__media, .pf-end__img) { grid-column: 1; }
}

/* Headings that are direct children of a stage keep their space under them */
html:not(.pf-film) .pf-stage > :is(h2.pf-carrier__title, h2.visually-hidden) { margin-bottom: 16px !important; }

/* One type scale */
html:not(.pf-film) :is(.pf-words, .pf-phys, .pf-carrier, .pf-views, .pf-turn, .pf-day, .pf-descent, .pf-tiles, .pf-facts) h2,
html:not(.pf-film) .pf-carrier__title, html:not(.pf-film) .pf-words .visually-hidden {
  font-size: clamp(30px, 3.4vw, 48px); line-height: 1.05; letter-spacing: -.035em; font-weight: 700; margin-bottom: 16px;
}
html:not(.pf-film) :is(.pf-phys__text p, .pf-carrier__t, .pf-turn__head p, .pf-turn__t, .pf-descent__head p, .pf-descent__t, .pf-views__intro p, .pf-day__head p) {
  font-size: clamp(17px, 1.3vw, 19px); line-height: 1.55; font-weight: 400; letter-spacing: -.01em; color: var(--text-2); max-width: 36em;
  text-shadow: none; margin: 0;
}
html:not(.pf-film) :is(.pf-phys__text p, .pf-carrier__t, .pf-turn__head p, .pf-turn__t, .pf-descent__head p, .pf-descent__t) + :is(p) { margin-top: .7em; }
html:not(.pf-film) :is(.pf-carrier__t, .pf-turn__t, .pf-descent__t) { margin-top: .7em !important; }
html:not(.pf-film) .pf-phys__text p { display: inline; }
html:not(.pf-film) .pf-phys__text p::after { content: " "; }
html:not(.pf-film) .pf-phys__text h3 { font-size: clamp(21px, 1.8vw, 26px); line-height: 1.2; margin: 0 0 8px; letter-spacing: -.02em; }
html:not(.pf-film) .pf-stage > .pf-phys__text--crash { margin-top: 28px !important; }
html:not(.pf-film) .pf-phys__text { opacity: 1; transform: none; }

/* The transmitter: heading and lead, then the photo beside the list */
html:not(.pf-film) .pf-words .pf-stage { padding-bottom: 28px; }
html:not(.pf-film) .pf-words .visually-hidden { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
html:not(.pf-film) .pf-words__p { font-size: clamp(20px, 1.9vw, 26px); line-height: 1.4; font-weight: 500; letter-spacing: -.02em; max-width: 34em; }
html:not(.pf-film) .pf-radio { padding-top: 0; }
html:not(.pf-film) .pf-radio__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
html:not(.pf-film) .pf-radio__photo img { border-radius: var(--pf-r); aspect-ratio: 3 / 2; }
html:not(.pf-film) .pf-radio__list { font-size: clamp(16px, 1.2vw, 18px); gap: 18px; color: var(--text-2); }
@media (max-width: 760px) { html:not(.pf-film) .pf-radio__grid { grid-template-columns: 1fr; } }

/* Figures: one ruled row */
html:not(.pf-film) .pf-figs__row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; text-align: left; max-width: none; border-block: 1px solid var(--line); }
html:not(.pf-film) .pf-figs__row > div { padding: 24px 20px 24px 0; }
html:not(.pf-film) .pf-figs__row > div + div { padding-left: 20px; border-left: 1px solid var(--line); }
html:not(.pf-film) .pf-figs dd { font-size: clamp(36px, 5vw, 72px); color: var(--px-acc); }
html:not(.pf-film) .pf-figs dt { margin-top: 8px; font-size: clamp(13px, 1.1vw, 16px); line-height: 1.4; }
@media (max-width: 600px) {
  html:not(.pf-film) .pf-figs__row { grid-template-columns: 1fr; }
  html:not(.pf-film) .pf-figs__row > div, html:not(.pf-film) .pf-figs__row > div + div {
    flex-direction: row-reverse; justify-content: flex-end; align-items: baseline; gap: 16px; padding: 16px 0; border-left: 0;
  }
  html:not(.pf-film) .pf-figs__row > div + div { border-top: 1px solid var(--line); }
  html:not(.pf-film) .pf-figs dd { font-size: 40px; min-width: 2.2em; }
  html:not(.pf-film) .pf-figs dt { margin: 0; font-size: 15px; }
}

/* The four views: heading, the clip across the width, then the tabs and the view's text side by side */
html:not(.pf-film) .pf-views__intro h2 { margin-bottom: 12px; }
html:not(.pf-film) .pf-stage > .pf-views__frame { margin-top: 28px !important; border-radius: var(--pf-r); background: var(--bg-alt); }
html:not(.pf-film) .pf-stage > .pf-views__ui { display: flex; flex-direction: row; align-items: center; gap: 16px 32px; margin-top: 20px !important; }
html:not(.pf-film) .pf-views__ui .pf-tabs { order: -1; flex: none; }
html:not(.pf-film) .pf-views__texts { text-align: left; width: auto; max-width: 40em; font-size: clamp(16px, 1.2vw, 18px); font-weight: 400; line-height: 1.55; color: var(--text-2); }
@media (max-width: 760px) { html:not(.pf-film) .pf-stage > .pf-views__ui { flex-direction: column; align-items: flex-start; } }

/* Tabs on the page's background */
html:not(.pf-film) .pf-tabs { background: var(--bg-alt); box-shadow: inset 0 0 0 1px var(--line); backdrop-filter: none; -webkit-backdrop-filter: none; }
html:not(.pf-film) .pf-tabs button { color: var(--muted); }
html:not(.pf-film) .pf-tabs button:hover { color: var(--text); }
html:not(.pf-film) .pf-tabs button[aria-pressed="true"] { background: var(--text); color: var(--bg); }

/* Aircraft cards: a 2-column grid on large screens, a swipeable row on phones */
html:not(.pf-film) .pf-line .pf-stage { padding: 0 0 var(--pf-sec); }
html:not(.pf-film) .pf-card__m { background: var(--bg-alt); border-radius: var(--pf-r); }
html:not(.pf-film) .pf-card figcaption { margin-top: 12px; font-size: clamp(15px, 1.15vw, 17px); color: var(--text-2); }
@media (min-width: 900px) {
  html:not(.pf-film) .pf-line__track {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px clamp(20px, 2vw, 32px);
    max-width: 1240px; margin: 0 auto; padding: 0 var(--pf-gut); overflow: visible;
  }
  html:not(.pf-film) .pf-card { width: auto; }
  html:not(.pf-film) .pf-card__m { aspect-ratio: 16 / 10; }
  html:not(.pf-film) .pf-card--end {
    grid-column: 1 / -1; width: auto; flex-direction: row; align-items: center; gap: 12px 32px; flex-wrap: wrap;
    padding: 24px 28px; border: 1px solid var(--line); border-radius: var(--pf-r); background: var(--bg-alt);
  }
  html:not(.pf-film) .pf-card--end h3 { font-size: clamp(22px, 2vw, 28px); }
  html:not(.pf-film) .pf-card--end p { flex: 1 1 20em; margin: 0; }
}
@media (max-width: 899px) {
  html:not(.pf-film) .pf-card { width: min(78vw, 420px); }
  html:not(.pf-film) .pf-card--end { width: min(70vw, 360px); padding: 24px; border: 1px solid var(--line); border-radius: var(--pf-r); background: var(--bg-alt); justify-content: center; }
  html:not(.pf-film) .pf-card--end h3 { font-size: 26px; }
}

/* Dawn to night: the hour and its buttons under the text */
html:not(.pf-film) .pf-stage > .pf-day__ui { align-items: flex-start; gap: 12px; margin-top: 24px !important; }
html:not(.pf-film) .pf-day__hour { font-size: clamp(20px, 1.8vw, 24px); }
html:not(.pf-film) .pf-day .pf-tabs { justify-content: flex-start; }

/* Maps, school and challenges */
html:not(.pf-film) .pf-tiles { padding-top: 0; }
html:not(.pf-film) .pf-tile { border-radius: var(--pf-r); background: var(--bg-alt); }
html:not(.pf-film) .pf-more { margin: 24px 0 var(--pf-sec); text-align: left; }
html:not(.pf-film) .pf-grid--two .pf-tile { aspect-ratio: auto; display: flex; flex-direction: column; color: var(--text); background: var(--bg-alt); border: 1px solid var(--line); }
html:not(.pf-film) .pf-grid--two .pf-tile img { aspect-ratio: 16 / 9; height: auto; }
html:not(.pf-film) .pf-tile--text figcaption { position: static; padding: 22px 24px 26px; background: none; }
html:not(.pf-film) .pf-tile--text figcaption h2 { font-size: clamp(22px, 2vw, 28px); margin-bottom: 8px; }
html:not(.pf-film) .pf-tile--text figcaption span { color: var(--text-2); font-size: clamp(15px, 1.15vw, 17px); line-height: 1.5; }

/* The ending: the picture beside the sign-up */
html:not(.pf-film) .pf-end__img img { object-position: 50% 70%; }
html:not(.pf-film) .pf-end__body { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
html:not(.pf-film) .pf-end h2 { font-size: clamp(32px, 3.8vw, 52px); }
html:not(.pf-film) .pf-end__price { font-size: clamp(17px, 1.4vw, 20px); margin-top: 8px; }
html:not(.pf-film) .pf-signup { justify-content: flex-start; max-width: 460px; }
html:not(.pf-film) .pf-signup input[type="email"] { border: 1px solid var(--hover-line) !important; background: var(--bg-raised) !important; color: var(--text) !important; }
html:not(.pf-film) .pf-signup input::placeholder { color: var(--muted); }
html:not(.pf-film) .pf-end .px-status { background: var(--bg-alt); }
html:not(.pf-film) .pf-end__note { font-size: 14px; }
html:not(.pf-film) .pf-end__more { justify-content: flex-start; font-size: 16px; }
@media (max-width: 520px) {
  html:not(.pf-film) .pf-signup { flex-direction: column; align-items: stretch; max-width: none; }
  html:not(.pf-film) .pf-signup input[type="email"] { flex: none; width: 100%; }
  html:not(.pf-film) .pf-signup .px-btn { flex: none; width: 100%; height: 50px; }
}

/* After the ending */
html:not(.pf-film) .pf-after { padding-bottom: 0; }
html:not(.pf-film) .pf-after__row { justify-items: start; }
html:not(.pf-film) .pf-origin { margin-top: var(--pf-sec); }