/* Vortex: Homepage (index, index-signed-in), then the pricing block (.v2p) that used to sit inside <body>.
   Moved verbatim from inline <style> blocks in step 1 of the redesign. */
/* Live-only states: the live site renders these, no page in the static copy does.
   Keep them, and check them on _states.html (dev only) after any shared restyle:
   .v2p-unavailable, .v2p-plugin-kind (pricing states). */

    /* ========================= */
    /*  HERO SECTION             */
    /* ========================= */
    /* Centered hero: the pitch and one action, under a single controlled light from the top. */
    .hero {
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: min(760px, 100svh);
      padding: calc(var(--nav-h) + 64px) 24px 96px;
      text-align: center;
      background:
        radial-gradient(55% 60% at 50% 0%, rgba(100, 200, 255, 0.12), transparent 70%),
        linear-gradient(180deg, var(--bg-raised), var(--bg) 78%);
      border-bottom: 1px solid var(--line);
    }

    .hero-inner { width: 100%; max-width: 960px; margin: 0 auto; }

    .hero-copy { display: flex; flex-direction: column; align-items: center; }

    .hero-title {
      font-family: var(--font-display);
      font-size: calc(clamp(3.25rem, 8vw, 7rem) * var(--display-scale));
      font-weight: 700;
      font-stretch: var(--display-stretch);
      letter-spacing: var(--display-tracking);
      line-height: 0.98;
      margin: 0 0 24px;
      color: var(--text);
    }

    .hero-tagline {
      font-size: 1.25rem;
      line-height: 1.5;
      color: var(--text-2);
      max-width: 36ch;
      margin: 0 auto 36px;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 16px 28px;
    }

    .hero-actions .btn-primary-glow { padding: 15px 26px; font-size: 1rem; }

    .hero-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 0;
      color: var(--text);
      font-weight: 600;
      text-decoration: none;
    }

    .hero-meta { margin: 28px 0 0; }
    /* A quiet way into the community: text link, Discord mark, underline on hover. */
    .hero-discord {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 6px 0;
      color: var(--text-2);
      font-size: 0.9375rem;
      font-weight: 500;
    }
    .hero-discord .bi { color: #5865F2; font-size: 1.05em; }

    @media (max-width: 900px) {
      .hero {
        min-height: 0;
        padding: calc(var(--nav-h) + 56px) 16px 72px;
      }
      .hero-tagline { font-size: 1.125rem; }
    }

    /* ========================= */
    /*  SECTIONS COMMON          */
    /* ========================= */
    .section {
      position: relative;
      z-index: 1;
      padding: 100px 24px;
    }

    .section-title {
      text-align: center;
      font-size: 2.25rem;
      font-weight: 700;
      margin-bottom: 16px;
      color: var(--vortex-text);
    }

    .section-subtitle {
      text-align: center;
      font-size: 1rem;
      color: var(--vortex-muted);
      margin-bottom: 64px;
      max-width: 560px;
      margin-left: auto;
      margin-right: auto;
      line-height: 1.6;
    }

    /* ========================= */
    /*  FEATURES: ACTIVITY TILES */
    /* ========================= */
    /* Five jobs as tiles, chosen by the owner in the design lab: PvP and PvM large, the other three
       smaller. Each whole tile links to the plugin that does the job, so the hover state means something. */
    .activity { padding: 128px 24px; }

    .activity-inner { max-width: 1200px; margin: 0 auto; display: grid; gap: 40px; }

    .activity-head { text-align: center; }
    .activity-head .section-title {
      margin: 0 0 16px;
      font-size: calc(clamp(2.25rem, 4vw, 3.25rem) * var(--display-scale));
      font-weight: 700;
    }
    .activity-lede { margin: 0 auto; max-width: 30ch; color: var(--text-2); font-size: 1.0625rem; }

    .activity-list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 12px;
    }
    .activity-item { grid-column: span 2; }
    .activity-item:nth-child(-n+2) { grid-column: span 3; }

    .activity-link {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 12px;
      height: 100%;
      padding: 28px;
      color: var(--text);
      text-decoration: none;
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: var(--radius-panel);
      transition: background-color var(--dur-hover) ease, border-color var(--dur-hover) ease;
    }
    .activity-name {
      font-family: var(--font-display);
      font-size: calc(2.75rem * var(--display-scale));
      font-weight: 700;
      letter-spacing: var(--display-tracking);
      line-height: 1;
    }
    .activity-item:nth-child(-n+2) .activity-name { font-size: calc(4rem * var(--display-scale)); }
    .activity-desc { color: var(--text-2); line-height: 1.55; }
    .activity-plugin {
      display: flex;
      align-items: baseline;
      gap: 8px;
      margin-top: auto;
      padding-top: 8px;
      font-weight: 600;
      font-size: 0.9375rem;
    }
    .activity-access { font-weight: 500; font-size: 0.8125rem; color: var(--text-2); }
    .activity-access.is-premium { color: var(--gold); }
    .activity-arrow {
      position: absolute;
      right: 24px;
      top: 28px;
      color: var(--text-2);
      transition: transform var(--dur-hover) var(--ease-out), color var(--dur-hover) ease;
    }
    @media (hover: hover) and (pointer: fine) {
      .activity-link:hover { background: var(--surface-2); border-color: var(--line-strong); }
      .activity-link:hover .activity-arrow { color: var(--cyan); transform: translateX(4px); }
    }

    .activity-foot { margin: 0; text-align: center; color: var(--text-2); font-size: 0.9375rem; }
    .activity-foot a { margin-left: 6px; color: var(--text); font-weight: 600; text-decoration: none; white-space: nowrap; }

    @media (max-width: 900px) {
      .activity { padding: 80px 16px; }
      .activity-list { grid-template-columns: minmax(0, 1fr); }
      .activity-item, .activity-item:nth-child(-n+2) { grid-column: 1; }
      .activity-item:nth-child(-n+2) .activity-name { font-size: calc(2.75rem * var(--display-scale)); }
      .activity-link { padding: 24px; }
    }

    /* ========================= */
    /*  PROOF: LOOT + GP COUNTER */
    /* ========================= */
    /* The only warm place on the page: real loot under a low gold light. The GP total is the
       headline; the strip of real webhook drops sits right under it. */
    .proof {
      position: relative;
      padding: 120px 0 96px;
      background:
        radial-gradient(70% 70% at 50% 100%, rgba(242, 196, 107, 0.07), transparent 70%),
        linear-gradient(180deg, var(--bg), #0E0D0B 55%, var(--bg));
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }

    .proof-head { max-width: 1000px; margin: 0 auto 48px; padding: 0 24px; text-align: center; }

    .proof-title {
      margin: 0;
      font-family: var(--font-display);
      font-weight: 700;
      letter-spacing: var(--display-tracking);
      line-height: 1;
      color: var(--text);
    }
    .proof-value {
      display: block;
      font-size: calc(clamp(2.25rem, 8vw, 6rem) * var(--display-scale));
      color: var(--gold);
      overflow-wrap: anywhere;
    }
    .proof-title-rest {
      display: block;
      margin-top: 12px;
      font-size: calc(clamp(1.5rem, 3vw, 2.25rem) * var(--display-scale));
    }
    .proof-lede { margin: 20px auto 0; max-width: 46ch; color: var(--text-2); font-size: 1.0625rem; }

    .loot-marquee-outer {
      overflow: hidden;
      cursor: grab;
      touch-action: pan-y;
      -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
      mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
    }
    .loot-marquee-outer.dragging { cursor: grabbing; }
    .loot-marquee-outer:focus-visible { outline-offset: -2px; }

    .loot-marquee-track {
      display: flex;
      gap: 16px;
      width: max-content;
      will-change: transform;
      user-select: none;
      -webkit-user-select: none;
    }

    .loot-card {
      flex-shrink: 0;
      border-radius: var(--radius-panel);
      overflow: hidden;
      border: 1px solid var(--line-strong);
      background: #313338;
    }
    .loot-card img {
      display: block;
      height: 320px;
      width: auto;
      -webkit-user-drag: none;
    }

    .proof-controls { display: flex; justify-content: center; margin-top: 24px; }
    .loot-pause {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 40px;
      padding: 8px 14px;
      background: transparent;
      border: 1px solid var(--line-strong);
      border-radius: var(--radius-control);
      color: var(--text-2);
      font: inherit;
      font-size: 0.875rem;
      font-weight: 600;
      cursor: pointer;
      transition: color var(--dur-hover) ease, border-color var(--dur-hover) ease;
    }

    @media (max-width: 768px) {
      .proof { padding: 80px 0 72px; }
      .loot-card img { height: 240px; }
    }

  /* ======================================================================
     INSTALL
     A flat utility section: the video (with a poster frame) beside three numbered Windows
     steps. Mac steps sit in a disclosure, so Windows visitors don't have to read past them.
     ====================================================================== */
  .install { padding: 128px 24px; border-top: 1px solid var(--line); }
  .install-head { max-width: 1080px; margin: 0 auto 48px; }
  .install-head .section-title {
    margin: 0 0 12px;
    text-align: left;
    font-size: calc(clamp(2.25rem, 4vw, 3.25rem) * var(--display-scale));
    text-wrap: balance;
  }
  .install-head .section-subtitle { margin: 0; max-width: 56ch; text-align: left; }

  .install-main {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 56px;
    align-items: start;
    max-width: 1080px;
    margin: 0 auto;
  }

  .media-video-wrap {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #000;
    border: 1px solid var(--line);
    border-radius: var(--radius-panel);
  }
  .media-video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }

  .install-os {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-2);
  }

  .install-steps { list-style: none; margin: 0; padding: 0; }
  .install-steps li {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 16px;
    padding: 20px 0;
    border-top: 1px solid var(--line);
  }
  /* Oversized, faint numerals (owner's pick). They are decoration: the <ol> carries the order. */
  .install-steps .step-num {
    font-family: var(--font-display);
    font-size: calc(4.75rem * var(--display-scale));
    font-weight: 600;
    line-height: 0.85;
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, 0.12);
  }
  .install-steps .step-text strong { display: block; margin-bottom: 4px; font-size: 1.0625rem; font-weight: 600; color: var(--text); }
  .install-steps .step-text span { display: block; font-size: 0.9375rem; line-height: 1.55; color: var(--text-2); }

  .mac-install {
    max-width: 1080px;
    margin: 56px auto 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  .mac-install-title {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 0;
    list-style: none;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    transition: color var(--dur-hover) ease;
  }
  .mac-install-title::-webkit-details-marker { display: none; }
  .mac-chevron { margin-left: auto; color: var(--text-2); transition: transform var(--dur-menu) var(--ease-out), color var(--dur-hover) ease; }
  .mac-install[open] .mac-chevron { transform: rotate(180deg); }
  /* The steps slide open and closed with the chevron (Chrome and Edge; elsewhere they snap). */
  @supports (interpolate-size: allow-keywords) {
    @media (prefers-reduced-motion: no-preference) {
      .mac-install { interpolate-size: allow-keywords; }
      .mac-install::details-content {
        block-size: 0;
        opacity: 0;
        overflow-y: clip;
        transition: block-size 260ms var(--ease-out), opacity 200ms ease, content-visibility 260ms allow-discrete;
      }
      .mac-install[open]::details-content { block-size: auto; opacity: 1; }
    }
  }
  @media (hover: hover) and (pointer: fine) {
    .mac-install-title:hover, .mac-install-title:hover .mac-chevron { color: var(--cyan); }
  }

  .mac-install-body {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-areas: "steps jagex" "steps req";
    grid-template-rows: auto 1fr;
    column-gap: 56px;
    padding-bottom: 32px;
  }
  .mac-install-body .install-steps { grid-area: steps; }
  .mac-jagex { grid-area: jagex; padding-top: 20px; border-top: 1px solid var(--line); }
  .mac-jagex-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-weight: 600; color: var(--text); }
  .mac-jagex-head .bi { color: var(--cyan); }
  .mac-jagex p { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--text-2); }
  .mac-jagex strong { font-weight: 600; color: var(--text); }
  .mac-install-req { grid-area: req; margin: 16px 0 0; font-size: 0.8125rem; color: var(--text-2); }

  @media (max-width: 880px) {
    .install { padding: 80px 16px; }
    .install-head { margin-bottom: 32px; }
    .install-main { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .mac-install { margin-top: 40px; }
    .mac-install-body { grid-template-columns: minmax(0, 1fr); grid-template-areas: "steps" "jagex" "req"; }
  }

  /* ======================================================================
     DOWNLOAD WINDOW
     A native <dialog>: Escape, focus and the inert page behind it come from the browser.
     The dialog itself is the full-screen layer, so a click on it (not on the panel) is a
     click outside and closes it.
     ====================================================================== */
  .dl-dialog {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 16px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: transparent;
    border: 0;
    color: var(--text);
  }
  .dl-dialog[open] { display: flex; }
  .dl-dialog::backdrop { background: rgba(5, 6, 9, 0.72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
  .dl-dialog [hidden] { display: none !important; }
  html:has(.dl-dialog[open]) { overflow: hidden; }

  /* Wide panel (owner's pick): Windows and macOS side by side when both are shown;
     a group on its own, and everything else, spans the full width. */
  .dl-panel {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 32px;
    width: min(100%, 760px);
    margin: auto;
    padding: 32px;
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-panel);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
  }
  .dl-panel > :not(.dl-group), .dl-panel:has(.dl-group[hidden]) .dl-group { grid-column: 1 / -1; }
  @media (max-width: 640px) {
    .dl-panel { grid-template-columns: minmax(0, 1fr); }
  }
  @media (prefers-reduced-motion: no-preference) {
    .dl-dialog[open] .dl-panel { animation: dl-in var(--dur-modal) var(--ease-out); }
    .dl-dialog[open]::backdrop { animation: dl-fade var(--dur-modal) ease; }
  }
  @keyframes dl-in { from { opacity: 0; transform: scale(0.97); } }
  @keyframes dl-fade { from { opacity: 0; } }

  .dl-close {
    position: absolute;
    top: 8px;
    right: 8px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: var(--radius-control);
    color: var(--text-2);
    font-size: 1rem;
    cursor: pointer;
    transition: color var(--dur-hover) ease, background-color var(--dur-hover) ease;
  }
  @media (hover: hover) and (pointer: fine) {
    .dl-close:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }
  }

  /* The title takes focus when the window opens, so the first Tab lands on a control. */
  .dl-title { margin: 0 0 6px; font-size: calc(2rem * var(--display-scale)); font-weight: 700; color: var(--text); }
  .dl-title:focus { outline: none; }
  .dl-hint { margin: 0 0 24px; font-size: 0.875rem; color: var(--text-2); }

  .dl-group { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
  .dl-group-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-bottom: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-2);
  }
  .dl-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
  .dl-btn {
    display: inline-flex;
    flex: 1 1 150px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 12px 20px;
    background: transparent;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-control);
    color: var(--text);
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
  }
  .dl-btn.is-recommended { background: var(--cyan); border-color: transparent; color: var(--cyan-ink); }
  .dl-req { margin: 12px 0 0; font-size: 0.8125rem; color: var(--text-2); }
  .dl-chip-help { max-width: 40ch; margin: 8px auto 0; font-size: 0.8125rem; line-height: 1.5; color: var(--text-2); }
  .dl-chip-help strong { font-weight: 600; color: var(--text); }

  /* Phones and tablets: Vortex can't run here, so say so instead of recommending a build. */
  .dl-phone { margin-top: 4px; }
  .dl-phone p { margin: 0 0 20px; line-height: 1.6; color: var(--text-2); }
  .dl-phone p strong { display: block; margin-bottom: 4px; font-size: 1.0625rem; font-weight: 600; color: var(--text); }
  .dl-phone .dl-copy { width: 100%; }

  /* After a build is picked: what happens next. */
  .dl-next {
    margin-top: 20px;
    padding: 16px 18px;
    text-align: left;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
  }
  .dl-next p { margin: 0; font-size: 0.875rem; line-height: 1.55; color: var(--text-2); }
  .dl-next .dl-next-title { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-size: 0.9375rem; font-weight: 600; color: var(--text); }
  .dl-next-title .bi { color: var(--ok); }
  .dl-next .dl-next-mac, .dl-next.is-mac .dl-next-win { display: none; }
  /* "What happens next" and a platform shown on request ease in instead of popping up. */
  .dl-next, .dl-dialog .dl-group { transition: opacity 220ms var(--ease-out), translate 220ms var(--ease-out); }
  @starting-style {
    .dl-next, .dl-dialog .dl-group { opacity: 0; translate: 0 6px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .dl-next, .dl-dialog .dl-group { translate: none; transition-duration: 120ms; }
    @starting-style { .dl-next, .dl-dialog .dl-group { translate: none; } }
  }
  .dl-next.is-mac .dl-next-mac { display: block; }

  .dl-links { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 24px; margin-top: 12px; }
  .modal-guide-link {
    display: inline-block;
    padding: 12px 0;
    background-color: transparent;
    border: 0;
    color: var(--text-2);
    font: inherit;
    font-size: 0.875rem;
    line-height: 20px;
    cursor: pointer;
  }

  @media (max-width: 480px) {
    .dl-panel { padding: 28px 20px 20px; }
  }

    /* ========================= */
    /*  RESPONSIVE               */
    /* ========================= */
    @media (max-width: 768px) {
      .section {
        padding: 64px 16px;
      }
    }

    @media (max-width: 480px) {
      .section-title {
        font-size: 1.75rem;
      }
    }


  /* ======================================================================
     PRICING: ONE BOARD
     Free and VIP share one panel split by a hairline; VIP carries the only gold line.
     Single plugins, ways to pay and ordering on Discord follow as quiet rows.
     ====================================================================== */
  .v2p { --v2-gold: var(--gold); --v2-line: var(--line); padding: 128px 24px; }

  .v2p-tiers {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
    max-width: 1080px;
    margin: 0 auto;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-panel);
    overflow: hidden;
  }
  .v2p-card { position: relative; display: flex; flex-direction: column; padding: 40px; }
  .v2p-card + .v2p-card { border-left: 1px solid var(--line); }
  .v2p-vip {
    background: linear-gradient(180deg, rgba(242, 196, 107, 0.05), transparent 45%);
    box-shadow: inset 0 2px 0 var(--gold);
  }

  .v2p-tier-name {
    margin: 0 0 6px;
    font-size: calc(2.5rem * var(--display-scale));
    font-weight: 700;
    letter-spacing: var(--display-tracking);
    color: var(--text);
  }
  .v2p-lede { margin: 0 0 24px; color: var(--text-2); }
  .v2p-amount {
    font-size: calc(3.5rem * var(--display-scale));
    font-weight: 700;
    line-height: 1;
    color: var(--text);
  }
  .v2p-period { margin-left: 6px; color: var(--text-2); font-size: 1rem; font-weight: 500; }

  .v2p-list { list-style: none; margin: 28px 0; padding: 0; display: grid; gap: 10px; }
  .v2p-list li { position: relative; padding-left: 22px; color: #C5CAD3; }
  .v2p-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: calc(0.8em - 1px);
    width: 10px;
    height: 2px;
    border-radius: 1px;
    background: var(--text-2);
  }
  .v2p-vip .v2p-list li::before { background: var(--gold); }
  .v2p-list li strong { color: var(--text); font-weight: 600; }
  .v2p-spacer { flex: 1; }
  /* Free's button follows its list; the VIP plans sit at the bottom of their column. */
  .v2p-card:not(.v2p-vip) .v2p-spacer { display: none; }

  .v2p-plans { display: grid; margin-top: auto; border-top: 1px solid var(--line); }
  .v2p-plan {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "label action" "price action" "badge action";
    align-items: center;
    column-gap: 24px;
    padding: 20px 0;
    border-bottom: 1px solid var(--line);
  }
  .v2p-plan:last-child { border-bottom: 0; padding-bottom: 0; }
  .v2p-plan-label {
    grid-area: label;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-2);
  }
  .v2p-plan > div { grid-area: price; margin-top: 4px; }
  .v2p-plan .v2p-amount { font-size: calc(2.25rem * var(--display-scale)); }
  .v2p-badge { grid-area: badge; margin-top: 4px; color: var(--gold); font-size: 0.875rem; font-weight: 600; }
  .v2p-plan > .v2p-btn, .v2p-plan > form { grid-area: action; }

  .v2p-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
    padding: 12px 18px; border-radius: var(--radius-control); font-weight: 600; font-size: 0.9375rem; cursor: pointer;
    text-decoration: none; transition: background-color var(--dur-hover) ease, border-color var(--dur-hover) ease, transform var(--dur-press) var(--ease-out);
    border: 1px solid transparent;
  }
  .v2p-plan .v2p-btn { width: auto; white-space: nowrap; }
  /* Actions are cyan. Gold marks value, not buttons; Discord purple is not a button colour. */
  .v2p-btn-primary, .v2p-btn-gold, .v2p-btn-discord { background: var(--cyan); color: var(--cyan-ink); }
  .v2p-btn-ghost { background: transparent; border-color: var(--line-strong); color: var(--text); }
  .v2p form { margin: 0; }

  /* Single plugins: split panel (picked in the design lab). Title and explainer on the left,
     the plugins as rows on the right with their buy button at the end of each row. */
  .v2p-plugins {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: 48px;
    align-items: start;
    max-width: 1080px;
    margin: 64px auto 0;
  }
  .v2p-plugins-head h3 { margin: 0; font-size: calc(2.25rem * var(--display-scale)); font-weight: 700; color: var(--text); }
  .v2p-plugins-lede { margin: 12px 0 16px; max-width: 30ch; color: var(--text-2); font-size: 1rem; }
  .v2p-plugins-all { display: inline-flex; align-items: center; gap: 6px; color: var(--text); font-size: 0.9375rem; font-weight: 600; white-space: nowrap; }
  .v2p-plugin-grid { display: grid; border-top: 1px solid var(--line); }
  .v2p-plugin {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name cta" "blurb cta" "plans cta";
    gap: 4px 24px;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid var(--line);
  }
  .v2p-plugin-head { grid-area: name; }
  .v2p-plugin-head h4 { margin: 0; font-size: 1.375rem; font-weight: 700; color: var(--text); }
  .v2p-plugin-blurb { grid-area: blurb; margin: 0; color: var(--text-2); font-size: 0.9375rem; }
  .v2p-plugin-plans { grid-area: plans; list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
  .v2p-plugin-plans li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
  .v2p-plugin-price { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
  .v2p-plugin-sessions { color: var(--text-2); font-size: 0.8125rem; }
  .v2p-plugin-cta { grid-area: cta; align-self: center; width: auto; margin: 0; white-space: nowrap; }

  /* Ways to pay and ordering on Discord. */
  .v2p-pay {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 16px 24px;
    align-items: start;
    max-width: 1080px;
    margin: 64px auto 0;
    padding-top: 28px;
    border-top: 1px solid var(--line);
  }
  .v2p-pay-title {
    margin: 4px 0 0;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-2);
  }
  .v2p-pay-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 28px; }
  .v2p-pay-list li { display: inline-flex; align-items: center; gap: 8px; color: var(--text); font-weight: 500; }
  .v2p-pay-list img { width: 20px; height: 20px; filter: grayscale(1) brightness(1.5); opacity: 0.85; }
  .v2p-pay-list i { color: var(--text-2); font-size: 1.1rem; }
  .v2p-pay-note { color: var(--text-2); font-size: 0.8125rem; }
  .v2p-pay-list .is-instant .v2p-pay-note { color: var(--ok); }

  .v2p-order {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    max-width: 1080px;
    margin: 28px auto 0;
    padding: 24px 28px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-panel);
  }
  .v2p-order p { margin: 0; max-width: 62ch; color: var(--text-2); }
  .v2p-order .btn-discord { flex-shrink: 0; }

  .v2p-fine { max-width: 780px; margin: 40px auto 0; text-align: center; color: var(--text-2); font-size: 0.8125rem; line-height: 1.65; }
  .v2p-fine a { color: var(--text); }

  /* Live-only states. */
  .v2p-plugin-kind { font-size: 0.8125rem; color: var(--text-2); margin: 8px 0 0; }
  .v2p-unavailable { max-width: 560px; margin: 0 auto; text-align: center; color: var(--text-2); padding: 30px; border: 1px dashed var(--line-strong); border-radius: var(--radius-panel); }

  @media (max-width: 880px) {
    .v2p { padding: 80px 16px; }
    .v2p-tiers { grid-template-columns: minmax(0, 1fr); }
    .v2p-card { padding: 28px 20px; }
    .v2p-card + .v2p-card { border-left: 0; border-top: 1px solid var(--line); }
    .v2p-plugins { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .v2p-plugin { grid-template-columns: minmax(0, 1fr); grid-template-areas: "name" "blurb" "plans" "cta"; }
    .v2p-plugin-cta { justify-self: start; margin-top: 8px; }
    .v2p-pay { grid-template-columns: minmax(0, 1fr); }
    .v2p-order { flex-direction: column; align-items: flex-start; }
  }
  @media (max-width: 420px) {
    .v2p-plan { grid-template-areas: "label" "price" "badge" "action"; grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
    .v2p-plan .v2p-btn { width: 100%; margin-top: 12px; }
  }


/* ======================================================================
   MORE ALIVE (owner's request, after looking at bot-client.com)
   A living hero, a live figure, a colour per activity and a stronger light in every section.
   Cyan still means action and gold still means value; the activity colours live only on the
   feature tiles. Every motion is quiet, stops off screen, and is off under reduced motion.
   ====================================================================== */

/* ---- Hero: the ambience canvas behind the copy. Its light is in "one continuous page" below. */
.hero-ambience { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }

/* The live figure: real data from the GP counter, and a way down to the loot it counts. */
.hero-live {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
  padding: 7px 14px 7px 12px;
  background: rgba(11, 13, 18, 0.55);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-2);
  text-decoration: none;
  transition: border-color var(--dur-hover) ease, color var(--dur-hover) ease;
}
.hero-live-value { font-weight: 600; color: var(--gold); }
.hero-live-dot { position: relative; flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
@media (prefers-reduced-motion: no-preference) {
  .hero-live-dot::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--ok);
    animation: live-ping 2.4s var(--ease-out) infinite;
  }
}
@keyframes live-ping { 0% { transform: scale(1); opacity: 0.6; } 70%, 100% { transform: scale(2.8); opacity: 0; } }
@media (hover: hover) and (pointer: fine) {
  .hero-live:hover { border-color: var(--gold-line); color: var(--text); }
}

