/* ============================================================ tokens
   PULSE's original palette on the reference layout's structure: square
   corners, hairline rules, one full-width band per section.

   The one rule that shapes everything below: acid #b6fb0a is a FILL, never
   body text. At 1.5:1 against off-white it is unreadable as type, so acid
   carries blocks and buttons while --deep carries links and accent text. */
:root {
  --bg:        #f4f4f4;                  /* PULSE off-white — the page ground */
  --card:      #ffffff;
  --tile:      #ececec;
  --ink:       #111111;
  --muted:     #6f6f6f;
  --dim:       #8c8c8c;

  /* Acid, dimmed one step from the original #b6fb0a. Measured: luminance
     0.790 -> 0.557, coal-on-acid still 11.2:1, and it now separates from the
     white page at 1.73:1 instead of 1.25:1 — so the panel reads as a panel. */
  --acid:      #9cd70a;                  /* PULSE acid — fills only */
  --hi:        #dbf0a8;                  /* hover fill for boxes and rows */
  --acid-deep: #8bc108;
  --acid-soft: #dff0b4;
  --acid-pale: #f0f9dc;
  --coal:      #041004;                  /* PULSE coal — inverted blocks */
  --deep:      #3d7a00;                  /* acid's readable twin, for type */

  --on-coal:     #bfd4ba;
  --on-coal-dim: #8fa88a;

  --line:      rgba(17, 17, 17, 0.10);
  --line2:     rgba(17, 17, 17, 0.20);

  --burn:      #c2410c;
  --red:       #e5484d;
  --amber:     #f5a524;
  --green:     #2fd10f;

  /* Corner scale. The layout is hairline-ruled and technical, so containers
     stay modest — enough to soften, not enough to read as a consumer app. */
  --r-sm: 6px;                           /* chips, tags */
  --r-md: 10px;                          /* buttons, eyebrow, note */
  --r-lg: 14px;                          /* bordered containers */
  --r-xl: 20px;                          /* the hero panel */
  --max: 1280px;
  --disp: Inter, system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--disp);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; border: 0; background: none; color: inherit; }
img { max-width: 100%; }
[hidden] { display: none !important; }

.mono { font-family: var(--mono); }
.acid { color: var(--deep); }
.dim  { color: var(--dim); }

.wrap { width: min(var(--max), calc(100% - clamp(32px, 7vw, 112px))); margin: 0 auto; }

/* Every section is a full-width band divided by a single hairline. */
.band { border-top: 1px solid var(--line); padding: clamp(56px, 7vw, 104px) 0; }
.band:first-of-type { border-top: 0; }

/* ------------------------------------------------- the small mono label */
/* Used on every cell, card and control. Tiny, uppercase, widely tracked —
   it is what makes the grid read as an instrument panel rather than a page. */
