/* Impeccable · Persuade · in-page referral relationship network */
.referral-view {
  --c-paper: #f7fbf8;
  --c-surface: #ffffff;
  --c-ink: #112b35;
  --c-copy: #425e67;
  --c-muted: #70858a;
  --c-line: rgba(17, 68, 62, .14);
  --c-line-strong: rgba(10, 112, 93, .35);
  --c-signal: #0a806a;
  --c-signal-deep: #075f50;
  --c-signal-soft: #e0f3ea;
  --c-signal-wash: rgba(10, 128, 106, .11);
  --c-gold: #e2b857;
  --c-gold-soft: #f8ebbc;
  --c-navy: #112b35;
  --c-on-dark: #f8fcfa;
  --c-on-dark-muted: #b9cbcd;
  --c-shadow: rgba(17, 43, 53, .14);
  --gravity-x: 0px;
  --gravity-y: 0px;
  color: var(--c-ink);
  background: var(--c-paper);
}

.referral-view[hidden] { display: none !important; }
.referral-view h1, .referral-view h2, .referral-view h3 { font-family: var(--font-display); overflow-wrap: anywhere; }
.referral-view button { font-family: var(--font-body); }

html.referral-view-active {
  overflow-x: clip;
  scroll-padding-top: var(--fullpage-nav-height);
  scroll-snap-type: y mandatory;
}

.referral-view-active .site-nav { position: sticky; top: 0; }
.referral-view > section {
  width: 100%;
  height: var(--fullpage-height);
  min-height: var(--fullpage-height);
  max-height: var(--fullpage-height);
  overflow-x: clip;
  overflow-y: auto;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  scrollbar-width: thin;
}

.gravity-hero { position: relative; background: var(--c-paper); }
.gravity-hero::before { content: ""; position: absolute; inset: 0; opacity: .46; pointer-events: none; background-image: linear-gradient(var(--c-line) 1px, transparent 1px), linear-gradient(90deg, var(--c-line) 1px, transparent 1px); background-size: 88px 88px; mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 82%, transparent); }
.gravity-grid { position: relative; z-index: 1; width: var(--shell); height: 100%; margin-inline: auto; display: grid; grid-template-columns: minmax(0, .76fr) minmax(0, 1.24fr); align-items: center; gap: clamp(32px, 5vw, 80px); }
.gravity-copy { min-width: 0; }
.gravity-status { width: fit-content; margin-bottom: 24px; padding: 8px 12px; display: flex; align-items: center; gap: 9px; border: 1px solid var(--c-line); color: var(--c-signal-deep); background: var(--c-surface); font-size: 11px; font-weight: 700; letter-spacing: .06em; }
.gravity-status i, .ranking-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--c-signal); box-shadow: 0 0 0 5px var(--c-signal-wash); }
.gravity-copy h1 { max-width: 620px; margin: 0; font-size: clamp(44px, 5vw, 70px); font-weight: 520; line-height: 1.06; letter-spacing: -.055em; }
.gravity-copy > p { max-width: 500px; margin: 22px 0 0; color: var(--c-copy); font-size: 15px; line-height: 1.8; }
.gravity-metrics { margin-top: 30px; padding-block: 20px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-block: 1px solid var(--c-line); }
.gravity-metrics > div + div { padding-left: 24px; border-left: 1px solid var(--c-line); }
.gravity-metrics strong { display: block; color: var(--c-signal-deep); font-size: clamp(38px, 4vw, 58px); font-weight: 560; line-height: .88; letter-spacing: -.065em; white-space: nowrap; }
.gravity-metrics sup { font-size: .34em; vertical-align: top; }
.gravity-metrics small { max-width: 150px; margin-top: 10px; display: block; color: var(--c-muted); font-size: 11px; line-height: 1.5; }
.gravity-copy .gravity-boundary { margin-top: 12px; color: var(--c-muted); font-size: 10px; line-height: 1.5; }

