/* Standalone-page reset: GHL's wrapper used to zero this out */
html, body { margin: 0; padding: 0; }

:root {
    --magenta: #EF06C0;
    --magenta-2: #E22EFA;
    --magenta-hover: #d4059f;
    --violet: #7b16c9;
    --navy: #0e1230;
    --navy-2: #171c3f;
    --ink: #10142e;
    --ink-2: #414769;
    --muted: #888ea9;
    --bg: #ffffff;
    --bg-soft: #f5f6fb;
    --line: #e9ebf4;
    --font-head: 'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
    --font-body: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
    --container: 1140px;
    --r: 18px;
    --r-sm: 12px;
    --shadow-sm: 0 1px 2px rgba(16,20,46,.05);
    --shadow: 0 12px 34px -14px rgba(16,20,46,.16);
    --shadow-lg: 0 30px 70px -28px rgba(16,20,46,.30);
    --shadow-mag: 0 14px 34px -10px rgba(239,6,192,.42);
}

.tb-page * {
    box-sizing: border-box
}

.tb-page {
    scroll-behavior: smooth
}

.tb-page {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--ink-2);
    font-family: var(--font-body);
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden
}

.tb-page img {
    max-width: 100%;
    display: block
}

.tb-page a {
    text-decoration: none;
    color: inherit
}

.tb-page .container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 26px
}

.tb-page .ico {
    width: 1em;
    height: 1em;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: none
}

.tb-page .ico.fill {
    fill: currentColor;
    stroke: none
}

.tb-page h1,.tb-page h2,.tb-page h3,.tb-page h4 {
    font-family: var(--font-head);
    color: var(--ink);
    margin: 0;
    letter-spacing: -0.02em;
    font-weight: 800;
    line-height: 1.05;
    text-wrap: balance
}

.tb-page .accent {
    color: var(--magenta)
}

.tb-page .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 12.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--magenta)
}

.tb-page .eyebrow.on-dark {
    color: #ffb8ec
}

.tb-page .sec-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 48px
}

.tb-page .sec-head h2 {
    font-size: clamp(2rem,3.9vw,2.85rem);
    margin: 14px 0 0
}

.tb-page .sec-head p {
    color: var(--ink-2);
    font-size: 17px;
    line-height: 1.6;
    margin: 15px 0 0
}

.tb-page .btn {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 15px;
    padding: 13px 22px;
    border-radius: 9999px;
    border: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    line-height: 1;
    transition: transform .26s cubic-bezier(.34,1.56,.64,1),box-shadow .22s ease,background .18s ease;
    white-space: nowrap
}

.tb-page .btn .ico {
    width: 17px;
    height: 17px;
    stroke-width: 2.4;
    transition: transform .26s cubic-bezier(.34,1.56,.64,1)
}

.tb-page .btn:hover .ico {
    transform: translateX(3px)
}

.tb-page .btn.lg {
    font-size: 16px;
    padding: 16px 28px
}

.tb-page .btn.sm {
    font-size: 13.5px;
    padding: 10px 16px
}

.tb-page .btn-primary {
    background: var(--magenta);
    color: #fff;
    box-shadow: var(--shadow-mag)
}

.tb-page .btn-primary:hover {
    background: var(--magenta-hover);
    transform: translateY(-2px)
}

.tb-page .btn-white {
    background: #fff;
    color: var(--navy);
    box-shadow: 0 14px 34px -12px rgba(0,0,0,.5)
}

.tb-page .btn-white:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 40px -12px rgba(0,0,0,.55)
}

.tb-page .btn-ghost-light {
    background: rgba(255,255,255,.08);
    color: #fff;
    border: 1.5px solid rgba(255,255,255,.34)
}

.tb-page .btn-ghost-light:hover {
    background: rgba(255,255,255,.16);
    border-color: rgba(255,255,255,.6)
}

.tb-page .btn-soft {
    background: #fff;
    color: var(--ink);
    border: 1.5px solid var(--line);
    box-shadow: var(--shadow-sm)
}

.tb-page .btn-soft:hover {
    border-color: var(--magenta);
    color: var(--magenta);
    transform: translateY(-2px)
}

.tb-page .logo {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 20px;
    letter-spacing: -0.03em;
    color: var(--ink)
}

.tb-page .logo .mk {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: linear-gradient(150deg,var(--magenta-2),var(--magenta));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 4px 12px -2px rgba(239,6,192,.55)
}

.tb-page .logo .mk .ico {
    width: 17px;
    height: 17px;
    stroke-width: 2.6
}

.tb-page .logo.on-dark {
    color: #fff
}

.tb-page .logo-img {
    height: 28px;
    width: auto;
    display: block
}

.tb-page .foot .logo-img {
    height: 32px
}

.tb-page .nav {
    position: sticky;
    top: 0;
    z-index: 60;
    padding: 15px 0;
    pointer-events: none
}

.tb-page .nav .bar {
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    background: rgba(255,255,255,.82);
    backdrop-filter: blur(16px) saturate(1.2);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    border: 1px solid rgba(255,255,255,.7);
    border-radius: 9999px;
    padding: 9px 9px 9px 20px;
    box-shadow: 0 10px 34px -14px rgba(16,20,46,.30)
}

.tb-page .nav .links {
    display: flex;
    align-items: center;
    gap: 28px
}

.tb-page .nav .links a {
    color: var(--ink-2);
    font-weight: 600;
    font-size: 14.5px;
    transition: color .15s
}

.tb-page .nav .links a:hover {
    color: var(--magenta)
}

.tb-page .nav .bar {
    position: relative
}

.tb-page .nav-toggle {
    display: none;
    flex: none;
    width: 42px;
    height: 42px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    color: var(--ink);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    padding: 0
}

.tb-page .nav-toggle .ico {
    width: 22px;
    height: 22px;
    stroke-width: 2.2
}

.tb-page .nav-toggle .x {
    display: none
}

.tb-page .nav.open .nav-toggle .burger {
    display: none
}

.tb-page .nav.open .nav-toggle .x {
    display: block
}

.tb-page .links-cta {
    display: none
}

.tb-page .hero {
    position: relative;
    overflow: hidden;
    text-align: center;
    background: radial-gradient(78% 58% at 50% 26%, rgba(239,6,192,.30) 0%, transparent 58%),
    radial-gradient(100% 70% at 50% 118%, rgba(239,6,192,.42) 0%, transparent 56%),
    radial-gradient(60% 50% at 88% 4%, rgba(226,46,250,.22) 0%, transparent 60%),
    linear-gradient(168deg,#160b33 0%,#2c0f5c 42%,#561aa0 78%,#7b16c9 100%);
    margin-top: -96px;
    padding-top: 96px
}

.tb-page .hero-inner {
    position: relative;
    z-index: 2;
    padding: 48px 0 0
}

.tb-page .hero .chip {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.22);
    color: #fff;
    border-radius: 9999px;
    padding: 7px 15px 7px 11px;
    font-size: 13px;
    font-weight: 600;
    backdrop-filter: blur(6px)
}

.tb-page .hero .chip .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ff5bd6;
    box-shadow: 0 0 0 4px rgba(255,91,214,.28)
}

.tb-page .hero h1 {
    color: #fff;
    font-size: clamp(2.5rem,5.6vw,4.3rem);
    line-height: 1.02;
    margin: 22px auto 0;
    max-width: 14ch
}

.tb-page .hero .sub {
    color: rgba(255,255,255,.84);
    font-size: clamp(16px,1.7vw,19px);
    line-height: 1.6;
    max-width: 600px;
    margin: 22px auto 0
}

.tb-page .hero .ctas {
    display: flex;
    gap: 13px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 32px
}

.tb-page .hero .micro {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 20px;
    color: rgba(255,255,255,.7);
    font-size: 13px;
    font-weight: 500
}

.tb-page .hero .micro span {
    display: inline-flex;
    align-items: center;
    gap: 6px
}

.tb-page .hero .micro .ico {
    width: 14px;
    height: 14px;
    color: #ff8fe0
}

.tb-page .hero-card-wrap {
    position: relative;
    z-index: 2;
    max-width: 540px;
    margin: 54px auto -90px;
    padding: 0 26px
}

.tb-page .hero-card {
    background: #fff;
    border-radius: 20px;
    border: 1px solid var(--line);
    padding: 20px;
    box-shadow: 0 50px 90px -34px rgba(20,8,48,.62)
}

