:root {
  --ink: #171717;
  --soft-ink: #383838;
  --muted: #6b7280;
  --line: #d9e5df;
  --paper: #fffefa;
  --mist: #f1fff7;
  --mint: #9cebc9;
  --mint-strong: #00e070;
  --pink: #ff2fa3;
  --yellow: #ffd43b;
  --lime: #6dd00b;
  --orange: #ff7a21;
  --deep: #163c2c;
  --neon-rainbow: conic-gradient(from 218deg, #27204e, #6d39ff, #ff2fa3, #ff7a21, #00e070, #1876ff, #27204e);
  --shadow: 0 16px 50px rgba(23, 23, 23, 0.12);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  background: #f8fafc;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
}

section[id] {
  scroll-margin-top: 156px;
}

.invite-strip {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  width: min(1120px, calc(100% - 32px));
  min-height: 92px;
  margin: 8px auto 0;
  display: grid;
  grid-template-columns: minmax(98px, 150px) minmax(0, 1fr);
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 11px 34px 12px 24px;
  color: #f7fbff;
  background:
    linear-gradient(104deg, rgba(142, 70, 255, 0.95), rgba(37, 103, 255, 0.85) 22%, rgba(7, 10, 32, 0.2) 50%, rgba(250, 47, 223, 0.86) 76%, rgba(72, 116, 255, 0.95)) border-box,
    radial-gradient(circle at 18% 44%, rgba(51, 137, 255, 0.34), transparent 22%) padding-box,
    radial-gradient(circle at 72% 45%, rgba(138, 64, 255, 0.23), transparent 30%) padding-box,
    linear-gradient(180deg, #02040c 0%, #070b1d 54%, #010208 100%) padding-box;
  border: 1px solid transparent;
  border-radius: 0;
  clip-path: polygon(24px 0, calc(100% - 24px) 0, 100% 24px, 100% calc(100% - 24px), calc(100% - 24px) 100%, 24px 100%, 0 calc(100% - 24px), 0 24px);
  box-shadow:
    0 10px 22px rgba(2, 5, 18, 0.18),
    0 0 14px rgba(67, 91, 255, 0.14),
    inset 0 0 24px rgba(63, 84, 255, 0.09);
  font-size: 14px;
  text-align: center;
  backdrop-filter: blur(16px);
  cursor: pointer;
}

.invite-strip::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse at 18% 50%, transparent 0 27%, rgba(77, 159, 255, 0.36) 27.5% 28%, transparent 28.6%),
    radial-gradient(ellipse at 18% 50%, transparent 0 39%, rgba(153, 76, 255, 0.32) 39.3% 39.8%, transparent 40.3%),
    radial-gradient(ellipse at 18% 50%, transparent 0 51%, rgba(67, 214, 255, 0.18) 51.2% 51.7%, transparent 52.2%),
    radial-gradient(circle, rgba(255, 255, 255, 0.7) 0 1px, transparent 1.7px) 18px 16px / 92px 42px,
    radial-gradient(circle, rgba(80, 151, 255, 0.56) 0 1px, transparent 1.6px) 46px 22px / 128px 58px,
    linear-gradient(98deg, transparent 10%, rgba(86, 144, 255, 0.22) 10.3%, transparent 10.8% 48%, rgba(255, 73, 211, 0.18) 48.4%, transparent 48.9%),
    linear-gradient(78deg, transparent 16%, rgba(153, 73, 255, 0.2) 16.4%, transparent 17% 82%, rgba(34, 106, 255, 0.2) 82.4%, transparent 83%);
  opacity: 0.72;
}

.invite-strip::after {
  content: "";
  position: absolute;
  inset: 6px;
  z-index: 1;
  pointer-events: none;
  border: 1px solid transparent;
  background:
    linear-gradient(#050713, #050713) padding-box,
    linear-gradient(112deg, rgba(132, 76, 255, 0.95), rgba(40, 110, 255, 0.5) 26%, rgba(31, 42, 112, 0.35) 54%, rgba(255, 67, 215, 0.76) 78%, rgba(113, 72, 255, 0.96)) border-box;
  clip-path: polygon(18px 0, calc(100% - 18px) 0, 100% 18px, 100% calc(100% - 18px), calc(100% - 18px) 100%, 18px 100%, 0 calc(100% - 18px), 0 18px);
  opacity: 0.72;
  box-shadow:
    inset 0 0 20px rgba(56, 102, 255, 0.16),
    0 0 22px rgba(112, 65, 255, 0.28);
}

.invite-strip > * {
  position: relative;
  z-index: 2;
}

.diamond-shine {
  flex: 0 0 auto;
  grid-column: 1;
  justify-self: center;
  width: 78px;
  height: 78px;
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.78), transparent 10%),
    radial-gradient(circle at 38% 36%, rgba(60, 174, 255, 0.38), transparent 28%),
    radial-gradient(circle at 62% 70%, rgba(255, 46, 192, 0.24), transparent 34%),
    repeating-linear-gradient(88deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 18px),
    repeating-linear-gradient(0deg, rgba(129, 185, 255, 0.07) 0 1px, transparent 1px 20px),
    radial-gradient(circle at 50% 52%, rgba(19, 42, 88, 0.74), rgba(3, 7, 22, 0.9) 66%, rgba(0, 1, 7, 0.96) 100%) padding-box,
    conic-gradient(from 210deg, #513cff, #11d5ff, #20e47e, #ffe13c, #ff8a2a, #ff2f9e, #8f48ff, #513cff) border-box;
  border: 1px solid transparent;
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.19),
    inset 0 -18px 28px rgba(0, 0, 0, 0.58),
    0 0 0 1px rgba(125, 171, 255, 0.18),
    0 0 18px rgba(76, 129, 255, 0.42),
    0 0 34px rgba(156, 75, 255, 0.22);
  transform: none;
}

.diamond-shine::before,
.diamond-shine::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.diamond-shine::before {
  content: "S";
  inset: 0;
  display: grid;
  place-items: center;
  color: transparent;
  background:
    linear-gradient(90deg, #18ddff 0%, #6d5cff 18%, #ff37bd 36%, #ff8b23 50%, #ffe13c 62%, #25e879 76%, #24a7ff 90%, #ff42d0 100%);
  background-repeat: no-repeat;
  background-size: 58% 100%;
  background-position: center;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.22);
  font-family: Impact, "Arial Black", Arial, sans-serif;
  font-size: 48px;
  font-style: italic;
  line-height: 1;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.28),
    0 0 18px rgba(255, 255, 255, 0.2),
    0 0 22px rgba(110, 151, 255, 0.2);
}

.diamond-shine::after {
  inset: -11px -28px;
  border: 1px solid rgba(105, 179, 255, 0.55);
  border-left-color: rgba(255, 65, 219, 0.58);
  border-bottom-color: rgba(107, 69, 255, 0.48);
  border-radius: 50%;
  transform: rotate(-20deg);
  background: transparent;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04),
    0 0 16px rgba(80, 142, 255, 0.24);
  filter: none;
}

