@import url("tokens.css");

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--font);
    font-weight: 500;
    font-size: var(--text-md);
    color: var(--navy);
    background:
        linear-gradient(90deg, var(--navy-05), var(--navy-05)),
        var(--white);
}
h1, h2, h3,
.btn,
.nav__links,
.hero__trust,
.price-card__price,
.services__hub,
.services__summary,
.faq__summary,
.domain-form__input,
.toggle--yearly .toggle__label:last-of-type,
.toggle:not(.toggle--yearly) .toggle__label:first-of-type {
    font-weight: 700;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }

.wrap { width: var(--wrap); margin-inline: auto; }
.wrap--wide { width: var(--wrap-wide); }

.site-header { border-top: var(--stroke-lg) solid var(--red); }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--control-h);
    padding: 0 var(--space-5);
    border: 0;
    border-radius: var(--radius-pill);
    color: var(--white);
    cursor: pointer;
    white-space: nowrap;
}
.btn--red { background: var(--red); }
.btn--navy { background: var(--navy); }
.btn--cta {
    width: 100%;
    min-height: var(--control-h-lg);
    border-radius: var(--radius-xs);
    background: var(--red);
    border-bottom: var(--stroke-md) solid var(--red-dark);
    font-size: var(--text-3xl);
}

.topbar {
    background: var(--gray-bar);
}
.topbar__inner {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--space-5);
    padding: var(--space-3) 0;
    font-size: var(--text-xs);
}
.topbar__link { display: inline-flex; align-items: center; gap: var(--space-2); }
.topbar__link--alert { color: var(--red); }

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    padding: var(--space-8) 0;
}
.nav__brand { display: flex; align-items: flex-end; gap: var(--space-4); }
.nav__logo {
    width: var(--size-logo);
    height: var(--size-logo-h);
    display: block;
}
.nav__tag {
    font-size: var(--text-2xs);
    font-weight: 600;
    letter-spacing: var(--track-wide);
    line-height: 1;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.nav__panel { display: flex; align-items: center; gap: var(--space-6); }
.nav__links { display: flex; gap: var(--space-6); font-size: var(--text-md); }
.nav__link--active { color: var(--red); }
.nav__ctas { display: flex; gap: var(--space-3); }
.nav__toggle {
    display: none;
    width: var(--space-10);
    height: var(--control-h);
    border: 0;
    background: transparent;
    padding: var(--space-2);
}
.nav__toggle-bar {
    display: block;
    height: var(--stroke);
    margin: var(--space-1) 0;
    background: var(--navy);
}

.hero__card {
    background: var(--red);
    border-radius: var(--radius);
    overflow: hidden;
    border-bottom: var(--line-lg);
}
.hero__media {
    position: relative;
    background: var(--black);
    border-radius: var(--radius);
    overflow: hidden;
}
.hero__image {
    width: 100%;
    aspect-ratio: var(--ratio-photo);
    height: auto;
    object-fit: cover;
    object-position: 62% center;
    border-radius: var(--radius);
}
.hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(17, 38, 97, 0.48) 0%, rgba(17, 38, 97, 0.32) 28%, transparent 68%);
    pointer-events: none;
}
.hero__content {
    position: absolute;
    z-index: 1;
    left: var(--space-16);
    top: var(--space-24);
    max-width: var(--measure-m);
    color: var(--white);
}
.hero__title {
    margin: 0;
    font-size: clamp(var(--text-3xl), 6vw, var(--text-7xl));
    line-height: var(--leading-tight);
    overflow-wrap: anywhere;
}
.hero__text {
    max-width: var(--measure-s);
    margin: var(--space-5) 0 var(--space-6);
    font-size: var(--text-lg);
    line-height: 26px;
    font-weight: 600;
    overflow-wrap: anywhere;
}
.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}
.hero__actions .btn--navy {
    background: var(--white);
    color: var(--navy);
}
.hero__trust {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-10);
    min-height: var(--control-h-md);
    padding: var(--space-3) var(--space-6);
    color: var(--white);
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
    border-radius: 0 0 var(--radius) var(--radius);
}
.hero__trust-item { display: inline-flex; align-items: center; gap: var(--space-2); }
.hero__trust-item i { font-size: var(--text-lg); }

