/* ==========================================================================
   white-paper-thank-you.html — page-only overrides (prefix wty-). Loads after pages.css.
   Tokens only. Book mock-up = same recipe as white-paper.css .wp-book (cover shadow + page strip + contact shadow).
   ========================================================================== */

/* ---- 1. Hero ---- */
.wty-status { gap: var(--space-3); }
.wty-status::before { display: none; }   /* tick replaces the yellow rule */
.wty-tick.pg-done__icon {
  flex: none; width: 36px; height: 36px; margin: 0;
  box-shadow: 0 0 0 7px rgba(255, 193, 14, 0.22);
}
.wty-tick.pg-done__icon::after { width: 8px; height: 14px; border-width: 0 3px 3px 0; }
.wty-status.kicker { color: var(--color-white); font-size: var(--fs-body); letter-spacing: 0.06em; }
.wty-hero .pg-actions { align-items: center; }
.wty-file { flex-basis: 100%; margin-top: calc(-1 * var(--space-1)); font-size: var(--fs-small); line-height: 1.4; color: var(--color-on-dark-muted); }
.wty-contrib { margin-top: var(--space-4); font-size: var(--fs-small); line-height: 1.5; color: var(--color-text-muted); }
.wty-cta { padding-top: min(var(--section-pad-y), 72px); }

.wty-media { justify-self: center; max-width: 400px; }
.wty-book { position: relative; display: block; width: 100%; border-radius: 2px 5px 5px 2px; }
.wty-book__cover {
  position: relative; z-index: 1; display: block; overflow: hidden;
  aspect-ratio: 840 / 1200;
  transform: rotate(-1.06deg);
  border-radius: 2px 5px 5px 2px;
  box-shadow: 0 30px 60px rgba(2, 6, 21, 0.45), 0 10px 20px rgba(2, 6, 21, 0.3);
  transition: transform var(--dur-media) var(--ease-out), box-shadow var(--dur-media) var(--ease-out);
}
.wty-book__cover img { width: 100%; height: 100%; object-fit: cover; }
.wty-book__cover::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--gradient-book-shine); }
.wty-book__cover::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; z-index: 2; width: 2.7px; background: var(--book-spine-line); }
.wty-book__pages {
  position: absolute; top: 4px; right: -5px; width: 7px; height: calc(100% - 8px);
  transform: rotate(-1.06deg);
  background: var(--gradient-book-pages);
  box-shadow: inset 0 0 0 1px rgba(2, 6, 21, 0.12), inset -3px 0 4px rgba(2, 6, 21, 0.22);
  border-radius: 1px;
}
.wty-book__shadow {
  position: absolute; left: 4%; right: -4%; bottom: -40px; height: 64px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(2, 6, 21, 0.55) 0%, rgba(2, 6, 21, 0) 100%);
  filter: blur(8px);
}
.wty-book:focus-visible { outline-offset: 8px; }
@media (hover: hover) {
  .wty-book:hover .wty-book__cover { transform: rotate(-0.5deg) translateY(-4px); box-shadow: 0 36px 72px rgba(2, 6, 21, 0.5), 0 12px 24px rgba(2, 6, 21, 0.32); }
}

/* ---- 2. What's inside: keep the head beside the rail while it scrolls (desktop only) ---- */
@media (min-width: 1069px) {
  .wty-inside-head { position: sticky; top: calc(var(--header-h) + var(--space-7)); }
}

/* ---- 3. Contributors: glass person tiles, 3 up (9 = 3 x 3, no orphan at any width) ---- */
.wty-people { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); margin-top: var(--space-8); }
.wty-person {
  padding: var(--card-pad-sm);
  border-radius: var(--radius-lg);
  background: var(--gradient-card-glass);
  box-shadow: inset 0 0 0 1px var(--glass-line);
  transition: background-color var(--dur-mid) var(--ease), box-shadow var(--dur-mid) var(--ease);
}
.wty-person .pg-who__name { color: var(--color-white); }
.wty-person .pg-who__role { color: var(--color-on-dark-muted); }
@media (hover: hover) {
  .wty-person:hover { background-color: var(--glass-bg); box-shadow: inset 0 0 0 1px var(--color-ring-on-dark); }
}

/* ---- Responsive (1068 / 734) ---- */
@media (max-width: 1068px) {
  .wty-media { justify-self: center; max-width: 300px; margin-block: var(--space-4) var(--space-6); }
  .wty-people { margin-top: var(--space-7); }
  .wty-person { padding: var(--space-4); gap: var(--space-3); }
  .wty-person .pg-who__avatar { width: 44px; height: 44px; }
}
@media (max-width: 734px) {
  /* phone: cover moves above the text, small, so the image shows on the first screen */
  .wty-hero .pg-hero__grid { display: flex; flex-direction: column; }
  .wty-media { order: -1; align-self: flex-start; justify-self: start; max-width: 150px; margin: var(--space-2) 0 var(--space-7); }
  .wty-book__shadow { bottom: -28px; height: 48px; }
  /* phone: one glass panel with hairline rows (9 separate tiles read as a long stack) */
  .wty-people {
    grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: var(--space-6); padding-inline: var(--space-5);
    border-radius: var(--radius-lg); background: var(--gradient-card-glass); box-shadow: inset 0 0 0 1px var(--glass-line);
  }
  .wty-person { padding: var(--space-4) 0; border-radius: 0; background: none; box-shadow: none; gap: var(--space-4); }
  .wty-person + .wty-person { border-top: 1px solid var(--hairline-dark); }
  .wty-person .pg-who__avatar { width: 44px; height: 44px; }
}