/* ==========================================================================
   UNITIC marketing-page design system (pv-*) — extracted from /about so the
   events, for-organizers, fees and faq pages share the exact same look,
   layout, motion and footer. Loaded after /marketing.css. The CONTENT-PAGE
   KIT at the bottom adds the shared primitives those pages need.
   ========================================================================== */
    /* =====================================================================
       About page — Partyverse-style structure in UNITIC colours.
       Full-height dark hero → overlapping white manifesto panel → alternating
       bordered showcase sections → categories → trust → FAQ → audience cards
       → final CTA → multi-column dark footer.
       ===================================================================== */
    :root {
      --p-hero: #0e0b08;
      --p-d1: #15110c;
      --p-d2: #1c1710;
      --p-black: #0a0806;
      --p-bd1: #2a231a;
      --p-bd2: #352d21;
      --p-on: #f7f2ea;
      --p-mute: rgba(247, 242, 234, 0.72);
      --p-orange: #ff9150;
      --brand: #ea580c;
      --brand-dark: #c2410c;
      --ink: #3a2300;
      --muted: #7a6a52;
      --line: #ece4d6;
      --cream: #faf8f4;
      --radius: 14px;
      /* motion vocabulary (matched to the reference site) */
      --pv-ease: cubic-bezier(0.22, 1, 0.36, 1);
      --pv-std: cubic-bezier(0.4, 0, 0.2, 1);
      --pv-spring: cubic-bezier(0.34, 1.25, 0.64, 1);
    }

    body { background: var(--cream); }
    body.capsule-page { overflow-x: clip; }

    a:focus-visible, button:focus-visible, summary:focus-visible, .btn:focus-visible {
      outline: 3px solid var(--brand);
      outline-offset: 3px;
      border-radius: 4px;
    }

    /* ---------- shared type & buttons ---------- */
    .pv-kicker {
      display: inline-block;
      font-size: 12.5px;
      font-weight: 800;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--p-orange);
      margin: 0 0 14px;
    }
    .pv-h {
      font-weight: 700;
      font-size: clamp(28px, 4vw, 38px);
      line-height: 1.12;
      letter-spacing: -0.02em;
      color: var(--p-on);
      margin: 0 0 16px;
      max-width: 720px;
    }
    .pv-h-big {
      font-weight: 900;
      font-size: clamp(30px, 4.6vw, 44px);
      line-height: 1.08;
      letter-spacing: -0.025em;
      color: #fff;
      margin: 0 0 16px;
    }
    .pv-sub {
      font-size: clamp(16px, 2vw, 17.5px);
      line-height: 1.6;
      color: var(--p-mute);
      max-width: 640px;
      margin: 0 0 26px;
    }
    .pv-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: var(--brand);
      color: #fff;
      border: none;
      padding: 15px 30px;
      border-radius: 999px;
      font-family: inherit;
      font-weight: 800;
      font-size: 16px;
      text-decoration: none;
      cursor: pointer;
      transition: background 0.15s ease, transform 0.15s ease;
    }
    .pv-btn:hover { background: var(--brand-dark); color: #fff; text-decoration: none; }
    .pv-btn.ghost {
      background: transparent;
      color: var(--p-on);
      border: 2px solid rgba(247, 242, 234, 0.35);
      padding: 13px 28px;
    }
    .pv-btn.ghost:hover { background: rgba(247, 242, 234, 0.08); border-color: var(--p-on); color: var(--p-on); }
    .pv-btn.soft { background: #f2ede4; color: #464646; }
    .pv-btn.soft:hover { background: #e9e2d5; color: var(--ink); }

    /* links inside dark text blocks */
    .pv-dark a:not(.pv-btn):not(.ab-chip) {
      color: var(--p-orange);
      text-decoration: underline;
      text-underline-offset: 2px;
    }
    .pv-dark a:not(.pv-btn):not(.ab-chip):hover { color: #ffb98a; }
    .pv-light a:not(.pv-btn) { color: var(--brand-dark); text-decoration: underline; text-underline-offset: 2px; }

    /* ---------- section frame (Partyverse rhythm) ---------- */
    .pv-sec {
      position: relative;
      padding: clamp(56px, 8vw, 96px) 24px;
      border-bottom: 2px solid var(--p-bd1);
      color: var(--p-on);
    }
    .pv-sec.alt { background: var(--p-d1); }
    .pv-sec.alt2 { background: var(--p-d2); }
    .pv-inner { max-width: 1180px; margin: 0 auto; }

    /* ================= A — HERO ================= */
    .pv-hero {
      position: relative;
      background: var(--p-hero);
      color: var(--p-on);
      overflow: hidden;
      display: grid;
      grid-template-columns: 1fr;
    }
    .pv-copy {
      padding: 96px 24px clamp(48px, 9vw, 72px);
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .pv-media {
      position: relative;
      min-height: 420px;
      height: 100%;
    }
    .pv-media video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
    }
    section[id] { scroll-margin-top: 84px; }

    /* the capsule nav replaces the standard header on this page at every width */
    .site-header { display: none; }
    .pv-hero .breadcrumbs { color: rgba(247, 242, 234, 0.55); margin-bottom: 26px; }
    .pv-hero .breadcrumbs a { color: rgba(247, 242, 234, 0.55); }
    .pv-hero .breadcrumbs a:hover { color: var(--p-orange); }
    .pv-hero h1,
    .pv-h1-glow {
      font-size: clamp(2.75rem, 4.44vw, 4rem);
      font-weight: 900;
      line-height: 0.97;
      letter-spacing: -0.04rem;
      color: #fff;
      margin: 0 0 22px;
      max-width: 640px;
    }
    .pv-hero h1 em { font-style: normal; color: var(--brand); }
    /* cursor-revealed glow behind the headline (Partyverse effect, orange) */
    .pv-h1-wrap { position: relative; --gx: 50%; --gy: 40%; --gr: 0px; }
    .pv-h1-glow {
      position: absolute;
      inset: 0;
      margin: 0;
      pointer-events: none;
      color: var(--brand);
      -webkit-text-stroke: 0.25rem var(--brand);
      filter: blur(0.12rem);
      mask-image: radial-gradient(circle var(--gr) at var(--gx) var(--gy), black 20%, transparent 100%);
      -webkit-mask-image: radial-gradient(circle var(--gr) at var(--gx) var(--gy), black 20%, transparent 100%);
    }
    .pv-h1-glow em { font-style: normal; color: var(--brand); }
    .pv-hero .pv-sub { margin-bottom: 32px; max-width: 560px; font-size: clamp(16.5px, 2vw, 18.5px); }
    .pv-ctas { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

    /* hero CTAs — wide stacked buttons + white card (Partyverse desktop hero) */
    .pv-hero-ctas {
      display: flex;
      flex-direction: column;
      gap: 16px;
      width: 100%;
      max-width: 520px;
      margin-top: 6px;
    }
    .pv-wide {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      width: 100%;
      background: #262019;
      border: 1px solid #2f2820;
      color: #fff;
      border-radius: 12px;
      padding: 14px 20px;
      font-weight: 600;
      font-size: clamp(13px, 1vw, 14px);
      text-decoration: none;
      transition: background 0.15s ease;
    }
    .pv-wide:hover { background: #201a14; text-decoration: none; color: #fff; }
    .pv-wide svg { flex: 0 0 auto; }
    .pv-wide.white {
      background: #fff;
      border-color: var(--line);
      color: var(--ink);
      padding: 16px 22px;
      border-radius: 16px;
    }
    .pv-wide.white:hover { background: #fdf9f3; }
    .pv-wide-text { display: flex; flex-direction: column; gap: 3px; text-align: left; }
    .pv-wide-text b {
      font-size: clamp(16px, 1.4vw, 19px);
      font-weight: 800;
      letter-spacing: -0.01em;
      color: var(--ink);
    }
    .pv-wide-text small {
      font-size: clamp(11.5px, 0.9vw, 13px);
      line-height: 1.45;
      color: var(--muted);
      font-weight: 500;
    }
    .pv-wide-glyph {
      flex: 0 0 auto;
      width: 56px;
      height: 56px;
      border-radius: 12px;
      background: #fdeade;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* floating stickers straddling the hero seam (desktop only, decorative) */
    .pv-sticker {
      position: absolute;
      z-index: 3;
      pointer-events: none;
      display: none;
      align-items: center;
      gap: 8px;
      background: var(--p-d1);
      border: 1px solid #332d25;
      border-radius: 14px;
      padding: 10px 14px;
      font-size: 13px;
      font-weight: 700;
      color: #f7f2ea;
      box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.8);
      white-space: nowrap;
    }
    .pv-sticker .dot {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: var(--brand);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 900;
    }
    .pv-sticker.s1 { left: 52%; top: 14%; }
    .pv-sticker.s2 {
      left: 53.5%;
      top: 62%;
      background: #fff;
      border-color: var(--line);
      color: var(--ink);
    }
    .pv-sticker.s2 .dot { background: #fdeade; color: var(--brand-dark); }

    /* ---------- hero product visual (replaced by .pv-media video) ---------- */

    /* ================= MANIFESTO PANEL (overlapping white) ================= */
    .pv-panel {
      position: relative;
      z-index: 2;
      margin-top: -44px;
      background: #fff;
      border-radius: 40px 40px 0 0;
      padding: clamp(56px, 8vw, 104px) 24px clamp(64px, 9vw, 112px);
      color: var(--ink);
    }
    .pv-panel-inner { max-width: 900px; margin: 0 auto; }
    .pv-panel .pv-kicker { color: var(--brand-dark); }
    .pv-lines { list-style: none; margin: 0 0 34px; padding: 0; }
    .pv-lines li {
      font-size: clamp(21px, 3vw, 27px);
      font-weight: 700;
      line-height: 1.4;
      letter-spacing: -0.015em;
      color: var(--ink);
      margin-bottom: 22px;
    }
    .pv-lines li.dim { color: #6b5c48; font-weight: 600; }
    .pv-lines li.punch { color: var(--brand-dark); }
    .pv-lines li h2 {
      font-size: inherit;
      font-weight: inherit;
      line-height: inherit;
      letter-spacing: inherit;
      color: inherit;
      margin: 0;
    }
    .pv-body {
      font-size: 17.5px;
      line-height: 1.65;
      color: var(--muted);
      max-width: 760px;
      margin: 0 0 34px;
    }
    .pv-mv {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 30px;
      border-top: 1px solid var(--line);
      padding-top: 36px;
      margin-top: 8px;
    }
    .pv-mv .pv-kicker { color: var(--brand-dark); margin-bottom: 10px; }
    .pv-mv p {
      font-size: clamp(17.5px, 2.2vw, 20px);
      font-weight: 600;
      line-height: 1.45;
      letter-spacing: -0.01em;
      color: var(--ink);
      margin: 0;
      border-left: 3px solid var(--brand);
      padding-left: 18px;
    }

    /* ================= SHOWCASES ================= */
    .pv-split {
      display: grid;
      grid-template-columns: 1.02fr 0.98fr;
      gap: clamp(36px, 6vw, 72px);
      align-items: center;
    }
    .pv-split.reverse .pv-copy { order: 2; }
    .pv-split.reverse .pv-visual { order: 1; }
    .pv-stack { text-align: left; }
    .pv-stack .pv-visual { margin-top: clamp(36px, 5vw, 56px); }
    .pv-stage {
      display: inline-block;
      font-size: 13px;
      font-weight: 900;
      letter-spacing: 0.22em;
      color: var(--brand);
      margin-bottom: 16px;
    }

    /* illustrative visuals (clearly graphic, not product screenshots) */
    .pv-card {
      background: #211b14;
      border: 1px solid var(--p-bd2);
      border-radius: 20px;
      padding: 26px;
      box-shadow: 0 30px 60px -34px rgba(0, 0, 0, 0.75);
    }
    .ev-row { display: flex; gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid rgba(247, 242, 234, 0.09); }
    .ev-row:last-child { border-bottom: none; padding-bottom: 0; }
    .ev-row:first-child { padding-top: 0; }
    .ev-date {
      flex: 0 0 auto;
      width: 58px;
      text-align: center;
      background: rgba(234, 88, 12, 0.14);
      border: 1px solid rgba(234, 88, 12, 0.45);
      border-radius: 12px;
      padding: 8px 4px;
    }
    .ev-date b { display: block; font-size: 20px; font-weight: 900; color: var(--p-orange); line-height: 1.1; }
    .ev-date span { font-size: 11px; font-weight: 800; letter-spacing: 0.1em; color: rgba(247, 242, 234, 0.65); }
    .ev-info { flex: 1; min-width: 0; }
    .ev-info b { display: block; font-size: 16.5px; font-weight: 800; color: var(--p-on); margin-bottom: 3px; }
    .ev-info span { font-size: 13.5px; color: rgba(247, 242, 234, 0.6); }
    .ev-price { flex: 0 0 auto; font-size: 15px; font-weight: 800; color: var(--p-orange); }

    .stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 20px; }
    .stat {
      min-width: 0;
      background: #211b14;
      border: 1px solid var(--p-bd2);
      border-radius: 16px;
      padding: 18px 16px;
      text-align: center;
    }
    .stat b { display: block; font-size: clamp(20px, 3vw, 27px); font-weight: 900; color: #fff; letter-spacing: -0.02em; }
    .stat span { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(247, 242, 234, 0.55); }
    .bars { display: flex; align-items: flex-end; gap: 10px; height: 120px; padding: 18px 20px 0; background: #211b14; border: 1px solid var(--p-bd2); border-radius: 16px 16px 0 0; border-bottom: none; }
    .bars i { flex: 1; background: linear-gradient(180deg, var(--brand), rgba(234, 88, 12, 0.35)); border-radius: 6px 6px 0 0; }
    .bars-cap { font-size: 13px; color: rgba(247, 242, 234, 0.55); background: #211b14; border: 1px solid var(--p-bd2); border-top: none; border-radius: 0 0 16px 16px; padding: 10px 20px 14px; }

    .ticket {
      position: relative;
      background: #fdf7ee;
      color: var(--ink);
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 34px 70px -36px rgba(0, 0, 0, 0.8);
      max-width: 420px;
      margin: 0 auto;
    }
    .ticket-top { background: var(--ink); color: #fdf7ee; padding: 20px 26px; display: flex; justify-content: space-between; align-items: center; }
    .ticket-top b { font-size: 15px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 900; }
    .ticket-top span { font-size: 12.5px; color: rgba(253, 247, 238, 0.7); font-weight: 700; }
    .ticket-body { padding: 26px; display: flex; gap: 22px; align-items: center; }
    .qr {
      flex: 0 0 auto;
      width: 108px;
      height: 108px;
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      grid-template-rows: repeat(7, 1fr);
      gap: 3px;
      background: #fff;
      padding: 8px;
      border: 1px solid var(--line);
      border-radius: 10px;
    }
    .qr i { background: transparent; border-radius: 2px; }
    .qr i.on { background: var(--ink); }
    .ticket-info b { display: block; font-size: 21px; font-weight: 900; letter-spacing: -0.01em; margin-bottom: 4px; }
    .ticket-info span { display: block; font-size: 14.5px; color: var(--muted); margin-bottom: 2px; }
    .ticket-stamp {
      position: absolute;
      right: 18px;
      bottom: 14px;
      font-size: 11.5px;
      font-weight: 900;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--brand-dark);
      border: 2px solid var(--brand-dark);
      border-radius: 8px;
      padding: 5px 10px;
      transform: rotate(-8deg);
      background: rgba(255, 255, 255, 0.85);
    }
    .ticket-perf { border-top: 2px dashed var(--line); position: relative; }
    .ticket-perf::before, .ticket-perf::after {
      content: "";
      position: absolute;
      top: -13px;
      width: 24px;
      height: 24px;
      background: var(--p-d1);
      border-radius: 50%;
    }
    .ticket-perf::before { left: -12px; }
    .ticket-perf::after { right: -12px; }
    .ticket-foot { padding: 16px 26px 22px; display: flex; justify-content: space-between; font-size: 13.5px; color: var(--muted); font-weight: 600; }

    /* ================= CATEGORIES ================= */
    .ab-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      list-style: none;
      padding: 0;
      margin: 30px 0 18px;
    }
    .ab-chip {
      display: inline-block;
      padding: 11px 20px;
      border-radius: 999px;
      background: rgba(247, 242, 234, 0.05);
      border: 1px solid rgba(247, 242, 234, 0.16);
      color: var(--p-on);
      font-weight: 700;
      font-size: 14.5px;
      text-decoration: none;
      transition: border-color 0.15s ease, color 0.15s ease;
    }
    .ab-chip:hover { border-color: var(--brand); color: var(--p-orange); text-decoration: none; }
    .pv-note { font-size: 14px; color: rgba(247, 242, 234, 0.5); font-style: italic; margin: 0; max-width: 720px; }

    /* ================= TRUST ================= */
    .pv-trust {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 0 40px;
      list-style: none;
      padding: 0;
      margin: 30px 0;
    }
    .pv-trust li { border-top: 1px solid var(--p-bd2); padding: 20px 0 8px; margin: 0; }
    .pv-trust h3 { font-size: 17px; font-weight: 800; color: #fff; margin: 0 0 8px; }
    .pv-trust p { font-size: 15.5px; line-height: 1.6; color: var(--p-mute); margin: 0; }
    .pv-disambig {
      border: 1px solid var(--p-bd2);
      background: rgba(247, 242, 234, 0.04);
      border-radius: var(--radius);
      padding: 18px 22px;
      margin-top: 30px;
      font-size: 15.5px;
      color: var(--p-mute);
      max-width: 780px;
    }
    .pv-disambig strong { color: var(--p-on); }

    /* ================= FAQ (reference layout: heading left, cards right) ==== */
    .pv-faq-wrap {
      max-width: 1180px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: minmax(260px, 380px) 1fr;
      gap: clamp(36px, 6vw, 96px);
      align-items: start;
    }
    .pv-faq-head .pv-h-big { line-height: 0.97; }
    .pv-faq-head .pv-sub { margin: 0; max-width: 360px; }
    .ab-faq { display: flex; flex-direction: column; gap: 16px; margin: 0; }
    details.ab-faq-item {
      background: rgba(247, 242, 234, 0.055);
      border: none;
      border-radius: 22px;
      transition: background-color 0.15s var(--pv-std);
    }
    details.ab-faq-item:hover { background: rgba(247, 242, 234, 0.09); }
    details.ab-faq-item summary {
      list-style: none;
      cursor: pointer;
      display: flex;
      width: 100%;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      text-align: left;
      padding: 28px 32px;
      font-weight: 600;
      font-size: 17px;
      color: rgba(247, 242, 234, 0.62);
      transition: color 0.15s var(--pv-std);
    }
    details.ab-faq-item summary::-webkit-details-marker { display: none; }
    details.ab-faq-item summary:hover,
    details.ab-faq-item[open] summary { color: #fff; }
    details.ab-faq-item summary::after {
      content: "+";
      color: rgba(247, 242, 234, 0.55);
      font-size: 26px;
      font-weight: 300;
      line-height: 1;
      flex: 0 0 auto;
      transition: transform 0.3s var(--pv-ease), color 0.15s var(--pv-std);
    }
    details.ab-faq-item[open] summary::after { transform: rotate(45deg); color: #fff; }
    .ab-faq-a { padding: 0 32px 26px; }
    .ab-faq-a p { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--p-mute); }

    /* ================= AUDIENCE ================= */
    .pv-audience { background: var(--p-black); border-bottom: none; }
    /* reference pattern: full-bleed tinted cards — kicker + title by default,
       description + CTA revealed on hover (like the reference's first card) */
    .pv-cards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 6px;
      margin: clamp(32px, 4vw, 48px) -16px 0;
    }
    .pv-aud {
      position: relative;
      min-height: 540px;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      overflow: hidden;
      padding: 34px;
      color: var(--p-on);
      border: none;
      border-radius: 0;
      background-size: cover;
      background-position: center;
    }
    .pv-aud:first-child { border-radius: 26px 0 0 26px; }
    .pv-aud:last-child { border-radius: 0 26px 26px 0; }
    .pv-aud.v1 {
      background-image:
        linear-gradient(155deg, rgba(226, 85, 31, 0.84) 0%, rgba(90, 25, 6, 0.92) 100%),
        url("/about/attendees-crowd.webp");
    }
    .pv-aud.v2 {
      background-image:
        linear-gradient(155deg, rgba(226, 85, 31, 0.84) 0%, rgba(90, 25, 6, 0.92) 100%),
        url("/about/unitic-archived-events.png");
    }
    .pv-aud.v3 {
      background-image:
        linear-gradient(155deg, rgba(214, 58, 138, 0.84) 0%, rgba(80, 16, 55, 0.92) 100%),
        url("/about/campus-students.webp");
    }
    .pv-aud::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(8, 5, 2, 0.78) 0%, rgba(8, 5, 2, 0.4) 55%, rgba(8, 5, 2, 0.18) 100%);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.35s var(--pv-ease);
    }
    .pv-aud-body {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }
    .pv-aud-kicker {
      font-size: 15px;
      font-weight: 600;
      color: rgba(255, 255, 255, 0.85);
      margin-bottom: 6px;
      transition: opacity 0.25s var(--pv-std);
    }
    .pv-aud-body h3 { font-size: 25px; font-weight: 900; letter-spacing: -0.01em; color: #fff; margin: 0; }
    .pv-aud-extra { display: grid; grid-template-rows: 1fr; width: 100%; }
    .pv-aud-extra > div { overflow: hidden; }
    .pv-aud-body ul { list-style: none; padding: 0; margin: 16px 0 22px; }
    .pv-aud-body li {
      position: relative;
      padding-left: 26px;
      font-size: 15px;
      line-height: 1.55;
      color: rgba(255, 255, 255, 0.92);
      margin-bottom: 11px;
    }
    .pv-aud-body li::before {
      content: "\2713";
      position: absolute;
      left: 0;
      top: 0;
      color: #fff;
      font-weight: 900;
    }
    .pv-aud-body .pv-btn { align-self: flex-start; }
    .pv-aud p.pv-partner { font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.9); margin: 14px 0 22px; }
    /* hover/focus reveal — only where a real hover exists; touch shows everything */
    @media (hover: hover) and (pointer: fine) {
      .pv-aud-extra {
        grid-template-rows: 0fr;
        opacity: 0;
        transition: grid-template-rows 0.4s var(--pv-ease), opacity 0.3s var(--pv-std) 0.06s;
      }
      .pv-aud:hover .pv-aud-extra,
      .pv-aud:focus-within .pv-aud-extra { grid-template-rows: 1fr; opacity: 1; }
      .pv-aud:hover::after,
      .pv-aud:focus-within::after { opacity: 1; }
      .pv-aud:hover .pv-aud-kicker,
      .pv-aud:focus-within .pv-aud-kicker { opacity: 0; }
    }

    /* last section before the footer — clean junction, no divider line */
    main > section:last-of-type { border-bottom: none; }

    /* ============ FOOTER (reference layout: wordmark + links | CTA panel) === */
    .pv-footer {
      background: var(--p-black);
      color: var(--p-mute);
      padding: clamp(24px, 3vw, 40px) clamp(16px, 3vw, 40px);
      font-size: 15px;
    }
    .pv-f-grid {
      max-width: 1360px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
      gap: 18px;
      align-items: stretch;
    }
    .pv-f-panel {
      background: #131009;
      border: 1px solid rgba(247, 242, 234, 0.06);
      border-radius: 26px;
      padding: clamp(28px, 4vw, 48px);
    }
    .pv-f-mark {
      display: block;
      width: fit-content;
      margin: 0 0 clamp(24px, 3vw, 42px);
      color: #fff;
      font-weight: 900;
      font-size: clamp(64px, 17vw, 240px);
      line-height: 0.9;
      letter-spacing: -0.02em;
      text-transform: lowercase;
      text-decoration: none;
      white-space: nowrap;
      transition: color 0.15s var(--pv-std);
    }
    .pv-f-mark:hover { color: #fff; text-decoration: none; }
    .pv-f-rule { display: flex; align-items: center; gap: 16px; margin: 0 0 clamp(22px, 2.5vw, 34px); }
    .pv-f-rule span { font-size: 13.5px; color: rgba(247, 242, 234, 0.5); white-space: nowrap; }
    .pv-f-rule i { flex: 1; height: 1px; background: rgba(247, 242, 234, 0.12); }
    .pv-f-cols {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 28px 24px;
      margin-bottom: clamp(26px, 3vw, 40px);
    }
    .pv-f-col h3 {
      font-size: 15px;
      font-weight: 700;
      letter-spacing: 0;
      text-transform: none;
      color: #fff;
      margin: 0 0 14px;
    }
    .pv-f-col ul { list-style: none; padding: 0; margin: 0; }
    .pv-f-col li { margin-bottom: 12px; }
    .pv-f-col a {
      color: rgba(247, 242, 234, 0.62);
      font-weight: 500;
      text-decoration: none;
      transition: color 0.15s var(--pv-std);
    }
    .pv-f-col a:hover { color: #fff; }
    .pv-f-bottom {
      display: flex;
      flex-wrap: wrap;
      gap: 14px 28px;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
      color: rgba(247, 242, 234, 0.45);
    }
    .pv-f-bottom a { color: rgba(247, 242, 234, 0.62); font-weight: 600; text-decoration: none; transition: color 0.15s var(--pv-std); }
    .pv-f-bottom a:hover { color: #fff; }
    .pv-f-legal { display: flex; flex-wrap: wrap; gap: 20px; }
    /* right CTA panel */
    .pv-f-cta { display: flex; flex-direction: column; align-items: center; text-align: center; }
    .pv-f-bolt { width: clamp(120px, 14vw, 170px); height: auto; margin: 4px 0 18px; }
    .pv-f-tag { max-width: 320px; line-height: 1.6; color: rgba(247, 242, 234, 0.6); margin: 0 0 26px; font-size: 15px; }
    .pv-f-actions { display: flex; flex-direction: column; gap: 12px; width: 100%; margin-top: auto; }
    .pv-f-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 50px;
      border-radius: 13px;
      background: rgba(247, 242, 234, 0.07);
      color: #fff;
      font-weight: 700;
      font-size: 15px;
      text-decoration: none;
      transition: background-color 0.15s var(--pv-std), transform 0.2s var(--pv-std);
    }
    .pv-f-btn:hover { background: rgba(247, 242, 234, 0.12); text-decoration: none; transform: translateY(-2px); }
    .pv-f-btn.primary { background: #fff; color: var(--ink); }
    .pv-f-btn.primary:hover { background: #fdf6ec; }

    /* ================= MOTION (reference-site vocabulary) ================= */
    @keyframes pv-rise {
      from { opacity: 0; transform: translateY(22px); }
      to { opacity: 1; transform: none; }
    }
    @keyframes pv-media-in {
      from { opacity: 0; transform: scale(1.04); }
      to { opacity: 1; transform: none; }
    }
    @keyframes pv-pop {
      0% { opacity: 0; transform: scale(0.6); }
      60% { opacity: 1; transform: scale(1.06); }
      100% { opacity: 1; transform: scale(1); }
    }
    @keyframes pv-float {
      from { transform: translateY(0); }
      to { transform: translateY(-9px); }
    }
    @keyframes pv-faq-in {
      from { opacity: 0; transform: translateY(-6px); }
      to { opacity: 1; transform: none; }
    }

    /* hero entrance choreography — plays once on load (motion-safe) */
    @media (prefers-reduced-motion: no-preference) {
      .pv-hero .breadcrumbs { animation: pv-rise 0.5s var(--pv-ease) 0.05s both; }
      .pv-copy > .pv-kicker { animation: pv-rise 0.5s var(--pv-ease) 0.1s both; }
      .pv-h1-wrap { animation: pv-rise 0.65s var(--pv-ease) 0.16s both; }
      .pv-hero .pv-sub { animation: pv-rise 0.6s var(--pv-ease) 0.28s both; }
      .pv-hero-ctas { animation: pv-rise 0.6s var(--pv-ease) 0.4s both; }
      .pv-media { animation: pv-media-in 0.9s var(--pv-ease) 0.15s both; }
      .pv-sticker.s1 {
        animation: pv-pop 0.55s var(--pv-spring) 0.75s both,
                   pv-float 3.6s ease-in-out 1.4s infinite alternate;
      }
      .pv-sticker.s2 {
        animation: pv-pop 0.55s var(--pv-spring) 0.9s both,
                   pv-float 4s ease-in-out 1.55s infinite alternate;
      }
      .pv-f-bolt { animation: pv-float 4.2s ease-in-out 2s infinite alternate; }
    }

    /* React/GSAP marketing controllers add this class in the document head.
       Content stays visible while the lazy motion bundle loads, and the older
       CSS entrances do not compete with the shared GSAP motion system. */
    html.motion-pending .pv-hero .breadcrumbs,
    html.motion-pending .pv-copy > .pv-kicker,
    html.motion-pending .pv-h1-wrap,
    html.motion-pending .pv-hero .pv-sub,
    html.motion-pending .pv-hero-ctas,
    html.motion-pending .pv-media,
    html.motion-pending .pv-sticker,
    html.motion-pending .pv-f-bolt { animation: none !important; }

    /* Shared free line splitting and finishing touches used by the lazy
       React/GSAP controller on capsule marketing pages. */
    .capsule-page .motion-measure { display: inline; }
    .capsule-page .motion-word { display: inline-block; }
    .capsule-page .motion-line-mask {
      display: block;
      overflow: hidden;
      padding-bottom: 0.08em;
      margin-bottom: -0.08em;
    }
    .capsule-page .motion-line-inner { display: inline-block; }
    .capsule-page .motion-emphasis { position: relative; }
    .capsule-page .motion-emphasis-ink {
      position: absolute;
      inset: 0;
      color: #DD7800;
      opacity: 0;
      pointer-events: none;
    }
    .capsule-page .motion-fill { position: relative; overflow: hidden; isolation: isolate; }
    .capsule-page .motion-fill::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background: #5C2E0F;
      transform: translateX(-102%);
      transition: transform .4s cubic-bezier(.16,1,.3,1);
    }
    .capsule-page .motion-fill:hover::before,
    .capsule-page .motion-fill:focus-visible::before { transform: translateX(0); }
    .capsule-page .pv-nav-links a,
    .capsule-page .pv-menu-links a,
    .capsule-page .pv-f-col a { position: relative; text-decoration: none; }
    .capsule-page .pv-nav-links a::after,
    .capsule-page .pv-menu-links a::after,
    .capsule-page .pv-f-col a::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: -3px;
      height: 1px;
      background: currentColor;
      transform: scaleX(0);
      transform-origin: 0 50%;
      transition: transform .4s cubic-bezier(.16,1,.3,1);
    }
    .capsule-page .pv-nav-links a:hover::after,
    .capsule-page .pv-menu-links a:hover::after,
    .capsule-page .pv-f-col a:hover::after { transform: scaleX(1); }
    .capsule-page .motion-faq-chevron {
      flex: 0 0 auto;
      font-size: 26px;
      line-height: 1;
      color: rgba(247,242,234,.55);
      transform-origin: 50% 50%;
    }
    .capsule-page.motion-enhanced details.ab-faq-item summary::after { display: none; }
    .capsule-page.motion-enhanced .ab-faq-a { overflow: hidden; padding: 0 32px; }
    .capsule-page.motion-enhanced .ab-faq-a p { padding-bottom: 26px; }
    .capsule-page.motion-enhanced details.ab-faq-item::details-content {
      transition: none;
      height: auto;
      overflow: visible;
    }

    /* scroll reveals — fade + rise once, expo-out (uses `translate` so card
       hovers on `transform` keep their own timing) */
    html.js .pv-reveal {
      opacity: 0;
      translate: 0 18px;
      transition: opacity 0.6s var(--pv-ease), translate 0.6s var(--pv-ease);
    }
    html.js .pv-reveal.in {
      opacity: 1;
      translate: 0 0;
    }
    .pv-cards .pv-aud:not(.in):nth-child(2) { transition-delay: 0.12s; }
    .pv-cards .pv-aud:not(.in):nth-child(3) { transition-delay: 0.24s; }

    /* hover motion — 150-200ms, standard ease (cards lift, chips/buttons rise) */
    .ab-chip,
    .pv-wide,
    .pv-card,
    .ticket,
    .stat {
      transition: transform 0.2s var(--pv-std), box-shadow 0.2s var(--pv-std),
                  background-color 0.15s var(--pv-std), border-color 0.15s var(--pv-std),
                  color 0.15s var(--pv-std);
    }
    .ab-chip:hover { transform: translateY(-2px); }
    .pv-wide:hover { transform: translateY(-2px); }
    .pv-card:hover, .ticket:hover { transform: translateY(-4px); box-shadow: 0 34px 64px -30px rgba(0, 0, 0, 0.7); }
    .stat:hover { transform: translateY(-3px); }

    /* FAQ — smooth expand + content fade (details-content where supported) */
    details.ab-faq-item { interpolate-size: allow-keywords; }
    details.ab-faq-item::details-content {
      height: 0;
      overflow: clip;
      transition: height 0.35s var(--pv-ease), content-visibility 0.35s allow-discrete;
    }
    details.ab-faq-item[open]::details-content { height: auto; }
    details.ab-faq-item[open] .ab-faq-a { animation: pv-faq-in 0.3s var(--pv-ease) both; }

    /* ================= RESPONSIVE ================= */
    @media (min-width: 901px) {
      .pv-hero { min-height: calc(100svh - 65px); grid-template-columns: 55fr 45fr; }
      .pv-copy { padding: 96px clamp(28px, 4vw, 60px) 64px; }
      .pv-faq-head .pv-h-big { max-width: 12ch; }
    }
    @media (min-width: 1024px) {
      .pv-hero { min-height: 100svh; }
      .pv-copy { padding-top: 150px; }
      .pv-hero .pv-sub { margin-bottom: 110px; }
      .pv-hero h1, .pv-h1-glow { max-width: min(40vw, 36.875rem); }
    }
    @media (min-width: 1120px) {
      .pv-sticker { display: flex; }
    }
    @media (max-width: 1023px) {
      .pv-h1-glow { display: none; }
    }
    @media (max-width: 900px) {
      .pv-faq-wrap { grid-template-columns: 1fr; }
      .pv-faq-head .pv-h-big { max-width: none; }
      .pv-split { grid-template-columns: 1fr; }
      .pv-split.reverse .pv-copy { order: 1; }
      .pv-split.reverse .pv-visual { order: 2; }
      .pv-mv { grid-template-columns: 1fr; }
      .pv-cards { grid-template-columns: 1fr; margin: 32px 0 0; gap: 12px; }
      .pv-aud { min-height: 340px; padding: 28px 24px; }
      .pv-aud:first-child, .pv-aud:last-child { border-radius: 22px; }
      .pv-f-grid { grid-template-columns: 1fr; }
      .stat-grid { grid-template-columns: repeat(3, 1fr); }
    }
    @media (max-width: 560px) {
      .pv-panel { border-radius: 28px 28px 0 0; margin-top: -32px; }
      .pv-media { min-height: 320px; }
      .ticket-body { flex-direction: column; align-items: flex-start; }
      .stat b { font-size: 18px; }
      .stat { padding: 14px 8px; }
      .stat span { font-size: 11px; overflow-wrap: break-word; }
      .ev-price { display: none; }
    }
    @media (prefers-reduced-motion: reduce) {
      .pv-btn, .ab-chip, .pv-wide, .pv-card, .ticket, .stat { transition: none; }
      .pv-aud-kicker, .pv-aud-extra, .pv-aud::after { transition: none; }
      html.js .pv-reveal { transition: none; }
      details.ab-faq-item summary,
      details.ab-faq-item,
      details.ab-faq-item summary::after { transition: none; }
      details.ab-faq-item[open] .ab-faq-a { animation: none; }
    }
/* =====================================================================
   CONTENT-PAGE KIT
   Shared building blocks for the nav pages that emulate /about
   (/events, /for-organizers, /fees, /faq): a hero that works without
   the media column, prose/list/step/card/table primitives, and the
   closing CTA panel — same dark design language as /about.
   ===================================================================== */

/* --- hero without the video column --- */
@media (min-width: 901px) {
  .pv-hero.pv-hero-solo { grid-template-columns: 1fr; }
  .pv-hero.pv-hero-solo h1,
  .pv-hero.pv-hero-solo .pv-h1-glow { max-width: min(760px, 92%); }
}
.pv-hero.pv-hero-solo .pv-sub { max-width: 640px; }

/* --- big lead paragraph (page definition under the hero) --- */
.pv-lede {
  font-size: clamp(19px, 2.4vw, 24px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--p-on);
  max-width: 920px;
  margin: 0;
}

/* --- check-mark bullet list --- */
.pv-list {
  list-style: none;
  padding: 0;
  margin: 26px 0 0;
  max-width: 840px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.pv-list li {
  position: relative;
  padding-left: 32px;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--p-mute);
}
.pv-list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--p-orange);
  font-weight: 900;
}
.pv-list li strong { color: var(--p-on); }

/* --- numbered steps --- */
.pv-steps {
  list-style: none;
  counter-reset: pvstep;
  padding: 0;
  margin: 28px 0 0;
  display: grid;
  gap: 14px;
  max-width: 880px;
}
.pv-steps li {
  counter-increment: pvstep;
  position: relative;
  background: #211b14;
  border: 1px solid var(--p-bd2);
  border-radius: 16px;
  padding: 20px 22px 20px 76px;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--p-mute);
}
.pv-steps li::before {
  content: "0" counter(pvstep);
  position: absolute;
  left: 22px;
  top: 20px;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: var(--brand);
}
.pv-steps li strong { color: #fff; }

/* --- card grids (features, resources, event listings) --- */
.pv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin: 30px 0 0;
}
.pv-grid .pv-card h3 { font-size: 18px; font-weight: 800; color: #fff; margin: 0 0 8px; }
.pv-grid .pv-card p { font-size: 15.5px; line-height: 1.6; color: var(--p-mute); margin: 0; }
.pv-grid .pv-card p + p { margin-top: 10px; }
.pv-sec .pv-grid .ev-card h3 a { color: #fff; text-decoration: none; }
.pv-sec .pv-grid .ev-card h3 a:hover { color: var(--p-orange); text-decoration: none; }
.pv-grid .ev-card .ev-meta { font-size: 14.5px; color: rgba(247, 242, 234, 0.6); margin: 0 0 8px; }
.pv-grid .ev-card .ev-cost { font-size: 15px; font-weight: 800; color: var(--p-orange); margin: 0; }

/* --- sub-heading between blocks --- */
.pv-h3 {
  font-size: clamp(20px, 2.6vw, 26px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 44px 0 4px;
}

/* --- dark data table (fees) --- */
.pv-table-wrap {
  margin: 30px 0 0;
  overflow-x: auto;
  border: 1px solid var(--p-bd2);
  border-radius: 18px;
  background: #211b14;
}
.pv-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15.5px;
  min-width: 520px;
  /* marketing.css paints bare <table> with --card (#fff) and a 20px margin —
     neutralise both so the dark wrap shows and the light cell text stays readable */
  margin: 0;
  background: transparent;
  border-radius: 0;
}
.pv-table th,
.pv-table td {
  padding: 16px 20px;
  text-align: left;
  border-bottom: 1px solid rgba(247, 242, 234, 0.08);
}
.pv-table th {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--p-orange);
  background: rgba(247, 242, 234, 0.03);
}
.pv-table td { color: var(--p-mute); }
.pv-table td:first-child { color: #fff; font-weight: 700; }
.pv-table tr:last-child td { border-bottom: none; }

/* --- closing CTA panel --- */
.pv-cta {
  background: #211b14;
  border: 1px solid var(--p-bd2);
  border-radius: 26px;
  padding: clamp(36px, 6vw, 64px) clamp(24px, 5vw, 56px);
  text-align: center;
  max-width: 880px;
  margin: 0 auto;
}
.pv-cta .pv-h,
.pv-cta .pv-sub { margin-left: auto; margin-right: auto; }
.pv-cta .pv-ctas { justify-content: center; margin-top: 6px; }