/* =========================================================================
   Skin Glow Up - Creator Program : public pages (landing + application)
   These render inside the theme, so every rule is scoped under .sga-landing
   or .sga-apply to avoid touching the rest of the site.
   ========================================================================= */

.sga-landing, .sga-apply, .sga-apply-gate {
	--sga-orange: #f26a21;
	--sga-orange-dark: #d65c15;
	--sga-orange-soft: #fdebdd;
	--sga-ink: #201c19;
	--sga-muted: #8a817a;
	--sga-border: #f0e6da;
	--sga-line: #efe7de;
	--sga-green: #1e9e5a;
	--sga-cream: #fbf4ed;
	--sga-serif: "Playfair Display", Georgia, serif;
	--sga-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--sga-shadow: 0 1px 2px rgba(32,28,25,.05), 0 10px 30px rgba(32,28,25,.05);
}
.sga-landing *, .sga-apply *, .sga-apply-gate * { box-sizing: border-box; }
.sga-landing, .sga-apply, .sga-apply-gate { font-family: var(--sga-sans); color: var(--sga-ink); line-height: 1.55; }

.sga-brand-orange { color: var(--sga-orange); }
.sga-eyebrow { display: inline-block; border: 1px solid var(--sga-orange); color: var(--sga-orange-dark); padding: 5px 14px; border-radius: 100px; font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; margin-bottom: 18px; }
.sga-sub { color: var(--sga-muted); }

