/* Public Creator presentation. Scoped to preserve the site and private workspace. */
.creator-landing {
    --cl-ink:var(--riko-ink);
    --cl-muted:var(--riko-muted);
    --cl-teal:var(--riko-action);
    --cl-line:var(--riko-line);
    --cl-paper:var(--riko-surface-soft);
    color:var(--cl-ink);
    font-family:inherit;
    font-size:16px;
    line-height:1.65;
    max-width:1320px;
    margin:0 auto;
    padding:28px 24px 52px;
    box-sizing:border-box
}

.creator-landing * {
    box-sizing:border-box
}

.creator-landing h1,.creator-landing h2,.creator-landing h3,.creator-landing p,.creator-landing figure {
    margin:0
}

.creator-landing h1,.creator-landing h2,.creator-landing h3 {
    color:var(--cl-ink);
    font-family:"Open Sans",Arial,sans-serif;
    font-weight:600;
    letter-spacing:-.035em;
    line-height:1.12;
    text-transform:none
}

#tm-content .creator-landing h1 {
    font-size:clamp(36px,3.5vw,48px)!important;
    line-height:1.15!important;
    margin:19px 0 24px!important;
    font-weight:600!important
}

.creator-landing h2 {
    font-size:clamp(29px,3vw,43px)
}

.creator-landing h3 {
    font-size:20px;
    letter-spacing:-.018em
}

.creator-landing a {
    color:inherit;
    text-decoration:none
}

#tm-content .creator-landing a:focus-visible,#tm-content .creator-landing summary:focus-visible {
    outline:3px solid var(--riko-focus)!important;
    outline-offset:3px;
    box-shadow:none!important
}

.creator-landing p {
    color:var(--cl-muted)
}

.creator-landing .cl-eyebrow {
    font-size:11px;
    letter-spacing:.15em;
    font-weight:750;
    line-height:1.6;
    color:var(--cl-teal)
}

.cl-hero {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
    gap:46px;
    align-items:center;
    padding:25px 0 54px
}

.cl-lead {
    font-size:18px;
    max-width:550px;
    line-height:1.7
}

.cl-actions {
    display:flex;
    gap:18px;
    flex-wrap:wrap;
    align-items:center;
    margin-top:27px
}

.creator-landing .cl-button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:15px;
    background:var(--riko-action);
    color:var(--riko-action-contrast);
    padding:15px 20px;
    border:1px solid var(--riko-action);
    border-radius:5px;
    font-size:14px;
    line-height:1.5;
    font-weight:650;
    min-height:51px;
    transition:background .15s
}

.creator-landing .cl-button:hover {
    background:var(--riko-action-hover);
    color:var(--riko-action-contrast)
}

.cl-button svg {
    flex:none
}

.creator-landing .cl-text-link {
    font-weight:650;
    font-size:14px;
    min-height:44px;
    display:inline-flex;
    align-items:center;
    gap:7px;
    border-bottom:1px solid transparent
}

.creator-landing .cl-text-link:hover {
    border-bottom-color:currentColor
}

.creator-landing .cl-action-note {
    font-size:13px;
    margin-top:14px
}

.creator-landing .cl-creator-offer {
    margin:20px 0 0;
    padding:16px 18px;
    border:1px solid var(--riko-line);
    border-inline-start:3px solid var(--riko-action);
    border-radius:6px;
    background:var(--riko-surface);
    list-style:none
}

.cl-creator-offer li+li {
    margin-top:12px;
    padding-top:12px;
    border-top:1px solid var(--riko-line)
}

.cl-creator-offer strong {
    display:block;
    color:var(--riko-ink);
    font-size:18px;
    font-weight:700;
    line-height:1.35
}

.creator-landing .cl-creator-offer p {
    margin-top:5px;
    color:var(--riko-text);
    font-size:14px;
    line-height:1.55
}

.cl-action-note a {
    color:var(--cl-teal);
    text-decoration:underline;
    text-underline-offset:3px
}

.cl-account {
    border-left:3px solid var(--cl-teal);
    padding:3px 0 3px 15px;
    margin-top:24px;
    font-size:14px
}

.cl-account strong,.cl-account span {
    display:block
}

.cl-account span {
    color:var(--cl-muted);
    font-size:13px;
    margin-top:3px
}

.cl-hero-visual {
    background:var(--riko-surface-soft);
    padding:25px 23px 19px;
    border-radius:8px;
    min-width:0
}

.cl-product-label {
    display:flex;
    justify-content:space-between;
    gap:10px;
    margin-bottom:17px;
    font-size:10px;
    font-weight:750;
    letter-spacing:.09em;
    color:var(--riko-text)
}

.cl-screen {
    background:var(--riko-surface);
    border:1px solid var(--riko-line);
    border-radius:6px;
    overflow:hidden;
    box-shadow:0 12px 30px color-mix(in srgb, var(--riko-brand-deep) 6.27%, transparent);
    min-width:0
}

.cl-screen a {
    display:block
}

.cl-screen img {
    display:block;
    width:100%;
    height:auto
}

