/* ProfitProphet — pp-001, direction A (image-led) — stage 8 build.
   Tokens copied verbatim from art-direction.json / wowprofitprophet-site/assets/css/brand.css.
   No CDN, no external fonts — system stacks only. */

:root{
  /* ---- surfaces (register floor: luminance 13-26, deliberately below the category) ---- */
  --bg:#0b0f14;           /* page ground, luminance ~14 */
  --capture-bg:#0d1213;   /* sampled from the heatmap capture's own corner pixels, ~17 */
  --bg-elev:#11161d;      /* ~21 */
  --bg-elev-2:#151b23;    /* ~26 */
  --border:#232a33;       /* hairline — the ledger-row rule (graft C) */
  --line-soft:#1c2530;

  /* ---- type ---- */
  --text:#e6e9ed;
  --text-dim:#8b98a5;
  --text-dimmer:#5f6b78;

  /* ---- brand: GREEN is the brand ---- */
  --green:#2ecc71;
  --green-bright:#4ade80;
  --green-dim:#2ecc7124;
  --green-line:#2ecc7152;

  /* ---- money: GOLD is money, and money only. Declared for brand completeness;
     never painted as chrome anywhere in this stylesheet — every gold pixel on the
     finished page lives inside an unedited capture. ---- */
  --gold:#d4a24c;
  --gold-bright:#e8c17a;

  --loss:#ef4444;

  --radius:12px;
  --max:1120px; /* the one content measure; only .hero-ground is permitted to leave it */

  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Inter,sans-serif;

  /* ---- type scale: base 16, ratio 1.5 — steps 11 13 16 24 36 54 81 ---- */
  --step-11:.6875rem;
  --step-13:.8125rem;
  --step-16:1rem;
  --step-24:1.5rem;
  --step-36:2.25rem;
  --step-81:5.0625rem; /* the one loud moment: the grafted display hero, hero claim only */
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden; /* belt-and-suspenders: nothing here should ever need it */
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--green);}
a:hover{text-decoration:underline;}
h1,h2,h3,h4,p{margin:0;}

.wrap{max-width:var(--max);margin:0 auto;padding:0 24px;}

.eyebrow{
  font-family:var(--mono);
  font-size:var(--step-13);
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--green);
  font-weight:600;
  margin:0 0 10px;
}
.eyebrow.dim{color:var(--text-dim);}

