/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V5 · genre: modern-minimal · tone: assured · anchor: spruce · macrostructure: referral-ledger · nav: N4 · footer: Ft2 · contrast: pass (40–41) · slop: pass (42–45) · honest: pass (46) · chrome: pass (47) · tokens: pass (48) · responsive: pass (49) · icons: pass (30) · mobile: pass (34, 49, 50–57) */
.referral-page {
  --color-accent-ink: var(--color-on-signal);
  --referral-nav-height: var(--nav-height);
  background: var(--color-void);
}

.referral-page main { overflow: clip; }
.referral-page .site-nav { height: auto; background: var(--color-nav-strong); }
.referral-page .nav-inner { min-height: var(--referral-nav-height); flex-wrap: wrap; }
.referral-page .nav-links a[aria-current="page"] { color: var(--color-signal); }

.referral-hero {
  padding: clamp(var(--space-2xl), 8vw, var(--space-4xl)) 0 clamp(var(--space-3xl), 11vw, var(--space-5xl));
  border-bottom: 1px solid var(--color-line);
  background: linear-gradient(135deg, var(--color-panel) 0 58%, var(--color-deep) 58% 100%);
  color: var(--color-ink);
}
.referral-hero-grid { display: grid; gap: var(--space-xl); min-width: 0; }
.referral-hero-copy { min-width: 0; }
.referral-hero h1 {
  max-width: 57.5rem;
  margin: var(--space-md) 0;
  font-family: var(--font-display);
  font-size: clamp(3rem, 7.2vw, 7rem);
  font-weight: 520;
  letter-spacing: -.07em;
  line-height: .96;
  overflow-wrap: anywhere;
}
.referral-hero h1 em { color: var(--color-signal); font-style: normal; }
.referral-hero-copy > p:last-child { max-width: 43.75rem; margin: 0; color: var(--color-muted); font-size: clamp(1rem, 1.8vw, 1.25rem); line-height: 1.8; }
.referral-hero-stats { display: grid; gap: var(--space-hairline); margin: 0; background: var(--color-line); }
.referral-hero-stats div { min-width: 0; padding: var(--space-md); background: var(--color-panel-translucent); color: var(--color-ink); }
.referral-hero-stats dt { color: var(--color-signal); font: 600 clamp(3rem, 7vw, 6.5rem)/.9 var(--font-display); letter-spacing: -.07em; }
.referral-hero-stats dd { max-width: 28rem; margin: var(--space-sm) 0 0; color: var(--color-muted); line-height: 1.7; }

.invite-section, .proof-section, .ranking-section { padding: clamp(var(--space-2xl), 10vw, var(--space-5xl)) 0; }
.invite-section { background: var(--color-panel); color: var(--color-ink); }
.invite-layout { display: grid; gap: var(--space-xl); min-width: 0; }
.invite-copy { min-width: 0; }
.invite-copy h2, .proof-head h2, .ranking-copy h2 { margin: var(--space-xs) 0 var(--space-md); font-family: var(--font-display); font-size: clamp(2.25rem, 5.5vw, 5rem); font-weight: 520; letter-spacing: -.055em; line-height: 1; overflow-wrap: anywhere; min-width: 0; }
.invite-copy > p:not(.section-kicker) { max-width: 41.25rem; margin: 0; color: var(--color-muted); line-height: 1.8; }
.invite-steps { display: grid; gap: 0; margin: var(--space-2xl) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--color-line); }
.invite-steps li { display: grid; grid-template-columns: var(--space-xl) minmax(0, 1fr); gap: var(--space-sm); padding: var(--space-md) 0; border-bottom: 1px solid var(--color-line); }
.invite-steps li > span { color: var(--color-signal); font: 700 .8rem/1.6 var(--font-body); }
.invite-steps p { margin: 0; color: var(--color-muted); line-height: 1.65; }
.invite-steps strong { display: block; margin-bottom: var(--space-3xs); color: var(--color-ink); }