.logos {
    position: relative;
    padding: var(--space-10) 0 var(--space-6);
}
.logos__caption {
    margin: 0 0 var(--space-4);
    text-align: center;
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--navy-50);
}
.logos__viewport {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(
        90deg,
        transparent,
        #000 var(--space-16),
        #000 calc(100% - var(--space-16)),
        transparent
    );
    mask-image: linear-gradient(
        90deg,
        transparent,
        #000 var(--space-16),
        #000 calc(100% - var(--space-16)),
        transparent
    );
}
.logos__track {
    display: flex;
    width: max-content;
    animation: logos-slide 45s linear infinite;
}
.logos:hover .logos__track {
    animation-play-state: paused;
}
.logos__group {
    display: flex;
    align-items: center;
    gap: var(--space-12);
    padding-right: var(--space-12);
}
.logos__img {
    display: block;
    height: var(--space-24);
    width: auto;
    max-width: 15rem;
    object-fit: contain;
    opacity: 0.4;
}
@keyframes logos-slide {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .logos__track { animation: none; }
    .services__ring,
    .services__sat-face { animation: none; }
    .services__sat,
    .services__sat-icon,
    .services__swap { transition: none; }
}

.section-title {
    margin: var(--space-10) 0 0;
    font-size: clamp(var(--text-3xl), 5vw, var(--text-6xl));
    line-height: var(--leading-tight);
    text-align: center;
}
.section-title--s { font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl)); }
.section-sub {
    margin: var(--space-4) auto var(--space-8);
    max-width: var(--measure-l);
    color: var(--navy-50);
    font-size: var(--text-2xl);
    text-align: center;
}

.toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    margin-bottom: var(--space-8);
    color: var(--navy-50);
}
.toggle--yearly .toggle__label:last-of-type,
.toggle:not(.toggle--yearly) .toggle__label:first-of-type { color: var(--navy); }
.toggle__switch {
    width: var(--space-12);
    height: var(--space-6);
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--red);
    position: relative;
}
.toggle__switch::after {
    content: "";
    position: absolute;
    top: var(--stroke);
    left: var(--stroke);
    width: calc(var(--space-6) - var(--stroke) * 2);
    height: calc(var(--space-6) - var(--stroke) * 2);
    border-radius: var(--radius-pill);
    background: var(--white);
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s ease;
}
.toggle--yearly .toggle__switch::after {
    transform: translateX(calc(var(--space-12) - var(--space-6)));
}

.pricing { padding-bottom: var(--space-16); }
.pricing__title { font-size: clamp(var(--text-2xl), 4vw, var(--text-5xl)); }
.pricing__sub { font-size: var(--text-xl); }
.pricing__toggle { font-size: var(--text-sm); }
.pricing__grid {
    display: grid;
    grid-template-columns: 1fr minmax(var(--measure-xs), var(--measure-s)) 1fr;
    gap: var(--space-10);
    align-items: start;
}
.pricing__features { display: grid; gap: var(--space-6); padding-top: var(--space-16); }
.pricing__feature { padding-bottom: var(--space-6); border-bottom: var(--line); }
.pricing__feature-title { margin: 0 0 var(--space-2); font-size: var(--text-xl); line-height: var(--leading-snug); }
.pricing__feature-text { margin: 0; color: var(--navy-50); font-weight: 500; font-size: var(--text-md); line-height: var(--leading); }
.pricing__features--end { text-align: right; }

.price-card {
    background: var(--white);
    border-radius: var(--radius);
    border-bottom: var(--line-lg);
    padding: 0 var(--space-6) var(--space-8);
    text-align: center;
}
.price-card__badge {
    margin: 0 calc(var(--space-6) * -1) var(--space-6);
    padding: var(--space-3);
    background: var(--navy-15);
    border-radius: var(--radius) var(--radius) 0 0;
    font-size: var(--text-xs);
}
.price-card__title {
    margin: 0 0 var(--space-4);
    font-size: var(--text-3xl);
    line-height: var(--leading-snug);
}
.price-card__icon {
    width: 12.5rem;
    height: 12.5rem;
    object-fit: contain;
    margin: 0 auto;
}
.price-card__price { margin: var(--space-2) 0 0; font-size: clamp(var(--text-2xl), 5vw, var(--text-5xl)); }
.price-card__note { margin: 0 0 var(--space-4); font-size: var(--text-xs); }
.price-card .btn--cta {
    min-height: var(--control-h-md);
    font-size: var(--text-xl);
}