/* ================= header ================= */
header.site{
  border-bottom:1px solid var(--border);
  background:var(--bg);
}
header.site .wrap{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-top:14px;padding-bottom:14px;
}
.wordmark{
  font-weight:700;font-size:var(--step-16);color:var(--text);text-decoration:none;
  display:flex;align-items:baseline;gap:2px;letter-spacing:-.01em;
}
.wordmark:hover{text-decoration:none;}
.wordmark span{color:var(--green-bright);}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:9px 16px;border-radius:8px;border:1px solid var(--border);
  font:inherit;font-size:.8125rem;font-weight:600;cursor:pointer;
  text-decoration:none;color:var(--text);background:transparent;
  white-space:nowrap;
  transition:background .15s,border-color .15s;
}
.btn:hover{border-color:var(--text-dim);text-decoration:none;}
.btn-primary{background:var(--green);color:#06210f;border-color:var(--green);}
.btn-primary:hover{background:var(--green-bright);border-color:var(--green-bright);}
.btn-lg{padding:15px 28px;font-size:var(--step-16);border-radius:9px;}

/* ================= hero ================= */
.hero{padding-top:56px;}
.hero-copy{max-width:760px;margin:0 auto;padding:0 24px;text-align:center;}
.hero-copy h1{
  /* the grafted display step: 81px at 1440, clamping to ~44px at 375, tracking -0.03em */
  font-size:clamp(2.75rem, 1.936rem + 3.474vw, var(--step-81));
  line-height:1.05;
  font-weight:700;
  letter-spacing:-.03em;
  color:var(--text);
}
.hero-copy h1 .accent{color:var(--green-bright);}
.hero-copy .claim{
  margin-top:18px;
  font-size:clamp(1.125rem, 1rem + 1vw, var(--step-24));
  color:var(--text-dim);
  font-weight:500;
  line-height:1.45;
}
.hero-copy .proof{
  margin-top:16px;
  font-size:var(--step-16);
  color:var(--text-dim);
  line-height:1.6;
  max-width:640px;
  margin-left:auto;margin-right:auto;
}
.stat-row{
  display:flex;gap:28px;justify-content:center;margin-top:22px;flex-wrap:wrap;
}
.stat{text-align:center;}
.stat .num{
  display:block;font-family:var(--mono);font-weight:700;
  font-size:1.8rem;color:var(--green-bright);line-height:1;
}
.stat .lbl{
  display:block;margin-top:4px;font-size:var(--step-11);color:var(--text-dim);
  text-transform:uppercase;letter-spacing:.06em;
}

/* the ledger ground: the ONE declared grid break. Full-bleed, edge to edge, no card,
   no border-radius, no drop shadow — the capture's own dark background (--capture-bg)
   dissolves into the page ground (--bg). This element intentionally has no .wrap and no
   max-width, so it runs the full viewport while its sibling .hero-copy stays inside the
   760px measure — that gap is what grid-break.mjs measures at 1440.
   STAGE-11 REMEDIATION: the plate inside is now the ledger (808x652, near-square) rather
   than the heatmap (1314x356, wide-short) — see REMEDIATION-NOTES.md. The frame narrows
   from 1300px to 860px (close to the capture's own 808px native width, so the plate reads
   crisp rather than upscaled) and is centered on the wide dark ground: a large, lit,
   generously-sized plate floating on its own full-bleed floor, which is the brief's own
   permitted alternative to "as wide-and-short as the heatmap was". */
.hero-ground{
  margin-top:44px;
  padding:0 24px;
}
.hero-ground-frame{
  position:relative;
  max-width:840px;
  margin:0 auto;
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--border);
  box-shadow:0 14px 44px rgba(0,0,0,.38);
}
.hero-ground-frame img{width:100%;height:auto;display:block;}
/* callout ring: pixel-measured from the real capture — now the ledger's net-profit line
   ("Net 6,322g  14% ROI  462g/day") rather than the heatmap's Tuesday cell — a CSS
   annotation layer drawn over the image, never baked into it and never fabricated product
   UI. Position is locked at every viewport (percentage of the frame, which scales with the
   plate). Class name kept as .tue-ring: motion.js queries this exact selector and is
   unchanged per the remediation scope. */
.tue-ring{
  position:absolute;
  left:17%; top:10.6%; width:9.5%; height:3.3%;
  border:2px solid var(--green-bright);
  border-radius:5px;
  box-shadow:0 0 0 4px rgba(74,222,128,.14), 0 0 20px rgba(74,222,128,.28);
  pointer-events:none;
}
.hero-ground-caption{
  max-width:var(--max);margin:0 auto;padding:16px 24px 28px;
  text-align:center;
}
.hero-ground-caption p{
  font-size:.85rem;color:var(--text-dim);
  max-width:640px;margin:0 auto;
}
.hero-ground-caption p b{color:var(--green-bright);font-weight:600;}

/* thin tick divider — an abstracted echo of the grid, not a repeat of the photo */
.tick-divider{
  height:8px;
  background-image:repeating-linear-gradient(90deg,
    var(--green-dim) 0 5px, transparent 5px 11px);
  opacity:.7;
}

/* ================= bridge captions (the_stack / sixty_seconds) — borderless ledger rows (graft C) ================= */
.bridge{padding:52px 0;border-bottom:1px solid var(--border);}
.bridge-grid{display:grid;grid-template-columns:1fr;gap:36px;}
.bridge h3{font-size:var(--step-16);font-weight:700;color:var(--text);}
.bridge .claim{margin-top:8px;font-size:.9375rem;color:var(--text-dim);line-height:1.55;}
.bridge .proof{margin-top:10px;font-size:.8125rem;color:var(--text-dim);line-height:1.6;}

/* ================= proof (craft / heatmap detail, shown contained — the ledger's
   large treatment now lives in the hero ground) ================= */
