/* ============================================================
   Pulse product page, second pass.
   Marcus 2026-09-25: "We have seemed to abandon the plot to make the colors
   pop on this page. This is starting to look very AI slop and boring...
   Zoom uses graphics...things move...there is color contrast...there are
   people that look like they are using the product. We have all of these
   things. You have access to the source code for Pulse."

   EVERY PRODUCT VISUAL HERE IS REAL. The phone screens in assets/pulse/ are
   captures of the live public demo (www.tradechology.com/demo) driven with its
   own arrow-key controls on 2026-09-25: the TSLA chart card, a GOLDEN SETUP
   card, the full-screen REKT and PROFIT feedback, a mid-streak BTC card and
   the ten-swipe "Early Insights" gate. The numbers on them (accuracy 70%,
   streak 6) are from that capture session, not any trader's account.
   Level colours are tierConfig.ts verbatim (Tailwind 400 shades, gold is the
   app's own #F59E0B). Tier dollar thresholds are deliberately NOT shown: they
   are paper-game balances, but "$100,000,000" beside "Hedge Fund Manager" on a
   marketing page reads as an income claim.

   Pattern borrowed from zoom.com/en/products/virtual-meetings: dark hero with
   the product breaking its lower edge, the product's UI laid over a person
   using it, and a feature list whose visual swaps as you move through it.
   ============================================================ */