.mid-cta { padding: var(--space-8) 0 var(--space-20); }
.mid-cta__stage {
    position: relative;
    width: var(--wrap-wide);
    margin-inline: auto;
}
.mid-cta__photo {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius);
}
.mid-cta__photo::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(17, 38, 97, 0.35) 0%, transparent 6%),
        linear-gradient(270deg, rgba(17, 38, 97, 0.35) 0%, transparent 6%);
    border-radius: inherit;
}
.mid-cta__image {
    width: 100%;
    aspect-ratio: var(--ratio-photo);
    height: auto;
    object-fit: cover;
    object-position: 48% center;
    border-radius: var(--radius);
}
.mid-cta__card {
    position: absolute;
    right: 8%;
    top: 50%;
    transform: translateY(-50%);
    width: min(var(--measure-m), 48%);
    background: var(--white);
    border-radius: var(--radius);
    border-bottom: var(--line-lg);
    padding: var(--space-10) var(--space-8) var(--space-8);
    text-align: center;
}
.mid-cta__title {
    margin: 0 auto;
    max-width: var(--measure-s);
    font-size: clamp(var(--text-2xl), 4vw, var(--text-5xl));
    line-height: var(--leading-tight);
}
.mid-cta__text {
    margin: var(--space-5) 0 0;
    color: var(--navy-50);
    font-size: var(--text-xl);
}
.domain-form {
    display: grid;
    gap: var(--space-3);
    margin: var(--space-6) auto var(--space-4);
    max-width: var(--measure-s);
    padding: var(--space-3);
    border-radius: var(--radius-xs);
    background: var(--navy);
    text-align: left;
}
.domain-form__submit {
    width: 100%;
}
.domain-form__field {
    display: grid;
    background: var(--white);
    border-radius: calc(var(--radius-xs) - 1px);
    overflow: hidden;
}
.domain-form__label {
    font-size: var(--text-xs);
    padding: var(--space-3) var(--space-5) 0;
    color: var(--navy);
}
.domain-form__input {
    width: 100%;
    border: 0;
    box-shadow: none;
    appearance: none;
    background: transparent;
    padding: var(--space-1) var(--space-5) var(--space-5);
    font-size: var(--text-2xl);
    color: var(--navy-50);
    outline: none;
}
.domain-form__field:focus-within {
    box-shadow: inset 0 0 0 var(--stroke-md) var(--red);
}
.domain-form__input:focus-visible {
    box-shadow: inset 0 0 0 var(--stroke) var(--navy);
}
.mid-cta__note {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--navy-50);
}
.mid-cta__note--ok { color: var(--navy); }
.mid-cta__note--warn { color: var(--red); }

.trust { padding-bottom: var(--space-12); }
.trust__card {
    background: var(--white);
    border-radius: var(--radius);
    border-bottom: var(--line-lg);
    padding: var(--space-12) var(--space-8) var(--space-8);
}
.trust__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
    text-align: center;
    margin-bottom: var(--space-8);
}
.trust__icon {
    width: var(--size-icon);
    height: var(--size-icon);
    object-fit: contain;
    margin: 0 auto var(--space-4);
}
.trust__title { margin: 0 0 var(--space-2); font-size: var(--text-2xl); }
.trust__text { margin: 0; color: var(--navy-50); font-weight: 500; font-size: var(--text-lg); line-height: var(--leading); }

.site-footer { padding-bottom: var(--space-12); text-align: center; }
.site-footer__logo { width: var(--size-icon); margin: 0 auto var(--space-5); }
.site-footer__box {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
    background: var(--red);
    color: var(--white);
    border-radius: var(--radius);
    padding: var(--space-8) var(--space-12) var(--space-10);
    text-align: left;
}
.site-footer__heading { margin: 0 0 var(--space-4); font-size: var(--text-2xl); }
.site-footer__link { display: block; font-weight: 500; font-size: var(--text-md); margin-bottom: var(--space-3); }
.site-footer__legal {
    max-width: var(--container);
    margin: var(--space-6) auto 0;
    color: var(--navy-50);
    font-weight: 500;
    font-size: var(--text-sm);
    line-height: var(--leading);
}

