/* AA Poker APP 下载页
   本地系统字体 / 无CDN / 独立移动发布页布局
*/

:root {
    --ink: #111812;
    --ink-2: #1e2d24;
    --paper: #f4f1e8;
    --paper-2: #e9eadf;
    --lime: #baff69;
    --green: #1fd88f;
    --green-deep: #087c51;
    --orange: #ff6f49;
    --violet: #8d78ff;
    --white: #ffffff;
    --muted: #69736c;
    --line: rgba(17, 24, 18, 0.14);
    --max: 1240px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-width: 320px;
    color: var(--ink);
    background: var(--paper);
    font-family: Arial, "Microsoft YaHei", "PingFang SC", sans-serif;
    -webkit-font-smoothing: antialiased;
}

body.menu-open {
    overflow: hidden;
}

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

button,
a {
    -webkit-tap-highlight-color: transparent;
}

button {
    font: inherit;
}

img {
    max-width: 100%;
}

.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;
}

.skip-link {
    position: fixed;
    z-index: 999;
    left: 16px;
    top: -80px;
    padding: 12px 16px;
    border-radius: 10px;
    color: var(--white);
    background: var(--ink);
}

.skip-link:focus {
    top: 16px;
}

.topbar {
    position: sticky;
    z-index: 100;
    top: 0;
    border-bottom: 1px solid rgba(17, 24, 18, 0.1);
    background: rgba(244, 241, 232, 0.92);
    backdrop-filter: blur(18px);
}

.topbar-inner {
    width: min(calc(100% - 40px), var(--max));
    min-height: 78px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 32px;
}

.wordmark {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.wordmark-icon {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 13px;
    color: var(--white);
    background: var(--ink);
}

.wordmark-icon img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.wordmark > span:last-child {
    display: grid;
    gap: 2px;
}

.wordmark strong {
    letter-spacing: 0.08em;
    font-size: 15px;
}

.wordmark small {
    color: var(--muted);
    letter-spacing: 0.18em;
    font-size: 8px;
}

.main-nav {
    justify-self: center;
    display: flex;
    align-items: center;
    gap: 34px;
}

.main-nav a {
    position: relative;
    padding: 30px 0 26px;
    color: #536058;
    font-size: 14px;
}

.main-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: 22px;
    height: 2px;
    background: var(--green-deep);
    transition: right .22s ease;
}

.main-nav a:hover::after {
    right: 0;
}

.top-download {
    min-height: 46px;
    padding: 0 18px;
    display: inline-flex;
    align-items: center;
    gap: 18px;
    border-radius: 14px;
    color: var(--white);
    background: var(--ink);
    font-size: 13px;
    font-weight: 700;
}

.top-download span {
    color: var(--lime);
}

.menu-toggle,
.mobile-nav {
    display: none;
}

.launch-hero {
    position: relative;
    min-height: 850px;
    padding: 78px 0 84px;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 18%, rgba(186, 255, 105, 0.45), transparent 20%),
        linear-gradient(180deg, #f8f5ec 0%, #ecebdd 100%);
}

.hero-noise {
    position: absolute;
    inset: 0;
    opacity: .18;
    background-image:
        linear-gradient(rgba(17,24,18,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(17,24,18,.06) 1px, transparent 1px);
    background-size: 74px 74px;
    mask-image: linear-gradient(to bottom, black, transparent 82%);
}

.hero-copy {
    position: relative;
    z-index: 4;
    width: min(calc(100% - 40px), 980px);
    margin: 0 auto;
    text-align: center;
}

.breadcrumb {
    margin-bottom: 30px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--muted);
    font-size: 12px;
}

.breadcrumb a:hover {
    color: var(--green-deep);
}

.hero-label,
.eyebrow {
    margin: 0 0 22px;
    color: var(--green-deep);
    letter-spacing: .18em;
    font-size: 11px;
    font-weight: 800;
}

.launch-hero h1 {
    margin: 0;
    display: grid;
    font-size: clamp(60px, 8vw, 112px);
    line-height: .92;
    letter-spacing: -.075em;
}

.launch-hero h1 span {
    margin-top: 22px;
    color: var(--orange);
    font-size: .48em;
    letter-spacing: -.03em;
}

.hero-text {
    max-width: 760px;
    margin: 32px auto 0;
    color: #5d6a62;
    font-size: 18px;
    line-height: 1.9;
}