.proof{padding:64px 0;}
.proof > .wrap > .eyebrow{text-align:center;}
.proof-intro{max-width:640px;margin:0 auto 44px;text-align:center;}
.proof-intro h2{font-size:var(--step-24);font-weight:700;}
.proof-grid{display:grid;grid-template-columns:1fr;gap:40px;margin-top:8px;}
figure.proof-figure{
  margin:0;background:var(--bg-elev);border:1px solid var(--border);
  border-radius:var(--radius);padding:18px;
}
figure.proof-figure img{
  border-radius:8px;border:1px solid var(--line-soft);
}
/* STAGE-11 REMEDIATION: the heatmap detail (585x230) is much shorter than the craft
   figure (801x660) at equal column width; grid's default stretch gives this card the
   same outer height as its sibling, so the image is centered in the extra space instead
   of pinned to the top with a dead gap below the caption. */
.proof-figure-secondary{
  display:flex;flex-direction:column;justify-content:center;
}
figure.proof-figure .fig-label{
  font-family:var(--mono);font-size:var(--step-11);letter-spacing:.08em;
  /* text-dim, not text-dimmer: text-dimmer measures 3.53:1 on this ground, under the
     4.5:1 body-text floor; text-dim measures 6.4-6.5:1 */
  text-transform:uppercase;color:var(--text-dim);margin-bottom:10px;
}
figcaption h3{font-size:1.15rem;font-weight:700;color:var(--text);margin-top:16px;}
figcaption .claim{margin-top:8px;font-size:.9375rem;color:var(--text-dim);line-height:1.55;}
figcaption .proof-text{margin-top:8px;font-size:.8125rem;color:var(--text-dim);line-height:1.6;}

/* ================= the loop — borderless contact sheet, the appendix not the argument ================= */
.loop{padding:60px 0;border-top:1px solid var(--border);}
.loop-copy{max-width:640px;margin:0 auto;text-align:center;}
.loop-copy h3{font-size:1.4rem;font-weight:700;}
.loop-copy .claim{margin-top:10px;font-size:var(--step-16);color:var(--text-dim);line-height:1.55;}
.loop-copy .proof-text{margin-top:10px;font-size:.85rem;color:var(--text-dim);line-height:1.6;}
.loop-strip{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
  max-width:600px;margin:32px auto 0;
}
.loop-thumb{
  background:var(--bg-elev);border:1px solid var(--border);border-radius:8px;
  overflow:hidden;
}
.loop-thumb .crop{
  aspect-ratio:4/3;overflow:hidden;position:relative;
}
.loop-thumb .crop img{
  position:absolute;top:0;left:0;width:100%;height:auto;
}
.loop-thumb .cap{
  padding:7px 8px;font-family:var(--mono);font-size:.65625rem;
  letter-spacing:.04em;text-transform:uppercase;color:var(--text-dim);
  border-top:1px solid var(--border);text-align:center;
}

/* ================= trust grid (tos_safe / patch_day / anniversary / wisdom) — borderless ledger rows ================= */
.trust{padding:60px 0;border-top:1px solid var(--border);}
.trust-grid{display:grid;grid-template-columns:1fr;gap:34px;}
.trust-item h4{font-size:var(--step-16);font-weight:700;color:var(--text);}
.trust-item .claim{margin-top:8px;font-size:.875rem;color:var(--text-dim);line-height:1.55;}
.trust-item .proof-text{margin-top:8px;font-size:.78125rem;color:var(--text-dim);line-height:1.6;}
.trust-item .stat-row{justify-content:flex-start;margin-top:14px;gap:22px;}
.trust-item .stat .num{font-size:1.3rem;}
.trust-item .thumb{
  margin-bottom:14px;border-radius:8px;overflow:hidden;border:1px solid var(--border);
  max-width:220px;
}