.lbl, .num, .eyebrow, .tag, .verify, .tabs a, .chip {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ============================================================ nav */
.nav {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(244, 244, 244, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 66px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 19px; letter-spacing: -0.03em; }
.brand img { width: 34px; height: 34px; display: block; border-radius: var(--r-md); }

.tabs { display: flex; gap: 26px; }
.tabs a { color: var(--dim); transition: color 0.15s; }
.tabs a:hover, .tabs a.on { color: var(--ink); }

.right { display: flex; align-items: center; gap: 10px; }

/* ============================================================ buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border: 1px solid var(--line2);
  border-radius: var(--r-md);
  background: var(--card);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.btn:hover { border-color: var(--ink); }
.btn.primary { background: var(--acid); border-color: var(--acid); color: var(--coal); }
.btn.primary:hover { background: var(--acid-deep); border-color: var(--acid-deep); }
.btn.mute { color: var(--dim); background: transparent; cursor: default; }
.btn.mute:hover { border-color: var(--line2); }

/* ============================================================ hero */
.hero { padding-top: clamp(28px, 4vw, 56px); }

/* PULSE's signature block. The logo sits on it as a coal silhouette: the
   supplied artwork has a near-white wordmark that measures 1.2:1 against this
   colour, so the artwork's own colours cannot be used here. */
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(24px, 3vw, 48px);
  align-items: center;
  background: var(--acid);
  border-radius: var(--r-xl);
  padding: clamp(32px, 4vw, 58px);
}
.hero-copy { align-self: center; }

.eyebrow {
  display: inline-flex;
  gap: 9px;
  border: 1px solid rgba(4, 16, 4, 0.30);
  border-radius: var(--r-md);
  padding: 7px 12px;
  color: var(--coal);
  align-items: flex-start;
}
.eyebrow .dot, .eyebrow .sq { margin-top: 5px; }
.eyebrow span { line-height: 1.5; }
.eyebrow .sq { width: 7px; height: 7px; flex: none; background: var(--coal); }
.eyebrow .dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--coal); }
.eyebrow .dot.amber { background: #7a5200; }
.eyebrow .dot.red { background: #8a1d20; }
.eyebrow b { font-weight: 700; color: var(--coal); }

h1 {
  font-size: clamp(40px, 6vw, 88px);
  font-weight: 800;
  line-height: 0.94;
  letter-spacing: -0.045em;
  margin: 24px 0 20px;
  text-transform: uppercase;
  color: var(--ink);
}
/* On acid the emphasised words go darker, not lighter. */
.hero h1 .acid { color: var(--coal); }

.lede { margin: 0; max-width: 54ch; color: #1d3f18; font-size: 16px; line-height: 1.6; }
.lede b { color: var(--coal); font-weight: 700; }

.cta { display: flex; gap: 10px; margin-top: 26px; flex-wrap: wrap; }
.hero .btn { background: transparent; border-color: rgba(4, 16, 4, 0.3); color: var(--coal); }
.hero .btn:hover { border-color: var(--coal); }
.hero .btn.primary { background: var(--coal); border-color: var(--coal); color: var(--acid); }
.hero .btn.primary:hover { background: #0b2408; border-color: #0b2408; }
.hero .btn.mute { color: rgba(4, 16, 4, 0.55); }

.verify { margin-top: 18px; color: var(--coal); }

/* The artwork fills its column edge to edge. object-position keeps the rocket
   and the growth bars in frame when the column gets narrow. */
.hero-art { position: relative; display: grid; place-items: center; }
.hero-art img { display: block; width: min(100%, 460px); height: auto; }
.hero-art .tag {
  position: absolute;
  top: 0;
  left: 0;
  background: var(--coal);
  border-radius: var(--r-sm);
  padding: 6px 10px;
  color: var(--acid);
}

/* the four-cell figure strip under the hero */
.strip { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--card); margin-top: 16px; }
.strip div { padding: 20px 22px; border-left: 1px solid var(--line); }
.strip div:first-child { border-left: 0; }
.strip b { display: block; font-size: 26px; font-weight: 700; letter-spacing: -0.03em; }
.strip div:first-child b, .strip div:nth-child(2) b { color: var(--deep); }
.strip small { display: block; margin-top: 5px; color: var(--dim); font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; }

/* ============================================================ section head */
/* Heading on the left, the explanation on the right — the reference's
   signature move, and what keeps long copy out of the headline column. */
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: clamp(24px, 4vw, 72px); margin-bottom: 30px; }
.section-head h2 { margin: 0; font-size: clamp(30px, 4vw, 54px); font-weight: 800; letter-spacing: -0.04em; line-height: 1.02; }
.section-head p { margin: 0; max-width: 52ch; color: var(--muted); font-size: 14px; line-height: 1.65; }

/* ============================================================ cells */
.cells { display: grid; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--card); }
.cells.two { grid-template-columns: repeat(2, 1fr); }
.cells.three { grid-template-columns: repeat(3, 1fr); }

.cell { padding: 22px 24px; border-left: 1px solid var(--line); border-top: 1px solid var(--line); }
.cells.two .cell:nth-child(-n + 2),
.cells.three .cell:nth-child(-n + 3) { border-top: 0; }
.cells.two .cell:nth-child(2n + 1),
.cells.three .cell:nth-child(3n + 1) { border-left: 0; }

.cell .lbl { display: flex; align-items: center; gap: 8px; color: var(--dim); }
.cell b { display: block; margin: 14px 0 8px; font-size: clamp(22px, 2.4vw, 30px); font-weight: 700; letter-spacing: -0.03em; word-break: break-word; }
.cell b .sub { font-family: var(--mono); font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--dim); margin-left: 8px; }
.cell small { display: block; color: var(--dim); font-size: 12px; line-height: 1.5; }
/* A secondary figure under the headline one. `.cell b` is a broad block-level
   rule for the big number, so the inline <b> in here has to opt out of it
   explicitly or it renders as a second headline on its own line. */
.cell .subline { margin: -2px 0 9px; font-size: 14px; color: var(--muted); line-height: 1.45; }
.cell .subline b {
  display: inline;
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--deep);
}
.cell a { color: var(--deep); }
.cell a:hover { text-decoration: underline; }

