/* ==========================================================================
   PrimeMail marketing site
   Tokens are lifted from the PrimeMail application stylesheet so the site and
   the product read as one thing rather than two.
   ========================================================================== */

:root {
  --ink: #0a2540;
  --ink-soft: #1c3b5a;
  --blue: #1160d4;
  --blue-deep: #0b47a1;
  --blue-wash: #eaf1fd;
  --paper: #ffffff;
  --mist: #f4f6fa;
  --line: #dfe5ee;
  --line-strong: #c7d2e2;
  --muted: #5b6b7f;
  --soft: #8695a8;
  --green: #067647;
  --amber: #b54708;

  --display: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --wrap: 1200px;
  --narrow: 760px;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;

  --shadow-sm: 0 1px 2px rgba(10, 37, 64, 0.06), 0 1px 3px rgba(10, 37, 64, 0.04);
  --shadow-md: 0 4px 12px rgba(10, 37, 64, 0.06), 0 12px 32px rgba(10, 37, 64, 0.07);
  --shadow-lg: 0 24px 70px rgba(10, 37, 64, 0.14), 0 4px 14px rgba(10, 37, 64, 0.06);
}

/* Reset ------------------------------------------------------------------ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
}

body {
  margin: 0;
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-soft);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a {
  color: var(--blue);
  text-decoration: none;
}

a:hover {
  color: var(--blue-deep);
}

h1,
h2,
h3,
h4 {
  font-family: var(--display);
  color: var(--ink);
  letter-spacing: -0.022em;
  line-height: 1.12;
  margin: 0 0 0.5em;
  font-weight: 700;
}

p {
  margin: 0 0 1.1em;
}

p:last-child {
  margin-bottom: 0;
}

ul,
ol {
  margin: 0 0 1.1em;
  padding-left: 1.3em;
}

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}

.pm-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 12px 20px;
  background: var(--ink);
  color: #fff;
  border-radius: 0 0 var(--r-sm) 0;
}

.pm-skip:focus {
  left: 0;
  color: #fff;
}

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/* Layout ----------------------------------------------------------------- */

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

.wrap--narrow {
  max-width: var(--narrow);
}

.section {
  padding: 104px 0;
}

.section--tight {
  padding: 76px 0;
}

.section--mist {
  background: var(--mist);
}

.section--ink {
  background: var(--ink);
  color: #b9c9dc;
}

.section--ink h2,
.section--ink h3 {
  color: #fff;
}

.section--line {
  border-top: 1px solid var(--line);
}

/* Type ------------------------------------------------------------------- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 20px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
}

.eyebrow::before {
  content: '';
  width: 22px;
  height: 1px;
  background: currentColor;
}

.section--ink .eyebrow {
  color: #6ea8f5;
}

.h1 {
  font-size: clamp(2.5rem, 5.6vw, 4.1rem);
  letter-spacing: -0.032em;
}

.h2 {
  font-size: clamp(2rem, 3.7vw, 2.85rem);
  letter-spacing: -0.028em;
}

.h3 {
  font-size: clamp(1.2rem, 1.7vw, 1.35rem);
  letter-spacing: -0.015em;
}

.lede {
  font-size: clamp(1.05rem, 1.5vw, 1.22rem);
  line-height: 1.6;
  color: var(--muted);
  max-width: 60ch;
}

.section--ink .lede {
  color: #9fb4cc;
}

.section-head {
  max-width: 680px;
  margin-bottom: 56px;
}

.section-head--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Buttons ---------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 26px;
  font-family: var(--body);
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.14s ease, background 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease;
  white-space: nowrap;
}

.btn:active {
  transform: translateY(1px);
}

.btn--primary {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 6px 18px rgba(17, 96, 212, 0.28);
}

.btn--primary:hover {
  background: var(--blue-deep);
  color: #fff;
  box-shadow: 0 10px 26px rgba(17, 96, 212, 0.34);
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}

.btn--ghost:hover {
  background: var(--paper);
  border-color: var(--ink);
  color: var(--ink);
}

.section--ink .btn--ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.28);
}

.section--ink .btn--ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}

.btn--sm {
  padding: 10px 18px;
  font-size: 14.5px;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.btn-row--center {
  justify-content: center;
}

.note {
  font-size: 14px;
  color: var(--soft);
}

/* Header ----------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.site-header.is-stuck {
  border-bottom-color: var(--line);
  box-shadow: 0 1px 20px rgba(10, 37, 64, 0.05);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 76px;
}

.brand {
  display: flex;
  align-items: center;
  flex: none;
}

.brand img {
  height: 32px;
  width: auto;
}

.brand__text {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
}

.nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.nav ul {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav a {
  display: block;
  padding: 9px 15px;
  font-size: 15.5px;
  font-weight: 500;
  color: var(--ink-soft);
  border-radius: var(--r-sm);
}

.nav a:hover {
  background: var(--mist);
  color: var(--ink);
}

.nav .current-menu-item > a,
.nav .current_page_item > a {
  color: var(--blue);
  font-weight: 600;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}

.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  margin-left: auto;
  padding: 0;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
  color: var(--ink);
}

.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  display: block;
  position: relative;
  width: 17px;
  height: 1.8px;
  margin: 0 auto;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-toggle span::before,
.nav-toggle span::after {
  content: '';
  position: absolute;
  left: 0;
}

.nav-toggle span::before {
  top: -5.5px;
}

.nav-toggle span::after {
  top: 5.5px;
}

.nav-toggle[aria-expanded='true'] span {
  background: transparent;
}

.nav-toggle[aria-expanded='true'] span::before {
  transform: translateY(5.5px) rotate(45deg);
}

.nav-toggle[aria-expanded='true'] span::after {
  transform: translateY(-5.5px) rotate(-45deg);
}

/* Hero ------------------------------------------------------------------- */

