/* ==========================================================================
   Prospira Tweaks — landing page layer (scoped to body.page-home)
   Sections: announce, hero + aurora, community, bento, how-it-works,
   champion, pricing, services, marquee, FAQ skin, final CTA, footer grid.
   ========================================================================== */

/* .sr-only MOVED to css/prospira.css (shared utility). */

/* ---------- Announcement bar ---------- */
/* MOVED to css/prospira.css and de-scoped. It is chrome, not home content. */

/* ---------- Section rhythm ----------
   MOVED to css/prospira.css (.section / .section-head / .section-head h2 /
   .section-sub / .section-head h2 em) so subpages share one rhythm. Only the
   home-specific overrides stay here. */
.page-home { --section-gap: clamp(68px, 8.5vw, 116px); } /* leaner home rhythm (base is 72/10vw/136) */
/* the closing CTA panel repeats the section heading's serif accent */
.page-home .cta-panel h2 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.012em;
  background: linear-gradient(115deg, #d4e2ff 8%, #7fa2ff 54%, var(--accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ---------- Nav morph + sticky-nav overflow fix ----------
   MOVED to css/prospira.css and re-scoped to :is(.page-home, .page-utility),
   i.e. the pages that load js/landing.js. */

/* ---------- Scroll reveal ----------
   One entrance grammar for the whole page, driven by four tokens.
   .reveal        observer hook (js/landing.js adds .is-visible)
   .reveal-group  stagger host: its .reveal-item children arrive in sequence
   .reveal-item   staggered child, driven by an ANIMATION on purpose. a transition
                  shorthand here would silently wipe the element's own hover
                  transition, and hover behaviour must stay exactly as it is.
   .reveal-still  container is a trigger only, it does not travel itself, so its
                  movement never compounds with each child's movement
   .reveal-fade   fade with no travel, for things that already move (marquees) */
/* tuned for a slow, gliding entrance. the expo-out curve is the gentlest standard
   ease-out: it covers most of the distance early and then eases off for a long time,
   which is what reads as "smooth" rather than "timed". travel grew with the duration
   so velocity stays calm (24px over 0.72s is about 33px/s, same neighbourhood as the
   original 18px over 0.65s) while the movement itself is easier to notice. */
/* MOVED to css/prospira.css: the four --reveal-* tokens (now in :root) and the
   whole .reveal / .reveal-fade / .reveal-still / .reveal-group system, plus the
   @keyframes flow-card-in they drive. Values were carried over byte-identical. */

/* ============================ HERO ============================ */
.page-home .hero {
  --hero-rise: 116px;                 /* announce (38) + nav margin (14) + nav (64) */
  position: relative;
  overflow: hidden;
  /* rise under the announcement + floating nav so the main page background fills
     the whole top of the page; the extra padding puts the hero content back where
     it was (net position is independent of --hero-rise). */
  margin-top: calc(-1 * var(--hero-rise));
  padding-top: calc(var(--hero-rise) + clamp(60px, 9vw, 116px));
}
/* narrow screens: the announcement wraps to two lines, so the top band grows -
   raise more (content position stays put, it only depends on the padding sum) */
@media (max-width: 700px) {
  .page-home .hero { --hero-rise: 185px; }
}
/* Royal light-beams shader backdrop (js/shader-bg.js) - covers the hero and fades
   out at the bottom into the page background; the veil keeps the headline readable. */
.page-home .hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 76%, transparent 99%);
  mask-image: linear-gradient(180deg, #000 76%, transparent 99%);
}
.page-home .hero-shader {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0.9;
}
.page-home .hero-veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(74% 58% at 50% 33%, rgba(2, 3, 10, 0.84), rgba(2, 3, 10, 0.4) 48%, transparent 78%),
    linear-gradient(180deg, transparent 56%, var(--bg-0) 98%);
}
.page-home .hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.page-home .hero-eyebrow { animation: hero-in 0.7s var(--ease-out) both; }
.page-home .hero h1 {
  margin-top: 20px;
  font-size: clamp(2.5rem, 6.4vw, 4.7rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.04;
  color: var(--text-hi);
  animation: hero-in 0.7s var(--ease-out) 0.08s both;
}
.page-home .hero h1 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.015em;
  background: linear-gradient(115deg, #d4e2ff 10%, #7fa2ff 55%, var(--accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.page-home .hero-sub {
  margin-top: 22px;
  max-width: 56ch;
  font-size: clamp(1rem, 1.6vw, 1.13rem);
  line-height: 1.65;
  color: var(--text-mid);
  animation: hero-in 0.7s var(--ease-out) 0.16s both;
}
.page-home .hero-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 13px;
  margin-top: 30px;
}
/* The load-time entrance belongs to the HERO's button row only. The closing CTA
   panel reuses .hero-cta as a .reveal-item, where the scroll system supplies the
   entrance instead, so it must not inherit hero-in and must not be cancelled.
   Cancelling it there (animation: none) is what hid the closing buttons once the
   reveal system moved to prospira.css: both selectors landed on 0,3,0 and the
   later stylesheet won, leaving the row parked at the reveal's opacity: 0. */
.page-home .hero .hero-cta {
  animation: hero-in 0.7s var(--ease-out) 0.24s both;
}
/* the pill visual MOVED to css/prospira.css (.hero-stats / .spec-pills).
   Only the hero's own load-time entrance stays here. */
.page-home .hero-stats li { animation: hs-rise 0.5s var(--ease-out) both; }
.page-home .hero-stats li:nth-child(1) { animation-delay: 0.34s; }
.page-home .hero-stats li:nth-child(2) { animation-delay: 0.42s; }
.page-home .hero-stats li:nth-child(3) { animation-delay: 0.50s; }
.page-home .hero-stats li:nth-child(4) { animation-delay: 0.58s; }
@keyframes hs-rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.page-home .hero-stage {
  width: 100%;
  margin-top: clamp(20px, 3vw, 36px);
  animation: hero-in 0.9s var(--ease-out) 0.4s both;
}
@keyframes hero-in {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}

