:root {
    --landing-bg: #07070a;
    --landing-surface: #101019;
    --landing-card: #151522;
    --landing-card-deep: #0d0d14;
    --landing-text: #f6f7fb;
    --landing-muted: #a6a7b5;
    --landing-subtle: #737589;
    --landing-line: rgba(255, 255, 255, 0.11);
    --landing-purple: #7b61ff;
    --landing-pink: #e14fff;
    --landing-orange: #ff8a00;
    --landing-green: #40e38a;
    --landing-gradient: linear-gradient(105deg, var(--landing-purple), var(--landing-pink) 52%, var(--landing-orange));
    --landing-content: 1296px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 88px;
}

body {
    margin: 0;
}

button,
input,
textarea {
    font: inherit;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    display: block;
    max-width: 100%;
}

.landing-body {
    min-width: 320px;
    color: var(--landing-text);
    background: var(--landing-bg);
    font-family: "IBM Plex Sans", sans-serif;
    -webkit-font-smoothing: antialiased;
}

.landing-body h1,
.landing-body h2,
.landing-body h3,
.landing-logo {
    font-family: "Sora", sans-serif;
}

.landing-body h1,
.landing-body h2,
.landing-body h3,
.landing-body p {
    margin-top: 0;
}

.skip-link {
    position: fixed;
    z-index: 200;
    top: 12px;
    left: 12px;
    padding: 10px 14px;
    border-radius: 8px;
    color: #fff;
    background: #000;
    transform: translateY(-160%);
}

.skip-link:focus {
    transform: none;
}

.landing-header {
    position: sticky;
    z-index: 100;
    top: 0;
    display: grid;
    grid-template-columns: 210px 1fr auto;
    align-items: center;
    width: 100%;
    min-height: 96px;
    padding: 18px max(32px, calc((100% - var(--landing-content)) / 2));
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    background: rgba(7, 7, 10, 0.92);
    backdrop-filter: blur(18px);
}

.landing-logo {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 36px;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.05em;
}

.landing-logo span {
    color: transparent;
    background: var(--landing-gradient);
    background-clip: text;
    -webkit-background-clip: text;
}

.landing-logo img {
    width: auto;
    max-width: 180px;
    height: 42px;
    object-fit: contain;
    object-position: left center;
}

.desktop-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(18px, 2.5vw, 42px);
    color: var(--landing-text);
    font-size: 14px;
}

.desktop-nav a {
    transition: color 160ms ease;
}

.desktop-nav a:hover {
    color: #c9a8ff;
}

.header-actions,
.hero-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 53px;
    padding: 0 30px;
    border: 1px solid transparent;
    border-radius: 14px;
    color: #fff;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: border-color 160ms ease, filter 160ms ease, transform 160ms ease;
}

.button:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.button:focus-visible,
.landing-body a:focus-visible,
.landing-body summary:focus-visible,
.landing-body input:focus-visible,
.landing-body textarea:focus-visible {
    outline: 2px solid #d5b8ff;
    outline-offset: 3px;
}

.button-gradient {
    background: var(--landing-gradient);
}

.button-outline,
.button-ghost {
    border-color: rgba(255, 255, 255, 0.18);
    background: transparent;
}

.button-ghost {
    min-height: 42px;
    padding: 0 24px;
    border-radius: 22px;
    font-size: 14px;
}

.button-small {
    min-height: 44px;
    padding: 0 26px;
    border-radius: 24px;
    font-size: 14px;
}

.mobile-nav {
    display: none;
}

.section-shell {
    width: min(var(--landing-content), calc(100% - 40px));
    margin-inline: auto;
}

.hero {
    display: grid;
    grid-template-columns: 532px minmax(0, 1fr);
    gap: 62px;
    min-height: 650px;
    padding-block: 53px 57px;
}

.hero-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    padding: 7px 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    color: var(--landing-text);
    background: rgba(255, 255, 255, 0.05);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.pill span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #b65cff;
    box-shadow: 0 0 14px rgba(182, 92, 255, 0.85);
}

.hero h1 {
    max-width: 540px;
    margin-bottom: 18px;
    font-size: clamp(44px, 4vw, 56px);
    line-height: 1.08;
    letter-spacing: -0.055em;
}

.hero h1 em {
    display: block;
    color: transparent;
    background: var(--landing-gradient);
    background-clip: text;
    -webkit-background-clip: text;
    font-style: normal;
}

.hero-body {
    max-width: 500px;
    margin-bottom: 18px;
    color: var(--landing-muted);
    font-size: 16px;
    line-height: 1.58;
}

.hero-note {
    margin: 16px 0 0;
    color: var(--landing-muted);
    font-size: 13px;
}

.hero-preview {
    position: relative;
    min-width: 0;
    height: 540px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.17);
    border-radius: 18px;
    background: var(--landing-card-deep);
}

.hero-preview > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-placeholder {
    position: relative;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 8px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background:
        radial-gradient(circle at 48% 45%, rgba(123, 97, 255, 0.22), transparent 30%),
        linear-gradient(145deg, #101019 0%, #0d0d14 70%);
}

.placeholder-aura {
    position: absolute;
    width: 340px;
    height: 340px;
    border: 1px solid rgba(225, 79, 255, 0.28);
    border-radius: 50%;
    box-shadow: 0 0 80px rgba(123, 97, 255, 0.16), inset 0 0 80px rgba(225, 79, 255, 0.08);
}

.placeholder-grid {
    position: absolute;
    inset: 0;
    opacity: 0.18;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(to bottom, transparent, #000 25%, #000 75%, transparent);
}

.placeholder-brand {
    position: absolute;
    top: 20px;
    left: 22px;
    color: #b27aff;
    font-family: "Sora", sans-serif;
    font-size: 14px;
    font-weight: 600;
}

.image-placeholder strong,
.image-placeholder small {
    position: relative;
    z-index: 1;
}

.image-placeholder strong {
    font-family: "Sora", sans-serif;
    font-size: clamp(18px, 2vw, 28px);
    letter-spacing: 0.08em;
}

.image-placeholder small {
    color: var(--landing-muted);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.benefits-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    min-height: 82px;
    padding: 18px max(32px, calc((100% - var(--landing-content)) / 2));
    overflow-x: auto;
    border-block: 1px solid rgba(255, 255, 255, 0.08);
    background: var(--landing-card-deep);
    scrollbar-width: none;
}

.benefits-strip::-webkit-scrollbar {
    display: none;
}

.benefits-strip span {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    color: var(--landing-text);
    font-size: 13px;
}

.benefits-strip i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--landing-pink);
}

