:root {
    --coral: #FF4D1C;
    --coral-lt: #FFF0EB;
    --navy: #0D1B2A;
    --ink: #1A1A2E;
    --slate: #64748B;
    --silver: #F1F5F9;
    --white: #FFFFFF;
    --border: #E2E8F0;
    --green: #10B981;
    --bg: #C0C0C0;
    --r: 'Playfair Display', Georgia, serif;
    --s: 'Manrope', system-ui, sans-serif;
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    font-size: 16px;
}

body {
    font-family: var(--s);
    background: var(--bg);
    color: var(--ink);
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background-image: linear-gradient(45deg, rgba(0,0,0,0.04) 25%, transparent 25%), linear-gradient(-45deg, rgba(0,0,0,0.04) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(0,0,0,0.04) 75%), linear-gradient(-45deg, transparent 75%, rgba(0,0,0,0.04) 75%);
    background-size: 8px 8px;
    background-color: var(--bg);
}

/* ═══════════════════════════════
   THE RAISED CARD
═══════════════════════════════ */
.app-card {
    width: 90vw;
    height: 90vh;
    background: var(--white);
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 4px rgba(0,0,0,0.12), 0 8px 16px rgba(0,0,0,0.12), 0 24px 48px rgba(0,0,0,0.16), 0 48px 80px rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,0.8);
    position: relative;
}

/* ═══════════════════════════════
   NAV
═══════════════════════════════ */
nav {
    flex-shrink: 0;
    background: var(--white);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2rem;
    height: 62px;
    border-radius: 20px 20px 0 0;
    position: relative;
    z-index: 10;
}

.nav-logo {
    font-family: var(--r);
    font-weight: 900;
    font-size: 1.6rem;
    color: var(--ink);
    text-decoration: none;
    letter-spacing: -0.02em;
    cursor: pointer;
}

    .nav-logo span {
        color: var(--coral);
    }

.nav-links {
    display: flex;
    list-style: none;
    gap: 0.25rem;
    align-items: center;
}

    .nav-links a {
        font-size: 0.78rem;
        font-weight: 600;
        letter-spacing: 0.03em;
        color: var(--slate);
        text-decoration: none;
        padding: 0.45rem 0.9rem;
        border-radius: 8px;
        transition: background 0.2s, color 0.2s;
        cursor: pointer;
    }

        .nav-links a:hover {
            background: var(--silver);
            color: var(--ink);
        }

        .nav-links a.active {
            background: var(--coral-lt);
            color: var(--coral);
        }

.nav-btn {
    background: var(--coral) !important;
    color: var(--white) !important;
    padding: 0.5rem 1.25rem !important;
    border-radius: 100px !important;
    font-weight: 700 !important;
    transition: background 0.2s !important;
}

    .nav-btn:hover {
        background: #e63d0e !important;
    }

    .nav-btn.active {
        background: #e63d0e !important;
    }

.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
}

    .hamburger span {
        display: block;
        width: 22px;
        height: 2px;
        background: var(--ink);
        border-radius: 2px;
    }

/* ═══════════════════════════════
   CONTENT VIEWPORT
═══════════════════════════════ */
.viewport {
    flex: 1;
    position: relative;
    overflow: hidden;
}

/* ═══════════════════════════════
   PANELS
═══════════════════════════════ */
.panel {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px);
    transition: opacity 0.35s ease, transform 0.35s ease;
}

    .panel.active {
        opacity: 1;
        pointer-events: all;
        transform: translateY(0);
    }

    .panel::-webkit-scrollbar {
        width: 5px;
    }

    .panel::-webkit-scrollbar-track {
        background: transparent;
    }

    .panel::-webkit-scrollbar-thumb {
        background: var(--border);
        border-radius: 10px;
    }

/* ═══════════════════════════════
   PANEL: HOME / HERO
═══════════════════════════════ */
.hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* min-height (not a fixed height) so that on short viewports the hero can
       grow taller than the panel and the panel's own overflow-y:auto reveals
       everything. A fixed height:100% pinned the hero to the panel height and,
       combined with the centered + clipped .hero-left below, sliced the top of
       the headline off on laptop screens. */
    min-height: 100%;
}

.hero-left {
    display: flex;
    flex-direction: column;
    /* The left-pane OBJECTS scale up/down with viewport height: the headline,
       subtext, buttons and FREE/PRO pills all use viewport-height clamp()s
       below, so on a tall screen they grow larger and on a short screen they
       shrink — the objects themselves stretch to fill, not just the whitespace.
       Object scaling alone can't fully fill a tall pane without an absurdly
       large headline, so space-between absorbs the remainder: because the
       objects are already enlarged, the residual gaps stay modest. When the
       content is taller than the column the free space collapses to zero and
       the panel's own overflow-y:auto takes over (nothing is clipped). */
    justify-content: space-between;
    padding: 3rem 3rem 3rem 3.5rem;
    background: var(--white);
    position: relative;
    /* No overflow:hidden here — when the content is taller than the panel the
       column must be allowed to grow (letting the panel scroll) instead of
       clipping the top of the headline. The ::before dot-grid is inset:0 so it
       stays within the box without needing to clip. */
}

    .hero-left::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: radial-gradient(circle, #e2e8f0 1px, transparent 1px);
        background-size: 24px 24px;
        opacity: 0.55;
        pointer-events: none;
    }

    .hero-left > * {
        position: relative;
        z-index: 1;
    }

.hero-eyebrow {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: clamp(0.6rem, 0.45rem + 0.5vh, 0.72rem);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--coral);
    margin-bottom: clamp(0.5rem, 1.6vh, 1.4rem);
}

    .hero-eyebrow::before {
        content: '';
        display: inline-block;
        width: 24px;
        height: 2px;
        background: var(--coral);
        border-radius: 2px;
    }

.hero-h1 {
    font-family: var(--r);
    font-weight: 900;
    font-size: clamp(2rem, 1rem + 4.6vh, 4.4rem);
    line-height: 1.0;
    letter-spacing: -0.03em;
    color: var(--ink);
    margin-bottom: clamp(0.45rem, 1.4vh, 1.15rem);
}

    .hero-h1 em {
        font-style: italic;
        color: var(--coral);
    }

.hero-sub {
    font-size: clamp(0.85rem, 0.55rem + 0.9vh, 1.08rem);
    line-height: 1.75;
    color: var(--slate);
    max-width: 40ch;
    margin-bottom: clamp(0.8rem, 2.6vh, 2.1rem);
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: clamp(0.55rem, 1vh, 0.9rem);
    flex-wrap: wrap;
    margin-bottom: clamp(0.8rem, 2.8vh, 2.3rem);
}