.hero-buttons {
    margin-top: 34px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 18px;
}

.primary-cta {
    min-height: 58px;
    padding: 0 26px;
    display: inline-flex;
    align-items: center;
    gap: 13px;
    border-radius: 999px;
    color: var(--white);
    background: var(--ink);
    font-weight: 700;
    box-shadow: 0 18px 35px rgba(17,24,18,.16);
}

.download-pulse {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--lime);
    box-shadow: 0 0 0 8px rgba(186,255,105,.15);
}

.text-cta {
    min-height: 58px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    color: var(--ink);
    font-weight: 700;
}

.hero-stage {
    position: relative;
    z-index: 3;
    width: min(calc(100% - 40px), 1020px);
    min-height: 410px;
    margin: 45px auto 0;
}

.stage-ring {
    position: absolute;
    left: 50%;
    top: 50%;
    border: 1px solid rgba(17,24,18,.16);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.stage-ring-one {
    width: 650px;
    height: 310px;
}

.stage-ring-two {
    width: 840px;
    height: 400px;
    border-style: dashed;
}

.stage-card {
    position: absolute;
    z-index: 3;
    width: 310px;
    padding: 14px;
    border-radius: 34px;
    background: rgba(255,255,255,.82);
    box-shadow: 0 34px 75px rgba(17,24,18,.16);
    backdrop-filter: blur(10px);
}

.stage-card-left {
    left: 17%;
    top: 18px;
    transform: rotate(-7deg);
}

.stage-card-right {
    right: 17%;
    top: 46px;
    transform: rotate(7deg);
}

.stage-tag {
    position: absolute;
    z-index: 2;
    left: 26px;
    top: 26px;
    padding: 7px 10px;
    border-radius: 999px;
    color: var(--white);
    background: rgba(17,24,18,.84);
    letter-spacing: .14em;
    font-size: 8px;
    font-weight: 800;
}

.stage-screen {
    height: 270px;
    border-radius: 24px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.stage-main-screen {
    background-image:
        url("../pic/hero/aapoker-community-main-feature.png"),
        radial-gradient(circle at center, rgba(31,216,143,.6), transparent 30%),
        linear-gradient(145deg, #12251c, #07110d);
}

.stage-interface-screen {
    background-image:
        url("../pic/app/aapoker-community-app-interface.png"),
        linear-gradient(145deg, #e7efe9, #f9fbf8);
}

.stage-card p {
    margin: 13px 7px 4px;
    font-size: 12px;
    font-weight: 700;
}

.stage-chip {
    position: absolute;
    z-index: 5;
    width: 112px;
    height: 112px;
    display: grid;
    place-items: center;
    border-radius: 32px;
    text-align: center;
    box-shadow: 0 20px 45px rgba(17,24,18,.17);
}

.stage-chip b,
.stage-chip span {
    display: block;
}

.stage-chip b {
    font-size: 14px;
}

.stage-chip span {
    margin-top: 4px;
    letter-spacing: .13em;
    font-size: 9px;
}

.stage-chip-a {
    left: 5%;
    bottom: 25px;
    color: var(--ink);
    background: var(--lime);
    transform: rotate(8deg);
}

.stage-chip-b {
    right: 5%;
    bottom: 15px;
    color: var(--white);
    background: var(--violet);
    transform: rotate(-9deg);
}

.hero-counter {
    position: absolute;
    z-index: 6;
    left: 50%;
    bottom: 0;
    width: 150px;
    height: 88px;
    padding: 16px;
    display: grid;
    align-content: center;
    border: 1px solid rgba(17,24,18,.15);
    border-radius: 24px;
    background: var(--paper);
    transform: translateX(-50%);
}

.hero-counter span {
    color: var(--orange);
    font-size: 24px;
    font-weight: 900;
}

.hero-counter small {
    margin-top: 3px;
    color: var(--muted);
    letter-spacing: .11em;
    font-size: 7px;
}

.hero-marquee {
    position: absolute;
    z-index: 2;
    left: 50%;
    bottom: 28px;
    width: min(calc(100% - 40px), var(--max));
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: rgba(17,24,18,.33);
    letter-spacing: .16em;
    font-size: 10px;
    font-weight: 700;
}

.hero-marquee i {
    width: 34px;
    height: 1px;
    background: rgba(17,24,18,.15);
}

.system-selector,
.experience-section,
.flow-section,
.mobile-content,
.faq-section {
    padding: 110px 0;
}

.selector-heading,
.selector-shell,
.experience-head,
.experience-grid,
.flow-heading,
.flow-line,
.mobile-content-grid,
.faq-title,
.faq-list {
    width: min(calc(100% - 40px), var(--max));
    margin-left: auto;
    margin-right: auto;
}

.selector-heading {
    max-width: 810px;
    margin-bottom: 54px;
    text-align: center;
}

.selector-heading h2,
.experience-head h2,
.prepare-title h2,
.flow-heading h2,
.mobile-copy h2,
.faq-title h2,
.issue-copy h2 {
    margin: 0;
    font-size: clamp(40px, 5vw, 68px);
    line-height: 1.05;
    letter-spacing: -.055em;
}

.selector-heading > p:last-child,
.experience-head > p,
.prepare-title > p,
.mobile-copy > p,
.faq-title > p,
.issue-copy > p {
    color: var(--muted);
    line-height: 1.9;
}

.selector-heading > p:last-child {
    margin: 25px 0 0;
}

.selector-shell {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 36px;
    background: var(--white);
}

.system-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-bottom: 1px solid var(--line);
}

.system-tab {
    min-height: 116px;
    padding: 23px 30px;
    display: grid;
    grid-template-columns: 44px 1fr;
    grid-template-rows: auto auto;
    column-gap: 18px;
    border: 0;
    color: var(--ink);
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.system-tab + .system-tab {
    border-left: 1px solid var(--line);
}

.system-tab.is-active {
    background: var(--lime);
}

.tab-index {
    grid-row: 1 / 3;
    color: var(--green-deep);
    font-size: 13px;
    font-weight: 900;
}

.system-tab strong {
    font-size: 20px;
}

.system-tab small {
    margin-top: 6px;
    color: var(--muted);
}

.system-panel {
    min-height: 470px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 430px;
}

.system-panel-copy {
    padding: clamp(36px, 6vw, 76px);
    display: grid;
    align-content: center;
}

.system-type {
    color: var(--green-deep);
    letter-spacing: .17em;
    font-size: 10px;
    font-weight: 800;
}

.system-panel h3 {
    margin: 18px 0;
    font-size: clamp(34px, 5vw, 58px);
    line-height: 1.08;
    letter-spacing: -.045em;
}

.system-panel-copy > p {
    max-width: 660px;
    margin: 0;
    color: var(--muted);
    line-height: 1.85;
}

.system-panel ul {
    margin: 28px 0;
    padding: 0;
    display: grid;
    gap: 12px;
    list-style: none;
}

.system-panel li {
    position: relative;
    padding-left: 24px;
    color: #435047;
    line-height: 1.6;
}

.system-panel li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .62em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 5px rgba(31,216,143,.12);
}

.system-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
}

.system-actions a {
    min-height: 52px;
    padding: 0 21px;
    display: inline-flex;
    align-items: center;
    gap: 13px;
    border-radius: 14px;
    font-weight: 700;
}

.system-actions a:first-child {
    color: var(--white);
    background: var(--ink);
}

.system-actions a:last-child {
    border: 1px solid var(--line);
}

.system-panel-art {
    position: relative;
    overflow: hidden;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at center, rgba(186,255,105,.8), transparent 35%),
        var(--ink);
}

.art-letter {
    position: absolute;
    left: -10px;
    bottom: -65px;
    color: rgba(255,255,255,.05);
    font-size: 330px;
    line-height: 1;
    font-weight: 900;
}

.art-phone {
    position: relative;
    z-index: 2;
    width: 180px;
    height: 350px;
    padding: 10px;
    border: 2px solid rgba(255,255,255,.7);
    border-radius: 42px;
    background: #0a0f0c;
    box-shadow: 0 30px 60px rgba(0,0,0,.35);
    transform: rotate(5deg);
}

.art-phone::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 14px;
    width: 58px;
    height: 14px;
    border-radius: 999px;
    background: #050805;
    transform: translateX(-50%);
}

