/* Home — frame 2:2 (1440) / 40:5 (390). Numbers from fig-spec per node. */

/* ── hero (10:33 / 40:27) ─────────────────────────────────────────────── */
.hero { display: flex; background: var(--color-bg); height: 760px; overflow: hidden; }   /* frame clips (the tilted photo card runs 6px past the edge); FIXED 760: the mockup content (796) overruns its bottom padding */
.hero__left {
  background: var(--color-bg);
  display: flex; flex-direction: column; align-items: flex-start; gap: 28px;
  width: 760px; flex: none; padding: 80px 48px 44px 60px;
}
.hero__title {
  display: flex; flex-direction: column; align-items: flex-start;
  color: var(--color-text);
  font-family: var(--font-display); font-weight: 800; font-size: 96px; line-height: 86px; letter-spacing: -2px;
}
.hero__line { display: block; width: 652px; }
.hero__panel { margin-top: 18px; padding: 4px 16px 4px 0; line-height: 86px; }   /* lime-headline-panel: pad 4/16/4/0, y 501 = 483 + 18 */
.hero__lead { width: 560px; font-size: 16px; line-height: 26px; color: var(--color-muted); }
.hero__ctas { display: flex; gap: 16px; }
.hero__ctas .btn--ghost { padding: 13px 32px; }

.hero__right {
  position: relative; flex: 1; overflow: hidden;
  height: 760px; margin: 6px 7px 0 -7px;   /* frame drawn at 753,110: overlaps the left column by 7 and sits 6 down */
  background: var(--color-surface);
  box-shadow: var(--shadow-photo-l);
}
.hero__right picture, .hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__tag { position: absolute; left: 24px; top: 24px; }
.hero__bar { position: absolute; left: 24px; bottom: 80px; width: 120px; height: 3px; background: var(--color-lime); }
.hero__result {
  position: absolute; right: 24px; bottom: 24px;
  display: flex; flex-direction: column; gap: 4px; padding: 16px;
  border-radius: var(--radius-sm); background: var(--color-bg);
  box-shadow: inset 0 0 0 1px var(--color-lime);
}
.hero__result-label { color: var(--color-muted-3); font-family: var(--font-display); font-weight: 700; font-size: 10px; line-height: 12px; letter-spacing: 1.5px; }
.hero__result-odd { color: var(--color-lime); font-family: var(--font-display); font-weight: 800; font-size: 28px; line-height: 34px; }
.hero__star { position: absolute; left: 40px; bottom: 0; color: var(--color-lime); opacity: .06; font-family: var(--font-display); font-weight: 800; font-size: 120px; line-height: 144px; pointer-events: none; }


/* ── upcoming markets (10:63 / 40:67) ─────────────────────────────────── */
.markets { display: flex; flex-direction: column; gap: 40px; padding: 60px; background: var(--color-lime); color: var(--color-text-dark); }
/* tilts drawn in the frame: panel 10:43 −2°, photo 10:54 −1°, cards 10:235/239/243 −2°/+3°/−1°, racing photo 10:265 −1° */
.hero__panel, .hero__right, .jump__photo { transform-origin: 0 0; }
.hero__panel { transform: rotate(-2deg); }
.hero__right, .jump__photo { transform: rotate(-1deg); }
.markets__body { display: flex; gap: 24px; align-items: flex-start; }
.markets__body .board { flex: 1; min-width: 0; }

/* ── photo collage (10:230 / 40:155) ──────────────────────────────────── */
.collage { display: flex; flex-direction: column; gap: 32px; padding: 80px 60px; background: var(--color-bg); }
.collage__label { display: flex; justify-content: space-between; align-items: center; height: 16px; color: var(--color-lime); font-family: var(--font-display); }
.collage__tag { font-weight: 800; font-size: 13px; line-height: 16px; letter-spacing: 3px; }
.collage__more { font-weight: 700; font-size: 13px; line-height: 16px; letter-spacing: 1px; color: inherit; text-decoration: none; transition: color var(--dur-fast) var(--ease); }
.collage__more:hover { color: var(--color-text); }
.collage__grid { display: flex; gap: 24px; height: 342px; }
.pcard--1, .pcard--2, .pcard--3 { width: 420px; height: 320px; flex: none; }
.pcard--1, .pcard--2, .pcard--3 { transform-origin: 0 0; }
.pcard--1 { transform: translateY(14.66px) rotate(-2deg); box-shadow: inset 0 0 0 1px var(--color-lime), var(--shadow-photo); }
.pcard--2 { margin-left: 27.66px; transform: rotate(3deg); box-shadow: inset 0 0 0 1px var(--color-lime), -10px 18px 34px -12px rgba(0, 0, 0, .5); }   /* cards are hand-placed in the frame: 0 / 471.66 / 915.08 */
.pcard--3 { margin-left: -.58px; transform: translateY(7.33px) rotate(-1deg); box-shadow: inset 0 0 0 1px var(--color-lime), var(--shadow-photo); }

