/* ============================================================
   PrimeTrend page

   Loaded AFTER home.css and scoped entirely under `body.pt`. It carries
   this page's layout, motion and vocabulary — not its colours. Every
   colour comes from the active site theme, so the theme switcher in the
   header moves this page with the rest of the site.

   This page shipped as the site's only dark one. That look now lives in
   the theme list as a dark preset any page can wear, chosen by the reader
   rather than fixed here.

   PrimeTrend is a concept in design, not a running product. Nothing on
   the page claims otherwise: there is no figures row, because every
   number in one would have to be invented.

   Type: Space Grotesk (display) · Inter (body)
   ============================================================ */

body.pt {
  /* No palette here any more. This page shipped as the site's only dark
     one; it now takes whatever ground the active theme sets, and the theme
     list carries dark options so the look is still reachable — chosen by
     the reader in the header rather than fixed by the page.

     Gold appeared only where the page talks about money. That meaning is
     now --pending, a theme token, so it survives a palette change. */
  /* --accent is the fill colour and --accent-2 the text colour; rose is
     read far more often than it is filled here, so it maps to the one the
     palette guarantees against every ground */
  --pt-rose:    var(--accent-2);
  --pt-rose-lt: var(--lime-b);
  --pt-gold:    var(--pending);
  --pt-gold-lt: var(--warm-2);
  --pt-ink-dim: var(--ink-3);

  --radius: 16px;
  --radius-sm: 999px;

  --ff-display: "Space Grotesk", system-ui, sans-serif;
  --ff-body: "Inter", system-ui, sans-serif;
  --ff-mono: "Space Grotesk", ui-monospace, monospace;
  --ff-serif: "Space Grotesk", system-ui, sans-serif;

  font-family: var(--ff-body);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}


/* the audience field replaces the home page's dotted bit field */
body.pt::before { display: none; }

body.pt ::selection { background: color-mix(in srgb, var(--pt-rose) 45%, transparent); color: var(--ink); }

body.pt h1, body.pt h2, body.pt h3 {
  font-family: var(--ff-display);
  font-weight: 700;
  letter-spacing: -0.03em;
}

/* The page centres on a 1160px measure. Scoped to <main> on purpose: the
   header and footer are shared with every other page and run full-bleed
   there, so capping them here would make this one page's chrome narrower
   than the rest of the site. */
/* the site measure, not this page's own — see the note in allyvora.css */
body.pt main .wrap { max-width: var(--maxw); padding-inline: 40px; }

/* the header is sticky, so an in-page jump has to stop short of it */
body.pt main section[id] { scroll-margin-top: 84px; }

/* ---------- the motion vocabulary ---------- */
@keyframes pt-rise    { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes pt-pulse   { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .3; transform: scale(.72); } }
@keyframes pt-sweep   { from { background-position: 0% 50%; } to { background-position: 200% 50%; } }
@keyframes pt-drift   { 0%, 100% { transform: translateY(-6px); } 50% { transform: translateY(8px); } }
@keyframes pt-ring    { 0% { transform: translate(-50%, -50%) scale(.4); opacity: .8; }
                        100% { transform: translate(-50%, -50%) scale(1); opacity: 0; } }

/* ============================================================
   THE FIELD

   A <canvas>, so the browser offers no "Save image as…" on it — the site
   emits no <img> anywhere and this page is no exception.
   ============================================================ */
.pt-field {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
  opacity: 0; transition: opacity 1.2s ease;
}
.pt-field.on { opacity: 1; }

/* Everything real sits above the field. The z-index matters: the canvas
   is position:fixed at z-index 0, and a positioned box outranks a
   non-positioned one in the same stacking context — so the shared footer
   (static in home.css) would paint UNDER the field without it.

   The nav is deliberately absent: home.css makes it position:sticky at
   z-index 50, which already clears the field. */
body.pt main,
body.pt .footer { position: relative; z-index: 1; }

/* the click ripple, appended by the script */
.pt-ring {
  position: fixed; z-index: 2;
  border: 1px solid var(--pt-rose);
  border-radius: 50%; pointer-events: none;
  animation: pt-ring .9s ease-out forwards;
}

/* ============================================================
   SHARED FURNITURE
   ============================================================ */
.pt-eyebrow {
  font-family: var(--ff-mono);
  font-size: 12px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--pt-rose); font-weight: 600;
  margin: 0;
}
.pt-eyebrow.gold { color: var(--pt-gold); }
.pt-h2 {
  font-size: clamp(32px, 4vw, 50px);
  line-height: 1.06; margin: 18px 0 0;
  max-width: 720px;
}
.pt-lead {
  font-size: 17.5px; line-height: 1.7;
  color: var(--ink-2); margin: 22px 0 0;
  max-width: 660px; text-wrap: pretty;
}
.pt-sec { padding-block: clamp(78px, 9vw, 118px); }
.pt-sec-line { border-top: 1px solid var(--line-soft); }

