:root{
    --paper:#f8f6f0;
    --ink:#292c25;
    --muted:#6d7065;
    --orange:#bc4b32;
    --line:#dddcd2;
    --serif:'Instrument Serif',Georgia,serif;
    --sans:'DM Sans',Arial,sans-serif
}
*{
    box-sizing:border-box
}
html{
    scroll-behavior:smooth;
    scroll-padding-top:105px
}
body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:var(--sans);
    font-size:15px;
    -webkit-font-smoothing:antialiased
}
a{
    color:inherit;
    text-decoration:none
}
button,a,summary{
    -webkit-tap-highlight-color:transparent
}
a:focus-visible,summary:focus-visible{
    outline:3px solid var(--orange);
    outline-offset:6px
}
img{
    max-width:100%;
    display:block
}
.shell{
    width:min(1280px,calc(100% - 112px));
    margin-inline:auto
}
.skip-link{
    position:fixed;
    top:-80px;
    left:20px;
    background:var(--ink);
    color:white;
    padding:12px;
    z-index:100
}
.skip-link:focus{
    top:12px
}
.site-header{
    border-bottom:1px solid var(--line);
    background:var(--paper)
}
.navigation{
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:99px;
    gap:26px
}
.brand{
    flex-shrink:0;
    display:block
}
.brand img{
    width:148px;
    height:44px
}
.main-nav,.account-nav{
    display:flex;
    align-items:center;
    gap:31px;
    font-size:13px;
    font-weight:500
}
.main-nav a,.login-link{
    transition:color .2s
}
.main-nav a:hover,.login-link:hover,.text-link:hover{
    color:var(--orange)
}
.main-nav a span{
    margin-left:4px
}
.account-nav{
    gap:25px
}
.button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:26px;
    min-height:55px;
    padding:0 25px;
    border-radius:6px;
    font-size:14px;
    font-weight:600;
    transition:transform .2s,background .2s,color .2s;
    white-space:nowrap
}
.button:hover{
    transform:translateY(-3px)
}
.button span{
    font-size:21px;
    font-weight:400
}
.button-small{
    min-height:43px;
    padding:0 20px;
    gap:21px;
    font-size:12px
}
.button-dark{
    background:var(--ink);
    color:var(--paper)
}
.button-dark:hover{
    background:#42483b
}
.button-orange{
    background:var(--orange);
    color:white
}
.button-orange:hover{
    background:#a83f29
}
.button-cream{
    background:var(--paper);
    color:var(--ink)
}
.hero{
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:62px;
    padding-top:65px;
    padding-bottom:82px
}
.hero-copy{
    padding-bottom:8px
}
.eyebrow{
    font-size:10px;
    font-weight:650;
    letter-spacing:1.8px;
    line-height:1.7;
    margin:0 0 23px;
    display:flex;
    align-items:center;
    gap:9px
}
.little-spark{
    font-size:23px;
    color:var(--orange);
    line-height:1
}
.hero h1{
    font-family:var(--serif);
    font-size:clamp(66px,6.7vw,103px);
    font-weight:400;
    line-height:.99;
    letter-spacing:-2px;
    margin:0 0 27px
}
h1 em,h2 em{
    font-weight:400;
    color:var(--orange)
}
.hero-description{
    font-size:15px;
    line-height:1.85;
    color:var(--muted);
    max-width:370px;
    margin:0 0 29px
}
.hero-actions{
    display:flex;
    align-items:center;
    gap:28px
}
.text-link{
    font-size:13px;
    font-weight:550;
    display:inline-flex;
    align-items:center;
    gap:14px;
    line-height:1.7;
    transition:color .2s
}
.text-link span{
    font-size:20px
}
.hero-note{
    display:flex;
    align-items:center;
    gap:11px;
    font-size:11px;
    color:var(--muted);
    margin-top:29px
}
.note-line{
    height:1px;
    width:27px;
    background:var(--orange)
}
.hero-art{
    position:relative;
    padding:16px 0 11px 24px;
    margin-right:12px
}
.portrait-frame{
    width:100%;
    height:545px;
    border-radius:150px 10px 10px 10px;
    overflow:hidden;
    background:#d0b395
}
.hero-photo{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:50% 42%
}
.orbit-label{
    position:absolute;
    left:-13px;
    top:8px;
    z-index:2;
    background:#e9eacb;
    width:111px;
    height:111px;
    border-radius:50%;
    transform:rotate(-13deg);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    color:#475039
}
.orbit-label span{
    font-size:7px;
    font-weight:700;
    letter-spacing:1px
}
.orbit-label b{
    font-size:37px;
    font-weight:400;
    line-height:1
}
.photo-caption{
    position:absolute;
    bottom:38px;
    left:47px;
    display:flex;
    gap:7px;
    align-items:center;
    font-size:10px;
    color:white;
    letter-spacing:.2px;
    text-shadow:0 1px 8px #000
}
.caption-dot{
    width:6px;
    height:6px;
    background:#d9e5be;
    border-radius:50%
}
.floating-note{
    position:absolute;
    right:-34px;
    bottom:78px;
    display:flex;
    align-items:center;
    gap:14px;
    background:var(--paper);
    padding:19px 23px;
    box-shadow:0 9px 35px #30231e16;
    border:1px solid #e7e4d9;
    border-radius:8px;
    transform:rotate(-4deg);
    font-size:17px;
    font-family:var(--serif)
}
.floating-note small{
    font-family:var(--sans);
    display:block;
    font-size:9px;
    color:var(--muted);
    margin-top:5px
}
.note-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:36px;
    height:36px;
    border-radius:50%;
    background:#e9eacb;
    color:#4f5c33;
    font-family:var(--sans);
    font-size:24px
}
.hero-doodle{
    position:absolute;
    right:-25px;
    top:4px;
    font-size:79px;
    line-height:1;
    color:var(--orange);
    transform:rotate(12deg)
}
.interests{
    border-block:1px solid var(--line)
}
.interests-inner{
    display:flex;
    align-items:center;
    gap:60px;
    min-height:100px
}
.interests-inner>span{
    font-size:9px;
    font-weight:650;
    letter-spacing:1.3px;
    line-height:1.7;
    flex-shrink:0
}
.interests p{
    margin:0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:26px;
    width:100%;
    font-family:var(--serif);
    font-size:23px;
    white-space:nowrap
}
.interests b{
    font-size:21px;
    color:var(--orange);
    font-weight:400
}
.section{
    padding-block:105px
}
.section-intro{
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:60px;
    margin-bottom:42px
}
.section-intro>p{
    color:var(--muted);
    font-size:14px;
    line-height:1.85;
    max-width:350px;
    margin:0 0 5px
}
h2{
    font-family:var(--serif);
    font-size:clamp(42px,4.2vw,62px);
    font-weight:400;
    line-height:1.07;
    letter-spacing:-1px;
    margin:0
}
.section-intro .eyebrow{
    margin-bottom:15px
}
.feature-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px
}
.feature-card{
    border:1px solid var(--line);
    border-radius:9px;
    padding:31px 28px 26px;
    display:flex;
    flex-direction:column;
    transition:transform .25s,border-color .25s;
    background:#fcfbf7
}
.feature-card:hover{
    transform:translateY(-4px);
    border-color:#b6b5a8
}
.feature-icon{
    width:49px;
    height:49px;
    border-radius:50%;
    background:#eeeee2;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:36px
}
.feature-card:nth-child(2) .feature-icon{
    background:#f4e4dc
}
.feature-card:nth-child(3) .feature-icon{
    background:#e8ecd9
}
.feature-icon svg{
    width:27px;
    height:27px;
    fill:none;
    stroke:var(--ink);
    stroke-width:1.3;
    stroke-linecap:round;
    stroke-linejoin:round
}
.feature-number{
    font-size:8px;
    letter-spacing:1.7px;
    color:var(--muted);
    margin-bottom:12px
}
.feature-card h3{
    font-family:var(--serif);
    font-size:29px;
    font-weight:400;
    letter-spacing:-.4px;
    margin:0 0 13px
}
.feature-card p{
    font-size:12px;
    line-height:1.95;
    color:var(--muted);
    margin:0 0 25px;
    flex:1
}
.feature-card a{
    font-size:11px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-weight:550
}
.feature-card a span{
    font-size:20px
}
.how-section{
    background:#eeeee4
}
.how-heading{
    text-align:center
}
.how-heading .eyebrow{
    justify-content:center;
    margin-bottom:17px
}
.steps{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:65px;
    margin-top:58px
}
.steps article{
    position:relative
}
.steps article:not(:last-child):after{
    content:'';
    position:absolute;
    top:20px;
    left:57px;
    right:-42px;
    height:1px;
    background:#d0d3c2
}
.step-index{
    display:flex;
    width:40px;
    height:40px;
    border:1px solid #c6caba;
    border-radius:50%;
    align-items:center;
    justify-content:center;
    font-family:var(--serif);
    font-size:22px;
    margin-bottom:25px
}
.steps h3{
    font-size:17px;
    font-weight:500;
    margin:0 0 12px
}
.steps p{
    font-size:12px;
    color:var(--muted);
    line-height:1.9;
    max-width:260px;
    margin:0
}
.creator-profiles{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px
}
.creator-profile{
    border:1px solid var(--line);
    border-radius:9px;
    padding:24px;
    display:flex;
    flex-direction:column;
    gap:12px
}
.creator-profile span{
    font-family:var(--serif);
    font-size:26px
}
.creator-profile small{
    color:var(--muted)
}
.faq-section{
    display:grid;
    grid-template-columns:1fr 1.15fr;
    gap:100px
}
.faq-heading .eyebrow{
    margin-bottom:17px
}
.faq-heading>p:last-child{
    font-size:12px;
    color:var(--muted);
    line-height:2;
    margin:25px 0 0
}
.faq-heading .text-link{
    color:var(--ink)
}
.faq-list{
    padding-top:17px
}
.faq-list details{
    border-bottom:1px solid var(--line)
}
.faq-list details:first-child{
    border-top:1px solid var(--line)
}
.faq-list summary{
    padding:24px 0;
    list-style:none;
    cursor:pointer;
    font-size:13px;
    font-weight:500;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px
}
.faq-list summary::-webkit-details-marker{
    display:none
}
.faq-list summary span{
    font-size:23px;
    font-weight:400;
    color:var(--muted);
    transition:transform .2s
}
.faq-list details[open] summary span{
    transform:rotate(45deg)
}
.faq-list details p{
    font-size:12px;
    line-height:1.9;
    margin:0 25px 24px 0;
    color:var(--muted)
}
.final-section{
    padding-bottom:90px
}
.final-cta{
    position:relative;
    overflow:hidden;
    background:var(--orange);
    color:var(--paper);
    text-align:center;
    border-radius:11px;
    padding:62px 25px 45px
}
.final-cta>.eyebrow{
    justify-content:center;
    font-size:8px;
    letter-spacing:1.8px;
    position:relative
}
.final-cta h2{
    font-size:75px;
    position:relative
}
.final-cta h2 em{
    color:#f3d2a6
}
.final-cta .button{
    margin-top:27px;
    position:relative
}
.cta-note{
    font-size:10px;
    color:#f1d5c9;
    margin:17px 0 0;
    position:relative
}
.cta-orbit{
    position:absolute;
    left:-12px;
    top:15px;
    font-size:380px;
    font-family:var(--serif);
    line-height:1;
    color:#d16a50;
    transform:rotate(12deg);
    opacity:.65
}
.final-cta:after{
    content:'';
    position:absolute;
    width:370px;
    height:370px;
    border:1px solid #edaa8e55;
    border-radius:50%;
    right:-190px;
    top:-110px;
    pointer-events:none;
    box-shadow:0 0 0 45px #edaa8e0a,0 0 0 90px #edaa8e0a
}
.footer-top{
    display:flex;
    align-items:center;
    gap:38px;
    padding-bottom:35px;
    border-bottom:1px solid var(--line)
}
.footer-top>p{
    font-size:12px;
    color:var(--muted);
    flex:1
}
.footer-bottom{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:22px;
    padding:26px 0 34px;
    font-size:9px;
    color:var(--muted)
}
.footer-bottom p{
    margin:0
}
.footer-bottom nav{
    display:flex;
    gap:20px;
    flex-wrap:wrap
}
.footer-bottom a:hover{
    color:var(--orange)
}
.footer-signature{
    font-size:8px;
    letter-spacing:1px;
    white-space:nowrap
}
.footer-signature span{
    color:var(--orange);
    font-size:17px;
    margin-left:8px
}
@media(min-width:1500px){
    .hero{
        padding-block:85px 100px
    }
    .portrait-frame{
        height:610px
    }
}
@media(max-width:1100px){
    .shell{
        width:calc(100% - 70px)
    }
    .main-nav{
        gap:20px
    }
    .account-nav{
        gap:18px
    }
    .hero{
        gap:30px
    }
    .hero h1{
        font-size:76px
    }
    .hero-actions{
        gap:17px
    }
    .hero-actions .text-link{
        font-size:11px;
        gap:8px
    }
    .portrait-frame{
        height:500px
    }
    .interests-inner{
        gap:30px
    }
    .interests p{
        gap:15px;
        font-size:20px
    }
    .feature-card{
        padding:25px 21px
    }
    .feature-card h3{
        font-size:25px
    }
    .faq-section{
        gap:55px
    }
}
@media(max-width:850px){
    .shell{
        width:calc(100% - 48px)
    }
    .main-nav{
        display:none
    }
    .navigation{
        min-height:83px
    }
    .hero{
        gap:20px;
        padding-block:45px 60px
    }
    .hero h1{
        font-size:64px
    }
    .hero-description{
        font-size:13px
    }
    .hero-actions{
        align-items:flex-start;
        flex-direction:column;
        gap:15px
    }
    .hero-art{
        margin-right:10px;
        padding-left:10px
    }
    .portrait-frame{
        height:435px;
        border-top-left-radius:110px
    }
    .floating-note{
        right:-18px;
        bottom:55px;
        padding:15px;
        gap:10px
    }
    .orbit-label{
        width:88px;
        height:88px;
        left:-15px
    }
    .orbit-label span{
        font-size:6px
    }
    .orbit-label b{
        font-size:30px
    }
    .hero-doodle{
        font-size:62px;
        right:-17px
    }
    .photo-caption{
        left:28px;
        font-size:8px
    }
    .interests-inner{
        min-height:92px;
        gap:25px
    }
    .interests-inner>span{
        font-size:7px
    }
    .interests p{
        white-space:normal;
        flex-wrap:wrap;
        justify-content:flex-start;
        gap:10px 16px;
        font-size:19px
    }
    .interests p b{
        font-size:15px
    }
    .section{
        padding-block:75px
    }
    .section-intro{
        gap:30px
    }
    .section-intro>p{
        max-width:280px;
        font-size:12px
    }
    .feature-grid{
        gap:12px
    }
    .feature-card h3{
        font-size:24px
    }
    .feature-card{
        padding:24px 18px
    }
    .feature-card p{
        font-size:11px
    }
    .feature-card a{
        font-size:10px
    }
    .steps{
        gap:32px
    }
    .steps article:not(:last-child):after{
        right:-15px
    }
    .faq-section{
        gap:35px
    }
    .footer-signature{
        display:none
    }
    .final-section{
        padding-bottom:65px
    }
    .footer-bottom nav{
        gap:14px
    }
}
@media(max-width:600px){
    .shell{
        width:calc(100% - 40px)
    }
    .navigation{
        min-height:77px;
        gap:15px
    }
    .brand img{
        width:122px;
        height:36px
    }
    .account-nav{
        gap:15px
    }
    .account-nav .login-link{
        font-size:10px
    }
    .button-small{
        font-size:10px;
        min-height:36px;
        gap:12px;
        padding-inline:13px
    }
    .hero{
        grid-template-columns:1fr;
        padding-top:38px;
        gap:39px;
        padding-bottom:40px
    }
    .hero .eyebrow{
        font-size:8px;
        letter-spacing:1.5px;
        margin-bottom:20px
    }
    .hero h1{
        font-size:76px;
        letter-spacing:-1.5px;
        line-height:.98;
        margin-bottom:23px
    }
    .hero-description{
        max-width:320px;
        font-size:13px;
        line-height:1.8;
        margin-bottom:24px
    }
    .hero-actions{
        flex-direction:row;
        align-items:center;
        gap:20px
    }
    .button{
        min-height:49px;
        font-size:12px;
        padding-inline:19px;
        gap:18px
    }
    .hero-actions .text-link{
        font-size:10px;
        gap:6px
    }
    .hero-note{
        margin-top:21px;
        font-size:9px
    }
    .hero-art{
        margin:0 10px 0 0;
        padding:9px 0 10px 11px
    }
    .portrait-frame{
        height:420px;
        border-radius:105px 8px 8px 8px
    }
    .hero-photo{
        object-position:center 42%
    }
    .orbit-label{
        left:-7px;
        top:-7px
    }
    .floating-note{
        right:-15px;
        bottom:55px;
        font-size:18px;
        padding:17px
    }
    .floating-note small{
        font-size:9px
    }
    .hero-doodle{
        font-size:69px;
        right:-16px;
        top:-7px
    }
    .photo-caption{
        bottom:29px;
        left:30px;
        font-size:9px
    }
    .interests-inner{
        padding-block:22px;
        display:block
    }
    .interests-inner>span{
        font-size:8px;
        display:block;
        margin-bottom:16px
    }
    .interests-inner>span br{
        display:none
    }
    .interests p{
        font-size:21px;
        gap:10px 17px
    }
    .interests p b{
        font-size:16px
    }
    .section{
        padding-block:61px
    }
    .section-intro{
        display:block;
        margin-bottom:27px
    }
    h2{
        font-size:45px
    }
    .section-intro>p{
        max-width:100%;
        font-size:12px;
        margin-top:22px
    }
    .eyebrow{
        font-size:8px;
        letter-spacing:1.5px
    }
    .feature-grid{
        grid-template-columns:1fr;
        gap:15px
    }
    .feature-card{
        padding:28px
    }
    .feature-icon{
        margin-bottom:26px
    }
    .feature-card h3{
        font-size:30px
    }
    .feature-card p{
        font-size:12px;
        max-width:320px
    }
    .feature-card a{
        font-size:12px
    }
    .feature-number{
        font-size:8px
    }
    .how-heading{
        text-align:left
    }
    .how-heading .eyebrow{
        justify-content:flex-start
    }
    .how-heading h2{
        font-size:43px
    }
    .steps{
        grid-template-columns:1fr;
        gap:31px;
        margin-top:35px
    }
    .steps article{
        padding-left:61px;
        min-height:98px
    }
    .step-index{
        position:absolute;
        left:0;
        top:0
    }
    .steps article:not(:last-child):after{
        width:1px;
        left:19px;
        top:51px;
        bottom:-19px;
        height:auto;
        right:auto
    }
    .steps h3{
        font-size:17px
    }
    .steps p{
        font-size:12px;
        max-width:100%
    }
    .creator-profiles{
        grid-template-columns:1fr
    }
    .faq-section{
        grid-template-columns:1fr;
        gap:22px
    }
    .faq-heading>p:last-child{
        margin-top:19px
    }
    .faq-list summary{
        font-size:12px;
        padding-block:23px
    }
    .final-section{
        padding-bottom:51px
    }
    .final-cta{
        padding:43px 20px 34px
    }
    .final-cta .eyebrow{
        font-size:7px;
        letter-spacing:1px
    }
    .final-cta h2{
        font-size:62px
    }
    .cta-orbit{
        font-size:250px;
        left:-95px;
        top:100px
    }
    .footer-top{
        gap:20px;
        flex-wrap:wrap;
        padding-bottom:22px
    }
    .footer-top>p{
        order:3;
        flex-basis:100%;
        margin:0;
        font-size:11px
    }
    .footer-top>.text-link{
        margin-left:auto;
        font-size:11px
    }
    .footer-bottom{
        align-items:flex-start;
        flex-direction:column;
        font-size:9px;
        gap:18px;
        padding-block:22px
    }
    .footer-bottom nav{
        gap:15px
    }
    .hero-art{
        max-width:440px;
        width:calc(100% - 10px);
        justify-self:center
    }
}
@media(prefers-reduced-motion:reduce){
    html{
        scroll-behavior:auto
    }
    *,*:before,*:after{
        transition:none!important;
        animation:none!important
    }
}
@media(max-width:600px){
    .hero h1{
        font-size:clamp(51px,16vw,64px)
    }
    .account-nav .button-small{
        min-height:36px;
        font-size:10px;
        padding-inline:13px;
        gap:12px
    }
}