.login-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: var(--space-8);
}
.login-card {
    width: min(var(--measure-xs), 100%);
    background: var(--gray);
    border-radius: var(--radius);
    border-bottom: var(--line-md);
    padding: var(--space-6) var(--space-5) var(--space-6);
    display: grid;
    gap: var(--space-2);
}
.login-card__logo { width: var(--size-icon-lg); margin: 0 auto var(--space-2); }
.login-card__label { font-size: var(--text-sm); }
.login-card__input {
    width: 100%;
    height: var(--control-h-md);
    border: 0;
    border-bottom: var(--line);
    border-radius: var(--radius-xs);
    background: var(--white);
    padding: 0 var(--space-3);
    color: var(--navy);
}
.login-card__submit { min-height: var(--control-h); font-size: var(--text-sm); margin-top: var(--space-2); }
.login-card__forgot { text-align: center; font-size: var(--text-sm); margin-top: var(--space-2); }
.login-card__pass { position: relative; }
.login-card__eye {
    position: absolute;
    right: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: none;
    color: var(--navy);
    cursor: pointer;
}
.login-card__check { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.login-card__intro { font-size: var(--text-sm); color: var(--navy-50); margin: 0 0 var(--space-2); }
.form-error { color: var(--red); font-size: var(--text-sm); }

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

.services { padding-bottom: var(--space-16); }
.services__orbit {
    --orbit-r: 12.5rem;
    --sat: 4.5rem;
    --orbit-spin: 56s;
    position: relative;
    width: min(36rem, 100%);
    aspect-ratio: 1;
    margin: var(--space-8) auto var(--space-8);
}
.services__orbit,
.services__ring,
.services__hub,
.services__track {
    pointer-events: none;
}
.services__track {
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 50%;
    background: transparent;
    transform: translate(-50%, -50%);
    z-index: 0;
    border: 0;
    box-shadow: 0 0 4rem var(--navy-15);
}
.services__track--inner {
    width: calc(var(--orbit-r) * 2);
    height: calc(var(--orbit-r) * 2);
}
.services__ring {
    position: absolute;
    inset: 0;
    animation: services-spin var(--orbit-spin) linear infinite;
}
.services__ring--inner { z-index: 2; }
.services__orbit:has(.services__sat:hover) .services__ring,
.services__orbit:has(.services__sat:hover) .services__sat-face {
    animation-play-state: paused;
}
@keyframes services-spin {
    to { transform: rotate(360deg); }
}
.services__hub {
    position: absolute;
    left: 50%;
    top: 50%;
    display: grid;
    place-items: center;
    width: 10rem;
    height: 10rem;
    margin: -5rem;
    background: var(--white);
    border: 0;
    border-radius: 50%;
    padding: var(--space-3);
    text-align: center;
    z-index: 3;
}
.services__hub-label {
    margin: 0;
    max-width: 7.5rem;
    font-size: var(--text-lg);
    line-height: var(--leading-snug);
    overflow-wrap: break-word;
}
.services__sat {
    position: absolute;
    left: 50%;
    top: 50%;
    display: grid;
    place-items: center;
    width: var(--sat);
    height: var(--sat);
    margin: calc(var(--sat) / -2);
    padding: 0;
    border: 0.5px solid var(--red);
    border-radius: 50%;
    background: var(--white);
    box-shadow: none;
    cursor: default;
    z-index: 2;
    transition: background-color 0.35s ease, border-color 0.35s ease;
    transform:
        rotate(var(--angle))
        translateY(calc(var(--orbit-r) * -1))
        rotate(calc(var(--angle) * -1));
}
.services__ring--inner .services__sat {
    pointer-events: auto;
    cursor: pointer;
}
.services__sat-face {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    animation: services-spin var(--orbit-spin) linear infinite reverse;
}
.services__sat-icon {
    width: 3.25rem;
    height: 3.25rem;
    object-fit: contain;
    transition: filter 0.35s ease, transform 0.35s ease;
}
.services__ring--inner .services__sat:hover .services__sat-icon {
    transform: scale(1.08);
}
.services__sat-label {
    position: absolute;
    top: calc(100% + 0.35rem);
    left: 50%;
    transform: translateX(-50%);
    font-size: var(--text-2xs);
    font-weight: 700;
    line-height: 1.2;
    color: var(--navy);
    white-space: nowrap;
}
.services__sat--active {
    background: var(--red);
}
.services__sat--active .services__sat-icon {
    filter: brightness(0) invert(1);
    transform: scale(1.05);
}
.services__swap {
    transition: opacity 0.28s ease, transform 0.28s ease;
}
.services__swap--out {
    opacity: 0;
    transform: translateY(0.35rem);
}
.services__panel {
    max-width: var(--measure-l);
    margin: 0 auto var(--space-8);
    text-align: center;
}
.services__panel-title {
    margin: 0 0 var(--space-3);
    font-size: var(--text-2xl);
}
.services__panel-text {
    margin: 0 0 var(--space-4);
    font-weight: 500;
    color: var(--navy-50);
    font-size: var(--text-md);
    line-height: var(--leading);
}
.services__panel-link { font-weight: 700; }
.services__item-link {
    display: inline-block;
    margin: 0 0 var(--space-5);
    font-weight: 700;
}
.services__list { display: none; }
.services__item {
    border-bottom: var(--line);
}
.services__summary {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-5) 0;
    cursor: pointer;
    list-style: none;
    font-size: var(--text-lg);
}
.services__summary::-webkit-details-marker { display: none; }
.services__summary::after {
    content: "";
    margin-left: auto;
    flex: 0 0 0.75rem;
    width: 0.75rem;
    height: 0.75rem;
    background:
        linear-gradient(var(--navy), var(--navy)) center / 100% 2px no-repeat,
        linear-gradient(var(--navy), var(--navy)) center / 2px 100% no-repeat;
}
.services__item[open] .services__summary::after {
    background: linear-gradient(var(--navy), var(--navy)) center / 100% 2px no-repeat;
}
.services__item-icon {
    width: 1.75rem;
    height: 1.75rem;
    object-fit: contain;
    flex-shrink: 0;
}
.services__item-title {
    margin: 0 0 var(--space-2);
    font-size: var(--text-xl);
}
.services__item-text {
    margin: 0 0 var(--space-5);
    font-weight: 500;
    color: var(--navy-50);
    font-size: var(--text-md);
    line-height: var(--leading);
}

