/* =========================================================================
   Native interactions layer.
   Replaces the old Webflow jQuery runtime (IX2 scroll/load animations,
   the infinite carousel, dropdown/nav open states) with plain CSS that the
   React components drive. Loaded after logotouse.shared.css.
   ========================================================================= */

/* ---- Scroll / load reveal (replaces Webflow IX2 fade-in-move-on-scroll) -- */
.r-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s ease, transform 0.7s ease;
    will-change: opacity, transform;
}

.r-reveal.r-in {
    opacity: 1;
    transform: none;
}

/* Top-to-bottom stagger: the hero title/description settle first, then the
   section below glides in. Webflow's `animate-on-load-*` order classes drive
   the sequence; the delay only affects the reveal transition.                 */
.r-reveal.animate-on-load-1st {
    transition-delay: 0s;
}

.r-reveal.animate-on-load-2st {
    transition-delay: 0.09s;
}

.r-reveal.animate-on-load-3rd {
    transition-delay: 0.18s;
}

.r-reveal.animate-on-load-4rd {
    transition-delay: 0.27s;
}

@media (prefers-reduced-motion: reduce) {
    .r-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ---- Featured logos infinite marquee (replaces Webflow IX2 carousel) ----- */
@keyframes ltu-marquee {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}

.ltu-marquee {
    animation: ltu-marquee 45s linear infinite;
}

/* Pause every track together when hovering anywhere over the carousel, so the
   two grids stay in sync instead of one freezing while the other keeps moving. */
.template-infinte-holder:hover .ltu-marquee {
    animation-play-state: paused;
}

/* Carousel edge fades must never intercept clicks */
.carousel-overlay {
    pointer-events: none;
}

/* ---- Logo tile hover (replaces Webflow IX2 hover interaction) ------------
   The "See Details" button is hidden by default and slides up from below
   (with a fade) on hover, while the logo lifts so both sit comfortably.
   Mobile keeps the button hidden via `.logo-item-button { display: none }`
   in the base stylesheet, and :hover never fires on touch.                   */
.logo-item-holder-inside {
    overflow: hidden;
}

.logo-item-button {
    opacity: 0;
    transform: translateY(100%);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.logo-item-image {
    transition: transform 0.3s ease;
}

.logo-item-holder:hover .logo-item-button {
    opacity: 1;
    transform: translateY(0);
}

.logo-item-holder:hover .logo-item-image {
    transform: translateY(-15px);
}

/* ---- Dropdown anchoring safety -------------------------------------------- */
.w-dropdown {
    position: relative;
}

/* ---- Mobile nav menu open state (replaces Webflow nav overlay) ----------- */
@media screen and (max-width: 991px) {
    .nav-menu.ltu-open {
        display: flex !important;
        flex-direction: column;
        align-items: flex-start;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 50;
    }

    .nav-menu.ltu-open .nav-link-holder,
    .nav-menu.ltu-open .nav-link-holder .dropdown,
    .nav-menu.ltu-open .nav-link-holder .w-dropdown {
        width: 100%;
    }
}

/* ---- ConvertKit (FormKit) embed sizing -----------------------------------
   Moved verbatim out of the original inline Webflow <style> block.           */
.formkit-form [data-style="clean"] {
    padding: 0 !important;
}

.formkit-form[data-uid="92ce4c8263"] .formkit-field {
    min-width: 280px !important;
    margin: 0 !important;
    max-width: 260px !important;
    width: 260px !important;
}

.formkit-form[data-uid="92ce4c8263"] .formkit-input {
    border-width: 2px !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    max-width: 260px;
}

.formkit-form[data-uid="92ce4c8263"] .formkit-submit {
    width: 100px !important;
    margin: 0 !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    height: 100% !important;
}

.formkit-form[data-uid="92ce4c8263"] .formkit-alert-success {
    margin: 10px 0 !important;
    padding: 10px !important;
    border-style: solid !important;
    border-width: 1px !important;
    border-color: #4666da !important;
    border-radius: 7px !important;
    background-color: #fff !important;
    color: #4666da !important;
    font-size: 16px !important;
    font-weight: 400 !important;
}

.formkit-form[data-uid="92ce4c8263"] .formkit-fields {
    position: relative;
    padding-right: 80px;
    display: inline-block !important;
    text-align: left;
}

/* ---- Footer UI enhancement -----------------------------------------------
   Layers on top of the Webflow footer classes (native.css loads after the
   shared sheet, so these win): a softer card surface, a two-level heading
   hierarchy, springier link/social hovers, and divided top + bottom bars.    */

/* Card surface: subtle vertical gradient, hairline ring, and a lifted shadow */
.footer-content-container {
    background-image: linear-gradient(180deg, #ffffff 0%, #f3f3f5 100%);
    border: 1px solid rgba(0, 0, 0, 0.07);
    box-shadow: 0 1px 0 #fff inset, 0 24px 50px -30px rgba(17, 24, 39, 0.45);
    padding: 3em 2.75em;
}

/* Separate the logo / contribute row from the link grid */
.footer-top {
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    padding-bottom: 1.5em;
}

.footer-logo-link {
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.footer-logo-link:hover {
    transform: translateY(-1px);
    opacity: 0.85;
}

.footer-top .button {
    transition: transform 0.25s ease, background-color 0.3s ease;
}

.footer-top .button:hover {
    transform: translateY(-2px);
}

/* Primary column headings: darker + tighter for clearer hierarchy */
.footer-heading {
    color: #14181f;
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* Nested headings (Other / Legal / Special / newsletter) read as small labels */
.footer-top-margin .footer-heading {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 12px;
    font-weight: 600;
    color: #8a8f98;
}

/* Links: gentle slide on hover; the red color hover comes from the base sheet */
.footer-link {
    transition: color 0.25s ease, transform 0.25s ease;
}

.footer-link:hover {
    transform: translateX(3px);
}

/* Social icons: lift + deepen shadow instead of a flat opacity dim */
.footer-social-media {
    border-radius: 100px;
    transition: transform 0.25s ease;
}

.footer-social-media:hover {
    opacity: 1;
    transform: translateY(-3px);
}

.footer-social-media-holder .linkedin-background,
.footer-social-media-holder .twitter-background,
.footer-social-media-holder .facebook-background,
.footer-social-media-holder .instagram-background {
    box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.45);
    transition: box-shadow 0.25s ease;
}

.footer-social-media:hover .linkedin-background,
.footer-social-media:hover .twitter-background,
.footer-social-media:hover .facebook-background,
.footer-social-media:hover .instagram-background {
    box-shadow: 0 8px 18px -5px rgba(0, 0, 0, 0.5);
}

/* Newsletter field: clearer focus ring */
.subscribe-email-field {
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.subscribe-email-field:focus {
    box-shadow: 0 0 0 3px rgba(60, 96, 226, 0.15);
}

/* Bottom bar: divided + vertically centered */
.footer-bottom {
    border-top: 1px solid rgba(0, 0, 0, 0.07);
    align-items: center;
    padding-top: 1.5em;
}

@media screen and (max-width: 991px) {
    .footer-content-container {
        padding: 2em 1.25em;
    }
}

/* =========================================================================
   Pricing page (/pricing). Scoped `pp-` classes built on the site's brand
   tokens (indigo --primary, pink --pink, off-white --light-primary) so it
   matches the rest of the site without touching the shared Webflow sheet.
   ========================================================================= */

/* ---- Hero ---- */
.pp-hero {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

.pp-eyebrow {
    display: inline-block;
    color: var(--primary);
    background: rgba(70, 102, 218, 0.1);
    border-radius: 100px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.pp-title {
    font-size: 56px;
    line-height: 1.08;
    letter-spacing: -0.02em;
    margin: 0 0 14px;
}

.pp-subtitle {
    color: #5a6172;
    font-size: 19px;
    line-height: 1.5;
    max-width: 620px;
    margin: 0 auto 28px;
}

/* ---- Billing toggle ---- */
.pp-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #eceef3;
    border-radius: 100px;
    padding: 5px;
}

.pp-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
    background: transparent;
    color: #5a6172;
    font-size: 15px;
    font-weight: 600;
    padding: 9px 20px;
    border-radius: 100px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.pp-toggle-btn.is-active {
    background: #fff;
    color: var(--black);
    box-shadow: 0 1px 3px rgba(17, 24, 39, 0.12);
}

.pp-save-badge {
    background: var(--pink);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 3px 8px;
    border-radius: 100px;
}

/* ---- Plan cards ---- */
.pp-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: stretch;
    margin-top: 48px;
}

.pp-card {
    position: relative;
    background: #fff;
    border: 1px solid #e7e8ee;
    border-radius: 20px;
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.pp-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 50px -30px rgba(17, 24, 39, 0.35);
}

/* Spotlight card keeps the same height as the others (no vertical offset);
   emphasis comes from the shadow + the animated gradient border below. */
.pp-card.is-featured {
    border-color: var(--primary);
    box-shadow: 0 24px 60px -28px rgba(70, 102, 218, 0.55);
}

/* ---- Lifetime spotlight: animated rotating gradient border ---- */
@property --pp-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

@keyframes pp-rotate {
    to {
        --pp-angle: 360deg;
    }
}

.pp-card.pp-lifetime {
    position: relative;
    z-index: 0;
    border: none;
    background: transparent;
    box-shadow: 0 24px 60px -26px rgba(246, 71, 117, 0.45);
}

/* Layer 1: the rotating gradient fills the whole card. */
.pp-card.pp-lifetime::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    border-radius: 20px;
    background: conic-gradient(
        from var(--pp-angle, 0deg),
        #4666da,
        #f64775,
        #ffb347,
        #4666da
    );
    animation: pp-rotate 4s linear infinite;
}

/* Layer 2: a white panel on top of the gradient, inset 2px so only a 2px
   gradient edge shows — keeps the text on solid white and readable. */
.pp-card.pp-lifetime::after {
    content: '';
    position: absolute;
    inset: 2px;
    z-index: -1;
    border-radius: 18px;
    background: #fff;
}

@media (prefers-reduced-motion: reduce) {
    .pp-card.pp-lifetime::before {
        animation: none;
    }
}

.pp-badge {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 100px;
    white-space: nowrap;
}

.pp-card:not(.is-featured) .pp-badge {
    background: var(--black);
}

.pp-plan-name {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.pp-plan-tagline {
    color: #6b7280;
    font-size: 14.5px;
    line-height: 1.45;
    margin: 6px 0 22px;
    min-height: 42px;
}

.pp-price {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.pp-price-amount {
    font-size: 48px;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
}

.pp-price-period {
    color: #6b7280;
    font-size: 16px;
    font-weight: 500;
}

.pp-price-sub {
    color: #9097a3;
    font-size: 13.5px;
    margin-top: 8px;
    min-height: 20px;
}

/* Animate the price value when the in-card toggle flips (keyed remount). */
@keyframes pp-price-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pp-price-amount.pp-price-anim {
    animation: pp-price-in 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

/* In-card monthly/yearly toggle switch (Pro only) — sits next to the price. */
.pp-bill-switch {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
}

.pp-bill-side {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #9097a3;
    transition: color 0.25s ease;
}

.pp-bill-side.is-active {
    color: var(--black);
}

.pp-switch {
    position: relative;
    flex: 0 0 auto;
    width: 44px;
    height: 24px;
    border: none;
    border-radius: 100px;
    background: #d2d6df;
    cursor: pointer;
    padding: 0;
    transition: background 0.25s ease;
}

.pp-switch.is-on {
    background: var(--primary);
}

.pp-switch-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(17, 24, 39, 0.25);
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.pp-switch.is-on .pp-switch-knob {
    transform: translateX(20px);
}

.pp-bill-save {
    background: var(--pink);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 2px 6px;
    border-radius: 100px;
}

.pp-cta {
    width: 100%;
    margin-top: 22px;
    padding: 13px 20px;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
}

.pp-cta.pp-cta-soft {
    background: #f1f2f6;
    color: var(--black);
}

.pp-cta.pp-cta-soft:hover {
    background: #e6e8ef;
}

.pp-features-heading {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #9097a3;
    margin: 28px 0 14px;
}

.pp-features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pp-feature {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 15px;
    line-height: 1.4;
    color: #2b303b;
}

.pp-yes {
    color: var(--primary);
    flex: 0 0 auto;
    margin-top: 1px;
}

.pp-yes-light {
    color: #fff;
    flex: 0 0 auto;
    margin-top: 1px;
}

.pp-no {
    color: #c7ccd6;
}

/* ---- Risk reversal strip ---- */
.pp-reassure {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px 32px;
    margin-top: 40px;
    color: #5a6172;
    font-size: 14.5px;
    font-weight: 500;
}

.pp-reassure-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.pp-reassure-item svg {
    color: var(--primary);
}

/* ---- Founding lifetime offer ---- */
.pp-founding {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 32px;
    align-items: center;
    background: linear-gradient(135deg, #1c2230 0%, #2a3350 100%);
    color: #fff;
    border-radius: 24px;
    padding: 40px 44px;
}

.pp-founding-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #ffd76a;
    background: rgba(255, 215, 106, 0.12);
    border-radius: 100px;
    padding: 5px 12px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 14px;
}

.pp-founding-title {
    color: #fff;
    font-size: 34px;
    letter-spacing: -0.02em;
    margin: 0 0 8px;
}

.pp-founding-note {
    color: #c3c9d6;
    font-size: 16px;
    line-height: 1.5;
    margin: 0 0 20px;
    max-width: 460px;
}

.pp-founding-points {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.pp-founding-points .pp-feature {
    color: #e8ebf2;
}

.pp-founding-side {
    text-align: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    padding: 28px 24px;
}

.pp-founding-price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
    margin-bottom: 18px;
}

.pp-founding-price .pp-price-amount {
    color: #fff;
}

.pp-founding-price .pp-price-period {
    color: #aab2c4;
}

.pp-founding-fineprint {
    color: #aab2c4;
    font-size: 13px;
    margin-top: 14px;
}

/* ---- Comparison matrix ---- */
.pp-compare-scroll {
    overflow-x: auto;
    margin-top: 36px;
    border-radius: 16px;
    border: 1px solid #e7e8ee;
    background: #fff;
}

.pp-compare {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
}

.pp-compare th,
.pp-compare td {
    padding: 15px 18px;
    text-align: center;
    font-size: 15px;
}

.pp-compare thead th {
    position: sticky;
    top: 0;
    background: #fff;
    font-size: 16px;
    font-weight: 700;
    border-bottom: 1px solid #e7e8ee;
}

.pp-compare th.pp-compare-feature,
.pp-compare td.pp-compare-feature {
    text-align: left;
    color: #2b303b;
    font-weight: 500;
    width: 40%;
}

.pp-compare-pro {
    background: rgba(70, 102, 218, 0.05);
}

.pp-compare thead .pp-compare-pro {
    color: var(--primary);
}

.pp-compare-group td {
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 12px;
    font-weight: 700;
    color: #9097a3;
    background: #f7f8fa;
    padding-top: 14px;
    padding-bottom: 14px;
}

.pp-compare tbody tr:not(.pp-compare-group) td {
    border-bottom: 1px solid #f0f1f5;
}

.pp-compare .pp-yes {
    display: inline-block;
}

.pp-cell-text {
    font-size: 14px;
    font-weight: 600;
    color: #2b303b;
}

/* ---- FAQ ---- */
.pp-faq {
    max-width: 760px;
    margin: 36px auto 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pp-faq-item {
    border: 1px solid #e7e8ee;
    border-radius: 14px;
    background: #fff;
    padding: 4px 22px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.pp-faq-item[open] {
    border-color: var(--primary);
    box-shadow: 0 14px 30px -22px rgba(70, 102, 218, 0.5);
}

.pp-faq-q {
    list-style: none;
    cursor: pointer;
    font-size: 17px;
    font-weight: 600;
    color: var(--black);
    padding: 18px 28px 18px 0;
    position: relative;
}

.pp-faq-q::-webkit-details-marker {
    display: none;
}

.pp-faq-q::after {
    content: '+';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    font-weight: 400;
    color: var(--primary);
    line-height: 1;
}

.pp-faq-item[open] .pp-faq-q::after {
    content: '–';
}

.pp-faq-a {
    color: #5a6172;
    font-size: 15.5px;
    line-height: 1.6;
    padding: 0 0 20px;
}

/* ---- Final CTA ---- */
.pp-final-cta {
    text-align: center;
    background: var(--light-primary);
    border-radius: 24px;
    padding: 56px 32px;
    margin-top: 56px;
}

.pp-final-title {
    font-size: 34px;
    letter-spacing: -0.02em;
    margin: 0 0 10px;
}

.pp-final-sub {
    color: #5a6172;
    font-size: 17px;
    max-width: 520px;
    margin: 0 auto 26px;
}

.pp-final-cta .pp-cta {
    width: auto;
    display: inline-flex;
    padding-left: 34px;
    padding-right: 34px;
}

/* ---- Responsive ---- */
@media screen and (max-width: 991px) {
    .pp-title {
        font-size: 42px;
    }
    .pp-grid {
        grid-template-columns: 1fr;
        max-width: 460px;
        margin-left: auto;
        margin-right: auto;
    }
    .pp-plan-lifetime {
        order: 1;
    }
    .pp-plan-pro {
        order: 2;
    }
    .pp-plan-free {
        order: 3;
    }
    .pp-founding {
        grid-template-columns: 1fr;
        padding: 32px 26px;
    }
    .pp-founding-points {
        grid-template-columns: 1fr;
    }
    .pp-final-title {
        font-size: 28px;
    }
}

@media screen and (max-width: 479px) {
    .pp-title {
        font-size: 34px;
    }
    .pp-plan-tagline {
        min-height: 0;
    }
}

.pp-cta:disabled {
    opacity: 0.6;
    cursor: default;
}

.pp-notice {
    max-width: 560px;
    margin: 28px auto 0;
    text-align: center;
    background: #fff6e6;
    border: 1px solid #f6d99a;
    color: #8a5a00;
    border-radius: 12px;
    padding: 14px 18px;
    font-size: 15px;
}

/* =========================================================================
   Auth (/login, /signup) + Account (/account)
   ========================================================================= */
.auth-section {
    background: var(--light-primary);
}

/* Two-panel card: form on the left, photo + testimonial on the right. */
.auth-shell {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 1080px;
    margin: 0.5em auto;
    background: #fff;
    border: 1px solid #e7e8ee;
    border-radius: 24px;
    box-shadow: 0 40px 90px -55px rgba(17, 24, 39, 0.5);
    padding: 16px;
}

/* ---- Left: form column ---- */
.auth-left {
    display: flex;
    flex-direction: column;
    padding: 22px 40px 30px;
}

.auth-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.auth-logo {
    height: 28px;
    width: auto;
}

.auth-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #6b7280;
    font-size: 14px;
    font-weight: 600;
    transition: color 0.2s ease;
}

.auth-back:hover {
    color: var(--black);
}

.auth-left-body {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-form-inner {
    width: 100%;
    max-width: 380px;
}

.auth-head {
    text-align: center;
    margin-bottom: 26px;
}

.auth-title {
    font-size: 28px;
    letter-spacing: -0.02em;
    margin: 0 0 8px;
}

.auth-subtitle {
    color: #6b7280;
    font-size: 15px;
    line-height: 1.5;
    margin: 0;
}

.auth-plan-note {
    text-align: center;
    background: rgba(70, 102, 218, 0.08);
    border: 1px solid rgba(70, 102, 218, 0.2);
    color: var(--primary);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 13.5px;
    margin: 0 0 18px;
}

/* ---- Social buttons ---- */
.auth-social {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.auth-social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 11px 16px;
    border: 1.5px solid #e1e4ea;
    border-radius: 10px;
    background: #fff;
    color: var(--black);
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.auth-social-btn:hover {
    background: #f7f8fa;
    border-color: #d2d6df;
}

.auth-social-btn svg {
    flex: 0 0 auto;
}

.auth-social-note {
    margin-top: 12px;
    text-align: center;
    background: #fff6e6;
    border: 1px solid #f6d99a;
    color: #8a5a00;
    border-radius: 10px;
    padding: 9px 12px;
    font-size: 13px;
}

/* ---- Divider ---- */
.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #9097a3;
    font-size: 13px;
    margin: 20px 0;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e7e8ee;
}

/* ---- Form fields ---- */
.auth-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.auth-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.auth-field span {
    font-size: 13px;
    font-weight: 600;
    color: #2b303b;
}

.auth-field input {
    width: 100%;
    border: 1.5px solid #dfe2ea;
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 15px;
    color: var(--black);
    background: #fff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.auth-field input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(70, 102, 218, 0.15);
}

.auth-error {
    background: #fdecec;
    border: 1px solid #f5c2c2;
    color: #b02525;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 14px;
}

.auth-info {
    background: rgba(34, 160, 90, 0.1);
    border: 1px solid rgba(34, 160, 90, 0.3);
    color: #1f9254;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 14px;
}

.auth-link-btn {
    align-self: flex-start;
    background: none;
    border: none;
    padding: 0;
    color: var(--primary);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    text-decoration: underline;
}

/* "Check your inbox" panel after signup */
.auth-verify {
    text-align: center;
}

.auth-verify-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    background: rgba(70, 102, 218, 0.1);
    color: var(--primary);
}

.auth-verify .auth-subtitle {
    margin-bottom: 18px;
}

.auth-verify .auth-submit {
    margin-top: 6px;
}

.auth-submit {
    width: 100%;
    padding: 12px 18px;
    background: var(--black);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
}

.auth-submit:hover {
    background: #000;
    transform: translateY(-1px);
}

.auth-submit:disabled {
    opacity: 0.6;
    cursor: default;
    transform: none;
}

.auth-alt {
    text-align: center;
    margin-top: 22px;
    color: #6b7280;
    font-size: 14.5px;
}

.auth-alt a {
    color: var(--primary);
    font-weight: 600;
}

/* ---- Right: photo + testimonial ---- */
.auth-right {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    min-height: 600px;
}

.auth-photo {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}

.auth-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.5) 100%);
}

.auth-quote {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 24px;
    color: #fff;
    background: rgba(20, 24, 31, 0.4);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 16px;
    padding: 22px 24px;
}

.auth-quote-stars {
    display: flex;
    gap: 3px;
    margin-bottom: 12px;
    color: #fbbf24;
}

.auth-quote-text {
    font-size: 18px;
    line-height: 1.4;
    font-weight: 500;
    letter-spacing: -0.01em;
    margin: 0 0 16px;
}

.auth-quote-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.auth-quote-name {
    font-weight: 700;
    font-size: 15px;
}

.auth-quote-role {
    color: rgba(255, 255, 255, 0.75);
    font-size: 13px;
}

.auth-quote-nav {
    display: flex;
    gap: 8px;
}

.auth-quote-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    cursor: pointer;
    transition: background 0.2s ease;
}

.auth-quote-btn:hover {
    background: rgba(255, 255, 255, 0.28);
}

@media screen and (max-width: 860px) {
    .auth-shell {
        grid-template-columns: 1fr;
        max-width: 460px;
    }
    .auth-right {
        display: none;
    }
    .auth-left {
        padding: 20px 24px 28px;
    }
}

/* ---- Account ---- */
.account-wrap {
    max-width: 680px;
    margin: 0 auto;
}

/* Header: avatar + identity */
.account-header {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 4px;
}

.account-avatar {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 26px;
    font-weight: 700;
    background: linear-gradient(140deg, #4666da, #f64775);
}

.account-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.account-name {
    font-size: 26px;
    letter-spacing: -0.02em;
    margin: 0 0 2px;
}

.account-email {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    color: #6b7280;
    font-size: 15px;
}

.account-verified {
    background: rgba(34, 160, 90, 0.12);
    color: #1f9254;
    border-radius: 100px;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 700;
}

.account-since {
    color: #9097a3;
    font-size: 13px;
    margin-top: 4px;
}

/* Usage stats */
.account-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 18px;
}

.account-stat {
    background: #fff;
    border: 1px solid #e7e8ee;
    border-radius: 14px;
    padding: 18px;
    text-align: center;
}

.account-stat-num {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--primary);
}

.account-stat-label {
    color: #6b7280;
    font-size: 13px;
    margin-top: 4px;
}

/* Detail list */
.account-details {
    background: #fff;
    border: 1px solid #e7e8ee;
    border-radius: 14px;
    margin-top: 18px;
    padding: 4px 20px;
}

.account-detail {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    font-size: 15px;
}

.account-detail + .account-detail {
    border-top: 1px solid #f0f1f5;
}

.account-detail span {
    color: #6b7280;
}

.account-detail strong {
    color: #2b303b;
    font-weight: 600;
}

/* Quick links */
.account-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    margin-top: 22px;
}

.account-links a {
    color: var(--primary);
    font-weight: 600;
    font-size: 14.5px;
}

@media screen and (max-width: 560px) {
    .account-stats {
        grid-template-columns: 1fr;
    }
}

.account-banner {
    background: rgba(70, 102, 218, 0.08);
    border: 1px solid rgba(70, 102, 218, 0.25);
    color: var(--primary);
    border-radius: 12px;
    padding: 14px 18px;
    font-weight: 600;
    margin-bottom: 24px;
}

.account-card {
    background: #fff;
    border: 1px solid #e7e8ee;
    border-radius: 18px;
    padding: 28px;
    margin-top: 18px;
}

.account-plan-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.account-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #9097a3;
}

.account-plan {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-top: 2px;
}

.account-renewal {
    color: #6b7280;
    font-size: 14px;
    margin-top: 4px;
}

.account-pill {
    background: #eef0f4;
    color: #6b7280;
    border-radius: 100px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 700;
}

.account-pill.is-paid {
    background: rgba(34, 160, 90, 0.12);
    color: #1f9254;
}

.account-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.account-actions .pp-cta {
    width: auto;
    margin-top: 0;
    padding-left: 26px;
    padding-right: 26px;
}

.account-perks {
    color: #6b7280;
    font-size: 15px;
    line-height: 1.6;
    margin-top: 20px;
}

.account-perks a {
    color: var(--primary);
    font-weight: 600;
}

/* ---- Navbar auth button (replaces the old "Design Logo with AI" button) ---- */
.nav-auth-button {
    display: flex;
    align-items: center;
    margin-right: 8px;
}

.nav-avatar-link {
    display: flex;
    align-items: center;
}

.nav-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #e7e8ee;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.nav-avatar-link:hover .nav-avatar {
    border-color: var(--primary);
    transform: translateY(-1px);
}