.art-phone-screen {
    width: 100%;
    height: 100%;
    border-radius: 32px;
    background:
        radial-gradient(circle at 50% 28%, rgba(31,216,143,.65), transparent 24%),
        linear-gradient(180deg, #17291f, #07100c);
}

.art-badge {
    position: absolute;
    z-index: 4;
    right: 38px;
    top: 50px;
    width: 84px;
    height: 84px;
    display: grid;
    place-items: center;
    border-radius: 24px;
    color: var(--ink);
    background: var(--lime);
    font-weight: 900;
    box-shadow: 0 20px 45px rgba(0,0,0,.22);
    transform: rotate(10deg);
}

.experience-section {
    color: var(--white);
    background: var(--ink);
}

.experience-head {
    margin-bottom: 58px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, .7fr);
    gap: 80px;
    align-items: end;
}

.experience-head .eyebrow {
    color: var(--lime);
}

.experience-head > p {
    margin: 0;
    color: rgba(255,255,255,.57);
}

.experience-grid {
    display: grid;
    grid-template-columns: 1.35fr .65fr .65fr;
    grid-template-rows: 240px 300px;
    gap: 18px;
}

.experience-grid article {
    overflow: hidden;
    border-radius: 30px;
}

.experience-feature {
    grid-row: 1 / 3;
    position: relative;
    min-height: 558px;
    background: #102119;
}

