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

* {
    margin: 0;
    padding: 0;
}

:root {
    --color-bg: #070A0C;
    --color-bg-raised: #0B1014;
    --color-surface: #11171C;
    --color-surface-raised: #171E24;
    --color-surface-hot: #1D272E;
    --color-text: #F4F7F6;
    --color-text-soft: #CFD7D4;
    --color-muted: #9BA8A6;
    --color-faint: #697672;
    --color-border: #263139;
    --color-border-strong: #3E535E;
    --color-accent: #34D399;
    --color-accent-strong: #59E6AD;
    --color-accent-dark: #0A5B3D;
    --color-accent-soft: #12382A;
    --color-blue: #4FA8FF;
    --color-cyan: #22D3EE;
    --color-amber: #F59E0B;
    --color-red: #EF4444;
    --color-purple: #8B5CF6;
    --color-white: #FFFFFF;
    --color-black: #050806;
    --service-openai: #34D399;
    --service-codex: #34D399;
    --service-claude: #D99A4E;
    --service-gemini: #4FA8FF;
    --service-grok: #C8D0D9;
    --service-perplexity: #18C7B6;
    --brand-codex: #10B981;
    --brand-openai: #0F8F7A;
    --brand-claude: #F59E0B;
    --brand-gemini: #3B82F6;
    --brand-grok: #64748B;
    --brand-perplexity: #22B8CF;
    --brand-cursor: #00BFA5;
    --brand-copilot: #2DA44E;
    --brand-warp: #01A4FF;
    --brand-amp: #FF6B35;
    --brand-kilo: #F27027;
    --brand-augment: #6366F1;
    --brand-kimi: #FE603C;
    --brand-openrouter: #6467F2;
    --brand-deepseek: #527DF0;
    --brand-jetbrains: #FF3399;
    --rank-challenger: #EF4444;
    --rank-master: #8B5CF6;
    --rank-diamond: #06B6D4;
    --rank-platinum: #94A3B8;
    --rank-gold: #F59E0B;
    --rank-silver: #CBD5E1;
    --rank-bronze: #B45309;
    --rank-unranked: #71717A;
    --glass-soft: rgba(17,23,28,.72);
    --glass-strong: rgba(17,23,28,.90);
    --line-soft: rgba(255,255,255,.06);
    --line-bright: rgba(255,255,255,.12);
    --wash-accent: rgba(52,211,153,.14);
    --wash-blue: rgba(79,168,255,.12);
    --wash-amber: rgba(245,158,11,.12);
    --wash-red: rgba(239,68,68,.12);
    --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI Variable", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
    --type-display: 76px;
    --type-display-mobile: 44px;
    --type-h2: 52px;
    --type-h2-mobile: 36px;
    --type-h3: 24px;
    --type-body-lg: 20px;
    --type-body: 16px;
    --type-small: 12px;
    --type-micro: 10px;
    --type-metric: 32px;
    --type-metric-lg: 48px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-14: 56px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;
    --space-28: 112px;
    --space-32: 128px;
    --space-40: 160px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-stage: 32px;
    --radius-pill: 1000px;
    --container-max: 1248px;
    --copy-max: 640px;
    --nav-height: 64px;
    --control-height: 48px;
    --perspective: 1200px;
    --motion-fast: 160ms;
    --motion-base: 320ms;
    --motion-slow: 720ms;
    --motion-cinema: 1200ms;
    --motion-loop: 8000ms;
    --motion-stagger: 80ms;
    --ease-out: cubic-bezier(.2,.8,.2,1);
    --ease-spring: cubic-bezier(.16,1,.3,1);
    --ease-linear: linear;
    --shadow-stage: 0 48px 128px rgba(0,0,0,.62), 0 0 0 1px rgba(255,255,255,.08) inset, 0 1px 0 rgba(255,255,255,.10) inset;
    --shadow-panel: 0 24px 72px rgba(0,0,0,.42), 0 0 0 1px rgba(255,255,255,.06) inset, 0 1px 0 rgba(255,255,255,.08) inset;
    --shadow-soft: 0 12px 40px rgba(0,0,0,.30), 0 1px 0 rgba(255,255,255,.06) inset;
    --shadow-accent: 0 20px 64px rgba(52,211,153,.18), 0 1px 0 rgba(255,255,255,.18) inset;
}

html {
    color-scheme: dark;
    scroll-behavior: smooth;
    background: var(--color-bg);
}

body {
    min-width: 320px;
    min-height: 100vh;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 14% 4%, var(--wash-accent), transparent 30%),
        radial-gradient(circle at 88% 18%, var(--wash-blue), transparent 34%),
        linear-gradient(var(--color-bg), var(--color-bg-raised) 52%, var(--color-bg));
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: var(--type-body);
    font-weight: 460;
    line-height: 1.6;
    letter-spacing: .1px;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -4;
    background-image:
        linear-gradient(var(--line-soft) 1px, transparent 1px),
        linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
    background-size: var(--space-16) var(--space-16);
    mask-image: linear-gradient(to bottom, var(--color-black), transparent 82%);
    pointer-events: none;
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1000;
    opacity: .08;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
    pointer-events: none;
}

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

button,
select {
    color: inherit;
    font: inherit;
}

button {
    border: 0;
}

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

::selection {
    background: var(--color-accent);
    color: var(--color-black);
}

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

.clipboard-fallback {
    position: fixed;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.skip-link {
    position: fixed;
    top: var(--space-3);
    left: var(--space-3);
    z-index: 2000;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--color-accent);
    color: var(--color-black);
    font-weight: 700;
    transform: translateY(calc(-100% - var(--space-6)));
    transition: transform var(--motion-fast) var(--ease-out);
}

.skip-link:focus {
    transform: translateY(0);
}

.container {
    width: min(calc(100% - var(--space-12)), var(--container-max));
    margin-inline: auto;
}

.metric {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums slashed-zero;
}

.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1200;
    width: 100%;
    height: var(--space-1);
    transform-origin: left center;
    pointer-events: none;
}

.scroll-progress span {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--color-accent);
    box-shadow: var(--shadow-accent);
    transform: scaleX(var(--scroll-progress, 0));
    transform-origin: left center;
}

.ambient-field {
    position: fixed;
    inset: 0;
    z-index: -3;
    overflow: hidden;
    pointer-events: none;
}

.ambient-orbit {
    position: absolute;
    width: min(72vw, 960px);
    aspect-ratio: 1;
    border: 1px solid var(--line-soft);
    border-radius: 50%;
    opacity: .36;
    animation: orbitDrift var(--motion-loop) var(--ease-linear) infinite;
}

.orbit-one {
    top: calc(var(--space-32) * -1);
    right: calc(var(--space-40) * -1);
}

.orbit-two {
    bottom: calc(var(--space-40) * -1);
    left: calc(var(--space-32) * -1);
    animation-direction: reverse;
    animation-duration: calc(var(--motion-loop) * 1.5);
}

.ambient-scan {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 34%;
    width: var(--space-32);
    background: linear-gradient(90deg, transparent, var(--wash-accent), transparent);
    opacity: .36;
    filter: blur(var(--space-6));
    transform: skewX(-16deg) translateX(-60vw);
    animation: ambientScan calc(var(--motion-loop) * 1.2) var(--ease-out) infinite;
}

.site-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid var(--line-soft);
    background: color-mix(in srgb, var(--color-bg) 82%, transparent);
    backdrop-filter: blur(var(--space-6)) saturate(140%);
    -webkit-backdrop-filter: blur(var(--space-6)) saturate(140%);
}

.nav-inner {
    min-height: var(--nav-height);
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--space-8);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    font-weight: 700;
    letter-spacing: .2px;
}

.brand img {
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-soft);
}

.nav-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-8);
    color: var(--color-muted);
    font-size: var(--type-small);
    font-weight: 600;
}

.nav-links a,
.footer-links a {
    transition: opacity var(--motion-fast) var(--ease-out);
}