/* ---------- phone ---------- */
.pl-phone{position:relative;width:268px;flex-shrink:0;border-radius:40px;padding:9px;
  background:linear-gradient(160deg,#1C2748,#0B1227);
  box-shadow:0 28px 60px rgba(0,5,61,.38),inset 0 0 0 1px rgba(255,255,255,.09)}
.pl-phone::before{content:"";position:absolute;top:15px;left:50%;transform:translateX(-50%);
  width:84px;height:22px;border-radius:999px;background:#000;z-index:3}
.pl-screen{position:relative;border-radius:32px;overflow:hidden;background:#030712;aspect-ratio:600/1298}
.pl-screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.pl-screen iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#030712}

/* ---------- hero: the product breaks the gradient's lower edge ---------- */
.pl-hero{padding-bottom:0}
.pl-fan{position:relative;height:520px;margin-top:54px;display:flex;justify-content:center}
.pl-fan .pl-phone{position:absolute;top:0}
.pl-fan .f-l{transform:translateX(-235px) translateY(56px) rotate(-9deg);z-index:1}
.pl-fan .f-c{z-index:3}
.pl-fan .f-r{transform:translateX(235px) translateY(56px) rotate(9deg);z-index:2}
.pl-float{animation:plFloat 6s ease-in-out infinite}
.pl-fan .f-l .pl-float,.pl-fan .f-r .pl-float{animation-delay:-2s}
@keyframes plFloat{0%,100%{translate:0 0}50%{translate:0 -12px}}
.pl-fan-glow{position:absolute;left:50%;top:40%;width:720px;height:300px;transform:translateX(-50%);
  background:radial-gradient(closest-side,rgba(11,92,255,.45),transparent);filter:blur(28px);z-index:0}
.pl-badge{position:absolute;z-index:4;background:#fff;color:var(--navy);border-radius:14px;
  padding:10px 14px;font-size:13px;font-weight:600;box-shadow:0 12px 30px rgba(0,5,61,.25);
  display:flex;align-items:center;gap:9px;white-space:nowrap}
.pl-badge i{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-style:normal;
  font-size:14px;color:#fff}
.pl-badge.b1{left:calc(50% - 360px);top:140px}
.pl-badge.b1 i{background:#EF4444}
.pl-badge.b2{left:calc(50% + 190px);top:96px}
.pl-badge.b2 i{background:#10B981}
.pl-badge.b3{left:calc(50% + 150px);top:360px}
.pl-badge.b3 i{background:#F59E0B}

/* ---------- see it: a phone that plays the real frames on its own ---------- */
.pl-see{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}
.pl-see>*{min-width:0}
.pl-cycle{display:flex;flex-direction:column;align-items:center}
.pl-cycle .pl-screen img{opacity:0;transition:opacity .55s ease}
.pl-cycle .pl-screen img.on{opacity:1}
.pl-cycle-ctl{display:flex;align-items:center;gap:12px;margin-top:18px}
.pl-dots{display:flex;gap:6px}
.pl-dots b{width:7px;height:7px;border-radius:999px;background:var(--steel);transition:all .3s ease}
.pl-dots b.on{width:22px;background:var(--blue)}
.pl-live{border:0;cursor:pointer;background:var(--navy);color:#fff;font:600 13px var(--ff-body);
  padding:9px 15px;border-radius:999px}
.pl-live:hover{background:var(--blue)}
.pl-cap{font-size:12.5px;color:var(--grey);margin-top:12px;text-align:center;max-width:32ch}
.pl-stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:28px}
.pl-stat{background:var(--tint-soft);border:1px solid var(--steel);border-radius:14px;padding:14px 16px}
.pl-stat b{display:block;font-family:var(--ff-display);font-size:26px;line-height:1.1;color:var(--navy)}
.pl-stat span{font-size:12.5px;color:var(--grey)}

/* ---------- UI laid over a person using it ---------- */
.pl-over{position:relative;border-radius:var(--r-lg);overflow:visible}
.pl-over>img.photo{display:block;width:100%;aspect-ratio:4/3;height:auto;object-fit:cover;
  border-radius:var(--r-lg)}
.pl-over .ui{position:absolute;box-shadow:0 22px 50px rgba(0,5,61,.38);border-radius:18px;overflow:hidden}
.pl-over .ui img{display:block;width:100%;height:auto}
.pl-over .ui.r{right:-22px;bottom:-30px;width:46%}
.pl-over .ui.l{left:-22px;bottom:-30px;width:34%}
.pl-split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.pl-split>*{min-width:0}

/* ---------- steps: the visual follows the step ---------- */
.pl-steps{display:grid;grid-template-columns:1fr auto;gap:70px;align-items:center}
.pl-steps>*{min-width:0}
.pl-tab{display:block;width:100%;text-align:left;background:none;border:0;cursor:pointer;
  border-left:3px solid var(--steel);padding:16px 0 16px 22px;font:inherit;color:inherit}
.pl-tab .k{font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--grey)}
.pl-tab h3{font-family:var(--ff-display);font-size:23px;margin:4px 0 0;color:var(--grey);transition:color .2s}
.pl-tab p{font-size:15px;line-height:1.55;color:var(--grey);margin:8px 0 0;display:none}
.pl-tab.on{border-left-color:var(--blue)}
.pl-tab.on .k{color:var(--blue)}
.pl-tab.on h3{color:var(--navy)}
.pl-tab.on p{display:block}
.pl-tab .bar{display:block;height:2px;background:var(--tint);margin-top:12px;border-radius:2px;overflow:hidden}
.pl-tab .bar i{display:block;height:100%;width:0;background:var(--blue)}
.pl-tab.on .bar i{animation:plBar 4.8s linear forwards}
@keyframes plBar{to{width:100%}}
.pl-stepphone .pl-screen img{opacity:0;transition:opacity .45s ease}
.pl-stepphone .pl-screen img.on{opacity:1}

/* ---------- seven patterns, on dark for contrast ---------- */
.pl-dark{background:linear-gradient(170deg,#00053D 0%,#0A1560 60%,#0B2C8F 100%);color:#fff;padding:96px 0}
.pl-dark .h2{color:#fff}
.pl-dark .lede{color:rgba(255,255,255,.78)}
.pl-dark .eyebrow{color:#7FB0FF}
.pl-patterns{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:40px}
.pl-patterns>*{min-width:0}
.pl-pat{position:relative;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  border-radius:16px;padding:22px 20px 20px;overflow:hidden;
  transition:transform .2s ease,background .2s ease,border-color .2s ease}
.pl-pat:hover{transform:translateY(-4px);background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.25)}
.pl-pat::before{content:"";position:absolute;left:0;top:0;right:0;height:4px;background:var(--c,#60A5FA)}
.pl-pat .n{font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--c,#60A5FA)}
.pl-pat h3{font-family:var(--ff-display);font-size:21px;margin:6px 0 8px;color:#fff}
.pl-pat p{font-size:14px;line-height:1.5;color:rgba(255,255,255,.72);margin:0}
.pl-pat.is-q{background:linear-gradient(140deg,#0B5CFF,#22D3EE);border-color:transparent;
  display:flex;flex-direction:column;justify-content:center}
.pl-pat.is-q::before{display:none}
.pl-pat.is-q h3{margin-top:0}
.pl-pat.is-q a{color:#fff;font-weight:700;font-size:15px;margin-top:6px}

/* ---------- level up ---------- */
.pl-level{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:start}
.pl-level>*{min-width:0}
.pl-grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pl-stack{display:grid;gap:14px}
.pl-grid2>*{min-width:0}
.pl-feat{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px}
.pl-feat .ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  font-size:18px;margin-bottom:12px}
.pl-feat h3,.pl-feat h4{font-family:var(--ff-display);font-weight:500;font-size:19px;margin:0 0 7px}
.pl-feat p{font-size:14px;line-height:1.55;color:var(--grey);margin:0}
.pl-ladder{background:#0B1227;border-radius:20px;padding:26px 24px;color:#fff;
  box-shadow:0 22px 50px rgba(0,5,61,.28)}
.pl-ladder .t{font-size:11px;font-weight:700;letter-spacing:.13em;color:#7FB0FF;margin-bottom:16px}
.pl-rung{display:flex;align-items:center;gap:12px;padding:9px 0;border-top:1px solid rgba(255,255,255,.07)}
.pl-rung:first-of-type{border-top:0}
.pl-rung i{width:10px;height:10px;border-radius:999px;background:var(--c);box-shadow:0 0 12px var(--c);flex-shrink:0}
.pl-rung b{font-weight:600;font-size:15px}
.pl-rung span{margin-left:auto;font-size:12px;color:rgba(255,255,255,.45)}
.pl-rung .meter{flex:1;height:4px;border-radius:4px;background:rgba(255,255,255,.07);margin-left:10px;overflow:hidden}
.pl-rung .meter u{display:block;height:100%;background:var(--c);width:var(--w)}

/* ---------- free band ---------- */
.pl-free{background:linear-gradient(120deg,#0B5CFF 0%,#1E6BFF 45%,#22D3EE 100%);color:#fff;
  padding:84px 0;text-align:center}
.pl-free .h2{color:#fff}
.pl-free .lede{color:rgba(255,255,255,.9);max-width:62ch;margin:14px auto 0}
.pl-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:28px}
.pl-chips span{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:10px 18px;font-size:14.5px;font-weight:600}
.pl-chips span::before{content:"\2713";font-weight:800}

/* ---------- people ---------- */
.pl-team{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:34px}
.pl-team>*{min-width:0}
.pl-person{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;
  display:grid;grid-template-columns:54px 1fr;gap:18px;align-items:start}
.pl-av{width:54px;height:54px;border-radius:999px;background:var(--tint);color:var(--blue);
  display:grid;place-items:center;font-weight:700;font-size:18px}
.pl-person h3{font-family:var(--ff-display);font-size:21px;margin:0}
.pl-person .role{font-size:12.5px;letter-spacing:.06em;color:var(--blue);font-weight:600;margin:3px 0 10px}
.pl-person p{font-size:14.5px;line-height:1.6;color:#31384F;margin:0}

/* ---------- entrances ---------- */
.pl-reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.pl-reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .pl-float{animation:none}
  .pl-reveal{opacity:1;transform:none;transition:none}
  .pl-tab.on .bar i{animation:none;width:100%}
}

@media (max-width:1060px){
  .pl-patterns{grid-template-columns:repeat(2,1fr)}
  .pl-badge{display:none}
}
@media (max-width:900px){
  .pl-see,.pl-split,.pl-level,.pl-steps{grid-template-columns:1fr;gap:40px}
  .pl-steps .pl-stepphone{justify-self:center}
  .pl-fan{height:470px}
  .pl-fan .f-l{transform:translateX(-120px) translateY(50px) rotate(-8deg)}
  .pl-fan .f-r{transform:translateX(120px) translateY(50px) rotate(8deg)}
  .pl-over .ui.r{right:-6px;width:44%}
  .pl-over .ui.l{left:-6px}
}
@media (max-width:600px){
  .pl-phone{width:218px;border-radius:34px;padding:7px}
  .pl-screen{border-radius:28px}
  .pl-fan{height:400px;margin-top:40px}
  .pl-fan .f-l{transform:translateX(-78px) translateY(42px) rotate(-8deg) scale(.86)}
  .pl-fan .f-r{transform:translateX(78px) translateY(42px) rotate(8deg) scale(.86)}
  .pl-fan-glow{width:100%}
  .pl-patterns,.pl-grid2,.pl-team,.pl-stat-row{grid-template-columns:1fr}
  /* The insights card is wide, so on a phone it stacks under the photo. The REKT
     screen is a tall phone capture: stacked at that width it became a giant red
     block, so it stays a small overlay on the photo instead. */
  .pl-over .ui.r{position:relative;right:auto;left:auto;bottom:auto;width:66%;
    margin:-60px auto 0;display:block}
  .pl-over .ui.l{left:12px;bottom:-22px;width:30%;border-radius:12px}
}