.tb-page .hero-card .guar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 16px;
    text-align: left
}

.tb-page .hero-card .guar .sh {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: rgba(239,6,192,.10);
    color: var(--magenta);
    display: flex;
    align-items: center;
    justify-content: center
}

.tb-page .hero-card .guar .sh .ico {
    width: 21px;
    height: 21px
}

.tb-page .hero-card .guar b {
    display: block;
    color: var(--ink);
    font-size: 14.5px;
    font-family: var(--font-head)
}

.tb-page .hero-card .guar span {
    display: block;
    color: var(--muted);
    font-size: 12.5px;
    margin-top: 1px
}

.tb-page .sms {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: left
}

.tb-page .sms .meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 2px
}

.tb-page .sms .live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ink-2)
}

.tb-page .sms .live i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--magenta);
    box-shadow: 0 0 0 0 rgba(239,6,192,.5);
    animation: livePulse 1.8s ease-in-out infinite
}

@keyframes livePulse {
    0%,100% {
        box-shadow: 0 0 0 0 rgba(239,6,192,.5)
    }

    50% {
        box-shadow: 0 0 0 7px rgba(239,6,192,0)
    }
}

.tb-page .sms .count {
    font-variant-numeric: tabular-nums;
    color: var(--ink);
    font-weight: 700
}

.tb-page .bub {
    max-width: 84%;
    padding: 10px 13px;
    border-radius: 14px;
    font-size: 13.5px;
    line-height: 1.4
}

.tb-page .bub.out {
    align-self: flex-start;
    background: var(--bg-soft);
    color: var(--ink);
    border: 1px solid var(--line);
    border-bottom-left-radius: 5px
}

.tb-page .bub.in {
    align-self: flex-end;
    background: var(--magenta);
    color: #fff;
    border-bottom-right-radius: 5px
}

.tb-page .booked {
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(239,6,192,.07);
    border: 1px solid rgba(239,6,192,.20);
    border-radius: 12px;
    padding: 10px 12px
}

.tb-page .booked .ok {
    flex: none;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: var(--magenta);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 13px
}

.tb-page .booked b {
    color: var(--ink);
    font-size: 13px;
    display: block;
    font-family: var(--font-head)
}

.tb-page .booked span {
    color: var(--muted);
    font-size: 11.5px
}

.tb-page .typing {
    display: none
}

.tb-page .hero-card.is-anim [data-seq] {
    opacity: 0;
    transform: translateY(8px)
}

.tb-page .hero-card.is-anim [data-seq].show {
    opacity: 1;
    transform: none;
    transition: opacity .4s ease,transform .4s ease
}

.tb-page .hero-card.is-anim .typing {
    display: inline-flex;
    align-self: flex-end;
    gap: 5px;
    align-items: center;
    padding: 11px 14px;
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: 14px;
    border-bottom-right-radius: 5px;
    max-height: 42px;
    overflow: hidden
}

.tb-page .hero-card.is-anim .typing.hide {
    opacity: 0;
    max-height: 0;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
    transition: opacity .3s ease,max-height .35s ease,padding .35s ease
}

.tb-page .typing span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--muted);
    animation: typingDot 1.2s ease-in-out infinite
}

.tb-page .typing span:nth-child(2) {
    animation-delay: .18s
}

.tb-page .typing span:nth-child(3) {
    animation-delay: .36s
}

@keyframes typingDot {
    0%,60%,100% {
        transform: translateY(0);
        opacity: .5
    }

    30% {
        transform: translateY(-4px);
        opacity: 1
    }
}

.tb-page .reveal {
    opacity: 0;
    transform: translateY(14px);
    animation: rise .7s cubic-bezier(.22,.7,.3,1) forwards
}

.tb-page .d1 {
    animation-delay: .05s
}

.tb-page .d2 {
    animation-delay: .14s
}

.tb-page .d3 {
    animation-delay: .23s
}

.tb-page .d4 {
    animation-delay: .32s
}

.tb-page .d5 {
    animation-delay: .42s
}

@keyframes rise {
    to {
        opacity: 1;
        transform: none
    }
}

.tb-page .trust {
    background: var(--bg);
    padding: 30px 0 6px
}

.tb-page .trust .trust-row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px 14px
}

.tb-page .trust .trust-row.rv {
    opacity: 1;
    transform: none
}

.tb-page .trust .trust-row .chip {
    opacity: 0;
    transform: translateX(-22px);
    transition: opacity .6s cubic-bezier(.22,.7,.3,1),transform .6s cubic-bezier(.22,.7,.3,1)
}

.tb-page .trust .trust-row.in .chip {
    opacity: 1;
    transform: none
}

.tb-page .trust .trust-row.in .chip:nth-child(2) {
    transition-delay: .11s
}

.tb-page .trust .trust-row.in .chip:nth-child(3) {
    transition-delay: .22s
}

.tb-page .trust .lbl {
    text-align: center;
    font-weight: 700;
    font-size: 11.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 22px
}

.tb-page .trust .row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px 14px
}

.tb-page .trust .chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: 9999px;
    padding: 9px 16px;
    color: var(--ink);
    font-weight: 600;
    font-size: 14px
}

.tb-page .trust .chip .ico {
    width: 16px;
    height: 16px;
    color: var(--magenta)
}

.tb-page .section {
    padding: clamp(60px,8vw,100px) 0
}

.tb-page .section.soft {
    background: var(--bg-soft)
}

.tb-page .pos {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 18px;
    align-items: stretch;
    max-width: 1040px;
    margin: 0 auto
}

.tb-page .pos-col {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 24px 22px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column
}

.tb-page .pos-col.us {
    border: 1.5px solid var(--magenta);
    box-shadow: var(--shadow);
    position: relative
}

.tb-page .pos-col .lbl b {
    display: block;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 15px;
    color: var(--ink)
}

.tb-page .pos-col .lbl span {
    display: block;
    color: var(--muted);
    font-size: 12.5px;
    margin-top: 2px
}

.tb-page .pos-col .badge {
    display: inline-block;
    background: var(--magenta);
    color: #fff;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 12.5px;
    letter-spacing: 0.02em;
    padding: 5px 12px;
    border-radius: 9999px;
    margin-bottom: 8px;
    align-self: flex-start
}

.tb-page .pos-col h3 {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 15px;
    line-height: 1.5;
    color: var(--ink);
    margin: 12px 0 14px;
    flex: 1;
    letter-spacing: 0
}

.tb-page .pos-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px
}

.tb-page .tool-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 5px 9px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-2)
}

.tb-page .tool-chip .m {
    width: 17px;
    height: 17px;
    border-radius: 5px;
    background: #cfd3e6;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 800
}

.tb-page .tool-chip img.m {
    width: 19px;
    height: 19px;
    border-radius: 5px;
    object-fit: contain;
    background: #fff;
    padding: 1.5px;
    border: 1px solid var(--line)
}

.tb-page .pos-price {
    border-top: 1px solid var(--line);
    padding-top: 13px;
    display: flex;
    flex-direction: column;
    gap: 3px
}

.tb-page .pos-price .big {
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 21px;
    color: var(--ink)
}

.tb-page .pos-price .big b {
    font-size: 12.5px;
    color: var(--muted);
    font-weight: 600
}

.tb-page .pos-price .sm {
    font-size: 12.5px;
    color: var(--muted)
}

.tb-page .pos-col.us .pos-price .sm b {
    color: var(--magenta)
}

.tb-page .why {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 46px;
    align-items: center;
    max-width: 1000px;
    margin: 0 auto
}

.tb-page .why h2 {
    font-size: clamp(1.9rem,3.5vw,2.7rem);
    line-height: 1.06;
    margin: 14px 0 0
}

.tb-page .why p {
    color: var(--ink-2);
    font-size: 16.5px;
    line-height: 1.6;
    max-width: 430px;
    margin: 16px 0 0
}

.tb-page .why .nums {
    display: flex;
    flex-direction: column;
    gap: 14px
}

.tb-page .statcard {
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 24px 26px;
    background: #fff;
    box-shadow: var(--shadow-sm)
}

.tb-page .statcard.hot {
    border-color: var(--magenta);
    box-shadow: var(--shadow-mag)
}

