/* esendblue — marketing site
   One stylesheet, no framework. The page is four screens long; a build step
   would cost more than it saves. */

:root {
  --ink: #0b1020;
  --footer-bg: #232323;
  --footer-fg: #f5f5f5;
  --footer-muted: #a3a3a3;
  --footer-line: #383838;
  /* The chips are a label, not a claim to read twice — a step quieter than
     the footer's body text, matching the weight they carry in the design. */
  --footer-chip: #8f8f8f;
  /* The neutrals below are Radix Colors' `slate` scale, the same scale the
     dashboard builds its tokens from — steps 11, 6, 4 and 2. The site has no
     build step, so the values are written out rather than imported; they are
     copied, not invented, and the console is the reference if one ever needs
     checking. `--ink` stays the brand navy: it is the mark, and Radix supplies
     the greys around it, not the identity. */
  --ink-2: #3a414c;      /* between slate 11 and 12 — body copy */
  --muted: #60646c;      /* slate 11 */
  --line: #d9d9e0;       /* slate 6 */
  --line-soft: #e8e8ec;  /* slate 4 */
  --bg: #ffffff;
  --band: #f9f9fb;       /* slate 2 */
  --accent: #2f55e8;
  --accent-hover: #2444cc;
  --accent-soft: #eef2ff;
  --code-bg: #0c1120;
  --code-bar: #131a2e;
  --code-line: #232c45;
  --code-text: #d7ddf0;

  --wrap: 1120px;
  --radius: 16px;
  --radius-inner: 10px;
  /* Two elevations, borrowed from the console: a resting card and the same
     card under the cursor. Anything heavier reads as a modal. */
  --shadow-card: 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-card-hover: 0 6px 24px rgba(16, 24, 40, 0.07), 0 1px 3px rgba(16, 24, 40, 0.04);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

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

h1, h2, h3 { margin: 0; letter-spacing: -0.021em; line-height: 1.14; font-weight: 600; }
p { margin: 0; }
code { font-family: var(--mono); font-size: 0.88em; }

a { color: inherit; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 20;
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; }

/* ── buttons ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 40px; padding: 0 20px;
  border-radius: 999px; border: 1px solid transparent;
  font-size: 14.5px; font-weight: 500; text-decoration: none;
  white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
/* Near-black, not the accent. On white it carries about 18:1 against the
   accent's 5.8:1, and — the part that matters more — the accent is already on
   the chips, the eyebrows, the event names and the ticks. A fifth blue thing
   stops reading as the one to press. */
.btn--solid { background: var(--ink); color: #fff; }
.btn--solid:hover { background: #1b2338; }
.btn--outline { border-color: var(--line); color: var(--ink); background: #fff; }
.btn--outline:hover { border-color: #c8d0de; background: #fbfcfe; }
.btn--ghost { color: var(--ink-2); }
.btn--ghost:hover { color: var(--ink); }
.btn--lg { height: 48px; padding: 0 28px; font-size: 16px; }
.btn--full { width: 100%; }

/* ── nav ─────────────────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 10;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(180%) blur(14px);
  /* The rule appears only once the page has moved. At rest the header sits on
     the hero without a seam across it; the moment content slides under, the
     edge is there to separate them. */
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.nav.is-stuck {
  border-bottom-color: var(--line-soft);
  box-shadow: 0 1px 12px -6px rgba(11, 16, 32, 0.28);
}
.nav__inner { display: flex; align-items: center; gap: 30px; height: 68px; }

.brand {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 600; font-size: 16.5px; letter-spacing: -0.02em;
  text-decoration: none; color: var(--ink);
}
.brand__mark { width: 26px; height: 26px; flex: none; }
.brand--sm { font-size: 15.5px; }

.nav__links { display: flex; gap: 2px; margin-left: 10px; }
.nav__links a {
  font-size: 14.5px; color: var(--ink-2); text-decoration: none;
  padding: 7px 12px; border-radius: 999px;
  transition: color .15s ease, background-color .15s ease;
}
.nav__links a:hover { color: var(--ink); background: var(--accent-soft); }
.nav__actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }

/* ── shared section furniture ────────────────────────────────────────── */
.section { padding: 84px 0; }
.section--tight { padding: 64px 0; }
.band { background: var(--band); border-block: 1px solid var(--line-soft); }

.eyebrow {
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--accent);
  margin-bottom: 14px;
}
.section__title { font-size: clamp(26px, 3.2vw, 34px); max-width: 20ch; }
.section__sub { margin-top: 14px; color: var(--muted); max-width: 62ch; font-size: 16.5px; }

.grid { display: grid; gap: 20px; margin-top: 44px; }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid h3 { font-size: 17px; margin-bottom: 9px; }
.grid p { color: var(--muted); font-size: 15px; }
.grid code { color: var(--ink-2); background: var(--band); border: 1px solid var(--line-soft);
  padding: 1px 5px; border-radius: 4px; }

/* A feature is a card, not a column of loose text: the border is what tells
   the eye where one claim ends and the next begins, which matters most on a
   narrow screen where they stack into a single run of paragraphs. */
.card {
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow-card);
  transition: box-shadow .3s var(--ease-out-expo), border-color .3s var(--ease-out-expo);
}
.card:hover { box-shadow: var(--shadow-card-hover); border-color: var(--line); }

/* The icon is a quiet index mark, not an illustration — accent on a tinted
   square, at the size of two lines of body text. */
.card__icon {
  display: grid; place-items: center;
  width: 38px; height: 38px; margin-bottom: 14px;
  border-radius: var(--radius-inner);
  background: var(--accent-soft);
  color: var(--accent);
}
.card__icon svg { width: 20px; height: 20px; fill: currentColor; }

/* ── hero ────────────────────────────────────────────────────────────── */
.hero { padding: 76px 0 88px; }
.hero__grid { display: grid; grid-template-columns: 1.02fr 1fr; gap: 56px; align-items: center; }
.hero h1 { font-size: clamp(34px, 4.6vw, 52px); max-width: 15ch; }
.lede { margin-top: 20px; font-size: 17.5px; color: var(--muted); max-width: 46ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.hero__note { margin-top: 16px; font-size: 14px; color: var(--muted); }

/* One outlined pill, not three filled ones — same shape as the footer's row, so
   the two read as the same device rather than two different ideas. Three solid
   blue blocks above the headline also competed with the button for the eye. */
.chip {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 22px;
  font-family: var(--mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent);
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 12px;
}
.chip__dot {
  width: 6px; height: 6px; flex: none;
  border-radius: 999px; background: var(--accent);
}

/* ── code panel ──────────────────────────────────────────────────────── */
.panel {
  background: var(--code-bg); border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 24px 64px -28px rgba(11, 16, 32, 0.5), 0 0 0 1px rgba(11, 16, 32, 0.06);
}
.panel__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--code-bar); border-bottom: 1px solid var(--code-line);
  padding: 0 12px;
}
.tabs { display: flex; }
.tab {
  appearance: none; background: none; border: 0; cursor: pointer;
  font-family: var(--font); font-size: 13px; font-weight: 500;
  color: #7f8bab; padding: 12px 12px 11px;
  border-bottom: 2px solid transparent; transition: color .15s ease;
}
.tab:hover { color: #b9c3dd; }
.tab.is-active { color: #fff; border-bottom-color: #4d7cff; }
.panel__route {
  font-family: var(--mono); font-size: 11.5px; color: #6d799a;
  letter-spacing: 0.02em; padding-right: 4px;
}

.code {
  display: none; margin: 0; padding: 20px;
  font-family: var(--mono); font-size: 12.9px; line-height: 1.72;
  color: var(--code-text);
  overflow-x: auto;           /* long lines scroll here, never widen the page */
  -webkit-overflow-scrolling: touch;
}
.code.is-active { display: block; }
.c-str { color: #9ad9a2; }
.c-kw  { color: #b79cff; }
.c-fn  { color: #6fb6ff; }
.c-key { color: #7fc9ff; }

.panel__out {
  display: flex; align-items: center; gap: 10px;
  border-top: 1px solid var(--code-line); padding: 12px 20px;
  font-family: var(--mono); font-size: 12.4px; color: #96a2c2;
  overflow-x: auto;
}
.panel__out-label {
  flex: none; font-size: 10.5px; font-weight: 500; letter-spacing: 0.05em;
  color: #6fd08a; border: 1px solid rgba(111, 208, 138, 0.35);
  border-radius: 5px; padding: 1px 6px;
}

/* ── events ──────────────────────────────────────────────────────────── */
.events { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.events h2 { font-size: clamp(24px, 2.8vw, 31px); max-width: 17ch; }
.events__copy p { margin-top: 16px; color: var(--muted); font-size: 16.5px; }
.events__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.events__list li {
  display: flex; align-items: baseline; gap: 14px;
  padding: 11px 2px; border-bottom: 1px solid var(--line-soft);
}
.events__list code { color: var(--accent); flex: none; min-width: 168px; }
.events__list span { color: var(--muted); font-size: 14.5px; }

/* ── steps ───────────────────────────────────────────────────────────── */
.steps {
  list-style: none; margin: 44px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
}
.steps li { border-top: 2px solid var(--ink); padding-top: 18px; }
.steps__n {
  display: block; font-family: var(--mono); font-size: 12px;
  color: var(--accent); margin-bottom: 10px;
}
.steps h3 { font-size: 17.5px; margin-bottom: 9px; }
.steps p { color: var(--muted); font-size: 15px; }
.steps code { color: var(--ink-2); background: #eef1f7; padding: 1px 5px; border-radius: 4px; }

/* ── pricing ─────────────────────────────────────────────────────────── */
.plans { align-items: stretch; }
.plan {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px 22px;
}
.plan--featured { border-color: var(--accent); position: relative; }
.plan__tag {
  position: absolute; top: -10px; left: 22px;
  background: var(--accent); color: #fff; font-size: 11px; font-weight: 500;
  letter-spacing: 0.02em; padding: 3px 9px; border-radius: 20px;
}
.plan h3 { font-size: 16px; }
.plan__price {
  margin-top: 12px; font-size: 32px; font-weight: 600; letter-spacing: -0.03em;
  line-height: 1.1;
}
.plan__price span { font-size: 14px; font-weight: 400; color: var(--muted); letter-spacing: 0; }
/* the amount is a span too, so it has to be pulled back out of the suffix rule */
.plan__price .plan__amt {
  font-size: inherit; font-weight: inherit; color: inherit; letter-spacing: inherit;
}

/* ── billing period toggle ───────────────────────────────────────────── */
.pricing__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 28px; flex-wrap: wrap;
}
.seg {
  display: inline-flex; flex: none; gap: 2px; padding: 3px;
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
}
.seg__btn {
  appearance: none; border: 0; cursor: pointer; background: transparent;
  font-family: var(--font); font-size: 13px; font-weight: 500;
  padding: 8px 16px; border-radius: 999px; color: var(--muted);
  transition: background-color .15s ease, color .15s ease;
}
.seg__btn:hover { color: var(--ink); }
.seg__btn.is-on { background: var(--ink); color: #fff; }
.pricing__note {
  margin-top: 16px; font-size: 14.5px; color: var(--muted); max-width: 62ch;
}
.pricing__note[hidden] { display: none; }
.plan__vol {
  margin-top: 8px; font-size: 14px; color: var(--muted);
  min-height: 42px;
}
.plan ul {
  list-style: none; margin: 18px 0 22px; padding: 18px 0 0;
  border-top: 1px solid var(--line-soft);
  display: grid; gap: 9px;
}
.plan li { font-size: 14.5px; color: var(--ink-2); padding-left: 20px; position: relative; }
.plan li::before {
  content: ""; position: absolute; left: 3px; top: 9px;
  width: 8px; height: 4px; border-left: 1.6px solid var(--accent);
  border-bottom: 1.6px solid var(--accent); transform: rotate(-45deg);
}
.plan .btn { margin-top: auto; }

/* ── access ──────────────────────────────────────────────────────────── */
.access { padding: 92px 0; }
.access__inner { max-width: 56ch; }
.access h2 { font-size: clamp(26px, 3.2vw, 34px); }
.access p { margin-top: 16px; color: var(--muted); font-size: 16.5px; }
.access__mail { margin-top: 22px; }
.access__mail a {
  font-family: var(--mono); font-size: 17px; color: var(--accent);
  text-decoration: none; border-bottom: 1px solid rgba(32, 80, 230, 0.35);
  padding-bottom: 2px;
}
.access__mail a:hover { border-bottom-color: var(--accent); }

/* ── footer ──────────────────────────────────────────────────────────── */
.footer {
  background: var(--footer-bg); color: var(--footer-fg);
  padding: 66px 0 0; overflow: hidden;
}
.footer .brand { color: var(--footer-fg); }
.footer__top { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 40px; }
.footer__blurb {
  margin-top: 14px; max-width: 34ch;
  font-size: 14.5px; line-height: 1.62; color: var(--footer-muted);
}
.footer__col h3 {
  font-size: 12.5px; font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--footer-muted); margin-bottom: 15px;
}
.footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.footer__col a {
  font-size: 14.5px; color: var(--footer-fg); text-decoration: none; opacity: 0.82;
  transition: opacity .15s ease;
}
.footer__col a:hover { opacity: 1; }
.footer__chips {
  list-style: none; margin: 52px 0 0; padding: 24px 0 0;
  border-top: 1px solid var(--footer-line);
  display: flex; flex-wrap: wrap; gap: 10px;
}
.footer__chips li {
  font-family: var(--mono); font-size: 11.5px; color: var(--footer-chip);
  border: 1px solid var(--footer-line); border-radius: 999px; padding: 5px 12px;
}
.footer__bottom {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 16px; margin-top: 22px;
}
.footer__note { font-size: 13.5px; color: var(--footer-muted); }

/* The wordmark sizes off the viewport rather than a fixed 218px, so it stays
   one uncut line instead of being sliced mid-word on a narrow window. The
   0.69em height crops the band the same way at every size — "esendblue" has no
   descender, so nothing readable is lost. */
.footer__mark {
  margin-top: 30px;
  font-size: clamp(52px, 18.6vw, 214px);
  height: 0.69em;
}
.footer__mark span {
  display: block; font-weight: 700; letter-spacing: -0.045em; line-height: 1;
  color: rgba(245, 245, 245, 0.05); white-space: nowrap;
  -webkit-user-select: none; user-select: none;
}

/* ── narrow ──────────────────────────────────────────────────────────── */
@media (max-width: 940px) {
  .hero__grid { grid-template-columns: 1fr; gap: 40px; }
  .hero h1, .lede { max-width: none; }
  .events { grid-template-columns: 1fr; gap: 32px; }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: 1fr; gap: 22px; }
  .footer__top { grid-template-columns: 1fr 1fr; gap: 36px; }
}

@media (max-width: 720px) {
  /* The links are anchors to sections further down the same page, so dropping
     them costs nothing here — the two actions are what must stay reachable. */
  .nav__links { display: none; }
  .section, .access { padding: 60px 0; }
  .section--tight { padding: 48px 0; }
  .hero { padding: 52px 0 64px; }
  .grid--4 { grid-template-columns: 1fr; gap: 26px; }
  .grid { margin-top: 32px; }
  .events__list code { min-width: 0; }
  .events__list li { flex-direction: column; gap: 2px; }
  .plan__vol { min-height: 0; }
  .pricing__head { flex-direction: column; gap: 20px; }
  .footer__top { grid-template-columns: 1fr 1fr; gap: 32px; }
  /* Side by side they read as one run-on sentence once the gap closes up. */
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: 6px; }
}

@media (max-width: 420px) {
  .wrap { padding: 0 18px; }
  .nav__inner { gap: 12px; }
  .btn { padding: 0 13px; font-size: 14px; }
  .code { font-size: 12.2px; padding: 16px; }
}