.invite-console { align-self: start; min-width: 0; padding: var(--space-md); border: 1px solid var(--color-line); border-top: var(--space-3xs) solid var(--color-signal); background: var(--color-deep); color: var(--color-ink); box-shadow: 0 var(--space-md) var(--space-3xl) var(--color-shadow-soft); }
.invite-console-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); color: var(--color-muted); font: 700 .68rem/1 var(--font-body); letter-spacing: .1em; }
.invite-console-head i { width: var(--space-2xs); height: var(--space-2xs); border-radius: 50%; background: var(--color-signal); box-shadow: 0 0 0 var(--space-2xs) var(--color-signal-soft); }
.invite-state { min-height: 11.5rem; padding: var(--space-xl) 0 var(--space-lg); }
.invite-state > p:first-child { margin: 0 0 var(--space-xs); color: var(--color-muted); font-size: .85rem; }
.invite-state strong { display: block; min-width: 0; color: var(--color-ink); font: 650 clamp(2.3rem, 9vw, 4.8rem)/1 var(--font-mono); letter-spacing: .02em; overflow-wrap: anywhere; }
.invite-state > p:last-child { min-height: 3.4em; margin: var(--space-md) 0 0; color: var(--color-muted); font-size: .9rem; line-height: 1.7; }
.invite-state[data-invite-state="invalid"] strong, .invite-state[data-invite-state="error"] strong { color: var(--color-danger); }
.invite-state[data-invite-state="incoming"] strong { color: var(--color-signal); }
.invite-actions { display: grid; gap: var(--space-xs); }
.invite-actions .button { width: 100%; min-height: 48px; justify-content: center; white-space: nowrap; transition: background-color .2s var(--ease-out), border-color .2s var(--ease-out), transform .2s var(--ease-out); }
.invite-actions .button:disabled { opacity: .52; cursor: not-allowed; }
.referral-page .button:active { transform: translateY(var(--space-hairline)); }
.copy-invite[data-state="copied"] { background: var(--color-ink); color: var(--color-panel); }
.invite-boundary { margin: var(--space-md) 0 0; padding-top: var(--space-md); border-top: 1px solid var(--color-line); color: var(--color-muted); font-size: .78rem; line-height: 1.7; }

.proof-section { background: var(--color-deep); color: var(--color-ink); }
.proof-head { display: block; }
.proof-head > div { min-width: 0; }
.proof-head dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-hairline); max-width: 40rem; margin: var(--space-xl) 0 0 auto; background: var(--color-line); }
.proof-head dl div { padding: var(--space-md); background: var(--color-panel); color: var(--color-ink); }
.proof-head dt { color: var(--color-signal); font: 620 clamp(2rem, 5vw, 3.8rem)/1 var(--font-display); letter-spacing: -.05em; }
.proof-head dd { margin: var(--space-2xs) 0 0; color: var(--color-muted); font-size: .78rem; line-height: 1.5; }
.proof-note { margin-top: 0; margin-bottom: var(--space-lg); color: var(--color-muted); font-size: .78rem; line-height: 1.6; }
.proof-grid { display: grid; gap: var(--space-hairline); min-width: 0; background: var(--color-line); border: 1px solid var(--color-line); }
.proof-card { position: relative; display: grid; min-width: 0; min-height: 20rem; padding: var(--space-lg); background: var(--color-panel); color: var(--color-ink); }
.proof-card::before { content: "“"; position: absolute; inset-block-start: var(--space-xs); inset-inline-end: var(--space-md); color: var(--color-signal-soft); font: 600 6rem/1 var(--font-display); }
.proof-avatar { position: relative; z-index: 1; display: grid; place-items: center; width: 4.25rem; height: 4.25rem; border: 1px solid var(--color-signal-line); background: var(--color-signal-soft); color: var(--color-signal); clip-path: polygon(50% 0, 100% 24%, 88% 84%, 50% 100%, 12% 84%, 0 24%); }
.proof-avatar b { font: 650 1.45rem/1 var(--font-display); }
.proof-avatar span { font: 700 .52rem/1 var(--font-body); letter-spacing: .08em; }
.proof-card blockquote { position: relative; z-index: 1; margin: var(--space-lg) 0; font-size: 1rem; line-height: 1.85; }
.proof-card footer { align-self: end; display: grid; gap: var(--space-3xs); padding-top: var(--space-md); border-top: 1px solid var(--color-line); }
.proof-card footer strong { font-size: .95rem; }
.proof-card footer span { color: var(--color-muted); font-size: .78rem; }

