/* Universal Express Pass guide (/parks/universal-orlando/express-pass).
   Everything scoped under .xp; the express accent is a cool cyan used only where
   the two-lane idea needs it, everything else stays on the house gold. */

.xp {
  --xp-express: oklch(83% 0.11 210);
  --xp-express-soft: oklch(83% 0.11 210 / 0.16);
  max-width: 1060px;
  margin: 0 auto;
  padding: 0 var(--space-lg) var(--space-3xl);
}

/* ── Hero ─────────────────────────────────────────────────────────── */
.xp-hero { padding: var(--space-2xl) 0 var(--space-lg); }
.xp-kicker { font: 600 12px/1.6 var(--label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.xp-title {
  font-family: var(--display); font-weight: 800; letter-spacing: -0.02em;
  font-size: clamp(34px, 6vw, 58px); line-height: 1.02; margin: 10px 0 22px; color: var(--ink);
  text-wrap: balance;
}
.xp-standfirst { max-width: 62ch; font-size: 18px; line-height: 1.65; color: var(--ink-soft); }
.xp-toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; }
.xp-toc a {
  display: inline-block; padding: 7px 13px; border: 1px solid var(--hair); border-radius: 999px;
  color: var(--ink-soft); font: 600 13px/1 var(--label); text-decoration: none;
}
.xp-toc a:hover { border-color: var(--gold-deep); color: var(--ink); }
.xp-toc a:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.xp .xp-h2[id] { scroll-margin-top: 84px; }

/* ── Direct answer ────────────────────────────────────────────────── */
.xp-answer {
  margin: var(--space-xl) 0; padding: var(--space-lg) var(--space-xl);
  border-left: 3px solid var(--gold); background: var(--paper-2); border-radius: 0 14px 14px 0;
}
.xp-answer p { max-width: 70ch; font-size: 16.5px; line-height: 1.7; color: var(--ink-soft); }
.xp-answer b { color: var(--ink); }

/* ── Shared type ──────────────────────────────────────────────────── */
.xp-h2 {
  font-family: var(--display); font-weight: 700; letter-spacing: -0.01em;
  font-size: clamp(24px, 3.4vw, 32px); color: var(--ink); margin: 0 0 10px;
  text-wrap: balance;
}
.xp-prose { margin: var(--space-2xl) 0; }
.xp-prose p, .xp-prose-lede { max-width: 70ch; font-size: 16.5px; line-height: 1.75; color: var(--ink-soft); margin: 0 0 14px; }
.xp-prose a, .xp-fineprint a, .xp-answer a { color: var(--blue); text-underline-offset: 3px; }
.xp-prose i { font-style: italic; }
.xp-prose b, .xp-skiplist b, .xp-notes b, .xp-excl b { color: var(--ink); }

/* ── Calculator ───────────────────────────────────────────────────── */
.xp-calc {
  margin: var(--space-2xl) 0; padding: var(--space-xl);
  background: var(--paper-2); border: 1px solid var(--hair); border-radius: 18px;
}
.xp-calc-h { margin-top: 0; }
.xp-calc-sub { max-width: 64ch; color: var(--muted); font-size: 15.5px; line-height: 1.6; margin: 0 0 18px; }
.xp-calc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-lg); }
.xp-field { border: 1px solid var(--hair); border-radius: 14px; padding: 14px 16px; min-inline-size: 0; }
.xp-field legend { font: 700 13px/1.4 var(--label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); padding: 0 6px; }
.xp-field-hint { margin: 10px 2px 0; font-size: 12.5px; line-height: 1.55; color: var(--muted); }

.xp-check { display: flex; align-items: center; gap: 10px; padding: 7px 2px; cursor: pointer; color: var(--ink-soft); font-size: 15px; }
.xp-check input { position: absolute; opacity: 0; }
.xp-check-box {
  flex: none; width: 18px; height: 18px; border-radius: 5px;
  border: 1.5px solid var(--rule); background: transparent; position: relative;
}
.xp-check input:checked + .xp-check-box { background: var(--gold); border-color: var(--gold); }
.xp-check input:checked + .xp-check-box::after {
  content: ""; position: absolute; inset: 3px 4px 5px; border: 2.5px solid var(--paper);
  border-top: 0; border-right: 0; transform: rotate(-48deg); border-radius: 1px;
}
.xp-check input:focus-visible + .xp-check-box { outline: 2px solid var(--blue); outline-offset: 2px; }

