:root {
    --ink: #15121f;
    --bg: #fff8ef;
    --card: #ffffff;
    --muted: #5d5873;
    --violet: #7c3aed;
    --pink: #ec4899;
    --lime: #a3e635;
    --sun: #fde047;
    --sky: #38bdf8;
    --r-lg: 28px;
    --r-md: 18px;
    --shadow: 4px 4px 0 var(--ink);
    --shadow-lg: 8px 8px 0 var(--ink);
    --section-pad: clamp(72px, 10vw, 124px);
    --display: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
/* overflow-x: clip stops sideways scrolling on phones without breaking the sticky nav.
   The "hidden" line is the fallback for browsers without clip.
   scroll-padding-top keeps anchor targets below the sticky nav (74px, plus the iPhone notch inset). */
html { overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: calc(88px + env(safe-area-inset-top, 0px)); }
body {
    margin: 0; font-family: var(--body); font-size: 17px; line-height: 1.6;
    color: var(--ink); background: var(--bg);
    overflow-x: hidden; overflow-x: clip;
    -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%;
}
a { color: inherit; text-decoration: none; }
a, button, label, summary, [role="button"] { touch-action: manipulation; }   /* no double-tap zoom on things you tap (two quick taps on the menu button zoomed in); pinch zoom stays */
p { margin: 0; }
figure { margin: 0; }
:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; }
.wrap { width: min(1160px, 100% - 40px); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.i { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Buttons */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font: 700 1rem/1 var(--body); padding: 15px 24px; border-radius: 999px;
    border: 2px solid var(--ink); background: var(--card); color: var(--ink);
    box-shadow: var(--shadow); cursor: pointer; white-space: nowrap;
    transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.btn-primary { background: var(--violet); color: #fff; }
.btn-sm { padding: 11px 18px; font-size: .92rem; }
.btn .i { width: 18px; height: 18px; }

/* Hidden landing page, seen by an admin (includes/landings.php) */
.preview-bar { background: #fde047; color: var(--ink); border-bottom: 2px solid var(--ink); padding: 8px 16px; text-align: center; font-size: .88rem; font-weight: 600; }

/* Nav */
.nav {
    position: sticky; top: 0; z-index: 50;
    padding-top: env(safe-area-inset-top, 0px);
    background: color-mix(in srgb, var(--bg) 85%, transparent);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-bottom: 2px solid transparent; transition: border-color .2s;
}
.nav.scrolled, .nav:has(.mobile-menu:not([hidden])) { border-bottom-color: var(--ink); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 74px; }
.logo { display: flex; align-items: center; gap: 10px; font: 800 1.5rem/1 var(--display); letter-spacing: -.03em; white-space: nowrap; }
.logo-mark {
    width: 38px; height: 38px; flex: none; border-radius: 12px; display: grid; place-items: center;
    background: var(--violet); color: #fff; border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
    rotate: -6deg;
}
.logo-mark .i { width: 20px; height: 20px; stroke-width: 2.6; }
.nav-links { display: flex; gap: 30px; font-weight: 600; }
.nav-actions { display: flex; align-items: center; gap: 12px; }
.nav-actions .btn { box-shadow: 3px 3px 0 var(--ink); }
.nav-actions .btn:hover { box-shadow: 5px 5px 0 var(--ink); }
.nav-links a { position: relative; }
.nav-links a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 3px; border-radius: 3px;
    background: var(--pink); scale: 0 1; transition: scale .2s ease;
}
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { scale: 1 1; }
.menu-toggle {
    display: none; width: 46px; height: 46px; flex: none; padding: 0; cursor: pointer;
    flex-direction: column; align-items: center; justify-content: center; gap: 5px;
    background: var(--sun); border: 2px solid var(--ink); border-radius: 14px; box-shadow: 3px 3px 0 var(--ink);
}
.menu-toggle span { width: 20px; height: 2.5px; border-radius: 2px; background: var(--ink); transition: rotate .2s ease, translate .2s ease, opacity .2s ease; }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { translate: 0 7.5px; rotate: 45deg; }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { translate: 0 -7.5px; rotate: -45deg; }
.mobile-menu { padding: 8px 0 22px; }
.mobile-menu[hidden] { display: none; }
.mobile-menu nav { display: grid; gap: 10px; }
.mobile-menu a:not(.btn) {
    padding: 14px 18px; background: var(--card); border: 2px solid var(--ink); border-radius: 16px;
    box-shadow: 3px 3px 0 var(--ink); font: 700 1.1rem/1.2 var(--display);
}
.mobile-menu a[aria-current="page"] { background: var(--lime); }
.mobile-menu .menu-login { display: none; }

/* Home hero */
.hero { position: relative; isolation: isolate; overflow: hidden; overflow-anchor: none; padding: clamp(40px, 7vw, 80px) 0 clamp(64px, 9vw, 104px); }
.blob { position: absolute; z-index: -1; border-radius: 50%; filter: blur(70px); opacity: .5; animation: drift 18s ease-in-out infinite alternate; }
.blob-a { width: 460px; height: 460px; background: var(--pink); top: -160px; right: -120px; }
.blob-b { width: 380px; height: 380px; background: var(--sun); bottom: -160px; left: -140px; animation-delay: -6s; }
.blob-c { width: 300px; height: 300px; background: var(--violet); top: 35%; left: 42%; opacity: .22; animation-delay: -11s; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
.hero-title { font: 800 clamp(2.6rem, 6.4vw, 5.2rem)/.96 var(--display); letter-spacing: -.04em; margin: 0 0 20px; }
.hero-title mark { position: relative; z-index: 0; background: none; color: inherit; white-space: nowrap; }
.hero-title mark::before {
    content: ""; position: absolute; z-index: -1; inset: .5em -.08em .04em;
    background: var(--lime); border-radius: 8px; rotate: -1.5deg;
}
.lede { font-size: clamp(1.06rem, 1.6vw, 1.24rem); color: var(--muted); max-width: 33em; }
.works-with { margin-top: 22px; font-size: .9rem; color: var(--muted); }
.works-with b { color: var(--ink); font-weight: 600; }

/* Claim form */
.claim {
    margin-top: 30px; max-width: 580px; padding: 10px; display: grid; gap: 8px;
    background: var(--card); border: 2px solid var(--ink); border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
}
.field {
    display: flex; align-items: center; min-width: 0; min-height: 56px; padding: 0 20px;
    background: var(--bg); border: 2px solid var(--ink); border-radius: 999px;
    transition: box-shadow .15s ease;
}
.field:focus-within { box-shadow: 0 0 0 4px color-mix(in srgb, var(--violet) 32%, transparent); }
/* width: 100% lets inputs shrink below their default ~20-character width on narrow phones. */
.field input {
    flex: 1; width: 100%; min-width: 0; border: 0; outline: none; background: transparent; padding: 14px 0;
    font: 600 1.05rem var(--body); color: var(--ink);
}
.field input::placeholder { color: #a19bb3; }
.field-url .prefix { font-weight: 700; color: var(--muted); white-space: nowrap; }
.field-url input { color: var(--violet); font-weight: 700; }
.claim-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.btn-claim { min-height: 56px; box-shadow: none; }
.btn-claim:hover { box-shadow: 4px 4px 0 var(--ink); }
.claim-error {
    margin: 2px 4px 4px; padding: 10px 14px; border-radius: 14px;
    background: #ffe4f1; border: 2px solid var(--pink); font-weight: 600; font-size: .95rem;
}
.claim-note { margin: 14px 4px 0; font-size: .9rem; color: var(--muted); }
.claim-success { grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; align-content: center; padding: 20px 22px; background: var(--lime); }
/* Focused (without scrolling) after an in-place claim so screen readers land on it; it isn't interactive. */
.claim-success:focus { outline: none; }
.claim-success strong { font: 800 1.25rem/1.2 var(--display); overflow-wrap: anywhere; }
.claim-success p { margin-top: 4px; }
.success-badge {
    width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
    background: var(--ink); color: var(--lime);
}
.success-badge .i { stroke-width: 3; }

/* Phone mockup */
.stage { position: relative; display: grid; place-items: center; min-height: 640px; }
.phone {
    position: relative; width: min(318px, 86%); aspect-ratio: 9 / 18.6; padding: 11px;
    background: var(--ink); border-radius: 48px; rotate: 3deg;
    box-shadow: 14px 14px 0 var(--violet), 14px 14px 0 2px var(--ink);
    animation: float 6s ease-in-out infinite;
}
.screen {
    position: relative; height: 100%; overflow: hidden; border-radius: 38px;
    padding: 46px 18px 18px; display: flex; flex-direction: column; align-items: center; text-align: center;
    color: #fff; background: radial-gradient(120% 70% at 50% 0%, #a855f7 0%, transparent 60%), linear-gradient(165deg, #2b1166 0%, #6d28d9 55%, #db2777 100%);
}
.notch { position: absolute; top: 11px; left: 50%; translate: -50% 0; width: 92px; height: 24px; border-radius: 999px; background: var(--ink); }
.avatar {
    width: 84px; height: 84px; flex: none; border-radius: 50%; display: grid; place-items: center;
    border: 3px solid #fff; font: 800 1.8rem var(--display); color: var(--ink);
    background: conic-gradient(from 200deg, var(--sun), var(--lime), var(--sky), var(--pink), var(--sun));
}
.p-name { margin-top: 12px; font: 800 1.3rem/1.2 var(--display); display: flex; align-items: center; gap: 6px; }
.p-name .verified { width: 18px; height: 18px; border-radius: 50%; background: var(--sky); display: grid; place-items: center; }
.p-name .verified .i { width: 12px; height: 12px; stroke-width: 3.5; color: #fff; }
.p-bio { margin: 4px 0 16px; font-size: .8rem; line-height: 1.45; opacity: .88; }
.p-link {
    width: 100%; margin-bottom: 9px; padding: 11px 14px; display: flex; align-items: center; gap: 10px;
    background: #fff; color: var(--ink); border: 2px solid var(--ink); border-radius: 14px; box-shadow: 3px 3px 0 var(--ink);
    font-weight: 700; font-size: .84rem; text-align: left;
}
.p-link .i { width: 18px; height: 18px; }
.p-link.feat { background: var(--sun); }
.p-socials { display: flex; gap: 10px; margin-top: auto; }
.p-socials span { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.18); }
.p-socials .i { width: 17px; height: 17px; }
.p-url { margin-top: 10px; font-size: .74rem; font-weight: 600; opacity: .85; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sticker {
    position: absolute; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 10px 14px;
    background: var(--card); border: 2px solid var(--ink); border-radius: 18px; box-shadow: var(--shadow);
    font-weight: 700; font-size: .88rem; line-height: 1.25; animation: float 5s ease-in-out infinite;
}
.sticker small { display: block; font-weight: 500; color: var(--muted); font-size: .76rem; }
.sticker .chip { width: 34px; height: 34px; flex: none; border-radius: 10px; display: grid; place-items: center; border: 2px solid var(--ink); }
.sticker .chip .i { width: 18px; height: 18px; }
.sticker-1 { top: 14%; left: -2%; rotate: -6deg; animation-delay: -1.2s; }
.sticker-2 { bottom: 15%; right: -3%; rotate: 5deg; animation-delay: -2.6s; background: var(--sun); }
.sticker-2 small { color: var(--ink); opacity: .7; }

/* Marquee: the tilted strip is wider than the screen, so its wrapper clips it. */
.marquee-wrap { overflow: hidden; padding-block: 20px; }
.marquee {
    width: calc(100% + 60px); margin-left: -30px; overflow: hidden; rotate: -1.4deg;
    background: var(--ink); color: var(--bg); padding: 18px 0;
}
.marquee-track { display: flex; width: max-content; animation: marquee 32s linear infinite; }
.marquee-group { display: flex; font: 800 clamp(1.3rem, 2.8vw, 1.9rem)/1 var(--display); text-transform: uppercase; letter-spacing: -.01em; }
.marquee-group span { display: inline-flex; align-items: center; gap: 36px; padding-right: 36px; }
.marquee-group span::after { content: "✦"; color: var(--lime); }
.marquee-group span:nth-child(3n+2)::after { color: var(--pink); }
.marquee-group span:nth-child(3n)::after { color: var(--sun); }

/* Sections */
section { padding: var(--section-pad) 0; }
/* A tab page's own section sits right under the nav, with a soft gradient wash. */
.page-top { padding-top: clamp(48px, 8vw, 96px); }
.page-top:not(.how) { background: radial-gradient(60% 50% at 85% 0%, color-mix(in srgb, var(--pink) 18%, transparent), transparent), radial-gradient(50% 40% at 0% 10%, color-mix(in srgb, var(--sun) 35%, transparent), transparent); }
.section-head { max-width: 740px; margin: 0 auto clamp(40px, 5vw, 60px); text-align: center; }
.kicker { display: inline-block; font-weight: 800; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--violet); }
.section-title { margin: 10px 0 14px; font: 800 clamp(2.1rem, 4.6vw, 3.5rem)/1.02 var(--display); letter-spacing: -.035em; }
h1.section-title { font-size: clamp(2.5rem, 6vw, 4.4rem); }
.section-head p { color: var(--muted); font-size: 1.12rem; }

.features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.card {
    padding: 28px; background: var(--card); border: 2px solid var(--ink); border-radius: var(--r-lg); box-shadow: var(--shadow);
    transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover { transform: translate(-3px, -3px); box-shadow: 7px 7px 0 var(--ink); }
.card-icon { width: 54px; height: 54px; margin-bottom: 18px; border-radius: 16px; border: 2px solid var(--ink); display: grid; place-items: center; rotate: -4deg; }
.card:nth-child(even) .card-icon { rotate: 4deg; }
.card h3 { margin: 0 0 8px; font: 800 1.32rem/1.2 var(--display); letter-spacing: -.015em; }
.card p { color: var(--muted); }
.bg-violet { background: var(--violet); color: #fff; }
.bg-pink { background: var(--pink); color: #fff; }
.bg-lime { background: var(--lime); }
.bg-sun { background: var(--sun); }
.bg-sky { background: var(--sky); }

.how { background: var(--violet); color: #fff; border-block: 2px solid var(--ink); }
.how .kicker { color: var(--sun); }
.how .section-head p { color: rgba(255,255,255,.82); }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.step { padding: 30px 28px; background: var(--card); color: var(--ink); border: 2px solid var(--ink); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); }
.step-num { width: 58px; height: 58px; margin-bottom: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--sun); border: 2px solid var(--ink); font: 800 1.6rem/1 var(--display); }
.step:nth-child(2) .step-num { background: var(--lime); }
.step:nth-child(3) .step-num { background: var(--pink); color: #fff; }
.step h3 { margin: 0 0 8px; font: 800 1.4rem/1.2 var(--display); letter-spacing: -.015em; }
.step p { color: var(--muted); }

/* Home page examples: the /examples phones (.ex-card, .phone-mock below), the middle one raised. */
.examples { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; align-items: end; }
.examples .ex-card:nth-child(2) { margin-bottom: 36px; }
.examples-more { margin: 44px 0 0; text-align: center; }

.faq { max-width: 800px; margin-inline: auto; display: grid; gap: 14px; }
.faq details { background: var(--card); border: 2px solid var(--ink); border-radius: var(--r-md); box-shadow: var(--shadow); }
.faq summary {
    list-style: none; cursor: pointer; padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
    font: 700 1.12rem/1.35 var(--display);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: "+"; flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
    background: var(--sun); border: 2px solid var(--ink); font: 700 1.3rem/1 var(--body); transition: rotate .2s ease;
}
.faq details[open] summary::after { rotate: 45deg; background: var(--lime); }
.faq details p { padding: 0 24px 22px; color: var(--muted); }
.faq details { transition: transform .15s ease, box-shadow .15s ease; }
.faq details:has(summary:hover) { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.faq summary:hover::after { background: var(--lime); }
.faq summary:focus-visible { outline: 3px solid var(--violet); outline-offset: 4px; border-radius: var(--r-md); }
@media (prefers-reduced-motion: reduce) { .faq details { transition: none; } .faq details:has(summary:hover) { transform: none; } }

.final { padding-top: 0; }
.how + .final { padding-top: var(--section-pad); }
.cta-band {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 48px); align-items: center;
    padding: clamp(28px, 6vw, 72px); background: var(--pink); border: 2px solid var(--ink); border-radius: clamp(28px, 4vw, 40px); box-shadow: var(--shadow-lg);
}
.cta-band .section-title { margin: 0 0 12px; }
.cta-band .claim { margin-top: 0; }
.final { overflow-anchor: none; }

.footer { border-top: 2px solid var(--ink); padding: 32px 0 calc(32px + env(safe-area-inset-bottom, 0px)); }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px; color: var(--muted); font-size: .95rem; }
.footer .logo { font-size: 1.25rem; color: var(--ink); }
.footer .logo-mark { width: 32px; height: 32px; border-radius: 10px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 22px; font-weight: 600; color: var(--ink); }
.footer-links a:hover { color: var(--violet); }
.footer-langs { display: flex; flex-wrap: wrap; gap: 6px 16px; font-weight: 600; }
.footer-langs a { color: var(--muted); }
.footer-langs a[aria-current] { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.footer-langs a:hover { color: var(--violet); }
.footer-socials { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }
.footer-socials a { display: grid; place-items: center; width: 38px; height: 38px; border: 2px solid var(--ink); border-radius: 50%; background: #fff; color: var(--ink); transition: transform .15s, background .15s, color .15s; }
.footer-socials a:hover { background: var(--violet); color: #fff; transform: translateY(-2px); }
.footer-socials svg { width: 18px; height: 18px; }

/* Scroll reveal (only when JS is running, so no-JS visitors see everything) */
.js .reveal { opacity: 0; translate: 0 26px; transition: opacity .6s ease, translate .6s ease; transition-delay: calc(var(--d, 0) * 90ms); }
.js .reveal.in { opacity: 1; translate: 0 0; }

@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -14px; } }
@keyframes drift { to { transform: translate(60px, 40px) scale(1.15); } }
@keyframes marquee { to { transform: translateX(-50%); } }

@media (max-width: 960px) {
    .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
    .hero-grid, .cta-band { grid-template-columns: minmax(0, 1fr); }
    .stage { min-height: 0; padding: 20px 0 10px; }
    .steps { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin-inline: auto; }
    /* Phones: the examples become a row to swipe through, the next one peeking in from the side. */
    .examples {
        display: flex; gap: 20px; margin-inline: -20px; padding: 6px 20px 18px; overflow-x: auto;
        scroll-snap-type: x mandatory; scroll-padding-inline: 20px; scrollbar-width: none;
    }
    .examples::-webkit-scrollbar { display: none; }
    .examples .ex-card { flex: 0 0 min(300px, 82%); scroll-snap-align: start; }
    .examples .ex-card:nth-child(2) { margin-bottom: 0; }
    .examples .phone-mock { height: 560px; }
    .examples-more { margin-top: 26px; }
}
/* The full nav (5 tabs, Log in, CTA) needs ~920px, so narrower screens get the menu button. Logo with its
   name + both buttons needs ~445px, so on phones "Log in" moves into the menu (the logo keeps its name, as the
   owner asked); only below 360px does the logo drop its name. */
@media (max-width: 1000px) {
    .nav-links { display: none; }
    .menu-toggle { display: flex; }
    .nav-actions { margin-left: auto; gap: 8px; }
    .nav-inner { gap: 10px; }
}
@media (max-width: 520px) {
    .nav-actions .btn { padding: 10px 14px; font-size: .88rem; }
    .menu-toggle { width: 42px; height: 42px; }
}
@media (max-width: 460px) {
    .nav-inner { gap: 8px; }
    .nav-login { display: none; }
    .mobile-menu .menu-login { display: block; }
}
@media (max-width: 359px) {
    .logo-text { display: none; }
}
@media (min-width: 1001px) {
    .mobile-menu { display: none !important; }
}
@media (max-width: 620px) {
    body { font-size: 16px; }
    .nav-inner { height: 66px; }
    .logo { font-size: 1.35rem; }
    .features { grid-template-columns: minmax(0, 1fr); }
    .claim-row { grid-template-columns: minmax(0, 1fr); }
    .field { padding: 0 16px; }
    .card, .step { padding: 24px 22px; }
    .sticker { font-size: .8rem; padding: 8px 11px; gap: 8px; }
    .sticker .chip { width: 28px; height: 28px; }
    .sticker-1 { left: 0; }
    .sticker-2 { right: 0; }
    .faq summary { padding: 18px 18px; font-size: 1.04rem; }
    .faq details p { padding: 0 18px 20px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
    .js .reveal { opacity: 1; translate: none; }
}

/* Account pages (signup, login, logout, dashboard) */
.auth { padding-bottom: var(--section-pad); }
.auth-card {
    width: 100%; max-width: 520px; margin-inline: auto; padding: clamp(24px, 5vw, 40px);
    background: var(--card); border: 2px solid var(--ink); border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
}
.auth-card-wide { max-width: 760px; }
.auth-card + .auth-card { margin-top: 28px; }
.auth-title { margin: 0 0 8px; font: 800 clamp(2rem, 6vw, 2.7rem)/1.05 var(--display); letter-spacing: -.035em; overflow-wrap: anywhere; }
.auth-title .hl { color: var(--violet); }
.auth-intro { color: var(--muted); margin-bottom: 24px; }
.auth-form { display: grid; gap: 18px; }
.form-row { display: grid; gap: 7px; min-width: 0; }
.form-label { font-weight: 700; font-size: .95rem; }
.field.is-invalid { border-color: var(--pink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pink) 25%, transparent); }
.field-hint { font-size: .88rem; color: var(--muted); margin-inline: 4px; }
.field-hint:empty { display: none; }
.field-hint.is-ok { color: #3f6212; font-weight: 700; }
.field-hint.is-ok::before { content: "✓ "; }
.email-suggest { color: #6d28d9; font-weight: 600; }
.email-suggest button { padding: 0; border: 0; background: none; font: inherit; font-weight: 800; color: #6d28d9; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.field-hint.is-bad { color: #be185d; font-weight: 600; }
.field-error { margin-inline: 4px; padding-left: 22px; font-size: .9rem; font-weight: 600; color: #be185d; position: relative; }
.field-error::before {
    content: "!"; position: absolute; left: 0; top: .15em; width: 16px; height: 16px; border-radius: 50%;
    background: var(--pink); color: #fff; font: 800 11px/16px var(--body); text-align: center;
}
.pw-toggle {
    flex: none; margin-right: -8px; padding: 7px 12px; border: 2px solid var(--ink); border-radius: 999px;
    background: var(--sun); font: 700 .8rem/1 var(--body); color: var(--ink); cursor: pointer;
}
.check { display: flex; align-items: flex-start; gap: 12px; font-size: .95rem; cursor: pointer; }
.check input {
    appearance: none; flex: none; width: 24px; height: 24px; margin: 0; display: grid; place-items: center;
    border: 2px solid var(--ink); border-radius: 8px; background: var(--card); box-shadow: 2px 2px 0 var(--ink); cursor: pointer;
}
.check input::after { content: ""; width: 12px; height: 7px; border: solid #fff; border-width: 0 0 3px 3px; rotate: -45deg; translate: 0 -2px; scale: 0; }
.check input:checked { background: var(--violet); }
.check input:checked::after { scale: 1; }
.check.is-invalid input { border-color: var(--pink); }
.form-row-split { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.form-link { font-size: .95rem; }
.check a, .auth-switch a, .form-link { font-weight: 700; color: var(--violet); text-decoration: underline; text-underline-offset: 3px; }
.btn-block { width: 100%; min-height: 56px; }
.btn-danger { background: var(--pink); color: #fff; }
.form-alert { margin-bottom: 20px; padding: 12px 16px; border: 2px solid var(--ink); border-radius: 16px; font-weight: 600; font-size: .95rem; }
.form-alert-error { background: #ffe4f1; border-color: var(--pink); }
.form-alert-info { background: var(--lime); }
.dash > .form-alert { max-width: 760px; margin-inline: auto; margin-bottom: 20px; }
.auth-switch { margin-top: 22px; text-align: center; color: var(--muted); }
.auth-switch + .auth-switch { margin-top: 8px; }
.btn.is-busy { pointer-events: none; opacity: .85; }
.btn.is-busy .i { display: none; }
.btn.is-busy::after { content: ""; width: 1.05em; height: 1.05em; border: 2.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { rotate: 360deg; } }
.name-suggest { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: -8px 4px 0; }
.name-suggest[hidden] { display: none; }
.name-suggest a { font-weight: 700; color: var(--violet); text-decoration: underline; text-underline-offset: 3px; }
.btn-google { gap: 12px; background: var(--card); }
.btn-google svg { flex: none; }
.auth-alt { display: grid; gap: 8px; margin-top: 18px; text-align: center; color: var(--muted); }
.auth-links { margin-top: 22px; text-align: center; color: var(--muted); }
.auth-links a { font-weight: 700; color: var(--violet); text-decoration: underline; text-underline-offset: 3px; }
.auth-links + .auth-switch { margin-top: 10px; }
.auth-back { display: inline-block; margin-bottom: 18px; font-weight: 700; color: var(--muted); }
.auth-back:hover { color: var(--ink); }
.auth-legal { margin-top: 16px; text-align: center; color: var(--muted); font-size: .88rem; }
.auth-legal a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.auth-legal b { color: var(--ink); }
.auth-or { display: flex; align-items: center; gap: 14px; margin: 20px 0; color: var(--muted); font-size: .85rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 2px; background: color-mix(in srgb, var(--ink) 12%, transparent); }
.field input[readonly] { color: var(--muted); }
.field-edit { flex: none; font-weight: 700; font-size: .9rem; color: var(--violet); text-decoration: underline; text-underline-offset: 3px; }
.field input.code-input { font: 700 1.7rem/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .4em; text-align: center; padding-left: .4em; }
.field input.code-input::placeholder { color: color-mix(in srgb, var(--muted) 45%, transparent); }
.code-resend { margin-top: 18px; text-align: center; color: var(--muted); font-size: .95rem; }
.code-resend button, .code-resend a { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: var(--violet); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.dash-hello { display: grid; gap: 18px; }
.dash-hello .auth-intro { margin-bottom: 0; }
.dash-link {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 12px 12px 20px; background: var(--bg); border: 2px solid var(--ink); border-radius: 18px;
}
.dash-url { font: 800 1.25rem/1.2 var(--display); color: var(--violet); overflow-wrap: anywhere; min-width: 0; }
.dash-title { margin: 0 0 6px; font: 800 1.6rem/1.15 var(--display); letter-spacing: -.02em; }
.devices { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.device {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
    padding: 14px 16px; border: 2px solid var(--ink); border-radius: 18px; background: var(--card);
}
.device.is-current { background: color-mix(in srgb, var(--lime) 35%, var(--card)); }
.device-info { display: grid; gap: 2px; min-width: 0; }
.device-meta { font-size: .88rem; color: var(--muted); overflow-wrap: anywhere; }
.badge { justify-self: start; padding: 3px 10px; border: 2px solid var(--ink); border-radius: 999px; background: var(--sun); font-size: .75rem; font-weight: 700; }
.devices-all { margin-top: 20px; }
@media (min-width: 621px) {
    .dash-hello { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
    .dash-hello .dash-link { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 620px) {
    .auth-card { box-shadow: var(--shadow); }
    .device form, .device .btn { width: 100%; }
}

/* Legal pages (/terms, /privacy) */
.legal { line-height: 1.7; }
.legal-updated { margin-bottom: 26px; color: var(--muted); font-size: .92rem; }
.legal h2 { margin: 34px 0 10px; font: 800 1.4rem/1.2 var(--display); letter-spacing: -.02em; }
.legal p + p { margin-top: 12px; }
.legal ul { margin: 12px 0 0; padding-left: 1.2em; display: grid; gap: 8px; }
.legal li::marker { color: var(--violet); }
.legal a { font-weight: 700; color: var(--violet); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.legal code { font-size: .88em; padding: 1px 6px; border-radius: 6px; background: var(--bg); border: 1px solid #e4dccd; overflow-wrap: anywhere; }

/* Contact form: dropdown and message box in the same pill style as the inputs */
.field-select { position: relative; padding-right: 44px; }
.field-select::after { content: ""; position: absolute; right: 22px; top: 50%; width: 9px; height: 9px; border: solid var(--ink); border-width: 0 2.5px 2.5px 0; translate: 0 -70%; rotate: 45deg; pointer-events: none; }
.field-select select { flex: 1; width: 100%; min-width: 0; appearance: none; border: 0; outline: none; background: transparent; padding: 14px 0; font: 600 1.05rem var(--body); color: var(--ink); cursor: pointer; }
.field-textarea { align-items: stretch; padding: 12px 20px; border-radius: 22px; }
.field-textarea textarea { flex: 1; width: 100%; min-width: 0; min-height: 150px; border: 0; outline: none; background: transparent; resize: vertical; font: 500 1rem/1.55 var(--body); color: var(--ink); }

/* Pricing */
.billing {
    display: flex; width: max-content; max-width: 100%; margin: 0 auto 36px; padding: 5px; gap: 4px;
    background: var(--card); border: 2px solid var(--ink); border-radius: 999px; box-shadow: var(--shadow);
}
.billing[hidden] { display: none; }
.billing button {
    display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border: 0; border-radius: 999px;
    background: transparent; font: 700 .95rem/1 var(--body); color: var(--ink); cursor: pointer;
}
.billing button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.billing-save { padding: 4px 8px; border-radius: 999px; background: var(--lime); color: var(--ink); font-size: .75rem; }
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; max-width: 880px; margin-inline: auto; align-items: start; }
.plan {
    position: relative; padding: clamp(24px, 4vw, 36px); background: var(--card);
    border: 2px solid var(--ink); border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
}
.plan-pro { background: color-mix(in srgb, var(--violet) 7%, var(--card)); border-width: 3px; }
.plan-tag {
    position: absolute; top: -16px; right: 24px; padding: 6px 14px; rotate: 4deg;
    background: var(--sun); border: 2px solid var(--ink); border-radius: 999px; box-shadow: 3px 3px 0 var(--ink);
    font: 800 .85rem/1 var(--display); text-transform: uppercase; letter-spacing: .06em;
}
.plan-name { margin: 0; font: 800 1.7rem/1.1 var(--display); letter-spacing: -.02em; }
.plan-pitch { margin-top: 4px; color: var(--muted); }
.plan-price { margin-top: 20px; display: flex; align-items: baseline; gap: 8px; }
.plan-amount { font: 800 3.4rem/1 var(--display); letter-spacing: -.04em; }
.plan-pro .plan-amount { color: var(--violet); }
.plan-per { font-weight: 700; color: var(--muted); }
.plan-note { margin: 6px 0 22px; min-height: 1.6em; font-size: .92rem; color: var(--muted); }
.plan-soon { margin-top: 12px; font-size: .88rem; color: var(--muted); }
.plan-plus { margin-top: 22px; font-weight: 700; }
.plan-items { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 11px; }
.plan-plus + .plan-items { margin-top: 10px; }
.plan-items li { display: flex; align-items: flex-start; gap: 10px; font-weight: 600; }
.plan-items .i { width: 20px; height: 20px; margin-top: 2px; padding: 3px; border-radius: 50%; background: var(--lime); stroke-width: 3; }
.plans-fine { margin-top: 22px; text-align: center; font-size: .88rem; color: var(--muted); }
.pricing { padding-bottom: var(--section-pad); }
.pricing-faq { margin-top: clamp(48px, 7vw, 80px); }
@media (max-width: 760px) {
    .plans { grid-template-columns: minmax(0, 1fr); max-width: 480px; }
}

/* Public page 404s (free name, not live yet, unavailable) */
.not-found { text-align: center; }
.nf-kicker { margin-bottom: 6px; font-weight: 800; color: var(--pink); text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; }
.not-found .auth-intro a { color: var(--violet); font-weight: 700; text-decoration: underline; }

/* ---------- /examples page (section_examples_gallery, section_page_ideas, section_page_tips) ---------- */
.filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: -20px 0 44px; padding: 0; border: 0; }
.filters label {
    padding: 9px 20px; border: 2px solid var(--ink); border-radius: 999px; background: var(--card); font-weight: 700; cursor: pointer;
    box-shadow: 3px 3px 0 var(--ink); transition: transform .15s, box-shadow .15s, background .15s;
}
.filters label:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.filters input:checked + label { background: var(--ink); color: #fff; box-shadow: 3px 3px 0 var(--violet); }
.filters input:focus-visible + label { outline: 3px solid var(--pink); outline-offset: 3px; }
.gallery-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px 24px; }
/* The gallery shows the phones smaller (zoom keeps their 330px design, just drawn smaller), 4 to a row, 2 on phones. */
.gallery-grid .phone-mock { width: 330px; max-width: none; zoom: .76; }
.gallery-grid .ex-card { gap: 12px; }
.gallery-grid .ex-caption { max-width: 252px; flex-direction: column; align-items: flex-start; gap: 8px; }
.gallery-grid .ex-who small { white-space: normal; }
/* Filtering without JavaScript: the checked chip hides the other categories. */
.gallery:has(#ex-music:checked) .ex-card:not([data-cat="music"]),
.gallery:has(#ex-creators:checked) .ex-card:not([data-cat="creators"]),
.gallery:has(#ex-business:checked) .ex-card:not([data-cat="business"]),
.gallery:has(#ex-personal:checked) .ex-card:not([data-cat="personal"]) { display: none; }
.ex-card { margin: 0; display: grid; gap: 18px; justify-items: center; }
/* A phone showing the page: theme colors, font and buttons from example_style(); the page fades out at the bottom like it scrolls. */
.phone-mock {
    position: relative; width: 100%; max-width: 330px; height: 620px; overflow: hidden; border: 10px solid var(--ink); border-radius: 46px;
    background: var(--bg); color: var(--text); font-family: var(--font); box-shadow: 0 18px 40px -12px rgba(21, 18, 31, .28);
    transition: transform .25s ease, box-shadow .25s ease;
}
.ex-card:hover .phone-mock { transform: translate(-4px, -6px) rotate(-.6deg); box-shadow: 0 26px 50px -14px rgba(21, 18, 31, .32); }
.ex-card:nth-child(even):hover .phone-mock { transform: translate(-4px, -6px) rotate(.6deg); }
.pm-status { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 10px 22px 0; font: 700 11px/1 system-ui, sans-serif; color: var(--text); opacity: .9; }
.pm-status i { position: absolute; left: 50%; top: 6px; translate: -50% 0; width: 84px; height: 22px; border-radius: 99px; background: var(--ink); }
.pm-status span:last-child { letter-spacing: -1px; font-size: 9px; }
.pm-page {
    display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 26px 18px 30px; text-align: center;
    -webkit-mask-image: linear-gradient(#000 82%, transparent); mask-image: linear-gradient(#000 82%, transparent);
}
.pm-avatar { width: 84px; height: 84px; flex: none; border-radius: 50%; border: 3px solid var(--text); box-shadow: 0 6px 18px rgba(0, 0, 0, .18); }
.pm-name { margin-top: 4px; font: 800 1.28rem/1.15 var(--font); letter-spacing: -.01em; }
.pm-bio { margin: -4px 0 0; max-width: 250px; font-size: .78rem; line-height: 1.4; opacity: .82; }
.pm-socials { display: flex; gap: 14px; margin: 2px 0 8px; }
.pm-socials svg { width: 19px; height: 19px; }
.pm-header { margin-top: 6px; font: 800 .92rem/1.2 var(--font); }
.pm-link {
    position: relative; width: 100%; min-height: 50px; display: flex; align-items: center; justify-content: center; padding: 8px 52px;
    background: var(--btn); color: var(--btn-text); border: 2px solid var(--btn-border); border-radius: var(--radius); box-shadow: var(--btn-shadow);
    font: 700 .82rem/1.25 var(--font);
}
.pm-link > svg { position: absolute; left: 16px; width: 18px; height: 18px; }
.mt { position: absolute; left: 5px; top: 50%; translate: 0 -50%; width: 38px; height: 38px; border-radius: var(--thumb-radius); }
.mt-date { display: grid; place-content: center; background: var(--text); color: var(--page-color); font: 800 .55rem/1 var(--font); letter-spacing: .06em; }
.mt-date b { font-size: .95rem; letter-spacing: 0; margin-bottom: 1px; }
.pm-video {
    position: relative; width: 100%; aspect-ratio: 16 / 9; display: grid; place-content: center; justify-items: center; gap: 8px; padding: 10px;
    border: 2px solid var(--btn-border); border-radius: 16px; box-shadow: var(--btn-shadow); color: #fff; overflow: hidden;
}
.pm-video::before { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 30%, rgba(0, 0, 0, .55)); }
.pm-video > * { position: relative; }
.pm-yt { width: 50px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: #ff0033; box-shadow: 0 4px 12px rgba(0, 0, 0, .35); }
.pm-yt svg, .pm-play svg { width: 18px; height: 18px; }
.pm-video span { font: 700 .8rem/1.25 system-ui, sans-serif; text-shadow: 0 1px 4px rgba(0, 0, 0, .6); }
.pm-audio {
    position: relative; width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px; text-align: left; border-radius: 14px;
    background: #181818; color: #fff; border: 2px solid var(--btn-border); box-shadow: var(--btn-shadow); font-family: system-ui, sans-serif;
}
.pm-soundcloud { background: linear-gradient(135deg, #2b1a10, #121212); }
.pm-cover { width: 56px; height: 56px; flex: none; border-radius: 8px; }
.pm-track { flex: 1; min-width: 0; display: grid; gap: 1px; }
.pm-track b { font-size: .8rem; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-track small { font-size: .66rem; opacity: .7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-track i { height: 3px; margin-top: 6px; border-radius: 3px; background: linear-gradient(90deg, #fff 38%, rgba(255, 255, 255, .25) 38%); }
.pm-play { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 50%; background: #1ed760; color: #000; }
.pm-soundcloud .pm-play { background: #ff5500; color: #fff; }
.pm-audio > svg { position: absolute; top: 8px; right: 9px; width: 13px; height: 13px; opacity: .8; }
.ex-caption { width: 100%; max-width: 330px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ex-who { min-width: 0; }
.ex-who b { display: block; font: 800 1.05rem/1.2 var(--display); }
.ex-who small { display: block; color: var(--muted); font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ex-theme { color: var(--violet); font-weight: 700; }
.ex-cta {
    flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border: 2px solid var(--ink); border-radius: 999px;
    background: var(--card); font-weight: 700; font-size: .82rem; box-shadow: 3px 3px 0 var(--ink); transition: transform .15s, box-shadow .15s, background .15s;
}
.ex-cta .i { width: 15px; height: 15px; }
.ex-cta:hover, .ex-card:hover .ex-cta { background: var(--sun); transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.idea-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; color: var(--muted); }
.idea-list li { position: relative; padding-left: 26px; }
.idea-list li::before { content: ""; position: absolute; left: 0; top: .45em; width: 14px; height: 14px; border-radius: 4px; background: var(--lime); border: 2px solid var(--ink); }
.gallery .section-title, .ideas .section-title, .tips-section .section-title { text-wrap: balance; }
.ideas { background: color-mix(in srgb, var(--sun) 22%, var(--bg)); border-block: 2px solid var(--ink); }
.tips { margin: 0; padding: 0; list-style: none; counter-reset: tip; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.tips li { counter-increment: tip; position: relative; padding: 28px 26px 24px; background: var(--card); border: 2px solid var(--ink); border-radius: var(--r-lg); box-shadow: var(--shadow); }
.tips li::before {
    content: counter(tip); position: absolute; top: -18px; left: 22px; width: 38px; height: 38px; display: grid; place-items: center;
    border-radius: 50%; background: var(--pink); color: #fff; border: 2px solid var(--ink); font: 800 1.1rem/1 var(--display);
}
.tips li:nth-child(3n+2)::before { background: var(--sun); color: var(--ink); }
.tips li:nth-child(3n)::before { background: var(--lime); color: var(--ink); }
.tips h3 { margin: 6px 0 6px; font: 800 1.2rem/1.25 var(--display); letter-spacing: -.01em; }
.tips p { margin: 0; color: var(--muted); }
@media (max-width: 1199px) { .gallery-grid .phone-mock { zoom: .66; } .gallery-grid .ex-caption { max-width: 218px; } }
@media (max-width: 999px) {
    .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .gallery-grid .phone-mock { zoom: .6; }
    .gallery-grid .ex-caption { max-width: 198px; }
}
@media (max-width: 760px) {
    .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gallery-grid .phone-mock { zoom: .7; }
    .gallery-grid .ex-caption { max-width: 230px; }
}
@media (max-width: 960px) {
    .tips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
    .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; }
    .gallery-grid .phone-mock { zoom: .48; }
    .gallery-grid .ex-caption { max-width: 160px; gap: 6px; }
    .gallery-grid .ex-who b { font-size: .92rem; }
    .gallery-grid .ex-who small { font-size: .74rem; }
    .gallery-grid .ex-cta { padding: 5px 10px; font-size: .74rem; }
    .tips { grid-template-columns: minmax(0, 1fr); gap: 30px; }
    .filters { margin-top: -12px; }
    .filters label { padding: 8px 16px; }
}
@media (prefers-reduced-motion: reduce) { .phone-mock, .ex-cta, .filters label { transition: none; } .ex-card:hover .phone-mock { transform: none; } }

/* ---------- /how-it-works page (section_how_page): the 60-second speedrun ---------- */
.hl-timer { position: relative; white-space: nowrap; background: linear-gradient(transparent 62%, var(--lime) 62%, var(--lime) 92%, transparent 92%); }
.run { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: clamp(48px, 7vw, 88px); }
.run::before { content: ""; position: absolute; left: 50%; top: 20px; bottom: 20px; border-left: 3px dashed color-mix(in srgb, var(--ink) 25%, transparent); }
.run-step { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.run-step:nth-child(even) .run-text { order: 2; }
.run-text h2 { margin: 14px 0 10px; font: 800 clamp(1.7rem, 3.4vw, 2.4rem)/1.05 var(--display); letter-spacing: -.03em; }
.run-text p { color: var(--muted); font-size: 1.08rem; max-width: 30em; }
.run-time {
    display: inline-block; padding: 6px 14px; border: 2px solid var(--ink); border-radius: 10px; background: var(--ink); color: var(--lime);
    font: 700 1.05rem/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .04em; rotate: -3deg; box-shadow: 3px 3px 0 var(--pink);
}
.run-step:nth-child(even) .run-time { rotate: 3deg; box-shadow: 3px 3px 0 var(--violet); }
.run-demo {
    position: relative; z-index: 1; min-height: 280px; display: grid; place-content: center; justify-items: center; gap: 14px; padding: 32px 24px;
    border: 2px solid var(--ink); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); overflow: hidden;
}
.demo-claim { background: radial-gradient(circle at 80% 10%, color-mix(in srgb, var(--sun) 70%, transparent), transparent 55%), #fff; }
.demo-links { background: color-mix(in srgb, var(--lime) 30%, #fff); }
.demo-themes { background: #fff; grid-template-columns: auto auto; align-items: center; gap: 24px; }
.demo-share { background: color-mix(in srgb, var(--sky) 22%, #fff); grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 22px; }

/* 0:00 the name types itself, then it's yours */
.urlbar {
    display: flex; align-items: center; gap: 2px; min-width: 290px; padding: 14px 18px; border: 2px solid var(--ink); border-radius: 999px; background: #fff;
    font: 700 1.2rem/1 var(--body); box-shadow: var(--shadow);
}
.urlbar-lock { display: grid; margin-right: 8px; opacity: .5; }
.urlbar-lock .i { width: 18px; height: 18px; }
/* main.js types the name letter by letter in step with "It's yours" (whole letters, the cursor right after them);
   without JavaScript the name is simply there */
.urlbar .type { color: var(--violet); white-space: pre; }
.caret { width: 2px; height: 1.1em; margin-left: 0; background: var(--violet); animation: blink .8s steps(1) infinite; }
.claimed {
    display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border: 2px solid var(--ink); border-radius: 999px; background: var(--lime);
    font-weight: 800; box-shadow: 3px 3px 0 var(--ink); animation: pop-in 6s ease infinite;
}
.claimed .i { width: 18px; height: 18px; stroke-width: 3; }
.taken { position: absolute; top: 22px; left: 22px; padding: 4px 10px; border-radius: 8px; background: var(--card); border: 1px dashed var(--muted); color: var(--muted); font-size: .8rem; text-decoration: line-through; rotate: -6deg; }
@keyframes blink { 50% { opacity: 0; } }
@keyframes pop-in { 0%, 42% { opacity: 0; scale: .6; } 48%, 90% { opacity: 1; scale: 1; } 52% { scale: 1.08; } 100% { opacity: 0; scale: .9; } }

/* 0:10 a pasted link becomes a button with the right icon */
.paste { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 18px; border: 2px dashed var(--ink); border-radius: 14px; background: #fff; font-weight: 600; color: var(--muted); }
.paste span { padding: 6px 12px; border-radius: 8px; background: var(--ink); color: #fff; font-size: .82rem; font-weight: 700; }
.arrow-down { font: 800 1.4rem/1 var(--display); animation: nudge 1.6s ease-in-out infinite; }
.made-link {
    display: flex; align-items: center; justify-content: center; gap: 10px; min-width: 260px; padding: 14px 22px; border: 2px solid var(--ink); border-radius: 999px;
    background: var(--violet); color: #fff; font-weight: 800; box-shadow: 4px 4px 0 var(--ink); animation: pop-in 6s ease infinite; animation-delay: -2.4s;
}
.made-link svg { width: 22px; height: 22px; }
.float-ico {
    position: absolute; width: 42px; height: 42px; display: grid; place-items: center; border: 2px solid var(--ink); border-radius: 12px; background: #fff;
    box-shadow: 2px 2px 0 var(--ink); animation: float 5s ease-in-out infinite; animation-delay: calc(var(--i) * -.7s);
}
.float-ico svg { width: 22px; height: 22px; }
.float-ico:nth-of-type(1) { top: 8%; left: 6%; rotate: -8deg; } .float-ico:nth-of-type(2) { top: 10%; right: 8%; rotate: 6deg; }
.float-ico:nth-of-type(3) { bottom: 10%; left: 9%; rotate: 5deg; } .float-ico:nth-of-type(4) { bottom: 8%; right: 6%; rotate: -5deg; }
.float-ico:nth-of-type(5) { top: 44%; left: 3%; rotate: 10deg; } .float-ico:nth-of-type(6) { top: 42%; right: 3%; rotate: -9deg; }
.float-ico:nth-of-type(7) { top: 3%; left: 42%; rotate: 4deg; } .float-ico:nth-of-type(8) { bottom: 2%; left: 46%; rotate: -4deg; }
@keyframes nudge { 50% { translate: 0 5px; } }

/* 0:30 themes */
.swatches { display: grid; grid-template-columns: repeat(2, 104px); gap: 8px; }
.swatch { position: relative; height: 46px; display: flex; align-items: center; gap: 8px; padding: 0 8px; border: 2px solid var(--ink); border-radius: 10px; overflow: hidden; }
.swatch i { width: 18px; height: 18px; flex: none; border-radius: 50%; border: 2px solid; }
.swatch small { font-size: .68rem; font-weight: 700; white-space: nowrap; }
.shuffle { position: relative; width: 130px; height: 210px; }
.shuffle-card {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 22px 14px; border: 3px solid var(--ink);
    border-radius: 24px; box-shadow: 5px 5px 0 var(--ink); opacity: 0; animation: shuffle 8s infinite; animation-delay: calc(var(--i) * 2s);
}
.shuffle-card b { font-size: 2rem; line-height: 1; margin-bottom: 6px; }
.shuffle-card i { width: 100%; height: 22px; border: 2px solid; }
@keyframes shuffle { 0% { opacity: 0; rotate: -8deg; translate: 0 14px; } 5%, 25% { opacity: 1; rotate: -2deg; translate: 0 0; } 30%, 100% { opacity: 0; rotate: 6deg; translate: 0 -10px; } }

/* 0:50 share */
.qr-tile { display: grid; justify-items: center; gap: 8px; padding: 16px; border: 2px solid var(--ink); border-radius: 18px; background: #fff; box-shadow: 4px 4px 0 var(--violet); rotate: -4deg; }
.qr-tile .i { width: 96px; height: 96px; stroke-width: 1.6; }
.qr-tile span { font: 800 .8rem/1 var(--display); }
.places { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.places li {
    display: flex; align-items: center; gap: 10px; padding: 8px 14px; border: 2px solid var(--ink); border-radius: 999px; background: #fff; font-weight: 700; font-size: .9rem;
    animation: slide-in 6s ease infinite; animation-delay: calc(var(--i) * .25s);
}
.places svg { width: 18px; height: 18px; flex: none; }
.copied { position: absolute; top: 16px; left: 50%; translate: -50% 0; padding: 6px 14px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 700; font-size: .82rem; animation: pop-in 6s ease infinite; animation-delay: -2.6s; }
@keyframes slide-in { 0% { opacity: 0; translate: 16px 0; } 8%, 88% { opacity: 1; translate: 0 0; } 100% { opacity: 0; } }
.run-finish { margin: clamp(48px, 6vw, 72px) auto 0; text-align: center; font: 800 clamp(1.4rem, 2.6vw, 1.9rem)/1.2 var(--display); letter-spacing: -.02em; }
.run-finish span { display: inline-block; margin-right: 10px; padding: 6px 14px; border: 2px solid var(--ink); border-radius: 10px; background: var(--lime); font: 700 1.05rem/1.2 ui-monospace, Menlo, monospace; rotate: -3deg; }

/* Then: watch it grow */
.grow { background: var(--ink); color: #fff; border-block: 2px solid var(--ink); }
.grow .kicker { color: var(--lime); }
.grow-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.grow-lead { color: rgba(255, 255, 255, .8); font-size: 1.12rem; }
.stats-card { padding: 22px; border-radius: var(--r-lg); background: #fff; color: var(--ink); border: 2px solid var(--ink); box-shadow: 8px 8px 0 var(--violet); rotate: 1.5deg; }
.stats-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.stats-head span { padding: 2px 10px; border-radius: 99px; background: var(--bg); color: var(--muted); font-size: .78rem; font-weight: 700; }
.stats-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.stats-kpis div { padding: 10px 12px; border-radius: 12px; background: var(--bg); }
.stats-kpis small { display: block; color: var(--muted); font-size: .75rem; font-weight: 600; }
.stats-kpis b { display: block; font: 800 1.45rem/1.15 var(--display); }
.stats-kpis em { font-style: normal; font-size: .75rem; font-weight: 700; color: #3f6212; }
.stats-card .bars { height: 96px; margin: 18px 0; display: flex; align-items: flex-end; gap: 8px; }
.stats-card .bars i { flex: 1; height: var(--h); border-radius: 6px 6px 2px 2px; background: linear-gradient(var(--violet), var(--pink)); transform-origin: bottom; }
.js .stats-card.reveal .bars i { scale: 1 0; transition: scale .7s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(.3s + var(--i) * 70ms); }
.js .stats-card.reveal.in .bars i { scale: 1 1; }
.stats-top { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.stats-top li { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: .92rem; }
.stats-top svg { width: 18px; height: 18px; flex: none; }
.stats-top b { margin-left: auto; font-variant-numeric: tabular-nums; }

/* The fine print */
.fine-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.fine { padding: 26px 22px; background: var(--card); border: 2px solid var(--ink); border-radius: var(--r-lg); box-shadow: var(--shadow); }
.fine:nth-child(even) { rotate: 1deg; } .fine:nth-child(odd) { rotate: -1deg; }
.fine-emoji { display: block; font-size: 2rem; margin-bottom: 10px; }
.fine h3 { margin: 0 0 6px; font: 800 1.2rem/1.2 var(--display); }
.fine p { margin: 0; color: var(--muted); font-size: .98rem; }

/* ---------- /faq page (section_faq_page): questions as DMs ---------- */
.chat { max-width: 780px; margin: 0 auto; background: var(--card); border: 2px solid var(--ink); border-radius: 30px; box-shadow: var(--shadow-lg); overflow: hidden; }
.chat-head { display: flex; align-items: center; gap: 12px; padding: 16px 22px; border-bottom: 2px solid var(--ink); background: var(--bg); }
.chat-av { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 13px; background: var(--violet); rotate: -6deg; }
.chat-av svg { width: 22px; height: 22px; }
.chat-head b { display: block; font: 800 1.1rem/1.2 var(--display); }
.chat-head small { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: .85rem; }
.chat-head small i { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px color-mix(in srgb, #22c55e 25%, transparent); }
.chat-tools { display: grid; gap: 12px; padding: 16px 22px; border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); }
.chat-search { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 16px; border: 2px solid var(--ink); border-radius: 999px; background: #fff; }
.chat-search[hidden] { display: none; }
.chat-search:focus-within { box-shadow: 3px 3px 0 var(--violet); }
.chat-search svg { width: 18px; height: 18px; flex: none; color: var(--muted); }
.chat-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: 500 1rem var(--body); color: var(--ink); }
.topics { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; }
.topics label { padding: 7px 14px; border: 2px solid var(--ink); border-radius: 999px; background: #fff; font-weight: 700; font-size: .88rem; cursor: pointer; }
.topics input:checked + label { background: var(--ink); color: #fff; }
.topics input:focus-visible + label { outline: 3px solid var(--pink); outline-offset: 2px; }
.chat:has(#t-ai:checked) .thread-group:not([data-topic="ai"]),
.chat:has(#t-start:checked) .thread-group:not([data-topic="start"]),
.chat:has(#t-page:checked) .thread-group:not([data-topic="page"]),
.chat:has(#t-stats:checked) .thread-group:not([data-topic="stats"]),
.chat:has(#t-plans:checked) .thread-group:not([data-topic="plans"]),
.chat:has(#t-account:checked) .thread-group:not([data-topic="account"]) { display: none; }
.thread { display: grid; gap: 6px; padding: 10px 22px 26px; background: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--ink) 10%, transparent) 1px, transparent 0) 0 0 / 18px 18px; }
.thread-group[hidden], .dm[hidden] { display: none; }
.thread-day { margin: 18px 0 8px; text-align: center; }
.thread-day { font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.dm { display: grid; gap: 8px; margin-bottom: 8px; }
.dm summary { list-style: none; display: flex; justify-content: flex-end; cursor: pointer; }
.dm summary::-webkit-details-marker { display: none; }
.bubble { max-width: 82%; margin: 0; padding: 12px 18px; border: 2px solid var(--ink); font-size: 1rem; line-height: 1.5; }
.bubble.me {
    border-radius: 22px 22px 6px 22px; background: var(--violet); color: #fff; font-weight: 700; box-shadow: 3px 3px 0 var(--ink);
    transition: transform .15s, box-shadow .15s;
}
.dm summary:hover .bubble.me { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.dm summary:focus-visible { outline: none; }
.dm summary:focus-visible .bubble.me { outline: 3px solid var(--pink); outline-offset: 3px; }
.dm[open] .bubble.me { background: var(--ink); }
.reply { display: grid; justify-items: start; }
.reply > * { grid-area: 1 / 1; }   /* the typing dots, then the answer in the same spot */
.bubble.them { border-radius: 22px 22px 22px 6px; background: #fff; color: var(--ink); animation: reply-in .35s ease .7s both; }
.typing { display: inline-flex; gap: 4px; padding: 12px 16px; border: 2px solid var(--ink); border-radius: 22px 22px 22px 6px; background: #fff; animation: typing-out .2s ease .6s forwards; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: dot 1s ease-in-out infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 60%, 100% { translate: 0 0; opacity: .4; } 30% { translate: 0 -4px; opacity: 1; } }
@keyframes typing-out { to { opacity: 0; visibility: hidden; } }
@keyframes reply-in { from { opacity: 0; translate: 0 8px; } }
.no-results { margin: 24px 0 0; text-align: center; color: var(--muted); }
.no-results a { color: var(--violet); font-weight: 700; text-decoration: underline; }
.chat-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 22px; border-top: 2px solid var(--ink); background: var(--bg); font-weight: 700; }

@media (max-width: 860px) {
    .run::before { left: 14px; }
    .run-step { grid-template-columns: minmax(0, 1fr); gap: 22px; padding-left: 40px; }
    .run-step:nth-child(even) .run-text { order: 0; }
    .grow-grid { grid-template-columns: minmax(0, 1fr); }
    .fine-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
    .run-step { padding-left: 32px; }
    .run::before { left: 8px; }
    .run-demo { min-height: 240px; padding: 26px 16px; }
    .urlbar { min-width: 0; font-size: 1rem; }
    .demo-themes, .demo-share { grid-template-columns: minmax(0, 1fr); justify-items: center; }
    .made-link { min-width: 0; }
    .demo-links { min-height: 330px; }
    .float-ico:nth-of-type(n+5) { display: none; }   /* only the four corners: the middle ones would cover the link */
    .float-ico:nth-of-type(1), .float-ico:nth-of-type(2) { top: 14px; }
    .float-ico:nth-of-type(3), .float-ico:nth-of-type(4) { bottom: 14px; }
    .fine-grid { grid-template-columns: minmax(0, 1fr); }
    .thread, .chat-tools, .chat-head, .chat-foot { padding-inline: 14px; }
    .bubble { max-width: 92%; font-size: .96rem; }
}
@media (prefers-reduced-motion: reduce) {
    .caret, .arrow-down, .float-ico, .places li { animation: none; }
    .claimed, .made-link, .copied { animation: none; opacity: 1; scale: 1; }
    .shuffle-card { animation: none; } .shuffle-card:first-child { opacity: 1; }
    .bubble.them { animation: none; } .typing { display: none; }
    .js .stats-card.reveal .bars i { scale: 1 1; transition: none; }
}

/* ---------- /pricing: sections below the plans ---------- */
.includes { background: color-mix(in srgb, var(--lime) 18%, var(--bg)); border-block: 2px solid var(--ink); }
.includes-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.include { display: flex; gap: 16px; align-items: flex-start; padding: 22px; background: var(--card); border: 2px solid var(--ink); border-radius: var(--r-lg); box-shadow: var(--shadow); }
.include .card-icon { flex: none; width: 48px; height: 48px; margin: 0; }
.include h3 { margin: 0 0 4px; font: 800 1.15rem/1.2 var(--display); }
.include p { margin: 0; color: var(--muted); font-size: .96rem; }

.compare-table { max-width: 880px; margin: 0 auto; overflow-x: auto; background: var(--card); border: 2px solid var(--ink); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); }
.compare-table table { width: 100%; border-collapse: collapse; }
.compare-table th, .compare-table td { padding: 14px 20px; text-align: left; border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); }
.compare-table td, .compare-table thead th:not(:first-child) { width: 21%; text-align: center; }
.compare-table thead th { position: sticky; top: 0; padding-block: 20px; background: var(--card); font: 800 1.3rem/1.1 var(--display); border-bottom: 2px solid var(--ink); }
.compare-table thead small { display: block; margin-top: 4px; font: 600 .82rem/1.2 var(--body); color: var(--muted); }
.compare-table .col-pro { background: color-mix(in srgb, var(--violet) 7%, var(--card)); }
.compare-table thead .col-pro { color: var(--violet); }
.compare-table tbody th { font-weight: 600; }
.compare-table .group th { padding-top: 22px; background: var(--bg); font: 800 .8rem/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--violet); }
.compare-table .yes { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--lime); border: 2px solid var(--ink); }
.compare-table .yes .i { width: 14px; height: 14px; stroke-width: 3.2; }
.compare-table .no { color: color-mix(in srgb, var(--ink) 35%, transparent); font-weight: 700; }
.compare-table td b { font-weight: 800; }
.compare-table tfoot td { border-bottom: 0; padding-block: 20px; }
.compare-table tfoot .btn { width: 100%; justify-content: center; }

.promises { background: var(--violet); color: #fff; border-block: 2px solid var(--ink); }
.promises .kicker { color: var(--sun); }
.promise-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.promise-list li { display: grid; gap: 6px; padding: 24px 22px; background: var(--card); color: var(--ink); border: 2px solid var(--ink); border-radius: var(--r-lg); box-shadow: 6px 6px 0 var(--ink); }
.promise-list li:nth-child(odd) { rotate: -1.2deg; } .promise-list li:nth-child(even) { rotate: 1.2deg; }
.promise-list b { font: 800 1.2rem/1.2 var(--display); }
.promise-list b::before {
    content: ""; display: inline-block; width: 26px; height: 26px; margin-right: 8px; vertical-align: -6px; border-radius: 50%; border: 2px solid var(--ink);
    background: var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315121f' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.promise-list span { color: var(--muted); font-size: .96rem; }

.pricing-more-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 64px); align-items: start; }
.teams { padding: 34px 30px; background: var(--sun); border: 2px solid var(--ink); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); rotate: -1deg; }
.teams .section-title { font-size: clamp(1.7rem, 3vw, 2.3rem); }
.teams p { color: var(--ink); opacity: .8; margin-bottom: 20px; }
.billing-chat { margin: 0; max-width: none; }

@media (max-width: 960px) {
    .includes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .promise-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pricing-more-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
    .includes-grid, .promise-list { grid-template-columns: minmax(0, 1fr); }
    .compare-table th, .compare-table td { padding: 12px 10px; font-size: .9rem; }
    .compare-table td, .compare-table thead th:not(:first-child) { width: 84px; }
    .compare-table thead th { font-size: 1.1rem; }
}

/* ---------- /features page (section_features_page) ---------- */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; }
.tile {
    position: relative; display: flex; flex-direction: column; gap: 18px; min-height: 300px; padding: 28px; overflow: hidden;
    background: var(--card); border: 2px solid var(--ink); border-radius: var(--r-lg); box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s;
}
.tile:hover { transform: translate(-3px, -3px); box-shadow: 7px 7px 0 var(--ink); }
.tile h2 { margin: 0 0 6px; font: 800 1.45rem/1.15 var(--display); letter-spacing: -.02em; }
.tile p { margin: 0; color: var(--muted); }
.ft-pro { display: inline-block; margin-left: 6px; padding: 3px 9px; border-radius: 999px; background: var(--violet); color: #fff; font: 800 .7rem/1.2 var(--body); letter-spacing: .06em; text-transform: uppercase; vertical-align: 4px; }
.tile-links { grid-column: span 4; background: color-mix(in srgb, var(--sky) 16%, #fff); }
.tile-players { grid-column: span 2; grid-row: span 2; background: var(--ink); color: #fff; }
.tile-players p { color: rgba(255, 255, 255, .72); }
.tile-design { grid-column: span 4; background: color-mix(in srgb, var(--pink) 12%, #fff); }
.tile-drag { grid-column: span 3; background: color-mix(in srgb, var(--sun) 40%, #fff); }
.tile-gallery { grid-column: span 3; background: color-mix(in srgb, var(--lime) 30%, #fff); }
.tile-sections { grid-column: span 3; }
.tile-qr { grid-column: span 3; background: color-mix(in srgb, var(--violet) 10%, #fff); }

.icon-cloud { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 10px; margin-top: auto; }   /* two full rows of 12 (6 on phones), edge to edge */
.icon-cloud span {
    aspect-ratio: 1; max-height: 56px; display: grid; place-items: center; border: 2px solid var(--ink); border-radius: 13px; background: #fff; box-shadow: 2px 2px 0 var(--ink);
    rotate: calc((var(--i) * 7 % 11 - 5) * 1deg); transition: rotate .2s, transform .2s;
}
.icon-cloud span:hover { rotate: 0deg; transform: translateY(-3px); background: var(--b); color: var(--bi); }
.icon-cloud .lit { animation: fpx-lit 12s calc(var(--k) * 3s) infinite both; }
@keyframes fpx-lit { 0%, 13% { background: #fff; color: var(--ink); translate: 0 0; } 16%, 23% { background: var(--b); color: var(--bi); translate: 0 -4px; } 26%, 100% { background: #fff; color: var(--ink); translate: 0 0; } }
/* paste a link → the button with its icon */
.ft-paste { display: flex; align-items: center; gap: 12px; margin: auto 0 18px; }
.fpx-in, .fpx-out > div { height: 48px; border: 2px solid var(--ink); border-radius: 14px; background: #fff; }
.fpx-in { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 0 14px; box-shadow: inset 0 2px 0 rgba(21, 18, 31, .06); }
.fpx-in > .i { flex: none; width: 18px; height: 18px; color: var(--muted); }
.fpx-in > span { flex: 1; min-width: 0; display: grid; }
.fpx-in i { grid-area: 1 / 1; font-style: normal; font-size: .92rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: fpx-type 12s calc(var(--k) * 3s) infinite both; }
.fpx-in i::after { content: ""; display: inline-block; width: 2px; height: 1.1em; margin-left: 2px; vertical-align: -3px; background: var(--violet); }
@keyframes fpx-type { 0% { opacity: 1; clip-path: inset(0 100% 0 0); animation-timing-function: steps(14); } 9%, 22% { opacity: 1; clip-path: inset(0 0 0 0); } 25%, 100% { opacity: 0; clip-path: inset(0 0 0 0); } }
.fpx-to { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: #fff; }
.fpx-to .i { width: 16px; height: 16px; }
.fpx-out { flex: 1 1 0; min-width: 0; display: grid; }
.fpx-out > div { grid-area: 1 / 1; display: flex; align-items: center; gap: 10px; padding: 0 12px 0 6px; box-shadow: 3px 3px 0 var(--ink); font-weight: 700; font-size: .92rem; animation: fpx-pop 12s calc(var(--k) * 3s) infinite both; }
.fpx-out > div > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fpx-out i { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--b); color: var(--bi); }
.fpx-out i svg { width: 19px; height: 19px; }
@keyframes fpx-pop { 0%, 10% { opacity: 0; transform: scale(.85); } 13% { opacity: 1; transform: scale(1.04); } 15%, 22% { opacity: 1; transform: scale(1); } 25%, 100% { opacity: 0; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
    .icon-cloud .lit, .fpx-in i, .fpx-out > div { animation: none; }
    .fpx-in i:not([style*="--k:0"]), .fpx-out > div:not([style*="--k:0"]) { opacity: 0; }
    .icon-cloud .lit[style*="--k:0"] { background: var(--b); color: var(--bi); }
}
.icon-cloud svg { width: 22px; height: 22px; }

.ft-players { display: grid; gap: 12px; margin-top: auto; }
/* YouTube: the thumbnail with the title bar, the red play button and the length */
.fp-yt { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; border: 2px solid rgba(255, 255, 255, .18); }
.fp-yt img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fp-yt-top { position: absolute; inset: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 10px 12px 18px; background: linear-gradient(rgba(0, 0, 0, .7), transparent); font-weight: 700; font-size: .82rem; }
.fp-yt-top svg { width: 18px; height: 18px; flex: none; color: #fff; }
.fp-yt-top div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.fp-yt-play { position: absolute; left: 50%; top: 52%; translate: -50% -50%; width: 56px; height: 39px; display: grid; place-items: center; border-radius: 12px; background: #ff0033; box-shadow: 0 4px 14px rgba(0, 0, 0, .35); }
.fp-yt-play svg { width: 20px; height: 20px; }
.fp-yt-time { position: absolute; right: 8px; bottom: 8px; padding: 2px 6px; border-radius: 5px; background: rgba(0, 0, 0, .75); font: 700 .7rem/1.3 var(--body); }
/* Spotify and SoundCloud: cover, title, a progress bar or the waveform, the play button */
.fp-sp, .fp-sc { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 14px; }
.fp-sp { background: linear-gradient(120deg, #5a3d2b, #2a1f1a); }
.fp-sc { background: #1e1e1e; border: 2px solid rgba(255, 255, 255, .12); }
.fp-sp img, .fp-sc img { width: 58px; height: 58px; flex: none; border-radius: 8px; object-fit: cover; }
.fp-body { flex: 1; min-width: 0; display: grid; gap: 1px; }
.fp-body small { font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; opacity: .65; }
.fp-body b { font-size: .86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-body em { font-style: normal; font-size: .74rem; opacity: .7; }
.fp-bar { height: 4px; margin-top: 6px; border-radius: 9px; background: rgba(255, 255, 255, .25); overflow: hidden; }
.fp-bar i { display: block; width: 38%; height: 100%; background: #fff; }
.fp-wave { display: flex; align-items: center; gap: 2px; height: 22px; margin-top: 4px; }
.fp-wave i { flex: 1; border-radius: 1px; background: rgba(255, 255, 255, .35); }
.fp-wave i:nth-child(-n+15) { background: #ff5500; }
.fp-sp u, .fp-sc u { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 50%; text-decoration: none; }
.fp-sp u { background: #1ed760; color: #000; } .fp-sc u { background: #ff5500; color: #fff; }
.fp-sp u svg, .fp-sc u svg { width: 16px; height: 16px; }
.fp-logo { position: absolute; right: 58px; top: 9px; color: #fff; opacity: .9; } .fp-logo svg { width: 15px; height: 15px; }

.ft-themes { margin: auto -28px 18px; overflow: hidden; padding: 6px 0 8px; mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); }   /* real theme pages sliding by */
.fth-track { display: flex; gap: 14px; width: max-content; animation: fth-slide 48s linear infinite; }
.ft-themes:hover .fth-track { animation-play-state: paused; }
.fth-track img { width: 124px; aspect-ratio: 260 / 400; flex: none; object-fit: cover; object-position: top; border: 2px solid var(--ink); border-radius: 16px; box-shadow: 3px 3px 0 var(--ink); background: var(--ink); }   /* ink behind the picture: no light hairline where the rounded border meets it */
.fth-track img:nth-child(odd) { rotate: -1.5deg; } .fth-track img:nth-child(even) { rotate: 1.5deg; }
@keyframes fth-slide { to { transform: translateX(calc(-50% - 7px)); } }
@media (prefers-reduced-motion: reduce) { .fth-track { animation: none; } .ft-themes { overflow-x: auto; } }
@media (max-width: 620px) {   /* phones: the paste demo stacks (link, arrow down, button), smaller icons and font tiles */
    .ft-paste { flex-direction: column; align-items: stretch; gap: 8px; }
    .fpx-in, .fpx-out { flex: none; }
    .fpx-to { align-self: center; width: 28px; height: 28px; rotate: 90deg; }
    /* rows fill the tile's width edge to edge, so nothing hangs left with a gap on the right */
    .icon-cloud { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; } .icon-cloud span { border-radius: 11px; } .icon-cloud svg { width: 19px; height: 19px; }
    .tile-design .ft-design { display: grid; gap: 12px; }
    .tile-design .ft-fonts { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .tile-design .ft-fonts span { width: auto; height: auto; aspect-ratio: 1; font-size: 1.05rem; } .tile-design .ft-fonts .wide { font-size: .8rem; }
    .tile-design .ft-shapes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } .ft-shapes span { padding: 9px 4px; text-align: center; }
    .tile-design .ft-colors { justify-content: space-between; }
    .ft-themes { margin-left: -22px; margin-right: -22px; }
    .fth-track img { width: 110px; }
}
.ft-design { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.ft-fonts { display: flex; flex-wrap: wrap; gap: 8px; }
.ft-fonts span { width: 46px; height: 46px; display: grid; place-items: center; border: 2px solid var(--ink); border-radius: 12px; background: #fff; font-size: 1.2rem; font-weight: 700; }
.ft-fonts .wide { font-size: .9rem; }   /* Syne's extended letters */
.ft-fonts span:nth-child(odd) { rotate: -3deg; } .ft-fonts span:nth-child(even) { rotate: 3deg; }
.ft-shapes { display: flex; flex-wrap: wrap; gap: 10px; }
.ft-shapes span { padding: 9px 18px; background: var(--violet); color: #fff; font-weight: 800; font-size: .88rem; border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.ft-shapes .sq { border-radius: 4px; } .ft-shapes .rd { border-radius: 12px; background: var(--pink); } .ft-shapes .pl { border-radius: 999px; background: var(--ink); }
.ft-colors { display: flex; gap: 8px; }
.ft-colors i { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--ink); }

.ft-list { list-style: none; margin: auto 0 0; padding: 0; display: grid; gap: 8px; }
.ft-list li { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border: 2px solid var(--ink); border-radius: 12px; background: #fff; font-weight: 700; font-size: .92rem; }
.ft-list .i { width: 16px; height: 16px; color: var(--muted); }
.ft-list li { position: relative; }
.ft-list .lifted { z-index: 1; animation: drag-up 4.4s cubic-bezier(.5, 0, .3, 1) infinite; }
.ft-list li:first-child { animation: make-room 4.4s cubic-bezier(.5, 0, .3, 1) infinite; }
/* the lifted card rides up over "Tour tickets" (one row: a 50px card + 8px gap), drops in, rests, then goes back */
@keyframes drag-up {
    0%, 8% { translate: 0 0; rotate: 0deg; box-shadow: none; border-color: var(--ink); }
    16% { translate: 10px 0; rotate: -2deg; box-shadow: 5px 6px 0 var(--violet); border-color: var(--violet); }
    40% { translate: 10px -58px; rotate: -3deg; box-shadow: 5px 6px 0 var(--violet); border-color: var(--violet); }
    48%, 70% { translate: 0 -58px; rotate: 0deg; box-shadow: none; border-color: var(--ink); }
    86%, 100% { translate: 0 0; rotate: 0deg; box-shadow: none; border-color: var(--ink); }
}
.ft-list .lifted::after { content: ""; position: absolute; left: 8px; top: 50%; width: 34px; height: 34px; margin-top: -17px; border-radius: 50%; pointer-events: none;   /* the finger on the grip, pressing then dragging */
    background: rgba(124, 58, 237, .28); box-shadow: 0 0 0 2px rgba(255, 255, 255, .9), 0 2px 8px rgba(21, 18, 31, .25); opacity: 0; animation: drag-touch 4.4s cubic-bezier(.5, 0, .3, 1) infinite; }
@keyframes drag-touch {
    0%, 3% { opacity: 0; scale: 1.6; } 9% { opacity: 1; scale: .85; } 14%, 44% { opacity: 1; scale: 1; }
    52%, 100% { opacity: 0; scale: 1.5; } }
@keyframes make-room { 0%, 26% { translate: 0 0; } 40%, 70% { translate: 0 58px; } 86%, 100% { translate: 0 0; } }
.ft-gallery { position: relative; margin: auto -28px 0 0; overflow: hidden; padding: 4px 0 26px 2px; }   /* runs off the tile's right edge: the next photo peeks in */
.fg-track { display: flex; gap: 10px; width: max-content; animation: fg-swipe 13s cubic-bezier(.65, 0, .35, 1) infinite; }
.fg-track img { width: 130px; aspect-ratio: 4 / 5; flex: none; object-fit: cover; border: 2px solid var(--ink); border-radius: 14px; box-shadow: 3px 3px 0 var(--ink); background: var(--ink); }
@keyframes fg-swipe {   /* one photo (130px + 10px gap) at a time, resting on each */
    0%, 12% { transform: translateX(0); } 16.67%, 28.67% { transform: translateX(-140px); } 33.33%, 45.33% { transform: translateX(-280px); }
    50%, 62% { transform: translateX(-420px); } 66.67%, 78.67% { transform: translateX(-560px); } 83.33%, 95.33% { transform: translateX(-700px); } 100% { transform: translateX(-840px); } }
.fg-arrow { position: absolute; right: 40px; top: calc(50% - 13px); translate: 0 -50%; width: 34px; height: 34px; display: grid; place-items: center; border: 2px solid var(--ink); border-radius: 50%; background: #fff; box-shadow: 2px 2px 0 var(--ink); color: var(--ink); padding: 0; cursor: pointer; transition: transform .15s; }
.fg-arrow:hover { transform: scale(1.08); } .fg-arrow:active { transform: scale(.94); }
.fg-arrow .i { width: 16px; height: 16px; rotate: -90deg; }
.fg-dots { position: absolute; left: 50%; bottom: 4px; translate: calc(-50% - 14px) 0; display: flex; gap: 6px; }
.fg-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(21, 18, 31, .25); }
.fg-dots b { position: absolute; left: 0; top: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); animation: fg-dot 13s cubic-bezier(.65, 0, .35, 1) infinite; }
@keyframes fg-dot {
    0%, 12% { transform: translateX(0); } 16.67%, 28.67% { transform: translateX(14px); } 33.33%, 45.33% { transform: translateX(28px); }
    50%, 62% { transform: translateX(42px); } 66.67%, 78.67% { transform: translateX(56px); } 83.33%, 95.33% { transform: translateX(70px); } 100% { transform: translateX(0); } }
.ft-sections { display: grid; gap: 7px; margin-top: auto; padding: 14px 14px 16px; border-radius: 16px; background: linear-gradient(170deg, #fdf2f8, #ede9fe); }
.fx-row { position: relative; display: flex; align-items: center; }
.fx-row > em { position: absolute; right: -6px; top: 50%; translate: 0 -50%; padding: 3px 8px; border-radius: 999px; background: var(--ink); color: #fff; font: 700 .64rem/1.2 var(--body); font-style: normal; letter-spacing: .03em; rotate: 3deg; }
.fx-on-top { margin-top: 8px; } .fx-on-top > em { top: 0; }   /* on the button's top edge, clear of its text */
.fx-h { flex: 1; display: flex; align-items: center; gap: 10px; font: 800 .9rem/1.2 var(--display); }
.fx-h::before, .fx-h::after { content: ""; flex: 1; height: 1.5px; background: rgba(21, 18, 31, .2); }
.fx-btn { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; padding: 10px 40px; border: 2px solid var(--ink); border-radius: 999px; background: #fff;
    box-shadow: 2px 2px 0 var(--ink); font-weight: 700; font-size: .84rem; }
.fx-btn i { position: absolute; left: 8px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; }
.fx-btn i svg { width: 15px; height: 15px; }
.fx-btn .sp { background: #1ed760; color: #000; } .fx-btn .yt { background: #ff0033; color: #fff; }
.fx-mail { background: var(--violet); color: #fff; } .fx-mail i { background: rgba(255, 255, 255, .2); }
.fx-row hr { flex: 1; margin: 6px 15%; border: 0; height: 2px; background: radial-gradient(circle, var(--ink) 1.5px, transparent 2px) center / 12px 4px repeat-x; opacity: .45; }
.ft-qr { margin: auto auto 10px; padding: 0; overflow: hidden; border: 2px solid var(--ink); border-radius: 18px; background: #fff; box-shadow: 4px 4px 0 var(--violet); rotate: -4deg; }
.ft-qr img { display: block; width: 190px; height: 190px; }   /* no padding: the code brings its own quiet zone (white border scanners need) */
.ft-qr-try { margin: 0 0 auto !important; text-align: center; font-weight: 700; font-size: .9rem; color: var(--violet) !important; }

.ft-editor { background: var(--sun); border-block: 2px solid var(--ink); }
.ft-split { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.ft-points { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 14px; }
.ft-points li { position: relative; padding-left: 34px; font-size: 1.04rem; }
.ft-points li::before { content: ""; position: absolute; left: 0; top: 4px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--ink);
    background: var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315121f' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat; }
.mock-editor { border: 2px solid var(--ink); border-radius: var(--r-lg); background: #fbf9f4; box-shadow: var(--shadow-lg); overflow: hidden; rotate: 1deg; }
.me-bar { display: flex; align-items: center; gap: 10px; margin: 14px 14px 0; padding: 10px 10px 10px 14px; border: 1px solid #fde68a; border-radius: 12px; background: #fefce8; color: #713f12; font: 600 .85rem/1.2 var(--body); }
.me-msg { display: flex; align-items: center; gap: 10px; }
.me-msg::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #f59e0b; }
.me-bar em { margin-left: auto; padding: 6px 12px; border: 1px solid #e7e2d8; border-radius: 7px; background: #fff; font-style: normal; color: var(--ink); }
.me-bar strong { padding: 6px 12px; border: 1.5px solid var(--ink); border-radius: 7px; background: var(--violet); color: #fff; box-shadow: 2px 2px 0 var(--ink); }
.me-body { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 16px; padding: 14px; }
.me-list { display: grid; gap: 8px; align-content: start; }
.me-add { padding: 12px 14px; border: 1px solid #dad4c8; border-radius: 10px; background: #fff; color: #8a8694; font-size: .85rem; }
.me-card { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #e7e2d8; border-radius: 12px; background: #fff; }
.me-card i { width: 32px; height: 32px; flex: none; border-radius: 9px; background: linear-gradient(135deg, #f093fb, #f5576c); }
.me-card:nth-child(3) i { background: linear-gradient(135deg, #a1c4fd, #c2e9fb); }
.me-card span { flex: 1; min-width: 0; display: grid; font-size: .82rem; } .me-card small { color: #8a8694; font-size: .72rem; }
.me-card u { width: 30px; height: 18px; flex: none; border-radius: 99px; background: var(--violet); position: relative; }
.me-card u::after { content: ""; position: absolute; top: 2px; right: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; }
.me-card.off { background: #f5f2ec; } .me-card.off span { opacity: .5; }
.me-card.off u { background: #d9d3c8; } .me-card.off u::after { right: auto; left: 2px; }
.me-phone { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 12px; border: 6px solid var(--ink); border-radius: 26px; background: linear-gradient(160deg, #ec4899, #fde047); box-shadow: 4px 4px 0 var(--violet); }
.me-av { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--ink); background: linear-gradient(135deg, #f093fb, #f5576c); }
.me-phone b { font: 800 .85rem/1 var(--display); margin-bottom: 4px; }
.me-phone i { width: 100%; height: 22px; border-radius: 8px; background: #fff; }
.me-phone i.short { width: 70%; }

.ft-insights { background: var(--ink); color: #fff; }
.ft-insights .kicker { color: var(--lime); }
.ft-insights .section-head p { color: rgba(255, 255, 255, .78); }
.ins-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.ins-card { padding: 24px; background: #fff; color: var(--ink); border: 2px solid var(--ink); border-radius: var(--r-lg); box-shadow: 6px 6px 0 var(--violet); }
.ins-card h3 { margin: 0 0 16px; font: 800 1.15rem/1.2 var(--display); }
.ins-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; margin-bottom: 12px; font-weight: 600; font-size: .92rem; }
.ins-row i { grid-column: 1 / -1; height: 8px; border-radius: 99px; background: linear-gradient(90deg, var(--violet), var(--pink)) 0 0 / var(--w) 100% no-repeat, #f0ece4; }
.donut { width: 150px; height: 150px; margin: 4px auto 14px; border-radius: 50%; display: grid; place-items: center;
    background: conic-gradient(var(--violet) calc(var(--a) * 1%), var(--pink) 0 94%, var(--sun) 0); }
.donut span { width: 96px; height: 96px; border-radius: 50%; background: #fff; display: grid; place-content: center; text-align: center; font-size: .78rem; color: var(--muted); }
.donut b { font: 800 1.6rem/1 var(--display); color: var(--ink); }
.ins-legend { display: flex; justify-content: center; align-items: center; gap: 6px; margin: 0; font-size: .82rem; color: var(--muted); }
.ins-legend i { width: 10px; height: 10px; border-radius: 3px; margin-left: 6px; }
.ins-legend .m { background: var(--violet); } .ins-legend .d { background: var(--pink); } .ins-legend .t { background: var(--sun); }
.ins-top { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ins-top li { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: .92rem; }
.ins-top svg { width: 18px; height: 18px; flex: none; }
.ins-top b { margin-left: auto; font-variant-numeric: tabular-nums; }
.ins-note { margin: 22px 0 0; text-align: center; color: rgba(255, 255, 255, .6); font-size: .9rem; }

.little-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.little-grid li { display: grid; gap: 6px; align-content: start; padding: 22px; background: var(--card); border: 2px solid var(--ink); border-radius: var(--r-md); box-shadow: var(--shadow); }
.little-ico { width: 40px; height: 40px; display: grid; place-items: center; margin-bottom: 6px; border: 2px solid var(--ink); border-radius: 12px; background: var(--sun); }
.little-grid li:nth-child(4n+2) .little-ico { background: var(--lime); } .little-grid li:nth-child(4n+3) .little-ico { background: var(--sky); }
.little-grid li:nth-child(4n) .little-ico { background: var(--pink); color: #fff; }
.little-ico .i { width: 20px; height: 20px; }
.little-grid b { font: 800 1.08rem/1.2 var(--display); }
.little-grid li > span:last-child { color: var(--muted); font-size: .94rem; }

/* the "New" pill under the title: jumps to the New section */
.ft-newpill { display: flex; justify-content: center; margin: -18px 0 34px; }
.ft-newpill a { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; padding: 6px 14px 6px 6px; border: 2px solid var(--ink); border-radius: 999px; background: var(--card);
    box-shadow: 3px 3px 0 var(--ink); color: var(--ink); text-decoration: none; font-weight: 600; font-size: .95rem; transition: transform .15s, box-shadow .15s; }
.ft-newpill a:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); }
.ft-newpill b { padding: 4px 10px; border-radius: 999px; background: var(--violet); color: #fff; font: 800 .72rem/1.2 var(--body); letter-spacing: .06em; text-transform: uppercase; }
.ft-newpill .i { width: 16px; height: 16px; flex: none; }
#new { scroll-margin-top: 70px; }
.look-cta { margin: 36px 0 0; text-align: center; }
/* New: bookings, emails and apps (cards with a drawn picture on top) */
.ft-new { background: color-mix(in srgb, var(--violet) 7%, var(--bg)); border-top: 2px solid var(--ink); }
.new-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.new-wide { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 20px; }
.new-card { display: flex; flex-direction: column; gap: 10px; padding: 18px 18px 24px; background: var(--card); border: 2px solid var(--ink); border-radius: var(--r-lg); box-shadow: var(--shadow); }
.new-card h3 { margin: 8px 6px 0; font: 800 1.3rem/1.15 var(--display); letter-spacing: -.02em; }
.new-card p { margin: 0 6px; color: var(--muted); }
.nc-vis { position: relative; display: grid; place-items: center; min-height: 250px; padding: 22px; border-radius: 16px; overflow: hidden; }
.new-grid .nc-vis { height: 310px; }   /* one height, so the three titles line up */
.nc-cal { background: linear-gradient(160deg, #dbeafe, #c7d2fe); }
.nc-su { background: linear-gradient(160deg, #fce7f3, #fbcfe8); align-content: center; gap: 12px; }
.nc-app { background: linear-gradient(160deg, #dcfce7, #bbf7d0); }
.nc-cards { background: linear-gradient(160deg, #fef3c7, #fde68a); align-content: center; gap: 10px; }
.nc-feat { background: linear-gradient(160deg, #1e1b4b, #15121f); }
/* the calendar sheet */
.ft-cal { width: min(100%, 270px); padding: 14px; background: #fff; border: 2px solid var(--ink); border-radius: 18px; box-shadow: 4px 4px 0 var(--ink); rotate: -2deg; }
.fc-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.fc-head i { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: #006bff; color: #fff; }
.fc-head svg { width: 18px; height: 18px; }
.fc-head span { display: grid; } .fc-head b { font-size: .92rem; } .fc-head small { color: var(--muted); font-size: .75rem; }
.fc-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.fc-days span { display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; font: 600 .7rem/1 var(--body); color: #b4afbd; }
.fc-days .on { color: #006bff; background: #e8f0ff; font-weight: 800; }
.fc-days .pick { color: #fff; background: #006bff; font-weight: 800; }
.fc-times { display: flex; gap: 6px; margin-top: 12px; }
.fc-times span { flex: 1; padding: 7px 0; text-align: center; border: 1.5px solid #006bff; border-radius: 8px; color: #006bff; font: 700 .75rem/1 var(--body); }
.fc-times .pick { background: #006bff; color: #fff; }
/* the email signup box and the owner's list */
.ft-su { width: min(100%, 280px); display: grid; gap: 4px; padding: 16px; text-align: center; background: var(--ink); color: #fff; border-radius: 18px; box-shadow: 4px 4px 0 var(--pink); rotate: 1.5deg; }
.ft-su b { font: 800 1rem/1.2 var(--display); } .ft-su small { opacity: .7; font-size: .76rem; }
.fs-row { display: flex; gap: 6px; margin-top: 8px; }
.fs-in { flex: 1; min-width: 0; padding: 9px 10px; text-align: left; border-radius: 999px; background: rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .6); font-size: .76rem; }
.fs-btn { padding: 9px 12px; border-radius: 999px; background: #fff; color: var(--ink); font: 800 .76rem/1 var(--body); }
.fs-list { display: flex; align-items: center; gap: 8px; width: min(100%, 250px); padding: 9px 12px; background: #fff; border: 2px solid var(--ink); border-radius: 12px; font-size: .8rem; rotate: -1.5deg; }
.fs-list > .i { width: 18px; height: 18px; color: var(--violet); }
.fs-list > div { white-space: nowrap; }
.fs-list em { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: 999px; background: var(--violet); color: #fff; font: 800 .7rem/1 var(--body); font-style: normal; }
.fs-list em .i { width: 12px; height: 12px; }
/* the app store card */
.ft-app { width: min(100%, 280px); display: grid; gap: 10px; padding: 14px; background: #fff; border: 2px solid var(--ink); border-radius: 18px; box-shadow: 4px 4px 0 var(--ink); rotate: -1.5deg; }
.fa-top { display: flex; align-items: center; gap: 10px; }
.fa-icon { width: 46px; height: 46px; flex: none; border-radius: 22%; box-shadow: 0 2px 6px rgba(21, 18, 31, .2); }
.fa-top span { display: grid; } .fa-top b { font-size: .92rem; } .fa-top small { color: var(--muted); font-size: .75rem; }
.fa-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.fa-btns > div { display: flex; align-items: center; justify-content: center; gap: 5px; padding: 7px 4px; border-radius: 999px; background: var(--b); color: #fff; font: 700 .7rem/1 var(--body); white-space: nowrap; }
.fa-btns svg { width: 12px; height: 12px; }
.fa-shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.fa-shots img { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 9px; box-shadow: 0 0 0 1px rgba(21, 18, 31, .12); }
/* link cards, like .btn.lcard on pages */
.flc { display: flex; align-items: center; gap: 10px; width: min(100%, 360px); padding: 9px 9px 9px 9px; background: var(--ink); color: #fff; border-radius: 16px; box-shadow: 3px 3px 0 rgba(21, 18, 31, .25); }
.flc:nth-child(2) { translate: 14px 0; } .flc:nth-child(3) { translate: -6px 0; }
.flc i { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 11px; background: var(--b); color: var(--bi); }
.flc i svg { width: 20px; height: 20px; }
.flc > span { flex: 1; min-width: 0; display: grid; } .flc b { font-size: .86rem; } .flc small { font-size: .72rem; opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flc em { padding: 7px 11px; border-radius: 999px; background: var(--b); color: var(--bi); font: 800 .72rem/1 var(--body); font-style: normal; white-space: nowrap; }
/* a featured link */
.ft-feat { width: min(100%, 360px); display: grid; background: #fff; border: 2px solid #fff; border-radius: 18px; overflow: hidden; box-shadow: 5px 5px 0 var(--violet); rotate: 1.5deg; }
.ff-pic { position: relative; aspect-ratio: 16 / 9; }
.ff-tag div, .fa-btns div div, .fs-list em div { display: inline; }
.ff-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ff-tag { position: absolute; left: 8px; top: 8px; display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 999px; background: #fff; color: var(--ink); font: 700 .68rem/1 var(--body); }
.ff-tag svg { width: 12px; height: 12px; color: #ff0033; }
.ff-body { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--violet); color: #fff; }
.ff-body > div { flex: 1; min-width: 0; display: grid; } .ff-body b { font-size: .86rem; } .ff-body small { font-size: .72rem; opacity: .75; }
.ff-body em { padding: 6px 12px; border: 2px solid #fff; border-radius: 999px; font: 800 .74rem/1 var(--body); font-style: normal; }

/* Your look: the five header layouts as small phones, then the extras */
.look-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
.look { margin: 0; display: grid; gap: 12px; justify-items: center; text-align: center; }
.look figcaption { display: grid; gap: 2px; }
.look figcaption b { font: 800 1.1rem/1.2 var(--display); } .look figcaption span { color: var(--muted); font-size: .9rem; }
.lk-phone { width: 100%; max-width: 200px; aspect-ratio: 390 / 760; border: 6px solid var(--ink); border-radius: 26px; overflow: hidden; background: var(--ink); box-shadow: 0 18px 30px -12px rgba(21, 18, 31, .45), 0 4px 10px rgba(21, 18, 31, .12); }   /* a soft shadow: real phones, not our flat offset one, so the screenshots stand out */
.lk-phone img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.look:nth-child(even) .lk-phone { rotate: 1.5deg; } .look:nth-child(odd) .lk-phone { rotate: -1.5deg; }
.look-extras { list-style: none; margin: 34px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.look-extras li { display: flex; gap: 12px; align-items: flex-start; padding: 16px; background: var(--card); border: 2px solid var(--ink); border-radius: var(--r-md); box-shadow: var(--shadow); }
.look-extras .little-ico { flex: none; margin: 0; }
.lx-logo, .lx-video { position: relative; flex: none; width: 40px; height: 40px; overflow: hidden; border: 2px solid var(--ink); border-radius: 12px; }
.lx-logo { display: grid; place-items: center; background: var(--sun); }
.lx-logo b { grid-area: 1 / 1; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50% 50% 50% 12%; background: linear-gradient(140deg, var(--pink), var(--violet)); color: #fff;
    font: 800 .82rem/1 var(--display); box-shadow: 2px 2px 0 var(--ink); animation: lx-swap 3.6s ease-in-out infinite; }
.lx-logo b.l2 { border-radius: 7px; background: var(--ink); color: #fff; font: 700 1rem/1 Georgia, serif; box-shadow: 2px 2px 0 var(--sky); rotate: 8deg; animation-delay: -1.8s; }
.lx-logo b.l2::after { content: ""; position: absolute; width: 6px; height: 6px; margin: -14px -16px 0 0; border-radius: 50%; background: var(--sun); }
@keyframes lx-swap { 0%, 38% { opacity: 1; transform: none; } 50%, 88% { opacity: 0; transform: scale(.6) rotate(-12deg); } 100% { opacity: 1; transform: none; } }
.lx-video { background: #15121f; }
.lx-video img { width: 100%; height: 100%; object-fit: cover; transform-origin: 30% 40%; animation: lx-pan 6s ease-in-out infinite alternate; }
.lx-video i { position: absolute; right: 3px; bottom: 3px; width: 14px; height: 14px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .9); color: var(--ink); animation: lx-pulse 1.6s ease-in-out infinite; }
.lx-video i .i { width: 8px; height: 8px; }
@keyframes lx-pan { from { transform: scale(1.1) translate(0, 0); } to { transform: scale(1.45) translate(-6px, 3px); } }
@keyframes lx-pulse { 50% { transform: scale(1.15); } }
@media (prefers-reduced-motion: reduce) { .fg-track, .fg-dots b { animation: none; } }
@media (prefers-reduced-motion: reduce) { .lx-logo b, .lx-video img, .lx-video i { animation: none; } .lx-logo b.l2 { opacity: 0; } }
.lx-anim { position: relative; flex: none; width: 40px; height: 40px; overflow: hidden; border: 2px solid var(--ink); border-radius: 12px;
    background: radial-gradient(circle at 70% 25%, rgba(244, 114, 182, .55), transparent 55%), linear-gradient(160deg, #1b1240, #5b21b6); }
.lx-anim i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff; animation: lx-twinkle 2.2s ease-in-out infinite; }
.lx-anim i:nth-child(1) { left: 6px; top: 7px; } .lx-anim i:nth-child(2) { left: 25px; top: 5px; animation-delay: .6s; }
.lx-anim i:nth-child(3) { left: 14px; top: 17px; width: 2px; height: 2px; animation-delay: 1.2s; } .lx-anim i:nth-child(4) { left: 29px; top: 22px; width: 2px; height: 2px; animation-delay: 1.7s; }
.lx-anim b { position: absolute; top: -8px; width: 7px; height: 5px; border-radius: 6px 0 6px 0; background: #f9a8d4; animation: lx-fall 3s linear infinite; }
.lx-anim b:nth-of-type(1) { left: 8px; } .lx-anim b:nth-of-type(2) { left: 20px; animation-delay: 1s; } .lx-anim b:nth-of-type(3) { left: 30px; animation-delay: 2s; background: #fbcfe8; }
@keyframes lx-twinkle { 0%, 100% { opacity: .25; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.3); } }
@keyframes lx-fall { 0% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(-5px, 26px) rotate(160deg); } 100% { transform: translate(3px, 52px) rotate(320deg); } }
@media (prefers-reduced-motion: reduce) { .lx-anim i, .lx-anim b { animation: none; } .lx-anim b { top: 14px; } }
.lx-badge { flex: none; width: 40px; height: 40px; } .lx-badge svg { display: block; width: 40px; height: 40px; filter: drop-shadow(0 2px 3px rgba(21, 18, 31, .25)); }
.look-extras li > span:last-child { display: grid; gap: 2px; } .look-extras b { font: 800 1rem/1.2 var(--display); } .look-extras li > span:last-child > span { color: var(--muted); font-size: .9rem; }
.look-extras li:nth-child(2) .little-ico { background: var(--lime); } .look-extras li:nth-child(3) .little-ico { background: var(--sky); } .look-extras li:nth-child(4) .little-ico { background: var(--pink); color: #fff; }

@media (max-width: 960px) {
    .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tile-links, .tile-design { grid-column: span 2; }
    .tile-players { grid-column: span 2; grid-row: auto; }
    .tile-drag, .tile-gallery, .tile-sections, .tile-qr { grid-column: span 1; }
    .ft-split, .ins-grid { grid-template-columns: minmax(0, 1fr); }
    .little-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .new-grid { grid-template-columns: minmax(0, 1fr); }
    .new-grid .new-card, .new-wide .new-card { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; column-gap: 22px; }
    .new-card .nc-vis { grid-row: 1 / span 2; }
    .new-card h3 { align-self: end; } .new-card p { align-self: start; }
    .new-wide { grid-template-columns: minmax(0, 1fr); }
    .tile-players .ft-players { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; }
    .tile-players .fp-yt { grid-row: span 2; }
    .look-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .look-extras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
    .bento { grid-template-columns: minmax(0, 1fr); }
    .bento > .tile { grid-column: auto; grid-row: auto; }   /* one column: no spans, or the grid grows an extra column */
    .tile { min-height: 0; padding: 22px; }
    .me-body { grid-template-columns: minmax(0, 1fr); }
    .me-phone { display: none; }
    .mock-editor { rotate: 0deg; }   /* straight on phones: a 1° tilt on a tall narrow card reads as crooked */
    .me-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px; }   /* the message on top, both buttons side by side below */
    .me-msg { grid-column: 1 / -1; }
    .me-bar em, .me-bar strong { margin: 0; text-align: center; padding: 8px 12px; }
    .little-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .little-grid li { padding: 16px 14px; }
    .little-grid b { font-size: .98rem; } .little-grid li > span:last-child { font-size: .86rem; }
    .flc:nth-child(n) { translate: none; }
    .new-wide { grid-template-columns: minmax(0, 1fr); }
    .new-grid .new-card, .new-wide .new-card { display: flex; }
    .new-card h3, .new-card p { align-self: auto; }
    .tile-players .ft-players { grid-template-columns: minmax(0, 1fr); }
    .tile-players .fp-yt { grid-row: auto; }
    .ft-newpill { margin: -10px 0 26px; } .ft-newpill a { font-size: .85rem; }
    .look-grid { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -20px; padding: 6px 20px 18px; scroll-padding: 0 20px; scrollbar-width: none; }   /* one swipeable row, not a 3-screen-tall column */
    .look-grid::-webkit-scrollbar { display: none; }
    .look-grid > * { flex: none; width: 44%; scroll-snap-align: start; }
    .look-extras { grid-template-columns: minmax(0, 1fr); }
    .nc-vis, .new-grid .nc-vis { min-height: 0; height: auto; }
}
@media (prefers-reduced-motion: reduce) { .ft-list .lifted, .ft-list li:first-child { animation: none; } .ft-list .lifted::after { animation: none; opacity: 1; } .ft-list .lifted { rotate: -2deg; translate: 10px 0; box-shadow: 5px 6px 0 var(--violet); border-color: var(--violet); } .tile, .icon-cloud span { transition: none; } }

/* ---------- /link-in-bio (section_link_in_bio) ---------- */
.lib-hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.lib-hero .section-title { margin-top: 12px; }
.lib-lead { color: var(--muted); font-size: 1.15rem; margin-bottom: 26px; max-width: 34em; }
.lib-small { margin-top: 14px; color: var(--muted); font-size: .92rem; font-weight: 600; }
.lib-narrow { max-width: 820px; }
.lib-definition { padding: clamp(28px, 4vw, 44px); background: var(--card); border: 2px solid var(--ink); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); }
.lib-definition .section-title { font-size: clamp(1.9rem, 3.6vw, 2.6rem); }
.lib-def { margin-bottom: 14px; padding: 16px 20px; border-left: 6px solid var(--violet); border-radius: 0 12px 12px 0; background: color-mix(in srgb, var(--violet) 8%, #fff); font-size: 1.12rem; }
.lib-definition p:last-child { color: var(--muted); margin: 0; }
.lib-include { background: color-mix(in srgb, var(--pink) 10%, var(--bg)); border-block: 2px solid var(--ink); }
.lib-include-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.lib-item { display: flex; gap: 14px; align-items: flex-start; padding: 20px; background: var(--card); border: 2px solid var(--ink); border-radius: var(--r-md); box-shadow: var(--shadow); }
.lib-item .little-ico { flex: none; margin: 0; }
.lib-item:nth-child(3n+2) .little-ico { background: var(--lime); } .lib-item:nth-child(3n) .little-ico { background: var(--sky); }
.lib-item b { display: block; font: 800 1.08rem/1.2 var(--display); margin-bottom: 4px; }
.lib-item span:last-child { color: var(--muted); font-size: .95rem; }
.lib-more { margin-top: 26px; text-align: center; font-weight: 600; }
.lib-more a, .lib-design a:not(.btn) { color: var(--violet); text-decoration: underline; text-underline-offset: 3px; }
.lib-steps-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; counter-reset: s; }
.lib-steps-list li { padding: 24px 20px; background: var(--card); border: 2px solid var(--ink); border-radius: var(--r-lg); box-shadow: var(--shadow); }
.lib-steps-list .step-num { width: 46px; height: 46px; margin-bottom: 14px; font-size: 1.3rem; }
.lib-steps-list li:nth-child(2) .step-num { background: var(--lime); } .lib-steps-list li:nth-child(3) .step-num { background: var(--pink); color: #fff; }
.lib-steps-list li:nth-child(4) .step-num { background: var(--sky); } .lib-steps-list li:nth-child(5) .step-num { background: var(--violet); color: #fff; }
.lib-steps-list h3 { margin: 0 0 6px; font: 800 1.1rem/1.2 var(--display); }
.lib-steps-list p { margin: 0; color: var(--muted); font-size: .95rem; }
.lib-guides { background: var(--ink); color: #fff; }
.lib-guides .kicker { color: var(--lime); }
.lib-guides .section-head p { color: rgba(255, 255, 255, .75); }
.guide-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.guide { padding: 24px; background: #fff; color: var(--ink); border: 2px solid var(--ink); border-radius: var(--r-lg); box-shadow: 6px 6px 0 var(--violet); scroll-margin-top: 100px; }
.guide h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font: 800 1.12rem/1.25 var(--display); }
.guide-ico { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 11px; background: var(--ink); color: #fff; }
.guide-ico svg { width: 20px; height: 20px; }
.guide ol { margin: 0; padding-left: 20px; display: grid; gap: 8px; color: var(--muted); font-size: .96rem; }
.guide ol b { color: var(--ink); }
.lib-design-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(32px, 5vw, 72px); align-items: center; }
.lib-design p { color: var(--muted); font-size: 1.08rem; }
.lib-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 22px 0; }
.lib-plans div { display: grid; gap: 4px; padding: 16px; border: 2px solid var(--ink); border-radius: var(--r-md); background: var(--card); }
.lib-plans .pro { background: color-mix(in srgb, var(--violet) 9%, var(--card)); }
.lib-plans b { font: 800 1.05rem/1.2 var(--display); } .lib-plans span { color: var(--muted); font-size: .9rem; }
.lib-swatches { grid-template-columns: repeat(2, 120px); padding: 22px; background: var(--card); border: 2px solid var(--ink); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); rotate: 2deg; }
.lib-swatches .swatch { height: 50px; }
.lib-faq .faq { margin-top: 0; }
@media (max-width: 960px) {
    .lib-hero-grid, .lib-design-grid { grid-template-columns: minmax(0, 1fr); }
    .lib-include-grid, .guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lib-steps-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lib-swatches { justify-self: center; }
}
@media (max-width: 620px) {
    .lib-include-grid, .guide-grid, .lib-steps-list, .lib-plans { grid-template-columns: minmax(0, 1fr); }
    .lib-swatches { grid-template-columns: repeat(2, 1fr); width: 100%; rotate: 0deg; }
}

/* ---------- Landing pages: /for/<audience> (landing_audience() in includes/landing_pages.php) ---------- */
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; font-size: .9rem; font-weight: 600; color: var(--muted); }
.crumbs a { color: var(--violet); }
.lp-phone { display: grid; justify-items: center; }
.lp-phone .live-phone { rotate: 3deg; }
.live-grid.lp-live-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lp-tips { padding-top: 0; }
.lp-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lp-steps a, .lp-tips a, .lib-faq .faq a { color: var(--violet); text-decoration: underline; text-underline-offset: 3px; }
.lp-tip-list { margin: 18px 0 0; padding-left: 1.3em; display: grid; gap: 12px; font-size: 1.05rem; }
.lp-tip-list li::marker { font-weight: 800; color: var(--violet); }
.lp-updated { margin-top: 22px; text-align: center; color: var(--muted); font-size: .9rem; }
.lp-related { padding-block: 0 var(--section-pad); text-align: center; }
.lp-related ul { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.lp-related a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; background: var(--card); border: 2px solid var(--ink); border-radius: 99px; font-weight: 700; box-shadow: var(--shadow); }
.lp-related a { transition: transform .15s, box-shadow .15s, background .15s; }
.lp-related a:hover { background: var(--sun); transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.lp-related a:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.lp-related a:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; }
.crumbs a:hover, .lp-hub .ex-who a:hover { text-decoration: underline; text-underline-offset: 3px; }
.lp-related a .i { width: 16px; height: 16px; }
.lp-crumbs-center { justify-content: center; }
.lp-hub .ex-who a { color: inherit; } .lp-hub .ex-who a:hover { color: var(--violet); }
.vs-verdict { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 8px; }
.vs-pick { padding: 22px 24px; background: var(--card); border: 2px solid var(--ink); border-radius: var(--r-lg); box-shadow: var(--shadow); }
.vs-pick:first-child { background: color-mix(in srgb, var(--violet) 9%, var(--card)); }
.vs-pick h2 { margin: 0 0 10px; font: 800 1.2rem/1.2 var(--display); }
.vs-pick ul { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; color: var(--muted); }
.vs-compare { padding-top: 0; }
.vs-table-wrap { overflow-x: auto; background: var(--card); border: 2px solid var(--ink); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); }
.vs-table { width: 100%; border-collapse: collapse; font-size: .97rem; }
.vs-table th, .vs-table td { padding: 14px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); }
.vs-table tbody tr:last-child > * { border-bottom: 0; }
.vs-table thead th { font: 800 1.05rem/1.2 var(--display); border-bottom: 2px solid var(--ink); }
.vs-table thead th:nth-child(2), .vs-table td:nth-child(2) { background: color-mix(in srgb, var(--violet) 7%, transparent); }
.vs-table tbody th { font-weight: 700; width: 30%; }
.vs-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vs-sources { max-width: 800px; margin-inline: auto; }
.vs-source-list { margin: 8px 0 0; text-align: center; color: var(--muted); font-size: .85rem; }
.vs-source-list a { color: var(--violet); text-decoration: underline; }
@media (max-width: 960px) { .vs-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .vs-verdict, .vs-steps { grid-template-columns: minmax(0, 1fr); } .vs-table th, .vs-table td { padding: 12px 10px; font-size: .9rem; } }
@media (max-width: 1180px) { .live-grid.lp-live-grid .live-phone { --w: 220px; --s: .5128; } .live-grid.lp-live-grid .ex-caption { width: 220px; } }
@media (max-width: 960px) { .lp-steps { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 960px) {
    .live-grid.lp-live-grid { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 16px 18px; margin: 0 -16px; justify-content: flex-start; }
    .live-grid.lp-live-grid .live-card { flex: none; scroll-snap-align: center; }
    .live-grid.lp-live-grid .live-phone { --w: 240px; --s: .5641; } .live-grid.lp-live-grid .ex-caption { width: 240px; }
}

/* ---------- Home page: theme switcher (section_themes), insights numbers, pricing teaser ---------- */
.themes-section { background: color-mix(in srgb, var(--sky) 16%, var(--bg)); border-block: 2px solid var(--ink); }
.themer { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.themer-text .section-title { margin: 10px 0 14px; }
.themer-text p { color: var(--muted); font-size: 1.1rem; }
.theme-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 20px; padding: 0; border: 0; }
.theme-chips label {
    display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border: 2px solid var(--ink); border-radius: 999px;
    background: var(--card); font-weight: 700; cursor: pointer; box-shadow: 3px 3px 0 var(--ink); transition: transform .15s, box-shadow .15s, background .15s;
}
.theme-chips label:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.theme-chips input:checked + label { background: var(--ink); color: #fff; box-shadow: 3px 3px 0 var(--violet); }
.theme-chips input:focus-visible + label { outline: 3px solid var(--pink); outline-offset: 3px; }
/* The swatch: the theme's background with a dot in its button color. */
.theme-chips label i { position: relative; width: 26px; height: 26px; flex: none; border-radius: 50%; border: 2px solid var(--ink); }
.theme-chips label i::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 1px rgba(0, 0, 0, .15); }
.chip-pro { padding: 2px 7px; border-radius: 99px; background: var(--violet); color: #fff; font-size: .68rem; letter-spacing: .02em; }
.themer-text .themer-note { font-size: .92rem; }
.themer-phone { display: grid; justify-items: center; }
.themer-phone .phone-mock { rotate: 2deg; }
.ins-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-bottom: 20px; }
.ins-kpis div { display: grid; gap: 2px; padding: 20px 24px; background: #fff; color: var(--ink); border: 2px solid var(--ink); border-radius: var(--r-lg); box-shadow: 6px 6px 0 var(--violet); }
.ins-kpis span { color: var(--muted); font-weight: 700; font-size: .9rem; }
.ins-kpis b { font: 800 2.3rem/1.1 var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ins-kpis small { color: #15803d; font-weight: 700; font-size: .82rem; }
.plans-short { align-items: stretch; }
.plans-short .plan { display: flex; flex-direction: column; }
.plans-short .plan-price { margin: 12px 0 20px; flex-wrap: wrap; }
.plans-short .plan-items { margin: 0 0 26px; }
.plans-short .btn { margin-top: auto; }
@media (max-width: 860px) {
    .themer { grid-template-columns: minmax(0, 1fr); }
    .themer-text { text-align: center; }
    .theme-chips { justify-content: center; }
    .themer-phone .phone-mock { rotate: 0deg; height: 560px; max-width: 320px; }
}
@media (max-width: 620px) {
    .ins-kpis { gap: 10px; }
    .ins-kpis div { padding: 14px 12px; box-shadow: 4px 4px 0 var(--violet); }
    .ins-kpis span { font-size: .78rem; }
    .ins-kpis b { font-size: 1.45rem; }
    .ins-kpis small { font-size: .72rem; }
    .kpi-vs { display: none; }
}
@media (prefers-reduced-motion: reduce) { .theme-chips label { transition: none; } }

/* ---------- Examples: real pages in phones (live_phone() in sections.php) ---------- */
/* The page is drawn at phone size (390 px wide) and scaled down to fit the frame: --s = (--w − 2 × border) / 390. */
.live-phone {
    --w: 300px; --b: 10px; --s: .7179; position: relative; width: var(--w); height: calc(var(--w) * 2.05); overflow: hidden; border: 10px solid var(--ink); border-radius: 46px;
    background: var(--ink); box-shadow: 0 18px 40px -12px rgba(21, 18, 31, .28); transition: transform .25s ease, box-shadow .25s ease;
}
.live-phone iframe { position: absolute; top: 0; left: 0; width: 390px; height: calc((var(--w) * 2.05 - 2 * var(--b)) / var(--s)); border: 0; transform: scale(var(--s)); transform-origin: 0 0; pointer-events: none; }
.ex-card:hover .live-phone { transform: translate(-4px, -6px) rotate(-.6deg); box-shadow: 0 26px 50px -14px rgba(21, 18, 31, .32); }
.live-phone iframe.live-anim { opacity: 0; transition: opacity .35s ease; }
.live-phone iframe.live-anim.on { opacity: 1; }
/* Poster first (live_phone()), the page fades in over it once loaded; without JavaScript the poster stays. */
.live-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.has-poster iframe { opacity: 0; transition: opacity .35s ease; }
.has-poster iframe.on { opacity: 1; }
.live-scenes { padding: clamp(64px, 9vw, 110px) 0; background: linear-gradient(180deg, #eef6ff, #fdf2f8); border-block: 2px solid var(--ink); }
.live-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 24px; justify-items: center; }
.live-grid .live-phone { --w: 260px; --s: .6154; }
.live-card .ex-caption { width: 260px; flex-direction: column; align-items: flex-start; gap: 10px; }
.live-card .ex-who small { white-space: normal; overflow: visible; }
@media (max-width: 1180px) { .live-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) {
    .live-grid { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 16px 18px; margin: 0 -16px; justify-content: flex-start; }
    .live-grid .live-card { flex: none; scroll-snap-align: center; }
    .live-grid .live-phone { --w: 240px; --s: .5641; }
    .live-card .ex-caption { width: 240px; }
}

/* Try every theme: the phone stays in view while you browse the themes */
.try-themes { padding: clamp(64px, 9vw, 110px) 0; }
.try-wrap { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.try-phone-col { position: sticky; top: 96px; display: grid; justify-items: center; gap: 12px; }
.try-phone-col .live-phone { --w: 320px; --s: .7692; }
.try-start { margin-top: 6px; }
.try-start .icon { width: 18px; height: 18px; }
.try-note { margin: 0; color: var(--muted); font-size: .88rem; text-align: center; max-width: 300px; }
.try-more-art { height: 104px; display: grid; place-content: center; justify-items: center; gap: 2px; border-radius: 12px; border: 2px dashed var(--ink); background: repeating-linear-gradient(135deg, #f3edff 0 10px, #fbf8ff 10px 20px); }
.try-more-art b { font: 800 1.7rem/1 var(--display); color: var(--violet); }
.try-more-art span { font-size: .78rem; font-weight: 700; color: var(--ink); }
.try-head { margin-bottom: 26px; }
.try-head .section-title { margin-top: 8px; }
.try-head p { color: var(--muted); font-size: 1.08rem; max-width: 560px; }
.try-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 12px; }
.try-card { display: grid; gap: 8px; padding: 8px; border: 2px solid transparent; border-radius: 16px; color: var(--ink); text-decoration: none; transition: transform .15s ease, border-color .15s ease; }
.try-card .tp { height: 104px; border-radius: 12px; }
.try-card:hover { transform: translateY(-3px); border-color: var(--ink); }
.try-card[aria-current="true"] { border-color: var(--violet); background: #f5f0ff; box-shadow: 4px 4px 0 var(--violet); }
.try-label { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 6px; font-weight: 700; font-size: .9rem; line-height: 1.2; text-align: center; }
.try-label .chip-pro { font-size: .62rem; }
@media (max-width: 860px) {
    .try-wrap { grid-template-columns: 1fr; gap: 20px; }
    /* on phones the page sits at the top, smaller, and the themes scroll under it */
    .try-phone-col { top: 64px; z-index: 2; padding: 10px 0 12px; background: var(--bg, #fff8ef); }
    .try-phone-col .live-phone { --w: 140px; --b: 6px; --s: .3282; border-width: 6px; border-radius: 26px; box-shadow: 0 18px 40px -12px rgba(21, 18, 31, .28); }
    .try-start { padding: 8px 14px; font-size: .9rem; }
    .try-note { display: none; }
    .try-more-art { height: 84px; }
    .try-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
    .try-card .tp { height: 84px; }
}

/* Trophy themes: mysteries */
.secret-themes { padding: clamp(64px, 9vw, 110px) 0; background: #15121f; color: #fff; }
.secret-themes .section-head p { color: #c9c4d6; }
.secret-themes .kicker { color: #c4b5fd; }
.secret-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; max-width: 900px; margin: 0 auto; }
.secret-card { display: grid; justify-items: center; gap: 2px; padding: 22px 10px 18px; border: 2px dashed #6d5bd0; border-radius: 18px; background: repeating-linear-gradient(-45deg, #1e1838 0 12px, #241c46 12px 24px); }
.secret-q { font: 800 2.6rem/1 var(--display); color: #a78bfa; animation: secret-wobble 3s ease-in-out infinite; }
.secret-card b { font: 800 1.4rem/1.1 var(--display); margin-top: 8px; }
.secret-card small { color: #a9a3bd; }
.secret-cta { text-align: center; margin-top: 34px; }
@keyframes secret-wobble { 0%, 100% { rotate: -6deg; } 50% { rotate: 6deg; } }
@media (max-width: 760px) { .secret-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .secret-q { animation: none; } }
/* "See Link.bio in Spanish?" (main.js): offered once to visitors whose browser prefers another language */
/* The one-time "See Link.bio in English?" offer (main.js): one line on computers; on phones a small card with the
   question on top and both buttons side by side under it (they never split). */
.lang-ask { position: fixed; z-index: 60; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); display: flex; align-items: center; gap: 14px; width: max-content; max-width: calc(100% - 32px); padding: 10px 10px 10px 20px; border: 2px solid var(--ink); border-radius: 999px; background: #fff; box-shadow: 4px 4px 0 var(--ink); font-weight: 700; animation: lang-ask-in .35s ease both; }
.lang-ask-btns { display: flex; gap: 8px; flex: none; }
.lang-ask-btns .btn { margin: 0; }
@keyframes lang-ask-in { from { opacity: 0; translate: 0 12px; } }
.lang-ask.out { opacity: 0; translate: 0 12px; transition: opacity .25s ease, translate .25s ease; }
@media (max-width: 560px) {
    .lang-ask { flex-direction: column; align-items: stretch; gap: 12px; width: calc(100% - 32px); padding: 16px; border-radius: 22px; text-align: center; }
    .lang-ask-btns .btn { flex: 1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .lang-ask { animation: none; } }
.legal-note { margin: 0 0 18px; padding: 10px 14px; border-radius: 12px; background: #fef9c3; font-weight: 600; }

/* Account pages (page_start(focused: true)): logo-only header, the card alone in the middle of the screen, a thin footer */
.nav-focused .nav-inner { justify-content: flex-start; }
.auth-focus { padding-bottom: clamp(40px, 6vw, 64px); }
.footer-thin { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 18px; padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px)); font-size: .85rem; font-weight: 600; color: var(--muted); }
.footer-thin a { color: var(--muted); }
.footer-thin a:hover { color: var(--violet); }
.footer-thin .footer-langs { font-weight: 600; }
@media (min-width: 1000px) {
    .auth-focus { display: grid; align-content: center; min-height: calc(100vh - 76px - 58px); padding-block: 48px; }
    .footer-thin { border-top: 2px solid var(--ink); }
}

/* ---------- /for/musicians: its own design (landing_for_musicians() in includes/landing_pages.php) ---------- */
.mu-pro { display: inline-block; margin-left: 6px; padding: 2px 8px; border: 2px solid var(--ink); border-radius: 99px; background: var(--sun); color: var(--ink); font: 800 .7rem/1.2 var(--body); letter-spacing: .04em; text-transform: none; vertical-align: middle; }
.page-top.mu-hero {
    position: relative; overflow: hidden; color: #fff; padding-bottom: clamp(64px, 8vw, 110px); border-bottom: 2px solid var(--ink);
    background: linear-gradient(100deg, rgba(13, 9, 24, .96) 30%, rgba(13, 9, 24, .55)), radial-gradient(60% 60% at 80% 30%, rgba(236, 72, 153, .35), transparent), var(--photo) center / cover, #0d0918;
}
.mu-beams { position: absolute; inset: 0; pointer-events: none; }
.mu-beams span { position: absolute; top: -20%; width: 32%; height: 140%; background: linear-gradient(180deg, rgba(196, 181, 253, .28), transparent 75%); filter: blur(18px); transform-origin: 50% 0; animation: mu-sweep 9s ease-in-out infinite alternate; }
.mu-beams span:nth-child(1) { left: 48%; rotate: 18deg; }
.mu-beams span:nth-child(2) { left: 66%; rotate: -12deg; animation-delay: -3s; background: linear-gradient(180deg, rgba(244, 114, 182, .3), transparent 75%); }
.mu-beams span:nth-child(3) { left: 84%; rotate: 8deg; animation-delay: -6s; }
@keyframes mu-sweep { to { transform: rotate(-14deg); } }
.mu-hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.mu-hero .crumbs { color: rgba(255, 255, 255, .6); }
.mu-hero .crumbs a { color: #d8b4fe; }
.mu-hero .section-title { margin-top: 12px; color: #fff; }
.mu-hl { background: linear-gradient(90deg, #f472b6, var(--sun)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mu-lead { color: rgba(255, 255, 255, .8); font-size: 1.15rem; margin-bottom: 26px; max-width: 34em; }
.mu-small { margin-top: 14px; color: rgba(255, 255, 255, .65); font-size: .92rem; font-weight: 600; }
.mu-hero .claim { color: var(--ink); box-shadow: 8px 8px 0 var(--violet); }
.mu-stage { position: relative; display: grid; justify-items: center; padding: 20px 0; }
.mu-stage .live-phone { z-index: 2; rotate: 3deg; box-shadow: 10px 10px 0 var(--pink); }
.mu-vinyl { position: absolute; z-index: 1; top: 6%; left: 50%; width: 300px; aspect-ratio: 1; border-radius: 50%; translate: 18% 0;
    background: repeating-radial-gradient(circle, #15121f 0 2px, #241f33 2px 4px); border: 2px solid var(--ink); box-shadow: 0 20px 50px rgba(0, 0, 0, .5); animation: mu-spin 6s linear infinite; }
.mu-vinyl::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 30deg, transparent, rgba(255, 255, 255, .14) 8%, transparent 16%, transparent 50%, rgba(255, 255, 255, .1) 58%, transparent 66%); }
.mu-vinyl span { position: absolute; inset: 33%; border-radius: 50%; background: center / cover; border: 3px solid #0d0918; }
.mu-vinyl span::after { content: ""; position: absolute; inset: 44%; border-radius: 50%; background: #0d0918; }
@keyframes mu-spin { to { rotate: 360deg; } }
.mu-ticket { position: absolute; z-index: 3; left: -2%; bottom: 3%; display: grid; gap: 2px; padding: 14px 22px 14px 18px; rotate: -7deg; color: var(--ink);
    background: var(--sun); border: 2px solid var(--ink); border-radius: 12px; box-shadow: var(--shadow);
    -webkit-mask: radial-gradient(circle 9px at 100% 50%, transparent 98%, #000) ; mask: radial-gradient(circle 9px at 100% 50%, transparent 98%, #000); }
.mu-ticket small { font-weight: 800; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.mu-ticket b { font: 800 1.1rem/1.1 var(--display); }
.mu-ticket span { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .85rem; }
.mu-ticket .i { width: 14px; height: 14px; }
.mu-float span { position: absolute; z-index: 3; display: grid; place-items: center; width: 52px; height: 52px; border: 2px solid var(--ink); border-radius: 16px; background: #fff; color: var(--ink); box-shadow: var(--shadow);
    animation: mu-bob 4s ease-in-out infinite; animation-delay: calc(var(--i) * -1s); }
.mu-float span:nth-child(1) { top: 4%; left: 8%; rotate: -8deg; }
.mu-float span:nth-child(2) { top: 40%; left: 0; rotate: 6deg; }
.mu-float span:nth-child(3) { top: 58%; right: 2%; rotate: -5deg; }
.mu-float span:nth-child(4) { bottom: 2%; right: 18%; rotate: 9deg; }
.mu-float .pi { width: 26px; height: 26px; }
@keyframes mu-bob { 50% { transform: translateY(-10px); } }

.mu-strip { padding: 22px 0 26px; background: var(--ink); color: #fff; overflow: hidden; border-bottom: 2px solid var(--ink); }
.mu-strip p { margin: 0 0 14px; text-align: center; font-weight: 700; font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.mu-marquee > div { display: flex; gap: 14px; width: max-content; animation: mu-marquee 40s linear infinite; }
.mu-marquee span { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border: 2px solid rgba(255, 255, 255, .25); border-radius: 99px; font-weight: 700; white-space: nowrap; }
.mu-marquee .pi { width: 22px; height: 22px; }
@keyframes mu-marquee { to { transform: translateX(calc(-50% - 7px)); } }

.mu-week { padding: var(--section-pad) 0; background: linear-gradient(180deg, #f3eeff, #fff8ef); border-bottom: 2px solid var(--ink); }
.mu-week-list { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; justify-items: center; }
.mu-week-list::before { content: ""; position: absolute; top: 19px; left: 16%; right: 16%; border-top: 3px dashed var(--violet); }
.mu-week-list li { position: relative; display: grid; justify-items: center; align-content: start; gap: 18px; text-align: center; }
.mu-day { position: relative; padding: 8px 18px; border: 2px solid var(--ink); border-radius: 99px; background: var(--ink); color: #fff; font-weight: 800; box-shadow: 4px 4px 0 var(--violet); }
.mu-week-list li:nth-child(2) .mu-day { background: var(--violet); box-shadow: var(--shadow); }
.mu-week-list li:nth-child(3) .mu-day { background: var(--pink); box-shadow: var(--shadow); }
.mu-week-list .live-phone { --w: 260px; --s: .6154; }
.mu-week-list li:nth-child(2) .live-phone { translate: 0 -10px; box-shadow: 10px 10px 0 var(--pink); }
.mu-week-list p { margin: 0; max-width: 250px; font-weight: 600; color: var(--muted); }

.mu-rows { padding: var(--section-pad) 0; }
.mu-rows .wrap { display: grid; gap: clamp(56px, 8vw, 110px); }
.mu-row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.mu-row.mu-flip .mu-photo { order: 2; }
.mu-photo { position: relative; aspect-ratio: 4 / 3; border: 2px solid var(--ink); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); background: var(--photo) center / cover, var(--ink); }
.mu-copy .section-title { font-size: clamp(2rem, 4vw, 3rem); }
.mu-copy p { color: var(--muted); font-size: 1.12rem; }
.mu-player { position: absolute; left: 6%; right: 6%; bottom: -26px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 14px; color: #fff;
    background: rgba(21, 18, 31, .82); backdrop-filter: blur(12px); border: 2px solid var(--ink); border-radius: 20px; box-shadow: var(--shadow-lg); }
.mu-player img { width: 64px; height: 64px; border-radius: 10px; }
.mu-player b { display: block; font: 800 1.1rem/1.1 var(--display); }
.mu-player small { color: rgba(255, 255, 255, .65); font-weight: 600; }
.mu-wave { display: flex; align-items: center; gap: 3px; height: 26px; margin-top: 6px; }
.mu-wave i { flex: 1; height: var(--h); border-radius: 2px; background: rgba(255, 255, 255, .35); }
.mu-wave i:nth-child(-n+11) { background: #f472b6; }
.mu-play { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--violet); border: 2px solid #fff; }
.mu-play svg { width: 24px; height: 24px; margin-left: 3px; }
.mu-stubs { position: absolute; right: 0; bottom: -30px; display: grid; }
.mu-stub { grid-area: 1 / 1; display: grid; gap: 1px; width: 200px; padding: 12px 16px; color: var(--ink); background: #fff; border: 2px solid var(--ink); border-radius: 12px; box-shadow: var(--shadow);
    rotate: calc(-10deg + var(--i) * 8deg); translate: calc(var(--i) * -70px) calc(var(--i) * -40px); }
.mu-stub:nth-child(1) { z-index: 3; background: var(--sun); }
.mu-stub:nth-child(2) { z-index: 2; background: var(--lime); }
.mu-stub:nth-child(3) { z-index: 1; }
.mu-stub small { font-weight: 800; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.mu-stub b { font: 800 1.3rem/1.05 var(--display); }
.mu-stub span { font-weight: 600; font-size: .9rem; }
.mu-stub em { justify-self: start; margin-top: 6px; padding: 2px 10px; border: 2px solid var(--ink); border-radius: 99px; font: 700 .75rem/1.4 var(--body); font-style: normal; background: #fff; }
.mu-stats { position: absolute; left: -18px; bottom: -30px; width: min(300px, 80%); display: grid; gap: 10px; padding: 16px 18px; background: #fff; border: 2px solid var(--ink); border-radius: 18px; box-shadow: var(--shadow-lg); }
.mu-stats > b { font: 800 1.05rem/1.1 var(--display); }
.mu-bar { display: grid; grid-template-columns: 22px 92px minmax(0, 1fr); gap: 8px; align-items: center; font-size: .85rem; font-weight: 600; }
.mu-bar i { font-style: normal; }
.mu-bar em { font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mu-bar span { height: 10px; border-radius: 99px; background: linear-gradient(90deg, var(--violet) var(--w), #ede9fe var(--w)); }

.mu-bento-wrap { padding: var(--section-pad) 0; background: color-mix(in srgb, var(--pink) 8%, var(--bg)); border-block: 2px solid var(--ink); }
.mu-bento { display: grid; grid-template-columns: 1.2fr 1fr 1fr; grid-auto-rows: minmax(260px, auto); gap: 22px; }
.mu-tile { position: relative; display: flex; align-items: flex-end; overflow: hidden; padding: 24px; color: #fff; border: 2px solid var(--ink); border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
    background: linear-gradient(180deg, rgba(13, 9, 24, .1) 20%, rgba(13, 9, 24, .94) 82%), var(--photo) center / cover, var(--ink); }
.mu-tile-big { grid-row: span 2; }
.mu-tile h3 { margin: 0 0 6px; font: 800 1.45rem/1.1 var(--display); letter-spacing: -.02em; }
.mu-tile p { margin: 0; color: rgba(255, 255, 255, .82); }
.mu-tile-qr { grid-column: span 2; }
.mu-qr { position: absolute; top: 22px; right: 22px; width: 120px; height: 120px; padding: 8px; background: #fff; border: 2px solid var(--ink); border-radius: 16px; box-shadow: var(--shadow); rotate: 4deg; }
.mu-tile-plain { background: var(--violet); }
.mu-tile-plain { flex-direction: column; align-items: stretch; justify-content: space-between; gap: 20px; }
.mu-style { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.mu-style b { display: grid; place-items: center; width: 54px; height: 54px; border: 2px solid var(--ink); border-radius: 14px; background: #fff; color: var(--ink); font: 800 1.35rem/1 var(--display); box-shadow: 3px 3px 0 var(--ink); }
.mu-style .mu-style-serif { font: italic 700 1.4rem/1 Georgia, serif; }
.mu-style i { width: 34px; height: 34px; border-radius: 50%; background: var(--c); border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); }
.mu-names { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; padding: 0; }
.mu-names li { padding: 3px 10px; border-radius: 99px; background: rgba(255, 255, 255, .16); font-size: .8rem; font-weight: 700; }

.mu-setlist { padding: var(--section-pad) 0; }
.mu-sleeve { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 64px); padding: clamp(28px, 5vw, 56px); color: #fff; background: radial-gradient(70% 90% at 0% 0%, rgba(124, 58, 237, .45), transparent), var(--ink); border: 2px solid var(--ink); border-radius: var(--r-lg); box-shadow: 10px 10px 0 var(--violet); }
.mu-sleeve .kicker { color: var(--sun); }
.mu-sleeve-head p { color: rgba(255, 255, 255, .72); font-size: 1.08rem; }
.mu-tracks { list-style: none; margin: 0; padding: 0; display: grid; }
.mu-tracks li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-bottom: 1px dashed rgba(255, 255, 255, .22); }
.mu-tracks li:last-child { border-bottom: 0; }
.mu-no { font: 800 1.1rem/1.4 ui-monospace, "SFMono-Regular", Menlo, monospace; color: var(--sun); }
.mu-tracks b { display: block; font: 800 1.15rem/1.3 var(--display); }
.mu-tracks span:not(.mu-no) { color: rgba(255, 255, 255, .7); }
.mu-looks { background: linear-gradient(180deg, #fdf2f8, #f3eeff); }

@media (max-width: 1100px) {
    .mu-bento { grid-template-columns: 1fr 1fr; }
    .mu-tile-big { grid-row: auto; grid-column: span 2; min-height: 320px; }
}
@media (max-width: 960px) {
    .mu-hero-grid, .mu-row, .mu-sleeve { grid-template-columns: minmax(0, 1fr); }
    .mu-row.mu-flip .mu-photo { order: 0; }
    .mu-row .mu-photo { margin-bottom: 30px; }
    .mu-stubs { right: 12px; } .mu-stats { left: -4px; }
    .mu-stage { margin-top: 10px; }
    .mu-week-list { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 22px; padding: 4px 16px 18px; margin: 0 -16px; justify-items: initial; }
    .mu-week-list::before { display: none; }
    .mu-week-list li { flex: none; scroll-snap-align: center; }
    .mu-week-list .live-phone { --w: 240px; --s: .5641; }
}
@media (max-width: 620px) {
    .mu-vinyl { width: 220px; translate: 12% 0; }
    .mu-float span:nth-child(2), .mu-float span:nth-child(3) { display: none; }
    .mu-ticket { left: 0; bottom: 6%; padding: 10px 18px 10px 14px; }
    .mu-bento { grid-template-columns: minmax(0, 1fr); }
    .mu-tile-big, .mu-tile-qr { grid-column: auto; }
    .mu-tile { min-height: 260px; }
    .mu-qr { width: 92px; height: 92px; }
    .mu-stubs { right: -6px; } .mu-stub { width: 160px; translate: calc(var(--i) * -48px) calc(var(--i) * -34px); }
    .mu-stats { left: -6px; }
    .mu-player { left: 4%; right: 4%; gap: 10px; } .mu-player img { width: 52px; height: 52px; } .mu-play { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
    .mu-beams span, .mu-vinyl, .mu-float span, .mu-marquee > div { animation: none; }
    .mu-marquee > div { flex-wrap: wrap; justify-content: center; width: auto; padding: 0 16px; }
    .mu-marquee span:nth-child(n+13) { display: none; }
}
.idea-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-weight: 700; color: var(--violet); text-decoration: underline; text-underline-offset: 3px; }
.idea-more svg { width: 16px; height: 16px; }
.tile-players p a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.mu-cta { display: grid; justify-items: center; gap: 10px; margin-top: 44px; text-align: center; }
.mu-cta .btn .i { width: 18px; height: 18px; }
.mu-cta small { color: var(--muted); font-weight: 600; }

/* Example phones with a Hero or Banner header (EXAMPLE_PAGES' 10th entry): the photo runs under the status bar, like the real layouts in header_css(). */
.pm-top-photo .pm-status { position: absolute; inset: 0 0 auto; z-index: 2; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
.pm-hero { width: calc(100% + 36px); margin: -26px -18px 0; aspect-ratio: 1; flex: none; -webkit-mask-image: linear-gradient(#000 55%, transparent 97%); mask-image: linear-gradient(#000 55%, transparent 97%); }
.pm-hero + .pm-name { position: relative; margin-top: -58px; }
.pm-banner { width: calc(100% + 36px); height: 128px; margin: -26px -18px 0; flex: none; }
.pm-banner + .pm-avatar { position: relative; margin-top: -54px; }
/* An example's phone opens its full page (/examples?sample=…); the live phones' frames let the click through. */
.ex-open { display: block; width: 100%; color: inherit; text-decoration: none; border-radius: 46px; }
.ex-open:focus-visible { outline: 3px solid var(--violet); outline-offset: 6px; }
.ex-open .live-phone iframe { pointer-events: none; }
.gallery-grid .ex-open { display: flex; justify-content: center; }

/* One example's own page (/examples/<slug>, example_detail_page() in sections.php). */
.exd-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.exd-why, .exd-more { padding: clamp(48px, 7vw, 88px) 0; }
@media (min-width: 900px) { .gallery-grid.exd-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 900px; margin-inline: auto; } }
.exd-kicker { display: block; margin-bottom: 10px; }
@media (max-width: 760px) { .exd-grid .ex-card:nth-child(3) { display: none; } }   /* two to a row on phones: no lone third */

/* /examples on phones: Ideas become a row that scrolls sideways and Tips one compact numbered list, so the end of
   the page is about one screen each instead of three. */
@media (max-width: 620px) {
    .ideas .features { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; margin-inline: -16px; padding: 6px 16px 14px; scrollbar-width: none; }
    .ideas .features::-webkit-scrollbar { display: none; }
    .ideas .card { flex: 0 0 80%; scroll-snap-align: center; }
    .tips { gap: 0; padding: 4px 18px; background: var(--card); border: 2px solid var(--ink); border-radius: var(--r-lg); box-shadow: var(--shadow); }
    .tips li { padding: 16px 0 16px 50px; background: none; border: 0; border-radius: 0; box-shadow: none; }
    .tips li + li { border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); }
    .tips li::before { top: 16px; left: 0; width: 34px; height: 34px; font-size: 1rem; }
    .tips h3 { margin-top: 4px; font-size: 1.05rem; }
}
@media (min-width: 900px) { .live-grid.exd-live { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 900px; margin-inline: auto; } }
/* Rows that scroll sideways on phones move only sideways: without this a few pixels of shadow made iPhone let them
   move up and down too (owner's report 2026-10-27). Dragging up or down still scrolls the page. */
@media (max-width: 620px) { .live-grid, .ideas .features { overflow-y: hidden; overscroll-behavior-x: contain; } }   /* only where they scroll sideways: on computers they're grids and must not clip the buttons' shadows */
@media (max-width: 960px) { .live-grid.lp-live-grid { overflow-y: hidden; overscroll-behavior-x: contain; } }
/* Sideways rows reach the screen's edges: .wrap leaves 20px each side, so they stretch by the same 20px. */
@media (max-width: 960px) { .live-grid.lp-live-grid { margin-inline: -20px; padding-inline: 20px; } }
@media (max-width: 620px) { .live-grid, .ideas .features { margin-inline: -20px; padding-inline: 20px; } }

/* /link-in-bio guide: last-updated line, a row of app chips to jump to a guide, two guides per row with a note. */
.lib-updated { margin: -14px 0 22px; color: var(--muted); font-size: .9rem; font-weight: 600; }
.guide-jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: -8px 0 30px; }
.guide-jump a { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border: 2px solid var(--ink); border-radius: 99px; background: #fff; color: var(--ink); font-weight: 700; font-size: .9rem; }
.guide-jump a:hover { background: var(--ink); color: #fff; }
.guide-jump svg { width: 16px; height: 16px; }
.guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.guide-note { margin: 14px 0 0; padding-top: 12px; border-top: 1px dashed color-mix(in srgb, var(--ink) 25%, transparent); color: var(--muted); font-size: .92rem; }
@media (max-width: 760px) { .guide-grid { grid-template-columns: minmax(0, 1fr); } }
/* /for/musicians' release week and the home page's examples: same as the rows above (edge to edge, sideways only). */
@media (max-width: 960px) { .mu-week-list { margin-inline: -20px; padding-inline: 20px; overflow-y: hidden; overscroll-behavior-x: contain; } }
.examples { overscroll-behavior-x: contain; }
@media (max-width: 760px) { .examples { overflow-y: hidden; } }

/* /link-in-bio: byline, "On this page" links, examples, the theme taste's last tile. */
#what-title, #include-title, #lib-examples-title, #steps-title, #guides-title, #lib-faq-title { scroll-margin-top: 110px; }
.lib-toc { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0 0 26px; font-size: .92rem; }
.lib-toc b { color: var(--ink); }
.lib-toc a { color: var(--violet); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.lib-examples { padding: clamp(56px, 8vw, 96px) 0; }
.lib-examples .lib-more { margin-top: 30px; text-align: center; }
.swatch-more { display: grid; place-items: center; background: var(--ink); color: #fff; font-weight: 800; font-size: .85rem; }

/* /how-it-works: the link to the app guides under step 4, a button after "Done", the getting-started FAQ. */
.run-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-weight: 700; color: var(--violet); text-decoration: underline; text-underline-offset: 3px; }
.run-more svg { width: 16px; height: 16px; }
.run-cta { margin-top: 18px; text-align: center; }
.hiw-faq { padding: clamp(56px, 8vw, 96px) 0 0; }

/* /how-it-works: the real editor (screenshots made with a throwaway zztest account), Content / Design tabs without JS. */
.hiw-editor { padding: clamp(56px, 8vw, 100px) 0; }
.ed-tabs { display: grid; justify-items: center; }
.ed-tabs label { grid-row: 1; display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border: 2px solid var(--ink); background: var(--card); font-weight: 700; cursor: pointer; }
.ed-tabs label svg { width: 18px; height: 18px; }
.ed-tabs label { border-radius: 99px; }
.ed-tabs label[for="ed-watch"] { justify-self: end; margin-right: 4px; }
.ed-tabs label[for="ed-design"] { justify-self: start; margin-left: 4px; }
.ed-tabs { grid-template-columns: 1fr auto 1fr; column-gap: 4px; row-gap: 26px; }
.ed-tabs input:checked + label { background: var(--ink); color: #fff; }
.ed-tabs input:focus-visible + label { outline: 3px solid var(--violet); outline-offset: 3px; }
.ed-shot { grid-column: 1 / -1; grid-row: 2; margin: 0; width: 100%; max-width: 1100px; border: 2px solid var(--ink); border-radius: 18px; overflow: hidden; background: var(--card); box-shadow: 0 30px 60px -24px rgba(21, 18, 31, .35); }
.ed-shot img { display: block; width: 100%; height: auto; }
.ed-tabs:has(#ed-watch:checked) .ed-shot:not(.ed-watch), .ed-tabs:has(#ed-content:checked) .ed-shot:not(.ed-content), .ed-tabs:has(#ed-design:checked) .ed-shot:not(.ed-design) { visibility: hidden; }
.ed-shot video { display: block; width: 100%; height: auto; aspect-ratio: 1280 / 800; background: var(--bg); }
@media (max-width: 760px) { .ed-shot video { aspect-ratio: 390 / 844; } .ed-tabs label { padding: 9px 14px; gap: 6px; } }
@media (max-width: 760px) {
    .ed-shot { max-width: 300px; border: 10px solid var(--ink); border-radius: 40px; }
}

/* Home: Build my page with AI (section_ai()) */
.ai-home { background: linear-gradient(180deg, var(--bg), #f3ecff 55%, var(--bg)); }
.ai-home .kicker { display: inline-flex; align-items: center; gap: 6px; }
.ai-home .kicker .i { width: 16px; height: 16px; }
.ai-demo { display: grid; grid-template-columns: minmax(0, 1.05fr) auto minmax(0, 1fr); align-items: center; gap: 22px; margin-top: 8px; }
.ai-step { display: inline-block; margin: 0 0 12px 4px; font: 800 .78rem/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.ai-box { position: relative; padding: 22px 22px 78px; background: var(--card); border: 2px solid var(--ink); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); }
.ai-box > p { font-size: 1.08rem; color: var(--ink); }
.ai-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.ai-chips li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: #f3ecff; color: var(--violet); font: 600 .9rem/1.2 var(--body); }
.ai-chips .i, .ai-chips .pi { width: 16px; height: 16px; }
.ai-go { position: absolute; right: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 6px; padding: 11px 16px; border-radius: 999px; border: 2px solid var(--ink);
    background: var(--violet); color: #fff; font: 700 .92rem/1 var(--body); box-shadow: 3px 3px 0 var(--ink); }
.ai-go .i { width: 16px; height: 16px; }
.ai-arrow { display: grid; justify-items: center; gap: 8px; color: var(--violet); }
.ai-arrow span { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 999px; background: var(--sun); color: var(--ink); border: 2px solid var(--ink);
    font: 800 .82rem/1 var(--body); white-space: nowrap; rotate: -3deg; }
.ai-arrow span .i { width: 15px; height: 15px; }
.ai-arrow > .i { width: 40px; height: 40px; stroke-width: 2.5; }
.ai-gets { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.ai-gets li { display: flex; align-items: center; gap: 14px; padding: 14px 18px; background: var(--card); border: 2px solid var(--ink); border-radius: var(--r-md); box-shadow: var(--shadow); }
.ai-gets li > .i { flex: none; width: 30px; height: 30px; padding: 6px; border-radius: 50%; background: var(--lime); border: 2px solid var(--ink); stroke-width: 3; }
.ai-gets li span { color: var(--muted); line-height: 1.35; }
.ai-gets b { display: block; color: var(--ink); font-size: 1.04rem; }
.ai-cta { display: grid; justify-items: center; gap: 12px; margin-top: 40px; text-align: center; }
.ai-cta p { color: var(--muted); font-size: .95rem; }
@media (max-width: 860px) {
    .ai-demo { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .ai-arrow > .i { rotate: 90deg; width: 32px; height: 32px; }
}

/* Features: the AI builder tile, first and full width */
.tile-ai { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 32px;
    background: linear-gradient(135deg, #f3ecff, color-mix(in srgb, var(--pink) 10%, #fff)); }
.tile-ai .tile-text { display: grid; gap: 12px; justify-items: start; }
.tile-ai .kicker { display: inline-flex; align-items: center; gap: 6px; } .tile-ai .kicker .i { width: 16px; height: 16px; }
.tile-ai h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin: 0; }
.tile-ai .tai-fine { font-size: .92rem; }
.tai-vis { display: grid; gap: 14px; }
.tai-vis .ai-box { padding-bottom: 70px; }
.tai-vis .ai-gets { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tai-vis .ai-gets li { padding: 10px 12px; gap: 10px; }
.tai-vis .ai-gets li > .i { width: 26px; height: 26px; padding: 5px; }
.tai-vis .ai-gets b { font-size: .95rem; }
@media (max-width: 960px) { .tile-ai { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .tai-vis .ai-gets { grid-template-columns: minmax(0, 1fr); } }
/* How it works: the AI shortcut under "Add your links" */
.run-ai { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding: 10px 14px; border: 2px solid var(--ink); border-radius: var(--r-md); background: #f3ecff; color: var(--ink); font-size: .95rem; }
.run-ai .i { flex: none; width: 18px; height: 18px; margin-top: 3px; color: var(--violet); }
/* full-width buttons wrap a long label (Portuguese "Comece grátis, faça upgrade quando quiser" ran off phones) */
.btn-block { white-space: normal; text-align: center; line-height: 1.25; }

/* /ai-link-in-bio-generator (landing_ai()) */
.aip-video { justify-self: center; display: grid; justify-items: center; gap: 14px; margin: 0; }
.aip-video video { display: block; width: min(330px, 78vw); aspect-ratio: 9 / 16; object-fit: cover; border: 2px solid var(--ink); border-radius: 28px; box-shadow: 10px 10px 0 var(--violet), 10px 10px 0 2px var(--ink); background: #f3ecff; }
.aip-video figcaption { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; background: var(--sun); color: var(--ink); border: 2px solid var(--ink); font: 800 .85rem/1.2 var(--body); rotate: -2deg; }
.aip-video figcaption .i { width: 16px; height: 16px; }
.aip-read-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.aip-read { display: flex; gap: 14px; align-items: flex-start; padding: 18px; background: var(--card); border: 2px solid var(--ink); border-radius: var(--r-md); box-shadow: var(--shadow); }
.aip-read > div { display: grid; gap: 4px; } .aip-read b { font: 800 1.05rem/1.2 var(--display); } .aip-read span:not(.aip-ico) { color: var(--muted); font-size: .92rem; line-height: 1.4; }
.aip-ico { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; border: 2px solid var(--ink); background: #f3ecff; color: var(--violet); }
.aip-ico .pi, .aip-ico .i { width: 22px; height: 22px; }
.aip-note { margin-top: 26px; text-align: center; color: var(--muted); }
@media (max-width: 960px) { .aip-read-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {   /* phones: two across, icon over the words, so the 8 cards take 4 rows */
    .aip-read-grid { gap: 12px; }
    .aip-read { flex-direction: column; gap: 10px; padding: 14px; }
    .aip-read b { font-size: .98rem; } .aip-read span:not(.aip-ico) { font-size: .84rem; }
    .aip-ico { width: 36px; height: 36px; border-radius: 10px; } .aip-ico .pi, .aip-ico .i { width: 19px; height: 19px; }
}
/* the page's own sections sit closer together than the site's default (it has many) */
.aip-examples, .aip-reads, .aip-gets { padding-block: clamp(56px, 7vw, 92px); }
/* "What you get" on phones: two across, smaller cards (6 cards in 3 rows) */
@media (max-width: 620px) {
    .aip-gets .features { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .aip-gets .card { padding: 16px 14px; }
    .aip-gets .card-icon { width: 40px; height: 40px; margin-bottom: 12px; } .aip-gets .card-icon .i { width: 20px; height: 20px; }
    .aip-gets .card h3 { font-size: 1rem; margin-bottom: 6px; } .aip-gets .card p { font-size: .84rem; line-height: 1.45; }
}
/* the hero's lead: a shorter one on phones, so the box and its button are on the first screen */
.aip-short { display: none; }
@media (max-width: 560px) { .aip-long { display: none; } .aip-short { display: inline; } }
/* /for/musicians: the AI builder tile, full width at the top of the grid */
.mu-tile-ai { grid-column: 1 / -1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: 28px;
    background: radial-gradient(80% 120% at 0% 0%, rgba(124, 58, 237, .55), transparent 60%), radial-gradient(60% 90% at 100% 100%, rgba(236, 72, 153, .35), transparent 60%), var(--ink); }
.mu-ai-in { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.mu-ai-in span { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .25); font: 600 .95rem/1.2 var(--body); }
.mu-ai-in .pi { width: 18px; height: 18px; }
.mu-ai-in b { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 999px; background: var(--violet); color: #fff; border: 2px solid #fff; font: 800 .95rem/1 var(--body); box-shadow: 3px 3px 0 var(--sun); }
.mu-ai-in b .i { width: 16px; height: 16px; }
@media (max-width: 960px) { .mu-tile-ai { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 620px) { .mu-tile-ai { grid-column: auto; } }
.lp-steps.lp-two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 780px; margin-inline: auto; }
@media (max-width: 620px) { .lp-steps.lp-two { grid-template-columns: minmax(0, 1fr); } }

/* ---------- /ai-link-in-bio-generator: try it before signing up (assets/js/ai-try.js, app/lib/ai_try.php) ---------- */
.page-top.aip-hero { position: relative; overflow: hidden; overflow: clip; color: #fff; background: radial-gradient(120% 90% at 10% 0%, #241552 0%, #110b26 55%, #0b0819 100%); border-bottom: 2px solid var(--ink); padding-bottom: clamp(64px, 8vw, 110px); }
.aip-aurora { position: absolute; inset: 0; pointer-events: none; filter: blur(60px); opacity: .75; }
.aip-aurora i { position: absolute; width: 46vmax; height: 46vmax; border-radius: 50%; mix-blend-mode: screen; animation: aip-drift 16s ease-in-out infinite alternate; }
.aip-aurora i:nth-child(1) { left: -12%; top: -30%; background: radial-gradient(closest-side, rgba(124, 58, 237, .85), transparent); }
.aip-aurora i:nth-child(2) { right: -14%; top: -10%; background: radial-gradient(closest-side, rgba(236, 72, 153, .55), transparent); animation-delay: -5s; animation-duration: 19s; }
.aip-aurora i:nth-child(3) { left: 30%; bottom: -45%; background: radial-gradient(closest-side, rgba(56, 189, 248, .45), transparent); animation-delay: -9s; animation-duration: 22s; }
@keyframes aip-drift { 50% { transform: translate(6%, 8%) scale(1.08); } 100% { transform: translate(-6%, 3%) scale(.95); } }
.aip-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(40px, 6vw, 72px); justify-items: center; }
/* centred, like an AI tool: the title, then a wide prompt box across the page (owner, 2026-11-01), the phone below */
.aip-copy { display: grid; justify-items: center; width: 100%; text-align: center; }
.aip-copy .crumbs { justify-content: center; }
.aip-copy .section-title { max-width: 15em; }
.aip-copy .lib-lead { max-width: 40em; margin-inline: auto; }
.aip-try { width: min(100%, 880px); text-align: left; }
.aip-try .aip-chips { justify-content: center; }
.aip-copy .aip-stats { justify-content: center; }
.aip-hero .crumbs { color: rgba(255, 255, 255, .6); }
.aip-hero .crumbs a { color: #d8b4fe; }
.aip-hero .section-title { color: #fff; margin-top: 12px; font-size: clamp(2.2rem, 5vw, 4rem); }
.aip-hero .section-title mark { background: linear-gradient(90deg, #c4b5fd, #f472b6 45%, #fde047); -webkit-background-clip: text; background-clip: text; color: transparent; padding: 0; }
.aip-hero .lib-lead { color: rgba(255, 255, 255, .8); }
.aip-hero .lib-small { color: rgba(255, 255, 255, .62); }
.aip-hero .claim { color: var(--ink); box-shadow: 8px 8px 0 var(--violet); }

/* the prompt box: a glowing border that turns, like the dashboard's ai-glow */
@property --aip-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.aip-field { position: relative; border-radius: 24px; padding: 2px; background: conic-gradient(from var(--aip-a), #7c3aed, #ec4899, #fde047, #38bdf8, #7c3aed); animation: aip-turn 5s linear infinite; box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 20px 60px -18px rgba(124, 58, 237, .8); }
.aip-field::before { content: ""; position: absolute; inset: -10px; z-index: -1; border-radius: 32px; background: inherit; filter: blur(22px); opacity: .45; }
@keyframes aip-turn { to { --aip-a: 360deg; } }
.aip-field textarea { display: block; width: 100%; min-height: 120px; font-size: 1.12rem; resize: none; border: 0; border-radius: 22px 22px 0 0; padding: 18px 20px 8px; font: 500 1.05rem/1.5 var(--body); color: var(--ink); background: #fff; outline: none; }
.aip-field textarea::placeholder { color: #8a84a3; }
.aip-field-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px 10px 18px; background: #fff; border-radius: 0 0 22px 22px; }
.aip-hint { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: .85rem; font-weight: 600; }
.aip-hint .i { width: 14px; height: 14px; color: var(--violet); }
.aip-go { flex: none; box-shadow: none; background: linear-gradient(135deg, #7c3aed, #c026d3); border-color: var(--ink); }
.aip-try.is-busy .aip-go { opacity: .7; cursor: progress; }
.aip-msg { margin: 14px 0 0; padding: 12px 16px; border-radius: 14px; background: #fff1f2; color: #9f1239; font-weight: 600; font-size: .95rem; scroll-margin: 120px; }
.aip-msg:has(.aip-msg-cta) { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.aip-msg-cta { flex: none; }
.aip-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; font-size: .9rem; color: rgba(255, 255, 255, .7); font-weight: 600; }
.aip-chips button { font: 700 .88rem/1 var(--body); color: #fff; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; padding: 9px 14px; cursor: pointer; transition: background .2s, border-color .2s; }
.aip-chips button:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .45); }
.aip-stats { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 22px 0 0; padding: 0; list-style: none; }
.aip-stats li { display: grid; }
.aip-stats b { font: 800 1.5rem/1.1 var(--display); background: linear-gradient(90deg, #c4b5fd, #f9a8d4); -webkit-background-clip: text; background-clip: text; color: transparent; }
.aip-stats span { color: rgba(255, 255, 255, .62); font-size: .85rem; font-weight: 600; }

/* the phone side: the video, then the build's steps, then the page */
.aip-stage [hidden] { display: none !important; }
.aip-bio-text > span { grid-area: 1 / 1; }
.aip-stage .aip-bio-text > span[hidden] { display: block !important; visibility: hidden; }
.aip-stage { display: grid; justify-items: center; width: 100%; align-content: center; scroll-margin-top: 90px; }
.aip-hero .aip-video video { border-color: rgba(255, 255, 255, .2); box-shadow: 0 30px 80px -20px rgba(124, 58, 237, .7); }
.aip-building { display: grid; justify-items: center; gap: 18px; }
.aip-scan { position: relative; overflow: hidden; display: grid; justify-items: center; align-content: start; gap: 12px; width: 300px; height: 520px; padding: 40px 26px; border: 10px solid #000; border-radius: 46px; background: linear-gradient(180deg, #1c1238, #120c27); box-shadow: 0 30px 80px -20px rgba(124, 58, 237, .7); }
.aip-scan::after { content: ""; position: absolute; left: 0; right: 0; height: 120px; top: -120px; background: linear-gradient(180deg, transparent, rgba(196, 181, 253, .35), transparent); animation: aip-scanline 1.8s ease-in-out infinite; }
@keyframes aip-scanline { to { top: 100%; } }
.aip-sk { display: block; border-radius: 999px; background: linear-gradient(90deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .2), rgba(255, 255, 255, .08)); background-size: 200% 100%; animation: aip-shimmer 1.2s linear infinite; }
.aip-sk.av { width: 84px; height: 84px; margin-bottom: 6px; }
.aip-sk.ln { width: 70%; height: 14px; } .aip-sk.ln.s { width: 52%; margin-bottom: 12px; }
.aip-sk.bt { width: 100%; height: 46px; border-radius: 14px; }
@keyframes aip-shimmer { to { background-position: -200% 0; } }
.aip-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; min-width: 260px; }
.aip-steps li { display: flex; align-items: center; gap: 10px; color: rgba(255, 255, 255, .4); font-weight: 600; font-size: .95rem; transition: color .3s; }
.aip-steps li::before { content: ""; flex: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .3); }
.aip-steps li.on { color: #fff; }
.aip-steps li.on::before { border-color: #c4b5fd; border-top-color: transparent; animation: aip-spin .8s linear infinite; }
.aip-steps li.done { color: rgba(255, 255, 255, .75); }
.aip-steps li.done::before { border-color: #a3e635; background: #a3e635 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%2315121f' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
@keyframes aip-spin { to { rotate: 360deg; } }
.aip-timer { margin: 0; font: 800 1.1rem/1 var(--display); color: #fde047; font-variant-numeric: tabular-nums; }
.aip-result { display: grid; grid-template-columns: auto minmax(0, 360px); gap: clamp(20px, 4vw, 48px); align-items: center; }
   /* the result needs the room: phone and card side by side */
.aip-phone { --w: 300px; --s: .7179; border-color: #000; box-shadow: 0 30px 80px -20px rgba(124, 58, 237, .8); }
.aip-phone iframe { pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s .25s; }
.aip-phone iframe.on { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .25s ease; }
.aip-panel { display: grid; gap: 16px; padding: 22px; border-radius: 24px; background: linear-gradient(160deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .04)); border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .12); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.aip-done { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start; }
.aip-done-ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: #a3e635; color: var(--ink); box-shadow: 0 0 24px rgba(163, 230, 53, .45); }
.aip-done-ico .i { width: 22px; height: 22px; }
.aip-done p { margin: 0; display: grid; line-height: 1.3; }
.aip-done p b { font: 800 1.08rem/1.25 var(--display); color: #fff; }
.aip-done-time { font-size: .82rem; color: rgba(255, 255, 255, .65); }
.aip-secs { padding: 6px 10px; border-radius: 999px; background: #fde047; color: var(--ink); font: 800 .85rem/1 var(--display); white-space: nowrap; font-variant-numeric: tabular-nums; }
.aip-secs b { font-size: 1.05rem; }
.aip-pick { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 8px; }
.aip-pick legend { float: left; width: 100%; padding: 0; margin-bottom: 8px; font-size: .74rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.aip-pick button { font: 700 .86rem/1.2 var(--body); color: #fff; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .2); cursor: pointer; transition: background .15s, border-color .15s; }
.aip-pick button:hover { background: rgba(255, 255, 255, .14); }
.aip-pick button[aria-pressed="true"] { background: #fff; color: var(--ink); border-color: #fff; }
.aip-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 3px; border-radius: 12px; background: rgba(0, 0, 0, .25); border: 1px solid rgba(255, 255, 255, .12); }
.aip-seg button { border: 0; background: none; border-radius: 9px; padding: 7px 0; }
.aip-bio-text { display: grid; margin: 0; padding: 12px 14px; border-radius: 14px; background: rgba(0, 0, 0, .22); border-left: 3px solid #c4b5fd; color: rgba(255, 255, 255, .9); font-size: .9rem; line-height: 1.45; }
.aip-themes div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.aip-themes button { display: grid; justify-items: center; gap: 6px; padding: 8px 6px 9px; border-radius: 14px; text-align: center; overflow: hidden; text-overflow: ellipsis; }
.aip-themes i { position: relative; display: block; width: 100%; height: 34px; border-radius: 9px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.aip-themes i::after { content: ""; position: absolute; left: 22%; right: 22%; top: 50%; height: 9px; margin-top: -4.5px; border-radius: 999px; background: var(--btn); box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); }
.aip-claim { justify-content: center; width: 100%; font-size: 1rem; padding: 14px 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 12px 30px -10px rgba(168, 85, 247, .9); background: linear-gradient(135deg, #7c3aed, #c026d3); }
.aip-claim span { overflow: hidden; text-overflow: ellipsis; }
.aip-claim-note { margin: -6px 0 0; text-align: center; font-size: .82rem; color: rgba(255, 255, 255, .65); }
.aip-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 12px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .12); }
.aip-left { font-size: .8rem; color: rgba(255, 255, 255, .55); }
.aip-again { padding: 0; border: 0; background: none; color: #d8b4fe; font: 700 .88rem var(--body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* Real builds, unedited */
.aip-ex-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 36px); justify-items: center; }
.aip-ex { display: grid; justify-items: center; gap: 14px; }
.aip-ex .live-phone { --w: 260px; --s: .6154; }
.aip-ex-in { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0; }
.aip-ex-in > p { margin: 0; font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.aip-ex-in a { display: inline-flex; align-items: center; gap: 6px; max-width: 260px; padding: 8px 14px; border: 2px solid var(--ink); border-radius: 999px; background: var(--card); box-shadow: var(--shadow); font-size: .82rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aip-ex-in a .i { flex: none; width: 15px; height: 15px; color: var(--violet); }
.aip-ex-in a:hover { text-decoration: underline; }
.aip-ex-out { display: grid; justify-items: center; margin: 0; text-align: center; }
.aip-ex-out b { font: 800 1.05rem/1.3 var(--display); }
.aip-ex-out span { color: var(--muted); font-size: .9rem; }

@media (max-width: 760px) {
    /* phones: in the order you read it: built, the picks, the page they change right under them, then Claim, kept in view at the
       bottom of the screen while the result is (the panel's parts become the result's own rows) */
    .aip-result { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 14px; }
    .aip-panel { display: contents; }
    .aip-panel > * { width: min(100%, 420px); }
    .aip-done { order: 1; } .aip-themes { order: 2; } .aip-bios { order: 3; } .aip-result > .aip-phone { order: 4; margin-top: 6px; }
    .aip-claim { order: 5; position: sticky; bottom: 14px; z-index: 3; } .aip-claim-note { order: 6; margin: 0; } .aip-foot { order: 7; }
    .aip-phone { --w: 250px; --s: .5982; }
    .aip-bio-text { display: none; }   /* the phone right below shows it */
    .aip-pick legend { margin-bottom: 6px; }
    .aip-themes i { height: 26px; } .aip-themes button { padding: 6px 6px 7px; }
}
@media (max-width: 900px) {
    .aip-grid { grid-template-columns: minmax(0, 1fr); }
    .aip-stage { min-height: 0; }
    /* the three examples: a row to swipe through, the next phone peeking in */
    .aip-ex-grid { display: flex; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
        gap: 18px; margin-inline: -20px; padding: 4px 20px 16px; justify-content: flex-start; }
    .aip-ex-grid::-webkit-scrollbar { display: none; }
    .aip-ex { flex: none; scroll-snap-align: center; }
}
@media (max-width: 520px) {
    .aip-hint { display: none; }
    .aip-field-foot { justify-content: stretch; padding-left: 10px; }
    .aip-go { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    .aip-aurora i, .aip-field, .aip-scan::after, .aip-sk, .aip-steps li.on::before { animation: none; }
}