.problem-solution {
    padding-block: 44px 29px;
}

.split-row,
.sports-section,
.early-access,
.faq-section,
.contact-section {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 36px;
}

.split-row {
    grid-template-columns: 340px minmax(0, 1fr);
    gap: 42px;
}

.split-heading {
    align-self: start;
}

.eyebrow {
    margin-bottom: 12px;
    color: #9c6bff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.split-heading h2,
.showcase-copy h2,
.wide-heading h2,
.contact-copy h2 {
    margin-bottom: 12px;
    font-size: clamp(28px, 2.4vw, 36px);
    line-height: 1.16;
    letter-spacing: -0.04em;
}

.split-heading > p:last-child,
.showcase-copy > p,
.wide-heading > p,
.contact-copy > p {
    color: var(--landing-muted);
    font-size: 14px;
    line-height: 1.52;
}

.card-grid {
    display: grid;
    gap: 18px 24px;
}

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

.info-card {
    min-height: 190px;
    padding: 22px;
    border: 1px solid var(--landing-line);
    border-radius: 10px;
    background: var(--landing-card);
}

.info-card-compact {
    min-height: 145px;
    padding: 18px 22px;
}

.card-code {
    display: block;
    margin-bottom: 12px;
    color: #b65cff;
    font-family: "Sora", sans-serif;
    font-size: 23px;
    font-weight: 600;
}

.info-card h3 {
    margin-bottom: 9px;
    font-size: 17px;
    line-height: 1.25;
}

.info-card p {
    margin-bottom: 0;
    color: var(--landing-muted);
    font-size: 12px;
    line-height: 1.45;
}

.section-divider {
    height: 1px;
    margin: 28px 0;
    background: rgba(255, 255, 255, 0.08);
}

.how-section {
    padding-block: 34px;
}

.wide-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    min-height: 72px;
}

.wide-heading h2 {
    margin: 0;
}

.wide-heading > p {
    margin: 0;
    text-align: right;
}

.steps-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 24px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}

.steps-grid li {
    min-height: 146px;
    padding: 16px;
    border: 1px solid var(--landing-line);
    border-radius: 8px;
    background: var(--landing-card);
}

.steps-grid span {
    color: #c68bff;
    font-family: "Sora", sans-serif;
    font-size: 12px;
    font-weight: 600;
}

.steps-grid h3 {
    margin: 10px 0 8px;
    font-size: 15px;
}

.steps-grid p {
    margin: 0;
    color: var(--landing-muted);
    font-size: 12px;
    line-height: 1.45;
}

.feature-showcase {
    display: grid;
    grid-template-columns: 620px minmax(0, 1fr);
    gap: 58px;
    align-items: center;
    padding-block: 42px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.feature-showcase-reverse {
    grid-template-columns: 470px minmax(0, 1fr);
}

.product-window {
    position: relative;
    height: 296px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    background: var(--landing-card);
}

.product-window > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.window-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    height: 34px;
    padding: 0 12px;
    background: #101019;
    color: var(--landing-subtle);
    font-size: 10px;
}

.window-bar span {
    margin-right: auto;
}

.window-bar i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #2a2a37;
}

.editor-layout {
    display: grid;
    grid-template-columns: 390px 1fr;
    gap: 22px;
    height: calc(100% - 34px);
    padding: 16px 18px 20px;
}

.editor-canvas {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 38px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: #0e221c;
    color: #648276;
    font-size: 11px;
}

.scorebug {
    display: grid;
    grid-template-columns: 74px 1fr 60px 68px;
    align-items: center;
    width: 332px;
    min-height: 50px;
    overflow: hidden;
    border-radius: 7px;
    color: #fff;
    background: #0d0d14;
    text-align: center;
}

.scorebug b:first-child {
    align-self: stretch;
    display: grid;
    place-items: center;
    background: var(--landing-purple);
}

.scorebug em {
    font-style: normal;
}

.binding-list {
    display: grid;
    align-content: center;
    gap: 16px;
    margin: 0;
    padding: 0;
    color: var(--landing-muted);
    font-size: 10px;
    list-style: none;
}

.binding-list li {
    display: flex;
    align-items: center;
    gap: 9px;
}

.binding-list i {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: #a866ff;
}

.showcase-copy h2 {
    max-width: 560px;
}

.showcase-copy > p {
    max-width: 580px;
}

.mini-steps {
    display: flex;
    gap: 17px;
    margin-top: 18px;
}

.mini-steps span {
    display: grid;
    place-items: center;
    gap: 6px;
    color: var(--landing-muted);
    font-size: 10px;
    text-align: center;
}

.mini-steps i {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 8px;
    color: #d4b9ff;
    background: #191923;
    font-style: normal;
    font-weight: 700;
}

.checklist {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 20px;
    margin: 18px 0 0;
    padding: 0;
    color: var(--landing-muted);
    font-size: 12px;
    list-style: none;
}

.checklist li {
    display: flex;
    gap: 8px;
}

