/* ============================================================================
   Get Cortex — postflop marketing sections (/get-cortex, released state only)
   ============================================================================
   Loaded on top of get-cortex.css when GetCortexViewModel.ShowPostflopMarketing
   is true (postflop is publicly released). It does two things:

     1. Converts the fixed single-viewport hero (.landing-page) into a normal
        scrolling document at ALL widths — the same conversion get-cortex.css
        already performs at <=575.98px, promoted here to every breakpoint so the
        appended sections below the hero are reachable.
     2. Styles the appended marketing sections (.pf-*) using the existing brand
        tokens from site.css (--cortex-*). Everything is scoped under
        .landing-page--postflop so it never leaks into the plain hero state.

   No new colour tokens: the brand has no green, so "live/positive" reads as red
   (--cortex-cyan #af0000), "coming soon / founder reward" as gold (--cortex-gold),
   muted copy as --cortex-text-muted.
============================================================================ */

/* --- 1. Un-pin the hero into a scrolling column -------------------------- */
.landing-page--postflop {
  position: relative;      /* was fixed — becomes the containing block for decor */
  inset: auto;
  min-height: 100dvh;
  overflow: visible;       /* body.login-page (overflow-y:auto) owns the scroll */
  display: flex;
  flex-direction: column;
  scroll-behavior: smooth;
}

/* Decorative layers cover the full scroll height rather than one viewport. */
.landing-page--postflop .landing-grid,
.landing-page--postflop .landing-vignette {
  position: absolute;
  inset: 0;
}

.landing-page--postflop .landing-hero-glow {
  top: 340px;              /* sit behind the hero, not the middle of the page */
  width: min(820px, 100%);
}

/* Fixed nav so the "Start Free" CTA is pinned to the viewport and always reachable
   while scrolling — regardless of the compliance footer that sits outside .landing-page.
   Fixed (not sticky) avoids the sticky element detaching from its container's bottom edge. */
.landing-page--postflop .landing-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  justify-content: space-between;
  background: rgba(12, 14, 18, 0.82);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.landing-nav-cta {
  padding: 9px 18px;
  font-size: 11px;
}

/* Section anchors between the brand and the Start Free CTA (mockup .nav-links).
   Hidden below 820px — the mockup's breakpoint — so the small-viewport nav keeps
   just brand + CTA. */
.landing-nav-links {
  display: flex;
  gap: 28px;
  font-size: 12.5px;
}

.landing-nav-links a {
  color: var(--cortex-text-muted);
}

.landing-nav-links a:hover {
  color: var(--cortex-text);
}

@media (max-width: 820px) {
  .landing-nav-links { display: none; }
}

/* The nav is fixed (not sticky like the mockup's), so anchored sections need to
   clear it or their headings land underneath the bar. */
.landing-page--postflop .pf-section[id] {
  scroll-margin-top: 76px;
}

/* Hero flows in-document at the top, below the sticky nav (no more centering). */
.landing-page--postflop .landing-hero {
  position: relative;
  left: auto;
  top: auto;
  transform: none;
  width: min(820px, calc(100vw - 48px));
  margin: 0 auto;
  padding: 96px 0 72px;   /* top clears the fixed nav (~64px) */
  flex-shrink: 0;
}

/* The hero logo's negative bottom margin overlaps the eyebrow once un-centered. */
.landing-page--postflop .landing-hero-logo {
  height: 260px;
  margin-bottom: 8px;
}

/* Conversion CTAs anchor to #get-cortex-signup, but the scroll should land on the
   full hero (logo + headline + form), not stop at the form itself: the oversized
   scroll-margin makes the browser clamp the anchor scroll to the very top of the page. */
.landing-page--postflop #get-cortex-signup {
  scroll-margin-top: 100vh;
}

/* Anchor scrolls animate on the scrolling box — body.login-page owns the scroll
   (the rule on .landing-page--postflop has no effect on it). */