.feature-image {
    position: absolute;
    inset: 0;
    opacity: .88;
    background-image:
        linear-gradient(to top, rgba(7,16,12,.95), transparent 58%),
        url("../pic/app/aapoker-community-app-interface.png"),
        radial-gradient(circle at center, rgba(31,216,143,.55), transparent 32%),
        linear-gradient(145deg, #173025, #08110d);
    background-size: cover, contain, auto, auto;
    background-position: center;
    background-repeat: no-repeat;
}

.feature-copy {
    position: absolute;
    z-index: 2;
    left: 34px;
    right: 34px;
    bottom: 34px;
}

.feature-copy span,
.experience-preview span {
    color: var(--lime);
    letter-spacing: .14em;
    font-size: 9px;
    font-weight: 800;
}

.feature-copy h3,
.experience-preview h3 {
    margin: 12px 0;
    font-size: 30px;
}

.feature-copy p {
    max-width: 560px;
    margin: 0;
    color: rgba(255,255,255,.62);
    line-height: 1.75;
}

.experience-note {
    padding: 28px;
    display: grid;
    align-content: space-between;
}

.experience-note > span {
    font-size: 12px;
    font-weight: 900;
}

.experience-note strong {
    align-self: end;
    font-size: 25px;
}

.experience-note p {
    margin: 12px 0 0;
    line-height: 1.65;
}

.note-lime {
    color: var(--ink);
    background: var(--lime);
}

.note-dark {
    border: 1px solid rgba(255,255,255,.13);
    background: #15261e;
}

.note-dark p {
    color: rgba(255,255,255,.55);
}

.experience-preview {
    position: relative;
    grid-column: 2 / 4;
    padding: 28px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: end;
    background: var(--violet);
}

.preview-image {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 50%;
    background-image:
        url("../pic/app/aapoker-mobile-gameplay-preview.png"),
        linear-gradient(145deg, #f3f6f4, #cbded3);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.experience-preview > div:last-child {
    position: relative;
    z-index: 2;
    grid-column: 2;
    padding-left: 26px;
}

.experience-preview span {
    color: var(--white);
}

.prepare-section {
    padding: 110px 0;
    background: var(--orange);
}

.prepare-shell {
    width: min(calc(100% - 40px), var(--max));
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(280px, .75fr) minmax(0, 1.25fr);
    gap: 90px;
}

.prepare-title .eyebrow {
    color: var(--ink);
}

.prepare-title > p {
    color: rgba(17,24,18,.72);
}

.prepare-list {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid rgba(17,24,18,.22);
}

.prepare-list li {
    min-height: 115px;
    padding: 24px 0;
    display: grid;
    grid-template-columns: 54px 1fr;
    gap: 22px;
    border-bottom: 1px solid rgba(17,24,18,.22);
}

.prepare-list li > span {
    color: var(--white);
    font-weight: 900;
}

.prepare-list strong {
    display: block;
    margin-bottom: 9px;
    font-size: 20px;
}

.prepare-list p {
    margin: 0;
    color: rgba(17,24,18,.68);
    line-height: 1.7;
}

.flow-heading {
    margin-bottom: 52px;
    text-align: center;
}

.flow-line {
    display: grid;
    grid-template-columns: 1fr 80px 1fr 80px 1fr 80px 1fr;
    align-items: center;
}

.flow-line > i {
    height: 1px;
    background: var(--line);
}

.flow-line article {
    position: relative;
    min-height: 260px;
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: 28px;
    background: var(--white);
}

.flow-number {
    position: absolute;
    right: 22px;
    top: 20px;
    color: #c5ccc7;
    font-size: 13px;
    font-weight: 900;
}

.flow-icon {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    border-radius: 20px;
    color: var(--white);
    background: var(--ink);
    font-size: 13px;
    font-weight: 900;
}

.flow-line article:nth-of-type(2) .flow-icon {
    color: var(--ink);
    background: var(--lime);
}

.flow-line article:nth-of-type(3) .flow-icon {
    color: var(--white);
    background: var(--orange);
}

.flow-line article:nth-of-type(4) .flow-icon {
    color: var(--white);
    background: var(--violet);
}

.flow-line h3 {
    margin: 28px 0 12px;
    font-size: 22px;
}

.flow-line p {
    margin: 0;
    color: var(--muted);
    line-height: 1.7;
}

.mobile-content {
    background: var(--paper-2);
}

.mobile-content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) 390px;
    gap: 90px;
}