.gravity-map { position: relative; min-width: 0; }
.gravity-plane { position: relative; width: min(100%, 720px); height: min(620px, calc(var(--fullpage-height) - 40px)); min-height: 520px; margin-inline: auto; transform: translate3d(var(--gravity-x), var(--gravity-y), 0); transition: transform .35s var(--ease-out); }
.gravity-links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.gravity-links path, .gravity-links circle { vector-effect: non-scaling-stroke; fill: none; }
.link-base { stroke: var(--c-line-strong); stroke-width: 1; stroke-dasharray: 4 7; opacity: .6; }
.link-active { stroke: var(--c-signal); stroke-width: 2; opacity: 0; transition: opacity .25s ease; }
.link-active.is-active { opacity: 1; }
.orbit-ring { stroke: var(--c-line); stroke-width: 1; opacity: .75; }
.orbit-two { stroke-dasharray: 3 8; opacity: .5; }

.network-hub { position: absolute; z-index: 3; left: 50%; top: 50%; width: 238px; min-height: 238px; padding: 38px 28px 30px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; color: var(--c-on-dark); background: var(--c-signal-deep); text-align: center; transform: translate(-50%, -50%); box-shadow: 0 32px 72px rgba(17,43,53,.3); }
.network-hub::before { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(255,255,255,.17); border-radius: inherit; }
.hub-pulse { position: absolute; z-index: -1; inset: -14px; border: 1px solid var(--c-signal); border-radius: inherit; opacity: .24; animation: referralHub 4.8s ease-in-out infinite; }
.hub-label { color: var(--c-on-dark-muted); font-size: 10px; letter-spacing: .11em; }
.network-hub > strong { margin-top: 8px; font-family: var(--font-display); font-size: 23px; font-weight: 560; }
.network-hub blockquote { min-height: 46px; margin: 14px 0 0; font-size: 13px; line-height: 1.65; }
.network-hub footer { margin-top: 14px; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--c-on-dark-muted); font-size: 10px; }
.network-hub footer i { width: 3px; height: 3px; border-radius: 50%; background: currentColor; }
.network-hub.is-changing > :not(.hub-pulse) { animation: referralSwap .35s var(--ease-out); }

