:root {
  --paper: #FBFAF7;
  --ink: #111114;
  --ink2: #5B5B63;
  --ink3: #9A9AA3;
  --line: rgba(17, 17, 20, .10);
  --night: #111114;
  --night2: #1A1A1F;
  --card: rgba(255, 255, 255, .06);
  --card-line: rgba(255, 255, 255, .12);
  --yellow: #FFD93D;
  --green: #1CE8B5;
  --cyan: #00BCE7;
  --red: #FF5E5B;
  --rain: linear-gradient(90deg, #F92413, #FF9500, #FFD93D, #1CE8B5, #00BCE7, #1775EA, #C94EFF, #E64783);
  --rain-diag: linear-gradient(135deg, #F92413, #FFD93D, #1CE8B5, #1775EA, #E64783);
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter Tight", system-ui, sans-serif;
  --text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif;
  --k: cubic-bezier(.2, .8, .2, 1);
  --gutter: clamp(20px, 5vw, 88px);
  --h1: clamp(3.2rem, 1rem + 10.5vw, 7.25rem);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--text);
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: inherit; }

button { font: inherit; color: inherit; }

:focus-visible { outline: 3px solid #1775EA; outline-offset: 3px; border-radius: 8px; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 100; background: #fff; padding: 10px 14px; }

.rainbar { height: 3px; background: var(--rain); }

.display {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: .92;
  margin: 0;
}

.display .l { display: block; }
.display .l.rain-text { width: fit-content; }

.rain-text {
  background: var(--rain);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-right: .06em;
}

.outline-text {
  --ol: var(--ink);
  color: var(--paper);
  text-shadow:
    2px 0 0 var(--ol), -2px 0 0 var(--ol), 0 2px 0 var(--ol), 0 -2px 0 var(--ol),
    1.4px 1.4px 0 var(--ol), -1.4px -1.4px 0 var(--ol), 1.4px -1.4px 0 var(--ol), -1.4px 1.4px 0 var(--ol),
    2px 1px 0 var(--ol), -2px 1px 0 var(--ol), 2px -1px 0 var(--ol), -2px -1px 0 var(--ol),
    1px 2px 0 var(--ol), -1px 2px 0 var(--ol), 1px -2px 0 var(--ol), -1px -2px 0 var(--ol);
}

.on-night .outline-text { --ol: #fff; color: var(--night); }

.capword {
  --cap: var(--yellow);
  --o: .032em;
  --d: .023em;
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -.05em;
  color: var(--cap);
  text-shadow:
    var(--o) 0 0 #000, calc(var(--o) * -1) 0 0 #000,
    0 var(--o) 0 #000, 0 calc(var(--o) * -1) 0 #000,
    var(--d) var(--d) 0 #000, calc(var(--d) * -1) calc(var(--d) * -1) 0 #000,
    var(--d) calc(var(--d) * -1) 0 #000, calc(var(--d) * -1) var(--d) 0 #000,
    var(--o) var(--d) 0 #000, calc(var(--o) * -1) var(--d) 0 #000,
    var(--o) calc(var(--d) * -1) 0 #000, calc(var(--o) * -1) calc(var(--d) * -1) 0 #000,
    0 .09em .2em rgba(0, 0, 0, .45);
  transition: color .15s ease-out;
}

.lead {
  font-size: clamp(17px, .9rem + .35vw, 19px);
  line-height: 1.5;
  color: var(--ink2);
  max-width: 30em;
  margin: 26px 0 0;
}

.on-night .lead { color: rgba(255, 255, 255, .62); }
.lead b { color: var(--ink); font-weight: 600; }
.on-night .lead b { color: #fff; }

.step {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink3);
}

.step::before { content: ""; width: 28px; height: 2px; background: var(--ink); }
.on-night .step { color: rgba(255, 255, 255, .45); }
.on-night .step::before { background: #fff; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 14px 26px;
  border: 0;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  color: #fff;
  background: var(--ink);
  box-shadow: 0 10px 30px rgba(17, 17, 20, .2);
  transition: transform .12s ease-out, box-shadow .2s ease-out;
  -webkit-tap-highlight-color: transparent;
}

.btn:hover { box-shadow: 0 14px 34px rgba(17, 17, 20, .28); }
.btn:active { transform: scale(.96); }

.btn-light { color: #111; background: #fff; box-shadow: none; }
.btn-light:hover { box-shadow: 0 0 0 4px rgba(255, 255, 255, .15); }

.btn-small { min-height: 40px; padding: 8px 16px; font-size: 14px; box-shadow: none; }

.btn svg { width: 18px; height: 18px; flex: none; }

.cta-note { margin: 12px 0 0; font-size: 14px; color: var(--ink3); }
.on-night .cta-note { color: rgba(255, 255, 255, .45); }

.swatches { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 22px; padding: 0; list-style: none; }

.swatch {
  width: 36px;
  height: 36px;
  padding: 7px;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: 10px;
  -webkit-tap-highlight-color: transparent;
}

.swatch span {
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--c);
  box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .15);
  transition: transform .12s ease-out;
}

.swatch:active span { transform: scale(.88); }
.swatch[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--ink); }

.plan-card {
  width: 100%;
  max-width: 440px;
  padding: 28px 28px 22px;
  border-radius: 28px;
  background: var(--card);
  border: 1px solid var(--card-line);
  color: #fff;
}

.seg {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
}

.seg-knob {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc((100% - 8px) / 3);
  border-radius: 999px;
  background: #fff;
  transform: translateX(calc(var(--i, 0) * 100%));
  transition: transform .45s cubic-bezier(.3, 1.25, .5, 1);
}

.seg button {
  position: relative;
  z-index: 1;
  display: grid;
  place-content: center;
  min-height: 52px;
  padding: 6px 4px;
  border: 0;
  border-radius: 999px;
  background: none;
  cursor: pointer;
  color: rgba(255, 255, 255, .7);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.15;
  transition: color .25s;
  -webkit-tap-highlight-color: transparent;
}

.seg button small { font-size: 11.5px; font-weight: 600; opacity: .75; }
.seg button[aria-checked="true"] { color: #111; }

.price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: 26px 0 4px;
}

.price-num {
  font-family: var(--display);
  font-size: clamp(56px, 13vw, 72px);
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.price-per { font-size: 16px; color: rgba(255, 255, 255, .55); }
.price-note { min-height: 20px; margin: 0; font-size: 14px; color: rgba(255, 255, 255, .5); }

.price-swap { animation: priceIn .35s var(--k); }
@keyframes priceIn { from { opacity: 0; transform: translateY(8px); } }

.features { margin: 22px 0 24px; padding: 0; list-style: none; display: grid; gap: 10px; }
.features li { display: flex; gap: 12px; align-items: center; font-size: 15px; color: rgba(255, 255, 255, .85); }
.features svg { width: 18px; height: 18px; color: var(--green); flex: none; }

.plan-card .btn { width: 100%; }

.plan-foot { margin: 14px 0 0; font-size: 13px; text-align: center; color: rgba(255, 255, 255, .45); }

.site-foot {
  padding: 40px var(--gutter) 48px;
  font-size: 14px;
  color: var(--ink2);
  border-top: 1px solid var(--line);
}

.site-foot nav { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-bottom: 18px; }
.site-foot nav a { text-decoration: none; font-weight: 600; color: var(--ink); padding: 6px 0; }
.site-foot nav a:hover { text-decoration: underline; }
.site-foot p { margin: 0; max-width: 60em; }
.site-foot p + p { margin-top: 8px; }

.on-night.site-foot, .on-night .site-foot { color: rgba(255, 255, 255, .5); border-top-color: rgba(255, 255, 255, .1); }
.on-night.site-foot nav a, .on-night .site-foot nav a { color: #fff; }

.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; text-decoration: none; letter-spacing: -.01em; }
.brand img { width: 30px; height: 30px; border-radius: 8px; }

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}