.cl-screen figcaption {
    font-size:11px;
    line-height:1.6;
    color:var(--cl-muted);
    padding:12px 15px;
    border-top:1px solid var(--riko-line)
}

.cl-screen figcaption span {
    display:block;
    font-size:10px;
    color:var(--cl-teal);
    margin-top:3px
}

.cl-mini-journey {
    display:flex;
    justify-content:space-between;
    gap:10px;
    list-style:none;
    padding:0;
    margin:22px 0 0
}

.cl-mini-journey li {
    font-size:11px;
    font-weight:650;
    line-height:1.5
}

.cl-mini-journey span {
    display:block;
    font-size:10px;
    letter-spacing:.08em;
    color:var(--riko-muted);
    margin-bottom:4px
}

.cl-benefits {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:40px;
    border-top:1px solid var(--cl-line);
    padding:35px 0 48px
}

.cl-index {
    font-size:11px;
    letter-spacing:.08em;
    color:var(--cl-teal);
    font-weight:700
}

.creator-landing .cl-benefits h2 {
    font-size:22px;
    letter-spacing:-.025em;
    margin:12px 0
}

.cl-benefits p {
    font-size:15px;
    line-height:1.75
}

.cl-feature {
    display:grid;
    grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr);
    gap:42px;
    align-items:center;
    background:var(--cl-paper);
    padding:45px 34px;
    border-radius:8px;
    scroll-margin-top:140px
}

.cl-feature h2 {
    margin:14px 0 22px
}

.cl-feature-copy>p:not(.cl-eyebrow) {
    font-size:15px
}

.cl-checks {
    list-style:none;
    margin:24px 0;
    padding:0
}

.cl-checks li {
    position:relative;
    padding:0 0 0 26px;
    margin:11px 0;
    font-size:14px
}

.cl-checks li::before {
    content:'✓';
    position:absolute;
    left:0;
    color:var(--cl-teal);
    font-weight:700
}

.creator-landing .cl-small {
    font-size:12px;
    line-height:1.65
}

.cl-follow {
    padding:64px 0
}

.cl-section-heading {
    max-width:710px
}

.cl-section-heading h2 {
    margin:15px 0 18px
}

.cl-section-heading>p:last-child {
    max-width:550px
}

.cl-follow-content {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,.9fr);
    gap:85px;
    align-items:center;
    margin-top:34px
}

.cl-follow-list {
    margin:0
}

.cl-follow-list>div {
    padding:18px 0;
    border-top:1px solid var(--cl-line)
}

.cl-follow-list dt {
    font-weight:700;
    font-size:17px;
    line-height:1.5
}

.cl-follow-list dd {
    color:var(--cl-muted);
    margin:6px 0 0;
    font-size:15px
}

.cl-flow-illustration {
    background:var(--riko-brand-deep);
    color:var(--riko-on-brand-muted);
    border-radius:8px;
    padding:32px 36px;
    max-width:500px
}

.cl-flow-brand {
    display:flex;
    align-items:center;
    gap:14px;
    padding-bottom:25px;
    margin-bottom:8px;
    border-bottom:1px solid color-mix(in srgb, var(--riko-line) 14.51%, transparent);
    font-size:13px;
    font-weight:750;
    letter-spacing:.09em
}

.cl-flow-brand>span>span {
    display:block;
    color:var(--riko-on-brand-muted);
    font-size:12px;
    letter-spacing:0;
    font-weight:400;
    margin-top:3px
}

.cl-flow-line {
    position:relative;
    display:flex;
    gap:19px;
    padding:20px 0 16px
}

.cl-flow-line:not(:last-of-type)::after {
    content:'';
    position:absolute;
    left:6px;
    top:36px;
    bottom:-23px;
    width:1px;
    background:var(--riko-brand)
}

.cl-flow-dot {
    width:13px;
    height:13px;
    flex:none;
    background:var(--riko-brand-end);
    border:3px solid var(--riko-brand);
    border-radius:50%;
    margin-top:6px;
    z-index:1
}

.cl-flow-line strong {
    font-size:18px;
    display:block;
    font-weight:650
}

.cl-flow-line div>span {
    font-size:12px;
    display:block;
    color:var(--riko-on-brand-muted);
    margin-top:3px
}

.creator-landing .cl-flow-illustration p {
    color:var(--riko-on-brand-muted);
    font-size:13px;
    padding-top:22px;
    margin-top:12px;
    border-top:1px solid var(--riko-inverse)
}

.cl-start {
    display:grid;
    grid-template-columns:1fr 1.2fr;
    gap:65px;
    border-top:1px solid var(--cl-line);
    padding:49px 0
}

.cl-start h2 {
    margin-top:15px
}

.cl-start>div:first-child {
    padding-inline-start:clamp(16px,2vw,24px)
}

.cl-steps {
    list-style:none;
    margin:0;
    padding:0
}

.cl-steps li {
    display:flex;
    gap:21px;
    margin-bottom:28px
}

.cl-steps li:last-child {
    margin-bottom:0
}