/* Framed hero shot MOVED to css/prospira.css and de-scoped as
   .hero-shot-frame / .shot-frame. The tilt hook keeps the 3D properties. */
/* BorderBeam MOVED to css/prospira.css and de-scoped. The plan-card variant
   now reads :is(.plan-card, .u-plan) so the Utility plan header gets it too. */

/* ============================ COMMUNITY BAND ============================ */
.page-home .community { margin-top: var(--section-gap); }
.page-home .community-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 28px;
  padding-block: 22px;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}
/* two full sentences, so no caps and no mono: shouting a sentence reads as a banner,
   not as a claim someone stands behind. short labels elsewhere keep their caps. */
.page-home .community-line {
  font-size: 0.9rem;
  color: var(--text-low);
}
.page-home .community-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.94rem;
  font-weight: 500;
  color: #a8c0ff;
}
/* same reason as the announcement link: 24px of text, padded out to a real touch target */
.page-home .community-link::after {
  content: "";
  position: absolute;
  inset: -10px -8px;
}
.page-home .community-link:hover { color: #d4e2ff; }
.page-home .community-link svg { flex-shrink: 0; }

/* (FEATURES BENTO styles removed with the section — value props now live in the app-gallery
   carousel + hero stat-pills. Full feature detail belongs on /utility.) */

/* ============================ HOW IT WORKS ============================ */
/* ============================ HOW IT WORKS (flow) ============================ */
/* Signature: a Services <-> Utility segmented toggle that swaps the whole
   3-step flow. Two genuinely different paths to a faster PC. */

/* segmented toggle */
.page-home .flow-toggle {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 4px;
  width: max-content;
  margin: 0 auto clamp(30px, 4vw, 46px);
  padding: 5px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border-mid);
  background: linear-gradient(180deg, rgba(16, 22, 44, 0.55), rgba(10, 14, 30, 0.62));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.page-home .flow-toggle-thumb {
  position: absolute;
  top: 5px;
  left: 5px;
  bottom: 5px;
  width: calc(50% - 5px);
  border-radius: var(--r-pill);
  border: 1px solid rgba(120, 155, 255, 0.42);
  background:
    radial-gradient(130% 150% at 0% 0%, rgba(90, 130, 255, 0.26), transparent 60%),
    linear-gradient(180deg, rgba(42, 91, 255, 0.42), rgba(30, 58, 174, 0.38));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 8px 22px -14px rgba(42, 91, 255, 0.6);
  transition: transform var(--dur-2) var(--ease-out);
  pointer-events: none;
}
.page-home .flow-toggle[data-active="services"] .flow-toggle-thumb { transform: translateX(100%); }
.page-home .flow-tab {
  position: relative;
  z-index: 1;
  min-width: 118px;
  padding: 9px 22px;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-low);
  cursor: pointer;
  transition: color var(--dur-2) var(--ease-out);
}
.page-home .flow-tab.is-active { color: #eaf1ff; }
.page-home .flow-tab:not(.is-active):hover { color: var(--text-mid); }

/* stage + panels */
.page-home .flow-stage { position: relative; }
.page-home .flow-panel[hidden] { display: none; }
.page-home .flow-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  list-style: none;
}

/* card */
.page-home .flow-card {
  display: flex;
  flex-direction: column;
  padding: 14px 14px 22px;
  overflow: hidden;
}
.page-home .flow-visual {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-card);
  overflow: hidden;
  border: 1px solid rgba(150, 180, 255, 0.12);
  /* fallback shown before/if the tile art is missing: royal glass + faint HUD grid */
  background:
    linear-gradient(180deg, rgba(150, 180, 255, 0.05) 1px, transparent 1px) 0 0 / 100% 26px,
    linear-gradient(90deg, rgba(150, 180, 255, 0.05) 1px, transparent 1px) 0 0 / 26px 100%,
    radial-gradient(120% 100% at 20% 0%, rgba(42, 91, 255, 0.24), transparent 58%),
    radial-gradient(120% 120% at 100% 100%, rgba(30, 58, 174, 0.2), transparent 60%),
    linear-gradient(180deg, rgba(17, 24, 50, 0.7), rgba(9, 13, 30, 0.82));
}
.page-home .flow-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-out);
}
.page-home .flow-card:hover .flow-img { transform: scale(1.035); }
.page-home .flow-visual.is-empty .flow-img { opacity: 0; }
/* corner brackets - subtle HUD framing on the visual */
.page-home .flow-visual::before,
.page-home .flow-visual::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border: 1.5px solid rgba(140, 175, 255, 0.5);
  pointer-events: none;
  transition: border-color var(--dur-2) var(--ease-out);
}
.page-home .flow-visual::before { top: 10px; left: 10px; border-right: 0; border-bottom: 0; border-top-left-radius: 6px; }
.page-home .flow-visual::after { right: 10px; bottom: 10px; border-left: 0; border-top: 0; border-bottom-right-radius: 6px; }
.page-home .flow-card:hover .flow-visual::before,
.page-home .flow-card:hover .flow-visual::after { border-color: rgba(160, 190, 255, 0.85); }

.page-home .flow-body {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 18px 8px 0;
}
.page-home .flow-step {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(150, 185, 255, 0.6);
}
.page-home .flow-step b { font-weight: 600; color: var(--accent); }
.page-home .flow-step i {
  width: 22px;
  height: 1px;
  background: linear-gradient(90deg, rgba(140, 175, 255, 0.5), transparent);
}
.page-home .flow-card h3 {
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #dde7ff;
}
.page-home .flow-card p {
  font-size: 0.92rem;
  line-height: 1.6;
  color: #9aa8cc;
}