.mobile-copy > p {
    margin-top: 26px;
    font-size: 16px;
}

.mobile-links {
    padding-left: 28px;
    border-left: 1px solid var(--line);
}

.mobile-links > span {
    display: block;
    margin-bottom: 18px;
    color: var(--muted);
    letter-spacing: .15em;
    font-size: 9px;
    font-weight: 800;
}

.mobile-links > a {
    padding: 21px 0;
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 15px;
    border-bottom: 1px solid var(--line);
}

.mobile-links b {
    color: var(--orange);
    font-size: 12px;
}

.mobile-links strong,
.mobile-links small {
    display: block;
}

.mobile-links small {
    margin-top: 5px;
    color: var(--muted);
}

.issue-strip {
    width: min(calc(100% - 40px), var(--max));
    margin: 110px auto;
    padding: 60px;
    display: grid;
    grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr);
    gap: 70px;
    border-radius: 38px;
    color: var(--white);
    background: var(--ink);
}

.issue-copy .eyebrow {
    color: var(--lime);
}

.issue-copy > p {
    color: rgba(255,255,255,.58);
}

.issue-links {
    border-top: 1px solid rgba(255,255,255,.13);
}

.issue-links a {
    min-height: 84px;
    display: grid;
    grid-template-columns: 50px 1fr auto;
    align-items: center;
    gap: 20px;
    border-bottom: 1px solid rgba(255,255,255,.13);
}

.issue-links span {
    color: var(--lime);
    font-size: 11px;
    font-weight: 900;
}

.issue-links b {
    color: var(--orange);
    font-size: 20px;
}

.faq-title {
    max-width: 760px;
    margin-bottom: 48px;
    text-align: center;
}

.faq-title > p:last-child {
    margin-top: 20px;
}

.faq-list {
    max-width: 950px;
    border-top: 1px solid var(--line);
}

.faq-item {
    border-bottom: 1px solid var(--line);
}

.faq-item button {
    width: 100%;
    min-height: 86px;
    padding: 18px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    border: 0;
    color: var(--ink);
    background: transparent;
    text-align: left;
    cursor: pointer;
    font-weight: 700;
}

.faq-item button i {
    position: relative;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border: 1px solid var(--line);
    border-radius: 50%;
}

.faq-item button i::before,
.faq-item button i::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 11px;
    height: 1px;
    background: var(--ink);
    transform: translate(-50%, -50%);
}

.faq-item button i::after {
    transform: translate(-50%, -50%) rotate(90deg);
    transition: transform .2s ease;
}

.faq-item button[aria-expanded="true"] i::after {
    transform: translate(-50%, -50%);
}

.faq-answer {
    padding: 0 52px 25px 0;
}

.faq-answer p {
    margin: 0;
    color: var(--muted);
    line-height: 1.85;
}

.bottom-download {
    width: min(calc(100% - 40px), var(--max));
    margin: 0 auto 110px;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(420px, 1.2fr);
    border-radius: 38px;
    background: var(--lime);
}

.bottom-download-copy {
    padding: 64px;
}

