:root {
    --pricing-blue: #0753d6;
    --pricing-blue-bright: #2584ff;
    --pricing-blue-soft: #eaf4ff;
    --pricing-pink: #f50057;
    --pricing-pink-bright: #ff3a7f;
    --pricing-pink-soft: #fff0f6;
    --pricing-yellow: #ffbf00;
    --pricing-yellow-soft: #fff8d8;
    --pricing-navy: #071b4d;
    --pricing-text: #53617b;
    --pricing-border: #dbe7fb;
    --pricing-purple: #7040bd;
    --pricing-purple-soft: #f1eaff;
    --pricing-shadow: 0 28px 75px rgba(7, 27, 77, 0.14);
    --pricing-shadow-strong: 0 34px 95px rgba(7, 27, 77, 0.23);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    min-width: 320px;
    font-family: "Segoe UI", Arial, sans-serif;
    color: var(--pricing-navy);
    background:
        radial-gradient(circle at 0 0, rgba(37, 132, 255, .11), transparent 27%),
        radial-gradient(circle at 100% 0, rgba(245, 0, 87, .09), transparent 29%),
        linear-gradient(180deg, #ffffff 0%, #fbfdff 48%, #ffffff 100%);
}
button, a { font: inherit; }
button { color: inherit; }
a { color: inherit; }
[hidden] { display: none !important; }

.pricing-topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    min-height: 76px;
    display: grid;
    grid-template-columns: minmax(180px, 1fr) auto minmax(180px, 1fr);
    align-items: center;
    gap: 28px;
    padding: 10px clamp(22px, 6vw, 92px);
    border-bottom: 1px solid rgba(219, 231, 251, .88);
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(18px);
}

.pricing-brand { width: fit-content; display: inline-flex; align-items: center; }
.pricing-brand img { display: block; width: 174px; max-height: 55px; object-fit: contain; }
.pricing-nav { display: flex; align-items: center; justify-content: center; gap: 30px; }
.pricing-nav a {
    position: relative;
    padding: 10px 0;
    color: var(--pricing-navy);
    text-decoration: none;
    font-size: 14px;
    font-weight: 850;
}
.pricing-nav a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 2px;
    width: 0;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--pricing-blue), var(--pricing-pink));
    transform: translateX(-50%);
    transition: width .18s ease;
}
.pricing-nav a:hover::after,
.pricing-nav a.is-active::after { width: 100%; }
.pricing-nav a.is-active { color: var(--pricing-blue); }