.nav-links a:hover,
.footer-links a:hover {
    color: var(--color-text);
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.nav-store-group {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.locale-control {
    position: relative;
}

.locale-control::after {
    content: "⌄";
    position: absolute;
    top: 50%;
    right: var(--space-3);
    color: var(--color-muted);
    transform: translateY(-54%);
    pointer-events: none;
}

.locale-control select {
    height: calc(var(--control-height) - var(--space-3));
    min-width: var(--space-32);
    appearance: none;
    padding: 0 var(--space-8) 0 var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text-soft);
    font-size: var(--type-small);
    cursor: pointer;
    transition: filter var(--motion-fast) var(--ease-out);
}

.locale-control select:hover {
    border-color: var(--color-border-strong);
    filter: brightness(1.08);
}

.nav-store {
    min-height: calc(var(--control-height) - var(--space-3));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--space-4);
    border-radius: var(--radius-md);
    background: var(--color-accent);
    color: var(--color-black);
    font-size: var(--type-small);
    font-weight: 720;
    box-shadow: var(--shadow-accent);
    transition: transform var(--motion-fast) var(--ease-out), filter var(--motion-fast) var(--ease-out);
}

.nav-store {
    gap: var(--space-2);
}

.nav-apple {
    font-size: var(--type-body);
    line-height: 1;
}

.nav-store-windows {
    border: 1px solid var(--color-border-strong);
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--shadow-soft);
}

.nav-store:hover {
    transform: translateY(calc(var(--space-1) * -1));
    filter: brightness(1.08);
}

.nav-store:active,
.store-button:active,
.text-button:active,
#copy-badge:active {
    transform: scale(.98);
}

.nav-links a:focus-visible,
.nav-store:focus-visible,
.store-button:focus-visible,
.text-button:focus-visible,
.locale-control select:focus-visible,
#copy-badge:focus-visible,
.hourly-range-tabs button:focus-visible,
.badge-preview a:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: var(--space-1);
}

.hero {
    position: relative;
    padding: var(--space-28) 0 var(--space-24);
}

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
    gap: var(--space-16);
    align-items: center;
}

.hero-copy-column {
    position: relative;
    z-index: 2;
    max-width: var(--copy-max);
}

.signal-label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-accent);
    font-size: var(--type-small);
    font-weight: 680;
    letter-spacing: .2px;
}

.signal-label::before {
    content: "";
    width: var(--space-8);
    height: 1px;
    background: var(--color-accent);
    box-shadow: var(--shadow-accent);
}

h1 {
    display: grid;
    gap: var(--space-2);
    margin-top: var(--space-5);
    font-size: clamp(var(--type-display-mobile), 6.4vw, var(--type-display));
    font-weight: 720;
    line-height: .96;
    letter-spacing: 0;
    text-wrap: balance;
}

.accent-line {
    color: var(--color-accent);
    text-shadow: 0 var(--space-4) var(--space-16) var(--wash-accent);
}

.hero-copy {
    max-width: var(--copy-max);
    margin-top: var(--space-6);
    color: var(--color-muted);
    font-size: var(--type-body-lg);
    line-height: 1.6;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-8);
}

.store-pair {
    display: flex;
    gap: var(--space-3);
}

.store-button,
.text-button,
#copy-badge {
    min-height: var(--control-height);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    font-weight: 700;
    transition: transform var(--motion-fast) var(--ease-out), filter var(--motion-fast) var(--ease-out);
}

.store-button {
    gap: var(--space-3);
    padding: var(--space-2) var(--space-5);
    background: var(--color-white);
    color: var(--color-black);
    box-shadow: var(--shadow-panel);
}

.store-pair .store-button {
    min-width: 176px;
    padding-inline: var(--space-4);
}

.store-button-microsoft {
    border: 1px solid var(--color-border-strong);
    background: var(--color-surface-hot);
    color: var(--color-text);
}

.windows-mark {
    width: var(--space-5);
    height: var(--space-5);
    display: grid;
    flex: 0 0 auto;
    grid-template-columns: repeat(2, 1fr);
    gap: calc(var(--space-1) / 2);
}

.windows-mark i {
    display: block;
    border-radius: 1px;
}

.windows-mark i:nth-child(1) { background: var(--color-red); }
.windows-mark i:nth-child(2) { background: var(--color-accent); }
.windows-mark i:nth-child(3) { background: var(--color-blue); }
.windows-mark i:nth-child(4) { background: var(--color-amber); }

.windows-mark-mini {
    width: var(--space-3);
    height: var(--space-3);
    gap: 1px;
}

.store-button:hover {
    transform: translateY(calc(var(--space-1) * -1));
    filter: brightness(1.04);
}

.apple-mark {
    font-size: var(--type-h3);
    line-height: 1;
}

.store-copy {
    display: grid;
    line-height: 1.1;
}

.store-copy small {
    opacity: .62;
    font-size: 10px;
    font-weight: 620;
}

.store-copy strong {
    font-size: var(--type-body);
}

.text-button {
    min-width: var(--space-40);
    padding: 0 var(--space-5);
    border: 1px solid var(--color-border);
    background: color-mix(in srgb, var(--color-surface) 72%, transparent);
    color: var(--color-text);
    font-size: var(--type-small);
}

.text-button:hover {
    border-color: var(--color-border-strong);
    transform: translateY(calc(var(--space-1) * -1));
    filter: brightness(1.12);
}

.hero-facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    margin-top: var(--space-10);
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-border);
    box-shadow: var(--shadow-soft);
}

.hero-facts div {
    min-width: 0;
    padding: var(--space-4);
    background: var(--glass-soft);
}

.hero-facts dt {
    color: var(--color-text);
    font-size: var(--type-body-lg);
    font-weight: 700;
}

.hero-facts dd {
    margin-top: var(--space-1);
    color: var(--color-muted);
    font-size: 10px;
    line-height: 1.3;
}

.hero-stage-wrap {
    position: relative;
    min-width: 0;
    perspective: var(--perspective);
}

.stage-halo {
    position: absolute;
    inset: var(--space-12);
    border-radius: 50%;
    background: var(--wash-accent);
    opacity: .8;
    filter: blur(var(--space-32));
    transform: scale(.86);
    animation: haloBreathe calc(var(--motion-loop) * .8) var(--ease-out) infinite;
}

.product-stage {
    --tilt-x: 0deg;
    --tilt-y: 0deg;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line-bright);
    border-radius: var(--radius-stage);
    background: var(--color-surface);
    box-shadow: var(--shadow-stage);
    transform: perspective(var(--perspective)) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateZ(0);
    transform-style: preserve-3d;
    transition: transform var(--motion-base) var(--ease-out), filter var(--motion-base) var(--ease-out);
    will-change: transform;
}

.product-stage:hover {
    filter: brightness(1.04) saturate(1.06);
}

.stage-toolbar,
.console-toolbar {
    min-height: var(--space-14);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--line-soft);
    background: var(--glass-strong);
}

.stage-brand,
.console-title {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--type-small);
}

.stage-brand img,
.console-title img {
    border-radius: var(--radius-sm);
}

.live-label,
.console-sync {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-muted);
    font-size: 10px;
    font-weight: 620;
}

.live-label i,
.console-sync b {
    width: var(--space-2);
    height: var(--space-2);
    border-radius: 50%;
    background: var(--color-accent);
    box-shadow: 0 0 var(--space-5) var(--color-accent);
    animation: livePulse calc(var(--motion-loop) * .3) var(--ease-out) infinite;
}

.product-shot {
    position: relative;
    min-height: 500px;
    overflow: hidden;
    background: var(--color-bg);
}

.product-shot img {
    position: absolute;
    top: 0;
    left: 0;
    width: 190%;
    max-width: none;
    height: 100%;
    object-fit: cover;
    object-position: right center;
    transform: translateX(-46%);
    filter: saturate(1.04) contrast(1.03);
}

.stage-scan {
    position: absolute;
    inset: var(--space-14) 0 0;
    background: linear-gradient(110deg, transparent 36%, var(--line-bright) 48%, transparent 60%);
    opacity: .35;
    transform: translateX(-100%);
    animation: stageScan calc(var(--motion-loop) * .72) var(--ease-out) infinite;
    pointer-events: none;
}

.float-card {
    position: absolute;
    z-index: 4;
    min-width: 208px;
    padding: var(--space-4);
    border: 1px solid var(--line-bright);
    border-radius: var(--radius-lg);
    background: var(--glass-strong);
    backdrop-filter: blur(var(--space-6)) saturate(140%);
    -webkit-backdrop-filter: blur(var(--space-6)) saturate(140%);
    box-shadow: var(--shadow-panel);
    will-change: transform;
}

.float-quota {
    right: calc(var(--space-6) * -1);
    bottom: var(--space-8);
    animation: floatCard calc(var(--motion-loop) * .72) var(--ease-spring) infinite;
}

