/* =============================================================================
   hyyryn-pp-card.css                                          21 Oct 2026 (rp180)
   Payment protection, the footer pass's third page.

   Sir, 21 Oct 2026: improve each footer page, push it live, then the next.
   Measured (Mason tools/cards.mjs): 35 surfaces, every one square, on a page
   13,000px long with nine parts and no way to see them or go to one; three
   cards and the registration row marked by a bar along one side; on a phone
   the drawing of the money sticks under the masthead at 247px, a third of
   the screen, while the steps scroll under it. Now:
     - a bar of the nine parts as pills under the hero, the one being read
       filled; it sticks under the masthead at a desk (and the drawing below
       it moves down to clear it) and scrolls away on a phone;
     - the site's card grammar: a 22px corner (18 on a phone), an inner ring
       and a near and long shadow; the night cards with a light ring; a state
       a tint, never a bar along one side; the evidence (the statement's
       rows, the table, the photographs' frames) keeps its lines;
     - on a phone the drawing's strip is compact (about 150px).
   ============================================================================= */
:root { --pc-r: 22px; --pc-ring: inset 0 0 0 1px rgba(10,22,40,.12), inset 0 1px 0 #FFFFFF;
  --pc-drop: 0 1px 2px rgba(10,22,40,.07), 0 10px 22px -14px rgba(10,22,40,.24), 0 34px 60px -36px rgba(10,22,40,.42);
  --pc-nav: 60px; }
@media (max-width: 768px) { :root { --bar: 64px; } }
@media (max-width: 600px) { :root { --pc-r: 18px; } }

/* ── the parts, as pills ── */
.pp-nav { position: sticky; top: var(--bar, 74px); z-index: 60; margin: clamp(28px, 3vw, 44px) 0 0;
  background: rgba(250,248,243,.97); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-top: 1px solid rgba(10,22,40,.08); border-bottom: 1px solid rgba(10,22,40,.08); }
.pp-nav-in { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 10px var(--gut-l, 24px); scroll-snap-type: x proximity; }
.pp-nav-in::-webkit-scrollbar { display: none; }
.pp-nav a { flex: none; scroll-snap-align: start; padding: 10px 16px 9px; border-radius: 999px; white-space: nowrap; text-decoration: none;
  font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: #4A5262;
  transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease; }
