/* upprofiler — Design Tokens */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;700;800&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  /* Colour — variable names kept (--pink) so JSX inline styles still resolve;
     values swapped to teal/navy to match Jasmin's brand */
  --pink: #14B8A6;
  --pink-deep: #0D9488;
  --pink-soft: #CCFBF1;
  --pink-wash: #F0FDFA;
  --lavender-wash: #E6EEF7;

  --ink: #0A0F1E;
  --ink-soft: #1E2A47;
  --mute: #64748B;

  --bg: #FAFBFC;
  --surface: #FFFFFF;
  --line: #E2E8F0;

  --good: #1FAB89;
  --warn: #F59E0B;

  --gradient-hero: linear-gradient(135deg, #F0FDFA 0%, #E6EEF7 100%);
  --gradient-pink: linear-gradient(135deg, var(--pink) 0%, var(--pink-deep) 100%);
  --algo-alert-bg: linear-gradient(135deg, #ECFDF7 0%, #E6EEF7 100%);

  /* Ring & overlays */
  --track: #E2E8F0;
  --halo: rgba(20, 184, 166, 0.18);
  --hatch: rgba(30, 27, 75, 0.04);

  --shadow-card: 0 12px 32px -8px rgba(10, 15, 30, 0.14);
  --shadow-pink: 0 8px 24px -6px rgba(20, 184, 166, 0.40);

  /* Type */
  --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  color-scheme: light;
}

/* ───── Dark mode ───── */
[data-theme="dark"] {
  --pink: #2DD4BF;
  --pink-deep: #14B8A6;
  --pink-soft: rgba(45, 212, 191, 0.20);
  --pink-wash: rgba(45, 212, 191, 0.08);
  --lavender-wash: rgba(99, 132, 184, 0.10);

  --ink: #F1F5F9;
  --ink-soft: #CBD5E1;
  --mute: #94A3B8;

  --bg: #060B16;
  --surface: #0F172A;
  --line: rgba(148, 163, 184, 0.14);

  --good: #34D399;
  --warn: #FBBF24;

  --gradient-hero: linear-gradient(135deg, #0A1426 0%, #0E1A33 60%, #0B1F2E 100%);
  --gradient-pink: linear-gradient(135deg, #2DD4BF 0%, #0D9488 100%);
  --algo-alert-bg: linear-gradient(135deg, rgba(20,184,166,0.12) 0%, rgba(45,90,160,0.16) 100%);

  --track: rgba(148, 163, 184, 0.18);
  --halo: rgba(45, 212, 191, 0.28);
  --hatch: rgba(148, 163, 184, 0.05);

  --shadow-card: 0 14px 38px -10px rgba(0, 0, 0, 0.65);
  --shadow-pink: 0 8px 28px -6px rgba(45, 212, 191, 0.35);

  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --pink: #2DD4BF;
    --pink-deep: #14B8A6;
    --pink-soft: rgba(45, 212, 191, 0.20);
    --pink-wash: rgba(45, 212, 191, 0.08);
    --lavender-wash: rgba(99, 132, 184, 0.10);

    --ink: #F1F5F9;
    --ink-soft: #CBD5E1;
    --mute: #94A3B8;

    --bg: #060B16;
    --surface: #0F172A;
    --line: rgba(148, 163, 184, 0.14);

    --good: #34D399;
    --warn: #FBBF24;

    --gradient-hero: linear-gradient(135deg, #0A1426 0%, #0E1A33 60%, #0B1F2E 100%);
    --gradient-pink: linear-gradient(135deg, #2DD4BF 0%, #0D9488 100%);
    --algo-alert-bg: linear-gradient(135deg, rgba(20,184,166,0.12) 0%, rgba(45,90,160,0.16) 100%);

    --track: rgba(148, 163, 184, 0.18);
    --halo: rgba(45, 212, 191, 0.28);
    --hatch: rgba(148, 163, 184, 0.05);

    --shadow-card: 0 14px 38px -10px rgba(0, 0, 0, 0.65);
    --shadow-pink: 0 8px 28px -6px rgba(45, 212, 191, 0.35);

    color-scheme: dark;
  }
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.25s ease, color 0.25s ease;
  /* Belt-and-braces overflow guard: stops any fixed-width child from
     forcing a horizontal scrollbar on mobile. Page sections still
     get their own scroll containers if they need them. */
  overflow-x: hidden;
  max-width: 100%;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* App shell — sticky-footer pattern:
   the page (the .app's first child) is forced to be at least full viewport
   height and arranged as a flex column. Any <footer> inside gets pushed
   to the bottom via margin-top: auto, regardless of how much content
   sits above it. */
.app {
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.app > *:first-child {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.app > *:first-child > footer {
  margin-top: auto;
}

/* Nav */
.nav {
  height: 64px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  display: flex;
  align-items: center;
  padding: 0 32px;
  position: sticky;
  top: 0;
  z-index: 50;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.nav-logo .pulse-glyph {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.nav-links {
  display: flex;
  gap: 4px;
  margin-left: 40px;
}
.nav-link {
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--mute);
  transition: background 0.15s, color 0.15s;
}
.nav-link:hover { color: var(--ink); background: var(--pink-wash); }
.nav-link.active { color: var(--ink); background: var(--pink-wash); }
.nav-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 16px;
}
.nav-score {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 10px;
  border-radius: 100px;
  background: var(--bg);
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mute);
}
.nav-score .num {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--pink);
}
.nav-avatar {
  width: 32px;
  height: 32px;
  border-radius: 100px;
  background: var(--gradient-pink);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
}

/* Pulse dot */
.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 100px;
  background: var(--pink);
  position: relative;
  flex-shrink: 0;
}
.pulse-dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 100px;
  background: var(--pink);
  opacity: 0.4;
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(0.6); opacity: 0.4; }
  50% { transform: scale(1.6); opacity: 0; }
}

@keyframes lup-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Hero H1 lines.
   Each line is its own block so the three semantic lines render exactly as
   written ("How convincing" / "is your profile?" / "Get your score.").
   On desktop the lines are forced to stay on a single visual line via
   white-space: nowrap — so the column ends up sized to whichever line is
   widest. The mobile rule (≤640px) overrides this and lets text wrap
   naturally on narrow screens. */
.hero-h1-line {
  display: block;
  white-space: nowrap;
}

/* One-shot pulse for the email gate.
   Triggered when a 'Unlock with email' pill is clicked: the gate scrolls
   into view, then a single radiating ring expands outward and fades.
   Unlike .cta-glow (which loops on the hero), this fires once and stops.
   We re-trigger by remounting via React key, so the animation always
   replays even if it was already mid-flight. */
@keyframes cta-flash-once {
  0%   { box-shadow: 0 0 0 0 rgba(20, 184, 166, 0.65), 0 0 0 0 rgba(20, 184, 166, 0.45); }
  60%  { box-shadow: 0 0 0 18px rgba(20, 184, 166, 0.0), 0 0 0 28px rgba(20, 184, 166, 0.0); }
  100% { box-shadow: 0 0 0 0 rgba(20, 184, 166, 0), 0 0 0 0 rgba(20, 184, 166, 0); }
}
.cta-flash {
  animation: cta-flash-once 1.4s cubic-bezier(0.25, 0.1, 0.25, 1) 1;
}
@media (prefers-reduced-motion: reduce) {
  .cta-flash { animation: none; }
}

/* Hero CTA glow — attention-grabbing pulse for the URL-input field.
   Two layers: a flat shadow for depth, and an animated outer ring that
   expands + fades to suggest interactivity. */
@keyframes cta-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 0 rgba(20, 184, 166, 0.45),
      0 12px 32px -8px rgba(10, 15, 30, 0.18);
  }
  50% {
    box-shadow:
      0 0 0 14px rgba(20, 184, 166, 0),
      0 12px 32px -8px rgba(10, 15, 30, 0.18);
  }
}
.cta-glow {
  animation: cta-pulse 2.4s ease-in-out infinite;
  border-color: var(--pink) !important;
  transition: border-color 0.2s;
}
.cta-glow:focus-within {
  animation: none;
  box-shadow:
    0 0 0 3px rgba(20, 184, 166, 0.30),
    0 12px 32px -8px rgba(10, 15, 30, 0.18) !important;
}
@media (prefers-reduced-motion: reduce) {
  .cta-glow { animation: none; }
}

/* Page chrome */
:root {
  /* Single source of truth for layout widths.
     - Standard pages (landing sections, dashboard, account, score) cap at this.
     - Long-form (legal docs) get a narrower override below.
     - Per-page maxWidth overrides have been removed in favor of these. */
  --page-max: 1180px;
  --page-prose-max: 760px;
  --page-pad-x: 64px;
  --page-pad-y: 48px;
}

.page {
  flex: 1;
  padding: var(--page-pad-y) var(--page-pad-x) calc(var(--page-pad-y) * 2);
  max-width: var(--page-max);
  width: 100%;
  margin: 0 auto;
}
.page.prose {
  max-width: var(--page-prose-max);
}

.page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 40px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.page-id {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 8px;
}
.page-name {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.page-sub {
  font-size: 15px;
  color: var(--mute);
  margin-top: 6px;
  max-width: 56ch;
}

/* Cards */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 24px;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.card.hoverable:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
}
.card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 16px;
}
.card-id {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute);
}
.card-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-top: 4px;
}