.hero {
  position: relative;
  padding: 84px 0 0;
  overflow: hidden;
  background:
    radial-gradient(900px 420px at 50% -12%, var(--blue-wash), transparent 70%),
    var(--paper);
}

.hero__inner {
  text-align: center;
  max-width: 840px;
  margin: 0 auto;
}

.hero .h1 {
  margin-bottom: 22px;
}

.hero .lede {
  margin: 0 auto 32px;
  text-align: center;
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 6px 6px;
  margin-bottom: 26px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-soft);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
}

.hero__badge b {
  padding: 3px 10px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: var(--blue);
  border-radius: 999px;
}

.hero__stage {
  position: relative;
  margin-top: 64px;
  padding-bottom: 104px;
}

/* The app sits on a plinth that fades out, so it reads as continuing below
   the fold rather than being cropped. */
.hero__stage::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 190px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--paper) 78%);
  pointer-events: none;
}

/* Product surface -------------------------------------------------------- */

.app {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.app__chrome {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.app__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--line-strong);
}

.app__url {
  margin-left: 10px;
  padding: 4px 14px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--soft);
  background: var(--mist);
  border-radius: 999px;
}

.app__body {
  display: grid;
  grid-template-columns: 210px 300px 1fr;
  min-height: 460px;
  text-align: left;
}

/* Sidebar */

.app__side {
  padding: 16px 12px;
  background: var(--paper);
  border-right: 1px solid var(--line);
}

.app__you {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px 16px;
}

.avatar {
  /* Declared with the class doubled so a descendant selector such as
     `.app__msg-head span` cannot flatten it back to a block and push the
     initials out of the circle. */
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  font-family: var(--body);
  font-size: 11.5px;
  font-weight: 700;
  color: #fff;
  background: var(--blue);
  border-radius: 50%;
}

.avatar.avatar {
  display: grid;
  place-items: center;
  line-height: 1;
}

.avatar--teal {
  background: #0e7490;
}

.avatar--violet {
  background: #7c3aed;
}

.avatar--amber {
  background: #b54708;
}

.app__you b {
  font-size: 13.5px;
  color: var(--ink);
}

.app__you span:not(.avatar) {
  display: block;
  font-size: 11.5px;
  color: var(--green);
}

.app__label {
  padding: 12px 8px 6px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--soft);
}

.app__nav {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  font-size: 13.5px;
  color: var(--ink-soft);
  border-radius: 8px;
}

.app__nav b {
  margin-left: auto;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--soft);
}

.app__nav.is-active {
  background: var(--blue-wash);
  color: var(--blue);
  font-weight: 600;
}

.app__nav.is-active b {
  color: var(--blue);
}

.dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--line-strong);
}

.dot--blue {
  background: var(--blue);
}

.dot--green {
  background: var(--green);
}

.dot--amber {
  background: var(--amber);
}

.dot--violet {
  background: #7c3aed;
}

/* List */

.app__list {
  background: var(--mist);
  border-right: 1px solid var(--line);
  overflow: hidden;
}

.app__list-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 16px 16px 10px;
}

.app__list-head h4 {
  margin: 0;
  font-size: 19px;
  letter-spacing: -0.02em;
}

.app__list-head span {
  font-size: 12px;
  color: var(--soft);
}

.app__card {
  position: relative;
  padding: 11px 14px 12px 16px;
  background: var(--paper);
  border-top: 1px solid var(--line);
  cursor: default;
}

.app__card--unread::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--blue);
}

.app__card.is-active {
  background: var(--blue-wash);
}

.app__card-top {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.app__card-from {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app__card--unread .app__card-from {
  font-weight: 700;
}

.app__card-time {
  font-size: 11.5px;
  color: var(--soft);
  font-variant-numeric: tabular-nums;
}

.app__card--unread .app__card-time {
  color: var(--blue);
  font-weight: 600;
}

.app__card-subject {
  margin-top: 2px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app__card-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--muted);
}

.app__card-preview span:first-child {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pill {
  padding: 2px 9px;
  font-size: 10.5px;
  font-weight: 700;
  border-radius: 999px;
  white-space: nowrap;
}

.pill--blue {
  color: var(--blue);
  background: var(--blue-wash);
}

.pill--green {
  color: var(--green);
  background: #e6f4ed;
}

.pill--amber {
  color: var(--amber);
  background: #fdf0e6;
}

.pill--grey {
  color: var(--muted);
  background: var(--mist);
}

/* Conversation */

.app__thread {
  padding: 16px 20px;
  background: var(--paper);
  overflow: hidden;
}

.app__thread-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.app__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  background: var(--mist);
  border-radius: 999px;
}

.app__thread h4 {
  margin: 16px 0 4px;
  font-size: 20px;
  letter-spacing: -0.022em;
}

.app__meta {
  font-size: 12.5px;
  color: var(--soft);
}

.app__msg {
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.app__msg-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.app__msg-head b {
  font-size: 13.5px;
  color: var(--ink);
}

.app__msg-head span:not(.avatar):not(.pill) {
  display: block;
  font-size: 11.5px;
  color: var(--soft);
}

.app__msg-head .app__msg-time {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--soft);
}

.app__msg p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-soft);
}

.app__note {
  margin-top: 14px;
  padding: 12px 14px;
  background: #fffaf0;
  border: 1px solid #f3e2c4;
  border-radius: var(--r-md);
}

.app__note-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 11.5px;
  color: var(--amber);
}

.app__note-head b {
  font-weight: 700;
}

.app__note p {
  margin: 0;
  font-size: 13px;
  color: #7a4a12;
}