.bottom-download-copy > span {
    letter-spacing: .16em;
    font-size: 10px;
    font-weight: 900;
}

.bottom-download-copy h2 {
    margin: 18px 0;
    font-size: clamp(38px, 5vw, 60px);
    line-height: 1.05;
    letter-spacing: -.055em;
}

.bottom-download-copy p {
    margin: 0;
    color: rgba(17,24,18,.65);
}

.bottom-download-actions {
    padding: 32px;
    display: grid;
    gap: 12px;
    background: var(--ink);
}

.bottom-download-actions a {
    min-height: 105px;
    padding: 22px 24px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-content: center;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 22px;
    color: var(--white);
}

.bottom-download-actions span,
.bottom-download-actions small {
    display: block;
}

.bottom-download-actions span {
    font-size: 19px;
    font-weight: 800;
}

.bottom-download-actions small {
    margin-top: 7px;
    color: rgba(255,255,255,.5);
}

.bottom-download-actions b {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
    color: var(--lime);
    font-size: 22px;
}

.site-footer {
    padding: 68px 0 28px;
    color: rgba(255,255,255,.56);
    background: #0a100c;
}

.footer-top,
.footer-bottom {
    width: min(calc(100% - 40px), var(--max));
    margin: 0 auto;
}

.footer-top {
    padding-bottom: 50px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 80px;
}

.footer-top strong {
    color: var(--white);
    letter-spacing: .08em;
    font-size: 20px;
}

.footer-top p {
    max-width: 420px;
    line-height: 1.7;
}

.footer-columns {
    display: grid;
    grid-template-columns: repeat(2, 180px);
    gap: 40px;
}

.footer-columns > div {
    display: grid;
    align-content: start;
    gap: 10px;
}

.footer-columns span {
    margin-bottom: 6px;
    color: var(--white);
    font-size: 13px;
    font-weight: 700;
}

.footer-columns a {
    font-size: 13px;
}

.footer-columns a:hover {
    color: var(--lime);
}

.footer-bottom {
    padding-top: 24px;
    display: flex;
    justify-content: space-between;
    gap: 28px;
    border-top: 1px solid rgba(255,255,255,.1);
    font-size: 11px;
}

.footer-bottom p {
    margin: 0;
}

@media (max-width: 1080px) {
    .main-nav {
        display: none;
    }

    .topbar-inner {
        grid-template-columns: auto 1fr auto auto;
    }

    .top-download {
        justify-self: end;
    }

    .menu-toggle {
        width: 44px;
        height: 44px;
        padding: 12px;
        display: grid;
        align-content: center;
        gap: 7px;
        border: 1px solid var(--line);
        border-radius: 13px;
        background: transparent;
        cursor: pointer;
    }

    .menu-toggle span {
        height: 1px;
        background: var(--ink);
    }

    .mobile-nav {
        position: fixed;
        left: 0;
        right: 0;
        top: 78px;
        padding: 16px 20px 28px;
        display: none;
        gap: 4px;
        background: var(--paper);
        box-shadow: 0 24px 50px rgba(17,24,18,.15);
    }

    .mobile-nav.is-open {
        display: grid;
    }

    .mobile-nav a {
        padding: 16px;
        border-bottom: 1px solid var(--line);
    }

    .stage-card-left {
        left: 11%;
    }

    .stage-card-right {
        right: 11%;
    }

    .experience-grid {
        grid-template-columns: 1.1fr .9fr;
        grid-template-rows: 260px 260px 290px;
    }

    .experience-feature {
        grid-row: 1 / 3;
    }

    .experience-preview {
        grid-column: 1 / 3;
        grid-row: 3;
    }

    .flow-line {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }

    .flow-line > i {
        display: none;
    }

    .mobile-content-grid {
        grid-template-columns: 1fr 330px;
        gap: 50px;
    }
}