.checklist i {
    color: #b65cff;
}

.live-window {
    display: grid;
    grid-template-columns: 142px 1fr 216px;
    gap: 20px;
    height: 284px;
    padding-right: 20px;
    background: #0d0d14;
}

.control-sidebar {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px 14px;
    background: #101019;
    font-size: 10px;
}

.control-sidebar span,
.control-sidebar b {
    padding: 8px 12px;
    border-radius: 6px;
}

.control-sidebar b {
    background: #6d37d8;
}

.control-sidebar span {
    color: var(--landing-muted);
}

.timer-panel,
.quick-panel {
    align-self: center;
    min-width: 0;
    height: 190px;
    padding: 18px;
    border: 1px solid var(--landing-line);
    border-radius: 8px;
    background: var(--landing-card);
}

.timer-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.timer-panel strong,
.timer-panel div {
    grid-column: 1 / -1;
}

.timer-panel strong {
    align-self: center;
    font-family: "Sora", sans-serif;
    font-size: 36px;
    text-align: center;
}

.timer-panel div,
.quick-panel div {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.timer-panel button,
.quick-panel button {
    min-height: 32px;
    border: 1px solid var(--landing-line);
    border-radius: 5px;
    color: var(--landing-muted);
    background: #191923;
    font-size: 9px;
}

.timer-panel .mock-primary {
    color: #fff;
    background: #7443e7;
}

.quick-panel h3 {
    margin-bottom: 12px;
    font-size: 12px;
}

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

.sports-section {
    align-items: center;
    min-height: 250px;
    padding-block: 44px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.sport-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
}

.sport-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 132px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    background: var(--landing-surface);
}

.sport-tile i {
    color: #b65cff;
    font-size: 31px;
}

.sport-tile img {
    width: 46px;
    height: 46px;
    border-radius: 8px;
    object-fit: cover;
}

.sport-tile strong {
    font-size: 12px;
}

.early-access {
    align-items: start;
    min-height: 410px;
    padding-block: 46px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.plans-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.plan-card {
    display: flex;
    flex-direction: column;
    min-height: 318px;
    padding: 24px 22px 20px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    background: var(--landing-card);
}

.plan-card-featured {
    border: 2px solid var(--landing-pink);
    background: #191326;
}

.plan-card h3 {
    margin-bottom: 6px;
    font-size: 19px;
}

.plan-card > p {
    margin-bottom: 8px;
    color: var(--landing-muted);
    font-size: 12px;
}

.plan-card > strong {
    font-family: "Sora", sans-serif;
    font-size: 32px;
}

.plan-card ul {
    display: grid;
    gap: 6px;
    margin: 12px 0 18px;
    padding: 0;
    color: #d9ccff;
    font-size: 12px;
    list-style: none;
}

.plan-card li {
    display: flex;
    gap: 6px;
}

.plan-card a {
    display: grid;
    place-items: center;
    min-height: 42px;
    margin-top: auto;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
}

.trust-section {
    padding-block: 32px;
}

.trust-badge {
    padding: 10px 16px;
    border: 1px solid rgba(64, 227, 138, 0.34);
    border-radius: 20px;
    color: var(--landing-green);
    background: rgba(64, 227, 138, 0.12);
    font-size: 12px;
    font-weight: 600;
}

.trust-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-top: 22px;
}

.trust-grid article {
    min-height: 136px;
    padding: 18px;
    border: 1px solid var(--landing-line);
    border-radius: 8px;
    background: var(--landing-card);
}

.trust-grid span {
    color: var(--landing-pink);
    font-family: "Sora", sans-serif;
    font-size: 12px;
    font-weight: 600;
}

.trust-grid h3 {
    margin: 8px 0;
    font-size: 16px;
}

.trust-grid p {
    margin: 0;
    color: var(--landing-muted);
    font-size: 12px;
    line-height: 1.45;
}

.faq-section {
    align-items: start;
    padding-block: 44px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.faq-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 20px;
}

.faq-grid details {
    min-height: 100px;
    padding: 14px 16px;
    border: 1px solid var(--landing-line);
    border-radius: 8px;
    background: var(--landing-card);
}

.faq-grid summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    list-style: none;
    cursor: pointer;
    font-family: "Sora", sans-serif;
    font-size: 14px;
    font-weight: 600;
}

.faq-grid summary::-webkit-details-marker {
    display: none;
}

.faq-grid details[open] summary i {
    transform: rotate(45deg);
}

.faq-grid p {
    margin: 8px 0 0;
    color: var(--landing-muted);
    font-size: 12px;
    line-height: 1.45;
}

.contact-section {
    align-items: center;
    padding-block: 44px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.contact-copy address {
    display: grid;
    gap: 5px;
    margin-top: 20px;
    color: #d9ccff;
    font-style: normal;
    font-size: 13px;
}

.contact-card {
    padding: 24px;
    border: 1px solid var(--landing-line);
    border-radius: 12px;
    background: var(--landing-card);
}

.contact-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.contact-form label {
    display: grid;
    gap: 7px;
    color: var(--landing-muted);
    font-size: 12px;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    border: 1px solid var(--landing-line);
    border-radius: 8px;
    color: var(--landing-text);
    background: var(--landing-surface);
}

.contact-form input {
    min-height: 44px;
    padding: 0 13px;
}

.contact-form textarea {
    min-height: 110px;
    padding: 12px 13px;
    resize: vertical;
}

.form-full {
    grid-column: 1 / -1;
}

.contact-form .errorlist {
    margin: 0;
    padding: 0;
    color: #ff8199;
    list-style: none;
}

.form-notice {
    margin-bottom: 16px;
    padding: 12px 14px;
    border: 1px solid rgba(64, 227, 138, 0.34);
    border-radius: 8px;
    color: var(--landing-green);
    background: rgba(64, 227, 138, 0.08);
    font-size: 13px;
}

.final-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    min-height: 190px;
    padding: 34px 38px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;
    background: var(--landing-card);
}