.chip { border: 1px solid var(--line2); border-radius: var(--r-sm); padding: 3px 7px; color: var(--muted); font-size: 9.5px; }
.chip.live { background: var(--acid-soft); border-color: transparent; color: #2c5c00; }
.chip.bad { border-color: rgba(229, 72, 77, 0.45); color: #a3282c; }

/* ============================================================ cycle */
.cycle { display: grid; grid-template-columns: 1.15fr 1fr; gap: 16px; }

/* The clock is the one inverted block on the page — coal with acid numerals,
   exactly as it read before the layout change. */
.clockbox { background: var(--coal); color: #fff; border-radius: var(--r-lg); padding: 26px 28px; }
.clockbox .lbl { display: flex; align-items: center; gap: 9px; color: var(--on-coal-dim); }
.clockbox .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--acid); }
.clockbox .dot.amber { background: var(--amber); }
.clock { font-size: clamp(56px, 8vw, 104px); font-weight: 700; line-height: 1; letter-spacing: -0.05em; color: var(--acid); margin: 12px 0 18px; }
.clock.hot { color: #fff; animation: beat 0.6s infinite; }
.clock.idle { color: var(--on-coal-dim); }
@keyframes beat { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.03); } }
.clockbox .track { height: 3px; background: rgba(255, 255, 255, 0.14); }
.clockbox .track i { display: block; height: 100%; background: var(--acid); transition: width 0.9s linear; }
.clockbox p { margin: 16px 0 0; color: var(--on-coal); font-size: 13.5px; line-height: 1.6; }
.clockbox p b { color: var(--acid); font-weight: 700; }

/* ============================================================ cards */
.cards { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--card); }
.card { padding: 24px; border-left: 1px solid var(--line); }
.card:first-child { border-left: 0; }
.card .num { color: var(--deep); }
.card h3 { margin: 16px 0 10px; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.card p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.6; }

/* ============================================================ tables */
.tablewrap { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); overflow: hidden; overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
table th, table td { text-align: left; padding: 15px 20px; border-bottom: 1px solid var(--line); }
table tbody tr:last-child th, table tbody tr:last-child td { border-bottom: 0; }
table a { color: var(--deep); }
table a:hover { text-decoration: underline; }

.kv th { width: 280px; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.kv td { font-weight: 600; font-size: 17px; letter-spacing: -0.01em; }

.rows thead th {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--tile);
  white-space: nowrap;
}
.rows td { white-space: nowrap; font-family: var(--mono); font-size: 13px; }
.rows th.n, .rows td.n { width: 60px; color: var(--dim); }
.rows td.burn { color: var(--burn); }
.rows td.buy { color: var(--ink); }
/* the type tag */
.kind {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--r-sm);
  background: var(--tile);
  color: var(--muted);
}
.kind.buy  { background: var(--acid-soft); color: #2c5c00; }
.kind.burn { background: #fdece4; color: var(--burn); }
.kind.hold { background: var(--acid-pale); color: #2c5c00; }
.rows .est { color: var(--dim); }
.rows .when { display: block; margin-top: 5px; font-size: 11px; color: var(--dim); font-family: var(--mono); letter-spacing: 0; }
.rows td.hold { color: var(--deep); }
.rows tr.empty td { text-align: center; padding: 34px 20px; color: var(--muted); font-family: var(--disp); }

/* ============================================================ rules */
.rules-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; align-items: start; }
.rules-grid ol { list-style: none; margin: 0; padding: 0; counter-reset: r; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--card); }
.rules-grid li {
  counter-increment: r;
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 16px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
}
.rules-grid li:last-child { border-bottom: 0; }
.rules-grid li::before {
  content: "0" counter(r);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--deep);
  padding-top: 3px;
}
.rules-grid li span { color: var(--muted); font-size: 14.5px; line-height: 1.6; }
.rules-grid li b { color: var(--ink); font-weight: 700; }