@media (max-width: 820px) {
    .launch-hero {
        min-height: auto;
    }

    .stage-ring-two {
        width: 650px;
    }

    .stage-card-left {
        left: 4%;
    }

    .stage-card-right {
        right: 4%;
    }

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

    .system-panel-art {
        min-height: 420px;
    }

    .experience-head,
    .prepare-shell,
    .mobile-content-grid,
    .issue-strip {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .experience-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 500px 220px 270px;
    }

    .experience-feature {
        grid-column: 1 / 3;
        grid-row: 1;
    }

    .experience-preview {
        grid-row: 3;
    }

    .mobile-links {
        padding-left: 0;
        padding-top: 24px;
        border-left: 0;
        border-top: 1px solid var(--line);
    }

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

    .footer-top {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

@media (max-width: 580px) {
    .topbar-inner,
    .hero-copy,
    .hero-stage,
    .selector-heading,
    .selector-shell,
    .experience-head,
    .experience-grid,
    .prepare-shell,
    .flow-heading,
    .flow-line,
    .mobile-content-grid,
    .issue-strip,
    .faq-title,
    .faq-list,
    .footer-top,
    .footer-bottom {
        width: min(calc(100% - 28px), var(--max));
    }

    .topbar {
        position: relative;
    }

    .top-download {
        display: none;
    }

    .topbar-inner {
        grid-template-columns: auto 1fr auto;
    }

    .wordmark small {
        display: none;
    }

    .launch-hero {
        padding: 54px 0 74px;
    }

    .launch-hero h1 {
        font-size: clamp(48px, 15vw, 66px);
    }

    .hero-text {
        font-size: 15px;
    }

    .hero-buttons {
        display: grid;
    }

    .primary-cta,
    .text-cta {
        width: 100%;
        justify-content: center;
    }

    .hero-stage {
        min-height: 560px;
        margin-top: 30px;
    }

    .stage-ring-one {
        width: 330px;
        height: 450px;
    }

    .stage-ring-two {
        width: 390px;
        height: 530px;
    }

    .stage-card {
        width: 230px;
    }

    .stage-card-left {
        left: 0;
        top: 18px;
    }

    .stage-card-right {
        right: 0;
        top: 210px;
    }

    .stage-screen {
        height: 205px;
    }

    .stage-chip {
        width: 84px;
        height: 84px;
        border-radius: 24px;
    }

    .stage-chip-a {
        left: 2%;
        bottom: 30px;
    }

    .stage-chip-b {
        right: 2%;
        bottom: 10px;
    }

    .hero-counter {
        display: none;
    }

    .hero-marquee {
        display: none;
    }

    .system-selector,
    .experience-section,
    .flow-section,
    .mobile-content,
    .faq-section,
    .prepare-section {
        padding: 78px 0;
    }

    .selector-heading h2,
    .experience-head h2,
    .prepare-title h2,
    .flow-heading h2,
    .mobile-copy h2,
    .faq-title h2,
    .issue-copy h2 {
        font-size: 38px;
    }

    .system-tabs {
        grid-template-columns: 1fr;
    }

    .system-tab + .system-tab {
        border-left: 0;
        border-top: 1px solid var(--line);
    }

    .system-panel-copy {
        padding: 32px 22px 38px;
    }

    .system-panel h3 {
        font-size: 35px;
    }

    .system-actions {
        display: grid;
    }

    .system-actions a {
        width: 100%;
        justify-content: center;
    }

    .system-panel-art {
        min-height: 360px;
    }

    .experience-grid {
        grid-template-columns: 1fr;
        grid-template-rows: 480px auto auto 420px;
    }

    .experience-feature,
    .experience-preview {
        grid-column: 1;
    }

    .experience-feature {
        grid-row: 1;
    }

    .experience-preview {
        grid-row: 4;
        grid-template-columns: 1fr;
        align-items: end;
    }

    .preview-image {
        width: 100%;
        height: 64%;
    }

    .experience-preview > div:last-child {
        grid-column: 1;
        padding-left: 0;
    }

    .prepare-list li {
        grid-template-columns: 42px 1fr;
    }

    .flow-line {
        grid-template-columns: 1fr;
    }

    .flow-line article {
        min-height: auto;
    }

    .issue-strip {
        padding: 34px 22px;
        margin: 78px auto;
        border-radius: 28px;
    }

    .issue-links a {
        grid-template-columns: 38px 1fr auto;
        gap: 12px;
        font-size: 13px;
    }

    .faq-answer {
        padding-right: 0;
    }

    .bottom-download {
        width: calc(100% - 28px);
        margin-bottom: 78px;
        border-radius: 28px;
    }

    .bottom-download-copy {
        padding: 36px 24px;
    }

    .bottom-download-actions {
        padding: 18px;
    }

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

    .footer-bottom {
        flex-direction: column;
    }
}

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

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