/* ==========================================================================
   GRADE SYNC PRO — Affiliate page v3 (2026-05-29)
   Inherits the full home-v3 cinematic design system, adds affiliate-only
   pieces: referral-link card, FAQ accordion, "What you get" hero panel.
   ========================================================================== */

/* Shift the page tone slightly toward emerald (money/commission vibe) */
body.affiliate-page{
	background:
		radial-gradient(1400px 900px at 5% -10%, rgba(52,211,153,.18), transparent 65%),
		radial-gradient(1200px 800px at 110% 5%, rgba(56,189,248,.16), transparent 60%),
		radial-gradient(1000px 700px at 50% 105%, rgba(139,92,246,.14), transparent 60%),
		var(--c-bg-0);
}

/* Hero overlay tinted emerald */
body.affiliate-page .hv3-hero__aurora{
	background:conic-gradient(
		from 160deg at 50% 50%,
		transparent 0deg,
		rgba(52,211,153,.24) 60deg,
		rgba(34,211,238,.22) 160deg,
		rgba(56,189,248,.22) 240deg,
		rgba(139,92,246,.16) 320deg,
		transparent 360deg
	);
}

/* Eyebrow + dot retoned */
body.affiliate-page .hv3-hero__eyebrow{
	border-color:rgba(52,211,153,.34);
	background:linear-gradient(120deg,rgba(52,211,153,.16),rgba(56,189,248,.14));
	color:#d1fae5;
}
body.affiliate-page .hv3-hero__eyebrow-dot{
	background:linear-gradient(135deg,var(--c-emerald),var(--c-cyan));
	box-shadow:0 0 14px rgba(52,211,153,.85);
}

/* Primary button: emerald lead */
body.affiliate-page .hv3-btn--primary{
	background:linear-gradient(135deg,var(--c-emerald),var(--c-cyan));
	box-shadow:0 18px 36px -16px rgba(52,211,153,.65),inset 0 1px 0 rgba(255,255,255,.18);
}
body.affiliate-page .hv3-btn--primary::before{
	background:linear-gradient(135deg,var(--c-cyan),var(--c-violet));
}
body.affiliate-page .hv3-btn--primary:hover{
	box-shadow:0 24px 48px -18px rgba(56,189,248,.7);
}

/* Title gradient retoned */
body.affiliate-page .hv3-hero__title em{
	background:linear-gradient(110deg,var(--c-emerald),var(--c-cyan),var(--c-violet));
	background-clip:text; -webkit-background-clip:text;
}
body.affiliate-page .hv3-hero__title em::after{
	background:linear-gradient(90deg,var(--c-emerald),var(--c-cyan),var(--c-violet));
}

/* Metric value emerald */
body.affiliate-page .hv3-metric__value{
	background:linear-gradient(110deg,var(--c-emerald),var(--c-cyan),var(--c-violet));
	background-clip:text; -webkit-background-clip:text;
}

/* ----- Referral link card (right side of hero) ----------------------- */
.aff-perks{
	position:relative; overflow:hidden; isolation:isolate;
	padding:1.8rem 1.6rem 1.6rem;
	border-radius:24px;
	background:linear-gradient(160deg,rgba(15,23,42,.92),rgba(7,12,24,.92));
	border:1px solid rgba(52,211,153,.32);
	box-shadow:
		0 40px 80px -30px rgba(52,211,153,.5),
		inset 0 1px 0 rgba(255,255,255,.05);
}
.aff-perks::before{
	content:""; position:absolute; inset:-40%; z-index:-1; pointer-events:none;
	background:conic-gradient(from 0deg, transparent, rgba(52,211,153,.25), transparent 30%, rgba(56,189,248,.2) 60%, transparent);
	animation:hv3-aurora 22s linear infinite;
	filter:blur(40px);
}
.aff-perks__title{
	display:flex; align-items:center; gap:.55rem;
	font-family:'Roboto Slab','Roboto',Georgia,serif;
	font-size:1.2rem; font-weight:700; color:#f5f9ff;
	margin:0 0 1.2rem; letter-spacing:-.01em;
}
.aff-perks__title::before{
	content:""; width:10px; height:10px; border-radius:50%;
	background:linear-gradient(135deg,var(--c-emerald),var(--c-cyan));
	box-shadow:0 0 14px rgba(52,211,153,.85);
	animation:hv3-dot 2.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){ .aff-perks__title::before{ animation:none; } }