.float-rank {
    top: var(--space-20);
    left: calc(var(--space-6) * -1);
    animation: floatCard calc(var(--motion-loop) * .82) var(--ease-spring) calc(var(--motion-stagger) * 4) infinite reverse;
}

.float-card-top {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    align-items: baseline;
}

.float-card span,
.float-card small {
    color: var(--color-muted);
    font-size: 10px;
}

.float-card strong {
    display: block;
    margin-top: var(--space-1);
    color: var(--color-text);
}

.float-card strong b {
    color: var(--color-red);
    font-family: var(--font-mono);
    font-size: var(--type-h3);
}

.float-card-top strong {
    margin: 0;
    color: var(--color-accent);
    font-size: var(--type-h3);
}

.quota-track,
.service-track {
    height: var(--space-2);
    overflow: hidden;
    border-radius: var(--radius-pill);
    background: var(--line-soft);
}

.quota-track {
    margin: var(--space-3) 0 var(--space-2);
}

.quota-track i {
    display: block;
    width: 76%;
    height: 100%;
    border-radius: inherit;
    background: var(--color-accent);
    transform-origin: left center;
    animation: quotaBreath calc(var(--motion-loop) * .64) var(--ease-out) infinite;
}

.account-preview {
    min-height: 560px;
    overflow: clip;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.account-preview:hover {
    filter: brightness(1.03) saturate(1.03);
}

.preview-status {
    position: absolute;
    top: 0;
    right: 39%;
    z-index: 7;
    width: var(--space-10);
    height: var(--space-10);
    display: grid;
    place-items: center;
    border: 3px solid var(--color-accent);
    border-radius: 50%;
    background: var(--color-surface-raised);
    color: var(--color-text);
    font-size: var(--type-small);
    box-shadow: var(--shadow-accent);
    animation: livePulse calc(var(--motion-loop) * .3) var(--ease-out) infinite;
}

.preview-status::after {
    content: "";
    position: absolute;
    top: calc(100% + var(--space-1));
    width: 0;
    height: 0;
    border-right: var(--space-2) solid transparent;
    border-bottom: var(--space-2) solid var(--color-border-strong);
    border-left: var(--space-2) solid transparent;
}

.preview-window,
.account-detail-preview {
    border: 1px solid var(--color-border-strong);
    background: color-mix(in srgb, var(--color-surface) 96%, var(--color-black));
    box-shadow: var(--shadow-stage);
}

.preview-window {
    position: absolute;
    top: var(--space-10);
    right: 0;
    bottom: 0;
    width: 72%;
    overflow: visible;
    border-radius: var(--radius-lg);
}

.preview-titlebar {
    min-height: var(--space-14);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: 0 var(--space-4);
    border-bottom: 1px solid var(--line-soft);
    background: var(--color-surface-raised);
}

.preview-titlebar > span,
.preview-titlebar > small {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.preview-titlebar img {
    border-radius: var(--radius-sm);
}

.preview-titlebar strong {
    font-size: var(--type-small);
}

.preview-titlebar small {
    color: var(--color-muted);
    font-size: var(--type-micro);
}

.preview-titlebar small i,
.account-active i {
    width: var(--space-2);
    height: var(--space-2);
    border-radius: 50%;
    background: var(--color-accent);
    box-shadow: 0 0 var(--space-3) var(--color-accent);
}

.preview-navigation {
    min-height: var(--space-10);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-6);
    border-bottom: 1px solid var(--line-soft);
    color: var(--color-muted);
    font-size: var(--type-micro);
}

.preview-navigation strong {
    position: relative;
    color: var(--color-text);
}

.preview-navigation strong::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: calc(var(--space-3) * -1);
    left: 0;
    height: 2px;
    border-radius: var(--radius-pill);
    background: var(--color-blue);
    box-shadow: 0 0 var(--space-3) color-mix(in srgb, var(--color-blue) 42%, transparent);
}

.preview-quota-list {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-3);
}

.preview-quota {
    min-width: 0;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-md);
    background: var(--glass-soft);
}

.preview-claude {
    background: linear-gradient(90deg, var(--wash-amber), var(--glass-soft) 68%);
}

.preview-codex {
    background: linear-gradient(90deg, var(--wash-accent), var(--glass-soft) 68%);
}

.preview-quota-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-2);
}

.preview-quota-head > div {
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
}

.preview-quota-head strong {
    font-size: var(--type-small);
}

.preview-quota-head small {
    overflow: hidden;
    color: var(--color-muted);
    font-size: var(--type-micro);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preview-quota-head > b {
    color: var(--color-accent);
    font-size: var(--type-body);
}

.preview-claude .preview-quota-head > b {
    color: var(--color-amber);
}

.preview-provider-icon {
    width: var(--space-6);
    height: var(--space-6);
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: calc(var(--radius-sm) - 2px);
}

.preview-provider-icon img {
    width: var(--space-4);
    height: var(--space-4);
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.codex-icon {
    background: color-mix(in srgb, var(--color-blue) 54%, var(--color-surface));
}

.claude-icon {
    background: color-mix(in srgb, var(--color-amber) 72%, var(--color-surface));
}

.preview-quota > i,
.detail-quota > i {
    display: block;
    overflow: hidden;
    height: var(--space-1);
    border-radius: var(--radius-pill);
    background: var(--line-soft);
}

.preview-quota > i {
    margin: var(--space-2) 0 var(--space-1);
}

.preview-quota > i b,
.detail-quota > i b {
    display: block;
    width: var(--preview-value);
    height: 100%;
    border-radius: inherit;
    background: var(--color-accent);
    transform-origin: left center;
    animation: quotaBreath calc(var(--motion-loop) * .64) var(--ease-out) infinite;
}

.preview-claude > i b {
    background: var(--color-amber);
}

.preview-quota > small {
    display: block;
    color: var(--color-faint);
    font-size: 8px;
    text-align: right;
}

.preview-bottom-grid {
    display: grid;
    grid-template-columns: 1fr 1fr .88fr;
    gap: var(--space-2);
    padding: 0 var(--space-3) var(--space-3);
}

.preview-module {
    min-width: 0;
    min-height: 132px;
    display: grid;
    align-content: space-between;
    padding: var(--space-3);
    overflow: hidden;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-md);
    background: var(--glass-soft);
}

.preview-module > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.preview-module strong,
.preview-module > b {
    font-size: var(--type-micro);
}

.preview-module small {
    color: var(--color-muted);
    font-size: 8px;
}

.preview-bars,
.detail-bars {
    display: flex;
    align-items: end;
    gap: var(--space-1);
}

.preview-bars {
    min-height: var(--space-16);
    border-bottom: 1px solid var(--line-soft);
}

.preview-bars i,
.detail-bars i {
    display: block;
    flex: 1;
    height: var(--bar);
    border-radius: 2px 2px 0 0;
    background: var(--color-accent);
    transform-origin: bottom center;
    animation: chartPulse calc(var(--motion-loop) * .55) var(--ease-out) infinite;
}

.preview-bars .amber {
    background: var(--color-amber);
}

.preview-rank {
    grid-template-columns: auto 1fr;
    align-content: center;
    gap: var(--space-2);
    background: linear-gradient(145deg, var(--wash-red), var(--glass-soft));
}

.preview-rank > div {
    grid-column: 1 / -1;
}

.rank-medal {
    width: var(--space-10);
    height: var(--space-10);
    display: grid;
    place-items: center;
    border: 1px solid var(--color-amber);
    border-radius: 50%;
    background: var(--wash-amber);
    color: var(--color-amber);
    font-family: var(--font-mono);
    font-size: var(--type-small);
    box-shadow: 0 0 var(--space-5) var(--wash-amber);
}

.preview-rank > b,
.preview-rank > small {
    align-self: center;
}

.preview-rank > small {
    grid-column: 2;
    margin-top: calc(var(--space-5) * -1);
}

.preview-footer {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    min-height: var(--space-8);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 0 var(--space-3);
    border-top: 1px solid var(--line-soft);
    color: var(--color-muted);
    font-size: 8px;
}

.account-detail-preview {
    position: absolute;
    top: var(--space-24);
    bottom: var(--space-8);
    left: 0;
    z-index: 5;
    width: 31%;
    padding: var(--space-4);
    overflow: hidden;
    border-radius: var(--radius-lg);
}

.account-detail-preview::after {
    content: "";
    position: absolute;
    top: 46%;
    right: calc(var(--space-3) * -1);
    width: var(--space-6);
    height: var(--space-6);
    border-top: 1px solid var(--color-border-strong);
    border-right: 1px solid var(--color-border-strong);
    background: var(--color-surface);
    transform: rotate(45deg);
}

.account-detail-head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.account-detail-head > div {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
}

.account-detail-head strong {
    font-size: var(--type-small);
}

.account-detail-head small {
    color: var(--color-accent);
    font-size: var(--type-micro);
}

.account-active {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-3);
    color: var(--color-accent);
    font-size: var(--type-micro);
}