.cl-steps li>span {
    display:flex;
    align-items:center;
    justify-content:center;
    flex:none;
    width:36px;
    height:36px;
    border:1px solid var(--riko-line);
    border-radius:50%;
    color:var(--riko-muted);
    font-size:14px;
    font-weight:750
}

.cl-steps h3 {
    padding-top:5px
}

.cl-steps p {
    font-size:14px;
    margin-top:9px
}

.cl-faq {
    display:grid;
    grid-template-columns:1fr 1.2fr;
    gap:65px;
    border-top:1px solid var(--cl-line);
    padding:48px 0 60px
}

.creator-landing .cl-faq h2 {
    font-size:29px
}

.cl-faq details {
    border-bottom:1px solid var(--cl-line)
}

.cl-faq details:first-child {
    border-top:1px solid var(--cl-line)
}

.cl-faq summary {
    position:relative;
    list-style:none;
    cursor:pointer;
    padding:19px 28px 19px 0;
    font-size:16px;
    font-weight:650;
    line-height:1.5
}

.cl-faq summary::-webkit-details-marker {
    display:none
}

.cl-faq summary::after {
    content:'+';
    position:absolute;
    right:3px;
    font-size:22px;
    top:15px;
    color:var(--cl-teal);
    font-weight:400
}

.cl-faq details[open] summary::after {
    content:'−'
}

.cl-faq details p {
    font-size:14px;
    padding:0 20px 20px 0
}

.cl-final {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:35px;
    background:var(--riko-surface-soft);
    border:1px solid var(--riko-line);
    border-radius:8px;
    padding:36px
}

.cl-final h2 {
    font-size:30px;
    margin:10px 0
}

.cl-final p:not(.cl-eyebrow) {
    font-size:14px
}

.cl-final .cl-button {
    flex-shrink:0;
    max-width:350px
}

@media(min-width:1600px) {
    .creator-landing {
        padding-top:36px
    }
}

@media(max-width:1050px) {
    .cl-hero {
        gap:28px;
        grid-template-columns:1fr 1fr
    }
    .cl-hero-visual {
        padding:18px 15px
    }
    .cl-benefits {
        gap:26px
    }
    .cl-feature {
        padding:32px 24px;
        gap:28px
    }
    .cl-follow-content {
        gap:40px
    }
    .cl-start,.cl-faq {
        gap:35px
    }
    .cl-final {
        flex-direction:column;
        align-items:flex-start
    }
}

@media(max-width:760px) {
    .creator-landing {
        padding:18px 18px 32px
    }
    .cl-hero {
        grid-template-columns:1fr;
        padding:10px 0 32px;
        gap:30px
    }
    #tm-content .creator-landing h1 {
        font-size:clamp(32px,7.8vw,40px)!important;
        margin:16px 0 20px!important
    }
    .cl-lead {
        font-size:17px
    }
    .cl-actions {
        gap:12px;
        margin-top:23px
    }
    .cl-hero-visual {
        padding:20px 17px
    }
    .cl-mini-journey {
        margin-top:18px
    }
    .cl-benefits {
        grid-template-columns:1fr;
        gap:24px;
        padding:28px 0 34px
    }
    .cl-benefits>div {
        display:grid;
        grid-template-columns:35px 1fr;
        column-gap:12px
    }
    .cl-index {
        padding-top:4px
    }
    .creator-landing .cl-benefits h2 {
        margin:0 0 8px;
        font-size:21px
    }
    .cl-benefits p {
        grid-column:2;
        font-size:14px
    }
    .cl-feature {
        grid-template-columns:1fr;
        padding:28px 20px;
        gap:24px;
        scroll-margin-top:110px
    }
    .creator-landing h2 {
        font-size:32px
    }
    .cl-follow {
        padding:40px 0
    }
    .cl-follow-content {
        grid-template-columns:1fr;
        gap:22px;
        margin-top:22px
    }
    .cl-flow-illustration {
        max-width:none;
        padding:27px
    }
    .cl-follow-list>div {
        padding:15px 0
    }
    .cl-start,.cl-faq {
        grid-template-columns:1fr;
        gap:27px;
        padding:32px 0
    }
    .cl-steps li {
        gap:15px
    }
    .cl-faq summary {
        font-size:15px
    }
    .cl-final {
        padding:25px 22px;
        gap:20px
    }
    .cl-final h2 {
        font-size:27px
    }
    .cl-final .cl-button {
        max-width:100%;
        width:100%
    }
    .cl-screen figcaption {
        font-size:11px
    }
    .cl-product-label {
        font-size:9px
    }
    .creator-landing .cl-eyebrow {
        font-size:10px;
        letter-spacing:.12em
    }
}

@media(max-width:380px) {
    .creator-landing {
        padding-left:13px;
        padding-right:13px
    }
    .cl-hero-visual {
        padding:15px 12px
    }
    .cl-mini-journey li {
        font-size:10px
    }
    .cl-button {
        width:100%
    }
    .cl-product-label {
        letter-spacing:.04em
    }
}

@media(prefers-reduced-motion:reduce) {
    .creator-landing * {
        transition:none!important;
        scroll-behavior:auto!important
    }
}