@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800&family=IBM+Plex+Mono:wght@500;600&family=IBM+Plex+Sans:wght@400;500;600&display=swap");

/* Shared styling for the pages that are not the front page: pricing, download, terms, refunds, contact
   and the app's privacy notice.

   These used to wear the old blue palette from index-v4, which made every click off the homepage land
   on what looked like a different company -- worst of all on the pricing page, the one moment somebody
   is deciding to pay. The tokens below are now the homepage's own: the warm ember ramp, Archivo for
   headings and IBM Plex for text, the same light and dark values.

   The variable NAMES are unchanged (--paper, --ink, --accent ...) so no page's markup had to change
   to pick this up. The layout is still deliberately plainer than the homepage: these are pages people
   read when they are deciding whether to trust you or trying to get their money back, and neither is
   improved by animation. */

:root {
  color-scheme: light dark;
  --paper: #FAF8F6;
  --surface: #FFFFFF;
  --surface-2: #F4EFEA;
  --ink: #1D1A18;
  --ink-soft: #6F6863;
  --ink-faint: #ABA39D;
  --border: #EEE8E3;
  --border-strong: #D6CEC8;
  --accent: #FF5A0F;
  --accent-ink: #C9430A;
  --accent-tint: rgba(255, 90, 15, .10);
  --accent-glow: rgba(255, 90, 15, .30);
  --gold: #FFB100;
  --gold-ink: #9A6200;
  --gold-soft: rgba(255, 177, 0, .09);
  --gold-glow: rgba(255, 160, 0, .28);
  --ember-1: #FF9E00;
  --ember-2: #E21E2A;
  --good: #1E874B;
  --shadow: rgba(70, 30, 10, .10);
  --heat: linear-gradient(90deg, #FFC300 0%, #FF9E00 18%, #FF6A08 42%, #FF3B1E 66%, #E21E2A 84%, #C60036 100%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #141110; --surface: #1E1A18; --surface-2: #27221F;
    --ink: #F7F2EE; --ink-soft: #ADA49E; --ink-faint: #6F6762;
    --border: #332C28; --border-strong: #4B423D;
    --accent: #FF6A08; --accent-ink: #FF8A3D; --accent-tint: rgba(255, 106, 8, .16); --accent-glow: rgba(255, 106, 8, .36);
    --gold: #FFC300; --gold-ink: #FFCB47; --gold-soft: rgba(255, 195, 0, .10); --gold-glow: rgba(255, 177, 0, .30);
    --good: #34C97A; --shadow: rgba(0, 0, 0, .45);
  }
}
:root[data-theme="dark"] {
  --paper: #141110; --surface: #1E1A18; --surface-2: #27221F;
  --ink: #F7F2EE; --ink-soft: #ADA49E; --ink-faint: #6F6762;
  --border: #332C28; --border-strong: #4B423D;
  --accent: #FF6A08; --accent-ink: #FF8A3D; --accent-tint: rgba(255, 106, 8, .16); --accent-glow: rgba(255, 106, 8, .36);
  --gold: #FFC300; --gold-ink: #FFCB47; --gold-soft: rgba(255, 195, 0, .10); --gold-glow: rgba(255, 177, 0, .30);
  --good: #34C97A; --shadow: rgba(0, 0, 0, .45);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "IBM Plex Sans", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}
a { color: var(--accent-ink); }
::selection { background: var(--accent); color: #fff; }

.wrap { max-width: 800px; margin: 0 auto; padding: 0 24px; }
.wrap.wide { max-width: 1060px; }

/* ------------------------------------------------------------------ chrome */

header.top {
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  position: sticky; top: 0; z-index: 10;
  backdrop-filter: saturate(180%) blur(14px);
}
.top-row { display: flex; align-items: center; gap: 16px; height: 62px; }
.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink); }
.brand b { font-family: Archivo, system-ui, sans-serif; font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.brand span.sub { font-size: 12.5px; color: var(--ink-soft); }
.brand .tile {
  width: 26px; height: 26px; border-radius: 8px; padding: 4px;
  background: var(--heat); color: #fff; flex: none;
  box-shadow: 0 4px 12px var(--accent-glow);
}
.brand .tile svg { width: 100%; height: 100%; display: block; }
.top-links { margin-left: auto; display: flex; align-items: center; gap: 22px; font-size: 14px; }
.top-links a { color: var(--ink-soft); text-decoration: none; }
.top-links a:hover, .top-links a[aria-current="page"] { color: var(--accent-ink); }
.top-act { display: flex; align-items: center; gap: 10px; margin-left: 8px; }
.tbtn {
  width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface);
  color: var(--ink-soft); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0;
}
.tbtn:hover { color: var(--ink); border-color: var(--border-strong); }
.tbtn svg { width: 17px; height: 17px; }
.top-act .btn { padding: 8px 16px; font-size: 14px; }

footer { border-top: 1px solid var(--border); margin-top: 72px; padding: 28px 0 40px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 18px; font-size: 14px; }
.foot-links a { color: var(--ink-soft); text-decoration: none; }
.foot-links a:hover { color: var(--accent-ink); }
.foot-copy { color: var(--ink-faint); font-size: 13px; margin: 14px 0 0; }

/* ------------------------------------------------------------------ text */