.detail-quota-list {
    display: grid;
    gap: var(--space-4);
    margin-top: var(--space-5);
}

.detail-quota > div,
.detail-account-meta div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.detail-quota > div {
    font-size: var(--type-micro);
}

.detail-quota > div strong {
    color: var(--color-accent);
}

.detail-quota > i {
    margin-top: var(--space-2);
}

.detail-quota > small {
    display: block;
    margin-top: var(--space-1);
    color: var(--color-muted);
    font-size: 8px;
    text-align: right;
}

.detail-account-meta {
    display: grid;
    gap: var(--space-2);
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--line-soft);
    color: var(--color-muted);
    font-size: var(--type-micro);
}

.detail-account-meta strong {
    color: var(--color-text-soft);
}

.detail-account-meta div:last-child strong {
    color: var(--color-accent);
}

.detail-bars {
    min-height: var(--space-16);
    margin-top: var(--space-4);
}

.final-store-actions {
    position: relative;
    z-index: 2;
    display: grid;
    gap: var(--space-2);
}

.provider-conveyor {
    position: relative;
    overflow: hidden;
    border-block: 1px solid var(--line-soft);
    background:
        linear-gradient(90deg, var(--wash-accent), transparent 22%, transparent 78%, var(--wash-blue)),
        var(--glass-soft);
}

.conveyor-track {
    display: flex;
    width: max-content;
    animation: conveyor calc(var(--motion-loop) * 4) var(--ease-linear) infinite;
    will-change: transform;
}

.provider-set {
    --provider-tone: var(--color-accent);
    display: flex;
    flex: none;
    align-items: center;
}

.provider-set span {
    position: relative;
    min-width: var(--space-40);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-6);
    border-right: 1px solid var(--line-soft);
    background: linear-gradient(180deg, color-mix(in srgb, var(--provider-tone) 10%, transparent), transparent 72%);
    color: var(--color-text-soft);
    font-size: var(--type-small);
    font-weight: 620;
    white-space: nowrap;
    transition: transform var(--motion-fast) var(--ease-out), filter var(--motion-fast) var(--ease-out);
}

.provider-set img {
    display: none;
}

.provider-set span::before {
    content: "";
    width: var(--space-8);
    height: var(--space-8);
    flex: 0 0 auto;
    background: var(--provider-tone);
    filter: drop-shadow(0 0 var(--space-3) color-mix(in srgb, var(--provider-tone) 62%, transparent));
    -webkit-mask-image: var(--provider-logo);
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: var(--space-6) var(--space-6);
    mask-image: var(--provider-logo);
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: var(--space-6) var(--space-6);
}

.provider-set span:hover {
    filter: brightness(1.18);
    transform: translateY(calc(var(--space-1) * -1));
}

.provider-conveyor:hover .conveyor-track {
    animation-play-state: paused;
}

.provider-codex { --provider-tone: var(--brand-codex); --provider-logo: url("providers/codex.svg"); }
.provider-claude { --provider-tone: var(--brand-claude); --provider-logo: url("providers/claude.svg"); }
.provider-gemini { --provider-tone: var(--brand-gemini); --provider-logo: url("providers/gemini.svg"); }
.provider-openai { --provider-tone: var(--brand-openai); --provider-logo: url("providers/openai.svg"); }
.provider-perplexity { --provider-tone: var(--brand-perplexity); --provider-logo: url("providers/perplexity.svg"); }
.provider-grok { --provider-tone: var(--brand-grok); --provider-logo: url("providers/grok.svg"); }
.provider-cursor { --provider-tone: var(--brand-cursor); --provider-logo: url("providers/cursor.svg"); }
.provider-copilot { --provider-tone: var(--brand-copilot); --provider-logo: url("providers/copilot.svg"); }
.provider-openrouter { --provider-tone: var(--brand-openrouter); --provider-logo: url("providers/openrouter.svg"); }
.provider-deepseek { --provider-tone: var(--brand-deepseek); --provider-logo: url("providers/deepseek.svg"); }
.provider-kimi { --provider-tone: var(--brand-kimi); --provider-logo: url("providers/kimi.svg"); }
.provider-warp { --provider-tone: var(--brand-warp); --provider-logo: url("providers/warp.svg"); }
.provider-amp { --provider-tone: var(--brand-amp); --provider-logo: url("providers/amp.svg"); }
.provider-kilo { --provider-tone: var(--brand-kilo); --provider-logo: url("providers/kilo.svg"); }
.provider-augment { --provider-tone: var(--brand-augment); --provider-logo: url("providers/augment.svg"); }
.provider-jetbrains { --provider-tone: var(--brand-jetbrains); --provider-logo: url("providers/jetbrains.svg"); }

.section {
    position: relative;
    padding: var(--space-32) 0;
}

.section-intro {
    max-width: 820px;
    margin-bottom: var(--space-14);
}

.section-intro-split {
    max-width: none;
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: var(--space-16);
    align-items: end;
}

.section-intro h2,
.privacy-copy h2,
.badge-copy h2,
.final-panel h2 {
    margin-top: var(--space-4);
    font-size: clamp(var(--type-h2-mobile), 5vw, var(--type-h2));
    font-weight: 680;
    line-height: 1.02;
    letter-spacing: 0;
    text-wrap: balance;
}

.section-intro > p:not(.signal-label),
.section-intro-split > p,
.privacy-copy > p:not(.signal-label),
.badge-copy > p:not(.signal-label),
.final-panel > div > p:not(.signal-label) {
    margin-top: var(--space-5);
    color: var(--color-muted);
    font-size: var(--type-body-lg);
}

.section-intro-split > p {
    margin-top: 0;
}

.usage-section {
    background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--color-bg-raised) 72%, transparent) 20%, color-mix(in srgb, var(--color-bg-raised) 72%, transparent) 80%, transparent);
}

.usage-console {
    overflow: hidden;
    border: 1px solid var(--line-bright);
    border-radius: var(--radius-stage);
    background: var(--color-surface);
    box-shadow: var(--shadow-stage);
}

.console-toolbar {
    padding-inline: var(--space-6);
}

.console-title strong {
    font-size: var(--type-body);
}

.console-pager {
    display: flex;
    gap: var(--space-1);
}

.console-pager i {
    width: var(--space-2);
    height: var(--space-1);
    border-radius: var(--radius-pill);
    background: var(--color-faint);
}

.console-pager i.active {
    width: var(--space-5);
    background: var(--color-blue);
}

.service-stack {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
    padding: var(--space-6);
}

.service-card {
    --service: var(--color-accent);
    position: relative;
    overflow: hidden;
    padding: var(--space-5);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--color-surface-raised) 84%, var(--service));
    box-shadow: var(--shadow-soft);
    transition: transform var(--motion-base) var(--ease-spring), filter var(--motion-base) var(--ease-out);
}

.service-card::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--space-1);
    background: var(--service);
}

.service-card:hover {
    border-color: color-mix(in srgb, var(--service) 38%, var(--color-border));
    filter: brightness(1.08);
    transform: translateY(calc(var(--space-1) * -1));
}

.codex-card { --service: var(--service-codex); }
.claude-card { --service: var(--service-claude); }
.gemini-card { --service: var(--service-gemini); }

.service-heading,
.service-meta,
.module-head,
.chart-toolbar,
.ranking-toolbar,
.profile-header,
.code-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.service-identity {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: var(--space-2);
}

.service-identity img {
    width: var(--space-5);
    height: var(--space-5);
    object-fit: contain;
}

.service-identity strong {
    font-size: var(--type-body);
}

.service-identity span {
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--service) 16%, transparent);
    color: var(--service);
    font-size: 10px;
    font-weight: 700;
}