/* toggle crossfade + scroll entrance. scoped to .flow-stage.is-visible so the cards
   hold their start state until the stage is on screen; without it the keyframe runs
   at page load far above the fold and the scroll entrance is a dead slab. kept on
   .is-active rather than converted to .reveal-item because these cards must ALSO
   re-run when the Utility/Services tab is switched. */
.page-home .flow-stage:not(.is-visible) .flow-card { opacity: 0; }
.page-home .flow-stage.is-visible .flow-panel.is-active .flow-card {
  animation: flow-card-in var(--reveal-dur) var(--reveal-ease) both;
}
.page-home .flow-stage.is-visible .flow-panel.is-active .flow-card:nth-child(2) { animation-delay: var(--stagger-step); }
.page-home .flow-stage.is-visible .flow-panel.is-active .flow-card:nth-child(3) { animation-delay: calc(var(--stagger-step) * 2); }
/* shared page entrance keyframe. the var() lets .reveal-fade zero the travel without
   a second keyframe; the 14px fallback keeps the flow cards byte-identical. */
/* @keyframes flow-card-in MOVED to css/prospira.css (keyframes are document-scoped,
   so the .flow-card animation above still resolves it). */

.page-home .flow-cta {
  display: flex;
  justify-content: center;
  margin-top: clamp(30px, 4vw, 44px);
}

@media (max-width: 900px) {
  .page-home .flow-grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
}

@media (prefers-reduced-motion: reduce) {
  /* mirrors the active selector character for character: @media adds no specificity,
     so a shorter selector here would silently lose to the (0,6,0) rule above. */
  .page-home .flow-stage.is-visible .flow-panel.is-active .flow-card,
  .page-home .flow-stage:not(.is-visible) .flow-card { animation: none; opacity: 1; }
  .page-home .flow-toggle-thumb { transition: none; }
  .page-home .flow-img { transition: none; }
}

/* (CHAMPION SHOWCASE styles removed with the section — moved to /utility.) */

/* ============================ PRICING ============================ */
.page-home .pricing-note {
  /* 18px let it crowd the cards; a section-closing footnote needs its own air */
  margin-top: clamp(26px, 3vw, 34px);
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.05em;
  color: var(--text-low);
}
.page-home .pricing-note a {
  color: #a8c0ff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.page-home .pricing-note a:hover { color: #d4e2ff; }

/* --- billing-period switch --- */
/* MOVED to css/prospira.css and de-scoped: .plan-switch-wrap, .plan-switch,
   .plan-tab, .plan-switch-thumb, .plan-save and their responsive rules. */

.page-home .plan-grid {
  display: grid;
  /* two tiers now (Free + Champion): centred, but wide enough that the cards don't read
     as narrow columns on a desktop screen */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 940px;
  margin: 0 auto;
  gap: 22px;
  align-items: stretch;              /* all cards share the tallest card's height */
}
/* non-featured tiers stay deliberately quiet, so Champion reads as the standout */
.page-home .plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px 24px;
  border-radius: var(--r-card-lg);
  border: 1px solid rgba(150, 180, 255, 0.1);
  background:
    radial-gradient(120% 120% at 50% -10%, rgba(42, 91, 255, 0.05), transparent 60%),
    linear-gradient(180deg, rgba(14, 19, 40, 0.5), rgba(9, 13, 28, 0.6));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 20px 44px -30px rgba(0, 0, 0, 0.6);
}
/* featured tier: bright royal edge, ring, and a strong glow that lifts it off the row */
.page-home .plan-card.is-popular {
  border: 1.5px solid rgba(130, 165, 255, 0.8);
  background:
    radial-gradient(90% 60% at 18% -12%, rgba(255, 255, 255, 0.16), transparent 55%),
    radial-gradient(120% 150% at 100% 0%, rgba(42, 91, 255, 0.42), transparent 52%),
    radial-gradient(130% 160% at 0% 112%, rgba(30, 58, 174, 0.3), transparent 58%),
    linear-gradient(180deg, rgba(24, 34, 74, 0.72), rgba(13, 19, 46, 0.74));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 28px 56px -28px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(90, 130, 255, 0.22),
    0 0 38px -20px rgba(42, 91, 255, 0.42);
  z-index: 1;
}
.page-home .plan-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.page-home .plan-card-top h3 { font-size: 1.35rem; font-weight: 600; letter-spacing: -0.01em; color: var(--text-hi); }
.page-home .plan-badge {
  padding: 5px 12px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(140, 170, 255, 0.5);
  background:
    radial-gradient(130% 150% at 0% 0%, rgba(90, 130, 255, 0.4), transparent 60%),
    linear-gradient(180deg, rgba(42, 91, 255, 0.55), rgba(30, 58, 174, 0.5));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 8px 20px -10px rgba(42, 91, 255, 0.7);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #eef3ff;
  white-space: nowrap;
}
/* reserve exactly two lines (2 x the 1.5 line-height) and keep both blurbs inside two
   lines. a third line here pushed Champion's price, button and assurance ~16px below
   Entry's, so the two CTAs sat at different heights. */