.invite-message {
  position: relative;
  grid-column: 2;
  align-self: center;
  justify-self: center;
  min-width: 0;
  display: grid;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.invite-message::before {
  content: "";
  display: block;
  position: absolute;
  inset: -8px -22px;
  z-index: -1;
  background: radial-gradient(ellipse at center, rgba(3, 7, 20, 0.58), rgba(3, 7, 20, 0.22) 52%, transparent 74%);
  filter: blur(4px);
}

.invite-message strong {
  padding: 0;
  color: #ffffff;
  background: none;
  -webkit-text-fill-color: #ffffff;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-shadow:
    0 0 16px rgba(166, 185, 255, 0.44),
    0 4px 10px rgba(0, 0, 0, 0.6);
}

.invite-subline {
  color: rgba(230, 235, 247, 0.9);
  font-weight: 740;
  line-height: 1.25;
  font-size: clamp(10px, 1vw, 13px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-shadow: 0 1px 10px rgba(3, 7, 19, 0.54);
}

.invite-codes {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 1px;
}

.invite-codes > span {
  min-width: 166px;
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 14px;
  color: rgba(234, 242, 255, 0.86);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent 42%),
    linear-gradient(180deg, rgba(10, 18, 48, 0.9), rgba(3, 6, 20, 0.88));
  border: 1px solid rgba(72, 142, 255, 0.64);
  border-radius: 0;
  clip-path: polygon(17px 0, calc(100% - 13px) 0, 100% 13px, 100% calc(100% - 13px), calc(100% - 17px) 100%, 13px 100%, 0 calc(100% - 13px), 0 17px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 0 20px rgba(52, 95, 255, 0.12),
    0 0 12px rgba(61, 117, 255, 0.22);
}

.invite-codes > span:nth-child(2) {
  border-color: rgba(255, 69, 226, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 0 20px rgba(255, 69, 226, 0.1),
    0 0 12px rgba(255, 50, 166, 0.2);
}

.invite-codes small {
  color: rgba(230, 237, 252, 0.78);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.invite-strip b {
  color: #53cfff;
  background: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  font-weight: 950;
  font-size: 17px;
  line-height: 1;
  text-shadow:
    0 0 10px rgba(51, 181, 255, 0.38),
    0 1px 8px rgba(0, 0, 0, 0.42);
  box-shadow: none;
}

.invite-codes > span:nth-child(2) b {
  color: #f261ff;
  text-shadow:
    0 0 10px rgba(242, 97, 255, 0.42),
    0 1px 8px rgba(0, 0, 0, 0.42);
}

.invite-copy-status {
  position: absolute;
  right: 24px;
  bottom: 20px;
  z-index: 3;
  color: rgba(236, 242, 255, 0.9);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  opacity: 0;
  text-transform: uppercase;
  transform: translateY(8px);
  transition: opacity 180ms ease, transform 180ms ease;
  text-shadow: 0 0 14px rgba(94, 156, 255, 0.5);
}

.invite-strip.is-copied .invite-copy-status {
  opacity: 1;
  transform: translateY(0);
}

.invite-copy-hit {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  padding: 0;
  color: transparent;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 0;
}

.mini-button,
.button-primary,
.button-secondary,
.nav-cta {
  border: 0;
  cursor: pointer;
  font: inherit;
  font-weight: 800;
}

.mini-button {
  color: #f8fbff;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.02)),
    linear-gradient(90deg, rgba(45, 96, 255, 0.46), rgba(255, 47, 164, 0.36), rgba(0, 203, 104, 0.34));
  padding: 9px 14px;
  border: 1px solid rgba(160, 195, 255, 0.3);
  border-radius: 6px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 10px 22px rgba(3, 9, 28, 0.28),
    0 0 22px rgba(96, 129, 255, 0.18);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.38);
}

.mini-button:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.42);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 14px 28px rgba(3, 9, 28, 0.32),
    0 0 28px rgba(255, 50, 165, 0.22);
}

.nav-shell {
  width: min(1120px, calc(100% - 32px));
  min-height: 62px;
  margin: 16px auto 0;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: #173224;
  background:
    linear-gradient(90deg, rgba(255, 47, 163, 0.1), rgba(255, 122, 33, 0.07), rgba(0, 224, 112, 0.09)) border-box,
    rgba(255, 255, 255, 0.9) padding-box;
  border: 1px solid rgba(29, 106, 74, 0.14);
  border-radius: 999px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.nav-shell::before {
  content: none;
}

.nav-shell::after {
  content: none;
}

.nav-shell > * {
  position: static;
  z-index: auto;
}

.brand {
  padding: 0;
  display: inline-flex;
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.brand img {
  width: 126px;
  height: auto;
  filter: none;
}

.nav-links {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
}

.nav-links a,
.nav-cta,
.nav-link-soft {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border-radius: 999px;
}

.nav-links a:hover,
.nav-links a:focus-visible {
  background: rgba(0, 224, 112, 0.1);
}

.nav-links .community-tab {
  color: #173224;
  font-weight: 760;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(249, 244, 234, 0.94)) padding-box,
    linear-gradient(118deg, rgba(29, 106, 74, 0.22), rgba(255, 47, 163, 0.16), rgba(0, 224, 112, 0.26)) border-box;
  border: 1px solid transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.nav-cta {
  color: #fff;
  background: linear-gradient(135deg, #1d6a4a, #ff2fa3);
}

.nav-link-soft {
  color: rgba(23, 50, 36, 0.72);
  font-size: 13px;
  font-weight: 640;
  background: rgba(255, 255, 255, 0.54);
  border: 1px solid rgba(29, 106, 74, 0.12);
}

.nav-community {
  margin-left: auto;
  min-width: 172px;
}

.band-mint {
  background:
    radial-gradient(circle at 72% 18%, rgba(255, 212, 59, 0.72) 0 12px, transparent 13px),
    radial-gradient(circle at 84% 36%, rgba(255, 47, 163, 0.38) 0 22px, transparent 23px),
    linear-gradient(180deg, #98edc9 0%, #dffff0 62%, #f8fafc 100%);
}

.band-white {
  background: var(--paper);
}

.band-mist {
  background: linear-gradient(180deg, #effff5, #f8fafc);
}

.band-ink {
  color: #fff;
  background:
    radial-gradient(circle at 18% 20%, rgba(255, 47, 163, 0.22), transparent 30%),
    radial-gradient(circle at 80% 10%, rgba(0, 224, 112, 0.18), transparent 28%),
    linear-gradient(135deg, #123725, #1d5c41);
}

.hero {
  min-height: 760px;
  margin-top: -78px;
  padding: 150px max(24px, calc((100vw - 1120px) / 2)) 84px;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1.1fr);
  align-items: center;
  gap: 42px;
}

.hero-copy {
  position: relative;
  z-index: 1;
}

.eyebrow {
  margin: 0 0 12px;
  color: var(--pink);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.hero .eyebrow {
  position: relative;
  z-index: 1;
  display: inline-block;
  padding: 0;
  color: var(--pink);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-size: 15.4px;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.88),
    0 0 9px rgba(255, 255, 255, 0.95),
    0 0 16px rgba(255, 255, 255, 0.78);
}

.hero .eyebrow::before {
  content: "";
  position: absolute;
  left: -10px;
  right: -10px;
  bottom: -4px;
  z-index: -1;
  height: 16px;
  background: rgba(255, 255, 255, 0.72);
  border-radius: 999px;
  filter: blur(7px);
}

h1,
h2,
h3,
p {
  overflow-wrap: anywhere;
}

h1,
h2 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.04;
  letter-spacing: 0;
}

h1 {
  max-width: 760px;
  font-size: 64px;
}

h2 {
  font-size: 40px;
}

h3 {
  margin: 0;
  font-size: 21px;
  line-height: 1.2;
}

.hero-text {
  max-width: 620px;
  margin: 24px 0 0;
  color: var(--soft-ink);
  font-size: 20px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.hero-actions.centered {
  justify-content: center;
}

.button-primary,
.button-secondary {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 18px;
  border-radius: 8px;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.button-primary {
  color: #fff;
  background: linear-gradient(135deg, #1d6a4a, #ff2fa3);
  box-shadow: 0 10px 24px rgba(255, 47, 163, 0.18);
}

.button-secondary {
  color: #123725;
  background: #fff;
  border: 2px solid rgba(29, 106, 74, 0.32);
}

.button-primary:hover,
.button-secondary:hover {
  transform: translateY(-2px);
}

.code-panel {
  width: min(100%, 520px);
  margin-top: 26px;
  padding: 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: center;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(23, 23, 23, 0.12);
  border-radius: 8px;
  box-shadow: 0 12px 36px rgba(23, 23, 23, 0.08);
}

.code-panel div {
  min-width: 0;
  padding: 10px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(29, 106, 74, 0.1);
  border-radius: 8px;
}

.code-panel span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.code-panel strong {
  width: 100%;
  padding: 8px 10px;
  display: block;
  color: #fff;
  background: linear-gradient(110deg, #1d6a4a, #ff2fa3, #ff7a21);
  border-radius: 8px;
  font-size: 18px;
  text-align: center;
  letter-spacing: 0;
}

.hero-art {
  margin: 0;
}

.hero-art img,
.story-image img,
.path-art img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.section {
  padding: 84px max(24px, calc((100vw - 1120px) / 2));
}

.section-heading {
  max-width: 740px;
  margin: 0 auto 38px;
  padding-bottom: 2px;
  text-align: center;
}

.section-heading h2 {
  margin-bottom: 14px;
}

.section-subtitle {
  max-width: 820px;
  margin: 16px auto 0;
  color: var(--soft-ink);
  font-size: 17px;
}

.soft-italic {
  max-width: 820px;
  margin: 10px auto 0;
  color: #65726d;
  font-size: 15px;
}

.simple-grid,
.doc-grid,
.dictionary {
  display: grid;
  gap: 24px;
}

.simple-grid {
  grid-template-columns: repeat(3, 1fr);
}

.doc-grid,
.dictionary {
  grid-template-columns: repeat(4, 1fr);
}

.dictionary {
  gap: 16px;
}

.mini-card,
.doc-card,
.dictionary article {
  min-height: 236px;
  padding: 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(23, 23, 23, 0.06);
}

.mini-card p,
.doc-card p,
.dictionary p {
  margin: 14px 0 0;
  color: var(--soft-ink);
}

.dictionary article {
  min-height: 188px;
  padding: 18px;
}

.dictionary p {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.55;
}

.dictionary p strong {
  display: block;
  margin-bottom: 6px;
  color: var(--ink);
}

.faq-section {
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 47, 163, 0.08), transparent 25%),
    radial-gradient(circle at 88% 12%, rgba(0, 224, 112, 0.1), transparent 28%),
    linear-gradient(180deg, #fffefa, #f4fff8);
}

.faq-page {
  background: #f7fff9;
}

.faq-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.72fr);
  gap: 34px;
  align-items: center;
  padding: 82px max(24px, calc((100vw - 1180px) / 2)) 64px;
}

.faq-hero-copy {
  max-width: 760px;
}

.faq-hero-copy h1 {
  max-width: 850px;
  margin: 10px 0 0;
  font-size: clamp(42px, 6vw, 82px);
  line-height: 0.96;
}

.faq-hero-copy p:not(.eyebrow) {
  max-width: 690px;
  margin-top: 24px;
  color: var(--soft-ink);
  font-size: clamp(18px, 2vw, 23px);
  line-height: 1.5;
}

.faq-contact-card .hero-actions {
  margin-top: 22px;
}

.faq-contact-card .button-primary,
.faq-contact-card .button-secondary {
  min-height: 54px;
}

.faq-list {
  max-width: 920px;
  margin: 0 auto;
  display: grid;
  gap: 12px;
}

.faq-list details {
  overflow: hidden;
  color: #173224;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(247, 255, 250, 0.94)) padding-box,
    linear-gradient(125deg, rgba(255, 47, 163, 0.18), rgba(0, 224, 112, 0.18)) border-box;
  border: 1px solid transparent;
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(23, 23, 23, 0.06);
}

.faq-list summary {
  min-height: 58px;
  padding: 16px 54px 16px 18px;
  position: relative;
  cursor: pointer;
  list-style: none;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.25;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary::after {
  content: "+";
  position: absolute;
  right: 18px;
  top: 50%;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  color: #163c2c;
  background: rgba(156, 235, 201, 0.38);
  border: 1px solid rgba(29, 106, 74, 0.14);
  border-radius: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  line-height: 1;
}

.faq-list details[open] summary::after {
  content: "-";
}

.faq-list p {
  margin: 0;
  padding: 0 18px 18px;
  color: var(--soft-ink);
  font-size: 16px;
  line-height: 1.65;
}

.icon-bubble {
  width: 52px;
  height: 52px;
  margin-bottom: 20px;
  display: grid;
  place-items: center;
  color: #fff;
  border-radius: 50%;
  font-size: 24px;
  font-weight: 900;
}

.icon-pink {
  background: var(--pink);
}

.icon-green {
  background: var(--mint-strong);
}

.icon-yellow {
  color: var(--ink);
  background: var(--yellow);
}

.story,
.path-section,
.safety {
  padding: 84px max(24px, calc((100vw - 1120px) / 2));
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  align-items: center;
  gap: 48px;
}

.story-image,
.path-art {
  margin: 0;
}

.story-copy p {
  color: var(--soft-ink);
  font-size: 18px;
}

.quote-note {
  margin-top: 24px;
  padding: 18px;
  color: #123224;
  background: #f1fff7;
  border: 1px solid #b6ead1;
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(23, 23, 23, 0.06);
}

.quote-note p {
  margin: 0;
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 22px;
  font-weight: 800;
}

.quote-note cite {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 14px;
  font-style: normal;
}

.path-section {
  background:
    linear-gradient(180deg, #f8fafc, #f2fff7);
}

.path-copy {
  order: 2;
}

.path-art {
  order: 1;
}

.cards-section {
  padding: 64px max(24px, calc((100vw - 1120px) / 2)) 84px;
  background:
    radial-gradient(circle at 12% 8%, rgba(255, 47, 163, 0.1), transparent 26%),
    radial-gradient(circle at 90% 6%, rgba(0, 224, 112, 0.14), transparent 28%),
    linear-gradient(180deg, #f8fafc, #f0fff6);
}

.cards-grid {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.solulu-card {
  overflow: hidden;
  min-width: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 12px 34px rgba(23, 23, 23, 0.08);
}

.solulu-card img {
  width: 100%;
  aspect-ratio: 1 / 0.78;
  object-fit: contain;
  padding: 18px 22px;
  background:
    radial-gradient(circle at 20% 10%, rgba(255, 47, 163, 0.18), transparent 34%),
    radial-gradient(circle at 85% 20%, rgba(0, 224, 112, 0.16), transparent 30%),
    #050505;
}

.card-copy {
  padding: 14px;
  text-align: center;
}

.card-copy h3 {
  margin: 0;
  display: grid;
  gap: 2px;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.05;
}

.card-copy h3 span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.card-copy h3 strong {
  font-weight: 950;
}

.card-copy p {
  min-height: 48px;
  margin: 10px 0 14px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.45;
}

.performance-line {
  display: grid;
  gap: 4px;
}

.performance-line span:first-child {
  color: #cb2a93;
}

.performance-line span:last-child {
  color: #237357;
}

.card-copy dl {
  margin: 0;
  display: grid;
  gap: 8px;
  text-align: left;
}

.card-copy dl div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid #edf2ef;
}

.card-copy dt,
.card-copy dd {
  margin: 0;
}

.card-copy dt {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.card-copy dd {
  color: var(--ink);
  font-size: 15px;
  font-weight: 900;
}

.withdrawal-panel {
  margin-top: 28px;
  padding: 28px;
  display: grid;
  grid-template-columns: 0.48fr 1.52fr;
  gap: 24px;
  align-items: start;
  color: #fff;
  background:
    radial-gradient(circle at 92% 18%, rgba(255, 212, 59, 0.18), transparent 26%),
    radial-gradient(circle at 12% 20%, rgba(255, 47, 163, 0.14), transparent 30%),
    linear-gradient(135deg, #163c2c, #1d5c41);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.withdrawal-panel .eyebrow {
  color: var(--yellow);
}

.withdrawal-panel h3 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 30px;
}

.withdrawal-intro p:not(.eyebrow) {
  margin: 14px 0 0;
  color: rgba(255, 255, 255, 0.76);
  font-size: 14px;
}

.flow-board {
  position: relative;
  overflow: hidden;
  padding: 18px;
  display: grid;
  gap: 14px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
}

.flow-board::before {
  content: "";
  position: absolute;
  inset: -55% 62% auto -12%;
  height: 180px;
  background: radial-gradient(circle, rgba(255, 47, 163, 0.34), transparent 68%);
  pointer-events: none;
}

.flow-source,
.split-row,
.destination-row,
.locked-row {
  position: relative;
  z-index: 1;
}

.flow-source {
  min-height: 64px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
}

.flow-source span {
  color: rgba(255, 255, 255, 0.82);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.2;
  text-transform: uppercase;
}

.coin-stack {
  position: relative;
  width: 92px;
  height: 48px;
}

.coin-stack i {
  position: absolute;
  bottom: 2px;
  width: 42px;
  height: 42px;
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.82), transparent 16%),
    radial-gradient(circle at 58% 66%, rgba(0, 224, 112, 0.34), transparent 24%),
    var(--neon-rainbow);
  border: 2px solid rgba(255, 255, 255, 0.78);
  border-radius: 50%;
  box-shadow:
    inset 0 -8px 13px rgba(29, 18, 73, 0.34),
    inset 0 4px 9px rgba(255, 255, 255, 0.22),
    0 9px 18px rgba(13, 70, 45, 0.22);
  transform: rotate(-7deg);
}

.coin-stack i::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(255, 255, 255, 0.66);
  border-radius: 50%;
}

.coin-stack i::after {
  content: "";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.9);
  background: transparent;
  font-size: 19px;
  font-weight: 950;
  text-shadow: 0 2px 7px rgba(28, 14, 68, 0.42);
}

.coin-stack i:nth-child(2)::after {
  content: "\20AE";
}

.coin-stack i:nth-child(1) {
  left: 4px;
  z-index: 1;
  opacity: 0.88;
}

.coin-stack i:nth-child(2) {
  left: 25px;
  bottom: 7px;
  z-index: 3;
  width: 46px;
  height: 46px;
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.9), transparent 16%),
    linear-gradient(145deg, #2aa886, #1f8d74 45%, #e73ca6);
}

.coin-stack i:nth-child(3) {
  right: 4px;
  z-index: 2;
  opacity: 0.88;
  transform: rotate(8deg);
}

.split-row,
.destination-row,
.locked-row {
  display: grid;
  gap: 12px;
}

.split-row {
  grid-template-columns: 1.4fr 0.9fr;
}

.destination-row,
.locked-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.split-card,
.destination-card,
.locked-row article {
  border-radius: 8px;
}

.split-card {
  padding: 16px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 14px;
  row-gap: 2px;
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.split-card strong {
  grid-row: span 2;
  font-size: 34px;
  line-height: 1;
}

.split-card span,
.split-card small {
  display: block;
}

.split-card span {
  font-size: 16px;
  font-weight: 900;
}

.split-card small {
  color: rgba(255, 255, 255, 0.78);
  font-size: 12px;
  font-weight: 800;
}

.split-card-live {
  color: #103420;
  background:
    radial-gradient(circle at 80% 12%, rgba(255, 255, 255, 0.72), transparent 24%),
    linear-gradient(135deg, #c9ffe4, #00e070);
}

.split-card-live small {
  color: rgba(16, 52, 32, 0.76);
}

.split-card-locked {
  color: #173224;
  background:
    radial-gradient(circle at 80% 12%, rgba(255, 255, 255, 0.72), transparent 24%),
    linear-gradient(135deg, #fff7d1, #ffb74a 45%, #ff5bb6);
}

.split-card-locked small {
  color: rgba(23, 50, 36, 0.78);
}

.flow-image-card {
  margin: 0;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
}

.flow-image-card img {
  width: 100%;
  display: block;
}

.destination-card {
  min-height: 220px;
  padding: 16px;
  color: var(--ink);
  background: #fff;
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

.destination-card strong {
  display: block;
  margin-top: 12px;
  font-size: 20px;
}

.destination-card p {
  margin: 8px 0 0;
  color: var(--soft-ink);
  font-size: 14px;
}

.wallet-scene,
.visa-scene {
  position: relative;
  overflow: hidden;
  min-height: 96px;
  background:
    radial-gradient(circle at 15% 20%, rgba(255, 255, 255, 0.86), transparent 18%),
    linear-gradient(135deg, #eafff4, #d4f7ff);
  border: 1px solid #c8efe5;
  border-radius: 8px;
}

.coin {
  position: absolute;
  z-index: 2;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: #fff;
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.86), transparent 18%),
    radial-gradient(circle at 66% 68%, rgba(0, 224, 112, 0.36), transparent 23%),
    var(--neon-rainbow);
  border: 2px solid rgba(255, 255, 255, 0.82);
  border-radius: 50%;
  box-shadow:
    inset 0 -7px 12px rgba(29, 18, 73, 0.34),
    inset 0 4px 9px rgba(255, 255, 255, 0.22),
    0 8px 16px rgba(13, 70, 45, 0.22);
}

.coin::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(255, 255, 255, 0.66);
  border-radius: 50%;
}

.coin::after {
  content: "\20AE";
  font-weight: 900;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
}

.visa-scene .coin-two::after {
  content: "$";
}

.coin-one {
  left: 20px;
  top: 18px;
}

.coin-two {
  left: 54px;
  top: 42px;
}

.wallet-icon {
  position: absolute;
  right: 18px;
  bottom: 14px;
  width: 86px;
  height: 68px;
  background:
    linear-gradient(90deg, transparent 10px, #1d6a4a 10px 19px, transparent 19px 28px, #1d6a4a 28px 37px, transparent 37px 46px, #1d6a4a 46px 55px, transparent 55px 64px, #1d6a4a 64px 73px, transparent 73px),
    linear-gradient(180deg, transparent 0 17px, #ff2fa3 17px 25px, transparent 25px 56px, #3f42b8 56px 68px);
  border-radius: 0 0 8px 8px;
  box-shadow: 0 12px 22px rgba(16, 52, 32, 0.24);
}

.wallet-icon::before {
  content: "";
  position: absolute;
  left: -4px;
  top: -18px;
  width: 94px;
  height: 28px;
  background: linear-gradient(135deg, #103420, #1d6a4a);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.wallet-icon::after {
  content: "";
  position: absolute;
  left: 11px;
  right: 11px;
  bottom: -7px;
  height: 9px;
  background: linear-gradient(90deg, #7a55ff, #ff2fa3, #ff7a21, #00e070);
  border-radius: 999px;
}

.visa-card {
  position: absolute;
  right: 16px;
  bottom: 15px;
  width: 92px;
  height: 58px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 10px;
  color: #fff;
  background:
    radial-gradient(circle at 15% 20%, rgba(255, 255, 255, 0.26), transparent 24%),
    linear-gradient(135deg, #1a5a41, #3f42b8 56%, #ff2fa3);
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 10px;
  box-shadow: 0 12px 22px rgba(23, 23, 23, 0.28);
  font-size: 15px;
  font-weight: 900;
}

.visa-card::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 12px;
  width: 24px;
  height: 16px;
  background: linear-gradient(135deg, #00e070, #ff2fa3, #ff7a21);
  border-radius: 4px;
}

.locked-row article {
  padding: 14px;
  background:
    radial-gradient(circle at 92% 18%, rgba(255, 212, 59, 0.2), transparent 34%),
    rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.24);
}

.locked-row strong,
.locked-row span {
  display: block;
}

.locked-row strong {
  color: #fff7b7;
  font-size: 17px;
}

.locked-row span {
  margin-top: 5px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 13px;
}

.withdrawal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.withdrawal-grid article {
  padding: 18px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
}

.withdrawal-grid strong,
.withdrawal-grid span {
  display: block;
}

.withdrawal-grid strong {
  margin-bottom: 8px;
  color: var(--mint);
  font-size: 18px;
}

.withdrawal-grid span {
  color: rgba(255, 255, 255, 0.82);
  font-size: 14px;
}

.step-list {
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: steps;
}

.step-list li {
  position: relative;
  min-height: 74px;
  margin: 0 0 14px;
  padding: 16px 16px 16px 76px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  counter-increment: steps;
}

.step-list li::before {
  content: counter(steps);
  position: absolute;
  left: 16px;
  top: 15px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--ink);
  border-radius: 50%;
  font-weight: 900;
}

.step-list strong,
.step-list span {
  display: block;
}

.step-list span {
  color: var(--muted);
}

.safety {
  grid-template-columns: 0.8fr 1.2fr;
}

.safety .eyebrow {
  color: var(--yellow);
}

.safety ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.safety li {
  padding: 18px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
}

.final-cta {
  padding: 92px 24px;
  text-align: center;
  background:
    radial-gradient(circle at 18% 20%, rgba(255, 47, 163, 0.18), transparent 28%),
    radial-gradient(circle at 86% 30%, rgba(255, 212, 59, 0.28), transparent 30%),
    linear-gradient(180deg, #f7fff8, #dffff0);
}

.final-cta img {
  width: 180px;
  margin: 0 auto 22px;
}

.final-cta h2 {
  margin: 0 auto;
  max-width: 720px;
}

.final-codes {
  margin: 28px auto 0;
  max-width: 650px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.final-codes > span {
  padding: 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 18px;
}

.final-codes b {
  color: var(--pink);
}

.copy-code {
  cursor: pointer;
  transition: filter 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.copy-code:hover,
.copy-code:focus-visible,
.copy-code.is-copied {
  filter: brightness(1.04);
  transform: translateY(-1px);
}

.copy-code:focus-visible {
  outline: 2px solid rgba(255, 47, 163, 0.34);
  outline-offset: 3px;
}

.copy-code.is-copied {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    0 0 0 2px rgba(0, 224, 112, 0.24),
    0 10px 22px rgba(45, 34, 20, 0.08);
}

.copy-toast {
  position: fixed;
  z-index: 999;
  pointer-events: none;
  padding: 6px 11px;
  color: #173224;
  background:
    radial-gradient(ellipse at 18% 0%, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0) 42%) padding-box,
    linear-gradient(145deg, #fffef9 0%, #f6ead8 46%, #e8f8ee 100%) padding-box,
    linear-gradient(118deg, rgba(255, 47, 163, 0.32), rgba(255, 122, 33, 0.24), rgba(0, 224, 112, 0.36)) border-box;
  border: 1px solid transparent;
  border-radius: 999px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    0 12px 26px rgba(45, 34, 20, 0.14);
  font-size: 13px;
  font-weight: 850;
  line-height: 1;
  animation: copyToast 1400ms ease forwards;
}

.copy-toast-email {
  left: 50% !important;
  top: 124px !important;
  padding: 14px 24px;
  color: #143322;
  border-radius: 18px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    0 22px 55px rgba(23, 23, 23, 0.22),
    0 0 0 4px rgba(0, 224, 112, 0.14);
  font-size: clamp(20px, 3.25vw, 34px);
  font-weight: 950;
  letter-spacing: 0;
  white-space: nowrap;
  animation: copyToastEmail 1350ms ease forwards;
}

.support-mail-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  margin: 0 3px;
  padding: 3px 10px;
  color: #143322;
  background:
    radial-gradient(ellipse at 22% 0%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 42%) padding-box,
    linear-gradient(135deg, #fffaf0 0%, #f2e1c7 42%, #dffff0 100%) padding-box,
    linear-gradient(120deg, rgba(255, 47, 163, 0.52), rgba(255, 122, 33, 0.34), rgba(0, 224, 112, 0.52)) border-box;
  border: 1px solid transparent;
  border-radius: 999px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    inset 0 -8px 14px rgba(111, 82, 45, 0.055),
    0 8px 18px rgba(45, 34, 20, 0.08);
  font-weight: 850;
  line-height: 1.2;
  white-space: nowrap;
}

.support-mail-link:hover,
.support-mail-link:focus-visible {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    0 12px 24px rgba(45, 34, 20, 0.12);
}

@keyframes copyToast {
  0% {
    opacity: 0;
    transform: translate(-50%, -72%) scale(0.96);
  }

  16% {
    opacity: 1;
    transform: translate(-50%, -100%) scale(1);
  }

  72% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -150%) scale(0.98);
  }
}

@keyframes copyToastEmail {
  0% {
    opacity: 0;
    transform: translate(-50%, -28%) scale(0.82);
  }

  16% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1.08);
  }

  72% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -22%) scale(0.94);
  }
}

.footer {
  padding: 26px max(24px, calc((100vw - 1120px) / 2));
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: var(--muted);
  background: #fff;
  border-top: 1px solid var(--line);
  font-size: 14px;
}

.footer a {
  color: var(--ink);
  font-weight: 800;
}

.calculator-widget {
  position: fixed;
  right: 22px;
  bottom: 84px;
  z-index: 60;
}

.calculator-fab {
  position: relative;
  isolation: isolate;
  min-width: 128px;
  min-height: 48px;
  padding: 12px 18px;
  color: #fff;
  background: linear-gradient(135deg, var(--pink), var(--orange), var(--mint-strong)) padding-box;
  border: 5px solid rgba(255, 255, 255, 0.58);
  border-radius: 999px;
  box-shadow: 0 16px 42px rgba(23, 23, 23, 0.24);
  cursor: pointer;
  font: inherit;
  font-weight: 900;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.calculator-fab::before {
  content: "";
  position: absolute;
  inset: -8px;
  z-index: -1;
  border-radius: 999px;
}

.calculator-fab:hover,
.calculator-fab:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 20px 52px rgba(255, 47, 163, 0.24), 0 12px 32px rgba(0, 224, 112, 0.18);
}

.calculator-panel {
  position: absolute;
  right: 0;
  bottom: 64px;
  width: min(380px, calc(100vw - 32px));
  max-height: min(680px, calc(100vh - 124px));
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 22px 70px rgba(23, 23, 23, 0.26);
}

.calculator-panel[hidden] {
  display: none;
}

.calculator-head {
  flex: 0 0 auto;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #173224;
  background:
    linear-gradient(90deg, rgba(255, 47, 163, 0.18), rgba(255, 122, 33, 0.16), rgba(0, 224, 112, 0.18)),
    #f8fff9;
  border-bottom: 1px solid #dceee5;
  cursor: move;
  user-select: none;
}

.calculator-head span,
.calculator-head strong {
  display: block;
}

.calculator-head span {
  color: #bf287f;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.calculator-head strong {
  font-size: 18px;
}

.calculator-head button {
  position: relative;
  z-index: 2;
  width: 40px;
  height: 40px;
  padding: 0;
  display: grid;
  place-items: center;
  color: #1d6a4a;
  background: #fff;
  border: 1px solid #dbe9e2;
  box-shadow: 0 8px 18px rgba(23, 50, 36, 0.1);
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  font-size: 23px;
  font-weight: 900;
  line-height: 0;
  touch-action: manipulation;
}

.calculator-body {
  min-height: 0;
  padding: 16px;
  display: grid;
  gap: 14px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.calculator-body label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.calculator-body select,
.calculator-body input {
  width: 100%;
  height: 52px;
  padding: 0 12px;
  color: var(--ink);
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
  font-weight: 800;
}

.quantity-stepper {
  display: grid;
  grid-template-columns: 64px 1fr 64px;
  gap: 10px;
}

.quantity-stepper button {
  min-height: 60px;
  color: #173224;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
  font-size: 25px;
  font-weight: 950;
}

.quantity-stepper input {
  min-height: 60px;
  text-align: center;
  font-size: 17px;
}

.calculator-disclaimer {
  margin: -4px 0 0;
  padding: 9px 10px;
  color: #173724;
  background: #eafff4;
  border: 1px solid #b7ebd2;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 900;
}

.calculator-yields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.yield-card {
  position: relative;
  overflow: hidden;
  padding: 13px;
  border-radius: 8px;
  border: 1px solid var(--line);
}

.yield-card::before {
  content: "";
  position: absolute;
  inset: -45% auto auto -35%;
  width: 90%;
  height: 150%;
  background: linear-gradient(110deg, transparent, rgba(255, 255, 255, 0.74), transparent);
  transform: rotate(8deg);
}

.yield-card .yield-period,
.yield-card div {
  position: relative;
  z-index: 1;
}

.yield-card .yield-period {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.yield-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 10px;
  align-items: stretch;
}

.yield-total,
.yield-breakdown {
  min-width: 0;
  padding: 9px;
  border-radius: 8px;
}

.yield-total {
  display: grid;
  align-content: center;
  background: rgba(255, 255, 255, 0.52);
  border: 1px solid rgba(255, 255, 255, 0.68);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.yield-breakdown {
  background: rgba(255, 255, 255, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.42);
}

.yield-breakdown div + div {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(23, 50, 36, 0.1);
}

.yield-card small,
.yield-card strong {
  display: block;
}

.yield-card small {
  color: rgba(23, 50, 36, 0.7);
  font-size: 11px;
  font-weight: 900;
}

.yield-card strong {
  margin-top: 1px;
  color: #102a1d;
  font-size: 16px;
  line-height: 1.2;
}

.yield-total strong {
  font-size: 19px;
}

.yield-card strong span {
  display: inline;
  margin-left: 3px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0;
  opacity: 0.68;
}

.yield-day {
  background:
    radial-gradient(circle at 86% 12%, rgba(255, 255, 255, 0.92), transparent 21%),
    linear-gradient(135deg, #ecfff7, #baf7d7 48%, #fff1a8);
  border-color: #a5eacb;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.78), 0 12px 28px rgba(0, 224, 112, 0.12);
}

.yield-day .yield-period {
  color: #006f43;
}

.yield-month {
  color: #331324;
  background:
    radial-gradient(circle at 82% 14%, rgba(255, 255, 255, 0.86), transparent 22%),
    linear-gradient(135deg, #fff4fb, #ffb4df 46%, #ff7a42);
  border-color: rgba(255, 47, 163, 0.22);
  box-shadow: 0 12px 28px rgba(255, 47, 163, 0.14);
}

.yield-month .yield-period,
.yield-month small,
.yield-month strong {
  color: #361628;
}

.yield-month small {
  opacity: 0.78;
}

.yield-year {
  color: #1c2430;
  background:
    radial-gradient(circle at 84% 12%, rgba(255, 255, 255, 0.86), transparent 22%),
    linear-gradient(135deg, #fffaf0, #efe2cb 48%, #dffbf0);
  border-color: rgba(29, 106, 74, 0.16);
  box-shadow: 0 12px 28px rgba(45, 34, 20, 0.1);
}

.yield-year .yield-period,
.yield-year small,
.yield-year strong {
  color: #1c2f27;
}

.calculator-results {
  display: grid;
  gap: 6px;
}

.calculator-results div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid #edf2ef;
}

.calculator-results span {
  color: var(--muted);
  font-size: 13px;
}

.calculator-results strong {
  color: var(--ink);
  font-size: 15px;
  text-align: right;
}

.calculator-results strong span {
  margin-left: 3px;
  color: rgba(23, 23, 23, 0.58);
  font-size: 10px;
  font-weight: 900;
}

.calculator-note {
  margin: 0;
  padding: 11px;
  color: #4a2c00;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.58), rgba(255, 244, 204, 0.92)),
    #fff4cc;
  border: 1px solid #e7ca5c;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.45;
}

.usdt-confetti {
  position: fixed;
  z-index: 75;
  pointer-events: none;
  opacity: 0.42;
  color: transparent;
  background: linear-gradient(135deg, #ffffff 0%, #70f6c2 18%, #ff2fa3 42%, #ff7a21 62%, #7a55ff 84%, #ffffff 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-stroke: 0.45px rgba(255, 255, 255, 0.7);
  font-size: 13px;
  font-weight: 950;
  line-height: 1;
  text-shadow: 0 2px 8px rgba(29, 18, 73, 0.18), 0 0 12px rgba(255, 47, 163, 0.16);
  animation: usdt-fly 7840ms cubic-bezier(0.18, 0.8, 0.22, 1) forwards;
}

@keyframes usdt-fly {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.58) rotate(0deg);
  }

  12% {
    opacity: 0.58;
  }

  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(var(--scale)) rotate(var(--rot));
  }
}

@media (prefers-reduced-motion: reduce) {
  .invite-strip::before {
    opacity: 0.25;
  }

  .invite-strip::after {
    animation: none;
    opacity: 0.45;
  }

  .usdt-confetti {
    animation: none;
    opacity: 0;
  }
}

@media (max-width: 980px) {
  .invite-strip {
    width: calc(100% - 20px);
    min-height: 176px;
    grid-template-columns: 1fr;
    gap: 7px;
    padding: 12px 14px 14px;
    font-size: 14px;
  }

  .invite-message {
    grid-column: 1;
    gap: 9px;
  }

  .invite-message strong {
    font-size: 24px;
  }

  .diamond-shine {
    grid-column: 1;
    width: 68px;
    height: 68px;
  }

  .diamond-shine::before {
    font-size: 42px;
  }

  .invite-subline {
    max-width: 315px;
    font-size: 10px;
    letter-spacing: 0.1em;
  }

  .invite-codes {
    flex-wrap: wrap;
    gap: 8px;
  }

  .invite-codes > span {
    min-width: 128px;
    min-height: 34px;
    padding: 5px 11px;
  }

  .invite-codes small {
    font-size: 12px;
  }

  .invite-strip b {
    font-size: 17px;
  }

  .invite-copy-status {
    right: 18px;
    bottom: 12px;
    font-size: 10px;
  }

  .nav-shell {
    border-radius: 8px;
    flex-wrap: wrap;
  }

  .nav-links {
    order: 3;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
  }

  .hero,
  .story,
  .path-section,
  .safety {
    grid-template-columns: 1fr;
  }

  .hero {
    min-height: auto;
    margin-top: -130px;
    padding-top: 220px;
  }

  h1 {
    font-size: 46px;
  }

  h2 {
    font-size: 34px;
  }

  .simple-grid,
  .doc-grid,
  .dictionary {
    grid-template-columns: repeat(2, 1fr);
  }

  .cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .withdrawal-panel,
  .withdrawal-grid,
  .split-row,
  .destination-row,
  .locked-row {
    grid-template-columns: 1fr;
  }

  .path-copy,
  .path-art {
    order: initial;
  }
}

@media (max-width: 640px) {
  .brand img {
    width: 108px;
  }

  .nav-cta {
    width: 100%;
  }

  .hero {
    padding-inline: 18px;
  }

  h1 {
    font-size: 38px;
  }

  h2 {
    font-size: 30px;
  }

  .hero-text,
  .story-copy p {
    font-size: 17px;
  }

  .button-primary,
  .button-secondary {
    width: 100%;
  }

  .code-panel {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .section,
  .story,
  .path-section,
  .safety {
    padding: 64px 18px;
  }

  .simple-grid,
  .doc-grid,
  .dictionary,
  .final-codes {
    grid-template-columns: 1fr;
  }

  .cards-grid {
    grid-template-columns: 1fr;
  }

  .cards-section {
    padding: 64px 18px;
  }

  .withdrawal-panel {
    padding: 20px;
  }

  .flow-board {
    padding: 14px;
  }

  .destination-card {
    min-height: auto;
  }

  .calculator-widget {
    right: 12px;
    bottom: 12px;
  }

  .calculator-panel {
    position: fixed;
    right: 12px;
    left: 12px;
    bottom: 70px;
    width: auto;
    max-height: calc(100vh - 92px);
  }

  .calculator-yields {
    grid-template-columns: 1fr;
  }

  .mini-card,
  .doc-card,
  .dictionary article {
    min-height: auto;
  }

  .footer {
    flex-direction: column;
  }
}

/* Oil-slick premium layer: current soft Solulu UI + real rainbow metal texture. */
:root {
  --metal-dark-texture: url("./assets/metal-oilslick-dark.png");
  --metal-vivid-texture: url("./assets/metal-oilslick-vivid.png");
  --metal-edge: rgba(48, 58, 70, 0.34);
}

.invite-strip {
  width: min(1120px, calc(100% - 32px));
  min-height: 74px;
  margin: 10px auto 0;
  padding: 10px 18px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  color: var(--ink);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.9), rgba(246, 255, 250, 0.86)) padding-box,
    var(--metal-vivid-texture) center 46% / 180% auto border-box;
  border: 1px solid transparent;
  border-radius: 8px;
  clip-path: none;
  box-shadow:
    0 16px 44px rgba(16, 31, 28, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    inset 0 0 0 1px rgba(15, 24, 23, 0.05);
  cursor: pointer;
}

.invite-strip::before {
  inset: 2px;
  z-index: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.92), rgba(246, 255, 250, 0.68)),
    radial-gradient(circle at 12% 50%, rgba(255, 47, 163, 0.11), transparent 24%),
    radial-gradient(circle at 92% 44%, rgba(0, 224, 112, 0.12), transparent 22%);
  border-radius: 6px;
  opacity: 1;
}

.invite-strip::after {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 6px;
  z-index: 1;
  height: 2px;
  background: var(--metal-vivid-texture) center 43% / cover;
  border: 0;
  border-radius: 999px;
  clip-path: none;
  opacity: 0.62;
  box-shadow: 0 0 12px rgba(255, 47, 163, 0.2);
}

.invite-logo {
  position: relative;
  z-index: 2;
  width: 112px;
  max-height: 42px;
  object-fit: contain;
  filter: drop-shadow(0 8px 16px rgba(255, 47, 163, 0.16));
}

.invite-message {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  align-items: center;
  gap: 14px;
  text-align: left;
}

.invite-message::before {
  display: none;
}

.invite-message strong {
  color: #17211e;
  -webkit-text-fill-color: #17211e;
  font-size: 18px;
  letter-spacing: 0.03em;
  text-shadow: none;
}

.invite-subline {
  color: #4c5a56;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-shadow: none;
}

.invite-codes {
  grid-row: 1 / span 2;
  grid-column: 2;
  margin: 0;
  gap: 8px;
}

.invite-codes > span {
  min-width: 142px;
  min-height: 36px;
  padding: 5px 12px;
  background:
    linear-gradient(90deg, rgba(3, 5, 10, 0.62), rgba(3, 5, 10, 0.48)) padding-box,
    var(--metal-vivid-texture) center / 190% auto border-box;
  border: 1px solid transparent;
  border-radius: 6px;
  clip-path: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26), 0 9px 18px rgba(11, 16, 25, 0.14);
}

.invite-codes small {
  color: rgba(255, 255, 255, 0.78);
  font-size: 11px;
}

.invite-strip b,
.invite-codes > span:nth-child(2) b {
  color: #fff;
  font-size: 17px;
  text-shadow: 0 0 10px rgba(83, 207, 255, 0.42), 0 1px 6px rgba(0, 0, 0, 0.44);
}

.invite-copy-status {
  right: 18px;
  bottom: -20px;
  color: #1d6a4a;
  text-shadow: none;
}

.button-primary,
.nav-cta,
.calculator-fab,
.code-panel strong {
  color: #fff;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(0, 0, 0, 0.18)) padding-box,
    var(--metal-vivid-texture) center / 165% auto border-box;
  border: 1px solid rgba(255, 255, 255, 0.46);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    inset 0 -10px 18px rgba(0, 0, 0, 0.18),
    0 14px 30px rgba(23, 23, 23, 0.14);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.38);
}

.button-secondary {
  color: #17211e;
  background:
    linear-gradient(#fff, #fff) padding-box,
    var(--metal-dark-texture) center / cover border-box;
  border: 2px solid transparent;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 10px 22px rgba(23, 23, 23, 0.06);
}

.button-primary:hover,
.button-secondary:hover,
.nav-cta:hover,
.calculator-fab:hover {
  filter: saturate(1.08) contrast(1.04);
}

.nav-cta {
  border-radius: 999px;
}

.code-panel {
  background:
    linear-gradient(rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.92)) padding-box,
    var(--metal-dark-texture) center / cover border-box;
  border: 1px solid transparent;
}

.calculator-head {
  color: #fff;
  background:
    linear-gradient(90deg, rgba(5, 7, 13, 0.68), rgba(5, 7, 13, 0.52)),
    var(--metal-dark-texture) center / cover;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.calculator-head span {
  color: rgba(255, 255, 255, 0.72);
}

.dictionary article {
  background:
    linear-gradient(#fff, #fff) padding-box,
    var(--metal-dark-texture) center / 240% auto border-box;
  border: 1px solid transparent;
}

@media (max-width: 980px) {
  .invite-strip {
    width: calc(100% - 20px);
    min-height: auto;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 8px;
    padding: 12px 12px 16px;
  }

  .invite-logo {
    width: 108px;
  }

  .invite-message {
    width: 100%;
    grid-template-columns: 1fr;
    gap: 7px;
    text-align: center;
  }

  .invite-message strong {
    font-size: 18px;
  }

  .invite-subline {
    max-width: none;
    font-size: 10px;
  }

  .invite-codes {
    grid-column: auto;
    grid-row: auto;
    flex-wrap: wrap;
  }

  .nav-cta {
    width: auto;
    min-width: 176px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Hand-built chrome controls: no pasted reference image on buttons. */
.button-primary,
.nav-cta,
.calculator-fab,
.code-panel strong,
.invite-codes > span {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  background:
    radial-gradient(ellipse at 18% 12%, rgba(255, 255, 255, 0.52), transparent 17%) padding-box,
    linear-gradient(138deg, #090b12 0%, #313947 13%, #070912 28%, #b7c0ca 42%, #18202d 50%, #05060c 68%, #3c4554 100%) padding-box,
    conic-gradient(from 218deg, #21eaff, #3354ff, #c02fff, #ff2fa3, #ffb136, #42f46d, #21eaff) border-box;
  border: 1px solid transparent;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -14px 22px rgba(0, 0, 0, 0.3),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 12px 28px rgba(15, 18, 28, 0.18);
  text-shadow:
    0 1px 1px rgba(0, 0, 0, 0.55),
    0 0 10px rgba(79, 213, 255, 0.22);
}

.button-primary::before,
.nav-cta::before,
.calculator-fab::before,
.code-panel strong::before,
.invite-codes > span::before {
  content: "";
  position: absolute;
  inset: -42% -18%;
  z-index: -1;
  background:
    radial-gradient(ellipse at 22% 28%, rgba(255, 255, 255, 0.72), transparent 10%),
    radial-gradient(ellipse at 78% 76%, rgba(30, 231, 255, 0.45), transparent 22%),
    linear-gradient(112deg, transparent 4%, rgba(16, 215, 255, 0.82) 17%, rgba(116, 64, 255, 0.46) 23%, transparent 31%),
    linear-gradient(127deg, transparent 38%, rgba(255, 42, 179, 0.82) 47%, rgba(255, 203, 49, 0.72) 52%, rgba(51, 235, 111, 0.36) 56%, transparent 66%),
    linear-gradient(64deg, transparent 54%, rgba(255, 255, 255, 0.4) 60%, transparent 66%);
  opacity: 0.64;
  transform: translateX(-7%) rotate(-3deg);
  filter: blur(0.2px);
}

.button-primary::after,
.nav-cta::after,
.calculator-fab::after,
.code-panel strong::after,
.invite-codes > span::after {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent 38%, rgba(0, 0, 0, 0.18) 100%),
    repeating-linear-gradient(102deg, rgba(255, 255, 255, 0.12) 0 1px, transparent 1px 7px);
  border-radius: inherit;
  mix-blend-mode: screen;
  opacity: 0.58;
}

.button-primary:hover,
.nav-cta:hover,
.calculator-fab:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -14px 22px rgba(0, 0, 0, 0.26),
    0 16px 34px rgba(255, 47, 163, 0.18),
    0 10px 24px rgba(33, 234, 255, 0.12);
}

.button-primary:hover::before,
.nav-cta:hover::before,
.calculator-fab:hover::before {
  opacity: 0.82;
  transform: translateX(2%) rotate(-3deg);
}

.button-secondary {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: #121916;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(245, 251, 249, 0.92)) padding-box,
    conic-gradient(from 216deg, #3340ff, #25dfff, #31ec7b, #ffd142, #ff2fa3, #7b55ff, #3340ff) border-box;
  border: 1px solid transparent;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    inset 0 -10px 18px rgba(8, 12, 20, 0.04),
    0 10px 22px rgba(23, 23, 23, 0.07);
}

.button-secondary::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  background:
    linear-gradient(112deg, transparent 8%, rgba(35, 219, 255, 0.16) 23%, transparent 36%),
    linear-gradient(128deg, transparent 42%, rgba(255, 47, 163, 0.14) 52%, rgba(255, 196, 55, 0.12) 58%, transparent 68%);
  border-radius: inherit;
}

.button-secondary::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  top: 7px;
  height: 1px;
  background: rgba(255, 255, 255, 0.86);
  border-radius: 999px;
}

.invite-codes > span > * {
  position: relative;
  z-index: 2;
}

/* Pearl reset: calm Solulu-style buttons with a nacre surface and fine contour. */
.mini-button,
.button-primary,
.nav-cta,
.calculator-fab,
.code-panel strong,
.invite-codes > span {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: #173224;
  background:
    radial-gradient(ellipse at 18% 0%, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0) 38%) padding-box,
    radial-gradient(ellipse at 88% 92%, rgba(0, 224, 112, 0.16), rgba(0, 224, 112, 0) 42%) padding-box,
    linear-gradient(140deg, #fffdf7 0%, #f7ecd9 36%, #ead9c1 66%, #fff8eb 100%) padding-box,
    linear-gradient(118deg, rgba(29, 106, 74, 0.55), rgba(255, 47, 163, 0.36), rgba(255, 122, 33, 0.38), rgba(0, 224, 112, 0.48)) border-box;
  border: 1px solid transparent;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -12px 20px rgba(111, 82, 45, 0.08),
    0 10px 22px rgba(45, 34, 20, 0.09),
    0 0 0 1px rgba(255, 255, 255, 0.54);
  text-shadow: none;
}

.button-secondary {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: #173224;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0) 40%) padding-box,
    linear-gradient(140deg, #fffef9, #f8eedf 56%, #fffaf0) padding-box,
    linear-gradient(118deg, rgba(29, 106, 74, 0.38), rgba(255, 47, 163, 0.22), rgba(0, 224, 112, 0.34)) border-box;
  border: 1px solid transparent;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -10px 18px rgba(111, 82, 45, 0.045),
    0 8px 18px rgba(45, 34, 20, 0.07);
}

.mini-button::before,
.button-primary::before,
.nav-cta::before,
.calculator-fab::before,
.code-panel strong::before,
.invite-codes > span::before,
.button-secondary::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(104deg, rgba(255, 255, 255, 0) 8%, rgba(255, 255, 255, 0.62) 30%, rgba(255, 255, 255, 0) 52%),
    linear-gradient(122deg, rgba(255, 47, 163, 0.06), rgba(255, 122, 33, 0.05), rgba(0, 224, 112, 0.07));
  border-radius: inherit;
  opacity: 0.78;
}

.mini-button::after,
.button-primary::after,
.nav-cta::after,
.calculator-fab::after,
.code-panel strong::after,
.invite-codes > span::after,
.button-secondary::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  top: 7px;
  z-index: 0;
  height: 1px;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 999px;
  opacity: 0.9;
  mix-blend-mode: screen;
}

.button-primary:hover,
.button-secondary:hover,
.nav-cta:hover,
.calculator-fab:hover,
.mini-button:hover {
  transform: translateY(-1px);
  filter: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    inset 0 -12px 20px rgba(111, 82, 45, 0.07),
    0 14px 28px rgba(45, 34, 20, 0.11),
    0 0 0 1px rgba(255, 255, 255, 0.62);
}

.button-primary:hover::before,
.nav-cta:hover::before,
.calculator-fab:hover::before,
.mini-button:hover::before {
  opacity: 0.9;
  transform: none;
}

.invite-codes small {
  color: rgba(23, 50, 36, 0.72);
  text-shadow: none;
}

.invite-strip b,
.invite-codes > span:nth-child(2) b,
.invite-codes b,
.code-panel strong {
  color: #173224;
  -webkit-text-fill-color: #173224;
  text-shadow: none;
}

.invite-codes > span > *,
.code-panel strong {
  position: relative;
  z-index: 1;
}

.signup-page {
  background: linear-gradient(180deg, #dffff0 0%, #f8fafc 38%, #ffffff 100%);
}

.signup-hero {
  min-height: 500px;
  margin-top: -78px;
  padding: 132px max(24px, calc((100vw - 1120px) / 2)) 44px;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.95fr);
  align-items: center;
  gap: 30px;
}

.signup-hero-copy p:not(.eyebrow) {
  max-width: 680px;
  margin-top: 22px;
  color: var(--soft-ink);
  font-size: 19px;
}

.legal-notice {
  margin: 56px max(24px, calc((100vw - 1120px) / 2)) 64px;
  padding: 18px 20px;
  color: #173224;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(29, 106, 74, 0.12);
  border-left: 5px solid #1d6a4a;
  border-radius: 8px;
  box-shadow: 0 14px 36px rgba(23, 23, 23, 0.08);
}

.legal-notice h2 {
  margin-top: 2px;
  font-size: 24px;
}

.legal-notice .eyebrow {
  color: #173224;
}

.legal-notice p:not(.eyebrow) {
  margin-top: 10px;
  color: var(--soft-ink);
  font-size: 14px;
}

.support-card {
  padding: 28px;
  background:
    radial-gradient(circle at 92% 10%, rgba(255, 47, 163, 0.14), transparent 26%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(255, 248, 235, 0.84));
  border: 1px solid rgba(29, 106, 74, 0.14);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.support-card h2 {
  font-size: 34px;
}

.support-card p {
  margin-top: 14px;
  color: var(--soft-ink);
  font-size: 16px;
}

.signup-steps {
  padding: 34px max(24px, calc((100vw - 1120px) / 2)) 72px;
  display: grid;
  gap: 22px;
}

.signup-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  padding: 24px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(29, 106, 74, 0.12);
  border-radius: 8px;
  box-shadow: 0 16px 42px rgba(23, 23, 23, 0.08);
}

.step-number {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  color: #173224;
  background:
    radial-gradient(ellipse at 18% 0%, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0) 38%),
    linear-gradient(140deg, #fffdf7 0%, #f7ecd9 36%, #ead9c1 66%, #fff8eb 100%);
  border: 1px solid rgba(29, 106, 74, 0.18);
  border-radius: 999px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.94),
    0 10px 20px rgba(45, 34, 20, 0.08);
  font-weight: 950;
}

.step-copy h2 {
  margin-top: 2px;
  font-size: 34px;
}

.step-copy > p:not(.eyebrow) {
  max-width: 880px;
  margin-top: 14px;
  color: var(--soft-ink);
  font-size: 17px;
}

.step-codes {
  margin: 18px 0 0;
  max-width: 560px;
}

.step-codes > span {
  padding: 13px 14px;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(118deg, rgba(255, 47, 163, 0.24), rgba(255, 122, 33, 0.18), rgba(0, 224, 112, 0.24)) border-box;
  border: 1px solid transparent;
  font-size: 15px;
}

.code-copy-list {
  max-width: 680px;
}

.code-copy-row {
  padding: 12px 12px 12px 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(118deg, rgba(255, 47, 163, 0.24), rgba(255, 122, 33, 0.18), rgba(0, 224, 112, 0.24)) border-box;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 15px;
}

.code-copy-label {
  min-width: 0;
}

.code-copy-button {
  min-width: 82px;
  min-height: 34px;
  padding: 7px 12px;
  color: #173224;
  background:
    radial-gradient(ellipse at 18% 0%, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0) 42%) padding-box,
    linear-gradient(145deg, #fffef9 0%, #f6ead8 46%, #e8f8ee 100%) padding-box,
    linear-gradient(118deg, rgba(255, 47, 163, 0.3), rgba(255, 122, 33, 0.22), rgba(0, 224, 112, 0.34)) border-box;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 780;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 8px 16px rgba(45, 34, 20, 0.07);
}

.code-copy-button:hover,
.code-copy-button:focus-visible,
.code-copy-button.is-copied {
  transform: translateY(-1px);
  outline: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    0 10px 20px rgba(45, 34, 20, 0.1),
    0 0 0 2px rgba(0, 224, 112, 0.18);
}

.step-actions {
  margin-top: 14px;
}

.store-buttons {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.store-badge {
  min-width: 220px;
  padding: 10px 14px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #173224;
  background:
    linear-gradient(140deg, #fffef9, #f8eedf 56%, #fffaf0) padding-box,
    linear-gradient(118deg, rgba(29, 106, 74, 0.38), rgba(255, 47, 163, 0.22), rgba(0, 224, 112, 0.34)) border-box;
  border: 1px solid transparent;
  border-radius: 8px;
  box-shadow: 0 10px 22px rgba(45, 34, 20, 0.08);
}

.store-badge img {
  width: 42px;
  height: 42px;
}

.store-badge small,
.store-badge strong {
  display: block;
  line-height: 1.1;
}

.store-badge small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.store-badge strong {
  margin-top: 3px;
  font-size: 18px;
}

.warning-box {
  margin-top: 18px;
  padding: 12px 14px;
  color: #8a1111;
  background: #fff1f1;
  border: 1px solid rgba(220, 38, 38, 0.32);
  border-left: 5px solid #dc2626;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 900;
}

.chain-flow {
  width: min(100%, 560px);
  margin-top: 20px;
  padding: 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 54px minmax(0, 0.92fr);
  align-items: center;
  gap: 10px;
  background:
    radial-gradient(circle at 14% 18%, rgba(255, 47, 163, 0.06), transparent 26%),
    radial-gradient(circle at 92% 28%, rgba(0, 224, 112, 0.08), transparent 28%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(248, 255, 250, 0.9));
  border: 1px solid rgba(29, 106, 74, 0.12);
  border-radius: 8px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 12px 26px rgba(23, 23, 23, 0.06);
}

.chain-node {
  min-width: 0;
  min-height: 126px;
  padding: 14px 10px 12px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 8px;
  color: #173224;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(255, 250, 240, 0.78)) padding-box,
    linear-gradient(118deg, rgba(255, 47, 163, 0.16), rgba(255, 122, 33, 0.14), rgba(0, 224, 112, 0.22)) border-box;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 950;
  line-height: 1.1;
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.chain-node img {
  width: 66px;
  height: 66px;
  filter: drop-shadow(0 10px 14px rgba(23, 23, 23, 0.12));
}

.chain-node .chain-token-logo {
  width: 50px;
  height: 50px;
}

.chain-arrow {
  width: 54px;
  height: 28px;
  align-self: center;
  justify-self: center;
  margin-top: -4px;
  background: url("./assets/chain-arrow.svg") center / contain no-repeat;
}

.phone-guide {
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.phone-guide figure {
  margin: 0;
  padding: 10px;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, rgba(29, 106, 74, 0.18), rgba(255, 47, 163, 0.18), rgba(0, 224, 112, 0.18)) border-box;
  border: 1px solid transparent;
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(23, 23, 23, 0.08);
}

.phone-guide img {
  width: 100%;
  height: 260px;
  object-fit: contain;
  background: #050505;
  border-radius: 7px;
}

.phone-guide figcaption {
  margin-top: 10px;
  color: #173224;
  font-size: 13px;
  font-weight: 900;
}

.signup-final {
  padding: 72px max(24px, calc((100vw - 1120px) / 2));
  text-align: center;
  background:
    radial-gradient(circle at 12% 14%, rgba(255, 47, 163, 0.12), transparent 26%),
    radial-gradient(circle at 88% 18%, rgba(0, 224, 112, 0.14), transparent 28%),
    #ffffff;
}

.signup-final img {
  width: 148px;
  margin: 0 auto 18px;
}

.signup-final h2 {
  margin: 0 auto;
  max-width: 760px;
}

@media (max-width: 900px) {
  .signup-hero,
  .signup-step {
    grid-template-columns: 1fr;
  }

  .phone-guide {
    grid-template-columns: 1fr;
  }

  .phone-guide img {
    height: auto;
    max-height: 520px;
  }
}

@media (max-width: 640px) {
  .signup-hero {
    min-height: auto;
    padding-top: 132px;
  }

  .support-card,
  .signup-step {
    padding: 18px;
  }

  .step-copy h2,
  .support-card h2 {
    font-size: 28px;
  }

  .faq-hero {
    grid-template-columns: 1fr;
    padding: 56px 18px 44px;
  }

  .faq-hero-copy h1 {
    font-size: clamp(38px, 13vw, 58px);
  }

  .faq-contact-card .hero-actions {
    width: 100%;
  }

  .store-badge {
    width: 100%;
  }

  .chain-flow {
    width: 100%;
    padding: 10px;
    grid-template-columns: minmax(0, 1fr) 34px minmax(0, 0.92fr);
    gap: 7px;
  }

  .chain-arrow {
    width: 34px;
    height: 18px;
    margin-top: -4px;
  }

  .chain-node {
    min-height: 102px;
    padding: 10px 6px;
    gap: 6px;
    font-size: 11px;
  }

  .chain-node img {
    width: 54px;
    height: 54px;
  }

  .chain-node .chain-token-logo {
    width: 40px;
    height: 40px;
  }
}

/* Final polish: full-width invitation bar and cleaner pearl controls. */
.site-header {
  background: transparent;
  backdrop-filter: none;
}

.invite-strip {
  width: 100%;
  min-height: 78px;
  margin: 0;
  padding: 10px max(18px, calc((100vw - 1120px) / 2 + 18px));
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  color: #173224;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.94), rgba(248, 255, 250, 0.9)) padding-box,
    linear-gradient(92deg, rgba(255, 47, 163, 0.38), rgba(255, 122, 33, 0.26), rgba(0, 224, 112, 0.34)) border-box;
  border: 0;
  border-bottom: 1px solid rgba(29, 106, 74, 0.14);
  border-radius: 0;
  clip-path: none;
  box-shadow:
    0 12px 28px rgba(23, 23, 23, 0.06),
    inset 0 -1px 0 rgba(255, 255, 255, 0.75);
}

.invite-strip::before {
  inset: 0;
  background:
    radial-gradient(circle at 18% 42%, rgba(255, 47, 163, 0.09), transparent 22%),
    radial-gradient(circle at 84% 46%, rgba(0, 224, 112, 0.11), transparent 26%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0));
  border-radius: 0;
}

.invite-strip::after {
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(255, 47, 163, 0.55), rgba(255, 122, 33, 0.34), rgba(0, 224, 112, 0.52));
  opacity: 0.78;
  box-shadow: none;
}

.invite-logo {
  width: 118px;
  max-height: 44px;
  filter: drop-shadow(0 8px 14px rgba(255, 47, 163, 0.1));
}

.invite-message {
  grid-template-columns: minmax(210px, 1fr) auto;
  gap: 14px;
}

.invite-message strong {
  color: #173224;
  -webkit-text-fill-color: #173224;
  font-size: 19px;
  letter-spacing: 0.03em;
  text-shadow: none;
}

.invite-subline {
  color: rgba(23, 50, 36, 0.7);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-shadow: none;
}

.invite-codes > span {
  min-width: 140px;
  min-height: 36px;
  padding: 6px 12px;
  color: #173224;
  background:
    linear-gradient(140deg, rgba(255, 255, 255, 0.98), rgba(250, 240, 222, 0.9)) padding-box,
    linear-gradient(118deg, rgba(255, 47, 163, 0.28), rgba(255, 122, 33, 0.22), rgba(0, 224, 112, 0.34)) border-box;
  border: 1px solid transparent;
  border-radius: 999px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.94),
    0 8px 18px rgba(45, 34, 20, 0.07);
}

.invite-codes small,
.invite-strip b,
.invite-codes > span:nth-child(2) b {
  color: #173224;
  -webkit-text-fill-color: #173224;
  text-shadow: none;
}

.button-primary,
.nav-cta,
.calculator-fab,
.mini-button,
.code-panel strong {
  color: #143322;
  background:
    radial-gradient(ellipse at 18% 0%, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0) 42%) padding-box,
    linear-gradient(145deg, #fffef9 0%, #f6ead8 46%, #e8f8ee 100%) padding-box,
    linear-gradient(118deg, rgba(255, 47, 163, 0.36), rgba(255, 122, 33, 0.28), rgba(0, 224, 112, 0.42)) border-box;
  border: 1px solid transparent;
  border-radius: 999px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    inset 0 -10px 16px rgba(111, 82, 45, 0.055),
    0 10px 22px rgba(45, 34, 20, 0.085);
  text-shadow: none;
}

.nav-link-soft {
  min-height: 34px;
  padding: 8px 12px;
  color: rgba(23, 50, 36, 0.68);
  font-weight: 640;
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid rgba(29, 106, 74, 0.12);
  border-radius: 999px;
  box-shadow: none;
}

.nav-solution {
  width: 124px;
  min-width: 124px;
  height: 58px;
  min-height: 58px;
  flex: 0 0 auto;
  margin-left: 0;
  margin-right: 6px;
  padding: 8px 10px;
  display: inline-grid;
  align-content: center;
  justify-items: center;
  gap: 2px;
  border-radius: 999px;
  text-align: center;
  line-height: 1.05;
}

.nav-solution span,
.nav-solution small {
  position: relative;
  z-index: 1;
  display: block;
}

.nav-solution span {
  font-size: 11px;
  font-weight: 950;
}

.nav-solution small {
  color: rgba(23, 50, 36, 0.6);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0;
}

.nav-link-soft {
  min-width: 172px;
}

.button-primary,
.calculator-fab {
  background:
    radial-gradient(ellipse at 22% 0%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 42%) padding-box,
    linear-gradient(135deg, #fffaf0 0%, #f2e1c7 42%, #dffff0 100%) padding-box,
    linear-gradient(120deg, rgba(255, 47, 163, 0.52), rgba(255, 122, 33, 0.34), rgba(0, 224, 112, 0.52)) border-box;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    inset 0 -12px 18px rgba(111, 82, 45, 0.07),
    0 14px 30px rgba(45, 34, 20, 0.11),
    0 0 0 1px rgba(255, 255, 255, 0.58);
}

.button-secondary,
.store-badge {
  color: #173224;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(249, 244, 234, 0.94)) padding-box,
    linear-gradient(118deg, rgba(29, 106, 74, 0.24), rgba(255, 47, 163, 0.16), rgba(0, 224, 112, 0.28)) border-box;
  border: 1px solid transparent;
  border-radius: 999px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    0 8px 18px rgba(45, 34, 20, 0.055);
}

.store-badge {
  border-radius: 12px;
}

.button-primary::before,
.button-secondary::before,
.nav-cta::before,
.calculator-fab::before,
.mini-button::before,
.code-panel strong::before,
.store-badge::before {
  opacity: 0.5;
}

.button-primary:hover,
.button-secondary:hover,
.nav-cta:hover,
.nav-link-soft:hover,
.calculator-fab:hover,
.mini-button:hover,
.store-badge:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    inset 0 -10px 16px rgba(111, 82, 45, 0.045),
    0 16px 32px rgba(45, 34, 20, 0.12);
}

@media (max-width: 980px) {
  .invite-strip {
    width: 100%;
    margin: 0;
    padding: 10px 12px 14px;
  }

  .invite-message {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .invite-codes {
    justify-content: center;
  }

  .nav-link-soft {
    margin-left: auto;
    margin-right: 0;
  }

  .nav-solution {
    width: 124px;
    min-width: 124px;
    height: 56px;
    margin-left: 0;
    margin-right: 0;
  }
}

/* Late polish: stronger sticky header contrast on white sections. */
.site-header {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 255, 250, 0.88) 74%, rgba(247, 255, 250, 0));
  backdrop-filter: blur(16px);
  padding-bottom: 10px;
}

.nav-shell {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.99), rgba(246, 255, 250, 0.96)) padding-box,
    linear-gradient(118deg, rgba(29, 106, 74, 0.36), rgba(255, 47, 163, 0.24), rgba(0, 224, 112, 0.32)) border-box;
  border: 1px solid transparent;
  box-shadow:
    0 16px 34px rgba(23, 23, 23, 0.15),
    0 0 0 1px rgba(255, 255, 255, 0.72),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

.nav-links a {
  color: #143322;
  font-weight: 720;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(29, 106, 74, 0.08);
}

.nav-links a:hover,
.nav-links a:focus-visible {
  background: rgba(223, 255, 240, 0.94);
  border-color: rgba(29, 106, 74, 0.18);
}

/* Invitation banner hierarchy: promise first, club label above the codes. */
.invite-message {
  position: relative;
  grid-template-columns: minmax(320px, 1fr) auto;
  column-gap: 22px;
  row-gap: 3px;
}

.invite-message::before {
  content: "";
  display: block;
  position: absolute;
  left: -38px;
  top: -18px;
  bottom: -18px;
  width: min(760px, 66vw);
  z-index: 0;
  pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 760 96'%3E%3Cg fill='none' stroke='%2363eca6' stroke-opacity='.82' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 66 L105 28 L190 73 L280 20 L380 56 L492 30 L615 67 L735 25'/%3E%3Cpath d='M105 28 L280 20 M105 28 L190 73 M190 73 L380 56 M280 20 L492 30 M380 56 L615 67 M492 30 L735 25 M492 30 L615 67'/%3E%3C/g%3E%3Cg fill='%2363eca6' fill-opacity='.98' stroke='white' stroke-opacity='.82' stroke-width='2'%3E%3Ccircle cx='22' cy='66' r='5.5'/%3E%3Ccircle cx='105' cy='28' r='6.2'/%3E%3Ccircle cx='190' cy='73' r='5.8'/%3E%3Ccircle cx='280' cy='20' r='6.4'/%3E%3Ccircle cx='380' cy='56' r='5.8'/%3E%3Ccircle cx='492' cy='30' r='6.2'/%3E%3Ccircle cx='615' cy='67' r='5.8'/%3E%3Ccircle cx='735' cy='25' r='6.4'/%3E%3C/g%3E%3Cg fill='white' fill-opacity='.82'%3E%3Ccircle cx='105' cy='28' r='2'/%3E%3Ccircle cx='280' cy='20' r='2'/%3E%3Ccircle cx='492' cy='30' r='2'/%3E%3Ccircle cx='735' cy='25' r='2'/%3E%3C/g%3E%3C/svg%3E") left center / 100% 100% no-repeat,
    radial-gradient(ellipse at 34% 52%, rgba(99, 236, 166, 0.18), transparent 58%);
  border-radius: 18px;
  filter: drop-shadow(0 0 12px rgba(99, 236, 166, 0.32));
  mix-blend-mode: multiply;
  opacity: 0.98;
}

.invite-message strong {
  position: relative;
  z-index: 1;
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;
  color: #173224;
  -webkit-text-fill-color: #173224;
  font-size: clamp(22px, 2.35vw, 30px);
  font-weight: 950;
  letter-spacing: 0.035em;
  line-height: 1.05;
  text-transform: uppercase;
}

.invite-subline {
  position: relative;
  z-index: 1;
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  align-self: end;
  margin-bottom: -1px;
  color: rgba(23, 50, 36, 0.72);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
}

.invite-codes {
  position: relative;
  z-index: 1;
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  gap: 6px;
}

.invite-codes > span {
  min-width: 116px;
  min-height: 30px;
  padding: 4px 10px;
}

.invite-codes small {
  font-size: 9px;
}

.invite-codes b,
.invite-strip b,
.invite-codes > span:nth-child(2) b {
  font-size: 14px;
}

@media (max-width: 980px) {
  .invite-message {
    grid-template-columns: 1fr;
    row-gap: 7px;
    text-align: center;
  }

  .invite-message strong,
  .invite-subline,
  .invite-codes {
    grid-column: 1;
    grid-row: auto;
  }

  .invite-message strong {
    font-size: clamp(18px, 5vw, 25px);
  }

  .invite-subline {
    justify-self: center;
    margin-bottom: 0;
  }
}

/* Final link/menu corrections. */
.support-mail-link {
  display: inline;
  min-height: 0;
  margin: 0;
  padding: 0;
  color: inherit;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-weight: 850;
  line-height: inherit;
  white-space: normal;
  cursor: pointer;
}

.support-mail-link:hover,
.support-mail-link:focus-visible {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transform: none;
  box-shadow: none;
}

.nav-community {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-width: 172px;
  color: #143322;
  background: none;
  -webkit-text-fill-color: #143322;
  border: 0;
  font-size: 14px;
  font-weight: 760;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72);
}

.nav-community::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.99), rgba(246, 255, 250, 0.95)) padding-box,
    linear-gradient(118deg, rgba(29, 106, 74, 0.28), rgba(255, 47, 163, 0.18), rgba(0, 224, 112, 0.3)) border-box;
  border: 1px solid transparent;
  border-radius: inherit;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    0 8px 18px rgba(45, 34, 20, 0.06);
}