.tb-page .statcard b {
    display: block;
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 46px;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--ink)
}

.tb-page .statcard.hot b {
    color: var(--magenta)
}

.tb-page .statcard span {
    display: block;
    margin-top: 7px;
    color: var(--muted);
    font-size: 14px;
    font-weight: 600
}

.tb-page .statcard.dim {
    background: var(--bg-soft)
}

.tb-page .statcard.dim b {
    color: var(--muted);
    font-size: 34px
}

.tb-page .inds {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px;
    max-width: 1080px;
    margin: 0 auto
}

.tb-page .ind {
    flex: 1 1 300px;
    max-width: 336px;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 22px;
    box-shadow: var(--shadow-sm);
    transition: transform .3s cubic-bezier(.34,1.4,.5,1),border-color .2s,box-shadow .3s
}

.tb-page .ind:hover {
    transform: translateY(-3px);
    border-color: var(--magenta);
    box-shadow: var(--shadow)
}

.tb-page .ind .ic {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: rgba(239,6,192,.08);
    color: var(--magenta);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px
}

.tb-page .ind .ic .ico {
    width: 21px;
    height: 21px
}

.tb-page .ind h3 {
    font-size: 18px;
    margin: 0 0 7px
}

.tb-page .ind p {
    color: var(--ink-2);
    font-size: 14px;
    line-height: 1.5;
    margin: 0 0 15px;
    flex: 1
}

.tb-page .ind .lk {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--magenta);
    font-weight: 700;
    font-size: 13.5px;
    font-family: var(--font-head)
}

.tb-page .ind .lk .ico {
    width: 15px;
    height: 15px;
    transition: transform .26s cubic-bezier(.34,1.56,.64,1)
}

.tb-page .ind:hover .lk .ico {
    transform: scale(1.18)
}

.tb-page .inds-foot {
    text-align: center;
    color: var(--muted);
    font-size: 15px;
    margin: 30px 0 0
}

.tb-page .inds-foot a {
    color: var(--magenta);
    font-weight: 700
}

.tb-page .flow {
    display: flex;
    flex-direction: column;
    gap: clamp(40px,5.5vw,76px);
    max-width: 1000px;
    margin: 0 auto
}

.tb-page .flow-row {
    display: grid;
    grid-template-columns: 0.84fr 1.16fr;
    gap: clamp(26px,4.5vw,56px);
    align-items: center
}

.tb-page .flow-row .flow-img {
    order: 2
}

.tb-page .flow-row--rev {
    grid-template-columns: 1.16fr 0.84fr
}

.tb-page .flow-row--rev .flow-img {
    order: 1
}

.tb-page .flow-row--rev .flow-text {
    order: 2
}

.tb-page .flow-step {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 13px;
    color: var(--magenta);
    letter-spacing: 0.04em;
    text-transform: uppercase
}

.tb-page .flow-step i {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: rgba(239,6,192,.10);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-style: normal;
    font-size: 13px;
    font-weight: 800
}

.tb-page .flow-text h3 {
    font-size: clamp(1.4rem,2.4vw,1.9rem);
    line-height: 1.1;
    margin: 13px 0 11px
}

.tb-page .flow-text p {
    color: var(--ink-2);
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
    max-width: 410px
}

.tb-page .flow-img img {
    width: 100%;
    height: auto;
    display: block
}

@media (hover:hover) and (min-width:881px) and (prefers-reduced-motion:no-preference) {
    .tb-page .flow-img img {
        transition: transform .5s cubic-bezier(.22,1,.36,1);
        will-change: transform
    }

    .tb-page .flow-img:hover img {
        transform: translateY(-9px) scale(1.018)
    }
}

.tb-page .flow-cta {
    text-align: center;
    margin: 40px 0 0
}

.tb-page .tabs {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 0 auto 20px;
    flex-wrap: wrap
}

.tb-page .tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 9999px;
    padding: 11px 20px;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 14.5px;
    color: var(--ink-2);
    cursor: pointer;
    transition: all .15s
}

.tb-page .tab .ico {
    width: 17px;
    height: 17px
}

.tb-page .tab[aria-selected="true"] {
    background: var(--magenta);
    border-color: var(--magenta);
    color: #fff;
    box-shadow: var(--shadow-mag)
}

.tb-page .tool-desc {
    text-align: center;
    max-width: 740px;
    margin: 0 auto 16px;
    color: var(--ink-2);
    font-size: 15px;
    line-height: 1.6
}

.tb-page .tool-frame {
    position: relative;
    width: 100%;
    height: 680px;
    max-width: 1000px;
    margin: 0 auto;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
    box-shadow: var(--shadow-lg)
}

.tb-page .tool-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: #ffffff
}

.tb-page .tabpanel[aria-hidden="true"] {
    display: none
}

.tb-page .scrape-note {
    max-width: 1000px;
    margin: 0 auto 12px;
    font-size: 12.5px;
    color: var(--muted);
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 10px 14px;
    line-height: 1.5
}

.tb-page .wall {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 18px;
    max-width: 1080px;
    margin: 0 auto
}

.tb-page .quote {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    transition: transform .3s cubic-bezier(.34,1.4,.5,1),box-shadow .3s
}

.tb-page .quote:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow)
}

.tb-page .quote .vid {
    position: relative;
    aspect-ratio: 16/10;
    background: #0a0e22 center/cover;
    cursor: pointer
}

.tb-page .quote .vid .play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255,255,255,.94);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 22px rgba(0,0,0,.34);
    transition: transform .16s
}

.tb-page .quote .vid:hover .play {
    transform: translate(-50%,-50%) scale(1.08)
}

.tb-page .quote .vid .play svg {
    width: 21px;
    height: 21px;
    fill: var(--magenta);
    margin-left: 3px
}

.tb-page .quote .body {
    padding: 17px 19px 0;
    color: var(--ink);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.45;
    font-family: var(--font-head);
    letter-spacing: -0.01em
}

.tb-page .quote .who {
    padding: 13px 19px 18px;
    margin-top: auto
}

.tb-page .quote .nm {
    color: var(--ink);
    font-weight: 700;
    font-size: 13.5px
}

.tb-page .quote .mt {
    color: var(--magenta);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    margin-top: 2px
}

.tb-page .statstrip {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    max-width: 820px;
    margin: 38px auto 0;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow-sm);
    overflow: hidden
}

.tb-page .stat {
    text-align: center;
    padding: 28px 20px
}

.tb-page .stat + .stat {
    border-left: 1px solid var(--line)
}

.tb-page .stat .n {
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 42px;
    line-height: 1;
    color: var(--ink);
    letter-spacing: -0.03em
}

.tb-page .stat .n em {
    font-style: normal;
    color: var(--magenta)
}

.tb-page .stat .l {
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 7px
}

.tb-page .tiers {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 20px;
    align-items: start;
    max-width: 1120px;
    margin: 0 auto
}

.tb-page .tier {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-sm)
}

.tb-page .tier.feat {
    border: 1.5px solid var(--magenta);
    box-shadow: var(--shadow);
    position: relative
}

.tb-page .tier .ribbon {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--magenta);
    color: #fff;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    box-shadow: var(--shadow-mag)
}

.tb-page .tier .name {
    font-size: 20px;
    margin: 0
}

.tb-page .tier .price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin: 10px 0 4px
}

.tb-page .tier .price .num {
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 42px;
    line-height: 1;
    color: var(--ink);
    letter-spacing: -0.03em
}

.tb-page .tier .price .unit {
    color: var(--muted);
    font-weight: 600;
    font-size: 14.5px
}

.tb-page .tier .tsub {
    color: var(--ink-2);
    font-size: 14px;
    line-height: 1.5;
    margin: 6px 0 18px;
    min-height: 40px
}

.tb-page .tier ul {
    list-style: none;
    margin: 0 0 22px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1
}

.tb-page .tier li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--ink-2);
    font-size: 13.5px;
    line-height: 1.45
}

.tb-page .tier li .ico {
    width: 16px;
    height: 16px;
    color: var(--magenta);
    stroke-width: 2.6;
    margin-top: 2px
}

.tb-page .tier li b {
    color: var(--ink)
}

.tb-page .tier .tcta {
    margin-top: auto
}

.tb-page .tier .tcta a {
    width: 100%;
    justify-content: center
}