.final-section h2 {
    max-width: 620px;
    margin-bottom: 8px;
    font-size: 30px;
    line-height: 1.25;
    letter-spacing: -0.04em;
}

.final-section p {
    margin: 0;
    color: var(--landing-muted);
    font-size: 14px;
}

.final-section > div:last-child {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.final-section small {
    color: var(--landing-muted);
    font-size: 10px;
}

.landing-footer {
    display: grid;
    grid-template-columns: 200px 1fr 220px;
    align-items: center;
    gap: 36px;
    min-height: 132px;
}

.content-landing-body {
    min-height: 100vh;
    background:
        radial-gradient(circle at 12% 22%, rgba(123, 97, 255, 0.1), transparent 28%),
        var(--landing-bg);
}

.content-page {
    min-height: calc(100vh - 228px);
    padding-block: clamp(72px, 9vw, 124px);
}

.content-page-heading {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 16px 30px;
    margin-bottom: 36px;
}

.content-page-heading .pill {
    grid-column: 1 / -1;
}

.content-page-heading h1 {
    max-width: 820px;
    margin: 0;
    font-size: clamp(44px, 6vw, 78px);
    letter-spacing: -0.06em;
}

.content-page-card {
    max-width: 920px;
    padding: clamp(26px, 5vw, 58px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    background: rgba(21, 21, 34, 0.88);
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.28);
}

.content-page-card {
    color: var(--landing-muted);
    font-size: 15px;
    line-height: 1.75;
}

.content-page-card h2,
.content-page-card h3,
.content-page-card h4 {
    margin: 1.6em 0 0.55em;
    color: var(--landing-text);
    letter-spacing: -0.03em;
}

.content-page-card h2:first-child,
.content-page-card h3:first-child,
.content-page-card p:first-child {
    margin-top: 0;
}

.content-page-card a {
    color: #c795ff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.content-page-card li + li {
    margin-top: 8px;
}

.landing-footer .landing-logo {
    font-size: 20px;
}

.landing-footer .landing-logo img {
    height: 34px;
}

.landing-footer nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 18px;
    color: var(--landing-muted);
    font-size: 11px;
}

.footer-meta {
    display: grid;
    gap: 10px;
    color: var(--landing-subtle);
    font-size: 11px;
    line-height: 1.45;
}

.footer-meta div {
    display: flex;
    gap: 12px;
}

.cookie-banner {
    position: fixed;
    z-index: 150;
    right: 18px;
    bottom: 18px;
    display: flex;
    align-items: center;
    gap: 18px;
    max-width: 460px;
    padding: 14px;
    border: 1px solid var(--landing-line);
    border-radius: 12px;
    background: rgba(21, 21, 34, 0.96);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
}

.cookie-banner[hidden] {
    display: none;
}

.cookie-banner p {
    margin: 0;
    color: var(--landing-muted);
    font-size: 12px;
}

