:root {
    color-scheme: light;
    --ink: #17233b;
    --muted: #647087;
    --navy: #101a2d;
    --purple: #7658eb;
    --lavender: #eeeaff;
    --line: #e8eaf0;
    --paper: #fff;
    --canvas: #f8f9fc;
}

* {
    box-sizing: border-box;
}

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

body {
    margin: 0;
    color: var(--ink);
    background: var(--paper);
    font-family: "DM Sans", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
}

a:focus-visible {
    outline: 3px solid #aa98ff;
    outline-offset: 4px;
    border-radius: 4px;
}

.wrap {
    width: min(1120px, calc(100% - 48px));
    margin-inline: auto;
}

.skip-link {
    position: absolute;
    z-index: 20;
    top: 8px;
    left: 8px;
    padding: 10px 14px;
    transform: translateY(-150%);
    color: white;
    background: var(--navy);
    border-radius: 6px;
}

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

.site-header {
    position: relative;
    z-index: 5;
    border-bottom: 1px solid #f0f1f5;
    background: rgb(255 255 255 / 94%);
}

.topbar {
    display: flex;
    min-height: 82px;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--ink);
    font-family: "Manrope", sans-serif;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -1px;
    text-decoration: none;
}

.brand-mark {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    color: white;
    background: var(--purple);
    border-radius: 11px;
    font-size: 18px;
    letter-spacing: 0;
}

.brand-light {
    color: var(--purple);
}

.main-nav,
.footer-links {
    display: flex;
    align-items: center;
    gap: 32px;
}

.main-nav a,
.footer-links a {
    color: #4e5a70;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: color 160ms ease;
}

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

.header-cta {
    padding: 11px 16px;
    color: var(--ink);
    border: 1px solid #e3e5ec;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: border-color 160ms ease, color 160ms ease;
}

.header-cta:hover {
    color: var(--purple);
    border-color: var(--purple);
}

.header-cta span {
    margin-left: 8px;
    color: var(--purple);
}

.hero {
    display: grid;
    min-height: 562px;
    grid-template-columns: 1fr 0.94fr;
    align-items: center;
    gap: 46px;
    padding-block: 66px 72px;
}

.hero-copy {
    padding-block: 8px;
}

.eyebrow {
    margin: 0 0 15px;
    color: var(--purple);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.65px;
}

.hero .eyebrow {
    display: flex;
    align-items: center;
    gap: 9px;
}

.eyebrow-dot {
    width: 7px;
    height: 7px;
    background: #8a71f5;
    border-radius: 50%;
    box-shadow: 0 0 0 4px #f0edff;
}

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

h1,
h2,
h3 {
    font-family: "Manrope", sans-serif;
}

.hero h1 {
    max-width: 555px;
    margin-bottom: 17px;
    font-size: clamp(42px, 5vw, 61px);
    font-weight: 800;
    letter-spacing: -3.2px;
    line-height: 1.12;
}

.hero h1 span,
.section-heading h2 span,
.comparison-intro h2 span,
.about-inner h2 span {
    color: var(--purple);
}

.hero-intro {
    max-width: 465px;
    margin-bottom: 25px;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.8;
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: 24px;
}

.button {
    display: inline-flex;
    min-height: 47px;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 0 19px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: transform 160ms ease, box-shadow 160ms ease;
}

.button:hover {
    transform: translateY(-2px);
}

.button-primary {
    color: white;
    background: var(--purple);
    box-shadow: 0 7px 16px rgb(118 88 235 / 20%);
}

.button-primary:hover {
    box-shadow: 0 10px 22px rgb(118 88 235 / 28%);
}