.tb-page .price-note {
    text-align: center;
    color: var(--muted);
    font-size: 14px;
    margin: 28px auto 0;
    max-width: 600px
}

.tb-page .final {
    position: relative;
    overflow: hidden;
    text-align: center;
    background: radial-gradient(70% 60% at 50% 8%, rgba(239,6,192,.34) 0%, transparent 58%),
    radial-gradient(80% 70% at 50% 120%, rgba(123,22,201,.5) 0%, transparent 60%),
    linear-gradient(168deg,#180c38 0%,#3a127a 60%,#6f17c4 100%);
    padding: clamp(64px,9vw,104px) 0
}

.tb-page .final .panel {
    position: relative;
    z-index: 2;
    max-width: 680px;
    margin: 0 auto
}

.tb-page .final h2 {
    color: #fff;
    font-size: clamp(2.1rem,4.6vw,3.3rem);
    line-height: 1.04;
    margin: 0
}

.tb-page .final p {
    color: rgba(255,255,255,.84);
    font-size: 17.5px;
    line-height: 1.6;
    margin: 18px auto 28px;
    max-width: 540px
}

.tb-page .final .fmeta {
    color: rgba(255,255,255,.66);
    font-size: 13.5px;
    font-weight: 500;
    margin-top: 18px
}

.tb-page .refer {
    background: var(--bg-soft)
}

.tb-page .refer-card {
    position: relative;
    overflow: hidden;
    max-width: 940px;
    margin: 0 auto;
    text-align: center;
    border-radius: 28px;
    padding: clamp(40px,5vw,68px) clamp(22px,4vw,60px);
    color: #fff;
    background: radial-gradient(60% 80% at 12% 0%, rgba(255,143,224,.42) 0%, transparent 55%),
    radial-gradient(72% 90% at 100% 110%, rgba(123,22,201,.55) 0%, transparent 60%),
    linear-gradient(150deg,#c1059b 0%,#7b16c9 100%);
    box-shadow: 0 44px 90px -46px rgba(123,22,201,.65)
}

.tb-page .refer-card::before {
    content: "";
    position: absolute;
    inset: -45%;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(circle at 30% 30%, rgba(255,184,236,.45) 0%, transparent 42%);
    animation: referGlow 11s ease-in-out infinite
}

@keyframes referGlow {
    0%,100% {
        transform: translate(0,0)
    }

    50% {
        transform: translate(10%,8%)
    }
}

.tb-page .refer-card > * {
    position: relative;
    z-index: 1
}

.tb-page .refer-card .refer-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 14px;
    padding: 11px 18px;
    margin-bottom: 20px;
    box-shadow: 0 16px 38px -18px rgba(0,0,0,.45)
}

.tb-page .refer-card .refer-logo img {
    height: 26px;
    width: auto;
    display: block
}

.tb-page .refer-card .eyebrow {
    display: flex;
    justify-content: center;
    color: #ffd6f4
}

.tb-page .refer-card h2 {
    color: #fff;
    font-size: clamp(1.95rem,3.9vw,2.7rem);
    line-height: 1.06;
    margin: 12px 0 14px
}

.tb-page .refer-card .lead {
    color: rgba(255,255,255,.9);
    font-size: 17px;
    line-height: 1.6;
    max-width: 620px;
    margin: 0 auto 32px
}

.tb-page .refer-two {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 16px;
    align-items: stretch;
    max-width: 760px;
    margin: 0 auto 30px
}

.tb-page .refer-side {
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 18px;
    padding: 26px 22px;
    text-align: center
}

.tb-page .refer-side .lbl {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 12.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #ffd6f4;
    margin-bottom: 8px
}

.tb-page .refer-side .big {
    font-family: var(--font-head);
    font-weight: 800;
    font-size: clamp(2rem,4.6vw,2.9rem);
    line-height: 1;
    color: #fff;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px
}

.tb-page .refer-side .big .fv {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    background: rgba(255,255,255,.18);
    border-radius: 999px;
    padding: 4px 10px;
    color: #fff
}

.tb-page .refer-side .sub {
    font-size: 13.5px;
    line-height: 1.55;
    color: rgba(255,255,255,.84);
    margin-top: 12px
}

.tb-page .refer-plus {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 30px;
    color: rgba(255,255,255,.85)
}

.tb-page .refer-meta {
    color: rgba(255,255,255,.74);
    font-size: 13px;
    margin-top: 16px
}

.tb-page .foot {
    background: var(--bg-soft);
    color: var(--ink-2);
    padding: 54px 0 26px;
    border-top: 1px solid var(--line)
}

.tb-page .foot .top {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 30px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--line)
}

.tb-page .foot .blurb {
    font-size: 14px;
    color: var(--muted);
    max-width: 250px;
    margin: 14px 0 0;
    line-height: 1.6
}

.tb-page .foot h5 {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.04em;
    color: var(--ink);
    margin: 0 0 14px
}

.tb-page .foot ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 9px
}

.tb-page .foot ul a {
    color: var(--ink-2);
    font-size: 14px;
    transition: color .15s
}

.tb-page .foot ul a:hover {
    color: var(--magenta)
}

.tb-page .foot .bottom {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 22px;
    font-size: 13px;
    color: var(--muted)
}

.tb-page [id] {
    scroll-margin-top: 96px
}

.tb-page .hero::before {
    content: "";
    position: absolute;
    inset: -12%;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(38% 40% at 30% 36%, rgba(239,6,192,.20) 0%, transparent 62%),
    radial-gradient(36% 38% at 72% 30%, rgba(123,22,201,.22) 0%, transparent 62%);
    filter: blur(42px);
    animation: auraBreath 15s ease-in-out infinite alternate
}

@keyframes auraBreath {
    0% {
        transform: translate3d(0,0,0) scale(1)
    }

    50% {
        transform: translate3d(3%,-2%,0) scale(1.08)
    }

    100% {
        transform: translate3d(-2.5%,2%,0) scale(1.04)
    }
}

.tb-page .hero-h1 .w {
    display: inline-block;
    opacity: 0;
    transform: translateY(16px);
    animation: wordIn .62s cubic-bezier(.22,.7,.3,1) forwards
}

.tb-page .hero-h1 .w:nth-child(1) {
    animation-delay: .12s
}

.tb-page .hero-h1 .w:nth-child(2) {
    animation-delay: .18s
}

.tb-page .hero-h1 .w:nth-child(3) {
    animation-delay: .24s
}

.tb-page .hero-h1 .w:nth-child(4) {
    animation-delay: .30s
}

.tb-page .hero-h1 .w:nth-child(5) {
    animation-delay: .36s
}

.tb-page .hero-h1 .w:nth-child(6) {
    animation-delay: .42s
}

.tb-page .hero-h1 .w:nth-child(7) {
    animation-delay: .48s
}

.tb-page .hero-h1 .w:nth-child(8) {
    animation-delay: .56s
}

@keyframes wordIn {
    to {
        opacity: 1;
        transform: none
    }
}

.tb-page .nav .bar {
    transition: background .25s ease,box-shadow .25s ease,border-color .25s ease
}

.tb-page .nav.scrolled .bar {
    background: rgba(255,255,255,.94);
    border-color: var(--line);
    box-shadow: 0 14px 40px -16px rgba(16,20,46,.42)
}

.tb-page .tabpanel:not([aria-hidden="true"]) {
    animation: tabFade .34s cubic-bezier(.22,.7,.3,1)
}

@keyframes tabFade {
    from {
        opacity: 0;
        transform: translateY(8px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.tb-page .tier {
    transition: transform .3s cubic-bezier(.34,1.4,.5,1),box-shadow .3s,border-color .2s
}

.tb-page .tier:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow)
}

.tb-page .tier.feat:hover {
    box-shadow: var(--shadow-mag)
}

.tb-page .hero-card .guar .sh.gcal {
    background: #fff;
    border: 1px solid var(--line);
    padding: 6px
}

.tb-page .hero-card .guar .sh.gcal img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block
}

.tb-page .sms .mrow {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    align-self: flex-start;
    max-width: 92%
}

.tb-page .sms .mrow .cava {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    object-position: 50% 24%;
    border: 1px solid var(--line);
    background: var(--bg-soft)
}

.tb-page .sms .mrow .bub.out {
    align-self: auto;
    max-width: none;
    margin: 0
}