@media (max-width: 1180px) {
    .landing-header {
        grid-template-columns: 180px 1fr auto;
    }

    .desktop-nav {
        gap: 16px;
        font-size: 12px;
    }

    .hero {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
        gap: 34px;
    }

    .hero-preview {
        height: 500px;
    }

    .split-row {
        grid-template-columns: 280px minmax(0, 1fr);
    }

    .feature-showcase {
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
        gap: 34px;
    }

    .feature-showcase-reverse {
        grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
    }

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

@media (max-width: 980px) {
    .landing-header {
        grid-template-columns: 1fr auto;
        min-height: 76px;
        padding: 14px 20px;
    }

    .desktop-nav,
    .header-actions {
        display: none;
    }

    .mobile-nav {
        position: relative;
        display: block;
    }

    .mobile-nav summary {
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        border: 1px solid var(--landing-line);
        border-radius: 10px;
        list-style: none;
        cursor: pointer;
        font-size: 22px;
    }

    .mobile-nav summary::-webkit-details-marker {
        display: none;
    }

    .mobile-nav nav {
        position: absolute;
        top: 54px;
        right: 0;
        display: grid;
        width: min(300px, calc(100vw - 32px));
        padding: 10px;
        border: 1px solid var(--landing-line);
        border-radius: 12px;
        background: #151522;
        box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
    }

    .mobile-nav nav a {
        padding: 12px;
        border-radius: 8px;
    }

    .mobile-nav nav a:hover {
        background: rgba(255, 255, 255, 0.06);
    }

    .hero {
        grid-template-columns: 1fr;
        gap: 34px;
        padding-block: 56px;
    }

    .hero-copy {
        max-width: 680px;
    }

    .hero-preview {
        height: min(68vw, 540px);
        min-height: 390px;
    }

    .split-row,
    .sports-section,
    .early-access,
    .faq-section,
    .contact-section {
        grid-template-columns: 1fr;
    }

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

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

    .feature-showcase,
    .feature-showcase-reverse {
        grid-template-columns: 1fr;
    }

    .feature-showcase-reverse .showcase-copy {
        order: 2;
    }

    .product-window {
        height: min(52vw, 360px);
        min-height: 280px;
    }

    .plans-grid {
        grid-template-columns: repeat(3, minmax(260px, 1fr));
        overflow-x: auto;
        padding-bottom: 8px;
        scroll-snap-type: x mandatory;
    }

    .plan-card {
        scroll-snap-align: start;
    }

    .landing-footer {
        grid-template-columns: 1fr;
        justify-items: center;
        padding-block: 36px;
        text-align: center;
    }

    .footer-meta,
    .footer-meta div {
        justify-items: center;
        justify-content: center;
    }
}

@media (max-width: 680px) {
    .section-shell {
        width: min(100% - 28px, var(--landing-content));
    }

    .landing-logo {
        font-size: 23px;
    }

    .landing-logo img {
        max-width: 150px;
        height: 36px;
    }

    .hero {
        padding-block: 42px;
    }

    .hero h1 {
        font-size: clamp(39px, 12vw, 52px);
    }

    .hero-actions {
        align-items: stretch;
        width: 100%;
        flex-direction: column;
    }

    .button {
        width: 100%;
    }

    .hero-preview {
        min-height: 320px;
        height: 92vw;
    }

    .benefits-strip {
        min-height: 68px;
        padding-inline: 14px;
    }

    .card-grid-three,
    .steps-grid,
    .trust-grid,
    .faq-grid,
    .contact-form {
        grid-template-columns: 1fr;
    }

    .wide-heading,
    .final-section {
        align-items: flex-start;
        flex-direction: column;
    }

    .wide-heading > p {
        text-align: left;
    }

    .product-window {
        min-height: 250px;
        height: 76vw;
    }

    .editor-layout {
        grid-template-columns: 1fr;
        padding: 12px;
    }

    .binding-list {
        display: none;
    }

    .scorebug {
        width: min(92%, 332px);
        grid-template-columns: 62px 1fr 52px 60px;
    }

    .live-window {
        grid-template-columns: 90px 1fr;
        gap: 10px;
        padding-right: 10px;
    }

    .quick-panel {
        display: none;
    }

    .timer-panel {
        padding: 12px;
    }

    .timer-panel strong {
        font-size: 28px;
    }

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

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

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

    .final-section {
        padding: 28px 22px;
    }

    .final-section > div:last-child {
        align-items: stretch;
        width: 100%;
    }

    .final-section small {
        text-align: center;
    }

    .cookie-banner {
        right: 10px;
        bottom: 10px;
        left: 10px;
        max-width: none;
        flex-direction: column;
        align-items: stretch;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Public authentication and error pages reuse the landing visual system
   without affecting cabinet or payment templates. */
.auth-landing-body,
.error-landing-body {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
    background:
        radial-gradient(circle at 16% 30%, rgba(123, 97, 255, 0.12), transparent 26%),
        radial-gradient(circle at 82% 68%, rgba(225, 79, 255, 0.08), transparent 22%),
        var(--landing-bg);
}

.auth-header,
.auth-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: min(var(--landing-content), calc(100% - 40px));
    margin-inline: auto;
}

.auth-header {
    min-height: 96px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.auth-back-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 42px;
    padding: 0 18px;
    border: 1px solid var(--landing-line);
    border-radius: 22px;
    color: var(--landing-muted);
    font-size: 13px;
    font-weight: 600;
    transition: color 160ms ease, border-color 160ms ease;
}

.auth-back-link:hover {
    border-color: rgba(255, 255, 255, 0.24);
    color: var(--landing-text);
}

.auth-page {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(420px, 0.72fr);
    gap: clamp(56px, 8vw, 120px);
    align-items: center;
    width: min(1160px, calc(100% - 40px));
    margin: auto;
    padding-block: 52px;
}

.auth-showcase {
    min-width: 0;
}

.auth-showcase h1 {
    max-width: 660px;
    margin-bottom: 18px;
    font-size: clamp(44px, 4.5vw, 66px);
    line-height: 1.04;
    letter-spacing: -0.06em;
}

.auth-showcase h1 em {
    display: block;
    color: transparent;
    background: var(--landing-gradient);
    background-clip: text;
    -webkit-background-clip: text;
    font-style: normal;
}

.auth-showcase > p:not(.pill) {
    max-width: 580px;
    margin-bottom: 24px;
    color: var(--landing-muted);
    font-size: 15px;
    line-height: 1.58;
}

.auth-product-card {
    max-width: 610px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 14px;
    background: var(--landing-card-deep);
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.28);
}

.auth-product-bar {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 18px;
    min-height: 44px;
    padding: 0 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    background: var(--landing-surface);
}

.auth-product-bar > strong {
    color: #b27aff;
    font-family: "Sora", sans-serif;
    font-size: 12px;
}

.auth-product-bar span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--landing-green);
    font-size: 8px;
    font-weight: 700;
}

.auth-product-bar span i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
}

.auth-product-bar b {
    font-family: "Sora", sans-serif;
    font-size: 13px;
}

.auth-product-content {
    display: grid;
    grid-template-columns: 1fr 128px;
    gap: 14px;
    padding: 14px;
}

.auth-score-stage {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 36px;
    min-height: 208px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 9px;
    background: #12271f;
}

.auth-score-stage small {
    color: #719486;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.05em;
}

.auth-score-stage > div {
    display: grid;
    grid-template-columns: 70px 1fr 54px 66px;
    align-items: center;
    width: min(356px, calc(100% - 28px));
    min-height: 44px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 7px;
    background: #0d0d14;
    font-size: 12px;
    text-align: center;
}

.auth-score-stage > div b:first-child {
    align-self: stretch;
    display: grid;
    place-items: center;
    background: var(--landing-purple);
}

.auth-score-stage > div strong {
    font-family: "Sora", sans-serif;
    font-size: 16px;
}

.auth-score-stage > div em {
    font-style: normal;
}

.auth-product-menu {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 9px;
    background: var(--landing-surface);
    font-size: 9px;
}

.auth-product-menu strong,
.auth-product-menu span {
    padding: 7px 8px;
    border-radius: 5px;
}

.auth-product-menu span {
    color: var(--landing-muted);
    background: #191923;
}

.auth-product-menu .is-active {
    color: #fff;
    background: #6d37d8;
}