.service-percent {
    color: var(--service);
    font-size: var(--type-h3);
}

.service-track {
    margin-top: var(--space-5);
}

.service-track i {
    display: block;
    width: var(--value);
    height: 100%;
    border-radius: inherit;
    background: var(--service);
    transform: scaleX(.04);
    transform-origin: left center;
    transition: transform var(--motion-cinema) var(--ease-spring);
}

.usage-console.is-visible .service-track i {
    transform: scaleX(1);
}

.service-meta {
    margin-top: var(--space-3);
    color: var(--color-faint);
    font-size: 10px;
}

.service-meta b {
    color: var(--color-muted);
    font-weight: 620;
}

.console-bottom-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr .72fr;
    gap: var(--space-4);
    padding: 0 var(--space-6) var(--space-6);
}

.console-module {
    min-height: 208px;
    padding: var(--space-5);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-lg);
    background: var(--color-bg-raised);
}

.module-head span,
.chart-toolbar span {
    color: var(--color-muted);
    font-size: var(--type-small);
}

.module-head strong,
.chart-toolbar strong {
    font-size: var(--type-body);
}

.mini-heatmap {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: var(--space-1);
    margin-top: var(--space-5);
}

.heat-cell {
    aspect-ratio: 1;
    border-radius: var(--space-1);
    background: var(--color-accent-soft);
    opacity: .42;
    animation: heatCell calc(var(--motion-loop) * .72) var(--ease-out) infinite;
    animation-delay: calc(var(--cell-index) * var(--motion-stagger));
}

.heat-cell.level-2 { opacity: .56; filter: brightness(1.08); }
.heat-cell.level-3 { opacity: .7; filter: brightness(1.22); }
.heat-cell.level-4 { opacity: .84; background: var(--color-accent); filter: saturate(.78); }
.heat-cell.level-5 { opacity: 1; background: var(--color-accent-strong); }

.trend-bars {
    display: flex;
    align-items: flex-end;
    gap: var(--space-2);
    height: var(--space-32);
    margin-top: var(--space-5);
}

.trend-bars i {
    flex: 1;
    height: var(--value);
    min-width: 0;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    background: linear-gradient(var(--color-accent-strong), var(--color-accent));
    transform: scaleY(.08);
    transform-origin: bottom center;
    transition: transform var(--motion-cinema) var(--ease-spring);
}

.trend-bars i:nth-child(3n) {
    background: linear-gradient(var(--color-amber), var(--service-claude));
}

.usage-console.is-visible .trend-bars i,
.history-chart-card.is-visible .month-column i {
    transform: scaleY(1);
}

.reset-module {
    display: grid;
    align-content: space-between;
}

.reset-orbit {
    position: relative;
    width: var(--space-28);
    height: var(--space-28);
    display: grid;
    place-items: center;
    margin: var(--space-4) auto 0;
    border: var(--space-2) solid var(--color-surface-raised);
    border-radius: 50%;
}

.reset-orbit::before {
    content: "";
    position: absolute;
    inset: calc(var(--space-2) * -1);
    border: var(--space-2) solid transparent;
    border-top-color: var(--color-accent);
    border-right-color: var(--color-accent);
    border-radius: 50%;
    transform: rotate(26deg);
    animation: orbitSpin calc(var(--motion-loop) * .9) var(--ease-linear) infinite;
}

.reset-orbit b {
    font-family: var(--font-mono);
    font-size: var(--type-body-lg);
}

.ranking-section {
    overflow: hidden;
    border-block: 1px solid var(--line-soft);
    background:
        radial-gradient(circle at 10% 72%, var(--wash-red), transparent 26%),
        radial-gradient(circle at 92% 18%, color-mix(in srgb, var(--color-cyan) 10%, transparent), transparent 30%),
        var(--color-bg-raised);
}

.ranking-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(320px, .7fr);
    gap: var(--space-5);
    align-items: stretch;
}

.ranking-board,
.profile-card,
.badge-lab,
.history-chart-card,
.privacy-proof,
.final-panel {
    border: 1px solid var(--line-bright);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    box-shadow: var(--shadow-panel);
}

.ranking-board {
    overflow: hidden;
}

.ranking-toolbar {
    min-height: var(--space-20);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--line-soft);
}

.ranking-toolbar > div {
    display: grid;
}

.ranking-toolbar span,
.profile-header span,
.profile-stats span {
    color: var(--color-faint);
    font-size: 10px;
}

.season-chip {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-bg-raised);
    font-family: var(--font-mono);
}

.rank-list {
    list-style: none;
}

.rank-row {
    --rank: var(--rank-unranked);
    display: grid;
    grid-template-columns: var(--space-12) var(--space-10) minmax(0, 1fr) auto var(--space-20);
    gap: var(--space-3);
    align-items: center;
    min-height: var(--space-20);
    padding: var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--line-soft);
    opacity: 0;
    transform: translateX(calc(var(--space-5) * -1));
    transition: transform var(--motion-slow) var(--ease-spring), opacity var(--motion-slow) var(--ease-out), filter var(--motion-base) var(--ease-out);
}

.rank-row:last-child {
    border-bottom: 0;
}

.ranking-board.is-visible .rank-row {
    opacity: 1;
    transform: translateX(0);
}

.ranking-board.is-visible .rank-row:nth-child(2) { transition-delay: var(--motion-stagger); }
.ranking-board.is-visible .rank-row:nth-child(3) { transition-delay: calc(var(--motion-stagger) * 2); }
.ranking-board.is-visible .rank-row:nth-child(4) { transition-delay: calc(var(--motion-stagger) * 3); }
.ranking-board.is-visible .rank-row:nth-child(5) { transition-delay: calc(var(--motion-stagger) * 4); }

.rank-row:hover {
    background: color-mix(in srgb, var(--rank) 8%, var(--color-surface-raised));
    filter: brightness(1.08);
}

.rank-challenger { --rank: var(--rank-challenger); }
.rank-master { --rank: var(--rank-master); }
.rank-diamond { --rank: var(--rank-diamond); }
.rank-platinum { --rank: var(--rank-platinum); }
.rank-gold { --rank: var(--rank-gold); }

.rank-position {
    color: var(--rank);
    font-size: var(--type-body);
    font-weight: 700;
}

.rank-avatar {
    width: var(--space-10);
    height: var(--space-10);
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--rank) 44%, var(--color-border));
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--rank) 12%, var(--color-surface-raised));
}

.rank-avatar img {
    width: 100%;
    height: 100%;
}

.avatar-code {
    color: var(--rank);
    font-family: var(--font-mono);
    font-size: var(--type-small);
    font-weight: 700;
}

.rank-person {
    min-width: 0;
    display: grid;
}

.rank-person strong,
.rank-person small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rank-person strong {
    font-size: var(--type-body);
}

.rank-person small {
    color: var(--color-faint);
    font-size: 10px;
}

.rank-tier {
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--rank) 14%, transparent);
    color: var(--rank);
    font-size: 10px;
    font-weight: 700;
}

.rank-tokens {
    justify-self: end;
    color: var(--color-text-soft);
    font-size: var(--type-small);
}

.profile-card {
    overflow: hidden;
    padding: var(--space-5);
}

.profile-cover {
    height: var(--space-24);
    display: flex;
    align-items: flex-end;
    gap: var(--space-2);
    overflow: hidden;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-lg);
    background:
        linear-gradient(120deg, var(--wash-red), transparent 44%),
        linear-gradient(300deg, color-mix(in srgb, var(--color-cyan) 14%, transparent), transparent 46%),
        var(--color-bg-raised);
    padding: var(--space-4);
}

.profile-cover span {
    flex: 1;
    height: 72%;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    background: linear-gradient(var(--color-red), color-mix(in srgb, var(--color-red) 22%, transparent));
    opacity: .6;
    animation: profileSignal calc(var(--motion-loop) * .62) var(--ease-spring) infinite;
}

.profile-cover span:nth-child(2) { height: 100%; animation-delay: calc(var(--motion-stagger) * 2); }
.profile-cover span:nth-child(3) { height: 54%; animation-delay: calc(var(--motion-stagger) * 4); }

.profile-header {
    justify-content: flex-start;
    margin-top: calc(var(--space-8) * -1);
    padding-inline: var(--space-3);
}

.profile-header img {
    flex: none;
    border: var(--space-1) solid var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
}