/* The hero plays in once: the figure, title, line and actions rise in turn. */
@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * { animation: hero-rise 700ms var(--ease-out) both; }
  .hero-copy > :nth-child(2) { animation-delay: 80ms; }
  .hero-copy > :nth-child(3) { animation-delay: 160ms; }
  .hero-copy > :nth-child(4) { animation-delay: 240ms; }
  .hero-copy > :nth-child(5) { animation-delay: 320ms; }
  .hero-ambience { animation: hero-fade 1600ms ease both; }
}
@keyframes hero-rise { from { opacity: 0; translate: 0 16px; } }
@keyframes hero-fade { from { opacity: 0; } }

/* ---- Activity tiles: each job has its own colour, on a game-like badge and a light in its corner. */
.activity-list { --octagon: polygon(29% 0, 71% 0, 100% 29%, 100% 71%, 71% 100%, 29% 100%, 0 71%, 0 29%); }
.activity-item.is-pvp { --act: 242, 92, 92; }
.activity-item.is-pvm { --act: 162, 129, 255; }
.activity-item.is-skilling { --act: 82, 210, 115; }
.activity-item.is-quests { --act: 232, 108, 210; }
.activity-item.is-travel { --act: 242, 147, 74; }
.activity-link { isolation: isolate; overflow: hidden; }
.activity-link::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(70% 90% at 100% 0%, rgba(var(--act), 0.16), transparent 65%);
  opacity: 0.7;
  transition: opacity var(--dur-hover) ease;
}
.activity-badge {
  position: relative;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  clip-path: var(--octagon);
  background: rgba(var(--act), 0.55);
}
.activity-badge::before {
  content: '';
  position: absolute;
  inset: 1.5px;
  clip-path: var(--octagon);
  background: linear-gradient(160deg, rgba(var(--act), 0.24), rgba(var(--act), 0.06)), var(--surface);
}
.activity-badge .bi { position: relative; font-size: 1.375rem; color: rgb(var(--act)); }
.activity-item:nth-child(-n+2) .activity-badge { width: 60px; height: 60px; }
.activity-item:nth-child(-n+2) .activity-badge .bi { font-size: 1.625rem; }
.activity-access { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.02em; }
@media (hover: hover) and (pointer: fine) {
  .activity-link:hover { border-color: rgba(var(--act), 0.45); }
  .activity-link:hover::before { opacity: 1; }
  .activity-link:hover .activity-arrow { color: rgb(var(--act)); }
}