.btn-coral {
    background: var(--coral);
    color: var(--white);
    font-family: var(--s);
    font-weight: 700;
    font-size: clamp(0.78rem, 0.55rem + 0.5vh, 0.95rem);
    padding: clamp(0.55rem, 1.1vh, 0.9rem) clamp(1.2rem, 2.4vh, 1.9rem);
    border-radius: 100px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 20px rgba(255,77,28,0.3);
}

    .btn-coral:hover {
        background: #e63d0e;
        transform: translateY(-2px);
        box-shadow: 0 8px 28px rgba(255,77,28,0.35);
    }

.btn-outline {
    background: transparent;
    color: var(--ink);
    font-family: var(--s);
    font-weight: 600;
    font-size: clamp(0.78rem, 0.55rem + 0.5vh, 0.95rem);
    padding: clamp(0.55rem, 1.1vh, 0.9rem) clamp(1.2rem, 2.4vh, 1.9rem);
    border-radius: 100px;
    border: 2px solid var(--border);
    cursor: pointer;
    text-decoration: none;
    transition: border-color 0.2s, color 0.2s;
    display: inline-block;
}

    .btn-outline:hover {
        border-color: var(--ink);
    }

.content-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.cpill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--ink);
    background: var(--silver);
    border-radius: 100px;
    padding: 0.35rem 0.8rem;
    border: 1px solid var(--border);
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    animation: fadeUp 0.5s both;
}

    .cpill:hover {
        background: var(--coral-lt);
        border-color: var(--coral);
        color: var(--coral);
    }

.cpill-pro {
    background: var(--coral);
    color: var(--white);
    font-size: 0.48rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.12rem 0.35rem;
    border-radius: 100px;
}

.cpill:nth-child(1) {
    animation-delay: .05s
}

.cpill:nth-child(2) {
    animation-delay: .1s
}

.cpill:nth-child(3) {
    animation-delay: .15s
}

.cpill:nth-child(4) {
    animation-delay: .2s
}

.cpill:nth-child(5) {
    animation-delay: .25s
}

.cpill:nth-child(6) {
    animation-delay: .3s
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-right {
    background: var(--navy);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 2rem;
    position: relative;
    overflow: hidden;
    gap: 1.75rem;
}

    .hero-right::before {
        content: '';
        position: absolute;
        width: 360px;
        height: 360px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(255,77,28,0.18) 0%, transparent 70%);
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        pointer-events: none;
    }

.qr-label {
    position: relative;
    z-index: 1;
    text-align: center;
}

    .qr-label p {
        font-size: 0.65rem;
        font-weight: 600;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: rgba(255,255,255,0.4);
        margin-bottom: 0.25rem;
    }

    .qr-label .qr-url {
        font-family: var(--r);
        font-size: 1rem;
        font-style: italic;
        color: var,--white);
    }

.qr-frame {
    position: relative;
    z-index: 1;
    background: var(--white);
    border-radius: 16px;
    padding: 1.25rem;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
    animation: floatQR 4s ease-in-out infinite;
}

@keyframes floatQR {
    0%,100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-8px)
    }
}

.hero-stats {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 1.75rem;
}

.hstat {
    text-align: center;
}

.hstat-num {
    font-family: var(--r);
    font-weight: 900;
    font-size: 1.5rem;
    color: var,--white);
    line-height: 1;
}

.hstat-label {
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.38);
    margin-top: 0.25rem;
}

.scan-badge {
    position: absolute;
    bottom: 1.75rem;
    right: 1.5rem;
    z-index: 2;
    background: var(--coral);
    color: var(--white);
    border-radius: 10px;
    padding: 0.6rem 0.85rem;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1.4;
    box-shadow: 0 8px 20px rgba(255,77,28,0.4);
    animation: popIn 0.6s 0.5s both cubic-bezier(0.34,1.56,0.64,1);
}

@keyframes popIn {
    from {
        opacity: 0;
        transform: scale(0.6)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

.scan-badge .big {
    font-size: 1.2rem;
    display: block;
}

/* ── Trust bar ── */
.trust-bar {
    background: var(--silver);
    border-top: 1px solid var(--border);
    padding: 0.75rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 1rem;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--slate);
    white-space: nowrap;
}

/* ═══════════════════════════════
   SHARED SECTION STYLES
═══════════════════════════════ */
.sec-wrap {
    max-width: 1000px;
    margin: 0 auto;
    padding: 2.5rem 2.5rem;
}

.sec-header {
    margin-bottom: 2rem;
}

.tag {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--coral);
    margin-bottom: 0.6rem;
}

.sec-title {
    font-family: var(--r);
    font-weight: 900;
    font-size: clamp(1.8rem, 3vw, 2.8rem);
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var,--ink);
    margin-bottom: 0.75rem;
}

    .sec-title em {
        font-style: italic;
        color: var(--coral);
    }

.sec-body {
    font-size: 0.92rem;
    color: var(--slate);
    line-height: 1.75;
    max-width: 52ch;
}

/* Pricing subtitle: keep on one line on desktop to save vertical space
   (the taller featured card was pushing the page into vertical scroll).
   Still wraps on narrow screens to avoid horizontal overflow. */
@media (min-width: 768px) {
    #pricingSubtitle { white-space: nowrap; }
}

/* ═══════════════════════════════
   PANEL: HOW IT WORKS
═══════════════════════════════ */
.steps-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 1.25rem;
}

.step-card {
    padding: 1.5rem;
    border-radius: 14px;
    background: var(--silver);
    border: 1px solid var(--border);
    transition: transform 0.25s, box-shadow 0.25s;
    position: relative;
    overflow: hidden;
}

    .step-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 36px rgba(0,0,0,0.08);
    }

    .step-card::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: var(--coral);
        transform: scaleX(0);
        transition: transform 0.25s;
        transform-origin: left;
    }

    .step-card:hover::after {
        transform: scaleX(1);
    }

.step-number {
    font-family: var(--r);
    font-weight: 900;
    font-size: 3.5rem;
    line-height: 1;
    color: rgba(0,0,0,0.05);
    position: absolute;
    top: 0.75rem;
    right: 1rem;
}

.step-icon {
    font-size: 1.75rem;
    display: block;
    margin-bottom: 0.75rem;
}

.step-title {
    font-weight: 800;
    font-size: 0.9rem;
    color: var,--ink);
    margin-bottom: 0.5rem;
}

.step-desc {
    font-size: 0.78rem;
    line-height: 1.75;
    color: var(--slate);
}