.auth-benefits {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    margin: 20px 0 0;
    padding: 0;
    color: var(--landing-muted);
    font-size: 12px;
    list-style: none;
}

.auth-benefits li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.auth-benefits i {
    color: #b65cff;
}

.auth-card {
    padding: 34px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 16px;
    background: rgba(21, 21, 34, 0.92);
    box-shadow: 0 36px 90px rgba(0, 0, 0, 0.36);
    backdrop-filter: blur(16px);
}

.auth-page-register {
    grid-template-columns: minmax(0, 0.86fr) minmax(560px, 1fr);
    width: min(1260px, calc(100% - 40px));
    gap: clamp(44px, 6vw, 92px);
}

.auth-card-wide {
    padding: 32px;
}

.auth-card-heading h2 {
    margin-bottom: 8px;
    font-size: 32px;
    letter-spacing: -0.04em;
}

.auth-card-heading > p:last-child {
    margin-bottom: 22px;
    color: var(--landing-muted);
    font-size: 13px;
    line-height: 1.5;
}

.auth-social-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.auth-social-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 44px;
    padding-inline: 12px;
    border: 1px solid var(--landing-line);
    border-radius: 8px;
    background: var(--landing-surface);
    font-size: 11px;
    font-weight: 600;
}

.auth-social-button.is-disabled {
    opacity: 0.46;
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
    color: var(--landing-subtle);
    font-size: 11px;
}

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

.landing-auth-form {
    display: grid;
    gap: 16px;
}

.landing-auth-form label {
    display: grid;
    gap: 7px;
    color: var(--landing-muted);
    font-size: 12px;
    font-weight: 500;
}

.landing-auth-form input {
    width: 100%;
    min-height: 48px;
    padding: 0 14px;
    border: 1px solid var(--landing-line);
    border-radius: 8px;
    color: var(--landing-text);
    background: var(--landing-surface);
}

.landing-auth-form input::placeholder {
    color: var(--landing-subtle);
}

.landing-auth-form label small {
    color: #ff8199;
}

.landing-auth-form .button {
    width: 100%;
    min-height: 50px;
}

.auth-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.auth-form-full {
    grid-column: 1 / -1;
}

.auth-form-meta {
    display: flex;
    justify-content: flex-end;
    margin-top: -4px;
}

.auth-form-meta a,
.auth-register-prompt a {
    color: #c795ff;
    font-weight: 600;
}

.auth-form-meta a {
    font-size: 12px;
}

.auth-form-notice {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 11px 12px;
    border: 1px solid rgba(255, 77, 109, 0.3);
    border-radius: 8px;
    color: #ff98aa;
    background: rgba(255, 77, 109, 0.08);
    font-size: 12px;
}

.auth-form-notice .errorlist {
    margin: 0;
    padding: 0;
    list-style: none;
}

.auth-register-prompt {
    margin: 20px 0 0;
    color: var(--landing-muted);
    font-size: 12px;
    text-align: center;
}

.auth-card-links {
    display: flex;
    justify-content: center;
    gap: 22px;
    margin-top: 20px;
    font-size: 12px;
}

.auth-card-links a,
.auth-quiet-link {
    color: #c795ff;
    font-weight: 600;
}

.auth-messages {
    display: grid;
    gap: 8px;
    margin-bottom: 20px;
}

.auth-message {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 11px 12px;
    border: 1px solid rgba(69, 212, 131, 0.28);
    border-radius: 8px;
    color: #7ee4a9;
    background: rgba(69, 212, 131, 0.08);
    font-size: 12px;
}

.auth-message.is-error {
    border-color: rgba(255, 77, 109, 0.3);
    color: #ff98aa;
    background: rgba(255, 77, 109, 0.08);
}

.auth-success-card {
    display: grid;
    grid-template-columns: 54px 1fr;
    gap: 14px;
    align-items: center;
    padding: 16px;
    border: 1px solid rgba(123, 97, 255, 0.26);
    border-radius: 10px;
    background: rgba(123, 97, 255, 0.08);
}

.auth-success-card > div:last-child {
    display: grid;
    gap: 2px;
}

.auth-success-card strong {
    font-family: "Sora", sans-serif;
    font-size: 14px;
}

.auth-success-card span,
.auth-success-card small {
    color: var(--landing-muted);
    font-size: 11px;
}

.auth-success-icon {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    color: #fff;
    background: var(--landing-gradient);
    font-size: 24px;
}

.auth-success-actions {
    display: grid;
    gap: 10px;
    margin-top: 20px;
    text-align: center;
}

.button-secondary-dark {
    min-height: 46px;
    border: 1px solid var(--landing-line);
    color: var(--landing-text);
    background: var(--landing-surface);
}

.auth-quiet-link {
    padding-top: 6px;
    font-size: 12px;
}

.auth-footer {
    min-height: 68px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--landing-subtle);
    font-size: 10px;
}

.error-page {
    display: grid;
    grid-template-columns: minmax(0, 0.78fr) minmax(480px, 1fr);
    gap: clamp(50px, 8vw, 120px);
    align-items: center;
    width: min(1160px, calc(100% - 40px));
    margin: auto;
    padding-block: 64px;
}

.error-copy .error-code {
    margin: 0 0 8px;
    color: transparent;
    background: var(--landing-gradient);
    background-clip: text;
    -webkit-background-clip: text;
    font-family: "Sora", sans-serif;
    font-size: clamp(96px, 12vw, 168px);
    font-weight: 800;
    line-height: 0.92;
    letter-spacing: -0.08em;
}

.error-copy h1 {
    max-width: 560px;
    margin-bottom: 15px;
    font-size: clamp(38px, 4vw, 56px);
    line-height: 1.06;
    letter-spacing: -0.055em;
}