.app__attach {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 12px;
  padding: 8px 12px 8px 9px;
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.app__attach i {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  font-family: var(--mono);
  font-size: 8.5px;
  font-style: normal;
  font-weight: 700;
  color: #fff;
  background: #d92d20;
  border-radius: 6px;
}

.app__attach b {
  font-size: 12.5px;
  color: var(--ink);
}

.app__attach span:not(.app__attach) {
  font-size: 11.5px;
  color: var(--soft);
}

/* A message that arrives after load, to show the inbox is live. */
.app__card--arriving {
  animation: pm-arrive 0.66s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes pm-arrive {
  from {
    opacity: 0;
    transform: translateY(-14px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* Feature grid ----------------------------------------------------------- */

.grid {
  display: grid;
  gap: 22px;
}

.grid--2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

.card {
  padding: 30px 28px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.card:hover {
  transform: translateY(-3px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-md);
}

.card h3 {
  margin-bottom: 8px;
  font-size: 1.12rem;
}

.card p {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.6;
}

.card__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 18px;
  color: var(--blue);
  background: var(--blue-wash);
  border-radius: 12px;
}

.card__icon svg {
  width: 21px;
  height: 21px;
}

/* Alternating showcase --------------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 64px;
  align-items: center;
}

.split + .split {
  margin-top: 104px;
}

.split--flip .split__text {
  order: 2;
}

.split__text h3 {
  font-size: clamp(1.6rem, 2.6vw, 2.05rem);
  letter-spacing: -0.026em;
  margin-bottom: 14px;
}

.split__list {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.split__list li {
  position: relative;
  padding: 8px 0 8px 30px;
  font-size: 15.5px;
  color: var(--muted);
  border-top: 1px solid var(--line);
}

.split__list li:first-child {
  border-top: 0;
}

.split__list li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 17px;
  width: 8px;
  height: 8px;
  border: 2px solid var(--blue);
  border-radius: 50%;
}

.split__visual {
  min-width: 0;
}

/* Panel: a smaller product surface used inside showcase sections. */
.panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.panel__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--soft);
  background: var(--mist);
  border-bottom: 1px solid var(--line);
}

.panel__body {
  padding: 18px 20px 22px;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 13px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.row b {
  font-size: 13.5px;
  color: var(--ink);
}

.row span:not(.avatar):not(.pill) {
  display: block;
  font-size: 12px;
  color: var(--soft);
}

.row__text {
  flex: 1;
  min-width: 0;
}

.row__end {
  margin-left: auto;
  flex: none;
}

/* Steps ------------------------------------------------------------------ */

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  counter-reset: step;
}

.step {
  position: relative;
  padding: 34px 32px;
  border-left: 1px solid var(--line);
}

.step:first-child {
  border-left: 0;
  padding-left: 0;
}

.step__n {
  display: block;
  margin-bottom: 14px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--blue);
}

.step h3 {
  font-size: 1.16rem;
  margin-bottom: 8px;
}

.step p {
  font-size: 15px;
  color: var(--muted);
  margin: 0;
}

/* Pricing ---------------------------------------------------------------- */

.plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  align-items: start;
}

.plan {
  display: flex;
  flex-direction: column;
  padding: 32px 30px 34px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  height: 100%;
}

.plan--featured {
  border-color: var(--blue);
  box-shadow: 0 20px 50px rgba(17, 96, 212, 0.14);
}

.plan__flag {
  display: inline-block;
  align-self: flex-start;
  margin-bottom: 14px;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: var(--blue);
  border-radius: 999px;
}

.plan h3 {
  font-size: 1.25rem;
  margin-bottom: 6px;
}

.plan__desc {
  font-size: 14.5px;
  color: var(--muted);
  margin-bottom: 22px;
  min-height: 44px;
}

.plan__price {
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding-bottom: 22px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--line);
}

.plan__amount {
  font-family: var(--display);
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.03em;
  line-height: 1;
}

.plan__period {
  font-size: 14px;
  color: var(--soft);
}

.plan__features {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  flex: 1;
}

.plan__features li {
  position: relative;
  padding: 7px 0 7px 27px;
  font-size: 14.5px;
  color: var(--ink-soft);
}

.plan__features li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 14px;
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--blue);
  border-bottom: 2px solid var(--blue);
  transform: rotate(-45deg);
}

.plan .btn {
  width: 100%;
}

/* FAQ -------------------------------------------------------------------- */

.faq {
  max-width: 820px;
  margin: 0 auto;
  border-top: 1px solid var(--line);
}

.faq__item {
  border-bottom: 1px solid var(--line);
}

.faq__q {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
  padding: 24px 0;
  font-family: var(--display);
  font-size: 1.06rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}

.faq__q:hover {
  color: var(--blue);
}

.faq__sign {
  position: relative;
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 3px;
  margin-left: auto;
}

.faq__sign::before,
.faq__sign::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 13px;
  height: 2px;
  background: var(--blue);
  border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: transform 0.22s ease, opacity 0.22s ease;
}

.faq__sign::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq__q[aria-expanded='true'] .faq__sign::after {
  transform: translate(-50%, -50%) rotate(0deg);
  opacity: 0;
}

.faq__a {
  display: none;
  padding: 0 44px 26px 0;
  font-size: 15.5px;
  color: var(--muted);
  line-height: 1.68;
}

.faq__a.is-open {
  display: block;
  animation: pm-fade 0.24s ease both;
}

