:root {
  color-scheme:dark;
  --ink:#11140e;
  --panel:#1a1e15;
  --lime:#d6ff45;
  --yellow:#f4e17a;
  --white:#f2f3e8;
  --muted:#a6ad99;
  --line:rgba(220,237,186,.19);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --mono:"SFMono-Regular",Consolas,"Liberation Mono",monospace
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:100px
}
body {
  margin:0;
  background:var(--ink);
  color:var(--white);
  font-family:var(--font);
  font-size:16px;
  -webkit-font-smoothing:antialiased
}
a {
  color:inherit;
  text-decoration:none
}
button,a,summary {
  -webkit-tap-highlight-color:transparent
}
a:focus-visible,summary:focus-visible {
  outline:2px solid var(--lime);
  outline-offset:6px
}
img {
  display:block;
  max-width:100%
}
svg {
  display:block
}
p,h1,h2,h3 {
  margin:0
}
p {
  line-height:1.65
}
ul {
  margin:0;
  padding:0;
  list-style:none
}
::selection {
  background:var(--lime);
  color:var(--ink)
}
.container {
  width:min(1280px,calc(100% - 96px));
  margin-inline:auto
}
.section-space {
  padding-block:112px
}
.micro,.eyebrow {
  font:10px/1.5 var(--mono);
  letter-spacing:.1em;
  text-transform:uppercase
}
.eyebrow {
  display:flex;
  align-items:center;
  gap:14px;
  color:var(--lime);
  font-size:11px;
  font-weight:600
}
.eyebrow>span:first-child:not(.status-dot) {
  color:var(--muted);
  border-right:1px solid var(--line);
  padding-right:14px
}
.skip-link {
  position:fixed;
  top:-100px;
  left:20px;
  z-index:100;
  background:var(--lime);
  color:var(--ink);
  padding:12px 18px
}
.skip-link:focus {
  top:12px
}
.site-header {
  height:108px;
  border-bottom:1px solid var(--line)
}
.header-inner {
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px
}
.brand {
  display:inline-flex;
  gap:12px;
  align-items:center;
  flex-shrink:0
}
.brand-mark {
  width:36px;
  height:32px;
  color:var(--lime)
}
.brand>span {
  font-weight:800;
  font-size:21px;
  letter-spacing:-.7px;
  line-height:.95
}
.brand>span>span {
  display:block
}
.header-inner nav {
  display:flex;
  gap:36px;
  font-size:13px;
  color:#c1c7b6
}
.header-inner nav a:hover {
  color:var(--lime)
}
.header-cta {
  border:1px solid #b3bd97;
  border-radius:3px;
  padding:13px 18px;
  font-size:12px;
  font-weight:600;
  display:flex;
  gap:25px;
  align-items:center
}
.header-cta:hover {
  background:var(--lime);
  color:var(--ink);
  border-color:var(--lime)
}
.header-cta>span {
  font-size:20px;
  font-weight:400
}
.hero {
  padding-top:44px;
  overflow:hidden
}
.hero-topline {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px
}
.status-dot {
  display:inline-block;
  flex-shrink:0;
  width:6px;
  height:6px;
  background:var(--lime);
  border-radius:50%;
  box-shadow:0 0 12px #d6ff4545
}
.hero-coordinate {
  color:#8b947c
}
.hero-copy {
  display:grid;
  grid-template-columns:1.8fr 1fr;
  gap:50px;
  align-items:end;
  padding:34px 0 64px
}
.hero h1 {
  font-size:clamp(64px,7.9vw,116px);
  line-height:.99;
  letter-spacing:-.075em;
  position:relative;
  font-weight:600
}
.hero h1>span:first-child {
  color:var(--lime)
}
.hero-asterisk {
  position:absolute;
  top:6px;
  right:50px;
  color:var(--yellow);
  font-size:50px;
  letter-spacing:0;
  font-weight:400
}
.hero-aside {
  padding-left:10px;
  max-width:345px;
  padding-bottom:5px
}
.hero-aside>p:first-child {
  font-size:22px;
  font-weight:500;
  line-height:1.35;
  letter-spacing:-.5px
}
.hero-description {
  font-size:14px;
  color:var(--muted);
  margin:15px 0 24px;
  line-height:1.65
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:36px;
  background:var(--lime);
  color:var(--ink);
  padding:17px 22px;
  border:1px solid var(--lime);
  border-radius:3px;
  font-size:13px;
  font-weight:650;
  line-height:1.2;
  transition:background .15s,transform .15s
}
.button svg {
  width:21px;
  height:21px
}
.button:hover {
  background:#e2ff7b;
  transform:translateY(-2px)
}
.button-secondary {
  background:transparent;
  color:var(--lime)
}
.button-secondary:hover {
  background:var(--panel)
}
.hero-availability {
  display:block;
  font:10px var(--mono);
  color:var(--muted);
  margin-top:15px;
  letter-spacing:.02em
}
.hero-availability>span {
  margin:0 7px;
  color:#69725a
}
.preview-scene {
  position:relative;
  max-width:1120px;
  margin:0 auto
}
.preview-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 0 14px;
  color:var(--muted)
}
.preview-label {
  display:flex;
  align-items:center;
  gap:9px;
  font:10px var(--mono);
  letter-spacing:.08em;
  color:var(--lime)
}
.preview-top>.micro>span {
  margin-left:30px
}
.app-preview {
  border:1px solid #4a583a;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 30px 100px #0008;
  position:relative
}
.window-bar {
  height:36px;
  background:#22291d;
  display:flex;
  align-items:center;
  gap:6px;
  padding:0 14px;
  position:relative
}
.window-bar>span:not(.window-badge) {
  width:7px;
  height:7px;
  border:1px solid #697059;
  border-radius:50%
}
.window-bar p {
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  font:9px var(--mono);
  color:#a5ad96
}
.window-bar .window-badge {
  margin-left:auto;
  color:var(--lime);
  font:8px var(--mono);
  border:1px solid #526334;
  padding:2px 5px;
  border-radius:2px
}
.app-preview img {
  width:100%;
  height:auto
}
.preview-caption {
  padding:17px 0 27px;
  font:9px var(--mono);
  display:flex;
  justify-content:space-between;
  gap:20px;
  color:#889279;
  letter-spacing:.015em
}
.preview-caption-right>span {
  margin-left:20px;
  color:var(--lime)
}
.floating-score {
  position:absolute;
  top:26%;
  right:-47px;
  transform:rotate(7deg);
  background:var(--yellow);
  color:#282812;
  border-radius:4px;
  padding:19px 20px;
  box-shadow:0 6px 0 #c2b05a;
  display:grid;
  gap:5px
}
.floating-score>span {
  font:8px var(--mono);
  letter-spacing:.06em
}
.floating-score>strong {
  font-size:44px;
  line-height:1.1;
  letter-spacing:-2px
}
.floating-score>strong small {
  font-size:14px;
  letter-spacing:0
}
.floating-score>span:last-child {
  font-size:6px
}
.provider-section {
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:#15180f
}
.provider-inner {
  display:flex;
  gap:50px;
  align-items:center;
  justify-content:space-between;
  padding-block:29px
}
.provider-inner>p {
  font-size:12px;
  color:var(--muted);
  line-height:1.5;
  min-width:120px
}
.provider-inner>p>strong {
  font-weight:500;
  color:var(--white)
}
.providers {
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  max-width:885px;
  gap:30px
}
.providers li {
  display:flex;
  align-items:center;
  gap:9px;
  font-size:17px;
  font-weight:600;
  letter-spacing:-.45px
}
.provider-letter {
  font-family:var(--font);
  font-size:20px;
  font-weight:750;
  line-height:1
}
.provider-google {
  font-weight:700
}
.provider-outlook {
  font-size:12px;
  border:1.6px solid var(--white);
  padding:3px 5px
}
.provider-cloud {
  font-size:27px;
  line-height:1
}
.provider-yahoo {
  font-style:italic;
  font-size:24px;
  letter-spacing:-2px
}
.provider-fastmail {
  border:2px solid var(--white);
  font-style:italic;
  font-size:15px;
  padding:1px 4px
}
.section-heading {
  margin-bottom:42px
}
.heading-row {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:35px;
  margin-top:22px
}
h2 {
  font-size:clamp(34px,4vw,56px);
  line-height:1.07;
  font-weight:500;
  letter-spacing:-2.5px
}
h2>span {
  color:var(--muted)
}
.heading-row>p {
  max-width:310px;
  color:var(--muted);
  font-size:14px;
  line-height:1.7;
  padding-bottom:5px
}
.feature-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px
}
.feature-card {
  border:1px solid var(--line);
  border-radius:5px;
  overflow:hidden;
  background:linear-gradient(155deg,#20251a80,#171a12)
}
.feature-visual {
  height:225px;
  margin:14px 14px 0;
  border-radius:3px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:26px;
  position:relative;
  overflow:hidden;
  background:radial-gradient(ellipse at 50% 120%,#39482370,transparent 80%)
}
.feature-copy {
  padding:27px 29px 32px
}
.feature-copy>.micro {
  color:var(--lime);
  font-size:9px
}
.feature-copy h3 {
  font-size:26px;
  line-height:1.15;
  font-weight:500;
  letter-spacing:-.9px;
  margin-top:12px
}
.feature-copy>p {
  font-size:13px;
  color:var(--muted);
  margin-top:17px;
  line-height:1.75
}
.account-chip {
  display:flex;
  align-items:center;
  gap:13px;
  border:1px solid #657249;
  background:#252e1c;
  padding:14px 13px;
  border-radius:4px;
  box-shadow:0 6px 14px #0002;
  max-width:285px;
  width:100%;
  align-self:center;
  transform:rotate(-4deg)
}
.account-chip+.account-chip {
  transform:rotate(4deg);
  margin-top:12px;
  z-index:1;
  background:#2b2c1b;
  border-color:#716c40
}
.account-symbol {
  width:31px;
  height:31px;
  display:grid;
  place-items:center;
  background:var(--lime);
  color:var(--ink);
  font-weight:650;
  font-size:14px;
  border-radius:50%
}
.account-symbol.personal {
  background:var(--yellow)
}
.account-chip>div {
  display:flex;
  flex-direction:column;
  gap:4px
}
.account-chip strong {
  font-size:11px;
  font-weight:500
}
.account-chip>div>span {
  font:8px var(--mono);
  color:#b0b79d
}
.account-dot {
  height:5px;
  width:5px;
  border-radius:50%;
  background:var(--lime);
  margin-left:auto
}
.account-merge {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:15px;
  font:8px var(--mono);
  color:#aab38f;
  margin-top:27px
}
.account-merge>span {
  font-size:23px;
  color:var(--lime)
}
.keyboard-visual {
  gap:12px
}
.shortcut-row {
  display:flex;
  align-items:center;
  gap:7px
}
.shortcut-row>span {
  flex:1;
  font:10px var(--mono);
  color:#b5bca6
}
kbd {
  width:35px;
  height:32px;
  border:1px solid #6b7755;
  border-bottom-width:4px;
  border-radius:5px;
  display:grid;
  place-items:center;
  background:#333c28;
  font:15px var(--mono);
  color:#dbe8bf
}
.keyboard-note {
  position:absolute;
  bottom:13px;
  left:0;
  width:100%;
  text-align:center;
  font:8px var(--mono);
  color:#707e5e;
  letter-spacing:.13em
}
.compose-visual {
  padding:12px
}
.mini-compose {
  background:#edf0e1;
  color:#323b26;
  border-radius:4px;
  padding:15px;
  transform:rotate(-3deg);
  box-shadow:0 8px 25px #0003
}
.mini-compose>div:not(.compose-bottom) {
  border-bottom:1px solid #d0d6bd;
  font:8px var(--mono);
  padding-bottom:10px;
  margin-bottom:10px
}
.mini-compose>div>span {
  color:#71805c;
  margin-right:8px
}
.mini-compose>p {
  font-size:10px;
  line-height:1.7;
  max-width:180px;
  padding:3px 0 21px
}
.text-cursor {
  display:inline-block;
  height:12px;
  width:1px;
  background:#526633;
  vertical-align:middle;
  margin-left:3px
}
.compose-bottom {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  font:7px var(--mono)
}
.compose-bottom>span:first-child {
  background:#dce4c8;
  padding:5px;
  border-radius:3px;
  margin:0
}
.compose-bottom>span:last-child {
  margin:0;
  font-weight:600;
  color:#42552b
}
.feature-strip {
  border-bottom:1px solid var(--line);
  padding:27px 0 0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:25px
}
.feature-strip>div {
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:0 8px 27px
}
.feature-strip p {
  font-size:11px;
  color:var(--muted);
  line-height:1.75
}
.feature-strip strong {
  font-weight:500;
  color:var(--white);
  display:block
}
.strip-icon {
  color:var(--lime);
  font:24px var(--mono);
  line-height:1.1
}
.arcade-section {
  padding:82px 0;
  background:var(--lime);
  color:var(--ink);
  overflow:hidden
}
.arcade-inner {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:120px;
  align-items:center
}
.arcade-copy .eyebrow {
  color:#263415;
  font-size:10px
}
.arcade-copy .eyebrow>span:first-child {
  color:#546b2b;
  border-color:#26341550
}
.arcade-copy h2 {
  font-size:64px;
  letter-spacing:-3.5px;
  margin:26px 0 24px
}
.arcade-copy h2>span {
  color:#47621d
}
.arcade-copy>p:not(.eyebrow) {
  font-size:14px;
  max-width:350px;
  color:#364b1b;
  margin-top:16px
}
.arcade-copy>p:nth-of-type(2) {
  font-size:19px;
  color:var(--ink);
  line-height:1.5;
  letter-spacing:-.3px
}
.text-link {
  display:inline-flex;
  gap:14px;
  align-items:center;
  font-size:12px;
  font-weight:600;
  line-height:1.5
}
.text-link>svg {
  width:21px;
  height:21px;
  transition:transform .15s
}
.text-link:hover>svg {
  transform:translateX(4px)
}
.arcade-copy>.text-link {
  margin-top:29px;
  border-bottom:1px solid #47621d70;
  padding-bottom:7px
}
.arcade-cabinet {
  background:#171b10;
  border:8px solid #a2cb2b;
  border-radius:16px;
  box-shadow:10px 13px 0 #9cc22b;
  transform:rotate(3deg);
  color:var(--lime);
  padding:0 20px;
  max-width:440px;
  margin:5px 0 20px;
  width:100%
}
.cabinet-top {
  display:flex;
  justify-content:space-between;
  font:8px var(--mono);
  letter-spacing:.06em;
  padding:18px 0;
  color:#99ac6f
}
.cabinet-top>span:first-child {
  color:var(--lime)
}
.cabinet-screen {
  background:repeating-linear-gradient(transparent 0px,transparent 3px,#d6ff4505 3px,#d6ff4505 4px),#0c1108;
  padding:24px 26px 27px;
  border:1px solid #404f28;
  border-radius:5px
}
.invader-formation {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:15px 22px;
  max-width:225px;
  margin:0 auto 28px
}
.formation-invader {
  height:17px;
  width:20px;
  color:#a2b967
}
.invader-5,.invader-9,.invader-12 {
  opacity:.2
}
.invader-6,.invader-8 {
  color:var(--yellow)
}
.screen-kicker {
  display:block;
  text-align:center;
  font:8px var(--mono);
  letter-spacing:.12em;
  color:#748650
}
.score {
  font:45px/1.3 var(--mono);
  letter-spacing:-3px;
  display:block;
  text-align:center;
  margin:6px 0 23px
}
.score>span {
  font-size:10px;
  letter-spacing:0;
  margin-left:10px
}
.score-stats {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  padding:14px 0;
  border-top:1px solid #3c4b24;
  border-bottom:1px solid #3c4b24
}
.score-stats>div {
  text-align:center
}
.score-stats>div+div {
  border-left:1px solid #3c4b24
}
.score-stats span {
  display:block;
  font:7px var(--mono);
  color:#859461;
  letter-spacing:.1em
}
.score-stats strong {
  display:block;
  font:24px var(--mono);
  margin-top:5px;
  color:var(--yellow)
}
.score-stats small {
  font-size:7px
}
.progress-label {
  display:flex;
  justify-content:space-between;
  font:6px var(--mono);
  margin:18px 0 9px;
  color:#859461;
  letter-spacing:.06em
}
.progress-bar {
  height:7px;
  background:#2c3c17
}
.progress-bar>span {
  display:block;
  width:57%;
  height:100%;
  background:var(--lime)
}
.cabinet-bottom {
  display:flex;
  align-items:center;
  gap:7px;
  padding:17px 0;
  font:6px var(--mono);
  color:#859461;
  letter-spacing:.1em
}
.cabinet-bottom>span:last-child {
  margin-left:auto;
  font-size:18px
}
.cabinet-led {
  height:5px;
  width:5px;
  border-radius:50%;
  background:var(--lime)
}
.privacy-inner {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:115px;
  align-items:center
}
.privacy-art {
  height:330px;
  position:relative;
  display:grid;
  place-items:center
}
.privacy-orbit {
  position:absolute;
  border:1px solid #3e482d;
  border-radius:50%
}
.orbit-one {
  width:190px;
  height:190px
}
.orbit-two {
  width:270px;
  height:270px;
  border-style:dashed;
  opacity:.7
}
.orbit-three {
  width:330px;
  height:330px;
  border-color:#282f1f
}
.shield-icon {
  height:108px;
  color:var(--lime);
  filter:drop-shadow(0 0 22px #d6ff4520)
}
.orbit-caption {
  position:absolute;
  bottom:20px;
  font:8px var(--mono);
  color:#75825e;
  letter-spacing:.12em
}
.privacy-plus {
  position:absolute;
  font:22px var(--mono);
  color:var(--yellow);
  background:var(--ink)
}
.plus-one {
  top:66px;
  right:100px
}
.plus-two {
  bottom:80px;
  left:80px;
  color:#748750
}
.privacy-copy h2 {
  margin-top:24px
}
.privacy-copy>p:not(.eyebrow) {
  margin-top:24px;
  max-width:400px;
  font-size:14px;
  color:var(--muted)
}
.privacy-list {
  margin:23px 0;
  display:grid;
  gap:10px;
  font-size:11px;
  color:#bdc5ad;
  line-height:1.7
}
.privacy-list>li {
  display:flex;
  gap:11px
}
.privacy-list>li>span {
  color:var(--lime)
}
.privacy-copy>.text-link {
  color:var(--lime)
}
.articles-section {
  border-top:1px solid var(--line);
  background:#15180f
}
.heading-row>.text-link {
  color:var(--lime);
  padding-bottom:7px;
  flex-shrink:0
}
.article-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px
}
.article-card {
  border:1px solid var(--line);
  border-radius:5px;
  overflow:hidden;
  background:var(--ink);
  transition:transform .2s,border-color .2s;
  display:flex;
  flex-direction:column
}
.article-card:hover {
  transform:translateY(-5px);
  border-color:#8aab43
}
.article-art {
  height:190px;
  position:relative;
  overflow:hidden;
  background:#28321c;
  color:#c0db87;
  border-bottom:1px solid var(--line)
}
.article-art-1 {
  background:#333221;
  color:#f2e081
}
.article-art-2 {
  background:#22332c;
  color:#b8d2ba
}
.article-number {
  position:absolute;
  left:25px;
  top:21px;
  font:10px var(--mono);
  border:1px solid currentColor;
  padding:4px 5px;
  opacity:.6
}
.article-invader {
  position:absolute;
  width:95px;
  height:85px;
  left:50%;
  top:51%;
  transform:translate(-50%,-50%);
  z-index:1
}
.article-art-1 .article-invader {
  transform:translate(-50%,-50%) rotate(-13deg);
  width:80px
}
.article-art-2 .article-invader {
  transform:translate(-50%,-50%) rotate(8deg);
  width:85px
}
.art-orbit {
  position:absolute;
  inset:17px;
  border:1px solid currentColor;
  border-radius:50%;
  opacity:.13;
  transform:rotate(-30deg) scale(1.2,.6)
}
.article-art-1 .art-orbit {
  transform:rotate(40deg) scale(.8,1.2);
  border-radius:3px
}
.article-art-2 .art-orbit {
  transform:rotate(-10deg) scale(1.1,.8)
}
.art-line {
  position:absolute;
  left:50%;
  top:0;
  bottom:0;
  border-left:1px dashed currentColor;
  opacity:.16
}
.article-card-body {
  padding:24px;
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:flex-start
}
.article-meta {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  font:8px/1.6 var(--mono);
  text-transform:uppercase;
  letter-spacing:.055em;
  color:var(--muted)
}
.article-meta>span {
  color:var(--lime)
}
.article-card h3 {
  font-size:21px;
  line-height:1.22;
  letter-spacing:-.6px;
  font-weight:500;
  margin:16px 0 12px
}
.article-card-body>p {
  color:var(--muted);
  font-size:12px;
  line-height:1.75;
  margin-bottom:25px
}
.article-card .text-link {
  font-size:10px;
  color:#d8e7bb;
  margin-top:auto
}
.article-card .text-link>svg {
  width:17px;
  height:17px
}
.empty-content {
  border:1px solid var(--line);
  padding:44px;
  border-radius:5px
}
.empty-content h2 {
  font-size:32px;
  letter-spacing:-1px;
  margin-bottom:15px
}
.empty-content p {
  color:var(--muted);
  font-size:14px;
  max-width:600px
}
.empty-content .text-link,.empty-content .button {
  margin-top:20px;
  color:var(--lime)
}
.faq-inner {
  display:grid;
  grid-template-columns:1fr 1.3fr;
  gap:100px
}
.faq-inner h2 {
  margin-top:25px
}
.faq-list {
  border-top:1px solid var(--line)
}
.faq-list details {
  border-bottom:1px solid var(--line)
}
.faq-list summary {
  padding:23px 0;
  font-size:14px;
  line-height:1.5;
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:25px
}
.faq-list summary::-webkit-details-marker {
  display:none
}
.faq-list summary>span {
  color:var(--lime);
  font:21px/1 var(--mono);
  margin-top:1px
}
.faq-list details[open] summary>span {
  transform:rotate(45deg)
}
.faq-list details>p {
  padding:0 25px 23px 0;
  font-size:13px;
  color:var(--muted);
  line-height:1.8
}
.faq-list p>a {
  text-decoration:underline;
  text-underline-offset:3px;
  color:#d0dfb3
}
.end-cta {
  padding:65px 0;
  background:#232c19;
  border-top:1px solid #414f30;
  border-bottom:1px solid #414f30
}
.end-cta-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:50px
}
.end-cta h2 {
  font-size:64px;
  letter-spacing:-3px;
  margin-top:20px
}
.end-cta h2>span {
  color:var(--lime)
}
.end-cta-action {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:22px;
  margin-right:80px
}
.cta-invader {
  width:42px;
  height:37px;
  color:var(--lime);
  transform:rotate(-10deg)
}
.end-cta-action>p {
  font:9px var(--mono);
  color:var(--muted);
  margin-top:-8px
}
.site-footer {
  padding:45px 0 26px
}
.footer-top {
  display:flex;
  align-items:center;
  gap:80px;
  padding-bottom:38px
}
.footer-top>p {
  font-size:12px;
  color:var(--muted);
  line-height:1.6
}
.back-top {
  margin-left:auto;
  width:35px;
  height:35px;
  border:1px solid var(--line);
  display:grid;
  place-items:center;
  border-radius:50%;
  font-size:17px
}
.back-top:hover {
  border-color:var(--lime);
  color:var(--lime)
}
.footer-bottom {
  border-top:1px solid var(--line);
  padding-top:23px;
  display:flex;
  justify-content:space-between;
  gap:25px;
  align-items:center;
  font:9px var(--mono);
  color:#8a9579
}
.footer-bottom>nav {
  display:flex;
  gap:24px
}
.footer-bottom a:hover {
  color:var(--lime)
}
.footer-location {
  display:flex;
  align-items:center;
  gap:8px
}
.footer-location>span {
  color:var(--yellow);
  font-size:16px
}
.page-hero {
  padding-block:76px 60px;
  border-bottom:1px solid var(--line)
}
.page-hero h1 {
  font-size:clamp(50px,6.5vw,88px);
  letter-spacing:-5px;
  line-height:1.02;
  font-weight:500;
  margin-top:26px
}
.page-hero h1>span {
  color:var(--lime)
}
.page-hero>p:not(.eyebrow) {
  font-size:16px;
  max-width:500px;
  color:var(--muted);
  margin-top:25px
}
.article-index {
  padding-block:50px 100px
}
.article-index .article-grid {
  row-gap:35px
}
.reading-page {
  max-width:900px;
  padding-block:58px 90px
}
.back-link {
  font-size:11px;
  color:var(--muted)
}
.article-header {
  margin-top:43px;
  padding-bottom:36px;
  border-bottom:1px solid var(--line)
}
.article-header .article-meta {
  font-size:10px
}
.article-header h1 {
  font-size:clamp(36px,5vw,64px);
  letter-spacing:-2.5px;
  line-height:1.06;
  font-weight:500;
  margin-top:22px
}
.article-deck {
  font-size:20px;
  line-height:1.6;
  color:var(--muted);
  margin-top:25px;
  max-width:760px
}
.article-byline {
  font:10px var(--mono);
  color:#9ea98c;
  margin-top:25px
}
.prose {
  font-size:15px;
  line-height:1.8;
  color:#c6cdb9
}
.prose>p,.prose>ul,.prose>ol,.prose>blockquote,.prose>table,.prose>pre {
  margin:0 0 24px
}
.prose h2 {
  font-size:28px;
  letter-spacing:-.8px;
  margin:45px 0 17px;
  line-height:1.25;
  color:var(--white);
  font-weight:550
}
.prose h3 {
  font-size:20px;
  letter-spacing:-.3px;
  margin:32px 0 15px;
  line-height:1.35;
  color:var(--white);
  font-weight:550
}
.prose h4 {
  font-size:16px;
  color:var(--white)
}
.prose ul {
  list-style:disc;
  padding-left:23px
}
.prose ol {
  padding-left:23px
}
.prose li {
  padding-left:3px;
  margin-bottom:9px
}
.prose a {
  color:var(--lime);
  text-decoration:underline;
  text-underline-offset:3px;
  overflow-wrap:anywhere
}
.prose strong {
  color:var(--white);
  font-weight:600
}
.prose blockquote {
  border-left:2px solid var(--lime);
  padding:8px 0 8px 23px;
  color:#d6e2c0
}
.prose blockquote p {
  margin:0
}
.prose code {
  font-size:.86em;
  font-family:var(--mono);
  background:#28321d;
  padding:2px 5px;
  border-radius:2px;
  overflow-wrap:anywhere
}
.prose pre {
  padding:20px;
  background:#1c2415;
  overflow:auto;
  border:1px solid var(--line);
  border-radius:3px
}
.prose pre code {
  background:none;
  padding:0
}
.prose table {
  border-collapse:collapse;
  width:100%;
  display:block;
  overflow-x:auto;
  font-size:12px
}
.prose th,.prose td {
  padding:12px;
  border:1px solid var(--line);
  text-align:left
}
.prose img {
  border:1px solid var(--line);
  border-radius:5px;
  margin-block:30px
}
.article-prose {
  max-width:720px;
  margin:36px auto 0
}
.article-prose>:first-child {
  margin-top:0
}
.article-outro {
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:32px 0;
  margin-top:60px;
  display:flex;
  align-items:center;
  gap:25px
}
.outro-invader {
  width:48px;
  height:43px;
  color:var(--lime);
  flex-shrink:0
}
.article-outro strong {
  font-size:18px;
  font-weight:500
}
.article-outro p {
  font-size:12px;
  color:var(--muted);
  margin:7px 0 13px
}
.article-outro .text-link {
  color:var(--lime)
}
.legal-page {
  padding-block:72px 95px
}
.legal-heading {
  padding-bottom:50px;
  border-bottom:1px solid var(--line)
}
.legal-heading h1 {
  font-size:64px;
  letter-spacing:-3px;
  line-height:1.1;
  font-weight:500;
  margin-top:23px
}
.legal-date {
  font:11px var(--mono);
  color:var(--muted);
  margin-top:20px
}
.legal-layout {
  display:grid;
  grid-template-columns:230px 1fr;
  gap:80px;
  padding-top:44px
}
.legal-nav {
  display:grid;
  align-content:start;
  gap:20px;
  font-size:12px
}
.legal-nav>a {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  color:var(--muted)
}
.legal-nav>a:hover {
  color:var(--lime)
}
.legal-nav svg {
  width:17px;
  height:17px
}
.legal-prose {
  max-width:790px
}
.legal-prose>:first-child {
  margin-top:0
}
.support-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  padding-block:45px
}
.support-card {
  border:1px solid var(--line);
  background:#191e13;
  border-radius:5px;
  padding:37px
}
.support-card h2 {
  font-size:39px;
  letter-spacing:-1.6px;
  margin:25px 0 22px
}
.support-card>p:not(.eyebrow) {
  font-size:14px;
  color:var(--muted);
  margin-top:18px;
  max-width:470px
}
.support-card>.text-link {
  color:var(--lime);
  margin-top:25px
}
.support-beta {
  background:#252e1b;
  border-color:#4b5e32
}
.beta-tag {
  display:inline-flex;
  gap:10px;
  align-items:center;
  font:9px var(--mono);
  color:var(--lime);
  letter-spacing:.08em
}
.support-wide {
  grid-column:1/-1;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px
}
.support-wide h2 {
  margin-bottom:0
}
.support-wide>div>p:not(.eyebrow) {
  font-size:13px;
  color:var(--muted);
  margin-bottom:18px
}
.support-wide>div>.text-link {
  color:var(--lime)
}
.support-faq {
  max-width:900px;
  padding-block:20px 95px
}
.support-faq>h2 {
  font-size:32px;
  letter-spacing:-1px;
  margin-bottom:30px
}
.error-page {
  padding-block:100px 120px;
  text-align:center;
  min-height:620px;
  display:flex;
  flex-direction:column;
  align-items:center
}
.error-invader {
  color:var(--lime);
  height:55px;
  width:62px;
  transform:rotate(12deg);
  margin-bottom:35px
}
.error-page h1 {
  font-size:75px;
  font-weight:500;
  line-height:1.05;
  letter-spacing:-4px;
  margin:25px 0
}
.error-page h1>span {
  color:var(--lime)
}
.error-page>p:not(.eyebrow) {
  color:var(--muted);
  font-size:14px;
  max-width:420px
}
.error-page>.button {
  margin-top:30px
}
@media(min-width:1450px) {
  .hero-asterisk {
    right:60px
  }
  .hero h1 {
    font-size:116px
  }
}
@media(max-width:1150px) {
  .container {
    width:calc(100% - 64px)
  }
  .hero-copy {
    gap:25px;
    grid-template-columns:1.8fr 1fr
  }
  .hero h1 {
    font-size:8.1vw
  }
  .hero-asterisk {
    right:10px;
    font-size:38px
  }
  .hero-aside {
    padding-left:0;
    max-width:300px
  }
  .hero-aside>p:first-child {
    font-size:19px
  }
  .hero-description {
    font-size:12px
  }
  .floating-score {
    right:-12px;
    top:32%;
    padding:14px
  }
  .providers {
    gap:18px
  }
  .providers li {
    font-size:15px
  }
  .provider-inner {
    gap:30px
  }
  .section-space {
    padding-block:86px
  }
  .feature-visual {
    padding:18px;
    height:200px
  }
  .feature-copy {
    padding:24px
  }
  .feature-copy h3 {
    font-size:23px
  }
  .feature-copy>p {
    font-size:12px
  }
  .account-chip {
    gap:8px;
    padding:12px 9px
  }
  .account-chip>div>span {
    font-size:6px
  }
  .account-merge {
    gap:10px;
    font-size:7px
  }
  .keyboard-visual {
    gap:10px
  }
  .keyboard-note {
    font-size:7px
  }
  .mini-compose {
    padding:12px
  }
  .mini-compose>div:not(.compose-bottom) {
    font-size:6px
  }
  .mini-compose>p {
    font-size:9px
  }
  .compose-bottom {
    font-size:6px
  }
  .arcade-inner {
    gap:65px
  }
  .arcade-copy h2 {
    font-size:57px
  }
  .arcade-cabinet {
    padding-inline:15px
  }
  .cabinet-screen {
    padding-inline:18px
  }
  .privacy-inner {
    gap:65px
  }
  .plus-one {
    right:60px
  }
  .plus-two {
    left:60px
  }
  .article-grid {
    gap:18px
  }
  .article-card-body {
    padding:20px
  }
  .article-card h3 {
    font-size:19px
  }
  .faq-inner {
    gap:65px
  }
  .end-cta-action {
    margin-right:35px
  }
  .footer-bottom {
    font-size:8px
  }
  .footer-bottom nav {
    gap:17px
  }
  .legal-layout {
    gap:50px;
    grid-template-columns:190px 1fr
  }
}
@media(max-width:850px) {
  .site-header {
    height:88px
  }
  .header-inner {
    gap:20px
  }
  .header-inner nav {
    gap:23px;
    font-size:12px
  }
  .header-cta {
    padding:10px 13px;
    font-size:11px;
    gap:15px
  }
  .brand>span {
    font-size:19px
  }
  .brand-mark {
    width:31px;
    height:28px
  }
  .hero {
    padding-top:33px
  }
  .hero-coordinate {
    display:none
  }
  .hero-copy {
    grid-template-columns:1fr 1fr;
    gap:20px;
    padding-bottom:44px
  }
  .hero h1 {
    font-size:9vw;
    letter-spacing:-.065em
  }
  .hero-asterisk {
    right:15px;
    top:-20px;
    font-size:28px
  }
  .hero-aside {
    max-width:280px;
    padding-left:10px
  }
  .hero-aside>p:first-child {
    font-size:17px
  }
  .hero-description {
    font-size:11px;
    line-height:1.7;
    margin:12px 0 18px
  }
  .button {
    padding:14px 17px;
    font-size:12px;
    gap:25px
  }
  .hero-availability {
    font-size:8px;
    margin-top:12px
  }
  .preview-top {
    font-size:9px
  }
  .preview-top>.micro {
    font-size:8px
  }
  .floating-score {
    top:38%;
    padding:12px;
    right:-10px
  }
  .floating-score>strong {
    font-size:32px
  }
  .floating-score>span {
    font-size:6px
  }
  .floating-score>span:last-child {
    font-size:5px
  }
  .preview-caption {
    font-size:7px
  }
  .preview-caption-right {
    max-width:240px;
    text-align:right
  }
  .provider-inner {
    flex-direction:column;
    gap:23px;
    align-items:flex-start;
    padding-block:24px
  }
  .provider-inner>p {
    font-size:11px;
    display:flex;
    gap:5px
  }
  .provider-inner>p>br {
    display:none
  }
  .providers {
    gap:20px;
    max-width:none
  }
  .providers li {
    font-size:14px
  }
  .section-space {
    padding-block:70px
  }
  .eyebrow {
    font-size:9px
  }
  .heading-row {
    margin-top:19px;
    gap:30px
  }
  h2 {
    font-size:39px;
    letter-spacing:-1.8px
  }
  .heading-row>p {
    font-size:12px;
    max-width:250px
  }
  .feature-grid {
    gap:12px
  }
  .feature-visual {
    padding:10px;
    margin:7px 7px 0;
    height:170px
  }
  .feature-copy {
    padding:18px
  }
  .feature-copy h3 {
    font-size:21px
  }
  .feature-copy>.micro {
    font-size:7px
  }
  .feature-copy>p {
    font-size:11px;
    line-height:1.7
  }
  .account-chip {
    gap:6px;
    padding:10px 8px
  }
  .account-chip strong {
    font-size:9px
  }
  .account-chip>div>span {
    font-size:5px
  }
  .account-symbol {
    width:24px;
    height:24px;
    font-size:10px
  }
  .account-merge {
    gap:6px;
    font-size:5px;
    margin-top:20px
  }
  .account-merge>span {
    font-size:18px
  }
  .shortcut-row>span {
    font-size:8px
  }
  kbd {
    width:28px;
    height:27px;
    font-size:13px
  }
  .keyboard-note {
    font-size:6px
  }
  .mini-compose {
    padding:9px
  }
  .mini-compose>div:not(.compose-bottom) {
    font-size:5px
  }
  .mini-compose>p {
    font-size:7px
  }
  .compose-bottom {
    font-size:4px;
    gap:3px
  }
  .feature-strip {
    gap:15px
  }
  .feature-strip>div {
    padding-inline:0;
    gap:8px
  }
  .feature-strip p {
    font-size:9px
  }
  .strip-icon {
    font-size:20px
  }
  .arcade-section {
    padding-block:65px
  }
  .arcade-inner {
    gap:40px
  }
  .arcade-copy h2 {
    font-size:48px;
    letter-spacing:-2.5px
  }
  .arcade-copy .eyebrow {
    font-size:8px;
    gap:9px
  }
  .arcade-copy .eyebrow>span:first-child {
    padding-right:9px
  }
  .arcade-copy>p:nth-of-type(2) {
    font-size:17px
  }
  .arcade-copy>p:not(.eyebrow) {
    font-size:12px
  }
  .arcade-cabinet {
    border-width:6px;
    padding-inline:12px;
    border-radius:12px;
    box-shadow:8px 10px 0 #9cc22b
  }
  .cabinet-top {
    font-size:6px;
    padding-block:14px
  }
  .cabinet-screen {
    padding:18px 15px 22px
  }
  .invader-formation {
    gap:12px;
    max-width:185px;
    margin-bottom:22px
  }
  .formation-invader {
    width:17px;
    height:15px
  }
  .score {
    font-size:34px;
    letter-spacing:-2px;
    margin-bottom:18px
  }
  .screen-kicker {
    font-size:6px
  }
  .score-stats strong {
    font-size:19px
  }
  .score-stats span {
    font-size:6px
  }
  .score-stats small {
    font-size:5px
  }
  .progress-label {
    font-size:5px
  }
  .cabinet-bottom {
    font-size:4px
  }
  .privacy-inner {
    gap:45px
  }
  .privacy-art {
    height:280px
  }
  .orbit-one {
    width:160px;
    height:160px
  }
  .orbit-two {
    width:220px;
    height:220px
  }
  .orbit-three {
    width:270px;
    height:270px
  }
  .privacy-copy>p:not(.eyebrow) {
    font-size:12px;
    margin-top:20px
  }
  .privacy-list {
    font-size:10px
  }
  .plus-one {
    right:40px;
    top:58px
  }
  .plus-two {
    left:30px;
    bottom:65px
  }
  .article-grid {
    gap:14px
  }
  .article-art {
    height:155px
  }
  .article-invader {
    width:72px;
    height:64px
  }
  .article-card-body {
    padding:17px
  }
  .article-card h3 {
    font-size:18px
  }
  .article-meta {
    font-size:7px;
    gap:7px
  }
  .article-card-body>p {
    font-size:11px
  }
  .article-card .text-link {
    font-size:9px
  }
  .faq-inner {
    gap:40px;
    grid-template-columns:1fr 1.2fr
  }
  .faq-list summary {
    font-size:12px;
    padding-block:20px
  }
  .faq-list details>p {
    font-size:11px
  }
  .end-cta h2 {
    font-size:51px;
    letter-spacing:-2.5px
  }
  .end-cta-action {
    margin-right:0;
    gap:17px
  }
  .end-cta-action>p {
    font-size:7px
  }
  .end-cta .eyebrow {
    font-size:8px
  }
  .footer-top {
    gap:45px
  }
  .footer-bottom {
    flex-wrap:wrap;
    row-gap:20px
  }
  .footer-bottom>nav {
    margin-left:auto
  }
  .footer-location {
    width:100%;
    justify-content:flex-end;
    font-size:7px
  }
  .page-hero {
    padding-block:55px 45px
  }
  .page-hero h1 {
    letter-spacing:-3px
  }
  .page-hero>p:not(.eyebrow) {
    font-size:14px
  }
  .legal-layout {
    grid-template-columns:160px 1fr;
    gap:40px
  }
  .legal-nav {
    font-size:10px
  }
  .legal-heading h1 {
    font-size:52px;
    letter-spacing:-2.5px
  }
  .prose {
    font-size:13px
  }
  .prose h2 {
    font-size:25px
  }
  .support-card {
    padding:27px
  }
  .support-card h2 {
    font-size:34px
  }
  .support-card>p:not(.eyebrow) {
    font-size:12px
  }
  .support-wide {
    gap:35px
  }
  .support-wide>div>p:not(.eyebrow) {
    font-size:12px
  }
}
@media(max-width:620px) {
  .container {
    width:calc(100% - 40px)
  }
  .site-header {
    height:82px
  }
  .header-inner {
    gap:15px
  }
  .brand {
    gap:9px
  }
  .brand-mark {
    width:29px;
    height:26px
  }
  .brand>span {
    font-size:18px
  }
  .header-inner nav {
    display:none
  }
  .header-cta {
    font-size:10px;
    gap:12px;
    padding:10px 12px
  }
  .header-cta>span {
    font-size:15px
  }
  .hero {
    padding-top:28px
  }
  .hero-topline .eyebrow {
    font-size:8px;
    gap:9px
  }
  .hero-copy {
    display:block;
    padding-top:28px;
    padding-bottom:35px
  }
  .hero h1 {
    font-size:clamp(48px,12.6vw,78px);
    line-height:1.02;
    letter-spacing:-.065em
  }
  .hero-asterisk {
    right:5px;
    top:-9px;
    font-size:30px
  }
  .hero-aside {
    max-width:none;
    padding:0;
    display:grid;
    grid-template-columns:1fr auto;
    column-gap:20px;
    align-items:start;
    margin-top:26px
  }
  .hero-aside>p:first-child {
    font-size:16px;
    grid-column:1/-1;
    line-height:1.45
  }
  .hero-aside>p:first-child>br {
    display:none
  }
  .hero-description {
    font-size:11px;
    max-width:240px;
    margin:12px 0 0;
    grid-column:1
  }
  .hero-aside>.button {
    font-size:10px;
    padding:13px 12px;
    gap:12px;
    align-self:center;
    grid-column:2;
    grid-row:2
  }
  .hero-aside>.button>svg {
    width:16px;
    height:16px
  }
  .hero-availability {
    font-size:8px;
    grid-column:1/-1;
    margin-top:17px
  }
  .preview-top {
    padding-bottom:10px
  }
  .preview-label {
    font-size:7px;
    gap:6px
  }
  .preview-label>.status-dot {
    width:4px;
    height:4px
  }
  .preview-top>.micro {
    font-size:6px
  }
  .preview-top>.micro>span {
    margin-left:5px
  }
  .app-preview {
    border-radius:6px;
    box-shadow:0 15px 40px #0006
  }
  .window-bar {
    height:24px;
    padding-inline:9px;
    gap:4px
  }
  .window-bar>span:not(.window-badge) {
    width:4px;
    height:4px
  }
  .window-bar p {
    font-size:6px
  }
  .window-bar .window-badge {
    font-size:5px;
    padding:1px 3px
  }
  .floating-score {
    right:-6px;
    top:43%;
    padding:9px 10px;
    box-shadow:0 3px 0 #c2b05a;
    border-radius:3px
  }
  .floating-score>strong {
    font-size:25px;
    letter-spacing:-1px
  }
  .floating-score>strong small {
    font-size:8px
  }
  .floating-score>span {
    font-size:4px
  }
  .floating-score>span:last-child {
    font-size:3px
  }
  .preview-caption {
    font-size:6px;
    padding:13px 0 22px
  }
  .preview-caption-right {
    font-size:5px;
    max-width:155px
  }
  .preview-caption-right>span {
    margin-left:5px
  }
  .provider-inner {
    gap:17px;
    padding-block:23px
  }
  .provider-inner>p {
    font-size:10px
  }
  .providers {
    flex-wrap:wrap;
    justify-content:flex-start;
    gap:18px 24px
  }
  .providers li {
    font-size:12px;
    gap:7px
  }
  .provider-letter {
    font-size:17px
  }
  .provider-outlook {
    font-size:9px;
    padding:2px 4px
  }
  .provider-cloud {
    font-size:23px
  }
  .provider-yahoo {
    font-size:20px
  }
  .provider-fastmail {
    font-size:11px
  }
  .section-space {
    padding-block:56px
  }
  .section-heading {
    margin-bottom:28px
  }
  .eyebrow {
    font-size:8px;
    gap:10px
  }
  .eyebrow>span:first-child:not(.status-dot) {
    padding-right:10px
  }
  .heading-row {
    display:block;
    margin-top:19px
  }
  h2 {
    font-size:35px;
    letter-spacing:-1.6px
  }
  .heading-row>p {
    max-width:320px;
    font-size:12px;
    margin-top:20px;
    padding:0
  }
  .feature-grid {
    grid-template-columns:1fr;
    gap:16px
  }
  .feature-card {
    display:grid;
    grid-template-columns:1fr 1.1fr;
    align-items:center
  }
  .feature-visual {
    height:220px;
    margin:0;
    padding:19px 12px;
    border-radius:0;
    background:radial-gradient(ellipse at 30% 50%,#39482360,transparent 80%)
  }
  .feature-copy {
    padding:24px 21px 24px 12px
  }
  .feature-copy h3 {
    font-size:23px
  }
  .feature-copy>.micro {
    font-size:7px
  }
  .feature-copy>p {
    font-size:11px;
    line-height:1.75;
    margin-top:14px
  }
  .account-chip {
    padding:10px 6px;
    gap:5px
  }
  .account-symbol {
    width:21px;
    height:21px;
    font-size:9px
  }
  .account-chip>div>span {
    font-size:4px
  }
  .account-chip strong {
    font-size:8px
  }
  .account-dot {
    width:3px;
    height:3px
  }
  .account-merge {
    font-size:4px;
    gap:6px;
    margin-top:23px
  }
  .account-merge>span {
    font-size:18px
  }
  .keyboard-visual {
    gap:12px;
    padding-inline:17px
  }
  .shortcut-row {
    gap:5px
  }
  .shortcut-row>span {
    font-size:7px
  }
  kbd {
    width:26px;
    height:27px;
    font-size:12px
  }
  .keyboard-note {
    bottom:31px;
    font-size:5px
  }
  .compose-visual {
    padding:15px
  }
  .mini-compose {
    padding:10px
  }
  .mini-compose>div:not(.compose-bottom) {
    font-size:4px
  }
  .mini-compose>p {
    font-size:7px;
    line-height:1.7
  }
  .compose-bottom {
    font-size:3.5px
  }
  .feature-strip {
    grid-template-columns:1fr;
    gap:0;
    padding-top:13px;
    border-bottom:0
  }
  .feature-strip>div {
    padding:15px 0;
    align-items:center;
    gap:13px;
    border-bottom:1px solid var(--line)
  }
  .feature-strip p {
    font-size:10px
  }
  .feature-strip strong {
    display:inline;
    margin-right:3px
  }
  .strip-icon {
    font-size:22px;
    width:23px;
    flex-shrink:0
  }
  .arcade-section {
    padding-block:53px
  }
  .arcade-inner {
    display:block
  }
  .arcade-copy h2 {
    font-size:49px;
    margin-block:22px
  }
  .arcade-copy>p:nth-of-type(2) {
    font-size:18px;
    max-width:280px
  }
  .arcade-copy>p:not(.eyebrow) {
    font-size:13px;
    max-width:350px
  }
  .arcade-copy>.text-link {
    margin-top:23px;
    font-size:11px
  }
  .arcade-cabinet {
    width:calc(100% - 40px);
    max-width:360px;
    margin:45px auto 10px;
    padding-inline:18px;
    transform:rotate(3deg);
    border-width:7px
  }
  .cabinet-top {
    font-size:7px;
    padding-block:16px
  }
  .cabinet-screen {
    padding:24px 22px
  }
  .invader-formation {
    max-width:210px;
    gap:13px 20px;
    margin-bottom:25px
  }
  .formation-invader {
    width:19px;
    height:17px
  }
  .screen-kicker {
    font-size:7px
  }
  .score {
    font-size:42px;
    margin:8px 0 20px
  }
  .score-stats span {
    font-size:6px
  }
  .score-stats strong {
    font-size:23px
  }
  .score-stats small {
    font-size:6px
  }
  .progress-label {
    font-size:5px;
    margin-top:20px
  }
  .cabinet-bottom {
    font-size:5px;
    padding-block:16px
  }
  .privacy-inner {
    display:flex;
    flex-direction:column-reverse;
    gap:35px;
    align-items:stretch
  }
  .privacy-copy h2 {
    font-size:36px;
    margin-top:20px
  }
  .privacy-copy>p:not(.eyebrow) {
    font-size:13px;
    max-width:none
  }
  .privacy-list {
    font-size:10px;
    margin:20px 0
  }
  .privacy-copy>.text-link {
    font-size:11px
  }
  .privacy-art {
    height:255px
  }
  .orbit-one {
    width:150px;
    height:150px
  }
  .orbit-two {
    width:210px;
    height:210px
  }
  .orbit-three {
    width:255px;
    height:255px
  }
  .shield-icon {
    height:92px
  }
  .orbit-caption {
    bottom:13px;
    font-size:7px
  }
  .plus-one {
    right:calc(50% - 94px);
    top:44px
  }
  .plus-two {
    left:calc(50% - 114px);
    bottom:66px
  }
  .heading-row>.text-link {
    margin-top:23px;
    font-size:11px;
    padding-bottom:0
  }
  .article-grid {
    grid-template-columns:1fr;
    gap:23px
  }
  .article-art {
    height:190px
  }
  .article-invader {
    width:90px;
    height:80px
  }
  .article-art-1 .article-invader,.article-art-2 .article-invader {
    width:85px
  }
  .article-card-body {
    padding:25px
  }
  .article-meta {
    font-size:8px;
    gap:16px
  }
  .article-card h3 {
    font-size:24px;
    line-height:1.2;
    margin:15px 0 12px;
    max-width:320px
  }
  .article-card-body>p {
    font-size:12px;
    margin-bottom:22px
  }
  .article-card .text-link {
    font-size:11px
  }
  .faq-inner {
    display:block
  }
  .faq-inner h2 {
    margin-top:20px;
    font-size:36px
  }
  .faq-list {
    margin-top:30px
  }
  .faq-list summary {
    font-size:13px;
    padding-block:22px;
    gap:15px
  }
  .faq-list details>p {
    font-size:12px;
    padding-right:12px;
    line-height:1.8
  }
  .end-cta {
    padding-block:47px
  }
  .end-cta-inner {
    display:block
  }
  .end-cta h2 {
    font-size:48px;
    letter-spacing:-2px;
    margin-top:20px
  }
  .end-cta-action {
    display:grid;
    grid-template-columns:1fr auto;
    column-gap:30px;
    row-gap:15px;
    margin-top:32px;
    align-items:center
  }
  .cta-invader {
    grid-column:2;
    grid-row:1;
    width:38px;
    height:34px;
    transform:rotate(9deg);
    margin-right:14px
  }
  .end-cta-action>.button {
    grid-column:1;
    grid-row:1;
    justify-self:start;
    padding:16px 20px;
    font-size:12px;
    gap:30px
  }
  .end-cta-action>p {
    grid-column:1/-1;
    font-size:8px;
    margin:0
  }
  .site-footer {
    padding-top:34px
  }
  .footer-top {
    gap:25px;
    padding-bottom:27px
  }
  .footer-top>p {
    font-size:9px;
    line-height:1.6
  }
  .footer-top>.brand {
    gap:8px
  }
  .footer-top>.brand>span {
    font-size:17px
  }
  .footer-top>.brand>.brand-mark {
    width:28px;
    height:25px
  }
  .back-top {
    width:30px;
    height:30px;
    font-size:15px;
    flex-shrink:0
  }
  .footer-bottom {
    padding-top:22px;
    gap:20px;
    font-size:7px
  }
  .footer-bottom>nav {
    margin:0;
    order:-1;
    width:100%;
    font-size:8px;
    justify-content:space-between;
    gap:15px
  }
  .footer-location {
    width:auto;
    font-size:6px;
    margin-left:auto;
    gap:5px
  }
  .footer-location>span {
    font-size:13px
  }
  .page-hero {
    padding-block:45px 35px
  }
  .page-hero h1 {
    font-size:49px;
    letter-spacing:-2.5px;
    margin-top:24px
  }
  .page-hero>p:not(.eyebrow) {
    font-size:13px;
    margin-top:22px
  }
  .article-index {
    padding-block:30px 60px
  }
  .article-index .article-grid {
    row-gap:24px
  }
  .empty-content {
    padding:27px
  }
  .empty-content h2 {
    font-size:27px
  }
  .empty-content p {
    font-size:12px
  }
  .reading-page {
    padding-block:32px 55px
  }
  .back-link {
    font-size:10px
  }
  .article-header {
    margin-top:30px;
    padding-bottom:27px
  }
  .article-header .article-meta {
    font-size:8px
  }
  .article-header h1 {
    font-size:36px;
    letter-spacing:-1.4px;
    margin-top:20px
  }
  .article-deck {
    font-size:16px;
    line-height:1.6;
    margin-top:20px
  }
  .article-byline {
    font-size:8px;
    margin-top:22px
  }
  .article-prose {
    margin-top:28px
  }
  .prose {
    font-size:14px;
    line-height:1.8
  }
  .prose h2 {
    font-size:25px;
    line-height:1.25;
    letter-spacing:-.7px;
    margin-top:34px
  }
  .prose h3 {
    font-size:20px;
    margin-top:27px
  }
  .prose ul,.prose ol {
    padding-left:18px
  }
  .prose>p,.prose>ul,.prose>ol,.prose>blockquote {
    margin-bottom:22px
  }
  .article-outro {
    margin-top:38px;
    padding-block:27px;
    align-items:flex-start;
    gap:20px
  }
  .outro-invader {
    width:30px;
    height:27px;
    margin-top:3px
  }
  .article-outro strong {
    font-size:16px;
    line-height:1.45;
    display:block
  }
  .article-outro p {
    font-size:11px;
    line-height:1.7
  }
  .article-outro .text-link {
    font-size:11px
  }
  .legal-page {
    padding-block:45px 60px
  }
  .legal-heading {
    padding-bottom:30px
  }
  .legal-heading h1 {
    font-size:43px;
    letter-spacing:-2px;
    margin-top:23px
  }
  .legal-date {
    font-size:9px;
    margin-top:19px
  }
  .legal-layout {
    display:block;
    padding-top:28px
  }
  .legal-nav {
    grid-template-columns:1fr 1fr;
    gap:18px 25px;
    font-size:10px;
    padding-bottom:28px;
    border-bottom:1px solid var(--line);
    margin-bottom:28px
  }
  .legal-nav svg {
    width:15px;
    height:15px
  }
  .legal-prose {
    font-size:13px
  }
  .legal-prose h2 {
    font-size:23px
  }
  .support-grid {
    grid-template-columns:1fr;
    gap:18px;
    padding-block:28px
  }
  .support-card {
    padding:27px
  }
  .support-card h2 {
    font-size:35px;
    margin-top:22px
  }
  .support-card>p:not(.eyebrow) {
    font-size:13px;
    line-height:1.75
  }
  .support-card>.text-link {
    font-size:11px
  }
  .support-wide {
    grid-column:auto;
    display:block
  }
  .support-wide>div+div {
    margin-top:22px
  }
  .support-wide>div>p:not(.eyebrow) {
    font-size:13px
  }
  .support-wide .text-link {
    font-size:11px
  }
  .support-faq {
    padding-block:20px 60px
  }
  .support-faq>h2 {
    font-size:29px
  }
  .error-page {
    padding-block:70px 85px;
    min-height:550px
  }
  .error-page h1 {
    font-size:58px;
    letter-spacing:-3px
  }
  .error-page>p:not(.eyebrow) {
    font-size:13px
  }
}
@media(max-width:370px) {
  .container {
    width:calc(100% - 32px)
  }
  .header-cta {
    font-size:9px;
    padding:10px;
    gap:9px
  }
  .brand>span {
    font-size:16px
  }
  .brand-mark {
    width:27px;
    height:24px
  }
  .hero-aside {
    column-gap:12px
  }
  .hero-aside>.button {
    font-size:9px;
    padding:12px 10px;
    gap:8px
  }
  .hero-description {
    font-size:10px
  }
  .feature-copy {
    padding-right:17px
  }
  .feature-copy h3 {
    font-size:21px
  }
  .feature-copy>p {
    font-size:10px
  }
  .shortcut-row>span {
    font-size:6px
  }
  kbd {
    width:23px
  }
  .feature-visual {
    padding-inline:10px
  }
  .providers {
    gap:16px 20px
  }
  .providers li {
    font-size:11px
  }
  .floating-score {
    right:-4px;
    padding:8px
  }
  .preview-caption-right {
    max-width:130px
  }
  .arcade-cabinet {
    width:calc(100% - 20px)
  }
  .footer-top {
    gap:17px
  }
  .footer-top>p {
    font-size:8px
  }
  .footer-top>.brand>span {
    font-size:16px
  }
  .footer-location {
    font-size:5px
  }
  .footer-bottom {
    font-size:6px
  }
  .end-cta h2 {
    font-size:44px
  }
}
/* Keep product copy readable;
tiny type is reserved for decorative illustrations. */
.related-articles {
  margin-top:58px
}
.related-articles>h2 {
  font-size:30px;
  letter-spacing:-1px;
  margin-bottom:28px
}
.related-articles .article-grid {
  grid-template-columns:repeat(2,1fr)
}
.hero-availability {
  font-size:11px
}
.preview-caption {
  font-size:10px
}
.feature-copy>.micro {
  font-size:10px
}
.feature-copy>p {
  font-size:13px
}
.feature-strip p {
  font-size:12px
}
.article-meta {
  font-size:10px
}
.article-card .text-link {
  font-size:12px
}
.footer-bottom {
  font-size:10px
}
.footer-location {
  font-size:10px
}
.article-byline {
  font-size:11px
}
@media(max-width:850px) {
  .hero-availability {
    font-size:10px
  }
  .eyebrow {
    font-size:10px
  }
  .hero-description {
    font-size:13px
  }
  .preview-caption {
    font-size:9px
  }
  .feature-copy>.micro {
    font-size:9px
  }
  .feature-copy>p {
    font-size:12px
  }
  .feature-strip p {
    font-size:11px
  }
  .article-card-body>p {
    font-size:13px
  }
  .article-meta {
    font-size:10px
  }
  .footer-bottom,.footer-location {
    font-size:9px
  }
}
@media(max-width:620px) {
  .header-cta {
    font-size:11px
  }
  .hero-topline .eyebrow {
    font-size:9px
  }
  .hero-aside {
    display:block
  }
  .hero-aside>p:first-child {
    font-size:17px
  }
  .hero-description {
    font-size:14px;
    max-width:330px;
    margin-top:14px
  }
  .hero-aside>.button {
    font-size:13px;
    margin-top:21px;
    padding:16px 19px;
    gap:34px
  }
  .hero-aside>.button>svg {
    width:20px;
    height:20px
  }
  .hero-availability {
    font-size:10px;
    margin-top:16px
  }
  .preview-caption {
    font-size:8px;
    line-height:1.5
  }
  .preview-caption-right {
    font-size:8px;
    max-width:170px
  }
  .provider-inner>p {
    font-size:12px
  }
  .providers li {
    font-size:14px
  }
  .eyebrow {
    font-size:10px;
    line-height:1.6
  }
  .heading-row>p {
    font-size:14px;
    line-height:1.75
  }
  .feature-card {
    display:block
  }
  .feature-visual {
    height:220px;
    max-width:300px;
    margin:0 auto;
    width:100%;
    padding:24px;
    background:radial-gradient(ellipse at 50% 50%,#39482370,transparent 80%)
  }
  .feature-copy {
    padding:3px 26px 28px
  }
  .feature-copy>.micro {
    font-size:10px
  }
  .feature-copy h3 {
    font-size:28px
  }
  .feature-copy>p {
    font-size:14px
  }
  .account-chip {
    padding:12px;
    gap:10px
  }
  .account-symbol {
    width:30px;
    height:30px;
    font-size:13px
  }
  .account-chip strong {
    font-size:11px
  }
  .account-chip>div>span {
    font-size:7px
  }
  .account-dot {
    width:5px;
    height:5px
  }
  .account-merge {
    font-size:7px;
    gap:13px
  }
  .keyboard-visual {
    padding-inline:28px;
    gap:13px
  }
  .shortcut-row>span {
    font-size:11px
  }
  kbd {
    width:34px;
    height:31px;
    font-size:15px
  }
  .keyboard-note {
    font-size:8px;
    bottom:23px
  }
  .compose-visual {
    padding:26px
  }
  .mini-compose {
    padding:17px
  }
  .mini-compose>div:not(.compose-bottom) {
    font-size:7px
  }
  .mini-compose>p {
    font-size:10px
  }
  .compose-bottom {
    font-size:6px
  }
  .feature-strip p {
    font-size:12px
  }
  .feature-strip strong {
    display:block
  }
  .arcade-copy .eyebrow {
    font-size:9px
  }
  .arcade-copy>p:not(.eyebrow) {
    font-size:14px
  }
  .arcade-copy>.text-link {
    font-size:13px
  }
  .privacy-copy>p:not(.eyebrow) {
    font-size:14px
  }
  .privacy-list {
    font-size:12px
  }
  .privacy-copy>.text-link,.heading-row>.text-link {
    font-size:13px
  }
  .article-meta {
    font-size:10px
  }
  .article-card-body>p {
    font-size:14px
  }
  .article-card .text-link {
    font-size:13px
  }
  .faq-list summary {
    font-size:15px
  }
  .faq-list details>p {
    font-size:14px
  }
  .end-cta .eyebrow {
    font-size:10px
  }
  .end-cta-action>p {
    font-size:10px
  }
  .footer-top>p {
    font-size:11px
  }
  .footer-bottom {
    font-size:9px;
    line-height:1.5
  }
  .footer-bottom>nav {
    font-size:11px
  }
  .footer-location {
    font-size:8px
  }
  .page-hero>p:not(.eyebrow) {
    font-size:15px
  }
  .article-byline {
    font-size:10px
  }
  .related-articles .article-grid {
    grid-template-columns:1fr
  }
  .legal-date {
    font-size:11px
  }
  .legal-nav {
    font-size:12px
  }
  .legal-prose {
    font-size:14px
  }
  .support-card>p:not(.eyebrow),.support-wide>div>p:not(.eyebrow) {
    font-size:14px
  }
  .support-card>.text-link,.support-wide .text-link {
    font-size:13px
  }
  .beta-tag {
    font-size:10px
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*::before,*::after {
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important
  }
  .button:hover,.article-card:hover {
    transform:none
  }
}

.purchase-note { margin-top: 14px; color: var(--lime, #d6ff45); font-size: 13px; line-height: 1.6; }
@media (max-width: 700px) { .hero-aside .purchase-note { grid-column: 1 / -1; margin-top: 4px; font-size: 13px; } }