.xp-seg { display: flex; gap: 6px; flex-wrap: wrap; }
.xp-seg-opt { position: relative; cursor: pointer; }
.xp-seg-opt input { position: absolute; opacity: 0; }
.xp-seg-opt span {
  display: inline-block; padding: 7px 14px; border-radius: 999px; font: 600 14px/1 var(--label);
  border: 1px solid var(--rule); color: var(--ink-soft);
}
.xp-seg-opt.is-on span, .xp-seg-opt input:checked + span { background: var(--gold); border-color: var(--gold); color: var(--paper); }
.xp-seg-opt input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }

.xp-party { display: flex; align-items: center; gap: 14px; }
.xp-party-btn {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--rule);
  background: transparent; color: var(--ink); font-size: 20px; cursor: pointer;
}
.xp-party-btn:hover { border-color: var(--gold); color: var(--gold); }
.xp-party-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.xp-party-n { font: 700 26px/1 var(--display); color: var(--ink); min-width: 34px; text-align: center; }

.xp-verdict { margin-top: var(--space-lg); border-top: 1px solid var(--hair); padding-top: var(--space-lg); }
.xp-verdict-line { font-family: var(--display); font-weight: 800; font-size: clamp(20px, 3vw, 27px); color: var(--ink); margin: 0 0 8px; }
.xp-verdict-line[data-call="yes"] { color: var(--gold); }
.xp-verdict-detail { color: var(--ink-soft); font-size: 15.5px; line-height: 1.65; max-width: 68ch; margin: 0 0 6px; }
.xp-verdict-note { color: var(--muted); font-size: 13px; line-height: 1.6; max-width: 68ch; margin: 0; }
.xp-verdict-note a { color: var(--blue); }

/* ── Tables ───────────────────────────────────────────────────────── */
.xp-products, .xp-vs { margin: var(--space-2xl) 0; }
.xp-scroll-hint { display: none; margin: 0 0 8px; color: var(--muted); font-size: 12.5px; }
.xp-table-wrap { overflow-x: auto; border: 1px solid var(--hair); border-radius: 14px; }
.xp-table-wrap:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.xp-table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 620px; }
.xp-table th, .xp-table td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--hair); vertical-align: top; }
.xp-table thead th { font: 700 12.5px/1.4 var(--label); letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); background: var(--paper-2); }
.xp-table tbody th { color: var(--ink); font-weight: 700; }
.xp-table tbody td { color: var(--ink-soft); line-height: 1.55; }
.xp-table tbody tr:last-child th, .xp-table tbody tr:last-child td { border-bottom: 0; }
.xp-price { white-space: nowrap; color: var(--gold); font-weight: 700; }
.xp-notes { margin: 16px 0 0; padding: 0 0 0 20px; max-width: 74ch; }
.xp-notes li { color: var(--ink-soft); font-size: 15px; line-height: 1.65; margin: 0 0 10px; }
.xp-fineprint { margin: 14px 0 0; max-width: 70ch; color: var(--muted); font-size: 14px; line-height: 1.65; }

/* ── Live boards ──────────────────────────────────────────────────── */
.xp-live { margin: var(--space-2xl) 0; }
.xp-live-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 14px; }
.xp-live-tab {
  padding: 9px 16px; border-radius: 999px; border: 1px solid var(--rule);
  background: transparent; color: var(--ink-soft); font: 600 14px/1 var(--label); cursor: pointer;
}
.xp-live-tab.is-on { background: var(--gold); border-color: var(--gold); color: var(--paper); }
.xp-live-tab:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.xp-board { border: 1px solid var(--hair); border-radius: 14px; padding: 14px 16px; }
.xp-board-state { color: var(--muted); font-size: 14.5px; margin: 4px 0; }
.xp-board-link { margin: 10px 0 2px; font-size: 14px; }
.xp-board-link a { color: var(--blue); }
.xp-board-rows { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.xp-board-row {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px;
  padding: 8px 6px; border-bottom: 1px solid var(--hair); font-size: 15px; color: var(--ink-soft);
}
.xp-board-row:last-child { border-bottom: 0; }
.xp-board-row .xp-noxp {
  font: 600 10.5px/1.4 var(--label); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--hair); border-radius: 6px; padding: 1px 6px; margin-left: 8px;
  white-space: nowrap;
}
.xp-wait { font: 700 15px/1 var(--display); color: var(--gold); white-space: nowrap; }
.xp-wait--down { color: var(--muted); font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.05em; }
.xp-wait--long { color: var(--red); }
.xp-board-meta { margin: 10px 2px 0; color: var(--muted); font-size: 12.5px; }

