/* The website. Same visual language as the extension: a dot grid, panes of glass
   over it, and one coral accent. One bundled font for the headlines, one small
   script for the demo, and nothing is loaded from anywhere but this site. */

/* The display face, for the name and headlines: Bricolage Grotesque, bundled
   (SIL Open Font License, assets/OFL-bricolage-grotesque.txt). */
@font-face {
  font-family: "Bricolage Grotesque";
  font-weight: 700 800;
  font-display: swap;
  src: url("assets/bricolage-grotesque.woff2") format("woff2");
}

:root {
  --bg: #110b08;
  --fg: #fbf1e9;
  --muted: #bba597;
  --line: rgba(255, 255, 255, 0.09);
  --glass: linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.02));
  --glass-base: rgba(30, 21, 16, 0.6);
  --rim: rgba(255, 255, 255, 0.16);
  --dot: rgba(160, 138, 124, 0.2);
  --display: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --accent: #ff7a4d;
  --accent-2: #ffb27a;
  --grad: linear-gradient(135deg, #ff8a4c, #f2542d);
  --on-grad: #1f1410;
  --ok: #00ba7c;
  --shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.9);
  --glow: rgba(255, 106, 61, 0.22);
  --radius: 22px;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #fff4ea;
    --fg: #1f1410;
    --muted: #6e5448;
    --accent: #c2410c;
    --line: rgba(31, 20, 16, 0.1);
    --glass: linear-gradient(145deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.5));
    --glass-base: rgba(255, 255, 255, 0.45);
    --rim: rgba(255, 255, 255, 0.95);
    --dot: rgba(110, 84, 72, 0.22);
    --shadow: 0 40px 80px -40px rgba(90, 46, 30, 0.35);
    --glow: rgba(255, 106, 61, 0.16);
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  color: var(--fg);
  background: var(--bg);
  font: 17px/1.6 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: var(--accent); }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--display); line-height: 1.12; letter-spacing: -0.025em; font-weight: 800; text-wrap: balance; }

/* ---- The page behind everything: dot grid, a glow, and two slow rings ---- */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background:
    radial-gradient(60% 50% at 50% 0%, var(--glow), transparent 70%),
    radial-gradient(var(--dot) 1px, transparent 1.3px) 0 0 / 22px 22px;
}
.ping {
  position: absolute;
  left: 50%;
  top: 34%;
  width: 60vmax;
  height: 60vmax;
  margin: -30vmax 0 0 -30vmax;
  border-radius: 50%;
  border: 1px solid var(--accent);
  opacity: 0;
  animation: ping 12s linear infinite;
}
.ping.late { border-color: var(--accent-2); animation-delay: 6s; }
@keyframes ping {
  0% { transform: scale(0.05); opacity: 0; }
  12% { opacity: 0.28; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* ---- Glass ---- */
.card, .nav, details {
  background: var(--glass), var(--glass-base);
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 var(--rim);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
}
.card { border-radius: var(--radius); padding: 26px; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 24px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--glass), var(--glass-base);
  box-shadow: inset 0 1px 0 var(--rim);
  color: var(--fg);
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  white-space: nowrap;
  transition: filter 0.15s ease, transform 0.12s ease;
}
.btn:hover { filter: brightness(1.12); }
.btn:active { transform: scale(0.98); }
.btn.primary {
  border-color: transparent;
  color: var(--on-grad);
  background: var(--grad);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 14px 30px -12px rgba(242, 84, 45, 0.8);
}
.btn.small { min-height: 38px; padding: 0 16px; font-size: 14px; }
/* Not a link yet: the address it will lead to has not been filled in (config.json). */
.btn.soon { opacity: 0.6; cursor: default; filter: none; transform: none; }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

/* ---- Top bar ---- */
.nav {
  position: sticky;
  top: 12px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 20px;
  width: min(1100px, calc(100% - 32px));
  margin: 12px auto 0;
  padding: 10px 12px 10px 16px;
  border-radius: 999px;
}
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--fg); font-family: var(--display); font-weight: 800; font-size: 17px; text-decoration: none; }
/* The wordmark: the name, with the bean-bubble mark on a coral disc as its o.
   The mark on its own is only for where the name will not fit (icons). */
