.crewcalc-hero {
  min-height: auto;
  align-items: center;
  padding: clamp(8rem, 14vw, 10.5rem) 0 clamp(4rem, 8vw, 6rem);
}

.crewcalc-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(20rem, 0.95fr);
  align-items: center;
  gap: clamp(2.5rem, 5vw, 4.5rem);
}

.crewcalc-hero h1 {
  max-width: 11ch;
}

.crewcalc-hero .lede {
  max-width: 44ch;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
}

/* The reconciliation strip — the page's signature. A pilot's pay register is
   a monospace document, so the figures are set in mono and the rows are ruled
   like a ledger rather than boxed like a stat card. Gold lands on exactly one
   number: the difference. It is the pilot's money, so it gets the brand's
   accent, not an alarm colour. */
.reconcile {
  margin: 0;
  padding: clamp(1.5rem, 3vw, 2rem);
  background: linear-gradient(180deg, rgba(11, 26, 41, 0.92), rgba(8, 19, 31, 0.92));
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 70px rgba(2, 8, 15, 0.45);
}

.reconcile figcaption {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 1.15rem;
  border-bottom: 1px solid var(--line);
}

.reconcile-heading {
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 600;
}

.reconcile-note {
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.reconcile-rows {
  margin: 0;
  padding: 0.35rem 0 0;
}

.reconcile-row {
  display: flex;
  gap: 1.5rem;
  align-items: baseline;
  justify-content: space-between;
  padding: 0.85rem 0;
}

.reconcile-row dt {
  color: var(--slate);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.reconcile-row dd {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.reconcile-result {
  margin-top: 0.35rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line-2);
}

.reconcile-result dt { color: var(--gold); }

.reconcile-result dd {
  color: var(--gold-bright);
  font-size: clamp(1.5rem, 3vw, 2rem);
}

.reconcile-source {
  margin: 1.25rem 0 0;
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.crewcalc-feature-band {
  padding: clamp(4.5rem, 8vw, 7rem) 0;
  background:
    radial-gradient(circle at 12% 18%, rgba(212, 162, 74, 0.08), transparent 27rem),
    linear-gradient(180deg, var(--deep), var(--navy));
  border-bottom: 1px solid var(--line);
}

.crewcalc-feature-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1.2rem;
}

.crewcalc-feature {
  min-height: 25rem;
  padding: clamp(2rem, 4vw, 3.3rem);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: rgba(11, 26, 41, 0.68);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.crewcalc-feature::before {
  width: 8rem;
  height: 8rem;
  position: absolute;
  top: -4rem;
  right: -4rem;
  border: 1px solid rgba(212, 162, 74, 0.24);
  border-radius: 50%;
  content: "";
}

.crewcalc-feature:nth-child(1),
.crewcalc-feature:nth-child(4) {
  grid-column: span 7;
}

.crewcalc-feature:nth-child(2),
.crewcalc-feature:nth-child(3) {
  grid-column: span 5;
}

.crewcalc-feature:nth-child(5) {
  grid-column: 1 / -1;
  min-height: 21rem;
  background:
    radial-gradient(circle at 88% 24%, rgba(212, 162, 74, 0.12), transparent 24rem),
    var(--panel);
  border-color: var(--line-2);
}

.crewcalc-feature h2 {
  max-width: 15ch;
  font-size: clamp(2rem, 3.8vw, 3rem);
}

.crewcalc-feature p {
  max-width: 46rem;
  margin-top: 1.3rem;
  color: var(--slate);
  font-size: 1.03rem;
}

.crewcalc-availability {
  padding: clamp(5.5rem, 10vw, 9rem) 0;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}

.crewcalc-availability-grid {
  display: grid;
  grid-template-columns: minmax(16rem, 0.72fr) minmax(0, 1.28fr);
  align-items: start;
  gap: clamp(2rem, 8vw, 8rem);
}

.crewcalc-availability h2 {
  max-width: 9ch;
}

.crewcalc-bridge h2 {
  max-width: 18ch;
}

.crewcalc-bridge .lede {
  max-width: 60rem;
}

.crewcalc-content-footer {
  padding: 2.2rem 0;
  background: var(--navy);
  border-top: 1px solid var(--line);
}

.crewcalc-content-footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.crewcalc-content-footer p {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.1rem;
}

.crewcalc-content-footer ul {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.65rem 1.4rem;
  list-style: none;
}

.crewcalc-content-footer a {
  color: var(--slate);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration-color: rgba(212, 162, 74, 0.55);
}

.crewcalc-content-footer a:hover {
  color: var(--ink);
}

/* Stack at the site-wide 900px breakpoint, not this file's 800px one — the
   hero is the only two-column block on the page and it runs out of room
   first. The strip keeps its own reading width so it does not stretch to a
   full-bleed ledger on a tablet. */
@media (max-width: 900px) {
  .crewcalc-hero-grid {
    grid-template-columns: 1fr;
    gap: clamp(2.25rem, 6vw, 3rem);
  }

  .crewcalc-hero .lede { max-width: 62ch; }
  .reconcile { max-width: 34rem; }
}

@media (max-width: 800px) {
  .crewcalc-feature {
    grid-column: 1 / -1 !important;
    min-height: auto;
  }

  .crewcalc-availability-grid {
    grid-template-columns: 1fr;
  }

  .crewcalc-availability h2 {
    max-width: none;
  }

  .crewcalc-content-footer-inner {
    align-items: flex-start;
    flex-direction: column;
  }

  .crewcalc-content-footer ul {
    justify-content: flex-start;
  }
}

@media print {
  .crewcalc-feature-band,
  .crewcalc-availability,
  .crewcalc-content-footer {
    color: #10202f;
    background: #fff;
  }

  .crewcalc-feature {
    min-height: auto;
    color: #10202f;
    background: #fff;
    break-inside: avoid;
  }

  .crewcalc-feature p,
  .crewcalc-availability .lede,
  .crewcalc-content-footer p,
  .crewcalc-content-footer a {
    color: #3d5165;
  }

  .reconcile {
    color: #10202f;
    background: #fff;
    border-color: #c4d0dc;
    box-shadow: none;
    break-inside: avoid;
  }

  .reconcile-heading,
  .reconcile-row dd { color: #10202f; }

  .reconcile-row dt,
  .reconcile-note,
  .reconcile-source { color: #3d5165; }

  .reconcile-result dt,
  .reconcile-result dd { color: #8a6412; }

  /* Paper has no selected state — un-stack the deck and print every screen
     with its caption, in order. */
  .deck-dots { display: none !important; }

  .deck-stage {
    width: 100%;
    height: auto;
    aspect-ratio: auto;
  }

  .deck-card {
    position: static;
    width: 48%;
    height: auto;
    margin: 0 1% 1rem;
    opacity: 1;
    box-shadow: none;
    filter: none;
    /* Without this the keyframes still run and most cards print faded and
       rotated, or blank. */
    animation: none !important;
    transform: none;
    break-inside: avoid;
  }

  .deck-captions {
    min-height: 0;
  }

  .deck-caption {
    position: static;
    margin-bottom: 0.4rem;
    color: #3d5165;
    opacity: 1;
    animation: none !important;
    text-align: left;
  }
}

/* Product proof — the synthetic-data app screens (provenance in the page
   markup). Framed like instruments: quiet border, no chrome. */
.crewcalc-proof {
  padding: clamp(4.5rem, 8vw, 7rem) 0;
  border-bottom: 1px solid var(--line);
}

.crewcalc-proof-note {
  max-width: 46rem;
  margin: 0.8rem 0 2.4rem;
  color: var(--slate);
}

/* ---- Screen deck -------------------------------------------------------
   The screens are laid on the page like photographs dealt onto a table:
   four resting in a fan, the selected one placed square on top. Driven by a
   radio group, so it works with JavaScript off, arrow-keys like any radio
   group, and needs no build step. The global prefers-reduced-motion block in
   styles.css clamps transition-duration, so the fan settles instantly there
   instead of sliding. */
.screen-deck {
  /* 12 cards x 10s each. --deck-loop must stay hold x card count, the
     per-card animation-delay steps below must stay in 10s increments, and
     data-deck-hold in the markup must match (main.js reads it to resume the
     loop on the card you were looking at). */
  --deck-loop: 120s;
}

/* Hovering the CARDS holds the rotation so a screen can be read. This is
   deliberately scoped to .deck-stage and not .screen-deck: the deck is a
   full-width block, so hovering it paused the loop from anywhere in that
   horizontal band, which reads as the page randomly stopping. Keyboard focus
   still counts anywhere in the deck — that only happens on the controls. */
.screen-deck:has(.deck-stage:hover) .deck-card,
.screen-deck:has(.deck-stage:hover) .deck-caption,
.screen-deck:has(.deck-stage:hover) .deck-dot,
.screen-deck.is-paused .deck-card,
.screen-deck.is-paused .deck-caption,
.screen-deck.is-paused .deck-dot {
  animation-play-state: paused;
}

/* There is deliberately no :focus-within pause here. It looks like a
   keyboard courtesy, but focus stays on a control after it is clicked, so
   pressing Play left the deck paused forever and made the whole section feel
   like it stopped whenever the pointer came near. The Pause button and the
   dots cover keyboard users properly. */

/* The fan throws cards outside the stage box, so the section clips rather
   than letting the page scroll sideways. `clip` does not create a scroll
   container the way `hidden` does. */
.crewcalc-proof { overflow: clip; }

/* The deck mixes portrait (1200x1727) and landscape (1600x1103) captures, so
   the stage is a fixed square and each card centres inside it at its own
   shape via inset:0 + margin:auto. Centring that way leaves `transform` free
   for the fan — doing it with translate(-50%,-50%) would fight the animation. */
.deck-stage {
  position: relative;
  width: min(100%, 38rem);
  aspect-ratio: 1;
  margin: 0 auto;
}

.deck-card {
  position: absolute;
  inset: 0;
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  /* Base = resting in the fan. This is also what shows before a card's
     delayed animation starts, and what a no-animation client sees. */
  z-index: 1;
  transform: var(--rest);
  opacity: 0.32;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  box-shadow: 0 20px 45px rgba(2, 8, 15, 0.55);
  filter: saturate(0.6) brightness(0.5);
  animation: deck-deal var(--deck-loop) infinite;
}

/* Resting positions, and each card's 3.5s slot in the loop. Twelve cards need
   a TIGHT fan — spread them like five and the pile stops reading as a pile
   and starts reading as clutter, especially with portrait and landscape
   captures mixed. Small angles, small offsets, deep dimming: the stack should
   suggest depth behind the front card, not compete with it. */
.deck-card:nth-of-type(1)  { --rest: rotate(-7deg) translate(-9%, 3%) scale(0.9); animation-delay: 0s; }
.deck-card:nth-of-type(2)  { --rest: rotate(-5.5deg) translate(-7%, 2%) scale(0.91); animation-delay: 10s; }
.deck-card:nth-of-type(3)  { --rest: rotate(-4deg) translate(-5%, 2%) scale(0.92); animation-delay: 20s; }
.deck-card:nth-of-type(4)  { --rest: rotate(-2.5deg) translate(-3%, 1%) scale(0.93); animation-delay: 30s; }
.deck-card:nth-of-type(5)  { --rest: rotate(-1.5deg) translate(-2%, 1%) scale(0.94); animation-delay: 40s; }
.deck-card:nth-of-type(6)  { --rest: rotate(-0.5deg) translate(-1%, 0.5%) scale(0.95); animation-delay: 50s; }
.deck-card:nth-of-type(7)  { --rest: rotate(0.5deg) translate(1%, 0.5%) scale(0.95); animation-delay: 60s; }
.deck-card:nth-of-type(8)  { --rest: rotate(1.5deg) translate(2%, 1%) scale(0.94); animation-delay: 70s; }
.deck-card:nth-of-type(9)  { --rest: rotate(2.5deg) translate(3%, 1%) scale(0.93); animation-delay: 80s; }
.deck-card:nth-of-type(10) { --rest: rotate(4deg) translate(5%, 2%) scale(0.92); animation-delay: 90s; }
.deck-card:nth-of-type(11) { --rest: rotate(5.5deg) translate(7%, 2%) scale(0.91); animation-delay: 100s; }
.deck-card:nth-of-type(12) { --rest: rotate(7deg) translate(9%, 3%) scale(0.9); animation-delay: 110s; }

/* One card's turn: square on top at 0%, holds, drops back into the fan, waits
   out the other eleven, rises again at 100%. Its own --rest keeps it
   returning to its own slot rather than a shared one. 3.5s of 42s = 8.33%. */
@keyframes deck-deal {
  0%, 6.5% {
    z-index: 6;
    transform: rotate(0deg) translate(0, 0) scale(1);
    opacity: 1;
    box-shadow: 0 36px 80px rgba(2, 8, 15, 0.72);
    filter: none;
  }

  8.33%, 98% {
    z-index: 1;
    transform: var(--rest);
    opacity: 0.32;
    box-shadow: 0 20px 45px rgba(2, 8, 15, 0.55);
    filter: saturate(0.6) brightness(0.5);
  }

  100% {
    z-index: 6;
    transform: rotate(0deg) translate(0, 0) scale(1);
    opacity: 1;
    box-shadow: 0 36px 80px rgba(2, 8, 15, 0.72);
    filter: none;
  }
}

/* Manual mode: main.js adds .is-manual on first click, which stops the loop
   and hands the deck to .is-front. Without JavaScript this class never
   appears and the keyframes above just keep running. */
.screen-deck.is-manual .deck-card,
.screen-deck.is-manual .deck-caption,
.screen-deck.is-manual .deck-dot {
  animation: none !important;
}

.screen-deck.is-manual .deck-card {
  transition:
    transform 0.55s cubic-bezier(0.22, 0.9, 0.24, 1),
    opacity 0.4s ease,
    filter 0.4s ease,
    box-shadow 0.4s ease;
}

.screen-deck.is-manual .deck-card.is-front {
  z-index: 6;
  transform: rotate(0deg) translate(0, 0) scale(1);
  opacity: 1;
  box-shadow: 0 36px 80px rgba(2, 8, 15, 0.72);
  filter: none;
}

.screen-deck.is-manual .deck-caption { opacity: 0; transition: opacity 0.3s ease; }
.screen-deck.is-manual .deck-caption.is-front { opacity: 1; }
.screen-deck.is-manual .deck-dot.is-front { background: var(--gold); transform: scale(1.25); }

.deck-captions {
  position: relative;
  max-width: 44rem;
  min-height: 5.25rem;
  /* Clears the corners of the fanned cards, which sit below the stage box. */
  margin: 3.25rem auto 0;
}

.deck-caption {
  position: absolute;
  inset: 0;
  margin: 0;
  color: var(--slate);
  font-size: 0.95rem;
  line-height: 1.5;
  text-align: center;
  opacity: 0;
  animation: deck-caption var(--deck-loop) infinite;
}

.deck-caption:nth-of-type(1)  { animation-delay: 0s; }
.deck-caption:nth-of-type(2)  { animation-delay: 10s; }
.deck-caption:nth-of-type(3)  { animation-delay: 20s; }
.deck-caption:nth-of-type(4)  { animation-delay: 30s; }
.deck-caption:nth-of-type(5)  { animation-delay: 40s; }
.deck-caption:nth-of-type(6)  { animation-delay: 50s; }
.deck-caption:nth-of-type(7)  { animation-delay: 60s; }
.deck-caption:nth-of-type(8)  { animation-delay: 70s; }
.deck-caption:nth-of-type(9)  { animation-delay: 80s; }
.deck-caption:nth-of-type(10) { animation-delay: 90s; }
.deck-caption:nth-of-type(11) { animation-delay: 100s; }
.deck-caption:nth-of-type(12) { animation-delay: 110s; }

/* Held slightly inside the card's window so the words swap under a settled
   image rather than mid-slide. */
@keyframes deck-caption {
  0%, 7% { opacity: 1; }
  8.33%, 98.5% { opacity: 0; }
  100% { opacity: 1; }
}

.deck-hint {
  max-width: 46rem;
  margin: 0.8rem 0 2.4rem;
  color: var(--dim);
  font-size: 0.9rem;
}

/* Controls above the deck. Laid out as one bar so the button and the dots
   read as a single control group rather than two stray rows. */
.deck-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  align-items: center;
  justify-content: center;
  margin-bottom: 2.25rem;
}

.deck-controls {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
}

.deck-step {
  width: 2.1rem;
  height: 2.1rem;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--slate);
  font-size: 1.1rem;
  line-height: 1;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease;
}

.deck-step:hover { color: var(--ink); border-color: var(--line-2); }

.deck-step:focus-visible,
.deck-lightbox-close:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--gold-bright) 60%, transparent);
  outline-offset: 3px;
}

/* Click-to-enlarge. The deck's cards are scaled and rotated, so a screen can
   never be read in place; the lightbox shows one at its natural size. */
.deck-card { cursor: zoom-in; }

.deck-lightbox {
  width: min(96vw, 78rem);
  max-width: none;
  max-height: 94vh;
  padding: clamp(1rem, 3vw, 2rem);
  color: var(--ink);
  background: var(--navy);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
}

.deck-lightbox::backdrop {
  background: rgba(2, 8, 15, 0.82);
}

.deck-lightbox img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 78vh;
  margin: 0 auto;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.deck-lightbox-caption {
  max-width: 60rem;
  margin: 1.1rem auto 0;
  color: var(--slate);
  font-size: 0.95rem;
  text-align: center;
}

.deck-lightbox-close {
  position: absolute;
  top: 0.6rem;
  right: 0.9rem;
  padding: 0.1rem 0.5rem;
  color: var(--slate);
  font-size: 1.5rem;
  line-height: 1;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.deck-lightbox-close:hover { color: var(--ink); }

.deck-play {
  padding: 0.45rem 1.15rem;
  color: var(--slate);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease;
}

.deck-play:hover { color: var(--ink); border-color: var(--line-2); }

.deck-play:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--gold-bright) 60%, transparent);
  outline-offset: 3px;
}