.faq { padding-bottom: var(--space-20); }
.faq__list { max-width: var(--measure-l); margin: var(--space-8) auto 0; }
.faq__item { border-bottom: var(--line); }
.faq__item:first-child { border-top: var(--line); }
.faq__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-6) 0;
    cursor: pointer;
    list-style: none;
    font-size: var(--text-lg);
}
.faq__summary::-webkit-details-marker { display: none; }
.faq__summary::after {
    content: "";
    flex: 0 0 0.75rem;
    width: 0.75rem;
    height: 0.75rem;
    background:
        linear-gradient(var(--navy), var(--navy)) center / 100% 2px no-repeat,
        linear-gradient(var(--navy), var(--navy)) center / 2px 100% no-repeat;
}
.faq__item[open] .faq__summary::after {
    background: linear-gradient(var(--navy), var(--navy)) center / 100% 2px no-repeat;
}
.faq__answer {
    margin: 0 0 var(--space-6);
    font-weight: 500;
    color: var(--navy-50);
    font-size: var(--text-md);
    line-height: var(--leading);
}

.help__lead {
    margin: var(--space-4) 0 0;
    max-width: var(--measure-l);
    font-weight: 500;
    font-size: var(--text-xl);
    color: var(--navy-50);
}
.help__topics {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
    margin: var(--space-10) 0 var(--space-12);
}
.help__topic {
    display: block;
    background: var(--white);
    border-radius: var(--radius);
    border-bottom: var(--line-lg);
    padding: var(--space-6);
}
.help__topic-title {
    margin: 0 0 var(--space-2);
    font-size: var(--text-xl);
}
.help__topic-text {
    margin: 0;
    font-weight: 500;
    font-size: var(--text-md);
    color: var(--navy-50);
}
.help__group { margin-bottom: var(--space-12); }
.help__group-title {
    margin: 0;
    font-size: var(--text-2xl);
}
.help__list { margin-top: var(--space-4); max-width: none; }

.inner-page { padding: var(--space-12) 0 var(--space-20); }
.inner-page__title { font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl)); }
.inner-page__body { font-weight: 500; font-size: var(--text-lg); line-height: var(--leading-loose); color: var(--navy-50); }
.inner-page__body p,
.inner-page__body li { color: inherit; }
.inner-page__body a,
.content__inline { color: var(--red); }
.inner-page__body h2 {
    margin: var(--space-10) 0 var(--space-4);
    color: var(--navy);
    font-size: var(--text-2xl);
}
.inner-page__body ul {
    margin: 0 0 var(--space-6);
    padding-left: var(--space-6);
}
.inner-page__body code {
    font-size: 0.9em;
    background: var(--gray);
    padding: 0.1em 0.35em;
    border-radius: var(--radius-xs);
}

.content__lead {
    margin: var(--space-4) 0 var(--space-8);
    max-width: var(--measure-l);
    font-weight: 500;
    font-size: var(--text-xl);
    color: var(--navy-50);
}
.content__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin: 0 0 var(--space-10);
}
.content__faq { margin-top: var(--space-4); }
.content__cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}
.content__prose,
.content__section { margin-bottom: var(--space-10); max-width: var(--measure-l); }
.content__prose p,
.content__text,
.content__step-text {
    margin: 0 0 var(--space-4);
    font-weight: 500;
    font-size: var(--text-lg);
    line-height: var(--leading-loose);
    color: var(--navy-50);
}
.content__title {
    margin: 0 0 var(--space-4);
    font-size: var(--text-2xl);
}
.content__list {
    margin: 0;
    padding-left: var(--space-6);
    color: var(--navy-50);
    font-size: var(--text-lg);
    line-height: var(--leading-loose);
}
.content__list li { margin-bottom: var(--space-2); }
.content__section--cards .content__cards { margin-bottom: 0; }
.content__section--cards,
.content__section--tracks,
.content__section--quotes { max-width: none; }