.wordmark { display: inline-flex; align-items: baseline; font-family: var(--display); font-size: 24px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; white-space: nowrap; }
.wm-o { display: inline-grid; place-items: center; width: 0.62em; height: 0.62em; margin: 0 0.03em; border-radius: 999px; background: #ff6a3d; }
.wm-o svg { width: 0.33em; height: 0.38em; stroke: none; }
.nav nav { display: flex; gap: 22px; margin-left: auto; }
.nav nav:last-child { margin-right: 12px; }
.nav nav a { color: var(--muted); font-size: 15px; font-weight: 600; text-decoration: none; }
.nav nav a:hover { color: var(--fg); }

/* ---- Hero ---- */
main { width: min(1100px, calc(100% - 32px)); margin: 0 auto; }
.hero { padding: 76px 0 0; text-align: center; }
.eyebrow {
  display: inline-block;
  margin-bottom: 20px;
  padding: 5px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
h1 { font-size: clamp(42px, 7.4vw, 84px); }
h1 em {
  font-style: normal;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lead { max-width: 660px; margin: 22px auto 0; color: var(--muted); font-size: clamp(17px, 2vw, 20px); text-wrap: pretty; }
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }
.fine { margin-top: 14px; color: var(--muted); font-size: 14px; }
.center { text-align: center; margin-left: auto; margin-right: auto; }

/* The product, framed like a window on the page (the demo below). */
.shot {
  position: relative;
  margin: 56px auto 0;
  border: 1px solid var(--line);
  border-radius: 26px;
  overflow: hidden;
  box-shadow: var(--shadow), inset 0 1px 0 var(--rim);
}

/* ---- The demo: X's reply box with the extension's panel, to try (assets/demo.js) ----
   X's part keeps X's own colours; the panel is the extension's glass. */
.demo {
  --x-card: #0b0f14; --x-line: #1c232b; --x-fg: #e7ecf0; --x-muted: #75828f; --x-blue: #1d9bf0; --x-ours: #ff7a4d;
  --tn-bg: rgba(30, 21, 16, 0.74); --tn-stroke: rgba(255, 255, 255, 0.16); --tn-fg: #fdf6f0; --tn-muted: #c4b0a3;
  --tn-item: rgba(18, 12, 9, 0.38); --tn-item-h: rgba(255, 255, 255, 0.1); --tn-item-stroke: rgba(255, 255, 255, 0.12);
  --tn-accent: #ff7a4d; --tn-shadow: 0 24px 60px -16px rgba(0, 0, 0, 0.6);
  text-align: left;
}
.demo-stage { position: relative; display: flex; flex-direction: column; align-items: center; min-height: 700px; padding: 44px 24px 40px; }
.x-dialog {
  position: relative; width: min(600px, 100%); padding: 18px 20px 14px; color: var(--x-fg); font-size: 15px; line-height: 1.45;
  background: var(--x-card); border: 1px solid var(--x-line); border-radius: 18px; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.55);
}
.x-post, .x-reply { display: grid; grid-template-columns: 44px 1fr; column-gap: 12px; }
.x-avatar { width: 44px; height: 44px; border-radius: 999px; background: linear-gradient(135deg, #ffb86b, #ff6f91); }
.x-avatar.me { background: linear-gradient(135deg, #8a5a44, #3a2a22); }
.x-who { margin: 0; }
.x-who span { color: var(--x-muted); }
.x-text { margin: 2px 0 0; font-size: 16px; }
.x-thread { width: 2px; height: 22px; margin: 4px 0 4px 21px; background: var(--x-line); }
.x-to { margin: 0 0 10px 56px; color: var(--x-muted); font-size: 14px; }
.x-to b { color: var(--x-blue); font-weight: 400; }
.x-box { min-height: 62px; padding-top: 9px; font-size: 19px; white-space: pre-wrap; overflow-wrap: anywhere; }
.x-box:empty::before { content: attr(data-placeholder); color: var(--x-muted); }
.x-tools { display: flex; align-items: center; gap: 4px; margin: 6px 0 0 56px; padding-top: 10px; border-top: 1px solid var(--x-line); }
.x-tool { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 999px; color: var(--x-blue); background: none; }
.x-tool svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.x-tool.tn { color: var(--x-ours); }
.x-tool.tn svg { width: 17px; height: 20px; fill: currentColor; stroke: none; }
.x-spacer { flex: 1; }
.x-send { padding: 8px 18px; border: 0; border-radius: 999px; font: inherit; font-weight: 700; color: var(--x-card); background: var(--x-fg); opacity: 0.55; }
.x-note { margin: 10px 0 0 56px; font-size: 13px; color: var(--x-muted); }

.tn-panel {
  position: relative; z-index: 1; width: min(400px, 100%); margin: -6px 0 0 -44px;
  color: var(--tn-fg); font-size: 14px; line-height: 1.45; border-radius: 24px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.02) 45%), var(--tn-bg);
  -webkit-backdrop-filter: blur(10px) saturate(180%); backdrop-filter: blur(10px) saturate(180%);
  border: 1px solid var(--tn-stroke); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), var(--tn-shadow);
}
.tn-panel[hidden] { display: none; }
.tn-panel.dragging { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 34px 80px -12px rgba(0, 0, 0, 0.45); }
.tn-hdr { display: flex; align-items: center; gap: 4px; padding: 8px 8px 6px 6px; user-select: none; -webkit-user-select: none; }
.tn-grip { display: grid; place-items: center; width: 18px; color: var(--tn-muted); opacity: 0.55; }
.tn-grip svg { width: 14px; height: 14px; fill: currentColor; }
.tn-title { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; }
.tn-logo { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 999px; background: #ff6a3d; }
.tn-logo svg { width: 11.3px; height: 13px; fill: #1f1410; }
.tn-chip { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; font-size: 11px; font-weight: 600; white-space: nowrap; color: var(--tn-muted); background: var(--tn-item); border: 1px solid var(--tn-item-stroke); border-radius: 999px; }
.tn-chip.voice { padding: 3px 7px 3px 9px; color: var(--tn-fg); }
.tn-spacer { flex: 1; }
.tn-ib { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 999px; color: var(--tn-muted); background: none; }
.tn-ib svg, .tn-go svg, .tn-chip svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tn-chip svg { width: 11px; height: 11px; }
.tn-body { padding: 2px 10px 8px; }
.tn-opt {
  display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; width: 100%; margin: 0 0 6px; padding: 10px 12px;
  font: inherit; color: inherit; text-align: left; background: var(--tn-item); border: 1px solid var(--tn-item-stroke); border-radius: 16px;
  transition: background 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.tn-opt.chosen { border-color: color-mix(in srgb, var(--tn-accent) 55%, transparent); }
.tn-opt.fresh { animation: tn-in 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.1) both; }
.tn-opt.fresh:nth-child(2) { animation-delay: 0.04s; }
.tn-opt.fresh:nth-child(3) { animation-delay: 0.08s; }
@keyframes tn-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.tn-num { display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; font-size: 11px; font-weight: 700; color: var(--tn-accent); background: color-mix(in srgb, var(--tn-accent) 14%, transparent); border-radius: 999px; }
.tn-hint { margin: 0; padding: 0 16px 6px; font-size: 11px; text-align: center; color: var(--tn-muted); }
.tn-ftr { display: flex; gap: 6px; padding: 6px 8px 8px; }
.tn-input { display: flex; align-items: center; flex: 1; min-width: 0; height: 36px; padding: 0 14px; overflow: hidden; font-size: 13px; white-space: nowrap; text-overflow: ellipsis; color: var(--tn-muted); background: var(--tn-item); border: 1px solid var(--tn-item-stroke); border-radius: 999px; }
.tn-go { display: grid; place-items: center; flex: none; width: 36px; height: 36px; color: var(--on-grad); background: var(--grad); border-radius: 999px; }
.demo-cap { display: none; padding: 12px 16px 14px; font-size: 14px; text-align: center; color: var(--muted); border-top: 1px solid var(--line); }

/* What only works with assets/demo.js running. */
.demo.live .demo-cap { display: block; }
.demo.live .tn-hdr { cursor: grab; touch-action: none; }
.demo.live .tn-panel.dragging .tn-hdr { cursor: grabbing; }
.demo.live .tn-opt, .demo.live .tn-ib, .demo.live .x-tool.tn { cursor: pointer; }
.demo.live .tn-opt:hover { background: var(--tn-item-h); transform: translateY(-1px); }
.demo.live .tn-ib:hover { color: var(--tn-fg); background: var(--tn-item-h); }
.demo.live .x-tool.tn:hover { background: color-mix(in srgb, var(--x-ours) 14%, transparent); }
.demo.live .x-send:not(:disabled) { opacity: 1; cursor: pointer; }
.demo button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (prefers-color-scheme: light) {
  .demo {
    --x-card: #fff; --x-line: #e3e8ec; --x-fg: #0f1419; --x-muted: #5b6875; --x-ours: #e8552a;
    --tn-bg: rgba(255, 255, 255, 0.72); --tn-stroke: rgba(255, 255, 255, 0.8); --tn-fg: #1f1410; --tn-muted: #5e463b;
    --tn-item: rgba(255, 255, 255, 0.62); --tn-item-h: #fff; --tn-item-stroke: rgba(31, 20, 16, 0.08);
    --tn-accent: #c2410c; --tn-shadow: 0 22px 50px -14px rgba(90, 46, 30, 0.3);
  }
}
@media (max-width: 700px) {
  .demo-stage { min-height: 0; padding: 20px 10px 24px; }
  .x-dialog { padding: 14px 14px 10px; }
  .x-post, .x-reply { grid-template-columns: 36px 1fr; column-gap: 10px; }
  .x-avatar { width: 36px; height: 36px; }
  .x-thread { margin-left: 17px; }
  .x-to, .x-tools, .x-note { margin-left: 46px; }
  .x-tools { gap: 0; }
  .x-box { font-size: 17px; }
  .tn-panel { margin-left: 0; }
}

/* ---- Providers ---- */
.providers { margin-top: 44px; text-align: center; color: var(--muted); font-size: 15px; }
.providers p { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.providers ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; margin-top: 14px; }
.providers li { padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; color: var(--fg); font-weight: 600; }

/* ---- Sections ---- */
.block { margin-top: 120px; }
.block > h2 { font-size: clamp(30px, 4.4vw, 46px); text-align: center; }
.block > h2 + * { margin-top: 40px; }
.block > h2 + .lead { margin-top: 16px; }
.block > .lead + * { margin-top: 40px; }
h3 { font-size: 20px; }
.card p, .card li { color: var(--muted); font-size: 16px; }
.card h3 + p { margin-top: 8px; }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.num {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 18px;
  border-radius: 999px;
  color: var(--on-grad);
  font-weight: 800;
  font-size: 15px;
  background: var(--grad);
}

.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid svg {
  width: 26px;
  height: 26px;
  margin-bottom: 16px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- What leaves the browser ---- */
.split { display: grid; grid-template-columns: 5fr 7fr; gap: 40px; align-items: center; }
.split h2 { text-align: left; font-size: clamp(30px, 4.4vw, 46px); }
.split .lead { margin-left: 0; }
.split .lead + p { margin-top: 20px; font-weight: 600; }
.flows { padding: 8px 26px; }
.flows li { display: grid; gap: 2px; padding: 18px 0 18px 30px; border-bottom: 1px solid var(--line); position: relative; }
.flows li:last-child { border-bottom: 0; }
.flows li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 26px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);
}
.flows li.none::before { background: var(--ok); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 22%, transparent); }
.flows b { color: var(--fg); font-size: 16px; }

/* ---- Pricing ---- */
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 340px)); justify-content: center; gap: 16px; }
.plan { position: relative; display: flex; flex-direction: column; gap: 18px; padding: 30px; }
.plan.best { border-color: transparent; background: var(--glass), var(--glass-base); }
/* a gradient edge, drawn as a ring so the glass inside stays glass */
.plan.best::before {
  content: "";
  position: absolute;
  inset: -1px;
  padding: 1.5px;
  border-radius: inherit;
  background: var(--grad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}
.tag {
  position: absolute;
  top: 22px;
  right: 22px;
  padding: 3px 11px;
  border-radius: 999px;
  color: var(--ok);
  background: color-mix(in srgb, var(--ok) 14%, transparent);
  font-size: 13px;
  font-weight: 700;
}
.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.price b { color: var(--fg); font-size: 46px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.plan ul { display: grid; gap: 8px; flex: 1; }
.plan li { padding-left: 26px; position: relative; }
.plan li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.45em;
  width: 12px;
  height: 7px;
  border-left: 2px solid var(--ok);
  border-bottom: 2px solid var(--ok);
  transform: rotate(-45deg);
}
.buying { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; margin-top: 34px; counter-reset: step; color: var(--muted); font-size: 15px; }
.buying li { counter-increment: step; }
.buying li::before { content: counter(step) ". "; color: var(--accent); font-weight: 800; }
.buying b { color: var(--fg); }
.block > .fine { margin-top: 26px; max-width: 620px; }

/* ---- Questions ---- */
.narrow { max-width: 760px; margin-left: auto; margin-right: auto; }
details { border-radius: 18px; padding: 0 22px; }
details + details { margin-top: 10px; }
summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; font-weight: 700; cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::after {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  margin-right: 4px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.15s ease;
}
details[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
details p { padding: 0 0 20px; color: var(--muted); font-size: 16px; }

/* ---- Last word, footer ---- */
.closing { text-align: center; }
.closing .actions { margin-top: 28px; }
.foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 24px;
  width: min(1100px, calc(100% - 32px));
  margin: 120px auto 0;
  padding: 26px 0 40px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
}
.foot nav { display: flex; gap: 20px; }
.foot a { color: var(--muted); }
.foot .disclaimer { margin-left: auto; }

/* ---- Long-form pages (privacy) ---- */
.doc { max-width: 760px; margin: 0 auto; padding: 64px 0 0; }
.doc h1 { font-size: clamp(34px, 5vw, 52px); }
.doc h2 { margin-top: 44px; font-size: 24px; }
.doc h3 { margin-top: 26px; font-size: 18px; }
.doc p, .doc ul { margin-top: 12px; color: var(--muted); }
.doc ul { padding-left: 22px; list-style: disc; }
.doc li + li { margin-top: 6px; }
.doc b, .doc strong { color: var(--fg); }
.doc .meta { font-size: 14px; }
.doc .todo { padding: 14px 18px; border: 1px dashed var(--line); border-radius: 14px; }

/* ---- Narrow screens ---- */
@media (max-width: 900px) {
  .steps, .grid { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; gap: 28px; }
  .split h2, .split .lead, .split .lead + p { text-align: center; margin-left: auto; margin-right: auto; }
}
@media (max-width: 720px) {
  .nav nav { display: none; }
  .nav .btn { margin-left: auto; }
  .hero { padding-top: 52px; }
  .block { margin-top: 84px; }
  .shot { border-radius: 16px; margin-top: 40px; }
}
@media (max-width: 600px) {
  .steps, .grid, .plans { grid-template-columns: 1fr; }
  .btn { white-space: normal; text-align: center; padding: 10px 22px; }
  .foot .disclaimer { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ping { animation: none; }
  .btn, summary::after { transition: none; }
}

/* ---- Welcome (where Whop sends buyers after checkout) ---- */
.welcome .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 32px 0 12px; text-align: left; }
.welcome .steps li + li { margin-top: 0; } /* not the text-page list spacing */
.welcome .steps .btn { margin-top: 18px; white-space: normal; text-align: center; }
@media (max-width: 600px) { .welcome .steps { grid-template-columns: 1fr; } }

/* ---- Goodbye (opened by Chrome when the extension is removed) ---- */
.bye .reasons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.bye .reasons .btn { min-height: 42px; padding: 0 18px; font-size: 15px; }
/* No scripts on this site: the relay sends the visitor back to #thanks,
   and the page swaps the question for the thank-you on its own. */
.bye-thanks { display: none; }
.bye-thanks:target { display: block; }
.bye-thanks:target ~ .bye-ask { display: none; }