/* ================= close ================= */
.close{padding:64px 0 76px;border-top:1px solid var(--border);}
.close-grid{
  display:grid;grid-template-columns:1fr;gap:40px;align-items:center;
}
.close-copy h2{font-size:clamp(1.75rem, 1.4rem + 2vw, var(--step-36));font-weight:700;line-height:1.15;}
.close-copy .claim{margin-top:14px;font-size:1.0625rem;color:var(--text-dim);line-height:1.55;}
.close-copy .proof-text{margin-top:12px;font-size:.875rem;color:var(--text-dim);line-height:1.6;}
.close-copy .cta-row{margin-top:26px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.close-copy .cta-fine{font-size:.78125rem;color:var(--text-dim);}
.close-shot{
  background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius);
  padding:14px;
}
.close-shot img{border-radius:8px;border:1px solid var(--line-soft);}
.close-shot .fig-label{
  font-family:var(--mono);font-size:var(--step-11);letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-dim);margin-bottom:8px;
}

/* ================= footer ================= */
footer.site{border-top:1px solid var(--border);padding:28px 0;}
footer.site .wrap{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
}
footer.site .fine{font-size:.78125rem;color:var(--text-dim);}
footer.site a{color:var(--text-dim);font-size:.8125rem;}

/* ================= breakpoints — mobile-first; base styles above are correct at 375px ================= */
@media (max-width:479px){
  .wrap{padding:0 16px;}
  figure.proof-figure{padding:10px;}
  .close-shot{padding:10px;}
  .hero-ground-caption{padding:14px 16px 24px;}
}
@media (min-width:700px){
  .bridge-grid{grid-template-columns:1fr 1fr;}
  .trust-grid{grid-template-columns:1fr 1fr;}
  .loop-strip{max-width:640px;}
  .close-grid{grid-template-columns:1.1fr .9fr;}
}
@media (min-width:1100px){
  .proof-grid{grid-template-columns:1fr 1fr;gap:32px;}
  .trust-grid{grid-template-columns:repeat(4,1fr);}
  .loop-strip{max-width:760px;}
}

/* ======================================================================
   MOTION — stage 7 tokens (motion.tokens.json), implemented as named
   @keyframes so register-conformance.mjs's KEYFRAMES_RULE count sees them.
   ====================================================================== */

@keyframes heroClaimSettle{
  from{transform:translateY(10px);}
  to{transform:translateY(0);}
}
@keyframes heroLineIn{
  from{opacity:0;transform:translateY(6px);}
  to{opacity:1;transform:translateY(0);}
}
@keyframes groundLift{
  from{opacity:.55;filter:brightness(.86);transform:scale(1.008);}
  to{opacity:1;filter:brightness(1);transform:scale(1);}
}
@keyframes ringBloom{
  from{
    opacity:0;
    transform:scale(1.06);
    box-shadow:0 0 0 0 rgba(74,222,128,0), 0 0 0 0 rgba(74,222,128,0);
  }
  to{
    opacity:1;
    transform:scale(1);
    box-shadow:0 0 0 4px rgba(74,222,128,.14), 0 0 20px rgba(74,222,128,.28);
  }
}
@keyframes ringBreathe{
  /* resting value (0%/50%/100%) is the exact box-shadow ringBloom hands off at, so the
     loop starts with no snap; the breath swings +/-30% of that alpha at the quarter marks. */
  0%,50%,100%{box-shadow:0 0 0 4px rgba(74,222,128,.14), 0 0 20px rgba(74,222,128,.28);}
  25%{box-shadow:0 0 0 4px rgba(74,222,128,.182), 0 0 20px rgba(74,222,128,.364);}
  75%{box-shadow:0 0 0 4px rgba(74,222,128,.098), 0 0 20px rgba(74,222,128,.196);}
}
@keyframes settleUp{
  from{opacity:0;transform:translateY(8px);}
  to{opacity:1;transform:translateY(0);}
}
@keyframes riseIn{
  from{opacity:0;transform:translateY(12px);}
  to{opacity:1;transform:translateY(0);}
}

/* ---- Moment 1: the claim lands — hero, on load. Pure CSS, 0 KB JS, no observer.
   The h1 NEVER starts transparent or hidden (LCP-safe): only its transform settles.
   The sub-claim, proof and stat row follow on a 70ms stagger, fading in behind it. ---- */
