/* Marketing pages only. The dashboard has its own stylesheet, and keeping them
   apart means a change to one cannot quietly restyle the other.

   System fonts throughout, deliberately: a webfont from someone else's CDN is a
   request to a third party on every page load, which is a strange thing for a
   privacy product to ask of a visitor before they have agreed to anything. */

:root {
  color-scheme: light dark;
  --bg: #ffffff;
  --raised: #f7f7fa;
  --sunk: #f1f1f5;
  --fg: #131317;
  --muted: #5d6270;
  --border: #e5e5ec;
  --accent: #4f46e5;
  --accent-2: #7c3aed;
  --accent-soft: rgba(79, 70, 229, 0.09);
  --accent-fg: #ffffff;
  --ok: #047857;
  --held: #b45309;
  --shadow: 0 1px 2px rgba(16, 16, 24, 0.05), 0 12px 32px -12px rgba(16, 16, 24, 0.14);
  --measure: 62ch;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0c0c10;
    --raised: #141419;
    --sunk: #101015;
    --fg: #f3f3f6;
    --muted: #9ba1b0;
    --border: #24242e;
    --accent: #8b8cf8;
    --accent-2: #a78bfa;
    --accent-soft: rgba(139, 140, 248, 0.12);
    --accent-fg: #0d0d12;
    --ok: #34d399;
    --held: #fbbf24;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 16px 40px -16px rgba(0, 0, 0, 0.7);
  }
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.65 system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* The glow behind the hero. Fixed and behind everything, so scrolling does not
   drag a gradient around and cost a repaint on every frame. */
body::before {
  content: "";
  position: fixed;
  inset: -30vh 0 auto 0;
  height: 90vh;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60% 55% at 22% 30%, var(--accent-soft), transparent 70%),
    radial-gradient(45% 45% at 80% 10%, rgba(124, 58, 237, 0.1), transparent 70%);
}

h1,
h2,
h3 {
  line-height: 1.15;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

h1 {
  margin: 0 0 18px;
  font-size: clamp(2.1rem, 5.6vw, 3.7rem);
  font-weight: 700;
}

h1 em {
  font-style: normal;
  background: linear-gradient(100deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

h2 {
  margin: 0 0 12px;
  font-size: clamp(1.45rem, 3vw, 2.1rem);
  font-weight: 660;
}

h3 {
  margin: 0 0 6px;
  font-size: 1.06rem;
  font-weight: 630;
}

p {
  margin: 0 0 14px;
  max-width: var(--measure);
}

code {
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--sunk);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
}

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* ---- shell -------------------------------------------------------------- */

main,
.nav,
footer {
  width: min(1120px, 100% - 2.5rem);
  margin-inline: auto;
}

.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px 0;
  /* Frosted rather than opaque, so the glow behind it still reads. */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: inherit;
  font-weight: 700;
  font-size: 1.12rem;
  letter-spacing: -0.02em;
  text-decoration: none;
}

/* The redaction mark, same idea as the extension icon. */
.brand-mark {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: linear-gradient(140deg, var(--accent), var(--accent-2));
  position: relative;
}

.brand-mark::after {
  content: "";
  position: absolute;
  left: 22%;
  right: 22%;
  top: 45%;
  height: 2.5px;
  border-radius: 2px;
  background: #fff;
}

.nav nav {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 0.94rem;
}

.nav nav a:not(.button) {
  color: var(--muted);
  text-decoration: none;
}

.nav nav a:not(.button):hover {
  color: var(--fg);
}

section {
  padding: 60px 0;
  border-top: 1px solid var(--border);
}

section:first-child {
  border-top: 0;
}

.section-lede {
  color: var(--muted);
  font-size: 1.02rem;
}

/* ---- buttons ------------------------------------------------------------ */

.button {
  display: inline-block;
  padding: 11px 20px;
  border-radius: 9px;
  font-size: 0.96rem;
  font-weight: 570;
  text-decoration: none;
  border: 1px solid transparent;
  white-space: nowrap;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    border-color 0.15s ease;
}

.button.primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--accent-fg);
  box-shadow: 0 8px 22px -10px var(--accent);
}

.button.primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px -12px var(--accent);
}

.button.ghost {
  border-color: var(--border);
  color: var(--fg);
  background: var(--bg);
}

.button.ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
}

.button.wide {
  display: block;
  text-align: center;
}

/* ---- hero --------------------------------------------------------------- */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  padding: clamp(44px, 8vw, 88px) 0 64px;
}

.eyebrow {
  display: inline-block;
  margin: 0 0 14px;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 590;
  letter-spacing: 0.01em;
}

.lede {
  max-width: 56ch;
  font-size: clamp(1.02rem, 1.5vw, 1.16rem);
  color: var(--muted);
}

.cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 26px 0 12px;
}

.fine {
  font-size: 0.87rem;
  color: var(--muted);
}

.fine.center {
  text-align: center;
  max-width: none;
  margin-top: 22px;
}