/* ═══════════════════════════════
   PANEL: FEATURES
═══════════════════════════════ */
#panel-features {
    background: var(--navy);
}

    #panel-features .sec-title {
        color: var(--white);
    }

    #panel-features .sec-body {
        color: rgba(255,255,255,0.5);
    }

    #panel-features .tag {
        color: #ff7a52;
    }

.types-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 1.1rem;
}

.type-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 14px;
    padding: 1.5rem;
    transition: background 0.25s, border-color 0.25s, transform 0.25s;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

    .type-card:hover {
        background: rgba(255,77,28,0.12);
        border-color: rgba(255,77,28,0.4);
        transform: translateY(-3px);
    }

    .type-card:focus-visible {
        outline: 2px solid var(--coral);
        outline-offset: 2px;
    }

.type-card-icon {
    font-size: 2rem;
    display: block;
    margin-bottom: 0.75rem;
}

.type-card-name {
    font-weight: 800;
    font-size: 0.95rem;
    color: var(--white);
    margin-bottom: 0.4rem;
}

.type-card-desc {
    font-size: 0.75rem;
    line-height: 1.75;
    color: rgba(255,255,255,0.5);
}

.type-pro-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: var(--coral);
    color: var(--white);
    font-size: 0.52rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.18rem 0.45rem;
    border-radius: 100px;
}

/* ═══════════════════════════════
   PANEL: ANALYTICS
═══════════════════════════════ */
.analytics-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    align-items: start;
}

.analytics-visual {
    background: var(--silver);
    border-radius: 16px;
    border: 1px solid var(--border);
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

.av-header {
    background: var(--ink);
    padding: 0.9rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.av-title {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
}

.live-dot {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--green);
}

    .live-dot::before {
        content: '';
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--green);
        animation: livePulse 1.5s infinite;
    }

@keyframes livePulse {
    0%,100% {
        opacity: 1
    }

    50% {
        opacity: 0.3
    }
}

.av-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    border-bottom: 1px solid var(--border);
}

.av-metric {
    padding: 1rem 1.25rem;
    border-right: 1px solid var(--border);
}

    .av-metric:last-child {
        border-right: none;
    }

.av-metric-val {
    font-family: var(--r);
    font-weight: 900;
    font-size: 1.6rem;
    color: var,--ink);
    line-height: 1;
}

    .av-metric-val.up {
        color: var(--green);
    }

.av-metric-label {
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--slate);
    margin-top: 0.25rem;
}

.av-bars {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.av-bar-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.av-bar-country {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var,--slate);
    width: 2.75rem;
    flex-shrink: 0;
}

.av-bar-track {
    flex: 1;
    height: 7px;
    background: var(--border);
    border-radius: 100px;
    overflow: hidden;
}

.av-bar-fill {
    height: 100%;
    border-radius: 100px;
    background: var(--coral);
    width: 0;
    transition: width 1.4s cubic-bezier(0.16,1,0.3,1);
}

    .av-bar-fill.b {
        background: var(--navy);
    }

    .av-bar-fill.g {
        background: var(--green);
    }

    .av-bar-fill.s {
        background: var(--slate);
    }

.av-bar-pct {
    font-size: 0.68rem;
    font-weight: 700;
    color: var,--ink);
    width: 2.25rem;
    text-align: right;
}

.analytics-points {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.5rem;
}

    .analytics-points li {
        display: flex;
        gap: 0.85rem;
        align-items: flex-start;
    }

.ap-icon {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: var,--coral-lt);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.ap-text strong {
    display: block;
    font-weight: 700;
    font-size: 0.85rem;
    color: var,--ink);
    margin-bottom: 0.15rem;
}

.ap-text span {
    font-size: 0.75rem;
    line-height: 1.6;
    color: var(--slate);
}

/* ═══════════════════════════════
   PANEL: WHO
═══════════════════════════════ */
#panel-who {
    background: var(--silver);
}

.who-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.who-card {
    border-radius: 18px;
    padding: 2.25rem;
    position: relative;
    overflow: hidden;
}

    .who-card.biz {
        background: var(--ink);
        color: var(--white);
    }

    .who-card.creator {
        background: var(--coral);
        color: var(--white);
    }

.who-card-label {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0.55;
    margin-bottom: 0.75rem;
}

.who-card-title {
    font-family: var(--r);
    font-weight: 900;
    font-size: clamp(1.5rem,2.5vw,2.2rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 1rem;
}

    .who-card-title em {
        font-style: italic;
    }

.who-card.biz .who-card-title em {
    color: var(--coral);
}

.who-card.creator .who-card-title em {
    color: var(--navy);
}

.who-card-body {
    font-size: 0.82rem;
    line-height: 1.8;
    opacity: 0.8;
    margin-bottom: 1.5rem;
}

.who-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.who-tag {
    font-size: 0.68rem;
    font-weight: 600;
    padding: 0.3rem 0.75rem;
    border-radius: 100px;
    border: 1.5px solid rgba(255,255,255,0.3);
    color: var(--white);
}

.who-card.creator .who-tag {
    border-color: rgba(13,27,42,0.3);
    color: var,--navy);
}

/* ═══════════════════════════════
   PANEL: PRICING
═══════════════════════════════ */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
    max-width: 1100px;
    margin: 0 auto;
}

/* Tighten the pricing panel's vertical rhythm so the taller featured
   card doesn't push the panel into an internal scroll. Scoped to
   #panel-pricing so other panels keep their original spacing. */
#panel-pricing .sec-wrap   { padding-top: 1.75rem; padding-bottom: 1.75rem; }
#panel-pricing .sec-header { margin-bottom: 1.25rem; }
#panel-pricing .plan-card  { padding-top: 1.5rem; padding-bottom: 1.5rem; }

.plan-card {
    border-radius: 18px;
    border: 2px solid var(--border);
    padding: 2rem;
    transition: border-color 0.25s, transform 0.25s;
    position: relative;
    display: flex;
    flex-direction: column;
}

    /* Pin each card's action button to the bottom so they align across
       the row regardless of how many features each plan lists. */
    .plan-card > .btn-outline,
    .plan-card > .btn-coral {
        margin-top: auto;
    }

    .plan-card:hover {
        transform: translateY(-3px);
    }

    .plan-card.featured {
        border-color: var(--coral);
        box-shadow: 0 8px 40px rgba(255,77,28,0.14);
    }

.plan-badge {
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--coral);
    color: var(--white);
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.28rem 0.9rem;
    border-radius: 0 0 8px 8px;
}

.plan-name {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--coral);
    margin-bottom: 0.4rem;
}