.tb-page .section.tdark {
    position: relative;
    background: radial-gradient(72% 52% at 82% 0%, rgba(239,6,192,.15) 0%, transparent 60%),
    linear-gradient(180deg,#0a0a0d 0%,#060608 55%,#050506 100%);
}

.tb-page .tdark .sec-head h2 {
    color: #fff
}

.tb-page .tdark .sec-head p {
    color: rgba(255,255,255,.72)
}

.tb-page .tdark .eyebrow {
    color: #ff8fe0
}

.tb-page .tdark .quote {
    background: rgba(255,255,255,.045);
    border-color: rgba(255,255,255,.10);
    box-shadow: 0 30px 60px -30px rgba(0,0,0,.6)
}

.tb-page .tdark .quote:hover {
    box-shadow: 0 36px 70px -28px rgba(239,6,192,.28)
}

.tb-page .tdark .quote .body {
    color: #fff
}

.tb-page .tdark .quote .nm {
    color: #fff
}

.tb-page .tdark .quote .mt {
    color: #ff8fe0
}

.tb-page .tdark .statstrip {
    background: rgba(255,255,255,.045);
    border-color: rgba(255,255,255,.10)
}

.tb-page .tdark .stat .n {
    color: #fff
}

.tb-page .tdark .stat .n em {
    color: #ff8fe0
}

.tb-page .tdark .stat .l {
    color: rgba(255,255,255,.55)
}

.tb-page .tdark .stat + .stat {
    border-color: rgba(255,255,255,.10)
}

.tb-page .nav-item {
    position: relative;
    display: flex;
    align-items: center
}

.tb-page .drop-trigger {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer
}

.tb-page .drop-trigger .caret {
    width: 13px;
    height: 13px;
    stroke-width: 2.4;
    transition: transform .18s
}

.tb-page .has-drop:hover .caret,.tb-page .has-drop:focus-within .caret {
    transform: rotate(180deg)
}

.tb-page .dropdown {
    position: absolute;
    top: calc(100% + 16px);
    left: 50%;
    transform: translateX(-50%) translateY(7px);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    padding: 8px;
    min-width: 254px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .18s ease,transform .18s ease;
    z-index: 70
}

.tb-page .dropdown::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -18px;
    height: 18px
}

.tb-page .has-drop:hover .dropdown,.tb-page .has-drop:focus-within .dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0)
}

.tb-page .dropdown a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--ink);
    font-weight: 600;
    font-size: 14px;
    transition: background .14s,color .14s
}

.tb-page .dropdown a:hover {
    background: var(--bg-soft);
    color: var(--magenta)
}

.tb-page .dropdown .di {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgba(239,6,192,.08);
    color: var(--magenta);
    display: flex;
    align-items: center;
    justify-content: center
}

.tb-page .dropdown .di .ico {
    width: 16px;
    height: 16px
}

.tb-page .marquee {
    position: relative;
    overflow: hidden;
    padding: 2px 0;
    -webkit-mask-image: linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
    mask-image: linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)
}

.tb-page .mq-track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: mqx 42s linear infinite;
    will-change: transform
}

.tb-page .mq-track .chip {
    flex: none;
    margin-right: 14px
}

.tb-page .marquee:hover .mq-track {
    animation-play-state: paused
}

@keyframes mqx {
    to {
        transform: translateX(-50%)
    }
}

.tb-page .hero-grid {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(125% 80% at 50% 26%,#000 0%,rgba(0,0,0,.55) 46%,transparent 78%);
    mask-image: radial-gradient(125% 80% at 50% 26%,#000 0%,rgba(0,0,0,.55) 46%,transparent 78%);
    animation: gridDrift 26s linear infinite
}

@keyframes gridDrift {
    to {
        background-position: 56px 56px,56px 56px
    }
}

.tb-page .hero-glow {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    width: 560px;
    height: 560px;
    border-radius: 50%;
    left: var(--mx,50%);
    top: var(--my,42%);
    transform: translate(-50%,-50%);
    background: radial-gradient(circle,rgba(239,6,192,.26) 0%,rgba(226,46,250,.10) 38%,transparent 64%);
    filter: blur(30px);
    transition: left .3s ease,top .3s ease
}

.tb-page .rv {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .65s cubic-bezier(.22,.7,.3,1),transform .65s cubic-bezier(.22,.7,.3,1)
}

.tb-page .rv.in {
    opacity: 1;
    transform: none
}

@media (max-width:880px) {
    .tb-page .nav-toggle {
        display: inline-flex
    }

    .tb-page .nav .bar {
        gap: 10px
    }

    .tb-page .nav .links {
        display: none;
        position: absolute;
        top: calc(100% + 10px);
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 18px;
        box-shadow: 0 24px 54px -22px rgba(16,20,46,.42);
        padding: 10px
    }

    .tb-page .nav.open .links {
        display: flex
    }

    .tb-page .nav .bar > a.btn-primary {
        display: none
    }

    .tb-page .nav .links a:not(.links-cta) {
        padding: 13px 14px;
        border-radius: 11px;
        font-size: 15.5px;
        color: var(--ink)
    }

    .tb-page .nav .links a:not(.links-cta):hover {
        background: var(--bg-soft)
    }

    .tb-page .nav .links .links-cta {
        display: flex;
        justify-content: center;
        margin-top: 6px;
        color: #fff
    }

    .tb-page .nav .links .links-cta:hover {
        color: #fff
    }

    .tb-page .nav .nav-item.has-drop {
        flex-direction: column;
        align-items: stretch
    }

    .tb-page .nav .dropdown {
        display: none
    }

    .tb-page .nav .drop-trigger .caret {
        display: none
    }

    .tb-page .hero-inds {
        gap: 7px
    }

    .tb-page .hero-inds .ci {
        font-size: 11.5px;
        padding: 5px 11px
    }

    .tb-page .tool-frame {
        height: 620px
    }

    .tb-page .hero-inner {
        padding: 32px 0 0
    }

    .tb-page .hero h1 {
        font-size: clamp(1.95rem,8.2vw,2.9rem);
        max-width: 16ch
    }

    .tb-page .hero .sub {
        font-size: 15.5px
    }

    .tb-page .hero .ctas {
        flex-direction: column;
        align-items: center;
        gap: 10px
    }

    .tb-page .hero .ctas .btn {
        justify-content: center;
        width: auto;
        min-width: 262px
    }

    .tb-page .hero .ctas .btn.lg {
        padding: 14px 24px;
        font-size: 15px
    }

    .tb-page .hero .micro {
        gap: 8px 14px;
        font-size: 12.5px
    }

    .tb-page .hero {
        padding-bottom: 50px
    }

    .tb-page .hero-card-wrap {
        margin: 36px auto 0
    }

    .tb-page #industries {
        padding-top: 56px!important
    }

    .tb-page .pos,.tb-page .why,.tb-page .inds,.tb-page .wall,.tb-page .tiers {
        grid-template-columns: 1fr
    }

    .tb-page .pos,.tb-page .tiers {
        max-width: 440px
    }

    .tb-page .inds,.tb-page .wall {
        max-width: 420px
    }

    .tb-page .why {
        max-width: 460px
    }

    .tb-page .flow-row,.tb-page .flow-row--rev {
        grid-template-columns: 1fr
    }

    .tb-page .refer-two {
        grid-template-columns: 1fr;
        max-width: 380px
    }

    .tb-page .refer-plus {
        padding: 4px 0
    }

    .tb-page .flow-row .flow-img,.tb-page .flow-row--rev .flow-img,.tb-page .flow-row--rev .flow-text {
        order: 0
    }

    .tb-page .statstrip {
        grid-template-columns: 1fr
    }

    .tb-page .stat + .stat {
        border-left: 0;
        border-top: 1px solid var(--line)
    }

    .tb-page .foot .top {
        grid-template-columns: 1fr 1fr
    }
}

@media (prefers-reduced-motion:reduce) {
    .tb-page .reveal {
        animation: none;
        opacity: 1;
        transform: none
    }

    .tb-page * {
        animation-duration: .001s!important
    }

    .tb-page {
        scroll-behavior: auto
    }

    .tb-page .mq-track {
        animation: none;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%
    }

    .tb-page .mq-track .chip[aria-hidden="true"] {
        display: none
    }

    .tb-page .hero-grid {
        animation: none
    }

    .tb-page .hero::before {
        animation: none
    }

    .tb-page .hero-h1 .w {
        opacity: 1;
        transform: none;
        animation: none
    }

    .tb-page .tabpanel:not([aria-hidden="true"]) {
        animation: none
    }

    .tb-page .rv {
        opacity: 1!important;
        transform: none!important;
        transition: none
    }

    .tb-page .trust .trust-row .chip {
        opacity: 1!important;
        transform: none!important;
        transition: none
    }
}

.tb-page .hero .chip.chip-guar {
    font-size: 16px;
    font-weight: 700;
    padding: 11px 22px 11px 16px;
    background: rgba(255,255,255,.14);
    border-color: rgba(255,255,255,.34)
}

.tb-page .hero .chip-guar .cal-ico {
    width: 16px;
    height: 16px;
    color: #ff8fe0;
    flex: none
}

.tb-page .hero-inds {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 9px;
    max-width: 680px;
    margin: 28px auto 0
}

.tb-page .hero-inds .hl {
    width: 100%;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255,255,255,.5);
    margin-bottom: 4px
}