.deck-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

.deck-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  background: var(--line-2);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  animation: deck-dot var(--deck-loop) infinite;
}

.deck-dot:hover { background: var(--slate); }

.deck-dot:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--gold-bright) 60%, transparent);
  outline-offset: 4px;
}

.deck-dot:nth-of-type(1)  { animation-delay: 0s; }
.deck-dot:nth-of-type(2)  { animation-delay: 10s; }
.deck-dot:nth-of-type(3)  { animation-delay: 20s; }
.deck-dot:nth-of-type(4)  { animation-delay: 30s; }
.deck-dot:nth-of-type(5)  { animation-delay: 40s; }
.deck-dot:nth-of-type(6)  { animation-delay: 50s; }
.deck-dot:nth-of-type(7)  { animation-delay: 60s; }
.deck-dot:nth-of-type(8)  { animation-delay: 70s; }
.deck-dot:nth-of-type(9)  { animation-delay: 80s; }
.deck-dot:nth-of-type(10) { animation-delay: 90s; }
.deck-dot:nth-of-type(11) { animation-delay: 100s; }
.deck-dot:nth-of-type(12) { animation-delay: 110s; }

@keyframes deck-dot {
  0%, 7.5% { background: var(--gold); transform: scale(1.25); }
  8.33%, 99% { background: var(--line-2); transform: scale(1); }
  100% { background: var(--gold); transform: scale(1.25); }
}