/* The split, like the clock, is an inverted coal block. */
.split { background: var(--coal); color: #fff; border-radius: var(--r-lg); padding: 22px 24px; }
.split .lbl { color: var(--on-coal-dim); }
.split .halves { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 18px 0 16px; }
.split .half { background: rgba(255, 255, 255, 0.07); border-radius: var(--r-md); padding: 14px 16px; }
.split .half b { display: block; font-size: 30px; font-weight: 800; letter-spacing: -0.04em; }
.split .half small { display: block; margin-top: 4px; color: var(--on-coal); font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; }
.split .half.burn b { color: #ff8a5c; }
.split .half.hold b { color: var(--acid); }
.split p { margin: 0; color: var(--on-coal); font-size: 13.5px; line-height: 1.6; }

/* ============================================================ note */
.note { margin-top: 16px; border: 1px solid var(--line); border-left: 3px solid var(--acid); border-radius: var(--r-md); background: var(--card); padding: 14px 18px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.note.bad { border-left-color: var(--red); background: #fff5f5; color: #8a2b2e; }

/* ============================================================ footer */
/* Dark, to bookend the hero and to give the supplied lockup its ground: the
   wordmark in it is white and would disappear on the light page. */
footer { background: #04120a; border-top: 0; }
footer .wrap { display: flex; justify-content: space-between; align-items: center; gap: 28px; flex-wrap: wrap; color: var(--on-coal-dim); font-size: 13px; line-height: 1.7; }
footer .foot-brand { flex: none; }
/* The lockup is a transparent PNG, so it needs no blend trick — it just needs a
   dark ground. Its wordmark is near-white: 18.5:1 here, 1.1:1 on the light page. */
footer .foot-brand img { display: block; width: 210px; height: auto; }
footer #foot b { color: #fff; }
footer .links { display: flex; gap: 22px; }
footer .links a { color: var(--on-coal); }
footer .links a:hover { color: var(--acid); }

/* ============================================================ responsive */
@media (max-width: 1000px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-art { order: -1; }
  /* the tag is absolute on desktop and would land on top of the logo once the
     column narrows — let it flow above instead */
  .hero-art .tag { position: static; justify-self: center; margin-bottom: 14px; }
  .cycle, .rules-grid { grid-template-columns: 1fr; }
  .cards { grid-template-columns: 1fr 1fr; }
  .card:nth-child(3) { border-left: 0; }
  .card:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .cells.three { grid-template-columns: 1fr 1fr; }
  .cells.three .cell:nth-child(3n + 1) { border-left: 1px solid var(--line); }
  .cells.three .cell:nth-child(3) { border-top: 1px solid var(--line); }
  .cells.three .cell:nth-child(2n + 1) { border-left: 0; }
  .tabs { display: none; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .kv th { width: 200px; }
}

@media (max-width: 620px) {
  .strip { grid-template-columns: 1fr 1fr; }
  .strip div:nth-child(3) { border-left: 0; }
  .strip div:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .cards, .cells.two, .cells.three { grid-template-columns: 1fr; }
  .card, .cell { border-left: 0 !important; border-top: 1px solid var(--line) !important; }
  .card:first-child, .cell:first-child { border-top: 0 !important; }
  .split .halves { grid-template-columns: 1fr; }
  .kv th { width: auto; }
  table th, table td { padding: 13px 14px; }
  .hide-sm { display: none !important; }
}

/* ============================================================ pulse line */
/* Decoration, not data: a brand motif that shows the page is live. It carries
   no axis, scale or value on purpose, so it cannot be misread as price
   history — the real figures are the ones in the cells around it. */
.pulseline {
  position: relative;
  height: 44px;
  margin: 2px 0 10px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.pulseline svg { position: absolute; inset: 0; width: 200%; height: 100%; animation: sweep 7s linear infinite; }
.pulseline path {
  fill: none;
  stroke: var(--deep);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
@keyframes sweep { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .pulseline svg { animation: none; } }

/* ============================================================ hover */
/* Hovering any box or row lifts it to the highlight fill.
 *
 * Secondary text darkens at the same time. --dim on #D4FC50 measures about
 * 2.9:1, which is *less* readable than it was on white — a hover that costs
 * legibility is a bad trade. Re-tinting to rgba(4,16,4,.68) puts it back to
 * roughly 6.4:1.
 *
 * Deliberately NOT wrapped in @media (hover: hover): that reports false on any
 * agent without a pointing device, which silently disables the whole effect and
 * makes it untestable. A background tint left behind by a tap is harmless.
 */
.cell,
.card,
.strip div,
.kv tbody tr,
.rows tbody tr,
.rules-grid li {
  transition: background-color 0.14s ease, color 0.14s ease;
}

.cell:hover,
.card:hover,
.strip div:hover,
.kv tbody tr:hover,
.rows tbody tr:hover,
.rules-grid li:hover {
  background: var(--hi);
}

/* the quiet text on the highlight */
.cell:hover .lbl,
.cell:hover small,
.cell:hover .sub,
.card:hover p,
.strip div:hover small,
.kv tbody tr:hover th,
.rows tbody tr:hover td.n,
.rules-grid li:hover span {
  color: rgba(4, 16, 4, 0.68);
}

/* accents go darker so they keep their contrast on the brighter ground */
.cell:hover a,
.rows tbody tr:hover td.hold,
.rules-grid li:hover::before,
.strip div:hover b,
.card:hover .num { color: #2c5c00; }

.rows tbody tr:hover td.burn { color: #9a3209; }
.cell:hover .pulseline path { stroke: #2c5c00; }
.cell:hover .chip.live { background: transparent; border-color: rgba(4, 16, 4, 0.4); color: #2c5c00; }