/* ============================================================================
   Get Cortex - phone swipe deck (/get-cortex, below 576px only)
   ============================================================================
   Loaded after get-cortex.css / get-cortex-postflop.css. Everything lives inside one
   phone media query (the page's existing phone breakpoint, where the compliance bar goes
   static and the hero un-pins). Outside it the deck and the nav's overview button are
   display:none, so wider viewports are byte-identical to the 2026-09-17 long page.

   Two phone modes, chosen by an attribute landing-deck.js sets on <html>:
     (none)   deck mode - the deck is a fixed layer; the long page stays in the DOM but is
              visibility-hidden and the body is scroll-locked. Visibility (not display) so
              anchor navigation into the page still lands on its target underneath.
     reader   the long page exactly as before; the deck is hidden.
   A <noscript> block in GetCortex.cshtml forces the reader layout without JS.

   Brand tokens only (site.css --cortex-*, get-cortex.css --landing-*): Orbitron for the
   display sizes, Inter for body, the system mono stack for eyebrows and figures. The mockup's
   jade "live" chip is the page's existing red .pf-tag--live here - the brand has no green.
============================================================================ */

.pf-deck { display: none; }
.landing-nav-overview { display: none; }

@media (max-width: 575.98px) {

  /* --- Modes ------------------------------------------------------------- */
  /* A fixed layer is as wide as the layout viewport, and a phone browser widens that
     viewport to whatever overflows the document underneath (the pricing panel's tooltip
     bubbles poke out at narrow widths, other things at others) - the deck then runs off
     the right edge with the body scroll-locked. Clip horizontal overflow on the page
     wrapper so nothing under the deck can widen the viewport; `clip` (not hidden) keeps
     the wrapper from becoming a scroll container, so the body still owns the scroll. */
  .landing-page--postflop { overflow-x: clip; }
  html:not([data-landing-mode="reader"]) body.login-page { overflow: hidden; }
  html:not([data-landing-mode="reader"]) .landing-page--postflop > :not(.pf-deck) { visibility: hidden; }
  html[data-landing-mode="reader"] .pf-deck { display: none; }

  /* --- Frame ------------------------------------------------------------- */
  .pf-deck {
    position: fixed;
    inset: 0;
    z-index: 20;                 /* above the fixed nav (5) and the compliance bar (5) */
    display: flex;
    flex-direction: column;
    background: var(--cortex-bg);
    color: var(--cortex-text);
    font-family: var(--cortex-font-body);
    -webkit-font-smoothing: antialiased;
    overscroll-behavior: none;
  }

  .pf-deck-safe-top { height: env(safe-area-inset-top, 0px); min-height: 10px; flex-shrink: 0; }

  .pf-deck a { text-decoration: none; }
  /* Generic reset for the deck's own buttons, at class-level specificity (:where) so every
     component rule below (.pf-deck-tier, .pf-deck-index-row, .pf-deck-nav-btn ...) wins over
     it; a button wearing .landing-cta keeps the CTA look. */
  .pf-deck :where(button:not(.landing-cta)) { font-family: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; padding: 0; }
  .pf-deck :focus-visible { outline: 2px solid var(--cortex-cyan); outline-offset: 2px; border-radius: 8px; }

  /* --- Progress ---------------------------------------------------------- */
  .pf-deck-progress { flex-shrink: 0; padding: 6px 20px 0; display: flex; gap: 5px; }
  .pf-deck-progress button { flex-grow: 1; height: 16px; display: flex; align-items: center; }
  .pf-deck-progress span {
    display: block; width: 100%; height: 3px; border-radius: 2px;
    background: var(--landing-line-2);
    transition: background 200ms ease;
  }
  .pf-deck-progress button[data-state="spent"] span { background: color-mix(in srgb, var(--cortex-cyan) 45%, transparent); }
  .pf-deck-progress button[data-state="active"] span { background: var(--cortex-cyan); }

  /* --- Masthead ---------------------------------------------------------- */
  .pf-deck-masthead {
    height: 48px; flex-shrink: 0; padding: 0 20px;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
  }
  .pf-deck-brand,
  .pf-deck-brand:hover,
  .pf-deck-brand:focus { font-weight: 700; font-size: 15px; letter-spacing: -0.02em; color: var(--cortex-text); }
  .pf-deck-brand em { font-style: normal; color: var(--cortex-cyan); }
  .pf-deck-masthead-right { display: flex; align-items: center; gap: 4px; }
  .pf-deck-login { color: var(--cortex-text-muted); font-size: 13px; font-weight: 600; padding: 12px 8px; }
  .pf-deck-login:hover { color: var(--cortex-text); }
  .pf-deck-icon-btn {
    width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px;
    border: 1px solid var(--landing-line-2);
    display: flex; align-items: center; justify-content: center;
    color: var(--cortex-text-muted);
  }
  .pf-deck-icon-btn[hidden] { display: none; }

  /* --- Screens ----------------------------------------------------------- */
  .pf-deck-screens { flex-grow: 1; min-height: 0; position: relative; }
  .pf-deck-screen { position: absolute; inset: 0; display: none; flex-direction: column; }
  .pf-deck-screen[data-active] { display: flex; }
  .pf-deck-main {
    flex-grow: 1; min-height: 0; padding: 16px 20px 0;
    display: flex; flex-direction: column;
    overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
  }
  .pf-deck-main::-webkit-scrollbar { display: none; }

  .pf-deck-eyebrow {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--cortex-text-muted); flex-shrink: 0;
  }
  .pf-deck-head { display: flex; flex-direction: column; gap: 12px; flex-shrink: 0; margin-bottom: 18px; }

  .pf-deck-h1, .pf-deck-h2 {
    margin: 0; font-family: var(--cortex-font-brand); font-weight: 700; letter-spacing: -0.02em;
    color: var(--cortex-text); text-wrap: balance;
  }
  .pf-deck-h1 { margin-top: 14px; font-size: clamp(34px, 11vw, 46px); line-height: 0.98; }
  .pf-deck-h1 em { font-style: normal; color: var(--cortex-cyan); }
  .pf-deck-h2 { font-size: clamp(24px, 7.6vw, 30px); line-height: 1.05; }
  .pf-deck-h2--index { font-size: clamp(23px, 7.2vw, 28px); }

  .pf-deck-lede {
    margin: 18px 0 0; font-size: 15px; line-height: 1.5; color: var(--cortex-text-muted);
    max-width: 300px; text-wrap: pretty;
  }

  /* --- Footers ----------------------------------------------------------- */
  .pf-deck-foot {
    flex-shrink: 0; padding: 12px 20px calc(18px + env(safe-area-inset-bottom, 0px));
    display: flex; align-items: center; gap: 10px;
  }
  .pf-deck-cta { flex-grow: 1; justify-content: center; padding: 17px 0; border-radius: 13px; }
  .pf-deck-nav-btn {
    width: 52px; height: 52px; flex-shrink: 0; border-radius: 13px;
    border: 1px solid var(--landing-line-2);
    display: flex; align-items: center; justify-content: center; color: var(--cortex-text);
  }
  .pf-deck-nav-btn:hover { border-color: rgba(255, 255, 255, 0.25); }

  /* --- 01 The offer ------------------------------------------------------ */
  .pf-deck-media {
    flex-shrink: 0; margin: 18px 0 0; height: 150px; border-radius: 16px; overflow: hidden;
    border: 1px solid var(--landing-line-2); background: #0a0f13;
  }
  .pf-deck-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }

  .pf-deck-stat-block {
    margin-top: auto; padding-top: 18px; margin-bottom: 14px; flex-shrink: 0;
    display: flex; flex-direction: column;
  }
  .pf-deck-stat-lead {
    padding: 18px 20px; border-radius: 18px 18px 0 0;
    background: var(--cortex-cyan); color: #fff;
    display: flex; align-items: baseline; gap: 10px;
  }
  .pf-deck-stat-lead b {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 44px; font-weight: 700; letter-spacing: -0.04em; line-height: 1;
  }
  .pf-deck-stat-lead i { font-style: normal; font-size: 13px; font-weight: 600; line-height: 1.25; }
  .pf-deck-stat-row {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    background: var(--cortex-surface); border: 1px solid var(--landing-line-2); border-top: 0;
    border-radius: 0 0 18px 18px; overflow: hidden;
  }
  .pf-deck-stat-row div { padding: 13px 12px; display: flex; flex-direction: column; gap: 2px; }
  .pf-deck-stat-row div + div { border-left: 1px solid var(--landing-line-2); }
  .pf-deck-stat-row b { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; font-weight: 700; }
  .pf-deck-stat-row small { font-size: 10px; line-height: 1.25; color: var(--cortex-text-muted); }

  /* --- 02 What you get --------------------------------------------------- */
  .pf-deck-media--features { margin: 0 0 18px; height: 130px; }
  .pf-deck-stack { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; padding-bottom: 8px; }
  .pf-deck-item {
    border-radius: 13px; background: var(--cortex-surface); overflow: hidden;
    border: 1px solid var(--landing-line-2); transition: border-color 160ms ease;
  }
  .pf-deck-item[open] { border-color: var(--cortex-cyan); }
  .pf-deck-item-head {
    display: flex; align-items: center; gap: 12px; padding: 14px; cursor: pointer;
    list-style: none; text-align: left;
  }
  .pf-deck-item-head::-webkit-details-marker { display: none; }
  .pf-deck-item-num {
    flex-shrink: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px; font-weight: 700; color: var(--cortex-text-muted);
  }
  .pf-deck-item[open] .pf-deck-item-num { color: var(--cortex-cyan); }
  .pf-deck-item-title { flex-grow: 1; font-size: 14px; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; color: var(--cortex-text); }
  .pf-deck .pf-tag { margin: 0; flex-shrink: 0; font-size: 0.62rem; padding: 3px 8px; }
  .pf-deck-item-body { margin: 0; padding: 0 14px 15px 46px; font-size: 13px; line-height: 1.5; color: var(--cortex-text-muted); }

  /* --- 03 Pricing -------------------------------------------------------- */
  .pf-deck-pricing { display: flex; flex-direction: column; flex-grow: 1; min-height: 0; }
  .pf-deck-pricing[data-cycle="annual"] [data-deck-cycle-block="monthly"],
  .pf-deck-pricing[data-cycle="monthly"] [data-deck-cycle-block="annual"] { display: none; }

  .pf-deck-segmented {
    display: flex; padding: 3px; border-radius: 12px; flex-shrink: 0; margin-bottom: 14px;
    background: var(--cortex-surface); border: 1px solid var(--landing-line-2);
  }
  .pf-deck-segmented button {
    flex-grow: 1; padding: 11px 4px; border-radius: 10px; font-size: 12px; font-weight: 600;
    letter-spacing: -0.01em; color: var(--cortex-text-muted);
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap;
    transition: background 160ms ease, color 160ms ease;
  }
  .pf-deck-segmented button[aria-pressed="true"] { background: var(--cortex-cyan); color: #fff; }
  .pf-deck-seg-chip {
    font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    padding: 2px 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); white-space: nowrap;
  }
  .pf-deck-seg-chip--referral { background: rgba(212, 175, 55, 0.2); color: var(--cortex-gold-bright); }
  .pf-deck-segmented button[aria-pressed="true"] .pf-deck-seg-chip--referral { color: #fff; }

  .pf-deck-tier {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 14px; border-radius: 13px; text-align: left;
    background: var(--cortex-surface); border: 1px solid var(--landing-line-2);
    transition: border-color 160ms ease, background 160ms ease;
  }
  .pf-deck-tier[aria-pressed="true"] { background: rgba(255, 255, 255, 0.05); border-color: var(--cortex-cyan); }
  .pf-deck-tier-id { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; min-width: 0; }
  .pf-deck-tier-name {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px; font-weight: 700; letter-spacing: 0.14em; color: var(--cortex-text-muted);
  }
  .pf-deck-tier[aria-pressed="true"] .pf-deck-tier-name { color: var(--cortex-cyan); }
  .pf-deck-tier-tagline { font-size: 12px; color: var(--cortex-text-muted); }
  .pf-deck-tier-price { display: flex; align-items: baseline; gap: 3px; flex-shrink: 0; white-space: nowrap; }
  .pf-deck-tier-price [data-deck-cycle-block] { display: inline-flex; align-items: baseline; gap: 3px; }
  .pf-deck-tier-price b { font-family: var(--cortex-font-brand); font-size: 17px; font-weight: 700; letter-spacing: -0.02em; color: var(--cortex-text); }
  .pf-deck-tier-price small { font-size: 11px; color: var(--cortex-text-muted); }
  .pf-deck-tier-price s { font-size: 12px; color: var(--cortex-text-muted); margin-right: 3px; }

  .pf-deck-detail {
    margin-top: auto; padding-top: 14px; margin-bottom: 6px; flex-shrink: 0;
    display: flex; flex-direction: column; gap: 10px;
  }
  .pf-deck-detail-card {
    padding: 14px 16px; border-radius: 16px;
    background: var(--cortex-surface); border: 1px solid rgba(255, 255, 255, 0.16);
    display: flex; flex-direction: column; gap: 10px;
  }
  .pf-deck-detail-card[hidden] { display: none; }
  .pf-deck-detail-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
  .pf-deck-detail-head b { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; }
  .pf-deck-detail-head span { font-size: 12px; color: var(--cortex-text-muted); }
  .pf-deck-ticks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }
  .pf-deck-ticks li { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; line-height: 1.35; color: var(--cortex-text); }
  .pf-deck-ticks svg { flex-shrink: 0; margin-top: 3px; color: var(--cortex-cyan); }
  .pf-deck-fineprint { margin: 0; font-size: 11px; line-height: 1.45; color: var(--cortex-text-muted); }
  .pf-deck-compare { font-size: 12px; font-weight: 600; color: var(--cortex-text-muted); }
  .pf-deck-compare:hover { color: var(--cortex-text); }

  /* --- 04 Index ---------------------------------------------------------- */
  .pf-deck-index {
    display: flex; flex-direction: column; flex-shrink: 0;
    border-radius: 14px; overflow: hidden;
    border: 1px solid var(--landing-line-2); background: var(--cortex-surface);
  }
  .pf-deck-index-row {
    display: flex; align-items: center; gap: 12px; padding: 14px;
    border-bottom: 1px solid var(--landing-line-1); color: var(--cortex-text); text-align: left; width: 100%;
  }
  .pf-deck-index-row:last-child { border-bottom: 0; }
  button.pf-deck-index-row { font: inherit; }
  .pf-deck-index-row:hover { background: rgba(255, 255, 255, 0.04); color: var(--cortex-text); }
  .pf-deck-index-row--featured { background: rgba(255, 255, 255, 0.04); }
  .pf-deck-index-n {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px; font-weight: 700; color: var(--cortex-text-muted); width: 18px; flex-shrink: 0;
  }
  .pf-deck-index-row--featured .pf-deck-index-n { color: var(--cortex-cyan); }
  .pf-deck-index-label { flex-grow: 1; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
  .pf-deck-index-meta { font-size: 12px; color: var(--cortex-text-muted); white-space: nowrap; }
  .pf-deck-index-meta--accent { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--cortex-cyan); }
  .pf-deck-index-chev { color: var(--cortex-text-muted); flex-shrink: 0; }
  .pf-deck-index-chev--accent { color: var(--cortex-cyan); }

  .pf-deck-legal { margin-top: auto; padding-top: 16px; margin-bottom: 4px; display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; }
  .pf-deck-legal-links { display: flex; flex-wrap: wrap; gap: 6px 14px; }
  .pf-deck-legal-links a { color: var(--cortex-text-muted); font-size: 12px; }
  .pf-deck-legal p { margin: 0; font-size: 10px; line-height: 1.45; color: var(--cortex-text-muted); opacity: 0.85; }

  /* --- Reader mode: the way back to the deck ----------------------------- */
  .landing-nav-overview {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 10px;
    border: 1px solid var(--landing-line-2); background: transparent;
    color: var(--cortex-text-muted); cursor: pointer; padding: 0;
  }
  .landing-nav-overview:hover { color: var(--cortex-text); }

  @media (prefers-reduced-motion: reduce) {
    .pf-deck * { transition: none !important; }
  }
}