.ranking-section { background: var(--color-ink); color: var(--color-panel); }
.ranking-layout { display: grid; gap: var(--space-xl); min-width: 0; }
.ranking-copy { min-width: 0; }
.ranking-copy .section-kicker, .ranking-copy h2 { color: var(--color-panel); }
.ranking-copy > p:not(.section-kicker) { max-width: 35rem; margin: 0; color: var(--color-dark-copy); line-height: 1.8; }
.ranking-date { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); margin-top: var(--space-lg); color: var(--color-dark-copy); font-size: .78rem; }
.ranking-date i { width: var(--space-2xs); height: var(--space-2xs); border-radius: 50%; background: var(--color-dark-signal-dot); }
.ranking-date span { color: var(--color-dark-signal); font-weight: 700; }
.ranking-panel { min-width: 0; border-top: 1px solid var(--color-dark-line-strong); }
.ranking-panel table { width: 100%; border-collapse: collapse; }
.ranking-panel caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ranking-panel th, .ranking-panel td { padding: var(--space-sm) var(--space-xs); border-bottom: 1px solid var(--color-dark-line); text-align: start; }
.ranking-panel th { color: var(--color-dark-muted); font: 700 .65rem/1.3 var(--font-body); letter-spacing: .08em; text-transform: uppercase; }
.ranking-panel td { color: var(--color-dark-strong); font: 500 .84rem/1.4 var(--font-body); }
.ranking-panel td:nth-child(2) { display: flex; align-items: center; gap: var(--space-xs); font-family: var(--font-body); }
.ranking-panel td:nth-child(3), .ranking-panel th:nth-child(3), .ranking-panel td:nth-child(4), .ranking-panel th:nth-child(4) { text-align: end; }
.ranking-panel tr:nth-child(-n+3) td:first-child { color: var(--color-dark-signal); }
.leader-avatar { display: grid; flex: 0 0 2.25rem; place-items: center; width: 2.25rem; height: 2.25rem; border: 1px solid var(--color-dark-avatar-line); background: var(--color-dark-avatar); color: var(--color-dark-signal-strong); font: 650 .8rem/1 var(--font-display); }

@media (min-width: 40rem) {
  .referral-hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .invite-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 60rem) {
  .referral-page { --referral-nav-height: 3.5rem; }
  .referral-page .nav-inner { padding-block: var(--space-xs); }
  .referral-page .brand, .referral-page .nav-account { min-height: var(--referral-nav-height); }
  .referral-page .nav-links { order: 3; width: 100%; margin-left: 0; justify-content: space-between; border-top: 1px solid var(--color-line-soft); }
  .referral-hero-grid { grid-template-columns: minmax(0, 1.35fr) minmax(330px, .65fr); align-items: end; }
  .referral-hero-stats { grid-template-columns: minmax(0, 1fr); }
  .invite-layout { grid-template-columns: minmax(0, 1fr) minmax(340px, .72fr); }
  .proof-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ranking-layout { grid-template-columns: minmax(300px, .6fr) minmax(0, 1.4fr); align-items: start; }
  .ranking-copy { position: sticky; top: calc((var(--referral-nav-height) * 2) + var(--space-xl)); }
}

@media (max-width: 39.99rem) {
  .referral-page .nav-links { display: none; }
  .referral-page .nav-inner { gap: var(--space-xs); }
  .referral-page .brand { min-width: 0; }
  .referral-page .brand > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ranking-panel thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ranking-panel tbody, .ranking-panel tr, .ranking-panel td { display: block; }
  .ranking-panel tbody { display: grid; gap: var(--space-xs); padding-top: var(--space-sm); }
  .ranking-panel tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-xs) var(--space-md); padding: var(--space-sm); border: 1px solid var(--color-dark-line); }
  .ranking-panel td { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: var(--space-xs); padding: 0; border: 0; text-align: end !important; }
  .ranking-panel td::before { content: attr(data-label); color: var(--color-dark-muted); font: 700 .62rem/1.2 var(--font-body); letter-spacing: .06em; text-transform: uppercase; }
  .ranking-panel td:nth-child(1), .ranking-panel td:nth-child(2) { grid-column: 1 / -1; }
  .ranking-panel td:nth-child(2) { justify-content: flex-start; padding-bottom: var(--space-xs); border-bottom: 1px solid var(--color-dark-line-soft); }
  .ranking-panel td:nth-child(2)::before { display: none; }
  .ranking-panel td:nth-child(3), .ranking-panel td:nth-child(4) { display: grid; gap: var(--space-2xs); justify-items: start; text-align: start !important; }
}

@media (hover: hover) and (pointer: fine) {
  .referral-page .button-signal:hover { transform: none; }
  .referral-page .button-quiet:hover { transform: none; }
  .referral-page .button:disabled:hover { transform: none; }
  .proof-card:hover { background: var(--color-proof-hover); }
  .ranking-panel tbody tr:hover { background: var(--color-dark-hover); }
}

@media (pointer: coarse) {
  .referral-page a, .referral-page button { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .referral-page *, .referral-page *::before, .referral-page *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}