body.login-page:has(.landing-page--postflop) {
  scroll-behavior: smooth;
}

/* Once the scroll lands, pull the eye to the signup form: a red pulse around the
   input row while the form is the URL fragment target. */
.landing-page--postflop #get-cortex-signup:target .landing-form-row {
  border-radius: 8px;
  animation: pfSignupPulse 1.5s ease-out 2;
}

@keyframes pfSignupPulse {
  0%   { box-shadow: 0 0 0 0 rgba(175, 0, 0, 0.55); }
  75%  { box-shadow: 0 0 0 16px rgba(175, 0, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(175, 0, 0, 0); }
}

/* Un-pin the fixed compliance bar so it flows below the marketing footer
   instead of floating over the scrolling content. */
body.login-page:has(.landing-page--postflop) .cortex-compliance--bar {
  position: static;
  justify-content: center;
}

body.login-page:has(.landing-page--postflop) {
  padding-bottom: 0;
}

/* --- 2. Section scaffolding --------------------------------------------- */
.landing-sections {
  position: relative;
  z-index: 4;
  width: 100%;
  color: var(--cortex-text);
  font-family: var(--cortex-font-body);
  line-height: 1.6;
  text-align: left;
}

.pf-wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

.pf-section {
  padding: 84px 0;
}

.pf-section--tight {
  padding-top: 0;
}

/* offset in-page anchors below the sticky nav */
.pf-section[id],
.landing-page--postflop [id="features"],
.landing-page--postflop [id="how"],
.landing-page--postflop [id="accuracy"],
.landing-page--postflop [id="roadmap"],
.landing-page--postflop [id="pricing"],
.landing-page--postflop [id="faq"] {
  scroll-margin-top: 88px;
}

.pf-kicker {
  color: var(--cortex-cyan);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.78rem;
  margin-bottom: 10px;
}

.pf-h2 {
  font-family: var(--cortex-font-brand);
  font-size: clamp(1.7rem, 3.5vw, 2.4rem);
  line-height: 1.2;
  margin-bottom: 12px;
  color: var(--cortex-text);
}

.pf-sub {
  color: var(--cortex-text-muted);
  max-width: 640px;
  font-size: 1.05rem;
}

.pf-sub--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.pf-link {
  color: var(--cortex-cyan);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pf-link:hover {
  color: var(--cortex-purple);
}

/* --- Stat strip --------------------------------------------------------- */
.pf-strip {
  border-top: 1px solid var(--landing-line-1);
  border-bottom: 1px solid var(--landing-line-1);
  background: rgba(255, 255, 255, 0.015);
  padding: 28px 0;
}

.pf-strip-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  text-align: center;
}

.pf-stat b {
  font-size: 1.6rem;
  color: var(--cortex-text);
  display: block;
  font-family: var(--cortex-font-brand);
}

.pf-stat span {
  color: var(--cortex-text-muted);
  font-size: 0.85rem;
}

/* --- Shared card -------------------------------------------------------- */
.pf-card {
  background: var(--cortex-surface);
  border: 0.5px solid var(--landing-line-2);
  border-radius: 14px;
  padding: 28px;
}

.pf-card h3 {
  font-size: 1.15rem;
  margin-bottom: 8px;
}

.pf-card p {
  color: var(--cortex-text-muted);
  font-size: 0.94rem;
}

.pf-card-icon {
  width: 46px;
  height: 46px;
  border-radius: 11px;
  background: rgba(175, 0, 0, 0.14);
  color: var(--cortex-cyan);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

/* --- Features ----------------------------------------------------------- */
.pf-grid3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 44px;
}

.pf-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 3px 10px;
  margin-top: 14px;
}

.pf-tag--live {
  color: var(--cortex-cyan);
  background: rgba(175, 0, 0, 0.14);
}

.pf-tag--free {
  color: var(--cortex-gold-bright);
  background: rgba(212, 175, 55, 0.12);
}

/* --- Compare ------------------------------------------------------------ */
.pf-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: 44px;
}