.tb-page .hero-inds .ci {
    font-size: 12.5px;
    font-weight: 600;
    color: #fff;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 9999px;
    padding: 6px 13px
}

.tb-page .hero .chip.chip-guar b {
    color: #ff8fe0;
    font-weight: 800
}

.tb-page .chip-guar .tw {
    display: inline-block;
    min-width: 6.3em;
    text-align: left
}

.tb-page .chip-guar .tw-c {
    display: inline-block;
    font-weight: 800;
    margin-left: 1px
}

.tb-page .chip-guar .tw-c.on {
    animation: twBlink 1s steps(1) infinite
}

@keyframes twBlink {
    50% {
        opacity: 0
    }
}

.tb-page .hero-omni {
    color: rgba(255,255,255,.74);
    font-size: 13.5px;
    font-weight: 600;
    margin: 15px auto 0;
    max-width: 520px
}

.tb-page .hero-omni b {
    color: #ff8fe0;
    font-weight: 800
}

@media(max-width:560px) {
    .tb-page .hero .chip.chip-guar {
        font-size: 13.5px;
        padding: 9px 16px 9px 13px
    }
}

.tb-page .faq-wrap {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px
}

.tb-page .faq {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
    transition: border-color .2s ease,box-shadow .2s ease
}

.tb-page .faq[open] {
    border-color: rgba(239,6,192,.35);
    box-shadow: 0 18px 40px -26px rgba(20,8,48,.28)
}

.tb-page .faq summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 22px;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 16.5px;
    color: var(--ink);
    line-height: 1.35
}

.tb-page .faq summary::-webkit-details-marker {
    display: none
}

.tb-page .faq summary .q {
    flex: 1
}

.tb-page .faq summary .pm {
    flex: none;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    background: var(--bg-soft);
    color: var(--magenta);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .28s cubic-bezier(.34,1.56,.64,1),background .2s ease,color .2s ease
}

.tb-page .faq summary .pm svg {
    width: 14px;
    height: 14px
}

.tb-page .faq[open] summary .pm {
    transform: rotate(45deg);
    background: var(--magenta);
    color: #fff
}

.tb-page .faq .a {
    padding: 2px 22px 22px
}

.tb-page .faq .a p {
    margin: 0;
    color: var(--ink-2);
    font-size: 15.5px;
    line-height: 1.66
}

.tb-page .faq .a b {
    color: var(--ink);
    font-weight: 700
}

.tb-page .faq-foot {
    text-align: center;
    margin: 36px auto 0;
    color: var(--ink-2);
    font-size: 15.5px
}

.tb-page .faq-foot a {
    color: var(--magenta);
    font-weight: 700;
    text-decoration: none
}

.tb-page .faq-foot a:hover {
    text-decoration: underline
}

@media(max-width:560px) {
    .tb-page .faq summary {
        font-size: 15px;
        padding: 16px
    }

    .tb-page .faq .a {
        padding: 2px 16px 18px
    }
}

.tb-page .legal-intro {
    max-width: 760px;
    margin: 0 auto 20px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: #fff;
    border: 1px solid var(--line);
    border-left: 4px solid var(--magenta);
    border-radius: 16px;
    padding: 18px 20px;
    box-shadow: 0 18px 40px -30px rgba(20,8,48,.22)
}

.tb-page .legal-intro .shield {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--bg-soft);
    color: var(--magenta);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px
}

.tb-page .legal-intro .shield svg {
    width: 17px;
    height: 17px
}

.tb-page .legal-intro p {
    margin: 0;
    color: var(--ink-2);
    font-size: 15.5px;
    line-height: 1.62
}

.tb-page .legal-intro b {
    color: var(--ink);
    font-weight: 700
}

.tb-page .legal-sources {
    margin: 16px 0 2px;
    padding: 14px 0 0;
    border-top: 1px dashed var(--line);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px
}

.tb-page .legal-sources .lbl {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--ink-2);
    margin-right: 2px
}

.tb-page .legal-sources a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--magenta);
    font-weight: 700;
    font-size: 13.5px;
    text-decoration: none;
    line-height: 1;
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 7px 12px;
    transition: background .15s,border-color .15s,transform .15s
}

.tb-page .legal-sources a:hover {
    background: #fff;
    border-color: var(--magenta);
    transform: translateY(-1px)
}

.tb-page .legal-sources a .ext {
    flex: none;
    width: 13px;
    height: 13px;
    opacity: .85
}

@media(max-width:560px) {
    .tb-page .legal-intro {
        padding: 16px
    }

    .tb-page .legal-sources a {
        font-size: 13px
    }
}

.tb-page #legal .a p {
    margin: 0 0 11px
}

.tb-page #legal .a p:last-child {
    margin-bottom: 0
}

.tb-page .lsrc {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--magenta);
    font-weight: 700;
    font-size: .92em;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: baseline
}

.tb-page .lsrc:hover {
    text-decoration: underline
}

.tb-page .lsrc .ext {
    flex: none;
    width: 12px;
    height: 12px;
    opacity: .85;
    margin-top: -1px
}

.tb-page .lsrc + .lsrc {
    margin-left: 12px
}

.tb-page .faq-cat {
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 12.5px;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--magenta);
    margin: 30px 0 6px;
    padding: 0 2px 8px;
    border-bottom: 1px solid var(--line)
}

.tb-page .faq-wrap > .faq-cat:first-child {
    margin-top: 4px
}

.tb-page #roi {
    --roi-magenta: #EF06C0;
    --roi-magenta-2: #E22EFA;
    --roi-magenta-hover: #d4059f;
    --roi-pink: #ff59de;
    --roi-ink: #10142e;
    --roi-ink-2: #414769;
    --roi-muted: #888ea9;
    --roi-bg: #ffffff;
    --roi-soft: #f5f6fb;
    --roi-line: #e9ebf4;
    --roi-fh: 'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
    --roi-fb: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
    --roi-shadow-sm: 0 1px 2px rgba(16,20,46,.05);
    --roi-shadow: 0 12px 34px -14px rgba(16,20,46,.16);
    --roi-shadow-mag: 0 14px 34px -10px rgba(239,6,192,.42);
}

.tb-page #roi .roi-wrap {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 26px
}

.tb-page #roi .roi-head {
    text-align: center;
    max-width: 740px;
    margin: 0 auto 40px
}

.tb-page #roi .roi-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--roi-fb);
    font-weight: 700;
    font-size: 12.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--roi-magenta)
}

.tb-page #roi .roi-eyebrow .roi-ico {
    width: 15px;
    height: 15px;
    color: var(--roi-magenta);
    flex: none
}

.tb-page #roi .roi-head h2 {
    font-family: var(--roi-fh);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.05;
    color: var(--roi-ink);
    font-size: clamp(2rem,3.9vw,2.85rem);
    margin: 14px 0 0;
    text-wrap: balance
}

.tb-page #roi .roi-head h2 .roi-accent {
    color: var(--roi-magenta)
}

.tb-page #roi .roi-head p {
    color: var(--roi-ink-2);
    font-size: 17px;
    line-height: 1.6;
    margin: 15px 0 0
}

.tb-page #roi .roi-shell {
    max-width: 780px;
    margin: 0 auto;
    font-family: var(--roi-fb)
}