.plan-price {
    font-family: var(--r);
    font-weight: 900;
    font-size: 3rem;
    letter-spacing: -0.04em;
    color: var,--ink);
    line-height: 1;
    margin-bottom: 0.25rem;
}

    .plan-price sub {
        font-size: 0.9rem;
        font-family: var(--s);
        font-weight: 500;
        color: var(--slate);
    }

.plan-cycle {
    font-size: 0.72rem;
    color: var(--slate);
    margin-bottom: 1.5rem;
}

.plan-divider {
    border: none;
    border-top: 1px solid var(--border);
    margin-bottom: 1.25rem;
}

.plan-features {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 1.75rem;
}

    .plan-features li {
        display: flex;
        align-items: flex-start;
        gap: 0.6rem;
        font-size: 0.8rem;
        color: var,--ink);
        line-height: 1.5;
    }

        .plan-features li::before {
            content: '✓';
            color: var(--green);
            font-weight: 800;
            font-size: 0.8rem;
            flex-shrink: 0;
        }

        .plan-features li.off {
            color: var(--slate);
        }

            .plan-features li.off::before {
                content: '–';
                color: var(--border);
            }

/* ═══════════════════════════════
   PANEL: SIGN UP / CTA
═══════════════════════════════ */
#panel-signup {
    background: var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cta-inner {
    text-align: center;
    padding: 2rem;
    position: relative;
    z-index: 1;
}

#panel-signup::before {
    content: '';
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,77,28,0.15) 0%, transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    pointer-events: none;
}

.cta-inner h2 {
    font-family: var(--r);
    font-weight: 900;
    font-size: clamp(2.2rem,4vw,4rem);
    letter-spacing: -0.03em;
    line-height: 1.05;
    color: var(--white);
    margin-bottom: 1rem;
}

    .cta-inner h2 em {
        font-style: italic;
        color: var(--coral);
    }

.cta-inner p {
    font-size: 0.95rem;
    color: rgba(255,255,255,0.5);
    max-width: 42ch;
    margin: 0 auto 2.25rem;
    line-height: 1.75;
}

.cta-pair {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-white {
    background: var(--white);
    color: var,--ink);
    font-family: var(--s);
    font-weight: 700;
    font-size: 0.9rem;
    padding: 0.85rem 2rem;
    border-radius: 100px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s, transform 0.2s;
    display: inline-block;
}

    .btn-white:hover {
        background: #f1f5f9;
        transform: translateY(-2px);
    }

.btn-ghost-white {
    background: transparent;
    color: var(--white);
    font-family: var(--s);
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.85rem 2rem;
    border-radius: 100px;
    border: 2px solid rgba(255,255,255,0.25);
    cursor: pointer;
    text-decoration: none;
    transition: border-color 0.2s;
    display: inline-block;
}

    .btn-ghost-white:hover {
        border-color: rgba(255,255,255,0.6);
    }

/* ═══════════════════════════════
   FOOTER
═══════════════════════════════ */
.app-footer {
    flex-shrink: 0;
    border-top: 1px solid var(--border);
    padding: 0.6rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--white);
    border-radius: 0 0 20px 20px;
}

.footer-links {
    display: flex;
    gap: 1.5rem;
    list-style: none;
}

    .footer-links a {
        font-size: 0.68rem;
        color: var(--slate);
        text-decoration: none;
        transition: color 0.2s;
    }

        .footer-links a:hover {
            color: var(--coral);
        }

.footer-copy {
    font-size: 0.68rem;
    color: var(--slate);
}

    .footer-copy span {
        color: var(--coral);
        font-weight: 600;
    }

/* ═══════════════════════════════
   MOBILE NAV OVERLAY
═══════════════════════════════ */
.mob-menu {
    display: none;
    position: absolute;
    inset: 0;
    background: var(--white);
    z-index: 200;
    flex-direction: column;
    padding: 1.5rem 2rem;
    border-radius: 20px;
}

    .mob-menu.open {
        display: flex;
    }

.mob-close {
    align-self: flex-end;
    background: none;
    border: none;
    font-size: 1.6rem;
    cursor: pointer;
    color: var(--slate);
    margin-bottom: 1.5rem;
}

.mob-menu a {
    font-family: var(--r);
    font-size: 2rem;
    font-weight: 700;
    color: var,--ink);
    text-decoration: none;
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--border);
    transition: color 0.2s;
    cursor: pointer;
}

    .mob-menu a:hover {
        color: var(--coral);
    }

/* ═══════════════════════════════
   AUTH MODAL
═══════════════════════════════ */
.auth-modal .modal-dialog {
    max-width: 460px;
}

.auth-modal .modal-content {
    border: none;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 32px 80px rgba(0,0,0,0.45), 0 8px 24px rgba(0,0,0,0.25);
    font-family: var(--s);
}

.auth-modal .modal-header {
    background: var(--ink);
    border-bottom: none;
    padding: 1.75rem 2rem 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    position: relative;
}

    .auth-modal .modal-header .btn-close {
        position: absolute;
        top: 1.25rem;
        right: 1.25rem;
        filter: invert(1) grayscale(1) brightness(2);
        opacity: 0.5;
        transition: opacity 0.2s;
    }

        .auth-modal .modal-header .btn-close:hover {
            opacity: 1;
        }

.auth-modal .modal-logo {
    font-family: var(--r);
    font-weight: 900;
    font-size: 1.5rem;
    color: var,--white);
    letter-spacing: -0.02em;
    margin-bottom: 1.25rem;
}

    .auth-modal .modal-logo span {
        color: var(--coral);
    }

.auth-tabs {
    display: flex;
    gap: 0;
    border-bottom: none;
}

    .auth-tabs .auth-tab {
        font-family: var(--s);
        font-size: 0.78rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        color: rgba(255,255,255,0.4);
        padding: 0.6rem 1.25rem;
        border: none;
        background: none;
        cursor: pointer;
        border-bottom: 2px solid transparent;
        transition: color 0.2s, border-color 0.2s;
        text-transform: uppercase;
    }

        .auth-tabs .auth-tab.active {
            color: var(--white);
            border-bottom-color: var(--coral);
        }

        .auth-tabs .auth-tab:hover:not(.active) {
            color: rgba(255,255,255,0.7);
        }

.auth-modal .modal-body {
    background: var(--white);
    padding: 2rem;
}

.auth-social {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin-bottom: 1.5rem;
}

.btn-social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 100px;
    border: 1.5px solid var(--border);
    background: var(--white);
    font-family: var(--s);
    font-size: 0.85rem;
    font-weight: 600;
    color: var,--ink);
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
    text-decoration: none;
}

    .btn-social:hover {
        background: var(--silver);
        border-color: #c8d0da;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06);
        color: var,--ink);
        text-decoration: none;
    }

    .btn-social svg {
        flex-shrink: 0;
    }