.content__legal { max-width: var(--measure-l); }
.content__legal address {
    font-style: normal;
    margin: 0 0 var(--space-4);
}
.content__cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
    margin: 0 0 var(--space-10);
}
.content__card {
    display: block;
    background: var(--white);
    border-radius: var(--radius);
    border-bottom: var(--line-lg);
    padding: var(--space-6);
}
a.content__card:hover,
a.content__card:focus-visible {
    box-shadow: var(--shadow-md);
}
a.content__card:focus-visible {
    outline: var(--stroke-md) solid var(--red);
    outline-offset: 2px;
}
.content__card-title {
    margin: 0 0 var(--space-2);
    font-size: var(--text-xl);
}
.content__card-text {
    margin: 0;
    font-weight: 500;
    font-size: var(--text-md);
    color: var(--navy-50);
}
.content__card-more {
    display: inline-block;
    margin-top: var(--space-4);
    color: var(--red);
}
.content__steps {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: steps;
}
.content__step {
    counter-increment: steps;
    padding: var(--space-5) 0 var(--space-5) var(--space-12);
    position: relative;
    border-bottom: var(--line);
}
.content__step::before {
    content: counter(steps);
    position: absolute;
    left: 0;
    top: var(--space-5);
    width: var(--space-8);
    height: var(--space-8);
    border-radius: var(--radius-pill);
    background: var(--navy);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}
.content__step-title { margin: 0 0 var(--space-2); font-size: var(--text-xl); }
.content__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4) var(--space-6);
    margin: 0 0 var(--space-10);
}
.content__link { color: var(--red); font-weight: 700; }
.services__links { justify-content: center; margin-top: var(--space-10); }
.content__cta {
    background: var(--white);
    border-radius: var(--radius);
    border-bottom: var(--line-lg);
    padding: var(--space-8);
    max-width: var(--measure-l);
}
.content__cta-title { margin: 0 0 var(--space-3); font-size: var(--text-2xl); }
.content__cta-text {
    margin: 0 0 var(--space-6);
    font-weight: 500;
    color: var(--navy-50);
}
.content__note,
.content__flash {
    max-width: var(--measure-l);
    padding: var(--space-5) var(--space-6);
    border-radius: var(--radius);
    margin: 0 0 var(--space-8);
    background: var(--gray);
    color: var(--navy);
    font-weight: 500;
}
.content__flash { background: var(--navy-05); }

.contact-form { max-width: var(--measure-m); margin: 0 0 var(--space-10); }
.contact-form__row { margin-bottom: var(--space-5); }
.contact-form__label {
    display: block;
    margin-bottom: var(--space-2);
    font-weight: 700;
}
.contact-form__input {
    width: 100%;
    min-height: var(--control-h-md);
    padding: var(--space-3) var(--space-4);
    border: var(--line);
    border-radius: var(--radius-xs);
    background: var(--white);
}
.contact-form__input--area { min-height: 10rem; resize: vertical; }

.articles {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
    margin-top: var(--space-10);
}
.article-card {
    background: var(--white);
    border-radius: var(--radius);
    border-bottom: var(--line-lg);
    overflow: hidden;
}
.article-card--draft { opacity: 0.65; }
.article-card__img {
    width: 100%;
    aspect-ratio: var(--ratio-card);
    height: auto;
    object-fit: cover;
    background: var(--gray);
}
.article-card__img--icon {
    object-fit: contain;
    padding: var(--space-8);
    background: var(--gray-bar);
}
.article-card__body { padding: var(--space-5) var(--space-6) var(--space-6); }
.article-card__date,
.article-page__date {
    margin: 0 0 var(--space-2);
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--navy-50);
}
.article-card__title {
    margin: 0 0 var(--space-2);
    font-size: var(--text-2xl);
    line-height: var(--leading-snug);
}
.article-card__excerpt { margin: 0; font-weight: 500; color: var(--navy-50); }
.article-card__more {
    display: inline-block;
    margin-top: var(--space-4);
    color: var(--red);
}
.article-page__back { margin: 0 0 var(--space-4); font-weight: 500; }
.article-page__back-link { color: var(--red); }
.article-page__img {
    width: 100%;
    max-height: var(--measure-s);
    object-fit: cover;
    border-radius: var(--radius);
    margin: var(--space-6) 0;
    background: var(--gray);
}
.article-page__img--icon {
    max-height: var(--measure-xs);
    object-fit: contain;
    padding: var(--space-10);
    background: var(--gray-bar);
}
.article-page__excerpt {
    font-size: var(--text-xl);
    font-weight: 500;
    color: var(--navy-50);
    margin: 0 0 var(--space-6);
}

@media (max-width: 64rem) {
    .pricing__grid,
    .site-footer__box,
    .trust__grid,
    .articles,
    .help__topics,
    .content__cards { grid-template-columns: 1fr; }
    .pricing__grid { gap: var(--space-8); }
    .pricing__features,
    .pricing__features--end { text-align: left; padding-top: 0; }
    .mid-cta__card {
        position: relative;
        right: auto;
        top: auto;
        transform: none;
        width: auto;
        margin: calc(var(--space-20) * -1) var(--space-4) 0;
    }
    .hero__content { left: var(--space-6); right: var(--space-6); top: var(--space-10); }
    .hero__trust { flex-direction: column; align-items: center; gap: var(--space-2); }
    .services__orbit,
    .services__panel { display: none; }
    .services__list { display: block; }
}

