.view-anchor { position:absolute; top:0; right:0; width:1px; height:1px; pointer-events:none; }
#inviteView { display:none; }
.invite-banner { display:block; width:100%; height:auto; margin-bottom:20px; border-radius:23px; }
.app-shell.is-invite #homeView { display:none; }
.app-shell.is-invite #inviteView { display:block; }
body.is-invite { background:var(--bg); }
.app-view.active { animation:view-in .3s ease both; }

.referral-card { margin-top:25px; padding:23px; border:1px solid #fff; border-radius:26px; background:#fff; box-shadow:0 16px 38px rgba(55,38,45,.07); }
.referral-card-kicker { display:flex; align-items:center; gap:8px; color:var(--red); font-size:10px; font-weight:700; }
.referral-card-kicker span { color:#e3c0c8; font-size:6px; }
.referral-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:13px; }
.referral-heading h2 { margin:0; color:#241e23; font-size:18px; font-weight:800; line-height:1.6; }
.referral-heading p { margin:3px 0 0; color:#8f8790; font-size:11px; line-height:1.8; }
.link-icon { display:grid; width:47px; height:47px; flex:0 0 47px; place-items:center; border-radius:15px; background:#fff1f3; color:var(--red); transform:rotate(-8deg); }
.link-icon svg { width:25px; height:25px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.referral-link-box { margin-top:20px; padding:13px 14px; border:1px dashed #ded0d5; border-radius:13px; background:#faf8f9; direction:ltr; }
.referral-link-box p { min-width:0; margin:0; overflow:hidden; color:#676069; font-family:var(--font); font-size:11px; text-align:left; text-overflow:ellipsis; white-space:nowrap; }
.copy-button { display:flex; width:100%; height:53px; align-items:center; justify-content:center; gap:10px; margin-top:12px; padding:0 18px; border:0; border-radius:14px; background:linear-gradient(115deg,var(--red),var(--red-dark)); color:#fff; font-size:13px; font-weight:800; box-shadow:0 11px 22px rgba(230,0,45,.22); cursor:pointer; transition:transform .18s ease,box-shadow .18s ease; }
.copy-button:active { transform:scale(.98); box-shadow:0 6px 12px rgba(230,0,45,.2); }
.copy-button:focus-visible { outline:3px solid #f0a4b3; outline-offset:3px; }
.copy-button svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; }
.copy-button-arrow { margin-right:auto; font-family:Arial,sans-serif; font-size:21px; font-weight:400; opacity:.68; }

.invite-how { margin-top:27px; padding:0 4px; }
.invite-how-head { margin-bottom:12px; }
.invite-how-head>span { color:var(--red); font-size:10px; font-weight:700; }
.invite-how h2 { margin:5px 0 0; color:#292128; font-size:17px; }
.invite-step { display:flex; align-items:center; gap:14px; min-height:45px; border-bottom:1px solid #e8e2e5; }
.invite-step:last-child { border-bottom:0; }
.invite-step>span { color:#bd9ca6; font-family:var(--digits),var(--font),sans-serif; font-size:17px; }
.invite-step p { margin:0; color:#746c74; font-size:11px; line-height:1.7; }

@media (max-width:520px) {
  .referral-card { padding:20px 17px; }
  .referral-heading h2 { font-size:15px; }
}
@keyframes view-in { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:translateY(0); } }

/* Invitation page: personal link and a compact three-step guide. */
body.is-invite { background:var(--bg); }
.invite-page-head { display:flex; align-items:center; justify-content:space-between; margin:0 3px 21px; color:#514048; font-size:12px; }
.invite-page-head b { margin:0 10px; color:#c7b9bb; font-weight:400; }
.invite-page-head>span:last-child { color:var(--red); font-size:25px; line-height:1; }
.referral-card { margin-top:18px; padding:23px; border:1px solid #ece5e2; border-radius:23px; background:#fff; box-shadow:0 8px 24px #47232b05; }
.referral-heading { justify-content:flex-start; gap:11px; margin-top:0; }
.referral-heading>div { min-width:0; }
.referral-heading h2 { color:#33252b; font-size:15px; line-height:1.8; }
.referral-heading p { color:#8b7f84; font-size:10px; }
.link-icon { order:-1; width:43px; height:43px; flex-basis:43px; border:1px solid #f6e8e9; border-radius:14px; background:#fcf2f2; color:var(--red); transform:none; }
.link-icon svg { width:21px; height:21px; }
.referral-link-box { margin-top:19px; padding:15px 13px; border:1px solid #ece7e5; border-radius:12px; background:#faf9f7; }
.referral-link-box p { color:#71656b; font-size:12px; }
.copy-button { height:51px; gap:9px; padding:0 18px; border:1px solid var(--red-dark); border-radius:12px; background:linear-gradient(105deg,var(--red),var(--red-dark)); font-size:12px; box-shadow:0 6px 13px #e6002d1c; }
.copy-button:hover { filter:brightness(1.08); }
.invite-how { margin-top:27px; padding:0; }
.invite-how-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 3px 15px; }
.invite-how h2 { margin:0; color:#44313a; font-size:14px; font-weight:800; }
.invite-how-head>span { color:#a08d94; font-size:9px; font-weight:400; }
.invite-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.invite-step { display:block; min-height:0; padding:15px 10px 16px; border:1px solid #eae2df; border-radius:16px; background:#ffffff80; }
.invite-step:last-child { border-bottom:1px solid #eae2df; }
.invite-step>span { display:grid; width:29px; height:29px; place-items:center; margin-bottom:12px; border:1px solid #eee0e2; border-radius:10px; background:#f5e9eb; color:var(--red); font-family:var(--font); font-size:11px; }
.invite-step:last-child>span { background:#f6eedf; border-color:#eee2cc; color:#9c7843; }
.invite-step h3 { margin:0 0 5px; color:#52404a; font-size:10px; font-weight:700; }
.invite-step p { color:#96858e; font-size:9px; line-height:1.9; }
@media (max-width:520px) {
  .invite-page-head { margin-bottom:17px; }
  .referral-card { padding:19px 16px; }
  .referral-heading h2 { font-size:13px; }
  .invite-steps { gap:7px; }
  .invite-step { padding:12px 8px; }
}
@media (max-width:370px) {
  .invite-step h3 { font-size:9px; }
  .invite-step p { font-size:8px; }
}

.invite-reward-card { margin-top:22px; padding:22px 20px; border:1px solid #ece5e2; border-radius:23px; background:#fff; box-shadow:0 8px 24px #47232b05; }
.invite-reward-badge { display:inline-flex; align-items:center; gap:7px; padding:7px 10px; border-radius:10px; background:#fcf2f2; color:var(--red); font-size:11px; font-weight:700; line-height:1.8; }
.invite-reward-card h2 { margin:15px 0 9px; color:#44313a; font-size:15px; font-weight:800; line-height:1.9; }
.invite-reward-card p { margin:0; color:#71656b; font-size:12px; line-height:2.1; }
.invite-reward-card p strong { color:var(--red); font-weight:800; }
.invite-reward-example { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1.4fr); align-items:center; gap:10px; margin:18px 0 15px; padding:17px 12px; border:1px solid #f4e0e5; border-radius:16px; background:linear-gradient(120deg,#fff7f8,#fbecef); text-align:center; }
.invite-reward-example>div { display:flex; flex-direction:column; align-items:center; gap:3px; }
.invite-reward-example strong { color:var(--red); font-family:var(--digits),var(--font),sans-serif; font-size:32px; font-weight:800; line-height:1.3; }
.invite-reward-example div span { color:#805463; font-size:10px; line-height:1.8; }
.invite-reward-equals { color:#bc8393; font-size:23px; }
.invite-reward-card .invite-reward-summary { color:#52404a; }
.invite-reward-card .invite-reward-note { margin-top:14px; padding-top:12px; border-top:1px solid #f0e8eb; color:#8b7f84; font-size:10px; }
@media (max-width:370px) {
  .invite-reward-card { padding:18px 15px; }
  .invite-reward-card h2 { font-size:14px; }
  .invite-reward-example { gap:7px; padding-right:8px; padding-left:8px; }
}

/* First invitation screen. */
body.is-invite { background:var(--bg); }
.invite-intro { margin:0 0 20px; }
.invite-intro h1 { margin:0; color:#171b22; font-size:clamp(17px,5.3vw,32px); font-weight:800; line-height:1.8; white-space:nowrap; }
.invite-intro h1 span { color:var(--red); }
.invite-intro p { margin:7px 0 0; color:#858087; font-size:clamp(10px,2.8vw,15px); line-height:1.9; }
.invite-banners { position:relative; overflow:hidden; aspect-ratio:1586 / 992; border-radius:23px; background:#fff4f6; }
.invite-banners .invite-banner { position:absolute; inset:0; width:100%; height:100%; margin:0; border-radius:0; object-fit:contain; opacity:0; transition:opacity .35s ease; }
.invite-banners .invite-banner.is-visible { opacity:1; }
.invite-overview { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); margin:24px 0; }
.invite-overview>div { display:flex; flex-direction:column; align-items:center; gap:5px; }
.invite-overview>div+div { border-right:1px solid #eee8ea; }
.invite-overview svg { width:30px; height:30px; margin-bottom:4px; fill:none; stroke:var(--red); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.invite-overview strong { color:#171b22; font-family:var(--digits),var(--font),sans-serif; font-size:32px; font-weight:800; line-height:1.3; }
.invite-overview span { color:#858087; font-size:13px; }
.invite-reward-badge svg,.invite-reward-card h2 svg { display:inline-block; width:17px; height:17px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; vertical-align:middle; }
.invite-reward-card h2 svg { color:var(--red); }

/* Referral explanation above a single, soft pink chance panel. */
.invite-reward-card { margin-top:60px; padding:0; border:0; border-radius:0; background:none; box-shadow:none; }
.invite-reward-card h2 { margin:0 0 10px; color:#32212b; font-size:16px; font-weight:800; line-height:1.95; letter-spacing:-.25px; }
.invite-reward-card h2 svg { margin-right:3px; color:var(--red-light); }
.invite-reward-card p { color:#826d79; font-size:12px; line-height:2.15; }
.invite-reward-card p strong { display:inline-block; padding:0 5px; border-radius:5px; background:#fbe8ef; color:var(--red); font-weight:700; white-space:nowrap; }
.invite-reward-example { display:grid; grid-template-columns:minmax(0,1fr) 28px minmax(0,1.4fr); align-items:center; gap:0 8px; margin:22px 0 0; padding:25px 18px 27px; border:0; border-radius:30px; background:#fff2f4; box-shadow:none; text-align:center; }
.invite-reward-example .invite-reward-badge { display:block; grid-column:1 / -1; margin:0 0 20px; padding:0; border:0; border-radius:0; background:none; box-shadow:none; color:#382b31; font-size:13px; font-weight:500; line-height:1.9; }
.invite-reward-example>div { display:flex; flex-direction:column; align-items:center; justify-content:center; align-self:stretch; gap:10px; min-width:0; padding:0; }
.invite-reward-example strong { color:var(--red); font-family:var(--font); font-size:clamp(36px,10vw,50px); font-weight:800; line-height:1.35; }
.invite-reward-example div span { color:#968b93; font-size:11px; line-height:1.9; }
.invite-reward-equals { align-self:center; color:#d88c9d; font-size:25px; font-weight:500; line-height:1; }
.invite-reward-card .invite-reward-note { margin:19px 6px 0; padding:0; border:0; color:#978d94; font-size:11px; line-height:2; text-align:center; }
@media (max-width:370px) {
  .invite-reward-card h2 { font-size:14px; }
  .invite-reward-card p { font-size:11px; }
  .invite-reward-example { padding:22px 12px 24px; gap:0 6px; border-radius:26px; }
  .invite-reward-example .invite-reward-badge { font-size:12px; }
  .invite-reward-example div span { font-size:10px; }
  .invite-reward-card .invite-reward-note { font-size:10px; }
}
@media (prefers-reduced-motion:reduce) {
  .invite-banners .invite-banner { transition:none; }
}

/* Personal invitation card. */
.referral-card { position:relative; isolation:isolate; margin-top:22px; padding:24px; overflow:hidden; border:1px solid #eedde3; border-radius:28px; background:radial-gradient(ellipse at 100% 0%,#fcecf1 0%,transparent 62%),linear-gradient(155deg,#fff,#fffcfd); box-shadow:0 18px 42px -24px #e6002d55,inset 0 1px 0 #fff; }
.referral-card::before { content:""; position:absolute; z-index:-1; width:140px; height:140px; top:-83px; left:-45px; border:1px solid #e6002d12; border-radius:50%; box-shadow:0 0 0 18px #e6002d05,0 0 0 38px #e6002d04; pointer-events:none; }
.referral-heading { gap:14px; align-items:center; }
.referral-heading h2 { color:#32212b; font-size:17px; font-weight:800; letter-spacing:-.35px; line-height:1.8; }
.referral-heading p { margin-top:4px; color:#8b7480; font-size:11px; line-height:1.8; }
.link-icon { position:relative; width:52px; height:52px; flex-basis:52px; border:1px solid #fff9; border-radius:18px; background:linear-gradient(145deg,var(--red),var(--red-dark)); color:#fff; box-shadow:0 7px 15px #e6002d24,inset 0 1px 0 #ffffff40; }
.link-icon::after { content:""; position:absolute; inset:5px; border:1px solid #ffffff20; border-radius:13px; }
.link-icon svg { width:26px; height:26px; stroke-width:2; }
.referral-link-box { position:relative; display:grid; grid-template-columns:minmax(0,1fr); gap:11px; align-items:center; margin-top:23px; padding:13px 14px 15px; border:1px solid #eadfe4; border-radius:17px; background:#ffffffb3; box-shadow:inset 0 2px 5px #49243703; direction:rtl; }
.referral-link-label { display:flex; grid-column:1 / -1; align-items:center; justify-content:space-between; gap:8px; color:#8c7782; font-size:10px; line-height:1.8; }
.referral-link-tag { padding:2px 8px; border:1px solid #f0dfe5; border-radius:7px; background:#fbf0f4; color:var(--red); font-size:9px; }
.referral-link-box p { color:#61505c; font-family:"SFProLink","SF Pro Text","SF Pro Display",sans-serif; font-size:12px; font-weight:600; direction:ltr; line-height:1.8; }
.referral-card .copy-button { position:relative; display:grid; grid-template-columns:34px minmax(0,1fr) 20px; gap:10px; height:56px; margin-top:14px; padding:0 12px; overflow:hidden; border:1px solid var(--red-dark); border-radius:16px; background:linear-gradient(110deg,var(--red-dark),var(--red)); font-size:13px; box-shadow:0 7px 15px -5px #e6002d50,inset 0 1px 0 #ffffff26; transition:transform .18s ease,box-shadow .18s ease,background .2s ease; }
.copy-button-icon { display:grid; width:34px; height:34px; place-items:center; border:1px solid #ffffff1f; border-radius:11px; background:#ffffff12; }
.copy-button-icon svg { width:18px; height:18px; stroke-linecap:round; stroke-linejoin:round; }
.copy-button-icon .copy-check { display:none; }
.copy-button-label { text-align:center; }
.copy-button .copy-button-chevron { width:18px; height:18px; opacity:.65; }
.referral-card .copy-button.is-copied { border-color:#26735f; background:linear-gradient(110deg,#215e50,#32806a); box-shadow:0 7px 15px -5px #215e503d; }
.copy-button.is-copied .copy-glyph { display:none; }
.copy-button.is-copied .copy-check { display:block; }
.referral-card .copy-button:active { transform:scale(.985); }
.referral-card .copy-button:disabled { cursor:wait; }
@media (hover:hover) {
  .referral-card .copy-button:hover { filter:none; transform:translateY(-1px); box-shadow:0 10px 19px -5px #e6002d50,inset 0 1px 0 #ffffff26; }
}
@media (max-width:370px) {
  .referral-card { padding:19px 16px; border-radius:24px; }
  .referral-heading { gap:11px; }
  .referral-heading h2 { font-size:15px; }
  .referral-heading p { font-size:10px; }
  .link-icon { width:46px; height:46px; flex-basis:46px; border-radius:16px; }
  .referral-link-box { padding-right:11px; padding-left:11px; gap:8px; }
  .referral-link-box p { font-size:11px; }
}

/* Three invitation steps, with a warm accent for the reward. */
.invite-how { margin-top:60px; padding:0; }
.invite-how-head { gap:8px; margin:0 2px 14px; }
.invite-how h2 { color:#32212b; font-size:15px; font-weight:800; letter-spacing:-.25px; }
.invite-how-head>span { flex:none; padding:4px 9px; border:1px solid #f0e5e9; border-radius:8px; background:#fcf7f9; color:#947985; font-size:9px; }
.invite-steps { grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; align-items:stretch; }
.invite-step,.invite-step:last-child { position:relative; isolation:isolate; min-width:0; padding:15px 12px 16px; overflow:hidden; border:1px solid #eedfe5; border-radius:20px; background:radial-gradient(ellipse at 100% 0%,#fceef3,transparent 72%),#fffdfe; box-shadow:0 10px 22px -18px #e6002d50,inset 0 1px 0 #fff; }
.invite-step::after { content:""; position:absolute; z-index:-1; top:-30px; left:-30px; width:75px; height:75px; border:1px solid #e6002d10; border-radius:50%; box-shadow:0 0 0 12px #e6002d04; pointer-events:none; }
.invite-step-top { display:flex; align-items:center; justify-content:space-between; gap:6px; margin-bottom:18px; }
.invite-step-icon { display:grid; width:29px; height:29px; flex:none; place-items:center; border:1px solid #ffffffa6; border-radius:10px; background:linear-gradient(145deg,var(--red),var(--red-dark)); color:#fff; box-shadow:0 5px 11px -4px #e6002d50,inset 0 1px 0 #ffffff40; }
.invite-step-icon svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; }
.invite-step:nth-child(2) .invite-step-icon { background:linear-gradient(145deg,#258fd8,#1468b4); box-shadow:0 5px 11px -4px #1468b450,inset 0 1px 0 #ffffff40; }
.invite-step-number { color:#b78498; font-family:var(--font); font-size:19px; font-weight:800; line-height:1; }
.invite-step h3 { margin:0 0 6px; color:#49303e; font-size:11px; font-weight:700; line-height:1.9; }
.invite-step p { margin:0; color:#927b87; font-size:9px; line-height:1.9; overflow-wrap:break-word; }
.invite-step.invite-step-reward { border-color:#efdfc8; background:radial-gradient(ellipse at 100% 0%,#fbefd9,transparent 75%),#fffdfa; }
.invite-step-reward .invite-step-icon { background:linear-gradient(145deg,#c6984d,#a06f2a); box-shadow:0 5px 11px -4px #97652750,inset 0 1px 0 #ffffff40; }
.invite-step-reward .invite-step-number { color:#b69563; }
.invite-step-reward h3 { color:#624a2d; }
.invite-step-reward p { color:#97836a; }
.invite-step-reward p strong { color:#946b30; font-weight:700; white-space:nowrap; }
@media (max-width:370px) {
  .invite-how h2 { font-size:13px; }
  .invite-how-head>span { font-size:8px; padding:3px 6px; }
  .invite-steps { gap:7px; }
  .invite-step,.invite-step:last-child { padding:12px 9px 13px; border-radius:17px; }
  .invite-step-icon { width:26px; height:26px; border-radius:9px; }
  .invite-step-number { font-size:16px; }
  .invite-step h3 { font-size:10px; }
  .invite-step p { font-size:9px; }
}


/* Invitation page reference: banner, personal chances and sharing actions. */
#inviteView { container-type:inline-size; }
.app-shell.is-invite { padding-top:calc(28px + max(env(safe-area-inset-top),var(--telegram-safe-top))); padding-right:calc(19px + max(env(safe-area-inset-right),var(--telegram-safe-right))); padding-left:calc(19px + max(env(safe-area-inset-left),var(--telegram-safe-left))); }
#inviteView .invite-banners { width:100%; border-radius:7.5cqw; }
.invite-chances { margin-top:6.8cqw; }
.invite-chances>p { margin:0; color:#919095; font-size:3.2cqw; }
.invite-chances-value { display:flex; align-items:baseline; gap:2.6cqw; margin-top:3cqw; }
.invite-chances-value strong { font-family:"SFProLink",Arial,sans-serif; font-size:11.5cqw; font-weight:600; line-height:1.1; direction:ltr; unicode-bidi:isolate; }
.invite-chances-value>span { color:#919095; font-size:3.4cqw; }
.invite-chances-badge { display:inline-flex; align-items:center; min-height:7cqw; margin-top:4.5cqw; padding:1cqw 3.3cqw; border-radius:100px; background:#fff3f5; color:#cf1d3b; font-size:2.9cqw; font-weight:800; }
#inviteView .referral-card { margin-top:7cqw; padding:0; overflow:visible; border:0; border-radius:0; background:none; box-shadow:none; }
#inviteView .referral-card::before { display:none; }
#inviteView .referral-link-box { display:flex; align-items:center; min-height:12.4cqw; margin:0; padding:3cqw 4.3cqw; border:0; border-radius:5.5cqw; background:#f7f7f9; }
#inviteView .referral-link-box p { width:100%; color:#919095; font-size:2.7cqw; line-height:1.6; font-family:var(--font); }
#inviteView .copy-button,#inviteView .share-referral { display:flex; align-items:center; justify-content:center; gap:3.4cqw; width:100%; min-height:15.6cqw; height:auto; margin-top:3.2cqw; padding:3cqw; border:0; border-radius:6cqw; background:#ef1033; color:#fff; box-shadow:none; font-size:3.5cqw; font-weight:800; text-decoration:none; cursor:pointer; }
#inviteView .copy-button-icon { display:grid; place-items:center; width:4.7cqw; height:4.7cqw; padding:0; border:0; border-radius:0; background:none; box-shadow:none; }
#inviteView .copy-button svg,#inviteView .share-referral svg { width:4.7cqw; height:4.7cqw; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
#inviteView .copy-check { display:none; }
#inviteView .is-copied .copy-glyph { display:none; }
#inviteView .is-copied .copy-check { display:block; }
#inviteView .share-referral { min-height:14.4cqw; margin-top:2.8cqw; background:#fff3f5; color:#cf1d3b; }
#inviteView .share-referral[aria-disabled="true"] { opacity:.55; cursor:default; }
#inviteView .share-referral:focus-visible { outline:3px solid #f0a4b3; outline-offset:3px; }
#inviteView .invite-overview { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:3.3cqw; margin:6cqw 0 0; }
#inviteView .invite-overview>div { align-items:flex-start; gap:4cqw; min-height:31.2cqw; padding:4.8cqw; border:0; border-radius:7cqw; background:#e8f8f2; }
#inviteView .invite-overview>div.invite-stat-bonus { background:#fff3f5; }
#inviteView .invite-overview span { color:#919095; font-size:2.9cqw; }
#inviteView .invite-overview strong { color:#19a47e; font-family:"SFProLink",Arial,sans-serif; font-size:6cqw; font-weight:600; line-height:1.1; direction:ltr; }
#inviteView .invite-stat-bonus strong { color:#cf1d3b; }


/* Second invitation section: stat units and three numbered rows. */
#inviteView .invite-overview small { color:#919095; font-size:2.8cqw; font-weight:400; line-height:1.5; }
#inviteView .invite-how { margin-top:11.5cqw; padding:0; }
#inviteView .invite-how-head { display:block; margin:0 0 4.4cqw; padding:0; }
#inviteView .invite-how h2 { margin:0; color:#151419; font-size:4.6cqw; font-weight:800; line-height:1.7; }
#inviteView .invite-steps { display:flex; flex-direction:column; gap:0; }
#inviteView .invite-step { display:flex; align-items:center; gap:4.4cqw; min-height:20.7cqw; padding:4.4cqw 0; border:0; border-bottom:1px solid #f1f1f3; border-radius:0; background:none; box-shadow:none; }
#inviteView .invite-step:last-child { border-bottom:0; }
#inviteView .invite-step::before,#inviteView .invite-step::after { display:none; }
#inviteView .invite-step-number { display:grid; flex:none; place-items:center; width:11.8cqw; height:11.8cqw; margin:0; border:0; border-radius:50%; background:#fff3f5; color:#cf1d3b; font-family:var(--font); font-size:3.7cqw; font-weight:800; line-height:1; }
#inviteView .invite-step h3 { margin:0 0 1cqw; color:#151419; font-size:3.6cqw; font-weight:800; line-height:1.7; }
#inviteView .invite-step p { margin:0; color:#919095; font-size:3cqw; line-height:1.8; }


/* Final invitation section: one example panel and a definition below it. */
#inviteView .invite-reward-card { margin-top:8cqw; padding:0; border:0; border-radius:0; background:none; box-shadow:none; }
#inviteView .invite-reward-example { display:grid; grid-template-columns:minmax(0,1fr) 7cqw minmax(0,1fr); align-items:center; gap:0 2cqw; min-height:40cqw; margin:0; padding:6.8cqw 6cqw 7.2cqw; border:0; border-radius:7.5cqw; background:#fff3f5; box-shadow:none; text-align:center; }
#inviteView .invite-reward-example .invite-reward-badge { grid-column:1 / -1; margin:0 0 4.5cqw; padding:0; color:#151419; font-size:3.2cqw; font-weight:400; line-height:1.8; }
#inviteView .invite-reward-example>div { gap:2.5cqw; }
#inviteView .invite-reward-example strong { color:#ef1033; font-family:var(--font); font-size:9.8cqw; font-weight:800; line-height:1.2; }
#inviteView .invite-reward-example div span { color:#919095; font-size:2.6cqw; line-height:1.8; white-space:nowrap; }
#inviteView .invite-reward-equals { color:#e796a7; font-size:4.5cqw; font-weight:500; line-height:1; }
#inviteView .invite-reward-card .invite-reward-note { margin:4.4cqw 0 0; padding:0; border:0; color:#919095; font-size:2.8cqw; line-height:2; text-align:center; }