@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Mono:wght@400;700&display=swap');

:root {
    --ink: #031315;
    --ink-soft: #061f22;
    --panel: #0a2b2f;
    --panel-bright: #0d383c;
    --teal-dark: #07575a;
    --teal: #0d8f86;
    --mint: #32d6b7;
    --mint-pale: #a7f5d8;
    --orange: #f26a1b;
    --orange-hot: #ff8a25;
    --yellow: #ffd447;
    --cream: #fff2c7;
    --paper: #f6e8b8;
    --red: #ff3c38;
    --black: #020808;
    --border: #1a5558;
    --shadow: 7px 7px 0 var(--black);
    --shadow-small: 4px 4px 0 var(--black);
    --display: 'Archivo Black', Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    --mono: 'Space Mono', 'Courier New', monospace;
    --body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: 7.5rem;
}

body {
    min-width: 280px;
    margin: 0;
    overflow-x: hidden;
    color: var(--cream);
    background:
        radial-gradient(circle at 15% 10%, rgba(13, 143, 134, .18), transparent 34rem),
        radial-gradient(circle at 87% 28%, rgba(242, 106, 27, .11), transparent 26rem),
        var(--ink);
    font-family: var(--body);
    line-height: 1.6;
}

body::before {
    position: fixed;
    z-index: -2;
    inset: 0;
    background-image:
        linear-gradient(rgba(50, 214, 183, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(50, 214, 183, .025) 1px, transparent 1px);
    background-size: 36px 36px;
    content: '';
    pointer-events: none;
}

body.meltdown {
    --mint: #ffd447;
    --teal: #f26a1b;
    animation: emergency-flash .42s steps(2) 5;
}

body.executive-mode .page-noise {
    background-color: rgba(255, 212, 71, .08);
    opacity: .8;
}

body.executive-mode .brand-mark {
    transform: rotate(180deg);
}

body.executive-mode .site-header {
    border-bottom-color: var(--yellow);
    box-shadow: 0 4px 0 var(--orange);
}

body.executive-mode .price-card {
    background-image: repeating-linear-gradient(-45deg, transparent 0 18px, rgba(242, 106, 27, .12) 18px 36px);
}

body.cheat-mode .game-card {
    border-color: var(--yellow);
    box-shadow: 5px 5px 0 var(--orange), 0 0 24px rgba(255, 212, 71, .2);
}

body.cheat-mode .game-card:nth-child(odd) {
    transform: rotate(-.55deg);
}

body.cheat-mode .game-card:nth-child(even) {
    transform: rotate(.55deg);
}

body.incident-commander .site-header {
    background: rgba(77, 8, 5, .94);
}

body.incident-commander .nav-status {
    color: var(--black);
    background: var(--red);
    border-color: var(--yellow);
}

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

button,
input,
textarea,
select {
    font: inherit;
}

button {
    color: inherit;
}

a {
    color: inherit;
}

img {
    max-width: 100%;
}

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

:focus-visible {
    outline: 3px solid var(--yellow);
    outline-offset: 4px;
}

.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: 9999;
    top: .75rem;
    left: .75rem;
    padding: .8rem 1rem;
    color: var(--black);
    background: var(--yellow);
    border: 2px solid var(--black);
    font-weight: 900;
    transform: translateY(-180%);
    transition: transform .2s;
}

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

.page-noise {
    position: fixed;
    z-index: 9998;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    opacity: .18;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
    mix-blend-mode: soft-light;
}

.site-header {
    position: sticky;
    z-index: 1000;
    top: 0;
    border-bottom: 2px solid var(--border);
    background: rgba(3, 19, 21, .86);
    backdrop-filter: blur(14px);
}

.nav-shell {
    display: flex;
    width: min(1240px, calc(100% - 2rem));
    min-height: 78px;
    margin: 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.brand {
    display: inline-flex;
    min-height: 44px;
    flex: 0 0 auto;
    align-items: center;
    gap: .7rem;
    color: var(--cream);
    text-decoration: none;
}

.brand-mark {
    position: relative;
    display: block;
    width: 62px;
    height: 48px;
    flex: 0 0 auto;
    isolation: isolate;
    color: var(--black);
    background:
        radial-gradient(circle at 23% 28%, rgba(255, 255, 255, .75) 0 6%, transparent 7%),
        linear-gradient(135deg, var(--mint) 0 53%, var(--yellow) 54% 100%);
    border: 2px solid var(--black);
    border-radius: 48% 52% 44% 56% / 57% 43% 55% 45%;
    box-shadow: 4px 4px 0 var(--orange), inset 0 0 0 2px rgba(255, 242, 199, .42);
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    line-height: 1;
    transform: rotate(-4deg);
    transition: transform .35s;
}

.brand-mark::after {
    position: absolute;
    z-index: -1;
    inset: 4px;
    border: 1px dashed rgba(3, 19, 21, .48);
    border-radius: inherit;
    content: '';
}

.brand-puff,
.brand-knot-icon {
    position: absolute;
    display: block;
    font-size: 1.62rem;
    filter: drop-shadow(1px 2px 0 rgba(3, 19, 21, .72));
    transition: transform .25s ease;
}

.brand-puff {
    top: 7px;
    left: 4px;
    transform: rotate(-9deg);
}

.brand-knot-icon {
    right: 3px;
    bottom: 3px;
    transform: rotate(11deg);
}

.brand:hover .brand-puff,
.brand:focus-visible .brand-puff {
    transform: translateX(-3px) rotate(-14deg);
}

.brand:hover .brand-knot-icon,
.brand:focus-visible .brand-knot-icon {
    transform: translateY(-2px) rotate(17deg) scale(1.08);
}

.brand strong,
.brand small {
    display: block;
    line-height: 1.05;
}

.brand strong {
    font-family: var(--display);
    font-size: 1.15rem;
    letter-spacing: -.04em;
}

.brand-fart {
    color: var(--cream);
}

.brand-knot-word {
    color: var(--orange);
}

.brand small {
    margin-top: .25rem;
    color: var(--mint-pale);
    font-family: var(--mono);
    font-size: .58rem;
    text-transform: uppercase;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 1.35rem;
}

.nav-links > a {
    position: relative;
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    color: #c6e5dc;
    font-family: var(--mono);
    font-size: .72rem;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
}

.nav-links > a::after {
    position: absolute;
    right: 0;
    bottom: -.35rem;
    left: 0;
    height: 2px;
    background: var(--orange);
    content: '';
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .2s;
}

.nav-links > a:hover::after,
.nav-links > a:focus-visible::after {
    transform: scaleX(1);
    transform-origin: left;
}

.nav-status {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    gap: .45rem;
    padding: .55rem .7rem;
    color: var(--mint-pale);
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-family: var(--mono);
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
}

.nav-status i,
.online-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--mint);
    border-radius: 50%;
    box-shadow: 0 0 9px var(--mint);
    animation: pulse 1.8s infinite;
}

.nav-toggle {
    display: none;
    width: 48px;
    height: 44px;
    padding: 10px;
    background: var(--panel);
    border: 2px solid var(--border);
    cursor: pointer;
}

.nav-toggle span:not(.sr-only) {
    display: block;
    width: 100%;
    height: 2px;
    margin: 4px 0;
    background: var(--cream);
    transition: transform .2s, opacity .2s;
}

.nav-toggle[aria-expanded='true'] span:nth-child(2) {
    transform: translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded='true'] span:nth-child(3) {
    opacity: 0;
}

.nav-toggle[aria-expanded='true'] span:nth-child(4) {
    transform: translateY(-6px) rotate(-45deg);
}

.hero {
    display: grid;
    width: min(1240px, calc(100% - 3rem));
    min-height: 700px;
    margin: 0 auto;
    padding: 6.5rem 0 7.5rem;
    grid-template-columns: minmax(0, 1.04fr) minmax(370px, .96fr);
    align-items: center;
    gap: clamp(3rem, 7vw, 7rem);
}

.hero-copy {
    position: relative;
    z-index: 2;
    min-width: 0;
}

.eyebrow,
.kicker {
    color: var(--mint);
    font-family: var(--mono);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: 1.25rem;
    padding: .35rem .75rem .35rem .35rem;
    background: rgba(50, 214, 183, .08);
    border: 1px solid var(--border);
    border-radius: 999px;
}

.eyebrow span {
    padding: .1rem .45rem;
    color: var(--black);
    background: var(--yellow);
    border-radius: 999px;
}

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

h1,
h2,
h3 {
    text-wrap: balance;
}

.hero h1 {
    max-width: 720px;
    margin-bottom: 1.4rem;
    font-family: var(--display);
    font-size: clamp(3.35rem, 5.3vw, 5rem);
    line-height: .89;
    letter-spacing: -.07em;
    text-transform: uppercase;
}