/* ---- Pricing trust strip + closing illustration ---- */
.pp-trust {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 16px;
    margin-top: 24px;
    color: #6b7280;
    font-size: 14.5px;
}

.pp-trust strong {
    color: var(--black);
    font-weight: 700;
}

.pp-trust-dot {
    width: 4px;
    height: 4px;
    border-radius: 100px;
    background: #c7ccd6;
}

.pp-final-img {
    width: 200px;
    height: auto;
    margin: 0 auto 18px;
    display: block;
}

@media screen and (max-width: 479px) {
    .pp-trust-dot {
        display: none;
    }
}

/* ---- Logo detail: show the "profile coming soon" tooltip only on Website hover ----
   The tooltip (.ld-profile-coming-soon) is the adjacent sibling of the profile
   content that holds the Website link, so :has() lets us gate it cleanly. */
.ld-profile-coming-soon {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.ld-profile-content:has(.website-link:hover) + .ld-profile-coming-soon {
    opacity: 1;
    visibility: visible;
}

/* ---- Normal font weight for all form inputs (overrides any inherited weight) ---- */
input,
textarea,
select,
.w-input,
.w-select,
.auth-field input,
.subscribe-email-field {
    font-weight: 400;
}

/* =========================================================================
   Site footer — modern dark redesign (Stripe / Linear inspired). Scoped
   `mf-` classes built on the brand indigo (--primary #4666da). Replaces the
   light Webflow footer markup; sells the platform up top, then a clean
   brand + link grid, then a divided bottom bar.
   ========================================================================= */

.mf-footer {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(120% 90% at 50% -20%, rgba(70, 102, 218, 0.22) 0%, rgba(70, 102, 218, 0) 55%),
        linear-gradient(180deg, #121317 0%, #0b0c0e 100%);
    color: #c4c7cf;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    font-family: inherit;
}

.mf-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 80px 24px 36px;
}

/* ---- CTA band ---- */
.mf-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 28px 40px;
    padding-bottom: 52px;
    margin-bottom: 52px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.mf-cta-copy {
    max-width: 560px;
}

.mf-cta-title {
    margin: 0 0 14px;
    color: #fff;
    font-size: clamp(26px, 3.4vw, 40px);
    line-height: 1.08;
    letter-spacing: -0.025em;
    font-weight: 700;
}

.mf-cta-text {
    margin: 0;
    font-size: 16px;
    line-height: 1.65;
    color: #9aa0ab;
}

.mf-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.mf-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 48px;
    padding: 0 22px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.mf-btn-icon {
    width: 18px;
    height: 18px;
    transition: transform 0.2s ease;
}

.mf-btn-primary {
    background: var(--primary, #4666da);
    color: #fff;
    box-shadow: 0 10px 30px -12px rgba(70, 102, 218, 0.9);
}

.mf-btn-primary:hover {
    background: #5878e6;
    transform: translateY(-2px);
    box-shadow: 0 16px 36px -12px rgba(70, 102, 218, 1);
}

.mf-btn-primary:hover .mf-btn-icon {
    transform: translateX(3px);
}

.mf-btn-ghost {
    background: rgba(255, 255, 255, 0.04);
    color: #e8eaee;
    border: 1px solid rgba(255, 255, 255, 0.16);
}

.mf-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

/* ---- Main grid ---- */
.mf-grid {
    display: grid;
    grid-template-columns: 1.35fr 2.65fr;
    gap: 56px;
    padding-bottom: 52px;
    margin-bottom: 32px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Brand column */
.mf-logo {
    display: inline-block;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.mf-logo:hover {
    opacity: 0.85;
    transform: translateY(-1px);
}

.mf-logo-img {
    height: 30px;
    width: auto;
    /* logo artwork is solid black — flip it to white for the dark surface */
    filter: brightness(0) invert(1);
}

.mf-tagline {
    margin: 18px 0 0;
    max-width: 320px;
    font-size: 15px;
    line-height: 1.6;
    color: #9aa0ab;
}

/* Newsletter */
.mf-news {
    margin-top: 26px;
}

.mf-news-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: #8b8f98;
    margin-bottom: 8px;
}

.mf-news-text {
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 1.55;
    color: #9aa0ab;
    max-width: 320px;
}

/* Dark-theme the functional ConvertKit (FormKit) embed so the real signup
   matches the footer surface. Global sizing rules still apply above. */
.mf-news .formkit-form {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
}

.mf-news .formkit-header,
.mf-news .formkit-subheader,
.mf-news .formkit-guarantee,
.mf-news .formkit-powered-by-convertkit {
    display: none !important;
}

.mf-news .formkit-input {
    height: 44px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    color: #fff !important;
    font-size: 15px !important;
}

.mf-news .formkit-input::placeholder {
    color: #71757e !important;
}

.mf-news .formkit-input:focus {
    border-color: var(--primary, #4666da) !important;
    background: rgba(255, 255, 255, 0.07) !important;
    box-shadow: 0 0 0 3px rgba(70, 102, 218, 0.25) !important;
}

.mf-news .formkit-submit {
    border-radius: 10px !important;
    background: var(--primary, #4666da) !important;
    transition: background-color 0.2s ease !important;
}

.mf-news .formkit-submit > div {
    color: #fff !important;
    font-weight: 600 !important;
}

.mf-news .formkit-submit:hover {
    background: #5878e6 !important;
}

/* Social */
.mf-social {
    display: flex;
    gap: 10px;
    margin-top: 26px;
}

.mf-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: #b6bac2;
    transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

.mf-social-link:hover {
    color: #fff;
    border-color: rgba(70, 102, 218, 0.7);
    background: rgba(70, 102, 218, 0.18);
    transform: translateY(-3px);
}

.mf-social-icon {
    width: 18px;
    height: 18px;
}

/* Link columns */
.mf-cols {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px 24px;
}

.mf-col-heading {
    margin: 0 0 16px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: #8b8f98;
}

.mf-col-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.mf-link {
    display: inline-flex;
    flex-direction: column;
    gap: 1px;
    text-decoration: none;
    color: #c4c7cf;
    font-size: 15px;
    line-height: 1.35;
    transition: color 0.2s ease, transform 0.2s ease;
}

.mf-link:hover {
    color: #fff;
    transform: translateX(3px);
}

.mf-link-note {
    font-size: 12px;
    color: #71757e;
}

/* ---- Bottom bar ---- */
.mf-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 24px;
    padding-top: 4px;
}

.mf-copy {
    font-size: 14px;
    color: #8b8f98;
}

.mf-copy strong {
    color: #c4c7cf;
    font-weight: 700;
}

.mf-legal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 22px;
}

.mf-legal-link {
    font-size: 14px;
    color: #8b8f98;
    text-decoration: none;
    transition: color 0.2s ease;
}

.mf-legal-link:hover {
    color: #fff;
}

/* ---- Responsive ---- */
@media screen and (max-width: 991px) {
    .mf-inner {
        padding: 60px 20px 32px;
    }

    .mf-grid {
        grid-template-columns: 1fr;
        gap: 44px;
    }

    .mf-cols {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px 24px;
    }
}

@media screen and (max-width: 560px) {
    .mf-cta {
        padding-bottom: 36px;
        margin-bottom: 36px;
    }

    .mf-cta-actions {
        width: 100%;
    }

    .mf-btn {
        flex: 1;
        justify-content: center;
    }

    .mf-cols {
        grid-template-columns: 1fr 1fr;
    }

    .mf-bottom {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* =========================================================================
   Home hero title — elevated treatment. Tighter, balanced type plus an
   animated brand-gradient highlight on the key word. Font sizes still come
   from the responsive rules in logotouse.shared.css.
   ========================================================================= */
.hero-text {
    letter-spacing: -0.03em;
    line-height: 1.04;
    text-wrap: balance;
}

.hero-highlight {
    background-image: linear-gradient(100deg, #4666da 0%, #7c5cff 34%, #f64775 68%, #4666da 100%);
    background-size: 220% 100%;
    background-position: 0% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: ltu-hero-shimmer 7s ease-in-out infinite;
}

@keyframes ltu-hero-shimmer {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-highlight {
        animation: none;
    }
}