.tb-page #roi .roi-curbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 16px
}

.tb-page #roi .roi-toggle {
    display: inline-flex;
    background: var(--roi-soft);
    border: 1px solid var(--roi-line);
    border-radius: 9999px;
    padding: 4px;
    gap: 3px
}

.tb-page #roi .roi-curbtn {
    background: transparent;
    border: 0;
    color: var(--roi-muted);
    padding: 7px 16px;
    border-radius: 9999px;
    font-family: var(--roi-fh);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .03em;
    cursor: pointer;
    transition: all .15s;
    min-width: 58px
}

.tb-page #roi .roi-curbtn.roi-on {
    background: var(--roi-magenta);
    color: #fff;
    box-shadow: 0 4px 12px -3px rgba(239,6,192,.5)
}

.tb-page #roi .roi-card {
    background: var(--roi-bg);
    border: 1px solid var(--roi-line);
    border-radius: 18px;
    margin-bottom: 16px;
    overflow: hidden;
    box-shadow: var(--roi-shadow-sm);
    transition: border-color .3s ease,box-shadow .3s ease,opacity .3s ease
}

.tb-page #roi .roi-card.roi-active {
    border-color: var(--roi-magenta);
    box-shadow: var(--roi-shadow-mag)
}

.tb-page #roi .roi-card.roi-locked {
    opacity: .55
}

.tb-page #roi .roi-card.roi-locked .roi-body {
    pointer-events: none
}

.tb-page #roi .roi-chead {
    padding: 20px 26px 14px;
    display: flex;
    align-items: center;
    gap: 14px
}

.tb-page #roi .roi-num {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--roi-soft);
    border: 1px solid var(--roi-line);
    color: var(--roi-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--roi-fh);
    font-size: 14px;
    font-weight: 800;
    transition: all .25s
}

.tb-page #roi .roi-card.roi-active .roi-num,.tb-page #roi .roi-card.roi-done .roi-num {
    background: var(--roi-magenta);
    border-color: var(--roi-magenta);
    color: #fff;
    box-shadow: 0 6px 16px -5px rgba(239,6,192,.6)
}

.tb-page #roi .roi-card.roi-done .roi-num::before {
    content: '\2713';
    font-weight: 800
}

.tb-page #roi .roi-card.roi-done .roi-num-t {
    display: none
}

.tb-page #roi .roi-ctitle {
    font-family: var(--roi-fh);
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--roi-ink)
}

.tb-page #roi .roi-body {
    padding: 6px 26px 26px 70px
}

@media (max-width:600px) {
    .tb-page #roi .roi-body {
        padding: 6px 22px 22px 22px
    }
}

.tb-page #roi .roi-grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px
}

@media (max-width:540px) {
    .tb-page #roi .roi-grid2 {
        grid-template-columns: 1fr
    }
}

.tb-page #roi .roi-field label {
    display: block;
    font-family: var(--roi-fb);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--roi-ink-2);
    margin-bottom: 8px;
    font-weight: 700
}

.tb-page #roi .roi-iwrap {
    position: relative;
    display: flex;
    align-items: center
}

.tb-page #roi .roi-pre,.tb-page #roi .roi-suf {
    position: absolute;
    color: var(--roi-muted);
    font-size: 15px;
    font-weight: 600;
    pointer-events: none;
    font-family: var(--roi-fb)
}

.tb-page #roi .roi-pre {
    left: 15px
}

.tb-page #roi .roi-suf {
    right: 15px
}

.tb-page #roi .roi-input {
    width: 100%;
    background: var(--roi-soft);
    border: 1px solid var(--roi-line);
    color: var(--roi-ink);
    padding: 14px 16px 14px 32px;
    border-radius: 12px;
    font-family: var(--roi-fb);
    font-size: 16px;
    font-weight: 600;
    transition: all .15s;
    -moz-appearance: textfield
}

.tb-page #roi .roi-input.roi-noprefix {
    padding-left: 16px
}

.tb-page #roi .roi-input.roi-hassuf {
    padding-right: 42px
}

.tb-page #roi .roi-input::-webkit-inner-spin-button,.tb-page #roi .roi-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}

.tb-page #roi .roi-input:hover {
    border-color: #cfd3e6
}

.tb-page #roi .roi-input:focus {
    outline: none;
    border-color: var(--roi-magenta);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(239,6,192,.14)
}

.tb-page #roi.roi-cad .roi-ltv-pre {
    font-size: 13px
}

.tb-page #roi.roi-cad #roi-ltv {
    padding-left: 44px
}

.tb-page #roi .roi-helper {
    font-size: 12px;
    color: var(--roi-muted);
    margin-top: 6px;
    line-height: 1.5
}

.tb-page #roi .roi-helper.roi-warn {
    color: var(--roi-magenta);
    background: rgba(239,6,192,.06);
    border-left: 2px solid var(--roi-magenta);
    padding: 9px 12px;
    border-radius: 8px;
    margin-top: 10px
}

.tb-page #roi .roi-reveal {
    margin-top: 2px;
    padding: 18px 20px;
    background: linear-gradient(135deg,rgba(239,6,192,.08),rgba(226,46,250,.03));
    border: 1px solid rgba(239,6,192,.22);
    border-radius: 14px;
    text-align: center;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .4s,transform .4s
}

.tb-page #roi .roi-reveal.roi-show {
    opacity: 1;
    transform: none
}

.tb-page #roi .roi-reveal-lbl {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--roi-magenta);
    margin-bottom: 8px;
    font-weight: 800
}

.tb-page #roi .roi-reveal-val {
    font-family: var(--roi-fh);
    font-size: 38px;
    font-weight: 800;
    color: var(--roi-ink);
    letter-spacing: -.02em;
    line-height: 1
}

.tb-page #roi .roi-reveal-val .roi-cur {
    color: var(--roi-magenta);
    font-size: 24px;
    margin-right: 3px;
    vertical-align: super
}

.tb-page #roi .roi-reveal-formula {
    margin-top: 12px;
    font-size: 13px;
    color: var(--roi-muted);
    line-height: 1.5
}

.tb-page #roi .roi-reveal-formula em {
    color: var(--roi-magenta);
    font-style: normal;
    font-weight: 700
}

.tb-page #roi .roi-usage {
    background: var(--roi-soft);
    border: 1px solid var(--roi-line);
    border-radius: 14px;
    padding: 18px 20px;
    margin-bottom: 16px
}

.tb-page #roi .roi-usage-lbl {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--roi-ink-2);
    font-weight: 700;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap
}

.tb-page #roi .roi-usage-val {
    font-family: var(--roi-fh);
    font-size: 14px;
    color: var(--roi-magenta);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 800
}

.tb-page #roi .roi-slider {
    width: 100%;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: #dfe2ef;
    border-radius: 9999px;
    outline: none;
    margin: 14px 0 4px
}

.tb-page #roi .roi-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: var(--roi-magenta);
    border: 3px solid #fff;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 10px -1px rgba(239,6,192,.6);
    transition: transform .1s
}

.tb-page #roi .roi-slider::-webkit-slider-thumb:hover {
    transform: scale(1.12)
}

.tb-page #roi .roi-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: var(--roi-magenta);
    border: 3px solid #fff;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 10px -1px rgba(239,6,192,.6)
}

.tb-page #roi .roi-marks {
    display: flex;
    justify-content: space-between;
    font-family: var(--roi-fh);
    font-size: 11px;
    color: var(--roi-muted);
    margin-top: 4px;
    font-weight: 600
}

.tb-page #roi .roi-usage-help {
    font-size: 12px;
    color: var(--roi-muted);
    margin-top: 10px;
    line-height: 1.5
}

.tb-page #roi .roi-usage-help strong {
    color: var(--roi-ink)
}

.tb-page #roi .roi-plans {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 12px;
    margin-top: 6px
}

@media (max-width:600px) {
    .tb-page #roi .roi-plans {
        grid-template-columns: 1fr
    }
}

.tb-page #roi .roi-plan {
    background: var(--roi-bg);
    border: 1.5px solid var(--roi-line);
    border-radius: 14px;
    padding: 18px 16px;
    text-align: center;
    cursor: pointer;
    transition: all .18s;
    position: relative
}