.profile-header > div {
    display: grid;
    margin-top: var(--space-8);
}

.profile-rank {
    margin-top: var(--space-8);
    margin-left: auto;
    color: var(--rank-challenger) !important;
    font-size: var(--type-h3) !important;
    font-weight: 700;
}

.profile-message {
    margin-top: var(--space-5);
    padding: var(--space-4);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-md);
    background: var(--color-bg-raised);
    color: var(--color-text-soft);
}

.profile-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
    margin-top: var(--space-3);
}

.profile-stats div {
    display: grid;
    gap: var(--space-1);
    padding: var(--space-4);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-md);
    background: var(--color-bg-raised);
}

.profile-stats strong {
    font-size: var(--type-small);
}

.rank-history {
    margin-top: var(--space-5);
}

.history-line {
    display: flex;
    align-items: flex-end;
    gap: var(--space-2);
    height: var(--space-16);
    margin-top: var(--space-4);
}

.history-line i {
    flex: 1;
    height: 30%;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    background: var(--rank-challenger);
    opacity: .28;
}

.history-line i:nth-child(2) { height: 38%; }
.history-line i:nth-child(3) { height: 46%; }
.history-line i:nth-child(4) { height: 62%; opacity: .4; }
.history-line i:nth-child(5) { height: 58%; opacity: .5; }
.history-line i:nth-child(6) { height: 74%; opacity: .62; }
.history-line i:nth-child(7) { height: 84%; opacity: .76; }
.history-line i:nth-child(8) { height: 100%; opacity: 1; }

.badge-section {
    overflow: hidden;
}

.badge-layout {
    display: grid;
    grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
    gap: var(--space-16);
    align-items: center;
}

.badge-copy > p:not(.signal-label) {
    max-width: var(--copy-max);
}

.badge-copy .text-button,
.privacy-copy .text-button {
    margin-top: var(--space-6);
}

.badge-lab {
    overflow: hidden;
}

.badge-preview {
    position: relative;
    min-height: 232px;
    display: grid;
    place-items: center;
    padding: var(--space-10);
    border-bottom: 1px solid var(--line-soft);
    background:
        linear-gradient(120deg, var(--wash-accent), transparent 42%),
        linear-gradient(300deg, var(--wash-blue), transparent 44%),
        var(--color-bg-raised);
}

.badge-preview::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--line-soft) 1px, transparent 1px),
        linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
    background-size: var(--space-8) var(--space-8);
    mask-image: radial-gradient(circle, var(--color-black), transparent 74%);
}

.badge-preview-label {
    position: absolute;
    top: var(--space-4);
    left: var(--space-4);
    color: var(--color-faint);
    font-size: 10px;
}

.badge-image-shell {
    position: relative;
    z-index: 1;
    min-width: 280px;
    min-height: var(--space-12);
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: var(--color-surface-raised);
    box-shadow: var(--shadow-panel);
}

.badge-image-shell::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 32%, var(--line-bright) 48%, transparent 64%);
    opacity: 0;
    transform: translateX(-100%);
}

.badge-image-shell.is-loaded::after {
    animation: badgeSheen calc(var(--motion-loop) * .7) var(--ease-out) infinite;
}

.badge-image-shell img {
    max-width: min(100%, 520px);
    min-height: var(--space-12);
    opacity: 0;
    transition: opacity var(--motion-base) var(--ease-out), filter var(--motion-base) var(--ease-out);
}

.badge-image-shell.is-loaded img {
    opacity: 1;
}

.badge-image-shell.is-loading {
    animation: loadingPulse calc(var(--motion-loop) * .25) var(--ease-out) infinite;
}

.badge-fallback {
    display: none;
    max-width: 320px;
    padding: var(--space-4);
    color: var(--color-muted);
    font-size: var(--type-small);
    text-align: center;
}

.badge-image-shell.is-error .badge-fallback {
    display: block;
}

.code-panel {
    background: var(--color-surface);
}

.code-head {
    min-height: var(--space-14);
    padding: var(--space-2) var(--space-4);
    border-bottom: 1px solid var(--line-soft);
    color: var(--color-muted);
    font-family: var(--font-mono);
    font-size: var(--type-small);
}

#copy-badge {
    min-height: calc(var(--control-height) - var(--space-3));
    padding: 0 var(--space-4);
    background: var(--color-accent);
    color: var(--color-black);
    cursor: pointer;
}

#copy-badge:hover {
    filter: brightness(1.08);
    transform: translateY(calc(var(--space-1) * -1));
}

#copy-badge:disabled {
    opacity: .48;
    cursor: wait;
    transform: none;
}

pre {
    overflow-x: auto;
    padding: var(--space-5);
    color: var(--color-text-soft);
    font-family: var(--font-mono);
    font-size: var(--type-small);
    line-height: 1.7;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.copy-status {
    min-height: var(--space-6);
    padding: 0 var(--space-5) var(--space-3);
    color: var(--color-accent);
    font-size: var(--type-small);
}

.copy-status.is-error {
    color: var(--color-red);
}

.history-section {
    border-block: 1px solid var(--line-soft);
    background: var(--color-bg-raised);
}

.hourly-usage-card {
    margin-bottom: var(--space-5);
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background:
        linear-gradient(180deg, var(--line-soft), transparent 42%),
        var(--color-surface);
    box-shadow: var(--shadow-panel);
}

.hourly-chart-toolbar {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: var(--space-5);
}

.hourly-chart-toolbar > div:first-child {
    display: grid;
    gap: var(--space-1);
}

.hourly-chart-toolbar strong {
    color: var(--color-text);
    font-size: var(--type-body);
}

.hourly-chart-toolbar span {
    color: var(--color-muted);
    font-size: var(--type-small);
}

.range-copy {
    display: none;
    color: var(--color-muted);
    font-weight: 560;
}

.hourly-usage-card[data-range="1d"] .range-copy-1d,
.hourly-usage-card[data-range="7d"] .range-copy-7d,
.hourly-usage-card[data-range="30d"] .range-copy-30d {
    display: inline;
}

.hourly-range-tabs {
    display: inline-flex;
    flex: 0 0 auto;
    gap: 1px;
    padding: var(--space-1);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background: var(--color-bg-raised);
}

.hourly-range-tabs button {
    min-width: var(--space-12);
    min-height: calc(var(--space-8) - var(--space-1));
    padding: 0 var(--space-3);
    border: 0;
    border-radius: calc(var(--radius-sm) - var(--space-1));
    background: transparent;
    color: var(--color-muted);
    font-family: var(--font-mono);
    font-size: var(--type-micro);
    cursor: pointer;
    transition: transform var(--motion-fast) var(--ease-out), filter var(--motion-fast) var(--ease-out);
}

.hourly-range-tabs button:hover {
    filter: brightness(1.18);
}

.hourly-range-tabs button:active {
    transform: scale(.96);
}

.hourly-range-tabs button.is-active {
    background: var(--color-surface-hot);
    color: var(--color-text);
    box-shadow: 0 0 0 1px var(--line-bright) inset;
}

.hourly-usage-chart {
    width: 100%;
    height: auto;
    display: block;
    margin-top: var(--space-4);
    overflow: visible;
}

.hourly-grid line {
    stroke: var(--line-soft);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.hourly-grid text {
    fill: var(--color-faint);
    font-family: var(--font-mono);
    font-size: var(--type-micro);
}

.hourly-series {
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--motion-base) var(--ease-out);
}

.hourly-series.is-visible {
    opacity: 1;
    visibility: visible;
}

.hourly-series path {
    fill: none;
    stroke: var(--color-blue);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.hourly-series-1d path {
    stroke: var(--color-accent-strong);
    stroke-width: 2.5;
    filter: drop-shadow(0 0 var(--space-2) var(--wash-accent));
}

.hourly-series-7d path:nth-child(1) { stroke: var(--color-blue); opacity: .92; }
.hourly-series-7d path:nth-child(2) { stroke: var(--color-cyan); opacity: .72; }
.hourly-series-7d path:nth-child(3) { stroke: color-mix(in srgb, var(--color-blue) 72%, var(--color-accent)); opacity: .64; }
.hourly-series-7d path:nth-child(4) { stroke: color-mix(in srgb, var(--color-blue) 58%, var(--color-cyan)); opacity: .52; }
.hourly-series-7d path:nth-child(5) { stroke: color-mix(in srgb, var(--color-blue) 76%, var(--color-white)); opacity: .48; }
.hourly-series-7d path:nth-child(6) { stroke: var(--color-accent); opacity: .42; }
.hourly-series-7d path:nth-child(7) { stroke: var(--color-blue); opacity: .38; }

.hourly-series-30d path:nth-child(1) { stroke: var(--color-accent-strong); stroke-width: 2; opacity: .88; }
.hourly-series-30d path:nth-child(2) { stroke: var(--color-blue); opacity: .66; }
.hourly-series-30d path:nth-child(3) { stroke: var(--color-cyan); opacity: .52; }

.history-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.28fr) minmax(320px, .72fr);
    gap: var(--space-5);
}