/* The card: what a correspondent sees, and what is behind it. */
.hero-card {
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--raised);
  box-shadow: var(--shadow);
}

.card-row {
  display: grid;
  gap: 4px;
  padding: 6px 0;
}

.card-label {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
}

.card-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92rem;
  overflow-wrap: anywhere;
}

.card-value.alias {
  color: var(--accent);
}

.card-value.redacted {
  display: flex;
  align-items: center;
  gap: 2px;
  color: var(--muted);
}

/* The point of the whole product, drawn: the real address is not there. */
.card-value.redacted i {
  display: inline-block;
  width: 92px;
  height: 12px;
  border-radius: 3px;
  background: repeating-linear-gradient(
    90deg,
    var(--muted) 0 9px,
    transparent 9px 13px
  );
  opacity: 0.5;
}

.card-divider {
  height: 1px;
  margin: 10px 0;
  background: var(--border);
}

.card-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
  font-size: 0.84rem;
  color: var(--muted);
}

.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent);
}

@media (max-width: 860px) {
  .hero {
    grid-template-columns: 1fr;
  }
}

/* ---- strip -------------------------------------------------------------- */

.strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--border);
  overflow: hidden;
}

.strip div {
  display: grid;
  gap: 2px;
  padding: 18px 20px;
  background: var(--bg);
}

.strip strong {
  font-size: 1.02rem;
  letter-spacing: -0.01em;
}

.strip span {
  color: var(--muted);
  font-size: 0.87rem;
}

/* ---- the pinning ledger ------------------------------------------------- */

.ledger {
  margin: 26px 0 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--raised);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.ledger .row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.1fr);
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-top: 1px solid var(--border);
  font-size: 0.92rem;
}

.ledger .row:first-child {
  border-top: 0;
}

.ledger .from {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85rem;
  overflow-wrap: anywhere;
}

.ledger .from em {
  color: var(--muted);
  font-family: system-ui, sans-serif;
  font-style: normal;
}

.ledger .arrow {
  color: var(--muted);
}

.ledger .verdict {
  font-weight: 545;
}

.ledger .verdict.ok {
  color: var(--ok);
}

.ledger .verdict.held {
  color: var(--held);
}

/* One column reads better than three squeezed ones on a phone. */
@media (max-width: 640px) {
  .ledger .row {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .ledger .arrow {
    display: none;
  }
}

/* ---- steps and features ------------------------------------------------- */

.steps ol {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 26px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps li {
  counter-increment: step;
}

.steps li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-bottom: 12px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--accent-fg);
  font-size: 0.85rem;
  font-weight: 660;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 24px;
}

.grid article {
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--raised);
  transition:
    transform 0.18s ease,
    border-color 0.18s ease;
}

.grid article:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}

.grid p,
.steps p {
  margin: 0;
  color: var(--muted);
  font-size: 0.94rem;
}

/* ---- pricing ------------------------------------------------------------ */

.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 22px;
  margin-top: 26px;
  /* Stretch, not start: two cards of different heights beside each other read
     as one being unfinished. */
  align-items: stretch;
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--raised);
}

/* Takes the slack, so the two buttons sit on the same line whatever the plans
   list. */
.plan ul {
  flex: 1;
}

.plan.featured {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  box-shadow: var(--shadow);
}

.plan.featured::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 16px;
  padding: 1px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  /* Draws the gradient as a border only, without a wrapper element. */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* Out of flow, so the featured card's heading starts level with the other one.
   In flow it pushed everything down by its own height and the two cards no
   longer lined up. */
.badge {
  position: absolute;
  top: 18px;
  right: 18px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 610;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.plan .price {
  margin: 6px 0 16px;
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.plan .amount {
  font-size: 2.4rem;
  font-weight: 690;
  letter-spacing: -0.03em;
}

.plan .period {
  color: var(--muted);
  font-size: 0.95rem;
}

.plan ul {
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: 0.94rem;
}

.plan li {
  padding: 6px 0 6px 24px;
  position: relative;
}

.plan li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 13px;
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

/* ---- footer ------------------------------------------------------------- */

footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 30px 0 46px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.9rem;
}

footer p {
  margin: 0;
}

footer nav {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

/* ---- reveal ------------------------------------------------------------- */

/* Scoped to .js, which the script adds to <html> before anything paints. The
   default state of this page is fully visible: if the script is blocked, fails
   to parse, or never runs, the content is simply there. Hiding by default and
   relying on JavaScript to reveal it means one broken request renders a blank
   marketing page, which is a poor trade for a fade. */
.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.5s ease,
    transform 0.5s ease;
}

.js .reveal.shown {
  opacity: 1;
  transform: none;
}

/* Motion is decoration here. Anyone who has asked for less of it gets the page
   fully visible and still, rather than a version that merely animates faster. */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .button,
  .grid article {
    transition: none;
  }

  .button:hover,
  .grid article:hover {
    transform: none;
  }
}