.pp-nav a:hover { color: var(--navy, #0A1628); box-shadow: inset 0 0 0 1px rgba(10,22,40,.18); }
.pp-nav a.is-on, .pp-nav a.is-on:hover { background: var(--navy, #0A1628); color: #FAF8F3; box-shadow: none; }
.pp-nav a:focus-visible { outline: 2px solid var(--navy, #0A1628); outline-offset: 2px; }
html { scroll-padding-top: calc(var(--bar, 74px) + var(--pc-nav) + 12px); }
/* the page's own margins for a target (110px, 120px) were the masthead's room before the scroll padding: now they add to it */
html :target, html .pp-src-l li { scroll-margin-top: 0; }
@media (min-width: 761px) { .pp-map.pp-map { top: calc(var(--bar, 74px) + var(--pc-nav) + 3vh); } }
@media (max-width: 760px) {
  .pp-nav { position: relative; top: auto; }
  .pp-nav-in { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  html { scroll-padding-top: calc(var(--bar, 64px) + 12px); }
}

/* ── the hero ── */
.pp-stmt-paper.pp-stmt-paper { border-radius: var(--pc-r); box-shadow: var(--pc-ring), var(--pc-drop); }
.pp-stmt-paper.pp-stmt-paper::before { left: clamp(22px, 2.6vw, 38px); right: clamp(22px, 2.6vw, 38px); border-radius: 2px; }
.pp-reg.pp-reg { border-top: 0; border-bottom: 0; border-radius: var(--pc-r); background: #F3EFE4; box-shadow: inset 0 0 0 1px rgba(10,22,40,.10); overflow: hidden; }
.pp-reg.pp-reg .pp-reg-i { padding: clamp(18px, 2vw, 26px); }

/* ── where the money is: the drawing and the junction ── */
.pp-map.pp-map { border-radius: var(--pc-r); box-shadow: inset 0 0 0 1px rgba(226,190,106,.22), 0 24px 50px -26px rgba(4,9,15,.6); }
.pp-junc-held.pp-junc-held { border-radius: 18px; }
.pp-map .pp-acc, .pp-junc .pp-side { border-radius: 14px; }
.pp-ways-foot.pp-ways-foot { border-radius: 16px; }

/* the ways out: a state is a ring and a dot, never a bar down a side (the lines still meet each card's edge) */
.pp-junc-col.pp-junc-col li { border-left: 0; border-right: 0; border-radius: 14px; }
.pp-junc-col.is-back li { box-shadow: inset 0 0 0 1px rgba(15,90,79,.32); }
.pp-junc-col.is-to li { box-shadow: inset 0 0 0 1px rgba(212,169,67,.55); }
.pp-junc-col.pp-junc-col li.is-on { box-shadow: inset 0 0 0 1.5px var(--navy, #0A1628), 0 10px 22px -14px rgba(10,22,40,.4); }
.pp-junc-col .k { display: inline-flex; align-items: center; gap: 7px; }
.pp-junc-col.is-back .k::before, .pp-junc-col.is-to .k::after { content: ''; width: 7px; height: 7px; border-radius: 50%; flex: none; }
.pp-junc-col.is-back .k::before { background: #0F5A4F; }
.pp-junc-col.is-to .k::after { background: #D4A943; }
@media (max-width: 760px) { .pp-junc-col.is-to .k { flex-direction: row-reverse; } .pp-junc-col.is-to li { text-align: left; } }
/* where it is, at each step: a tint, not a bar */
.pp-twin.pp-twin { border-left: 0; border-radius: 12px; }
.pp-try-say.pp-try-say { border-left: 0; border-radius: 10px; }

/* ── the photographs and the contest ── */
.pp-shot-img.pp-shot-img { border-radius: var(--pc-r); overflow: hidden; }
.pp-contest.pp-contest { border-left: 0; border-radius: var(--pc-r); box-shadow: inset 0 0 0 1px rgba(169,68,66,.28); }
.pp-try.pp-try { border-radius: var(--pc-r); box-shadow: var(--pc-ring), var(--pc-drop); }
.pp-try input, .pp-try .pp-try-in { border-radius: 12px; }

/* ── the clocks' table ── */
.pp-table-wrap.pp-table-wrap { border-radius: var(--pc-r); overflow: hidden; box-shadow: var(--pc-ring), var(--pc-drop); }

/* ── if it goes wrong: night cards ── */
.pp-fear.pp-fear { border: 0; border-radius: var(--pc-r); box-shadow: inset 0 0 0 1px rgba(250,248,243,.12), 0 20px 44px -26px rgba(0,0,0,.7); overflow: hidden; }
.pp-fear.pp-fear.is-first { box-shadow: inset 0 0 0 1px rgba(212,169,67,.5), 0 20px 44px -26px rgba(0,0,0,.7); }
.pp-fear .pp-refund { border-radius: 14px; }

/* ── the fee and the rights ── */
.pp-sides.pp-sides, .pp-rcpt.pp-rcpt { border-radius: var(--pc-r); overflow: hidden; box-shadow: var(--pc-ring), var(--pc-drop); }
.pp-paid.pp-paid { border-top: 0; padding: clamp(22px, 2.4vw, 32px); border-radius: var(--pc-r); background: #F3EFE4; box-shadow: inset 0 0 0 1px rgba(10,22,40,.10); }
.pp-act.pp-act { border-top: 0; border-radius: var(--pc-r); box-shadow: var(--pc-ring), var(--pc-drop); }
.pp-act.pp-act:hover { box-shadow: var(--pc-ring), 0 2px 4px rgba(10,22,40,.08), 0 22px 44px -22px rgba(10,22,40,.4); }
.pp-act.pp-act .pp-act-cite { display: inline-flex; align-items: center; gap: 8px; }
.pp-act.pp-act .pp-act-cite::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--navy, #0A1628); flex: none; }

/* ── the sources ── */
.pp-src-l.pp-src-l { border-radius: var(--pc-r); overflow: hidden; box-shadow: var(--pc-ring), var(--pc-drop); }
.pp-src-l .back { border-radius: 50%; }

/* ── the two doors at the foot: two cards ── */
.pp-doors.pp-doors { gap: clamp(14px, 1.6vw, 24px); padding: 0 var(--gut-l, 24px) clamp(40px, 5vw, 72px); }
.pp-doors .pp-half.pp-half { border-radius: calc(var(--pc-r) + 4px); box-shadow: 0 2px 4px rgba(10,22,40,.1), 0 28px 60px -30px rgba(10,22,40,.55); }
.pp-doors .pp-half + .pp-half { border-left: 0; }
.pp-doors .pp-half .in { padding-left: clamp(28px, 4vw, 56px); }

/* ── a phone: the drawing's strip compact, so it holds a fifth of the screen, not a third ── */
@media (max-width: 760px) {
  .pp-map.pp-map { border-radius: 0 0 18px 18px; padding-top: 8px; padding-bottom: 8px; }
  .pp-map .pp-acc { padding: 7px 8px; }
  .pp-map .pp-acc b { font-size: 12.5px; line-height: 1.2; }
  .pp-map .pp-map-can { margin-top: 6px; padding: 5px 10px; }
  .pp-map .pp-map-can b { font-size: 12px; }
  .pp-doors.pp-doors { padding-left: 16px; padding-right: 16px; }
}
@media (prefers-reduced-motion: reduce) { .pp-nav a { transition: none; } }
@media (forced-colors: active) { .pp-nav a.is-on { border: 1px solid CanvasText; } }