.auth-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.5rem 0;
    color: var(--slate);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

    .auth-divider::before,
    .auth-divider::after {
        content: '';
        flex: 1;
        height: 1px;
        background: var(--border);
    }

.auth-form .form-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--slate);
    margin-bottom: 0.4rem;
}

.auth-form .form-control {
    font-family: var(--s);
    font-size: 0.88rem;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    padding: 0.7rem 1rem;
    color: var,--ink);
    background: var(--white);
    transition: border-color 0.2s, box-shadow 0.2s;
}

    .auth-form .form-control:focus {
        border-color: var(--coral);
        box-shadow: 0 0 0 3px rgba(255,77,28,0.12);
        outline: none;
    }

    .auth-form .form-control::placeholder {
        color: #b0bac6;
    }

.auth-pw-wrap {
    position: relative;
}

    .auth-pw-wrap .form-control {
        padding-right: 2.75rem;
    }

.auth-pw-toggle {
    position: absolute;
    right: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--slate);
    padding: 0;
    line-height: 1;
    transition: color 0.2s;
}

    .auth-pw-toggle:hover {
        color: var(--coral);
    }

.auth-forgot {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--slate);
    text-decoration: none;
    transition: color 0.2s;
}

    .auth-forgot:hover {
        color: var(--coral);
    }

.auth-name-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.auth-submit {
    width: 100%;
    margin-top: 1.5rem;
    padding: 0.85rem;
    border-radius: 100px;
    border: none;
    background: var(--coral);
    color: var(--white);
    font-family: var(--s);
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 20px rgba(255,77,28,0.3);
}

    .auth-submit:hover {
        background: #e63d0e;
        transform: translateY(-1px);
        box-shadow: 0 8px 28px rgba(255,77,28,0.35);
    }

    .auth-submit:active {
        transform: translateY(0);
    }

.auth-modal .modal-footer {
    background: var(--silver);
    border-top: 1px solid var(--border);
    padding: 0.85rem 2rem;
    justify-content: center;
    font-size: 0.75rem;
    color: var(--slate);
}

    .auth-modal .modal-footer a {
        color: var(--coral);
        font-weight: 600;
        text-decoration: none;
    }

        .auth-modal .modal-footer a:hover {
            text-decoration: underline;
        }

.auth-pane {
    display: none;
}

    .auth-pane.active {
        display: block;
    }

/* ═══════════════════════════════
   SALES MODAL
═══════════════════════════════ */
.sales-modal .modal-dialog {
    max-width: 820px;
}

.sales-modal .modal-content {
    border: none;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 32px 80px rgba(0,0,0,0.45), 0 8px 24px rgba(0,0,0,0.25);
    font-family: var(--s);
}

.sales-modal .modal-header {
    background: var(--ink);
    border-bottom: none;
    padding: 1.75rem 2rem 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    position: relative;
}

    .sales-modal .modal-header .btn-close {
        position: absolute;
        top: 1.25rem;
        right: 1.25rem;
        filter: invert(1) grayscale(1) brightness(2);
        opacity: 0.5;
        transition: opacity 0.2s;
    }

        .sales-modal .modal-header .btn-close:hover {
            opacity: 1;
        }

.sales-modal .modal-logo {
    font-family: var(--r);
    font-weight: 900;
    font-size: 1.5rem;
    color: var,--white);
    letter-spacing: -0.02em;
    margin-bottom: 0.5rem;
}

    .sales-modal .modal-logo span {
        color: var(--coral);
    }

.sales-modal-eyebrow {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.45);
    padding-bottom: 1.25rem;
}

.sales-modal .modal-body {
    background: var(--white);
    padding: 1.75rem 2rem;
}

.sales-modal .auth-name-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.sales-modal .modal-footer {
    background: var(--silver);
    border-top: 1px solid var(--border);
    padding: 0.85rem 2rem;
    justify-content: center;
    font-size: 0.75rem;
    color: var(--slate);
}

.sales-modal-intro {
    font-size: 0.82rem;
    color: var(--slate);
    line-height: 1.65;
    margin-bottom: 1.5rem;
}

.sales-optional {
    font-weight: 400;
    font-size: 0.68rem;
    color: var(--slate);
    text-transform: none;
    letter-spacing: 0;
}

/* ── Password feedback row (strength bar + info icon) ── */
.pw-feedback-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.45rem;
}

.pw-strength-bar {
    flex: 1;
    height: 4px;
    background: var(--border);
    border-radius: 100px;
    overflow: hidden;
}

.pw-strength-fill {
    height: 100%;
    width: 0;
    border-radius: 100px;
    transition: width 0.3s, background 0.3s;
}