.history-chart-card {
    min-height: 440px;
    padding: var(--space-6);
}

.chart-toolbar strong {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--type-metric);
}

.range-tabs {
    display: flex;
    gap: var(--space-1);
    padding: var(--space-1);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-raised);
}

.range-tabs span {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 10px;
}

.range-tabs span.active {
    background: var(--color-surface-raised);
    color: var(--color-text);
}

.six-month-chart {
    display: flex;
    align-items: flex-end;
    gap: var(--space-4);
    height: 300px;
    margin-top: var(--space-8);
    padding: var(--space-6) var(--space-4) 0;
    border-bottom: 1px solid var(--color-border);
    background-image: linear-gradient(to bottom, var(--line-soft) 1px, transparent 1px);
    background-size: 100% var(--space-14);
}

.month-column {
    flex: 1;
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: var(--space-3);
    text-align: center;
}

.month-column i {
    width: 100%;
    height: var(--value);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    background: linear-gradient(var(--color-accent-strong), var(--color-accent-dark));
    opacity: .56;
    transform: scaleY(.04);
    transform-origin: bottom center;
    transition: transform var(--motion-cinema) var(--ease-spring), opacity var(--motion-base) var(--ease-out), filter var(--motion-base) var(--ease-out);
}

.month-column.current i {
    opacity: 1;
    box-shadow: var(--shadow-accent);
}

.month-column:hover i {
    opacity: 1;
    filter: brightness(1.1);
}

.month-column span {
    color: var(--color-faint);
    font-family: var(--font-mono);
    font-size: 10px;
}

.alert-stack {
    display: grid;
    gap: var(--space-4);
}

.alert-card {
    --alert: var(--color-accent);
    display: grid;
    grid-template-columns: var(--space-16) 1fr;
    gap: var(--space-4);
    align-items: start;
    padding: var(--space-5);
    border: 1px solid color-mix(in srgb, var(--alert) 22%, var(--color-border));
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--alert) 7%, var(--color-surface));
    box-shadow: var(--shadow-soft);
    transition: transform var(--motion-base) var(--ease-spring), filter var(--motion-base) var(--ease-out);
}

.alert-card:hover {
    transform: translateX(var(--space-1));
    filter: brightness(1.08);
}

.alert-warning { --alert: var(--color-amber); }
.alert-reset { --alert: var(--color-blue); }
.alert-health { --alert: var(--color-accent); }

.alert-code {
    color: var(--alert);
    font-family: var(--font-mono);
    font-size: var(--type-small);
    font-weight: 700;
}

.alert-card strong {
    color: var(--color-text-soft);
}

.alert-card p {
    margin-top: var(--space-2);
    color: var(--color-muted);
    font-size: var(--type-small);
}

.privacy-layout {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: var(--space-16);
    align-items: center;
}

.privacy-proof {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: var(--space-6);
    align-items: center;
    min-height: 400px;
    padding: var(--space-8);
    background:
        radial-gradient(circle at 28% 50%, var(--wash-accent), transparent 34%),
        var(--color-surface);
}

.privacy-orbit {
    position: relative;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
}

.privacy-orbit::before,
.privacy-orbit::after,
.privacy-orbit i {
    content: "";
    position: absolute;
    inset: var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: 50%;
}

.privacy-orbit::after {
    inset: var(--space-8);
    border-color: var(--color-border-strong);
    animation: orbitSpin calc(var(--motion-loop) * 1.6) var(--ease-linear) infinite reverse;
}

.privacy-orbit i:nth-child(1) {
    inset: var(--space-14);
    border-color: var(--color-accent-dark);
}

.privacy-orbit i:nth-child(2) {
    width: var(--space-3);
    height: var(--space-3);
    top: var(--space-6);
    left: 50%;
    border: 0;
    background: var(--color-accent);
    box-shadow: var(--shadow-accent);
    animation: privacySatellite calc(var(--motion-loop) * 1.2) var(--ease-linear) infinite;
}

.privacy-orbit i:nth-child(3) {
    inset: var(--space-20);
    border-color: var(--line-soft);
}

.privacy-orbit img {
    position: relative;
    z-index: 2;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-stage);
}

.privacy-ledger {
    display: grid;
    gap: var(--space-3);
}

.privacy-ledger div {
    display: grid;
    gap: var(--space-1);
    padding: var(--space-4);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-md);
    background: var(--glass-soft);
}

.privacy-ledger span {
    color: var(--color-faint);
    font-size: 10px;
}

.privacy-ledger strong {
    color: var(--color-text-soft);
    font-size: var(--type-small);
}

.final-cta {
    padding: var(--space-16) 0 var(--space-32);
}

.final-panel {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-10);
    align-items: center;
    padding: var(--space-10);
    border-color: color-mix(in srgb, var(--color-accent) 30%, var(--color-border));
    background:
        radial-gradient(circle at 86% 18%, var(--wash-accent), transparent 34%),
        var(--color-surface-hot);
}

.final-panel > div:not(.final-signal),
.final-panel .store-button {
    position: relative;
    z-index: 2;
}

.final-panel h2 {
    max-width: 760px;
}

.final-panel .store-button {
    min-width: 208px;
}

.final-signal {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.final-signal i {
    position: absolute;
    width: var(--space-3);
    height: var(--space-3);
    border-radius: 50%;
    background: var(--color-accent);
    box-shadow: var(--shadow-accent);
    animation: finalSignal calc(var(--motion-loop) * .7) var(--ease-out) infinite;
}

.final-signal i:nth-child(1) { top: 22%; right: 22%; }
.final-signal i:nth-child(2) { top: 62%; right: 14%; animation-delay: calc(var(--motion-stagger) * 3); }
.final-signal i:nth-child(3) { top: 42%; right: 34%; animation-delay: calc(var(--motion-stagger) * 6); }

footer {
    border-top: 1px solid var(--line-soft);
    color: var(--color-faint);
    font-size: var(--type-small);
}

.footer-inner {
    min-height: var(--space-24);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--space-6);
    align-items: center;
}

.footer-brand {
    color: var(--color-text-soft);
}

.footer-links {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-6);
}

.reveal {
    opacity: 1;
    transform: none;
}

.js .reveal {
    opacity: 0;
    transform: translateY(var(--space-6));
    filter: blur(var(--space-1));
    transition: opacity var(--motion-slow) var(--ease-out), transform var(--motion-slow) var(--ease-spring), filter var(--motion-slow) var(--ease-out);
}

.js .hero h1.reveal {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
}

.js .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

.js .hero .reveal:nth-child(2) { transition-delay: var(--motion-stagger); }
.js .hero .reveal:nth-child(3) { transition-delay: calc(var(--motion-stagger) * 2); }
.js .hero .reveal:nth-child(4) { transition-delay: calc(var(--motion-stagger) * 3); }

@keyframes orbitDrift {
    0%, 100% { transform: rotate(0deg) scale(1); opacity: .26; }
    50% { transform: rotate(180deg) scale(1.06); opacity: .42; }
}

@keyframes ambientScan {
    0%, 12% { transform: skewX(-16deg) translateX(-60vw); opacity: 0; }
    30% { opacity: .36; }
    72%, 100% { transform: skewX(-16deg) translateX(90vw); opacity: 0; }
}

@keyframes haloBreathe {
    0%, 100% { transform: scale(.82); opacity: .5; }
    50% { transform: scale(1); opacity: .86; }
}

@keyframes livePulse {
    0%, 100% { transform: scale(.82); opacity: .62; }
    50% { transform: scale(1.14); opacity: 1; }
}

@keyframes stageScan {
    0%, 16% { transform: translateX(-100%); opacity: 0; }
    34% { opacity: .38; }
    62%, 100% { transform: translateX(100%); opacity: 0; }
}