.hero-copy h1{
  animation:heroClaimSettle 520ms cubic-bezier(.22,1,.36,1) both;
}
.hero-copy .claim{
  animation:heroLineIn 520ms cubic-bezier(.22,1,.36,1) 70ms both;
}
.hero-copy .proof{
  animation:heroLineIn 520ms cubic-bezier(.22,1,.36,1) 140ms both;
}
.hero-copy .stat-row{
  animation:heroLineIn 520ms cubic-bezier(.22,1,.36,1) 210ms both;
}

/* ---- Moments 2-5: scroll-into-view. Default state (no JS, or motion.js never fetched
   because prefers-reduced-motion is set) is the FINAL, fully visible state — identical
   to the approved static comp. Only once motion.js adds body.motion-armed does an
   element drop to its pre-animation state, to be revealed by its own IntersectionObserver
   entry. This is what keeps the page "fully readable if [the motion module] never arrives". ---- */

/* moment 2: the ground arrives — an exposure lift on the photograph, never a data build.
   No pixel inside the capture moves; opacity/filter/transform only. */
body.motion-armed .hero-ground-frame img.plate{
  opacity:.55;
  filter:brightness(.86);
  transform:scale(1.008);
}
body.motion-armed .hero-ground.is-inview .hero-ground-frame img.plate{
  animation:groundLift 900ms cubic-bezier(.16,1,.3,1) both;
}

/* moment 3: the Tuesday-evening ring — the set piece, and the only loop on the page.
   260ms after the ground plate settles (900ms) the ring blooms in (720ms), then holds a
   slow 3.6s halo breath for as long as the ground stays in view. Position/size never move —
   only opacity, scale-on-entry and the box-shadow's glow. */
body.motion-armed .tue-ring{
  opacity:0;
}
body.motion-armed .hero-ground.is-inview .tue-ring{
  animation:
    ringBloom 720ms cubic-bezier(.33,1,.68,1) 1160ms both,
    ringBreathe 3.6s ease-in-out 1880ms infinite;
}
body.motion-armed .tue-ring.paused{
  animation-play-state:paused;
}

/* moment 4: the loop strip settles — Browse, then My Auctions, then Watchlist, on a 90ms
   stagger. The cheapest move on the page, on purpose: this is the appendix, not the argument. */
body.motion-armed .loop-strip .loop-thumb{
  opacity:0;
  transform:translateY(8px);
}
body.motion-armed .loop-strip.is-inview .loop-thumb:nth-child(1){
  animation:settleUp 380ms cubic-bezier(.22,1,.36,1) 0ms both;
}
body.motion-armed .loop-strip.is-inview .loop-thumb:nth-child(2){
  animation:settleUp 380ms cubic-bezier(.22,1,.36,1) 90ms both;
}
body.motion-armed .loop-strip.is-inview .loop-thumb:nth-child(3){
  animation:settleUp 380ms cubic-bezier(.22,1,.36,1) 180ms both;
}

/* moment 5: the close resolves — Fig. 3 rises first, the CTA resolves 140ms behind it,
   the last thing on the page to finish moving. It then holds: no pulse, no shimmer. */
body.motion-armed .close-shot{
  opacity:0;
  transform:translateY(12px);
}
body.motion-armed .close-shot.is-inview{
  animation:riseIn 420ms cubic-bezier(.22,1,.36,1) both;
}
body.motion-armed .close-copy .cta-row{
  opacity:0;
  transform:translateY(6px);
}
body.motion-armed .close-copy .cta-row.is-inview{
  animation:heroLineIn 420ms cubic-bezier(.22,1,.36,1) 140ms both;
}

/* ---- reduced motion: every moment's declared end state is the static comp.
   tos_safe never had a keyframe in the first place, so it needs nothing here. ---- */
@media (prefers-reduced-motion: reduce){
  .hero-copy h1,
  .hero-copy .claim,
  .hero-copy .proof,
  .hero-copy .stat-row,
  .hero-ground-frame img.plate,
  .tue-ring,
  .loop-strip .loop-thumb,
  .close-shot,
  .close-copy .cta-row{
    animation:none;
    opacity:1;
    transform:none;
    filter:none;
  }
  .tue-ring{
    box-shadow:0 0 0 4px rgba(74,222,128,.14), 0 0 20px rgba(74,222,128,.28);
  }
}