@media (max-width: 48rem) {
    .nav__toggle {
        display: block;
        position: relative;
        z-index: 21;
    }
    .nav__panel {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        background: var(--white);
        padding: var(--space-4) var(--space-5) var(--space-6);
        box-shadow: var(--shadow-md);
        z-index: 20;
        flex-direction: column;
        align-items: stretch;
    }
    .nav--open .nav__panel { display: flex; }
    .nav {
        position: relative;
        width: 100%;
        min-width: 0;
    }
    .nav__brand { min-width: 0; }
    .nav__links, .nav__ctas { flex-direction: column; }
    .nav__ctas .btn { width: 100%; }
    .topbar__inner {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: var(--space-2) var(--space-4);
    }
    .topbar__link { min-width: 0; }
    .nav__tag { display: none; }
    .hero,
    .hero__card,
    .hero__media,
    .hero__content { min-width: 0; max-width: 100%; }
    .hero__media {
        display: flex;
        flex-direction: column;
        overflow: visible;
    }
    .hero__media::after { display: none; }
    .hero__image {
        aspect-ratio: 2 / 1;
        flex-shrink: 0;
        max-width: 100%;
        border-radius: var(--radius) var(--radius) 0 0;
    }
    .hero__content {
        position: relative;
        left: auto;
        right: auto;
        top: auto;
        max-width: none;
        padding: var(--space-6) var(--space-5) var(--space-6);
        background: var(--navy);
    }
    .hero__text {
        max-width: none;
        font-size: var(--text-md);
        line-height: var(--leading);
    }
    .hero__actions {
        flex-direction: column;
        align-items: stretch;
    }
    .hero__actions .btn { width: 100%; }
}

/* Stroke icons — top-left on cards, no badge circle */
.icon-stroke {
    width: 1.5rem;
    height: 1.5rem;
    display: block;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: square;
    stroke-linejoin: miter;
    color: var(--icon-navy);
}
.icon--notfall,
.icon-stroke.icon--notfall { color: var(--icon-notfall); }
.topbar__link .icon-stroke {
    width: 1rem;
    height: 1rem;
}
.topbar__link--alert { color: var(--icon-notfall); }
.topbar__link--alert .icon-stroke { color: var(--icon-notfall); }

.nav__login {
    display: inline-flex;
    align-items: center;
    min-height: var(--control-h);
    padding: 0 var(--space-2);
    font-weight: 700;
    color: var(--navy);
}
.nav__item--drop { position: relative; }
.nav__drop {
    display: none;
    position: absolute;
    top: calc(100% + var(--space-2));
    left: 0;
    z-index: 30;
    min-width: 28rem;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
    padding: var(--space-6);
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    border-bottom: var(--line-lg);
}
.nav__item--drop:hover .nav__drop,
.nav__item--drop:focus-within .nav__drop { display: grid; }
.nav__drop-kicker {
    margin: 0 0 var(--space-3);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: var(--navy-50);
}
.nav__drop-link {
    display: block;
    margin-bottom: var(--space-2);
    font-weight: 500;
}
.nav__drop-link:hover { color: var(--red); }

.content__kicker {
    margin: 0 0 var(--space-3);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: var(--red);
}
.content__card-icon {
    display: block;
    width: 2rem;
    height: 2rem;
    margin: 0 0 var(--space-4);
    color: var(--icon-navy);
    background: none;
    border-radius: 0;
}
.content__card-icon--notfall,
.content__card-icon--alert { color: var(--icon-notfall); }
.content__card-icon .icon-stroke {
    width: 2rem;
    height: 2rem;
}
.content__card-status {
    margin: var(--space-3) 0 0;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--navy-50);
}
.content__cards--tiles {
    grid-template-columns: repeat(3, 1fr);
}
.content__split-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}
.content__split-col {
    background: var(--white);
    border-radius: var(--radius);
    border-bottom: var(--line-lg);
    padding: var(--space-6);
}
.content__split-col--not-for { background: var(--gray); }
.content__split-title { margin: 0 0 var(--space-3); font-size: var(--text-xl); }
.content__section--not-for {
    background: var(--gray);
    padding: var(--space-5) var(--space-6);
    border-radius: var(--radius);
    max-width: var(--measure-l);
}
.content__section--not-for .content__title { font-size: var(--text-xl); }
.content__quotes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}
.content__quotes:has(.content__quote:only-child),
.content__quotes--one { grid-template-columns: 1fr; max-width: var(--measure-l); }
.content__quote {
    margin: 0;
    background: var(--white);
    border-radius: var(--radius);
    border-bottom: var(--line-lg);
    padding: var(--space-6);
}
.content__quote-label {
    margin: 0 0 var(--space-3);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: var(--navy-50);
}
.content__quote-text {
    margin: 0 0 var(--space-4);
    font-weight: 500;
    font-size: var(--text-lg);
    line-height: var(--leading-loose);
    color: var(--navy);
}
.content__quote-name { font-style: normal; font-weight: 700; display: block; }
.content__quote-role { display: block; color: var(--navy-50); font-size: var(--text-sm); margin-top: var(--space-1); }
.content__steps--row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
}
.content__steps--row .content__step {
    padding: var(--space-5) 0 0;
    border-bottom: 0;
}
.content__steps--row .content__step::before { position: static; margin-bottom: var(--space-3); }