.error-copy > p:not(.pill) {
    max-width: 520px;
    color: var(--landing-muted);
    font-size: 15px;
    line-height: 1.58;
}

.error-actions {
    display: flex;
    gap: 12px;
    margin-top: 26px;
}

.error-visual {
    position: relative;
    min-height: 480px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 18px;
    background: var(--landing-card-deep);
    box-shadow: 0 36px 90px rgba(0, 0, 0, 0.32);
}

.error-status-bar {
    position: absolute;
    inset: 0 0 auto;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 18px;
    min-height: 48px;
    padding: 0 18px;
    border-bottom: 1px solid var(--landing-line);
    background: var(--landing-surface);
    font-size: 11px;
}

.error-status-bar span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #b27aff;
    font-family: "Sora", sans-serif;
    font-weight: 600;
}

.error-status-bar span i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--landing-pink);
    box-shadow: 0 0 12px rgba(225, 79, 255, 0.7);
}

.error-status-bar b {
    padding: 6px 10px;
    border-radius: 14px;
    color: #ff6f88;
    background: rgba(255, 77, 109, 0.1);
    font-size: 9px;
}

.error-status-bar em {
    font-family: "Sora", sans-serif;
    font-size: 13px;
    font-style: normal;
}

.error-field {
    position: absolute;
    inset: 48px 0 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    background:
        linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
        radial-gradient(circle at center, #162b24, #0b1613 76%);
    background-size: 38px 38px, 38px 38px, auto;
}

.field-line,
.field-circle {
    position: absolute;
    border: 1px solid rgba(113, 148, 134, 0.26);
}

.field-line {
    left: 12%;
    width: 76%;
    height: 26%;
}

.field-line-top {
    top: 8%;
    border-top: 0;
}

.field-line-bottom {
    bottom: 8%;
    border-bottom: 0;
}

.field-circle {
    width: 160px;
    height: 160px;
    border-radius: 50%;
}

.lost-signal {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    gap: 9px;
    min-width: 280px;
    padding: 32px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 12px;
    background: rgba(13, 13, 20, 0.88);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
}

.lost-signal i {
    color: #b65cff;
    font-size: 34px;
}

.lost-signal strong {
    font-family: "Sora", sans-serif;
    font-size: 15px;
    letter-spacing: 0.05em;
}

.lost-signal small {
    color: var(--landing-muted);
    font-size: 10px;
}

@media (max-width: 980px) {
    .auth-page,
    .error-page {
        grid-template-columns: 1fr;
        gap: 42px;
        padding-block: 44px;
    }

    .auth-showcase {
        display: grid;
        justify-items: center;
        text-align: center;
    }

    .auth-showcase > p:not(.pill) {
        max-width: 680px;
    }

    .auth-product-card {
        width: min(100%, 680px);
        text-align: left;
    }

    .auth-card {
        width: min(100%, 520px);
        margin-inline: auto;
    }

    .auth-page-register {
        grid-template-columns: 1fr;
        width: min(760px, calc(100% - 40px));
    }

    .auth-page-register .auth-card {
        width: min(100%, 620px);
    }

    .auth-benefits {
        justify-content: center;
    }

    .error-copy {
        text-align: center;
    }

    .error-copy > p:not(.pill) {
        margin-inline: auto;
    }

    .error-actions {
        justify-content: center;
    }

    .error-visual {
        width: min(100%, 680px);
        min-height: 420px;
        margin-inline: auto;
    }
}

@media (max-width: 600px) {
    .auth-header,
    .auth-footer {
        width: calc(100% - 28px);
    }

    .content-page {
        min-height: auto;
        padding-block: 52px;
    }

    .content-page-heading {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .content-page-heading .pill {
        grid-column: auto;
    }

    .content-page-heading .auth-back-link {
        width: fit-content;
        padding: 0 16px;
        font-size: 12px;
    }

    .auth-header {
        min-height: 76px;
    }

    .auth-back-link {
        width: 44px;
        padding: 0;
        justify-content: center;
        font-size: 0;
    }

    .auth-back-link i {
        font-size: 16px;
    }

    .auth-page,
    .error-page {
        width: calc(100% - 28px);
        padding-block: 34px;
    }

    .auth-showcase h1 {
        font-size: clamp(38px, 11vw, 50px);
    }

    .auth-product-content {
        grid-template-columns: 1fr;
    }

    .auth-product-menu {
        display: none;
    }

    .auth-score-stage {
        min-height: 190px;
    }

    .auth-card {
        padding: 26px 20px;
    }

    .auth-social-grid {
        grid-template-columns: 1fr;
    }

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

    .auth-form-full {
        grid-column: auto;
    }

    .auth-footer {
        align-items: flex-start;
        flex-direction: column;
        justify-content: center;
        gap: 4px;
    }

    .error-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .error-visual {
        min-height: 330px;
    }

    .lost-signal {
        min-width: min(260px, calc(100% - 36px));
        padding: 24px 18px;
    }

    .error-status-bar {
        grid-template-columns: 1fr auto;
    }

    .error-status-bar em {
        display: none;
    }
}

.provider-landing-body {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
    background:
        radial-gradient(circle at 17% 36%, rgba(123, 97, 255, 0.13), transparent 28%),
        radial-gradient(circle at 79% 52%, rgba(225, 79, 255, 0.07), transparent 24%),
        var(--landing-bg);
}

.provider-page-simple .provider-status-card > p:not(.eyebrow) {
    margin: 0 0 24px;
    color: var(--landing-muted);
    font-size: 13px;
    line-height: 1.55;
}

.provider-status-card .provider-icon.is-error {
    color: #ff98aa;
    background: rgba(255, 77, 109, 0.12);
    border-color: rgba(255, 77, 109, 0.3);
}

.provider-signup-form {
    margin-top: 22px;
}

.provider-signup-form .button-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.provider-signup-form .auth-field-help {
    color: var(--landing-subtle);
}

.provider-page {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(400px, 0.7fr);
    gap: clamp(54px, 8vw, 118px);
    align-items: center;
    width: min(1160px, calc(100% - 40px));
    margin: auto;
    padding-block: 54px;
}

.provider-context h1 {
    max-width: 650px;
    margin-bottom: 18px;
    font-size: clamp(44px, 4.5vw, 64px);
    line-height: 1.04;
    letter-spacing: -0.06em;
}

.provider-context h1 em {
    display: block;
    color: transparent;
    background: var(--landing-gradient);
    background-clip: text;
    -webkit-background-clip: text;
    font-style: normal;
}

.provider-context > p:not(.pill) {
    max-width: 580px;
    margin-bottom: 25px;
    color: var(--landing-muted);
    font-size: 15px;
    line-height: 1.58;
}

.provider-output-card {
    max-width: 620px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 14px;
    background: var(--landing-card-deep);
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.3);
}

.provider-output-bar {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 18px;
    min-height: 45px;
    padding: 0 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    background: var(--landing-surface);
    font-size: 10px;
}

.provider-output-bar strong {
    color: #b27aff;
    font-family: "Sora", sans-serif;
}

.provider-output-bar span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--landing-green);
    font-weight: 700;
}