.aff-perks__list{
	list-style:none; padding:0; margin:0 0 1.4rem;
	display:flex; flex-direction:column; gap:.65rem;
}
.aff-perks__list li{
	display:flex; gap:.55rem; align-items:flex-start;
	font-size:.95rem; color:#dbe6ff; line-height:1.45;
}
.aff-perks__list .material-icons-round{
	color:#6ee7b7; font-size:20px; flex-shrink:0; margin-top:1px;
}
.aff-perks__cta{ width:100%; justify-content:center; }

/* Referral link reveal — appears after Join click */
.hero-referral{
	margin-top:1.4rem;
}
.affiliate-hidden{ display:none !important; }
.aff-referral-card{
	display:flex; flex-direction:column; gap:.5rem;
	padding:1rem 1.2rem; border-radius:16px;
	background:linear-gradient(120deg,rgba(52,211,153,.14),rgba(56,189,248,.12));
	border:1px solid rgba(52,211,153,.36);
	position:relative; overflow:hidden;
}
.aff-referral-card::after{
	content:"✓"; position:absolute; top:.7rem; right:.9rem;
	width:24px; height:24px; border-radius:50%;
	background:linear-gradient(135deg,var(--c-emerald),var(--c-cyan));
	color:#022c22; display:flex; align-items:center; justify-content:center;
	font-weight:800; font-size:.85rem;
}
.aff-referral-card__label{
	font-size:.66rem; letter-spacing:.18em; text-transform:uppercase;
	color:#a7f3d0; font-weight:700;
}
.aff-referral-card a{
	font-family:'Inter',monospace; color:#7dd3fc; font-weight:600; font-size:.92rem;
	word-break:break-all; text-decoration:none;
}
.aff-referral-card a:hover{ color:#fff; text-decoration:underline; }

/* ----- Stat trio (under hero) ---------------------------------------- */
.aff-stat-grid{
	display:grid; gap:1.2rem;
	grid-template-columns:repeat(3, 1fr);
}
@media (max-width:900px){ .aff-stat-grid{ grid-template-columns:1fr; } }
.aff-stat-card{
	position:relative; overflow:hidden; isolation:isolate;
	padding:1.8rem 1.6rem 1.6rem; border-radius:22px;
	background:linear-gradient(160deg,rgba(15,23,42,.78),rgba(7,12,24,.78));
	border:1px solid var(--c-border);
	transition:all .3s var(--ease-out);
}
.aff-stat-card::before{
	content:""; position:absolute; inset:-40% -40% auto auto; width:380px; height:380px;
	z-index:-1; pointer-events:none;
	background:radial-gradient(circle, rgba(52,211,153,.22), transparent 60%);
	filter:blur(40px); opacity:.5; transition:opacity .3s ease;
}
.aff-stat-card:nth-child(2)::before{ background:radial-gradient(circle, rgba(56,189,248,.22), transparent 60%); }
.aff-stat-card:nth-child(3)::before{ background:radial-gradient(circle, rgba(139,92,246,.22), transparent 60%); }
.aff-stat-card:hover{ transform:translateY(-4px); border-color:rgba(125,211,252,.4); box-shadow:0 30px 60px -30px rgba(52,211,153,.45); }
.aff-stat-card:hover::before{ opacity:.85; }
.aff-stat-card__label{
	display:block; font-size:.66rem; letter-spacing:.22em; text-transform:uppercase;
	color:rgba(186,230,253,.7); font-weight:700; margin-bottom:.55rem;
}
.aff-stat-card__value{
	display:block; font-family:'Roboto Slab','Roboto',Georgia,serif;
	font-size:clamp(2.2rem,2.4vw + .6rem,3.4rem); font-weight:800;
	line-height:1; letter-spacing:-.02em; margin-bottom:.85rem;
	font-variant-numeric:tabular-nums;
	background:linear-gradient(110deg,var(--c-emerald),var(--c-cyan),var(--c-violet));
	background-clip:text; -webkit-background-clip:text; color:transparent;
}
.aff-stat-card__copy{
	margin:0; font-size:.95rem; color:rgba(186,230,253,.72); line-height:1.55;
}

/* ----- Benefits (6-card bento, reuses .hv3-card) -------------------- */
/* The .hv3-card class from home-v3.css already provides full styling.
   Affiliate page uses data-tone="emerald|cyan|violet|magenta|amber" same as features. */

.aff-benefit-num{
	display:flex; align-items:center; justify-content:center;
	width:56px; height:56px; border-radius:18px;
	background:linear-gradient(135deg,var(--c-emerald),var(--c-cyan));
	color:#fff; font-family:'Roboto Slab',serif; font-size:1.6rem; font-weight:800;
	flex-shrink:0;
	box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 0 0 4px rgba(7,12,24,.95), 0 0 0 5px rgba(52,211,153,.18);
}
.hv3-card[data-tone="cyan"] .aff-benefit-num{ background:linear-gradient(135deg,var(--c-cyan),var(--c-violet)); box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 0 0 4px rgba(7,12,24,.95), 0 0 0 5px rgba(125,211,252,.18); }
.hv3-card[data-tone="violet"] .aff-benefit-num{ background:linear-gradient(135deg,var(--c-violet),var(--c-magenta)); box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 0 0 4px rgba(7,12,24,.95), 0 0 0 5px rgba(167,139,250,.22); }
.hv3-card[data-tone="magenta"] .aff-benefit-num{ background:linear-gradient(135deg,var(--c-magenta),var(--c-amber)); box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 0 0 4px rgba(7,12,24,.95), 0 0 0 5px rgba(244,114,182,.22); }
.hv3-card[data-tone="amber"] .aff-benefit-num{ background:linear-gradient(135deg,var(--c-amber),var(--c-magenta)); box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 0 0 4px rgba(7,12,24,.95), 0 0 0 5px rgba(251,191,36,.22); }
.hv3-card[data-tone="emerald"] .aff-benefit-num{ background:linear-gradient(135deg,var(--c-emerald),#22d3ee); box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 0 0 4px rgba(7,12,24,.95), 0 0 0 5px rgba(52,211,153,.22); }

/* ----- Resources section (2-col split) ------------------------------ */
.aff-resources{
	display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(2rem,3vw,4rem);
	align-items:center;
}
@media (max-width:1000px){ .aff-resources{ grid-template-columns:1fr; } }

.aff-resources__list{
	list-style:none; padding:0; margin:1.4rem 0 1.8rem;
	display:flex; flex-direction:column; gap:.65rem;
}
.aff-resources__list li{
	display:flex; gap:.55rem; align-items:flex-start;
	font-size:.96rem; color:#dbe6ff; line-height:1.5;
}
.aff-resources__list li::before{
	content:""; flex-shrink:0; width:8px; height:8px; border-radius:50%; margin-top:.55em;
	background:linear-gradient(135deg,var(--c-emerald),var(--c-cyan));
	box-shadow:0 0 10px rgba(52,211,153,.6);
}

.aff-resources__panel{
	position:relative; overflow:hidden; isolation:isolate;
	background:linear-gradient(160deg,rgba(15,23,42,.92),rgba(7,12,24,.92));
	border:1px solid rgba(52,211,153,.3);
	border-radius:26px; padding:1.8rem 1.6rem 1.6rem;
	box-shadow:0 40px 80px -30px rgba(52,211,153,.4);
}
.aff-resources__panel::before{
	content:""; position:absolute; inset:-40%; z-index:-1; pointer-events:none;
	background:conic-gradient(from 70deg, transparent, rgba(52,211,153,.25), transparent 35%, rgba(56,189,248,.2) 70%, transparent);
	animation:hv3-aurora 22s linear infinite; filter:blur(40px);
}
.aff-resources__head{
	font-family:'Roboto Slab',serif; font-size:.72rem;
	letter-spacing:.22em; text-transform:uppercase;
	color:#a7f3d0; font-weight:700; margin-bottom:1.2rem;
	padding-bottom:.9rem; border-bottom:1px solid rgba(125,211,252,.16);
}
.aff-resources__rows{
	display:flex; flex-direction:column; gap:.7rem;
}
.aff-resources__row{
	display:flex; align-items:center; justify-content:space-between;
	padding:.85rem 1.05rem; border-radius:14px;
	background:linear-gradient(120deg,rgba(20,30,52,.65),rgba(9,15,28,.65));
	border:1px solid rgba(125,211,252,.16);
	transition:all .2s ease;
}
.aff-resources__row:hover{ border-color:rgba(52,211,153,.34); transform:translateX(3px); }
.aff-resources__label{
	font-size:.78rem; color:rgba(186,230,253,.7); letter-spacing:.04em; font-weight:500;
}
.aff-resources__value{
	font-family:'Roboto Slab',serif; font-weight:700; font-size:1rem;
	background:linear-gradient(110deg,var(--c-emerald),var(--c-cyan));
	background-clip:text; -webkit-background-clip:text; color:transparent;
}
.aff-resources__foot{
	margin-top:1.2rem; padding-top:1rem; border-top:1px solid rgba(125,211,252,.12);
	font-size:.82rem; color:rgba(186,230,253,.6); line-height:1.5;
}

/* ----- FAQ accordion ------------------------------------------------- */
.aff-faq{
	display:flex; flex-direction:column; gap:.7rem;
}
.aff-faq__item{
	background:linear-gradient(160deg,rgba(15,23,42,.78),rgba(7,12,24,.78));
	border:1px solid var(--c-border);
	border-radius:18px;
	overflow:hidden;
	transition:all .3s ease;
}
.aff-faq__item.is-open{
	border-color:rgba(52,211,153,.4);
	box-shadow:0 20px 40px -22px rgba(52,211,153,.35);
}
.aff-faq__btn{
	width:100%; text-align:left; padding:1.15rem 1.5rem;
	background:transparent; border:0; cursor:pointer;
	display:flex; align-items:center; justify-content:space-between; gap:1rem;
	color:#f5f9ff; font-family:'Roboto Slab',serif; font-size:1.05rem; font-weight:600;
	letter-spacing:-.005em;
}
.aff-faq__btn:hover{ color:#fff; }
.aff-faq__btn::after{
	content:""; flex-shrink:0; width:32px; height:32px; border-radius:50%;
	background:linear-gradient(135deg,rgba(56,189,248,.22),rgba(139,92,246,.22));
	border:1px solid rgba(125,211,252,.32);
	background-image:
		linear-gradient(135deg,rgba(56,189,248,.22),rgba(139,92,246,.22)),
		linear-gradient(0deg, #cfe9ff, #cfe9ff);
	background-image:none;
	color:#cfe9ff; display:flex; align-items:center; justify-content:center;
	font-size:1.3rem; font-weight:300;
	transition:transform .3s var(--ease-out), background .3s ease;
}
.aff-faq__btn::after{ content:"+"; line-height:.85; }
.aff-faq__item.is-open .aff-faq__btn::after{
	content:"−";
	background:linear-gradient(135deg,var(--c-emerald),var(--c-cyan));
	border-color:transparent; color:#022c22;
	transform:rotate(180deg);
}
.aff-faq__panel{
	max-height:0; overflow:hidden; transition:max-height .35s var(--ease-out);
}
.aff-faq__item.is-open .aff-faq__panel{
	max-height:400px;
}
.aff-faq__body{
	padding:0 1.5rem 1.3rem; color:rgba(214,226,247,.78); font-size:.95rem; line-height:1.6;
}

/* ----- Navbar tweaks for emerald CTA ------------------------------- */
body.affiliate-page .navbar-actions .btn-primary{
	background:linear-gradient(135deg,var(--c-emerald),var(--c-cyan)) !important;
	border:0 !important; color:#fff !important;
	border-radius:999px !important;
	padding:.5rem 1.2rem !important;
	font-size:.84rem !important; font-weight:600 !important;
	box-shadow:0 12px 24px -12px rgba(52,211,153,.55);
	transition:all .2s ease;
}
body.affiliate-page .navbar-actions .btn-primary:hover{
	transform:translateY(-1px);
	box-shadow:0 18px 32px -14px rgba(56,189,248,.65);
}
body.affiliate-page .btn-login,
body.affiliate-page .navbar-actions .btn-outline-primary{
	background:transparent !important;
	border:1px solid rgba(125,211,252,.4) !important;
	color:#cfe9ff !important;
	border-radius:999px !important;
	padding:.5rem 1.2rem !important;
	font-size:.84rem !important; font-weight:600 !important;
	transition:all .2s ease;
}
body.affiliate-page .btn-login:hover,
body.affiliate-page .navbar-actions .btn-outline-primary:hover{
	background:linear-gradient(135deg,rgba(56,189,248,.2),rgba(139,92,246,.2)) !important;
	border-color:rgba(125,211,252,.7) !important;
	color:#fff !important;
	transform:translateY(-1px);
}

/* Mobile fine tuning */
@media (max-width:760px){
	.aff-stat-grid{ grid-template-columns:1fr; }
	.aff-perks{ padding:1.4rem 1.2rem; }
}