/* ============================================================
   PREDICTION MARKETS — solutions page styles.

   Built on the shared design tokens + @font-face rules in
   styles.css: one 64rem content column, Suisse Intl display
   type, hairline rules instead of cards, white the only accent.

   Every solutions page gets its own composition. This one is
   built around the market's clock: prices move while deposits
   confirm, so time-to-trade IS price.
     · a STACKED hero (the homepage's shape, unused elsewhere):
       type first, then a quiet board of three market cards
     · the ODDS CHART — a static line from 62¢ to 71¢ with two
       entry marks: funded in seconds vs funded in minutes
     · wide definition rows (title left, copy right)
     · the finale (closing couplet + email capture)
   Nothing on this page animates. The chart holds still and
   makes its point.
   ============================================================ */

/* ---------- Brand wordmark typeface (on the homepage this arrives
   via hero/_shared/widget.css; here we load just the two weights
   the wordmark needs, from the same bundled files) ---------- */
@font-face {
  font-family: "Open Sauce One";
  src: url("hero/_shared/assets/fonts/OpenSauceOne-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Open Sauce One";
  src: url("hero/_shared/assets/fonts/OpenSauceOne-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   Hero — the message left, the market board right. One panel,
   three markets on hairlines: the industry at a glance.
   ============================================================ */
.shero {
  position: relative;
  padding: 4rem 2.5rem 0;      /* no bottom pad — the next section's top owns the gap */
}
.shero-inner {
  max-width: 64rem;
  margin: 0 auto;
}
.shero-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  column-gap: 4rem;
  align-items: center;
}
.shero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.shero-media {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* ---- announcement pill (same construction as the homepage hero:
   ring → fill, with a rotating shine) — here a quiet page badge ---- */
.hero-pill {
  position: relative;
  display: inline-flex;
  margin: 0 0 2.5rem;
  padding: 1px;                       /* the 1px ring */
  border-radius: 999px;
  background: #222;                   /* static ring base */
  overflow: hidden;
  isolation: isolate;
  text-decoration: none;
}
.hero-pill::before {                  /* a single bright arc travelling around the ring */
  content: "";
  position: absolute;
  inset: -120%;
  z-index: 0;
  background: conic-gradient(from 0deg, transparent 0 60%, rgba(255, 255, 255, 0.5) 78%, transparent 90% 100%);
  animation: hero-pill-spin 5s linear infinite;
}
.hero-pill_inner {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  border-radius: 999px;
  background: #191919;
}
.hero-pill_label { font-size: 15px; line-height: 1.5; color: #fff; }
@keyframes hero-pill-spin { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) { .hero-pill::before { animation: none; } }

.shero-title {
  margin: 0;
  font-family: "Suisse Intl", Georgia, sans-serif;
  font-size: clamp(2.25rem, 4vw, 3.5rem);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: var(--gray-12);
  text-wrap: balance;
}
.shero-sub {
  margin: 1.5rem 0 0;
  max-width: 30rem;
  color: var(--gray-10);
  font-size: clamp(1.0625rem, 1.1vw, 1.1875rem);
  line-height: 1.55;
}
.shero-sub .lead { color: #eee; }    /* bright lead clause — the homepage two-tone */

/* ---- the market board: one panel, markets stacked on hairlines ---- */
.board {
  width: 100%;
  max-width: 24rem;
  border-radius: 0.875rem;
  background-color: var(--gray-2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 0 0 1px var(--border),
    0 28px 80px -26px rgba(0, 0, 0, 0.85),
    0 8px 22px -14px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}
.board-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.125rem 1.25rem;
  transition: background-color 0.2s var(--ease);
}
.board-row:hover { background-color: var(--alpha-2); }
.board-row + .board-row { border-top: 1px solid var(--border); }
.board-q { flex: 1; min-width: 0; }
.board-t {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.35;
  color: var(--gray-12);
}
.board-m {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.6875rem;
  color: var(--gray-10);
  font-variant-numeric: tabular-nums;
}
.board-prices {
  display: flex;
  flex: none;
  gap: 0.375rem;
}
.board-yes,
.board-no {
  padding: 0.4375rem 0.6875rem;
  border-radius: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.board-yes {
  background-color: var(--accent);
  color: var(--accent-fg);
}
.board-no {
  background-color: #0f0f0f;
  box-shadow: inset 0 0 0 1px var(--border);
  color: var(--gray-12);
}

/* ============================================================
   The odds chart — a market drifting from 62¢ to 71¢ while a
   slow deposit confirms. Two entries, four cents apart: the
   whole argument in one still image.
   ============================================================ */
.odds {
  background-color: var(--gray-1);
  padding: 6.05rem 2.5rem;
}
.odds-inner {
  max-width: 64rem;
  margin: 0 auto;
}
.odds-statement {
  margin: 0 0 4.5rem;
  font-family: "Suisse Intl", Georgia, sans-serif;
  font-size: clamp(2.5rem, 4.8vw, 3.75rem);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--gray-12);
  text-wrap: balance;
}
.odds-statement span { display: block; }
.odds-chart { display: block; width: 100%; height: auto; }
.odds-chart .oc-grid { stroke: rgba(255, 255, 255, 0.08); stroke-width: 1; }
.odds-chart .oc-axis { stroke: var(--border-strong); stroke-width: 1; }
.odds-chart .oc-line {
  fill: none;
  stroke: rgba(255, 255, 255, 0.45);
  stroke-width: 1.5;
  stroke-linejoin: round;
}
.odds-chart .oc-y {
  fill: var(--gray-10);
  font-family: "Inter", Arial, sans-serif;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.odds-chart .oc-x {
  fill: rgba(255, 255, 255, 0.38);
  font-family: "Inter", Arial, sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.odds-chart .oc-mark-a { fill: var(--gray-12); }
.odds-chart .oc-ring { fill: none; stroke: rgba(255, 255, 255, 0.25); stroke-width: 1.5; }
.odds-chart .oc-mark-b { fill: var(--gray-10); }
.odds-chart .oc-label-a {
  fill: var(--gray-12);
  font-family: "Inter", Arial, sans-serif;
  font-size: 12.5px;
  font-weight: 500;
}
.odds-chart .oc-label-b {
  fill: var(--gray-10);
  font-family: "Inter", Arial, sans-serif;
  font-size: 12.5px;
}
.odds-note {
  margin: 2.5rem 0 0;
  font-size: 0.8125rem;
  color: var(--gray-10);
}
.odds-note b { color: var(--gray-12); font-weight: 500; }

/* ============================================================
   Definition rows — the claim on the left, the substance on the
   right, each row seated on its own rule. No pictures except one
   quiet row of the wallets and exchanges users fund from.
   ============================================================ */
.rows {
  background-color: var(--gray-1);
  padding: 0 2.5rem 7rem;
}
.rows-inner {
  max-width: 64rem;
  margin: 0 auto;
}
.rows .products-head { margin-bottom: 3.5rem; }
.drow {
  display: grid;
  grid-template-columns: 18rem 1fr;
  gap: 3rem;
  padding: 2.5rem 0;
  border-top: 1px solid var(--border);
}
.drow h3 {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--gray-12);
}
.drow-body { max-width: 34rem; }
.drow-body p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--gray-10);
}
.drow-body .flow-link {
  margin-top: 1rem;
  font-size: 0.875rem;
}
.drow-logos {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.25rem;
}
.drow-logos img {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 6px;
  filter: grayscale(1);
  opacity: 0.7;
  transition: opacity 0.2s var(--ease), filter 0.2s var(--ease);
}
.drow-logos img:hover { filter: grayscale(0); opacity: 1; }

/* ============================================================
   Finale — the quiet close: the couplet and an email capture,
   nothing else (fun.xyz's closing register, in our type).
   ============================================================ */
.finale {
  background-color: var(--gray-1);
  padding: 0 2.5rem 7rem;
}
.finale-inner {
  max-width: 64rem;
  margin: 0 auto;
}
.finale-statement {
  margin: 0;
  font-family: "Suisse Intl", Georgia, sans-serif;
  font-size: clamp(2.5rem, 4.8vw, 3.75rem);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--gray-12);
  text-wrap: balance;
}
.finale-statement_line { display: block; }
.finale .cta-connect { margin-top: 2.5rem; }

/* ============================================================
   Responsive — aligned to the site's existing breakpoints
   (1024 hero · 991 nav · 720 products · 600 small).
   ============================================================ */
@media (max-width: 1024px) {
  .shero { padding: 3.5rem 1.5rem 0; }
  .shero-grid {
    grid-template-columns: 1fr;
    row-gap: 2.5rem;
  }
  .shero-sub { max-width: 40rem; }
  .shero-media { justify-content: flex-start; }
  .odds { padding: 5rem 1.5rem; }
  .rows { padding: 0 1.5rem 5.5rem; }
  .finale { padding: 0 1.5rem 5rem; }
}
@media (max-width: 720px) {
  .odds-statement { margin-bottom: 3rem; }
  .drow { grid-template-columns: 1fr; gap: 1rem; padding: 2.25rem 0; }
}
@media (max-width: 600px) {
  .shero { padding: 2.75rem 1.25rem 0; }
  .board-row { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
}