.page-home .plan-card-desc { font-size: 0.9rem; line-height: 1.5; color: #9aa8cc; min-height: 3em; margin-top: -2px; }
.page-home .plan-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.page-home .plan-price-value { font-size: 2.6rem; font-weight: 600; letter-spacing: -0.03em; color: var(--text-hi); line-height: 1; }
.page-home .plan-price-was {
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  /* match the live price's tight line box. Without this it inherits ~1.5 and, being
     baseline-aligned, grows the price row by 3px the moment it appears - which made the
     card jump taller on Annual while the Free card stayed put. */
  line-height: 1;
  /* the discount anchor only works if it registers - lifted off the caption tone, but
     still clearly subordinate to the live price next to it */
  color: rgba(214, 225, 245, 0.58);
  text-decoration: line-through;
  text-decoration-color: rgba(150, 180, 255, 0.55);
}
.page-home .plan-price-was[hidden] { display: none; }
.page-home .plan-price-cur { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; color: var(--text-mid); }
.page-home .plan-price-per {
  flex-basis: 100%;
  margin-top: 4px;
  font-size: 0.8rem;
  color: var(--text-low);
}
.page-home .plan-btn { width: 100%; }
.page-home .plan-btn + .plan-btn { margin-top: -4px; }
/* risk-reducer under each CTA - the objection at this price is "will it break my PC",
   not "is it too expensive", so the answer sits at the moment of decision. */
.page-home .plan-assure {
  /* the card is a flex column with a 14px gap; pull back so this line sits ~8px under
     the button it qualifies, closer than the 14px price-to-button step. Otherwise it
     drifts toward the FEATURES divider and reads as an orphan rather than a caption. */
  margin-top: -6px;
  text-align: center;
  font-size: 0.78rem;
  /* a trust signal doing conversion work, so a touch above the caption tone */
  color: rgba(214, 225, 245, 0.62);
}

/* the two tiers have different feature counts, so let this block absorb the slack and
   pin "see all features" to the bottom - both cards then end on the same line instead
   of the shorter one showing a dead gap. */
.page-home .plan-features {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-top: 6px;
  padding-top: 18px;
  border-top: 1px solid var(--border-soft);
}
.page-home .plan-features-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(150, 185, 255, 0.75);
  margin-bottom: 12px;
}
.page-home .plan-includes { font-size: 0.9rem; font-weight: 600; color: #dde7ff; margin-bottom: 14px; }
.page-home .plan-features ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.page-home .plan-features li { display: flex; align-items: center; gap: 11px; font-size: 0.88rem; line-height: 1.35; color: var(--text-mid); }
.page-home .plan-check {
  width: 21px;
  height: 21px;
  flex-shrink: 0;
  border-radius: var(--r-pill);
  display: grid;
  place-items: center;
  border: 1px solid rgba(120, 160, 255, 0.4);
  background: rgba(42, 91, 255, 0.12);
  color: #8fb0ff;
}
.page-home .plan-card.is-popular .plan-check { border-color: rgba(140, 175, 255, 0.6); background: rgba(90, 130, 255, 0.2); color: #c3d5ff; }

/* (.btn-dark removed — non-featured tiers now use .btn-primary like every other card,
   so the pricing row is a consistent royal-primary + ghost-secondary pair. One fewer
   filled variant to maintain.) */

/* "see all features" link — the rest of each tier's list lives on the Utility page */
.page-home .plan-more {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 6px;
  margin-top: auto;          /* pushed to the card's bottom edge */
  padding-top: 19px;         /* keeps the minimum gap when there is no slack */
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #a8c0ff;
  transition: color var(--dur-1) var(--ease-out);
}
.page-home .plan-more::after { content: '\2192'; transition: transform var(--dur-1) var(--ease-out); }
.page-home .plan-more:hover { color: #d4e2ff; }
.page-home .plan-more:hover::after { transform: translateX(3px); }

@media (max-width: 900px) {
  .page-home .plan-grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  /* .is-popular is pulled up by order:-1 here, so DOM order and visual order disagree.
     override the delay directly, not --i: JS sets --i inline and would win. */
  .page-home #pricing .plan-grid.is-visible .plan-card.is-popular { animation-delay: 0ms; }
  .page-home #pricing .plan-grid.is-visible .plan-card:not(.is-popular) { animation-delay: var(--stagger-step); }
  .page-home .plan-card.is-popular { order: -1; }
}

/* (SERVICES CROSS-SELL styles removed with the section — done-for-you lives in How it works + /services.) */

/* ============================ FAQ ============================ */
/* MOVED to css/prospira.css and de-scoped: the whole .home-faq-* skin.
   Every page now renders the same accordion. */

/* ============================ FINAL CTA ============================ */
/* the panel surface fades first, then its contents arrive in reading order */
.page-home .cta-panel { --stagger-lead: 90ms; }
.page-home .cta-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  padding: clamp(44px, 7vw, 84px) clamp(22px, 5vw, 60px);
  border-radius: 26px;
  overflow: hidden;
}
.page-home .cta-panel h2 {
  font-size: clamp(1.8rem, 4vw, 2.7rem);
  font-weight: 600;
  letter-spacing: -0.032em;
  line-height: 1.1;
  color: var(--text-hi);
}
.page-home .cta-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 90% at 50% 115%, rgba(42, 91, 255, 0.28), transparent 65%),
    radial-gradient(40% 60% at 15% -10%, rgba(190, 210, 255, 0.08), transparent 60%);
}
/* no animation reset here on purpose: the row is a .reveal-item and the shared
   reveal system owns its entrance. See the .page-home .hero .hero-cta note. */
.page-home .cta-panel .hero-cta { margin-top: 14px; }
.page-home .cta-panel > * { position: relative; }

/* ============================ FOOTER (landing enrichment) ============================ */
/* MOVED to css/prospira.css and de-scoped: the whole footer enrichment layer
   (edge glow, footer-top grid, brand column, link columns, bottom bar, footer-fx).
   Every page now renders the same footer. */

/* ============================ RESPONSIVE ============================ */
@media (max-width: 1024px) {
  .page-home #site-footer nav { justify-content: flex-start; }
}
@media (max-width: 760px) {
  .page-home .community-inner { justify-content: center; text-align: center; }
}
@media (max-width: 560px) {
  .page-home .hero-stats { gap: 8px; }
  .page-home .hero-stats li { font-size: 0.7rem; padding: 7px 12px; }
  .page-home .hero-cta .btn { width: 100%; }
}


/* ============================ SHINY CTA ============================
   Vanilla port of 21st.dev ShinyButton: a conic-gradient border rotating around
   the pill + a faint dot texture + an inner shimmer, recolored royal. @property
   drives the animated angle; browsers without it just show a static border
   (button still fully works). */