/* Tag pills */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 100px;
  border: 1px solid var(--line);
  color: var(--mute);
  background: transparent;
  white-space: nowrap;
}
.tag.pink { background: var(--pink); color: #fff; border-color: var(--pink); }
.tag.ink { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.tag.good { background: rgba(31, 171, 137, 0.1); color: var(--good); border-color: rgba(31, 171, 137, 0.25); }
.tag.warn { background: rgba(244, 165, 43, 0.1); color: var(--warn); border-color: rgba(244, 165, 43, 0.3); }
.tag.soft { background: var(--pink-soft); color: var(--pink-deep); border-color: transparent; }

/* Theme chip — for multi-word concept labels (sentence case, readable).
   Use instead of .tag when content is a phrase like "building in public",
   not a status pill. Allows wrapping; not uppercase. */
.chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  padding: 6px 12px;
  border-radius: 100px;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  background: transparent;
  line-height: 1.3;
  max-width: 100%;
}
.chip.shared { background: var(--pink-soft); color: var(--pink-deep); border-color: transparent; }
.chip.warn { background: rgba(244, 165, 43, 0.12); color: var(--warn); border-color: rgba(244, 165, 43, 0.3); }
.chip.good { background: rgba(31, 171, 137, 0.12); color: var(--good); border-color: rgba(31, 171, 137, 0.3); }

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  padding: 14px 28px;
  border-radius: 8px;
  transition: all 0.18s;
  cursor: pointer;
  white-space: nowrap;
}
.btn-primary {
  background: var(--pink);
  color: white;
}
.btn-primary:hover {
  background: var(--pink-deep);
  box-shadow: var(--shadow-pink);
  transform: translateY(-1px);
}
.btn-secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
}
.btn-secondary:hover {
  background: var(--ink);
  color: var(--bg);
}
.btn-tertiary {
  color: var(--pink);
  padding: 8px 0;
}
.btn-tertiary:hover { color: var(--pink-deep); text-decoration: underline; }
.btn-sm { padding: 8px 16px; font-size: 13px; }
.btn-lg { padding: 18px 36px; font-size: 17px; }