@keyframes floatCard {
    0%, 100% { transform: translateY(0) rotate(.2deg); }
    50% { transform: translateY(calc(var(--space-3) * -1)) rotate(-.4deg); }
}

@keyframes quotaBreath {
    0%, 100% { transform: scaleX(.88); opacity: .74; }
    50% { transform: scaleX(1); opacity: 1; }
}

@keyframes conveyor {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@keyframes heatCell {
    0%, 100% { transform: scale(.92); filter: brightness(.9); }
    50% { transform: scale(1); filter: brightness(1.18); }
}

@keyframes orbitSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes profileSignal {
    0%, 100% { transform: scaleY(.72); opacity: .42; }
    50% { transform: scaleY(1); opacity: .82; }
}

@keyframes badgeSheen {
    0%, 22% { transform: translateX(-100%); opacity: 0; }
    38% { opacity: .46; }
    64%, 100% { transform: translateX(100%); opacity: 0; }
}

@keyframes loadingPulse {
    0%, 100% { opacity: .52; filter: brightness(.86); }
    50% { opacity: 1; filter: brightness(1.12); }
}

@keyframes privacySatellite {
    from { transform: rotate(0deg) translateX(var(--space-20)) rotate(0deg); }
    to { transform: rotate(360deg) translateX(var(--space-20)) rotate(-360deg); }
}

@keyframes finalSignal {
    0%, 100% { transform: scale(.72); opacity: .24; filter: blur(0); }
    50% { transform: scale(1.5); opacity: .9; filter: blur(0); }
}

@media (max-width: 1080px) {
    .nav-links {
        gap: var(--space-5);
    }

    .nav-store {
        padding-inline: var(--space-3);
    }

    .nav-store > span:last-child {
        display: none;
    }

    .hero-grid {
        grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
        gap: var(--space-10);
    }

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

    .account-preview {
        min-height: 520px;
    }

    .account-detail-preview {
        width: 32%;
        padding: var(--space-3);
    }

    .preview-window {
        width: 71%;
    }

    .service-stack {
        grid-template-columns: 1fr 1fr;
    }

    .gemini-card {
        grid-column: 1 / -1;
    }

    .ranking-layout,
    .history-grid {
        grid-template-columns: 1fr;
    }

    .profile-card {
        max-width: 640px;
    }
}

@media (max-width: 860px) {
    .nav-inner {
        grid-template-columns: 1fr auto;
    }

    .nav-links {
        display: none;
    }

    .hero {
        padding-top: var(--space-20);
    }

    .hero-grid,
    .section-intro-split,
    .badge-layout,
    .privacy-layout {
        grid-template-columns: 1fr;
    }

    .hero-copy-column {
        max-width: 760px;
    }

    .hero-stage-wrap {
        max-width: 760px;
    }

    .account-preview {
        min-height: 560px;
    }

    .section-intro-split {
        gap: var(--space-6);
        align-items: start;
    }

    .console-bottom-grid {
        grid-template-columns: 1fr 1fr;
    }

    .reset-module {
        grid-column: 1 / -1;
    }

    .privacy-proof {
        max-width: 720px;
    }

    .final-panel {
        grid-template-columns: 1fr;
    }

    .final-panel .store-button {
        justify-self: start;
    }

    .final-store-actions {
        justify-self: start;
    }
}

@media (max-width: 640px) {
    .container {
        width: min(calc(100% - var(--space-8)), var(--container-max));
    }

    .site-nav .brand span,
    .nav-store {
        display: none;
    }

    .locale-control select {
        min-width: var(--space-28);
    }

    .hero {
        padding: var(--space-16) 0 var(--space-20);
    }

    h1 {
        font-size: var(--type-display-mobile);
    }

    .hero-copy {
        font-size: var(--type-body);
    }

    .hero-actions,
    .store-button,
    .text-button {
        width: 100%;
    }

    .store-pair,
    .final-store-actions {
        width: 100%;
    }

    .store-pair {
        flex-direction: column;
    }

    .hero-facts {
        margin-top: var(--space-8);
    }

    .account-preview {
        min-height: 468px;
    }

    .account-detail-preview {
        display: none;
    }

    .preview-status {
        right: var(--space-5);
        width: calc(var(--space-10) - var(--space-1));
        height: calc(var(--space-10) - var(--space-1));
    }

    .preview-window {
        top: var(--space-8);
        width: 100%;
    }

    .preview-titlebar {
        min-height: var(--control-height);
        padding-inline: var(--space-3);
    }

    .preview-titlebar > small {
        display: none;
    }

    .preview-navigation {
        min-height: calc(var(--space-8) + var(--space-1));
    }

    .preview-navigation strong::after {
        bottom: calc(var(--space-2) * -1);
    }

    .preview-quota-list {
        gap: var(--space-1);
        padding: var(--space-2);
    }

    .preview-quota {
        padding: calc(var(--space-3) / 2) var(--space-2);
    }

    .preview-provider-icon {
        width: var(--space-5);
        height: var(--space-5);
    }

    .preview-provider-icon img {
        width: var(--space-3);
        height: var(--space-3);
    }

    .preview-bottom-grid {
        grid-template-columns: 1fr .9fr;
        padding: 0 var(--space-2) var(--space-2);
    }

    .preview-trend {
        display: none;
    }

    .preview-module {
        min-height: 108px;
        padding: var(--space-2);
    }

    .preview-bars {
        min-height: var(--space-12);
    }

    .preview-footer {
        padding-inline: var(--space-2);
    }

    .section {
        padding: var(--space-20) 0;
    }

    .section-intro {
        margin-bottom: var(--space-10);
    }

    .section-intro h2,
    .privacy-copy h2,
    .badge-copy h2,
    .final-panel h2 {
        font-size: var(--type-h2-mobile);
    }

    .section-intro > p:not(.signal-label),
    .section-intro-split > p,
    .privacy-copy > p:not(.signal-label),
    .badge-copy > p:not(.signal-label),
    .final-panel > div > p:not(.signal-label) {
        font-size: var(--type-body);
    }

    .hourly-usage-card {
        padding: var(--space-4) var(--space-3);
    }

    .hourly-chart-toolbar {
        align-items: stretch;
        flex-direction: column;
        gap: var(--space-3);
    }

    .hourly-range-tabs {
        align-self: flex-end;
    }

    .hourly-range-tabs button {
        min-width: var(--space-10);
        padding-inline: var(--space-2);
    }

    .hourly-grid text {
        font-size: var(--type-micro);
    }

    .service-stack,
    .console-bottom-grid {
        grid-template-columns: 1fr;
        padding: var(--space-4);
    }

    .gemini-card,
    .reset-module {
        grid-column: auto;
    }

    .console-bottom-grid {
        padding-top: 0;
    }

    .console-sync {
        display: none;
    }

    .rank-row {
        grid-template-columns: var(--space-10) var(--space-10) minmax(0, 1fr) auto;
        padding-inline: var(--space-3);
    }

    .rank-tier {
        display: none;
    }

    .rank-tokens {
        grid-column: 4;
    }

    .profile-card {
        padding: var(--space-4);
    }

    .badge-preview {
        min-height: 208px;
        padding: var(--space-6);
    }

    .badge-image-shell {
        min-width: min(100%, 240px);
        width: 100%;
    }

    .history-chart-card {
        min-height: 360px;
        padding: var(--space-4);
    }

    .six-month-chart {
        height: 240px;
        gap: var(--space-2);
        padding-inline: var(--space-2);
    }

    .privacy-proof {
        grid-template-columns: 1fr;
        min-height: auto;
        padding: var(--space-5);
    }

    .privacy-orbit {
        max-width: 280px;
        width: 100%;
        margin-inline: auto;
    }

    .final-panel {
        padding: var(--space-6);
    }

    .footer-inner {
        grid-template-columns: 1fr;
        justify-items: start;
        padding-block: var(--space-6);
    }

    .footer-links {
        justify-content: flex-start;
    }
}

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

    *,
    *::before,
    *::after {
        animation: none !important;
        scroll-behavior: auto !important;
        transition: none !important;
    }

    .js .reveal,
    .rank-row,
    .service-track i,
    .trend-bars i,
    .month-column i,
    .product-stage {
        opacity: 1;
        transform: none;
        filter: none;
    }
}