:root {
    --bg-deep: #061827;
    --bg-mid: #0f2f4a;
    --bg-soft: #eef6fd;
    --surface: #ffffff;
    --line: #d9e6f1;
    --line-dark: #26465f;
    --text: #102234;
    --muted: #577187;
    --brand: #1392f0;
    --brand-dark: #0a72be;
    --accent: #14bf8f;
    --danger: #a33a3a;
    --shadow: 0 16px 38px rgba(8, 24, 38, 0.2);
    --warm: #ff8a33;
    --sun: #ffcb57;
    --violet: #7a66ff;
    --mint: #20b089;
    --red-main: #e94a4a;
    --green-main: #16b86f;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    font-family: "Manrope", sans-serif;
    color: var(--text);
    background:
        radial-gradient(1200px 720px at 8% 0%, #1c4b6f 0%, transparent 60%),
        radial-gradient(760px 460px at 88% 10%, rgba(233, 74, 74, 0.42) 0%, transparent 58%),
        radial-gradient(700px 460px at 14% 84%, rgba(22, 184, 111, 0.42) 0%, transparent 58%),
        radial-gradient(900px 550px at 100% 100%, #193e5e 0%, transparent 58%),
        radial-gradient(650px 420px at 0% 100%, rgba(255, 138, 51, 0.35) 0%, transparent 58%),
        linear-gradient(145deg, var(--bg-deep), var(--bg-mid));
}

a {
    color: inherit;
}

.container {
    width: min(1180px, 100% - 2rem);
    margin-inline: auto;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    border-bottom: 1px solid rgba(193, 218, 238, 0.18);
    background: linear-gradient(120deg, rgba(7, 28, 46, 0.92), rgba(12, 44, 58, 0.9), rgba(56, 28, 38, 0.88));
    backdrop-filter: blur(12px);
}

.header-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1rem;
    align-items: center;
    min-height: 76px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    text-decoration: none;
}

.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.2rem;
    height: 3.2rem;
    padding: 0.25rem;
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(145deg, rgba(255, 118, 59, 0.3), rgba(111, 209, 74, 0.26));
    border: 1px solid rgba(255, 236, 201, 0.16);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

.brand-mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.brand-copy {
    display: inline-flex;
    flex-direction: column;
    line-height: 1;
}

.brand-copy strong {
    font-family: "Sora", sans-serif;
    font-size: 1.22rem;
    color: #f0f7ff;
}

.brand-copy small {
    margin-top: 0.18rem;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #aed6c4;
}

.main-nav {
    justify-self: center;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
}

.main-nav a {
    text-decoration: none;
    color: #d9ecff;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: 0.35rem 0.25rem;
    margin-inline: 0.35rem;
    font-size: 0.88rem;
    font-weight: 700;
    transition: 0.2s ease;
    background: transparent;
}

.nav-dropdown {
    position: relative;
}

.nav-dropdown-toggle {
    list-style: none;
    text-decoration: none;
    color: #d9ecff;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: 0.35rem 1.1rem 0.35rem 0.25rem;
    margin-inline: 0.35rem;
    font-size: 0.88rem;
    font-weight: 700;
    transition: 0.2s ease;
    background: transparent;
    cursor: pointer;
    position: relative;
    user-select: none;
}

.nav-dropdown-toggle::-webkit-details-marker {
    display: none;
}

.nav-dropdown-toggle::after {
    content: "";
    position: absolute;
    right: 0.2rem;
    top: 50%;
    width: 0.45rem;
    height: 0.45rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-62%) rotate(45deg);
    transition: transform 0.2s ease;
}

.nav-dropdown[open] .nav-dropdown-toggle::after {
    transform: translateY(-28%) rotate(-135deg);
}

.nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 0.55rem);
    left: 0;
    min-width: 14rem;
    display: grid;
    gap: 0.25rem;
    padding: 0.5rem;
    border: 1px solid rgba(255, 233, 190, 0.16);
    border-radius: 16px;
    background: linear-gradient(165deg, rgba(10, 29, 47, 0.98), rgba(8, 22, 36, 0.99));
    box-shadow: 0 18px 34px rgba(2, 10, 16, 0.28);
}

.nav-dropdown-menu a {
    margin: 0;
    padding: 0.62rem 0.72rem;
    border-radius: 12px;
    border-bottom: 0;
}

.main-nav a:nth-child(odd) {
    border-color: transparent;
}

.main-nav a:nth-child(even) {
    border-color: transparent;
}

.main-nav a:hover,
.main-nav a.is-active {
    color: #ffffff;
    border-bottom-color: #e53e4a;
    background: transparent;
}

.nav-dropdown-toggle:hover,
.nav-dropdown.is-active .nav-dropdown-toggle,
.nav-dropdown[open] .nav-dropdown-toggle {
    color: #ffffff;
    border-bottom-color: #e53e4a;
    background: transparent;
}

.header-actions {
    display: flex;
    gap: 0.55rem;
}

.btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    border: 1px solid rgba(20, 89, 66, 0.65);
    background: linear-gradient(145deg, var(--red-main), var(--green-main));
    color: #ffffff;
    text-decoration: none;
    font-weight: 800;
    padding: 0.62rem 0.92rem;
    font-size: 0.92rem;
    cursor: pointer;
}

.btn.small {
    padding: 0.5rem 0.72rem;
    font-size: 0.84rem;
}

.btn.ghost {
    background: transparent;
    border-color: #9fd8b8;
    color: #d7ebfc;
}

.btn.secondary {
    background: linear-gradient(145deg, #f8fdf9, #ecfaf1);
    color: #1f4e39;
    border-color: #bfe8d2;
}

.menu-toggle {
    display: none;
    justify-self: end;
    border: 1px solid rgba(192, 216, 235, 0.42);
    border-radius: 10px;
    background: transparent;
    color: #d9eefe;
    font-weight: 700;
    padding: 0.5rem 0.8rem;
}

.cookie-consent {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 1rem;
    z-index: 80;
    padding: 0 1rem;
    pointer-events: none;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.cookie-consent.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.cookie-consent__panel {
    width: min(980px, 100%);
    margin: 0 auto;
    border: 1px solid #d6dde6;
    border-radius: 14px;
    background: #f5f7fa;
    box-shadow: 0 18px 40px rgba(8, 20, 32, 0.28);
    padding: 1.15rem 1.2rem 1rem;
}

.cookie-consent__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
}

.cookie-consent__header h2 {
    margin: 0;
    color: #1f3143;
    font-size: clamp(1.15rem, 2.4vw, 2rem);
}

.cookie-consent__close {
    border: 0;
    background: transparent;
    color: #5f7384;
    font-size: 1.25rem;
    line-height: 1;
    font-weight: 800;
    cursor: pointer;
    padding: 0.15rem 0.2rem;
}

.cookie-consent__panel p {
    color: #334f66;
    margin: 0.58rem 0;
}

.cookie-consent__panel a {
    color: #ad2332;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cookie-consent__actions {
    margin-top: 0.82rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.7rem;
}

.btn-cookie {
    border-radius: 10px;
    border: 1px solid #c7d1db;
    background: #ffffff;
    color: #25374a;
    font-weight: 800;
    font-size: 1rem;
    min-height: 3rem;
    padding: 0.65rem 0.75rem;
    cursor: pointer;
}

.btn-cookie--ghost {
    background: #f1f3f6;
}

.btn-cookie--neutral {
    background: #ffffff;
}

.btn-cookie--accept {
    border-color: #be1e2d;
    background: #be1e2d;
    color: #ffffff;
}

.btn-cookie--save {
    min-height: 2.8rem;
    border-color: #0f6f4e;
    background: #0f6f4e;
    color: #ffffff;
}

.cookie-preferences {
    margin-top: 0.8rem;
    padding-top: 0.8rem;
    border-top: 1px solid #d7dee7;
}

.cookie-preferences h3 {
    margin-bottom: 0.6rem;
    color: #253b51;
}

.cookie-switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    margin-bottom: 0.5rem;
    color: #2b4a61;
    font-weight: 700;
}

.cookie-switch input[type="checkbox"] {
    width: 1.2rem;
    height: 1.2rem;
    accent-color: #be1e2d;
}

.cookie-preferences__actions {
    margin-top: 0.65rem;
}

.cookie-consent__links {
    margin-top: 0.75rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    color: #546f86;
    font-size: 0.9rem;
}

.cookie-modal-open {
    overflow: hidden;
}

.cookie-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9999 !important;
    display: grid !important;
    place-items: center !important;
    padding: 1rem !important;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.cookie-modal.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.cookie-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(4, 16, 28, 0.62);
    backdrop-filter: blur(3px);
}

.cookie-modal__dialog {
    position: relative;
    width: min(820px, 100%);
    border: 1px solid #d8dfe8;
    border-radius: 16px;
    background: #f7f9fc;
    box-shadow: 0 24px 52px rgba(4, 14, 23, 0.35);
    padding: 1.2rem 1.25rem 1.05rem;
}

.cookie-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
}

.cookie-modal__header h2 {
    margin: 0;
    color: #1e3146;
    font-size: clamp(1.2rem, 2.2vw, 2.1rem);
}

.cookie-modal__close {
    border: 1px solid #d0d8e2;
    border-radius: 8px;
    background: #ffffff;
    color: #5e7388;
    width: 2rem;
    height: 2rem;
    font-size: 1.3rem;
    line-height: 1;
    font-weight: 800;
    cursor: pointer;
}

.cookie-modal__text {
    color: #334f66;
    margin: 0.62rem 0;
    font-size: 1.01rem;
}

.cookie-modal__dialog a {
    color: #a81f2d;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cookie-modal__actions {
    margin-top: 0.88rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.7rem;
}

