/* getmailtrove.com: the shared stylesheet. Tokens, the top bar, buttons, the
   page head, prose (support, privacy, the checkout pages), pricing cards and
   the footer. The home page adds its own sections in home.css on top of
   this. The design is the same system as text2store.com, so the two sites
   read as one maker's. */

:root {
  --royal: #2E7FF7;
  --sky: #5EAFF7;
  --peri: #B8D0F8;
  --ink: #132743;
  --ground: #F4F7FF;

  --bg: var(--ground);
  --surface: #FFFFFF;
  --surface-2: #FDFEFF;
  --text: var(--ink);
  --muted: #5B6B84;
  --hairline: #E2EAF8;
  --hairline-strong: #CFDDF6;
  --accent: var(--royal);
  --accent-ink: #1C5FCC;
  --shadow: 0 1px 2px rgba(19, 39, 67, .06), 0 18px 40px -20px rgba(19, 39, 67, .28);
  --shadow-soft: 0 1px 2px rgba(19, 39, 67, .05), 0 12px 30px -22px rgba(19, 39, 67, .22);

  --sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --maxw: 1200px;
  --readw: 46rem;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0A1220; --surface: #101E33; --surface-2: #0E1A2C; --text: #EAF1FE;
    --muted: #9DB2D4; --hairline: #1E3050; --hairline-strong: #294169;
    --accent: #5EAFF7; --accent-ink: #8FC6FB;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 22px 48px -24px rgba(0,0,0,.7);
    --shadow-soft: 0 1px 2px rgba(0,0,0,.35), 0 16px 34px -24px rgba(0,0,0,.6);
  }
}

* { box-sizing: border-box; }
/* 17px root: Plex Sans runs smaller than the system stack at the same rem. */
html { -webkit-text-size-adjust: 100%; font-size: 106.25%; }
body {
  margin: 0;
  /* The footer sits at the foot of a short page (404, thanks) too. */
  min-height: 100dvh; display: flex; flex-direction: column;
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
/* Ambient wash: one quiet gesture behind every page. */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(90ch 60ch at 82% -10%, color-mix(in srgb, var(--sky) 22%, transparent), transparent 60%),
    radial-gradient(70ch 50ch at -5% 8%, color-mix(in srgb, var(--peri) 26%, transparent), transparent 62%);
  pointer-events: none;
}
@media (prefers-color-scheme: dark) {
  body::before {
    background:
      radial-gradient(90ch 60ch at 82% -10%, color-mix(in srgb, var(--royal) 20%, transparent), transparent 60%),
      radial-gradient(70ch 50ch at -5% 8%, color-mix(in srgb, #24406b 40%, transparent), transparent 62%);
  }
}

a { color: var(--accent-ink); }
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
:where(a, button, input, [tabindex]):focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 8px;
}
.eyebrow { font-weight: 600; font-size: .85rem; color: var(--accent-ink); margin: 0 0 10px; }
.eyebrow a { color: inherit; text-decoration: none; }
.eyebrow a:hover { text-decoration: underline; }

/* ---------- Top bar ---------- */
header.bar { position: relative; z-index: 2; padding: 22px 0 16px; }
.bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text); }
.brand img { width: 34px; height: 34px; display: block; }
.brand .word { font-weight: 600; font-size: 1.12rem; letter-spacing: -.01em; }
.brand .word b { font-weight: 700; color: var(--accent-ink); }
.bar-right { display: flex; align-items: center; gap: 22px; }
.nav { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.nav a { color: var(--muted); text-decoration: none; font-weight: 500; font-size: .88rem; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--accent-ink); }
/* Every header carries the store link, as a pill. */
.badge {
  font-weight: 600; font-size: .82rem;
  text-decoration: none; color: var(--accent-ink);
  border: 1px solid var(--hairline-strong);
  background: var(--surface);
  padding: 6px 11px; border-radius: 999px;
  white-space: nowrap;
}
.badge:hover { border-color: var(--accent); }
@media (max-width: 560px) {
  /* The brand and the store pill share the top row; the nav drops beneath. */
  .bar-inner { flex-wrap: wrap; row-gap: 14px; }
  .bar-right { display: contents; }
  .nav { order: 3; flex-basis: 100%; gap: 10px 18px; }
  .nav a { font-size: .95rem; }
  .badge { order: 2; }
}