.pf-compare ul {
  list-style: none;
  margin-top: 16px;
  padding: 0;
}

.pf-compare li {
  padding: 9px 0;
  border-bottom: 1px solid var(--landing-line-1);
  color: var(--cortex-text-muted);
  font-size: 0.94rem;
}

.pf-compare li:last-child {
  border-bottom: none;
}

.pf-card-old-title {
  color: var(--cortex-text-muted);
}

.pf-card--old li::before {
  content: "\2717\00a0\00a0";
  color: var(--cortex-text-muted);
}

.pf-card--new {
  border-color: rgba(175, 0, 0, 0.4);
  background: linear-gradient(180deg, rgba(175, 0, 0, 0.08), var(--cortex-surface));
}

.pf-card--new li::before {
  content: "\2713\00a0\00a0";
  color: var(--cortex-cyan);
}

/* --- How it works ------------------------------------------------------- */
.pf-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 44px;
  counter-reset: step;
}

.pf-step {
  position: relative;
  background: var(--cortex-surface);
  border: 0.5px solid var(--landing-line-2);
  border-radius: 14px;
  padding: 28px;
}

.pf-step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  top: -16px;
  left: 24px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--cortex-cyan);
  color: #fff;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  box-shadow: var(--cortex-glow);
}

.pf-step h3 {
  margin: 8px 0;
  font-size: 1.1rem;
}

.pf-step p {
  color: var(--cortex-text-muted);
  font-size: 0.94rem;
}

.pf-viz {
  margin-top: 18px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid var(--landing-line-1);
  border-radius: 10px;
  padding: 16px;
  height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}

.pf-viz--auto {
  height: auto;
}

.pf-viz--center {
  align-items: center;
}

.pf-board-lbl {
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  color: var(--cortex-text-muted);
  font-weight: 700;
  text-align: center;
}

.pf-board-cards {
  display: flex;
  gap: 9px;
  justify-content: center;
}

.pf-bcard {
  width: 44px;
  height: 60px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.2rem;
  color: #fff;
  position: relative;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
}

.pf-bcard i {
  position: absolute;
  top: 3px;
  left: 6px;
  font-size: 0.6rem;
  font-style: normal;
  font-weight: 400;
}

.pf-bcard span {
  position: absolute;
  bottom: 3px;
  right: 6px;
  font-size: 0.6rem;
  font-weight: 400;
}

