/* =========================================================
   MyLinkz – landing styles (index + about)
   Clean base with a playful touch.
   Loaded from inc/meta.php only for $meta 'startpage' & 'about'.
   The header menu (header_startpage.php) is intentionally NOT restyled.
   ========================================================= */

:root {
	--ml-ink: #16112E;
	--ml-text: #4A4566;
	--ml-muted: #7A7596;
	--ml-bg: #FAFAFE;
	--ml-line: #E8E4F7;
	--ml-violet: #6C47FF;
	--ml-violet-dark: #5634E6;
	--ml-pink: #FF4F9A;
	--ml-ok: #15803D;

	/* soft playful tints */
	--ml-t-pink: #FFE4F1;
	--ml-t-sky: #E1F1FF;
	--ml-t-lime: #EAF8D2;
	--ml-t-sun: #FFF2C2;
	--ml-t-violet: #ECE6FF;
	--ml-t-peach: #FFE8DA;

	--ml-radius: 24px;
	--ml-shadow: 0 10px 30px rgba(22, 17, 46, 0.07);
	--ml-shadow-lg: 0 24px 60px rgba(22, 17, 46, 0.12);
	--ml-grad: linear-gradient(90deg, var(--ml-violet), var(--ml-pink));
	--ml-display: "Bricolage Grotesque", Poppins, system-ui, sans-serif;
	--ml-hand: Caveat, "Comic Sans MS", cursive;

	/* ---- Background theme (change these to re-skin the page) ---- */
	--ml-glow-a: rgba(108, 71, 255, 0.16);   /* light sections: top-left glow  */
	--ml-glow-b: rgba(59, 130, 246, 0.12);   /* light sections: top-right glow */
	--ml-screen: linear-gradient(160deg, #EDE7FF 0%, #E3EAFF 100%); /* phone screen */
	--ml-soft: linear-gradient(135deg, #F1ECFF, #E8EEFF);           /* soft highlight boxes */
	/* Dark "Midnight violet" hero */
	--ml-night: #16112E;
	--ml-night-glow-a: rgba(108, 71, 255, 0.55);
	--ml-night-glow-b: rgba(59, 130, 246, 0.35);
}

/* ----- Page shell (background + main width only) ----- */
html body { background: var(--ml-bg); }
html body .wrapper { background: var(--ml-bg); }
html body .main { padding: 0; margin: 0; max-width: none; width: 100%; }


/* =========================================================
   Scope
   ========================================================= */
.ml { font-family: Poppins, system-ui, sans-serif; color: var(--ml-text); font-size: 16px; line-height: 1.6; overflow-x: hidden; }
.ml *, .ml *::before, .ml *::after { box-sizing: border-box; }
.ml :where(h1, h2, h3) { font-family: var(--ml-display); color: var(--ml-ink); margin: 0; letter-spacing: -0.025em; }
.ml :where(p) { margin: 0; }
.ml :where(a) { text-decoration: none; }
.ml svg { flex-shrink: 0; }

.ml-container { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.ml-section { padding: 96px 0; position: relative; }
.ml-head { text-align: center; max-width: 660px; margin: 0 auto 56px; }
.ml-head h2 { font-size: 2.9rem; line-height: 1.08; font-weight: 800; margin-bottom: 14px; }
.ml-head p { font-size: 1.1rem; color: var(--ml-muted); }

.ml-tag {
	display: inline-block; font-size: 0.8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
	color: var(--ml-violet); background: var(--ml-t-violet); padding: 6px 14px; border-radius: 999px; margin-bottom: 16px;
}
.ml-hand { font-family: var(--ml-hand); font-weight: 700; }

/* Highlighted words: gradient text + soft marker */
.ml-hl { background: var(--ml-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ml-hl.lime, .ml-hl.sky, .ml-hl.sun { background: none; color: inherit; position: relative; display: inline-block; z-index: 0; }
.ml-hl.lime::after, .ml-hl.sky::after, .ml-hl.sun::after {
	content: ""; position: absolute; left: -4%; right: -4%; bottom: 8%; height: 34%; z-index: -1; border-radius: 6px; transform: rotate(-1.5deg);
}
.ml-hl.lime::after { background: #D6F5A6; }
.ml-hl.sky::after { background: #BFE3FF; }
.ml-hl.sun::after { background: #FFE58A; }
.ml-squiggle { position: relative; display: inline-block; }
.ml-squiggle svg { position: absolute; left: -2%; bottom: -0.16em; width: 104%; height: .3em; color: var(--ml-pink); }

/* ----- Buttons ----- */
.ml-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	font-family: var(--ml-display); font-weight: 700; font-size: 1.05rem; line-height: 1;
	color: #fff; background: var(--ml-violet); border: 0; border-radius: 999px; padding: 17px 28px;
	box-shadow: 0 8px 24px rgba(108, 71, 255, .35); cursor: pointer; white-space: nowrap;
	transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.ml-btn:hover, .ml-btn:focus { color: #fff; background: var(--ml-violet-dark); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(108, 71, 255, .45); }
.ml-btn:active { transform: translateY(0); }
.ml-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.ml-btn svg { transition: transform .15s ease; }
.ml-btn:hover svg { transform: translateX(3px); }
.ml-btn.pink { background: var(--ml-grad); box-shadow: 0 10px 26px rgba(255, 79, 154, .35); }
.ml-btn.light { background: #fff; color: var(--ml-ink); box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.ml-btn.light:hover, .ml-btn.light:focus { background: var(--ml-t-violet); color: var(--ml-ink); }

/* ----- Cards ----- */
.ml-card { background: #fff; border: 1px solid var(--ml-line); border-radius: var(--ml-radius); box-shadow: var(--ml-shadow); padding: 28px; }

/* =========================================================
   HERO
   ========================================================= */
.ml-hero {
	padding: 150px 0 100px; position: relative;
	background:
		radial-gradient(900px 500px at 85% 10%, var(--ml-glow-b), transparent 60%),
		radial-gradient(800px 500px at 5% 0%, var(--ml-glow-a), transparent 60%);
}
.ml-hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
.ml-hero .ml-tag { background: #fff; color: var(--ml-ink); border: 1px solid var(--ml-line); text-transform: none; letter-spacing: 0; font-size: .88rem; font-weight: 500; box-shadow: 0 2px 8px rgba(22,17,46,.05); }
.ml-hero h1 { font-size: 4.4rem; line-height: 1.02; font-weight: 800; margin-bottom: 22px; }
.ml-hero-note { display: inline-block; font-size: 1.7rem; transform: rotate(-6deg); margin-left: 10px; color: var(--ml-pink); letter-spacing: 0; }
.ml-hero-sub { font-size: 1.2rem; max-width: 520px; margin-bottom: 32px !important; }

/* Claim form (works with js/usernameValidation.js) */
.ml-claim label { display: block; font-weight: 600; font-size: .95rem; color: var(--ml-ink); margin-bottom: 10px; }
.ml .ml-claim-box.input-group {
	display: flex; flex-wrap: nowrap; align-items: center; width: 100%; max-width: 560px;
	background: #fff; border: 2px solid var(--ml-claim-border, var(--ml-line)); border-radius: 999px; padding: 6px;
	box-shadow: 0 14px 40px rgba(22, 17, 46, .08);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.ml .ml-claim-box.highlighted { border-color: var(--ml-violet); box-shadow: 0 0 0 5px rgba(108, 71, 255, .12), 0 14px 40px rgba(108, 71, 255, .15); }
.ml .ml-claim-box:has(.is-valid) { border-color: #4CC38A; box-shadow: 0 0 0 5px rgba(76, 195, 138, .15), 0 14px 40px rgba(22,17,46,.08); }
.ml .ml-claim-box:has(.is-invalid) { border-color: var(--ml-pink); box-shadow: 0 0 0 5px rgba(255, 79, 154, .13), 0 14px 40px rgba(22,17,46,.08); }
.ml-claim-prefix { padding-left: 20px; font-weight: 600; color: var(--ml-ink); font-size: 1.08rem; white-space: nowrap; user-select: none; }
.ml .ml-claim-box input {
	flex: 1; min-width: 0; border: 0; background: transparent; box-shadow: none; height: auto;
	font-family: Poppins, sans-serif; font-size: 1.08rem; font-weight: 600; color: var(--ml-violet); padding: 13px 8px 13px 1px;
}
.ml .ml-claim-box input::placeholder { color: #B9B4CF; font-weight: 500; }
.ml .ml-claim-box input:focus { outline: none; box-shadow: none; }
.ml-shake { animation: mlShake .45s ease; }
@keyframes mlShake { 0%,100% { translate: 0; } 20% { translate: -7px; } 40% { translate: 6px; } 60% { translate: -4px; } 80% { translate: 2px; } }

/* Feedback pill – classes set by usernameValidation.js */
.ml #usernameFeedback { display: inline-flex; align-items: center; gap: 8px; margin: 16px 0 0 12px; padding: 0; font-weight: 600; font-size: .92rem; border-radius: 999px; }
.ml #usernameFeedback:empty { display: none; }
.ml #usernameFeedback.success, .ml #usernameFeedback.error, .ml #usernameFeedback.warning { padding: 6px 16px 6px 12px; animation: mlPop .25s ease; }
.ml #usernameFeedback.success { background: #DCF7E6; color: #11663A; }
.ml #usernameFeedback.error { background: var(--ml-t-pink); color: #B0145A; }
.ml #usernameFeedback.warning { background: var(--ml-t-sun); color: #8A5A00; }
.ml #usernameFeedback.success::before { content: "🎉"; }
.ml #usernameFeedback.error::before { content: "😬"; }
.ml #usernameFeedback.warning::before { content: "✋"; }
.ml #usernameFeedback a { color: inherit; text-decoration: underline; }
@keyframes mlPop { 0% { transform: scale(.9); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

.ml-perks { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 20px; }
.ml-perk { font-size: .9rem; color: var(--ml-muted); }
.ml-login-hint { margin-top: 16px !important; font-size: .9rem; color: var(--ml-muted); }
.ml-login-hint a { color: var(--ml-violet); font-weight: 600; }

/* Phone */
.ml-phone-wrap { position: relative; display: flex; justify-content: center; padding: 20px 0; }
.ml-phone { position: relative; width: 300px; padding: 12px; border-radius: 46px; background: var(--ml-ink); box-shadow: 0 40px 80px rgba(22, 17, 46, .28); transform: rotate(2deg); z-index: 2; }
.ml-phone-screen { position: relative; border-radius: 36px; overflow: hidden; padding: 46px 20px 26px; text-align: center; min-height: 560px; background: var(--ml-screen); }
.ml-avatar {
	width: 86px; height: 86px; margin: 0 auto 12px; border-radius: 50%; border: 4px solid #fff;
	background: var(--ml-grad); display: flex; align-items: center; justify-content: center;
	font-family: var(--ml-display); font-weight: 800; font-size: 2.2rem; color: #fff; text-transform: uppercase;
	box-shadow: 0 8px 20px rgba(108, 71, 255, .3);
}
.ml-handle { font-family: var(--ml-display); font-weight: 700; font-size: 1.15rem; color: var(--ml-ink); word-break: break-all; }
.ml-bio { font-size: .8rem; color: var(--ml-text); margin: 2px 0 18px !important; }
.ml-plink { display: block; background: #fff; color: var(--ml-ink); font-weight: 500; font-size: .85rem; border-radius: 14px; padding: 12px; margin-bottom: 10px; box-shadow: 0 3px 10px rgba(22, 17, 46, .06); }
.ml-plink:nth-of-type(1) { background: var(--ml-ink); color: #fff; }
.ml-psocial { display: flex; justify-content: center; gap: 10px; margin-top: 16px; }
.ml-psocial i { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.85); display: flex; align-items: center; justify-content: center; font-style: normal; font-size: .9rem; }
.ml-purl { margin-top: 16px; font-size: .75rem; color: var(--ml-muted); }

/* Availability stamp */
.ml-stamp {
	position: absolute; top: 140px; left: 50%; z-index: 3; pointer-events: none;
	font-family: var(--ml-display); font-weight: 800; font-size: 1.35rem; letter-spacing: .04em; color: #fff;
	padding: 6px 16px; border-radius: 12px; box-shadow: 0 10px 24px rgba(22,17,46,.2);
	opacity: 0; transform: translateX(-50%) rotate(-10deg) scale(1.8);
	transition: opacity .2s ease, transform .3s cubic-bezier(.2, 1.6, .4, 1);
}
.ml-stamp.show { opacity: 1; transform: translateX(-50%) rotate(-10deg) scale(1); }
.ml-stamp.ok { background: #22B26B; }
.ml-stamp.no { background: var(--ml-pink); }

/* Floating cards around phone */
.ml-sticker {
	position: absolute; z-index: 4; background: #fff; border-radius: 16px; padding: 11px 16px;
	box-shadow: 0 16px 40px rgba(22, 17, 46, .14); font-family: var(--ml-display); font-weight: 700; color: var(--ml-ink); font-size: .95rem; line-height: 1.25;
}
.ml-sticker small { display: block; font-family: Poppins, sans-serif; font-weight: 400; font-size: .75rem; color: var(--ml-muted); }
.ml-sticker-1 { top: 70px; left: -20px; animation: mlBob 6s ease-in-out infinite; }
.ml-sticker-2 { bottom: 70px; right: -16px; animation: mlBob 6s ease-in-out infinite 3s; }
@keyframes mlBob { 0%,100% { translate: 0 0; } 50% { translate: 0 -10px; } }
.ml-arrow-note { position: absolute; z-index: 4; top: 0; right: 10px; font-size: 1.6rem; transform: rotate(8deg); color: var(--ml-violet); }
.ml-arrow-note svg { display: block; margin: -4px 0 0 -30px; }

/* Confetti */
.ml-confetti { position: fixed; width: 9px; height: 13px; border-radius: 3px; pointer-events: none; z-index: 9999; }

/* =========================================================
   MARQUEE (calm strip)
   ========================================================= */
.ml-marquee { background: #fff; border-top: 1px solid var(--ml-line); border-bottom: 1px solid var(--ml-line); overflow: hidden; padding: 18px 0; }
.ml-marquee-track { display: flex; width: max-content; animation: mlMarquee 34s linear infinite; }
.ml-marquee span { font-family: var(--ml-display); font-weight: 700; font-size: 1.15rem; color: var(--ml-ink); padding: 0 20px; white-space: nowrap; }
.ml-marquee span.star { background: var(--ml-grad); -webkit-background-clip: text; background-clip: text; color: transparent; padding: 0; }
@keyframes mlMarquee { to { transform: translateX(-50%); } }

/* =========================================================
   STEPS
   ========================================================= */
.ml-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ml-step { padding: 32px 28px; transition: transform .2s ease, box-shadow .2s ease; }
.ml-step:hover { transform: translateY(-4px); box-shadow: var(--ml-shadow-lg); }
.ml-step-num { width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-family: var(--ml-display); font-weight: 800; font-size: 1.4rem; color: var(--ml-ink); margin-bottom: 20px; }
.ml-step:nth-child(1) .ml-step-num { background: var(--ml-t-sun); }
.ml-step:nth-child(2) .ml-step-num { background: var(--ml-t-sky); }
.ml-step:nth-child(3) .ml-step-num { background: var(--ml-t-lime); }
.ml-step h3 { font-size: 1.3rem; font-weight: 700; margin-bottom: 8px; }
.ml-step p { color: var(--ml-muted); }

/* =========================================================
   BENTO FEATURES
   ========================================================= */
.ml-bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.ml-bento .ml-card { border: 0; box-shadow: none; transition: transform .2s ease, box-shadow .2s ease; overflow: hidden; position: relative; }
.ml-bento .ml-card:not([class*="b-"]) { border: 1px solid var(--ml-line); }
.ml-bento .ml-card:hover { transform: translateY(-4px); box-shadow: var(--ml-shadow-lg); }
.ml-bento .span-2 { grid-column: span 2; }
.ml-bento h3 { font-size: 1.3rem; font-weight: 700; margin-bottom: 6px; }
.ml-bento p { color: var(--ml-text); font-size: .95rem; }
.ml-emoji { font-size: 2.2rem; line-height: 1; margin-bottom: 14px; display: inline-block; }
.ml-card:hover .ml-emoji { animation: mlWiggle .5s ease; }
@keyframes mlWiggle { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-12deg); } 75% { transform: rotate(10deg); } }
.b-pink { background: var(--ml-t-pink); }
.b-sky { background: var(--ml-t-sky); }
.b-lime { background: var(--ml-t-lime); }
.b-sun { background: var(--ml-t-sun); }
.b-violet { background: var(--ml-t-violet); }
.b-orange { background: var(--ml-t-peach); }
.ml-urlpill { display: inline-block; margin-top: 18px; background: #fff; border-radius: 999px; padding: 8px 16px; font-weight: 600; color: var(--ml-ink); box-shadow: 0 4px 14px rgba(22,17,46,.08); }
.ml-urlpill b { color: var(--ml-violet); font-weight: 600; }
.ml-bars { display: flex; align-items: flex-end; gap: 6px; height: 60px; margin-top: 16px; }
.ml-bars i { flex: 1; background: rgba(22, 17, 46, .15); border-radius: 6px 6px 2px 2px; transform-origin: bottom; animation: mlGrow 1.2s cubic-bezier(.2,1.4,.4,1) both; }
.ml-bars i:nth-child(1) { height: 30%; animation-delay: .05s; }
.ml-bars i:nth-child(2) { height: 55%; animation-delay: .1s; }
.ml-bars i:nth-child(3) { height: 40%; animation-delay: .15s; }
.ml-bars i:nth-child(4) { height: 75%; animation-delay: .2s; }
.ml-bars i:nth-child(5) { height: 60%; animation-delay: .25s; }
.ml-bars i:nth-child(6) { height: 100%; background: var(--ml-grad); animation-delay: .3s; }
@keyframes mlGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.ml-socials-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.ml-socials-row span { background: #fff; border-radius: 999px; padding: 4px 12px; font-size: .8rem; font-weight: 500; color: var(--ml-ink); }

/* =========================================================
   SHOWCASE (real page)
   ========================================================= */
.ml-showcase {
	border-radius: 32px; padding: 64px 56px; display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: center; position: relative; overflow: hidden;
	background:
		radial-gradient(600px 300px at 90% 0%, rgba(255, 79, 154, 0.45), transparent 60%),
		radial-gradient(600px 300px at 0% 100%, rgba(108, 71, 255, 0.6), transparent 60%),
		var(--ml-ink);
}
.ml-showcase h2 { color: #fff; font-size: 2.7rem; line-height: 1.08; font-weight: 800; margin-bottom: 16px; }
.ml-showcase p { color: rgba(255,255,255,.75); font-size: 1.1rem; margin-bottom: 30px !important; max-width: 460px; }
.ml-showcase .ml-hand { color: #FFB3D6; font-size: 1.7rem; display: inline-block; transform: rotate(-3deg); margin-bottom: 6px; }
.ml-mini-link { display: block; }
.ml-mini-phone { width: 290px; height: 580px; border-radius: 44px; padding: 11px; background: #0B0818; box-shadow: 0 30px 60px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.12) inset; transform: rotate(-2deg); position: relative; transition: transform .2s ease; }
.ml-mini-link:hover .ml-mini-phone { transform: rotate(0deg) scale(1.02); }
.ml-mini-screen { width: 100%; height: 100%; border-radius: 34px; overflow: hidden; background: #fff; position: relative; }
.ml-mini-screen iframe { position: absolute; top: 0; left: 0; width: 390px; height: 760px; border: 0; transform: scale(.687); transform-origin: 0 0; pointer-events: none; }
.ml-mini-fallback { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; color: var(--ml-ink); font-weight: 600; padding: 20px; }

/* =========================================================
   AUDIENCE CHIPS
   ========================================================= */
.ml-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: 860px; margin: 0 auto; }
.ml-chip { font-weight: 500; color: var(--ml-ink); background: #fff; border: 1px solid var(--ml-line); border-radius: 999px; padding: 11px 20px; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; cursor: default; }
.ml-chip:hover { transform: translateY(-3px) rotate(-2deg); box-shadow: var(--ml-shadow); background: var(--ml-t-violet); }

/* =========================================================
   PRICING
   ========================================================= */
.ml-pricing-bg { background: linear-gradient(180deg, #F3F0FF, #FBFAFF); }
.ml-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 880px; margin: 0 auto; }
.ml-plan { padding: 36px; position: relative; display: flex; flex-direction: column; }
.ml-plan.free { border: 2px solid var(--ml-violet); box-shadow: 0 24px 60px rgba(108, 71, 255, .18); }
.ml-plan h3 { font-size: 1.3rem; font-weight: 700; }
.ml-price { font-family: var(--ml-display); font-weight: 800; font-size: 3.6rem; line-height: 1.05; margin: 10px 0 6px; letter-spacing: -0.03em; background: var(--ml-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ml-plan.premium .ml-price { font-size: 2rem; background: none; color: var(--ml-ink); margin-top: 16px; }
.ml-plan-desc { color: var(--ml-muted); margin-bottom: 22px !important; }
.ml-plan ul { list-style: none; margin: 0 0 28px; padding: 0; flex: 1; }
.ml-plan li { display: flex; gap: 10px; align-items: center; padding: 6px 0; color: var(--ml-ink); }
.ml-plan li::before { content: "✓"; flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--ml-t-violet); color: var(--ml-violet); display: inline-flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 800; }
.ml-plan.premium li::before { content: "✦"; background: var(--ml-t-pink); color: var(--ml-pink); }
.ml-plan .ml-btn { width: 100%; }
.ml-plan.premium .ml-btn.light { box-shadow: none; border: 2px solid var(--ml-line); }
.ml-plan-sticker { position: absolute; top: -14px; left: 36px; background: var(--ml-grad); color: #fff; font-size: .78rem; font-weight: 600; padding: 4px 12px; border-radius: 999px; }

/* =========================================================
   FAQ
   ========================================================= */
.ml-faq { max-width: 760px; margin: 0 auto; }
.ml-faq details { background: #fff; border: 1px solid var(--ml-line); border-radius: 18px; margin-bottom: 12px; padding: 0 24px; transition: box-shadow .15s ease; }
.ml-faq details[open] { box-shadow: var(--ml-shadow); }
.ml-faq summary { list-style: none; cursor: pointer; padding: 20px 0; font-weight: 600; color: var(--ml-ink); display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.ml-faq summary::-webkit-details-marker { display: none; }
.ml-faq summary::after { content: "+"; flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--ml-t-violet); color: var(--ml-violet); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; font-weight: 400; transition: transform .2s ease, background .2s ease; }
.ml-faq details[open] summary::after { transform: rotate(45deg); background: var(--ml-t-pink); color: var(--ml-pink); }
.ml-faq details p { padding: 0 0 20px; color: var(--ml-muted); }

/* =========================================================
   FINAL CTA
   ========================================================= */
.ml-cta { padding: 20px 0 96px; }
.ml-cta-box {
	position: relative; overflow: hidden; border-radius: 32px; padding: 76px 32px; text-align: center;
	background:
		radial-gradient(600px 300px at 90% 0%, rgba(255, 79, 154, 0.45), transparent 60%),
		radial-gradient(600px 300px at 0% 100%, rgba(108, 71, 255, 0.6), transparent 60%),
		var(--ml-ink);
}
.ml-cta-box h2 { color: #fff; font-size: 3rem; line-height: 1.08; font-weight: 800; margin-bottom: 14px; }
.ml-cta-box p { color: rgba(255,255,255,.75); font-size: 1.1rem; margin-bottom: 32px !important; }
.ml-cta-emoji { position: absolute; font-size: 2.6rem; animation: mlBob 6s ease-in-out infinite; }
.ml-cta-emoji.e1 { left: 7%; top: 22%; }
.ml-cta-emoji.e2 { left: 13%; bottom: 16%; animation-delay: 2s; }
.ml-cta-emoji.e3 { right: 9%; bottom: 22%; animation-delay: 4s; }

/* Sticky mobile CTA */
.ml-sticky { position: fixed; left: 12px; right: 12px; bottom: 14px; z-index: 30; display: none; transform: translateY(140%); transition: transform .25s ease; }
.ml-sticky.show { transform: translateY(0); }
.ml-sticky .ml-btn { width: 100%; }

/* =========================================================
   ABOUT PAGE
   ========================================================= */
.ml-about-hero {
	padding: 150px 0 60px; text-align: center; position: relative;
	background:
		radial-gradient(800px 420px at 85% 0%, var(--ml-glow-b), transparent 60%),
		radial-gradient(800px 420px at 10% 0%, var(--ml-glow-a), transparent 60%);
}
.ml-about-hero h1 { font-size: 4rem; line-height: 1.04; font-weight: 800; margin-bottom: 20px; }
.ml-about-hero .ml-hero-sub { margin: 0 auto; }
.ml-unicorn { font-size: 4rem; display: inline-block; animation: mlBob 5s ease-in-out infinite; margin-bottom: 6px; }
.ml-mission { max-width: 820px; margin: 0 auto; padding: 48px 48px 38px; position: relative; background: var(--ml-soft); border: 0; box-shadow: var(--ml-shadow-lg); }
.ml-mission blockquote { margin: 0; font-family: var(--ml-display); font-weight: 600; font-size: 1.55rem; line-height: 1.35; color: var(--ml-ink); }
.ml-mission .ml-hand { display: block; margin-top: 18px; font-size: 1.7rem; text-align: right; color: var(--ml-pink); }
.ml-mission .quote-mark { position: absolute; top: -34px; left: 32px; font-family: var(--ml-display); font-weight: 800; font-size: 6rem; line-height: 1; background: var(--ml-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ml-story { display: grid; grid-template-columns: .8fr 1.2fr; gap: 48px; align-items: center; }
.ml-story h2 { font-size: 2.8rem; line-height: 1.08; font-weight: 800; }
.ml-story .ml-card { font-size: 1.05rem; color: var(--ml-text); }
.ml-story .ml-card p + p { margin-top: 14px; }
.ml-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ml-feature-grid .ml-card { border: 0; box-shadow: none; transition: transform .2s ease, box-shadow .2s ease; }
.ml-feature-grid .ml-card:not([class*="b-"]) { border: 1px solid var(--ml-line); }
.ml-feature-grid .ml-card:hover { transform: translateY(-4px); box-shadow: var(--ml-shadow-lg); }
.ml-feature-grid h3 { font-size: 1.2rem; font-weight: 700; }
.ml-feature-grid p { color: var(--ml-text); font-size: .95rem; margin-top: 4px; }
.ml-premium-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 960px; margin: 0 auto; }
.ml-premium-grid .ml-card { text-align: center; transition: transform .2s ease; }
.ml-premium-grid .ml-card:hover { transform: translateY(-4px); }
.ml-premium-grid h3 { font-size: 1.2rem; font-weight: 700; margin-top: 4px; }
.ml-premium-grid p { color: var(--ml-muted); font-size: .95rem; margin-top: 4px; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 980px) {
	.ml-hero-grid { grid-template-columns: 1fr; gap: 56px; }
	.ml-hero-copy { text-align: center; }
	.ml-hero-sub, .ml .ml-claim-box.input-group { margin-left: auto; margin-right: auto; }
	.ml #usernameFeedback { margin-left: 0; }
	.ml-perks { justify-content: center; }
	.ml-bento { grid-template-columns: 1fr 1fr; }
	.ml-showcase { grid-template-columns: 1fr; text-align: center; padding: 56px 28px; }
	.ml-showcase p { margin-left: auto; margin-right: auto; }
	.ml-mini-phone { margin: 0 auto; }
	.ml-story { grid-template-columns: 1fr; text-align: center; gap: 28px; }
	.ml-story .ml-card { text-align: left; }
	.ml-feature-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
	.ml-section { padding: 72px 0; }
	.ml-hero { padding: 120px 0 64px; }
	.ml-hero h1 { font-size: 2.9rem; }
	.ml-hero-note { font-size: 1.35rem; }
	.ml-hero-sub { font-size: 1.05rem; }
	.ml-head h2, .ml-showcase h2, .ml-story h2, .ml-cta-box h2 { font-size: 2.1rem; }
	.ml-about-hero { padding: 120px 0 40px; }
	.ml-about-hero h1 { font-size: 2.7rem; }
	.ml-mission { padding: 40px 24px 28px; }
	.ml-mission blockquote { font-size: 1.2rem; }
	.ml .ml-claim-box.input-group { flex-wrap: wrap; border-radius: 24px; padding: 6px; }
	.ml-claim-prefix { padding: 12px 0 12px 14px; font-size: 1.02rem; }
	.ml .ml-claim-box input { font-size: 1.02rem; }
	.ml-claim-box .ml-btn { width: 100%; }
	.ml-steps, .ml-bento, .ml-plans, .ml-feature-grid, .ml-premium-grid { grid-template-columns: 1fr; }
	.ml-bento .span-2 { grid-column: auto; }
	.ml-phone { width: 272px; transform: none; }
	.ml-phone-screen { min-height: 510px; }
	.ml-sticker-1 { left: -4px; }
	.ml-sticker-2 { right: -4px; }
	.ml-arrow-note { display: none; }
	.ml-mini-phone { width: 262px; height: 524px; }
	.ml-mini-screen iframe { transform: scale(.618); }
	.ml-cta-box { padding: 60px 22px; border-radius: 24px; }
	.ml-cta-emoji { display: none; }
	.ml-sticky { display: block; }
}
@media (prefers-reduced-motion: reduce) {
	.ml *, .ml *::before, .ml *::after { animation: none !important; transition: none !important; }
}

/* =========================================================
   AUTH PAGES (register + login)
   ========================================================= */
.ml-auth {
	min-height: 100vh; padding: 130px 0 80px;
	background:
		radial-gradient(800px 460px at 90% 0%, var(--ml-glow-b), transparent 60%),
		radial-gradient(800px 460px at 0% 0%, var(--ml-glow-a), transparent 60%);
}
.ml-auth-wrap { max-width: 480px; margin: 0 auto; padding: 0 16px; }
.ml-auth-head { text-align: center; margin-bottom: 26px; }
.ml-auth-head h1 { font-size: 2.6rem; line-height: 1.08; font-weight: 800; margin-bottom: 8px; }
.ml-auth-head p { color: var(--ml-muted); font-size: 1.02rem; }
.ml-progress { display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 600; color: var(--ml-violet); background: var(--ml-t-violet); padding: 5px 12px; border-radius: 999px; margin-bottom: 14px; }
.ml-progress i { display: inline-block; width: 22px; height: 6px; border-radius: 99px; background: var(--ml-violet); }
.ml-progress i.off { background: #CFC4FF; }

.ml-auth-card { background: #fff; border: 1px solid var(--ml-line); border-radius: 28px; box-shadow: var(--ml-shadow-lg); padding: 32px 30px 28px; }
.ml-field { margin-bottom: 18px; }
.ml-field > label, .ml-label { display: block; font-weight: 600; font-size: .92rem; color: var(--ml-ink); margin-bottom: 8px; }
.ml-input {
	display: block; width: 100%; font-family: Poppins, sans-serif; font-size: 1rem; color: var(--ml-ink);
	background: #fff; border: 2px solid var(--ml-line); border-radius: 16px; padding: 13px 16px; height: auto;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.ml-input:focus { outline: none; border-color: var(--ml-violet); box-shadow: 0 0 0 5px rgba(108, 71, 255, .12); }
.ml-input::placeholder { color: #B9B4CF; }
.ml-pass { position: relative; }
.ml-pass .ml-input { padding-right: 76px; }
.ml-pass-toggle { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); border: 0; background: var(--ml-t-violet); color: var(--ml-violet); font-family: Poppins, sans-serif; font-weight: 600; font-size: .8rem; border-radius: 10px; padding: 7px 12px; cursor: pointer; }
.ml-pass-toggle:hover { background: #DDD3FF; }

/* Username inside the card */
.ml-auth .ml-claim-box.input-group { max-width: none; border-radius: 16px; padding: 4px; box-shadow: none; }
.ml-auth .ml-claim-prefix { padding-left: 14px; font-size: 1rem; }
.ml-auth .ml-claim-box input { font-size: 1rem; padding: 10px 8px 10px 1px; }
.ml-auth #usernameFeedback { margin: 10px 0 0; }
.ml-name-chip { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--ml-soft); border-radius: 18px; padding: 14px 16px; margin-bottom: 20px; }
.ml-name-chip .url { font-family: var(--ml-display); font-weight: 700; font-size: 1.1rem; color: var(--ml-ink); word-break: break-all; }
.ml-name-chip .url b { color: var(--ml-violet); }
.ml-name-chip small { display: block; font-size: .8rem; color: var(--ml-ok); font-weight: 600; }
.ml-name-chip button { border: 0; background: #fff; color: var(--ml-ink); font-family: Poppins, sans-serif; font-weight: 600; font-size: .8rem; border-radius: 10px; padding: 7px 12px; cursor: pointer; flex-shrink: 0; }
.ml-name-edit[hidden] { display: none; }

/* Password checklist */
.ml-rules { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ml-rules li { font-size: .78rem; font-weight: 500; color: var(--ml-muted); background: #F4F2FA; border-radius: 999px; padding: 4px 10px; transition: background .15s ease, color .15s ease; }
.ml-rules li::before { content: "○ "; }
.ml-rules li.ok { background: #DCF7E6; color: #11663A; }
.ml-rules li.ok::before { content: "✓ "; }

.ml-auth .ml-btn[type="submit"] { width: 100%; margin-top: 6px; font-size: 1.08rem; }
.ml-auth-note { font-size: .8rem; color: var(--ml-muted); text-align: center; margin-top: 16px !important; }
.ml-auth-note a { color: var(--ml-ink); text-decoration: underline; }
.ml-auth-switch { text-align: center; margin-top: 22px !important; font-size: .95rem; color: var(--ml-muted); }
.ml-auth-switch a { color: var(--ml-violet); font-weight: 600; }
.ml-auth-perks { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin-top: 22px; font-size: .88rem; color: var(--ml-muted); }

/* Alerts inside auth cards */
.ml-auth .alert { border: 0; border-radius: 16px; padding: 12px 16px; font-size: .92rem; font-weight: 500; margin-bottom: 12px; }
.ml-auth .alert-danger { background: var(--ml-t-pink); color: #B0145A; }
.ml-auth .alert-success { background: #DCF7E6; color: #11663A; display: flex; align-items: center; gap: 12px; }
.ml-auth .alert-success .big { font-size: 1.6rem; }
.ml-vip { text-align: center; background: linear-gradient(135deg, #FFF3C4, #FFE3F0); border-radius: 18px; padding: 14px; margin-bottom: 20px; color: var(--ml-ink); }
.ml-vip b { display: block; font-family: var(--ml-display); font-size: 1.15rem; background: var(--ml-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

@media (max-width: 520px) {
	.ml-auth { padding: 110px 0 60px; }
	.ml-auth-head h1 { font-size: 2.1rem; }
	.ml-auth-card { padding: 26px 20px 22px; border-radius: 24px; }
	.ml-auth-wrap { padding: 0 12px; }
}


/* =========================================================
   MIDNIGHT HERO (index + about)
   ========================================================= */
.ml-hero, .ml-about-hero {
	--ml-claim-border: transparent;
	background:
		radial-gradient(900px 520px at 88% 10%, var(--ml-night-glow-b), transparent 60%),
		radial-gradient(800px 520px at 5% 0%, var(--ml-night-glow-a), transparent 60%),
		var(--ml-night);
}
.ml-hero h1, .ml-about-hero h1, .ml-hero .ml-claim label { color: #fff; }
.ml-hero .ml-hero-sub, .ml-about-hero .ml-hero-sub, .ml-hero .ml-perk, .ml-hero .ml-login-hint { color: rgba(255, 255, 255, .75); }
.ml-hero .ml-login-hint a { color: #C4B5FD; }
.ml-hero .ml-tag, .ml-about-hero .ml-tag { background: rgba(255, 255, 255, .1); color: #fff; border: 1px solid rgba(255, 255, 255, .2); box-shadow: none; }
.ml-hero .ml-arrow-note { color: #C4B5FD; }
.ml-hero .ml-arrow-note svg { stroke: #C4B5FD; }
.ml-hero .ml-phone { box-shadow: 0 40px 80px rgba(0, 0, 0, .5), 0 0 0 2px rgba(255, 255, 255, .14); }
.ml-about-hero { padding-bottom: 90px; }
.ml-about-hero .ml-hl { background: linear-gradient(90deg, #A78BFA, #FF7AB8); -webkit-background-clip: text; background-clip: text; }

/* =========================================================
   AUTH PAGES v2 – Midnight split layout (register + login)
   ========================================================= */
.ml-auth {
	position: relative; overflow: hidden; min-height: 100vh; padding: 130px 0 90px;
	/* glows live at the top only; the bottom fades into the exact footer colour so there is no seam */
	background:
		linear-gradient(180deg, transparent 55%, var(--ml-night) 92%),
		radial-gradient(900px 520px at 90% 5%, var(--ml-night-glow-b), transparent 60%),
		radial-gradient(800px 560px at 0% 0%, var(--ml-night-glow-a), transparent 60%),
		radial-gradient(700px 420px at 55% 45%, rgba(255, 79, 154, .10), transparent 65%),
		var(--ml-night);
}
.ml-auth::before { /* faint grid texture */
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background:
		linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 48px 48px,
		linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 48px 48px;
	-webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 75%);
	mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 75%);
}
.ml-auth-split { position: relative; z-index: 1; max-width: 1060px; margin: 0 auto; padding: 0 20px; display: grid; grid-template-columns: 1fr 460px; gap: 64px; align-items: center; }
.ml-auth-side { color: rgba(255,255,255,.78); }
.ml-auth .ml-auth-head { text-align: left; margin-bottom: 28px; }
.ml-auth .ml-auth-head h1 { color: #fff; font-size: 3.4rem; line-height: 1.04; }
.ml-auth .ml-auth-head p { color: rgba(255,255,255,.75); font-size: 1.15rem; }
.ml-auth .ml-progress { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.18); }
.ml-auth .ml-progress i { background: linear-gradient(90deg, #A78BFA, #FF7AB8); }
.ml-auth .ml-progress i.off { background: rgba(255,255,255,.25); }
.ml-auth .ml-auth-head .ml-hl { background: linear-gradient(90deg, #A78BFA, #FF7AB8); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Card */
.ml-auth-card { position: relative; border: 0; box-shadow: 0 40px 90px rgba(0, 0, 0, .45); }
.ml-auth-card::before { content: ""; position: absolute; left: 28px; right: 28px; top: 0; height: 4px; border-radius: 0 0 6px 6px; background: var(--ml-grad); }
.ml-auth-card-title { font-family: var(--ml-display); font-weight: 800; font-size: 1.35rem; color: var(--ml-ink); margin: 0 0 18px; letter-spacing: -.02em; }
.ml-auth .ml-auth-switch { color: rgba(255,255,255,.7); }
.ml-auth .ml-auth-switch a { color: #C4B5FD; }
.ml-auth .ml-auth-perks { color: rgba(255,255,255,.7); justify-content: flex-start; }

/* Register side: live mini phone + perks */
.ml-auth-visual { position: relative; display: flex; align-items: center; gap: 28px; }
.ml-auth .ml-phone { width: 230px; padding: 10px; border-radius: 38px; transform: rotate(-3deg); box-shadow: 0 30px 70px rgba(0,0,0,.5), 0 0 0 2px rgba(255,255,255,.14); }
.ml-auth .ml-phone-screen { min-height: 400px; border-radius: 30px; padding: 32px 14px 18px; }
.ml-auth .ml-avatar { width: 64px; height: 64px; font-size: 1.6rem; border-width: 3px; }
.ml-auth .ml-handle { font-size: .95rem; }
.ml-auth .ml-bio { font-size: .68rem; margin-bottom: 12px !important; }
.ml-auth .ml-plink { font-size: .72rem; padding: 9px; margin-bottom: 7px; border-radius: 11px; }
.ml-auth .ml-psocial i { width: 28px; height: 28px; font-size: .75rem; }
.ml-auth .ml-purl { font-size: .65rem; margin-top: 10px; }
.ml-auth-checks { list-style: none; margin: 0; padding: 0; }
.ml-auth-checks li { display: flex; align-items: center; gap: 10px; padding: 7px 0; color: #fff; font-weight: 500; }
.ml-auth-checks li span { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); }

/* Login side: rotating tips */
.ml-tips { position: relative; max-width: 420px; }
.ml-tip-card {
	background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); border-radius: 22px; padding: 22px 24px;
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; min-height: 128px;
}
.ml-tip-card small { display: block; font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #C4B5FD; margin-bottom: 8px; }
.ml-tip-text { font-family: var(--ml-display); font-weight: 700; font-size: 1.3rem; line-height: 1.3; transition: opacity .3s ease, transform .3s ease; }
.ml-tip-text.out { opacity: 0; transform: translateY(6px); }
.ml-tip-dots { display: flex; gap: 6px; margin-top: 16px; }
.ml-tip-dots i { width: 7px; height: 7px; border-radius: 99px; background: rgba(255,255,255,.3); transition: width .3s ease, background .3s ease; }
.ml-tip-dots i.on { width: 22px; background: linear-gradient(90deg, #A78BFA, #FF7AB8); }
.ml-float-emojis { position: relative; height: 90px; margin-top: 26px; }
.ml-float-emojis span { position: absolute; font-size: 2.2rem; animation: mlBob 6s ease-in-out infinite; }
.ml-float-emojis span:nth-child(1) { left: 0; top: 10px; }
.ml-float-emojis span:nth-child(2) { left: 70px; top: 40px; animation-delay: 1.5s; }
.ml-float-emojis span:nth-child(3) { left: 140px; top: 4px; animation-delay: 3s; }
.ml-float-emojis span:nth-child(4) { left: 210px; top: 36px; animation-delay: 4.5s; }

@media (max-width: 920px) {
	.ml-auth-split { grid-template-columns: 1fr; gap: 28px; max-width: 520px; }
	.ml-auth .ml-auth-head { text-align: center; margin-bottom: 0; }
	.ml-auth .ml-auth-head h1 { font-size: 2.4rem; }
	.ml-auth .ml-auth-head p { font-size: 1.02rem; }
	.ml-auth-visual, .ml-tips, .ml-float-emojis { display: none; }
	.ml-auth .ml-auth-perks { justify-content: center; }
}
@media (max-width: 520px) {
	.ml-auth { padding: 110px 0 60px; }
	.ml-auth-split { padding: 0 12px; }
	.ml-auth .ml-auth-head h1 { font-size: 2.1rem; }
}

/* Auth: label row with "Forgot password?" + info boxes */
.ml-label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.ml-label-row label { margin-bottom: 0 !important; }
.ml-forgot { font-size: .85rem; font-weight: 600; color: var(--ml-violet); }
.ml-forgot:hover { color: var(--ml-violet-dark); text-decoration: underline; }
.ml-auth-info { text-align: center; padding: 8px 0 4px; }
.ml-auth-info .big-emoji { font-size: 3rem; line-height: 1; margin-bottom: 12px; }
.ml-auth-info h2 { font-family: var(--ml-display); font-weight: 800; font-size: 1.4rem; color: var(--ml-ink); margin: 0 0 8px; }
.ml-auth-info p { color: var(--ml-muted); margin: 0 0 20px !important; }
.ml-auth-info .ml-btn { width: 100%; }
.ml-hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }

/* =========================================================
   LEGAL / DOCUMENT PAGES (terms, privacy, cookie, report)
   ========================================================= */
.ml-doc { background: var(--ml-bg); }
.ml-doc-hero {
	position: relative; overflow: hidden; padding: 140px 0 150px; text-align: center; color: #fff;
	background:
		linear-gradient(180deg, transparent 60%, rgba(22, 17, 46, .6) 100%),
		radial-gradient(900px 480px at 88% 0%, var(--ml-night-glow-b), transparent 60%),
		radial-gradient(800px 480px at 5% 0%, var(--ml-night-glow-a), transparent 60%),
		var(--ml-night);
}
.ml-doc-hero .ml-tag { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.2); }
.ml-doc-hero h1 { color: #fff; font-size: 3.4rem; line-height: 1.05; font-weight: 800; margin-bottom: 12px; }
.ml-doc-hero p { color: rgba(255,255,255,.72); font-size: 1.05rem; }
.ml-doc-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 26px; }
.ml-doc-nav a { color: rgba(255,255,255,.8); font-size: .9rem; font-weight: 500; padding: 7px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); transition: background .15s ease, color .15s ease; }
.ml-doc-nav a:hover { background: rgba(255,255,255,.1); color: #fff; }
.ml-doc-nav a.on { background: #fff; color: var(--ml-ink); border-color: #fff; }

.ml-doc-wrap { max-width: 980px; margin: -96px auto 0; padding: 0 20px 96px; position: relative; z-index: 2; }
.ml-doc-card { background: #fff; border-radius: 24px; box-shadow: 0 30px 80px rgba(22, 17, 46, .14); padding: 56px 72px 60px; }
.ml-doc-card::before { content: ""; display: block; height: 4px; width: 64px; border-radius: 99px; background: var(--ml-grad); margin-bottom: 28px; }

/* Readable, formal typography */
.ml-doc-body { color: #3B3656; font-size: 1.02rem; line-height: 1.8; }
.ml-doc-body h2 { font-family: var(--ml-display); font-weight: 700; font-size: 1.35rem; color: var(--ml-ink); letter-spacing: -.01em; margin: 42px 0 12px; padding-top: 30px; border-top: 1px solid var(--ml-line); scroll-margin-top: 110px; }
.ml-doc-body h2:first-of-type { margin-top: 8px; }
.ml-doc-body p { margin: 0 0 14px; }
.ml-doc-body ul { margin: 0 0 16px; padding-left: 1.3em; }
.ml-doc-body li { margin-bottom: 8px; }
.ml-doc-body li::marker { color: var(--ml-violet); }
.ml-doc-body strong { color: var(--ml-ink); }
.ml-doc-body a { color: var(--ml-violet); text-decoration: underline; text-underline-offset: 3px; }

/* "On this page" box */
.ml-toc { background: #F7F5FD; border-radius: 16px; padding: 18px 22px; margin-bottom: 34px; }
.ml-toc strong { display: block; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ml-muted); margin-bottom: 10px; }
.ml-toc ol { columns: 2; column-gap: 28px; margin: 0; padding-left: 1.2em; font-size: .92rem; }
.ml-toc li { margin-bottom: 6px; break-inside: avoid; }
.ml-toc a { color: var(--ml-ink); text-decoration: none; }
.ml-toc a:hover { color: var(--ml-violet); text-decoration: underline; }
.ml-doc-contact { margin-top: 40px; padding: 22px 24px; border-radius: 16px; background: linear-gradient(135deg, #F1ECFF, #E8EEFF); color: var(--ml-ink); font-size: .95rem; }
.ml-doc-contact a { color: var(--ml-violet); font-weight: 600; }

/* Report form */
.ml-report-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
.ml-report-grid .full { grid-column: 1 / -1; }
.ml-doc .ml-field label { display: block; font-weight: 600; font-size: .92rem; color: var(--ml-ink); margin-bottom: 8px; }
.ml-doc .ml-field small { display: block; color: var(--ml-muted); font-size: .8rem; margin-top: 6px; }
.ml-doc select.ml-input { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237A7596' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 44px; }
.ml-doc textarea.ml-input { min-height: 150px; resize: vertical; }
.ml-prefix-input { display: flex; align-items: center; border: 2px solid var(--ml-line); border-radius: 16px; background: #fff; transition: border-color .15s ease, box-shadow .15s ease; }
.ml-prefix-input:focus-within { border-color: var(--ml-violet); box-shadow: 0 0 0 5px rgba(108, 71, 255, .12); }
.ml-prefix-input span { padding-left: 16px; font-weight: 600; color: var(--ml-ink); white-space: nowrap; }
.ml-prefix-input .ml-input { border: 0; box-shadow: none !important; padding-left: 1px; }
.ml-doc .alert { border: 0; border-radius: 16px; padding: 12px 16px; font-size: .92rem; font-weight: 500; margin-bottom: 16px; }
.ml-doc .alert-danger { background: var(--ml-t-pink); color: #B0145A; }
.ml-doc .ml-btn[type="submit"] { min-width: 220px; }
.ml-report-done { text-align: center; padding: 20px 0 8px; }
.ml-report-done .big-emoji { font-size: 3.4rem; line-height: 1; margin-bottom: 14px; }
.ml-report-done h2 { border: 0 !important; padding: 0 !important; margin: 0 0 10px !important; }

@media (max-width: 720px) {
	.ml-doc-hero { padding: 116px 0 120px; }
	.ml-doc-hero h1 { font-size: 2.3rem; }
	.ml-doc-wrap { margin-top: -80px; padding: 0 12px 64px; }
	.ml-doc-card { padding: 34px 22px 38px; border-radius: 20px; }
	.ml-toc ol { columns: 1; }
	.ml-report-grid { grid-template-columns: 1fr; }
	.ml-doc .ml-btn[type="submit"] { width: 100%; }
}

/* =========================================================
   AUTH v3 – more air under the header + drifting link pills
   that fade into the footer (no empty block at the bottom)
   ========================================================= */
.ml-auth { min-height: 0; padding: 170px 0 0; }
.ml-auth-split { padding-bottom: 56px; }
.ml-auth-drift {
	position: relative; z-index: 1; overflow: hidden; padding: 18px 0 70px; margin-top: 8px;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent), linear-gradient(180deg, #000 55%, transparent);
	-webkit-mask-composite: source-in; mask-composite: intersect;
	mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent), linear-gradient(180deg, #000 55%, transparent);
}
.ml-auth-drift .row { display: flex; gap: 14px; width: max-content; margin-bottom: 14px; animation: mlDrift 60s linear infinite; }
.ml-auth-drift .row.r2 { animation-direction: reverse; animation-duration: 75s; margin-left: -120px; }
.ml-auth-drift span {
	display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
	padding: 12px 20px; border-radius: 16px; font-weight: 500; font-size: .95rem; color: rgba(255, 255, 255, .78);
	background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1);
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.ml-auth-drift span:nth-child(3n) { background: rgba(167, 139, 250, .12); border-color: rgba(167, 139, 250, .22); }
.ml-auth-drift span:nth-child(4n) { background: rgba(255, 122, 184, .1); border-color: rgba(255, 122, 184, .2); }
@keyframes mlDrift { to { transform: translateX(-50%); } }
@media (max-width: 920px) {
	.ml-auth { padding-top: 130px; }
	.ml-auth-split { padding-bottom: 40px; }
}
@media (max-width: 520px) {
	.ml-auth { padding-top: 116px; }
	.ml-auth-drift { padding-bottom: 40px; }
	.ml-auth-drift span { padding: 10px 16px; font-size: .85rem; }
}
@media (prefers-reduced-motion: reduce) { .ml-auth-drift .row { animation: none; } }