.cookie-modal__links {
    margin-top: 0.75rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    color: #546f86;
    font-size: 0.9rem;
}

.site-main {
    min-height: calc(100vh - 180px);
}

.hero {
    padding: 2.2rem 0 1rem;
}

.home-page {
    background: linear-gradient(180deg, #f4f8fd 0%, #edf5fc 45%, #ffffff 100%);
}

.home-page .hero {
    padding-top: 2.4rem;
}

.home-page .panel {
    background: linear-gradient(155deg, #ffffff 0%, #f8fbff 100%);
    border-color: #d8e5f1;
}

.home-page .panel-muted {
    background: linear-gradient(155deg, #ffffff 0%, #f5fdf9 100%);
}

body.theme-banner {
    background:
        radial-gradient(1180px 760px at 8% 0%, rgba(243, 87, 48, 0.26) 0%, transparent 60%),
        radial-gradient(860px 580px at 94% 8%, rgba(255, 208, 61, 0.2) 0%, transparent 55%),
        radial-gradient(920px 620px at 94% 88%, rgba(37, 183, 97, 0.26) 0%, transparent 58%),
        radial-gradient(980px 680px at 0% 100%, rgba(15, 111, 173, 0.34) 0%, transparent 60%),
        linear-gradient(145deg, #08152a, #0c2340 50%, #0a1730 100%);
}

.theme-banner .site-header {
    border-bottom-color: rgba(255, 226, 174, 0.18);
    background:
        linear-gradient(120deg, rgba(20, 12, 19, 0.94), rgba(76, 26, 17, 0.9), rgba(27, 73, 42, 0.88));
    box-shadow: 0 10px 24px rgba(2, 8, 14, 0.28);
}

.theme-banner .main-nav a {
    border-radius: 999px;
    margin-inline: 0.2rem;
    padding: 0.48rem 0.82rem;
    border: 1px solid transparent;
    color: #e8f2ff;
}

.theme-banner .nav-dropdown-toggle {
    border-radius: 999px;
    margin-inline: 0.2rem;
    padding: 0.48rem 1.45rem 0.48rem 0.82rem;
    border: 1px solid transparent;
    color: #e8f2ff;
}

.theme-banner .main-nav a:hover,
.theme-banner .main-nav a.is-active {
    border-bottom-color: transparent;
    border-color: rgba(255, 243, 218, 0.25);
    background: linear-gradient(145deg, rgba(239, 87, 52, 0.22), rgba(71, 172, 86, 0.2));
    box-shadow: inset 0 0 0 1px rgba(255, 242, 212, 0.05);
}

.theme-banner .nav-dropdown-toggle:hover,
.theme-banner .nav-dropdown.is-active .nav-dropdown-toggle,
.theme-banner .nav-dropdown[open] .nav-dropdown-toggle {
    border-bottom-color: transparent;
    border-color: rgba(255, 243, 218, 0.25);
    background: linear-gradient(145deg, rgba(239, 87, 52, 0.22), rgba(71, 172, 86, 0.2));
    box-shadow: inset 0 0 0 1px rgba(255, 242, 212, 0.05);
}

.theme-banner .nav-dropdown-menu a {
    border-radius: 12px;
    padding: 0.62rem 0.72rem;
}

.theme-banner .nav-dropdown-menu a:hover,
.theme-banner .nav-dropdown-menu a.is-active {
    margin-inline: 0;
}

.theme-banner .btn {
    border-color: rgba(237, 236, 195, 0.16);
    background:
        linear-gradient(140deg, #d7462b 0%, #ff8a22 46%, #60b341 100%);
    box-shadow: 0 12px 28px rgba(10, 24, 20, 0.28);
}

.theme-banner .btn.secondary,
.theme-banner .btn.ghost {
    color: #eff9ff;
    border-color: rgba(171, 228, 204, 0.38);
    background: linear-gradient(145deg, rgba(7, 25, 41, 0.72), rgba(11, 55, 47, 0.68));
}

.theme-banner .btn.secondary:hover,
.theme-banner .btn.ghost:hover,
.theme-banner .btn:hover {
    filter: brightness(1.05);
}

.theme-banner .home-page {
    background: transparent;
}

.theme-banner .site-main {
    position: relative;
}

.theme-banner .page-hero {
    padding-top: 2rem;
    padding-bottom: 0.9rem;
}

.theme-banner .panel,
.theme-banner .section-block,
.theme-banner .card,
.theme-banner .checkout-panel,
.theme-banner .checkout-summary-panel,
.theme-banner .embedded-checkout-panel,
.theme-banner .faq-list details,
.theme-banner .comparison,
.theme-banner .payment-methods:not(.is-dark) {
    border-color: rgba(255, 231, 189, 0.14);
    background:
        linear-gradient(180deg, rgba(8, 22, 37, 0.94), rgba(10, 30, 50, 0.95));
    box-shadow: 0 18px 40px rgba(2, 10, 16, 0.28);
}

.theme-banner .panel-muted {
    background:
        radial-gradient(280px 180px at 88% 20%, rgba(112, 194, 72, 0.12) 0%, transparent 65%),
        radial-gradient(320px 200px at 14% 10%, rgba(241, 96, 46, 0.14) 0%, transparent 62%),
        linear-gradient(180deg, rgba(8, 22, 37, 0.94), rgba(10, 30, 50, 0.95));
}

.theme-banner .panel h1,
.theme-banner .panel h2,
.theme-banner .panel h3,
.theme-banner .section-block h1,
.theme-banner .section-block h2,
.theme-banner .section-block h3,
.theme-banner .card h1,
.theme-banner .card h2,
.theme-banner .card h3,
.theme-banner .checkout-panel h1,
.theme-banner .checkout-panel h2,
.theme-banner .checkout-summary-panel h1,
.theme-banner .checkout-summary-panel h2,
.theme-banner .embedded-checkout-panel h1,
.theme-banner .embedded-checkout-panel h2,
.theme-banner .faq-list summary {
    color: #f7fbff;
}

.theme-banner p,
.theme-banner li,
.theme-banner dd,
.theme-banner .steps,
.theme-banner .faq-list p,
.theme-banner .legal-list,
.theme-banner .payment-methods-note,
.theme-banner .status-stoplight-text,
.theme-banner .checkout-selection-details dt {
    color: #c8dced;
}

.theme-banner .page-hero .panel p:last-child,
.theme-banner .section-block p:last-child,
.theme-banner .card p:last-child {
    margin-bottom: 0;
}

.theme-banner .section-header h2,
.theme-banner .section-header p {
    color: #e9f5ff;
}

.theme-banner .section-header p {
    color: #c9dced;
}

.theme-banner .price,
.theme-banner .subscription-price,
.theme-banner .checkout-selection-details dd,
.theme-banner .status-ok,
.theme-banner .status-fail {
    color: #f7fbff;
}

.theme-banner .price {
    text-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}

.theme-banner .card::before,
.theme-banner .section-block::before,
.theme-banner .faq-list details::before {
    background: linear-gradient(90deg, #d7462b, #ff9827, #72bf41);
}

.theme-banner .section-block,
.theme-banner .faq-list details {
    position: relative;
    overflow: hidden;
}

.theme-banner .section-block::before,
.theme-banner .faq-list details::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 4px;
}

.theme-banner .notice-bar {
    border-color: rgba(134, 219, 129, 0.18);
    background: linear-gradient(145deg, rgba(25, 79, 41, 0.88), rgba(14, 44, 27, 0.95));
    color: #e3f9e0;
}

.theme-banner .error-box {
    border-color: rgba(244, 138, 138, 0.22);
    background: linear-gradient(145deg, rgba(93, 27, 31, 0.92), rgba(53, 14, 17, 0.96));
    color: #ffd7d7;
}

.theme-banner .empty-box {
    border-color: rgba(157, 201, 228, 0.2);
    background: linear-gradient(145deg, rgba(10, 31, 50, 0.9), rgba(7, 21, 36, 0.96));
    color: #d6e9f8;
}

.theme-banner .field label,
.theme-banner .kv-table th,
.theme-banner .comparison th,
.theme-banner .checkout-selection-title,
.theme-banner .difficulty,
.theme-banner .apps-choice-note {
    color: #f0f8ff;
}

.theme-banner .field input,
.theme-banner .field textarea,
.theme-banner .field select {
    border-color: rgba(173, 207, 228, 0.22);
    background: linear-gradient(145deg, rgba(8, 23, 37, 0.92), rgba(10, 28, 45, 0.96));
    color: #f5fbff;
    box-shadow: inset 0 0 0 1px rgba(255, 234, 194, 0.03);
}

.theme-banner .field input::placeholder,
.theme-banner .field textarea::placeholder {
    color: #89a8c0;
}

.theme-banner .field input:focus,
.theme-banner .field textarea:focus,
.theme-banner .field select:focus {
    outline: 0;
    border-color: rgba(255, 174, 92, 0.62);
    box-shadow: 0 0 0 3px rgba(255, 163, 76, 0.14);
}

.theme-banner .kv-table td,
.theme-banner .comparison td {
    color: #eaf5ff;
}

.theme-banner .kv-table th,
.theme-banner .kv-table td,
.theme-banner .comparison th,
.theme-banner .comparison td {
    border-bottom-color: rgba(173, 207, 228, 0.14);
}

.theme-banner .comparison th {
    background: linear-gradient(145deg, rgba(211, 71, 43, 0.18), rgba(110, 190, 67, 0.16));
}

.theme-banner .comparison tr:last-child td {
    border-bottom: 0;
}

.theme-banner .difficulty {
    border-color: rgba(255, 221, 171, 0.18);
    background: rgba(255, 146, 50, 0.08);
}

.theme-banner .difficulty span {
    color: #ffb54f;
}

.theme-banner .apps-choice-note {
    border-color: rgba(255, 216, 155, 0.18);
    border-left-color: #65b643;
    background: linear-gradient(145deg, rgba(44, 23, 15, 0.92), rgba(16, 48, 33, 0.92));
}

.theme-banner .payment-methods:not(.is-dark) {
    background:
        linear-gradient(145deg, rgba(10, 30, 48, 0.95), rgba(9, 24, 40, 0.96));
}

.theme-banner .payment-methods-title {
    color: #f3fbff;
}

.theme-banner .payment-badge {
    border-color: rgba(177, 207, 225, 0.24);
    background: rgba(246, 250, 252, 0.96);
}

.theme-banner .status-stoplight {
    border-color: rgba(255, 224, 171, 0.18);
    background: linear-gradient(145deg, rgba(10, 31, 49, 0.95), rgba(8, 22, 35, 0.98));
}

.theme-banner .status-stoplight-text {
    color: #eaf5ff;
}

.theme-banner .status-stoplight.is-online .status-stoplight-text {
    color: #a6f0b9;
}

.theme-banner .status-stoplight.is-offline .status-stoplight-text {
    color: #ffc8c8;
}

.theme-banner .subscription-page .container {
    background:
        radial-gradient(520px 320px at 8% 8%, rgba(228, 89, 47, 0.24) 0%, transparent 62%),
        radial-gradient(520px 340px at 92% 16%, rgba(255, 197, 61, 0.18) 0%, transparent 62%),
        radial-gradient(520px 320px at 88% 84%, rgba(84, 184, 72, 0.2) 0%, transparent 62%),
        linear-gradient(160deg, rgba(8, 23, 37, 0.96) 0%, rgba(10, 32, 52, 0.97) 58%, rgba(9, 24, 40, 0.98) 100%);
    border-color: rgba(255, 233, 190, 0.16);
}

.theme-banner .renewal-switch,
.theme-banner .billing-switch {
    border-color: rgba(255, 228, 178, 0.18);
    background: rgba(8, 22, 37, 0.76);
}

.theme-banner .renewal-switch-btn,
.theme-banner .billing-switch-btn {
    color: #eef7ff;
}

.theme-banner .renewal-switch-btn.is-active,
.theme-banner .billing-switch-btn.is-active,
.theme-banner .plan-pick-btn,
.theme-banner .plan-pick-btn.is-featured,
.theme-banner .subscription-card.is-selected .plan-pick-btn {
    border-color: rgba(255, 236, 196, 0.16);
    background: linear-gradient(145deg, #d7462b, #ff9227 46%, #65b643);
    box-shadow: 0 14px 28px rgba(8, 31, 26, 0.34);
}

.theme-banner .saving-note {
    color: #ffe6b1;
}

.theme-banner .subscription-card {
    border-color: rgba(255, 229, 185, 0.15);
    background: linear-gradient(175deg, rgba(8, 23, 37, 0.94) 0%, rgba(10, 30, 49, 0.96) 100%);
    box-shadow: 0 14px 28px rgba(4, 16, 24, 0.24);
}

.theme-banner .subscription-card.is-featured {
    background:
        radial-gradient(240px 160px at 88% 14%, rgba(110, 190, 67, 0.1) 0%, transparent 60%),
        radial-gradient(240px 180px at 14% 8%, rgba(232, 89, 43, 0.12) 0%, transparent 60%),
        linear-gradient(175deg, rgba(11, 28, 44, 0.97) 0%, rgba(12, 38, 55, 0.98) 100%);
}

.theme-banner .subscription-card.is-selected {
    border-color: rgba(255, 173, 90, 0.6);
    box-shadow: 0 0 0 3px rgba(255, 154, 56, 0.18), 0 20px 36px rgba(5, 18, 27, 0.35);
}

.theme-banner .subscription-card h2,
.theme-banner .subscription-tagline,
.theme-banner .plan-feature-list li,
.theme-banner .subscription-price span,
.theme-banner .subscription-price small {
    color: #f5fbff;
}

.theme-banner .subscription-offer-note {
    border-color: rgba(255, 210, 145, 0.3);
    background:
        radial-gradient(180px 110px at 10% 18%, rgba(255, 241, 198, 0.12) 0%, transparent 72%),
        linear-gradient(145deg, rgba(217, 67, 36, 0.24), rgba(105, 183, 68, 0.18));
}

.theme-banner .subscription-offer-note strong {
    color: #ffe5b7;
}

.theme-banner .subscription-offer-pill {
    border-color: rgba(255, 210, 145, 0.34);
    background: linear-gradient(145deg, rgba(217, 67, 36, 0.22), rgba(105, 183, 68, 0.18));
    color: #ffe8bc;
}

.theme-banner .subscription-card.has-offer {
    border-color: rgba(255, 196, 120, 0.52);
    box-shadow: 0 0 0 1px rgba(255, 196, 120, 0.2), 0 22px 38px rgba(5, 18, 27, 0.32);
}

.theme-banner .subscription-pricing-band .subscription-price .subscription-old-price {
    color: rgba(211, 226, 236, 0.72);
}

.theme-banner .plan-radio {
    border-color: rgba(255, 223, 172, 0.28);
    background: rgba(255, 255, 255, 0.06);
}

.theme-banner .subscription-card.is-selected .plan-radio {
    border-color: #ffaf5b;
    background: #ffaf5b;
}

.theme-banner .checkout-selection-box {
    border-color: rgba(255, 226, 174, 0.14);
    background: linear-gradient(165deg, rgba(10, 30, 48, 0.94) 0%, rgba(9, 23, 38, 0.98) 100%);
}

.theme-banner .checkout-selection-details div {
    border-color: rgba(174, 208, 226, 0.16);
    background: rgba(255, 255, 255, 0.03);
}

.theme-banner .checkout-panel .field label {
    color: #eef8ff;
}

.theme-banner .pill,
.theme-banner .promo-console__eyebrow,
.theme-banner .route-pill {
    border-color: rgba(255, 221, 172, 0.2);
}

.hero--banner {
    padding-top: 2rem;
    padding-bottom: 1.4rem;
}

.hero-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.28fr) minmax(320px, 0.72fr);
    gap: 1rem;
    align-items: stretch;
}

.promo-board,
.promo-console,
.route-card,
.highlight-card,
.final-cta-panel {
    border: 1px solid rgba(255, 236, 201, 0.14);
    box-shadow: 0 22px 46px rgba(2, 10, 16, 0.3);
}

.promo-board {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    padding: 1.45rem;
    background:
        radial-gradient(320px 220px at 12% 14%, rgba(255, 248, 193, 0.32) 0%, transparent 54%),
        linear-gradient(116deg, rgba(184, 54, 40, 0.9) 0%, rgba(221, 121, 48, 0.88) 48%, rgba(129, 169, 64, 0.86) 100%);
}

.promo-board::before,
.promo-board::after {
    display: none;
}

.promo-board > * {
    position: relative;
    z-index: 1;
}

.promo-board__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.promo-brand {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.promo-brand img {
    width: 5.7rem;
    height: 5.7rem;
    border-radius: 18px;
    object-fit: cover;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
}

.promo-brand__copy {
    display: flex;
    flex-direction: column;
    gap: 0.16rem;
}

.promo-brand__name {
    font-family: "Sora", sans-serif;
    font-size: clamp(1.7rem, 3.2vw, 2.7rem);
    font-weight: 800;
    line-height: 1;
    color: #fff8db;
    text-shadow: 0 4px 18px rgba(32, 7, 0, 0.45);
}

.promo-brand__sub {
    color: rgba(255, 248, 223, 0.94);
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.promo-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.4rem;
    border-radius: 999px;
    background: rgba(9, 23, 39, 0.24);
    border: 1px solid rgba(255, 246, 224, 0.28);
    color: #fffde4;
    font-size: 0.84rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.4rem 0.8rem;
}

.promo-board__body {
    margin-top: 1.2rem;
    max-width: 48rem;
}

.theme-banner .eyebrow {
    background: rgba(9, 23, 39, 0.24);
    border-color: rgba(255, 241, 214, 0.22);
    color: #fffde6;
}

.promo-board h1 {
    margin-bottom: 0.7rem;
    color: #fffef5;
    text-shadow: 0 5px 18px rgba(25, 7, 0, 0.38);
}

.promo-lead {
    max-width: 44rem;
    color: rgba(255, 248, 233, 0.92);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.6;
}

.site-offer-banner {
    position: relative;
    overflow: hidden;
    display: grid;
    gap: 0.18rem;
    margin-top: 0.95rem;
    border-radius: 18px;
    border: 1px solid rgba(255, 227, 169, 0.28);
    background:
        radial-gradient(220px 140px at 8% 18%, rgba(255, 241, 194, 0.16) 0%, transparent 64%),
        linear-gradient(145deg, rgba(168, 55, 40, 0.34), rgba(205, 131, 53, 0.28) 48%, rgba(89, 153, 70, 0.24));
    box-shadow: 0 16px 30px rgba(8, 26, 40, 0.2);
    padding: 0.88rem 1rem;
}

.site-offer-banner::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 0.42rem;
    background: linear-gradient(180deg, #ffd36f 0%, #ff8d42 52%, #7ac55a 100%);
}

.site-offer-banner strong {
    color: #fff0c7;
    font-size: 0.8rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding-left: 0.3rem;
}

.site-offer-banner span {
    color: #fffdf7;
    font-size: 1.02rem;
    font-weight: 800;
    line-height: 1.5;
    padding-left: 0.3rem;
}

.site-offer-banner--subscription {
    margin-top: 0;
    margin-bottom: 1rem;
}

.promo-signal-row {
    margin-top: 1.15rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.promo-signal {
    border-radius: 18px;
    padding: 0.95rem 0.9rem;
    background: linear-gradient(160deg, rgba(14, 18, 29, 0.42), rgba(24, 44, 33, 0.34));
    border: 1px solid rgba(255, 247, 223, 0.16);
    backdrop-filter: blur(6px);
}

.promo-signal strong,
.promo-signal span {
    display: block;
}

.promo-signal strong {
    color: #fffbe8;
    font-size: 1rem;
    margin-bottom: 0.24rem;
}

.promo-signal span {
    color: rgba(255, 249, 232, 0.84);
    font-size: 0.88rem;
    line-height: 1.45;
}

.promo-board__actions {
    margin-top: 1.15rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
}

.btn-hero,
.btn-hero-alt {
    min-width: 13.8rem;
    min-height: 3.35rem;
    font-size: 1.02rem;
}

.promo-console {
    border-radius: 28px;
    padding: 1.35rem;
    background:
        linear-gradient(180deg, rgba(8, 23, 37, 0.92), rgba(9, 33, 53, 0.96)),
        linear-gradient(145deg, rgba(255, 132, 36, 0.12), rgba(88, 182, 70, 0.1));
}

.promo-console__eyebrow {
    display: inline-flex;
    margin: 0 0 0.7rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 225, 179, 0.2);
    background: rgba(255, 133, 45, 0.12);
    color: #f5d39f;
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.28rem 0.58rem;
}

.promo-console h2 {
    color: #f5fbff;
}

.promo-console p {
    color: #bfd4e5;
}

.promo-specs {
    margin: 1rem 0;
    display: grid;
    gap: 0.6rem;
}

.promo-specs div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(12, 33, 52, 0.92), rgba(10, 23, 37, 0.98));
    border: 1px solid rgba(174, 205, 225, 0.18);
    padding: 0.72rem 0.85rem;
}

.promo-specs dt {
    color: #97b7ce;
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.promo-specs dd {
    margin: 0;
    color: #f4fbff;
    font-size: 1rem;
    font-weight: 800;
    text-align: right;
}

.promo-console__notice {
    margin: 0 0 0.95rem;
    border-radius: 16px;
    border: 1px solid rgba(118, 205, 115, 0.22);
    background: linear-gradient(145deg, rgba(26, 75, 42, 0.86), rgba(17, 50, 32, 0.92));
    color: #dff9df;
    font-weight: 700;
    line-height: 1.55;
    padding: 0.85rem 0.95rem;
}

.mini-flow {
    margin: 0;
    padding-left: 1.15rem;
    color: #dcefff;
}

.mini-flow li {
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

.section-header--warm h2 {
    color: #f5fbff;
    max-width: 18ch;
}

.section-header--warm p {
    color: #d3e5f5;
    max-width: 54rem;
}

.route-offer-copy {
    margin: 0.2rem 0 0.8rem;
    border-radius: 14px;
    border: 1px solid rgba(255, 224, 171, 0.18);
    background: linear-gradient(145deg, rgba(208, 60, 31, 0.12), rgba(82, 169, 68, 0.12));
    color: #edf8ff;
    font-size: 0.96rem;
    font-weight: 700;
    line-height: 1.5;
    padding: 0.78rem 0.86rem;
}

.route-grid,
.home-highlight-grid {
    display: grid;
    gap: 1rem;
}

.route-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.route-card {
    border-radius: 24px;
    padding: 1.35rem;
    background: linear-gradient(180deg, rgba(8, 23, 37, 0.92), rgba(10, 31, 51, 0.95));
}

.route-card--premium {
    background:
        linear-gradient(180deg, rgba(8, 23, 37, 0.92), rgba(10, 31, 51, 0.95)),
        linear-gradient(120deg, rgba(231, 77, 34, 0.16), rgba(100, 191, 50, 0.14));
}

.route-card--block {
    background:
        linear-gradient(180deg, rgba(8, 23, 37, 0.92), rgba(10, 31, 51, 0.95)),
        linear-gradient(120deg, rgba(255, 140, 32, 0.16), rgba(13, 115, 164, 0.14));
}

.route-pill {
    display: inline-flex;
    margin-bottom: 0.85rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 229, 191, 0.22);
    background: rgba(255, 137, 48, 0.1);
    color: #ffd39a;
    font-size: 0.8rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.28rem 0.58rem;
}

.route-card h3 {
    color: #f8fcff;
    font-size: 1.42rem;
}

.route-card p {
    color: #c8ddee;
}

.route-list {
    margin: 1rem 0 1.1rem;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.48rem;
}

.route-list li {
    color: #eff9ff;
    font-weight: 700;
}

.route-list li::before {
    content: "\2713";
    margin-right: 0.52rem;
    color: #91e16c;
}

.home-highlight-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.highlight-card {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    padding: 1.25rem 1.15rem 1.1rem;
    background: linear-gradient(180deg, rgba(248, 250, 250, 0.96), rgba(243, 250, 255, 0.96));
}

.highlight-card::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg, #db462d, #ff9b29, #70c33f);
}

.highlight-card__index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    background: linear-gradient(145deg, #e04b2f, #65b643);
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 900;
    margin-bottom: 0.75rem;
}

.highlight-card h3 {
    color: #0c2741;
}

.highlight-card p {
    color: #4b6780;
    margin-bottom: 0;
}

.final-cta-panel {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) auto;
    gap: 1rem;
    align-items: center;
    border-radius: 28px;
    padding: 1.4rem 1.5rem;
    background:
        radial-gradient(420px 220px at 12% 20%, rgba(255, 120, 51, 0.18) 0%, transparent 62%),
        radial-gradient(460px 260px at 94% 84%, rgba(116, 201, 65, 0.18) 0%, transparent 62%),
        linear-gradient(160deg, rgba(7, 23, 39, 0.96), rgba(9, 33, 55, 0.94));
}

.final-cta-panel h2 {
    color: #f6fbff;
}

.final-cta-panel p {
    color: #cde0ef;
    max-width: 54rem;
}

.final-cta-panel__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.7rem;
}

.theme-banner .site-footer {
    border-top-color: rgba(255, 220, 173, 0.18);
    background:
        linear-gradient(130deg, rgba(36, 12, 16, 0.88), rgba(68, 24, 20, 0.76), rgba(19, 56, 39, 0.8));
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 1rem;
    align-items: stretch;
}

.panel {
    background: linear-gradient(155deg, #ffffff 0%, #fff5f5 42%, #effcf5 100%);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow);
    padding: 1.35rem;
}

.panel-muted {
    background: linear-gradient(155deg, #fff8f8 0%, #effcf5 100%);
}

.eyebrow {
    margin: 0 0 0.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border-radius: 999px;
    background: linear-gradient(145deg, #ffecee, #ecfbf2);
    border: 1px solid #f0c5cb;
    color: #6f2f2f;
    padding: 0.25rem 0.62rem;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

h1,
h2,
h3 {
    margin: 0 0 0.6rem;
    line-height: 1.12;
}

h1 {
    font-family: "Sora", sans-serif;
    font-size: clamp(1.9rem, 4.3vw, 3rem);
}

h2 {
    font-family: "Sora", sans-serif;
    font-size: clamp(1.35rem, 2.5vw, 2rem);
}

p {
    margin: 0 0 0.8rem;
    color: var(--muted);
}

.hero-actions {
    margin-top: 1.05rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}
.trust-strip {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.trust-strip span {
    display: inline-flex;
    align-items: center;
    border: 1px solid #cadceb;
    border-radius: 999px;
    background: #f6fbff;
    color: #35506b;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 0.3rem 0.55rem;
}

.home-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.95rem;
}

.home-choice-card {
    padding: 1.25rem;
}

.home-choice-card h2 {
    font-size: clamp(1.35rem, 2.2vw, 1.85rem);
}

.home-choice-card .btn {
    margin-top: 0.35rem;
}

.section-compact {
    padding-top: 0.2rem;
}

.quick-link-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.quick-link-row a {
    text-decoration: none;
    font-weight: 700;
    color: #2d4b64;
    border: 1px solid #c8dae9;
    border-radius: 999px;
    background: #ffffff;
    padding: 0.38rem 0.72rem;
}

.check-list {
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.45rem;
}

.check-list li {
    color: #304e66;
    font-weight: 600;
}

.check-list li::before {
    content: "\2713";
    color: var(--green-main);
    font-weight: 900;
    margin-right: 0.5rem;
}

.kv-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.8rem;
}

.kv-table th,
.kv-table td {
    padding: 0.52rem 0.35rem;
    border-bottom: 1px solid #dde9f3;
    text-align: left;
    font-size: 0.91rem;
}

.kv-table th {
    color: #49637a;
    width: 44%;
}

.section {
    padding: 0.6rem 0 1.2rem;
}

.section-header {
    margin-bottom: 0.8rem;
}

.section-header-contrast {
    margin-bottom: 0.9rem;
    border: 1px solid rgba(174, 206, 232, 0.38);
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(8, 30, 49, 0.78), rgba(10, 47, 63, 0.75));
    box-shadow: 0 10px 24px rgba(3, 16, 27, 0.28);
    padding: 1rem 1.05rem;
}

.section-header-contrast h1 {
    color: #f4f9ff;
    margin-bottom: 0.38rem;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.section-header-contrast p {
    margin: 0;
    color: #d1e5f6;
    font-size: 1.12rem;
    font-weight: 600;
}

.feature-grid,
.info-grid,
.product-grid,
.cards-3 {
    display: grid;
    gap: 0.85rem;
}

.feature-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cards-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.info-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.product-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.card {
    border: 1px solid var(--line);
    background: linear-gradient(175deg, #ffffff 0%, #f9fcff 100%);
    border-radius: 14px;
    padding: 1rem;
    box-shadow: 0 8px 24px rgba(16, 34, 52, 0.08);
    position: relative;
    overflow: hidden;
}

.card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--red-main), var(--green-main), var(--mint));
}

.card:nth-child(odd) {
    border-color: #f1cbd1;
}

.card:nth-child(even) {
    border-color: #c8ead7;
}

.card:hover {
    transform: translateY(-2px);
    transition: transform 0.2s ease;
}

.card h3 {
    font-size: 1.12rem;
}

.pill {
    display: inline-block;
    padding: 0.24rem 0.6rem;
    border-radius: 999px;
    background: linear-gradient(145deg, #fff0f1, #ecfaf1);
    border: 1px solid #f0cdd1;
    color: #5b3a3a;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.72rem;
    font-weight: 800;
}

.price {
    font-size: 1.7rem;
    font-weight: 800;
    color: #0f3251;
    margin: 0.45rem 0 0.75rem;
}

.field {
    margin-bottom: 0.65rem;
}

.field label {
    display: block;
    margin-bottom: 0.3rem;
    color: #3f5d76;
    font-size: 0.84rem;
    font-weight: 700;
}

.field input,
.field textarea,
.field select {
    width: 100%;
    border: 1px solid #c8dced;
    border-radius: 9px;
    padding: 0.6rem 0.62rem;
    font-size: 0.92rem;
    font-family: inherit;
    color: #1a344b;
}

.hp-field {
    position: absolute !important;
    left: -99999px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.notice-bar,
.error-box,
.empty-box {
    border-radius: 12px;
    padding: 0.75rem 0.88rem;
    margin-top: 0.8rem;
    font-size: 0.92rem;
    font-weight: 600;
}

.notice-bar {
    background: #e8f8f1;
    border: 1px solid #bde4d1;
    color: #196845;
}

.error-box {
    background: #fcecec;
    border: 1px solid #eec0c0;
    color: var(--danger);
}

.empty-box {
    background: #f4f9ff;
    border: 1px dashed #c2d7e9;
    color: #4d708b;
}

.page-hero {
    padding: 1.8rem 0 0.8rem;
}

.section-block {
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 1rem;
    margin-bottom: 0.85rem;
}

.steps {
    margin: 0;
    padding-left: 1.1rem;
    color: #304f66;
}

.steps li {
    margin: 0 0 0.45rem;
}

.faq-list details {
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    padding: 0.7rem 0.85rem;
    margin-bottom: 0.62rem;
}

.faq-list summary {
    cursor: pointer;
    font-weight: 700;
    color: #27455d;
}

.faq-list p {
    margin-top: 0.65rem;
}

.payment-methods {
    margin-top: 0.85rem;
    border: 1px solid #c6deed;
    border-radius: 12px;
    padding: 0.68rem 0.72rem;
    background: linear-gradient(145deg, #f8fdff 0%, #f1fcf6 100%);
}

.payment-methods.is-compact {
    padding: 0.6rem 0.66rem;
}

.payment-methods-title {
    margin: 0;
    color: #1a435f;
    font-weight: 800;
    font-size: 0.9rem;
    letter-spacing: 0.02em;
}

.payment-methods-grid {
    margin-top: 0.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.payment-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    min-height: 2rem;
    border-radius: 999px;
    border: 1px solid #c2d9e8;
    background: #ffffff;
    color: #1d3e55;
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1;
    padding: 0.28rem 0.58rem 0.28rem 0.42rem;
}

.badge-icon {
    width: 1.26rem;
    height: 1.26rem;
    border-radius: 6px;
    border: 1px solid transparent;
    flex-shrink: 0;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.badge-text {
    white-space: nowrap;
}

.badge-icon-ideal {
    background: #ffffff;
    border-color: #161616;
}

.badge-icon-ideal .ideal-line {
    width: 0.12rem;
    height: 0.72rem;
    background: #161616;
    border-radius: 2px;
    position: absolute;
    left: 0.55rem;
    top: 0.2rem;
}

.badge-icon-ideal .ideal-dot {
    width: 0.18rem;
    height: 0.18rem;
    border-radius: 50%;
    background: #ff3a8b;
    position: absolute;
    left: 0.5rem;
    top: 0.87rem;
}

.badge-icon-visa {
    background: #e8f2ff;
    border-color: #9cc1ea;
    color: #194f9d;
    font-size: 0.78rem;
    font-weight: 900;
}

.badge-icon-mastercard {
    background: #fff7f1;
    border-color: #e6c8a8;
}

.badge-icon-mastercard .mc-left,
.badge-icon-mastercard .mc-right {
    width: 0.56rem;
    height: 0.56rem;
    border-radius: 50%;
    position: absolute;
    top: 0.31rem;
}

.badge-icon-mastercard .mc-left {
    left: 0.23rem;
    background: #f06b2b;
}

.badge-icon-mastercard .mc-right {
    left: 0.5rem;
    background: #e53935;
    opacity: 0.9;
}

.badge-icon-bancontact {
    background: #edf3ff;
    border-color: #a7bee6;
}

.badge-icon-bancontact .bc-line {
    position: absolute;
    left: 0.19rem;
    width: 0.86rem;
    height: 0.14rem;
    border-radius: 3px;
    transform: rotate(-20deg);
}

.badge-icon-bancontact .bc-line-a {
    top: 0.4rem;
    background: #0a52c2;
}

.badge-icon-bancontact .bc-line-b {
    top: 0.7rem;
    background: #f0b323;
}

.badge-icon-sepa {
    background: #eef7ff;
    border-color: #95bee5;
    color: #1d65a6;
    font-size: 0.68rem;
    font-weight: 900;
}

.payment-methods-note {
    margin: 0.5rem 0 0;
    color: #4a6b81;
    font-size: 0.78rem;
    font-weight: 600;
}

.faq-payment-methods {
    margin-top: 0.55rem;
}

.checkout-payment-methods,
.page-payment-methods {
    margin-top: 0.95rem;
}

.site-footer .payment-methods.is-dark {
    border-color: rgba(153, 194, 226, 0.35);
    background: rgba(10, 31, 49, 0.5);
}

.site-footer .payment-methods.is-dark .payment-methods-title {
    color: #eaf5ff;
}

.site-footer .payment-methods.is-dark .payment-methods-note {
    color: #a8c7de;
}

.site-footer .payment-methods.is-dark .payment-badge {
    border-color: rgba(147, 196, 226, 0.5);
    background: rgba(237, 247, 255, 0.92);
}

.footer-payment-methods {
    margin-top: 0.2rem;
    margin-bottom: 0.2rem;
}

.site-footer {
    margin-top: 1.5rem;
    border-top: 1px solid rgba(231, 185, 191, 0.45);
    background: linear-gradient(130deg, rgba(40, 17, 23, 0.68), rgba(15, 46, 33, 0.66));
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr 1.1fr;
    gap: 1rem;
    padding: 1.4rem 0 0.8rem;
}

.site-footer h3 {
    color: #edf7ff;
    font-size: 1.02rem;
}

.site-footer p,
.site-footer li,
.site-footer small {
    color: #bfd7eb;
}

.site-footer ul {
    margin: 0;
    padding-left: 1rem;
}

.site-footer a {
    color: #d7eaff;
    text-decoration: none;
}

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

.footer-copy {
    padding: 0.4rem 0 1.2rem;
}

.status-ok {
    color: #1f7249;
    font-weight: 700;
}

.status-fail {
    color: #9f3535;
    font-weight: 700;
}

.status-stoplight {
    margin-top: 0.72rem;
    display: inline-flex;
    align-items: center;
    gap: 0.66rem;
    border: 1px solid #c6deed;
    border-radius: 12px;
    padding: 0.44rem 0.58rem;
    background: linear-gradient(145deg, #f8fdff 0%, #f1fcf6 100%);
}

.status-stoplight-body {
    display: inline-flex;
    flex-direction: column;
    gap: 0.3rem;
    border: 1px solid #152230;
    border-radius: 10px;
    background: #1c2f3f;
    padding: 0.34rem 0.32rem;
}

.status-stoplight-lamp {
    width: 0.94rem;
    height: 0.94rem;
    border-radius: 50%;
    background: #43525f;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3);
}

.status-stoplight-text {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 800;
    color: #2d4e64;
}

.status-stoplight.is-online .lamp-green {
    background: #28c373;
    box-shadow: 0 0 12px rgba(40, 195, 115, 0.65);
}

.status-stoplight.is-online .lamp-red {
    opacity: 0.35;
}

.status-stoplight.is-online .status-stoplight-text {
    color: #1f744b;
}

.status-stoplight.is-offline .lamp-red {
    background: #e34f4f;
    box-shadow: 0 0 12px rgba(227, 79, 79, 0.62);
}

.status-stoplight.is-offline .lamp-green {
    opacity: 0.3;
}

.status-stoplight.is-offline .status-stoplight-text {
    color: #963737;
}

.client-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.85rem;
}

.tone-blue::before {
    background: linear-gradient(90deg, #00a5ff, #4c83ff);
}

.tone-green::before {
    background: linear-gradient(90deg, #17c18e, #57cf8f);
}

.tone-orange::before {
    background: linear-gradient(90deg, #ff8a33, #ffc24d);
}

.tone-violet::before {
    background: linear-gradient(90deg, #6d5dff, #9d6eff);
}

.tone-red::before {
    background: linear-gradient(90deg, #ff5f70, #ff8b47);
}

.difficulty {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    margin: 0.35rem 0 0.6rem;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    border: 1px solid #c9dceb;
    background: #f3f8fe;
    color: #31526b;
    font-size: 0.78rem;
    font-weight: 800;
}

.difficulty span {
    color: #e24a4a;
    font-size: 0.86rem;
    letter-spacing: 0.06em;
}

.comparison {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
}

.comparison th,
.comparison td {
    padding: 0.62rem 0.58rem;
    border-bottom: 1px solid #e5eef6;
    text-align: left;
    font-size: 0.9rem;
}

.comparison th {
    background: #eff6fd;
    color: #355774;
    font-weight: 800;
}

.comparison tr:last-child td {
    border-bottom: 0;
}

.chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.55rem;
    border-radius: 999px;
    border: 1px solid #cddff0;
    background: #f4f9ff;
    color: #355674;
    font-weight: 700;
    font-size: 0.8rem;
}

.apps-choice-note {
    margin: 0.75rem 0 0;
    padding: 0.72rem 0.85rem;
    border: 1px solid #bdddf0;
    border-left: 4px solid #1ea06d;
    border-radius: 12px;
    background: linear-gradient(135deg, #f5fcff 0%, #ecfff5 100%);
    color: #17425d;
    font-size: 1.02rem;
    line-height: 1.45;
}

.apps-choice-note strong {
    font-weight: 800;
}

.legal-page .panel p {
    max-width: 76ch;
}

.legal-page .section-block h2 {
    margin-top: 0;
}

.legal-list {
    margin: 0.55rem 0 0;
    padding-left: 1.1rem;
    color: #2f4f67;
}

.legal-list li {
    margin-bottom: 0.42rem;
}

.legal-meta {
    color: #516b80;
    font-size: 0.92rem;
}

.subscription-page {
    padding-top: 2.2rem;
}

.subscription-page .container {
    max-width: 1120px;
    background:
        radial-gradient(500px 340px at 7% 8%, rgba(28, 142, 191, 0.26) 0%, transparent 62%),
        radial-gradient(520px 320px at 92% 14%, rgba(50, 205, 138, 0.22) 0%, transparent 62%),
        linear-gradient(160deg, #0d2538 0%, #12374f 58%, #0d2a3f 100%);
    border: 1px solid rgba(167, 212, 231, 0.34);
    border-radius: 26px;
    box-shadow: 0 26px 56px rgba(5, 19, 31, 0.38);
    padding: 1.8rem 1.8rem 1.5rem;
}

.subscription-header h1 {
    color: #f3fbff;
    text-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

.subscription-header p {
    color: #cae5f8;
    font-size: 1.18rem;
    max-width: 74ch;
    margin: 0 auto;
}

.subscription-hero-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
    gap: 1rem;
    align-items: stretch;
    margin-bottom: 1.1rem;
}

.subscription-header--split {
    margin: 0;
    border: 1px solid rgba(255, 229, 182, 0.16);
    border-radius: 24px;
    background:
        radial-gradient(360px 220px at 12% 14%, rgba(233, 91, 46, 0.16) 0%, transparent 64%),
        radial-gradient(340px 220px at 86% 16%, rgba(112, 194, 72, 0.14) 0%, transparent 62%),
        linear-gradient(160deg, rgba(8, 24, 39, 0.96), rgba(10, 33, 54, 0.97));
    box-shadow: 0 24px 48px rgba(2, 10, 16, 0.3);
    padding: 1.35rem 1.45rem;
    text-align: left !important;
}

.subscription-header--split h1 {
    margin-bottom: 0.55rem;
}

.subscription-header--split p:last-child {
    max-width: 56rem;
    margin-bottom: 0;
}

.hero-logo-row {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 0.9rem;
}

.hero-logo-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 5.2rem;
    height: 5.2rem;
    padding: 0.45rem;
    border-radius: 18px;
    border: 1px solid rgba(255, 230, 181, 0.18);
    background: linear-gradient(145deg, rgba(255, 118, 59, 0.18), rgba(111, 209, 74, 0.16));
    box-shadow: 0 14px 30px rgba(2, 10, 16, 0.22);
}

.hero-logo-badge img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.subscription-hero-aside {
    display: flex;
}

.subscription-meta-grid {
    display: grid;
    gap: 0.75rem;
    width: 100%;
}

.subscription-meta-card {
    border: 1px solid rgba(255, 228, 181, 0.16);
    border-radius: 20px;
    background: linear-gradient(165deg, rgba(10, 29, 47, 0.95), rgba(8, 22, 36, 0.98));
    box-shadow: 0 18px 36px rgba(2, 10, 16, 0.24);
    padding: 1rem;
}

.subscription-meta-card strong,
.subscription-meta-card span {
    display: block;
}

.subscription-meta-card strong {
    color: #f6fbff;
    font-size: 1rem;
    margin-bottom: 0.28rem;
}

.subscription-meta-card span {
    color: #bfd6e7;
    line-height: 1.55;
}

.subscription-selector {
    margin-top: 1.1rem;
}

.subscription-switchboard {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 1rem;
    align-items: start;
    margin-bottom: 1.2rem;
}

.subscription-switchboard__copy,
.subscription-switchboard__controls {
    border: 1px solid rgba(255, 228, 181, 0.14);
    border-radius: 22px;
    padding: 1.1rem 1.15rem;
    background: linear-gradient(165deg, rgba(10, 29, 47, 0.95), rgba(8, 22, 36, 0.98));
    box-shadow: 0 18px 36px rgba(2, 10, 16, 0.24);
}

.subscription-switchboard__copy h2 {
    color: #f6fbff;
    font-size: 1.5rem;
}

.subscription-switchboard__copy p {
    margin-bottom: 0;
    color: #c4d9e9;
    line-height: 1.6;
}

.renewal-switch {
    width: min(760px, 100%);
    margin: 0 auto 0.6rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem;
    padding: 0.32rem;
    border-radius: 14px;
    border: 1px solid rgba(156, 211, 235, 0.34);
    background: rgba(6, 25, 40, 0.72);
    box-shadow: inset 0 0 0 1px rgba(180, 224, 245, 0.08);
}

.renewal-switch-btn {
    border: 1px solid transparent;
    border-radius: 11px;
    background: transparent;
    color: #d8edf9;
    font-weight: 800;
    font-size: 1rem;
    padding: 0.84rem 0.6rem;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.renewal-switch-btn.is-active {
    border-color: rgba(117, 222, 215, 0.58);
    background: linear-gradient(145deg, rgba(31, 130, 163, 0.95), rgba(37, 177, 130, 0.92));
    color: #ffffff;
    box-shadow: 0 10px 22px rgba(8, 37, 53, 0.42);
}

.renewal-note {
    margin: 0.2rem auto 0.75rem;
    text-align: center;
    color: #d3e8f7;
    font-weight: 600;
    font-size: 1rem;
    max-width: 74ch;
}

.billing-switch {
    width: min(500px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem;
    padding: 0.32rem;
    border-radius: 14px;
    border: 1px solid rgba(156, 211, 235, 0.34);
    background: rgba(6, 25, 40, 0.72);
    box-shadow: inset 0 0 0 1px rgba(180, 224, 245, 0.08);
}

.billing-switch-btn {
    position: relative;
    border: 1px solid transparent;
    border-radius: 11px;
    background: transparent;
    color: #d8edf9;
    font-weight: 800;
    font-size: 1.04rem;
    padding: 0.86rem 0.6rem;
    padding-left: 1.95rem;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.billing-switch-btn.is-active {
    border-color: rgba(117, 222, 215, 0.58);
    background: linear-gradient(145deg, rgba(31, 130, 163, 0.95), rgba(37, 177, 130, 0.92));
    color: #ffffff;
    box-shadow: 0 10px 22px rgba(8, 37, 53, 0.42);
}

.billing-switch-btn.is-active::before {
    content: "";
    position: absolute;
    left: 0.9rem;
    top: 50%;
    width: 0.92rem;
    height: 0.92rem;
    border-radius: 50%;
    background: #ffffff;
    transform: translateY(-50%);
}

.billing-switch-btn.is-active::after {
    content: "\2713";
    position: absolute;
    left: 1.03rem;
    top: 50%;
    font-size: 0.61rem;
    color: #0f6d89;
    font-weight: 900;
    transform: translateY(-54%);
}

.saving-note {
    margin-top: 0.62rem;
    text-align: center;
    font-size: 1.08rem;
    font-weight: 900;
    color: #bff0da;
    text-shadow: 0 1px 6px rgba(2, 18, 12, 0.45);
}

.subscription-grid {
    margin-top: 1.28rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.05rem;
}

.subscription-card {
    position: relative;
    border: 1px solid #c7deec;
    border-radius: 20px;
    background: linear-gradient(170deg, #fefefe 0%, #f2f9ff 100%);
    padding: 1.15rem 1.05rem 1rem;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 24px rgba(10, 36, 52, 0.18);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.subscription-card-glow {
    position: absolute;
    inset: -18% auto auto -10%;
    width: 10rem;
    height: 10rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 165, 77, 0.3) 0%, transparent 70%);
    pointer-events: none;
}

.subscription-card.is-featured {
    border-color: #7cb0c8;
    background: linear-gradient(172deg, #f9feff 0%, #eef9ff 68%, #ecfff6 100%);
    box-shadow: 0 13px 26px rgba(16, 91, 123, 0.2);
}

.subscription-card.has-offer {
    border-color: rgba(255, 164, 73, 0.58);
    box-shadow: 0 0 0 1px rgba(255, 189, 110, 0.28), 0 18px 34px rgba(18, 64, 45, 0.24);
}

.subscription-card.is-selected {
    border-color: #1ca57d;
    box-shadow: 0 0 0 3px rgba(28, 165, 125, 0.2), 0 20px 36px rgba(9, 92, 66, 0.3);
    transform: translateY(-3px);
}

.subscription-card.is-selected::after {
    content: "Geselecteerd";
    position: absolute;
    top: 0.8rem;
    right: 0.9rem;
    border-radius: 999px;
    border: 1px solid #0f6f98;
    background: linear-gradient(145deg, #1274a1, #18a58f);
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.23rem 0.5rem;
}

.subscription-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.subscription-card-title-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.36rem;
}

.subscription-card h2 {
    margin: 0;
    font-size: 2.35rem;
    color: #16324a;
}

.subscription-mini-pill {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    border-radius: 999px;
    border: 1px solid rgba(255, 228, 181, 0.22);
    background: rgba(255, 146, 49, 0.1);
    color: #ffd7a2;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.26rem 0.54rem;
}

.subscription-offer-pill {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    border-radius: 999px;
    border: 1px solid rgba(255, 182, 87, 0.34);
    background: linear-gradient(145deg, rgba(214, 74, 39, 0.18), rgba(122, 187, 71, 0.16));
    color: #ffe4af;
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.28rem 0.6rem;
}

.plan-radio {
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    border: 2px solid #7da8bf;
    background: #ffffff;
    flex-shrink: 0;
}

.subscription-card.is-selected .plan-radio {
    border-color: #1ca57d;
    background: #1ca57d;
    box-shadow: inset 0 0 0 3px #ffffff;
}

.subscription-tagline {
    margin: 0.38rem 0 0.75rem;
    color: #1178a2;
    font-weight: 700;
    font-size: 0.94rem;
    line-height: 1.5;
}

.subscription-pricing-band {
    position: relative;
    margin: 0 0 0.8rem;
    border: 1px solid rgba(170, 205, 225, 0.16);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.03);
    padding: 0.8rem 0.9rem 0.72rem;
}

.subscription-offer-note {
    display: grid;
    gap: 0.18rem;
    margin-bottom: 0.7rem;
    padding: 0.72rem 0.8rem;
    border: 1px solid rgba(255, 182, 86, 0.42);
    border-radius: 14px;
    background:
        radial-gradient(180px 100px at 10% 18%, rgba(255, 235, 186, 0.14) 0%, transparent 70%),
        linear-gradient(145deg, rgba(222, 76, 38, 0.22), rgba(96, 182, 67, 0.2));
    box-shadow: 0 12px 24px rgba(8, 26, 40, 0.12);
}

.subscription-offer-note strong {
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #ffe2ad;
}

.subscription-offer-note span {
    color: #fffdf7;
    font-size: 0.96rem;
    font-weight: 800;
    line-height: 1.4;
}

.subscription-pricing-band .subscription-price {
    margin: 0;
}

.subscription-pricing-band .subscription-price small {
    margin-top: 0.4rem;
}

.subscription-pricing-band .subscription-price .subscription-old-price {
    color: #89a5ba;
    text-decoration: line-through;
    text-decoration-thickness: 0.08rem;
}

.subscription-savings-badge {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: linear-gradient(145deg, rgba(223, 78, 41, 0.95), rgba(102, 184, 67, 0.92));
    color: #fffef5;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.26rem 0.55rem;
}

.plan-tone-basic .subscription-card-glow {
    background: radial-gradient(circle, rgba(84, 170, 221, 0.22) 0%, transparent 70%);
}

.plan-tone-elite .subscription-card-glow {
    background: radial-gradient(circle, rgba(255, 179, 63, 0.26) 0%, transparent 72%);
}

.plan-tone-pro .subscription-card-glow {
    background: radial-gradient(circle, rgba(104, 192, 72, 0.22) 0%, transparent 70%);
}

.plan-feature-list {
    margin: 0.8rem 0 0.75rem;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.5rem;
}

.plan-feature-list li {
    font-size: 0.98rem;
    font-weight: 700;
    color: #21374b;
}

.plan-feature-list.compact li {
    font-size: 0.95rem;
}

.plan-feature-list li.is-enabled::before {
    content: "\2713";
    margin-right: 0.55rem;
    color: #193750;
    font-weight: 900;
}

.plan-feature-list li.is-disabled {
    color: #5f7385;
}

.plan-feature-list li.is-disabled::before {
    content: "\00D7";
    margin-right: 0.55rem;
    color: #607283;
    font-weight: 900;
}

.subscription-price {
    margin: 0.2rem 0;
    font-size: 2.4rem;
    font-weight: 900;
    color: #12334d;
    line-height: 1;
}

.subscription-price span {
    font-size: 1.05rem;
    color: #4f6980;
    margin-left: 0.1rem;
}

.subscription-price small {
    display: block;
    margin-top: 0.28rem;
    font-size: 0.86rem;
    font-weight: 700;
    color: #2d7f66;
}

.subscription-price--yearly {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.22rem;
}

.subscription-price-mainline {
    display: inline-flex;
    align-items: baseline;
    gap: 0.16rem;
    flex-wrap: wrap;
}

.subscription-price--yearly .subscription-equivalent-amount {
    font-size: 2.7rem;
    font-weight: 900;
    line-height: 0.95;
    color: #12334d;
}

.subscription-price--yearly .subscription-price-unit {
    font-size: 1.05rem;
    color: #4f6980;
}

.subscription-price--yearly .subscription-price-secondary {
    margin-top: 0;
    font-size: 0.96rem;
    font-weight: 800;
    color: #355b79;
}

.subscription-price--yearly .subscription-price-note {
    margin-top: 0;
    font-size: 0.85rem;
    font-weight: 700;
    color: #2d7f66;
}

[data-subscription-selector][data-cycle="monthly"] [data-price-cycle="yearly"] {
    display: none;
}

[data-subscription-selector][data-cycle="yearly"] [data-price-cycle="monthly"] {
    display: none;
}

.plan-pick-btn {
    width: 100%;
    margin-top: auto;
    border-color: #89c7e4;
    background: linear-gradient(145deg, #1a88ad, #1fb17d);
    color: #ffffff;
    min-height: 3.15rem;
    font-size: 1.12rem;
}

.plan-pick-btn.is-featured,
.subscription-card.is-selected .plan-pick-btn {
    color: #ffffff;
}

.plan-pick-btn.is-featured {
    border-color: #67b4d5;
    background: linear-gradient(145deg, #1f8bb0, #28a6cb);
}

.subscription-card.is-selected .plan-pick-btn {
    border-color: #1274a1;
    background: linear-gradient(145deg, #1274a1, #18a58f);
}

.checkout-panel {
    margin-top: 1.3rem;
    border: 1px solid rgba(164, 218, 238, 0.48);
    background: linear-gradient(160deg, #f7fdff 0%, #ecf8ff 100%);
    box-shadow: 0 10px 22px rgba(14, 49, 66, 0.14);
}

.checkout-panel h2 {
    font-size: 1.72rem;
}

.checkout-panel--premium {
    padding: 1.2rem;
}

.checkout-panel__intro {
    margin-bottom: 1rem;
}

.checkout-panel__intro p:last-child {
    margin-bottom: 0;
}

.checkout-panel__body {
    display: grid;
    gap: 1rem;
}

.checkout-selection-box {
    margin: 0 0 1rem;
    border: 1px solid #c8e2f2;
    border-radius: 14px;
    padding: 0.8rem 0.9rem;
    background: linear-gradient(165deg, #ffffff 0%, #f1f9ff 100%);
}

.checkout-selection-title {
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.35;
    color: #123852;
    font-weight: 800;
}

.checkout-selection-details {
    margin: 0.65rem 0 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem 0.9rem;
}

.checkout-selection-details div {
    border: 1px solid #d3e8f5;
    border-radius: 10px;
    background: #ffffff;
    padding: 0.48rem 0.6rem;
}

.checkout-selection-details dt {
    margin: 0;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 800;
    color: #537089;
}

.checkout-selection-details dd {
    margin: 0.2rem 0 0;
    font-size: 1rem;
    font-weight: 800;
    color: #123852;
}

.checkout-inline-form {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    align-items: end;
}

.checkout-inline-form .field {
    margin: 0;
}

.checkout-panel .field label {
    font-size: 0.95rem;
}

.checkout-panel .field input {
    font-size: 1.02rem;
    padding: 0.72rem 0.76rem;
}

.checkout-inline-form .btn {
    width: 100%;
    min-height: 3.2rem;
    font-size: 1.06rem;
}

.checkout-inline-form .btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.block-card h2 {
    font-size: 1.35rem;
}

.block-hero-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
    gap: 1rem;
    align-items: stretch;
    margin-bottom: 0.9rem;
}

.block-hero-copy {
    margin: 0;
}

.block-hero-side {
    display: grid;
    gap: 0.75rem;
}

.block-hero-side__card {
    border: 1px solid rgba(255, 228, 181, 0.16);
    border-radius: 20px;
    background: linear-gradient(165deg, rgba(10, 29, 47, 0.95), rgba(8, 22, 36, 0.98));
    box-shadow: 0 18px 36px rgba(2, 10, 16, 0.24);
    padding: 1rem;
}

.block-hero-side__card strong,
.block-hero-side__card span {
    display: block;
}

.block-hero-side__card strong {
    color: #f7fbff;
    margin-bottom: 0.28rem;
}

.block-hero-side__card span {
    color: #c6dced;
    line-height: 1.55;
}

.block-grid {
    gap: 1rem;
}

.block-card--hero {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
}

.block-card--hero::after {
    content: "";
    position: absolute;
    inset: auto -20% -28% auto;
    width: 12rem;
    height: 12rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(109, 191, 67, 0.18) 0%, transparent 72%);
    pointer-events: none;
}

.block-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.block-card__quota {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    border: 1px solid rgba(255, 224, 174, 0.2);
    background: rgba(255, 149, 54, 0.08);
    color: #ffd59e;
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.3rem 0.58rem;
}

.block-card__term {
    margin-top: -0.25rem;
    margin-bottom: 0.9rem;
    color: #d4e6f3;
    font-weight: 700;
}

.login-page-shell {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 0.9fr);
    gap: 1rem;
    align-items: stretch;
}

.login-side-card,
.login-form-card {
    border-radius: 24px;
}

.login-side-card {
    border: 1px solid rgba(255, 228, 181, 0.16);
    background:
        radial-gradient(320px 220px at 14% 14%, rgba(231, 91, 45, 0.16) 0%, transparent 64%),
        radial-gradient(320px 220px at 88% 84%, rgba(108, 192, 71, 0.14) 0%, transparent 62%),
        linear-gradient(160deg, rgba(8, 24, 39, 0.96), rgba(10, 33, 54, 0.97));
    box-shadow: 0 24px 48px rgba(2, 10, 16, 0.3);
    padding: 1.35rem 1.45rem;
}

.login-side-card h1 {
    color: #f6fbff;
    margin-bottom: 0.6rem;
}

.login-side-card p {
    color: #c5d9e9;
}

.login-side-card--admin {
    background:
        radial-gradient(320px 220px at 14% 14%, rgba(231, 91, 45, 0.12) 0%, transparent 64%),
        radial-gradient(320px 220px at 88% 84%, rgba(72, 140, 210, 0.16) 0%, transparent 62%),
        linear-gradient(160deg, rgba(8, 24, 39, 0.96), rgba(10, 33, 54, 0.97));
}

.login-side-list {
    display: grid;
    gap: 0.78rem;
    margin-top: 1rem;
}

.login-side-list article {
    border: 1px solid rgba(255, 228, 181, 0.14);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.03);
    padding: 0.95rem;
}

.login-side-list strong,
.login-side-list span {
    display: block;
}

.login-side-list strong {
    color: #f6fbff;
    margin-bottom: 0.24rem;
}

.login-side-list span {
    color: #c4d9e9;
    line-height: 1.55;
}

.login-form-card {
    padding: 1.35rem;
}

.login-form-card h2 {
    margin-bottom: 0.45rem;
}

.login-actions {
    margin-top: 1rem;
}

.login-actions .btn {
    min-width: 11rem;
}

.embedded-checkout-page .container {
    display: grid;
    gap: 1rem;
}

.checkout-summary-panel p {
    margin-bottom: 0;
}

.embedded-checkout-panel {
    padding: 1rem;
}

#embedded-checkout {
    min-height: 560px;
}

#embedded-checkout-error {
    margin: 0.8rem 0 0;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.site-chat-widget {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 65;
    display: grid;
    justify-items: end;
    gap: 0.75rem;
}

.site-chat-launcher {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 4.2rem;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(255, 235, 193, 0.24);
    border-radius: 999px;
    background: linear-gradient(145deg, rgba(233, 74, 74, 0.96), rgba(22, 184, 111, 0.96));
    color: #fff;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 18px 34px rgba(6, 14, 20, 0.3);
}

.site-chat-panel {
    width: min(24rem, calc(100vw - 1.5rem));
    border: 1px solid rgba(255, 230, 182, 0.16);
    border-radius: 20px;
    background: linear-gradient(170deg, rgba(7, 25, 41, 0.98), rgba(10, 31, 48, 0.98));
    box-shadow: 0 22px 48px rgba(3, 9, 15, 0.4);
    overflow: hidden;
}

.site-chat-panel__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1rem 0.85rem;
    border-bottom: 1px solid rgba(201, 222, 237, 0.12);
    background:
        radial-gradient(240px 120px at 0% 0%, rgba(233, 74, 74, 0.2) 0%, transparent 70%),
        radial-gradient(220px 120px at 100% 0%, rgba(22, 184, 111, 0.22) 0%, transparent 70%),
        rgba(255, 255, 255, 0.02);
}

.site-chat-panel__header strong {
    display: block;
    color: #f5fbff;
    font-size: 1rem;
}

.site-chat-panel__header p {
    margin: 0.3rem 0 0;
    color: #bdd2e2;
    font-size: 0.84rem;
}

.site-chat-panel__close {
    border: 0;
    background: transparent;
    color: #dce9f3;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

.site-chat-panel__body {
    padding: 0.95rem;
}

.site-chat-messages {
    display: grid;
    gap: 0.75rem;
    max-height: 21rem;
    overflow-y: auto;
    padding-right: 0.2rem;
}

.site-chat-message {
    max-width: 88%;
    padding: 0.8rem 0.9rem;
    border-radius: 16px;
}

.site-chat-message p {
    margin: 0;
    color: #f2f8fc;
    line-height: 1.55;
    font-size: 0.93rem;
}

.site-chat-message.is-assistant {
    justify-self: start;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(208, 227, 241, 0.12);
}

.site-chat-message.is-user {
    justify-self: end;
    background: linear-gradient(145deg, rgba(233, 74, 74, 0.95), rgba(22, 184, 111, 0.95));
}

.site-chat-message.is-pending {
    opacity: 0.82;
}

.site-chat-sources {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.65rem;
}

.site-chat-sources strong {
    width: 100%;
    color: #d2e6f4;
    font-size: 0.78rem;
}

.site-chat-sources a {
    color: #ffffff;
    text-decoration: none;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.32rem 0.55rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(218, 232, 242, 0.14);
}

.site-chat-quick-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin: 0.9rem 0;
}

.site-chat-quick-links button {
    border: 1px solid rgba(172, 213, 193, 0.24);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    color: #ddefe5;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0.45rem 0.7rem;
    cursor: pointer;
}

.site-chat-form {
    display: grid;
    gap: 0.65rem;
}

.site-chat-form textarea {
    width: 100%;
    min-height: 4.5rem;
    resize: vertical;
    border: 1px solid rgba(190, 216, 231, 0.2);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.05);
    color: #f6fbff;
    padding: 0.85rem 0.9rem;
    font: inherit;
}

.site-chat-form textarea::placeholder {
    color: #a8bfd0;
}

.site-chat-form .btn {
    width: 100%;
}

.site-chat-panel__footer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    padding: 0.8rem 1rem 1rem;
    border-top: 1px solid rgba(201, 222, 237, 0.12);
}

.site-chat-panel__footer a {
    color: #cde4f3;
    font-size: 0.84rem;
    font-weight: 700;
    text-decoration: none;
}

@media (max-width: 1100px) {
    .hero-grid {
        grid-template-columns: 1fr;
    }

    .feature-grid,
    .cards-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .subscription-grid {
        grid-template-columns: 1fr;
    }

    .checkout-inline-form {
        grid-template-columns: 1fr;
    }

    .checkout-selection-details {
        grid-template-columns: 1fr;
    }

    .subscription-page .container {
        padding: 1.35rem 1.1rem 1.2rem;
    }

    .hero-shell,
    .subscription-hero-shell,
    .subscription-switchboard,
    .block-hero-shell,
    .login-page-shell,
    .route-grid,
    .home-highlight-grid,
    .final-cta-panel {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 930px) {
    .header-row {
        grid-template-columns: auto auto;
    }

    .menu-toggle {
        display: inline-flex;
    }

    .main-nav {
        grid-column: 1 / -1;
        display: none;
        flex-direction: column;
        align-items: stretch;
        justify-self: stretch;
        padding: 0.55rem;
        border: 1px solid rgba(194, 219, 238, 0.28);
        border-radius: 12px;
        background: rgba(9, 28, 44, 0.82);
    }

    .main-nav.is-open {
        display: flex;
    }

    .main-nav a,
    .nav-dropdown-toggle {
        width: 100%;
        margin-inline: 0;
    }

    .nav-dropdown-menu {
        position: static;
        min-width: 0;
        margin-top: 0.45rem;
    }

    .header-actions {
        display: none;
    }

    .promo-board__top {
        flex-direction: column;
    }
}

@media (max-width: 720px) {
    .feature-grid,
    .cards-3,
    .info-grid,
    .footer-grid {
        grid-template-columns: 1fr;
    }

    .promo-signal-row {
        grid-template-columns: 1fr;
    }

    .promo-brand {
        align-items: flex-start;
    }

    .promo-brand img {
        width: 4.5rem;
        height: 4.5rem;
    }

    .promo-brand__name {
        font-size: 1.7rem;
    }

    .btn-hero,
    .btn-hero-alt {
        width: 100%;
    }

    .login-actions .btn {
        width: 100%;
    }

    .site-chat-widget {
        right: 0.75rem;
        bottom: 0.75rem;
    }

    .site-chat-panel {
        width: min(100vw - 1rem, 24rem);
    }
}

@media (max-width: 1100px) {
    .home-choice-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 840px) {
    .cookie-consent {
        bottom: 0.65rem;
        padding: 0 0.6rem;
    }

    .cookie-consent__panel {
        padding: 0.95rem 0.85rem 0.9rem;
    }

    .cookie-consent__actions {
        grid-template-columns: 1fr;
    }

    .cookie-modal__dialog {
        padding: 1rem 0.85rem 0.9rem;
    }

    .cookie-modal__actions {
        grid-template-columns: 1fr;
    }

    .renewal-switch {
        grid-template-columns: 1fr;
    }

    .subscription-savings-badge {
        position: static;
        margin-top: 0.6rem;
    }
}