.text-link {
    color: var(--ink);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

.text-link span {
    padding-left: 5px;
    color: var(--purple);
}

.hero-note {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 34px;
}

.note-icon {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    color: var(--purple);
    background: var(--lavender);
    border-radius: 10px;
    font-size: 17px;
}

.hero-note p {
    margin: 0;
    color: #7a8497;
    font-size: 11px;
    line-height: 1.6;
}

.hero-note strong {
    color: #35415a;
    font-weight: 700;
}

.hero-art {
    position: relative;
    display: grid;
    min-height: 395px;
    place-items: center;
    overflow: hidden;
    background: #f5f2ff;
    border: 1px solid #eeeaff;
    border-radius: 22px;
}

.art-glow {
    position: absolute;
    top: 37px;
    left: 50%;
    width: 245px;
    height: 245px;
    transform: translateX(-50%);
    background: #e4dcff;
    border-radius: 50%;
    filter: blur(1px);
}

.orbit {
    position: absolute;
    top: 50%;
    left: 50%;
    border: 1px solid rgb(118 88 235 / 13%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.orbit-one {
    width: 340px;
    height: 340px;
}

.orbit-two {
    width: 285px;
    height: 285px;
}

.monitor {
    position: relative;
    z-index: 2;
    width: min(320px, 76%);
    margin-top: -25px;
}

.monitor-screen {
    height: 200px;
    padding: 9px;
    background: #222b41;
    border: 6px solid #303950;
    border-radius: 12px;
    box-shadow: 0 15px 35px rgb(40 31 85 / 16%);
}

.screen-top {
    display: flex;
    gap: 4px;
}

.screen-top span {
    width: 4px;
    height: 4px;
    background: #8371cb;
    border-radius: 50%;
}

.screen-content {
    display: flex;
    height: calc(100% - 4px);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 10px 20px 14px;
    background: linear-gradient(135deg, #29243f, #171f33 70%);
    border-radius: 5px;
}

.screen-kicker {
    margin-bottom: 7px;
    color: #b7aaff;
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 1.3px;
}

.screen-title {
    color: #fff;
    font-family: "Manrope", sans-serif;
    font-size: 23px;
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1.15;
}

.screen-line {
    width: 35px;
    height: 3px;
    margin: 10px 0 8px;
    background: #9e88ff;
    border-radius: 4px;
}

.screen-chip {
    padding: 4px 7px;
    color: #dad3ff;
    background: rgb(154 132 255 / 13%);
    border-radius: 3px;
    font-size: 6px;
    letter-spacing: 0.8px;
}

.screen-chip b {
    margin-left: 5px;
    color: #bbaaFF;
}

.monitor-neck {
    width: 31px;
    height: 26px;
    margin: 0 auto;
    background: linear-gradient(90deg, #c0c3d0, #e1e2e8 50%, #b8bdcb);
}

.monitor-foot {
    width: 95px;
    height: 8px;
    margin: 0 auto;
    background: #c4c6d2;
    border-radius: 50%;
}

.desk {
    position: absolute;
    z-index: 1;
    right: 0;
    bottom: 69px;
    left: 0;
    height: 15px;
    background: linear-gradient(180deg, #bba8ff, #a997e6);
    box-shadow: 0 8px 0 #e1d9ff;
}

.keyboard-art {
    position: absolute;
    z-index: 3;
    bottom: 46px;
    left: 17%;
    display: grid;
    width: 136px;
    height: 12px;
    grid-template-columns: repeat(6, 1fr);
    gap: 3px;
    padding: 3px 5px;
    background: #d7d0f0;
    border-radius: 4px;
    transform: skewX(-17deg);
}

.keyboard-art span {
    background: #f8f6ff;
    border-radius: 1px;
}

.mouse-art {
    position: absolute;
    z-index: 3;
    right: 18%;
    bottom: 42px;
    width: 22px;
    height: 30px;
    background: #eeeaff;
    border: 1px solid #c6baf2;
    border-radius: 50% 50% 44% 44%;
    transform: rotate(20deg);
}

.mouse-art span {
    position: absolute;
    top: 5px;
    left: 50%;
    width: 1px;
    height: 6px;
    background: #a58ff0;
}

.art-label {
    position: absolute;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 12px;
    color: #46516a;
    background: white;
    border: 1px solid #efedf7;
    border-radius: 7px;
    box-shadow: 0 7px 20px rgb(45 37 88 / 8%);
    font-size: 9px;
    font-weight: 700;
}

.label-top {
    top: 40px;
    right: 23px;
}

.label-bottom {
    bottom: 105px;
    left: 22px;
}

.label-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.purple {
    background: #8468f3;
    box-shadow: 0 0 0 3px #eeeaff;
}

.label-star {
    color: #8c70f1;
    font-size: 13px;
}

.trust-strip {
    background: var(--navy);
}

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

.trust-items p {
    margin: 0;
    color: #f1f2f8;
    font-size: 11px;
    font-weight: 600;
}

.trust-items span {
    margin-right: 9px;
    color: #a998ff;
    font-family: "Manrope", sans-serif;
    font-size: 10px;
    font-weight: 800;
}

.section {
    padding-block: 91px 94px;
}

.section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 38px;
    margin-bottom: 32px;
}

.section-heading h2,
.comparison-intro h2,
.about-inner h2,
.privacy-section h2 {
    margin-bottom: 0;
    font-size: clamp(27px, 3.2vw, 36px);
    font-weight: 800;
    letter-spacing: -1.6px;
    line-height: 1.23;
}

.section-heading h2 {
    max-width: 525px;
}

.section-description {
    max-width: 315px;
    margin: 0 0 3px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.8;
}

.guide-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 15px;
}

.guide-card {
    display: flex;
    min-height: 265px;
    flex-direction: column;
    padding: 19px 18px 17px;
    border: 1px solid var(--line);
    border-radius: 12px;
    text-decoration: none;
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.guide-card:hover {
    transform: translateY(-4px);
    border-color: #d7cef9;
    box-shadow: 0 12px 28px rgb(30 36 62 / 7%);
}

.gpu-card {
    background: linear-gradient(155deg, #f8f6ff, white 68%);
}

.mouse-card {
    background: linear-gradient(155deg, #f3f8ff, white 68%);
}

.monitor-card {
    background: linear-gradient(155deg, #f2fbf8, white 68%);
}

.keyboard-card {
    background: linear-gradient(155deg, #fff8f1, white 68%);
}

.card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
}

.card-icon {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    color: #795ce5;
    background: #eeeaff;
    border-radius: 10px;
    font-size: 20px;
}

.mouse-card .card-icon {
    color: #4c80df;
    background: #e8f0ff;
}

.monitor-card .card-icon {
    color: #328d74;
    background: #e5f6ef;
}

.keyboard-card .card-icon {
    color: #c37c38;
    background: #fff0dd;
}

.card-arrow {
    color: #9299a8;
    font-size: 15px;
    transition: transform 160ms ease, color 160ms ease;
}

.guide-card:hover .card-arrow {
    color: var(--purple);
    transform: translate(2px, -2px);
}

.card-category {
    margin-bottom: 7px;
    color: #818ba0;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1.1px;
}

.guide-card h3 {
    margin-bottom: 8px;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.35px;
    line-height: 1.4;
}

.guide-card > p:not(.card-category) {
    margin-bottom: 15px;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.7;
}

.card-read {
    display: flex;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 11px;
    color: #6551c1;
    border-top: 1px solid rgb(30 36 62 / 7%);
    font-size: 10px;
    font-weight: 700;
}

.comparison-section {
    padding-block: 80px;
    background: var(--canvas);
}

.comparison-layout {
    display: grid;
    grid-template-columns: 0.77fr 1.23fr;
    align-items: center;
    gap: 65px;
}

.comparison-intro h2 {
    margin-bottom: 16px;
}

.comparison-intro > p:not(.eyebrow) {
    margin-bottom: 20px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.85;
}

.comparison-extra-link {
    display: block;
    margin-top: 12px;
}

.comparison-table-wrap {
    padding: 20px;
    background: white;
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 8px 25px rgb(31 42 70 / 3%);
}

table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

caption {
    padding: 0 0 12px;
    color: #35415a;
    font-family: "Manrope", sans-serif;
    font-size: 12px;
    font-weight: 800;
    text-align: left;
}

th,
td {
    padding: 12px 9px;
    border-bottom: 1px solid #eff0f4;
    vertical-align: top;
}

th {
    color: #818ba0;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.3px;
}

td {
    color: #59657b;
    font-size: 10px;
    line-height: 1.6;
}

td:first-child {
    color: #27334b;
    font-weight: 700;
}

.table-note {
    margin: 13px 0 0;
    color: #7d8799;
    font-size: 9px;
}

.table-note span {
    margin-right: 4px;
    color: var(--purple);
}

.buyer-section {
    padding-block: 74px 66px;
}

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

.buyer-card {
    padding: 23px;
    border: 1px solid var(--line);
    border-radius: 12px;
}

.buyer-value {
    background: linear-gradient(145deg, #f8f6ff, white 75%);
}

.buyer-performance {
    background: linear-gradient(145deg, #f1f5ff, white 75%);
}

.buyer-card-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
}

.buyer-card-heading .eyebrow {
    margin: 0;
    font-size: 9px;
    letter-spacing: 1px;
}

.buyer-symbol {
    display: grid;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    place-items: center;
    color: #7058d1;
    background: #eae6ff;
    border-radius: 11px;
    font-family: "Manrope", sans-serif;
    font-size: 15px;
    font-weight: 800;
}

.buyer-performance .buyer-symbol {
    color: #3974c4;
    background: #e2edff;
    font-size: 21px;
}

.buyer-card h3 {
    margin-bottom: 7px;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.5px;
}

.buyer-card > p,
.buyer-card li {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.8;
}

.buyer-card > p {
    margin-bottom: 12px;
}

.buyer-card ul {
    display: grid;
    gap: 8px;
    margin: 0 0 15px;
    padding-left: 18px;
}

.buyer-card li::marker {
    color: var(--purple);
}

.buyer-card .buyer-example {
    margin: 0;
    padding: 12px 13px;
    color: #566178;
    background: rgb(255 255 255 / 75%);
    border: 1px solid rgb(226 228 239 / 85%);
    border-radius: 8px;
    font-size: 10px;
}

.buyer-example strong {
    color: #35415a;
}

.brand-note {
    max-width: 890px;
    margin: 15px 0 0;
    color: #818a9c;
    font-size: 9px;
    line-height: 1.7;
}

.build-section {
    padding-block: 74px 76px;
    background: var(--canvas);
}

.build-section .section-heading {
    margin-bottom: 25px;
}

.build-guide {
    display: grid;
    grid-template-columns: repeat(3, max-content) 1fr;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin: 0;
    padding: 18px;
    background: white;
    border: 1px solid var(--line);
    border-radius: 12px;
}

.build-legend {
    grid-column: 1 / -1;
    margin-bottom: 8px;
    color: #35415a;
    font-family: "Manrope", sans-serif;
    font-size: 13px;
    font-weight: 800;
}

.tier-input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.tier-tab {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 14px;
    color: #647087;
    background: #f7f8fb;
    border: 1px solid #e8eaf0;
    border-radius: 7px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    transition: color 160ms ease, background 160ms ease, border-color 160ms ease;
}

.tier-tab span {
    color: #9299a8;
    font-family: "Manrope", sans-serif;
    font-size: 9px;
    font-weight: 800;
}

.tier-tab:hover {
    color: #51409d;
    border-color: #cfc5f5;
}

.tier-input:checked + .tier-tab {
    color: white;
    background: var(--purple);
    border-color: var(--purple);
    box-shadow: 0 5px 14px rgb(118 88 235 / 17%);
}

.tier-input:checked + .tier-tab span {
    color: #ded7ff;
}

.tier-input:focus-visible + .tier-tab {
    outline: 3px solid #aa98ff;
    outline-offset: 3px;
}

.build-panels {
    grid-column: 1 / -1;
    min-width: 0;
    margin-top: 12px;
    padding-top: 23px;
    border-top: 1px solid #eff0f4;
}

.build-panel {
    display: none;
}

#tier-basic:checked ~ .build-panels #panel-basic,
#tier-mid:checked ~ .build-panels #panel-mid,
#tier-high:checked ~ .build-panels #panel-high {
    display: block;
}

.build-intro {
    max-width: 760px;
    margin-bottom: 20px;
}

.build-intro .eyebrow {
    margin-bottom: 7px;
}

.build-intro h3 {
    margin: 0 0 6px;
    color: var(--ink);
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -0.7px;
}

.build-intro > p:last-child {
    margin: 0;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.8;
}

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

.part-card {
    position: relative;
    min-height: 190px;
    padding: 18px 16px 15px;
    background: #fbfbfd;
    border: 1px solid #eceef3;
    border-radius: 9px;
}

.part-index {
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
    margin-bottom: 11px;
    color: #6d57cf;
    background: #eeeaff;
    border-radius: 7px;
    font-family: "Manrope", sans-serif;
    font-size: 10px;
    font-weight: 800;
}

.part-card h4 {
    margin: 0 0 6px;
    color: #29354d;
    font-family: "Manrope", sans-serif;
    font-size: 13px;
    font-weight: 800;
}

.part-card > p {
    margin-bottom: 11px;
    color: #667187;
    font-size: 10px;
    line-height: 1.75;
}

.part-example {
    display: block;
    padding-top: 9px;
    color: #6652c1;
    border-top: 1px solid #e9e7f1;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.6;
}

.build-example {
    margin: 15px 0 0;
    padding: 13px 15px;
    color: #5d6780;
    background: #f5f2ff;
    border-left: 3px solid #8a71ee;
    border-radius: 0 7px 7px 0;
    font-size: 10px;
    line-height: 1.75;
}

.build-example strong {
    color: #42356e;
}

.compat-note {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    margin-top: 18px;
    padding: 17px 19px;
    background: white;
    border: 1px solid var(--line);
    border-radius: 10px;
}

.compat-icon {
    display: grid;
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    place-items: center;
    color: #327c66;
    background: #e6f5ef;
    border-radius: 50%;
    font-size: 14px;
    font-weight: 800;
}

.compat-note h3 {
    margin: 1px 0 5px;
    color: #35415a;
    font-family: "Manrope", sans-serif;
    font-size: 12px;
    font-weight: 800;
}

.compat-note p {
    margin: 0;
    color: #687389;
    font-size: 10px;
    line-height: 1.8;
}

.compat-note strong {
    color: #35415a;
}

.shopping-section {
    padding-block: 78px 80px;
    background: white;
}

.shopping-section .section-heading {
    margin-bottom: 24px;
}

.shopping-section .section-heading h2 {
    max-width: 600px;
}

.price-disclaimer {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 18px;
    padding: 14px 16px;
    background: #fffaf0;
    border: 1px solid #f1e7cf;
    border-radius: 9px;
}

.price-info {
    display: grid;
    width: 23px;
    height: 23px;
    flex: 0 0 auto;
    place-items: center;
    color: #8d6b22;
    background: #f7e9c5;
    border-radius: 50%;
    font-family: "Manrope", sans-serif;
    font-size: 12px;
    font-weight: 800;
}

.price-disclaimer p {
    margin: 0;
    color: #74684f;
    font-size: 10px;
    line-height: 1.75;
}

.price-disclaimer strong {
    color: #53441f;
}

.shopping-guide {
    display: grid;
    grid-template-columns: repeat(3, max-content) 1fr;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin: 0;
    padding: 18px;
    background: #fbfbfd;
    border: 1px solid var(--line);
    border-radius: 12px;
}

.shopping-legend {
    grid-column: 1 / -1;
    margin-bottom: 8px;
    color: #35415a;
    font-family: "Manrope", sans-serif;
    font-size: 13px;
    font-weight: 800;
}

.shop-tab {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 16px;
    color: #647087;
    background: white;
    border: 1px solid #e8eaf0;
    border-radius: 7px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    transition: color 160ms ease, background 160ms ease, border-color 160ms ease;
}

.shop-tab span {
    color: #9299a8;
    font-family: "Manrope", sans-serif;
    font-size: 9px;
    font-weight: 800;
}

.shop-tab:hover {
    color: #51409d;
    border-color: #cfc5f5;
}

.tier-input:checked + .shop-tab {
    color: white;
    background: var(--purple);
    border-color: var(--purple);
    box-shadow: 0 5px 14px rgb(118 88 235 / 17%);
}

.tier-input:checked + .shop-tab span {
    color: #ded7ff;
}

.tier-input:focus-visible + .shop-tab {
    outline: 3px solid #aa98ff;
    outline-offset: 3px;
}

.shopping-panels {
    grid-column: 1 / -1;
    min-width: 0;
    margin-top: 12px;
    padding-top: 22px;
    border-top: 1px solid #eff0f4;
}

.shopping-panel {
    display: none;
}

#shop-basic:checked ~ .shopping-panels #shop-panel-basic,
#shop-mid:checked ~ .shopping-panels #shop-panel-mid,
#shop-high:checked ~ .shopping-panels #shop-panel-high {
    display: block;
}

.shopping-panel-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 17px;
}

.shopping-panel-heading .eyebrow {
    margin-bottom: 5px;
}

.shopping-panel-heading h3 {
    margin: 0;
    color: var(--ink);
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -0.7px;
}

.shopping-panel-heading > p {
    max-width: 315px;
    margin: 0 0 2px;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.7;
}

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

.product-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    padding: 16px;
    background: white;
    border: 1px solid var(--line);
    border-radius: 9px;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.product-card:hover {
    border-color: #d7cef9;
    box-shadow: 0 8px 20px rgb(31 42 70 / 5%);
}

.product-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 9px;
}

.product-category {
    color: #7d8799;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1px;
}

.product-tier {
    padding: 4px 7px;
    color: #6551c1;
    background: #f1eeff;
    border-radius: 20px;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-align: center;
}

.product-card h4 {
    margin: 0 0 8px;
    color: #2a354c;
    font-family: "Manrope", sans-serif;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: -0.2px;
    line-height: 1.5;
}

.product-price {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin: 0 0 5px;
    color: #7b8597;
    font-size: 9px;
}

.product-price strong {
    color: #26334b;
    font-family: "Manrope", sans-serif;
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
}

.price-track {
    position: relative;
    height: 7px;
    margin: 5px 0 12px;
    overflow: hidden;
    background: linear-gradient(90deg, #e8f4ed 0%, #f6f0dc 53%, #f6e5e3 100%);
    border-radius: 20px;
}

.price-track::before,
.price-track::after {
    position: absolute;
    top: 0;
    width: 1px;
    height: 100%;
    background: rgb(39 52 75 / 14%);
    content: "";
}

.price-track::before {
    left: 33.3%;
}

.price-track::after {
    left: 66.6%;
}

.price-track span {
    position: absolute;
    z-index: 1;
    top: 1px;
    left: var(--price-start);
    width: var(--price-width);
    height: 5px;
    background: #7658eb;
    border-radius: 20px;
}

.good-point,
.watch-point {
    margin: 0 0 8px;
    color: #626d80;
    font-size: 9px;
    line-height: 1.7;
}

.good-point strong {
    color: #267257;
}

.watch-point strong {
    color: #9a6623;
}

.store-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
    padding-top: 10px;
    color: #6652c1;
    border-top: 1px solid #eff0f4;
    font-size: 10px;
    font-weight: 700;
    text-decoration: none;
}

.store-link:hover {
    color: #4936a0;
    text-decoration: underline;
}

.price-chart-note {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 12px;
}

.chart-swatch {
    width: 20px;
    height: 6px;
    flex: 0 0 auto;
    margin-top: 6px;
    background: #7658eb;
    border-radius: 5px;
}

.price-chart-note p {
    margin: 0;
    color: #7b8597;
    font-size: 9px;
    line-height: 1.75;
}

.price-chart-note strong {
    color: #536077;
}

.shopping-checklist {
    margin-top: 18px;
    padding: 17px 19px;
    background: #f5f7fb;
    border: 1px solid #e9edf4;
    border-radius: 9px;
}

.shopping-checklist h3 {
    margin: 0 0 8px;
    color: #35415a;
    font-family: "Manrope", sans-serif;
    font-size: 12px;
    font-weight: 800;
}

.shopping-checklist ol {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin: 0;
    padding-left: 18px;
    color: #687389;
    font-size: 9px;
    line-height: 1.7;
}

.shopping-checklist li::marker {
    color: #7658eb;
    font-weight: 800;
}

.shopping-checklist strong {
    color: #3a465e;
}

.simulator-section {
    padding-block: 82px;
    background: #f5f3ff;
    scroll-margin-top: 20px;
}

.simulator-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    align-items: start;
    gap: 34px 60px;
}

.simulator-intro {
    position: sticky;
    top: 30px;
    padding-top: 8px;
}

.simulator-intro h2 {
    max-width: 430px;
    margin-bottom: 15px;
    color: var(--ink);
    font-family: "Manrope", sans-serif;
    font-size: clamp(32px, 4vw, 45px);
    font-weight: 800;
    letter-spacing: -2px;
    line-height: 1.15;
}

.simulator-intro h2 span {
    color: var(--purple);
}

.simulator-intro > p:not(.eyebrow) {
    max-width: 410px;
    margin-bottom: 18px;
    color: #626d80;
    font-size: 13px;
    line-height: 1.85;
}

.simulator-note {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    max-width: 370px;
    padding: 11px 12px;
    background: rgb(255 255 255 / 70%);
    border: 1px solid #e8e2ff;
    border-radius: 8px;
}

.simulator-note > span {
    color: var(--purple);
    font-size: 14px;
}

.simulator-note p {
    margin: 0;
    color: #6d6685;
    font-size: 10px;
    line-height: 1.65;
}

.simulator-card {
    min-width: 0;
    padding: 24px;
    background: white;
    border: 1px solid #ebe8f7;
    border-radius: 14px;
    box-shadow: 0 14px 36px rgb(46 35 96 / 7%);
}

.budget-label {
    display: block;
    margin-bottom: 5px;
    color: #667187;
    font-size: 11px;
    font-weight: 700;
}

.budget-value {
    display: block;
    margin-bottom: 12px;
    color: #222e47;
    font-family: "Manrope", sans-serif;
    font-size: clamp(34px, 4vw, 45px);
    font-weight: 800;
    letter-spacing: -1.7px;
    line-height: 1.25;
}

.budget-range {
    display: block;
    width: 100%;
    height: 8px;
    margin: 14px 0 8px;
    appearance: none;
    background: linear-gradient(to right, #7658eb 0, #7658eb var(--range-progress, 22%), #e7e9ef var(--range-progress, 22%), #e7e9ef 100%);
    border-radius: 10px;
    cursor: pointer;
}

.budget-range::-webkit-slider-thumb {
    width: 22px;
    height: 22px;
    appearance: none;
    background: white;
    border: 5px solid var(--purple);
    border-radius: 50%;
    box-shadow: 0 2px 8px rgb(50 39 104 / 20%);
}

.budget-range::-moz-range-thumb {
    width: 14px;
    height: 14px;
    background: white;
    border: 5px solid var(--purple);
    border-radius: 50%;
    box-shadow: 0 2px 8px rgb(50 39 104 / 20%);
}

.budget-range:focus-visible {
    outline: 3px solid #c6baff;
    outline-offset: 7px;
}

.range-ends {
    display: flex;
    justify-content: space-between;
    color: #8b94a5;
    font-size: 9px;
}

.budget-hint {
    margin: 11px 0 22px;
    color: #828b9c;
    font-size: 9px;
    line-height: 1.65;
}

.use-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 18px;
    padding: 0;
    border: 0;
}

.use-options legend {
    margin-bottom: 9px;
    color: #35415a;
    font-family: "Manrope", sans-serif;
    font-size: 11px;
    font-weight: 800;
}

.use-option {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 71px;
    align-items: center;
    gap: 8px;
    padding: 9px;
    background: #fafafe;
    border: 1px solid #e8eaf0;
    border-radius: 8px;
    cursor: pointer;
    transition: background 160ms ease, border-color 160ms ease;
}

.use-option:has(input:checked) {
    background: #f3f0ff;
    border-color: #a998ee;
    box-shadow: inset 0 0 0 1px #a998ee;
}

.use-option:focus-within {
    outline: 3px solid #c6baff;
    outline-offset: 2px;
}

.use-option input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

.use-option-icon {
    display: grid;
    width: 29px;
    height: 29px;
    flex: 0 0 auto;
    place-items: center;
    color: #7058d1;
    background: #ebe7ff;
    border-radius: 8px;
    font-size: 14px;
}

.use-option > span:last-child {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.use-option strong {
    color: #39445b;
    font-size: 9px;
    line-height: 1.3;
}

.use-option small {
    color: #8a93a3;
    font-size: 8px;
    line-height: 1.3;
}

.simulator-submit {
    width: 100%;
    min-height: 49px;
    border: 0;
    cursor: pointer;
    font-family: inherit;
}

.simulator-result {
    grid-column: 1 / -1;
    min-width: 0;
    padding: 24px;
    background: white;
    border: 1px solid #e7e2f5;
    border-radius: 12px;
    scroll-margin-top: 20px;
}

.simulator-result[hidden] {
    display: none;
}

.result-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 22px;
    margin-bottom: 17px;
}

.result-heading .eyebrow {
    margin-bottom: 4px;
}

.result-heading h3 {
    margin: 0;
    color: var(--ink);
    font-family: "Manrope", sans-serif;
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -0.6px;
}

.result-heading > p {
    max-width: 290px;
    margin: 0;
    color: #6752c1;
    font-size: 10px;
    font-weight: 700;
    text-align: right;
}

.budget-breakdown {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.breakdown-item {
    min-width: 0;
    padding: 12px;
    background: #fbfbfd;
    border: 1px solid #eceef3;
    border-radius: 8px;
}

.breakdown-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.breakdown-heading h4 {
    margin: 0;
    color: #45516a;
    font-family: "Manrope", sans-serif;
    font-size: 10px;
    font-weight: 800;
}

.breakdown-heading > strong {
    color: #27344c;
    font-family: "Manrope", sans-serif;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.breakdown-track {
    height: 6px;
    margin: 8px 0 7px;
    overflow: hidden;
    background: #e9eaf0;
    border-radius: 8px;
}

.breakdown-track span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #9d89f2, #6e52db);
    border-radius: inherit;
}

.breakdown-item > p {
    margin: 0;
    color: #7a8497;
    font-size: 8px;
    line-height: 1.55;
}

.profile-note {
    grid-column: 1 / -1;
    margin: 0;
    padding: 12px 14px;
    color: #665d7e;
    background: #f5f2ff;
    border-left: 3px solid #8a71ee;
    border-radius: 0 7px 7px 0;
    font-size: 9px;
    line-height: 1.7;
}

.result-disclaimer {
    margin: 14px 0 10px;
    color: #818a9c;
    font-size: 9px;
    line-height: 1.75;
}

.result-disclaimer strong {
    color: #5a6478;
}

.result-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #6652c1;
    font-size: 10px;
    font-weight: 700;
    text-decoration: none;
}

.result-link:hover {
    text-decoration: underline;
}

.assembly-section {
    padding-block: 82px 80px;
    background: #f7f8fc;
    scroll-margin-top: 20px;
}

.assembly-heading {
    margin-bottom: 25px;
}

.assembly-heading h2 {
    max-width: 650px;
}

.safety-banner {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    margin-bottom: 18px;
    padding: 17px 19px;
    background: #fff7ed;
    border: 1px solid #f2dfc8;
    border-radius: 10px;
}

.safety-symbol {
    display: grid;
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    place-items: center;
    color: #8c4f13;
    background: #fbe4c5;
    border-radius: 50%;
    font-family: "Manrope", sans-serif;
    font-size: 15px;
    font-weight: 800;
}

.safety-banner h3 {
    margin: 0 0 5px;
    color: #6d441c;
    font-family: "Manrope", sans-serif;
    font-size: 13px;
    font-weight: 800;
}

.safety-banner p {
    margin: 0;
    color: #795f45;
    font-size: 10px;
    line-height: 1.8;
}

.assembly-figure,
.wire-figure {
    margin: 0;
    padding: 18px 20px 14px;
    background: white;
    border: 1px solid var(--line);
    border-radius: 12px;
}

.assembly-diagram {
    max-width: 820px;
    margin-inline: auto;
    overflow-x: auto;
}

.assembly-diagram svg,
.wire-figure svg {
    display: block;
    width: 100%;
    height: auto;
}

.assembly-diagram svg {
    min-width: 700px;
}

.board-mobile-map {
    display: none;
}

.assembly-figure figcaption,
.wire-figure figcaption {
    margin-top: 10px;
    color: #818a9c;
    font-size: 9px;
    line-height: 1.7;
}

.assembly-guide {
    display: grid;
    grid-template-columns: repeat(2, max-content) 1fr;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin: 20px 0 0;
    padding: 18px;
    background: white;
    border: 1px solid var(--line);
    border-radius: 12px;
}

.assembly-legend {
    grid-column: 1 / -1;
    margin-bottom: 8px;
    color: #35415a;
    font-family: "Manrope", sans-serif;
    font-size: 13px;
    font-weight: 800;
}

.assembly-tab {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 15px;
    color: #647087;
    background: #f7f8fb;
    border: 1px solid #e8eaf0;
    border-radius: 7px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    transition: color 160ms ease, background 160ms ease, border-color 160ms ease;
}

.assembly-tab span {
    color: #9299a8;
    font-family: "Manrope", sans-serif;
    font-size: 9px;
    font-weight: 800;
}

.assembly-tab:hover {
    color: #51409d;
    border-color: #cfc5f5;
}

.tier-input:checked + .assembly-tab {
    color: white;
    background: var(--purple);
    border-color: var(--purple);
    box-shadow: 0 5px 14px rgb(118 88 235 / 17%);
}

.tier-input:checked + .assembly-tab span {
    color: #ded7ff;
}

.tier-input:focus-visible + .assembly-tab {
    outline: 3px solid #aa98ff;
    outline-offset: 3px;
}

.assembly-panels {
    grid-column: 1 / -1;
    min-width: 0;
    margin-top: 12px;
    padding-top: 23px;
    border-top: 1px solid #eff0f4;
}

.assembly-panel {
    display: none;
}

#assembly-beginner:checked ~ .assembly-panels #assembly-panel-beginner,
#assembly-advanced:checked ~ .assembly-panels #assembly-panel-advanced {
    display: block;
}

.assembly-panel-intro {
    max-width: 800px;
    margin-bottom: 19px;
}

.assembly-panel-intro .eyebrow {
    margin-bottom: 6px;
}

.assembly-panel-intro h3 {
    margin: 0 0 7px;
    color: var(--ink);
    font-family: "Manrope", sans-serif;
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -0.7px;
}

.assembly-panel-intro > p:last-child {
    margin: 0;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.8;
}

.assembly-steps {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.assembly-steps > li {
    display: grid;
    grid-template-columns: 31px minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    padding: 15px 16px;
    background: #fbfbfd;
    border: 1px solid #eceef3;
    border-radius: 9px;
}

.assembly-steps > li > span {
    display: grid;
    width: 29px;
    height: 29px;
    place-items: center;
    color: #6752c1;
    background: #eeeaff;
    border-radius: 9px;
    font-family: "Manrope", sans-serif;
    font-size: 11px;
    font-weight: 800;
}

.assembly-steps h4 {
    margin: 0 0 4px;
    color: #35415a;
    font-family: "Manrope", sans-serif;
    font-size: 12px;
    font-weight: 800;
}

.assembly-steps p {
    margin: 0;
    color: #667187;
    font-size: 10px;
    line-height: 1.8;
}

.wire-figure {
    padding: 14px;
    background: #fbfbfd;
}

.wire-diagram-scroll {
    overflow-x: auto;
}

.wire-figure svg {
    min-width: 760px;
}

.wire-mobile-map {
    display: none;
}

.advanced-checks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 15px;
}

.advanced-checks article {
    padding: 13px 14px;
    background: #fbfbfd;
    border: 1px solid #eceef3;
    border-radius: 8px;
}

.advanced-checks h4 {
    margin: 0 0 5px;
    color: #35415a;
    font-family: "Manrope", sans-serif;
    font-size: 11px;
    font-weight: 800;
}

.advanced-checks p {
    margin: 0;
    color: #687389;
    font-size: 9px;
    line-height: 1.75;
}

.advanced-warning {
    margin-bottom: 0;
}

.assembly-faq {
    margin-top: 22px;
    padding: 18px 20px;
    background: white;
    border: 1px solid var(--line);
    border-radius: 10px;
}

.assembly-faq > h3 {
    margin: 0 0 9px;
    color: #35415a;
    font-family: "Manrope", sans-serif;
    font-size: 14px;
    font-weight: 800;
}

.assembly-faq details {
    border-top: 1px solid #eff0f4;
}

.assembly-faq summary {
    padding: 12px 2px;
    color: #46516a;
    cursor: pointer;
    font-size: 10px;
    font-weight: 700;
}

.assembly-faq details p {
    max-width: 900px;
    margin: 0;
    padding: 0 2px 13px;
    color: #687389;
    font-size: 10px;
    line-height: 1.8;
}

.assembly-disclaimer {
    margin: 13px 0 0;
    color: #818a9c;
    font-size: 9px;
    line-height: 1.75;
}

.article-list {
    padding-block: 65px 84px;
}

.article-row {
    display: grid;
    grid-template-columns: 65px minmax(0, 720px);
    justify-content: center;
    gap: 30px;
    padding-block: 43px;
    border-bottom: 1px solid var(--line);
    scroll-margin-top: 35px;
}

.article-number {
    padding-top: 4px;
    color: #b9b1df;
    font-family: "Manrope", sans-serif;
    font-size: 22px;
    font-weight: 800;
}

.article-content .eyebrow {
    margin-bottom: 9px;
    font-size: 9px;
}

.article-content h1,
.article-content h2 {
    margin-bottom: 13px;
    font-size: clamp(22px, 3vw, 29px);
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1.3;
}

.article-content h3 {
    margin: 19px 0 7px;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.3px;
}

.article-content > p:not(.eyebrow) {
    margin-bottom: 10px;
    color: #626d80;
    font-size: 12px;
    line-height: 1.9;
}

.article-content > strong {
    color: #35415a;
}

.article-content > p > strong {
    color: #35415a;
}

.guide-visual {
    margin: 22px 0;
    padding: 17px;
    background: #f7f6fc;
    border: 1px solid #ebe9f3;
    border-radius: 11px;
}

.guide-visual figcaption {
    margin-top: 12px;
    color: #818a9c;
    font-size: 9px;
    line-height: 1.65;
}

.gpu-flow {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: center;
    gap: 10px;
}

.gpu-flow > div {
    display: flex;
    min-height: 90px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 12px;
    background: white;
    border: 1px solid #e8e5f1;
    border-radius: 8px;
}

.flow-icon {
    margin-bottom: 5px;
    color: #7658eb;
    font-size: 20px;
    line-height: 1;
}

.gpu-flow strong {
    color: #35415a;
    font-size: 10px;
}

.gpu-flow small {
    margin-top: 3px;
    color: #7c8698;
    font-size: 8px;
    line-height: 1.45;
}

.flow-arrow {
    color: #9a88e2;
    font-size: 16px;
}

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

.grip-example,
.switch-card {
    display: flex;
    min-height: 128px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 13px 10px;
    background: white;
    border: 1px solid #e8e5f1;
    border-radius: 8px;
    text-align: center;
}

.grip-hand {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    margin-bottom: 5px;
    color: #7658eb;
    background: #f0edff;
    border-radius: 50%;
    font-size: 21px;
}

.claw-hand {
    color: #5382d7;
    background: #edf3ff;
}

.tip-hand {
    color: #398b75;
    background: #e8f6f1;
}

.grip-example strong,
.switch-card > strong {
    color: #35415a;
    font-size: 11px;
}

.grip-example small,
.switch-card > small {
    max-width: 145px;
    margin-top: 4px;
    color: #7c8698;
    font-size: 9px;
    line-height: 1.5;
}

.screen-compare {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    align-items: center;
    gap: 13px;
}

.screen-sample {
    display: grid;
    justify-items: center;
    gap: 7px;
}

.screen-sample > strong {
    color: #6652c1;
    font-family: "Manrope", sans-serif;
    font-size: 11px;
}

.screen-sample > small {
    color: #7c8698;
    font-size: 8px;
    text-align: center;
}

.screen-demo {
    display: flex;
    width: 100%;
    min-width: 0;
    height: 67px;
    gap: 4px;
    padding: 6px;
    background: #e9e5f5;
    border: 1px solid #dcd7eb;
    border-radius: 6px;
}

.screen-demo span {
    display: grid;
    min-width: 0;
    flex: 1;
    place-items: center;
    color: #5e5680;
    background: white;
    border: 1px solid #efedf4;
    border-radius: 3px;
    font-size: 8px;
    overflow-wrap: anywhere;
    text-align: center;
}

.standard-demo {
    max-width: 170px;
    aspect-ratio: 16 / 9;
}

.standard-demo .hidden-window {
    display: none;
}

.wide-demo {
    aspect-ratio: 21 / 9;
}

.switch-card {
    min-height: 145px;
}

.switch-shape {
    position: relative;
    display: block;
    width: 23px;
    height: 30px;
    margin-bottom: 8px;
    background: #e7e1fb;
    border: 1px solid #bfb2ee;
    border-radius: 5px;
}

.switch-shape::before {
    position: absolute;
    top: -4px;
    left: 3px;
    width: 15px;
    height: 5px;
    background: #927be5;
    border-radius: 2px;
    content: "";
}

.switch-shape::after {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 2px;
    height: 9px;
    background: #8873d3;
    content: "";
}

.tactile-shape {
    background: #e3edff;
    border-color: #b7c8ec;
}

.tactile-shape::before {
    background: #648cd2;
}

.tactile-shape::after {
    top: 9px;
    height: 4px;
    background: #648cd2;
    box-shadow: 0 5px 0 #648cd2;
}

.clicky-shape {
    background: #e2f2eb;
    border-color: #b5d7c7;
}

.clicky-shape::before {
    background: #54a083;
}

.clicky-shape::after {
    top: 9px;
    height: 10px;
    background: #54a083;
    transform: rotate(12deg);
}

.switch-note {
    margin-top: 9px;
    padding: 4px 7px;
    color: #6b5aaa;
    background: #f2effc;
    border-radius: 20px;
    font-size: 8px;
}

.tip-box {
    margin: 18px 0;
    padding: 15px 17px;
    background: #f5f2ff;
    border-left: 3px solid #8a71ee;
    border-radius: 0 8px 8px 0;
}

.tip-box > strong {
    display: block;
    margin-bottom: 4px;
    color: #44366e;
    font-family: "Manrope", sans-serif;
    font-size: 11px;
}

.article-content .tip-box p {
    margin: 0;
    color: #665d7e;
    font-size: 10px;
    line-height: 1.75;
}

.guide-checklist {
    display: grid;
    gap: 8px;
    margin: 12px 0 17px;
    padding-left: 19px;
    color: #626d80;
    font-size: 11px;
    line-height: 1.8;
}

.guide-checklist li::marker {
    color: var(--purple);
}

.guide-checklist strong {
    color: #35415a;
}

.article-back {
    display: inline-block;
    margin-top: 4px;
    color: #6752c4;
    font-size: 10px;
    font-weight: 700;
    text-decoration: none;
}

.article-back:hover {
    text-decoration: underline;
}

.about-section {
    padding-block: 64px;
    background: #f6f4ff;
}

.about-inner {
    display: grid;
    max-width: 890px;
    grid-template-columns: 80px 1fr;
    align-items: start;
    gap: 25px;
}

.about-badge {
    display: grid;
    width: 70px;
    height: 70px;
    place-items: center;
    color: white;
    background: var(--navy);
    border-radius: 20px;
    font-family: "Manrope", sans-serif;
    font-size: 20px;
    font-weight: 800;
}

.about-badge span {
    position: absolute;
    margin: -38px 0 0 49px;
    color: #b9aaff;
    font-size: 16px;
}

.about-inner h2 {
    max-width: 580px;
    margin-bottom: 13px;
}

.about-inner > div:last-child > p:last-child {
    max-width: 700px;
    margin-bottom: 0;
    color: #626d80;
    font-size: 12px;
    line-height: 1.9;
}

.privacy-section {
    max-width: 890px;
    padding-block: 67px 72px;
}

.privacy-section h2 {
    margin-bottom: 14px;
    font-size: 25px;
}

.privacy-section > p:not(.eyebrow) {
    margin-bottom: 11px;
    color: #626d80;
    font-size: 11px;
    line-height: 1.9;
}

.privacy-section .updated-date {
    color: #8992a2;
    font-size: 10px;
}

.site-footer {
    padding-top: 30px;
    color: white;
    background: var(--navy);
}

.footer-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding-bottom: 25px;
}

.footer-brand {
    color: white;
    font-size: 17px;
}

.footer-brand .brand-mark {
    width: 30px;
    height: 30px;
    font-size: 16px;
}

.footer-main > div:first-child > p {
    margin: 9px 0 0;
    color: #a9b2c5;
    font-size: 10px;
}

.footer-links a {
    color: #d3d8e4;
    font-size: 11px;
}

.footer-bottom {
    display: flex;
    min-height: 49px;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-top: 1px solid rgb(255 255 255 / 12%);
}

.footer-bottom p,
.footer-bottom a {
    margin: 0;
    color: #9aa5b9;
    font-size: 9px;
}

.footer-bottom a {
    color: #e0dcff;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .header-cta {
        display: none;
    }

    .main-nav {
        gap: 18px;
    }

    .hero {
        grid-template-columns: 1fr 0.85fr;
        gap: 25px;
    }

    .hero h1 {
        font-size: 48px;
    }

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

    .guide-card {
        min-height: 235px;
    }

    .comparison-layout {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .comparison-intro {
        max-width: 550px;
    }

    .comparison-intro h2 {
        max-width: 470px;
    }
}

@media (max-width: 650px) {
    html {
        scroll-padding-top: 75px;
    }

    .wrap {
        width: min(100% - 36px, 500px);
    }

    .topbar {
        min-height: 68px;
        gap: 12px;
    }

    .brand {
        gap: 8px;
        font-size: 18px;
    }

    .brand-mark {
        width: 30px;
        height: 30px;
        border-radius: 9px;
        font-size: 16px;
    }

    .main-nav {
        gap: 9px;
    }

    .main-nav a:nth-child(2),
    .main-nav a:nth-child(5) {
        display: none;
    }

    .main-nav a {
        font-size: 9px;
    }

    .header-cta {
        display: none;
    }

    .hero {
        min-height: auto;
        grid-template-columns: 1fr;
        gap: 32px;
        padding-block: 55px 45px;
    }

    .hero h1 {
        max-width: 440px;
        font-size: clamp(40px, 11vw, 55px);
        letter-spacing: -2.6px;
    }

    .hero-intro {
        font-size: 13px;
    }

    .hero-art {
        min-height: 335px;
    }

    .art-glow {
        top: 26px;
        width: 210px;
        height: 210px;
    }

    .orbit-one {
        width: 295px;
        height: 295px;
    }

    .orbit-two {
        width: 250px;
        height: 250px;
    }

    .monitor {
        width: min(290px, 76%);
    }

    .monitor-screen {
        height: 177px;
    }

    .screen-title {
        font-size: 21px;
    }

    .label-top {
        top: 23px;
        right: 12px;
    }

    .label-bottom {
        bottom: 98px;
        left: 12px;
    }

    .trust-items {
        min-height: auto;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 10px 22px;
        padding-block: 17px;
    }

    .trust-items p {
        width: calc(50% - 11px);
        font-size: 9px;
    }

    .section {
        padding-block: 63px;
    }

    .section-heading {
        display: block;
        margin-bottom: 22px;
    }

    .buyer-section {
        padding-block: 51px 45px;
    }

    .build-section {
        padding-block: 55px;
    }

    .shopping-section {
        padding-block: 57px;
    }

    .assembly-section {
        padding-block: 58px;
    }

    .assembly-guide {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
        padding: 13px;
    }

    .assembly-tab {
        min-height: 56px;
        flex-direction: column;
        gap: 2px;
        padding: 5px;
        font-size: 8px;
        line-height: 1.35;
        text-align: center;
    }

    .assembly-tab span {
        font-size: 8px;
    }

    .assembly-panels {
        padding-top: 18px;
    }

    .assembly-panel-intro h3 {
        font-size: 19px;
    }

    .safety-banner {
        padding: 14px;
    }

    .assembly-figure {
        padding: 12px;
    }

    .assembly-diagram svg {
        display: none;
    }

    .board-mobile-map {
        display: block;
        padding: 12px;
        background: linear-gradient(145deg, #25334b, #17243a);
        border: 1px solid #53627a;
        border-radius: 9px;
    }

    .board-mobile-title {
        display: grid;
        grid-template-columns: 30px 1fr;
        align-items: center;
        column-gap: 8px;
        margin-bottom: 10px;
        color: white;
    }

    .board-mobile-title > span {
        display: grid;
        width: 28px;
        height: 28px;
        grid-row: span 2;
        place-items: center;
        color: #d3c9ff;
        background: #443c69;
        border-radius: 7px;
    }

    .board-mobile-title strong {
        font-family: "Manrope", sans-serif;
        font-size: 10px;
    }

    .board-mobile-title small {
        color: #bbc5d4;
        font-size: 8px;
    }

    .board-mobile-parts {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }

    .board-mobile-parts > div {
        display: grid;
        grid-template-columns: 22px 1fr;
        align-content: center;
        min-height: 57px;
        padding: 8px;
        background: rgb(255 255 255 / 96%);
        border: 1px solid #e8e5f1;
        border-radius: 7px;
    }

    .board-mobile-parts > div > span {
        grid-row: span 2;
        align-self: center;
        color: #7a64d6;
        font-family: "Manrope", sans-serif;
        font-size: 8px;
        font-weight: 800;
    }

    .board-mobile-parts strong {
        color: #35415a;
        font-size: 8px;
    }

    .board-mobile-parts small {
        margin-top: 2px;
        color: #778196;
        font-size: 7px;
        line-height: 1.4;
    }

    .wire-figure {
        padding: 10px;
    }

    .wire-diagram-scroll {
        display: none;
    }

    .wire-figure svg {
        min-width: 0;
    }

    .wire-mobile-map {
        display: grid;
        gap: 7px;
    }

    .wire-mobile-map > div {
        padding: 10px;
        background: white;
        border: 1px solid #e8eaf0;
        border-radius: 7px;
    }

    .wire-mobile-kind {
        display: inline-block;
        margin-bottom: 4px;
        color: #6752c1;
        font-size: 7px;
        font-weight: 800;
        letter-spacing: 0.8px;
    }

    .wire-mobile-map p {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 6px;
        margin: 0;
        color: #45516a;
        font-size: 8px;
        line-height: 1.5;
    }

    .wire-mobile-map p strong {
        font-weight: 700;
    }

    .wire-mobile-map p span {
        color: #8a71ee;
        font-weight: 800;
    }

    .wire-mobile-map small {
        display: block;
        margin-top: 4px;
        color: #7a8497;
        font-size: 8px;
        line-height: 1.5;
    }

    .advanced-checks {
        grid-template-columns: 1fr;
    }

    .assembly-steps > li {
        grid-template-columns: 27px minmax(0, 1fr);
        gap: 9px;
        padding: 12px;
    }

    .assembly-steps > li > span {
        width: 26px;
        height: 26px;
    }

    .assembly-faq {
        padding: 15px;
    }

    .simulator-section {
        padding-block: 58px;
    }

    .simulator-layout {
        grid-template-columns: 1fr;
        gap: 23px;
    }

    .simulator-intro {
        position: static;
        padding-top: 0;
    }

    .simulator-intro h2 {
        font-size: 33px;
    }

    .simulator-intro > p:not(.eyebrow) {
        font-size: 12px;
    }

    .simulator-card,
    .simulator-result {
        padding: 17px;
    }

    .use-options {
        gap: 5px;
    }

    .use-option {
        min-height: 75px;
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
        padding: 8px;
    }

    .use-option-icon {
        width: 24px;
        height: 24px;
        font-size: 12px;
    }

    .use-option strong {
        font-size: 8px;
    }

    .use-option small {
        display: none;
    }

    .result-heading {
        display: block;
    }

    .result-heading h3 {
        font-size: 18px;
    }

    .result-heading > p {
        margin-top: 7px;
        text-align: left;
    }

    .budget-breakdown {
        grid-template-columns: 1fr;
    }

    .shopping-guide {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
        padding: 13px;
    }

    .shop-tab {
        min-height: 53px;
        flex-direction: column;
        gap: 2px;
        padding: 5px 3px;
        font-size: 8px;
        line-height: 1.3;
        text-align: center;
    }

    .shop-tab span {
        font-size: 8px;
    }

    .shopping-panels {
        padding-top: 18px;
    }

    .shopping-panel-heading {
        display: block;
    }

    .shopping-panel-heading h3 {
        font-size: 19px;
    }

    .shopping-panel-heading > p {
        margin-top: 7px;
    }

    .product-grid {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .product-card {
        padding: 14px;
    }

    .product-card h4 {
        font-size: 12px;
    }

    .shopping-checklist ol {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .build-guide {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
        padding: 13px;
    }

    .tier-tab {
        min-height: 53px;
        flex-direction: column;
        gap: 2px;
        padding: 5px 3px;
        font-size: 8px;
        line-height: 1.3;
        text-align: center;
    }

    .tier-tab span {
        font-size: 8px;
    }

    .build-panels {
        padding-top: 18px;
    }

    .build-intro h3 {
        font-size: 19px;
    }

    .parts-grid {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .part-card {
        min-height: auto;
        padding: 14px;
    }

    .part-card > p {
        font-size: 10px;
    }

    .compat-note {
        padding: 14px;
    }

    .buyer-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .buyer-card {
        padding: 18px;
    }

    .buyer-card-heading .eyebrow {
        font-size: 8px;
    }

    .gpu-flow {
        grid-template-columns: 1fr;
        justify-items: stretch;
        gap: 6px;
    }

    .gpu-flow > div {
        min-height: 65px;
        display: grid;
        grid-template-columns: 28px 1fr;
        align-content: center;
        column-gap: 8px;
        padding: 9px 11px;
    }

    .flow-icon {
        grid-row: span 2;
        align-self: center;
        margin: 0;
    }

    .gpu-flow small {
        margin-top: 0;
    }

    .flow-arrow {
        justify-self: center;
        transform: rotate(90deg);
        line-height: 1;
    }

    .guide-visual {
        padding: 12px;
    }

    .grip-grid,
    .switch-grid {
        gap: 6px;
    }

    .grip-example,
    .switch-card {
        padding-inline: 6px;
    }

    .switch-note {
        padding-inline: 5px;
        font-size: 7px;
    }

    .section-heading h2,
    .comparison-intro h2,
    .about-inner h2 {
        font-size: 29px;
    }

    .section-description {
        max-width: 420px;
        margin-top: 11px;
    }

    .guide-grid {
        gap: 10px;
    }

    .guide-card {
        min-height: 252px;
        padding: 15px 13px;
    }

    .card-top {
        margin-bottom: 16px;
    }

    .guide-card h3 {
        font-size: 13px;
    }

    .guide-card > p:not(.card-category) {
        font-size: 9px;
    }

    .card-category {
        font-size: 7px;
        letter-spacing: 0.7px;
    }

    .comparison-section {
        padding-block: 57px;
    }

    .comparison-table-wrap {
        overflow-x: auto;
        padding: 14px;
    }

    table {
        min-width: 470px;
    }

    .article-list {
        padding-block: 36px 55px;
    }

    .article-row {
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 12px;
        padding-block: 32px;
    }

    .article-number {
        font-size: 17px;
    }

    .article-content h2 {
        font-size: 22px;
    }

    .article-content > p:not(.eyebrow) {
        font-size: 11px;
    }

    .about-section {
        padding-block: 48px;
    }

    .about-inner {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .about-badge {
        width: 55px;
        height: 55px;
        border-radius: 15px;
        font-size: 17px;
    }

    .about-badge span {
        margin: -33px 0 0 41px;
    }

    .privacy-section {
        padding-block: 51px;
    }

    .footer-main {
        align-items: flex-start;
        flex-direction: column;
        gap: 22px;
        padding-bottom: 20px;
    }

    .footer-links {
        flex-wrap: wrap;
        gap: 13px 22px;
    }

    .footer-bottom {
        align-items: flex-start;
        padding-block: 13px;
    }
}

@media (max-width: 380px) {
    .main-nav {
        gap: 8px;
    }

    .main-nav a {
        font-size: 8px;
    }

    .main-nav a:nth-child(6) {
        display: none;
    }

    .guide-card {
        min-height: 272px;
        padding-inline: 11px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

.simple-page {
    max-width: 820px;
    min-height: calc(100vh - 220px);
    padding-block: 48px 80px;
}

.back-link {
    display: inline-block;
    margin-bottom: 36px;
    color: #6752c4;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
}

.back-link:hover {
    text-decoration: underline;
}

.simple-page h1 {
    max-width: 760px;
    margin-bottom: 16px;
    font-size: clamp(35px, 5vw, 52px);
    font-weight: 800;
    letter-spacing: -2.4px;
    line-height: 1.15;
}

.simple-page h1 span {
    color: var(--purple);
}

.simple-page .simple-lead {
    max-width: 700px;
    margin-bottom: 32px;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.85;
}

.simple-page h2 {
    margin: 30px 0 8px;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.5px;
}

.simple-page > p:not(.eyebrow, .simple-lead, .updated-date) {
    max-width: 720px;
    margin-bottom: 12px;
    color: #626d80;
    font-size: 13px;
    line-height: 1.9;
}

.simple-page p a:not(.back-link) {
    color: #6752c4;
    font-weight: 700;
}

.simple-page .updated-date {
    margin: -20px 0 30px;
    color: #8992a2;
    font-size: 11px;
}

.contact-card {
    display: flex;
    max-width: 550px;
    align-items: flex-start;
    gap: 18px;
    margin-top: 37px;
    padding: 25px;
    background: #f7f5ff;
    border: 1px solid #ebe7ff;
    border-radius: 13px;
}

.contact-icon {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    place-items: center;
    color: var(--purple);
    background: #eae5ff;
    border-radius: 12px;
    font-size: 18px;
}

.contact-card h2 {
    margin: 0 0 5px;
}

.contact-card p {
    margin-bottom: 7px;
    color: var(--muted);
    font-size: 12px;
}

.contact-email {
    color: #6752c4;
    font-size: 14px;
    font-weight: 700;
    overflow-wrap: anywhere;
    text-decoration: none;
}

.contact-email:hover {
    text-decoration: underline;
}

.contact-card .contact-note {
    margin: 14px 0 0;
    color: #8992a2;
    font-size: 10px;
}

@media (max-width: 650px) {
    .simple-page {
        min-height: calc(100vh - 210px);
        padding-block: 35px 60px;
    }

    .back-link {
        margin-bottom: 28px;
    }

    .simple-page h1 {
        font-size: clamp(34px, 9vw, 45px);
        letter-spacing: -1.8px;
    }

    .simple-page .simple-lead {
        font-size: 13px;
    }

    .simple-page > p:not(.eyebrow, .simple-lead, .updated-date) {
        font-size: 12px;
    }

    .contact-card {
        gap: 13px;
        padding: 19px;
    }
}