/* the pill buttons — dark ink on a bright fill, never white on rose
   (white on this rose is 3.4:1; the ground is 5.8:1) */
body.pt .btn {
  border-radius: 999px;
  font-family: var(--ff-display); font-weight: 600;
  font-size: 15px; padding: 15px 30px;
}
/* fill and label from home.css: one primary button across the whole site */
body.pt .btn-primary {
  box-shadow: 0 10px 30px color-mix(in srgb, var(--lime-c) 28%, transparent);
}
body.pt .btn-primary:hover {
  box-shadow: 0 14px 38px color-mix(in srgb, var(--lime-c) 38%, transparent);
}
body.pt .btn-ghost {
  border: 1px solid var(--line); color: var(--ink); background: none;
}
body.pt .btn-ghost:hover {
  border-color: var(--pt-rose); color: var(--pt-rose); background: var(--tint);
}

/* ============================================================
   THE CONCEPT PILL
   Repeated at the top and the bottom on purpose: the page describes a
   product that does not exist yet, and it says so where it is read.
   ============================================================ */
.pt-status {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 16px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--pt-gold) 40%, transparent);
  background: color-mix(in srgb, var(--pt-gold) 9%, transparent);
  font-family: var(--ff-mono); font-size: 12px;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--pt-gold); margin: 0;
}
.pt-status i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--pt-gold);
  animation: pt-pulse 2.2s ease-in-out infinite;
}

/* ============================================================
   HERO
   ============================================================ */
.pt-hero { padding: clamp(110px, 14vw, 170px) 0 clamp(70px, 8vw, 100px); }
.pt-hero h1 {
  font-size: clamp(48px, 7vw, 92px);
  line-height: .98; letter-spacing: -0.045em;
  margin: 28px 0 0; max-width: 900px;
}
.pt-hero h1 .grad {
  background: linear-gradient(100deg, var(--pt-rose), var(--pt-gold) 60%, var(--pt-rose));
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: pt-sweep 6s linear infinite;
}
.pt-hero-lead {
  font-size: 19px; line-height: 1.65; color: var(--ink-2);
  max-width: 620px; margin: 30px 0 0; text-wrap: pretty;
}
.pt-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 40px; }
.pt-hint {
  font-family: var(--ff-mono); font-size: 11px;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-3); margin: 46px 0 0;
}
/* every hero element enters a beat after the one above it */
.pt-hero > .wrap > * { animation: pt-rise .8s ease both; }
.pt-hero > .wrap > *:nth-child(2) { animation-delay: .1s; }
.pt-hero > .wrap > *:nth-child(3) { animation-delay: .25s; }
.pt-hero > .wrap > *:nth-child(4) { animation-delay: .4s; }
.pt-hero > .wrap > *:nth-child(5) { animation-delay: .55s; }

/* ============================================================
   THE ARGUMENT — three things that are broken
   ============================================================ */
.pt-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 52px; }
.pt-claim {
  padding: 32px 28px; border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  transition: border-color .3s ease, transform .3s ease;
}
.pt-claim:hover { border-color: color-mix(in srgb, var(--pt-rose) 45%, transparent); transform: translateY(-5px); }
.pt-claim b {
  display: block; font-family: var(--ff-mono);
  font-size: 12px; letter-spacing: .2em; color: var(--pt-rose);
}
.pt-claim h3 { font-size: 20px; margin: 14px 0 0; }
.pt-claim p { font-size: 14.5px; line-height: 1.7; color: var(--ink-2); margin: 12px 0 0; }

/* ============================================================
   FEATURES
   Four named groups. The group heading is the promise; the cards under
   it are what delivers it.
   ============================================================ */
.pt-group { margin-top: 56px; }
.pt-group-head {
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line-soft);
}
.pt-group-head h3 { font-size: 24px; margin: 0; }
.pt-group-head span { font-size: 14.5px; color: var(--ink-3); }

.pt-grid-feat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 22px; }
.pt-feat {
  padding: 26px 24px; border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  transition: border-color .3s ease, background .3s ease, transform .3s ease;
}
.pt-feat:hover {
  border-color: color-mix(in srgb, var(--pt-rose) 45%, transparent);
  background: var(--surface-2);
  transform: translateY(-6px);
}
.pt-feat h4 {
  font-family: var(--ff-display); font-weight: 600;
  font-size: 16.5px; margin: 0; letter-spacing: -0.01em;
}
.pt-feat p { font-size: 14px; line-height: 1.65; color: var(--ink-2); margin: 9px 0 0; }
/* anything to do with money is gold, everywhere on the page */
.pt-feat.money { border-color: color-mix(in srgb, var(--pt-gold) 24%, transparent); }
.pt-feat.money:hover { border-color: color-mix(in srgb, var(--pt-gold) 55%, transparent); }
.pt-feat.money h4::after {
  content: "◆"; color: var(--pt-gold);
  font-size: 10px; vertical-align: 3px; margin-left: 8px;
}

