/* ==== SLOT:WP6 priser-view ==== */
/* Datoer & Priser view (#view-priser). Prefix pr-.
   Mostly static ("statisk, mindre claude"): hairline rules instead of boxes.
   The one moving part is the included cards' scroll-driven settle. The
   included list is meant to feel like a LOT; the not-included list is
   meant to take almost no room. */
.pr-intro { padding-top: var(--space-7); padding-bottom: var(--space-6); }
.pr-intro-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-7); align-items: start; }
/* Two lines: "Begrænsede pladser." / "Bliv en del af Pionerholdet". 3.5vw is
   what lets the second line fit its column on one line from 1024px up. */
.pr-intro h1 { font-size: clamp(2.2rem, 3.5vw, 3.6rem); }
@media (min-width: 1024px) { .pr-title-line { white-space: nowrap; } }
/* "Introduktionspris:" with the price big on the same line, and what it costs
   after the first team underneath. Never a struck-through "was" price: nothing
   was ever sold at 54.995 (Martin, 2026-10-21). */
.pr-price { margin-top: var(--space-4); font-size: var(--fs-lead); line-height: 1.3; color: var(--navy); }
.pr-price-main { display: inline-block; margin-left: 0.25em; }
.pr-price-note { margin-top: var(--space-2); font-size: var(--fs-body); line-height: 1.5; color: var(--muted); max-width: 46ch; }
.pr-price-new { font-size: clamp(2.3rem, 4.4vw, 3.5rem); font-weight: 900; line-height: 1; letter-spacing: -0.03em; }
.pr-dates { margin-top: var(--space-3); font-size: var(--fs-lead); line-height: 1.5; color: var(--navy); }
/* Dates as 4 jan, a looping red arrow, 7 marts (Martin, 2026-10-05). */
.pr-dates--arrow { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 14px; }
.pr-dates-day { font-size: var(--fs-h3); font-weight: 900; letter-spacing: -0.01em; }
.pr-dates-year { align-self: flex-end; margin-left: -6px; padding-bottom: 3px; font-size: var(--fs-small); font-weight: 700; color: var(--muted); }
.pr-dates-arrow { width: 104px; height: auto; flex: 0 0 auto; overflow: visible; }
.pr-dates-arrow path { fill: none; stroke: var(--red); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.pr-dates-trail { stroke-dasharray: 1 7; }
.pr-actions { margin-top: var(--space-5); }
/* Corner pop on every "Book din plads" (Martin, 2026-10-05): hover pops three
   small dashes out of two diagonally opposite corners, each growing from
   the button's corner. .corner-pop = top-left + bottom-right;
   .corner-pop--alt = top-right + bottom-left, alternated through the site so
   neighbouring buttons differ. The dashes are a mask, coloured by
   --pop-color: navy, red on the nav, white on the phone menu. */
.corner-pop { position: relative; }
.corner-pop::before, .corner-pop::after {
  content: ''; position: absolute; width: 16px; height: 16px; pointer-events: none;
  background: var(--pop-color, var(--navy));
  -webkit-mask: var(--pop-shape) center / contain no-repeat; mask: var(--pop-shape) center / contain no-repeat;
  opacity: 0; scale: 0.2;
  transition: scale 420ms var(--arrow-spring), opacity 160ms var(--ease);
}
.corner-pop::before { left: -15px; top: -15px; transform-origin: 100% 100%; --pop-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M15 21.5 6 19.5M16.5 16.5 9.5 9.5M21.5 15 19.5 6'/%3E%3C/svg%3E"); }
.corner-pop::after { right: -15px; bottom: -15px; transform-origin: 0% 0%; --pop-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M9 2.5 18 4.5M7.5 7.5 14.5 14.5M2.5 9 4.5 18'/%3E%3C/svg%3E"); }
.corner-pop--alt::before { left: auto; right: -15px; transform-origin: 0% 100%; --pop-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M9 21.5 18 19.5M7.5 16.5 14.5 9.5M2.5 15 4.5 6'/%3E%3C/svg%3E"); }
.corner-pop--alt::after { right: auto; left: -15px; transform-origin: 100% 0%; --pop-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M15 2.5 6 4.5M16.5 7.5 9.5 14.5M21.5 9 19.5 18'/%3E%3C/svg%3E"); }
.corner-pop:hover::before, .corner-pop:hover::after,
.corner-pop:focus-visible::before, .corner-pop:focus-visible::after { opacity: 1; scale: 1; }
.mobile-nav .corner-pop { --pop-color: var(--white); }
.nav-cta.corner-pop { --pop-color: var(--red); }   /* red dashes beside the nav's red button (Martin) */
@media (prefers-reduced-motion: reduce) {
  .corner-pop::before, .corner-pop::after { transition: opacity 160ms var(--ease); scale: 1; }
}

/* A step bigger than the h3 scale (Martin, 2026-10-05). */
.pr-plan-title { margin-bottom: var(--space-3); font-size: clamp(1.6rem, 2.4vw, 2.2rem); }

/* Payment plan as a timeline (issue #7): one thin navy axis from booking to
   departure, the stops placed by time (--at: booking taken as ~1 okt, then
   1 nov, 1 dec, 4 jan = day 0, 31, 61, 95 of 95), with a week ruler under
   it. The script writes each stop's --t (0..1) 1:1 with scroll, so its
   tick and the plane turn red as the scroll reaches it; it also writes
   --fill on the wrapper, but .pr-tl sets its own --fill: 1, so the red
   axis fill is always drawn in full. Amounts above, labels below, each
   flush with its tick; departure stands on a taller flag so it clears the
   last amount. Under 520px of column (the wrapper is the container) it
   stands upright. */
.pr-tl-wrap { container-type: inline-size; }
.pr-tl ol { list-style: none; }
.pr-tl { --fill: 1; --axis-y: 112px; position: relative; height: 202px; color: var(--navy); }
.pr-tl-axis, .pr-tl-fill, .pr-tl-weeks { position: absolute; left: 0; right: 24px; pointer-events: none; }   /* the last 24px is the plane's */
.pr-tl-axis { top: calc(var(--axis-y) - 1px); height: 2px; background: var(--navy); }
.pr-tl-fill { top: calc(var(--axis-y) - 2px); height: 4px; background: var(--red); transform-origin: 0 50%; scale: var(--fill) 1; }
.pr-tl-weeks {
  top: var(--axis-y); height: 7px; opacity: 0.35;
  background: linear-gradient(90deg, var(--navy) 0 1px, transparent 1px) 0 0 / calc(100% * 7 / 95) 100% repeat-x;
}
.pr-tl-stop { --t: 1; position: absolute; top: 0; bottom: 0; left: calc(var(--at) * (100% - 24px)); width: 0; }
.pr-tl-tick {
  position: absolute; left: -1px; top: calc(var(--axis-y) - 22px); width: 2px; height: 46px;
  background: color-mix(in srgb, var(--red) calc(var(--t) * 100%), var(--navy));
  transform-origin: 50% 50%; transition: scale 260ms var(--ease);
}
.pr-tl-amount {
  position: absolute; left: -1px; bottom: calc(100% - var(--axis-y) + 30px);
  font-size: clamp(1.6rem, 2.3vw, 2.15rem); font-weight: 900; line-height: 1; letter-spacing: -0.03em; white-space: nowrap;
  transition: color var(--dur) var(--ease);
}
.pr-tl-amount small { font-size: 0.5em; font-weight: 700; letter-spacing: 0; margin-left: 0.08em; }
.pr-tl-amount .en small { margin: 0 0.1em 0 0; letter-spacing: 0.04em; }
.pr-tl-label { position: absolute; left: -1px; top: calc(var(--axis-y) + 34px); width: max-content; max-width: 30cqi; font-size: 14px; line-height: 1.4; }
.pr-tl-name { display: block; font-size: 15px; font-weight: 700; }
.pr-tl-stop:not(.pr-tl-stop--dep):hover .pr-tl-amount { color: var(--red); }
.pr-tl-stop:not(.pr-tl-stop--dep):hover .pr-tl-tick { scale: 1 1.35; background: var(--red); }
/* Departure: a flag rising from the axis end, the plane as the axis's arrowhead. */
.pr-tl-stop--dep .pr-tl-tick { top: 26px; height: calc(var(--axis-y) - 25px); }
.pr-tl-dep { position: absolute; right: -24px; top: 0; white-space: nowrap; font-size: 15px; font-weight: 700; line-height: 1.2; }
.pr-tl-plane {
  position: absolute; left: 1px; top: calc(var(--axis-y) - 11px); width: 22px; height: 22px; rotate: 90deg;
  fill: color-mix(in srgb, var(--red) calc(var(--t) * 100%), var(--navy));
}
@container (max-width: 519px) {
  .pr-tl { --axis-x: 9px; height: 400px; margin: 22px 0 34px; }
  .pr-tl-axis { top: 0; bottom: 0; left: calc(var(--axis-x) - 1px); right: auto; width: 2px; height: auto; }
  .pr-tl-fill { top: 0; bottom: 0; left: calc(var(--axis-x) - 2px); right: auto; width: 4px; height: auto; transform-origin: 50% 0; scale: 1 var(--fill); }
  .pr-tl-weeks {
    top: 0; bottom: 0; left: var(--axis-x); right: auto; width: 7px; height: auto;
    background: linear-gradient(180deg, var(--navy) 0 1px, transparent 1px) 0 0 / 100% calc(100% * 7 / 95) repeat-y;
  }
  .pr-tl-stop { left: 0; right: 0; top: calc(var(--at) * 100%); bottom: auto; width: auto; height: 0; }
  .pr-tl-tick { left: 0; top: -1px; width: 24px; height: 2px; transform-origin: 0 50%; }
  .pr-tl-stop:not(.pr-tl-stop--dep):hover .pr-tl-tick { scale: 1.4 1; }
  .pr-tl-label { left: 36px; top: auto; bottom: auto; max-width: none; translate: 0 -50%; }
  .pr-tl-amount { left: auto; right: 0; bottom: auto; top: 0; translate: 0 -50%; font-size: clamp(1.5rem, 7cqi, 1.9rem); }
  .pr-tl-stop--dep .pr-tl-tick { display: none; }
  .pr-tl-dep { left: 36px; right: auto; top: 0; translate: 0 -50%; }
  .pr-tl-plane { left: calc(var(--axis-x) - 11px); right: auto; top: -8px; rotate: 180deg; }
}

/* Reduced motion: the script pins every --t at 1, and the hover tick snaps instead of easing. */
@media (prefers-reduced-motion: reduce) {
  .pr-tl-tick { transition: none; }
}

.pr-flight { margin-top: var(--space-7); border-top: 1px solid var(--navy); border-bottom: 1px solid var(--navy); padding: var(--space-4) 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); gap: var(--space-5); }
/* Little plane beside the title: flies a loop on scroll, leaving a dashed trail. */
.pr-flight-title { display: flex; align-items: flex-end; gap: var(--space-2); }
.pr-flight-title .t-h3 { flex: 0 1 auto; min-width: 0; }   /* wraps before it would push the plane out of the column */
.pr-plane { flex: 0 0 auto; width: 120px; height: 63px; overflow: visible; margin-bottom: 2px; }
.pr-plane-trail { fill: none; stroke: var(--navy); stroke-opacity: 0.6; stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 3.5 4.5; }
.pr-plane-reveal { fill: none; stroke: var(--white); stroke-width: 6; }
.pr-plane-body { fill: var(--red); }
.pr-flight-desc { margin-top: var(--space-2); font-size: var(--fs-small); line-height: 1.6; color: var(--muted); }
/* Boarding pass: off-white card with tighter corners (8px), navy header strip,
   and a tear-off stub behind a dashed perforation with half-moon notches. */
.pr-ticket {
  --ticket-radius: 8px; --notch: 11px; --stub-w: clamp(140px, 13vw, 190px);
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) var(--stub-w);
  background: #FBFAF6; border: 1px solid var(--border); border-radius: var(--ticket-radius);
  box-shadow: 0 14px 30px -18px rgba(17, 29, 64, 0.35); overflow: hidden;
  color: inherit; text-decoration: none;
}
/* The pass is the link to the airline (Martin, 2026-10-05). Hovering picks it
   up like paper: the right side lifts first (a small tilt about the bottom-left
   corner), then the whole pass rises with a softer, wider shadow. Putting it
   down runs the other way: it drops, then settles flat. */
.pr-ticket {
  transform-origin: 0% 100%;
  transition:
    translate 420ms cubic-bezier(.3, .7, .3, 1),
    box-shadow 420ms cubic-bezier(.3, .7, .3, 1),
    rotate 380ms cubic-bezier(.3, .7, .3, 1) 90ms;
}
.pr-ticket:hover, .pr-ticket:focus-visible {
  rotate: -0.45deg; translate: 0 -4px;
  box-shadow: 0 24px 40px -20px rgba(17, 29, 64, 0.4), 0 3px 8px -5px rgba(17, 29, 64, 0.1);
  transition:
    rotate 360ms cubic-bezier(.3, .7, .3, 1),
    translate 520ms cubic-bezier(.3, .7, .3, 1) 80ms,
    box-shadow 520ms cubic-bezier(.3, .7, .3, 1) 80ms;
}
.pr-ticket:focus-visible { outline: 2px solid var(--navy); outline-offset: 4px; }
/* Hover also draws a red outline, clockwise from the top-left, and winds it back
   on leave (Martin, 2026-10-19). The rect is sized in CSS so it follows the card
   at any width; inset by the stroke so overflow: hidden doesn't clip it. */
.pr-ticket-outline {
  position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%;
  overflow: visible; pointer-events: none;
}
.pr-ticket-outline rect {
  x: 1px; y: 1px; width: calc(100% - 2px); height: calc(100% - 2px);
  rx: calc(var(--ticket-radius) - 2px);
  fill: none; stroke: var(--red); stroke-width: 2px;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 600ms cubic-bezier(.45, 0, .25, 1);
}
.pr-ticket:hover .pr-ticket-outline rect,
.pr-ticket:focus-visible .pr-ticket-outline rect { stroke-dashoffset: 0; }
/* Screen-reader only. Ticket-wide and wrapping rather than 1px + nowrap: a nowrap
   line runs ~430px past a phone's edge (issue #12), and full width keeps words apart. */
.pr-ticket-sr { position: absolute; top: 0; left: 0; width: 100%; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media (prefers-reduced-motion: reduce) {
  .pr-ticket, .pr-ticket:hover, .pr-ticket:focus-visible { rotate: none; translate: none; transition: box-shadow 200ms ease; }
  .pr-ticket-outline rect { stroke-dasharray: none; opacity: 0; transition: opacity 150ms ease; }
  .pr-ticket:hover .pr-ticket-outline rect, .pr-ticket:focus-visible .pr-ticket-outline rect { opacity: 1; }
}
/* The notches: white circles centred on the top and bottom edge at the perforation. */
.pr-ticket::before, .pr-ticket::after {
  content: ''; position: absolute; z-index: 1; right: calc(var(--stub-w) - var(--notch));
  width: calc(var(--notch) * 2); height: calc(var(--notch) * 2); border-radius: 50%;
  background: var(--white); border: 1px solid var(--border);
}
.pr-ticket::before { top: calc(var(--notch) * -1 - 1px); }
.pr-ticket::after { bottom: calc(var(--notch) * -1 - 1px); }
.pr-ticket-head {
  display: flex; justify-content: space-between; gap: var(--space-2);
  padding: 10px 24px; background: var(--navy); color: var(--white);
  font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
}
.pr-ticket-main .pr-legs { padding: 4px 24px 8px; }
.pr-ticket-stub {
  display: flex; flex-direction: column; gap: 2px; padding: 44px 22px 18px;
  border-left: 2px dashed var(--border); background: #F6F4EE;
}
.pr-ticket-label { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.pr-ticket-value { font-size: 1.05rem; font-weight: 900; color: var(--navy); margin-bottom: 12px; }
.pr-ticket-barcode {
  display: block; margin-top: auto; height: 44px;
  background: repeating-linear-gradient(90deg,
    var(--navy) 0 2px, transparent 2px 4px, var(--navy) 4px 5px, transparent 5px 8px,
    var(--navy) 8px 11px, transparent 11px 12px, var(--navy) 12px 13px, transparent 13px 16px,
    var(--navy) 16px 18px, transparent 18px 21px, var(--navy) 21px 22px, transparent 22px 23px);
}
.pr-route-plane { position: absolute; left: 50%; bottom: -8px; width: 16px; height: 16px; margin-left: -8px; transform: rotate(90deg); fill: var(--red); background: #FBFAF6; padding: 0 2px; box-sizing: content-box; }
.pr-legs { list-style: none; }
.pr-leg { display: grid; grid-template-columns: 120px 1fr 1.3fr 1fr; align-items: center; gap: var(--space-3); padding: 14px 0; }
.pr-leg + .pr-leg { border-top: 1px solid var(--border); }
.pr-leg-date { font-size: var(--fs-small); font-weight: 700; color: var(--navy); }
.pr-leg-date small { display: block; font-weight: 400; color: var(--muted); }
.pr-port { color: var(--navy); }
.pr-port b { display: block; font-size: 1.9rem; font-weight: 900; letter-spacing: -0.02em; line-height: 1; }
.pr-port span.pr-time { display: block; font-size: var(--fs-small); color: var(--muted); margin-top: 4px; }
.pr-port--end { text-align: right; }
.pr-route { position: relative; text-align: center; font-size: var(--fs-label); color: var(--muted); padding-bottom: 10px; }
.pr-route::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; border-bottom: 1px dashed var(--muted); }

/* Hvad er inkluderet? — the 20 items as one flat list, no groups (issue #8).
   Meant to feel like a LOT. */
.pr-incl { background: var(--off); padding-top: var(--space-5); padding-bottom: var(--section-y); }   /* top just one heading gap (Martin, issue #15) */
/* The visible gap (title glyphs' bottom to the first line's cap tops) is
   the margin plus the title's leading below its glyphs (0.162em) and the
   list's leading above its caps (0.275em). The margin sets that total to
   60% of the original 48px-margin gap at every width and size (issue #23). */
.pr-incl-head { margin-bottom: calc(0.6 * var(--space-5) - 0.4 * (0.162 * var(--fs-h2) + 0.275 * var(--pr-wd-fs))); }

/* One even block of words (Martin chose "Ord", 2026-10-19): a red dot
   after each item, weight alternating heavy/light, the headline
   experiences in red. Kept well under the title's size and inset from
   the window edge so it reads as calm, not shouted. Hovering an item that
   has a photo shows it beside the cursor (photos load on first hover only).
   Size is the "Stor" preset (issue #22, locked 2026-10-20): 38px at 1440
   wide, scaled by vw (px / 14.4) down to a floor, so the title (.t-h2)
   stays clearly larger at every width.
   No side space: the list starts at the title's left edge. */
.pr-incl { --pr-wd-fs: clamp(23px, 2.6389vw, 38px); }
.pr-wd {
  list-style: none;
  font-size: var(--pr-wd-fs); font-weight: 900; line-height: 1.3; letter-spacing: -0.02em;
  color: var(--navy); text-wrap: pretty;   /* ragged, not justified: justify opened rivers */
}
.pr-wd li { display: inline; transition: color var(--dur) var(--ease); }
.pr-wd li > span {   /* the underline lives on the text, so it never runs under the dot */
  text-decoration: underline 0.075em transparent; text-underline-offset: 0.11em; text-decoration-skip-ink: none;
  transition: text-decoration-color var(--dur) var(--ease);
}
.pr-wd li:nth-child(even) { font-weight: 300; letter-spacing: -0.01em; }
.pr-wd li:not(:last-child)::after {   /* the no-break space keeps the dot on the item's own line */
  content: '\00a0\2022' / ''; margin-right: 0.24em;
  color: var(--red); font-weight: 400;
}
.pr-wd li.pr-wd-hot { color: var(--red); font-weight: 900; letter-spacing: -0.025em; }
.pr-wd li.pr-wd-more { color: var(--red); font-weight: 300; }
.pr-wd li:hover > span { text-decoration-color: var(--red); }
.pr-wd .pr-wd-hot:hover > span, .pr-wd .pr-wd-more:hover > span { text-decoration-color: var(--navy); }

.pr-incl-after { margin-top: var(--space-5); }
/* ERGO: a full-bleed band that is itself the link (Martin picked the band
   over the card, 2026-10-19). Static and quiet: white between hairlines on
   the section's off-white, the real red logo large on the left, a hairline,
   the copy, and one faint oversized ring in ERGO red cropped at the right. */
.pr-ergo {
  --ergo-red: #bf1528;
  position: relative; overflow: hidden;
  margin-top: var(--space-6);
  margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter));
  display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center;
  column-gap: clamp(28px, 4vw, 56px);
  padding: clamp(36px, 5vw, 72px) var(--gutter);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  background: var(--white); color: var(--navy); text-decoration: none;
}
.pr-ergo::after {
  content: ''; position: absolute; right: -120px; top: 50%; translate: 0 -50%; width: 420px; height: 420px;
  border: 34px solid var(--ergo-red); border-radius: 50%; opacity: 0.07; pointer-events: none;
}
.pr-ergo:focus-visible { outline: 2px solid var(--navy); outline-offset: 4px; }
.pr-ergo-logo { display: block; width: clamp(150px, 17vw, 230px); height: auto; }
.pr-ergo-rule { align-self: stretch; width: 1px; background: var(--border); }
.pr-ergo p { position: relative; font-size: var(--fs-lead); line-height: 1.55; max-width: 44ch; }
.pr-ergo-her { color: var(--ergo-red); font-weight: 700; white-space: nowrap; }
.pr-ergo-her::after { content: '\00a0→'; display: inline-block; transform-origin: 0% 55%; transition: transform 380ms var(--arrow-spring); }
.pr-ergo:hover .pr-ergo-her::after { transform: translateX(4px) scale(1.6); }

/* Hvad får du med hjem? (client copy, 2026-10-20): four themes in a 2×2
   grid under the Book pill, each opened by a red hairline, on the section's
   off-white. Stacks to one column on narrow screens. */
.pr-home { margin-top: var(--space-7); }
.pr-home-grid { margin-top: var(--space-5); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) clamp(32px, 5vw, 96px); }
.pr-home-item { border-top: 2px solid var(--red); padding-top: var(--space-3); }
.pr-home-item .t-body { margin-top: var(--space-2); max-width: 62ch; }
.pr-home-note { margin-top: var(--space-2); font-size: var(--fs-small); line-height: 1.6; color: var(--muted); max-width: 62ch; }
@media (max-width: 760px) {
  .pr-home { margin-top: var(--space-6); }
  .pr-home-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
}

/* "Ord" (locked 2026-10-20): the "Hvad er inkluderet?" word block's style, smaller:
   an h3-sized title above, then heavy/light words with red dots. */
.pr-excl { padding-top: var(--space-5); padding-bottom: var(--space-5); }
.pr-excl h2 { margin-bottom: var(--space-2); font-size: var(--fs-h3); font-weight: 900; line-height: 1.05; letter-spacing: -0.02em; color: var(--navy); }
.pr-excl ul {
  list-style: none; font-size: clamp(17px, 1.6vw, 24px); font-weight: 900; line-height: 1.3; letter-spacing: -0.02em;
  color: var(--navy); text-wrap: pretty;
}
.pr-excl li { display: inline; }
.pr-excl li:nth-child(even) { font-weight: 300; letter-spacing: -0.01em; }
.pr-excl li:not(:last-child)::after { content: '\00a0\2022' / ''; margin-right: 0.24em; color: var(--red); font-weight: 400; }

@media (max-width: 900px) {
  .pr-intro-grid, .pr-flight { grid-template-columns: 1fr; gap: var(--space-5); }
  .pr-leg { grid-template-columns: 1fr 1.2fr 1fr; gap: var(--space-2); }
  /* Narrow: the stub tears off along the bottom instead. */
  .pr-ticket { grid-template-columns: minmax(0, 1fr); }
  .pr-ticket::before, .pr-ticket::after { display: none; }
  .pr-ticket-main .pr-legs { padding: 4px 16px 8px; }
  .pr-ticket-head { padding: 10px 16px; }
  .pr-ticket-stub { border-left: 0; border-top: 2px dashed var(--border); padding: 16px; display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: baseline; }
  .pr-ticket-value { margin-bottom: 4px; }
  .pr-ticket-barcode { grid-column: 1 / -1; margin-top: 8px; height: 32px; }
  .pr-leg-date { grid-column: 1 / -1; }
  .pr-port b { font-size: 1.5rem; }
  .pr-ergo { grid-template-columns: 1fr; row-gap: var(--space-3); }
  .pr-ergo-rule { width: 48px; height: 1px; align-self: auto; }
}
/* ==== /SLOT:WP6 ==== */