/* buttons */
.sga-landing .sga-btn, .sga-apply .sga-btn, .sga-apply-gate .sga-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 13px 26px; border-radius: 10px; font-weight: 600; font-size: 15px;
	text-decoration: none; cursor: pointer; border: none; font-family: var(--sga-sans);
	transition: background .15s, border-color .15s, color .15s;
}
.sga-landing .sga-btn svg, .sga-apply .sga-btn svg { width: 16px; height: 16px; }
.sga-btn-primary { background: var(--sga-orange); color: #fff; }
.sga-btn-primary:hover { background: var(--sga-orange-dark); color: #fff; }
.sga-btn-outline { background: transparent; border: 1px solid var(--sga-orange); color: var(--sga-orange-dark); }
.sga-btn-outline:hover { background: var(--sga-orange-soft); }
.sga-btn-ghost { background: #fff; border: 1px solid var(--sga-border); color: #5f574f; }
.sga-btn-ghost:hover { border-color: var(--sga-orange); color: var(--sga-orange); }
.sga-btn-small { padding: 8px 14px; font-size: 13px; }
.sga-btn-block { width: 100%; }

/* =========================== LANDING =========================== */
.sga-landing { max-width: 1160px; margin: 0 auto; padding: 40px 20px 60px; }
.sga-landing h2 { font-family: var(--sga-serif); text-align: center; font-size: 32px; font-weight: 800; margin: 0 0 8px; }
.sga-landing > section { margin-bottom: 64px; }

/* hero */
.sga-hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; }
.sga-hero-copy h1 { font-family: var(--sga-serif); font-size: 52px; line-height: 1.08; margin: 0 0 18px; font-weight: 800; }
.sga-hero-copy > p { font-size: 16px; color: #5f574f; max-width: 460px; }
.sga-check-list { list-style: none; padding: 0; margin: 22px 0; }
.sga-check-list li { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-weight: 500; }
.sga-check-list svg { width: 20px; height: 20px; color: var(--sga-orange); flex-shrink: 0; }
.sga-hero-actions { display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap; }
.sga-hero-visual { position: relative; min-height: 380px; border-radius: 24px; background: radial-gradient(120% 120% at 70% 20%, #fde3cf 0%, #fbf1e6 55%, #f7ede2 100%); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.sga-hero-badge { width: 168px; height: 168px; border-radius: 50%; background: #fff; box-shadow: 0 20px 50px rgba(242,106,33,.2); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.sga-hero-badge span { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--sga-muted); }
.sga-hero-badge strong { font-family: var(--sga-serif); font-size: 46px; color: var(--sga-orange); line-height: 1; }
.sga-hero-chip { position: absolute; background: #fff; border-radius: 14px; padding: 10px 14px; box-shadow: var(--sga-shadow); display: flex; align-items: center; gap: 10px; font-size: 12px; }
.sga-hero-chip svg { width: 20px; height: 20px; color: var(--sga-orange); }
.sga-hero-chip span { display: flex; flex-direction: column; color: var(--sga-muted); }
.sga-hero-chip strong { font-size: 15px; color: var(--sga-ink); }
.sga-hero-chip.chip-1 { top: 40px; left: 24px; }
.sga-hero-chip.chip-2 { bottom: 44px; right: 24px; }

/* stats bar */
.sga-stats-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; background: var(--sga-orange-soft); border-radius: 18px; padding: 26px; }
.sga-stats-bar > div { display: flex; align-items: center; gap: 14px; justify-content: center; }
.sga-stat-chip { width: 46px; height: 46px; border-radius: 12px; background: #fff; color: var(--sga-orange); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sga-stat-chip svg { width: 22px; height: 22px; }
.sga-stats-bar strong { display: block; font-family: var(--sga-serif); font-size: 26px; font-weight: 800; }
.sga-stats-bar span { color: var(--sga-muted); font-size: 13px; }

/* why join */
.sga-why-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin-top: 36px; }
.sga-why-card { text-align: center; }
.sga-why-ico { width: 60px; height: 60px; border-radius: 50%; background: var(--sga-orange-soft); color: var(--sga-orange); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.sga-why-ico svg { width: 26px; height: 26px; }
.sga-why-card h4 { margin: 0 0 6px; font-size: 16px; }
.sga-why-card p { margin: 0; color: var(--sga-muted); font-size: 13px; }

/* tiers */
.sga-tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 36px; }
.sga-tier-card { border: 1px solid var(--sga-border); border-radius: 18px; padding: 30px 26px; position: relative; background: #fff; box-shadow: var(--sga-shadow); }
.sga-tier-card.is-popular { border-color: var(--sga-orange); box-shadow: 0 16px 40px rgba(242,106,33,.16); }
.sga-tier-badge { position: absolute; top: 0; left: 0; right: 0; background: var(--sga-orange); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 6px; text-align: center; border-radius: 18px 18px 0 0; }
.sga-tier-card.is-popular { padding-top: 44px; }
.sga-tier-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.sga-tier-ico { width: 50px; height: 50px; border-radius: 14px; background: var(--sga-orange-soft); color: var(--sga-orange); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sga-tier-ico svg { width: 24px; height: 24px; }
.sga-tier-head h3 { margin: 0; font-family: var(--sga-serif); font-size: 19px; }
.sga-tier-sub { color: var(--sga-muted); font-size: 13px; }
.sga-tier-rate { font-family: var(--sga-serif); font-size: 52px; font-weight: 800; color: var(--sga-orange); line-height: 1; }
.sga-tier-rate span { font-size: 22px; }
.sga-tier-label { text-transform: uppercase; letter-spacing: 1px; font-size: 12px; color: var(--sga-muted); margin: 2px 0 16px; }
.sga-tier-req { color: #5f574f; font-size: 14px; margin: 0; padding-top: 16px; border-top: 1px solid var(--sga-line); }

/* testimonials */
.sga-testimonials .sga-sub { text-align: center; margin: 0 0 36px; }
.sga-testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.sga-testimonial-card { border: 1px solid var(--sga-border); border-radius: 18px; padding: 24px; background: #fff; box-shadow: var(--sga-shadow); }
.sga-testimonial-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.sga-testi-avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--sga-orange-soft); color: var(--sga-orange-dark); font-weight: 800; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sga-testimonial-head > div { flex-grow: 1; }
.sga-testimonial-head strong { display: block; font-size: 15px; }
.sga-tier-pill { background: var(--sga-orange-soft); color: var(--sga-orange-dark); padding: 3px 12px; border-radius: 100px; font-size: 11px; font-weight: 700; }
.sga-testi-quote { color: #5f574f; font-style: italic; margin: 0 0 16px; }
.sga-testimonial-stats { display: flex; gap: 28px; border-top: 1px solid var(--sga-line); padding-top: 14px; }
.sga-testimonial-stats strong { display: block; font-family: var(--sga-serif); font-size: 20px; color: var(--sga-orange-dark); }
.sga-testimonial-stats span { color: var(--sga-muted); font-size: 12px; }

/* faq */
.sga-faq .sga-sub { text-align: center; margin: 0 0 30px; }
.sga-faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; max-width: 960px; margin: 0 auto; }
.sga-faq-item { border: 1px solid var(--sga-border); border-radius: 12px; padding: 16px 18px; background: #fff; }
.sga-faq-item summary { font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.sga-faq-item summary::-webkit-details-marker { display: none; }
.sga-faq-mark { position: relative; width: 16px; height: 16px; flex-shrink: 0; }
.sga-faq-mark::before, .sga-faq-mark::after { content: ""; position: absolute; background: var(--sga-orange); border-radius: 2px; transition: transform .2s; }
.sga-faq-mark::before { top: 7px; left: 0; width: 16px; height: 2px; }
.sga-faq-mark::after { top: 0; left: 7px; width: 2px; height: 16px; }
.sga-faq-item[open] .sga-faq-mark::after { transform: scaleY(0); }
.sga-faq-item p { margin: 12px 0 0; color: var(--sga-muted); font-size: 14px; }

/* final cta */
.sga-final-cta { text-align: center; background: var(--sga-orange-soft); border-radius: 22px; padding: 50px 20px; margin-bottom: 0; }
.sga-final-cta h2 { margin-bottom: 8px; }
.sga-final-cta > p { color: #5f574f; }
.sga-cta-feats { display: flex; justify-content: center; gap: 28px; flex-wrap: wrap; margin: 22px 0; }
.sga-cta-feats span { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; }
.sga-cta-feats svg { width: 18px; height: 18px; color: var(--sga-orange); }
.sga-cta-free { color: var(--sga-orange-dark); font-weight: 600; margin: 12px 0 0; }

/* =========================== APPLICATION =========================== */
.sga-apply { display: grid; grid-template-columns: 340px 1fr; max-width: 1280px; margin: 0 auto; min-height: 100%; }
.sga-apply-hero { background: linear-gradient(180deg,#fdefe2,#f7ede2); padding: 48px 34px; }
.sga-apply-hero h1 { font-family: var(--sga-serif); font-size: 38px; line-height: 1.1; margin: 8px 0 16px; font-weight: 800; }
.sga-apply-hero > p { color: #5f574f; }
.sga-benefit-list { list-style: none; padding: 0; margin: 26px 0; }
.sga-benefit-list li { display: flex; align-items: center; gap: 12px; padding: 9px 0; font-weight: 500; font-size: 14px; }
.sga-benefit-ico { width: 38px; height: 38px; border-radius: 10px; background: #fff; color: var(--sga-orange); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sga-benefit-ico svg { width: 18px; height: 18px; }
.sga-promise { display: flex; gap: 12px; background: #fff; border-radius: 14px; padding: 16px; margin-top: 30px; box-shadow: var(--sga-shadow); }
.sga-promise-ico { color: var(--sga-orange); flex-shrink: 0; }
.sga-promise-ico svg { width: 22px; height: 22px; }
.sga-promise strong { display: block; font-size: 14px; margin-bottom: 4px; }
.sga-promise p { margin: 0; color: var(--sga-muted); font-size: 13px; }

.sga-apply-main { padding: 40px; background: #fff; }
.sga-apply-head h2 { font-family: var(--sga-serif); font-size: 30px; margin: 0 0 6px; font-weight: 800; }
.sga-apply-head .sga-sub { max-width: 620px; }
.sga-steps { display: flex; list-style: none; padding: 0; margin: 26px 0 34px; gap: 8px; }
.sga-steps li { display: flex; align-items: center; gap: 8px; color: var(--sga-muted); font-size: 13px; font-weight: 600; flex: 1; }
.sga-steps li::after { content: ""; flex-grow: 1; height: 2px; background: var(--sga-line); margin-left: 4px; }
.sga-steps li:last-child::after { display: none; }
.sga-steps li span { width: 30px; height: 30px; border-radius: 50%; background: #eee3d6; color: var(--sga-muted); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }
.sga-steps li.is-active { color: var(--sga-ink); }
.sga-steps li.is-active span { background: var(--sga-orange); color: #fff; }

.sga-apply-grid { display: grid; grid-template-columns: 1fr 280px; gap: 28px; align-items: start; }

/* form */
.sga-apply-form fieldset { border: 1px solid var(--sga-border); border-radius: 14px; padding: 22px; margin: 0 0 20px; }
.sga-apply-form legend { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; padding: 0 8px; }
.sga-legend-ico { color: var(--sga-orange); display: inline-flex; }
.sga-legend-ico svg { width: 20px; height: 20px; }
.sga-apply-form label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 6px; }
.sga-apply-form input[type="text"], .sga-apply-form input[type="email"], .sga-apply-form input[type="number"],
.sga-apply-form select, .sga-apply-form textarea {
	width: 100%; padding: 11px 12px; border: 1px solid var(--sga-border); border-radius: 9px;
	box-sizing: border-box; font-family: var(--sga-sans); font-size: 14px; background: #fff; color: var(--sga-ink);
}
.sga-apply-form input:focus, .sga-apply-form select:focus, .sga-apply-form textarea:focus { outline: none; border-color: var(--sga-orange); box-shadow: 0 0 0 3px var(--sga-orange-soft); }
.sga-apply-form input[readonly] { background: #f7f2ec; color: var(--sga-muted); }
.sga-row { margin-bottom: 14px; }
.sga-row p { margin: 0 0 14px; }
.sga-row-2, .sga-row-3 { display: grid; gap: 16px; }
.sga-row-2 { grid-template-columns: 1fr 1fr; }
.sga-row-3 { grid-template-columns: 1fr 1fr 1fr; }
.sga-row-2 > p, .sga-row-3 > p { margin-bottom: 0; }

/* social repeater */
.sga-social-head, .sga-social-row { display: grid; grid-template-columns: 1.1fr 1.4fr 1fr 44px; gap: 12px; align-items: center; }
.sga-social-head { margin-bottom: 8px; }
.sga-social-head span { font-size: 12px; font-weight: 600; color: var(--sga-muted); }
.sga-social-row { margin-bottom: 12px; }
.sga-social-plat { position: relative; display: flex; align-items: center; }
.sga-social-ico { position: absolute; left: 10px; color: var(--sga-orange); display: inline-flex; pointer-events: none; }
.sga-social-ico svg { width: 18px; height: 18px; }
.sga-social-plat select { padding-left: 36px; }
.sga-social-del { border: 1px solid var(--sga-border); background: #fff; border-radius: 9px; height: 42px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--sga-muted); }
.sga-social-del:hover { border-color: #e0b4b4; color: var(--sga-red, #c0392b); }
.sga-social-del svg { width: 18px; height: 18px; }
#sga-add-social { margin-top: 4px; }

/* dropzone */
.sga-dropzone { display: flex; flex-direction: column; align-items: center; gap: 6px; border: 2px dashed #e6cdb4; border-radius: 14px; padding: 30px; text-align: center; cursor: pointer; transition: border-color .15s, background .15s; }
.sga-dropzone:hover, .sga-dropzone.is-drag { border-color: var(--sga-orange); background: var(--sga-orange-soft); }
.sga-dropzone-ico { color: var(--sga-orange); }
.sga-dropzone-ico svg { width: 30px; height: 30px; }
.sga-dropzone-main { font-weight: 600; font-size: 14px; }
.sga-dropzone-sub { color: var(--sga-muted); font-size: 12px; }
.sga-dropzone input[type="file"] { display: none; }

/* what next + terms */
.sga-whatnext { background: var(--sga-orange-soft); border-radius: 14px; padding: 18px 20px; margin-bottom: 20px; }
.sga-whatnext strong { display: block; margin-bottom: 10px; }
.sga-whatnext ul { list-style: none; margin: 0; padding: 0; }
.sga-whatnext li { display: flex; align-items: center; gap: 10px; padding: 4px 0; font-size: 14px; }
.sga-whatnext svg { width: 18px; height: 18px; color: var(--sga-green); flex-shrink: 0; }
.sga-terms { font-size: 14px; margin: 4px 0 18px; }
.sga-terms label { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.sga-terms input { width: 18px; height: 18px; }

/* rail */
.sga-apply-rail { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 18px; }
.sga-rail-card { border: 1px solid var(--sga-border); border-radius: 16px; padding: 22px; background: var(--sga-cream); }
.sga-rail-card h4 { font-family: var(--sga-serif); margin: 0 0 14px; font-size: 17px; }
.sga-rail-benefits { list-style: none; margin: 0; padding: 0; }
.sga-rail-benefits li { display: flex; gap: 12px; align-items: flex-start; padding: 9px 0; }
.sga-rail-ico { width: 36px; height: 36px; border-radius: 10px; background: #fff; color: var(--sga-orange); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sga-rail-ico svg { width: 18px; height: 18px; }
.sga-rail-benefits strong { display: block; font-size: 13px; }
.sga-rail-benefits div { font-size: 12px; color: var(--sga-muted); }
.sga-rail-contact { display: flex; align-items: center; gap: 10px; font-size: 13px; margin: 10px 0; }
.sga-rail-contact svg { width: 18px; height: 18px; color: var(--sga-orange); flex-shrink: 0; }
.sga-rail-contact a { color: var(--sga-orange-dark); text-decoration: none; }
.sga-rail-contact small { color: var(--sga-muted); }

/* gate / status */
.sga-apply-gate { max-width: 560px; margin: 60px auto; text-align: center; padding: 40px 24px; background: var(--sga-cream); border-radius: 18px; }
.sga-apply-gate h2 { font-family: var(--sga-serif); margin: 0 0 12px; }
.sga-apply-gate p { color: #5f574f; }

/* =========================== responsive =========================== */
@media (max-width: 1000px) {
	.sga-hero, .sga-stats-bar, .sga-why-grid, .sga-tier-grid, .sga-testimonial-grid, .sga-faq-grid { grid-template-columns: 1fr; }
	.sga-why-grid { grid-template-columns: repeat(2, 1fr); }
	.sga-apply { grid-template-columns: 1fr; }
	.sga-apply-grid { grid-template-columns: 1fr; }
	.sga-apply-rail { position: static; flex-direction: row; flex-wrap: wrap; }
	.sga-apply-rail .sga-rail-card { flex: 1; min-width: 240px; }
}
@media (max-width: 640px) {
	.sga-hero-copy h1 { font-size: 38px; }
	.sga-stats-bar, .sga-why-grid { grid-template-columns: 1fr; }
	.sga-row-2, .sga-row-3 { grid-template-columns: 1fr; }
	.sga-social-head { display: none; }
	.sga-social-row { grid-template-columns: 1fr 1fr; }
	.sga-social-plat { grid-column: 1 / -1; }
	.sga-apply-main { padding: 24px 18px; }
	.sga-apply-hero { padding: 32px 22px; }
	.sga-steps li span { width: 26px; height: 26px; }
}