/* ============================================================
   HOW THE MONEY WORKS
   ============================================================ */
.pt-money { background: var(--bg-2); border-block: 1px solid var(--line-soft); }
.pt-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 52px; }
.pt-step {
  position: relative;
  padding: 30px 26px; border-radius: 16px;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--pt-gold) 20%, transparent);
}
/* the gold thread running between the steps */
.pt-step::after {
  content: ""; position: absolute; top: 52px; right: -16px;
  width: 16px; height: 1px;
  background: color-mix(in srgb, var(--pt-gold) 55%, transparent);
}
.pt-step:last-child::after { display: none; }
.pt-step b {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--pt-gold) 55%, transparent);
  font-family: var(--ff-mono); font-size: 13px; color: var(--pt-gold);
}
.pt-step h4 { font-family: var(--ff-display); font-weight: 600; font-size: 17px; margin: 18px 0 0; }
.pt-step p { font-size: 14px; line-height: 1.65; color: var(--ink-2); margin: 9px 0 0; }
.pt-money-note {
  margin: 40px 0 0; font-size: 15px; line-height: 1.7;
  color: var(--ink-2); max-width: 660px;
}
.pt-money-note strong { color: var(--pt-gold); font-weight: 600; }

/* ============================================================
   WHERE IT STANDS
   The honest section. Given its own panel so it cannot be skimmed past.
   ============================================================ */
.pt-stands {
  border: 1px solid color-mix(in srgb, var(--pt-gold) 30%, transparent);
  border-radius: 20px;
  background: var(--surface);
  padding: clamp(34px, 5vw, 54px);
}
.pt-stands h2 { font-size: clamp(26px, 3vw, 36px); margin: 20px 0 0; }
.pt-stands p { font-size: 16px; line-height: 1.75; color: var(--ink-2); margin: 18px 0 0; max-width: 680px; }
.pt-stands ul {
  list-style: none; padding: 0; margin: 26px 0 0;
  display: grid; gap: 12px; font-size: 15px; color: var(--ink-2);
}
.pt-stands li { display: flex; gap: 12px; align-items: baseline; }
.pt-stands li::before { content: "◆"; color: var(--pt-gold); font-size: 10px; }

/* ============================================================
   CTA
   ============================================================ */
.pt-cta { text-align: center; padding-bottom: clamp(90px, 11vw, 140px); }
.pt-cta h2 {
  font-size: clamp(34px, 5vw, 64px);
  line-height: 1.03; margin: 0;
}
.pt-cta h2 .grad {
  background: linear-gradient(100deg, var(--pt-rose), var(--pt-gold));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.pt-cta p { font-size: 17px; color: var(--ink-2); margin: 22px auto 0; max-width: 540px; line-height: 1.7; }
.pt-cta .pt-actions { justify-content: center; }

/* ============================================================
   THE SHARED CHROME, RE-TINTED
   home.css builds the nav and footer from tokens, so the dark palette
   above already carries them; these set what the tokens do not.
   ============================================================ */
body.pt .nav {
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  border-bottom: 1px solid var(--line-soft);
}
body.pt .footer { background: var(--bg); border-top: 1px solid var(--line-soft); }

/* ============================================================
   REVEALS
   Armed by the script (body.pt-js), so with JavaScript blocked the page
   renders plainly rather than staying invisible.
   ============================================================ */
body.pt-js [data-reveal] {
  opacity: 0; transform: translateY(30px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1);
}
body.pt-js [data-reveal].pt-in { opacity: 1; transform: none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1040px) {
  .pt-grid-feat { grid-template-columns: repeat(2, 1fr); }
  .pt-flow { grid-template-columns: repeat(2, 1fr); }
  /* the connecting thread only makes sense on one unbroken row */
  .pt-step::after { display: none; }
}
@media (max-width: 880px) {
  .pt-grid-3 { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  body.pt main .wrap { padding-inline: 22px; }
  .pt-hero-lead { font-size: 17px; }
}
@media (max-width: 560px) {
  .pt-grid-feat, .pt-flow { grid-template-columns: 1fr; }
  .pt-actions .btn { width: 100%; justify-content: center; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
/* See the note in vorasphere.css: hiding each variant behind its own query
   left a device reporting hover:none with pointer:fine showing both. */
.pt-hint .on-touch { display: none; }
@media (hover: none) and (pointer: coarse) {
  .pt-hint .on-pointer { display: none; }
  .pt-hint .on-touch { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
  body.pt *,
  body.pt *::before,
  body.pt *::after {
    animation: none !important;
    transition: none !important;
  }
  body.pt-js [data-reveal] { opacity: 1; transform: none; }
  body.pt .pt-hero h1 .grad,
  body.pt .pt-cta h2 .grad {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--pt-rose);
  }
}