/* Mono labels */
.label-mono {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute);
}

/* Score ring container */
.score-ring-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.score-ring-halo {
  position: absolute;
  inset: -10%;
  border-radius: 100%;
  background: radial-gradient(circle, var(--halo) 0%, transparent 70%);
  pointer-events: none;
}
.ring-track { stroke: var(--track); }
.score-ring-num {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Hero gradient surface */
.hero-surface {
  background: var(--gradient-hero);
  border-radius: 0;
}

/* Pink emphasis (inline) */
.pink {
  color: var(--pink);
}

/* Image placeholder */
.img-placeholder {
  background:
    repeating-linear-gradient(
      135deg,
      var(--hatch) 0,
      var(--hatch) 1px,
      transparent 1px,
      transparent 8px
    ),
    var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute);
}

/* Algo alert banner */
.algo-alert {
  background: var(--algo-alert-bg);
  border: 1px solid var(--pink-soft);
  border-left: 4px solid var(--pink);
  border-radius: 12px;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Theme toggle */
.theme-toggle {
  width: 36px;
  height: 36px;
  border-radius: 100px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.18s, border-color 0.18s, background 0.18s, transform 0.25s;
}
.theme-toggle:hover {
  color: var(--pink);
  border-color: var(--pink-soft);
  background: var(--pink-wash);
}
.theme-toggle svg { display: block; transition: transform 0.4s cubic-bezier(0.4,0,0.2,1); }
.theme-toggle:active svg { transform: rotate(-25deg); }

/* Trend chart */
.trend-area { fill: var(--pink); fill-opacity: 0.08; }
.trend-line { stroke: var(--pink); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.trend-event { fill: var(--pink); }

/* Utility */
.row { display: flex; align-items: center; }
.col { display: flex; flex-direction: column; }
.gap-4 { gap: 4px; } .gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .gap-24 { gap: 24px; } .gap-32 { gap: 32px; } .gap-48 { gap: 48px; }
.mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; } .mt-48 { margin-top: 48px; } .mt-64 { margin-top: 64px; }
.muted { color: var(--mute); }
.center { display: flex; align-items: center; justify-content: center; }
.between { justify-content: space-between; }

/* Focus */
*:focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .pulse-dot::after { animation: none; }
  * { transition: none !important; }
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE — mobile + tablet
   The site was originally built for 1440px desktops with
   fixed 64px padding. The block below scales it down for
   smaller viewports without rebuilding every page.
   ═══════════════════════════════════════════════════════ */

/* Tablet (≤ 960px): shrink padding, collapse 4-col grids to 2-col,
   make hero stack vertically. */
@media (max-width: 960px) {
  :root {
    --page-pad-x: 32px;
    --page-pad-y: 32px;
  }
  .nav { padding: 0 20px; }
  .nav-links { display: none; }
  /* Hero containers in landing — collapse split layouts */
  section[style*="grid-template-columns"] > * { min-width: 0; }
}

/* Mobile (≤ 640px): full collapse. Single column, tighter type. */
@media (max-width: 640px) {
  :root {
    --page-pad-x: 18px;
    --page-pad-y: 24px;
  }
  body { font-size: 15px; }

  /* Nav */
  .nav { height: 56px; padding: 0 16px; }
  .nav-score { display: none; }
  .nav-avatar { width: 28px; height: 28px; font-size: 11px; }

  /* Page header */
  .page-header { flex-direction: column; align-items: flex-start; gap: 12px; }
  .page-name { font-size: 24px !important; }
  .page-sub { font-size: 14px; }

  /* Cards: less internal padding so they don't waste horizontal space */
  .card { padding: 20px !important; }
  .card-title { font-size: 17px; }

  /* Force ALL grids back to single column on mobile.
     Targets every inline gridTemplateColumns in JSX. */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* Hero text scaling */
  h1[style*="font-size: 84px"],
  h1[style*="font-size: 64px"] {
    font-size: 38px !important;
    line-height: 1.05 !important;
  }
  h2[style*="font-size: 64px"],
  h2[style*="font-size: 56px"],
  h2[style*="font-size: 52px"],
  h2[style*="font-size: 44px"] {
    font-size: 28px !important;
    line-height: 1.1 !important;
  }
  /* Universal section-padding override on mobile.
     Catches ANY <section> with an inline padding rule, regardless of what
     the original values were. We only override horizontal padding so
     vertical rhythm is preserved (sections still have their breathing
     room above and below). */
  section[style*="padding"] {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  /* For the hero specifically — generous top padding becomes overkill on
     mobile, so tighten vertical rhythm too. */
  section.hero-section {
    padding: 80px 18px 56px !important;
    min-height: auto !important;
  }
  /* Hero ring column on mobile: drop the floating annotations and let
     the ring scale to fit the viewport. The annotations need so much
     horizontal room they don't fit on a phone. */
  .hero-ring-col .hero-annot { display: none !important; }

  /* Hero H1: let lines wrap naturally on narrow screens.
     Desktop forces nowrap (so each line stays intact), mobile overrides. */
  .hero-h1-line { white-space: normal !important; }

  /* Buttons: don't overflow on tiny screens */
  .btn { font-size: 14px; padding: 12px 18px; }
  .btn-lg { font-size: 15px; padding: 14px 22px; }

  /* Footer: stack the two halves */
  footer > div:first-child {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }

  /* Score result rich row of share controls: stack instead of wrap */
  .row.between { flex-wrap: wrap; gap: 12px; }

  /* Long legal docs: less surface padding so text isn't squeezed */
  .legal-doc {
    padding: 28px 22px !important;
  }
  .legal-doc h2 { font-size: 18px !important; }
  .legal-doc p, .legal-doc li { font-size: 14px !important; }

  /* App-shell tag pills: allow wrap so long strings don't horizontal-scroll */
  .tag { white-space: normal; }

  /* Cookie notice: don't fight the screen edges */
  .cookie-notice { left: 12px !important; right: 12px !important; bottom: 12px !important; }

  /* ─────────────────────────────────────────────
     ScoreRing: hard-coded width/height inline (e.g. size={420}) forces
     horizontal overflow on phones. Cap the wrapper + SVG to viewport,
     scale the number text fluidly with viewport-width units.
     ───────────────────────────────────────────── */
  .score-ring-wrap {
    width: min(100%, calc(100vw - 36px)) !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
  }
  .score-ring-wrap > svg {
    width: 100% !important;
    height: 100% !important;
  }
  .score-ring-num > div:first-child {
    font-size: clamp(48px, 22vw, 120px) !important;
  }

  /* Hero floating annotations on landing use position:absolute with
     right:-40 / left:-64 — push them off-screen on phones. Drop them. */
  section .score-ring-wrap ~ div[style*="position: absolute"],
  section [style*="position: relative"] > div[style*="position: absolute"] {
    display: none !important;
  }

  /* Marketing nav links — already hidden — but also hide ThemeToggle's
     bigger surface area to give the right side breathing room */
  .nav-right { gap: 8px !important; }

  /* Inputs with autocomplete + suggest get cramped on phones; let them
     wrap onto two lines if needed instead of overflowing */
  form > div[style*="display: flex"] {
    flex-wrap: wrap;
  }
  form > div[style*="display: flex"] > input { min-width: 0; flex: 1 1 100% !important; }
  form > div[style*="display: flex"] > button { flex: 1 1 100% !important; }

  /* Hero float-tags that are siblings of ScoreRing — remove on mobile */
  .score-ring-wrap + div[style*="position: absolute"] { display: none !important; }
}

/* Very narrow phones (≤ 380px) */
@media (max-width: 380px) {
  :root {
    --page-pad-x: 14px;
  }
  .nav { height: 52px; }
  h1[style*="font-size"] { font-size: 30px !important; }
}