/* Elara: identidad editorial para modelos y creadoras adultas. */
:root {
    --paper: #140d1e;
    --ink: #fff5fb;
    --muted: #c7b8d0;
    --orange: #ff88bc;
    --line: #49304f;
}
body { background: radial-gradient(ellipse at 92% 5%, #77245b55 0, transparent 35%), radial-gradient(ellipse at 0 25%, #49266a44 0, transparent 38%), var(--paper); }
.site-header { background: #140d1eed; }
.button-dark, .button-orange { background: linear-gradient(115deg, #c22568, #ad2365); color: #fff5fb; box-shadow: 0 8px 28px #c2256833; }
.button-dark:hover, .button-orange:hover { background: linear-gradient(115deg, #d12a73, #b4256b); }
.button-cream { background: #fff5fb; color: #2e1234; }
.portrait-frame { background: #371d44; border-radius: 160px 160px 10px 10px; border: 1px solid #93517e; }
.hero-art { padding-top: 22px; }
.hero-photo { object-position: 50% 33%; }
.orbit-label { background: #41204e; color: #ffd0e8; border: 1px solid #a2598b; }
.floating-note { background: #301a3d; border-color: #7b426b; box-shadow: 0 9px 35px #0004; }
.note-icon { background: #67305c; color: #ffd0e8; }
.photo-caption { text-shadow: 0 2px 8px #000; }
.caption-dot { background: #ff9dcc; }
.feature-card { background: #25172f; }
.feature-card:hover { border-color: #d36bac; }
.feature-icon, .feature-card:nth-child(2) .feature-icon, .feature-card:nth-child(3) .feature-icon { background: #422650; }
.how-section { background: #201328; }
.step-index { border-color: #995c8c; }
.steps article:not(:last-child):after { background: #5d3667; }
.final-cta { background: linear-gradient(120deg, #512147, #39224f); border: 1px solid #a55086; }
.final-cta h2 em { color: #ffb7da; }
.cta-orbit { color: #b94b94; opacity: .4; }
.cta-note { color: #e7c6df; }
.hero-note { color: #ddc2dc; }
.hero h1 { font-size: clamp(66px, 6.4vw, 98px); }
.hero-description { max-width: 390px; }
.interests p { font-size: 22px; }
@media(max-width:1100px) { .interests p { font-size: 17px; gap: 15px; } }
@media(max-width:850px) { .hero h1 { font-size: 64px; } .portrait-frame { border-radius: 110px 110px 8px 8px; } }
@media(max-width:600px) { .hero h1 { font-size: clamp(53px, 16.5vw, 68px); } .interests p { font-size: 20px; } .hero-description { font-size: 13px; } .portrait-frame { border-radius: 140px 140px 8px 8px; } .floating-note { font-size: 18px; padding: 15px; } }
.final-cta { color: var(--ink); }
.button-outline { border: 1px solid #a6679a; color: var(--ink); background: transparent; }
.button-outline:hover { border-color: var(--orange); background: #371d44; }
.audience-switch { font-size: 12px; color: var(--orange); white-space: nowrap; }
.fan-hero h1 { font-size: clamp(60px, 6.2vw, 94px); line-height: 1.06; letter-spacing: -1.8px; margin-bottom: 26px; }
.fan-hero h1 em { display: block; }
.fan-hero .hero-description { max-width: 410px; font-size: 16px; line-height: 1.8; margin-bottom: 28px; }
.fan-hero .hero-note { margin-top: 20px; }
.fan-hero .hero-actions { gap: 16px; }
.fan-hero .hero-actions > a { min-height: 60px; padding: 0 26px; font-size: 16px; font-weight: 700; letter-spacing: .1px; border-radius: 9px; }
.fan-hero .hero-actions .button-orange { background: linear-gradient(115deg, #c81d68, #b21b63); border: 1px solid #f66aac; box-shadow: 0 8px 30px #df287b40; }
.fan-hero .hero-actions .button-orange:hover { background: linear-gradient(115deg, #d12672, #be226b); box-shadow: 0 10px 34px #df287b60; }
.fan-hero .hero-actions .text-link { color: #fff5fb; background: #422246; border: 1px solid #aa70a2; justify-content: center; transition: background .2s, border-color .2s; }
.fan-hero .hero-actions .text-link:hover { background: #58305e; border-color: #ff88bc; }
.fan-hero .hero-actions > a span { font-size: 25px; }
@media (max-width: 600px) { .fan-hero .hero-actions { gap: 12px; } .fan-hero .hero-actions > a { min-height: 54px; padding-inline: 18px; font-size: 14px; gap: 14px; } }
.fan-hero .hero-assurances { padding-top: 17px; margin-top: 18px; border-top: 1px solid var(--line); }
@media (max-width: 850px) and (min-width: 601px) { .fan-hero h1 { font-size: 57px; } }
@media (max-width: 600px) { .fan-hero h1 { font-size: clamp(46px, 11.7vw, 68px); letter-spacing: -1px; margin-bottom: 22px; } .fan-hero .hero-description { font-size: 15px; } }
.inline-link { color: var(--orange); text-decoration: underline; text-underline-offset: 3px; }
.creator-invitation { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding-bottom: 65px; }
.creator-invitation p { font-size: 12px; color: var(--muted); margin: 0; }
.creator-invitation p span { color: var(--ink); margin-right: 6px; }
@media(max-width:850px) { .creator-account-nav { gap: 16px; } }
@media(max-width:600px) { .creator-account-nav .login-link { display: none; } .audience-switch { font-size: 10px; } .creator-invitation { align-items: flex-start; flex-direction: column; gap: 15px; padding-bottom: 45px; } .creator-invitation p { font-size: 11px; line-height: 1.8; } .creator-invitation p span { display: block; } }

/* Shared public journeys: clear choices, readable details and mobile navigation. */
body { overflow-wrap: break-word; }
.skip-link { background: var(--orange); color: #260f24; }
.site-header { position: relative; z-index: 20; }
.hero-actions { flex-wrap: wrap; }
.hero-assurances { display: flex; flex-wrap: wrap; gap: 10px 18px; list-style: none; margin: 22px 0 0; padding: 0; color: var(--muted); font-size: 11px; line-height: 1.7; }
.hero-assurances li { display: flex; align-items: center; gap: 7px; }
.hero-assurances li::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--orange); flex-shrink: 0; }
.discovery-note { display: flex; align-items: center; gap: 28px; border-bottom: 1px solid var(--line); padding-block: 40px; }
.discovery-symbol { display: grid; place-items: center; flex-shrink: 0; width: 64px; height: 64px; border: 1px solid #88517d; border-radius: 50%; color: var(--orange); font-size: 37px; }
.discovery-note > div:nth-child(2) { flex: 1; }
.discovery-note .eyebrow { margin-bottom: 6px; font-size: 9px; }
.discovery-note h2 { font-size: 30px; line-height: 1.2; }
.discovery-note p:last-child { color: var(--muted); font-size: 13px; line-height: 1.8; margin-bottom: 0; }
.discovery-note > .text-link { flex-shrink: 0; }
.choice-section { display: grid; grid-template-columns: 1fr 1.1fr; gap: 90px; padding-block: 85px; border-bottom: 1px solid var(--line); }
.choice-section .eyebrow { margin-bottom: 16px; }
.choice-section > div > p:not(.eyebrow) { max-width: 340px; color: var(--muted); font-size: 14px; line-height: 1.85; margin: 24px 0; }
.choice-section .button { margin-top: 5px; }
.choice-list article { display: flex; align-items: flex-start; gap: 24px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.choice-list article:first-child { padding-top: 0; }
.choice-list article:last-child { border-bottom: 0; padding-bottom: 0; }
.choice-list article > span { font-family: var(--serif); color: var(--orange); font-size: 25px; line-height: 1.4; }
.choice-list h3 { font-size: 17px; font-weight: 500; margin: 3px 0 10px; }
.choice-list p { color: var(--muted); font-size: 14px; line-height: 1.8; margin: 0; }
.feature-card p, .steps p, .faq-list details p { font-size: 14px; line-height: 1.85; }
.feature-number { font-size: 10px; }
.feature-card a { font-size: 13px; min-height: 44px; }
.faq-list summary { font-size: 15px; min-height: 64px; }
.faq-heading > p:last-child { font-size: 14px; }
.footer-bottom { font-size: 11px; }
.footer-bottom nav a { display: inline-flex; align-items: center; min-height: 32px; }
.mobile-navigation { display: none; }
.creator-profile:hover { background: #362040; border-color: #d36bac; }
@media (max-width: 1000px) {
    .navigation { gap: 18px; }
    .main-nav { gap: 18px; font-size: 12px; }
    .account-nav { gap: 15px; }
    .choice-section { gap: 45px; }
}
@media (max-width: 850px) {
    .mobile-navigation { display: block; flex-shrink: 0; }
    .mobile-navigation summary { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 44px; height: 44px; list-style: none; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; }
    .mobile-navigation summary::-webkit-details-marker { display: none; }
    .mobile-navigation summary > span { width: 17px; height: 1px; background: var(--ink); }
    .mobile-navigation[open] summary { background: #371d44; border-color: var(--orange); }
    .mobile-navigation nav { position: absolute; top: calc(100% - 1px); left: 0; right: 0; display: grid; padding: 18px 24px; background: #25172f; border-block: 1px solid #88517d; box-shadow: 0 18px 30px #0005; }
    .mobile-navigation nav a { padding: 14px 0; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; font-size: 14px; }
    .mobile-navigation nav a:last-child { border: 0; }
    .account-nav { margin-left: auto; }
    .creator-account-nav .audience-switch { display: none; }
    .discovery-note { flex-wrap: wrap; gap: 20px; }
    .discovery-note > .text-link { margin-left: 84px; }
    .hero-note { align-items: flex-start; line-height: 1.8; }
    .hero-note .note-line { margin-top: 9px; flex-shrink: 0; }
}
@media (max-width: 600px) {
    .navigation { gap: 10px; }
    .brand img { width: 112px; }
    .account-nav .login-link { display: none; }
    .account-nav .button-small { min-height: 44px; padding-inline: 12px; }
    .account-nav .button-small span { display: none; }
    .hero-actions { gap: 14px 22px; }
    .hero-actions .text-link { min-height: 44px; font-size: 12px; }
    .hero-description { font-size: 15px; max-width: 100%; }
    .hero-assurances { font-size: 11px; gap: 8px 16px; margin-top: 18px; }
    .hero-note { font-size: 11px; }
    .hero .eyebrow { font-size: 9px; }
    .section-intro > p { font-size: 14px; }
    .feature-card { padding: 28px 25px 20px; }
    .feature-card p, .steps p, .faq-list details p { font-size: 14px; }
    .steps article { min-height: 120px; }
    .steps h3 { line-height: 1.5; }
    .faq-list summary { font-size: 14px; }
    .choice-section { grid-template-columns: 1fr; padding-block: 55px; gap: 35px; }
    .choice-list article { gap: 20px; }
    .choice-list h3 { font-size: 17px; }
    .choice-section .button { width: 100%; }
    .discovery-note { padding-block: 30px; gap: 16px; }
    .discovery-symbol { width: 42px; height: 42px; font-size: 28px; align-self: flex-start; }
    .discovery-note > div:nth-child(2) { flex-basis: calc(100% - 58px); }
    .discovery-note h2 { font-size: 28px; }
    .discovery-note > .text-link { margin-left: 58px; min-height: 44px; }
    .final-cta h2 { font-size: clamp(43px, 12.5vw, 62px); }
    .final-cta .eyebrow { font-size: 9px; line-height: 1.8; }
    .cta-note { font-size: 12px; line-height: 1.8; }
    .creator-invitation p { font-size: 14px; }
    .footer-bottom { font-size: 11px; }
    .footer-bottom nav { gap: 3px 18px; }
    .footer-signature { display: block; font-size: 9px; }
}
@media (max-width: 360px) {
    .shell { width: calc(100% - 32px); }
    .hero-actions > .button { width: 100%; }
    .hero h1 { font-size: 51px; }
    .account-nav .button-small { font-size: 9px; }
}

/* Discover Elara: a prominent invitation after the hero. */
.connection-perks { padding: 33px 0 36px; border-block: 1px solid #71416b; background: linear-gradient(100deg, #341b3a99, #51213f66); }
.connection-perks .eyebrow { margin-bottom: 24px; font-size: 10px; gap: 6px; flex-wrap: wrap; }
.connection-perks .eyebrow > span { color: var(--orange); }
.connection-perks-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.connection-perks-grid > div { display: flex; align-items: center; gap: 15px; }
.perk-symbol { display: grid; place-items: center; flex-shrink: 0; width: 46px; height: 46px; border: 1px solid #98618e; border-radius: 14px; color: #ff9dcc; background: #5b2a534d; font-size: 28px; }
.connection-perks h3 { font-size: 16px; font-weight: 700; line-height: 1.4; margin: 0 0 5px; }
.connection-perks p:not(.eyebrow) { margin: 0; font-size: 12px; line-height: 1.6; color: #ddc5df; }
.discovery-spotlight { position: relative; display: grid; grid-template-columns: 1.35fr 1fr; align-items: center; gap: 60px; margin-block: 64px 0; padding: 48px; border: 1px solid #995180; border-radius: 24px; background: radial-gradient(ellipse at 0 0, #7a2e5c44, transparent 65%), linear-gradient(115deg, #2e193a, #21142d); box-shadow: 0 22px 70px #0002; }
.discovery-spotlight .eyebrow { color: #edc8df; font-size: 10px; margin-bottom: 21px; }
.discovery-spotlight h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(43px, 4.5vw, 66px); line-height: 1.06; letter-spacing: -.9px; margin: 0 0 22px; }
.discovery-spotlight-copy > p:last-child { max-width: 470px; font-size: 15px; line-height: 1.85; color: #d7c4dc; margin: 0; }
.discovery-spotlight-action { text-align: center; padding: 24px 10px; border-left: 1px solid #704369; }
.spotlight-spark { display: block; color: #ff88bc; font-size: 42px; line-height: 1; margin-bottom: 17px; }
.discovery-spotlight-action h3 { margin: 0 0 8px; font-size: 23px; font-weight: 700; }
.discovery-spotlight-action > p { margin: 0 0 24px; color: #d7c4dc; font-size: 14px; line-height: 1.7; }
.discovery-spotlight-action .button { min-height: 58px; min-width: 235px; font-size: 16px; font-weight: 700; border: 1px solid #ee68a3; border-radius: 9px; }
.discovery-spotlight-action .text-link { display: flex; justify-content: center; margin-top: 14px; min-height: 44px; font-size: 13px; font-weight: 600; }
.discovery-spotlight-action small { display: block; color: #c7b8d0; font-size: 11px; line-height: 1.7; margin-top: 12px; }
@media (max-width: 1000px) { .connection-perks-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 25px; } .discovery-spotlight { gap: 30px; padding: 34px; } }
@media (max-width: 600px) { .connection-perks { padding-block: 27px; } .connection-perks-grid { gap: 22px 14px; } .connection-perks-grid > div { align-items: flex-start; flex-direction: column; gap: 10px; } .connection-perks h3 { font-size: 14px; } .connection-perks p:not(.eyebrow) { font-size: 12px; } .perk-symbol { width: 40px; height: 40px; font-size: 25px; } .discovery-spotlight { grid-template-columns: 1fr; margin-top: 36px; padding: 28px 23px; gap: 28px; border-radius: 18px; } .discovery-spotlight h2 { font-size: clamp(39px, 9vw, 50px); } .discovery-spotlight-copy > p:last-child { font-size: 14px; } .discovery-spotlight-action { border-left: 0; border-top: 1px solid #704369; padding: 27px 0 0; } .discovery-spotlight-action .button { width: 100%; min-width: 0; } }

.discovery-spotlight-with-photo { max-width: 1060px; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); gap: 22px 32px; padding: 24px; }
.discovery-spotlight-with-photo h2 { font-size: clamp(43px, 4vw, 56px); }
.discovery-spotlight-photo { position: relative; grid-column: 1; grid-row: 1 / span 2; align-self: stretch; min-height: 520px; margin: 0; overflow: hidden; border-radius: 17px; border: 1px solid #925078; background: #371d44; }
.discovery-spotlight-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
.discovery-spotlight-with-photo .discovery-spotlight-copy { grid-column: 2; padding: 20px 10px 0 0; align-self: end; }
.discovery-spotlight-with-photo .discovery-spotlight-action { grid-column: 2; text-align: left; border-left: 0; border-top: 1px solid #704369; padding: 24px 10px 15px 0; }
.discovery-spotlight-with-photo .spotlight-spark { display: none; }
.discovery-spotlight-with-photo .discovery-spotlight-action .text-link { justify-content: flex-start; }
@media (max-width: 850px) {
    .discovery-spotlight-with-photo { grid-template-columns: 1fr; gap: 26px; padding: 24px; }
    .discovery-spotlight-photo { grid-column: 1; grid-row: auto; min-height: 0; height: 410px; }
    .discovery-spotlight-with-photo .discovery-spotlight-copy, .discovery-spotlight-with-photo .discovery-spotlight-action { grid-column: 1; padding-right: 0; }
    .discovery-spotlight-with-photo .discovery-spotlight-copy { padding-top: 0; }
}
@media (max-width: 600px) {
    .discovery-spotlight-with-photo { padding: 18px; }
    .discovery-spotlight-photo { height: 350px; border-radius: 12px; }
    .discovery-spotlight-with-photo .discovery-spotlight-action { text-align: center; padding-bottom: 8px; }
    .discovery-spotlight-with-photo .discovery-spotlight-action .text-link { justify-content: center; }
}