@keyframes pm-fade {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

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

.facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.fact {
  padding: 28px 26px;
  background: var(--ink);
}

.fact b {
  display: block;
  font-family: var(--display);
  font-size: 1.9rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 6px;
}

.fact span {
  font-size: 14px;
  color: #9fb4cc;
}

/* Keycaps: PrimeMail's shortcuts, used as a structural motif. */
kbd {
  display: inline-block;
  min-width: 22px;
  padding: 3px 7px;
  font-family: var(--body);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: 6px;
}

.keys {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 26px;
  padding: 0;
  list-style: none;
}

.keys li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  color: var(--muted);
}

/* CTA -------------------------------------------------------------------- */

.cta {
  position: relative;
  padding: 96px 0;
  background: var(--ink);
  overflow: hidden;
}

.cta::before {
  content: '';
  position: absolute;
  inset: -40% 30% auto;
  height: 460px;
  background: radial-gradient(closest-side, rgba(17, 96, 212, 0.45), transparent);
  pointer-events: none;
}

.cta__inner {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.cta h2 {
  color: #fff;
  margin-bottom: 18px;
}

.cta p {
  color: #a8bdd4;
  font-size: 1.1rem;
  margin-bottom: 30px;
}

/* Footer ----------------------------------------------------------------- */

.site-footer {
  padding: 70px 0 34px;
  background: #061a2e;
  color: #8ea4bd;
  font-size: 14.5px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 44px;
  padding-bottom: 44px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-brand img {
  height: 30px;
  margin-bottom: 16px;
}

.footer-brand p {
  max-width: 34ch;
  font-size: 14.5px;
  line-height: 1.6;
}

.site-footer h4 {
  margin-bottom: 14px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #5f7794;
}

.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer li {
  margin-bottom: 9px;
}

.site-footer a {
  color: #b9c9dc;
}

.site-footer a:hover {
  color: #fff;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  padding-top: 26px;
  font-size: 13.5px;
  color: #5f7794;
}

.footer-bottom nav {
  display: flex;
  gap: 20px;
  margin-left: auto;
}

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

.page-hero {
  padding: 68px 0 56px;
  background:
    radial-gradient(700px 300px at 50% -30%, var(--blue-wash), transparent 70%),
    var(--paper);
  border-bottom: 1px solid var(--line);
  text-align: center;
}

.page-hero .lede {
  margin: 0 auto;
}

.prose {
  max-width: var(--narrow);
  margin: 0 auto;
  font-size: 16.5px;
}

.prose h2 {
  margin-top: 48px;
  font-size: 1.65rem;
}

.prose h3 {
  margin-top: 34px;
  font-size: 1.2rem;
}

.prose ul,
.prose ol {
  padding-left: 1.25em;
}

.prose li {
  margin-bottom: 8px;
}

.prose code {
  padding: 2px 7px;
  font-family: var(--mono);
  font-size: 0.86em;
  color: var(--blue-deep);
  background: var(--blue-wash);
  border-radius: 5px;
}

.prose pre {
  /* overflow-x alone does not stop a block widening its parent; a long command
     would otherwise stretch the whole page and produce a horizontal scrollbar
     on a phone. The ceiling makes the code scroll inside its own box instead. */
  max-width: 100%;
  padding: 18px 20px;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 13.5px;
  color: #dbe7f7;
  background: var(--ink);
  border-radius: var(--r-md);
}

.prose pre code {
  padding: 0;
  color: inherit;
  background: none;
}

.prose blockquote {
  margin: 24px 0;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--blue);
  color: var(--muted);
}

.prose img {
  border-radius: var(--r-md);
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.prose th,
.prose td {
  padding: 11px 12px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}

.prose th {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--soft);
}

/* Docs ------------------------------------------------------------------- */

.docs {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}

/* Without this a long command in a code block widens the grid column rather
   than scrolling within it, and the whole page gains a horizontal scrollbar. */
.docs > *,
.docs__section,
.prose {
  min-width: 0;
}

.docs__nav {
  position: sticky;
  top: 100px;
}

.docs__nav ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: doc;
}

.docs__nav a {
  display: block;
  padding: 8px 0 8px 14px;
  font-size: 14.5px;
  color: var(--muted);
  border-left: 2px solid var(--line);
}

.docs__nav a:hover {
  color: var(--blue);
  border-left-color: var(--blue);
}