@property --sh-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@property --sh-angle-offset { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@property --sh-percent { syntax: '<percentage>'; initial-value: 5%; inherits: false; }
@property --sh-shine { syntax: '<color>'; initial-value: #eaf0ff; inherits: false; }
.shiny-cta {
  --sh-bg: #070b16;
  --sh-bg-subtle: #141a2e;
  --sh-fg: #eef3ff;
  --sh-highlight: #2a5bff;
  --sh-highlight-subtle: #7fa2ff;
  --sh-anim: sh-angle linear infinite;
  --sh-dur: 3s;
  --sh-shadow: 2px;
  --sh-trans: 800ms cubic-bezier(0.25, 1, 0.5, 1);
  isolation: isolate;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  outline-offset: 4px;
  padding: 0.92rem 2.1rem;
  font-family: var(--font-sans);
  font-size: 0.98rem;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 360px;
  color: var(--sh-fg);
  background:
    linear-gradient(var(--sh-bg), var(--sh-bg)) padding-box,
    conic-gradient(from calc(var(--sh-angle) - var(--sh-angle-offset)),
      transparent,
      var(--sh-highlight) var(--sh-percent),
      var(--sh-shine) calc(var(--sh-percent) * 2),
      var(--sh-highlight) calc(var(--sh-percent) * 3),
      transparent calc(var(--sh-percent) * 4)) border-box;
  box-shadow: inset 0 0 0 1px var(--sh-bg-subtle);
  transition: var(--sh-trans);
  transition-property: --sh-angle-offset, --sh-percent, --sh-shine;
}
.shiny-cta::before,
.shiny-cta::after,
.shiny-cta span::before {
  content: '';
  pointer-events: none;
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  translate: -50% -50%;
  z-index: -1;
}
.shiny-cta:active { translate: 0 1px; }
.shiny-cta::before {          /* dot texture */
  --size: calc(100% - var(--sh-shadow) * 3);
  --position: 2px;
  --space: calc(var(--position) * 2);
  width: var(--size);
  height: var(--size);
  background: radial-gradient(circle at var(--position) var(--position),
    #cfe0ff calc(var(--position) / 4), transparent 0) padding-box;
  background-size: var(--space) var(--space);
  background-repeat: space;
  -webkit-mask-image: conic-gradient(from calc(var(--sh-angle) + 45deg), black, transparent 10% 90%, black);
  mask-image: conic-gradient(from calc(var(--sh-angle) + 45deg), black, transparent 10% 90%, black);
  border-radius: inherit;
  opacity: 0.4;
  z-index: -1;
}
.shiny-cta::after {           /* inner shimmer (the glow that sweeps through the pill) */
  --sh-anim: sh-shimmer linear infinite;
  width: 100%;
  aspect-ratio: 1;
  background: linear-gradient(-50deg, transparent, var(--sh-highlight), transparent);
  -webkit-mask-image: radial-gradient(circle at bottom, transparent 40%, black);
  mask-image: radial-gradient(circle at bottom, transparent 40%, black);
  opacity: 0.45;
}
.shiny-cta span { z-index: 1; position: relative; display: inline-flex; align-items: center; gap: 8px; }
.shiny-cta span svg { transition: transform var(--dur-1) var(--ease-out); }
.shiny-cta:is(:hover, :focus-visible) span svg { transform: translateX(3px); }
.shiny-cta span::before {     /* breathing hover glow - removed (grew as a square) */
  display: none;
  --size: calc(100% + 1rem);
  width: var(--size);
  height: var(--size);
  box-shadow: inset 0 -1ex 2rem 4px var(--sh-highlight);
  opacity: 0;
  transition: opacity var(--sh-trans);
  animation: calc(var(--sh-dur) * 1.5) sh-breathe linear infinite;
}
.shiny-cta,
.shiny-cta::before,
.shiny-cta::after {
  animation: var(--sh-anim) var(--sh-dur),
    var(--sh-anim) calc(var(--sh-dur) / 0.4) reverse paused;
  animation-composition: add;
}
.shiny-cta:is(:hover, :focus-visible) {
  --sh-percent: 20%;
  --sh-angle-offset: 95deg;
  --sh-shine: var(--sh-highlight-subtle);
}
.shiny-cta:is(:hover, :focus-visible),
.shiny-cta:is(:hover, :focus-visible)::before,
.shiny-cta:is(:hover, :focus-visible)::after { animation-play-state: running; }
.shiny-cta:is(:hover, :focus-visible) span::before { opacity: 1; }
@keyframes sh-angle { to { --sh-angle: 360deg; } }
@keyframes sh-shimmer { to { rotate: 360deg; } }
@keyframes sh-breathe { from, to { scale: 1; } 50% { scale: 1.2; } }
@media (prefers-reduced-motion: reduce) {
  .shiny-cta, .shiny-cta::before, .shiny-cta::after, .shiny-cta span::before { animation: none !important; }
}

/* ===== SECONDARY HERO CTA — Expand-Icon Button (vanilla port of shadcn expandIcon) =====
   Pairs with .shiny-cta: a quiet frosted-glass pill. The label is always shown; on hover an
   arrow expands in from the right (widening the pill) and the border brightens subtly — no
   glow, no lift, no sheen. A faint static top gloss gives the glass surface. Same pill height
   as .shiny-cta. Scoped class — the other .btn-ghost buttons (pricing, final CTA) untouched. */
.xicon-cta {
  isolation: isolate;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  padding: 0.92rem 2.1rem;              /* == .shiny-cta (height match) */
  font-family: var(--font-sans);
  font-size: 0.98rem;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  text-decoration: none;
  color: var(--text-hi);
  border: 1px solid var(--border-mid);
  border-radius: 360px;
  background: linear-gradient(180deg, rgba(16, 22, 44, 0.4), rgba(10, 14, 30, 0.46));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  backdrop-filter: blur(8px) saturate(140%);
  transition:
    color 0.3s var(--ease-out),
    border-color 0.3s var(--ease-out),
    box-shadow 0.3s var(--ease-out),
    transform 0.3s var(--ease-out);
}
.xicon-cta:active { transform: translateY(1px); }
/* faint static top gloss for the glass surface (no hover flourish) */
.xicon-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 44%);
  opacity: 0.65;
}

.xicon-cta-label { position: relative; z-index: 1; }

/* arrow that expands in from the right on hover, widening the pill to fit it */
.xicon-cta-arrow {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0;
  margin-left: 0;
  opacity: 0;
  transform: translateX(6px);
  overflow: hidden;
  transition:
    width 0.25s var(--ease-out),
    margin 0.25s var(--ease-out),
    opacity 0.25s var(--ease-out),
    transform 0.25s var(--ease-out);
}
.xicon-cta-arrow svg { width: 18px; height: 18px; flex-shrink: 0; }

.xicon-cta:is(:hover, :focus-visible) {
  border-color: rgba(130, 165, 255, 0.45);
}
.xicon-cta:is(:hover, :focus-visible) .xicon-cta-arrow {
  width: 18px;
  margin-left: 8px;
  opacity: 1;
  transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
  .xicon-cta, .xicon-cta * { transition: none !important; }
}

/* ============================ TESTIMONIALS MARQUEE ============================ */
/* infinite auto-scrolling vouch row (pause on hover), edges fade out via mask.
   js/landing.js marqueeClone duplicates the track once, so -50% loops seamlessly. */
.page-home .marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 11%, #000 89%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 11%, #000 89%, transparent);
}
.page-home .marquee-track {
  display: flex;
  width: max-content;
  gap: 16px;
  padding: 8px;
  animation: pt-marquee 48s linear infinite;
  will-change: transform;
}
.page-home .marquee:hover .marquee-track { animation-play-state: paused; }
/* also hold the loop until the section is actually reached, so the strip is not
   scrolling unseen for the whole page above it */