/* ── Exclusions, hotel, skip list ─────────────────────────────────── */
.xp-excl { list-style: none; margin: 12px 0 16px; padding: 0; display: grid; gap: 12px; max-width: 74ch; }
.xp-excl li { border: 1px solid var(--hair); border-radius: 12px; padding: 12px 16px; color: var(--ink-soft); font-size: 15px; line-height: 1.6; }
.xp-excl-park { font: 600 11.5px/1.4 var(--label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-left: 8px; }

.xp-hotel { margin: var(--space-2xl) 0; padding: var(--space-xl); border: 1px solid var(--gold-deep); border-radius: 18px; background: linear-gradient(180deg, oklch(30% 0.06 84 / 0.25), transparent); }
.xp-hotel p { max-width: 70ch; font-size: 16.5px; line-height: 1.75; color: var(--ink-soft); margin: 0 0 14px; }
.xp-hotel b { color: var(--ink); }
.xp-hotel-list { margin: 0 0 14px; padding: 0; list-style: none; display: flex; gap: 10px; flex-wrap: wrap; }
.xp-hotel-list li { border: 1px solid var(--rule); border-radius: 999px; padding: 8px 16px; color: var(--ink); font: 600 14.5px/1 var(--label); }

.xp-howto { margin: var(--space-2xl) 0; }
.xp-howto-list { margin: 12px 0 0; padding: 0; max-width: 72ch; counter-reset: xp-step; list-style: none; }
.xp-howto-list li {
  position: relative; padding: 0 0 0 52px; margin: 0 0 18px;
  color: var(--ink-soft); font-size: 15.5px; line-height: 1.7; counter-increment: xp-step;
}
.xp-howto-list li::before {
  content: counter(xp-step); position: absolute; left: 0; top: 2px;
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 1px solid var(--gold-deep); border-radius: 50%;
  font: 700 15px/1 var(--display); color: var(--gold);
}

.xp-skiplist { margin: 12px 0 0; padding: 0 0 0 20px; max-width: 72ch; }
.xp-skiplist li { color: var(--ink-soft); font-size: 15.5px; line-height: 1.7; margin: 0 0 12px; }
.xp-skiplist a { color: var(--blue); }

/* ── FAQ ──────────────────────────────────────────────────────────── */
.xp-faq { margin: var(--space-2xl) 0; }
.xp-faq-list { display: grid; gap: 8px; max-width: 74ch; }
.xp-faq-item { border: 1px solid var(--hair); border-radius: 12px; background: var(--paper-2); }
.xp-faq-item summary {
  cursor: pointer; padding: 14px 18px; font: 700 15.5px/1.5 var(--label); color: var(--ink);
  list-style: none; position: relative; padding-right: 44px;
}
.xp-faq-item summary::-webkit-details-marker { display: none; }
.xp-faq-item summary::after {
  content: "+"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  font: 400 22px/1 var(--display); color: var(--gold);
}
.xp-faq-item[open] summary::after { content: "−"; }
.xp-faq-item summary:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; border-radius: 12px; }
.xp-faq-item p { padding: 0 18px 16px; margin: 0; color: var(--ink-soft); font-size: 15px; line-height: 1.7; }

/* ── Keep planning ────────────────────────────────────────────────── */
.xp-more { margin: var(--space-2xl) 0 0; }
.xp-more-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.xp-more-card {
  display: grid; gap: 4px; padding: 16px 18px; border: 1px solid var(--hair); border-radius: 14px;
  text-decoration: none; background: var(--paper-2);
}
.xp-more-card b { color: var(--ink); font: 700 15.5px/1.4 var(--label); }
.xp-more-card span { color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.xp-more-card:hover { border-color: var(--gold-deep); }
.xp-more-card:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ── Small screens ────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .xp { padding: 0 var(--space-md) var(--space-2xl); }
  .xp-answer { padding: var(--space-md); }
  .xp-calc { padding: var(--space-md); }
  .xp-hotel { padding: var(--space-md); }
  .xp-scroll-hint { display: block; }
  /* Keep the row-name column in view while the rest of the table slides. */
  .xp-table tbody th, .xp-table thead th:first-child {
    position: sticky; left: 0; z-index: 1;
    background: var(--paper); border-right: 1px solid var(--hair);
  }
  .xp-table thead th:first-child { background: var(--paper-2); }
  /* Comfortable thumb targets for the mostly-mobile audience. */
  .xp-seg-opt span { padding: 10px 16px; }
  .xp-live-tab { padding: 12px 16px; }
  .xp-party-btn { width: 44px; height: 44px; }
}