/* ---- One continuous page (owner's request): no rules between sections, and no section paints its
   own background. Each section's light is a ::before on one shared layer behind the whole page; it
   reaches 240px past the section's edges and fades out well inside that, so lights overlap across
   boundaries and none is ever cut off. Cyan where you act, gold where there's value. */
#main { position: relative; isolation: isolate; }
#main > :is(.hero, .section) { position: relative; z-index: auto; overflow: visible; background: none; border-top: 0; border-bottom: 0; }
#main > :is(.hero, .section)::before {
  content: '';
  position: absolute;
  top: -240px;
  right: 0;
  bottom: -240px;
  left: 0;
  z-index: -1;
  pointer-events: none;
}
/* The hero starts the page, so its layer starts at the top and only reaches down. */
#main > .hero::before {
  top: 0;
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(100, 200, 255, 0.2), transparent 70%),
    radial-gradient(45% 26% at 50% 76%, rgba(242, 196, 107, 0.08), transparent 70%),
    linear-gradient(180deg, rgba(17, 20, 27, 0.95), rgba(17, 20, 27, 0) 72%);
}
#main > .proof::before {
  background:
    radial-gradient(70% 34% at 50% 70%, rgba(242, 196, 107, 0.14), transparent 70%),
    radial-gradient(40% 22% at 50% 28%, rgba(242, 196, 107, 0.08), transparent 70%),
    linear-gradient(180deg, rgba(14, 13, 11, 0), rgba(14, 13, 11, 0.85) 35%, rgba(14, 13, 11, 0.85) 65%, rgba(14, 13, 11, 0));
}
#main > .activity::before { background: radial-gradient(50% 26% at 50% 24%, rgba(100, 200, 255, 0.09), transparent 70%); }
#main > .v2p::before {
  background:
    radial-gradient(45% 30% at 68% 40%, rgba(242, 196, 107, 0.08), transparent 70%),
    radial-gradient(40% 28% at 20% 30%, rgba(100, 200, 255, 0.05), transparent 70%);
}
#main > .install::before { background: radial-gradient(45% 30% at 15% 28%, rgba(100, 200, 255, 0.07), transparent 70%); }