.page-home .testimonials .marquee:not(.is-visible) .marquee-track { animation-play-state: paused; }
@keyframes pt-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
/* ===== GAMES WE OPTIMIZE (masked-edge name marquee, vanilla port of 21st Logo Cloud 3;
   reuses the .marquee / .marquee-track loop, restyled for scrolling game names) ===== */
.page-home .games-inner { max-width: 880px; }
.page-home .games-head {
  text-align: center;
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.page-home .games-head-top { display: block; color: var(--text-mid); font-weight: 500; }
.page-home .games-head-em {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.012em;
  background: linear-gradient(115deg, #d4e2ff 8%, #7fa2ff 54%, var(--accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* hairline as a gradient background, not a masked solid bar (masks were flickering) */
.page-home .games-rule {
  height: 1px;
  margin: clamp(20px, 3vw, 30px) auto;
  background: linear-gradient(90deg, transparent, rgba(150, 180, 255, 0.2), transparent);
}
.page-home .games-rule-short { max-width: 360px; }
/* identical mechanics to the (smooth) testimonials marquee: inherited pt-marquee +
   .marquee mask; only the pace and item spacing differ. */
.page-home .games .marquee-track {
  gap: clamp(30px, 4.5vw, 52px);
  padding: 6px 8px;
  animation-duration: 26s;
}
/* logos ship white baked into the file (no runtime filter, so the moving strip stays
   GPU-cheap and smooth), muted at rest and full on hover.
   every logo is 72px tall with the mark centred in transparent padding: that padding
   carries the optical balancing (a 5:1 wordmark like Call of Duty sits shorter than a
   square badge), so this single height cannot flatten them all back to equal weight.
   the clamp is 72/64 of the old one so the marks still read at the same size. */
.page-home .games-logo {
  height: clamp(29px, 4.95vw, 38px);
  width: auto;
  display: block;
  opacity: 0.72;
  transition: opacity 0.2s var(--ease-out, ease);
}
/* only the logo actually under the cursor lifts — hovering the strip also pauses it
   (.marquee:hover .marquee-track above), so there is something steady to point at. */
.page-home .games-logo:hover { opacity: 1; }
.page-home .vouch-card {
  flex: 0 0 auto;
  width: 342px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 17px 20px;
  border-radius: var(--r-card-lg);
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
}
.page-home .vouch-head { display: flex; align-items: center; gap: 11px; }
.page-home .vouch-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--border-mid);
}
.page-home .vouch-who { display: flex; flex-direction: column; min-width: 0; }
.page-home .vouch-name { font-weight: 600; font-size: 0.95rem; letter-spacing: -0.005em; color: var(--text-hi); }
/* now a Discord handle, so it reads better in the mono/utility face */
.page-home .vouch-role { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.02em; color: var(--text-low); }
/* (.vouch-chip removed with the FPS badges - the vouch now carries the handle and date
   instead of a claim we cannot verify per person.) */
.page-home .vouch-date {
  display: block;
  /* cards are stretched to the tallest in the row, so short vouches had 60-90px of dead
     space under the date. Pushing it to the bottom edge turns that slack into deliberate
     whitespace and lines every date up across the strip. */
  margin-top: auto;
  padding-top: 4px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: rgba(214, 225, 245, 0.4);
}
.page-home .vouch-stars { display: inline-flex; gap: 3px; color: #ffc75a; }
.page-home .vouch-stars svg { filter: drop-shadow(0 0 5px rgba(255, 180, 60, 0.35)); }
.page-home .vouch-text { font-size: 0.9rem; line-height: 1.45; color: var(--text-mid); }

@media (max-width: 560px) {
  .page-home .vouch-card { width: 280px; }
}

/* ============================ REDUCED MOTION ============================ */
@media (prefers-reduced-motion: reduce) {
  .page-home .marquee-track {
    animation: none !important;
    width: auto;
    flex-wrap: wrap;
    justify-content: center;
  }
  .page-home .marquee { mask-image: none; -webkit-mask-image: none; }
  .page-home .reveal { opacity: 1 !important; transform: none !important; }
  .page-home .reveal-item {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .page-home .hero-eyebrow,
  .page-home .hero h1,
  .page-home .hero-sub,
  .page-home .hero-cta,
  .page-home .hero-stats,
  .page-home .hero-stats li,
  .page-home .hero-stage { animation: none !important; }
}


/* ============================ DONE-FOR-YOU (manual service) ============================
   Centered section-head on top (unified with every other section), then a two-column
   body: left = trust chips + value accordion + CTAs, right = vertical "session" timeline
   (a vanilla royal-glass port of the 21st.dev Modern Timeline / Stepper pattern). The
   timeline stays vertical on purpose so it does not echo the horizontal how-it-works. */
.page-home .dfy-grid {
  display: grid;
  grid-template-columns: 1.02fr 1fr;
  gap: clamp(34px, 5vw, 76px);
  align-items: start;
}
/* spec row: icon + fact, wired into the accordion's hairline so specs and benefits
   read as one ledger instead of floating tag pills. */
.page-home .dfy-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 11px 22px;
  margin: 0;
  padding: 0 0 16px;
  list-style: none;
  border-bottom: 1px solid rgba(150, 180, 255, 0.13);
}
.page-home .dfy-chips li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* "You watch every step" is a sentence, not a tag, so it is set like one */
  font-size: 0.8rem;
  color: #a9bce6;
}
.page-home .dfy-chips li svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: #7f9dff;
}
.page-home .dfy-steps {
  margin-top: 0;
}
.page-home .dfy-step { border-bottom: 1px solid rgba(150, 180, 255, 0.13); }
.page-home .dfy-step summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 2px;
  color: var(--text-hi);
  font-weight: 500;
  font-size: 1rem;
  transition: color var(--dur-2, 0.2s) var(--ease-out, ease);
}
.page-home .dfy-step summary:hover { color: #cfe0ff; }
.page-home .dfy-step summary::-webkit-details-marker { display: none; }
.page-home .dfy-step summary::after {
  content: '';
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background: no-repeat center / 16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239db8ff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  opacity: 0.7;
  transition: transform var(--dur-2, 0.2s) var(--ease-out, ease);
}
.page-home .dfy-step[open] summary::after { transform: rotate(180deg); }
.page-home .dfy-step-body {
  padding: 0 2px 16px;
  color: var(--text-mid);
  font-size: 0.95rem;
  line-height: 1.62;
}
.page-home .dfy-step-body p { margin: 0; }
.page-home .dfy-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}
/* right column: before/after compare (vanilla royal-glass port of aceternity Compare).
   Left = a "stock setup" frametime graph (jagged, warm/muted); right = a "Prospira
   tuned" graph (steady, royal). Drag or hover the divider to reveal. The two panes are
   swappable for real before/after screenshots later without touching the JS. */
