/* Content controls added inside the retained Linkme public-page layouts. */
.auth-page .auth-content label.auth-sr-only{margin:0;padding:0}
.auth-page .auth-business-consent{display:flex;flex-direction:row;align-items:flex-start;gap:9px;margin:2px 0 14px;font-size:11px;color:#bbb}
.auth-business-consent input{flex:none;width:16px;height:16px;padding:0;margin:2px 0 0}
.auth-kind{display:flex;gap:7px;margin:0 0 18px}
.auth-kind a{font-size:12px;border:1px solid #ffffff40;padding:6px 16px;border-radius:30px;text-decoration:none}
.auth-kind a.selected{background:#fff;color:#111;border-color:#fff}
.auth-page #authStatus{color:#ffbbd6;font-size:12px;line-height:1.5;margin:0 0 10px}
.auth-page #authStatus:empty{display:none}
.auth-page .auth-google:disabled{background:#ffffffde;color:#777;opacity:.7}
.auth-preview{font-size:11px;color:#aaa;margin-top:23px}
.auth-preview summary{cursor:pointer}
.auth-preview p{font-size:11px;margin:10px 0}
.auth-preview>div{display:flex;gap:8px}
.auth-preview button{border:1px solid #555;border-radius:25px;padding:6px 13px;font-size:11px}
.marketing label{margin:0}
.marketing .m-claim input{width:auto}
.marketing .m-logo b{font-weight:750}
.marketing .m-footer-bottom{align-items:center}
.marketing .m-dm-person small{display:block}
.marketing .m-claim label{flex-direction:row}
.marketing .m-claim input{margin:0;line-height:normal}
@media(max-width:800px){.marketing .m-audiences a:first-child:after{content:"Creators"}.marketing .m-audiences a:nth-child(2):after{content:"Fans"}.marketing .m-audiences a:nth-child(3):after{content:"Agencies"}}

/* Breathing room: boxes stacked on a dashboard page never touch. */
.workspace-content>.card+.card,.workspace-content>section+section,.workspace-content>.card+section,.workspace-content>section+.card,.workspace-content>div+.card,.workspace-content>div+section{margin-top:20px}
.workspace-content .card{padding:24px}
/* myy.bio hero film as the background: the film sits on the right and fades into the dark on the left,
   so the headline stays readable and the film is clearly visible. */
.m-hero-film{background:#0b0b0d;overflow:hidden}
.m-hero-film .m-film-bg{left:auto;right:0;top:50%;bottom:auto;width:50%;height:auto;aspect-ratio:16/9;transform:translateY(-50%);object-fit:cover;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%,#000 94%,transparent),linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 30%,#000 94%,transparent),linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent);mask-composite:intersect}
.m-hero-film .m-hero-shade{background:linear-gradient(90deg,#0b0b0d 0,#0b0b0dcc 30%,#0b0b0d00 55%),linear-gradient(0deg,#0b0b0d 0,#0b0b0d00 22%)}
.m-hero-film .m-hero-inner{grid-template-columns:1fr}
.m-hero-film .m-hero-copy{max-width:560px}
@media (max-width:900px){.m-hero-film .m-film-bg{width:100%;height:58%;aspect-ratio:auto;transform:none;object-fit:cover;top:0;bottom:auto;-webkit-mask-image:linear-gradient(180deg,#000 62%,transparent);-webkit-mask-composite:source-over;mask-image:linear-gradient(180deg,#000 62%,transparent);mask-composite:add}.m-hero-film .m-hero-shade{background:linear-gradient(0deg,#0b0b0d 0,#0b0b0d 42%,#0b0b0d00 62%)}}
.m-claim-mark{width:30px!important;height:30px!important;padding:5px;border-radius:9px;background:#fff;box-shadow:0 0 0 1px #0001;flex:none;object-fit:contain;position:static!important}
/* Mock dashboards use example numbers, never real results (Stripe review, 19 Oct 2026). */
.m-mini-dashboard,.m-roster-phone,.m-revenue-demo,.m-phone-roster,.m-agency-stats,.m-platform-stats{position:relative}
.m-mini-dashboard::before,.m-roster-phone::before,.m-revenue-demo::before{content:'Example data';position:absolute;top:8px;right:8px;z-index:3;padding:3px 9px;border-radius:999px;background:#16161acc;color:#fff;font:600 11px/1.4 Inter,system-ui,sans-serif;letter-spacing:.02em;pointer-events:none}
/* Fewer than 6 featured creators: show them once, side by side, without the scrolling loop. */
.m-profile-strip.m-strip-static{animation:none!important;transform:none!important;justify-content:flex-start;flex-wrap:wrap;width:auto!important}
/* ---- Home page motion and new pictures (21 Oct 2026) ---- */
.m-anim .m-reveal{opacity:0;transform:translateY(34px);transition:opacity .7s cubic-bezier(.2,.7,.2,1) var(--d,0ms),transform .8s cubic-bezier(.2,.7,.2,1) var(--d,0ms)}
.m-anim .m-reveal.m-in{opacity:1;transform:none}
.m-anim .m-dm-bubble.m-reveal{transform:translateY(16px) scale(.96)}
.m-anim .m-dm-bubble.m-reveal.m-in{transform:none}
/* Hero: headline, copy and claim box rise in on load. */
.m-anim .m-hero-copy>*{animation:m-rise .9s cubic-bezier(.2,.7,.2,1) both}
.m-anim .m-hero-copy>*:nth-child(2){animation-delay:.12s}.m-anim .m-hero-copy>*:nth-child(3){animation-delay:.24s}.m-anim .m-hero-copy>*:nth-child(4){animation-delay:.36s}
@keyframes m-rise{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
.m-rotating{display:inline-block;transition:opacity .35s,transform .35s}
.m-rotating.m-word-out{opacity:0;transform:translateY(-14px)}
.m-rotating.m-word-in{animation:m-rise .45s cubic-bezier(.2,.7,.2,1)}
/* Gradient words shimmer slowly. */
.m-anim .m-gradient-text{background-image:linear-gradient(90deg,#ffb96a,#f76b80,#eb008b,#a24bff,#f76b80,#ffb96a);background-size:300% 100%;animation:m-shimmer 9s ease-in-out infinite alternate}
@keyframes m-shimmer{from{background-position:0 50%}to{background-position:100% 50%}}
/* Creator strip: endless slow scroll. */
.m-profile-strip.m-marquee{overflow:hidden}
.m-strip-track{display:flex;gap:inherit;width:max-content;animation:m-marquee 60s linear infinite}
.m-profile-strip.m-marquee:hover .m-strip-track{animation-play-state:paused}
@keyframes m-marquee{to{transform:translateX(calc(-50% - 12px))}}
@media(max-width:800px){.m-strip-track{animation-duration:42s}@keyframes m-marquee{to{transform:translateX(calc(-50% - 7px))}}}
.m-profile-strip a{transition:transform .35s}.m-profile-strip a:hover{transform:translateY(-8px) rotate(-1deg)}
/* Cards lift on hover; pictures zoom a little. */
.m-audience-cards>a,.m-money-card,.m-global-card,.m-management{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.m-anim .m-audience-cards>a.m-in:hover,.m-anim .m-money-card.m-in:hover{transform:translateY(-6px)}
.m-money-card:hover{box-shadow:0 24px 50px #2a157040}
.m-money-card:hover img{transform:scale(1.06)}
.m-audience-cards>a:hover .m-audience-art img,.m-global-card:hover>img,.m-management:hover>img,.m-fast:hover>img,.m-platform:hover>img{transform:scale(1.04)}
.m-global-card>img,.m-management>img,.m-fast>img,.m-platform>img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.m-global-card,.m-management,.m-fast,.m-platform{overflow:hidden}
/* Light pictures need a shade behind the white card titles. */
.m-audience-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0b0b0dcc 0,#0b0b0d55 26%,transparent 50%);pointer-events:none}
.m-audience-art>span{z-index:1}
/* Calculator: live phone on the left, breakdown on the right. */
.m-calc-phone{position:relative;display:grid;place-items:center;padding:40px 28px;min-height:650px;background:radial-gradient(110% 80% at 100% 0,#2a1570 0,#120a2e 55%,#0b0b0d 100%);overflow:hidden}
.m-calc-screen{position:relative;width:min(100%,290px);aspect-ratio:9/18.5;border-radius:38px;overflow:hidden;border:9px solid #050507;box-shadow:0 30px 70px #0009;animation:m-bob 7s ease-in-out infinite}
.m-calc-screen>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.m-calc-shade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,#000c)}
.m-calc-name{position:absolute;left:18px;bottom:38px;color:#fff;font-size:22px}
.m-calc-url{position:absolute;left:18px;bottom:18px;color:#ddd;font-size:13px}
.m-calc-toasts{position:absolute;left:10px;right:10px;top:14px}
.m-calc-toast{position:absolute;left:0;right:0;display:flex;align-items:center;gap:9px;background:#fffffff2;color:#111;border-radius:16px;padding:9px 11px;box-shadow:0 10px 30px #0005;font-size:13px;opacity:0;animation:m-toast 10s cubic-bezier(.2,.7,.2,1) infinite;animation-delay:calc(var(--n)*2.5s)}
.m-calc-toast span{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#6022F5;color:#fff;font-size:13px;flex:none}
.m-calc-toast b{flex:1;font-weight:600}.m-calc-toast em{font-style:normal;font-weight:800;color:#18a05e}
@keyframes m-toast{0%{opacity:0;transform:translateY(-16px) scale(.96)}4%,22%{opacity:1;transform:none}27%,100%{opacity:0;transform:translateY(-8px) scale(.98)}}
.m-calc .m-product-options{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px}
.m-calc label>span{display:block}
.m-calc-breakdown{list-style:none;padding:0;margin:4px 0 22px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.m-calc-breakdown li{display:flex;flex-direction:column;gap:2px;border:1px solid #ececf0;border-radius:14px;padding:10px 12px;font-size:13px;color:#77778a;cursor:pointer;transition:border-color .2s,background .2s,opacity .2s}
.m-calc-breakdown li b{color:#111;font-size:16px}
.m-calc-breakdown li.active{border-color:#6022F5;background:#f4effe}
.m-calc-breakdown li.off{opacity:.45}
.m-calc .m-calculator-total{font-variant-numeric:tabular-nums}
@media(max-width:800px){.m-calc-phone{min-height:0;padding:26px}.m-calc-screen{width:210px}.m-calc-breakdown{grid-template-columns:repeat(2,1fr)}}
@media(prefers-reduced-motion:reduce){.m-calc-toast{animation:none;opacity:0}.m-calc-toast:first-child{opacity:1}.m-strip-track{animation:none}}
.m-management>img[src*="/home/"]{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0}

/* Header that adapts to the page under it (26 Oct 2026): grey bar + black logo on light parts,
   dark glass + white logo on dark parts (hero film, dark cards, photos). */
.m-logo .m-logo-black{display:none}
.marketing.m-tone-light .m-main-nav{background:#eeeef1e0;border-color:#00000012;color:#111;box-shadow:0 10px 30px #0000000f}
.marketing.m-tone-light .m-audiences{background:#eeeef1d0;border-color:#00000010;color:#111}
.marketing.m-tone-light .m-audiences a.active{background:#fff;color:#111}
.marketing.m-tone-light .m-main-nav .m-button{background:#111;color:#fff!important}
.marketing.m-tone-light .m-logo .m-logo-white{display:none}
.marketing.m-tone-light .m-logo .m-logo-black{display:block}
.marketing.m-tone-light .m-menu-toggle{color:#111}
.marketing.m-tone-dark .m-main-nav{background:#141b1b73;border-color:#ffffff26;color:#fff}
.marketing.m-tone-dark .m-audiences{background:#111a1a59;border-color:#ffffff22;color:#fff}
.marketing.m-tone-dark .m-audiences a.active{background:#fff;color:#171717}
.marketing.m-tone-dark .m-main-nav .m-button{background:#fff;color:#111!important}
.marketing.m-tone-dark .m-menu-toggle{color:#fff}
.m-main-nav,.m-audiences{transition:background-color .25s ease,color .25s ease,border-color .25s ease}
/* Hero film play button (only when the phone blocked autoplay) */
.m-film-play{position:absolute;z-index:3;left:50%;top:38%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;border:1px solid #ffffff40;background:#00000066;backdrop-filter:blur(12px);color:#fff;display:grid;place-items:center;cursor:pointer}
.m-film-play svg{width:28px;height:28px;margin-left:3px}
/* Phones: the People/Business switch slides away once you scroll, so it doesn't cover the page. */
@media(max-width:800px){.m-audiences{transition:transform .3s ease,opacity .3s ease,background-color .25s ease}.marketing.m-scrolled .m-audiences{transform:translateY(-140%);opacity:0;pointer-events:none}}
/* Phones: the film is landscape, so it was cropped into a tall box and cut its own words in half
   ("our" instead of "Your"). Now it shows whole, full width, under the header (26 Oct 2026). */
@media (max-width:900px){.m-hero-film .m-film-bg{top:128px;width:calc(100% - 24px);left:12px;right:auto;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:18px;-webkit-mask-image:none;mask-image:none;box-shadow:0 18px 50px #0007}.m-film-play{top:calc(128px + (100vw - 24px) * .28)}}
@media (max-width:900px){.m-hero.m-hero-film{height:auto;min-height:0;max-height:none}.m-hero-film .m-hero-inner{display:block;position:relative;height:auto;width:calc(100% - 36px);margin:0 auto;padding:calc(128px + (100vw - 24px) * .5625 + 26px) 0 44px}.m-hero-film .m-hero-copy{margin:0;max-width:none;position:relative;top:auto;bottom:auto;left:auto;right:auto;transform:none}.m-hero-film .m-hero-shade{background:none}}

/* Find a creator (26 Oct 2026) */
.find-creator{position:relative;margin-top:14px;max-width:440px;width:100%;text-align:left}
.find-creator label>span:first-child{display:block;font-size:13px;opacity:.8;margin-bottom:6px}
.find-row{display:flex;gap:8px}.find-row input{flex:1;min-width:0;height:44px;border-radius:999px;border:1px solid rgba(255,255,255,.22);background:rgba(0,0,0,.35);color:#fff;padding:0 16px;font:inherit;font-size:16px}
.find-row input::placeholder{color:rgba(255,255,255,.55)}.find-row .btn{height:44px;border-radius:999px;padding:0 18px}
.find-results{position:absolute;z-index:20;left:0;right:0;top:calc(100% + 6px);list-style:none;margin:0;padding:6px;background:#141417;border:1px solid #2a2a30;border-radius:16px;box-shadow:0 18px 40px rgba(0,0,0,.45)}
.find-results a{display:flex;gap:10px;align-items:center;padding:8px;border-radius:10px;color:#fff;text-decoration:none}.find-results a:hover,.find-results a:focus{background:#222228}
.find-results img,.find-results i{width:36px;height:36px;border-radius:50%;object-fit:cover;flex:none;display:grid;place-items:center;background:#2a2a31;font-style:normal;font-weight:600}
.find-results span{display:grid}.find-results small{color:#9a9aa4}.find-none{padding:10px;color:#b4b4bd;font-size:13px}
.qr-find ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}.qr-find li{display:grid;gap:2px}.qr-find li span{color:#c9c9d1}
.m-fan-hero .find-creator{margin:18px auto 4px;text-align:center}
.m-fan-hero .find-creator label>span:first-child{color:#6b6b74;opacity:1}
.m-fan-hero .find-row input{background:#fff;color:#111;border-color:#d9d9df;box-shadow:0 6px 18px rgba(0,0,0,.06)}
.m-fan-hero .find-row input::placeholder{color:#8a8a93}
.m-fan-hero .find-row .btn{background:#111;color:#fff;border:0}
.m-fan-hero .find-results{text-align:left}