/* The global reduced-motion rule in styles.css only clamps duration, which
   would run every card to its 100% keyframe — all five square on top at once,
   every caption visible. Motion-sensitive visitors get a still deck instead:
   card one on top, its caption, its dot. */
@media (prefers-reduced-motion: reduce) {
  .deck-card,
  .deck-caption,
  .deck-dot { animation: none !important; }

  .deck-card:nth-of-type(1) {
    z-index: 6;
    transform: rotate(0deg) translate(0, 0) scale(1);
    opacity: 1;
    box-shadow: 0 36px 80px rgba(2, 8, 15, 0.72);
    filter: none;
  }

  .deck-caption:nth-of-type(1) { opacity: 1; }
  .deck-dot:nth-of-type(1) { background: var(--gold); }
}

/* Deck responsive rules MUST live after the base deck block above: this file's
   earlier @media blocks (900px, 800px) sit above it, and at equal specificity
   the later rule wins regardless of viewport. Putting deck overrides up there
   silently does nothing. */
@media (max-width: 900px) {
  /* Tighten the fan so the pile still reads without throwing cards off a
     narrow screen. */
  .deck-stage { width: min(86%, 22rem); }
  .deck-card:nth-of-type(1) { transform: rotate(-9deg) translate(-13%, 4%) scale(0.9); }
  .deck-card:nth-of-type(2) { transform: rotate(-5deg) translate(-6%, 2%) scale(0.93); }
  .deck-card:nth-of-type(4) { transform: rotate(5deg) translate(7%, 2%) scale(0.93); }
  .deck-card:nth-of-type(5) { transform: rotate(9deg) translate(14%, 4%) scale(0.9); }
  .deck-captions { min-height: 7rem; }
}

/* Phones: pull the top card further in, or it fills the screen and the fan
   clips away — leaving a plain screenshot with tabs rather than a pile. */
@media (max-width: 650px) {
  .deck-stage { width: min(74%, 19rem); }
  .deck-captions { margin-top: 2.5rem; min-height: 8.5rem; }

}