.hero h1 em {
    position: relative;
    display: inline-block;
    color: var(--orange);
    font-style: normal;
    transform: rotate(-2deg);
}

.hero h1 em::after {
    position: absolute;
    right: -.05em;
    bottom: -.09em;
    left: -.05em;
    height: .12em;
    background: var(--yellow);
    content: '';
    transform: rotate(1deg);
}

.hero-lede {
    max-width: 650px;
    margin-bottom: 1.8rem;
    color: #b9d6cf;
    font-size: clamp(1.05rem, 1.7vw, 1.25rem);
}

code {
    padding: .05rem .25rem;
    color: var(--yellow);
    background: rgba(0, 0, 0, .35);
    font-family: var(--mono);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
}

.button {
    display: inline-flex;
    min-height: 48px;
    padding: .78rem 1.1rem;
    align-items: center;
    justify-content: center;
    gap: .7rem;
    border: 2px solid var(--black);
    font-family: var(--mono);
    font-size: .74rem;
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform .16s, box-shadow .16s, background .16s;
}

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

.button:active {
    box-shadow: 1px 1px 0 var(--black);
    transform: translate(2px, 2px);
}

.button-primary {
    color: var(--black);
    background: var(--orange);
    box-shadow: var(--shadow-small);
}

.button-primary:hover {
    background: var(--orange-hot);
    box-shadow: 6px 6px 0 var(--black);
}

.button-ghost {
    color: var(--cream);
    background: var(--panel);
    border-color: var(--border);
    box-shadow: 4px 4px 0 var(--black);
}

.button-ghost:hover {
    color: var(--black);
    background: var(--mint);
    border-color: var(--black);
}

.button-danger {
    color: var(--cream);
    background: var(--red);
    box-shadow: var(--shadow-small);
}

.microcopy {
    margin: 1rem 0 2rem;
    color: #719b96;
    font-family: var(--mono);
    font-size: .66rem;
}

.hero-metrics {
    display: grid;
    max-width: 620px;
    margin: 0;
    padding-top: 1.2rem;
    border-top: 1px solid var(--border);
    grid-template-columns: repeat(3, 1fr);
}

.hero-metrics div {
    padding: 0 .9rem;
    border-right: 1px solid var(--border);
}

.hero-metrics div:first-child {
    padding-left: 0;
}

.hero-metrics div:last-child {
    border: 0;
}

.hero-metrics dt {
    margin-bottom: .2rem;
    color: var(--orange);
    font-family: var(--mono);
    font-size: .64rem;
    font-weight: 700;
    text-transform: uppercase;
}

.hero-metrics dd {
    margin: 0;
    color: var(--cream);
    font-size: .85rem;
    font-weight: 800;
}

.hero-visual {
    position: relative;
    padding: 1.05rem;
    background: var(--panel-bright);
    border: 3px solid var(--black);
    box-shadow: 14px 14px 0 var(--teal-dark), 18px 18px 0 var(--black);
    transform: rotate(1.5deg);
}

.hero-frame {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1 / .88;
    background: var(--black);
    border: 2px solid var(--black);
}

.hero-frame > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(.9) contrast(1.12);
}

.scanlines {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .18) 0, rgba(0, 0, 0, .18) 1px, transparent 1px, transparent 4px);
    pointer-events: none;
}

.rec-badge,
.camera-label {
    position: absolute;
    z-index: 2;
    font-family: var(--mono);
    font-size: .65rem;
    font-weight: 700;
}

.rec-badge {
    top: .75rem;
    right: .75rem;
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .45rem;
    background: rgba(0, 0, 0, .8);
}

.rec-badge span {
    width: 8px;
    height: 8px;
    background: var(--red);
    border-radius: 50%;
    animation: pulse 1s infinite;
}

.camera-label {
    right: .75rem;
    bottom: .65rem;
    left: .75rem;
    padding: .35rem .5rem;
    color: var(--mint-pale);
    background: rgba(0, 0, 0, .82);
    border-left: 3px solid var(--mint);
}

.tape {
    position: absolute;
    z-index: 5;
    padding: .4rem 1rem;
    color: var(--black);
    background: var(--yellow);
    border: 1px solid rgba(0, 0, 0, .5);
    font-family: var(--mono);
    font-size: .66rem;
    font-weight: 700;
    box-shadow: 2px 2px 0 rgba(0, 0, 0, .35);
}

.tape-top {
    top: -.8rem;
    left: 12%;
    transform: rotate(-3deg);
}

.incident-card {
    display: grid;
    width: 100%;
    margin-top: .75rem;
    padding: .8rem;
    color: var(--cream);
    background: var(--ink);
    border: 1px solid var(--border);
    font: inherit;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: .7rem;
    text-align: left;
    cursor: pointer;
    transition: border-color .16s, transform .16s;
}

.incident-card:hover,
.incident-card:focus-visible {
    border-color: var(--orange);
    transform: translateY(-2px);
}

.incident-icon {
    font-size: 1.5rem;
}

.incident-card small,
.incident-card strong {
    display: block;
}

.incident-card small,
.incident-time {
    color: #7ca6a1;
    font-family: var(--mono);
    font-size: .58rem;
    text-transform: uppercase;
}

.incident-card strong {
    font-size: .78rem;
}

.incident-time {
    color: var(--orange);
}

.trust-section {
    padding: 2.3rem 1.5rem 2.6rem;
    color: var(--cream);
    background: linear-gradient(110deg, #061f22, #0a2b2f 52%, #071b1e);
    border-top: 2px solid var(--border);
    border-bottom: 2px solid var(--border);
    text-align: center;
}

.trust-section > p {
    margin-bottom: 1.6rem;
    font-family: var(--mono);
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--mint-pale);
}

.corpse-logos {
    display: flex;
    width: min(1100px, 100%);
    margin: 0 auto;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: clamp(1.4rem, 4.5vw, 4.5rem);
}

.corpse-logos span {
    font-size: clamp(1rem, 2.1vw, 1.6rem);
    filter: grayscale(1) brightness(1.9);
    opacity: .62;
    transition: filter .2s, opacity .2s, transform .2s;
}

.corpse-logos span:hover {
    filter: grayscale(.25) brightness(1.15);
    opacity: 1;
    transform: translateY(-3px);
}