.nav-community:hover,
.nav-community:focus-visible,
.nav-community[aria-current="page"] {
  color: #143322;
  -webkit-text-fill-color: #143322;
}

.nav-community::after {
  content: attr(data-label);
  position: absolute;
  inset: 0;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  color: transparent;
  background:
    linear-gradient(112deg, transparent 0%, transparent 36%, rgba(255, 255, 255, 0.96) 46%, #20a876 53%, transparent 64%, transparent 100%);
  background-size: 240% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: communityTextShine 3.8s ease-in-out infinite;
}

@keyframes communityTextShine {
  0%,
  46% {
    background-position: 0% 50%;
  }

  64% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

/* Full-width banner neural network, lighter and finer. */
.invite-strip::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 92'%3E%3Cg fill='none' stroke='%2398f4c8' stroke-opacity='.48' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 64 L96 29 L188 55 L286 18 L394 62 L512 25 L628 58 L742 18 L855 60 L984 31 L1104 66 L1242 24 L1432 57'/%3E%3Cpath d='M96 29 L286 18 M96 29 L188 55 M188 55 L394 62 M286 18 L512 25 M394 62 L628 58 M512 25 L742 18 M628 58 L855 60 M742 18 L984 31 M855 60 L1104 66 M984 31 L1242 24 M1104 66 L1432 57 M1242 24 L1432 57'/%3E%3Cpath d='M34 24 L138 72 L248 38 L360 75 L482 48 L594 74 L706 42 L826 74 L954 46 L1076 74 L1198 43 L1346 72' stroke-opacity='.34'/%3E%3C/g%3E%3Cg fill='%2398f4c8' fill-opacity='.64' stroke='white' stroke-opacity='.5' stroke-width='1'%3E%3Ccircle cx='8' cy='64' r='3.4'/%3E%3Ccircle cx='96' cy='29' r='3.8'/%3E%3Ccircle cx='188' cy='55' r='3.5'/%3E%3Ccircle cx='286' cy='18' r='3.8'/%3E%3Ccircle cx='394' cy='62' r='3.5'/%3E%3Ccircle cx='512' cy='25' r='3.8'/%3E%3Ccircle cx='628' cy='58' r='3.5'/%3E%3Ccircle cx='742' cy='18' r='3.8'/%3E%3Ccircle cx='855' cy='60' r='3.5'/%3E%3Ccircle cx='984' cy='31' r='3.8'/%3E%3Ccircle cx='1104' cy='66' r='3.5'/%3E%3Ccircle cx='1242' cy='24' r='3.8'/%3E%3Ccircle cx='1432' cy='57' r='3.5'/%3E%3Ccircle cx='34' cy='24' r='2.8' fill-opacity='.46'/%3E%3Ccircle cx='248' cy='38' r='2.8' fill-opacity='.46'/%3E%3Ccircle cx='482' cy='48' r='2.8' fill-opacity='.46'/%3E%3Ccircle cx='706' cy='42' r='2.8' fill-opacity='.46'/%3E%3Ccircle cx='954' cy='46' r='2.8' fill-opacity='.46'/%3E%3Ccircle cx='1198' cy='43' r='2.8' fill-opacity='.46'/%3E%3C/g%3E%3C/svg%3E") center center / cover no-repeat,
    radial-gradient(ellipse at 18% 42%, rgba(152, 244, 200, 0.12), transparent 34%),
    radial-gradient(ellipse at 78% 45%, rgba(152, 244, 200, 0.11), transparent 32%);
  opacity: 0.86;
  mix-blend-mode: multiply;
}

.invite-message::before {
  display: none;
}

.invite-message strong {
  font-size: clamp(19px, 1.85vw, 25px);
  font-weight: 920;
  letter-spacing: 0.01em;
  line-height: 1.12;
  text-transform: none;
}

/* Denser neural banner and calmer premium wording. */
.invite-strip::before {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 92'%3E%3Cg fill='none' stroke='%23a9f8d4' stroke-opacity='.56' stroke-width='.85' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 20 L34 42 L62 18 L92 50 L122 24 L154 46 L184 18 L216 50 L258 24 L312 54'/%3E%3Cpath d='M12 70 L34 42 L62 72 L92 50 L122 76 L154 46 L184 72 L216 50 L258 74 L312 54'/%3E%3Cpath d='M34 42 L92 50 M62 18 L122 24 M122 24 L184 18 M154 46 L216 50 M216 50 L312 54 M62 72 L122 76 M184 72 L258 74 M8 20 L62 72 M62 18 L92 50 M122 76 L154 46 M184 18 L216 50 M258 24 L312 54'/%3E%3Cpath d='M40 16 L72 38 L108 14 L146 34 L178 12 L214 34 L252 14 L308 34 M42 78 L74 56 L108 80 L146 58 L178 82 L214 58 L252 80 L308 62' stroke-opacity='.34'/%3E%3C/g%3E%3Cg fill='%23a9f8d4' fill-opacity='.72' stroke='white' stroke-opacity='.56' stroke-width='.75'%3E%3Ccircle cx='8' cy='20' r='2.4'/%3E%3Ccircle cx='34' cy='42' r='2.6'/%3E%3Ccircle cx='62' cy='18' r='2.4'/%3E%3Ccircle cx='92' cy='50' r='2.6'/%3E%3Ccircle cx='122' cy='24' r='2.4'/%3E%3Ccircle cx='154' cy='46' r='2.6'/%3E%3Ccircle cx='184' cy='18' r='2.4'/%3E%3Ccircle cx='216' cy='50' r='2.6'/%3E%3Ccircle cx='258' cy='24' r='2.4'/%3E%3Ccircle cx='312' cy='54' r='2.6'/%3E%3Ccircle cx='12' cy='70' r='2.3'/%3E%3Ccircle cx='62' cy='72' r='2.4'/%3E%3Ccircle cx='122' cy='76' r='2.3'/%3E%3Ccircle cx='184' cy='72' r='2.4'/%3E%3Ccircle cx='258' cy='74' r='2.3'/%3E%3Ccircle cx='40' cy='16' r='2' fill-opacity='.5'/%3E%3Ccircle cx='108' cy='14' r='2' fill-opacity='.5'/%3E%3Ccircle cx='178' cy='12' r='2' fill-opacity='.5'/%3E%3Ccircle cx='252' cy='14' r='2' fill-opacity='.5'/%3E%3Ccircle cx='74' cy='56' r='2' fill-opacity='.5'/%3E%3Ccircle cx='146' cy='58' r='2' fill-opacity='.5'/%3E%3Ccircle cx='214' cy='58' r='2' fill-opacity='.5'/%3E%3Ccircle cx='308' cy='62' r='2' fill-opacity='.5'/%3E%3C/g%3E%3C/svg%3E") left center / 320px 92px repeat-x,
    radial-gradient(ellipse at 18% 42%, rgba(152, 244, 200, 0.1), transparent 34%),
    radial-gradient(ellipse at 78% 45%, rgba(152, 244, 200, 0.1), transparent 32%);
  opacity: 0.92;
}

.invite-message strong {
  font-size: clamp(18px, 1.68vw, 23px);
  font-weight: 880;
  letter-spacing: 0.015em;
  line-height: 1.18;
  text-transform: none;
  text-wrap: balance;
}

/* Top invitation bar: warmer paper surface, stronger edge, quieter codes. */
.invite-strip {
  background:
    linear-gradient(180deg, rgba(255, 253, 247, 0.98), rgba(247, 241, 230, 0.96) 58%, rgba(255, 250, 241, 0.98)) padding-box;
  border-bottom: 2px solid rgba(29, 106, 74, 0.18);
  box-shadow:
    0 12px 28px rgba(23, 23, 23, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(255, 47, 163, 0.08);
}

.invite-strip::after {
  height: 3px;
  background: linear-gradient(90deg, rgba(255, 47, 163, 0.38), rgba(255, 122, 33, 0.28), rgba(0, 224, 112, 0.4));
  opacity: 0.56;
}

.invite-codes {
  gap: 12px;
}

.invite-codes > span {
  min-width: auto;
  min-height: auto;
  padding: 0;
  gap: 5px;
  color: rgba(23, 50, 36, 0.74);
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.invite-codes > span + span {
  padding-left: 12px;
  border-left: 1px solid rgba(29, 106, 74, 0.18);
}

.invite-codes > span::before,
.invite-codes > span::after {
  content: none;
}

.invite-codes small {
  color: rgba(23, 50, 36, 0.56);
  font-size: 9px;
  font-weight: 780;
}

.invite-strip b,
.invite-codes b,
.invite-codes > span:nth-child(2) b {
  color: rgba(23, 50, 36, 0.78);
  -webkit-text-fill-color: rgba(23, 50, 36, 0.78);
  font-size: 13px;
  font-weight: 850;
  text-shadow: none;
}

/* Readable community tab: no masked white text on the pale nav. */
.nav-community {
  color: #0e3b2a !important;
  -webkit-text-fill-color: #0e3b2a !important;
  background:
    linear-gradient(145deg, rgba(231, 255, 242, 0.98), rgba(255, 253, 247, 0.96)) padding-box,
    linear-gradient(118deg, rgba(29, 106, 74, 0.46), rgba(0, 224, 112, 0.38), rgba(255, 47, 163, 0.22)) border-box !important;
  border: 1px solid transparent !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 8px 18px rgba(29, 106, 74, 0.1) !important;
  font-weight: 820;
  text-shadow: none;
}

.nav-community::before,
.nav-community::after {
  content: none !important;
}

.nav-community:hover,
.nav-community:focus-visible,
.nav-community[aria-current="page"] {
  color: #0b3123 !important;
  -webkit-text-fill-color: #0b3123 !important;
  background:
    linear-gradient(145deg, rgba(218, 255, 236, 1), rgba(255, 252, 244, 0.98)) padding-box,
    linear-gradient(118deg, rgba(29, 106, 74, 0.6), rgba(0, 224, 112, 0.5), rgba(255, 47, 163, 0.28)) border-box !important;
}

/* Latest hero and simulator balance. */
.invite-message strong {
  color: #173224;
  -webkit-text-fill-color: #173224;
  font-size: clamp(17px, 1.5vw, 21px);
  font-weight: 760;
  letter-spacing: 0.005em;
  line-height: 1.16;
  text-transform: none;
}

.hero {
  grid-template-columns: minmax(0, 0.92fr) minmax(360px, 1.08fr);
  align-items: center;
}

.hero-copy {
  align-self: center;
}

.hero-actions {
  align-items: center;
}

.hero-art {
  align-self: center;
  transform: translateY(-22px);
}

.hero-art .code-panel {
  width: min(100%, 480px);
  margin: 18px auto 0;
}

.calculator-fab {
  min-width: 142px;
  min-height: 54px;
  padding: 14px 22px;
  font-size: 16px;
}

.calculator-fab::before {
  inset: -34px -44px;
}

@media (max-width: 980px) {
  .hero-art {
    transform: none;
  }
}

/* Homepage hero: compact referral block and two buttons on one line. */
.hero-copy > .hero-actions {
  flex-wrap: nowrap;
  width: min(100%, 520px);
}

.hero-copy > .hero-actions .button-primary,
.hero-copy > .hero-actions .button-secondary {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  padding-inline: 14px;
  text-align: center;
}

.hero-art .code-panel {
  width: min(100%, 405px);
  margin-top: 14px;
  padding: 10px;
  gap: 8px;
}

.hero-art .code-panel div {
  padding: 7px;
  gap: 5px;
}

.hero-art .code-panel span {
  font-size: 10px;
}

.hero-art .code-panel strong {
  padding: 6px 8px;
  font-size: 15px;
}

/* Homepage hero: signup CTA belongs with the referral codes, learn CTA is primary reading path. */
.hero-copy > .hero-actions {
  width: min(100%, 410px);
}

.hero-copy > .hero-actions .button-secondary {
  flex: 0 1 auto;
  min-height: 66px;
  padding: 18px 30px;
  font-size: 18px;
  font-weight: 920;
}

.hero-art-cta {
  width: min(100%, 405px);
  margin: 16px auto 0;
  display: flex;
  font-size: 15px;
  font-weight: 880;
}

.hero-art-cta + .code-panel {
  margin-top: 10px;
}

/* Futuristic top banner: dark premium contrast with controlled rainbow light. */
.invite-strip {
  width: min(1180px, calc(100% - 24px));
  min-height: 88px;
  margin: 8px auto 0;
  padding: 13px 22px 13px 20px;
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  color: #f8fbff;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.015) 45%, rgba(0, 0, 0, 0.28)) padding-box,
    radial-gradient(circle at 18% 20%, rgba(37, 223, 255, 0.32), transparent 28%) padding-box,
    radial-gradient(circle at 84% 18%, rgba(255, 47, 163, 0.28), transparent 30%) padding-box,
    linear-gradient(180deg, #04050a 0%, #070812 52%, #020208 100%) padding-box,
    conic-gradient(from 230deg, #23e8ff, #5d62ff, #b93cff, #ff2fa3, #ff8b23, #d9ff4f, #24e684, #23e8ff) border-box;
  border: 1.5px solid transparent;
  border-radius: 14px;
  clip-path: none;
  box-shadow:
    0 18px 42px rgba(3, 5, 14, 0.34),
    0 0 18px rgba(93, 98, 255, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -18px 34px rgba(0, 0, 0, 0.32);
}

.invite-strip::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(100deg, transparent 0 14%, rgba(35, 232, 255, 0.18) 14.3%, transparent 14.8% 36%, rgba(255, 47, 163, 0.15) 36.3%, transparent 37% 72%, rgba(36, 230, 132, 0.14) 72.4%, transparent 73%),
    linear-gradient(78deg, transparent 0 27%, rgba(185, 60, 255, 0.2) 27.2%, transparent 27.8% 58%, rgba(255, 139, 35, 0.16) 58.3%, transparent 59%),
    radial-gradient(circle at 24% 52%, transparent 0 22%, rgba(35, 232, 255, 0.34) 22.3% 22.8%, transparent 23.2%),
    radial-gradient(circle at 78% 48%, transparent 0 31%, rgba(255, 47, 163, 0.26) 31.3% 31.75%, transparent 32.1%),
    radial-gradient(circle, rgba(255, 255, 255, 0.74) 0 1px, transparent 1.6px) 16px 14px / 92px 42px,
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 34px);
  opacity: 0.82;
  mix-blend-mode: screen;
}

.invite-strip::after {
  content: "";
  position: absolute;
  inset: 4px;
  z-index: 1;
  pointer-events: none;
  height: auto;
  background:
    linear-gradient(90deg, rgba(35, 232, 255, 0.75), rgba(185, 60, 255, 0.36), rgba(255, 47, 163, 0.62), rgba(255, 139, 35, 0.48), rgba(36, 230, 132, 0.7)) top / 100% 1px no-repeat,
    linear-gradient(90deg, rgba(36, 230, 132, 0.58), rgba(255, 139, 35, 0.32), rgba(255, 47, 163, 0.58), rgba(35, 232, 255, 0.64)) bottom / 100% 1px no-repeat;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 11px;
  clip-path: none;
  opacity: 1;
  box-shadow:
    inset 0 0 24px rgba(35, 232, 255, 0.08),
    inset 0 0 30px rgba(255, 47, 163, 0.08);
}

.invite-logo {
  width: 118px;
  max-height: 48px;
  padding: 7px 9px;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 12px;
  filter:
    drop-shadow(0 0 10px rgba(35, 232, 255, 0.24))
    drop-shadow(0 0 14px rgba(255, 47, 163, 0.12));
}

.invite-message {
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 22px;
  row-gap: 5px;
  align-items: center;
  text-align: left;
}

.invite-message strong {
  grid-column: 1;
  grid-row: 1 / span 2;
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  font-size: clamp(20px, 2.08vw, 29px);
  font-weight: 860;
  letter-spacing: 0.018em;
  line-height: 1.06;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.22),
    0 0 18px rgba(35, 232, 255, 0.18),
    0 0 26px rgba(255, 47, 163, 0.12);
}

.invite-subline {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  align-self: end;
  margin: 0 0 -1px;
  color: rgba(222, 255, 243, 0.84);
  font-size: 10px;
  font-weight: 860;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-shadow: 0 0 12px rgba(36, 230, 132, 0.24);
}

.invite-codes {
  grid-column: 2;
  grid-row: 2;
  gap: 8px;
}

.invite-codes > span {
  min-width: 124px;
  min-height: 34px;
  padding: 6px 12px;
  gap: 7px;
  color: #ffffff;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.035)) padding-box,
    linear-gradient(116deg, rgba(35, 232, 255, 0.75), rgba(185, 60, 255, 0.44), rgba(255, 47, 163, 0.72)) border-box;
  border: 1px solid transparent;
  border-radius: 10px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 0 16px rgba(35, 232, 255, 0.08);
}

.invite-codes > span + span {
  padding-left: 12px;
  border-left: 1px solid transparent;
}

.invite-codes small {
  color: rgba(206, 230, 255, 0.72);
  font-size: 9px;
  font-weight: 780;
}

.invite-strip b,
.invite-codes b,
.invite-codes > span:nth-child(2) b {
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  font-size: 14px;
  font-weight: 880;
  text-shadow: 0 0 12px rgba(35, 232, 255, 0.35);
}

.invite-codes > span:nth-child(2) b {
  text-shadow: 0 0 12px rgba(255, 47, 163, 0.38);
}

@media (max-width: 980px) {
  .invite-strip {
    grid-template-columns: 1fr;
    width: calc(100% - 16px);
    min-height: 0;
    padding: 12px;
    gap: 10px;
  }

  .invite-logo {
    justify-self: center;
  }

  .invite-message {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .invite-message strong,
  .invite-subline,
  .invite-codes {
    grid-column: 1;
    grid-row: auto;
  }

  .invite-codes {
    justify-content: center;
    flex-wrap: wrap;
  }
}

/* Keep the intro cards visually connected to the "Pourquoi ca existe ?" section. */
#simple.section {
  padding-bottom: 42px;
}

#simple + .story {
  padding-top: 46px;
}

@media (max-width: 640px) {
  #simple.section {
    padding-bottom: 34px;
  }

  #simple + .story {
    padding-top: 38px;
  }
}