main { padding: 56px 0 0; }
h1, h2, h3 { font-family: Archivo, system-ui, sans-serif; }
h1 { font-size: 38px; font-weight: 800; letter-spacing: -0.035em; line-height: 1.08; margin: 0 0 10px; }
.lede { color: var(--ink-soft); font-size: 17px; margin: 0 0 8px; }
.updated { color: var(--ink-faint); font-size: 13px; margin: 0 0 34px; }
h2 { font-size: 21px; font-weight: 700; letter-spacing: -0.02em; margin: 40px 0 10px; }
h3 { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; margin: 24px 0 6px; }
p, li { font-size: 15.5px; }
ul, ol { padding-left: 22px; }
li { margin: 6px 0; }
.note {
  background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: 12px; padding: 16px 18px; margin: 20px 0;
}
.note p:first-child { margin-top: 0; }
.note p:last-child { margin-bottom: 0; }
table { border-collapse: collapse; width: 100%; margin: 18px 0; font-size: 14.5px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
th { color: var(--ink-soft); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; }
code { font-family: "IBM Plex Mono", "Cascadia Mono", Consolas, monospace; font-size: 13px;
       background: var(--surface-2); border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px;
       /* A SHA-256 is 64 characters with nothing to break on, and on a phone it pushed the whole
          page sideways. Let it wrap rather than letting one hash scroll the page. */
       overflow-wrap: anywhere; word-break: break-word; }

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

.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 30px 0 10px; align-items: stretch; }
.plan {
  background: var(--surface); border: 1px solid var(--border); border-radius: 20px;
  padding: 26px 24px; display: flex; flex-direction: column;
  transition: transform .28s cubic-bezier(.2, .8, .3, 1), box-shadow .28s ease, border-color .28s ease;
}
/* Hovering a plan lifts it and turns up its own colour, the same as on the homepage. */
.plan:hover { transform: translateY(-6px); }
.plan:not(.featured):not(.gold):hover { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 18px 40px var(--accent-tint); }

.plan.featured { border-color: transparent; box-shadow: 0 0 0 2px var(--accent), 0 18px 44px var(--accent-tint); }
.plan.featured:hover { box-shadow: 0 0 0 3px var(--accent), 0 0 0 9px var(--accent-tint), 0 24px 54px var(--accent-glow); }
.plan.gold {
  border-color: transparent;
  background: linear-gradient(180deg, var(--gold-soft), transparent 62%), var(--surface);
  box-shadow: 0 0 0 2px var(--gold), 0 14px 34px var(--gold-glow);
}
.plan.gold:hover { box-shadow: 0 0 0 3px var(--gold), 0 0 0 9px var(--gold-soft), 0 24px 54px var(--gold-glow); }

.plan h2 { margin: 0; font-size: 12.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-soft); }
.plan.featured h2 { color: var(--accent-ink); }
.plan.gold h2 { color: var(--gold-ink); }
.plan .tag {
  align-self: flex-start; margin: 10px 0 0; font-size: 11px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--accent-ink); background: var(--accent-tint); border-radius: 100px; padding: 4px 10px;
}
.plan .price { font-family: Archivo, system-ui, sans-serif; font-size: 42px; font-weight: 800; letter-spacing: -0.04em; margin: 12px 0 2px; }
.plan .price span { font-family: "IBM Plex Sans", system-ui, sans-serif; font-size: 15px; font-weight: 600; color: var(--ink-soft); letter-spacing: 0; }
.plan.featured .price b, .plan.gold .price b { font-weight: 800; -webkit-background-clip: text; background-clip: text; color: transparent; }
.plan.featured .price b { background-image: var(--heat); }
.plan.gold .price b { background-image: linear-gradient(90deg, #FFC300, #FF9E00); }
.plan .sub { color: var(--ink-soft); font-size: 14px; margin: 0 0 16px; min-height: 44px; }
.plan .same { color: var(--ink-soft); font-size: 14.5px; line-height: 1.6; margin: 0 0 20px; flex: 1; }
.plan .same b { color: var(--ink); font-weight: 600; }
.plan ul { list-style: none; padding: 0; margin: 0 0 20px; flex: 1; }
.plan li { display: flex; gap: 9px; align-items: flex-start; margin: 9px 0; font-size: 14.5px; }
.plan li svg { flex: none; margin-top: 3px; }
.tick { color: var(--accent); font-weight: 700; }
.dash { color: var(--ink-faint); }
.plan .undersay { margin: 10px 0 0; text-align: center; font-size: 12.5px; font-weight: 600; color: var(--accent-ink); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid transparent; border-radius: 10px; padding: 11px 20px;
  font: inherit; font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--heat); color: #fff; font-weight: 700; box-shadow: 0 6px 20px var(--accent-glow); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 26px var(--accent-glow); }
.btn-gold { background: linear-gradient(90deg, #FFC300, #FF9E00); color: #2B1700; font-weight: 700; box-shadow: 0 6px 20px var(--gold-glow); }
.btn-gold:hover { transform: translateY(-1px); filter: brightness(1.04); }
.btn-quiet { background: var(--surface); color: var(--ink); border-color: var(--border); }
.btn-quiet:hover { border-color: var(--border-strong); }
.btn-block { width: 100%; }
.plan .btn + .btn { margin-top: 10px; }
.plan .renews { color: var(--ink-soft); font-size: 13px; margin: 12px 0 0; text-align: center; }

.faq h3 { margin-top: 26px; }
.faq p { margin-top: 4px; color: var(--ink-soft); }

@media (max-width: 900px) {
  .plans { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  h1 { font-size: 30px; }
  main { padding-top: 36px; }
  .top-links { gap: 14px; font-size: 13px; }
  .top-links a.opt { display: none; }
  .brand span.sub { display: none; }
  /* On a phone the header ran 38px past its own row and put the Download button against the screen
     edge. Contact is in the footer of every page, so it is the one link the header can give up here. */
  .top-links a[href="/contact.html"] { display: none; }
  .top-act { gap: 6px; margin-left: 4px; }
  .top-act .btn { padding: 7px 12px; font-size: 13px; }
  .tbtn { width: 31px; height: 31px; }
}
@media (prefers-reduced-motion: reduce) {
  .plan, .plan:hover { transform: none; }
}