.site-footer__box--4 { grid-template-columns: repeat(4, 1fr); }

/* Home: two-track chooser */
.chooser {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    margin: var(--space-12) 0;
}
.chooser__field {
    border-radius: var(--radius);
    padding: var(--space-8);
}
.chooser__field--wp {
    background: var(--navy);
    color: var(--white);
}
.chooser__field--other {
    background: var(--white);
    color: var(--navy);
    border-bottom: var(--line-lg);
}
.chooser__kicker {
    margin: 0 0 var(--space-2);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    opacity: 0.7;
}
.chooser__field--wp .chooser__kicker { color: var(--white); }
.chooser__title { margin: 0 0 var(--space-3); font-size: var(--text-3xl); }
.chooser__text {
    margin: 0 0 var(--space-6);
    font-weight: 500;
    line-height: var(--leading);
    opacity: 0.9;
}
.chooser__list { list-style: none; margin: 0 0 var(--space-6); padding: 0; }
.chooser__item {
    display: block;
    padding: var(--space-3) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.chooser__field--other .chooser__item { border-bottom-color: var(--navy-15); }
.chooser__name { display: block; font-weight: 700; }
.chooser__line {
    display: block;
    margin-top: var(--space-1);
    font-weight: 500;
    font-size: var(--text-sm);
    opacity: 0.8;
}
.chooser__field--wp .domain-form {
    margin: var(--space-4) 0 0;
    max-width: none;
}
.chooser__note {
    margin: var(--space-4) 0 0;
    font-size: var(--text-sm);
    font-weight: 500;
    opacity: 0.9;
}
.chooser__note a { color: inherit; text-decoration: underline; }
.chooser__note.mid-cta__note--ok,
.chooser__note.mid-cta__note--warn { opacity: 1; }

.diff {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
    margin: var(--space-8) 0 var(--space-12);
}
.diff__title { margin: 0 0 var(--space-2); font-size: var(--text-xl); }
.diff__text {
    margin: 0;
    font-weight: 500;
    color: var(--navy-50);
    line-height: var(--leading);
}

.flow {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
    margin: var(--space-8) 0 var(--space-12);
    counter-reset: flow;
    list-style: none;
    padding: 0;
}
.flow__step {
    counter-increment: flow;
    padding-top: var(--space-2);
}
.flow__step::before {
    content: counter(flow);
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--space-8);
    height: var(--space-8);
    margin-bottom: var(--space-3);
    border-radius: var(--radius-pill);
    background: var(--navy);
    color: var(--white);
    font-weight: 700;
}
.flow__title { margin: 0 0 var(--space-2); font-size: var(--text-xl); }
.flow__text {
    margin: 0;
    font-weight: 500;
    color: var(--navy-50);
    font-size: var(--text-md);
}

.price-solo { max-width: var(--measure-s); margin: var(--space-8) auto var(--space-12); }
.price-solo .price-card { width: 100%; }
.price-solo__note {
    text-align: center;
    margin: var(--space-4) 0 0;
    color: var(--navy-50);
    font-weight: 500;
}

.crisis {
    background: var(--navy);
    color: var(--white);
    padding: var(--space-10) 0;
    margin-top: var(--space-12);
}
.crisis__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
}
.crisis__title { margin: 0 0 var(--space-2); font-size: var(--text-3xl); }
.crisis__text { margin: 0; font-weight: 500; max-width: var(--measure-m); opacity: 0.9; }
.crisis__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.crisis .btn--ghost {
    background: transparent;
    color: var(--white);
    border: var(--stroke) solid var(--white);
}

.home-quotes { padding-bottom: var(--space-8); }
.home-quotes .content__quotes { margin-top: var(--space-6); }

@media (max-width: 64rem) {
    .chooser,
    .diff,
    .flow,
    .content__split-grid,
    .content__quotes,
    .content__cards--tiles,
    .content__steps--row,
    .site-footer__box--4 { grid-template-columns: 1fr; }
    .nav__drop {
        position: static;
        min-width: 0;
        box-shadow: none;
        border: 0;
        padding: var(--space-4) 0 0;
        display: grid;
    }
}