.pw-s1 { background: #dc2626; }
.pw-s2 { background: #f97316; }
.pw-s3 { background: #eab308; }
.pw-s4 { background: #22c55e; }
.pw-s5 { background: var(--green); }

/* ── Info icon button ── */
.pw-info-wrap {
    position: relative;
    flex-shrink: 0;
}

.pw-info-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1.5px solid var(--border);
    background: var(--white);
    color: var(--slate);
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
    padding: 0;
}

.pw-info-btn:hover,
.pw-info-btn.active {
    border-color: var(--coral);
    color: var(--coral);
}

/* ── Rules popover ── */
.pw-rules-popover {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    background: var(--ink);
    color: var(--white);
    border-radius: 10px;
    padding: 0.75rem 1rem;
    width: 200px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
    z-index: 100;
    flex-direction: column;
    gap: 0.3rem;
}

.pw-rules-popover::after {
    content: '';
    position: absolute;
    bottom: -6px;
    right: 6px;
    width: 12px;
    height: 12px;
    background: var(--ink);
    transform: rotate(45deg);
    border-radius: 2px;
}

.pw-rules-popover.open {
    display: flex;
}

.pw-rules-title {
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
    margin-bottom: 0.2rem;
}

.pw-rule {
    font-size: 0.72rem;
    font-weight: 500;
    color: rgba(255,255,255,0.5);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    transition: color 0.2s;
}

.pw-rule::before {
    content: '○';
    font-size: 0.55rem;
    flex-shrink: 0;
}

.pw-rule.pw-rule-met {
    color: #4ade80;
}

.pw-rule.pw-rule-met::before {
    content: '●';
}

/* ── Confirm match message ── */
.pw-match-msg {
    font-size: 0.72rem;
    font-weight: 600;
    margin-top: 0.35rem;
    min-height: 1rem;
}

.pw-match-ok  { color: var(--green); }
.pw-match-bad { color: #dc2626; }

/* ── Suggest password button ── */
.auth-suggest-btn {
    font-family: var(--s);
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--coral);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.auth-suggest-btn:hover { color: #e63d0e; }

/* ═══════════════════════════════
   MODAL BACKDROP — stronger veil
═══════════════════════════════ */
.modal-backdrop {
    background-color: #6b7280;
}

.modal-backdrop.show {
    opacity: 0.75;
}

/* Blur + dim the app card when any modal is open */
body.modal-open .app-card {
    filter: blur(3px) brightness(0.75);
    transition: filter 0.3s ease;
}

/* ═══════════════════════════════════════════════════
   LOGIN PAGE — standalone & iframe-embedded
   Migrated from Login.aspx <style> block.
   No class names conflict with existing rules above.
═══════════════════════════════════════════════════ */

/* Standalone: full-page centred layout */
body.lp-standalone {
    overflow: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 2rem 1rem;
}

/* Embedded: inside the auth modal iframe — flush, no padding, white bg */
body.lp-embedded {
    overflow: hidden;
    background: var(--white);
    display: block;
    min-height: 0;
    padding: 0;
}

    body.lp-embedded .login-card {
        border-radius: 0;
        box-shadow: none;
        max-width: 100%;
    }

/* ── Standalone auth card ── */
.login-card {
    width: 100%;
    max-width: 460px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 32px 80px rgba(0,0,0,0.35), 0 8px 24px rgba(0,0,0,0.2);
    font-family: var(--s);
}

.login-card-header {
    background: var(--ink);
    padding: 1.75rem 2rem 0;
    position: relative;
}

.login-logo {
    font-family: var(--r);
    font-weight: 900;
    font-size: 1.5rem;
    color: var(--white);
    letter-spacing: -0.02em;
    margin-bottom: 1.25rem;
    display: block;
    text-decoration: none;
}

    .login-logo span {
        color: var(--coral);
    }

.login-card-body {
    background: var(--white);
    padding: 2rem;
}

.login-card-footer {
    background: var(--silver);
    border-top: 1px solid var(--border);
    padding: 0.85rem 2rem;
    text-align: center;
    font-size: 0.75rem;
    color: var,--slate);
}

    .login-card-footer a {
        color: var(--coral);
        font-weight: 600;
        text-decoration: none;
    }

        .login-card-footer a:hover {
            text-decoration: underline;
        }

/* ── Alert messages ── */
.msg-error {
    background: rgba(239,68,68,0.08);
    border: 1.5px solid rgba(239,68,68,0.3);
    color: #dc2626;
    padding: 0.7rem 1rem;
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: 500;
    margin-bottom: 1.25rem;
}

.msg-success {
    background: rgba(16,185,129,0.08);
    border: 1.5px solid rgba(16,185,129,0.3);
    color: #059669;
    padding: 0.7rem 1rem;
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: 500;
    margin-bottom: 1.25rem;
}

/* ── Remember me row ── */
.remember-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0;
}

    .remember-row label {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.78rem;
        font-weight: 600;
        color: var,--slate);
        cursor: pointer;
        margin: 0;
        text-transform: none;
        letter-spacing: 0;
    }

    .remember-row input[type="checkbox"] {
        width: 16px;
        height: 16px;
        accent-color: var(--coral);
        cursor: pointer;
    }

/* ── Active tab state driven by JS data-attribute (standalone page) ──
   Distinct from .auth-tabs .auth-tab.active used inside the Bootstrap modal */
.auth-tabs .auth-tab[data-active="true"] {
    color: var(--white);
    border-bottom-color: var(--coral);
}

/* ── Auth modal: iframe wrapper ── */
.auth-iframe-wrap {
    border: none;
    border-radius: 20px;
    overflow: hidden;
    background: var(--white);
    box-shadow: 0 32px 80px rgba(0,0,0,0.45), 0 8px 24px rgba(0,0,0,0.25);
    position: relative;
}

.auth-iframe-wrap iframe {
    display: block;
    width: 100%;
    border: none;
}

.auth-iframe-close {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    z-index: 10;
    filter: invert(1) grayscale(1) brightness(2);
    opacity: 0.5;
    transition: opacity 0.2s;
}

.auth-iframe-close:hover {
    opacity: 1;
}

/* ═══════════════════════════════
   AUTH MODAL OVERLAY (custom — no Bootstrap)
═══════════════════════════════ */
.auth-modal-overlay {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: rgba(13, 27, 42, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    align-items: center;
    justify-content: center;
    padding: 1rem;

    /* Hidden state */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 1s ease, visibility 1s ease;
}

.auth-modal-overlay.open {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

.auth-modal-overlay .modal-dialog {
    width: 100%;
    max-width: 460px;
    margin: 0 auto;

    /* Card slides up and scales in */
    transform: translateY(24px) scale(0.96);
    transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.auth-modal-overlay.open .modal-dialog {
    transform: translateY(0) scale(1);
}

@media (max-width: 720px) {
    .auth-modal-overlay {
        padding: 0;
        align-items: flex-end;
    }

    .auth-modal-overlay .modal-dialog {
        max-width: 100%;
        transform: translateY(40px) scale(1);
    }

    .auth-modal-overlay.open .modal-dialog {
        transform: translateY(0) scale(1);
    }

    .auth-iframe-wrap {
        border-radius: 20px 20px 0 0;
    }
}

/* ── Log In nav button ── */
.nav-login-btn {
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    color: var(--ink) !important;
    background: transparent !important;
    border: 1.5px solid var(--border) !important;
    border-radius: 100px !important;
    padding: 0.45rem 1rem !important;
    transition: border-color 0.2s, color 0.2s !important;
}
.nav-login-btn:hover {
    border-color: var(--ink) !important;
    background: transparent !important;
}

/* ── Content Type Showcase ── */
.content-type-showcase {
    display: flex;
    flex-direction: column;
    gap: clamp(0.4rem, 1.2vh, 0.9rem);
    margin-top: clamp(0.15rem, 0.6vh, 0.4rem);
}

.cts-free-box,
.cts-pro-box {
    position: relative;
    border: 1.5px solid var(--coral);
    border-radius: 12px;
    padding: clamp(0.5rem, 1.1vh, 0.85rem) 0.75rem clamp(0.45rem, 1vh, 0.8rem);
}

.cts-free-badge,
.cts-pro-badge {
    position: absolute;
    top: -10px;
    left: 10px;
    background: var(--coral);
    color: var(--white);
    font-size: 0.5rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 0.15rem 0.5rem;
    border-radius: 100px;
}

.cts-free-row,
.cts-pro-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.cts-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-family: inherit;
    font-size: clamp(0.66rem, 0.5rem + 0.35vh, 0.8rem);
    font-weight: 600;
    line-height: 1;
    color: var(--ink);
    background: var(--silver);
    border-radius: 100px;
    padding: clamp(0.32rem, 0.7vh, 0.55rem) clamp(0.65rem, 1.3vh, 0.95rem);
    border: 1px solid var(--border);
    transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.1s, box-shadow 0.2s;
    cursor: pointer;
}

.cts-pill:hover {
    background: var(--coral-lt);
    border-color: var(--coral);
    color: var(--coral);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(255, 77, 28, 0.15);
}

.cts-pill:active { transform: translateY(0); }

.cts-pill:focus-visible {
    outline: 2px solid var(--coral);
    outline-offset: 2px;
}

.cts-pill-free {
    background: var(--white);
    border-color: var(--border);
}

/* ── Terms agreement row (register pane) ── */
.terms-agree-row {
    margin-top: 4px;
}

.terms-agree-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-family: 'Manrope', sans-serif;
    font-size: .85rem;
    color: rgba(255,255,255,.65);
    cursor: pointer;
    line-height: 1.5;
}

.terms-agree-check {
    flex-shrink: 0;
    margin-top: 2px;
    width: 16px;
    height: 16px;
    accent-color: var(--coral);
    cursor: pointer;
}

.terms-agree-link {
    color: var(--coral);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.terms-agree-link:hover { opacity: .8; }

/* ═══════════════════════════════
   COOKIE CONSENT BANNER
═══════════════════════════════ */
.cookie-banner {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9998;
    width: calc(100% - 48px);
    max-width: 780px;
    background: #0D1B2A;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0,0,0,.45);
    padding: 18px 24px;
    transition: opacity .35s ease, transform .35s ease;
}

.cookie-banner.cookie-hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(16px);
}

.cookie-banner-inner {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.cookie-banner-text {
    flex: 1;
    min-width: 220px;
    font-family: 'Manrope', sans-serif;
    font-size: .85rem;
    line-height: 1.65;
    color: rgba(255,255,255,.65);
}

.cookie-banner-title {
    display: block;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--coral);
    margin-bottom: 4px;
}

.cookie-banner-link {
    color: rgba(255,255,255,.75);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color .2s;
}

.cookie-banner-link:hover { color: var(--coral); }

.cookie-banner-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}

.cookie-btn-accept {
    background: var(--coral);
    color: #fff;
    font-family: 'Manrope', sans-serif;
    font-size: .85rem;
    font-weight: 700;
    border: none;
    border-radius: 8px;
    padding: 9px 22px;
    cursor: pointer;
    transition: opacity .2s;
    white-space: nowrap;
}

.cookie-btn-accept:hover { opacity: .85; }

.cookie-btn-reject {
    background: transparent;
    color: rgba(255,255,255,.75);
    font-family: 'Manrope', sans-serif;
    font-size: .85rem;
    font-weight: 700;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 8px;
    padding: 9px 18px;
    cursor: pointer;
    transition: border-color .2s, color .2s;
    white-space: nowrap;
}

.cookie-btn-reject:hover { border-color: rgba(255,255,255,.55); color: #fff; }

.cookie-btn-learn {
    font-family: 'Manrope', sans-serif;
    font-size: .82rem;
    font-weight: 600;
    color: rgba(255,255,255,.45);
    text-decoration: none;
    white-space: nowrap;
    transition: color .2s;
}

.cookie-btn-learn:hover { color: rgba(255,255,255,.8); }

@media (max-width: 560px) {
    .cookie-banner { bottom: 12px; width: calc(100% - 24px); padding: 16px 18px; }
    .cookie-banner-inner { flex-direction: column; align-items: flex-start; gap: 14px; }
    .cookie-banner-actions { width: 100%; }
    .cookie-btn-accept { flex: 1; text-align: center; }
    .cookie-btn-reject { flex: 1; text-align: center; }
}

/* ═══════════════════════════════════════════════
   REGISTER MODAL — wider overlay
═══════════════════════════════════════════════ */
.reg-modal-overlay .modal-dialog {
    max-width: 780px;
}

@media (max-width: 860px) {
    .reg-modal-overlay .modal-dialog {
        max-width: 100%;
    }
}

/* ═══════════════════════════════════════════════
   WIDE LOGIN CARD — Register.aspx standalone
═══════════════════════════════════════════════ */
body.lp-wide {
    overflow: auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    min-height: 100vh;
    padding: 2rem 1rem;
}

.login-card-wide {
    max-width: 780px;
}

body.lp-embedded .login-card-wide {
    max-width: 100%;
}

/* ═══════════════════════════════════════════════
   LOGIN CARD HEADER — eyebrow subtitle
═══════════════════════════════════════════════ */
.login-card-eyebrow {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    padding-bottom: 1.25rem;
    margin-top: -0.65rem;
}

/* ═══════════════════════════════════════════════
   TWO-COLUMN REGISTER FORM GRID
═══════════════════════════════════════════════ */
.reg-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1.75rem;
    margin-bottom: 1.5rem;
}

.reg-col {
    display: flex;
    flex-direction: column;
}

/* Full-width submit button inside the wide card */
.reg-submit {
    margin-top: 0;
}

/* Full-width error / success message above the grid */
.reg-msg {
    margin-bottom: 1.25rem;
}

/* ── Terms label: dark text for white card body ── */
.terms-agree-label.reg-terms {
    color: var(--slate);
    font-size: 0.8rem;
}

.terms-agree-label.reg-terms .terms-agree-link {
    color: var(--coral);
}

/* ── Stack to single column on narrow screens ── */
@media (max-width: 600px) {
    .reg-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

/* ═══════════════════════════════════════════════
   RESPONSIVE — TABLET & MOBILE
   The base design is a fixed 90vw×90vh "app card"
   with side-by-side hero and multi-column grids.
   Below, the card goes full-bleed, the desktop nav
   collapses to the hamburger menu (already wired in
   qrgo2_home.js), and every grid stacks so each panel
   scrolls naturally on a phone.
═══════════════════════════════════════════════ */
@media (max-width: 900px) {
    /* Full-bleed card — panels scroll internally */
    .app-card {
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        border-radius: 0;
        box-shadow: none;
    }

    /* Nav → hamburger */
    nav {
        border-radius: 0;
        padding: 0 1.25rem;
    }
    .nav-links { display: none; }
    .hamburger { display: flex; }

    /* Hero → single column, natural height so the panel can scroll */
    .hero {
        grid-template-columns: 1fr;
        height: auto;
        min-height: 100%;
    }
    .hero-left  { padding: 2.5rem 1.5rem; }
    .hero-right { padding: 2.5rem 1.5rem; gap: 1.5rem; }

    /* Section padding + grids collapse */
    .sec-wrap        { padding: 2rem 1.5rem; }
    .steps-grid      { grid-template-columns: 1fr 1fr; }
    .types-grid      { grid-template-columns: 1fr 1fr; }
    .analytics-layout{ grid-template-columns: 1fr; gap: 2rem; }
    .who-grid        { grid-template-columns: 1fr; }
    .pricing-grid    { grid-template-columns: 1fr; }

    .app-footer {
        padding: 0.6rem 1.25rem;
        border-radius: 0;
    }
}

/* ═══════════════════════════════════════════════════════════════
   SHORT VIEWPORTS (laptops / 1080p external monitors)
   The hero card is a fixed 90vh and cannot grow, so on a modest
   viewport HEIGHT the tall left column (headline → FREE/PRO boxes)
   overflows and the bottom is clipped. Compress the left column
   vertically in tiers so the whole hero fits on one screen without
   clipping. Monitors taller than the largest breakpoint keep the
   full-size design; windows shorter than the smallest tier fall back
   to the panel's own scroll (nothing is ever unreachable).
   These are HEIGHT queries — they do not affect the wide/desktop
   two-column layout, only its vertical density.
═══════════════════════════════════════════════════════════════ */
@media (max-height: 1050px) {
    /* The left-pane objects (font sizes, margins, gaps, pill/box padding) now
       scale CONTINUOUSLY via viewport-height clamp()s on their own rules, so the
       old fixed per-tier overrides that used to live here have been removed —
       they would flat-cancel the fluid scaling below this height. Only the outer
       padding trim and the <br> collapse (which the clamps don't cover) remain. */
    .hero-left    { padding-top: 1.5rem; padding-bottom: 1.5rem; }
    .content-type-showcase br { display: none; }   /* rely on the flex gap instead */
}

@media (max-height: 850px) {
    .hero-left    { padding-top: 1rem; padding-bottom: 1rem; }
}

@media (max-width: 560px) {
    nav        { height: 56px; padding: 0 1rem; }
    .nav-logo  { font-size: 1.4rem; }

    .hero-left  { padding: 2rem 1.25rem; }
    .hero-right { padding: 2rem 1.25rem; }
    .hero-h1    { font-size: clamp(2.1rem, 9vw, 3rem); }
    .hero-sub   { font-size: 0.9rem; }

    /* Stack the two CTAs full-width so they're easy tap targets */
    .hero-actions { gap: 0.6rem; }
    .hero-actions .btn-coral,
    .hero-actions .btn-outline {
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    /* Trust bar reads as a left-aligned wrapping list */
    .trust-bar {
        justify-content: flex-start;
        gap: 0.5rem 1.25rem;
        padding: 0.85rem 1.25rem;
    }

    /* Single column for the finer grids */
    .steps-grid { grid-template-columns: 1fr; }
    .types-grid { grid-template-columns: 1fr; }

    /* Analytics metric strip stays 3-up but tightens */
    .av-metric     { padding: 0.75rem 0.65rem; }
    .av-metric-val { font-size: 1.25rem; }

    .who-card  { padding: 1.75rem 1.5rem; }
    .plan-card { padding: 1.5rem; }

    .cta-inner    { padding: 2rem 1.25rem; }
    .cta-inner h2 { font-size: clamp(2rem, 9vw, 2.75rem); }

    /* Footer stacks the links above the copyright */
    .app-footer {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
        padding: 0.85rem 1.25rem;
    }
}

/* ══════════════════════════════════════
   FEATURE DETAIL MODAL (content-type pills)
══════════════════════════════════════ */
.feature-modal-overlay {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 1060;
    background: rgba(13, 27, 42, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}
.feature-modal-overlay.open {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

.feature-modal-dialog {
    position: relative;
    width: 100%;
    max-width: 440px;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    background: var(--white);
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(13, 27, 42, 0.35);
    transform: translateY(24px) scale(0.96);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.feature-modal-overlay.open .feature-modal-dialog {
    transform: translateY(0) scale(1);
}

.feature-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    color: var(--navy);
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, transform 0.1s;
}
.feature-modal-close:hover { background: #fff; transform: rotate(90deg); }

/* Media band — gradient banner holding the SVG illustration */
.feature-modal-media {
    background: linear-gradient(135deg, var(--navy) 0%, #16324a 55%, var(--coral) 165%);
    padding: 1.5rem 1.5rem 0.75rem;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-height: 172px;
}
.feature-modal-media svg { max-width: 320px; display: block; }
.feature-modal-overlay[data-tier="free"] .feature-modal-media {
    background: linear-gradient(135deg, var(--navy) 0%, #1c3a55 60%, #2e6f5e 165%);
}

.feature-modal-body { padding: 1.4rem 1.6rem 1.7rem; }

.feature-modal-eyebrow {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.5rem;
}
.feature-glyph { font-size: 1.35rem; line-height: 1; }
.feature-tier {
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.2rem 0.55rem;
    border-radius: 100px;
}
.feature-tier-free { background: #e6f4ec; color: #1f7a4d; }
.feature-tier-pro  { background: var(--coral-lt); color: var(--coral); }

.feature-modal-title {
    font-family: var(--r);
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--navy);
    line-height: 1.1;
    margin: 0 0 0.35rem;
}
.feature-modal-tagline {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--coral);
    margin: 0 0 0.7rem;
}
.feature-modal-desc {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--slate, #5A6b7b);
    margin: 0 0 1rem;
}

.feature-modal-list {
    list-style: none;
    margin: 0 0 1.4rem;
    padding: 0;
    display: grid;
    gap: 0.5rem;
}
.feature-modal-list li {
    position: relative;
    padding-left: 1.6rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink, #22303e);
    line-height: 1.4;
}
.feature-modal-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--coral-lt);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6l3 3 5-6' fill='none' stroke='%23FF4D1C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

.feature-modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}
.feature-modal-actions .btn-coral,
.feature-modal-actions .btn-outline {
    cursor: pointer;
    flex: 1 1 auto;
    text-align: center;
}

@media (max-width: 720px) {
    .feature-modal-overlay { padding: 0; align-items: flex-end; }
    .feature-modal-dialog {
        max-width: 100%;
        max-height: 92vh;
        border-radius: 20px 20px 0 0;
    }
}