.page-home .dfy-media { display: flex; flex-direction: column; }
.page-home .dfy-cmp {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(130, 160, 240, 0.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 46px 100px -44px rgba(0, 0, 0, 0.9);
  cursor: col-resize;
  user-select: none;
  touch-action: pan-y;
}
.page-home .dfy-cmp-pane { position: absolute; inset: 0; overflow: hidden; }
.page-home .dfy-cmp-after {
  z-index: 1;
  background: linear-gradient(180deg, rgba(16, 22, 42, 0.94), rgba(9, 13, 28, 0.97));
}
.page-home .dfy-cmp-before {
  z-index: 2;
  background: linear-gradient(180deg, rgba(26, 18, 22, 0.95), rgba(14, 10, 14, 0.98));
  clip-path: inset(0 50% 0 0);
}
.page-home .dfy-cmp-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}
/* sell the before/after: the "stock" side is duller, darker, flatter and grainy; the
   "tuned" side is slightly richer so the jump reads at a glance. */
.page-home .dfy-cmp-before .dfy-cmp-img { filter: saturate(0.45) brightness(0.88) contrast(0.9); }
.page-home .dfy-cmp-after .dfy-cmp-img { filter: saturate(1.08) contrast(1.03); }
.page-home .dfy-cmp-before::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.17;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 120px 120px;
}
/* in-game style FPS badge; before sits on the left half, after on the right, so each
   badge is anchored to its own visible side. */
/* liquid-glass FPS readout: a frosted glass chip (specular top edge + refractive,
   state-tinted rim) holding a colored trend arrow + a gradient-filled number. Before =
   silver gradient + red down arrow; after = green gradient + green up arrow. */