.pricing-account { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.pricing-login,
.pricing-account-name {
    padding: 11px 15px;
    color: var(--pricing-blue);
    text-decoration: none;
    font-weight: 900;
}
.pricing-register,
.pricing-account-dashboard {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 20px;
    border-radius: 15px;
    color: white;
    background: linear-gradient(180deg, var(--pricing-pink-bright), var(--pricing-pink));
    box-shadow: 0 12px 25px rgba(245, 0, 87, .22);
    text-decoration: none;
    font-weight: 900;
}

.pricing-hero {
    position: relative;
    overflow: hidden;
    width: min(1320px, calc(100% - 42px));
    min-height: 360px;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
    align-items: center;
    gap: 70px;
    margin: 0 auto;
    padding: 78px 0 54px;
}
.pricing-orb { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(2px); }
.pricing-orb-blue { width: 330px; height: 330px; left: -210px; top: 5px; background: rgba(37, 132, 255, .10); }
.pricing-orb-pink { width: 370px; height: 370px; right: -220px; top: -40px; background: rgba(245, 0, 87, .09); }
.pricing-hero-copy,
.pricing-context-card { position: relative; z-index: 1; }
.pricing-eyebrow {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    padding: 6px 13px;
    border-radius: 999px;
    color: var(--pricing-blue);
    background: var(--pricing-blue-soft);
    font-size: 12px;
    font-weight: 950;
    letter-spacing: 1.1px;
}
.pricing-hero h1 {
    max-width: 850px;
    margin: 18px 0 18px;
    font-size: clamp(42px, 5.2vw, 72px);
    line-height: 1.02;
    letter-spacing: -2.4px;
}
.pricing-hero h1 span { color: var(--pricing-blue); }
.pricing-hero-copy > p {
    max-width: 760px;
    margin: 0;
    color: var(--pricing-text);
    font-size: clamp(17px, 1.5vw, 20px);
    line-height: 1.65;
}
.pricing-context-card {
    display: grid;
    grid-template-columns: 58px 1fr;
    gap: 17px;
    align-items: center;
    padding: 24px;
    border: 1px solid rgba(219, 231, 251, .95);
    border-radius: 25px;
    background: rgba(255,255,255,.88);
    box-shadow: 0 20px 55px rgba(7,27,77,.09);
}
.pricing-context-icon {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 19px;
    color: white;
    background: linear-gradient(145deg, var(--pricing-blue-bright), var(--pricing-blue));
    box-shadow: 0 13px 28px rgba(7,83,214,.24);
    font-size: 25px;
}
.pricing-context-card strong { display: block; margin-bottom: 5px; font-size: 17px; }
.pricing-context-card p { margin: 0; color: var(--pricing-text); line-height: 1.45; }

.pricing-shell {
    width: min(1360px, calc(100% - 34px));
    margin: 0 auto;
    padding: 8px 0 96px;
}
.pricing-controls {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 34px;
    margin-bottom: 32px;
}
.pricing-audience-wrap,
.pricing-duration-wrap { display: grid; gap: 9px; }
.pricing-control-label {
    padding-left: 4px;
    color: #6a7690;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .7px;
    text-transform: uppercase;
}
.pricing-segmented {
    display: inline-flex;
    align-items: stretch;
    gap: 5px;
    padding: 6px;
    border: 1px solid var(--pricing-border);
    border-radius: 18px;
    background: rgba(255,255,255,.92);
    box-shadow: 0 12px 30px rgba(7,27,77,.06);
}
.pricing-segmented button {
    border: 0;
    border-radius: 13px;
    background: transparent;
    cursor: pointer;
    transition: transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
}
.pricing-audience button {
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 0 18px;
    color: #53617b;
    font-weight: 900;
}
.pricing-audience button span {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    background: #eef4ff;
    color: var(--pricing-blue);
    font-size: 12px;
}
.pricing-audience button[aria-selected="true"] {
    color: white;
    background: linear-gradient(145deg, var(--pricing-blue-bright), var(--pricing-blue));
    box-shadow: 0 10px 22px rgba(7,83,214,.22);
}
.pricing-audience button[aria-selected="true"] span { color: var(--pricing-blue); background: white; }
.pricing-duration button {
    position: relative;
    min-width: 104px;
    min-height: 50px;
    display: grid;
    place-items: center;
    padding: 7px 13px;
    color: #53617b;
    font-weight: 900;
}
.pricing-duration button small { display: block; color: var(--pricing-pink); font-size: 9px; font-weight: 950; }
.pricing-duration button.is-active {
    color: var(--pricing-navy);
    background: var(--pricing-yellow-soft);
    box-shadow: inset 0 0 0 1px #ffdd63, 0 8px 20px rgba(255,191,0,.13);
}
.pricing-duration button.is-active small { color: #a87100; }

.pricing-onboarding {
    width: min(940px, 100%);
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 14px;
    align-items: center;
    margin: 0 auto 30px;
    padding: 17px 20px;
    border: 1px solid #b9ddff;
    border-radius: 19px;
    background: linear-gradient(90deg, #eef8ff, #fff);
    box-shadow: 0 14px 35px rgba(7,83,214,.07);
}
.pricing-onboarding > span {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    color: white;
    background: var(--pricing-blue);
    font-weight: 950;
}
.pricing-onboarding strong { display: block; margin-bottom: 3px; }
.pricing-onboarding p { margin: 0; color: var(--pricing-text); font-size: 14px; line-height: 1.45; }

.pricing-deck-section {
    position: relative;
    overflow: hidden;
    padding: 35px 24px 28px;
    border: 1px solid rgba(219,231,251,.92);
    border-radius: 38px;
    background:
        radial-gradient(circle at 20% 0, rgba(37,132,255,.08), transparent 30%),
        radial-gradient(circle at 85% 12%, rgba(245,0,87,.07), transparent 27%),
        rgba(255,255,255,.78);
    box-shadow: 0 28px 75px rgba(7,27,77,.08);
}
.pricing-section-heading {
    width: min(1060px, 100%);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 22px;
    margin: 0 auto 10px;
}
.pricing-section-heading > div:first-child { max-width: 740px; }
.pricing-section-heading span {
    color: var(--pricing-pink);
    font-size: 12px;
    font-weight: 950;
    letter-spacing: 1px;
}
.pricing-section-heading h2 { margin: 7px 0 8px; font-size: clamp(30px, 3.3vw, 45px); letter-spacing: -1.2px; }
.pricing-section-heading p { margin: 0; color: var(--pricing-text); line-height: 1.55; }
.pricing-deck-controls { display: flex; gap: 8px; flex: 0 0 auto; }
.pricing-deck-controls button {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border: 1px solid #cfe1ff;
    border-radius: 15px;
    background: white;
    color: var(--pricing-blue);
    box-shadow: 0 10px 24px rgba(7,27,77,.08);
    cursor: pointer;
    font-size: 21px;
    font-weight: 950;
}
.pricing-deck-controls button:hover:not(:disabled) { transform: translateY(-2px); }
.pricing-deck-controls button:disabled { opacity: .35; cursor: default; }

.pricing-deck {
    position: relative;
    width: min(1120px, 100%);
    height: 770px;
    margin: 0 auto;
    outline: none;
    touch-action: pan-y;
}
.pricing-deck:focus-visible { border-radius: 30px; box-shadow: 0 0 0 4px rgba(37,132,255,.18); }

.pricing-card {
    position: absolute;
    top: 45px;
    left: 50%;
    width: min(438px, calc(100vw - 74px));
    min-height: 610px;
    display: flex;
    flex-direction: column;
    padding: 27px 28px 24px;
    border: 1px solid;
    border-radius: 31px;
    background: white;
    box-shadow: var(--pricing-shadow);
    transform-origin: center center;
    transition:
        transform .42s cubic-bezier(.2,.8,.2,1),
        opacity .32s ease,
        filter .32s ease,
        box-shadow .32s ease,
        height .32s ease;
    cursor: pointer;
    will-change: transform;
}
.pricing-card[data-relative="0"] {
    z-index: 30;
    opacity: 1;
    filter: none;
    transform: translateX(-50%) translateY(0) scale(1) rotate(0deg);
    box-shadow: var(--pricing-shadow-strong);
    cursor: default;
}
.pricing-card[data-relative="-1"] {
    z-index: 20;
    height: 520px;
    min-height: 520px;
    overflow: hidden;
    opacity: .82;
    filter: saturate(.82);
    transform: translateX(calc(-50% - 245px)) translateY(42px) scale(.87) rotate(-4.2deg);
}
.pricing-card[data-relative="1"] {
    z-index: 20;
    height: 520px;
    min-height: 520px;
    overflow: hidden;
    opacity: .82;
    filter: saturate(.82);
    transform: translateX(calc(-50% + 245px)) translateY(42px) scale(.87) rotate(4.2deg);
}
.pricing-card[data-relative="-2"] {
    z-index: 10;
    height: 480px;
    min-height: 480px;
    overflow: hidden;
    opacity: .42;
    filter: saturate(.55);
    transform: translateX(calc(-50% - 390px)) translateY(68px) scale(.76) rotate(-7deg);
}
.pricing-card[data-relative="2"] {
    z-index: 10;
    height: 480px;
    min-height: 480px;
    overflow: hidden;
    opacity: .42;
    filter: saturate(.55);
    transform: translateX(calc(-50% + 390px)) translateY(68px) scale(.76) rotate(7deg);
}
.pricing-card[data-relative]:not([data-relative="0"])::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 150px;
    border-radius: 0 0 30px 30px;
    background: linear-gradient(180deg, transparent, rgba(255,255,255,.98) 76%);
    pointer-events: none;
}
.pricing-card-free { border-color: #9dcbff; background: linear-gradient(180deg, #f4f9ff 0%, #ffffff 28%); }
.pricing-card-pro { border-color: #ff91ba; background: linear-gradient(180deg, #fff3f8 0%, #ffffff 28%); }
.pricing-card-studio { border-color: #bda2f1; background: linear-gradient(180deg, #f6f1ff 0%, #ffffff 29%); }
.pricing-card[data-relative="0"].pricing-card-free { box-shadow: 0 32px 90px rgba(7,83,214,.19); }
.pricing-card[data-relative="0"].pricing-card-pro { box-shadow: 0 32px 90px rgba(245,0,87,.19); }
.pricing-card[data-relative="0"].pricing-card-studio { box-shadow: 0 32px 90px rgba(112,64,189,.21); }

.pricing-card-ribbon {
    position: absolute;
    top: -13px;
    right: 26px;
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    padding: 0 13px;
    border-radius: 999px;
    color: white;
    background: linear-gradient(180deg, var(--pricing-pink-bright), var(--pricing-pink));
    box-shadow: 0 9px 20px rgba(245,0,87,.25);
    font-size: 10px;
    font-weight: 950;
    letter-spacing: .8px;
}
.pricing-card-ribbon-studio { background: linear-gradient(180deg, #8958da, var(--pricing-purple)); box-shadow: 0 9px 20px rgba(112,64,189,.25); }
.pricing-card-topline { display: flex; align-items: center; gap: 11px; margin-bottom: 18px; }
.pricing-card-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    color: white;
    background: linear-gradient(145deg, var(--pricing-blue-bright), var(--pricing-blue));
    box-shadow: 0 10px 22px rgba(7,83,214,.19);
    font-size: 16px;
    font-weight: 950;
}
.pricing-card-pro .pricing-card-icon { background: linear-gradient(145deg, var(--pricing-pink-bright), var(--pricing-pink)); box-shadow: 0 10px 22px rgba(245,0,87,.18); }
.pricing-card-studio .pricing-card-icon { background: linear-gradient(145deg, #9364df, var(--pricing-purple)); box-shadow: 0 10px 22px rgba(112,64,189,.19); }
.pricing-card-type { color: #6b7790; font-size: 11px; font-weight: 950; letter-spacing: 1.15px; }
.pricing-card-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.pricing-plan-label { color: var(--pricing-blue); font-size: 30px; line-height: 1; font-weight: 950; letter-spacing: -1px; }
.pricing-card-pro .pricing-plan-label { color: var(--pricing-pink); }
.pricing-card-studio .pricing-plan-label { color: var(--pricing-purple); }
.pricing-card-title-row h3 { margin: 7px 0 0; font-size: 16px; font-weight: 850; }
.pricing-mini-badge {
    min-height: 27px;
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    border-radius: 999px;
    color: var(--pricing-blue);
    background: var(--pricing-blue-soft);
    font-size: 9px;
    font-weight: 950;
    letter-spacing: .7px;
}
.pricing-card-pro .pricing-mini-badge { color: var(--pricing-pink); background: var(--pricing-pink-soft); }
.pricing-card-studio .pricing-mini-badge { color: var(--pricing-purple); background: var(--pricing-purple-soft); }
.pricing-price-block { display: flex; align-items: baseline; gap: 10px; margin: 24px 0 7px; }
.pricing-price-block strong { font-size: clamp(43px, 4vw, 58px); line-height: .95; letter-spacing: -2.1px; }
.pricing-price-block span { max-width: 115px; color: #65718a; font-size: 13px; line-height: 1.3; font-weight: 800; }
.pricing-value-line {
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    padding: 9px 11px;
    border-radius: 13px;
    background: #f7faff;
    color: #65718a;
    font-size: 11px;
}
.pricing-value-line b { color: var(--pricing-pink); text-align: right; }
.pricing-card-studio .pricing-value-line b { color: var(--pricing-purple); }
.pricing-card-summary { min-height: 50px; margin: 0 0 15px; color: var(--pricing-text); font-size: 13.5px; line-height: 1.5; }
.pricing-feature-list { display: grid; gap: 8px; margin: 0 0 22px; padding: 0; list-style: none; }
.pricing-feature-list li {
    position: relative;
    min-height: 22px;
    padding-left: 25px;
    color: #25385f;
    font-size: 12.7px;
    line-height: 1.4;
    font-weight: 700;
}
.pricing-feature-list li::before {
    position: absolute;
    left: 0;
    top: 0;
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 950;
}
.pricing-feature-list .is-included::before { content: "✓"; color: var(--pricing-blue); background: var(--pricing-blue-soft); }
.pricing-card-pro .pricing-feature-list .is-included::before { color: var(--pricing-pink); background: var(--pricing-pink-soft); }
.pricing-card-studio .pricing-feature-list .is-included::before { color: var(--pricing-purple); background: var(--pricing-purple-soft); }
.pricing-feature-list .is-locked { color: #8c96aa; }
.pricing-feature-list .is-locked::before { content: "–"; color: #8c96aa; background: #f0f2f6; }
.pricing-card-cta {
    width: 100%;
    min-height: 51px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: auto;
    padding: 0 20px;
    border: 0;
    border-radius: 16px;
    color: white;
    background: linear-gradient(180deg, var(--pricing-pink-bright), var(--pricing-pink));
    box-shadow: 0 14px 28px rgba(245,0,87,.22);
    text-decoration: none;
    cursor: pointer;
    font-weight: 950;
}
.pricing-card-studio .pricing-card-cta { background: linear-gradient(180deg, #8d5dde, var(--pricing-purple)); box-shadow: 0 14px 28px rgba(112,64,189,.22); }
.pricing-card-cta-secondary {
    color: var(--pricing-blue);
    background: white;
    border: 2px solid #8fc4ff;
    box-shadow: 0 12px 25px rgba(7,83,214,.09);
}
.pricing-card-cta:hover { transform: translateY(-2px); }
.pricing-card-cta[aria-disabled="true"] { cursor: default; opacity: .72; transform: none; }
.pricing-card-footnote { margin: 10px 0 0; color: #8590a5; text-align: center; font-size: 10.5px; line-height: 1.35; }

.pricing-dots { min-height: 34px; display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: -6px; }
.pricing-dots button {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #c9d6eb;
    cursor: pointer;
    transition: width .18s ease, background .18s ease;
}
.pricing-dots button.is-active { width: 31px; background: linear-gradient(90deg, var(--pricing-blue), var(--pricing-pink)); }

.pricing-trust {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 24px;
}
.pricing-trust article {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 13px;
    align-items: center;
    padding: 20px;
    border: 1px solid var(--pricing-border);
    border-radius: 20px;
    background: white;
    box-shadow: 0 14px 34px rgba(7,27,77,.055);
}
.pricing-trust article > span {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    color: var(--pricing-blue);
    background: var(--pricing-blue-soft);
    font-size: 18px;
    font-weight: 950;
}
.pricing-trust strong { display: block; margin-bottom: 4px; }
.pricing-trust p { margin: 0; color: var(--pricing-text); font-size: 13px; line-height: 1.4; }

.pricing-footer {
    min-height: 150px;
    display: grid;
    place-items: center;
    gap: 7px;
    padding: 31px 20px;
    border-top: 1px solid var(--pricing-border);
    background: white;
    text-align: center;
}
.pricing-footer img { width: 150px; }
.pricing-footer p { margin: 0; color: var(--pricing-text); }
.pricing-footer a { color: var(--pricing-blue); font-weight: 900; }

.pricing-modal {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: grid;
    place-items: center;
    padding: 20px;
}
.pricing-modal-backdrop { position: absolute; inset: 0; border: 0; background: rgba(5,20,55,.64); backdrop-filter: blur(6px); }
.pricing-modal-card {
    position: relative;
    width: min(100%, 500px);
    padding: 31px;
    border-radius: 28px;
    background: white;
    box-shadow: 0 35px 100px rgba(3,18,52,.32);
    text-align: center;
}
.pricing-modal-icon {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    margin: 0 auto 15px;
    border-radius: 21px;
    color: white;
    background: linear-gradient(145deg, var(--pricing-pink-bright), var(--pricing-pink));
    box-shadow: 0 15px 30px rgba(245,0,87,.22);
    font-size: 28px;
}
.pricing-modal-kicker { color: var(--pricing-pink); font-size: 10px; font-weight: 950; letter-spacing: 1px; }
.pricing-modal-card h2 { margin: 8px 0 10px; font-size: 29px; }
.pricing-modal-card > p { margin: 0; color: var(--pricing-text); line-height: 1.55; }
.pricing-modal-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin: 20px 0;
    padding: 15px 17px;
    border-radius: 16px;
    background: #f7faff;
}
.pricing-modal-summary span { color: var(--pricing-text); font-weight: 800; }
.pricing-modal-summary strong { color: var(--pricing-blue); }
.pricing-modal-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pricing-modal-actions button,
.pricing-modal-actions a {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    border-radius: 15px;
    text-decoration: none;
    cursor: pointer;
    font-weight: 900;
}
.pricing-modal-actions button { border: 1px solid #d6e3f8; background: white; color: var(--pricing-blue); }
.pricing-modal-actions a { color: white; background: var(--pricing-blue); }

body[data-session-state="loading"] .pricing-shell { opacity: .65; pointer-events: none; }
body[data-session-state="ready"] .pricing-shell { opacity: 1; transition: opacity .2s ease; }

@media (max-width: 1040px) {
    .pricing-topbar { grid-template-columns: 1fr auto; }
    .pricing-nav { display: none; }
    .pricing-hero { grid-template-columns: 1fr; gap: 28px; padding-top: 58px; }
    .pricing-context-card { max-width: 650px; }
    .pricing-card[data-relative="-1"] { transform: translateX(calc(-50% - 205px)) translateY(46px) scale(.84) rotate(-4deg); }
    .pricing-card[data-relative="1"] { transform: translateX(calc(-50% + 205px)) translateY(46px) scale(.84) rotate(4deg); }
    .pricing-card[data-relative="-2"] { transform: translateX(calc(-50% - 330px)) translateY(70px) scale(.72) rotate(-7deg); }
    .pricing-card[data-relative="2"] { transform: translateX(calc(-50% + 330px)) translateY(70px) scale(.72) rotate(7deg); }
}

@media (max-width: 760px) {
    .pricing-topbar { min-height: 68px; padding: 8px 16px; gap: 10px; }
    .pricing-brand img { width: 135px; }
    .pricing-login { display: none; }
    .pricing-register,
    .pricing-account-dashboard { min-height: 42px; padding: 0 14px; font-size: 13px; }
    .pricing-account-name { display: none; }
    .pricing-hero { width: min(100% - 28px, 1320px); min-height: 0; padding: 46px 0 38px; }
    .pricing-hero h1 { font-size: clamp(39px, 12vw, 55px); letter-spacing: -1.7px; }
    .pricing-context-card { grid-template-columns: 48px 1fr; padding: 17px; }
    .pricing-context-icon { width: 48px; height: 48px; border-radius: 16px; }
    .pricing-shell { width: calc(100% - 18px); padding-bottom: 55px; }
    .pricing-controls { align-items: stretch; flex-direction: column; gap: 16px; margin-bottom: 23px; }
    .pricing-audience-wrap,
    .pricing-duration-wrap { width: 100%; }
    .pricing-segmented { width: 100%; }
    .pricing-audience button,
    .pricing-duration button { flex: 1 1 0; min-width: 0; padding-left: 8px; padding-right: 8px; }
    .pricing-audience button { justify-content: center; font-size: 13px; }
    .pricing-duration button { font-size: 12px; }
    .pricing-onboarding { grid-template-columns: 38px 1fr; padding: 14px; }
    .pricing-onboarding > span { width: 38px; height: 38px; }
    .pricing-deck-section { padding: 27px 8px 22px; border-radius: 29px; }
    .pricing-section-heading { align-items: center; padding: 0 12px; }
    .pricing-section-heading p { font-size: 14px; }
    .pricing-deck-controls { display: none; }
    .pricing-deck { height: 780px; overflow: hidden; }
    .pricing-card { top: 35px; width: min(408px, calc(100vw - 52px)); min-height: 630px; padding: 25px 23px 22px; }
    .pricing-card[data-relative="-1"] { transform: translateX(calc(-50% - 79vw)) translateY(28px) scale(.91) rotate(-2deg); opacity: .62; }
    .pricing-card[data-relative="1"] { transform: translateX(calc(-50% + 79vw)) translateY(28px) scale(.91) rotate(2deg); opacity: .62; }
    .pricing-card[data-relative="-2"] { transform: translateX(calc(-50% - 118vw)) translateY(50px) scale(.82); opacity: .18; }
    .pricing-card[data-relative="2"] { transform: translateX(calc(-50% + 118vw)) translateY(50px) scale(.82); opacity: .18; }
    .pricing-price-block strong { font-size: 46px; }
    .pricing-feature-list li { font-size: 12.4px; }
    .pricing-trust { grid-template-columns: 1fr; }
    .pricing-modal-card { padding: 25px 20px; }
    .pricing-modal-actions { grid-template-columns: 1fr; }
}

@media (max-width: 430px) {
    .pricing-brand img { width: 124px; }
    .pricing-register,
    .pricing-account-dashboard { padding: 0 11px; }
    .pricing-audience button span { display: none; }
    .pricing-card { width: calc(100vw - 34px); padding-left: 20px; padding-right: 20px; }
    .pricing-card-title-row h3 { max-width: 220px; }
    .pricing-mini-badge { padding: 0 8px; }
    .pricing-value-line { align-items: flex-start; flex-direction: column; gap: 3px; }
    .pricing-value-line b { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* =========================================================
   PAGINA PIANI V2 — CONTROLLI COMPATTI E CARTE A RUOTA
   ========================================================= */

/* Due sole voci nella barra della pagina Piani. */
.pricing-nav {
    gap: 42px;
}

/* Hero più raccolta: si arriva prima ai prezzi. */
.pricing-hero {
    min-height: 285px;
    padding-top: 48px;
    padding-bottom: 34px;
}

/* Il selettore resta visibile mentre si confrontano le carte. */
.pricing-controls {
    position: sticky;
    top: 84px;
    z-index: 85;
    width: fit-content;
    max-width: calc(100vw - 34px);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 auto 22px;
    padding: 8px 10px;
    border: 1px solid rgba(207, 225, 255, .96);
    border-radius: 20px;
    background: rgba(255, 255, 255, .93);
    box-shadow: 0 14px 38px rgba(7, 27, 77, .12);
    backdrop-filter: blur(18px);
}

.pricing-audience-wrap,
.pricing-duration-wrap {
    display: flex;
    align-items: center;
    gap: 7px;
}

.pricing-control-label {
    padding: 0 2px 0 0;
    font-size: 9px;
    line-height: 1.05;
    letter-spacing: .55px;
    white-space: nowrap;
}

.pricing-segmented {
    gap: 3px;
    padding: 4px;
    border-radius: 15px;
    box-shadow: none;
}

.pricing-audience button,
.pricing-duration button {
    min-height: 40px;
}

.pricing-audience button {
    gap: 7px;
    padding: 0 13px;
    font-size: 12px;
}

.pricing-duration button {
    min-width: 88px;
    padding: 5px 10px;
    font-size: 12px;
}

.pricing-duration button small {
    font-size: 8px;
    line-height: 1;
}

.pricing-audience-icon {
    width: 27px !important;
    height: 27px !important;
    display: grid !important;
    place-items: center !important;
    flex: 0 0 27px;
}

.pricing-audience-icon svg {
    width: 19px;
    height: 19px;
}

/* Icone coerenti per bambino, professionista e Studio. */
.pricing-card-icon svg {
    width: 25px;
    height: 25px;
}

/* Sezione e intestazione più compatte. */
.pricing-deck-section {
    padding-top: 25px;
}

.pricing-section-heading {
    align-items: center;
    margin-bottom: 0;
}

.pricing-section-heading h2 {
    margin-top: 4px;
    margin-bottom: 5px;
    font-size: clamp(28px, 2.8vw, 39px);
}

.pricing-section-heading p {
    font-size: 14px;
}

/* Orbita 3D: carta attiva davanti e più in basso, laterali dietro e più in alto. */
.pricing-deck {
    height: 730px;
    perspective: 1500px;
    transform-style: preserve-3d;
}

.pricing-card {
    top: 16px;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    transition:
        transform .48s cubic-bezier(.2,.8,.2,1),
        opacity .34s ease,
        filter .34s ease,
        box-shadow .34s ease,
        height .34s ease;
}

.pricing-card[data-relative="0"] {
    z-index: 30;
    opacity: 1;
    filter: none;
    transform:
        translateX(-50%)
        translateY(62px)
        translateZ(105px)
        scale(1);
}

.pricing-card[data-relative="-1"] {
    z-index: 18;
    height: 520px;
    min-height: 520px;
    overflow: hidden;
    opacity: .72;
    filter: saturate(.82) brightness(.98);
    transform:
        translateX(calc(-50% - 320px))
        translateY(4px)
        translateZ(-115px)
        rotateY(27deg)
        scale(.73);
}

.pricing-card[data-relative="1"] {
    z-index: 18;
    height: 520px;
    min-height: 520px;
    overflow: hidden;
    opacity: .72;
    filter: saturate(.82) brightness(.98);
    transform:
        translateX(calc(-50% + 320px))
        translateY(4px)
        translateZ(-115px)
        rotateY(-27deg)
        scale(.73);
}

.pricing-card[data-relative="-2"] {
    z-index: 8;
    height: 470px;
    min-height: 470px;
    overflow: hidden;
    opacity: .20;
    filter: saturate(.6) brightness(.96);
    transform:
        translateX(calc(-50% - 455px))
        translateY(-34px)
        translateZ(-270px)
        rotateY(39deg)
        scale(.56);
}

.pricing-card[data-relative="2"] {
    z-index: 8;
    height: 470px;
    min-height: 470px;
    overflow: hidden;
    opacity: .20;
    filter: saturate(.6) brightness(.96);
    transform:
        translateX(calc(-50% + 455px))
        translateY(-34px)
        translateZ(-270px)
        rotateY(-39deg)
        scale(.56);
}

.pricing-card[data-relative="-1"]:hover {
    opacity: .94;
    transform:
        translateX(calc(-50% - 305px))
        translateY(-8px)
        translateZ(-80px)
        rotateY(24deg)
        scale(.76);
}

.pricing-card[data-relative="1"]:hover {
    opacity: .94;
    transform:
        translateX(calc(-50% + 305px))
        translateY(-8px)
        translateZ(-80px)
        rotateY(-24deg)
        scale(.76);
}

@media (max-width: 1040px) {
    .pricing-controls {
        top: 78px;
    }

    .pricing-card[data-relative="0"] {
        transform: translateX(-50%) translateY(58px) translateZ(85px) scale(1);
    }

    .pricing-card[data-relative="-1"] {
        transform: translateX(calc(-50% - 245px)) translateY(8px) translateZ(-100px) rotateY(23deg) scale(.70);
    }

    .pricing-card[data-relative="1"] {
        transform: translateX(calc(-50% + 245px)) translateY(8px) translateZ(-100px) rotateY(-23deg) scale(.70);
    }

    .pricing-card[data-relative="-2"] {
        transform: translateX(calc(-50% - 350px)) translateY(-24px) translateZ(-230px) rotateY(34deg) scale(.54);
    }

    .pricing-card[data-relative="2"] {
        transform: translateX(calc(-50% + 350px)) translateY(-24px) translateZ(-230px) rotateY(-34deg) scale(.54);
    }
}

@media (max-width: 760px) {
    .pricing-hero {
        padding-top: 35px;
        padding-bottom: 28px;
    }

    .pricing-controls {
        top: 73px;
        width: calc(100% - 8px);
        max-width: none;
        display: grid;
        gap: 6px;
        padding: 7px;
        border-radius: 17px;
    }

    .pricing-audience-wrap,
    .pricing-duration-wrap {
        width: 100%;
        gap: 5px;
    }

    .pricing-control-label {
        display: none;
    }

    .pricing-segmented {
        flex: 1 1 auto;
    }

    .pricing-audience button,
    .pricing-duration button {
        min-height: 37px;
    }

    .pricing-deck {
        height: 755px;
        perspective: 1100px;
    }

    .pricing-card {
        top: 18px;
    }

    .pricing-card[data-relative="0"] {
        transform: translateX(-50%) translateY(42px) translateZ(55px) scale(1);
    }

    .pricing-card[data-relative="-1"] {
        transform: translateX(calc(-50% - 72vw)) translateY(6px) translateZ(-75px) rotateY(13deg) scale(.84);
        opacity: .48;
    }

    .pricing-card[data-relative="1"] {
        transform: translateX(calc(-50% + 72vw)) translateY(6px) translateZ(-75px) rotateY(-13deg) scale(.84);
        opacity: .48;
    }

    .pricing-card[data-relative="-2"] {
        transform: translateX(calc(-50% - 105vw)) translateY(-18px) translateZ(-180px) rotateY(20deg) scale(.68);
        opacity: .12;
    }

    .pricing-card[data-relative="2"] {
        transform: translateX(calc(-50% + 105vw)) translateY(-18px) translateZ(-180px) rotateY(-20deg) scale(.68);
        opacity: .12;
    }
}

@media (max-width: 430px) {
    .pricing-audience button {
        padding-left: 7px;
        padding-right: 7px;
        font-size: 11px;
    }

    .pricing-duration button {
        min-width: 0;
        font-size: 11px;
    }

    .pricing-audience-icon {
        width: 24px !important;
        height: 24px !important;
        flex-basis: 24px;
    }

    .pricing-audience-icon svg {
        width: 17px;
        height: 17px;
    }
}


/* =========================================================
   PAGINA PIANI V3 — BARRA LATERALE, CLICK SICURO, NIENTE TAGLI
   ========================================================= */

/* La selezione non galleggia più sopra le carte: vive in una colonna laterale. */
.pricing-shell {
    width: min(1460px, calc(100% - 34px));
    display: grid;
    grid-template-columns: 228px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.pricing-controls {
    position: relative !important;
    top: auto !important;
    z-index: 5;
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 100%;
    max-width: none;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 20px;
    margin: 0;
    padding: 18px;
    border-radius: 25px;
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 18px 48px rgba(7, 27, 77, .10);
    backdrop-filter: none;
}

.pricing-audience-wrap,
.pricing-duration-wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}

.pricing-control-label {
    display: block;
    padding: 0 2px;
    color: #66728a;
    font-size: 10px;
    line-height: 1.2;
    letter-spacing: .75px;
}

.pricing-segmented {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
    padding: 5px;
    border-radius: 18px;
}

.pricing-audience button,
.pricing-duration button {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    justify-content: flex-start;
    padding: 7px 11px;
    text-align: left;
}

.pricing-duration button {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pricing-duration button small {
    max-width: 74px;
    text-align: right;
}

.pricing-onboarding,
.pricing-deck-section {
    grid-column: 2;
    width: 100%;
}

.pricing-onboarding {
    margin-bottom: 18px;
}

.pricing-trust {
    grid-column: 1 / -1;
    width: 100%;
}

/* La sezione può contenere per intero anche la carta più lunga. */
.pricing-deck-section {
    overflow: hidden;
    padding: 26px 20px 24px;
}

.pricing-section-heading {
    width: min(1080px, 100%);
    margin-bottom: 4px;
}

.pricing-deck {
    width: min(1120px, 100%);
    height: var(--pricing-deck-height, 820px) !important;
    min-height: 700px;
    overflow: visible;
    transition: height .28s ease;
}

/* Effetto ruota/coverflow: niente inclinazione a ventaglio sul piano 2D. */
.pricing-card {
    top: 18px;
}

.pricing-card[data-relative="0"] {
    transform: translateX(-50%) translateY(22px) translateZ(110px) scale(1);
}

.pricing-card[data-relative="-1"] {
    height: 540px;
    min-height: 540px;
    opacity: .78;
    transform: translateX(calc(-50% - 300px)) translateY(62px) translateZ(-110px) rotateY(27deg) scale(.76);
}

.pricing-card[data-relative="1"] {
    height: 540px;
    min-height: 540px;
    opacity: .78;
    transform: translateX(calc(-50% + 300px)) translateY(62px) translateZ(-110px) rotateY(-27deg) scale(.76);
}

.pricing-card[data-relative="-2"] {
    height: 500px;
    min-height: 500px;
    opacity: .22;
    transform: translateX(calc(-50% - 430px)) translateY(88px) translateZ(-245px) rotateY(39deg) scale(.58);
}

.pricing-card[data-relative="2"] {
    height: 500px;
    min-height: 500px;
    opacity: .22;
    transform: translateX(calc(-50% + 430px)) translateY(88px) translateZ(-245px) rotateY(-39deg) scale(.58);
}

.pricing-card[data-relative="-1"]:hover {
    opacity: .92;
    transform: translateX(calc(-50% - 292px)) translateY(54px) translateZ(-80px) rotateY(24deg) scale(.78);
}

.pricing-card[data-relative="1"]:hover {
    opacity: .92;
    transform: translateX(calc(-50% + 292px)) translateY(54px) translateZ(-80px) rotateY(-24deg) scale(.78);
}

/* Pulsante trasparente sopra ogni carta laterale: qualunque punto visibile è cliccabile. */
.pricing-card-select-target {
    display: none;
}

.pricing-card:not(.is-active) > .pricing-card-select-target {
    position: absolute;
    inset: 0;
    z-index: 120;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: inherit;
    background: transparent;
    cursor: pointer;
}

.pricing-card:not(.is-active) > .pricing-card-select-target:focus-visible {
    outline: 4px solid rgba(37, 132, 255, .35);
    outline-offset: -5px;
}

@media (max-width: 1180px) {
    .pricing-shell {
        grid-template-columns: 205px minmax(0, 1fr);
        gap: 16px;
    }

    .pricing-controls {
        padding: 15px;
    }

    .pricing-card[data-relative="-1"] {
        transform: translateX(calc(-50% - 235px)) translateY(62px) translateZ(-100px) rotateY(23deg) scale(.72);
    }

    .pricing-card[data-relative="1"] {
        transform: translateX(calc(-50% + 235px)) translateY(62px) translateZ(-100px) rotateY(-23deg) scale(.72);
    }

    .pricing-card[data-relative="-2"] {
        transform: translateX(calc(-50% - 340px)) translateY(86px) translateZ(-220px) rotateY(33deg) scale(.55);
    }

    .pricing-card[data-relative="2"] {
        transform: translateX(calc(-50% + 340px)) translateY(86px) translateZ(-220px) rotateY(-33deg) scale(.55);
    }
}

@media (max-width: 920px) {
    .pricing-shell {
        display: block;
    }

    .pricing-controls {
        position: relative !important;
        top: auto !important;
        width: min(760px, 100%);
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        margin: 0 auto 18px;
        padding: 12px;
    }

    .pricing-segmented {
        flex-direction: row;
    }

    .pricing-audience button,
    .pricing-duration button {
        justify-content: center;
        text-align: center;
    }

    .pricing-duration button {
        display: grid;
        place-items: center;
    }

    .pricing-duration button small {
        max-width: none;
        text-align: center;
    }

    .pricing-onboarding,
    .pricing-deck-section,
    .pricing-trust {
        width: 100%;
    }

    .pricing-card[data-relative="-1"] {
        transform: translateX(calc(-50% - 62vw)) translateY(56px) translateZ(-80px) rotateY(14deg) scale(.82);
    }

    .pricing-card[data-relative="1"] {
        transform: translateX(calc(-50% + 62vw)) translateY(56px) translateZ(-80px) rotateY(-14deg) scale(.82);
    }
}

@media (max-width: 640px) {
    .pricing-controls {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 10px;
    }

    .pricing-control-label {
        display: block;
    }

    .pricing-deck-section {
        padding-left: 8px;
        padding-right: 8px;
    }

    .pricing-deck {
        min-height: 760px;
    }

    .pricing-card[data-relative="0"] {
        transform: translateX(-50%) translateY(18px) translateZ(50px) scale(1);
    }

    .pricing-card[data-relative="-1"] {
        transform: translateX(calc(-50% - 78vw)) translateY(48px) translateZ(-70px) rotateY(10deg) scale(.86);
    }

    .pricing-card[data-relative="1"] {
        transform: translateX(calc(-50% + 78vw)) translateY(48px) translateZ(-70px) rotateY(-10deg) scale(.86);
    }
}

/* Il bersaglio di click occupa solo la parte realmente esposta della carta laterale,
   così la carta centrale non può intercettare il click. */
.pricing-card[data-relative="-1"] > .pricing-card-select-target,
.pricing-card[data-relative="-2"] > .pricing-card-select-target {
    inset: 0 auto 0 0;
    width: 48%;
    height: 100%;
}

.pricing-card[data-relative="1"] > .pricing-card-select-target,
.pricing-card[data-relative="2"] > .pricing-card-select-target {
    inset: 0 0 0 auto;
    width: 48%;
    height: 100%;
}

/* =========================================================
   PAGINA PIANI V4 — HERO FULL WIDTH, SIDEBAR STICKY, CARD COMPATTE
   ========================================================= */

/* Hero esteso fino ai margini della pagina e senza box informativo superfluo. */
.pricing-hero {
    width: 100% !important;
    max-width: none !important;
    min-height: 280px !important;
    display: block !important;
    margin: 0 !important;
    padding: 50px clamp(24px, 6vw, 96px) 44px !important;
    overflow: hidden;
    background:
        radial-gradient(circle at 6% 22%, rgba(37, 132, 255, .16), transparent 28%),
        radial-gradient(circle at 94% 16%, rgba(245, 0, 87, .14), transparent 27%),
        linear-gradient(90deg, rgba(235, 245, 255, .92) 0%, rgba(255,255,255,.98) 47%, rgba(255,240,247,.90) 100%);
}

.pricing-hero-copy {
    width: min(1320px, 100%);
    max-width: none !important;
    margin: 0 auto;
}

.pricing-hero h1 {
    max-width: 900px;
    margin: 15px 0 14px;
    font-size: clamp(40px, 4.8vw, 68px);
}

.pricing-hero-copy > p {
    max-width: 900px;
    font-size: clamp(16px, 1.35vw, 19px);
    line-height: 1.55;
}

.pricing-orb-blue {
    left: -115px !important;
    top: -55px !important;
}

.pricing-orb-pink {
    right: -95px !important;
    top: -90px !important;
}

/* La barra laterale segue lo scorrimento senza sovrapporsi alle carte. */
.pricing-controls {
    position: sticky !important;
    top: 92px !important;
    align-self: start !important;
    z-index: 20 !important;
    gap: 14px !important;
    padding: 14px !important;
    border: 1px solid rgba(219, 231, 251, .96);
    box-shadow: 0 18px 45px rgba(7, 27, 77, .11) !important;
}

.pricing-audience-wrap,
.pricing-duration-wrap {
    gap: 6px !important;
}

.pricing-segmented {
    gap: 4px !important;
    padding: 4px !important;
}

.pricing-audience button,
.pricing-duration button {
    min-height: 40px !important;
    padding: 6px 9px !important;
}

.pricing-audience button {
    gap: 7px !important;
    font-size: 12.5px;
}

.pricing-audience button span {
    width: 25px !important;
    height: 25px !important;
}

.pricing-duration button {
    font-size: 12.5px;
}

/* Sezione più compatta e senza tagli nella parte inferiore. */
.pricing-deck-section {
    overflow: hidden !important;
    padding: 22px 18px 16px !important;
}

.pricing-section-heading {
    margin-bottom: 0 !important;
}

.pricing-section-heading h2 {
    margin: 5px 0 5px !important;
    font-size: clamp(28px, 2.8vw, 39px) !important;
}

.pricing-section-heading p {
    font-size: 13.5px;
    line-height: 1.4;
}

.pricing-deck {
    min-height: 610px !important;
    height: var(--pricing-deck-height, 650px) !important;
    perspective: none !important;
    transform-style: flat !important;
}

/* Carta centrale nitida: nessun translateZ o ridimensionamento del testo. */
.pricing-card {
    top: 10px !important;
    width: min(500px, calc(100vw - 76px)) !important;
    min-height: 0 !important;
    padding: 21px 23px 18px !important;
    border-radius: 28px !important;
    filter: none !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    transition:
        transform .36s cubic-bezier(.2,.8,.2,1),
        opacity .26s ease,
        box-shadow .26s ease !important;
}

.pricing-card[data-relative="0"] {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    opacity: 1 !important;
    filter: none !important;
    transform: translateX(-50%) translateY(10px) scale(1) !important;
}

/* Ruota 2D morbida: mantiene l’effetto carosello ma evita il testo sfocato. */
.pricing-card[data-relative="-1"] {
    height: 500px !important;
    min-height: 500px !important;
    opacity: .76 !important;
    filter: none !important;
    transform: translateX(calc(-50% - 315px)) translateY(48px) scale(.79) !important;
}

.pricing-card[data-relative="1"] {
    height: 500px !important;
    min-height: 500px !important;
    opacity: .76 !important;
    filter: none !important;
    transform: translateX(calc(-50% + 315px)) translateY(48px) scale(.79) !important;
}

.pricing-card[data-relative="-2"] {
    height: 470px !important;
    min-height: 470px !important;
    opacity: .20 !important;
    filter: none !important;
    transform: translateX(calc(-50% - 455px)) translateY(72px) scale(.62) !important;
}

.pricing-card[data-relative="2"] {
    height: 470px !important;
    min-height: 470px !important;
    opacity: .20 !important;
    filter: none !important;
    transform: translateX(calc(-50% + 455px)) translateY(72px) scale(.62) !important;
}

.pricing-card[data-relative="-1"]:hover {
    opacity: .92 !important;
    transform: translateX(calc(-50% - 306px)) translateY(42px) scale(.81) !important;
}

.pricing-card[data-relative="1"]:hover {
    opacity: .92 !important;
    transform: translateX(calc(-50% + 306px)) translateY(42px) scale(.81) !important;
}

/* Contenuti più compatti: tutte le specifiche restano nella carta. */
.pricing-card-topline {
    margin-bottom: 11px !important;
}

.pricing-card-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 12px !important;
}

.pricing-plan-label {
    font-size: 27px !important;
}

.pricing-card-title-row h3 {
    margin-top: 4px !important;
    font-size: 14px !important;
}

.pricing-price-block {
    margin: 15px 0 5px !important;
}

.pricing-price-block strong {
    font-size: clamp(42px, 3.5vw, 52px) !important;
}

.pricing-price-block span {
    font-size: 11.5px !important;
}

.pricing-value-line {
    min-height: 36px !important;
    margin-bottom: 10px !important;
    padding: 7px 9px !important;
    font-size: 10.5px !important;
}

.pricing-card-summary {
    min-height: 0 !important;
    margin: 0 0 10px !important;
    font-size: 12.3px !important;
    line-height: 1.35 !important;
}

.pricing-feature-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 14px !important;
    row-gap: 6px !important;
    margin: 0 0 14px !important;
}

.pricing-feature-list li {
    min-height: 18px !important;
    padding-left: 22px !important;
    font-size: 11.2px !important;
    line-height: 1.25 !important;
}

.pricing-feature-list li::before {
    width: 16px !important;
    height: 16px !important;
    border-radius: 5px !important;
    font-size: 9px !important;
}

.pricing-card-cta {
    min-height: 45px !important;
    border-radius: 14px !important;
    font-size: 13px !important;
}

.pricing-card-footnote {
    margin-top: 7px !important;
    font-size: 9.5px !important;
}

.pricing-dots {
    margin-top: -2px !important;
}

@media (max-width: 1180px) {
    .pricing-card[data-relative="-1"] {
        transform: translateX(calc(-50% - 245px)) translateY(48px) scale(.74) !important;
    }

    .pricing-card[data-relative="1"] {
        transform: translateX(calc(-50% + 245px)) translateY(48px) scale(.74) !important;
    }

    .pricing-card[data-relative="-2"] {
        transform: translateX(calc(-50% - 350px)) translateY(70px) scale(.57) !important;
    }

    .pricing-card[data-relative="2"] {
        transform: translateX(calc(-50% + 350px)) translateY(70px) scale(.57) !important;
    }
}

@media (max-width: 920px) {
    .pricing-hero {
        padding: 42px 24px 38px !important;
    }

    .pricing-controls {
        position: relative !important;
        top: auto !important;
    }

    .pricing-card[data-relative="-1"] {
        transform: translateX(calc(-50% - 61vw)) translateY(44px) scale(.80) !important;
    }

    .pricing-card[data-relative="1"] {
        transform: translateX(calc(-50% + 61vw)) translateY(44px) scale(.80) !important;
    }
}

@media (max-width: 640px) {
    .pricing-hero {
        min-height: 0 !important;
        padding: 34px 18px 32px !important;
    }

    .pricing-hero h1 {
        font-size: clamp(36px, 11vw, 49px) !important;
        letter-spacing: -1.5px !important;
    }

    .pricing-card {
        width: min(430px, calc(100vw - 38px)) !important;
        padding: 20px 19px 17px !important;
    }

    .pricing-feature-list {
        grid-template-columns: 1fr !important;
        row-gap: 6px !important;
    }

    .pricing-card[data-relative="-1"] {
        transform: translateX(calc(-50% - 79vw)) translateY(44px) scale(.84) !important;
    }

    .pricing-card[data-relative="1"] {
        transform: translateX(calc(-50% + 79vw)) translateY(44px) scale(.84) !important;
    }
}

/* =========================================================
   PAGINA PIANI V5 — TESTI NITIDI SENZA SCALING DELLE CARD
   Chrome su Windows rasterizza il testo quando un contenitore
   viene centrato o ridimensionato con transform/scale.
   Le carte vengono quindi posizionate con left/right/margini reali.
   ========================================================= */

.pricing-card {
    transform: none !important;
    transform-style: flat !important;
    backface-visibility: visible !important;
    will-change: auto !important;
    -webkit-font-smoothing: auto !important;
    text-rendering: auto !important;
    transition:
        left .34s cubic-bezier(.2,.8,.2,1),
        right .34s cubic-bezier(.2,.8,.2,1),
        margin-left .34s cubic-bezier(.2,.8,.2,1),
        width .34s cubic-bezier(.2,.8,.2,1),
        top .34s cubic-bezier(.2,.8,.2,1),
        opacity .24s ease,
        box-shadow .24s ease !important;
}

/* Carta selezionata: centrata senza alcuna trasformazione grafica. */
.pricing-card[data-relative="0"] {
    left: 0 !important;
    right: 0 !important;
    width: min(500px, calc(100vw - 76px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    top: 20px !important;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
}

/* Carte laterali: dimensioni fisiche ridotte, non scale(). */
.pricing-card[data-relative="-1"] {
    left: 50% !important;
    right: auto !important;
    width: 395px !important;
    margin-left: -545px !important;
    margin-right: 0 !important;
    top: 58px !important;
    transform: none !important;
}

.pricing-card[data-relative="1"] {
    left: 50% !important;
    right: auto !important;
    width: 395px !important;
    margin-left: 150px !important;
    margin-right: 0 !important;
    top: 58px !important;
    transform: none !important;
}

.pricing-card[data-relative="-2"] {
    left: 50% !important;
    right: auto !important;
    width: 310px !important;
    margin-left: -665px !important;
    margin-right: 0 !important;
    top: 82px !important;
    transform: none !important;
}

.pricing-card[data-relative="2"] {
    left: 50% !important;
    right: auto !important;
    width: 310px !important;
    margin-left: 355px !important;
    margin-right: 0 !important;
    top: 82px !important;
    transform: none !important;
}

.pricing-card[data-relative="-1"]:hover,
.pricing-card[data-relative="1"]:hover {
    top: 52px !important;
    opacity: .92 !important;
    transform: none !important;
}

/* Evita che icone e testi ereditino un livello composito sfocato. */
.pricing-card[data-relative="0"] *,
.pricing-card[data-relative="0"]::before,
.pricing-card[data-relative="0"]::after {
    transform: none;
    -webkit-font-smoothing: auto;
    text-rendering: auto;
}

/* Il pulsante mantiene solo il piccolo movimento al passaggio del mouse. */
.pricing-card[data-relative="0"] .pricing-card-cta:hover {
    transform: translateY(-2px);
}

@media (max-width: 1180px) {
    .pricing-card[data-relative="0"] {
        width: min(480px, calc(100vw - 70px)) !important;
    }

    .pricing-card[data-relative="-1"] {
        width: 350px !important;
        margin-left: -465px !important;
    }

    .pricing-card[data-relative="1"] {
        width: 350px !important;
        margin-left: 115px !important;
    }

    .pricing-card[data-relative="-2"] {
        width: 270px !important;
        margin-left: -570px !important;
    }

    .pricing-card[data-relative="2"] {
        width: 270px !important;
        margin-left: 300px !important;
    }
}

@media (max-width: 920px) {
    .pricing-card[data-relative="0"] {
        left: 0 !important;
        right: 0 !important;
        width: min(500px, calc(100vw - 54px)) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .pricing-card[data-relative="-1"] {
        left: -52vw !important;
        right: auto !important;
        width: min(420px, 78vw) !important;
        margin-left: 0 !important;
    }

    .pricing-card[data-relative="1"] {
        left: auto !important;
        right: -52vw !important;
        width: min(420px, 78vw) !important;
        margin-left: 0 !important;
    }

    .pricing-card[data-relative="-2"] {
        left: -82vw !important;
        right: auto !important;
        width: 70vw !important;
        margin-left: 0 !important;
    }

    .pricing-card[data-relative="2"] {
        left: auto !important;
        right: -82vw !important;
        width: 70vw !important;
        margin-left: 0 !important;
    }
}

@media (max-width: 640px) {
    .pricing-card[data-relative="0"] {
        width: calc(100vw - 38px) !important;
    }

    .pricing-card[data-relative="-1"] {
        left: -74vw !important;
        width: 84vw !important;
    }

    .pricing-card[data-relative="1"] {
        right: -74vw !important;
        width: 84vw !important;
    }

    .pricing-card[data-relative="-2"] {
        left: -108vw !important;
        width: 76vw !important;
    }

    .pricing-card[data-relative="2"] {
        right: -108vw !important;
        width: 76vw !important;
    }
}

/* STRIPE-TEST-V1 */
.pricing-modal-status {
    min-height: 22px;
    margin: 12px 0 0;
    font-weight: 800;
    color: #0753d6;
}
.pricing-modal-status.is-error { color: #c62828; }
.pricing-modal-status.is-success { color: #087f4b; }
.pricing-modal-actions .pricing-modal-checkout {
    border: 0;
    background: #0753d6;
    color: #fff;
    cursor: pointer;
}
.pricing-modal-actions .pricing-modal-checkout:disabled {
    opacity: .55;
    cursor: wait;
}

/* =========================================================
   TACHIREAD-PIANI-BACKGROUND-RIGHE-NON-COMPRESSE-V6-CSS

   Causa reale:
   le carte laterali hanno altezza fissa e sono contenitori flex.
   Il browser riduceva l'altezza dei blocchi interni; il testo,
   però, continuava a fuoriuscire e finiva sopra le righe successive.

   Correzione:
   nessun blocco interno può più restringersi verticalmente.
   Posizioni, dimensioni e animazioni delle carte non cambiano.
   ========================================================= */

.pricing-card:not([data-relative="0"]) > .pricing-card-topline,
.pricing-card:not([data-relative="0"]) > .pricing-card-title-row,
.pricing-card:not([data-relative="0"]) > .pricing-price-block,
.pricing-card:not([data-relative="0"]) > .pricing-value-line,
.pricing-card:not([data-relative="0"]) > .pricing-card-summary,
.pricing-card:not([data-relative="0"]) > .pricing-feature-list,
.pricing-card:not([data-relative="0"]) > .pricing-card-cta,
.pricing-card:not([data-relative="0"]) > .pricing-card-footnote {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    min-width: 0 !important;
}

.pricing-card:not([data-relative="0"]) .pricing-feature-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    grid-auto-rows: max-content !important;
    align-content: start !important;
    align-items: start !important;
    column-gap: 12px !important;
    row-gap: 6px !important;
}

.pricing-card:not([data-relative="0"]) .pricing-feature-list li {
    align-self: start !important;
    min-width: 0 !important;
    min-height: 18px !important;
    height: auto !important;
    overflow: visible !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    white-space: normal !important;
}

.pricing-card:not([data-relative="0"]) .pricing-card-summary {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
}

.pricing-card:not([data-relative="0"]) .pricing-card-ribbon {
    top: 10px !important;
    z-index: 8 !important;
    white-space: nowrap !important;
}

.pricing-card[data-relative="-1"] .pricing-card-ribbon,
.pricing-card[data-relative="-2"] .pricing-card-ribbon {
    left: 18px !important;
    right: auto !important;
}

.pricing-card[data-relative="1"] .pricing-card-ribbon,
.pricing-card[data-relative="2"] .pricing-card-ribbon {
    left: auto !important;
    right: 18px !important;
}