.tb-page #roi .roi-plan:hover {
    border-color: #cfd3e6;
    transform: translateY(-2px);
    box-shadow: var(--roi-shadow)
}

.tb-page #roi .roi-plan.roi-sel {
    border-color: var(--roi-magenta);
    background: linear-gradient(180deg,rgba(239,6,192,.06),rgba(226,46,250,.02));
    box-shadow: var(--roi-shadow-mag);
    transform: translateY(-2px)
}

.tb-page #roi .roi-plan-pop {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--roi-magenta);
    color: #fff;
    font-family: var(--roi-fh);
    font-size: 10px;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: .08em
}

.tb-page #roi .roi-plan-name {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--roi-muted);
    margin-bottom: 8px;
    font-weight: 800
}

.tb-page #roi .roi-plan.roi-sel .roi-plan-name {
    color: var(--roi-magenta)
}

.tb-page #roi .roi-plan-price {
    font-family: var(--roi-fh);
    font-size: 24px;
    font-weight: 800;
    color: var(--roi-ink);
    letter-spacing: -.02em;
    margin-bottom: 4px
}

.tb-page #roi .roi-plan-price .roi-sm {
    font-size: 13px;
    color: var(--roi-muted);
    font-weight: 600
}

.tb-page #roi .roi-plan-contacts {
    font-size: 12.5px;
    color: var(--roi-ink-2);
    font-weight: 600
}

.tb-page #roi .roi-plan-setup {
    font-size: 11px;
    color: var(--roi-muted);
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--roi-line)
}

.tb-page #roi .roi-plan.roi-sel .roi-plan-setup {
    color: var(--roi-ink-2);
    border-top-color: rgba(239,6,192,.25)
}

.tb-page #roi .roi-final {
    margin-top: 6px;
    padding: 30px;
    background: linear-gradient(135deg,rgba(239,6,192,.07),rgba(226,46,250,.03));
    border: 1px solid rgba(239,6,192,.24);
    border-radius: 18px;
    display: none
}

.tb-page #roi .roi-final.roi-show {
    display: block;
    animation: roiFinalIn .5s ease both
}

@keyframes roiFinalIn {
    from {
        opacity: 0;
        transform: translateY(12px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.tb-page #roi .roi-headline {
    text-align: center;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(239,6,192,.18)
}

.tb-page #roi .roi-headline-num {
    font-family: var(--roi-fh);
    font-size: 56px;
    font-weight: 800;
    color: var(--roi-magenta);
    letter-spacing: -.03em;
    line-height: 1
}

.tb-page #roi .roi-headline-num .roi-pct {
    font-size: 34px;
    color: var(--roi-ink-2)
}

.tb-page #roi .roi-headline-lbl {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--roi-magenta);
    margin-top: 8px;
    font-weight: 800
}

.tb-page #roi .roi-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 22px
}

@media (max-width:540px) {
    .tb-page #roi .roi-stats {
        grid-template-columns: 1fr;
        gap: 14px
    }
}

.tb-page #roi .roi-stat {
    text-align: center
}

.tb-page #roi .roi-stat-lbl {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--roi-muted);
    margin-bottom: 8px;
    font-weight: 800
}

.tb-page #roi .roi-stat-val {
    font-family: var(--roi-fh);
    font-size: 30px;
    font-weight: 800;
    color: var(--roi-ink);
    letter-spacing: -.02em;
    line-height: 1
}

.tb-page #roi .roi-stat-val .roi-cur {
    color: var(--roi-muted);
    font-size: 18px;
    vertical-align: super;
    margin-right: 2px
}

.tb-page #roi .roi-stat-val.roi-profit {
    color: var(--roi-magenta)
}

.tb-page #roi .roi-stat-sub {
    font-size: 11.5px;
    color: var(--roi-muted);
    margin-top: 6px;
    font-weight: 600
}

.tb-page #roi .roi-cost {
    padding: 14px 18px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid var(--roi-line)
}

.tb-page #roi .roi-cost-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 6px 0;
    font-size: 13.5px
}

.tb-page #roi .roi-cost-row.roi-total {
    border-top: 1px solid var(--roi-line);
    margin-top: 6px;
    padding-top: 12px;
    font-weight: 700
}

.tb-page #roi .roi-cost-lbl {
    color: var(--roi-ink-2)
}

.tb-page #roi .roi-cost-lbl small {
    color: var(--roi-muted);
    font-size: 11px;
    margin-left: 6px
}

.tb-page #roi .roi-cost-v {
    font-family: var(--roi-fh);
    color: var(--roi-ink);
    font-weight: 700
}

.tb-page #roi .roi-callout {
    background: rgba(239,6,192,.05);
    border: 1px solid rgba(239,6,192,.22);
    border-radius: 14px;
    padding: 16px 18px;
    margin-top: 16px;
    font-size: 13.5px;
    color: var(--roi-ink-2);
    line-height: 1.55;
    display: none
}

.tb-page #roi .roi-callout.roi-show {
    display: block
}

.tb-page #roi .roi-callout h4 {
    font-family: var(--roi-fh);
    font-size: 13.5px;
    font-weight: 800;
    color: var(--roi-magenta);
    margin: 0 0 8px
}

.tb-page #roi .roi-callout-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 10px 0 12px
}

@media (max-width:600px) {
    .tb-page #roi .roi-callout-grid {
        grid-template-columns: 1fr
    }
}

.tb-page #roi .roi-callout-cell {
    background: #fff;
    border: 1px solid var(--roi-line);
    border-radius: 10px;
    padding: 12px 14px
}

.tb-page #roi .roi-callout-cell-l {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--roi-muted);
    margin-bottom: 6px;
    font-weight: 700
}

.tb-page #roi .roi-callout-cell-v {
    font-family: var(--roi-fh);
    font-size: 20px;
    font-weight: 800;
    color: var(--roi-ink);
    letter-spacing: -.02em
}

.tb-page #roi .roi-callout-cell-s {
    font-size: 11.5px;
    color: var(--roi-muted);
    margin-top: 2px;
    font-weight: 600
}

.tb-page #roi .roi-callout-nudge {
    font-size: 12.5px;
    color: var(--roi-ink-2);
    padding: 11px 13px;
    background: var(--roi-soft);
    border-radius: 10px;
    border-left: 3px solid var(--roi-magenta)
}

.tb-page #roi .roi-callout-nudge strong {
    color: var(--roi-magenta)
}

.tb-page #roi .roi-proof {
    margin-top: 16px;
    padding: 14px 18px;
    background: rgba(239,6,192,.05);
    border-radius: 12px;
    border-left: 3px solid var(--roi-magenta);
    font-size: 13.5px;
    color: var(--roi-ink-2);
    line-height: 1.6
}

.tb-page #roi .roi-proof strong {
    color: var(--roi-magenta);
    font-weight: 700
}

.tb-page #roi .roi-ctarow {
    margin-top: 20px;
    text-align: center
}

.tb-page #roi .roi-cta {
    background: var(--roi-magenta);
    color: #fff;
    border: 0;
    padding: 15px 30px;
    border-radius: 9999px;
    font-family: var(--roi-fh);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all .2s;
    box-shadow: var(--roi-shadow-mag);
    text-decoration: none;
    display: inline-block
}

.tb-page #roi .roi-cta:hover {
    background: var(--roi-magenta-hover);
    transform: translateY(-2px)
}

.tb-page #roi .roi-cta-sub {
    margin-top: 10px;
    font-size: 12px;
    color: var(--roi-muted);
    font-weight: 600
}

.tb-page {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    max-width: 100vw;
    overflow-x: clip;
    background: var(--bg)
} 
 /* ---- Section styles ----- */ 
:root{--transparent:transparent;--black:#000000}
/* Client-login link: deliberately quiet so the demo CTA stays the focal point */
.tb-page .nav .links .nav-login {
    color: var(--muted);
    font-size: 13.5px;
}

/* Hero industry chips link to their industry pages */
.tb-page .hero-inds a.ci {
    text-decoration: none;
    cursor: pointer;
    transition: background .18s, border-color .18s, transform .18s, box-shadow .18s;
}

.tb-page .hero-inds a.ci:hover,
.tb-page .hero-inds a.ci:focus-visible {
    background: var(--magenta);
    border-color: var(--magenta);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 22px -6px rgba(239,6,192,.7);
}