/* ---------- Buttons ---------- */
.btn {
  font: inherit; font-weight: 700; font-size: 1rem;
  cursor: pointer;
  padding: 13px 22px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: var(--accent);
  color: #fff;
  box-shadow: 0 10px 22px -12px rgba(46,127,247,.85);
  transition: transform .12s ease, background .12s ease;
  text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); background: var(--accent-ink); }
.btn:active { transform: translateY(0); }
.btn svg { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.btn.ghost {
  background: var(--surface); color: var(--accent-ink);
  border-color: var(--hairline-strong); box-shadow: var(--shadow-soft);
}
.btn.ghost:hover { background: var(--surface-2); }

/* ---------- Page head ---------- */
/* Shares its element with .wrap: vertical padding only. */
.page-head { padding-top: 54px; padding-bottom: 8px; }
.page-head h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.06; letter-spacing: -.03em; font-weight: 700;
  margin: 0 0 12px; max-width: 20ch;
}
.page-head .lead { font-size: clamp(1.04rem, 1.8vw, 1.18rem); color: var(--muted); margin: 0; max-width: 52ch; }
.updated { font-weight: 500; font-size: .84rem; color: var(--muted); margin: 0 0 6px; }

/* ---------- Prose ---------- */
.doc { max-width: var(--readw); margin: 0; padding: 14px 0 10px; }
.doc h2 {
  font-size: 1.32rem; letter-spacing: -.012em; margin: 40px 0 12px; padding-top: 18px;
  border-top: 1px solid var(--hairline);
}
.doc h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 26px; }
.doc h3 { font-size: 1.04rem; margin: 26px 0 8px; }
.doc p { margin: 0 0 15px; }
.doc ul, .doc ol { margin: 0 0 16px; padding-left: 1.3em; }
.doc li { margin: 0 0 9px; }
.doc li::marker { color: var(--accent); }
.doc strong { font-weight: 700; color: var(--text); }
.doc hr { border: 0; border-top: 1px solid var(--hairline); margin: 32px 0; }
.doc code {
  font-family: var(--mono); font-size: .9em;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: 5px; padding: .08em .38em;
  /* A path like ~/Library/Containers/com.getmailtrove.mailtrove is one
     unbreakable word, wider than a phone. */
  overflow-wrap: anywhere;
}
.doc .small, .small { font-size: .88rem; color: var(--muted); }
.callout {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--accent);
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
  padding: 18px 20px;
  margin: 22px 0;
}
.callout p:last-child { margin-bottom: 0; }