.provider-output-bar span i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.provider-output-bar b {
    color: var(--landing-muted);
    font-size: 9px;
}

.provider-output-stage {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 24px;
    min-height: 250px;
    background:
        linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
        radial-gradient(circle at center, #172820, #0d1714 78%);
    background-size: 34px 34px, 34px 34px, auto;
}

.provider-output-stage > small {
    color: #719486;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.provider-output-stage > p {
    margin: 0;
    color: #6f887e;
    font-size: 10px;
}

.provider-flow {
    display: grid;
    grid-template-columns: repeat(5, auto);
    align-items: center;
    gap: 10px;
    padding: 15px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 10px;
    background: rgba(13, 13, 20, 0.9);
}

.provider-flow span {
    display: grid;
    place-items: center;
    gap: 8px;
    min-width: 96px;
    min-height: 72px;
    padding: 10px;
    border: 1px solid var(--landing-line);
    border-radius: 8px;
    background: var(--landing-card);
    font-size: 10px;
    font-weight: 600;
}

.provider-flow span i {
    color: #b65cff;
    font-size: 20px;
}

.provider-flow .provider-flow-google {
    background: #f6f7fb;
    color: #151522;
}

.provider-flow .provider-flow-google i {
    color: #4285f4;
}

.provider-flow > b {
    color: var(--landing-subtle);
    font-size: 12px;
}

.provider-confirm-card {
    padding: 34px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 16px;
    background: rgba(21, 21, 34, 0.93);
    box-shadow: 0 36px 90px rgba(0, 0, 0, 0.38);
    backdrop-filter: blur(16px);
}

.provider-icon {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    margin-bottom: 22px;
    border-radius: 12px;
    color: #4285f4;
    background: #f6f7fb;
    font-size: 25px;
}

.provider-confirm-card h2 {
    margin-bottom: 9px;
    font-size: 30px;
    letter-spacing: -0.04em;
}

.provider-confirm-card > p:not(.eyebrow):not(.provider-legal) {
    margin-bottom: 22px;
    color: var(--landing-muted);
    font-size: 13px;
    line-height: 1.5;
}

.provider-permissions {
    display: grid;
    gap: 8px;
    margin-bottom: 22px;
}

.provider-permissions > span {
    display: grid;
    grid-template-columns: 30px 1fr;
    gap: 1px 10px;
    align-items: center;
    min-height: 58px;
    padding: 10px 12px;
    border: 1px solid var(--landing-line);
    border-radius: 8px;
    background: var(--landing-surface);
}

.provider-permissions i {
    grid-row: 1 / 3;
    color: #b65cff;
    font-size: 17px;
}

.provider-permissions b {
    font-size: 11px;
}

.provider-permissions small {
    color: var(--landing-subtle);
    font-size: 9px;
}

.provider-confirm-form {
    display: grid;
    gap: 10px;
}

.provider-confirm-form .button {
    width: 100%;
    min-height: 50px;
}

.provider-confirm-form .button-outline {
    min-height: 44px;
    font-size: 12px;
}

.provider-legal {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: 18px 0 0;
    color: var(--landing-subtle);
    font-size: 9px;
    line-height: 1.45;
}

.provider-legal i {
    margin-top: 1px;
}

@media (max-width: 980px) {
    .provider-page {
        grid-template-columns: 1fr;
        gap: 42px;
        padding-block: 44px;
    }

    .provider-context {
        display: grid;
        justify-items: center;
        text-align: center;
    }

    .provider-context > p:not(.pill) {
        max-width: 680px;
    }

    .provider-output-card {
        width: min(100%, 680px);
        text-align: left;
    }

    .provider-confirm-card {
        width: min(100%, 500px);
        margin-inline: auto;
    }
}

@media (max-width: 600px) {
    .provider-page {
        width: calc(100% - 28px);
        padding-block: 34px;
    }

    .provider-context h1 {
        font-size: clamp(38px, 11vw, 50px);
    }

    .provider-output-stage {
        min-height: 220px;
        padding: 18px 10px;
    }

    .provider-flow {
        grid-template-columns: repeat(3, auto);
        gap: 7px;
        padding: 10px;
    }

    .provider-flow span {
        min-width: 78px;
        min-height: 66px;
        padding: 7px;
    }

    .provider-flow span:last-child,
    .provider-flow > b:nth-of-type(2) {
        display: none;
    }

    .provider-confirm-card {
        padding: 26px 20px;
    }
}