/**
 * It Looks Done: site styles.
 *
 * Tokens come from theme.json presets. Dark mode follows the visitor's system
 * setting by redefining those presets. Everything inside .ild-sky stays daytime.
 */

/* ---------- Tokens ---------- */
/* Aliases are declared on .ild-sky too, so they re-resolve against the sky's daytime presets. */
:root, .ild-sky {
	--bg: var(--wp--preset--color--base);
	--bg-2: var(--wp--preset--color--base-2);
	--surface: var(--wp--preset--color--surface);
	--surface-2: var(--wp--preset--color--surface-2);
	--text: var(--wp--preset--color--contrast);
	--muted: var(--wp--preset--color--muted);
	--faint: var(--wp--preset--color--faint);
	--wp: var(--wp--preset--color--wp);
	--ok: var(--wp--preset--color--ok);
	--bad: var(--wp--preset--color--bad);
	--paper: var(--wp--preset--color--paper);
	--serif: var(--wp--preset--font-family--serif);
	--mono: var(--wp--preset--font-family--mono);
}
:root {
	--line: rgba(10, 10, 20, .08);
	--line-2: rgba(10, 10, 20, .14);
	--wp-solid: #3858e9;
	--wp-soft: rgba(56, 88, 233, .1);
	--ok-soft: rgba(22, 163, 74, .1);
	--bad-soft: rgba(225, 29, 72, .08);
	--vibe-1: #a855f7;
	--vibe-2: #ec4899;
	--vibe-3: #f97316;
	--vibe-grad: linear-gradient(120deg, var(--vibe-1), var(--vibe-2) 55%, var(--vibe-3));
	--ink: #1b1b1f;
	--radius: 18px;
	--shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 20px 50px -20px rgba(20, 20, 40, .22);
	--nav-h: 64px;
	color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
	:root {
		--wp--preset--color--base: #0a0a0f;
		--wp--preset--color--base-2: #0f0f16;
		--wp--preset--color--surface: #14141d;
		--wp--preset--color--surface-2: #1b1b26;
		--wp--preset--color--contrast: #f4f4f7;
		--wp--preset--color--muted: #a3a3b6;
		--wp--preset--color--faint: #8b8ba0;
		--wp--preset--color--wp: #7d97ff;
		--wp--preset--color--ok: #4ade80;
		--wp--preset--color--bad: #fb7185;
		--line: rgba(255, 255, 255, .08);
		--line-2: rgba(255, 255, 255, .15);
		--wp-soft: rgba(125, 151, 255, .14);
		--ok-soft: rgba(74, 222, 128, .1);
		--bad-soft: rgba(251, 113, 133, .1);
		--shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 30px 60px -25px rgba(0, 0, 0, .7);
	}
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; overflow-x: hidden; }
:where(.wp-site-blocks) > * { margin-block-start: 0; }
.ild-main section, .ild-main .ild-section { position: relative; }
.ild-wrap { width: min(1180px, 100% - 32px); margin-inline: auto; }
.ild-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 2px solid var(--wp); outline-offset: 3px; border-radius: 6px; }
.ild-main :where(p, ul, ol) { margin-block: 0; }
.ild-main :where(h1, h2, h3) { text-wrap: balance; }
.ild-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.ild-eyebrow::before { content: ""; width: 18px; height: 1px; background: currentColor; }
.ild-section-title { font-family: var(--serif); font-size: clamp(2.6rem, 6.5vw, 5rem); letter-spacing: -.02em; margin: 14px 0 0; }
.ild-section-title em, .ild-hero-title em, .ild-404-title em { font-style: italic; }
.ild-section-lede { color: var(--muted); font-size: clamp(1.05rem, 1.6vw, 1.25rem); max-width: 60ch; margin-top: 18px !important; }
.ild-grad, .ild-above-head h2 em, .ild-receipt-copy h2 em, .ild-cta-big h2 em:first-of-type { background: var(--vibe-grad); -webkit-background-clip: text; background-clip: text; color: transparent; padding-inline: .14em; margin-inline: -.14em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* Buttons (core/button with a class on the wrapper) */
.ild-main .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.wp-block-button[class*="ild-btn"] .wp-block-button__link,
.ild-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	padding: 14px 22px; border-radius: 999px; border: 1px solid transparent; cursor: pointer;
	font: 600 16px/1.2 var(--wp--preset--font-family--sans); text-decoration: none; white-space: nowrap;
	transition: transform .2s cubic-bezier(.2, .8, .2, 1.4), background .2s, border-color .2s, box-shadow .2s;
}
.wp-block-button[class*="ild-btn"] .wp-block-button__link:active, .ild-btn:active { transform: scale(.97); }
.ild-btn-primary .wp-block-button__link, .ild-btn.is-primary { background: var(--text); color: var(--bg); }
.ild-btn-primary .wp-block-button__link:hover, .ild-btn.is-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 30px -10px var(--text); }
.ild-btn-ghost .wp-block-button__link, .ild-btn.is-ghost { background: transparent; color: var(--text); border-color: var(--line-2); }
.ild-btn-ghost .wp-block-button__link:hover, .ild-btn.is-ghost:hover { background: var(--surface-2); }
.ild-btn-wp .wp-block-button__link { background: var(--wp-solid); color: #fff; }
.ild-btn-white .wp-block-button__link { background: #fff; color: #1a2a8a; }
.ild-btn-white .wp-block-button__link:hover, .ild-btn-wp .wp-block-button__link:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .4); }

.ild-tag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.ild-tag.is-vibe { background: color-mix(in srgb, var(--vibe-2) 13%, transparent); color: var(--vibe-2); }
.ild-tag.is-wp { background: var(--wp-soft); color: var(--wp); }