/* ---------- Pricing cards ---------- */
.tiers { display: grid; grid-template-columns: 1fr 1.25fr; gap: 18px; align-items: start; }
.tier {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 20px;
  box-shadow: var(--shadow-soft);
  padding: 28px 26px 30px;
  display: flex; flex-direction: column;
  min-width: 0;
}
.tier.featured { border-color: color-mix(in srgb, var(--accent) 55%, var(--hairline)); box-shadow: var(--shadow); }
.tier h3 { font-size: 1.15rem; margin: 0 0 4px; letter-spacing: -.01em; }
.tier .who { color: var(--muted); font-size: .9rem; margin: 0 0 18px; }
.price { display: flex; align-items: baseline; gap: 8px; margin: 0 0 4px; }
.price .amt { font-size: 2.6rem; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.price .cur { font-size: .86rem; color: var(--muted); }
.price-note { color: var(--muted); font-size: .84rem; margin: 0 0 22px; }
.tier ul.feats { list-style: none; margin: 0 0 24px; padding: 0; flex: 1; }
.tier ul.feats li { position: relative; padding-left: 28px; margin: 0 0 11px; font-size: .94rem; }
.tier ul.feats li::before {
  content: ""; position: absolute; left: 0; top: 3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.tier ul.feats li::after {
  content: ""; position: absolute; left: 5px; top: 7px;
  width: 8px; height: 5px; border-left: 2px solid var(--accent-ink); border-bottom: 2px solid var(--accent-ink);
  transform: rotate(-45deg);
}
.tier .btn { width: 100%; }
.tier .cta-note { text-align: center; color: var(--muted); font-size: .78rem; margin: 10px 0 0; }
.pricing-fine { max-width: 860px; margin-top: 20px; color: var(--muted); font-size: .88rem; }
.pricing-fine p { margin: 0 0 10px; }
/* minmax(0, …): a nowrap label would otherwise set the column's minimum
   and push the cards past a phone's edge. */
@media (max-width: 760px) { .tiers { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Footer ---------- */
/* The gap above the footer is main's padding, so margin-top: auto can push
   the footer to the bottom of a short page. */
main { padding-bottom: 54px; }
footer.foot { margin-top: auto; border-top: 1px solid var(--hairline); padding: 28px 0 52px; }
.foot-inner { display: flex; align-items: center; justify-content: space-between; gap: 14px 20px; flex-wrap: wrap; }
/* One span around the whole line: flex would make ©, the year and the name
   three separate gapped items. */
.foot-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); font-size: .88rem; }
.foot-brand img { width: 22px; height: 22px; }
.foot-nav { display: flex; align-items: center; gap: 8px 20px; flex-wrap: wrap; }
.foot-nav a { color: var(--muted); text-decoration: none; font-weight: 500; font-size: .82rem; letter-spacing: .01em; }
.foot-nav a:hover { color: var(--accent-ink); }
/* The file-type pages, a row above the brand and the nav. */
.foot-files { display: flex; align-items: baseline; gap: 8px 20px; flex-wrap: wrap; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--hairline); }
.foot-files span { color: var(--muted); font-size: .82rem; font-weight: 600; }
.foot-files a { color: var(--muted); text-decoration: none; font-weight: 500; font-size: .82rem; letter-spacing: .01em; }
.foot-files a:hover { color: var(--accent-ink); }
/* Aloha Gems' other app, a row under the brand and the nav. */
.foot-sister { display: flex; align-items: baseline; gap: 8px 20px; flex-wrap: wrap; padding-top: 18px; margin-top: 18px; border-top: 1px solid var(--hairline); }
.foot-sister span { color: var(--muted); font-size: .82rem; font-weight: 600; }
.foot-sister a { color: var(--muted); text-decoration: none; font-weight: 500; font-size: .82rem; letter-spacing: .01em; }
.foot-sister a:hover { color: var(--accent-ink); }

/* ---------- Lightbox (click a screenshot) ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(10, 18, 32, .88);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  cursor: zoom-out;
}
.lightbox img { max-width: 100%; max-height: 100%; border-radius: 10px; box-shadow: 0 30px 80px -20px rgba(0,0,0,.6); }

/* ---------- Responsive ---------- */
@media (max-width: 520px) {
  .page-head { padding-top: 36px; padding-bottom: 6px; }
  .page-head h1 { font-size: 1.8rem; line-height: 1.12; margin-bottom: 10px; }
  .page-head .lead { line-height: 1.6; }
  .doc { line-height: 1.68; padding-top: 8px; }
  .doc p { margin-bottom: 17px; }
  .doc h2 { margin-top: 38px; padding-top: 22px; }
  .doc li { margin-bottom: 12px; }
  .callout { padding: 18px 18px 16px; }
  .foot-inner { row-gap: 14px; }
  /* Buttons may wrap on a phone, and the lone button on a card fills it. */
  .btn { white-space: normal; text-align: center; padding: 12px 18px; font-size: .96rem; }
  main.card .btn { width: 100%; }
}
@media (max-width: 360px) {
  /* The narrowest phones: the brand and the store pill still share a row. */
  .brand img { width: 30px; height: 30px; }
  .badge { padding: 5px 9px; font-size: .78rem; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---------- Single-card pages (buy, credits, thanks, 404) ---------- */
main.card {
  width: 100%; max-width: 660px; margin: 44px auto 0;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 20px;
  box-shadow: var(--shadow-soft); padding: 34px 36px;
}
main.card h1 { font-size: clamp(1.5rem, 3.5vw, 2rem); line-height: 1.15; letter-spacing: -.025em; margin: 0 0 12px; }
main.card p { margin: 0 0 14px; }
main.card ul, main.card ol { margin: 0 0 16px; padding-left: 1.3em; color: var(--muted); }
main.card li { margin: 0 0 8px; }
main.card li::marker { color: var(--accent); }
main.card .btn { margin-top: 6px; }
main.card .small { font-size: .86rem; color: var(--muted); }
@media (max-width: 600px) { main.card { width: calc(100% - 32px); margin: 20px auto 0; padding: 24px 22px; } }