.pf-bcard--red   { background: #b23535; }
.pf-bcard--blue  { background: #3b5f96; }
.pf-bcard--green { background: #2f7d55; }

.pf-board-see {
  align-self: center;
  background: linear-gradient(180deg, var(--cortex-cyan), var(--cortex-blue));
  color: #fff;
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-align: center;
  padding: 11px 22px;
  border-radius: 7px;
}

.pf-solve-btn {
  background: var(--cortex-cyan);
  color: #fff;
  font-weight: 800;
  border-radius: 8px;
  padding: 10px 30px;
  box-shadow: var(--cortex-glow);
  font-size: 0.9rem;
}

.pf-progress {
  width: 80%;
  height: 6px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 3px;
  overflow: hidden;
}

.pf-progress i {
  display: block;
  width: 68%;
  height: 100%;
  background: var(--cortex-cyan);
}

.pf-solve-status {
  font-size: 0.72rem;
  color: var(--cortex-text-muted);
}

.pf-combo-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 3px;
  background: rgba(0, 0, 0, 0.45);
  padding: 4px;
  border-radius: 8px;
}

.pf-cg {
  aspect-ratio: 1.18;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  background: #b23535;
}

.pf-cg--dim   { background: #2f7d55; }
.pf-cg--blue  { background: #3b5f96; }
.pf-cg--split { background: linear-gradient(90deg, #2f7d55 45%, #b23535 45%); }
.pf-cg--muted { background: #232a33; }
.pf-cg--empty { background: #14161c; color: var(--cortex-text-muted); }

/* --- Accuracy / transparency ------------------------------------------- */
.pf-trans {
  background: rgba(255, 255, 255, 0.015);
  border-top: 1px solid var(--landing-line-1);
  border-bottom: 1px solid var(--landing-line-1);
}

.pf-trans-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.pf-points {
  list-style: none;
  margin-top: 20px;
  padding: 0;
}

.pf-points li {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  color: var(--cortex-text-muted);
  font-size: 0.96rem;
}

.pf-points li b {
  color: var(--cortex-text);
}

.pf-point-icon {
  color: var(--cortex-cyan);
  font-weight: 800;
}

/* --- Roadmap ------------------------------------------------------------ */
.pf-timeline {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.pf-tl-card {
  background: var(--cortex-surface);
  border: 0.5px solid var(--landing-line-2);
  border-radius: 14px;
  padding: 24px;
  position: relative;
}

.pf-status {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 3px 10px;
  display: inline-block;
  margin-bottom: 12px;
}

.pf-status--now    { color: var(--cortex-cyan); background: rgba(175, 0, 0, 0.14); }
.pf-status--soon   { color: var(--cortex-gold-bright); background: rgba(212, 175, 55, 0.12); }
.pf-status--locked { color: var(--cortex-purple); background: rgba(226, 70, 70, 0.14); }

.pf-tl-card h3 {
  font-size: 1.05rem;
  margin-bottom: 6px;
}

.pf-tl-card p {
  color: var(--cortex-text-muted);
  font-size: 0.88rem;
}

.pf-tl-card--mystery {
  border-color: rgba(226, 70, 70, 0.45);
  background: linear-gradient(180deg, rgba(226, 70, 70, 0.1), var(--cortex-surface));
  text-align: center;
}

.pf-lock {
  font-size: 1.8rem;
  margin-bottom: 8px;
}

.pf-always {
  margin-top: 28px;
  text-align: center;
  color: var(--cortex-text-muted);
  font-size: 0.9rem;
}

/* --- Pricing ------------------------------------------------------------ */
/* The pricing section embeds the live PostflopPricingPanel component, which brings its own
   design system (payment.css, cortex-tier-*). Overrides scoped to the landing host go here. */
.landing-page--postflop .pf-section .cortex-tier-wrapper {
  margin-top: 44px;
}

/* --- FAQ ---------------------------------------------------------------- */
.pf-faq {
  max-width: 760px;
  margin: 44px auto 0;
}

.pf-faq details {
  background: var(--cortex-surface);
  border: 0.5px solid var(--landing-line-2);
  border-radius: 12px;
  margin-bottom: 12px;
  padding: 0 22px;
}

.pf-faq summary {
  cursor: pointer;
  padding: 18px 0;
  font-weight: 600;
  font-size: 1rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pf-faq summary::-webkit-details-marker {
  display: none;
}

.pf-faq summary::after {
  content: "+";
  color: var(--cortex-cyan);
  font-size: 1.4rem;
  font-weight: 400;
}

.pf-faq details[open] summary::after {
  content: "\2013";
}

.pf-faq details p {
  color: var(--cortex-text-muted);
  font-size: 0.94rem;
  padding-bottom: 20px;
}

/* --- Final CTA ---------------------------------------------------------- */
.pf-final {
  text-align: center;
  background: radial-gradient(ellipse 70% 90% at 50% 110%, rgba(175, 0, 0, 0.14), transparent);
}

.pf-final .pf-h2 {
  font-size: clamp(1.9rem, 4vw, 2.7rem);
}

.pf-final-cta {
  margin-top: 26px;
  font-size: 0.95rem;
  padding: 16px 34px;
}

.pf-final-microcopy {
  justify-content: center;
  margin-top: 24px;
}

/* --- Footer ------------------------------------------------------------- */
.pf-foot {
  border-top: 1px solid var(--landing-line-1);
  padding: 44px 0;
  color: var(--cortex-text-muted);
  font-size: 0.85rem;
}

.pf-foot-inner {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 24px;
}

.pf-foot-links {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
}

.pf-foot-links a {
  color: var(--cortex-text-muted);
}

.pf-foot-links a:hover {
  color: var(--cortex-text);
}

.pf-disclaimer {
  max-width: 720px;
  line-height: 1.5;
  color: var(--cortex-text-muted);
}

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 900px) {
  .landing-page--postflop .pf-timeline { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .landing-page--postflop .pf-grid3,
  .landing-page--postflop .pf-compare,
  .landing-page--postflop .pf-steps,
  .landing-page--postflop .pf-trans-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .landing-page--postflop .pf-strip-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .landing-page--postflop .pf-timeline { grid-template-columns: 1fr; }
  .landing-page--postflop .pf-section { padding: 60px 0; }
  .landing-page--postflop .landing-hero { padding-top: 80px; }
  .landing-page--postflop .landing-hero-logo { height: 200px; }
}

/* =========================================================================
   v2 relaunch additions (2026-08) - appended only, nothing above modified.
   ========================================================================= */

/* --- Node locking: lock-bar visual (CSS mockup until a real screenshot) -- */
.landing-page--postflop .pf-lockviz {
  background: rgba(0, 0, 0, .3);
  border: 1px solid var(--landing-line-1);
  border-radius: 14px;
  padding: 22px;
}

.landing-page--postflop .pf-lockviz-title {
  font-size: .62rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cortex-text-muted);
  font-weight: 700;
  margin-bottom: 14px;
}

.landing-page--postflop .pf-lockrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 9px;
  font-size: .8rem;
}

.landing-page--postflop .pf-lockrow-name {
  width: 52px;
  color: var(--cortex-text-muted);
  font-weight: 600;
}

.landing-page--postflop .pf-bar {
  flex: 1;
  height: 20px;
  border-radius: 4px;
  display: flex;
  overflow: hidden;
  background: #14161c;
}

.landing-page--postflop .pf-bar i { display: block; height: 100%; }
.landing-page--postflop .pf-bar .b-check { background: #2f7d55; }
.landing-page--postflop .pf-bar .b-bet { background: #b23535; }
.landing-page--postflop .pf-bar .b-big { background: #7c2b8a; }

.landing-page--postflop .pf-lockpill {
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
}

.landing-page--postflop .pf-lockpill--locked {
  color: var(--cortex-gold-bright);
  background: rgba(212, 175, 55, .14);
}

.landing-page--postflop .pf-lockpill--solved {
  color: var(--cortex-cyan);
  background: rgba(175, 0, 0, .16);
}

.landing-page--postflop .pf-lockviz-note {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--landing-line-1);
  font-size: .78rem;
  color: var(--cortex-text-muted);
}

.landing-page--postflop .pf-lockviz-note b { color: var(--cortex-text); }

/* --- Roadmap: open-ideas strip ------------------------------------------ */
.landing-page--postflop .pf-open {
  margin-top: 26px;
  display: flex;
  gap: 18px;
  align-items: flex-start;
  border: 1px dashed rgba(255, 255, 255, .16);
  border-radius: 14px;
  padding: 22px 24px;
  background: rgba(255, 255, 255, .015);
}

.landing-page--postflop .pf-open-mark {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  border: 1px dashed rgba(175, 0, 0, .5);
  color: var(--cortex-cyan);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--cortex-font-brand);
  font-size: 1.25rem;
  font-weight: 700;
}

.landing-page--postflop .pf-open h3 {
  font-size: 1.05rem;
  margin-bottom: 6px;
}

.landing-page--postflop .pf-open p {
  color: var(--cortex-text-muted);
  font-size: .9rem;
  margin: 0;
}

.landing-page--postflop .pf-open p + p { margin-top: 8px; }

@media (max-width: 560px) {
  .landing-page--postflop .pf-open { flex-direction: column; gap: 12px; }
}