/* Calmer futuristic banner: slimmer, cleaner, less promotional. */
.invite-strip {
  width: min(1140px, calc(100% - 28px));
  min-height: 68px;
  margin: 8px auto 0;
  padding: 9px 18px;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.018) 54%, rgba(0, 0, 0, 0.16)) padding-box,
    radial-gradient(circle at 16% 36%, rgba(69, 218, 255, 0.16), transparent 26%) padding-box,
    radial-gradient(circle at 86% 40%, rgba(255, 47, 163, 0.13), transparent 28%) padding-box,
    linear-gradient(180deg, #07080d, #04050a 66%, #020207) padding-box,
    linear-gradient(112deg, rgba(35, 232, 255, 0.72), rgba(132, 83, 255, 0.5), rgba(255, 47, 163, 0.6), rgba(255, 139, 35, 0.42), rgba(36, 230, 132, 0.64)) border-box;
  border: 1px solid transparent;
  border-radius: 10px;
  box-shadow:
    0 12px 26px rgba(3, 5, 14, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.invite-strip::before {
  background:
    linear-gradient(102deg, transparent 0 36%, rgba(255, 255, 255, 0.08) 44%, transparent 53%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 38px);
  opacity: 0.42;
  mix-blend-mode: screen;
}

.invite-strip::after {
  inset: auto 18px 7px;
  height: 1px;
  background: linear-gradient(90deg, rgba(35, 232, 255, 0.54), rgba(255, 47, 163, 0.46), rgba(36, 230, 132, 0.5));
  border: 0;
  border-radius: 999px;
  box-shadow: none;
  opacity: 0.76;
}

.invite-logo {
  width: 104px;
  max-height: 38px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  filter: drop-shadow(0 0 8px rgba(35, 232, 255, 0.18));
}

.invite-message {
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 18px;
  row-gap: 3px;
}

.invite-message strong {
  color: #f8fbff;
  -webkit-text-fill-color: #f8fbff;
  font-size: clamp(17px, 1.65vw, 23px);
  font-weight: 720;
  letter-spacing: 0.012em;
  line-height: 1.1;
  text-shadow: 0 0 14px rgba(35, 232, 255, 0.14);
}

.invite-subline {
  color: rgba(224, 247, 241, 0.74);
  font-size: 9px;
  font-weight: 780;
  letter-spacing: 0.11em;
  text-shadow: none;
}

.invite-codes {
  gap: 7px;
}

.invite-codes > span {
  min-width: 112px;
  min-height: 29px;
  padding: 5px 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.026)) padding-box,
    linear-gradient(116deg, rgba(35, 232, 255, 0.44), rgba(255, 47, 163, 0.42), rgba(36, 230, 132, 0.38)) border-box;
  border: 1px solid transparent;
  border-radius: 8px;
  box-shadow: none;
}

.invite-codes small {
  color: rgba(214, 230, 240, 0.62);
  font-size: 8px;
  font-weight: 720;
}

.invite-strip b,
.invite-codes b,
.invite-codes > span:nth-child(2) b {
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  text-shadow: none;
}

@media (max-width: 980px) {
  .invite-strip {
    grid-template-columns: 1fr;
    width: calc(100% - 16px);
    min-height: 0;
    padding: 11px 12px 14px;
    gap: 8px;
  }

  .invite-logo {
    justify-self: center;
  }

  .invite-message {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

/* Full-width refined banner: dark base, green neural layer, polished text. */
.invite-strip {
  width: 100%;
  min-height: 72px;
  margin: 0;
  padding: 10px max(20px, calc((100vw - 1160px) / 2));
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 22px;
  border-left: 0;
  border-right: 0;
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.015) 48%, rgba(0, 0, 0, 0.26)) padding-box,
    radial-gradient(circle at 16% 42%, rgba(91, 255, 180, 0.14), transparent 26%) padding-box,
    radial-gradient(circle at 82% 40%, rgba(255, 47, 163, 0.1), transparent 28%) padding-box,
    linear-gradient(180deg, #06070b 0%, #030409 70%, #010104 100%) padding-box,
    linear-gradient(90deg, rgba(35, 232, 255, 0.52), rgba(145, 78, 255, 0.36), rgba(255, 47, 163, 0.42), rgba(255, 139, 35, 0.32), rgba(105, 255, 176, 0.56)) border-box;
  border-top: 0;
  border-bottom: 1px solid transparent;
  box-shadow:
    0 10px 24px rgba(4, 7, 15, 0.22),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08);
}

.invite-strip::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 72'%3E%3Cg fill='none' stroke='%238df7bd' stroke-opacity='.5' stroke-width='.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 18 L34 38 L66 16 L100 44 L132 20 L166 42 L202 16 L238 46 L276 22 L354 50'/%3E%3Cpath d='M8 56 L34 38 L66 58 L100 44 L132 60 L166 42 L202 58 L238 46 L276 60 L354 50'/%3E%3Cpath d='M34 38 L100 44 M66 16 L132 20 M132 20 L202 16 M166 42 L238 46 M238 46 L354 50 M66 58 L132 60 M202 58 L276 60 M6 18 L66 58 M100 44 L166 42 M202 16 L238 46'/%3E%3C/g%3E%3Cg fill='%238df7bd' fill-opacity='.62' stroke='white' stroke-opacity='.36' stroke-width='.6'%3E%3Ccircle cx='6' cy='18' r='2.1'/%3E%3Ccircle cx='34' cy='38' r='2.3'/%3E%3Ccircle cx='66' cy='16' r='2.1'/%3E%3Ccircle cx='100' cy='44' r='2.3'/%3E%3Ccircle cx='132' cy='20' r='2.1'/%3E%3Ccircle cx='166' cy='42' r='2.3'/%3E%3Ccircle cx='202' cy='16' r='2.1'/%3E%3Ccircle cx='238' cy='46' r='2.3'/%3E%3Ccircle cx='276' cy='22' r='2.1'/%3E%3Ccircle cx='354' cy='50' r='2.3'/%3E%3Ccircle cx='8' cy='56' r='1.9' fill-opacity='.42'/%3E%3Ccircle cx='66' cy='58' r='1.9' fill-opacity='.42'/%3E%3Ccircle cx='132' cy='60' r='1.9' fill-opacity='.42'/%3E%3Ccircle cx='202' cy='58' r='1.9' fill-opacity='.42'/%3E%3Ccircle cx='276' cy='60' r='1.9' fill-opacity='.42'/%3E%3C/g%3E%3C/svg%3E") left center / 360px 72px repeat-x,
    linear-gradient(102deg, transparent 0 42%, rgba(255, 255, 255, 0.06) 48%, transparent 55%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 42px);
  opacity: 0.74;
  mix-blend-mode: screen;
}

.invite-strip::after {
  inset: auto 0 0;
  height: 2px;
  background:
    linear-gradient(90deg, rgba(35, 232, 255, 0.68), rgba(141, 247, 189, 0.74), rgba(255, 47, 163, 0.48), rgba(255, 139, 35, 0.42), rgba(35, 232, 255, 0.62));
  border: 0;
  border-radius: 0;
  opacity: 0.76;
}

.invite-logo {
  width: 106px;
  max-height: 40px;
  filter:
    drop-shadow(0 0 9px rgba(141, 247, 189, 0.18))
    drop-shadow(0 0 11px rgba(35, 232, 255, 0.12));
}

.invite-message strong {
  color: transparent;
  background:
    linear-gradient(180deg, #ffffff 0%, #eafef4 38%, #9ef2c5 50%, #ffffff 62%, #bdd3e8 100%);
  background-size: 100% 160%;
  background-position: 50% 38%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: clamp(18px, 1.72vw, 24px);
  font-weight: 790;
  letter-spacing: 0.018em;
  text-shadow:
    0 0 1px rgba(255, 255, 255, 0.36),
    0 0 14px rgba(141, 247, 189, 0.17),
    0 0 22px rgba(35, 232, 255, 0.12);
}

.invite-message strong::after {
  content: "";
  display: block;
  width: min(280px, 72%);
  height: 1px;
  margin-top: 7px;
  background: linear-gradient(90deg, rgba(141, 247, 189, 0), rgba(141, 247, 189, 0.58), rgba(255, 47, 163, 0.24), rgba(141, 247, 189, 0));
  opacity: 0.74;
}

.invite-subline {
  color: rgba(198, 247, 224, 0.82);
}

@media (max-width: 980px) {
  .invite-strip {
    width: 100%;
    padding: 11px 14px 14px;
  }
}

/* Banner readability: opaque cyan-green codes and a soft light behind the phrase. */
.invite-message {
  position: relative;
}

.invite-message::before {
  content: "";
  display: block;
  position: absolute;
  left: -28px;
  top: 50%;
  width: min(560px, 62vw);
  height: 64px;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 35% 52%, rgba(206, 255, 232, 0.28), transparent 58%),
    radial-gradient(ellipse at 58% 48%, rgba(118, 245, 188, 0.17), transparent 62%),
    radial-gradient(ellipse at 24% 50%, rgba(68, 223, 255, 0.14), transparent 56%);
  border-radius: 999px;
  filter: blur(12px);
  transform: translateY(-50%);
  opacity: 0.92;
  mix-blend-mode: screen;
}