/* ── next to jump (10:251 / 40:168) ───────────────────────────────────── */
.jump { display: flex; flex-direction: column; gap: 56px; padding: 80px 60px; background: var(--color-bg); color: var(--color-text); }
.jump__head { display: flex; justify-content: space-between; align-items: flex-end; }
.jump__head-left { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.jump__title { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; font-family: var(--font-display); font-weight: 800; font-size: 72px; line-height: 64px; letter-spacing: -1.5px; }
.jump__hl { padding: 2px 8px; }
.jump__sub { font-family: var(--font-display); font-weight: 600; font-size: 14px; line-height: 17px; letter-spacing: 1px; color: var(--color-muted-4); }
.jump__all { display: inline-flex; align-items: center; gap: 8px; color: var(--color-lime); text-decoration: none; font-family: var(--font-display); font-weight: 800; font-size: 14px; line-height: 17px; letter-spacing: 1.5px; transition: color var(--dur-fast) var(--ease); }
.jump__all i { display: block; width: 40px; height: 2px; background: currentColor; }
.jump__all:hover { color: var(--color-text); }
.jump__body { display: flex; gap: 55.62px; align-items: flex-start; }
.jump__photo { width: 400px; height: 440px; flex: none; margin-top: 6.98px; background: none; box-shadow: inset 0 0 0 1px var(--color-border), var(--shadow-photo); }
.jump__photo .pcard__label { top: auto; bottom: 16px; }
.jump__list { flex: 1; display: flex; flex-direction: column; }
.race { position: relative; display: flex; align-items: center; height: 96px; padding: 24px 0; box-shadow: inset 0 1px 0 var(--color-border); font-family: var(--font-display); transition: background-color var(--dur-fast) var(--ease); }
.race:last-child { box-shadow: inset 0 1px 0 var(--color-border), inset 0 -1px 0 var(--color-border); }
.race:hover { background: var(--color-surface); }
.race__n { width: 72px; flex: none; font-weight: 800; font-size: 40px; line-height: 48px; color: var(--color-lime); }
.race__type { display: flex; flex-direction: column; gap: 2px; width: 180px; flex: none; }
.race__r { font-weight: 800; font-size: 22px; line-height: 26.4px; }
.race__kind { font-weight: 700; font-size: 11px; line-height: 13.2px; letter-spacing: 1.5px; color: var(--color-muted-4); }
.race__track { width: 352px; flex: none; font-weight: 800; font-size: 24px; line-height: 29px; }
.race__time { width: 120px; flex: none; font-weight: 800; font-size: 24px; line-height: 29px; color: var(--color-lime); }
.race__link { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; width: 140px; flex: none; color: var(--color-text); text-decoration: none; font-weight: 700; font-size: 12px; line-height: 14.4px; letter-spacing: 1px; }
.race__link i { display: block; width: 24px; height: 2px; background: currentColor; }
.race__cover { position: absolute; inset: 0; }
.race:hover .race__link { color: var(--color-lime); }


/* ── mobile ───────────────────────────────────────────────────────────── */
@media (max-width: 1199px) {
  .hero { flex-direction: column; gap: 24px; padding: 16px; height: auto; }
  .hero__left { width: auto; padding: 0; gap: 24px; }
  .hero__left .eyebrow { gap: 6px; font-size: 10px; line-height: 12px; letter-spacing: 1px; }
  .hero__left .eyebrow .star { font-size: 8px; line-height: 10px; font-weight: 800; }
  .hero__panel { color: #000; transform: rotate(-1.5deg); }   /* 40:35 */
  .hero__right { transform: rotate(-.5deg); }   /* 40:46 */
  .jump__photo { transform: rotate(-.5deg); }   /* 40:179 */
  .jump__hl { display: inline-block; transform: rotate(-1.5deg); transform-origin: 0 0; }   /* 40:173 */
  .markets:not(.markets--sports) .slip__input:not(:focus-within) { box-shadow: inset 0 0 0 1px var(--color-border); }   /* the home 390 frame draws the input 1px #1f1f1f (sports/racing: #333) */
  .hero__left .eyebrow__muted { color: var(--color-muted-3); }
  .hero__title { align-self: stretch; gap: 4px; font-size: 48px; line-height: 42px; letter-spacing: -1px; }
  .hero__line { width: auto; }
  .hero__panel { margin-top: 7px; padding: 4px 12px 4px 8px; line-height: 42px; border-radius: 1px; }
  .hero__lead { width: auto; font-size: 14px; line-height: 21px; color: var(--color-muted-2); }
  .hero__ctas { flex-direction: column; gap: 10px; align-self: stretch; }
  .hero__ctas .btn { width: 100%; padding: 12px 16px; letter-spacing: 1px; }
  .hero__ctas .btn--ghost { box-shadow: inset 0 0 0 1px var(--color-border); }
  .hero__right {
    flex: none; height: 220px; margin: 3px 0 0; background: none; border-radius: var(--radius-sm); box-shadow: inset 0 0 0 1px var(--color-border);   /* card drawn 3px below the flow */
  }
  .hero__tag { left: 12px; top: 12px; padding: 4px 8px; font-size: 10px; line-height: 12px; letter-spacing: 1px; color: #000; }
  .hero__bar { left: 12px; bottom: 12px; width: 60px; height: 2px; }
  .hero__result { right: 12px; bottom: 12px; gap: 2px; padding: 8px; background: #000; box-shadow: inset 0 0 0 1px var(--color-lime); }
  .hero__result-label { font-size: 8px; line-height: 10px; letter-spacing: 1px; }
  .hero__result-odd { font-size: 18px; line-height: 22px; }
  .hero__star { display: none; }

  /* torn edge into the lime markets section: 36×12 dark blocks on lime */
  .torn--m { background: var(--color-lime); }   /* frame 40:54: lime strip, dark wedges from includes/torn.php */

  .markets { gap: 20px; padding: 16px; }
  .markets__body { flex-direction: column; align-items: stretch; gap: 20px; }
  .markets .fx:nth-child(n+4) { display: none; }   /* the 390 frame draws three cards */

  .collage { gap: 20px; padding: 16px; }
  .collage__label { height: 12px; }
  .collage__tag { font-size: 10px; line-height: 12px; letter-spacing: 1px; }
  .collage__more { font-size: 10px; line-height: 12px; letter-spacing: 0; }
  .collage__grid { display: block; height: 209.3px; }
  .pcard--1 { width: 100%; height: 200px; margin-left: -2.56px; transform: translateY(9.37px) rotate(-1.5deg); background: none; box-shadow: inset 0 0 0 1px var(--color-lime); }

  .jump { gap: 20px; padding: 16px; }
  .jump__head { flex-direction: column; align-items: stretch; }
  .jump__head-left { gap: 10px; }
  .jump__title { gap: 0; margin-top: 6px; font-size: 44px; line-height: 38px; letter-spacing: -1px; }   /* label→panel gap is 16 in the frame */
  .jump__hl { padding: 4px 12px 4px 8px; border-radius: 1px; color: #000; }
  .jump__sub { font-size: 12px; line-height: 14.4px; letter-spacing: .5px; color: var(--color-muted-2); }
  .jump__all { gap: 6px; font-size: 12px; line-height: 14.4px; letter-spacing: 1px; }
  .jump__all i { width: 20px; height: 1px; }
  .jump__body { flex-direction: column; align-items: stretch; gap: 20px; }
  .jump__photo { width: 100%; height: 160px; margin: 0; background: none; box-shadow: inset 0 0 0 1px var(--color-border); }
  .jump__photo .pcard__label { left: 12px; bottom: 12px; }
  .race { height: 53px; padding: 12px 0; }
  .race:nth-child(n+4) { display: none; }   /* the 390 frame draws three races */
  .race:last-child { box-shadow: inset 0 1px 0 var(--color-border); }
  .race__n { width: 36px; font-size: 24px; line-height: 29px; }
  .race__type { width: 80px; gap: 1px; }
  .race__r { font-size: 14px; line-height: 17px; }
  .race__kind { font-size: 9px; line-height: 11px; letter-spacing: 0; color: var(--color-muted-3); }
  .race__track { flex: 1; width: auto; font-size: 16px; line-height: 19.2px; }
  .race__time { width: 64px; text-align: right; font-size: 16px; line-height: 19.2px; }
}