.page-home .dfy-cmp-fps {
  position: absolute;
  top: 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 3;
  /* no glass panel: the readings sit straight on the frame. A drop shadow (not
     text-shadow, so the SVG arrow is covered too) keeps them legible now that there is
     no backdrop between them and a bright screenshot. */
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.85)) drop-shadow(0 0 14px rgba(0, 0, 0, 0.5));
}
.page-home .dfy-cmp-fps.is-before { left: 20px; }
.page-home .dfy-cmp-fps.is-after { right: 20px; align-items: flex-end; }
.page-home .dfy-cmp-fps-row { display: inline-flex; align-items: center; gap: 7px; }
.page-home .dfy-cmp-arrow { width: 19px; height: 19px; flex-shrink: 0; stroke-width: 2.6; }
.page-home .dfy-cmp-fps.is-before .dfy-cmp-arrow { color: #ff5b5b; }
.page-home .dfy-cmp-fps.is-after .dfy-cmp-arrow { color: #3fe08a; }
.page-home .dfy-cmp-fps-num {
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: clamp(1.6rem, 3.2vw, 2.05rem);
  line-height: 1;
  letter-spacing: -0.02em;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.page-home .dfy-cmp-fps.is-before .dfy-cmp-fps-num { background-image: linear-gradient(180deg, #ffffff 0%, #6b7280 100%); }
.page-home .dfy-cmp-fps.is-after .dfy-cmp-fps-num { background-image: linear-gradient(180deg, #ffffff 0%, #3fe08a 100%); }
.page-home .dfy-cmp-fps-unit {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
}
.page-home .dfy-cmp-fps-tag {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding-left: 26px;
}
.page-home .dfy-cmp-fps.is-after .dfy-cmp-fps-tag { padding-left: 0; }
.page-home .dfy-cmp-fps.is-before .dfy-cmp-fps-tag { color: #ff9d9d; }
.page-home .dfy-cmp-fps.is-after .dfy-cmp-fps-tag { color: #86e9b3; }
/* divider replicates aceternity Compare 1:1: thin line + left glow layers + a white
   sparkle trail on the right + a small white square handle with vertical dots. Only
   the palette is tuned to royal; the structure and handle are the original's. */
.page-home .dfy-cmp-divider {
  position: absolute;
  top: 0;
  height: 100%;
  left: 50%;
  width: 2px;
  transform: translateX(-1px);
  z-index: 40;
  background: linear-gradient(to bottom, transparent 5%, #5f8bff 50%, transparent 95%);
  pointer-events: none;
}
.page-home .dfy-cmp-glow1 {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 144px;
  height: 100%;
  z-index: 20;
  opacity: 0.5;
  background: linear-gradient(to right, rgba(90, 130, 255, 0.9), transparent 60%);
  -webkit-mask-image: radial-gradient(100px at left, #000, transparent);
  mask-image: radial-gradient(100px at left, #000, transparent);
}
.page-home .dfy-cmp-glow2 {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 40px;
  height: 50%;
  z-index: 10;
  background: linear-gradient(to right, rgba(125, 200, 255, 0.95), transparent);
  -webkit-mask-image: radial-gradient(50px at left, #000, transparent);
  mask-image: radial-gradient(50px at left, #000, transparent);
}
.page-home .dfy-cmp-spark {
  position: absolute;
  top: 50%;
  right: -40px;
  transform: translateY(-50%);
  width: 40px;
  height: 75%;
  -webkit-mask-image: radial-gradient(100px at left, #000, transparent);
  mask-image: radial-gradient(100px at left, #000, transparent);
}
.page-home .dfy-cmp-spark canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.page-home .dfy-cmp-handle {
  position: absolute;
  top: 50%;
  right: -10px;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 6px;
  background: #fff;
  color: #0a0f1e;
  z-index: 30;
  pointer-events: auto;
  cursor: col-resize;
  box-shadow: 0 -1px 0 0 rgba(255, 255, 255, 0.25);
}
.page-home .dfy-cmp-handle:focus-visible { outline: 2px solid #a9c6ff; outline-offset: 3px; }
@media (max-width: 900px) {
  .page-home .dfy-grid { grid-template-columns: 1fr; gap: 34px; }
  .page-home .dfy-copy { max-width: none; }
  .page-home .dfy-cmp { max-width: 520px; margin-inline: auto; width: 100%; }
}
@media (max-width: 560px) {
  .page-home .dfy-chips { gap: 9px 16px; }
  /* keep the two FPS chips readable and clear of each other on a narrow frame */
  .page-home .dfy-cmp-fps { top: 10px; }
  .page-home .dfy-cmp-fps.is-before { left: 12px; }
  .page-home .dfy-cmp-fps.is-after { right: 12px; }
  .page-home .dfy-cmp-fps-num { font-size: 1.4rem; }
  .page-home .dfy-cmp-arrow { width: 16px; height: 16px; }
  .page-home .dfy-cmp-fps-unit { font-size: 0.55rem; }
  .page-home .dfy-cmp-fps-tag { font-size: 0.52rem; letter-spacing: 0.1em; }
  /* full-width stacked CTAs = bigger tap targets */
  .page-home .dfy-cta { flex-direction: column; align-items: stretch; gap: 10px; }
  .page-home .dfy-cta .btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .page-home .dfy-cmp-handle { transition: none; }
}

/* ============================ SECTION BACKDROPS ============================ */
/* MOVED to css/prospira.css and de-scoped: .page-stars starfield and the
   .has-bgfx/.bgfx per-section canvas backdrops. */

/* ── Waitlist signup ──────────────────────────────────────────────────────
   One block, used by both forms (pricing section + closing panel). */
.wl { max-width: 560px; margin: 26px auto 0; text-align: center; }
.wl h3 {
  margin: 0 0 8px;
  font-size: clamp(1.15rem, 2.4vw, 1.35rem);
  letter-spacing: -0.02em;
  color: var(--text-hi);
}
.wl > p { margin: 0 0 16px; font-size: 0.95rem; line-height: 1.6; color: var(--text-mid); }
.wl-in-panel { margin-top: 30px; }
.wl-form { display: flex; gap: 10px; }
.wl-input {
  flex: 1;
  min-width: 0;
  min-height: 46px;                 /* comfortably past the 44px touch target */
  padding: 11px 20px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border-mid);
  background: rgba(10, 14, 30, 0.6);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  color: var(--text-hi);
  font: inherit;
  font-size: 0.95rem;
}
.wl-input::placeholder { color: var(--text-low); }
.wl-input:focus { outline: none; border-color: rgba(140, 170, 255, 0.6); }
.wl-input:focus-visible { outline: 2px solid rgba(94, 140, 255, 0.85); outline-offset: 2px; }
.wl-input[aria-invalid="true"] { border-color: rgba(255, 130, 130, 0.7); }
.wl-form .btn { flex-shrink: 0; }
.wl-form.is-sending { opacity: 0.75; }
.wl-msg { margin: 12px 0 0; font-size: 0.88rem; line-height: 1.55; color: var(--text-mid); }
.wl-msg.is-error { color: #ffb4b4; }
@media (max-width: 560px) {
  .wl-form { flex-direction: column; }
  .wl-form .btn { width: 100%; justify-content: center; }
}