/* ---------- Header ---------- */
/* The template-part wrapper is only as tall as the nav, which would trap the sticky; let the nav stick to the page instead. */
.wp-block-template-part:has(> .ild-nav) { display: contents; }
.ild-nav { position: sticky; top: 0; z-index: 50; backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); background: color-mix(in srgb, var(--bg) 80%, transparent); border-bottom: 1px solid var(--line); }
.admin-bar .ild-nav { top: var(--wp-admin--admin-bar--height, 32px); }
.ild-nav-inner { height: var(--nav-h); gap: 16px; }
.ild-logo { margin: 0; font-family: var(--serif); font-size: 26px; letter-spacing: -.01em; white-space: nowrap; }
.ild-logo a { text-decoration: none; color: inherit; display: inline-flex; align-items: baseline; }
.ild-logo a::after { content: "✓"; font: 800 13px/1 var(--wp--preset--font-family--sans); margin-left: 7px; display: inline-grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; background: var(--vibe-grad); color: #fff; transform: translateY(-3px); }
.ild-nav-links { gap: 2px; }
.ild-nav-links .wp-block-navigation-item__content, .ild-footer-links .wp-block-navigation-item__content { text-decoration: none; color: var(--muted); font-size: 15px; font-weight: 500; padding: 8px 12px; border-radius: 999px; transition: color .2s, background .2s; }
.ild-nav-links .wp-block-navigation-item__content:hover { color: var(--text); background: var(--surface-2); }
@media (max-width: 820px) { .ild-nav-links { display: none !important; } }

/* ---------- Footer ---------- */
.ild-footer { border-top: 1px solid var(--line); padding: 36px 0 80px; color: var(--muted); font-size: 14px; }
.ild-footer-inner { gap: 20px 40px; }
.ild-footer-fine { gap: 6px; max-width: 520px; }
.ild-footer-fine .ild-logo { color: var(--text); }
/* Presenter lockup: "It Looks Done ✓ | by WebDevStudios" */
.ild-brand { gap: 14px !important; min-width: 0; }
.ild-by-wds { margin: 0; padding-left: 14px; border-left: 1px solid var(--line-2); font-size: 13px; line-height: 1.2; white-space: nowrap; }
.ild-by-wds a { color: var(--muted); text-decoration: none; }
.ild-by-wds strong { color: var(--text); font-weight: 650; letter-spacing: -.01em; transition: color .2s; }
.ild-by-wds a:hover strong { color: var(--wp); }
.ild-by-wds .is-short { display: none; }
@media (max-width: 420px) { .ild-by-wds .is-long { display: none; } .ild-by-wds .is-short { display: inline; } }
@media (max-width: 560px) { .ild-eb-by { display: none; } }
.ild-footer a { color: var(--text); text-underline-offset: 3px; }
.ild-footer-links { gap: 4px 6px; }
.ild-footer-links .wp-block-navigation-item__content { padding: 4px 8px; font-size: 14px; }
.ild-footer-links .wp-block-navigation-item__content:hover { color: var(--text); }
@media (max-width: 760px) { .ild-footer-links, .ild-footer-links .wp-block-navigation__container { justify-content: flex-start !important; } .ild-footer-links { margin-left: -8px; } }

/* ---------- Sky (always daytime) ---------- */
.ild-sky {
	--wp--preset--color--base: #f6f5f1; --wp--preset--color--base-2: #efeee8;
	--wp--preset--color--surface: #ffffff; --wp--preset--color--surface-2: #f3f2ed;
	--wp--preset--color--contrast: #121218; --wp--preset--color--muted: #45506a; --wp--preset--color--faint: #56607a;
	--wp--preset--color--wp: #3858e9;
	--line: rgba(10, 30, 60, .1); --line-2: rgba(10, 30, 60, .16); --wp-soft: rgba(56, 88, 233, .1);
	--shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 24px 60px -24px rgba(30, 70, 140, .35);
	color-scheme: light; color: var(--text); position: relative; overflow: hidden;
	background:
		radial-gradient(40% 26% at 84% 4%, rgba(255, 251, 228, .95), rgba(255, 242, 205, .35) 45%, transparent 72%),
		linear-gradient(180deg, #74bff3 0%, #a6d8fa 16%, #d0ecfd 38%, #ecf7fe 64%, #fcf5e7 100%);
}
.ild-sky > *:not(.ild-sky-fx) { position: relative; z-index: 1; }
.ild-sky-fx { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.ild-sun { position: absolute; top: 36px; right: 11%; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle, #fffef7 0 36%, rgba(255, 246, 205, .85) 50%, rgba(255, 240, 190, 0) 72%); animation: ild-sunpulse 7s ease-in-out infinite; }
@keyframes ild-sunpulse { 50% { transform: scale(1.07); } }
.ild-cloud { position: absolute; left: 0; height: 44px; border-radius: 99px; background: rgba(255, 255, 255, .9); filter: blur(5px); animation: ild-drift linear infinite; }
.ild-cloud::before, .ild-cloud::after { content: ""; position: absolute; border-radius: 50%; background: inherit; }
.ild-cloud::before { width: 55%; height: 170%; left: 16%; bottom: 25%; }
.ild-cloud::after { width: 38%; height: 130%; right: 14%; bottom: 30%; }
.ild-cloud.c1 { top: 110px; width: 230px; animation-duration: 95s; animation-delay: -10s; }
.ild-cloud.c2 { top: 280px; width: 160px; opacity: .8; animation-duration: 125s; animation-delay: -70s; }
.ild-cloud.c3 { top: 44%; width: 270px; opacity: .55; animation-duration: 150s; animation-delay: -40s; }
.ild-cloud.c4 { top: 68%; width: 200px; opacity: .5; animation-duration: 115s; animation-delay: -95s; }
@keyframes ild-drift { from { transform: translateX(-320px); } to { transform: translateX(110vw); } }
.ild-glint { position: absolute; width: 16px; height: 16px; animation: ild-glint 3.4s ease-in-out infinite; }
.ild-glint::before, .ild-glint::after { content: ""; position: absolute; left: 50%; top: 50%; background: #fff; border-radius: 2px; transform: translate(-50%, -50%); box-shadow: 0 0 10px 2px rgba(255, 255, 255, .95); }
.ild-glint::before { width: 2px; height: 100%; }
.ild-glint::after { width: 100%; height: 2px; }
@keyframes ild-glint { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }

/* ---------- Hero ---------- */
.ild-hero { padding: clamp(56px, 9vw, 110px) 0 90px; }
.ild-hero-head { text-align: center; }
.ild-hero-head .ild-sub, .ild-hero-head .ild-lede { margin-inline: auto; }
.ild-hero-title { font-family: var(--serif); font-size: clamp(4.2rem, 13vw, 10.5rem) !important; letter-spacing: -.035em; line-height: .9 !important; margin: 22px 0 0; }
.ild-hero-title em { position: relative; display: inline-block; }
.ild-hero-title em::after { content: "✓"; position: absolute; right: -.42em; top: .06em; font: normal 800 .26em/1 var(--wp--preset--font-family--sans); width: 1.5em; height: 1.5em; display: grid; place-items: center; border-radius: 50%; background: var(--vibe-grad); color: #fff; box-shadow: 0 10px 30px -6px var(--vibe-2); }
.ild-lede { font-size: clamp(1.3rem, 2.6vw, 2rem); font-weight: 600; letter-spacing: -.02em; margin: 26px auto 8px !important; }
.ild-sub { color: var(--muted); max-width: 54ch; font-size: clamp(1rem, 1.5vw, 1.15rem); }
.ild-hero-ctas { justify-content: center; margin-top: 32px !important; }
.ild-split { display: grid !important; grid-template-columns: 1fr auto 1fr; gap: clamp(16px, 3vw, 36px); align-items: center; margin-top: clamp(48px, 7vw, 80px); }
.ild-vs { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-family: var(--serif); font-style: italic; font-size: 24px; background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--shadow); }
@media (max-width: 860px) { .ild-split { grid-template-columns: 1fr; } .ild-vs { margin: -6px auto; } }

/* Site mock (ild/site-mock) */
.ild-mock-label { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; font-weight: 600; font-size: 15px; }
.ild-mock-meta { margin-top: 16px; font-size: 14px; color: var(--muted); }
.ild-mock-meta b, .ild-mock-meta strong { color: var(--text); font-weight: 600; }
.ild-win { position: relative; border-radius: 16px; background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--shadow); overflow: hidden; }
.ild-win-bar { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.ild-dots { display: flex; gap: 6px; }
.ild-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); }
.ild-url { flex: 1; font-family: var(--mono); font-size: 12px; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 7px; padding: 4px 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ild-win-body { background: #fff7ec; color: #2a1a10; padding: 18px 20px 22px; aspect-ratio: 16 / 11; display: flex; flex-direction: column; gap: 14px; }
.ild-m-nav { display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
.ild-m-nav b { font-family: var(--serif); font-size: 18px; font-weight: 400; }
.ild-m-nav span { color: #8a6a55; font-size: 12px; }
.ild-m-hero { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.ild-m-hero small { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #c2410c; font-weight: 700; }
.ild-m-hero .ild-m-title { font-family: var(--serif); font-size: clamp(26px, 3.2vw, 40px); line-height: 1; letter-spacing: -.02em; margin: 0; }
.ild-m-hero p { margin: 0; font-size: 13px; color: #6b4f3c; }
.ild-m-btn { align-self: flex-start; margin-top: 6px; background: #c2410c; color: #fff; font-size: 12px; font-weight: 600; padding: 7px 14px; border-radius: 999px; }
.ild-m-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ild-m-cards i { height: 44px; border-radius: 8px; background: linear-gradient(135deg, #fde3c8, #f8cfa6); }
.ild-m-cards i:nth-child(2) { background: linear-gradient(135deg, #f8d7b9, #eab68a); }
.ild-m-cards i:nth-child(3) { background: linear-gradient(135deg, #fbe7d3, #f3c49a); }
.ild-site-mock.is-vibe .ild-win-wrap { border-radius: 18px; padding: 2px; background: var(--vibe-grad); background-size: 200% 200%; animation: ild-shimmer 6s linear infinite; box-shadow: 0 30px 80px -30px var(--vibe-2); }
.ild-site-mock.is-vibe .ild-win { border: 0; }
.ild-site-mock.is-wp .ild-win { border-top: 3px solid var(--wp-solid); }
@keyframes ild-shimmer { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }

/* ---------- Above the waterline ---------- */
.ild-above { padding: clamp(80px, 10vw, 130px) 0 70px; }
.ild-above-head { display: grid !important; grid-template-columns: 1.15fr 1fr; gap: 24px 64px; align-items: end; }
.ild-above-head .ild-section-title { margin-top: 0; }
.ild-above-head .ild-section-lede { margin-top: 0 !important; }
.ild-fair { display: inline-block; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; padding: 6px 12px; border-radius: 99px; border: 1px solid var(--line-2); margin-bottom: 14px !important; color: var(--muted); }
.ild-ai-grid { display: grid !important; grid-template-columns: repeat(3, 1fr); margin-top: 56px; border-top: 1px solid var(--line-2); counter-reset: ild-ai; }
.ild-ai-item { padding: 28px 28px 32px 0; border-bottom: 1px solid var(--line-2); counter-increment: ild-ai; }
.ild-ai-item:not(:nth-child(3n+1)) { padding-left: 28px; border-left: 1px solid var(--line-2); }
.ild-ai-item::before { content: counter(ild-ai, decimal-leading-zero); font-family: var(--mono); font-size: 12px; color: var(--faint); }
.ild-ai-item h3 { font-family: var(--serif); font-size: clamp(26px, 2.6vw, 34px); letter-spacing: -.01em; margin: 14px 0 8px; }
.ild-ai-item p { margin: 0; color: var(--muted); font-size: 15px; max-width: 34ch; }
.ild-speed { display: flex; align-items: center; gap: 10px; margin-top: 18px; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.ild-speed i { flex: 1; max-width: 120px; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; position: relative; }
.ild-speed i::after { content: ""; position: absolute; inset: 0; width: var(--w, 90%); background: var(--vibe-grad); border-radius: 2px; }
.ild-above-close { display: grid !important; grid-template-columns: auto 1fr; gap: 24px; align-items: center; margin-top: 56px; padding: 26px 30px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--shadow); }
.ild-pct { font-family: var(--serif); font-size: 64px; line-height: 1; }
.ild-above-close p:last-child { font-size: clamp(1.05rem, 1.6vw, 1.2rem); }
@media (max-width: 900px) {
	.ild-above-head { grid-template-columns: 1fr; }
	.ild-ai-grid { grid-template-columns: 1fr 1fr; }
	.ild-ai-item, .ild-ai-item:not(:nth-child(3n+1)) { padding: 24px 20px 26px 0; border-left: 0; }
	.ild-ai-item:nth-child(2n) { padding-left: 20px; border-left: 1px solid var(--line-2); }
}
@media (max-width: 560px) {
	.ild-ai-grid { grid-template-columns: 1fr; }
	.ild-ai-item:nth-child(2n) { padding-left: 0; border-left: 0; }
	.ild-above-close { grid-template-columns: 1fr; gap: 8px; padding: 22px; }
}

/* ---------- Waterline ---------- */
.ild-waterline { position: relative; height: 120px; margin-bottom: -2px; }
.ild-waterline svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ild-waterline .ild-glint { width: 12px; height: 12px; z-index: 2; }
.ild-wl-label { position: absolute; left: 50%; top: 4px; transform: translateX(-50%); font-family: var(--mono); font-size: 12px; color: var(--muted); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.ild-wave-a { animation: ild-wave 9s ease-in-out infinite alternate; }
.ild-wave-b { animation: ild-wave 12s ease-in-out infinite alternate-reverse; }
.ild-wave-c { animation: ild-wave 10s ease-in-out infinite alternate; animation-delay: -4s; }
@keyframes ild-wave { from { transform: translateX(0); } to { transform: translateX(-60px); } }

/* ---------- Ocean: the other 80% ---------- */
.ild-ocean {
	--t: #eef2ff; --tm: #a9b6dd; --tl: rgba(180, 200, 255, .14);
	position: relative; color: var(--t); padding: 50px 0 140px;
	background: linear-gradient(180deg, #3a9ad9 0, #2474bf 3%, #17509b 8%, #10306d 16%, #0b1f4d 30%, #061232 58%, #02050f 100%);
}
.ild-ocean::before { content: ""; position: absolute; inset: 0; pointer-events: none;
	background: radial-gradient(70% 6% at 50% 0%, rgba(200, 235, 255, .35), transparent 70%), repeating-linear-gradient(104deg, transparent 0 70px, rgba(255, 255, 255, .07) 70px 115px, transparent 115px 190px);
	-webkit-mask-image: linear-gradient(180deg, #000 0, transparent 22%); mask-image: linear-gradient(180deg, #000 0, transparent 22%); }
.ild-ocean > * { position: relative; }
.ild-ocean .ild-section-title { color: #fff; }
.ild-below-intro { display: flex !important; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; }
.ild-below-intro .ild-eyebrow { color: #d6e6ff; }
.ild-below-intro .ild-section-lede { color: #dbe7ff; }
.ild-count-80 { font-family: var(--serif); font-size: clamp(90px, 14vw, 180px); line-height: .8; color: transparent; -webkit-text-stroke: 1px rgba(180, 200, 255, .35); letter-spacing: -.04em; }
.ild-zones { margin-top: 80px; display: flex !important; flex-direction: column; gap: 110px; counter-reset: ild-layer; }
.ild-zone { display: grid; grid-template-columns: 300px 1fr; gap: 56px; align-items: start; position: relative; }
.ild-zone-head { position: sticky; top: calc(var(--nav-h) + 32px); }
.ild-zone-depth { font-family: var(--mono); font-size: 13px; color: var(--tm); display: flex; align-items: center; gap: 10px; }
.ild-zone-depth::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 2px solid #8aa3ff; box-shadow: 0 0 0 4px rgba(138, 163, 255, .15); }
.ild-zone-head h3 { font-family: var(--serif); font-size: clamp(36px, 4vw, 52px); letter-spacing: -.02em; color: #fff; margin: 14px 0 12px; }
.ild-zone-head p { margin: 0; color: var(--tm); font-size: 16px; }
.ild-zone-gauge { margin-top: 22px; height: 3px; background: rgba(255, 255, 255, .08); border-radius: 2px; overflow: hidden; }
.ild-zone-gauge i { display: block; height: 100%; width: var(--g); background: linear-gradient(90deg, #6b8cff, #fb7185); }
.ild-zone-gauge-label { margin-top: 8px; font-family: var(--mono); font-size: 11px; color: rgba(169, 182, 221, .75); display: flex; justify-content: space-between; }
.ild-zone-items { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--tl); }
.ild-layer { padding: 30px 30px 34px 0; border-bottom: 1px solid var(--tl); counter-increment: ild-layer; transition: opacity .8s ease, transform .8s cubic-bezier(.2, .8, .2, 1); }
.ild-layer:nth-child(2n) { padding-left: 30px; padding-right: 0; border-left: 1px solid var(--tl); }
.ild-layer::before { content: counter(ild-layer, decimal-leading-zero); font-family: var(--mono); font-size: 12px; color: #8aa3ff; }
.ild-layer h4 { font: 650 22px/1.2 var(--wp--preset--font-family--sans); letter-spacing: -.015em; color: #fff; margin: 12px 0 8px; }
.ild-layer p { margin: 0; font-size: 15px; color: var(--tm); }
.ild-layer .ild-miss { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--tl); font-size: 14px; color: #fecdd3; }
.ild-layer .ild-miss b { display: block; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: #fb7185; margin-bottom: 4px; }
.ild-layer .ild-src { margin-top: 12px; font-family: var(--mono); font-size: 11px; color: rgba(169, 182, 221, .7); }
.js-reveal .ild-layer:not(.is-in) { opacity: 0; transform: translateY(30px); }
.ild-seabed { margin-top: 120px; text-align: center; }
.ild-seabed-big { font-family: var(--serif); font-size: clamp(34px, 5vw, 60px); line-height: 1.05; color: #fff; letter-spacing: -.02em; }
.ild-seabed p:last-child { color: var(--tm); margin: 14px auto 0; max-width: 52ch; }
@media (max-width: 900px) { .ild-zone { grid-template-columns: 1fr; gap: 26px; } .ild-zone-head { position: static; } .ild-zones { gap: 80px; } }
@media (max-width: 640px) { .ild-zone-items { grid-template-columns: 1fr; } .ild-layer, .ild-layer:nth-child(2n) { padding: 24px 0 26px; border-left: 0; } }

/* ---------- Launch day ---------- */
.ild-launch { padding: clamp(90px, 11vw, 150px) 0 60px; }
.ild-launch-head { text-align: center; max-width: 760px; margin-inline: auto; }
.ild-launch-head .ild-section-lede { margin-inline: auto; }
.ild-scroll-hint { display: inline-flex; gap: 10px; align-items: center; margin-top: 28px !important; font-family: var(--mono); font-size: 12px; color: var(--faint); letter-spacing: .06em; text-transform: uppercase; }
.ild-scroll-hint::before { content: ""; width: 1px; height: 28px; background: linear-gradient(var(--faint), transparent); animation: ild-drip 1.8s ease-in-out infinite; }
@keyframes ild-drip { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
.ild-board { position: sticky; top: var(--nav-h); z-index: 20; margin-top: 56px; padding: 12px 0; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.admin-bar .ild-board { top: calc(var(--nav-h) + var(--wp-admin--admin-bar--height, 32px)); }
.ild-board-inner { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center; }
.ild-board-side { display: flex; align-items: center; gap: 20px; }
.ild-board-side.is-wp { justify-content: flex-end; text-align: right; }
.ild-board-side .ild-who { font-weight: 700; font-size: 15px; }
.ild-board-stat { display: flex; flex-direction: column; line-height: 1.1; }
.ild-board-stat .k { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.ild-board-stat .v { font-family: var(--serif); font-size: 30px; font-variant-numeric: tabular-nums; }
.ild-board-stat .v.is-bad { color: var(--bad); }
.ild-board-stat .v.is-good { color: var(--ok); }
.ild-board-clock { font-family: var(--mono); font-size: 15px; font-weight: 500; padding: 9px 16px; border-radius: 99px; background: var(--text); color: var(--bg); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ild-board-progress { height: 2px; background: var(--line); margin-top: 12px; border-radius: 1px; overflow: hidden; }
.ild-board-progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--vibe-2), var(--wp-solid)); transition: width .3s; }
.ild-tl { position: relative; padding: 40px 0 20px; }
.ild-spine { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%); background: var(--line-2); }
.ild-spine i { position: absolute; inset: 0 0 auto; height: 0; background: linear-gradient(var(--vibe-2), var(--wp-solid)); }
.ild-col-labels { display: grid; grid-template-columns: 1fr 140px 1fr; margin-bottom: 10px; }
.ild-col-labels span { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ild-col-labels span:first-child { text-align: right; }
.ild-col-labels span:last-child { grid-column: 3; }
.ild-ev { position: relative; display: grid; grid-template-columns: 1fr 140px 1fr; align-items: center; min-height: 72vh; padding: 40px 0; }
.ild-ev-head { grid-column: 1 / -1; text-align: center; margin-bottom: 30px; position: relative; z-index: 1; }
.ild-ev-head .inner { display: inline-block; background: var(--bg); padding: 10px 18px; max-width: 560px; }
.ild-ev-time { display: inline-block; font-family: var(--mono); font-size: 13px; font-weight: 500; padding: 6px 14px; border-radius: 99px; border: 1px solid var(--line-2); background: var(--surface); transition: background .4s, color .4s, border-color .4s; }
.ild-ev.is-on .ild-ev-time { background: var(--text); color: var(--bg); border-color: var(--text); }
.ild-ev-title { font-family: var(--serif); font-size: clamp(30px, 3.6vw, 46px); letter-spacing: -.02em; line-height: 1.05; margin: 16px 0 0; }
.ild-ev-desc { color: var(--muted); margin: 8px 0 0 !important; }
.ild-card { border-radius: var(--radius); padding: 24px; background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 12px; transition: border-color .5s ease, box-shadow .5s ease, transform .7s cubic-bezier(.2, .8, .2, 1); }
.ild-card.is-vibe { grid-column: 1; border-top: 3px solid var(--bad); }
.ild-card.is-wp { grid-column: 3; border-top: 3px solid var(--ok); }
/* Cards stay fully readable before their moment; they slide in and pick up their color when it arrives. */
.js-timeline .ild-ev:not(.is-on) .ild-card { border-top-color: var(--line-2); box-shadow: none; }
.js-timeline .ild-ev:not(.is-on) .ild-card.is-vibe { transform: translateX(-24px) scale(.97); }
.js-timeline .ild-ev:not(.is-on) .ild-card.is-wp { transform: translateX(24px) scale(.97); }
.ild-card h4 { font: 700 20px/1.2 var(--wp--preset--font-family--sans); letter-spacing: -.01em; margin: 0; }
.ild-card p { margin: 0; color: var(--muted); font-size: 15px; }
.ild-card-who { display: none; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ild-log { font-family: var(--mono); font-size: 12.5px; padding: 12px 14px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); overflow-x: auto; white-space: pre; line-height: 1.6; margin: 0; }
.ild-log .r, .ild-card.is-vibe .ild-log { color: var(--bad); }
.ild-log .g, .ild-card.is-wp .ild-log { color: var(--ok); }
.ild-log .d { color: var(--faint); }
.ild-cost { display: flex; gap: 8px; flex-wrap: wrap; }
.ild-cost span { font-family: var(--mono); font-size: 12px; padding: 4px 10px; border-radius: 99px; }
.ild-cost .b { background: var(--bad-soft); color: var(--bad); }
.ild-cost .g { background: var(--ok-soft); color: var(--ok); }
.ild-og { border-radius: 12px; border: 1px solid var(--line-2); overflow: hidden; background: var(--surface); }
.ild-og-img { height: 96px; background: var(--surface-2); display: grid; place-items: center; color: var(--faint); font-size: 12px; font-family: var(--mono); background-size: cover; background-position: center; }
.ild-og.is-rich .ild-og-img { background-color: #c2410c; background-image: linear-gradient(135deg, #fde3c8, #c2410c); color: #fff; font-family: var(--serif); font-size: 26px; }
.ild-og-meta { padding: 10px 12px; font-size: 13px; }
.ild-og-meta b { display: block; }
.ild-og-meta span { color: var(--faint); font-size: 11px; }
.ild-og .bar { height: 8px; border-radius: 4px; background: var(--surface-2); margin: 4px 0; }
.ild-tl-end { text-align: center; padding: 30px 0 0; position: relative; z-index: 1; }
.ild-tl-end .inner { display: inline-block; background: var(--bg); padding: 12px 20px; }
.ild-tl-end .big { font-family: var(--serif); font-size: clamp(32px, 4vw, 48px); line-height: 1.05; }
.ild-tl-end p { color: var(--muted); margin: 10px 0 0; }
@media (max-width: 820px) {
	.ild-board-inner { grid-template-columns: 1fr 1fr; gap: 8px 16px; }
	.ild-board-clock { grid-column: 1 / -1; grid-row: 1; justify-self: center; font-size: 13px; padding: 5px 12px; }
	.ild-board-side { gap: 14px; }
	.ild-board-side .ild-who { display: none; }
	.ild-board-stat .v { font-size: 24px; }
	.ild-col-labels { display: none; }
	.ild-spine { left: 11px; }
	.ild-ev { grid-template-columns: 1fr; gap: 14px; min-height: 0; padding: 50px 0 50px 34px; }
	.ild-ev-head { text-align: left; margin-bottom: 6px; }
	.ild-ev-head .inner { padding: 0; background: transparent; }
	.ild-ev-time { margin-left: -42px; }
	.ild-card.is-vibe, .ild-card.is-wp { grid-column: 1; }
	.js-timeline .ild-ev:not(.is-on) .ild-card.is-vibe, .js-timeline .ild-ev:not(.is-on) .ild-card.is-wp { transform: translateY(16px); }
	.ild-card-who { display: block; }
	.ild-tl-end { text-align: left; padding-left: 34px; }
	.ild-tl-end .inner { padding: 0; background: transparent; }
}

/* ---------- Receipt ---------- */
.ild-receipt-sec { padding: clamp(80px, 10vw, 140px) 0; background: var(--bg-2); border-block: 1px solid var(--line); overflow: hidden; }
.ild-receipt-grid { display: grid !important; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.ild-receipt-copy .ild-section-title em { font-style: italic; }
.ild-share-row { margin-top: 30px !important; }
.ild-receipts { display: flex; gap: 20px; align-items: flex-start; justify-content: center; }
.ild-slip {
	--edge: 10px;
	width: 300px; background: var(--paper); color: var(--ink); font-family: var(--mono); font-size: 12px; line-height: 1.55; padding: 26px 22px 30px;
	filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .25));
	-webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--edge) 51% repeat-x, conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / var(--edge) 51% repeat-x;
	mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--edge) 51% repeat-x, conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / var(--edge) 51% repeat-x;
	transform: rotate(-2deg);
}
.ild-slip.is-small { width: 230px; transform: rotate(3deg) translateY(40px); }
.ild-slip .rh { text-align: center; font-weight: 600; letter-spacing: .12em; font-size: 13px; }
.ild-slip .rsub { text-align: center; color: #666; font-size: 11px; margin-bottom: 12px; }
.ild-slip hr { border: 0; border-top: 1px dashed #999; margin: 10px 0; }
.ild-slip .row { display: flex; justify-content: space-between; gap: 10px; }
.ild-slip .row span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ild-slip .row span:last-child { flex-shrink: 0; }
.ild-slip .row.is-pending { color: #767676; text-decoration: line-through; text-decoration-color: #b5b5b5; }
.ild-slip .row.is-faint { color: #686868; }
.ild-slip .total { font-weight: 600; font-size: 14px; }
.ild-slip .stamp { margin: 14px auto 6px; width: fit-content; padding: 4px 12px; border: 2px solid #be123c; color: #be123c; font-weight: 600; letter-spacing: .08em; transform: rotate(-6deg); border-radius: 4px; font-size: 12px; }
.ild-slip .stamp.is-ok { border-color: #15803d; color: #15803d; }
.ild-slip .barcode { height: 40px; margin-top: 14px; background: repeating-linear-gradient(90deg, #1b1b1f 0 2px, transparent 2px 4px, #1b1b1f 4px 5px, transparent 5px 8px, #1b1b1f 8px 11px, transparent 11px 12px); }
.ild-slip.is-small .barcode { height: 28px; }
.ild-slip .thanks { text-align: center; margin-top: 10px; color: #666; font-size: 11px; }
@media (max-width: 900px) { .ild-receipt-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .ild-receipts { flex-direction: column; align-items: center; } .ild-slip, .ild-slip.is-small { width: min(300px, 100%); transform: rotate(-1deg); } .ild-slip.is-small { transform: rotate(1.5deg); } }

/* ---------- Confession booth ---------- */
.ild-booth { padding: clamp(90px, 11vw, 150px) 0; background-color: var(--bg-2); background-image: radial-gradient(color-mix(in srgb, var(--text) 16%, transparent) 1px, transparent 1.4px); background-size: 22px 22px; border-block: 1px solid var(--line); overflow: hidden; }
.ild-booth-head { text-align: center; max-width: 720px; margin-inline: auto; }
.ild-booth-head p:last-child { color: var(--muted); font-size: clamp(1.05rem, 1.6vw, 1.2rem); margin: 16px auto 0; max-width: 52ch; }
.ild-madlib { position: relative; max-width: 900px; margin: 64px auto 0; background: var(--paper); color: var(--ink); border-radius: 6px; padding: clamp(28px, 5vw, 56px); box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 40px 70px -35px rgba(0, 0, 0, .45); transform: rotate(-.7deg); }
.ild-madlib::before, .ild-madlib::after { content: ""; position: absolute; top: -15px; width: 130px; height: 32px; background: rgba(246, 230, 178, .82); box-shadow: 0 2px 6px rgba(0, 0, 0, .08); }
.ild-madlib::before { left: 48px; transform: rotate(-4deg); }
.ild-madlib::after { right: 48px; transform: rotate(5deg); }
.ild-madlib-top { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #77736a; padding-bottom: 18px; margin-bottom: 26px; border-bottom: 1px dashed #c9c3b6; }
.ild-madlib-top b { color: var(--ink); font-weight: 600; }
.ild-madlib-text { font-family: var(--serif); font-size: clamp(26px, 3.6vw, 44px); line-height: 1.6; letter-spacing: -.01em; }
.ild-blank { display: inline-flex; flex-direction: column; vertical-align: baseline; position: relative; }
.ild-blank input, .ild-blank select, .ild-blank textarea { font: inherit; color: #1f3fbf; background: transparent; border: 0; border-bottom: 2px solid #1b1b1f; padding: 0 4px; border-radius: 0; outline: none; transition: border-color .2s, background .2s; }
.ild-blank input::placeholder, .ild-blank textarea::placeholder { color: #8f95ad; font-style: italic; }
.ild-blank input:focus, .ild-blank textarea:focus, .ild-blank select:focus { border-color: #3858e9; background: rgba(56, 88, 233, .06); }
.ild-blank select { cursor: pointer; appearance: none; -webkit-appearance: none; padding-right: 26px; background-image: linear-gradient(45deg, transparent 50%, #1b1b1f 50%), linear-gradient(135deg, #1b1b1f 50%, transparent 50%); background-position: calc(100% - 12px) 55%, calc(100% - 6px) 55%; background-size: 6px 6px; background-repeat: no-repeat; }
.ild-blank.is-name input { width: 7.5em; }
.ild-blank.is-email input { width: 10em; }
.ild-blank.is-story { display: flex; margin: 6px 0; }
.ild-blank.is-story textarea { width: 100%; min-height: 2.6em; resize: vertical; line-height: 1.4; font-size: .8em; }
.ild-blank .ild-err { position: absolute; top: 100%; left: 4px; font: 600 13px/1.4 var(--wp--preset--font-family--sans); color: #be123c; white-space: nowrap; }
.ild-blank.is-story .ild-err { position: static; }
.ild-blank.is-invalid input, .ild-blank.is-invalid textarea { border-color: #be123c; }
.ild-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ild-madlib-foot { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 40px; padding-top: 24px; border-top: 1px dashed #c9c3b6; }
.ild-proof-note { font-family: var(--mono); font-size: 12px; color: #5f5f5f; display: flex; gap: 8px 18px; flex-wrap: wrap; }
.ild-proof-note span::before { content: "✓ "; color: #15803d; }
.ild-proof-note em { font-style: normal; opacity: .8; }
.ild-foot-actions { display: flex; align-items: center; gap: 22px; }
.ild-madlib-stamp { font-family: var(--mono); font-weight: 600; font-size: 13px; letter-spacing: .12em; color: #be123c; border: 2px solid #be123c; border-radius: 4px; padding: 4px 10px; transform: rotate(8deg); opacity: .85; }
.ild-btn-confess { background: #1b1b1f; color: #fff; font-size: 18px; padding: 16px 28px; }
.ild-btn-confess:hover { transform: translateY(-2px) rotate(-1deg); box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .45); }
.ild-btn-confess[disabled] { opacity: .6; cursor: progress; }
.ild-form-error { margin-top: 18px; font: 600 15px/1.4 var(--wp--preset--font-family--sans); color: #be123c; }
.ild-logged { text-align: center; padding: 20px 0; }
.ild-logged .stamp { display: inline-block; font-family: var(--mono); font-weight: 600; letter-spacing: .12em; font-size: 22px; padding: 8px 22px; border: 3px solid #15803d; color: #15803d; border-radius: 6px; transform: rotate(-5deg); }
.ild-logged p { font-family: var(--serif); font-size: clamp(24px, 3vw, 34px); margin: 22px 0 0; }
.ild-logged small { display: block; margin-top: 10px; font-size: 14px; color: #5f5f5f; }
@media (max-width: 600px) { .ild-madlib { transform: none; } .ild-madlib-stamp, .ild-period { display: none; } .ild-blank.is-name, .ild-blank.is-email { display: flex; } .ild-blank.is-name input, .ild-blank.is-email input { width: 100%; } }

/* ---------- Proof checklist ---------- */
.ild-proof { padding: clamp(90px, 11vw, 150px) 0; }
.ild-proof-list { margin-top: 40px; }
.ild-verify { display: flex; align-items: center; gap: 18px; justify-content: flex-end; }
.ild-verify .k { font-size: 13px; color: var(--muted); font-weight: 600; }
.ild-verify .v { font-family: var(--serif); font-size: 44px; line-height: 1; }
.ild-verify .v small { font-size: 22px; color: var(--faint); }
.ild-verify .bar { width: 160px; height: 4px; background: var(--line); border-radius: 2px; overflow: hidden; }
.ild-verify .bar i { display: block; height: 100%; width: 0; background: var(--ok); transition: width .5s cubic-bezier(.2, .8, .2, 1); }
.ild-checks { list-style: none; padding: 0; margin: 24px 0 0; border-top: 1px solid var(--line-2); }
.ild-check { display: grid; grid-template-columns: 56px 1.1fr 1.3fr 230px; gap: 24px; align-items: center; padding: 24px 0; border-bottom: 1px solid var(--line-2); }
.ild-check .box { width: 36px; height: 36px; border-radius: 10px; border: 1.5px solid var(--line-2); display: grid; place-items: center; font-weight: 800; color: transparent; transition: background .3s, color .3s, border-color .3s, transform .3s cubic-bezier(.2, .8, .2, 1.6); }
.ild-check.is-done .box { background: var(--ok); border-color: var(--ok); color: var(--bg); transform: scale(1.06); }
.ild-check .claim { font-size: 20px; font-weight: 650; letter-spacing: -.01em; line-height: 1.25; }
.ild-check .claim small { display: block; font-family: var(--mono); font-size: 11px; font-weight: 500; color: var(--faint); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 4px; }
.ild-check .how { color: var(--muted); font-size: 15px; margin: 0; }
.ild-check .ild-btn { padding: 11px 18px; font-size: 14px; justify-self: end; }
.ild-check .detail { grid-column: 2 / -1; }
.ild-check .detail[hidden] { display: none; }
.ild-code { font-family: var(--mono); font-size: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; overflow-x: auto; white-space: pre; color: var(--muted); margin: 0; }
.ild-code .t { color: var(--wp); }
@media (max-width: 860px) {
	.ild-check { grid-template-columns: 44px 1fr; gap: 6px 16px; align-items: start; }
	.ild-check .box { grid-row: span 3; }
	.ild-check .ild-btn { justify-self: start; margin-top: 10px; }
	.ild-check .detail { grid-column: 2; }
	.ild-verify { justify-content: flex-start; }
}

/* ---------- Your line ---------- */
.ild-line { padding: clamp(90px, 11vw, 150px) 0; background: var(--bg-2); border-top: 1px solid var(--line); }
.ild-line-head { max-width: 780px; }
.ild-two-col { display: grid !important; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 52px; }
.ild-fit { border-radius: 24px; padding: clamp(26px, 4vw, 40px); background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--shadow); position: relative; overflow: hidden; }
.ild-fit::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; }
.ild-fit.is-vibe::before { background: var(--vibe-grad); }
.ild-fit.is-wp::before { background: var(--wp-solid); }
.ild-k { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ild-fit h3 { font-family: var(--serif); font-size: clamp(34px, 4vw, 48px); letter-spacing: -.02em; margin: 10px 0 20px; }
.ild-fit ul { list-style: none; padding: 0; margin: 0; }
.ild-fit li { padding: 14px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 15px; }
.ild-fit li strong { display: block; color: var(--text); font-size: 17px; font-weight: 650; }
.ild-gut { margin-top: 16px; border-radius: 24px; padding: clamp(26px, 4vw, 40px); background: var(--text); color: var(--bg); display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.ild-gut h3 { font-family: var(--serif); font-size: clamp(32px, 3.6vw, 44px); letter-spacing: -.02em; margin: 0; }
.ild-gut .sub { opacity: .7; margin: 8px 0 22px; font-size: 15px; }
.ild-toggles { display: flex; flex-direction: column; }
.ild-tog { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid color-mix(in srgb, var(--bg) 14%, transparent); cursor: pointer; font-size: 16px; position: relative; }
.ild-tog input { position: absolute; opacity: 0; pointer-events: none; }
.ild-tog .sw { width: 44px; height: 26px; border-radius: 99px; background: color-mix(in srgb, var(--bg) 25%, transparent); position: relative; flex-shrink: 0; transition: background .25s; }
.ild-tog .sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--bg); transition: transform .3s cubic-bezier(.2, .8, .2, 1.4); }
.ild-tog input:checked + .sw { background: var(--wp-solid); }
.ild-tog input:checked + .sw::after { transform: translateX(18px); background: #fff; }
.ild-tog input:focus-visible + .sw { outline: 2px solid var(--wp-solid); outline-offset: 3px; }
.ild-verdict { text-align: center; }
.ild-scale { position: relative; height: 10px; border-radius: 99px; background: linear-gradient(90deg, var(--vibe-1), var(--vibe-2) 40%, #6b8cff 60%, var(--wp-solid)); margin: 0 0 12px; }
.ild-scale .pin { position: absolute; top: 50%; left: 6%; width: 26px; height: 26px; border-radius: 50%; background: var(--bg); border: 4px solid var(--text); box-shadow: 0 0 0 2px var(--bg); transform: translate(-50%, -50%); transition: left .6s cubic-bezier(.2, .8, .2, 1.2); }
.ild-scale-labels { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 12px; opacity: .75; }
.ild-verdict .result { font-family: var(--serif); font-size: clamp(30px, 3.4vw, 42px); line-height: 1.1; margin-top: 30px; min-height: 2.2em; display: grid; place-items: center; }
.ild-verdict .why { opacity: .75; font-size: 15px; margin: 8px auto 0; max-width: 40ch; min-height: 3em; }
@media (max-width: 860px) { .ild-two-col, .ild-gut { grid-template-columns: 1fr; } }

/* ---------- CTA ---------- */
.ild-cta { padding: clamp(90px, 10vw, 140px) 0; }
.ild-cta-big { text-align: center; max-width: 900px; margin-inline: auto; }
.ild-cta-big h2 { font-family: var(--serif); font-size: clamp(3rem, 8vw, 6.4rem); letter-spacing: -.03em; line-height: .95; margin: 0; }
.ild-cta-big h2 em { font-style: italic; }
.ild-cta-big p { color: var(--muted); font-size: clamp(1.05rem, 1.6vw, 1.25rem); max-width: 56ch; margin: 22px auto 0 !important; }
.ild-cta-grid { display: grid !important; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 56px; }
.ild-cta-card { border-radius: 24px; padding: clamp(28px, 4vw, 44px); display: flex !important; flex-direction: column; gap: 14px; }
.ild-cta-card h3 { font: 700 clamp(24px, 2.6vw, 30px)/1.15 var(--wp--preset--font-family--sans); letter-spacing: -.02em; margin: 0; }
.ild-cta-card .wp-block-buttons { margin-top: auto; }
.ild-cta-wp { background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--shadow); }
.ild-cta-wp p { color: var(--muted); }
.ild-cta-wds { background: var(--wp-solid); color: #fff; position: relative; overflow: hidden; }
.ild-cta-wds::after { content: ""; position: absolute; right: -120px; bottom: -160px; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .28), transparent 65%); pointer-events: none; }
/* WebDevStudios wordmark, top right, in white. Added in CSS so it ships with the theme. */
.ild-cta-wds::before { content: ""; position: absolute; z-index: 1; top: calc(clamp(28px, 4vw, 44px) - 6px); right: clamp(28px, 4vw, 44px); width: 124px; aspect-ratio: 1096.76 / 247.84; background: #fff; -webkit-mask: url(../images/wds-logo.svg) center / contain no-repeat; mask: url(../images/wds-logo.svg) center / contain no-repeat; pointer-events: none; }
@media (max-width: 560px) { .ild-cta-wds::before { position: static; width: 108px; margin-bottom: 4px; } }
.ild-cta-wds .ild-k, .ild-cta-wds p { color: rgba(255, 255, 255, .9); }
.ild-cta-wds > * { position: relative; z-index: 1; }
.ild-cta-grid { grid-template-columns: 1fr 1.35fr; }
.ild-cta-points { list-style: none; padding: 0; margin: 4px 0 8px; display: grid; gap: 10px; }
.ild-cta-points li { position: relative; padding-left: 28px; font-size: 15px; line-height: 1.4; }
.ild-cta-points li::before { content: "✓"; position: absolute; left: 0; top: .05em; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font: 800 11px/1 var(--wp--preset--font-family--sans); background: var(--ok-soft); color: var(--ok); }
.ild-cta-wp .ild-cta-points li { color: var(--text); }
.ild-cta-wds .ild-cta-points li { color: #fff; }
.ild-cta-wds .ild-cta-points li::before { background: rgba(255, 255, 255, .18); color: #fff; }
.ild-wds-stats { display: grid !important; grid-template-columns: 1fr 1fr; gap: 16px; margin: 8px 0 4px; }
.ild-wds-stats p { margin: 0; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .3); font-size: 14px; line-height: 1.35; color: rgba(255, 255, 255, .85) !important; }
.ild-wds-stats strong { display: block; font: 400 clamp(40px, 4.4vw, 56px)/1 var(--serif); letter-spacing: -.02em; color: #fff; margin-bottom: 6px; }
@media (max-width: 960px) { .ild-cta-grid { grid-template-columns: 1fr; } }

/* ---------- Pages and 404 ---------- */
.ild-page { padding: clamp(56px, 8vw, 100px) 0; }
.ild-prose { max-width: 760px; }
.ild-page-title { font-family: var(--serif); font-size: clamp(2.6rem, 6vw, 4.4rem); letter-spacing: -.02em; margin: 0 0 32px; }
.ild-prose .wp-block-post-content > * + * { margin-top: 1.1em; }
.ild-prose h2 { font-family: var(--serif); font-size: clamp(1.9rem, 3.5vw, 2.6rem); margin-top: 1.6em !important; }
.ild-prose h3 { font-weight: 650; font-size: 1.2rem; margin-top: 1.4em !important; }
.ild-prose a { color: var(--wp); text-underline-offset: 3px; }
.ild-404 { padding: clamp(80px, 12vw, 160px) 0; }
.ild-404-title { font-family: var(--serif); font-size: clamp(3.4rem, 10vw, 8rem); letter-spacing: -.03em; line-height: .95; margin: 18px 0 0; }
.ild-404-links { margin-top: 34px; gap: 10px; }
.ild-404-links .wp-block-navigation-item__content { padding: 12px 20px; border-radius: 999px; border: 1px solid var(--line-2); font-weight: 600; text-decoration: none; }
.ild-404-links .wp-block-navigation-item:first-child .wp-block-navigation-item__content { background: var(--text); color: var(--bg); border-color: var(--text); }
.ild-404-log { margin-top: 40px !important; font-family: var(--mono); font-size: 13px; color: var(--ok); }
.ild-404-log code { font-family: inherit; }

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
	.js-reveal .ild-layer:not(.is-in) { opacity: 1; transform: none; }
}

/* ---------- Toast ---------- */
.ild-toast { position: fixed; left: 50%; bottom: 24px; z-index: 90; transform: translate(-50%, 140%); opacity: 0; pointer-events: none; background: var(--text); color: var(--bg); padding: 12px 18px; border-radius: 999px; font-size: 14px; font-weight: 500; transition: transform .4s cubic-bezier(.2, .8, .2, 1), opacity .3s; max-width: calc(100% - 32px); text-align: center; }
.ild-toast.is-shown { transform: translate(-50%, 0); opacity: 1; }
.ild-draft-note { padding: 12px 16px; border-radius: 12px; background: var(--bad-soft); color: var(--bad); font-size: 14px; }

/* ---------- How we built this (proof section) ---------- */
.ild-built-by { margin-top: 56px; border-radius: 24px; border: 1px solid var(--line-2); background: var(--surface); padding: clamp(24px, 4vw, 40px); display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.ild-built-by h3 { font: 400 clamp(28px, 3vw, 36px)/1.1 var(--serif); letter-spacing: -.02em; margin: 12px 0 0; }
.ild-built-intro p:not(.ild-eyebrow) { color: var(--muted); font-size: 15px; margin: 12px 0 18px; }
.ild-built-link a { font-weight: 600; font-size: 15px; color: var(--text); text-underline-offset: 3px; }
.ild-built-col .ild-k { display: block; padding-bottom: 10px; border-bottom: 2px solid; margin: 0; }
.ild-built-col.is-ai .ild-k { color: color-mix(in srgb, var(--vibe-2) 65%, var(--text)); border-image: var(--vibe-grad) 1; }
.ild-built-col.is-eng .ild-k { color: var(--wp); border-color: var(--wp); }
.ild-built-col ul { list-style: none; padding: 0; margin: 0; }
.ild-built-col li { padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.ild-built-col li strong { display: block; font-size: 15px; font-weight: 500; color: var(--text); margin-bottom: 2px; }
@media (max-width: 900px) { .ild-built-by { grid-template-columns: 1fr; } }

/* ---------- Gut check: next step once the verdict leans "build it to last" ---------- */
.ild-verdict-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 10px 18px; border-radius: 999px; background: var(--bg); color: var(--text); font-size: 14px; font-weight: 600; text-decoration: none; transition: opacity .3s, transform .3s, visibility .3s; }
.ild-verdict-cta:hover { transform: translateY(-2px); }
.ild-verdict-cta[aria-hidden="true"] { opacity: 0; visibility: hidden; transform: translateY(6px); }