.docs__section {
  scroll-margin-top: 100px;
}

.docs__section + .docs__section {
  margin-top: 56px;
  padding-top: 44px;
  border-top: 1px solid var(--line);
}

/* Contact ---------------------------------------------------------------- */

.contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}

.field {
  display: block;
  margin-bottom: 18px;
}

.field span {
  display: block;
  margin-bottom: 7px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 12px 14px;
  font-family: var(--body);
  font-size: 15.5px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
}

.field textarea {
  min-height: 150px;
  resize: vertical;
}

.field input:focus,
.field textarea:focus {
  border-color: var(--blue);
  outline: none;
  box-shadow: 0 0 0 3px var(--blue-wash);
}

.notice {
  padding: 14px 16px;
  margin-bottom: 22px;
  font-size: 15px;
  border-radius: var(--r-sm);
}

.notice--ok {
  color: var(--green);
  background: #e6f4ed;
}

.notice--bad {
  color: #b42318;
  background: #fdeceb;
}

/* Reveal on scroll ------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.is-in {
  opacity: 1;
  transform: none;
}

/* Responsive ------------------------------------------------------------- */

@media (max-width: 1080px) {
  .app__body {
    grid-template-columns: 180px 1fr;
  }

  /* The list is the least informative pane at this width, so the sidebar and
     the conversation are what survive. */
  .app__list {
    display: none;
  }

  .split {
    gap: 44px;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }
}

@media (max-width: 900px) {
  .section {
    padding: 76px 0;
  }

  .nav-toggle {
    display: block;
  }

  .nav,
  .header-actions {
    display: none;
  }

  /* The open menu is laid out in normal flow rather than as two absolutely
     positioned panels, which previously stacked on top of each other and hid
     the first navigation item behind the button. */
  .site-header.is-open {
    background: var(--paper);
  }

  .site-header.is-open .site-header__inner {
    flex-wrap: wrap;
    height: auto;
    padding-bottom: 18px;
  }

  .site-header.is-open .nav {
    display: block;
    order: 3;
    width: 100%;
    margin: 8px 0 0;
  }

  .site-header.is-open .nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .site-header.is-open .nav a {
    padding: 14px 4px;
    font-size: 16.5px;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
  }

  .site-header.is-open .header-actions {
    display: flex;
    order: 4;
    width: 100%;
    margin-top: 16px;
  }

  .site-header.is-open .header-actions .btn {
    flex: 1;
    padding-top: 13px;
    padding-bottom: 13px;
  }

  .grid--3,
  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .split,
  .contact,
  .docs {
    grid-template-columns: 1fr;
  }

  .split--flip .split__text {
    order: 0;
  }

  .split + .split {
    margin-top: 64px;
  }

  .docs__nav {
    position: static;
  }

  .steps {
    grid-template-columns: 1fr;
  }

  .step {
    padding: 26px 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .step:first-child {
    padding-top: 0;
    border-top: 0;
  }

  .plans {
    grid-template-columns: 1fr;
    max-width: 460px;
    margin: 0 auto;
  }

  .facts {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 760px) {
  /* A long shell command cannot wrap, so its minimum width propagates up and
     stretches the whole page. On a narrow screen a wrapped command is easier
     to read than a horizontal scrollbar anyway. */
  .prose pre {
    white-space: pre-wrap;
    word-break: break-word;
  }
}

@media (max-width: 620px) {
  body {
    font-size: 16px;
  }

  .wrap {
    padding: 0 20px;
  }

  .section {
    padding: 62px 0;
  }

  .hero {
    padding-top: 56px;
  }

  .h1 {
    font-size: clamp(2.05rem, 8.4vw, 2.6rem);
  }

  .hero__stage {
    margin-top: 44px;
    padding-bottom: 70px;
  }

  .app__body {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  /* On a phone the app shows one pane, exactly as PrimeMail itself does. */
  .app__side {
    display: none;
  }

  .app__thread {
    padding: 14px 16px 20px;
  }

  .grid--2,
  .grid--3,
  .grid--4,
  .facts {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .footer-bottom nav {
    margin-left: 0;
    flex-wrap: wrap;
    gap: 14px;
  }

  .btn-row .btn {
    width: 100%;
  }

  .plan__desc {
    min-height: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

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