.invite-codes > span {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.055)) padding-box,
    linear-gradient(118deg, #27e8ff 0%, #39efbd 48%, #8df7bd 100%) border-box;
  border: 1px solid transparent;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 0 16px rgba(57, 239, 189, 0.16);
}

.invite-codes small {
  color: rgba(230, 255, 247, 0.86);
}

.invite-strip b,
.invite-codes b,
.invite-codes > span:nth-child(2) b {
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  text-shadow:
    0 0 8px rgba(39, 232, 255, 0.26),
    0 0 12px rgba(57, 239, 189, 0.22);
}

/* Mobile safety pass: keep banner, hero controls and simulator inside the viewport. */
@media (max-width: 640px) {
  .invite-strip {
    grid-template-columns: 1fr;
    padding: 12px 14px 15px;
    gap: 9px;
  }

  .invite-message {
    grid-template-columns: 1fr;
    row-gap: 7px;
    text-align: center;
  }

  .invite-message::before {
    left: 50%;
    width: min(330px, 92vw);
    height: 74px;
    transform: translate(-50%, -50%);
  }

  .invite-message strong {
    max-width: 100%;
    margin-inline: auto;
    font-size: clamp(17px, 5.2vw, 22px);
    line-height: 1.12;
  }

  .invite-message strong::after {
    width: min(220px, 70%);
    margin-inline: auto;
  }

  .invite-subline,
  .invite-codes {
    grid-column: 1;
    grid-row: auto;
  }

  .invite-codes {
    width: min(100%, 330px);
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .invite-codes > span {
    min-width: 0;
    width: 100%;
  }

  .hero-copy > .hero-actions {
    width: 100%;
  }

  .hero-art-cta,
  .hero-art .code-panel {
    width: 100%;
  }

  .calculator-panel {
    max-height: calc(100dvh - 92px);
  }
}

/* Banner codes: quieter cyan-to-black treatment, aligned further right. */
.invite-message {
  grid-template-columns: minmax(0, 1fr) minmax(260px, auto);
}

.invite-codes {
  justify-self: end;
  margin-left: auto;
}

.invite-codes > span {
  background:
    linear-gradient(140deg, rgba(35, 232, 255, 0.28) 0%, rgba(15, 86, 94, 0.2) 42%, rgba(4, 7, 12, 0.92) 100%) padding-box,
    linear-gradient(118deg, rgba(35, 232, 255, 0.42), rgba(69, 239, 190, 0.18), rgba(3, 8, 14, 0.9)) border-box;
  border: 1px solid transparent;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    inset 0 -10px 18px rgba(0, 0, 0, 0.22);
}

.invite-codes small {
  color: rgba(206, 239, 238, 0.62);
}

.invite-strip b,
.invite-codes b,
.invite-codes > span:nth-child(2) b {
  color: rgba(245, 255, 252, 0.9);
  -webkit-text-fill-color: rgba(245, 255, 252, 0.9);
  text-shadow: 0 0 7px rgba(35, 232, 255, 0.14);
}

@media (max-width: 640px) {
  .invite-message {
    grid-template-columns: 1fr;
  }

  .invite-codes {
    justify-self: center;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Banner final polish: solid code chips and subtle pink edges on the headline. */
.invite-message strong {
  background:
    linear-gradient(90deg, #ff5fb8 0%, #ffffff 13%, #eafff5 38%, #9ef2c5 52%, #ffffff 86%, #ff5fb8 100%);
  background-size: 100% 160%;
  background-position: 50% 38%;
  background-clip: text;
  -webkit-background-clip: text;
  filter:
    drop-shadow(0 0 7px rgba(141, 247, 189, 0.14))
    drop-shadow(0 0 9px rgba(255, 47, 163, 0.12));
}

.invite-message strong::after {
  background: linear-gradient(90deg, rgba(255, 95, 184, 0), rgba(255, 95, 184, 0.36), rgba(141, 247, 189, 0.58), rgba(255, 95, 184, 0.34), rgba(255, 95, 184, 0));
}

.invite-codes > span,
.invite-codes > span:nth-child(2) {
  background:
    linear-gradient(140deg, rgba(31, 194, 214, 0.72) 0%, rgba(12, 74, 82, 0.72) 36%, rgba(4, 7, 12, 0.98) 100%) padding-box,
    linear-gradient(118deg, rgba(39, 232, 255, 0.56), rgba(69, 239, 190, 0.3), rgba(2, 8, 14, 0.98)) border-box;
  border: 1px solid transparent;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.13),
    inset 0 -10px 18px rgba(0, 0, 0, 0.28),
    0 0 10px rgba(39, 232, 255, 0.08);
}

.invite-codes > span:nth-child(2) {
  border-left: 1px solid transparent;
}

/* Fine headline contour so the top banner text separates from the light header blur. */
.invite-message strong {
  -webkit-text-stroke: 0.28px rgba(2, 10, 12, 0.68);
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.42),
    0 0 7px rgba(141, 247, 189, 0.14),
    0 0 9px rgba(255, 47, 163, 0.12);
}

.hero h1 {
  font-size: clamp(38px, 3.35vw, 48px);
}

@media (max-width: 640px) {
  .hero h1 {
    font-size: 31px;
  }
}

/* Restore banner headline color; keep only a fine contour. */
.invite-message strong {
  background:
    linear-gradient(90deg, #ff5fb8 0%, #ffffff 13%, #eafff5 38%, #9ef2c5 52%, #ffffff 86%, #ff5fb8 100%);
  background-size: 100% 160%;
  background-position: 50% 38%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0;
  filter:
    drop-shadow(0 0 7px rgba(141, 247, 189, 0.14))
    drop-shadow(0 0 9px rgba(255, 47, 163, 0.12));
  text-shadow:
    -0.45px 0 rgba(2, 10, 12, 0.5),
    0.45px 0 rgba(2, 10, 12, 0.5),
    0 -0.45px rgba(2, 10, 12, 0.42),
    0 0.45px rgba(2, 10, 12, 0.42);
}

/* Fix headline contour without darkening the fill; compact header at in-between widths. */
.invite-message strong {
  background:
    linear-gradient(90deg, #ff5fb8 0%, #ffffff 13%, #eafff5 38%, #9ef2c5 52%, #ffffff 86%, #ff5fb8 100%);
  background-size: 100% 160%;
  background-position: 50% 38%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0;
  text-shadow: none;
  filter:
    drop-shadow(0 0 0.75px rgba(0, 0, 0, 0.72))
    drop-shadow(0 0 7px rgba(141, 247, 189, 0.14))
    drop-shadow(0 0 9px rgba(255, 47, 163, 0.12));
}

@media (max-width: 1120px) and (min-width: 641px) {
  .site-header {
    padding-bottom: 6px;
  }

  .invite-strip {
    min-height: 58px;
    padding: 7px 16px;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 14px;
  }

  .invite-logo {
    width: 88px;
    max-height: 34px;
  }

  .invite-message {
    grid-template-columns: minmax(0, 1fr) minmax(220px, auto);
    column-gap: 12px;
    row-gap: 0;
    text-align: left;
  }

  .invite-message::before {
    left: -12px;
    width: min(430px, 54vw);
    height: 48px;
  }

  .invite-message strong {
    margin: 0;
    font-size: clamp(15px, 1.9vw, 20px);
    line-height: 1.05;
  }

  .invite-message strong::after {
    margin-top: 4px;
  }

  .invite-subline {
    font-size: 8px;
  }

  .invite-codes {
    width: auto;
    display: flex;
    gap: 6px;
  }

  .invite-codes > span,
  .invite-codes > span:nth-child(2) {
    min-width: 104px;
    min-height: 26px;
    padding: 4px 8px;
  }

  .invite-codes small {
    font-size: 7.5px;
  }

  .invite-strip b,
  .invite-codes b,
  .invite-codes > span:nth-child(2) b {
    font-size: 11.5px;
  }

  .nav-shell {
    width: 100%;
    min-height: 48px;
    margin: 6px auto 0;
    padding: 7px 10px;
    gap: 8px;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    border-radius: 0;
    scrollbar-width: none;
  }

  .nav-shell::-webkit-scrollbar {
    display: none;
  }

  .brand,
  .nav-links,
  .nav-community,
  .nav-solution {
    flex: 0 0 auto;
  }

  .brand img {
    width: 96px;
  }

  .nav-links {
    order: initial;
    width: auto;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 6px;
  }

  .nav-links a,
  .nav-link-soft,
  .nav-cta {
    width: auto;
    min-width: auto;
    min-height: 30px;
    padding: 6px 10px;
    font-size: 12px;
    white-space: nowrap;
  }

  .nav-community {
    margin-left: 0;
  }

  .nav-solution {
    width: auto;
    min-width: 108px;
    height: auto;
    margin: 0;
  }

  .nav-solution span {
    font-size: 10px;
  }

  .nav-solution small {
    font-size: 8px;
  }
}

@media (max-width: 640px) {
  .site-header {
    padding-bottom: 4px;
  }

  .nav-shell {
    width: 100%;
    min-height: 46px;
    margin: 4px auto 0;
    padding: 7px 10px;
    gap: 8px;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    border-radius: 0;
    scrollbar-width: none;
  }

  .nav-shell::-webkit-scrollbar {
    display: none;
  }

  .brand,
  .nav-links,
  .nav-community,
  .nav-solution {
    flex: 0 0 auto;
  }

  .brand img {
    width: 88px;
  }

  .nav-links {
    order: initial;
    width: auto;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 6px;
  }

  .nav-links a,
  .nav-link-soft,
  .nav-cta {
    width: auto;
    min-width: auto;
    min-height: 30px;
    padding: 6px 10px;
    font-size: 12px;
    white-space: nowrap;
  }

  .nav-community {
    margin-left: 0;
  }

  .nav-solution {
    width: auto;
    min-width: 102px;
    height: auto;
    margin: 0;
  }
}

/* Responsive header reset: compact tablet widths and restore the bright headline fill. */
.invite-message strong {
  color: #f8fbff;
  background:
    linear-gradient(90deg, #ff5fb8 0%, #ffffff 13%, #eafff5 38%, #9ef2c5 52%, #ffffff 86%, #ff5fb8 100%);
  background-size: 100% 160%;
  background-position: 50% 38%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
  filter:
    drop-shadow(0 0 0.55px rgba(0, 0, 0, 0.72))
    drop-shadow(0 0 7px rgba(141, 247, 189, 0.14))
    drop-shadow(0 0 9px rgba(255, 47, 163, 0.12));
}

@media (max-width: 1180px) and (min-width: 721px) {
  .site-header {
    padding-bottom: 5px;
  }

  .invite-strip {
    width: 100%;
    min-height: 60px !important;
    max-height: 68px;
    margin: 0;
    padding: 7px 14px;
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    overflow: hidden;
  }

  .invite-logo {
    width: 88px;
    max-height: 34px;
    justify-self: start;
  }

  .invite-message {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(230px, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 12px;
    row-gap: 0;
    text-align: left;
  }

  .invite-message::before {
    left: -10px;
    top: 50%;
    width: min(430px, 50vw);
    height: 46px;
    transform: translateY(-50%);
  }

  .invite-message strong {
    grid-column: 1;
    grid-row: 1 / span 2;
    max-width: none;
    margin: 0;
    font-size: clamp(15px, 1.75vw, 20px);
    line-height: 1.05;
  }

  .invite-message strong::after {
    width: min(230px, 68%);
    margin: 4px 0 0;
  }

  .invite-subline {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    margin: 0;
    font-size: 8px;
    line-height: 1;
  }

  .invite-codes {
    grid-column: 2 !important;
    grid-row: 2 !important;
    width: auto;
    margin: 0;
    display: flex;
    flex-wrap: nowrap;
    justify-self: end;
    gap: 6px;
  }

  .invite-codes > span,
  .invite-codes > span:nth-child(2) {
    min-width: 102px;
    min-height: 25px;
    width: auto;
    padding: 4px 8px;
  }

  .invite-codes small {
    font-size: 7.5px;
  }

  .invite-strip b,
  .invite-codes b,
  .invite-codes > span:nth-child(2) b {
    font-size: 11.5px;
  }

  .nav-shell {
    width: 100%;
    min-height: 46px;
    margin: 0;
    padding: 6px 10px;
    gap: 8px;
    display: flex;
    flex-wrap: nowrap !important;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: 0;
    scrollbar-width: none;
  }

  .nav-shell::-webkit-scrollbar {
    display: none;
  }

  .brand,
  .nav-links,
  .nav-community,
  .nav-solution {
    flex: 0 0 auto;
  }

  .brand img {
    width: 92px;
  }

  .nav-links {
    order: initial !important;
    width: auto !important;
    display: flex;
    flex-wrap: nowrap !important;
    justify-content: flex-start;
    gap: 6px;
  }

  .nav-links a,
  .nav-link-soft,
  .nav-cta {
    width: auto !important;
    min-width: auto;
    min-height: 30px;
    padding: 6px 10px;
    font-size: 12px;
    white-space: nowrap;
  }

  .nav-community {
    margin-left: 0;
  }

  .nav-solution {
    width: auto;
    min-width: 108px;
    height: auto;
    margin: 0;
  }

  .nav-solution span {
    font-size: 10px;
  }

  .nav-solution small {
    font-size: 8px;
  }
}

@media (max-width: 720px) {
  .invite-strip {
    width: 100%;
    min-height: 0 !important;
    max-height: none;
    margin: 0;
    padding: 10px 12px 12px;
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 10px;
    overflow: hidden;
  }

  .invite-logo {
    width: 78px;
    max-height: 31px;
    justify-self: start;
  }

  .invite-message {
    min-width: 0;
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 6px;
    text-align: left;
  }

  .invite-message::before {
    left: -8px;
    top: 21px;
    width: min(300px, 76vw);
    height: 50px;
    transform: none;
  }

  .invite-message strong {
    grid-column: 1;
    grid-row: auto;
    max-width: 100%;
    margin: 0;
    font-size: clamp(15px, 4.1vw, 19px);
    line-height: 1.08;
  }

  .invite-message strong::after {
    width: min(210px, 70%);
    margin: 4px 0 0;
  }

  .invite-subline {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
    margin: 0;
  }

  .invite-codes {
    grid-column: 1 !important;
    grid-row: auto !important;
    width: min(100%, 270px);
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    justify-self: start;
  }

  .invite-codes > span,
  .invite-codes > span:nth-child(2) {
    min-width: 0;
    width: 100%;
    min-height: 25px;
    padding: 4px 7px;
  }

  .nav-shell {
    width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 6px 8px;
    gap: 7px;
    flex-wrap: nowrap !important;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: 0;
    scrollbar-width: none;
  }

  .nav-shell::-webkit-scrollbar {
    display: none;
  }

  .brand,
  .nav-links,
  .nav-community,
  .nav-solution {
    flex: 0 0 auto;
  }

  .brand img {
    width: 82px;
  }

  .nav-links {
    order: initial !important;
    width: auto !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start;
    gap: 6px;
  }

  .nav-links a,
  .nav-link-soft,
  .nav-cta {
    width: auto !important;
    min-width: auto;
    min-height: 29px;
    padding: 6px 9px;
    font-size: 12px;
    white-space: nowrap;
  }

  .nav-community {
    margin-left: 0;
  }

  .nav-solution {
    width: auto;
    min-width: 100px;
    height: auto;
    margin: 0;
  }
}

/* Definitive compact banner layout across intermediate widths. */
.invite-strip {
  box-sizing: border-box;
  width: 100% !important;
  min-height: 72px !important;
  max-height: 82px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 9px clamp(14px, 2vw, 30px) !important;
  display: grid !important;
  grid-template-columns: 126px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 18px !important;
  overflow: hidden !important;
}

.invite-logo {
  width: 106px !important;
  max-height: 42px !important;
  justify-self: start !important;
  align-self: center !important;
}

.invite-message {
  min-width: 0 !important;
  width: 100% !important;
  height: auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(245px, auto) !important;
  grid-template-rows: auto auto !important;
  grid-template-areas:
    "headline subline"
    "headline codes" !important;
  align-items: center !important;
  column-gap: 18px !important;
  row-gap: 3px !important;
  text-align: left !important;
}

.invite-message::before {
  left: -18px !important;
  top: 50% !important;
  width: min(520px, 52vw) !important;
  height: 58px !important;
  transform: translateY(-50%) !important;
}

.invite-message strong {
  grid-area: headline !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  font-size: clamp(17px, 1.45vw, 24px) !important;
  line-height: 1.08 !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

.invite-message strong::after {
  width: min(270px, 70%) !important;
  margin: 5px 0 0 !important;
}

.invite-subline {
  grid-area: subline !important;
  justify-self: center !important;
  align-self: end !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

.invite-codes {
  grid-area: codes !important;
  width: auto !important;
  margin: 0 !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-self: end !important;
  align-self: start !important;
  gap: 7px !important;
}

.invite-codes > span,
.invite-codes > span:nth-child(2) {
  width: auto !important;
  min-width: 112px !important;
  min-height: 28px !important;
  padding: 5px 9px !important;
}

.invite-codes small {
  font-size: 8px !important;
}

.invite-strip b,
.invite-codes b,
.invite-codes > span:nth-child(2) b {
  font-size: 12px !important;
}

@media (max-width: 1180px) {
  .invite-strip {
    min-height: 62px !important;
    max-height: 70px !important;
    padding: 7px 14px !important;
    grid-template-columns: 96px minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  .invite-logo {
    width: 88px !important;
    max-height: 34px !important;
  }

  .invite-message {
    grid-template-columns: minmax(0, 1fr) minmax(220px, auto) !important;
    column-gap: 12px !important;
    row-gap: 1px !important;
  }

  .invite-message::before {
    width: min(430px, 50vw) !important;
    height: 48px !important;
  }

  .invite-message strong {
    font-size: clamp(15px, 1.72vw, 20px) !important;
    line-height: 1.05 !important;
  }

  .invite-message strong::after {
    margin-top: 4px !important;
  }

  .invite-codes {
    gap: 6px !important;
  }

  .invite-codes > span,
  .invite-codes > span:nth-child(2) {
    min-width: 102px !important;
    min-height: 25px !important;
    padding: 4px 8px !important;
  }

  .invite-strip b,
  .invite-codes b,
  .invite-codes > span:nth-child(2) b {
    font-size: 11.5px !important;
  }
}

@media (max-width: 760px) {
  .invite-strip {
    min-height: 82px !important;
    max-height: 96px !important;
    padding: 9px 12px !important;
    grid-template-columns: 82px minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  .invite-logo {
    width: 76px !important;
    max-height: 31px !important;
  }

  .invite-message {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    grid-template-areas:
      "headline"
      "subline"
      "codes" !important;
    row-gap: 5px !important;
  }

  .invite-message::before {
    left: -8px !important;
    top: 24px !important;
    width: min(320px, 76vw) !important;
    height: 52px !important;
    transform: none !important;
  }

  .invite-message strong {
    font-size: clamp(15px, 4vw, 19px) !important;
    line-height: 1.06 !important;
  }

  .invite-subline {
    justify-self: start !important;
    font-size: 8px !important;
  }

  .invite-codes {
    width: min(100%, 275px) !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    justify-self: start !important;
    gap: 6px !important;
  }

  .invite-codes > span,
  .invite-codes > span:nth-child(2) {
    min-width: 0 !important;
    width: 100% !important;
    min-height: 24px !important;
    padding: 4px 7px !important;
  }
}

/* Final banner structure: title stays visible, access block stays grouped. */
.invite-strip {
  width: 100% !important;
  min-height: 64px !important;
  max-height: none !important;
  padding: 8px clamp(14px, 2vw, 28px) !important;
  display: grid !important;
  grid-template-columns: 118px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 16px !important;
  overflow: hidden !important;
}

.invite-logo {
  width: 104px !important;
  max-height: 40px !important;
}

.invite-message {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-areas: "headline access" !important;
  align-items: center !important;
  column-gap: 18px !important;
  row-gap: 0 !important;
  text-align: left !important;
}

.invite-message strong {
  grid-area: headline !important;
  display: block !important;
  margin: 0 !important;
  max-width: 100% !important;
  font-size: clamp(17px, 1.5vw, 24px) !important;
  line-height: 1.08 !important;
  white-space: normal !important;
}

.invite-message strong::after {
  width: min(270px, 70%) !important;
  margin: 5px 0 0 !important;
}

.invite-access {
  grid-area: access !important;
  min-width: 238px !important;
  display: grid !important;
  gap: 5px !important;
  justify-items: end !important;
  align-items: center !important;
}

.invite-subline {
  position: static !important;
  grid-area: auto !important;
  justify-self: end !important;
  align-self: auto !important;
  margin: 0 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.invite-codes {
  position: static !important;
  grid-area: auto !important;
  width: auto !important;
  margin: 0 !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 7px !important;
  justify-self: end !important;
}

.invite-codes > span,
.invite-codes > span:nth-child(2) {
  min-width: 112px !important;
  min-height: 28px !important;
  width: auto !important;
  padding: 5px 9px !important;
}

@media (max-width: 1180px) and (min-width: 761px) {
  .invite-strip {
    min-height: 58px !important;
    padding: 6px 14px !important;
    grid-template-columns: 92px minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  .invite-logo {
    width: 86px !important;
    max-height: 34px !important;
  }

  .invite-message {
    grid-template-columns: minmax(0, 1fr) auto !important;
    column-gap: 12px !important;
  }

  .invite-message strong {
    font-size: clamp(15px, 1.6vw, 19px) !important;
    line-height: 1.05 !important;
  }

  .invite-access {
    min-width: 210px !important;
    gap: 4px !important;
  }

  .invite-subline {
    font-size: 8px !important;
  }

  .invite-codes > span,
  .invite-codes > span:nth-child(2) {
    min-width: 98px !important;
    min-height: 24px !important;
    padding: 4px 7px !important;
  }

  .invite-strip b,
  .invite-codes b,
  .invite-codes > span:nth-child(2) b {
    font-size: 11px !important;
  }
}

@media (max-width: 760px) {
  .invite-strip {
    min-height: 82px !important;
    padding: 9px 12px !important;
    grid-template-columns: 78px minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  .invite-logo {
    width: 72px !important;
    max-height: 30px !important;
  }

  .invite-message {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "headline"
      "access" !important;
    row-gap: 6px !important;
  }

  .invite-message strong {
    font-size: clamp(15px, 4vw, 19px) !important;
  }

  .invite-access {
    min-width: 0 !important;
    width: min(100%, 276px) !important;
    justify-items: start !important;
  }

  .invite-subline {
    justify-self: start !important;
  }

  .invite-codes {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    justify-self: start !important;
  }

  .invite-codes > span,
  .invite-codes > span:nth-child(2) {
    min-width: 0 !important;
    width: 100% !important;
    min-height: 24px !important;
  }
}

/* Final CTA legal note and cleaner simulator close control. */
.cta-legal-note {
  max-width: 680px;
  margin: 10px auto 0;
  color: rgba(23, 50, 36, 0.66);
  font-size: 12px;
  line-height: 1.45;
}

.calculator-head button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 26px !important;
  line-height: 1 !important;
}

/* Bring the first explanation section closer to the hero. */
#simple.section {
  padding-top: 48px;
}

@media (max-width: 640px) {
  #simple.section {
    padding-top: 42px;
  }
}

/* Definitive top header pass: neutral wording, compact at every width. */
.site-header {
  width: 100%;
}

.invite-strip {
  width: 100% !important;
  min-height: 62px !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 8px clamp(14px, 2vw, 28px) !important;
  display: grid !important;
  grid-template-columns: clamp(90px, 9vw, 118px) minmax(0, 1fr) !important;
  grid-template-rows: auto !important;
  align-items: center !important;
  gap: clamp(10px, 1.4vw, 18px) !important;
  overflow: hidden !important;
}

.invite-logo {
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: clamp(78px, 8vw, 104px) !important;
  max-height: 40px !important;
  align-self: center !important;
  justify-self: start !important;
}

.invite-message {
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  width: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) max-content !important;
  grid-template-areas: "headline access" !important;
  align-items: center !important;
  column-gap: clamp(10px, 1.8vw, 24px) !important;
  row-gap: 0 !important;
  text-align: left !important;
}

.invite-message::before {
  left: -16px !important;
  top: 50% !important;
  width: min(560px, 58vw) !important;
  height: 54px !important;
  transform: translateY(-50%) !important;
}

.invite-message strong {
  grid-area: headline !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  font-size: clamp(16px, 1.42vw, 23px) !important;
  line-height: 1.08 !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

.invite-message strong::after {
  width: min(260px, 66%) !important;
  margin: 4px 0 0 !important;
}

.invite-access {
  grid-area: access !important;
  min-width: 220px !important;
  display: grid !important;
  gap: 5px !important;
  align-items: center !important;
  justify-items: end !important;
}

.invite-subline {
  position: static !important;
  grid-area: auto !important;
  justify-self: end !important;
  margin: 0 !important;
  color: rgba(232, 245, 241, 0.86) !important;
  font-size: clamp(8px, 0.72vw, 10px) !important;
  line-height: 1 !important;
  letter-spacing: 0.1em !important;
  white-space: nowrap !important;
}

.invite-codes {
  position: static !important;
  grid-area: auto !important;
  width: auto !important;
  margin: 0 !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-self: end !important;
  gap: 7px !important;
}

.invite-codes > span,
.invite-codes > span:nth-child(2) {
  min-width: 108px !important;
  width: auto !important;
  min-height: 26px !important;
  padding: 4px 8px !important;
  border-color: rgba(90, 220, 210, 0.44) !important;
  background:
    linear-gradient(135deg, rgba(112, 245, 220, 0.12), rgba(0, 0, 0, 0.02) 46%),
    linear-gradient(180deg, rgba(7, 28, 35, 0.92), rgba(3, 9, 18, 0.92)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 10px rgba(60, 216, 202, 0.14) !important;
}

.invite-codes small {
  font-size: 8px !important;
}

.invite-strip b,
.invite-codes b,
.invite-codes > span:nth-child(2) b {
  color: #b7fff1 !important;
  font-size: 12px !important;
  text-shadow: 0 0 8px rgba(94, 255, 227, 0.26) !important;
}

.nav-shell {
  min-height: 54px !important;
  margin-top: 8px !important;
  padding: 8px 10px !important;
}

.lang-switcher {
  flex: 0 0 auto;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  color: #173224;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(29, 106, 74, 0.14);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.lang-switcher a {
  min-width: 30px;
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border-radius: 999px;
  color: rgba(23, 50, 36, 0.68);
  font-size: 11px;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
}

.lang-switcher a.is-active {
  color: #092018;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(235, 255, 247, 0.78)) padding-box,
    linear-gradient(120deg, rgba(0, 224, 112, 0.42), rgba(255, 47, 163, 0.28)) border-box;
  border: 1px solid transparent;
  box-shadow: 0 0 12px rgba(0, 224, 112, 0.12);
}

@media (max-width: 1180px) {
  .invite-strip {
    min-height: 58px !important;
    padding: 7px 14px !important;
    grid-template-columns: 92px minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  .invite-logo {
    width: 86px !important;
    max-height: 34px !important;
  }

  .invite-message {
    grid-column: 2 !important;
    grid-template-columns: minmax(0, 1fr) max-content !important;
    column-gap: 12px !important;
  }

  .invite-message::before {
    width: min(430px, 52vw) !important;
    height: 46px !important;
  }

  .invite-message strong {
    font-size: clamp(14px, 1.6vw, 18px) !important;
    line-height: 1.06 !important;
  }

  .invite-access {
    min-width: 204px !important;
  }

  .invite-codes {
    gap: 6px !important;
  }

  .invite-codes > span,
  .invite-codes > span:nth-child(2) {
    min-width: 98px !important;
    min-height: 24px !important;
    padding: 4px 7px !important;
  }

  .invite-strip b,
  .invite-codes b,
  .invite-codes > span:nth-child(2) b {
    font-size: 11px !important;
  }

  .nav-shell {
    min-height: 46px !important;
    margin-top: 0 !important;
    padding: 6px 9px !important;
  }

  .lang-switcher {
    min-height: 30px;
    gap: 3px;
    padding: 3px;
  }

  .lang-switcher a {
    min-width: 27px;
    min-height: 24px;
    padding: 4px 7px;
    font-size: 10px;
  }
}

@media (max-width: 760px) {
  .invite-strip {
    min-height: 92px !important;
    padding: 9px 12px !important;
    grid-template-columns: 76px minmax(0, 1fr) !important;
    gap: 9px !important;
  }

  .invite-logo {
    width: 70px !important;
    max-height: 30px !important;
  }

  .invite-message {
    grid-column: 2 !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "headline"
      "access" !important;
    row-gap: 6px !important;
  }

  .invite-message::before {
    left: -8px !important;
    top: 26px !important;
    width: min(330px, 78vw) !important;
    height: 54px !important;
    transform: none !important;
  }

  .invite-message strong {
    font-size: clamp(15px, 4.1vw, 19px) !important;
    line-height: 1.08 !important;
  }

  .invite-access {
    min-width: 0 !important;
    width: min(100%, 292px) !important;
    justify-items: start !important;
    gap: 4px !important;
  }

  .invite-subline {
    justify-self: start !important;
    font-size: 7.8px !important;
  }

  .invite-codes {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    justify-self: start !important;
    gap: 6px !important;
  }

  .invite-codes > span,
  .invite-codes > span:nth-child(2) {
    min-width: 0 !important;
    width: 100% !important;
    min-height: 25px !important;
    padding: 4px 7px !important;
  }

  .invite-codes small {
    font-size: 7px !important;
  }

  .invite-strip b,
  .invite-codes b,
  .invite-codes > span:nth-child(2) b {
    font-size: 10px !important;
  }

  .nav-shell {
    min-height: 44px !important;
    padding: 6px 8px !important;
  }
}

@media (max-width: 360px) {
  .invite-strip {
    grid-template-columns: 62px minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  .invite-logo {
    width: 58px !important;
  }

  .invite-message strong {
    font-size: 14px !important;
  }

  .invite-codes small {
    display: none !important;
  }

  .invite-codes > span,
  .invite-codes > span:nth-child(2) {
    justify-content: center !important;
  }
}

/* Manual language picker: top strip only. */
.invite-strip {
  grid-template-columns: clamp(90px, 9vw, 118px) minmax(0, 1fr) auto !important;
  column-gap: clamp(28px, 4vw, 58px) !important;
  padding-right: clamp(22px, 3vw, 44px) !important;
  overflow: visible !important;
}

.language-picker {
  grid-column: 3 !important;
  grid-row: 1 !important;
  position: relative;
  z-index: 12;
  margin-left: clamp(8px, 1.2vw, 18px);
  margin-right: 2px;
  align-self: center;
  justify-self: end;
}

.language-picker summary {
  min-width: 68px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 4px 10px 4px 4px;
  color: #eafff7;
  cursor: pointer;
  list-style: none;
  border: 1px solid rgba(96, 246, 218, 0.34);
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(0, 0, 0, 0.28)) padding-box,
    linear-gradient(130deg, rgba(90, 244, 220, 0.58), rgba(3, 16, 23, 0.86)) border-box;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 0 16px rgba(67, 244, 216, 0.14);
}

.language-picker summary::-webkit-details-marker {
  display: none;
}

.language-picker summary::marker {
  content: "";
}

.language-flag,
.language-current-flag {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  position: relative;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    inset 0 -8px 12px rgba(0, 0, 0, 0.18),
    0 0 0 1px rgba(255, 255, 255, 0.22);
  font-size: 21px;
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1;
}

.language-flag::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 32% 18%, rgba(255, 255, 255, 0.62), transparent 24%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.16), transparent 44%, rgba(0, 0, 0, 0.18));
  pointer-events: none;
}

.lang-en {
  color: transparent;
  background:
    linear-gradient(90deg, transparent 0 44%, #c8102e 44% 56%, transparent 56% 100%),
    linear-gradient(180deg, transparent 0 44%, #c8102e 44% 56%, transparent 56% 100%),
    linear-gradient(90deg, transparent 0 35%, #fff 35% 65%, transparent 65% 100%),
    linear-gradient(180deg, transparent 0 35%, #fff 35% 65%, transparent 65% 100%),
    linear-gradient(32deg, transparent 0 39%, #fff 39% 45%, #c8102e 45% 53%, #fff 53% 59%, transparent 59% 100%),
    linear-gradient(-32deg, transparent 0 39%, #fff 39% 45%, #c8102e 45% 53%, #fff 53% 59%, transparent 59% 100%),
    #012169;
  text-shadow: none;
}

.lang-de {
  background:
    linear-gradient(180deg, #111 0 33.333%, #dd1f29 33.333% 66.666%, #ffcf28 66.666% 100%);
}

.lang-fr {
  background:
    linear-gradient(90deg, #1b4fd8 0 33.333%, #fff 33.333% 66.666%, #ef3340 66.666% 100%);
}

.lang-zh {
  background: #de2910;
}

.lang-zh::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 8px;
  width: 8px;
  height: 8px;
  z-index: 1;
  background: #ffde00;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 56%, 79% 91%, 50% 69%, 21% 91%, 32% 56%, 2% 35%, 39% 35%);
  filter: drop-shadow(7px 1px 0 #ffde00) drop-shadow(10px 8px 0 #ffde00);
}

.language-chevron {
  display: inline-block;
  color: rgba(214, 255, 246, 0.86);
  font-size: 22px;
  line-height: 1;
  transform: translateY(-1px);
  transition: transform 180ms ease;
}

.language-picker[open] .language-chevron {
  transform: rotate(90deg) translateX(-1px);
}

.language-options {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 154px;
  display: grid;
  gap: 4px;
  padding: 7px;
  border: 1px solid rgba(96, 246, 218, 0.18);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(248, 255, 252, 0.96), rgba(232, 250, 242, 0.94)) padding-box,
    linear-gradient(145deg, rgba(83, 238, 218, 0.55), rgba(14, 26, 30, 0.25)) border-box;
  box-shadow:
    0 20px 44px rgba(3, 12, 18, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.language-options a {
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 8px;
  border: 1px solid transparent;
  border-radius: 13px;
  color: #173224;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

.language-options a:hover,
.language-options a:focus-visible,
.language-options a.is-active {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(215, 255, 242, 0.78));
  border-color: rgba(30, 186, 150, 0.26);
}

.language-options span,
.language-options .language-flag {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88);
  font-size: 15px;
  font-weight: 950;
  letter-spacing: 0;
}

.language-options b,
.invite-strip .language-options b {
  color: #173224 !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  text-shadow: none !important;
}

@media (max-width: 1180px) {
  .invite-strip {
    grid-template-columns: 88px minmax(0, 1fr) auto !important;
    column-gap: 34px !important;
    padding-right: 28px !important;
  }

  .language-picker summary {
    min-width: 62px;
    height: 40px;
  }

  .language-current-flag {
    width: 31px;
    height: 31px;
    font-size: 19px;
  }
}

@media (max-width: 760px) {
  .invite-strip {
    grid-template-columns: 70px minmax(0, 1fr) auto !important;
    column-gap: 18px !important;
    padding-right: 18px !important;
  }

  .invite-message {
    grid-column: 2 !important;
  }

  .language-picker {
    align-self: start;
    margin-top: 2px;
    margin-left: 8px;
    margin-right: 0;
  }

  .language-picker summary {
    min-width: 54px;
    height: 36px;
    padding-right: 7px;
  }

  .language-current-flag {
    width: 28px;
    height: 28px;
    font-size: 17px;
  }

  .language-chevron {
    font-size: 19px;
  }

  .language-options {
    width: 144px;
    top: calc(100% + 6px);
  }
}

@media (max-width: 360px) {
  .invite-strip {
    grid-template-columns: 58px minmax(0, 1fr) auto !important;
    column-gap: 12px !important;
    padding-right: 14px !important;
  }

  .language-picker summary {
    min-width: 49px;
    height: 34px;
  }

  .language-current-flag {
    width: 26px;
    height: 26px;
    font-size: 16px;
  }
}

/* Final language menu polish: compact, readable and above the navigation. */
.site-header {
  z-index: 5000 !important;
  overflow: visible !important;
}

.invite-strip {
  z-index: 30 !important;
}

.nav-shell {
  position: relative !important;
  z-index: 1 !important;
}

.language-picker {
  z-index: 6000 !important;
}

.language-picker summary {
  position: relative !important;
  z-index: 3 !important;
}

.language-options {
  z-index: 7000 !important;
  width: 74px !important;
  min-width: 74px !important;
  max-width: 74px !important;
  top: calc(100% + 10px) !important;
  right: 0 !important;
  gap: 5px !important;
  padding: 8px !important;
  border-color: rgba(76, 221, 191, 0.34) !important;
  background:
    linear-gradient(180deg, rgba(246, 255, 251, 0.98), rgba(221, 251, 241, 0.96)) padding-box,
    linear-gradient(145deg, rgba(67, 234, 204, 0.66), rgba(15, 29, 33, 0.18)) border-box !important;
  box-shadow:
    0 26px 58px rgba(6, 18, 24, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;
}

.language-options a {
  min-height: 32px !important;
  display: grid !important;
  grid-template-columns: 24px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 4px 6px !important;
  color: #123429 !important;
  background: transparent !important;
  border-radius: 12px !important;
  text-shadow: none !important;
  -webkit-text-fill-color: #123429 !important;
}

.language-options a:hover,
.language-options a:focus-visible,
.language-options a.is-active {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(197, 255, 236, 0.82)) !important;
}

.language-options b,
.invite-strip .language-options b,
.language-options a b {
  display: block !important;
  min-width: 0 !important;
  color: #123429 !important;
  -webkit-text-fill-color: #123429 !important;
  font-size: 11px !important;
  font-weight: 920 !important;
  line-height: 1 !important;
  text-align: left !important;
  text-shadow: none !important;
}

.language-options b:empty {
  display: none !important;
}

.language-options a:has(b:empty) {
  grid-template-columns: 1fr !important;
  justify-items: center !important;
}

.language-options .language-flag {
  width: 24px !important;
  height: 24px !important;
  font-size: 12px !important;
}

.language-current-flag {
  background-clip: border-box !important;
}

.lang-en {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

@media (max-width: 760px) {
  .language-options {
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
  }
}

/* Language picker arrow: down when closed, up when open. */
.language-chevron {
  width: 13px !important;
  height: 13px !important;
  display: inline-grid !important;
  place-items: center !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  transform: none !important;
}

.language-chevron::before {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid rgba(214, 255, 246, 0.9);
  border-bottom: 2px solid rgba(214, 255, 246, 0.9);
  border-radius: 1px;
  transform: rotate(45deg) translate(-1px, -1px);
}

.language-picker[open] .language-chevron {
  transform: none !important;
}

.language-picker[open] .language-chevron::before {
  transform: rotate(225deg) translate(-1px, -1px);
}

/* Stronger hero CTA and darker smoke behind the top headline. */
.invite-message strong {
  position: relative !important;
  z-index: 1 !important;
  display: inline-block !important;
  isolation: isolate !important;
  color: #ffffff !important;
  background: none !important;
  -webkit-text-fill-color: #ffffff !important;
  -webkit-text-stroke: 0.18px rgba(5, 18, 15, 0.66) !important;
  opacity: 1 !important;
  filter: none !important;
  text-shadow:
    0 0 1px rgba(3, 16, 14, 0.78),
    0 1px 1px rgba(0, 0, 0, 0.46),
    0 8px 18px rgba(0, 0, 0, 0.42) !important;
}

.invite-message strong::before {
  content: "" !important;
  position: absolute !important;
  z-index: -1 !important;
  inset: -11px -24px -12px !important;
  border-radius: 999px !important;
  background:
    radial-gradient(ellipse at 48% 52%, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.32) 40%, rgba(0, 0, 0, 0.16) 62%, transparent 78%) !important;
  filter: blur(10px) !important;
  opacity: 1 !important;
  pointer-events: none !important;
}

.invite-message strong::after {
  content: attr(data-text) !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  color: transparent !important;
  background:
    linear-gradient(96deg, #ffffff 0%, #f9fffd 20%, #a9ffe5 47%, #ffd5ee 76%, #ffffff 100%) !important;
  background-size: 130% auto !important;
  background-position: center !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  -webkit-text-stroke: 0.22px rgba(5, 18, 15, 0.68) !important;
  text-shadow: none !important;
  pointer-events: none !important;
}

.hero-copy > .hero-actions {
  position: relative !important;
  width: fit-content !important;
  max-width: 100% !important;
  display: inline-flex !important;
  margin-top: 34px !important;
  isolation: isolate !important;
}

.hero-copy > .hero-actions::before {
  content: "" !important;
  position: absolute !important;
  z-index: -1 !important;
  left: 50% !important;
  top: 50% !important;
  width: 160% !important;
  height: 150% !important;
  transform: translate(-50%, -50%) !important;
  border-radius: 999px !important;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255, 47, 163, 0.74), rgba(255, 47, 163, 0.36) 30%, rgba(255, 47, 163, 0.16) 53%, transparent 76%),
    radial-gradient(ellipse at 50% 50%, rgba(255, 132, 218, 0.34), transparent 68%) !important;
  filter: blur(22px) !important;
  opacity: 1 !important;
  pointer-events: none !important;
}

.hero-copy > .hero-actions .button-secondary {
  position: relative !important;
  z-index: 1 !important;
  color: #13231c !important;
  background:
    linear-gradient(135deg, #ffffff, #fff8fc 54%, #fffefd) padding-box,
    linear-gradient(125deg, rgba(255, 47, 163, 0.95), rgba(255, 137, 214, 0.55), rgba(255, 47, 163, 0.78)) border-box !important;
  border: 1.5px solid transparent !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 0 0 1px rgba(255, 47, 163, 0.18),
    0 0 24px rgba(255, 47, 163, 0.28),
    0 14px 34px rgba(103, 18, 68, 0.16) !important;
}

.hero-copy > .hero-actions .button-secondary::before,
.hero-copy > .hero-actions .button-secondary::after {
  content: none !important;
}

.hero-copy > .hero-actions .button-secondary:hover {
  transform: translateY(-2px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 0 0 1px rgba(255, 47, 163, 0.3),
    0 0 32px rgba(255, 47, 163, 0.38),
    0 18px 42px rgba(103, 18, 68, 0.2) !important;
}

/* Mobile rescue layer: prevent horizontal overflow from crushing the layout. */
html,
body {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

body {
  min-width: 0 !important;
}

main,
section,
figure,
article,
div,
header,
footer {
  min-width: 0;
}

h1,
h2,
h3,
p,
li,
span,
strong,
a {
  overflow-wrap: break-word !important;
  word-break: normal !important;
}

.site-header,
.invite-strip,
.nav-shell,
.hero,
.story,
.section,
.cards-section,
.signup-hero {
  max-width: 100vw !important;
}

.calculator-widget {
  right: max(14px, env(safe-area-inset-right)) !important;
  bottom: max(16px, env(safe-area-inset-bottom)) !important;
  left: auto !important;
  max-width: calc(100vw - 28px) !important;
}

.calculator-fab {
  max-width: calc(100vw - 28px) !important;
  white-space: nowrap !important;
  transform: none !important;
}

.calculator-panel {
  max-width: calc(100vw - 24px) !important;
}

@media (max-width: 760px) {
  section[id] {
    scroll-margin-top: 178px !important;
  }

  .site-header {
    width: 100% !important;
    max-width: 100vw !important;
  }

  .invite-strip {
    width: 100% !important;
    min-height: 124px !important;
    margin: 0 !important;
    padding: 12px 10px 11px !important;
    display: grid !important;
    grid-template-columns: 86px minmax(0, 1fr) 58px !important;
    grid-template-areas: "logo message lang" !important;
    align-items: center !important;
    column-gap: 8px !important;
    row-gap: 5px !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-radius: 0 !important;
    clip-path: none !important;
    overflow: hidden !important;
  }

  .invite-logo {
    grid-area: logo !important;
    width: 82px !important;
    max-width: 82px !important;
    justify-self: start !important;
  }

  .invite-message {
    grid-area: message !important;
    width: 100% !important;
    justify-self: stretch !important;
    justify-content: stretch !important;
    text-align: left !important;
    gap: 5px !important;
  }

  .invite-message strong {
    width: 100% !important;
    font-size: clamp(17px, 5.2vw, 22px) !important;
    line-height: 1.05 !important;
    letter-spacing: 0 !important;
    text-align: left !important;
  }

  .invite-message strong::before {
    inset: -7px -10px -8px !important;
  }

  .invite-subline {
    max-width: 100% !important;
    font-size: 9px !important;
    letter-spacing: 0.08em !important;
    text-align: left !important;
  }

  .invite-access,
  .invite-codes {
    width: 100% !important;
    min-width: 0 !important;
  }

  .invite-codes {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    justify-content: stretch !important;
  }

  .invite-codes > span {
    min-width: 0 !important;
    width: 100% !important;
    min-height: 30px !important;
    padding: 4px 7px !important;
    gap: 4px !important;
  }

  .invite-codes small {
    font-size: 7px !important;
    letter-spacing: 0 !important;
  }

  .invite-strip b {
    font-size: 13px !important;
  }

  .language-picker {
    grid-area: lang !important;
    justify-self: end !important;
    align-self: start !important;
  }

  .language-picker summary {
    min-width: 52px !important;
    width: 52px !important;
    height: 38px !important;
    padding: 4px 5px !important;
  }

  .language-current-flag {
    width: 28px !important;
    height: 28px !important;
  }

  .language-options {
    right: 0 !important;
    top: calc(100% + 8px) !important;
  }

  .invite-copy-hit {
    display: none !important;
  }

  .nav-shell {
    width: 100% !important;
    max-width: 100vw !important;
    min-height: 58px !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-radius: 0 !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .nav-shell::-webkit-scrollbar {
    display: none !important;
  }

  .brand,
  .nav-links,
  .nav-links a,
  .nav-link-soft,
  .nav-cta {
    flex: 0 0 auto !important;
  }

  .brand img {
    width: 104px !important;
  }

  .nav-links {
    order: initial !important;
    width: auto !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
  }

  .nav-links a,
  .nav-link-soft,
  .nav-cta {
    min-height: 40px !important;
    padding: 8px 13px !important;
    white-space: nowrap !important;
    font-size: 14px !important;
  }

  .nav-community {
    min-width: auto !important;
    margin-left: 0 !important;
  }

  .nav-solution {
    width: auto !important;
    min-width: 142px !important;
  }

  .hero {
    width: 100% !important;
    min-height: auto !important;
    margin-top: 0 !important;
    padding: 42px 18px 58px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 24px !important;
    overflow: hidden !important;
  }

  .hero-copy,
  .story-copy,
  .section-heading {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .hero h1 {
    max-width: 100% !important;
    font-size: clamp(34px, 10.4vw, 42px) !important;
    line-height: 1.04 !important;
  }

  .hero-text {
    max-width: 100% !important;
    font-size: 17px !important;
  }

  .hero-copy > .hero-actions {
    width: min(100%, 360px) !important;
    max-width: 100% !important;
    margin: 34px auto 0 !important;
    display: flex !important;
  }

  .hero-copy > .hero-actions .button-secondary {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 56px !important;
    white-space: normal !important;
    text-align: center !important;
    line-height: 1.15 !important;
  }

  .hero-art {
    width: 100% !important;
    max-width: 560px !important;
    margin: 0 auto !important;
  }

  .hero-art img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 10 !important;
    object-fit: cover !important;
  }

  .hero-art-cta,
  .hero-art .code-panel {
    width: 100% !important;
    max-width: 100% !important;
  }

  .section,
  .story,
  .path-section,
  .safety,
  .cards-section,
  .legal-notice,
  .final-cta {
    width: 100% !important;
    max-width: 100vw !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    overflow: hidden !important;
  }

  .story {
    display: flex !important;
    flex-direction: column !important;
    gap: 28px !important;
  }

  .section-heading h2,
  .story-copy h2 {
    max-width: 100% !important;
    font-size: clamp(30px, 9vw, 38px) !important;
    line-height: 1.05 !important;
  }

  .simple-grid,
  .doc-grid,
  .dictionary,
  .cards-grid {
    width: 100% !important;
    max-width: 100% !important;
  }

  .mini-card,
  .doc-card,
  .dictionary article,
  .solulu-card,
  .quote-note {
    width: 100% !important;
    max-width: 100% !important;
  }

  .quote-note,
  .legal-notice,
  .home-legal,
  .final-cta {
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  .legal-notice.home-legal {
    width: calc(100% - 36px) !important;
    max-width: calc(100vw - 36px) !important;
    margin-left: 18px !important;
    margin-right: 18px !important;
  }

  .calculator-widget {
    position: fixed !important;
    right: max(12px, env(safe-area-inset-right)) !important;
    bottom: max(14px, env(safe-area-inset-bottom)) !important;
    left: auto !important;
    max-width: calc(100vw - 24px) !important;
  }

  .calculator-fab {
    min-width: 124px !important;
    max-width: calc(100vw - 24px) !important;
    min-height: 48px !important;
    padding: 10px 17px !important;
    font-size: 15px !important;
  }

  .calculator-panel {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    bottom: calc(max(14px, env(safe-area-inset-bottom)) + 62px) !important;
    width: auto !important;
    max-width: none !important;
    max-height: calc(100dvh - 92px) !important;
  }
}

@media (max-width: 380px) {
  .invite-strip {
    grid-template-columns: 76px minmax(0, 1fr) 50px !important;
    padding-inline: 8px !important;
  }

  .invite-logo {
    width: 74px !important;
  }

  .invite-message strong {
    font-size: 17px !important;
  }

  .invite-codes small {
    display: none !important;
  }

  .invite-codes > span {
    justify-content: center !important;
  }

  .invite-strip b {
    font-size: 12px !important;
  }

  .language-picker summary {
    min-width: 48px !important;
    width: 48px !important;
  }
}

/* Mobile language menu: readable overlay, never clipped by the nav bar. */
@media (max-width: 760px) {
  .site-header,
  .invite-strip {
    overflow: visible !important;
  }

  .nav-shell {
    z-index: 1 !important;
  }

  .language-picker {
    position: relative !important;
    z-index: 9000 !important;
  }

  .language-picker summary {
    border-radius: 999px !important;
  }

  .language-options {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    width: 96px !important;
    min-width: 96px !important;
    max-width: 96px !important;
    max-height: 206px !important;
    padding: 8px !important;
    display: grid !important;
    gap: 6px !important;
    overflow: visible !important;
    border-radius: 20px !important;
    z-index: 9500 !important;
    box-shadow:
      0 20px 42px rgba(2, 14, 15, 0.28),
      0 0 0 1px rgba(40, 173, 148, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.88) !important;
  }

  .language-options a,
  .language-options a:link,
  .language-options a:visited {
    min-width: 0 !important;
    width: 100% !important;
    min-height: 38px !important;
    padding: 5px 7px !important;
    display: grid !important;
    grid-template-columns: 28px 1fr !important;
    align-items: center !important;
    justify-items: start !important;
    gap: 8px !important;
    color: #123429 !important;
    -webkit-text-fill-color: #123429 !important;
    text-align: left !important;
    white-space: nowrap !important;
    line-height: 1 !important;
  }

  .language-options .language-flag {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
  }

  .language-options b,
  .invite-strip .language-options b,
  .language-options a b {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    color: #123429 !important;
    -webkit-text-fill-color: #123429 !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
    text-align: left !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
  }
}

/* SoluluPay SEO section: richer copy without becoming a wall of text. */
.pay-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 14%, rgba(255, 47, 163, 0.09), transparent 24%),
    radial-gradient(circle at 88% 6%, rgba(0, 224, 112, 0.12), transparent 26%),
    linear-gradient(180deg, #fffefa, #f3fff8 100%);
}

.pay-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.32;
  background:
    linear-gradient(90deg, rgba(29, 106, 74, 0.05) 1px, transparent 1px),
    linear-gradient(180deg, rgba(29, 106, 74, 0.04) 1px, transparent 1px);
  background-size: 38px 38px;
}

.pay-section > * {
  position: relative;
  z-index: 1;
}

.pay-layout {
  width: min(1120px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 24px;
  align-items: stretch;
}

.pay-lead-card,
.pay-feature-grid article,
.pay-seo-copy {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(246, 255, 249, 0.91)) padding-box,
    linear-gradient(125deg, rgba(255, 47, 163, 0.2), rgba(0, 224, 112, 0.24), rgba(255, 202, 56, 0.18)) border-box;
  border: 1px solid transparent;
  border-radius: 8px;
  box-shadow: 0 16px 42px rgba(23, 23, 23, 0.07);
}

.pay-lead-card {
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.pay-kicker {
  width: fit-content;
  margin-bottom: 14px;
  padding: 7px 11px;
  color: #173224;
  background: rgba(156, 235, 201, 0.38);
  border: 1px solid rgba(29, 106, 74, 0.16);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pay-lead-card h3 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.05;
}

.pay-lead-card p,
.pay-feature-grid p,
.pay-seo-copy p {
  color: var(--soft-ink);
  line-height: 1.7;
}

.pay-lead-card p {
  margin: 18px 0 0;
  font-size: 16px;
}

.pay-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.pay-feature-grid article {
  min-height: 230px;
  padding: 22px;
}

.pay-icon {
  width: 46px;
  height: 46px;
  margin-bottom: 16px;
  display: grid;
  place-items: center;
  color: #123725;
  background:
    radial-gradient(circle at 32% 22%, rgba(255, 255, 255, 0.92), transparent 32%),
    linear-gradient(135deg, #f9f1dc, #dffff0 46%, #f8ddeb);
  border: 1px solid rgba(29, 106, 74, 0.18);
  border-radius: 50%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 10px 24px rgba(29, 106, 74, 0.1);
  font-size: 20px;
  font-weight: 950;
}

.pay-feature-grid h3 {
  font-size: 19px;
}

.pay-feature-grid p {
  margin: 12px 0 0;
  font-size: 15px;
}

.pay-seo-copy {
  width: min(1120px, 100%);
  margin: 18px auto 0;
  padding: 26px 28px;
  display: grid;
  grid-template-columns: 0.82fr 1fr 1fr;
  gap: 22px;
  align-items: center;
  background:
    radial-gradient(circle at 5% 50%, rgba(255, 47, 163, 0.12), transparent 28%),
    radial-gradient(circle at 38% 0%, rgba(0, 224, 112, 0.13), transparent 30%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(246, 255, 249, 0.93)) padding-box,
    linear-gradient(125deg, rgba(255, 47, 163, 0.26), rgba(0, 224, 112, 0.26), rgba(255, 202, 56, 0.2)) border-box;
}

.pay-seo-copy h3 {
  margin: 0;
  color: #173224;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1.08;
}

.pay-seo-copy p {
  margin: 0;
  font-size: 15.5px;
}

.token-note {
  max-width: 820px;
  margin: 14px auto 0;
  padding: 12px 14px;
  color: #24483a;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(245, 255, 249, 0.86)) padding-box,
    linear-gradient(125deg, rgba(255, 47, 163, 0.18), rgba(0, 224, 112, 0.2)) border-box;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.55;
}

.signup-card-section {
  padding-top: 30px;
  padding-bottom: 26px;
}

.signup-card-section .section-heading {
  margin-bottom: 18px;
}

.signup-card-section .section-heading h2 {
  max-width: 820px;
  font-size: clamp(28px, 3.1vw, 40px);
}

.signup-card-section .section-subtitle {
  max-width: 840px;
  margin-top: 12px;
}

.signup-card-section .soft-italic {
  max-width: 760px;
  margin-top: 10px;
}

.signup-card-section .token-note {
  display: none;
}

.signup-cards-grid {
  max-width: 820px;
  gap: 10px;
}

.signup-cards-grid .solulu-card img {
  padding: 10px 14px;
  aspect-ratio: 1 / 0.58;
}

.signup-cards-grid .card-copy {
  padding: 10px 8px;
}

.signup-cards-grid .card-copy h3 {
  font-size: 15px;
}

.signup-cards-grid .card-copy h3 span {
  font-size: 10px;
}

.signup-cards-grid .performance-line {
  min-height: 0;
  margin: 7px 0 0;
  font-size: 10.5px;
  line-height: 1.28;
}

.signup-card-actions {
  width: min(760px, 100%);
  margin: 18px auto 0;
  justify-content: center;
}

.signup-steps {
  padding-top: 24px;
}

.pay-future-card {
  width: min(1120px, 100%);
  margin: 18px auto 0;
  padding: 28px;
  background:
    radial-gradient(circle at 9% 15%, rgba(255, 47, 163, 0.1), transparent 28%),
    radial-gradient(circle at 92% 18%, rgba(0, 224, 112, 0.13), transparent 30%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(244, 255, 249, 0.94)) padding-box,
    linear-gradient(125deg, rgba(255, 47, 163, 0.22), rgba(0, 224, 112, 0.24), rgba(255, 202, 56, 0.2)) border-box;
  border: 1px solid transparent;
  border-radius: 8px;
  box-shadow: 0 16px 42px rgba(23, 23, 23, 0.07);
}

.pay-future-card h3 {
  max-width: 920px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.08;
}

.pay-future-card p:not(.eyebrow) {
  max-width: 980px;
  color: var(--soft-ink);
  font-size: 16px;
  line-height: 1.75;
}

@media (max-width: 900px) {
  .pay-layout,
  .pay-seo-copy {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .pay-section {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }

  .pay-layout,
  .pay-feature-grid,
  .pay-seo-copy {
    width: 100% !important;
    max-width: 100% !important;
  }

  .pay-feature-grid {
    grid-template-columns: 1fr;
  }

  .pay-lead-card,
  .pay-feature-grid article,
  .pay-seo-copy,
  .pay-future-card {
    padding: 20px !important;
  }

  .pay-feature-grid article {
    min-height: 0;
  }
}

/* Prevent mobile horizontal page drift while keeping the pill nav scrollable inside itself. */
@media (max-width: 760px) {
  html,
  body {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .site-header,
  main,
  .nav-shell,
  .invite-strip {
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }

  .nav-shell {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    contain: paint !important;
    overscroll-behavior-x: contain !important;
  }

  .nav-links {
    flex: 0 0 auto !important;
  }
}

/* Top access banner - polished neural neon version. */
.invite-strip {
  width: 100% !important;
  max-width: 100vw !important;
  min-height: 138px !important;
  margin: 0 !important;
  padding: 24px clamp(34px, 4vw, 68px) !important;
  display: grid !important;
  grid-template-columns: clamp(170px, 13vw, 230px) minmax(0, 1fr) clamp(92px, 7vw, 122px) !important;
  align-items: center !important;
  column-gap: clamp(24px, 3vw, 58px) !important;
  overflow: visible !important;
  isolation: isolate !important;
  color: #f8fffd !important;
  background:
    radial-gradient(circle at 7% 20%, rgba(28, 242, 242, 0.35), transparent 23%),
    radial-gradient(circle at 94% 78%, rgba(255, 36, 205, 0.46), transparent 28%),
    linear-gradient(90deg, #062f39 0%, #07121c 24%, #090915 58%, #19061e 100%) !important;
  border: 0 !important;
  border-bottom: 2px solid rgba(65, 255, 230, 0.72) !important;
  box-shadow:
    inset 0 -1px 0 rgba(255, 72, 210, 0.42),
    0 7px 22px rgba(6, 31, 34, 0.18) !important;
}

.invite-strip::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -2 !important;
  opacity: 0.92 !important;
  background-image:
    url("data:image/svg+xml,%3Csvg width='1920' height='138' viewBox='0 0 1920 138' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg stroke='%2335f4ff' stroke-opacity='.32' stroke-width='1.3'%3E%3Cpath d='M0 105 65 62 126 80 205 33 286 88 358 48 446 78 526 37 620 67'/%3E%3Cpath d='M28 27 126 80 238 96 286 88 379 112 446 78'/%3E%3Cpath d='M65 62 126 20 205 33 286 16 358 48'/%3E%3C/g%3E%3Cg fill='%235dfdff' fill-opacity='.9'%3E%3Ccircle cx='65' cy='62' r='4'/%3E%3Ccircle cx='126' cy='80' r='5'/%3E%3Ccircle cx='205' cy='33' r='4'/%3E%3Ccircle cx='286' cy='88' r='5'/%3E%3Ccircle cx='358' cy='48' r='4'/%3E%3Ccircle cx='446' cy='78' r='4'/%3E%3Ccircle cx='526' cy='37' r='5'/%3E%3C/g%3E%3Cg stroke='%23ff43df' stroke-opacity='.35' stroke-width='1.3'%3E%3Cpath d='M1268 88 1356 38 1440 76 1520 28 1602 88 1692 45 1776 96 1882 30 1920 62'/%3E%3Cpath d='M1328 118 1440 76 1510 106 1602 88 1680 116 1776 96 1840 124'/%3E%3Cpath d='M1356 38 1464 18 1520 28 1596 12 1692 45'/%3E%3C/g%3E%3Cg fill='%23ff55ee' fill-opacity='.9'%3E%3Ccircle cx='1356' cy='38' r='4'/%3E%3Ccircle cx='1440' cy='76' r='5'/%3E%3Ccircle cx='1520' cy='28' r='4'/%3E%3Ccircle cx='1602' cy='88' r='5'/%3E%3Ccircle cx='1692' cy='45' r='4'/%3E%3Ccircle cx='1776' cy='96' r='4'/%3E%3Ccircle cx='1882' cy='30' r='5'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important;
  background-size: cover !important;
  background-position: center !important;
  pointer-events: none !important;
}

.invite-strip::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  background:
    linear-gradient(90deg, rgba(16, 234, 255, 0.16), transparent 25%, transparent 70%, rgba(255, 45, 211, 0.2)),
    radial-gradient(ellipse at 50% 55%, rgba(0, 0, 0, 0.18), transparent 40%) !important;
  pointer-events: none !important;
}

.invite-logo {
  grid-column: 1 !important;
  width: clamp(142px, 11vw, 188px) !important;
  max-height: none !important;
  justify-self: start !important;
  align-self: center !important;
  filter:
    drop-shadow(0 2px 0 rgba(255, 255, 255, 0.18))
    drop-shadow(0 0 12px rgba(255, 47, 163, 0.35)) !important;
}

.invite-message {
  grid-column: 2 !important;
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) max-content !important;
  align-items: center !important;
  column-gap: clamp(22px, 3.2vw, 62px) !important;
  width: 100% !important;
  min-width: 0 !important;
}

.invite-message::before {
  content: none !important;
}

.invite-message strong {
  position: relative !important;
  justify-self: center !important;
  display: inline-block !important;
  width: auto !important;
  max-width: 100% !important;
  color: #f9fffd !important;
  -webkit-text-fill-color: #f9fffd !important;
  background: none !important;
  font-family: Inter, Arial, sans-serif !important;
  font-size: clamp(27px, 2.25vw, 39px) !important;
  font-weight: 850 !important;
  line-height: 1.04 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.42),
    0 0 18px rgba(255, 255, 255, 0.14) !important;
  -webkit-text-stroke: 0.18px rgba(0, 0, 0, 0.42) !important;
}

.invite-message strong::before {
  content: "" !important;
  position: absolute !important;
  left: 22% !important;
  right: 22% !important;
  bottom: -22px !important;
  height: 4px !important;
  border-radius: 999px !important;
  background:
    linear-gradient(90deg, transparent, rgba(47, 248, 255, 0.96) 22%, transparent 49%, rgba(255, 60, 221, 0.95) 74%, transparent) !important;
  box-shadow:
    0 0 13px rgba(49, 246, 255, 0.65),
    0 0 18px rgba(255, 54, 218, 0.55) !important;
}

.invite-message strong::after {
  content: none !important;
}

.invite-access {
  justify-self: end !important;
  display: grid !important;
  justify-items: center !important;
  gap: 10px !important;
  min-width: 420px !important;
}

.invite-subline {
  color: rgba(255, 255, 255, 0.92) !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.18) !important;
}

.invite-codes {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  width: auto !important;
}

.invite-codes > span,
.invite-codes > span:nth-child(2) {
  min-width: 184px !important;
  min-height: 54px !important;
  padding: 0 18px !important;
  display: grid !important;
  grid-template-columns: 56px 1fr !important;
  align-items: center !important;
  gap: 14px !important;
  overflow: hidden !important;
  border-radius: 11px !important;
  background:
    linear-gradient(180deg, rgba(18, 24, 37, 0.76), rgba(5, 10, 18, 0.82)) padding-box,
    linear-gradient(135deg, rgba(58, 238, 255, 0.9), rgba(255, 68, 219, 0.44)) border-box !important;
  border: 1.4px solid transparent !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 18px rgba(45, 234, 255, 0.32) !important;
}

.invite-codes > span:nth-child(2) {
  background:
    linear-gradient(180deg, rgba(20, 17, 34, 0.78), rgba(8, 6, 17, 0.84)) padding-box,
    linear-gradient(135deg, rgba(255, 65, 219, 0.96), rgba(255, 137, 233, 0.36)) border-box !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 20px rgba(255, 61, 219, 0.36) !important;
}

.invite-codes small {
  position: relative !important;
  color: rgba(255, 255, 255, 0.84) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.invite-codes small::after {
  content: "" !important;
  position: absolute !important;
  top: -16px !important;
  bottom: -16px !important;
  right: -11px !important;
  width: 1px !important;
  background: rgba(255, 255, 255, 0.28) !important;
}

.invite-strip b,
.invite-codes b,
.invite-codes > span:nth-child(2) b {
  color: #f8fffd !important;
  -webkit-text-fill-color: #f8fffd !important;
  font-size: 22px !important;
  font-weight: 880 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-shadow:
    0 0 10px rgba(255, 255, 255, 0.22),
    0 1px 8px rgba(0, 0, 0, 0.55) !important;
}

.language-picker {
  grid-column: 3 !important;
  justify-self: end !important;
  align-self: center !important;
  margin: 0 !important;
  z-index: 20 !important;
}

.language-picker summary {
  min-width: 112px !important;
  height: 74px !important;
  gap: 14px !important;
  padding: 8px 18px 8px 10px !important;
  border-radius: 999px !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.02)) padding-box,
    linear-gradient(130deg, rgba(255, 255, 255, 0.26), rgba(255, 71, 223, 0.4)) border-box !important;
  border: 1.4px solid transparent !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 0 18px rgba(255, 58, 216, 0.18) !important;
}

.language-current-flag {
  width: 50px !important;
  height: 50px !important;
  border-radius: 999px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    0 0 14px rgba(255, 255, 255, 0.18) !important;
}

.language-chevron {
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 30px !important;
  line-height: 1 !important;
  transform: rotate(90deg) !important;
}

.language-picker[open] .language-chevron {
  transform: rotate(-90deg) !important;
}

@media (max-width: 1280px) {
  .invite-strip {
    min-height: 112px !important;
    padding: 18px 28px !important;
    grid-template-columns: 138px minmax(0, 1fr) 88px !important;
    column-gap: 22px !important;
  }

  .invite-logo {
    width: 128px !important;
  }

  .invite-message {
    column-gap: 18px !important;
  }

  .invite-message strong {
    font-size: clamp(22px, 2.2vw, 30px) !important;
  }

  .invite-access {
    min-width: 338px !important;
  }

  .invite-subline {
    font-size: 13px !important;
  }

  .invite-codes {
    gap: 10px !important;
  }

  .invite-codes > span,
  .invite-codes > span:nth-child(2) {
    min-width: 146px !important;
    min-height: 46px !important;
    grid-template-columns: 42px 1fr !important;
    gap: 10px !important;
    padding: 0 12px !important;
  }

  .invite-codes small {
    font-size: 11px !important;
  }

  .invite-strip b,
  .invite-codes b,
  .invite-codes > span:nth-child(2) b {
    font-size: 18px !important;
  }

  .language-picker summary {
    min-width: 84px !important;
    height: 58px !important;
    gap: 8px !important;
    padding: 6px 12px 6px 7px !important;
  }

  .language-current-flag {
    width: 40px !important;
    height: 40px !important;
  }
}

@media (max-width: 760px) {
  .invite-strip {
    min-height: 132px !important;
    padding: 14px 12px 12px !important;
    grid-template-columns: 74px minmax(0, 1fr) 58px !important;
    grid-template-areas:
      "logo headline lang"
      "codes codes codes" !important;
    column-gap: 10px !important;
    row-gap: 8px !important;
  }

  .invite-logo {
    grid-area: logo !important;
    width: 74px !important;
  }

  .invite-message {
    display: contents !important;
  }

  .invite-message strong {
    grid-area: headline !important;
    align-self: center !important;
    justify-self: start !important;
    font-size: clamp(20px, 6vw, 27px) !important;
    line-height: 1.02 !important;
    text-align: left !important;
  }

  .invite-message strong::before {
    left: 0 !important;
    right: 18% !important;
    bottom: -11px !important;
    height: 3px !important;
  }

  .invite-access {
    grid-area: codes !important;
    width: 100% !important;
    min-width: 0 !important;
    justify-self: stretch !important;
    justify-items: center !important;
    gap: 6px !important;
  }

  .invite-subline {
    font-size: 10px !important;
  }

  .invite-codes {
    width: min(100%, 342px) !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .invite-codes > span,
  .invite-codes > span:nth-child(2) {
    min-width: 0 !important;
    width: 100% !important;
    min-height: 38px !important;
    grid-template-columns: 36px 1fr !important;
    gap: 8px !important;
    padding: 0 9px !important;
  }

  .invite-codes small {
    font-size: 9px !important;
  }

  .invite-strip b,
  .invite-codes b,
  .invite-codes > span:nth-child(2) b {
    font-size: 15px !important;
  }

  .language-picker {
    grid-area: lang !important;
    justify-self: end !important;
    align-self: center !important;
  }

  .language-picker summary {
    min-width: 54px !important;
    width: 54px !important;
    height: 42px !important;
    gap: 3px !important;
    padding: 4px 5px !important;
  }

  .language-current-flag {
    width: 30px !important;
    height: 30px !important;
  }

  .language-chevron {
    font-size: 18px !important;
  }
}

/* Final nav hierarchy: project CTA on the right, official site as a quiet utility link. */
.nav-links .nav-solution {
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 34px !important;
  margin: 0 !important;
  padding: 7px 12px !important;
  display: inline-flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  color: rgba(23, 50, 36, 0.74) !important;
  background: rgba(255, 255, 255, 0.38) !important;
  border: 1px solid rgba(29, 106, 74, 0.12) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}

.nav-links .nav-solution::before,
.nav-links .nav-solution::after {
  content: none !important;
}

.nav-links .nav-solution span {
  font-size: 11px !important;
  font-weight: 740 !important;
  line-height: 1 !important;
}

.nav-links .nav-solution small {
  margin-top: 2px;
  color: rgba(23, 50, 36, 0.48) !important;
  font-size: 8px !important;
  font-weight: 620 !important;
  line-height: 1 !important;
}

.nav-community {
  margin-left: auto !important;
  min-width: 178px !important;
  font-weight: 780 !important;
}

@media (max-width: 760px) {
  .nav-links .nav-solution {
    min-height: 38px !important;
    padding: 7px 10px !important;
  }

  .nav-links .nav-solution span {
    font-size: 10px !important;
  }

  .nav-links .nav-solution small {
    font-size: 7.5px !important;
  }

  .nav-community {
    margin-left: 0 !important;
    min-width: auto !important;
  }
}

/* Banner refinement: slimmer header, quieter codes, one visible language arrow. */
.lang-ru {
  background:
    linear-gradient(180deg, #fff 0 33.333%, #2457d6 33.333% 66.666%, #d52b1e 66.666% 100%) !important;
}

.invite-strip {
  min-height: 112px !important;
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

.invite-access {
  min-width: 286px !important;
  gap: 6px !important;
}

.invite-subline {
  font-size: 10.5px !important;
  font-weight: 780 !important;
  letter-spacing: 0.08em !important;
  opacity: 0.78 !important;
}

.invite-codes {
  gap: 8px !important;
}

.invite-codes > span,
.invite-codes > span:nth-child(2) {
  min-width: 128px !important;
  min-height: 38px !important;
  grid-template-columns: 36px 1fr !important;
  gap: 8px !important;
  padding: 0 10px !important;
  border-radius: 9px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 0 12px rgba(45, 234, 255, 0.22) !important;
}

.invite-codes > span:nth-child(2) {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 0 13px rgba(255, 61, 219, 0.24) !important;
}

.invite-codes small {
  font-size: 9.5px !important;
}

.invite-strip b,
.invite-codes b,
.invite-codes > span:nth-child(2) b {
  font-size: 15px !important;
  font-weight: 820 !important;
}

.language-picker summary {
  min-width: 82px !important;
  height: 52px !important;
  gap: 7px !important;
  padding: 6px 11px 6px 7px !important;
}

.language-current-flag {
  width: 34px !important;
  height: 34px !important;
}

.language-chevron {
  display: inline-block !important;
  font-size: 20px !important;
  transform: rotate(90deg) !important;
}

.language-picker[open] .language-chevron {
  transform: rotate(-90deg) !important;
}

.language-picker summary::-webkit-details-marker,
.language-picker summary::marker {
  display: none !important;
  content: "" !important;
}

.language-picker summary {
  appearance: none !important;
  -webkit-appearance: none !important;
}

.language-chevron::before,
.language-chevron::after {
  content: none !important;
  display: none !important;
}

@media (max-width: 1280px) {
  .invite-strip {
    min-height: 96px !important;
  }

  .invite-access {
    min-width: 276px !important;
  }

  .invite-codes > span,
  .invite-codes > span:nth-child(2) {
    min-width: 122px !important;
    min-height: 36px !important;
  }

  .invite-strip b,
  .invite-codes b,
  .invite-codes > span:nth-child(2) b {
    font-size: 14px !important;
  }

  .language-picker summary {
    min-width: 70px !important;
    height: 46px !important;
  }

  .language-current-flag {
    width: 31px !important;
    height: 31px !important;
  }
}

@media (max-width: 760px) {
  .invite-strip {
    min-height: 116px !important;
  }

  .invite-subline {
    font-size: 8.5px !important;
  }

  .invite-codes > span,
  .invite-codes > span:nth-child(2) {
    min-height: 34px !important;
  }

  .invite-strip b,
  .invite-codes b,
  .invite-codes > span:nth-child(2) b {
    font-size: 13px !important;
  }

  .language-picker summary {
    width: 48px !important;
    min-width: 48px !important;
    height: 36px !important;
  }

  .language-current-flag {
    width: 26px !important;
    height: 26px !important;
  }
}

/* Final readability pass for the small Code / UID labels in the top banner. */
.invite-codes small {
  color: rgba(226, 255, 250, 0.88) !important;
  opacity: 1 !important;
  font-weight: 800 !important;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.78),
    0 0 7px rgba(73, 255, 224, 0.34) !important;
}

/* v123 — targeted header, language menu and production CTA corrections. */
:root {
  --solulu-ui-v123: 1;
}

/* Keep the language menu fully sized on desktop and mobile. */
.language-picker {
  position: relative !important;
  z-index: 9800 !important;
}

.language-options {
  width: 196px !important;
  min-width: 196px !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
  padding: 10px !important;
  gap: 6px !important;
  overflow: visible !important;
  border-radius: 20px !important;
}

.language-options a,
.language-options a:link,
.language-options a:visited {
  width: 100% !important;
  min-height: 48px !important;
  grid-template-columns: 36px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 7px 10px !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
}

.language-options .language-flag {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
}

.language-options b,
.invite-strip .language-options b,
.language-options a b {
  display: block !important;
  min-width: 0 !important;
  max-width: none !important;
  color: #123429 !important;
  -webkit-text-fill-color: #123429 !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: .01em !important;
  text-align: left !important;
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: keep-all !important;
}

/* Top code cards: stable grid, readable labels and correctly aligned inner divider. */
.invite-access {
  width: min(100%, 480px) !important;
  min-width: 0 !important;
  gap: 8px !important;
}

.invite-codes {
  width: 100% !important;
  max-width: 480px !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 14px !important;
}

.invite-codes > span,
.invite-codes > span:nth-child(2) {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 58px !important;
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: 56px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 0 16px !important;
  overflow: hidden !important;
  border-radius: 12px !important;
}

.invite-codes small {
  position: relative !important;
  display: block !important;
  color: #c8fff3 !important;
  -webkit-text-fill-color: #c8fff3 !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  letter-spacing: .01em !important;
  text-align: left !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .78) !important;
}

.invite-codes small::after {
  top: 11px !important;
  bottom: 11px !important;
  right: -12px !important;
  width: 1px !important;
  background: rgba(255, 255, 255, .31) !important;
}

.invite-strip b,
.invite-codes b,
.invite-codes > span:nth-child(2) b {
  display: block !important;
  min-width: 0 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-size: clamp(17px, 1.55vw, 22px) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: .025em !important;
  white-space: nowrap !important;
  text-align: left !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .62), 0 0 10px rgba(255, 255, 255, .2) !important;
}

/* CTA tied to the available-production allocation block. */
.flow-join-cta {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 28px auto 0;
}

.flow-join-cta .button-primary {
  min-width: min(100%, 280px);
  min-height: 54px;
  padding-inline: 28px;
  font-size: 16px;
  font-weight: 880;
  text-align: center;
}

@media (max-width: 1280px) {
  .invite-access {
    width: min(100%, 430px) !important;
  }

  .invite-codes {
    max-width: 430px !important;
    gap: 10px !important;
  }

  .invite-codes > span,
  .invite-codes > span:nth-child(2) {
    min-height: 50px !important;
    grid-template-columns: 46px minmax(0, 1fr) !important;
    gap: 10px !important;
    padding-inline: 12px !important;
  }

  .invite-codes small {
    font-size: 11px !important;
  }
}

@media (max-width: 760px) {
  .invite-strip {
    min-height: 150px !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }

  .invite-access {
    width: 100% !important;
  }

  .invite-codes {
    width: min(100%, 420px) !important;
    max-width: 100% !important;
    gap: 8px !important;
  }

  .invite-codes > span,
  .invite-codes > span:nth-child(2) {
    min-height: 48px !important;
    grid-template-columns: 40px minmax(0, 1fr) !important;
    gap: 8px !important;
    padding-inline: 10px !important;
    border-radius: 10px !important;
  }

  .invite-codes small {
    font-size: 10px !important;
  }

  .invite-strip b,
  .invite-codes b,
  .invite-codes > span:nth-child(2) b {
    font-size: clamp(14px, 4.25vw, 17px) !important;
    letter-spacing: .02em !important;
  }

  .language-options {
    width: 184px !important;
    min-width: 184px !important;
    max-width: calc(100vw - 24px) !important;
    padding: 10px !important;
    gap: 6px !important;
  }

  .language-options a,
  .language-options a:link,
  .language-options a:visited {
    min-height: 48px !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    gap: 11px !important;
    padding: 7px 10px !important;
  }

  .language-options .language-flag {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
  }

  .language-options b,
  .invite-strip .language-options b,
  .language-options a b {
    font-size: 16px !important;
  }

  .flow-join-cta {
    margin-top: 22px;
  }

  .flow-join-cta .button-primary {
    width: min(100%, 320px);
    min-width: 0;
  }
}



/* v126 — discrete header codes, adjacent rocket, left production CTA,
   compact steps row and fully localized calculator markup. */
:root { --solulu-ui-v126: 1; }

.site-header,
.invite-strip {
  overflow: visible !important;
}

.site-header { z-index: 5000 !important; }
.language-picker { position: relative !important; z-index: 9800 !important; }
.language-options { z-index: 9900 !important; }

/* The language list remains an actual readable list, never height-clipped. */
.language-options {
  width: 196px !important;
  min-width: 196px !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
  padding: 10px !important;
  gap: 6px !important;
  overflow: visible !important;
  border-radius: 20px !important;
}

.language-options a,
.language-options a:link,
.language-options a:visited {
  width: 100% !important;
  min-height: 48px !important;
  display: grid !important;
  grid-template-columns: 36px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 7px 10px !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
}

.language-options .language-flag {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
}

.language-options b,
.invite-strip .language-options b,
.language-options a b {
  display: block !important;
  min-width: 0 !important;
  max-width: none !important;
  color: #123429 !important;
  -webkit-text-fill-color: #123429 !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: .01em !important;
  text-align: left !important;
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: keep-all !important;
}

/* Desktop: original phrase stays in its own column. The rocket immediately follows it;
   compact Code/UID cards sit farther right before the language selector. */
@media (min-width: 981px) {
  .invite-strip {
    min-height: 92px !important;
    display: grid !important;
    grid-template-columns: 112px minmax(280px, 1fr) 38px max-content 56px !important;
    grid-template-rows: auto !important;
    align-items: center !important;
    column-gap: 10px !important;
    padding: 11px 16px 12px 20px !important;
  }

  .invite-logo {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100px !important;
    max-height: 42px !important;
    justify-self: start !important;
  }

  .invite-message {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    justify-self: center !important;
  }

  /* Intentionally do not override invite-message strong: its original size and placement remain. */
  .invite-rocket {
    grid-column: 3 !important;
    grid-row: 1 !important;
    width: 34px !important;
    height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    justify-self: start !important;
    border-radius: 10px !important;
    filter: drop-shadow(0 0 8px rgba(67,225,255,.38)) drop-shadow(0 0 11px rgba(255,47,163,.24)) !important;
  }

  .invite-rocket img {
    width: 34px !important;
    height: 34px !important;
    object-fit: contain !important;
  }

  .invite-access {
    grid-column: 4 !important;
    grid-row: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    justify-self: end !important;
  }

  .invite-subline { display: none !important; }

  .invite-codes {
    width: auto !important;
    max-width: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 5px !important;
    margin: 0 !important;
  }

  .invite-codes > span,
  .invite-codes > span:nth-child(2) {
    width: auto !important;
    min-width: 97px !important;
    min-height: 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 5px !important;
    padding: 5px 8px !important;
    overflow: hidden !important;
    border-radius: 9px !important;
  }

  .invite-codes > span + span { padding-left: 8px !important; border-left: 0 !important; }
  .invite-codes small { font-size: 8px !important; font-weight: 790 !important; letter-spacing: .01em !important; }
  .invite-strip .invite-codes b,
  .invite-codes > span:nth-child(2) b {
    min-width: 0 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    font-size: 11.5px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    letter-spacing: .014em !important;
    white-space: nowrap !important;
    text-align: left !important;
  }

  .language-picker {
    grid-column: 5 !important;
    grid-row: 1 !important;
    justify-self: end !important;
  }
}

/* Mobile: no collision between the language selector, phrase, rocket and compact codes. */
@media (max-width: 980px) {
  .invite-strip {
    width: calc(100% - 20px) !important;
    min-height: auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "logo language"
      "message rocket"
      "access access" !important;
    align-items: center !important;
    gap: 8px 10px !important;
    padding: 12px 14px 14px !important;
  }

  .invite-logo { grid-area: logo !important; width: 88px !important; max-height: 36px !important; justify-self: start !important; }
  .invite-message { grid-area: message !important; display: block !important; min-width: 0 !important; width: 100% !important; text-align: left !important; }
  .invite-message::before { display: none !important; }
  .invite-message strong { display: block !important; margin: 0 !important; text-align: left !important; }
  .invite-rocket { grid-area: rocket !important; width: 30px !important; height: 30px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; justify-self: start !important; }
  .invite-rocket img { width: 30px !important; height: 30px !important; object-fit: contain !important; }
  .invite-access { grid-area: access !important; width: min(100%, 400px) !important; min-width: 0 !important; justify-self: center !important; }
  .invite-subline { display: none !important; }

  .invite-codes {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    gap: 6px !important;
  }

  .invite-codes > span,
  .invite-codes > span:nth-child(2) {
    width: auto !important;
    min-width: 100px !important;
    min-height: 31px !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 5px 8px !important;
    overflow: hidden !important;
    border-radius: 8px !important;
  }

  .invite-codes > span + span { padding-left: 8px !important; border-left: 0 !important; }
  .invite-codes small { font-size: 8px !important; }
  .invite-strip .invite-codes b,
  .invite-codes > span:nth-child(2) b { font-size: 12px !important; font-weight: 850 !important; letter-spacing: .014em !important; }
  .language-picker { grid-area: language !important; justify-self: end !important; }
}

@media (max-width: 470px) {
  .invite-strip { gap: 7px 8px !important; }
  .invite-logo { width: 78px !important; }
  .invite-rocket,
  .invite-rocket img { width: 27px !important; height: 27px !important; }
  .invite-codes > span,
  .invite-codes > span:nth-child(2) { flex: 1 1 0 !important; min-width: 0 !important; max-width: 142px !important; }
}

/* Do not create a third row below the production panel: the project CTA belongs in the left intro column. */
.withdrawal-intro .flow-join-cta {
  width: auto !important;
  display: flex !important;
  justify-content: flex-start !important;
  margin: 18px 0 0 !important;
}

.withdrawal-intro .flow-join-cta .button-primary {
  min-width: 0 !important;
  min-height: 38px !important;
  max-width: 100% !important;
  padding: 9px 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 7px !important;
  font-size: 12.5px !important;
  font-weight: 850 !important;
  line-height: 1.15 !important;
  text-align: left !important;
}

.withdrawal-intro .flow-join-cta .button-primary::before {
  content: "";
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  background: url('/assets/favicon.svg?v=20260702-123') center / contain no-repeat;
}

/* Under the globe, the educational steps action and the two codes now share one centered row. */
.hero-art-meta {
  width: min(100%, 560px) !important;
  margin: 10px auto 0 !important;
  display: grid !important;
  grid-template-columns: max-content minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
}

.hero-art .hero-steps-cta {
  width: auto !important;
  min-height: 30px !important;
  margin: 0 !important;
  padding: 7px 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 10.5px !important;
  font-weight: 790 !important;
  line-height: 1.08 !important;
  text-align: center !important;
  white-space: nowrap !important;
}

.hero-art-meta .code-panel {
  width: auto !important;
  margin: 0 !important;
  padding: 8px !important;
  gap: 7px !important;
}

.hero-art-meta .code-panel div { padding: 6px !important; gap: 4px !important; }
.hero-art-meta .code-panel span { font-size: 9px !important; }
.hero-art-meta .code-panel strong { padding: 6px 7px !important; font-size: 13px !important; }

@media (max-width: 640px) {
  .withdrawal-intro .flow-join-cta { margin-top: 16px !important; }
  .withdrawal-intro .flow-join-cta .button-primary { font-size: 12px !important; }
  .hero-art-meta { width: min(100%, 405px) !important; grid-template-columns: 1fr !important; gap: 8px !important; }
  .hero-art .hero-steps-cta { justify-self: center !important; white-space: normal !important; }
  .hero-art-meta .code-panel { width: 100% !important; }
}

/* v127 - requested banner/hero/production refinements. */
:root { --solulu-ui-v127: 1; }

@media (min-width: 981px) {
  .invite-strip {
    min-height: 108px !important;
    grid-template-columns: 112px minmax(360px, 0.94fr) 54px minmax(232px, max-content) 72px !important;
    column-gap: 8px !important;
    padding: 15px 20px 15px 22px !important;
  }

  .invite-message {
    justify-self: end !important;
    width: min(100%, 520px) !important;
  }

  .invite-message strong {
    display: block !important;
    width: max-content !important;
    max-width: 520px !important;
    font-size: clamp(18px, 1.55vw, 24px) !important;
    line-height: 1.08 !important;
    white-space: normal !important;
    text-align: center !important;
  }

  .invite-rocket {
    justify-self: start !important;
    margin-left: -4px !important;
    width: 48px !important;
    height: 48px !important;
    filter: drop-shadow(0 0 8px rgba(45, 239, 255, 0.44)) drop-shadow(0 0 10px rgba(255, 47, 163, 0.28)) !important;
  }

  .invite-rocket img {
    width: 48px !important;
    height: 48px !important;
    object-fit: contain !important;
  }

  .invite-access {
    justify-self: start !important;
    transform: translateX(-22px) !important;
  }

  .language-picker {
    justify-self: end !important;
  }
}

.hero-art-meta {
  width: min(100%, 500px) !important;
  margin: 13px auto 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
}

.hero-art .hero-steps-cta {
  min-height: 40px !important;
  min-width: min(100%, 330px) !important;
  padding: 10px 20px !important;
  font-size: 13px !important;
  font-weight: 860 !important;
  line-height: 1.12 !important;
  text-align: center !important;
}

.hero-art-meta .code-panel {
  width: min(100%, 360px) !important;
  margin: 0 auto !important;
  justify-self: center !important;
}

.withdrawal-intro {
  min-height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

.withdrawal-intro .flow-join-cta {
  margin-top: auto !important;
  padding-top: 24px !important;
  justify-content: flex-start !important;
}

.withdrawal-intro .flow-join-cta .button-primary {
  min-width: min(100%, 270px) !important;
  min-height: 58px !important;
  padding: 12px 22px 12px 66px !important;
  justify-content: center !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  letter-spacing: .015em !important;
  text-transform: uppercase !important;
  border: 3px solid rgba(236, 253, 255, .92) !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 16% 52%, rgba(24, 245, 250, .32), transparent 20%),
    linear-gradient(100deg, #0d8484 0%, #116e83 29%, #333372 58%, #84318c 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.42),
    inset 0 -13px 24px rgba(0,0,0,.24),
    0 0 0 1px rgba(58, 244, 255, .58),
    0 0 16px rgba(40, 241, 255, .32),
    0 10px 22px rgba(15, 25, 38, .22) !important;
  overflow: hidden !important;
}

.withdrawal-intro .flow-join-cta .button-primary::before {
  content: "" !important;
  position: absolute !important;
  left: 17px !important;
  top: 50% !important;
  width: 42px !important;
  height: 42px !important;
  flex: none !important;
  transform: translateY(-50%) rotate(-10deg) !important;
  background: url('/assets/solulu-rocket-clean.svg?v=20260702-128') center / contain no-repeat !important;
  filter: drop-shadow(0 0 5px rgba(255,255,255,.5)) !important;
}

.withdrawal-intro .flow-join-cta .button-primary::after {
  content: "" !important;
  position: absolute !important;
  inset: 7px 12px auto 58px !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.72), transparent) !important;
  opacity: .8 !important;
}

@media (max-width: 980px) {
  .invite-strip {
    min-height: 142px !important;
  }

  .invite-message strong {
    font-size: clamp(16px, 4.8vw, 21px) !important;
    line-height: 1.08 !important;
  }

  .invite-rocket,
  .invite-rocket img {
    width: 38px !important;
    height: 38px !important;
  }

  .hero-art .hero-steps-cta {
    width: min(100%, 350px) !important;
    min-height: 44px !important;
    font-size: 13px !important;
  }

  .withdrawal-intro .flow-join-cta .button-primary {
    width: min(100%, 290px) !important;
    min-height: 58px !important;
  }
}

/* v127b - force the top slogan to behave as a real two-line headline. */
.invite-message strong br { display: block !important; }
.invite-message strong::after { content: none !important; }
@media (min-width: 981px) {
  .invite-message strong { width: auto !important; min-width: 0 !important; }
}

/* v128 - left banner headline, clean rocket logo, production CTA polish. */
:root { --solulu-ui-v128: 1; }

@media (min-width: 981px) {
  .invite-strip {
    min-height: 108px !important;
    grid-template-columns: 112px minmax(340px, 470px) 50px minmax(235px, max-content) 76px !important;
    justify-content: start !important;
    column-gap: 5px !important;
  }

  .invite-message {
    justify-self: start !important;
    width: min(100%, 470px) !important;
    margin-left: 2px !important;
    text-align: left !important;
  }

  .invite-message strong {
    justify-self: start !important;
    width: auto !important;
    max-width: 470px !important;
    text-align: left !important;
    font-size: clamp(17px, 1.42vw, 23px) !important;
    line-height: 1.08 !important;
  }

  .invite-rocket {
    justify-self: start !important;
    align-self: center !important;
    margin-left: -10px !important;
    width: 52px !important;
    height: 52px !important;
  }

  .invite-rocket img {
    width: 52px !important;
    height: 52px !important;
    object-fit: contain !important;
  }

  .invite-access {
    justify-self: start !important;
    transform: translateX(-26px) !important;
  }
}

@media (max-width: 980px) {
  .invite-message strong {
    text-align: left !important;
  }

  .invite-rocket,
  .invite-rocket img {
    width: 42px !important;
    height: 42px !important;
  }
}

.withdrawal-intro .flow-join-cta {
  margin-top: auto !important;
  padding-top: 12px !important;
  transform: translateY(-12px) !important;
}

.withdrawal-intro .flow-join-cta .button-primary {
  min-width: min(100%, 292px) !important;
  min-height: 58px !important;
  padding-left: 70px !important;
}

.withdrawal-intro .flow-join-cta .button-primary::before {
  background: url('/assets/solulu-rocket-clean.svg?v=20260702-128') center / contain no-repeat !important;
  width: 44px !important;
  height: 44px !important;
  left: 16px !important;
}

/* v129 - restore header codes/language positions; only adjust slogan + rocket group. */
:root { --solulu-ui-v129: 1; }

@media (min-width: 981px) {
  .invite-strip {
    min-height: 108px !important;
    grid-template-columns: 112px minmax(300px, 1fr) 54px max-content 56px !important;
    column-gap: 10px !important;
    justify-content: stretch !important;
    padding: 15px 16px 15px 20px !important;
  }

  .invite-message {
    grid-column: 2 !important;
    justify-self: start !important;
    width: min(100%, 520px) !important;
    margin-left: clamp(24px, 4vw, 76px) !important;
    text-align: left !important;
  }

  .invite-message strong {
    text-align: left !important;
    max-width: 520px !important;
    font-size: clamp(17px, 1.42vw, 23px) !important;
    line-height: 1.08 !important;
  }

  .invite-rocket {
    grid-column: 3 !important;
    justify-self: start !important;
    margin-left: -12px !important;
    width: 52px !important;
    height: 52px !important;
  }

  .invite-rocket img {
    width: 52px !important;
    height: 52px !important;
  }

  .invite-access {
    grid-column: 4 !important;
    justify-self: end !important;
    transform: none !important;
  }

  .language-picker {
    grid-column: 5 !important;
    justify-self: end !important;
  }
}

/* v130 - keep access codes/language anchored right; only move slogan and its rocket. */
:root { --solulu-ui-v130: 1; }

@media (min-width: 981px) {
  .invite-strip {
    position: relative !important;
    min-height: 112px !important;
    grid-template-columns: 112px minmax(0, 1fr) !important;
    column-gap: 0 !important;
    padding: 16px 16px 16px 20px !important;
  }

  .invite-logo {
    grid-column: 1 !important;
    justify-self: start !important;
  }

  .invite-message {
    grid-column: 2 !important;
    justify-self: start !important;
    width: auto !important;
    max-width: 430px !important;
    margin-left: clamp(38px, 5.1vw, 96px) !important;
    margin-right: 0 !important;
    text-align: left !important;
    z-index: 2 !important;
  }

  .invite-message strong {
    width: max-content !important;
    max-width: 430px !important;
    text-align: left !important;
    font-size: clamp(17px, 1.38vw, 22px) !important;
    line-height: 1.08 !important;
  }

  .invite-rocket {
    grid-column: 2 !important;
    justify-self: start !important;
    align-self: center !important;
    margin-left: calc(clamp(38px, 5.1vw, 96px) + min(430px, 31vw)) !important;
    width: 52px !important;
    height: 52px !important;
    z-index: 2 !important;
  }

  .invite-rocket img {
    width: 52px !important;
    height: 52px !important;
    object-fit: contain !important;
  }

  .invite-access {
    position: absolute !important;
    right: 88px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: auto !important;
    justify-self: auto !important;
    z-index: 3 !important;
  }

  .language-picker {
    position: absolute !important;
    right: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    justify-self: auto !important;
    z-index: 5 !important;
  }
}

@media (min-width: 981px) and (max-width: 1240px) {
  .invite-message {
    margin-left: clamp(24px, 3vw, 44px) !important;
    max-width: 330px !important;
  }

  .invite-message strong {
    max-width: 330px !important;
    font-size: clamp(15px, 1.55vw, 18px) !important;
  }

  .invite-rocket {
    margin-left: calc(clamp(24px, 3vw, 44px) + min(330px, 27vw)) !important;
    width: 42px !important;
    height: 42px !important;
  }

  .invite-rocket img {
    width: 42px !important;
    height: 42px !important;
  }
}

/* v131 - phrase + rocket behave as one compact group; codes/language stay fixed right. */
:root { --solulu-ui-v131: 1; }

@media (min-width: 981px) {
  .invite-strip {
    grid-template-columns: 112px max-content 54px minmax(0, 1fr) !important;
    justify-content: stretch !important;
  }

  .invite-message {
    grid-column: 2 !important;
    width: max-content !important;
    max-width: 430px !important;
    margin-left: clamp(38px, 5.1vw, 96px) !important;
  }

  .invite-message strong {
    width: max-content !important;
    max-width: 430px !important;
  }

  .invite-rocket {
    grid-column: 3 !important;
    margin-left: 6px !important;
    justify-self: start !important;
  }

  .invite-access {
    right: 88px !important;
  }

  .language-picker {
    right: 16px !important;
  }
}

@media (min-width: 981px) and (max-width: 1240px) {
  .invite-message {
    margin-left: clamp(26px, 3.4vw, 48px) !important;
    max-width: 330px !important;
  }

  .invite-message strong {
    max-width: 330px !important;
  }

  .invite-rocket {
    margin-left: 4px !important;
  }
}

/* v132 - centered wide geometric slogan + cleaner rocket, codes/language preserved right. */
:root { --solulu-ui-v132: 1; }

@media (min-width: 981px) {
  .invite-strip {
    min-height: 118px !important;
    position: relative !important;
    padding: 16px 16px 16px 20px !important;
  }

  .invite-message {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: max-content !important;
    max-width: min(46vw, 650px) !important;
    margin: 0 !important;
    transform: translate(-50%, -50%) scaleX(1.16) scaleY(.88) !important;
    transform-origin: center !important;
    text-align: center !important;
    z-index: 2 !important;
  }

  .invite-message strong {
    display: block !important;
    width: max-content !important;
    max-width: min(46vw, 650px) !important;
    font-family: Impact, 'Arial Black', 'Segoe UI Black', 'Arial Narrow', sans-serif !important;
    font-size: clamp(23px, 2.15vw, 35px) !important;
    line-height: .94 !important;
    font-weight: 900 !important;
    letter-spacing: .045em !important;
    text-transform: uppercase !important;
    text-align: center !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    background: linear-gradient(92deg, #ecffff 0%, #36f1ff 28%, #f4fff7 50%, #8cffd4 66%, #ff4fbd 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-stroke: .45px rgba(3, 27, 32, .72) !important;
    text-shadow: 0 2px 0 rgba(0,0,0,.42), 0 0 18px rgba(49,238,255,.28), 0 0 18px rgba(255,57,178,.18) !important;
  }

  .invite-rocket {
    position: absolute !important;
    left: calc(50% + min(26vw, 330px)) !important;
    top: 50% !important;
    width: 66px !important;
    height: 48px !important;
    margin: 0 !important;
    transform: translate(-50%, -50%) !important;
    z-index: 2 !important;
    filter: drop-shadow(0 0 7px rgba(55, 236, 255, .52)) drop-shadow(0 0 9px rgba(255, 47, 163, .25)) !important;
  }

  .invite-rocket img {
    width: 66px !important;
    height: 48px !important;
    object-fit: contain !important;
  }

  .invite-access {
    position: absolute !important;
    right: 88px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 3 !important;
  }

  .language-picker {
    position: absolute !important;
    right: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 5 !important;
  }
}

@media (min-width: 981px) and (max-width: 1240px) {
  .invite-message {
    left: 44% !important;
    max-width: 40vw !important;
    transform: translate(-50%, -50%) scaleX(1.08) scaleY(.9) !important;
  }

  .invite-message strong {
    max-width: 40vw !important;
    font-size: clamp(18px, 1.9vw, 24px) !important;
    letter-spacing: .035em !important;
  }

  .invite-rocket {
    left: calc(44% + min(23vw, 245px)) !important;
    width: 54px !important;
    height: 40px !important;
  }

  .invite-rocket img {
    width: 54px !important;
    height: 40px !important;
  }
}

/* v133 - title centered between background lines; mirrored rockets glued to title; codes separated from language. */
:root { --solulu-ui-v133: 1; }

@media (min-width: 981px) {
  .invite-message {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: max-content !important;
    max-width: min(44vw, 620px) !important;
    margin: 0 !important;
    transform: translate(-50%, -50%) scaleX(1.13) scaleY(.88) !important;
    transform-origin: center !important;
    text-align: center !important;
    z-index: 2 !important;
  }

  .invite-message::before,
  .invite-message::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    width: 58px !important;
    height: 40px !important;
    background: url('/assets/solulu-rocket-clean.svg?v=20260702-132') center / contain no-repeat !important;
    filter: drop-shadow(0 0 7px rgba(55, 236, 255, .48)) drop-shadow(0 0 8px rgba(255, 47, 163, .22)) !important;
    pointer-events: none !important;
  }

  .invite-message::before {
    right: calc(100% + 8px) !important;
    transform: translateY(-50%) scaleX(-1) !important;
  }

  .invite-message::after {
    left: calc(100% + 8px) !important;
    transform: translateY(-50%) !important;
  }

  .invite-rocket {
    display: none !important;
  }

  .invite-access {
    right: 124px !important;
  }

  .language-picker {
    right: 16px !important;
  }
}

@media (min-width: 981px) and (max-width: 1240px) {
  .invite-message {
    left: 43% !important;
    max-width: 38vw !important;
    transform: translate(-50%, -50%) scaleX(1.04) scaleY(.9) !important;
  }

  .invite-message::before,
  .invite-message::after {
    width: 46px !important;
    height: 32px !important;
  }

  .invite-message::before { right: calc(100% + 5px) !important; }
  .invite-message::after { left: calc(100% + 5px) !important; }
  .invite-access { right: 118px !important; }
}

@media (max-width: 980px) {
  .invite-message::before,
  .invite-message::after {
    display: none !important;
  }
}

/* v134 - show both mirrored rockets fully and keep them closer to the headline. */
:root { --solulu-ui-v134: 1; }

@media (min-width: 981px) {
  .invite-message {
    overflow: visible !important;
  }

  .invite-message::before,
  .invite-message::after {
    width: 62px !important;
    height: 43px !important;
    z-index: 1 !important;
  }

  .invite-message::before {
    right: calc(100% + 3px) !important;
  }

  .invite-message::after {
    left: calc(100% + 3px) !important;
  }

  .invite-message strong {
    position: relative !important;
    z-index: 2 !important;
  }
}

@media (min-width: 981px) and (max-width: 1240px) {
  .invite-message::before,
  .invite-message::after {
    width: 50px !important;
    height: 35px !important;
  }

  .invite-message::before { right: calc(100% + 2px) !important; }
  .invite-message::after { left: calc(100% + 2px) !important; }
}

/* v135 - pixel-aligned header group: mirrored rockets are flex items with equal spacing. */
:root { --solulu-ui-v135: 1; }

@media (min-width: 981px) {
  .invite-message {
    position: absolute !important;
    left: calc(50% - clamp(42px, 3.7vw, 82px)) !important;
    top: 50% !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    overflow: visible !important;
    transform: translate(-50%, -50%) !important;
    transform-origin: center !important;
    text-align: center !important;
    z-index: 3 !important;
  }

  .invite-message::before,
  .invite-message::after {
    content: "" !important;
    position: static !important;
    display: block !important;
    flex: 0 0 62px !important;
    width: 62px !important;
    height: 43px !important;
    background: url('/assets/solulu-rocket-clean.svg?v=20260702-132') center / contain no-repeat !important;
    filter: drop-shadow(0 0 7px rgba(55, 236, 255, .48)) drop-shadow(0 0 8px rgba(255, 47, 163, .22)) !important;
    pointer-events: none !important;
    z-index: 1 !important;
  }

  .invite-message::before {
    transform: scaleX(-1) !important;
  }

  .invite-message::after {
    transform: none !important;
  }

  .invite-message strong {
    position: relative !important;
    z-index: 2 !important;
    display: block !important;
    width: max-content !important;
    max-width: min(44vw, 620px) !important;
    margin: 0 34px !important;
    transform: scaleX(1.13) scaleY(.88) !important;
    transform-origin: center !important;
  }

  .invite-rocket {
    display: none !important;
  }

  .invite-access {
    right: 170px !important;
  }

  .language-picker {
    right: 18px !important;
  }
}

@media (min-width: 981px) and (max-width: 1240px) {
  .invite-message {
    left: calc(43% - 18px) !important;
  }

  .invite-message::before,
  .invite-message::after {
    flex-basis: 50px !important;
    width: 50px !important;
    height: 35px !important;
  }

  .invite-message strong {
    max-width: 38vw !important;
    margin: 0 26px !important;
    transform: scaleX(1.06) scaleY(.9) !important;
  }

  .invite-access {
    right: 150px !important;
  }
}

/* v136 - nudge the measured title/rocket group further left, keeping equal rocket gaps. */
:root { --solulu-ui-v136: 1; }

@media (min-width: 981px) {
  .invite-message {
    left: calc(50% - clamp(58px, 4.8vw, 108px)) !important;
  }
}

@media (min-width: 981px) and (max-width: 1240px) {
  .invite-message {
    left: calc(43% - 32px) !important;
  }
}