.enron { color: #c7192d; font-family: Arial Black, sans-serif; font-style: italic; transform: skew(-8deg); }
.theranos { color: #d91850; font-weight: 200; letter-spacing: .18em; }
.ftx { color: #00a7bd; font-family: var(--mono); font-weight: 700; }
.blockbuster { color: #153b82; font-family: Impact, sans-serif; text-shadow: 2px 2px 0 #f0c826; }
.ocean { color: #274f77; font-family: Georgia, serif; font-style: italic; letter-spacing: .08em; }
.juicero { color: #69a03c; font-weight: 800; letter-spacing: -.08em; }

.section {
    width: min(1240px, calc(100% - 3rem));
    margin: 0 auto;
    padding: 7.5rem 0;
}

.section-heading {
    margin-bottom: 3.4rem;
}

.section-heading h2,
.incident-copy h2,
.faq-intro h2 {
    margin-bottom: 0;
    font-family: var(--display);
    font-size: clamp(2.35rem, 5vw, 4.6rem);
    line-height: .98;
    letter-spacing: -.055em;
    text-transform: uppercase;
}

.section-heading .kicker,
.incident-copy .kicker,
.faq-intro .kicker {
    margin-bottom: .85rem;
}

.split-heading,
.arcade-heading {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(260px, .55fr);
    align-items: end;
    gap: 4rem;
}

.split-heading > p,
.arcade-heading > p,
.centered-heading > p,
.incident-copy > p,
.faq-list p {
    color: #9bbdb7;
}

.split-heading > p,
.arcade-heading > p {
    margin-bottom: .4rem;
}

.gif-proof {
    --proof-accent: var(--orange);
    --proof-tilt: -.32deg;
    position: relative;
    display: grid;
    margin: 0 9px 9px 0;
    overflow: visible;
    color: var(--cream);
    background: #061c1f;
    border: 2px solid var(--black);
    box-shadow: 6px 6px 0 var(--proof-accent), 9px 9px 0 var(--black);
    grid-template-columns: minmax(112px, 43%) minmax(0, 1fr);
    transform: rotate(var(--proof-tilt));
    transform-origin: center;
}

.gif-proof-media {
    min-width: 0;
    overflow: hidden;
    background: var(--black);
    border-right: 2px solid var(--black);
}

.gif-proof img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gif-proof figcaption {
    display: flex;
    min-width: 0;
    padding: .8rem .85rem;
    align-self: stretch;
    flex-direction: column;
    justify-content: center;
}

.gif-proof figcaption span {
    margin-bottom: .35rem;
    color: var(--mint);
    font-family: var(--mono);
    font-size: .52rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.gif-proof figcaption strong {
    font-family: var(--display);
    font-size: clamp(.88rem, 1.35vw, 1.08rem);
    line-height: 1.05;
    text-transform: uppercase;
}

.bento-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: minmax(120px, auto);
    gap: 1rem;
}

.feature-card {
    position: relative;
    overflow: hidden;
    padding: 1.6rem;
    background: var(--panel);
    border: 2px solid var(--border);
    box-shadow: var(--shadow-small);
    grid-column: span 4;
}

.feature-card::after {
    position: absolute;
    right: -42px;
    bottom: -42px;
    width: 95px;
    height: 95px;
    background: repeating-linear-gradient(45deg, transparent 0 6px, rgba(50, 214, 183, .08) 6px 12px);
    border-radius: 50%;
    content: '';
}

.feature-card h3 {
    margin-bottom: .75rem;
    font-family: var(--display);
    font-size: clamp(1.45rem, 2.4vw, 2.2rem);
    line-height: 1;
    letter-spacing: -.04em;
    text-transform: uppercase;
}

.feature-card p:last-child {
    margin-bottom: 0;
    color: #a8c6c0;
    font-size: .92rem;
}

.feature-number {
    position: absolute;
    top: .8rem;
    right: 1rem;
    color: var(--mint);
    font-family: var(--mono);
    font-size: .68rem;
}

.feature-tag {
    margin-bottom: .65rem;
    color: var(--orange) !important;
    font-family: var(--mono);
    font-size: .62rem !important;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.feature-large {
    display: grid;
    min-height: 390px;
    padding: 0;
    background: var(--teal-dark);
    grid-column: span 8;
    grid-row: span 2;
    grid-template-columns: .9fr 1.1fr;
}

.feature-large .feature-copy {
    padding: 2rem;
    align-self: end;
}

.feature-large img {
    width: 100%;
    height: 100%;
    min-height: 390px;
    object-fit: contain;
    background: #140d09;
    border-left: 2px solid var(--black);
}

.feature-tall {
    min-height: 390px;
    grid-column: span 4;
    grid-row: span 2;
}

.feature-hackers > img {
    display: block;
    width: 100%;
    height: 170px;
    margin: .2rem 0 1rem;
    object-fit: contain;
    background: #eefaff;
    border: 2px solid var(--black);
}

.tiny-diagram {
    display: flex;
    margin-top: 2rem;
    padding: .8rem;
    align-items: center;
    justify-content: space-between;
    gap: .35rem;
    color: var(--black);
    background: var(--yellow);
    border: 2px solid var(--black);
    font-family: var(--mono);
    font-size: .57rem;
    font-weight: 700;
}

.feature-gif {
    min-height: 300px;
    padding: 0;
    grid-column: span 5;
}

.feature-gif > img {
    display: block;
    width: 100%;
    height: 205px;
    object-fit: cover;
    border-bottom: 2px solid var(--black);
}

.feature-gif > div {
    padding: 1rem 1.3rem;
}

.feature-gif h3 {
    margin: 0;
    font-size: 1.3rem;
}

.feature-roomba {
    padding: 0;
}

.feature-roomba > img {
    display: block;
    width: 100%;
    height: 170px;
    object-fit: contain;
    background: #1a1712;
    border-bottom: 2px solid var(--black);
}

.feature-roomba > div {
    padding: 1.3rem;
}

.feature-yellow {
    color: var(--cream);
    background: linear-gradient(145deg, #4b3609, #172a29 72%);
    border-color: #a77819;
    grid-column: span 4;
}

.feature-yellow .feature-tag,
.feature-yellow p:last-child,
.feature-yellow .feature-number {
    color: var(--yellow) !important;
}

.feature-yellow p:last-child {
    color: #d7cbc0 !important;
}

.feature-yellow strong {
    color: var(--cream);
}

.feature-wide {
    display: grid;
    padding: 0;
    grid-column: span 8;
    grid-template-columns: 1.2fr .8fr;
}

.feature-wide > div {
    padding: 1.6rem;
}

.feature-wide img {
    width: 100%;
    height: 100%;
    min-height: 300px;
    object-fit: cover;
    border-left: 2px solid var(--black);
}

.incident-section {
    display: grid;
    padding-top: 4rem;
    grid-template-columns: 1.15fr .85fr;
    align-items: center;
    gap: clamp(3rem, 7vw, 7rem);
}

.terminal-window {
    overflow: hidden;
    background: #010707;
    border: 3px solid var(--black);
    box-shadow: 12px 12px 0 var(--orange);
    transform: rotate(-1deg);
}

.terminal-bar {
    display: grid;
    min-height: 44px;
    padding: .55rem .8rem;
    color: var(--black);
    background: var(--paper);
    border-bottom: 2px solid var(--black);
    font-family: var(--mono);
    font-size: .62rem;
    font-weight: 700;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
}

.terminal-lights {
    display: flex;
    gap: .35rem;
}

.terminal-lights i {
    width: 11px;
    height: 11px;
    background: var(--red);
    border: 1px solid var(--black);
    border-radius: 50%;
}

.terminal-lights i:nth-child(2) { background: var(--yellow); }
.terminal-lights i:nth-child(3) { background: var(--mint); }

.terminal-clock {
    justify-self: end;
}

.terminal-body {
    min-height: 330px;
    max-height: 400px;
    padding: 1.5rem;
    overflow: auto;
    color: #b5d4ca;
    font-family: var(--mono);
    font-size: clamp(.64rem, 1.25vw, .78rem);
    line-height: 1.9;
}

.terminal-body p {
    margin-bottom: .55rem;
    animation: log-in .24s ease-out both;
}

.terminal-body time {
    color: #587b76;
}

.terminal-body b {
    display: inline-block;
    min-width: 42px;
    margin: 0 .4rem;
    text-align: center;
}

.terminal-body .ok { color: var(--mint); }
.terminal-body .warn { color: var(--yellow); }
.terminal-body .bad { color: var(--red); }
.terminal-body .info { color: #5ab3ff; }

.incident-copy .button {
    margin: .7rem 0 1rem;
}

.incident-copy > small {
    display: block;
    color: #6f9893;
    font-family: var(--mono);
    font-size: .61rem;
}

.arcade-section {
    width: 100%;
    max-width: none;
    padding-right: max(1.5rem, calc((100vw - 1240px) / 2));
    padding-left: max(1.5rem, calc((100vw - 1240px) / 2));
    background:
        linear-gradient(rgba(3, 19, 21, .86), rgba(3, 19, 21, .96)),
        repeating-linear-gradient(45deg, var(--teal-dark) 0 24px, var(--panel) 24px 48px);
    border-top: 3px solid var(--border);
    border-bottom: 3px solid var(--border);
}

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

.game-card {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 440px;
    padding: .75rem .75rem 1.35rem;
    flex-direction: column;
    color: var(--cream);
    background: var(--panel);
    border: 2px solid var(--border);
    box-shadow: var(--shadow-small);
    text-decoration: none;
    transition: transform .18s, border-color .18s, box-shadow .18s;
}

.game-card:hover,
.game-card:focus-visible {
    border-color: var(--orange);
    box-shadow: 8px 8px 0 var(--black);
    transform: translate(-3px, -3px) rotate(-.3deg);
}

.game-preview {
    position: relative;
    display: grid;
    height: 210px;
    overflow: hidden;
    place-items: center;
    background: var(--ink);
    border: 2px solid var(--black);
}

.preview-2048 {
    padding: 1.1rem;
    grid-template-columns: repeat(2, 1fr);
    gap: .55rem;
    background: var(--paper);
}

.preview-2048 span {
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
    color: var(--black);
    background: var(--mint);
    border: 2px solid var(--black);
    font-family: var(--display);
    font-size: 2rem;
}

.preview-2048 span:nth-child(2) { background: var(--yellow); }
.preview-2048 span:nth-child(3) { background: var(--orange); }
.preview-2048 span:nth-child(4) { background: var(--red); }

.preview-melon {
    grid-template-columns: repeat(2, 1fr);
    background: linear-gradient(var(--panel), var(--teal-dark));
}

.preview-melon span {
    position: absolute;
    display: grid;
    width: 70px;
    height: 70px;
    place-items: center;
    background: var(--yellow);
    border: 3px solid var(--black);
    border-radius: 50%;
    font-size: 2rem;
}

.preview-melon span:nth-child(1) { top: 18px; left: 20%; width: 48px; height: 48px; }
.preview-melon span:nth-child(2) { right: 16%; bottom: 17px; width: 64px; height: 64px; background: var(--orange); }
.preview-melon span:nth-child(3) { bottom: 8px; left: 12%; width: 90px; height: 90px; background: var(--mint); }
.preview-melon span:nth-child(4) { top: 42px; right: 29%; width: 78px; height: 78px; background: #8ccf5b; }

.preview-clicker {
    background:
        radial-gradient(circle at center, rgba(255, 212, 71, .17), transparent 45%),
        linear-gradient(145deg, #071b1d, #0b3a3d);
}

.mini-rack {
    position: relative;
    display: grid;
    width: 72%;
    height: 72%;
    padding: .7rem;
    background: #030c0d;
    border: 3px solid var(--black);
    box-shadow: 7px 7px 0 var(--orange);
    grid-template-columns: repeat(3, 1fr);
    gap: .38rem;
}

.mini-rack i {
    position: relative;
    background: #0a292d;
    border: 1px solid var(--border);
}

.mini-rack i::after {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 6px;
    height: 6px;
    background: var(--mint);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--mint);
    content: '';
}

.mini-rack b {
    position: absolute;
    inset: 50% auto auto 50%;
    display: grid;
    width: 72px;
    height: 72px;
    place-items: center;
    color: var(--black);
    background: var(--yellow);
    border: 3px solid var(--black);
    border-radius: 50%;
    font-family: var(--display);
    font-size: .75rem;
    line-height: .9;
    text-align: center;
    transform: translate(-50%, -50%);
}

.preview-clicker > span,
.preview-clicker > em {
    position: absolute;
    padding: .35rem .55rem;
    color: var(--black);
    border: 2px solid var(--black);
    font-family: var(--mono);
    font-size: .65rem;
    font-style: normal;
    font-weight: 700;
}

.preview-clicker > span { top: 18px; right: 18px; background: var(--orange); transform: rotate(7deg); }
.preview-clicker > em { bottom: 16px; left: 16px; background: var(--mint); transform: rotate(-4deg); }

.preview-crossy {
    background:
        linear-gradient(0deg, #0a3e35 0 18%, #11272b 18% 40%, #087580 40% 62%, #11272b 62% 84%, #0a3e35 84%),
        var(--ink);
}

.preview-crossy > i {
    position: absolute;
    right: 0;
    left: 0;
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--yellow) 0 20px, transparent 20px 38px);
    opacity: .55;
}

.preview-crossy > i:nth-child(1) { top: 25%; }
.preview-crossy > i:nth-child(2) { top: 72%; }
.preview-crossy > i:nth-child(3) { top: 78%; opacity: .28; }

.preview-crossy > span,
.preview-crossy > b,
.preview-crossy > em {
    position: absolute;
    font-style: normal;
}

.crossy-car-one { top: 23px; left: 18%; font-size: 2.25rem; transform: scaleX(-1); }
.crossy-car-two { right: 12%; bottom: 22px; font-size: 2.5rem; }
.preview-crossy > b { z-index: 2; bottom: 19px; left: 39%; font-size: 2.45rem; filter: drop-shadow(3px 3px 0 var(--black)); }
.preview-crossy > em { top: 86px; right: 0; left: 0; color: var(--mint-pale); font-family: var(--mono); font-size: 1.25rem; letter-spacing: .5rem; text-align: center; opacity: .75; }

.preview-tetris {
    padding: 1rem 4rem 1rem 1rem;
    background-image:
        linear-gradient(rgba(50, 214, 183, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(50, 214, 183, .07) 1px, transparent 1px);
    background-size: 26px 26px;
    grid-template-columns: repeat(7, 26px);
    grid-template-rows: repeat(6, 26px);
    align-content: center;
    justify-content: center;
    gap: 2px;
}

.preview-tetris span {
    width: 26px;
    height: 26px;
    background: var(--mint);
    border: 2px solid var(--black);
    box-shadow: inset 3px 3px 0 rgba(255,255,255,.2);
}

.preview-tetris span:nth-child(1) { grid-column: 2; grid-row: 1; }
.preview-tetris span:nth-child(2) { grid-column: 2; grid-row: 2; }
.preview-tetris span:nth-child(3) { grid-column: 3; grid-row: 2; background: var(--yellow); }
.preview-tetris span:nth-child(4) { grid-column: 4; grid-row: 2; background: var(--yellow); }
.preview-tetris span:nth-child(5) { grid-column: 1; grid-row: 4; background: var(--orange); }
.preview-tetris span:nth-child(6) { grid-column: 2; grid-row: 4; background: var(--orange); }
.preview-tetris span:nth-child(7) { grid-column: 3; grid-row: 4; background: var(--orange); }
.preview-tetris span:nth-child(8) { grid-column: 3; grid-row: 3; background: var(--orange); }
.preview-tetris span:nth-child(9) { grid-column: 4; grid-row: 6; background: #49a5e6; }
.preview-tetris span:nth-child(10) { grid-column: 5; grid-row: 6; background: #49a5e6; }
.preview-tetris span:nth-child(11) { grid-column: 6; grid-row: 6; background: #49a5e6; }
.preview-tetris span:nth-child(12) { grid-column: 7; grid-row: 6; background: #49a5e6; }

.preview-tetris b {
    position: absolute;
    right: 11px;
    bottom: 14px;
    padding: .4rem .45rem;
    color: var(--black);
    background: var(--yellow);
    border: 2px solid var(--black);
    font-family: var(--mono);
    font-size: .51rem;
    line-height: 1.2;
    text-align: center;
    transform: rotate(3deg);
}

.game-meta {
    padding: 1.25rem .45rem .7rem;
}

.game-meta > span {
    color: var(--orange);
    font-family: var(--mono);
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.game-meta strong {
    display: block;
    margin: .3rem 0 .6rem;
    font-family: var(--display);
    font-size: 1.65rem;
    line-height: 1;
    text-transform: uppercase;
}

.game-meta p {
    margin-bottom: 0;
    color: #9dbbb5;
    font-size: .84rem;
}

.play-pill {
    display: flex;
    margin: auto .45rem 0;
    padding-top: .65rem;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--border);
    font-family: var(--mono);
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
}

.play-pill b {
    color: var(--orange);
    font-size: 1rem;
}

.arcade-banner {
    display: grid;
    margin-top: 1rem;
    min-height: 150px;
    overflow: hidden;
    color: var(--cream);
    background: linear-gradient(110deg, #4a3307, #12383a 55%, #0a2b2f);
    border: 2px solid #a77819;
    box-shadow: var(--shadow-small);
    grid-template-columns: 190px 1fr auto;
    align-items: center;
}

.arcade-banner img {
    width: 100%;
    height: 100%;
    min-height: 150px;
    object-fit: cover;
    border-right: 2px solid #a77819;
}

.arcade-banner > div:nth-child(2) {
    padding: 1.25rem 1.5rem;
}

.arcade-banner span {
    color: var(--yellow);
    font-family: var(--mono);
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .1em;
}

.arcade-banner strong {
    display: block;
    font-family: var(--display);
    font-size: clamp(1.35rem, 2.4vw, 2rem);
    text-transform: uppercase;
}

.arcade-banner p {
    margin: .2rem 0 0;
    color: #c6e5dc;
    font-size: .83rem;
}

.pixel-stars {
    padding: 1.5rem;
    color: var(--yellow);
    font-size: 1.4rem;
    letter-spacing: .35rem;
}

.centered-heading {
    max-width: 800px;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}

.centered-heading > p:last-child {
    max-width: 610px;
    margin: 1rem auto 0;
}

.reviews-list {
    display: grid;
    gap: 1.4rem;
}

.review-card {
    position: relative;
    display: grid;
    width: min(940px, 94%);
    min-height: 250px;
    padding: 1.4rem 2rem 1.4rem 1.4rem;
    background: var(--panel);
    border: 2px solid var(--border);
    box-shadow: var(--shadow);
    grid-template-columns: 190px 1fr;
    align-items: center;
    gap: 2rem;
}

.review-card::before {
    position: absolute;
    top: .5rem;
    right: 1.2rem;
    color: rgba(50, 214, 183, .08);
    content: '“';
    font-family: Georgia, serif;
    font-size: 9rem;
    line-height: 1;
}

.review-right {
    margin-left: auto;
}

.review-left {
    margin-right: auto;
}

.review-photo-wrap {
    position: relative;
    width: 170px;
    height: 190px;
}

.review-img {
    display: block;
    width: 170px;
    height: 170px;
    object-fit: cover;
    border: 3px solid var(--black);
    filter: saturate(.82) contrast(1.04);
}

.review-photo-wrap span {
    position: absolute;
    right: -12px;
    bottom: 4px;
    padding: .35rem .55rem;
    color: var(--black);
    background: var(--orange);
    border: 2px solid var(--black);
    font-family: var(--mono);
    font-size: .58rem;
    font-weight: 700;
    transform: rotate(-4deg);
}

.stars {
    margin-bottom: .65rem;
    color: var(--yellow);
    font-size: .95rem;
    letter-spacing: .1em;
}

.stars small {
    margin-left: .55rem;
    color: #799d98;
    font-family: var(--mono);
    font-size: .55rem;
    letter-spacing: 0;
    text-transform: uppercase;
}

blockquote {
    position: relative;
    z-index: 1;
    margin: 0 0 1rem;
    color: #d9ede7;
    font-size: clamp(.94rem, 1.7vw, 1.09rem);
    font-style: italic;
    line-height: 1.65;
}

cite {
    color: var(--mint);
    font-family: var(--mono);
    font-size: .7rem;
    font-style: normal;
    font-weight: 700;
}

.redacted {
    display: inline;
    padding: 0 .14em;
    color: #000;
    background: #000;
    border: 1px solid #0d0d0d;
    border-radius: 1px;
    cursor: pointer;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    transition: color .16s, background .16s;
}

.redacted.revealed {
    color: var(--cream);
    background: var(--red);
}

.redacted:focus-visible {
    outline: 2px solid var(--yellow);
    outline-offset: 2px;
}

.review-disclaimer {
    margin: 2.5rem auto 0;
    color: #648b86;
    font-family: var(--mono);
    font-size: .62rem;
    text-align: center;
}

.pricing-section {
    width: 100%;
    max-width: none;
    padding-right: max(1.5rem, calc((100vw - 1240px) / 2));
    padding-left: max(1.5rem, calc((100vw - 1240px) / 2));
    background:
        linear-gradient(rgba(2, 25, 27, .96), rgba(2, 18, 20, .98)),
        repeating-linear-gradient(90deg, transparent 0 79px, rgba(50, 214, 183, .05) 79px 80px);
    border-top: 2px solid var(--border);
    border-bottom: 2px solid var(--border);
    color: var(--cream);
}

.pricing-section .kicker,
.pricing-section .centered-heading > p {
    color: #91b4ae;
}

.pricing-section .centered-heading h2 {
    max-width: 900px;
    margin-right: auto;
    margin-left: auto;
    font-size: clamp(2.6rem, 5.2vw, 5.2rem);
}

.pricing-section .centered-heading > p:last-child {
    max-width: 720px;
}

.pricing-proof {
    --proof-accent: #9b7624;
    --proof-tilt: -.28deg;
    width: min(620px, calc(100% - 10px));
    margin: -1.6rem auto 2.5rem;
    grid-template-columns: 190px minmax(0, 1fr);
}

.pricing-proof .gif-proof-media {
    aspect-ratio: 498 / 462;
}

.pricing-proof figcaption strong {
    font-size: clamp(1.05rem, 2vw, 1.45rem);
}

.billing-toggle {
    display: flex;
    width: max-content;
    max-width: 100%;
    margin: -1.4rem auto 2.2rem;
    padding: .3rem;
    background: #082f32;
    border: 2px solid var(--border);
}

.billing-toggle button {
    min-height: 44px;
    padding: .5rem .8rem;
    color: var(--cream);
    background: transparent;
    border: 0;
    font-family: var(--mono);
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
}

.billing-toggle button.active {
    color: var(--black);
    background: var(--yellow);
}

.billing-toggle span {
    color: var(--orange);
    font-size: .52rem;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 1rem;
}

.price-card {
    position: relative;
    display: flex;
    min-height: 500px;
    padding: 1.65rem 1.45rem 1.35rem;
    flex-direction: column;
    color: var(--cream);
    background: #082b2f;
    border: 2px solid #18545a;
    box-shadow: 6px 6px 0 #000a0b;
}

.featured-price {
    background: #0b4545;
    border-color: var(--orange);
    transform: none;
}

.enterprise-price {
    background: #102f31;
    border-color: #9b7624;
}

.popular-tag {
    position: absolute;
    top: -15px;
    right: 1rem;
    padding: .35rem .65rem;
    color: var(--black);
    background: var(--orange);
    border: 2px solid var(--black);
    font-family: var(--mono);
    font-size: .58rem;
    font-weight: 700;
    text-transform: uppercase;
    transform: rotate(2deg);
}

.plan-label {
    margin-bottom: .5rem;
    font-family: var(--mono);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.price-card h3 {
    margin-bottom: 1.1rem;
    font-family: var(--display);
    font-size: clamp(2.1rem, 3.2vw, 3.2rem);
    line-height: .92;
    letter-spacing: -.06em;
    text-transform: uppercase;
}

.price-card h3 small {
    display: block;
    margin-top: .45rem;
    font-family: var(--mono);
    font-size: .55rem;
    letter-spacing: 0;
}

.price-card > p:not(.plan-label) {
    min-height: 72px;
    color: #b7cfca;
    font-size: .85rem;
}

.price-card ul {
    display: grid;
    margin: 1rem 0 2rem;
    padding: 1.2rem 0 0;
    border-top: 2px solid currentColor;
    list-style: none;
    gap: .85rem;
}

.price-card li {
    font-size: .78rem;
}

.price-card li span {
    display: inline-grid;
    width: 20px;
    height: 20px;
    margin-right: .45rem;
    place-items: center;
    color: var(--black);
    background: var(--mint);
    border: 1px solid var(--black);
    font-size: .65rem;
    font-weight: 900;
}

.price-card .button {
    width: 100%;
    margin-top: auto;
}

.featured-price .button-ghost {
    border-color: var(--black);
}

.pricing-section .button-ghost {
    color: var(--cream);
    border-color: var(--mint);
}

.fine-print {
    max-width: 900px;
    margin: 2.5rem auto 0;
    color: #789d97;
    font-family: var(--mono);
    font-size: .58rem;
    text-align: center;
}

.faq-section {
    display: grid;
    grid-template-columns: .72fr 1.28fr;
    gap: clamp(3rem, 8vw, 8rem);
}

.faq-intro img {
    display: block;
    width: min(310px, 100%);
    height: 210px;
    margin-top: 2rem;
    object-fit: contain;
    background: var(--panel);
    border: 3px solid var(--black);
    box-shadow: 9px 9px 0 var(--orange);
    transform: rotate(-2deg);
}

.faq-list details {
    border-top: 1px solid var(--border);
}

.faq-list details:last-child {
    border-bottom: 1px solid var(--border);
}

.faq-list summary {
    display: flex;
    min-height: 76px;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    color: var(--cream);
    font-family: var(--display);
    font-size: clamp(1rem, 2vw, 1.3rem);
    letter-spacing: -.025em;
    text-transform: uppercase;
    cursor: pointer;
    list-style: none;
}

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

.faq-list summary span {
    display: grid;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    place-items: center;
    color: var(--black);
    background: var(--orange);
    border: 2px solid var(--black);
    font-family: var(--mono);
    transition: transform .2s;
}

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

.faq-list p {
    padding: 0 3.5rem 1.4rem 0;
    font-size: .9rem;
}

/* Every insert looks like it was stapled onto the page during an evacuation. */
.feature-card,
.game-card,
.review-card,
.price-card,
.arcade-banner,
.faq-list details,
.billing-toggle {
    --insert-tilt: -.42deg;
    --insert-offset: var(--orange);
    box-shadow: 7px 7px 0 var(--insert-offset), 10px 10px 0 var(--black);
    transform: rotate(var(--insert-tilt));
    transform-origin: center;
}

.bento-grid > .feature-card:nth-child(even),
.arcade-grid > .game-card:nth-child(even),
.reviews-list > .review-card:nth-child(even),
.pricing-grid > .price-card:nth-child(even),
.faq-list > details:nth-child(even) {
    --insert-tilt: .42deg;
    --insert-offset: var(--teal);
}

.bento-grid > .feature-card:nth-child(3n),
.arcade-grid > .game-card:nth-child(3n),
.pricing-grid > .price-card:nth-child(3n),
.faq-list > details:nth-child(3n) {
    --insert-tilt: -.26deg;
    --insert-offset: #9b7624;
}

.game-card:hover,
.game-card:focus-visible {
    box-shadow: 10px 10px 0 var(--insert-offset), 13px 13px 0 var(--black);
    transform: translate(-3px, -3px) rotate(var(--insert-tilt));
}

.arcade-banner {
    --insert-tilt: .28deg;
    --insert-offset: #9b7624;
}

.billing-toggle {
    --insert-tilt: -.8deg;
}

.faq-list details {
    margin: .75rem 0;
    background: rgba(10, 43, 47, .72);
    border: 1px solid var(--border);
}

.faq-list summary {
    padding: 0 1rem;
}

.faq-list p {
    padding: 0 3.5rem 1.4rem 1rem;
}

.site-footer {
    color: var(--cream);
    background: #031315;
    border-top: 3px solid var(--orange);
}

.footer-top,
.footer-bottom {
    width: min(1240px, calc(100% - 3rem));
    margin: 0 auto;
}

.footer-top {
    display: grid;
    min-height: 250px;
    padding: 3.5rem 0;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 3rem;
}

.footer-top > div:first-child > p {
    max-width: 460px;
    margin: 1.2rem 0 0;
    color: #c6e5dc;
    font-weight: 700;
}

.footer-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(130px, 1fr));
    gap: .7rem 2rem;
}

.footer-links a,
.footer-links button {
    display: flex;
    min-height: 44px;
    padding: .25rem 0;
    align-items: center;
    color: var(--cream);
    background: transparent;
    border: 0;
    font-family: var(--mono);
    font-size: .68rem;
    font-weight: 700;
    text-align: left;
    text-decoration: underline;
    text-underline-offset: .2rem;
    text-transform: uppercase;
    cursor: pointer;
}

.footer-bottom {
    display: flex;
    min-height: 60px;
    padding: 1rem 0;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    color: var(--mint-pale);
    border-top: 2px solid var(--border);
    font-family: var(--mono);
    font-size: .57rem;
    font-weight: 700;
    text-transform: uppercase;
}

.footer-bottom button {
    min-height: 44px;
    padding: .2rem .4rem;
    color: var(--cream);
    background: transparent;
    border: 1px solid var(--mint);
    font-size: .52rem;
    cursor: pointer;
}

.support-launcher {
    position: fixed;
    z-index: 900;
    right: 1.25rem;
    bottom: 1.25rem;
    display: flex;
    padding: 0;
    align-items: center;
    gap: .55rem;
    background: transparent;
    border: 0;
    cursor: pointer;
    filter: drop-shadow(4px 5px 0 var(--black));
}

.support-label {
    padding: .5rem .7rem;
    color: var(--black);
    background: var(--yellow);
    border: 2px solid var(--black);
    font-family: var(--mono);
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
}

.support-avatar {
    display: block;
    width: 68px;
    height: 68px;
    overflow: hidden;
    background: var(--panel);
    border: 3px solid var(--orange);
    border-radius: 50%;
}

.support-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.support-panel {
    position: fixed;
    z-index: 950;
    right: 1.25rem;
    bottom: 6.6rem;
    display: none;
    width: min(370px, calc(100vw - 2rem));
    overflow: hidden;
    color: var(--cream);
    background: var(--panel);
    border: 2px solid var(--black);
    box-shadow: 8px 8px 0 var(--orange);
}

.support-panel.open {
    display: block;
    animation: chat-in .2s ease-out;
}

.support-header {
    display: flex;
    min-height: 63px;
    padding: .7rem .8rem;
    align-items: center;
    justify-content: space-between;
    background: var(--teal-dark);
    border-bottom: 2px solid var(--black);
}

.support-header > div {
    display: grid;
    padding-left: 1.2rem;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0 .45rem;
}

.support-header strong {
    font-family: var(--mono);
    font-size: .75rem;
    text-transform: uppercase;
}

.support-header small {
    color: var(--mint-pale);
    font-family: var(--mono);
    font-size: .52rem;
    grid-column: 2;
}

.support-header small b {
    color: var(--yellow);
    font-weight: 700;
}

.support-header button,
.dialog-close {
    display: grid;
    width: 36px;
    height: 36px;
    padding: 0;
    place-items: center;
    color: var(--cream);
    background: var(--ink);
    border: 1px solid var(--border);
    font-size: 1.35rem;
    cursor: pointer;
}

.support-messages {
    display: flex;
    min-height: 150px;
    max-height: 285px;
    padding: 1rem;
    overflow-y: auto;
    flex-direction: column;
    gap: .7rem;
}

.bot-message,
.user-message {
    max-width: 88%;
    padding: .7rem .8rem;
    font-size: .78rem;
    line-height: 1.45;
}

.bot-message {
    align-self: flex-start;
    background: var(--ink-soft);
    border: 1px solid var(--border);
    border-radius: 0 10px 10px 10px;
}

.user-message {
    align-self: flex-end;
    color: var(--black);
    background: var(--orange);
    border-radius: 10px 0 10px 10px;
}

.support-options {
    display: flex;
    padding: .8rem;
    flex-wrap: wrap;
    gap: .45rem;
    border-top: 1px solid var(--border);
}

.support-options button {
    min-height: 34px;
    padding: .35rem .55rem;
    color: var(--mint-pale);
    background: var(--ink-soft);
    border: 1px solid var(--teal);
    font-family: var(--mono);
    font-size: .55rem;
    font-weight: 700;
    cursor: pointer;
}

.support-options button:hover {
    color: var(--black);
    background: var(--mint);
}

.support-options.cheat-pad {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}

.support-options.cheat-pad button {
    min-width: 0;
    padding: .45rem .2rem;
    font-size: .75rem;
}

.support-options.cheat-pad .cheat-back {
    grid-column: 1 / -1;
    font-size: .53rem;
}

.support-options.cheat-pad button.used {
    color: var(--black);
    background: var(--orange);
    border-color: var(--yellow);
}

.cookie-banner {
    position: fixed;
    z-index: 1300;
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
    display: grid;
    max-width: 860px;
    margin: 0 auto;
    padding: .9rem 1rem;
    color: var(--black);
    background: var(--paper);
    border: 3px solid var(--black);
    box-shadow: 8px 8px 0 var(--orange);
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1rem;
    animation: banner-in .45s .5s both;
}

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

.cookie-icon {
    font-size: 2.2rem;
}

.cookie-banner strong {
    font-family: var(--display);
    font-size: .92rem;
    text-transform: uppercase;
}

.cookie-banner p {
    margin: .1rem 0 0;
    color: #506b67;
    font-size: .72rem;
}

.cookie-actions {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.cookie-actions .button {
    min-height: 40px;
    padding: .6rem .8rem;
    font-size: .58rem;
}

.text-button {
    padding: .3rem 0;
    color: var(--black);
    background: transparent;
    border: 0;
    border-bottom: 1px solid currentColor;
    font-family: var(--mono);
    font-size: .54rem;
    font-weight: 700;
    cursor: pointer;
}

.checkout-dialog {
    width: min(520px, calc(100% - 2rem));
    max-height: min(760px, calc(100vh - 2rem));
    padding: 2rem;
    overflow: auto;
    color: var(--cream);
    background: var(--panel);
    border: 3px solid var(--black);
    box-shadow: 12px 12px 0 var(--orange);
}

.checkout-dialog::backdrop {
    background: rgba(0, 8, 9, .82);
    backdrop-filter: blur(6px);
}

.checkout-dialog[open] {
    animation: dialog-in .2s ease-out;
}

.checkout-dialog .dialog-close {
    position: absolute;
    top: .7rem;
    right: .7rem;
}

.checkout-dialog h2 {
    margin-bottom: 1.2rem;
    padding-right: 2.4rem;
    font-family: var(--display);
    font-size: 2.3rem;
    line-height: 1;
    text-transform: uppercase;
}

.checkout-terminal {
    min-height: 105px;
    margin-bottom: 1rem;
    padding: .8rem;
    color: var(--mint);
    background: var(--black);
    border: 1px solid var(--border);
    font-family: var(--mono);
    font-size: .62rem;
    line-height: 1.7;
}

.checkout-terminal p {
    margin: 0;
}

.checkout-proof {
    --proof-accent: var(--mint);
    --proof-tilt: .38deg;
    margin: .25rem 7px 1.35rem 0;
    grid-template-columns: minmax(0, 1.45fr) minmax(130px, .9fr);
}

.checkout-proof .gif-proof-media {
    aspect-ratio: 360 / 204;
}

.checkout-proof figcaption {
    padding: .7rem;
}

.checkout-proof figcaption strong {
    font-size: .88rem;
}

.fake-card {
    position: relative;
    min-height: 205px;
    margin: 1.2rem 0;
    padding: 1.4rem;
    overflow: hidden;
    color: var(--black);
    background: var(--yellow);
    border: 3px solid var(--black);
    box-shadow: var(--shadow-small);
    font-family: var(--mono);
    transform: rotate(-1deg);
}

.fake-card::after {
    position: absolute;
    top: -45px;
    right: -45px;
    width: 160px;
    height: 160px;
    background: var(--orange);
    border: 3px solid var(--black);
    border-radius: 50%;
    content: '';
}

.fake-card > span,
.fake-card > strong,
.fake-card b {
    display: block;
}

.fake-card > span,
.fake-card div span {
    font-size: .55rem;
}

.fake-card > strong {
    position: relative;
    z-index: 1;
    margin-top: .3rem;
    font-size: clamp(1rem, 5vw, 1.4rem);
    letter-spacing: .08em;
}

.fake-card > div {
    position: absolute;
    right: 1.4rem;
    bottom: 1.2rem;
    left: 1.4rem;
    display: flex;
    justify-content: space-between;
}

.checkout-dialog > .button {
    width: 100%;
}

.checkout-dialog > small {
    display: block;
    margin-top: .75rem;
    color: #7fa39e;
    font-family: var(--mono);
    font-size: .56rem;
    text-align: center;
}

.dossier-dialog {
    width: min(760px, calc(100% - 2rem));
    max-height: min(880px, calc(100vh - 2rem));
    padding: 2.3rem;
    overflow: auto;
    color: var(--black);
    background:
        linear-gradient(rgba(255, 242, 199, .94), rgba(246, 232, 184, .96)),
        repeating-linear-gradient(0deg, transparent 0 28px, rgba(3, 19, 21, .1) 28px 29px);
    border: 4px solid var(--black);
    box-shadow: 14px 14px 0 var(--red);
}

.dossier-dialog::backdrop {
    background: rgba(0, 8, 9, .9);
    backdrop-filter: blur(7px) saturate(.5);
}

.dossier-dialog[open] {
    animation: dossier-in .28s ease-out;
}

.dossier-dialog .dialog-close {
    position: absolute;
    z-index: 3;
    top: .7rem;
    right: .7rem;
}

.dossier-classification {
    margin: -2.3rem -2.3rem 2rem;
    padding: .7rem 3.5rem .7rem 1rem;
    color: var(--cream);
    background: var(--black);
    font-family: var(--mono);
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .08em;
}

.dossier-stamp {
    position: absolute;
    z-index: 2;
    top: 4rem;
    right: 2rem;
    padding: .55rem .7rem;
    color: var(--red);
    border: 4px double var(--red);
    font-family: var(--display);
    font-size: .72rem;
    line-height: 1;
    text-align: center;
    transform: rotate(9deg);
}

.dossier-dialog .kicker {
    max-width: calc(100% - 125px);
    color: #8c261f;
}

.dossier-dialog h2 {
    max-width: 610px;
    margin-bottom: 1rem;
    font-family: var(--display);
    font-size: clamp(2.1rem, 5.2vw, 3.7rem);
    line-height: .94;
    letter-spacing: -.055em;
    text-transform: uppercase;
}

.dossier-lede {
    max-width: 650px;
    padding: .8rem 1rem;
    background: var(--yellow);
    border: 2px solid var(--black);
    font-weight: 800;
}

.dossier-seals {
    display: grid;
    margin: 1.3rem 0;
    grid-template-columns: repeat(5, 1fr);
    gap: .45rem;
}

.dossier-seals span {
    display: grid;
    min-height: 52px;
    padding: .4rem;
    place-items: center;
    color: #5b6d68;
    background: rgba(3, 19, 21, .08);
    border: 2px dashed #71817c;
    font-family: var(--mono);
    font-size: .54rem;
    font-weight: 700;
    text-align: center;
}

.dossier-seals span.broken {
    color: var(--cream);
    background: var(--red);
    border-color: var(--black);
    text-decoration: line-through 2px;
    transform: rotate(-2deg);
}

.dossier-seals span:nth-child(even).broken {
    transform: rotate(2deg);
}

.dossier-timeline {
    display: grid;
    margin: 1.6rem 0;
    padding: 0;
    list-style: none;
    gap: .55rem;
}

.dossier-timeline li {
    display: grid;
    padding: .6rem 0;
    border-bottom: 1px solid rgba(3, 19, 21, .25);
    grid-template-columns: 65px 1fr;
    gap: .8rem;
    font-size: .82rem;
}

.dossier-timeline time {
    color: var(--red);
    font-family: var(--mono);
    font-weight: 700;
}

.dossier-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.dossier-actions .button-ghost {
    color: var(--black);
    background: transparent;
    border-color: var(--black);
}

.toast-region {
    position: fixed;
    z-index: 1500;
    top: 7.4rem;
    right: 1rem;
    display: grid;
    width: min(340px, calc(100vw - 2rem));
    gap: .55rem;
    pointer-events: none;
}

.toast {
    padding: .75rem .9rem;
    color: var(--black);
    background: var(--yellow);
    border: 2px solid var(--black);
    box-shadow: var(--shadow-small);
    font-family: var(--mono);
    font-size: .64rem;
    font-weight: 700;
    animation: toast-in .25s ease-out, toast-out .25s 3.45s ease-in forwards;
}

.confetti {
    position: fixed;
    z-index: 1400;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    pointer-events: none;
}

.confetti span {
    position: absolute;
    top: -4rem;
    font-size: clamp(1rem, 3vw, 2rem);
    animation: debris-fall var(--fall-time, 2.4s) var(--fall-delay, 0s) ease-in forwards;
}

.error-body {
    display: grid;
    min-height: 100svh;
    place-items: center;
}

.error-page {
    display: grid;
    width: min(1100px, calc(100% - 3rem));
    padding: 4rem 0;
    grid-template-columns: 1.1fr .9fr;
    align-items: center;
    gap: clamp(2.5rem, 8vw, 7rem);
}

.error-copy h1 {
    margin-bottom: 1.4rem;
    font-family: var(--display);
    font-size: clamp(3.2rem, 7vw, 6.2rem);
    line-height: .88;
    letter-spacing: -.065em;
    text-transform: uppercase;
}

.error-copy > p:not(.kicker) {
    max-width: 610px;
    color: #a5c4bd;
    font-size: 1.05rem;
}

.error-gif {
    margin: 0;
    padding: .8rem;
    background: var(--yellow);
    border: 3px solid var(--black);
    box-shadow: 12px 12px 0 var(--orange);
    transform: rotate(2deg);
}

.error-gif img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / .85;
    object-fit: cover;
    border: 2px solid var(--black);
}

.error-gif figcaption {
    padding: .65rem .2rem 0;
    color: var(--black);
    font-family: var(--mono);
    font-size: .6rem;
    font-weight: 700;
}

@keyframes pulse {
    50% { opacity: .35; transform: scale(.75); }
}

@keyframes log-in {
    from { opacity: 0; transform: translateX(-8px); }
}

@keyframes chat-in {
    from { opacity: 0; transform: translateY(12px) scale(.97); }
}

@keyframes banner-in {
    from { opacity: 0; transform: translateY(130%); }
}

@keyframes dialog-in {
    from { opacity: 0; transform: translateY(20px) rotate(-1deg); }
}

@keyframes toast-in {
    from { opacity: 0; transform: translateX(110%); }
}

@keyframes toast-out {
    to { opacity: 0; transform: translateX(110%); }
}

@keyframes debris-fall {
    to { transform: translateY(115vh) rotate(720deg); }
}

@keyframes emergency-flash {
    50% { filter: hue-rotate(165deg) contrast(1.2); }
}

@keyframes dossier-in {
    from { opacity: 0; transform: translateY(24px) rotate(-1deg) scale(.97); }
}

@keyframes bad-node {
    50% { filter: brightness(1.65); }
}

@keyframes seance-pulse {
    50% { transform: scale(.88); opacity: .7; }
}

@media (max-width: 1060px) {
    .nav-links {
        gap: .8rem;
    }

    .nav-links > a {
        font-size: .62rem;
    }

    .hero {
        grid-template-columns: 1.05fr .95fr;
        gap: 3rem;
    }

    .hero h1 {
        font-size: clamp(3rem, 6vw, 4.6rem);
    }

    .feature-large {
        grid-template-columns: 1fr;
    }

    .feature-large img {
        height: 210px;
        min-height: 210px;
        border-top: 2px solid var(--black);
        border-left: 0;
        order: -1;
    }

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

    .price-card:last-child {
        grid-column: 1 / -1;
    }

    .price-card:last-child {
        min-height: 470px;
    }

    .featured-price {
        transform: rotate(var(--insert-tilt));
    }
}

@media (max-width: 800px) {
    html {
        scroll-padding-top: 6.5rem;
    }

    .nav-shell {
        width: min(100% - 1.5rem, 1240px);
        min-height: 68px;
    }

    .nav-toggle {
        display: block;
    }

    .nav-links {
        position: absolute;
        top: calc(100% + 2px);
        right: 0;
        left: 0;
        display: none;
        padding: .7rem .75rem 1rem;
        background: rgba(3, 19, 21, .98);
        border-bottom: 2px solid var(--border);
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .nav-links.open {
        display: flex;
    }

    .nav-links > a {
        padding: .9rem .4rem;
        border-bottom: 1px solid var(--border);
        font-size: .7rem;
    }

    .nav-links > a::after {
        display: none;
    }

    .nav-status {
        margin-top: .7rem;
        justify-content: center;
    }

    .hero {
        width: min(100% - 2rem, 640px);
        padding: 4.5rem 0 6rem;
        grid-template-columns: 1fr;
        gap: 4rem;
    }

    .hero-visual {
        width: min(540px, 95%);
        margin: 0 auto;
    }

    .section {
        width: min(100% - 2rem, 700px);
        padding: 5.5rem 0;
    }

    .split-heading,
    .arcade-heading,
    .incident-section,
    .faq-section {
        grid-template-columns: 1fr;
        gap: 1.4rem;
    }

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

    .feature-card,
    .feature-large,
    .feature-tall,
    .feature-gif,
    .feature-yellow,
    .feature-wide {
        grid-column: span 1;
        grid-row: auto;
    }

    .feature-large,
    .feature-wide {
        grid-template-columns: 1fr;
    }

    .feature-large {
        min-height: 0;
    }

    .feature-tall {
        min-height: 340px;
    }

    .feature-wide img {
        height: 210px;
        min-height: 210px;
        border-top: 2px solid var(--black);
        border-left: 0;
    }

    .incident-section {
        display: flex;
        flex-direction: column-reverse;
    }

    .terminal-window {
        width: 100%;
    }

    .arcade-section,
    .pricing-section {
        width: 100%;
        padding-right: 1rem;
        padding-left: 1rem;
    }

    .arcade-heading,
    .arcade-grid,
    .arcade-banner,
    .pricing-section > * {
        max-width: 700px;
        margin-right: auto;
        margin-left: auto;
    }

    .review-card {
        width: 100%;
        grid-template-columns: 145px 1fr;
        gap: 1.4rem;
    }

    .review-photo-wrap,
    .review-img {
        width: 135px;
    }

    .review-photo-wrap {
        height: 155px;
    }

    .review-img {
        height: 135px;
    }

    .faq-intro img {
        width: 260px;
    }

    .error-page {
        grid-template-columns: 1fr;
    }

    .error-gif {
        width: min(520px, 94%);
        margin: 0 auto;
        order: -1;
    }
}

@media (max-width: 620px) {
    .feature-card,
    .game-card,
    .review-card,
    .price-card,
    .arcade-banner,
    .faq-list details,
    .billing-toggle {
        --insert-tilt: 0deg;
        box-shadow: 5px 5px 0 var(--insert-offset), 7px 7px 0 var(--black);
        transform: none;
    }

    .game-card:hover,
    .game-card:focus-visible {
        transform: translate(-2px, -2px);
    }

    .gif-proof {
        margin-right: 6px;
        box-shadow: 4px 4px 0 var(--proof-accent), 6px 6px 0 var(--black);
        transform: rotate(.12deg);
    }

    .pricing-proof {
        width: calc(100% - 6px);
        margin-top: -1rem;
        grid-template-columns: 132px minmax(0, 1fr);
    }

    .brand small {
        display: none;
    }

    .hero {
        padding-top: 3.5rem;
    }

    .hero h1 {
        font-size: clamp(2.35rem, 11vw, 3.45rem);
    }

    .hero-lede {
        font-size: 1rem;
    }

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

    .hero-metrics {
        grid-template-columns: 1fr;
    }

    .hero-metrics div,
    .hero-metrics div:first-child {
        display: flex;
        padding: .6rem 0;
        align-items: baseline;
        justify-content: space-between;
        gap: 1rem;
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    .hero-metrics div:last-child {
        border-bottom: 0;
    }

    .hero-visual {
        padding: .65rem;
        box-shadow: 8px 8px 0 var(--teal-dark), 11px 11px 0 var(--black);
    }

    .incident-card {
        grid-template-columns: auto 1fr;
    }

    .incident-time {
        display: none;
    }

    .corpse-logos {
        gap: 1.2rem 1.8rem;
    }

    .bento-grid,
    .arcade-grid,
    .pricing-grid {
        grid-template-columns: 1fr;
    }

    .game-card,
    .price-card {
        grid-column: auto !important;
    }

    .feature-card,
    .feature-tall {
        min-height: 0;
    }

    .feature-large img,
    .feature-wide img {
        height: 190px;
        min-height: 190px;
    }

    .arcade-banner {
        grid-template-columns: 110px 1fr;
    }

    .arcade-banner img {
        min-height: 170px;
    }

    .pixel-stars {
        display: none;
    }

    .review-card {
        padding: 1.1rem;
        grid-template-columns: 1fr;
        text-align: left;
    }

    .review-photo-wrap {
        width: 105px;
        height: 117px;
    }

    .review-img {
        width: 105px;
        height: 105px;
    }

    .review-photo-wrap span {
        right: -25px;
        bottom: -2px;
    }

    .price-card {
        min-height: 0 !important;
    }

    .price-card > p:not(.plan-label) {
        min-height: 0;
    }

    .billing-toggle {
        width: 100%;
    }

    .billing-toggle button {
        flex: 1;
    }

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

    .footer-bottom {
        align-items: flex-start;
        flex-direction: column;
    }

    .support-label {
        display: none;
    }

    .support-launcher {
        z-index: 1001;
        top: 10px;
        right: 4.45rem;
        bottom: auto;
        opacity: .92;
        transition: opacity .18s ease;
    }

    .support-launcher:hover,
    .support-launcher:focus-visible,
    .support-launcher[aria-expanded="true"] {
        opacity: 1;
    }

    .support-avatar {
        width: 48px;
        height: 48px;
    }

    .support-panel {
        top: 4.65rem;
        right: .75rem;
        bottom: auto;
        width: min(370px, calc(100vw - 1.5rem));
        max-height: calc(100dvh - 5.4rem);
    }

    .cookie-banner {
        grid-template-columns: auto 1fr;
    }

    .cookie-actions {
        grid-column: 1 / -1;
        justify-content: stretch;
    }

    .cookie-actions .button {
        flex: 1;
    }

    .dossier-dialog {
        padding: 1.3rem;
    }

    .dossier-classification {
        margin: -1.3rem -1.3rem 1.4rem;
        font-size: .53rem;
    }

    .dossier-stamp {
        top: 3.6rem;
        right: 1rem;
        font-size: .57rem;
    }

    .dossier-dialog .kicker {
        max-width: calc(100% - 90px);
    }

    .dossier-seals {
        grid-template-columns: repeat(2, 1fr);
    }

    .dossier-seals span:last-child {
        grid-column: 1 / -1;
    }

    .dossier-actions .button {
        width: 100%;
    }
}

@media (max-width: 390px) {
    .brand-mark {
        width: 52px;
        height: 42px;
    }

    .brand-puff,
    .brand-knot-icon {
        font-size: 1.35rem;
    }

    .brand-puff {
        top: 6px;
        left: 3px;
    }

    .brand-knot-icon {
        right: 2px;
        bottom: 3px;
    }

    .brand strong {
        font-size: 1rem;
    }

    .hero,
    .section,
    .footer-top,
    .footer-bottom {
        width: calc(100% - 1.25rem);
    }

    .hero h1 {
        font-size: clamp(2.2rem, 10.7vw, 2.55rem);
    }

    .incident-card strong {
        font-size: .67rem;
    }

    .terminal-body {
        padding: 1rem .75rem;
        font-size: .58rem;
    }

    .terminal-body b {
        min-width: 34px;
        margin: 0 .2rem;
    }

    .arcade-banner {
        display: block;
    }

    .arcade-banner img {
        width: 100%;
        height: 130px;
        min-height: 130px;
        border-right: 0;
        border-bottom: 2px solid var(--black);
    }

    .arcade-banner strong {
        font-size: clamp(1.05rem, 5.2vw, 1.25rem);
        overflow-wrap: anywhere;
    }

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

    .cookie-banner {
        right: .5rem;
        bottom: .5rem;
        left: .5rem;
        gap: .65rem;
    }

    .cookie-icon {
        font-size: 1.5rem;
    }

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

    .checkout-dialog {
        padding: 1.25rem;
    }
}

@media (max-width: 420px) {
    .checkout-proof {
        grid-template-columns: 1fr;
    }

    .checkout-proof .gif-proof-media {
        border-right: 0;
        border-bottom: 2px solid var(--black);
    }

    .checkout-proof figcaption {
        min-height: 82px;
    }
}

@media (max-width: 360px) {
    .pricing-proof {
        grid-template-columns: 110px minmax(0, 1fr);
    }

    .pricing-proof figcaption {
        padding: .65rem;
    }

    .checkout-dialog h2 {
        font-size: 1.85rem;
    }
}

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

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

}