.network-rail { position: absolute; inset: 0; }
.network-node { position: absolute; z-index: 4; width: 210px; min-height: 80px; padding: 12px 15px; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 10px; border: 1px solid var(--c-line); border-radius: 3px; color: var(--c-ink); background: rgba(255,255,255,.96); box-shadow: 0 16px 40px var(--c-shadow); text-align: left; cursor: pointer; transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out); }
.network-node::after { content: ""; position: absolute; inset: -1px; border: 2px solid var(--c-signal); border-radius: inherit; opacity: 0; pointer-events: none; }
.network-node:hover, .network-node[aria-pressed="true"] { transform: translateY(-4px); box-shadow: 0 24px 54px var(--c-shadow); }
.network-node[aria-pressed="true"]::after { opacity: 1; }
.network-node > span:nth-child(2) { min-width: 0; display: grid; gap: 2px; }
.network-node strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.network-node small { color: var(--c-muted); font-size: 10px; white-space: nowrap; }
.network-node > i { align-self: start; color: var(--c-muted); font-size: 9px; font-style: normal; }
.portrait, .leader { display: grid; place-items: center; flex: none; border-radius: 50%; color: var(--c-signal-deep); background: var(--c-signal-soft); font-style: normal; font-weight: 750; }
.portrait { width: 44px; height: 44px; border: 2px solid rgba(10,128,106,.2); font-size: 14px; }
.profile-avatar {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: transparent;
  background-color: var(--avatar-bg, #dcefe8);
  background-image: var(--avatar-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.profile-avatar::before, .profile-avatar::after { content: none; }
.portrait-qk { --avatar-bg: #d9efe7; --avatar-image: url("/assets/referral-avatars/01-qk-lorelei.svg"); }
.portrait-tq { --avatar-bg: #e8e2f6; --avatar-image: url("/assets/referral-avatars/02-tq-lorelei-neutral.svg"); }
.portrait-hx { --avatar-bg: #f7e9d2; --avatar-image: url("/assets/referral-avatars/03-hx-notionists.svg"); }
.portrait-xt { --avatar-bg: #dceaf7; --avatar-image: url("/assets/referral-avatars/04-xt-notionists-neutral.svg"); }
.profile-avatar-1 { --avatar-bg: #dcfce7; --avatar-image: url("/assets/referral-avatars/05-rank-01-open-peeps.svg"); }
.profile-avatar-2 { --avatar-bg: #ede9fe; --avatar-image: url("/assets/referral-avatars/06-rank-02-pixel-art.svg"); }
.profile-avatar-3 { --avatar-bg: #fef3c7; --avatar-image: url("/assets/referral-avatars/07-rank-03-pixel-art-neutral.svg"); }
.profile-avatar-4 { --avatar-bg: #dbeafe; --avatar-image: url("/assets/referral-avatars/08-rank-04-thumbs.svg"); }
.profile-avatar-5 { --avatar-bg: #fce7f3; --avatar-image: url("/assets/referral-avatars/09-rank-05-avataaars.svg"); }
.profile-avatar-6 { --avatar-bg: #ccfbf1; --avatar-image: url("/assets/referral-avatars/10-rank-06-lorelei.svg"); }
.profile-avatar-7 { --avatar-bg: #e0e7ff; --avatar-image: url("/assets/referral-avatars/11-rank-07-notionists.svg"); }
.profile-avatar-8 { --avatar-bg: #ffedd5; --avatar-image: url("/assets/referral-avatars/12-rank-08-open-peeps.svg"); }
.profile-avatar-9 { --avatar-bg: #cffafe; --avatar-image: url("/assets/referral-avatars/13-rank-09-pixel-art.svg"); }
.profile-avatar-10 { --avatar-bg: #f3e8ff; --avatar-image: url("/assets/referral-avatars/14-rank-10-thumbs.svg"); }
.node-qk { left: 1%; top: 5%; }.node-tq { right: 0; top: 13%; }.node-hx { left: 0; bottom: 9%; }.node-xt { right: 1%; bottom: 5%; }
.relationship-signal { position: absolute; z-index: 2; width: 9px; height: 9px; border: 2px solid var(--c-surface); border-radius: 50%; background: var(--c-signal); opacity: 0; box-shadow: 0 0 0 7px var(--c-signal-wash); }
.relationship-signal.is-active { animation: referralSignal 1.1s ease-in-out; }
.signal-qk { left: 19.7%; top: 16.7%; --signal-x:218px; --signal-y:216px; }.signal-tq { left:82.3%; top:24.8%; --signal-x:-237px; --signal-y:162px; }.signal-hx { left:17.4%; top:78.7%; --signal-x:235px; --signal-y:-183px; }.signal-xt { left:82%; top:79%; --signal-x:-232px; --signal-y:-184px; }
.gravity-map-caption { margin-top: -4px; display: flex; align-items: center; gap: 12px; color: var(--c-muted); font-size: 9px; letter-spacing: .12em; }
.gravity-map-caption i { height: 1px; flex: 1; background: var(--c-line); }

.invite-home { padding-block: clamp(28px, 4vh, 44px); background: var(--color-panel); }
.invite-home-layout { height: 100%; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr); align-items: center; gap: clamp(40px, 8vw, 120px); }
.invite-home-copy h2 { margin: 0; font-size: clamp(44px, 5vw, 70px); font-weight: 520; line-height: 1.04; letter-spacing: -.055em; }
.invite-home-copy > p { max-width: 640px; margin: 20px 0 0; color: var(--c-copy); font-size: 15px; line-height: 1.75; }
.referral-benefit { max-width: 660px; margin-top: 24px; padding: 20px 0; display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 24px; border-block: 1px solid var(--c-line); }
.referral-benefit strong { color: var(--c-signal-deep); font: 560 clamp(54px, 6vw, 82px)/.85 var(--font-display); letter-spacing: -.065em; }
.referral-benefit p { margin: 0; color: var(--c-copy); font-size: 13px; line-height: 1.65; }
.invite-steps { margin: 18px 0 0; padding: 0; list-style: none; }
.invite-steps li { display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--c-line); }
.invite-steps li > span { color: var(--c-signal); font: 700 11px/1.6 var(--font-mono); }
.invite-steps p { margin: 0; color: var(--c-copy); font-size: 12px; line-height: 1.5; }
.invite-steps strong { display: block; color: var(--c-ink); font-size: 13px; }
.invite-console { align-self: center; min-width: 0; padding: clamp(24px, 3vw, 36px); border: 1px solid var(--c-line); border-top: 3px solid var(--c-signal); background: var(--c-navy); color: var(--c-on-dark); box-shadow: 0 30px 72px rgba(17,43,53,.24); }
.invite-console-head { display: flex; align-items: center; justify-content: space-between; color: var(--c-on-dark-muted); font: 700 10px/1 var(--font-mono); letter-spacing: .12em; }
.invite-console-head i { width: 7px; height: 7px; border-radius: 50%; background: #62d5b5; box-shadow: 0 0 0 6px rgba(98,213,181,.12); }
.invite-state { min-height: 190px; padding: 38px 0 28px; }
.invite-state > p:first-child { margin: 0 0 10px; color: var(--c-on-dark-muted); font-size: 12px; }
.invite-state strong { display: block; color: var(--c-on-dark); font: 650 clamp(38px, 5vw, 66px)/1 var(--font-mono); letter-spacing: .02em; overflow-wrap: anywhere; }
.invite-state > p:last-child { min-height: 3.4em; margin: 18px 0 0; color: var(--c-on-dark-muted); font-size: 12px; line-height: 1.7; }
.invite-state[data-invite-state="incoming"] strong { color: #72d8bb; }
.invite-state[data-invite-state="error"] strong, .invite-state[data-invite-state="invalid"] strong { color: #ff9f91; }
.invite-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.invite-actions .button { min-height: 50px; padding-inline: 12px; justify-content: center; font-size: 12px; white-space: nowrap; }
.invite-actions .button-quiet { border-color: rgba(255,255,255,.26); color: var(--c-on-dark); }
.invite-actions .button:disabled { opacity: .48; cursor: not-allowed; }
.invite-boundary { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.14); color: var(--c-on-dark-muted); font-size: 10px; line-height: 1.6; }

.ranking-live { padding-block: clamp(24px, 3.5vh, 38px); background: var(--c-signal-soft); }
.ranking-live-head { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 40px; }
.ranking-status { width: fit-content; margin: 0 0 10px; display: flex; align-items: center; gap: 10px; color: var(--c-signal-deep); font-size: 10px; font-weight: 750; letter-spacing: .08em; }
.ranking-live h2 { margin: 0; font-size: clamp(38px, 4vw, 58px); font-weight: 520; line-height: 1.05; letter-spacing: -.045em; }
.referral-view .ranking-date { min-width: 190px; padding-left: 22px; display: grid; gap: 3px; border-left: 1px solid var(--c-line-strong); }
.referral-view .ranking-date span, .referral-view .ranking-date small { color: var(--c-copy); font-size: 10px; }
.referral-view .ranking-date time { font-size: 12px; font-weight: 750; }
.ranking-stage { height: calc(100% - 142px); min-height: 0; margin-top: 20px; display: grid; grid-template-columns: minmax(280px,.55fr) minmax(0,1.45fr); gap: 18px; }
.leader-focus { position: relative; min-height: 0; padding: 28px; overflow: clip; color: var(--c-on-dark); background: var(--c-navy); box-shadow: 0 24px 60px var(--c-shadow); }
.leader-focus-top { position: relative; z-index: 2; display: flex; justify-content: space-between; color: var(--c-on-dark-muted); font-size: 10px; letter-spacing: .08em; }
.leader-focus-top b { color: var(--c-gold); }
.leader-focus-avatar { position: relative; z-index: 2; width: 76px; height: 76px; margin-top: clamp(24px, 5vh, 56px); display: grid; place-items: center; border: 4px solid rgba(255,255,255,.18); border-radius: 50%; font-size: 27px; font-weight: 800; }
.leader-focus > p { position: relative; z-index: 2; margin: 18px 0 0; font-family: var(--font-display); font-size: clamp(24px, 2.4vw, 34px); line-height: 1.15; }
.leader-focus > small { position: relative; z-index: 2; margin-top: 5px; display: block; color: var(--c-on-dark-muted); font-size: 10px; }
.leader-focus dl { position: relative; z-index: 2; margin: clamp(28px, 6vh, 64px) 0 0; padding-top: 18px; display: grid; grid-template-columns: .75fr 1.25fr; gap: 14px; border-top: 1px solid rgba(255,255,255,.18); }
.leader-focus dl div { min-width: 0; }
.leader-focus dt { overflow-wrap: anywhere; font-size: clamp(20px, 2.2vw, 30px); font-weight: 750; letter-spacing: -.035em; }
.leader-focus dd { margin: 3px 0 0; color: var(--c-on-dark-muted); font-size: 10px; }
.leader-focus footer { position: absolute; z-index: 2; right: 24px; bottom: 22px; display: flex; align-items: center; gap: 8px; color: var(--c-on-dark-muted); font-size: 10px; }
.leader-focus footer i { width: 7px; height: 7px; border-radius: 50%; background: var(--c-signal); }
.leader-focus-orbit { position: absolute; width: 390px; height: 390px; right: -210px; top: 30px; animation: referralOrbit 28s linear infinite; }
.leader-focus-orbit i { position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; }.leader-focus-orbit i:nth-child(2){inset:55px}.leader-focus-orbit i:nth-child(3){inset:110px;border-color:rgba(226,184,87,.38)}
.leader-focus.is-changing > :not(.leader-focus-orbit) { animation: referralSwap .35s var(--ease-out); }
.rank-list { min-width: 0; overflow-y: auto; background: var(--c-surface); scrollbar-width: thin; }
.rank-row { position: relative; width: 100%; min-height: 62px; padding: 0 18px; display: grid; grid-template-columns: 32px 38px minmax(0,1fr) auto 34px; align-items: center; gap: 10px; overflow: clip; border: 0; border-bottom: 1px solid var(--c-line); border-radius: 0; color: var(--c-ink); background: var(--c-surface); text-align: left; cursor: pointer; transition: transform .25s var(--ease-out), background .25s var(--ease-out); }
.rank-row::after { content: ""; position: absolute; inset-block: 0; left: 0; width: 3px; background: var(--c-signal); opacity: 0; }
.rank-row:hover { z-index: 2; transform: translateX(5px); }.rank-row[aria-pressed="true"] { background: #eff8f3; }.rank-row[aria-pressed="true"]::after { opacity: 1; }
.rank-progress { position: absolute; left: 0; bottom: 0; width: var(--score); height: 2px; background: var(--c-signal); transform: scaleX(0); transform-origin: left; }
.ranking-stage.is-visible .rank-progress { transform: scaleX(1); transition: transform .75s var(--ease-out); }
.rank-row > b { color: var(--c-copy); font-size: 10px; }.rank-row .leader { width: 34px; height: 34px; font-size: 11px; }
.rank-row > span:nth-of-type(2) { min-width: 0; display: grid; gap: 2px; }.rank-row > span strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }.rank-row > span small, .rank-row em small { color: var(--c-copy); font-size: 9px; }
.rank-row em { min-width: 126px; display: flex; justify-content: flex-end; gap: 18px; font-style: normal; }.rank-row em strong { font-size: 10px; white-space: nowrap; }.rank-row em small { min-width: 62px; color: var(--c-signal-deep); font-weight: 750; text-align: right; white-space: nowrap; }.rank-row > u { color: var(--c-copy); font-size: 9px; text-decoration: none; opacity: 0; }.rank-row:hover > u, .rank-row[aria-pressed="true"] > u { opacity: 1; }
.ranking-boundary { margin-top: 10px; color: var(--c-copy); font-size: 10px; line-height: 1.5; text-align: right; }

[data-ready] [data-reveal] { opacity: 0; transform: translateY(20px); }
[data-ready] [data-reveal].is-revealed { opacity: 1; transform: none; transition: transform .7s var(--ease-out), opacity .7s var(--ease-out); }

@keyframes referralHub { 0%,100%{opacity:.2;transform:scale(.96)}50%{opacity:.48;transform:scale(1.06)} }
@keyframes referralSignal { 0%{opacity:0;transform:translate3d(0,0,0) scale(.65)}14%{opacity:1}82%{opacity:.9}100%{opacity:0;transform:translate3d(var(--signal-x),var(--signal-y),0) scale(1)} }
@keyframes referralSwap { from{opacity:.35;transform:translateY(6px)}to{opacity:1;transform:none} }
@keyframes referralOrbit { to{transform:rotate(360deg)} }

@media (max-width: 1100px) {
  .gravity-grid { grid-template-columns: minmax(0,.72fr) minmax(0,1.28fr); gap: 24px; }
  .gravity-copy h1 { font-size: clamp(40px,5vw,58px); }
  .gravity-plane { min-height: 500px; }
  .network-node { width: 180px; }
  .invite-home-layout { grid-template-columns: minmax(0,1fr) minmax(320px,.76fr); gap: 40px; }
  .ranking-stage { grid-template-columns: minmax(250px,.5fr) minmax(0,1.5fr); }
}

@media (max-width: 820px) {
  .referral-view > section { padding-block: 20px; }
  .gravity-grid { grid-template-columns: minmax(0,1fr); grid-template-rows: auto minmax(0,1fr); align-content: center; gap: 12px; }
  .gravity-copy h1 { font-size: 38px; }
  .gravity-copy > p { margin-top: 12px; font-size: 12px; line-height: 1.55; }
  .gravity-status { margin-bottom: 12px; }
  .gravity-metrics { margin-top: 14px; padding-block: 12px; }
  .gravity-metrics strong { font-size: 34px; }
  .gravity-map { align-self: stretch; }
  .gravity-plane { height: 100%; min-height: 0; }
  .network-hub { width: 200px; min-height: 200px; padding: 26px 20px; }
  .network-node { width: 174px; min-height: 72px; }
  .invite-home-layout { grid-template-columns: minmax(0,1fr); gap: 18px; align-content: center; }
  .invite-home-copy h2 { font-size: 38px; }
  .invite-home-copy > p { margin-top: 12px; font-size: 12px; }
  .referral-benefit { margin-top: 14px; padding-block: 12px; }
  .referral-benefit strong { font-size: 48px; }
  .invite-steps { margin-top: 8px; }
  .invite-steps li { padding: 8px 0; }
  .invite-console { padding: 22px; }
  .invite-state { min-height: 118px; padding: 20px 0 14px; }
  .invite-state strong { font-size: 38px; }
  .ranking-live-head { grid-template-columns: minmax(0,1fr) auto; gap: 20px; }
  .ranking-live h2 { font-size: 34px; }
  .ranking-stage { height: calc(100% - 116px); grid-template-columns: minmax(220px,.52fr) minmax(0,1.48fr); }
  .leader-focus { padding: 20px; }
  .leader-focus-avatar { margin-top: 22px; }
  .leader-focus dl { margin-top: 26px; }
  .rank-row { padding-inline: 12px; grid-template-columns: 28px 34px minmax(0,1fr) auto; }
  .rank-row > u { display: none; }
}

@media (max-width: 680px) {
  .referral-view-active .nav-inner { gap: 6px; }
  .referral-view-active .brand { gap: 7px; }
  .referral-view-active .brand-symbol { width: 27px; height: 27px; }
  .referral-view-active .brand > span { font-size: 14px; }
  .referral-view-active .nav-account {
    min-width: 44px;
    width: 44px;
    padding-inline: 2px;
    margin-left: auto;
    font-size: 11px;
  }
  .referral-view-active .nav-contact {
    min-width: 44px;
    min-height: 44px;
    padding-inline: 10px;
    font-size: 12px;
  }
  .referral-view > section { padding-block: 14px; }
  .gravity-grid { width: min(100% - 24px, 540px); display: flex; flex-direction: column; justify-content: center; }
  .gravity-copy h1 { font-size: 34px; line-height: 1; }
  .gravity-copy > p { display: none; }
  .gravity-status { margin-bottom: 10px; padding: 6px 9px; font-size: 9px; }
  .gravity-metrics { width: 100%; margin-top: 12px; padding-block: 10px; }
  .gravity-metrics small { font-size: 9px; }
  .gravity-copy .gravity-boundary { display: none; }
  .gravity-map { width: 100%; min-height: 0; }
  .gravity-plane { display: flex; flex-direction: column; transform: none !important; }
  .gravity-links, .relationship-signal { display: none; }
  .network-hub { position: relative; left: auto; top: auto; width: 100%; min-height: 184px; border-radius: 4px; transform: none; }
  .network-hub::before { border-radius: 0; }
  .network-rail { position: relative; inset: auto; width: calc(100vw - 12px); margin: 10px 0 0 calc((100vw - min(100vw - 24px,540px)) / -2); padding: 6px 12px 12px; display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .network-node { position: relative; inset: auto; width: min(74vw,250px); min-width: min(74vw,250px); min-height: 72px; scroll-snap-align: center; }
  .network-node:hover, .network-node[aria-pressed="true"] { transform: none; }
  .gravity-map-caption { display: none; }
  .invite-home-layout { width: min(100% - 24px,540px); gap: 12px; }
  .invite-home-copy h2 { font-size: 32px; line-height: 1; }
  .invite-home-copy > p { display: none; }
  .referral-benefit { margin-top: 10px; gap: 14px; }
  .referral-benefit strong { font-size: 42px; }
  .referral-benefit p { font-size: 10px; }
  .invite-steps li { grid-template-columns: 34px minmax(0,1fr); padding: 6px 0; }
  .invite-steps p { font-size: 10px; }.invite-steps strong { font-size: 11px; }
  .invite-console { padding: 18px; }
  .invite-state { min-height: 102px; padding: 14px 0 10px; }
  .invite-state strong { font-size: 30px; }
  .invite-state > p:last-child { margin-top: 8px; font-size: 10px; }
  .invite-actions .button { min-height: 44px; font-size: 10px; }
  .invite-boundary { margin-top: 10px; padding-top: 9px; font-size: 9px; }
  .ranking-live { padding-inline: 12px; }
  .ranking-live-head { display: grid; grid-template-columns: minmax(0,1fr); gap: 8px; }
  .ranking-status { margin-bottom: 6px; }
  .ranking-live h2 { font-size: 30px; }
  .referral-view .ranking-date { padding: 7px 0 0; display: flex; gap: 8px; border-top: 1px solid var(--c-line-strong); border-left: 0; }
  .referral-view .ranking-date small { display: none; }
  .ranking-stage { width: 100%; height: calc(100% - 131px); margin-top: 10px; display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: 185px minmax(0,1fr); gap: 8px; }
  .leader-focus { min-height: 0; padding: 16px; }
  .leader-focus-avatar { width: 52px; height: 52px; margin-top: 12px; font-size: 18px; }
  .leader-focus > p { position: absolute; left: 84px; top: 52px; margin: 0; font-size: 22px; }
  .leader-focus > small { position: absolute; left: 84px; top: 84px; }
  .leader-focus dl { position: absolute; left: 16px; right: 16px; bottom: 16px; margin: 0; padding-top: 10px; }
  .leader-focus footer, .leader-focus-orbit { display: none; }
  .rank-row { min-height: 58px; grid-template-columns: 26px 32px minmax(0,1fr) auto; }
  .rank-row em { min-width: 68px; display: grid; justify-items: end; gap: 0; }.rank-row em strong { font-size: 9px; }.rank-row em small { min-width: 0; font-size: 9px; }
  .ranking-boundary { display: none; }
}

@media (max-height: 700px) and (min-width: 681px) {
  .gravity-copy h1, .invite-home-copy h2 { font-size: 42px; }
  .gravity-plane { min-height: 460px; }
  .ranking-stage { height: calc(100% - 112px); }
  .rank-row { min-height: 54px; }
}

@media (prefers-reduced-motion: reduce) {
  .referral-view *, .referral-view *::before, .referral-view *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .referral-view [data-reveal] { opacity: 1 !important; transform: none !important; }
  .referral-view .gravity-plane { transform: none !important; }
  .referral-view .rank-progress { transform: scaleX(1); }
}