/* guardmail.app
   One blue, white type in Outfit, white sheets in the blue, calm rounded
   tiles in a warm cream, pill buttons. Coral is reserved for scam email,
   sunflower is the colour of what is good or counted (numbers, the key, the
   shield), green is the tick. The pictures are drawn objects with an ink
   outline (src/vignettes.mjs); their colours are the ones named here.
   No script and no inline styles (the content security policy allows neither),
   one font file, self-hosted. Motion is CSS only, moves by transform and
   opacity, and stops for readers who ask for reduced motion. Sizes are in rem
   so the reader's own font size counts: running text is at least 18px,
   nothing is smaller than 16px. The exceptions: the two small labels on the
   first screen (they follow the approved screen) and the few words that are
   part of a picture, which are 13px or larger. */
@font-face {
  font-family: "Outfit";
  src: url("/fonts/outfit-latin-wght-normal.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------------------ tokens */
:root {
  color-scheme: light;
  --blue: #1b4fe4;
  --blue-deep: #1640c2;
  --pale: #dce6ff;
  --wash: #edf2ff;
  --ink: #0c1a2b;
  --muted: #5a6b80;
  /* The neutral surfaces are a warm cream (they were a grey-blue, #f2f5fa
     with lines in #e3e9f2 and dashes in #aab7ca): change them back here. */
  --tile: #fff7ea;
  --line: #efe3c8;
  --dash: #c4b388;
  --coral: #ff6a55;
  --coral-wash: #fff0ed;
  --coral-ink: #c2331f;
  --coral-deep: #7a1f12;
  --coral-mid: #a04a3e;
  /* The accents of the pictures: sunflower with ink on it, a calm green for
     the tick, the paper of an envelope, a quiet grey for spam. */
  --sun: #ffc53d;
  --sun-deep: #f2a81d;
  --sun-wash: #ffefc2;
  --green: #1f9d68;
  --paper: #fffdf8;
  --grey: #8794a8;
  --grey-deep: #5a6b80;
  --font: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(16px, 5vw, 64px);
  --wrap: 1216px;
  /* Height of the header on wide screens: 30 + the "Sign in" pill (43) + 30. */
  --head-h: 103px;
  --r-sheet: 36px;
  --r-card: 28px;
  --r-tile: 18px;
  /* One spacing scale for everything that is not the first screen. */
  --s1: 8px;
  --s2: 12px;
  --s3: 16px;
  --s4: 24px;
  --s5: 32px;
  --s6: 48px;
  --s7: 64px;
  --band: clamp(72px, 9.4vw, 128px);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --glide: cubic-bezier(0.45, 0, 0.2, 1);
}

/* What sits on white. Blue surfaces re-declare the same names (below), white
   cards inside a blue surface declare them back, so buttons, links, pills and
   focus rings follow without knowing where they are. */
:root,
.hero-sheet,
.sheet,
.who-card,
.price-card,
.drop-panel,
.site-foot {
  --fg: var(--ink);
  --soft: var(--muted);
  --link: var(--blue);
  --btn-bg: var(--blue);
  --btn-fg: #fff;
  --btn-hover: var(--blue-deep);
  --ghost-fg: var(--blue);
  --ghost-line: rgba(27, 79, 228, 0.45);
  --ghost-hover: var(--wash);
  --pill-bg: var(--wash);
  --pill-fg: var(--blue);
  --focus: var(--blue);
}
.site-head,
.hero,
.page-head,
.band.blue,
.cta,
.pitch,
.rule-bubble {
  --fg: #fff;
  --soft: var(--pale);
  --link: #fff;
  --btn-bg: #fff;
  --btn-fg: var(--blue);
  --btn-hover: var(--pale);
  --ghost-fg: #fff;
  --ghost-line: rgba(255, 255, 255, 0.6);
  --ghost-hover: rgba(255, 255, 255, 0.12);
  --pill-bg: var(--pale);
  --pill-fg: var(--blue);
  --focus: #fff;
}

/* -------------------------------------------------------------------- base */
*,
*::before,
*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.1875rem;
  line-height: 1.55;
  color: var(--ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}
h1, h2, h3 { font-weight: 700; color: inherit; }
a { color: var(--link); text-underline-offset: 0.18em; text-decoration-thickness: 0.08em; }
a:hover { text-decoration-thickness: 0.14em; }
strong, b { font-weight: 600; }
svg { flex: none; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
:where(a, summary):focus-visible { border-radius: 6px; }
.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.nowrap { white-space: nowrap; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -120px; z-index: 30; background: #fff; color: var(--blue); font-weight: 700; padding: 12px 22px; border-radius: 999px; --focus: #fff; }
.skip:focus { top: 16px; }

/* ----------------------------------------------------------- buttons, pills
   The two buttons of the first screen: 19px/700 with 17px 32px around it, and
   the outlined one, 18px/600 with 15px 28px inside a 2px line. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: normal;
  text-decoration: none;
  padding: 17px 32px;
  border: 0;
  border-radius: 999px;
  text-wrap: balance;
  transition: background-color 0.18s, border-color 0.18s, color 0.18s, transform 0.18s var(--ease);
}
.button:hover { background: var(--btn-hover); transform: translateY(-1px); }
.button:active { transform: translateY(0) scale(0.98); }
.button.ghost { background: transparent; color: var(--ghost-fg); border: 2px solid var(--ghost-line); font-size: 1.125rem; font-weight: 600; padding: 15px 28px; }
.button.ghost:hover { background: var(--ghost-hover); border-color: var(--ghost-fg); }
.button.small { font-size: 1.03125rem; font-weight: 600; padding: 11px 20px; }
.pill { display: inline-block; margin: 0; background: var(--pill-bg); color: var(--pill-fg); font-size: 1rem; font-weight: 600; line-height: 1.5rem; padding: 4px 14px; border-radius: 999px; }
.signup { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) 14px; }
.fineprint { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--soft); }
.more { margin: 0; }
.more a { font-weight: 600; text-decoration: none; }
.i-arrow { width: 0.95em; height: 0.95em; margin-left: 0.3em; vertical-align: -0.12em; transition: transform 0.2s var(--ease); }
a:hover > .i-arrow,
a:hover .nowrap > .i-arrow { transform: translateX(3px); }

/* ------------------------------------------------------------------ header
   As on the approved screen: 30px above and below, the mark at 30px with the
   name in 23px/700, the links in 17px/500 with 32px between them, and one
   white pill. The language switch hangs to the left of the pill without
   taking part in the layout, so the three parts sit where the screen has them. */
.site-head { position: relative; z-index: 20; background: var(--blue); color: #fff; line-height: normal; }
.site-head .wrap { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 30px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 1.4375rem; font-weight: 700; line-height: normal; color: inherit; text-decoration: none; white-space: nowrap; }
.brand .logo { width: 30px; height: 30px; }
.nav { display: flex; gap: 32px; font-size: 1.0625rem; font-weight: 500; }
.nav a { color: var(--pale); text-decoration: none; white-space: nowrap; transition: color 0.18s; }
.nav a:hover,
.nav a[aria-current] { color: #fff; }
.head-tools { position: relative; display: flex; align-items: center; gap: 10px; }

.drop { position: relative; }
.drop > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; color: #fff; font-size: 1rem; font-weight: 600; user-select: none; transition: background-color 0.18s; }
.drop > summary::-webkit-details-marker { display: none; }
.lang { position: absolute; right: calc(100% + 14px); top: 50%; translate: 0 -50%; }
/* Beside a long navigation the switch takes part in the layout, so the links sit in the middle of what is left. */
.nav-long .lang { position: static; translate: none; }
.lang > summary { padding: 9px 10px 9px 12px; color: var(--pale); }
.lang > summary:hover,
.lang[open] > summary { background: rgba(255, 255, 255, 0.14); color: #fff; }
.lang .i-globe { width: 20px; height: 20px; }
.lang .i-chevron { width: 18px; height: 18px; transition: transform 0.2s var(--ease); }
.lang[open] .i-chevron { transform: rotate(180deg); }
.drop-panel { position: absolute; right: 0; top: calc(100% + 10px); z-index: 25; margin: 0; padding: 10px; list-style: none; min-width: 210px; background: #fff; color: var(--ink); line-height: 1.4; border-radius: 22px; box-shadow: 0 18px 44px rgba(12, 26, 43, 0.2); }
.drop-panel a { display: block; padding: 10px 14px; border-radius: 12px; color: var(--ink); font-size: 1.0625rem; font-weight: 500; text-decoration: none; transition: background-color 0.18s; }
.drop-panel a:hover { background: var(--tile); }
.drop-panel a[aria-current] { color: var(--blue); font-weight: 600; }
.drop[open] > .drop-panel { animation: panel-in 0.22s var(--ease); }
@keyframes panel-in { from { opacity: 0; translate: 0 -6px; } }

/* The menu of narrow screens: a <details>, so it opens without script. */
.menu { display: none; position: static; }
.menu > summary { width: 48px; height: 48px; justify-content: center; border: 2px solid rgba(255, 255, 255, 0.6); }
.menu > summary:hover { background: rgba(255, 255, 255, 0.12); }
.menu > summary svg { width: 24px; height: 24px; }
.menu .i-close,
.menu[open] .i-menu { display: none; }
.menu[open] .i-close { display: block; }
.menu-panel { left: var(--gutter); right: var(--gutter); top: calc(100% - 6px); padding: 14px; border-radius: var(--r-card); }
.menu-nav { display: grid; }
.menu-nav a { font-size: 1.25rem; font-weight: 600; padding: 13px 14px; }
.menu-langs { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 10px 0 0; padding: 14px 4px 0; border-top: 2px solid var(--tile); }
.menu-langs a { padding: 8px 12px; font-size: 1rem; background: var(--tile); border-radius: 999px; }
.menu-state { display: grid; gap: 10px; margin-top: 14px; padding: 16px 4px 4px; border-top: 2px solid var(--tile); }
.menu-state .button { display: flex; padding: 15px 22px; font-size: 1.125rem; border-radius: 999px; }
.menu-state .button:not(.ghost) { color: #fff; font-weight: 700; }
.menu-state .button:not(.ghost):hover { background: var(--btn-hover); }
.menu-state .button.ghost { color: var(--blue); font-weight: 600; padding: 13px 22px; }
.menu-state .button.ghost:hover { background: var(--wash); }

/* -------------------------------------------------------------------- hero
   The approved screen, with its numbers. On a 1280 x 800 window: the header
   ends at 103, the headline (96px, line-height 1, -0.035em) starts 52px
   below it, the sentence (22px/1.45, at most 640 wide) follows after 22px, the
   two buttons after 28px, and at 550 the white sheet begins, 64px from either
   side, corners of 36px, 34px 44px inside.
   The copy block is as tall as the window minus the header and minus the
   250px of sheet that the screen shows, so the sheet starts where it should on
   other window heights too. Two springs share the spare height 24 : 87.22,
   which gives exactly those 52px on the 800px window. */
.hero { background: var(--blue); color: #fff; }
.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-height: calc(min(100vh, 900px) - var(--head-h) - 250px);
  min-height: calc(min(100svh, 900px) - var(--head-h) - 250px);
}
.hero-copy::before { content: ""; flex: 24 0 28px; }
.hero-copy::after { content: ""; flex: 87.22 0 40px; }
.hero h1 { margin: 0; max-width: 100%; font-size: clamp(2.75rem, 7.5vw, 6rem); line-height: 1; letter-spacing: -0.035em; text-wrap: balance; }
.hero h1.long { font-size: clamp(2.5rem, 6.25vw, 5rem); }
.hero h1.longer { font-size: clamp(2.25rem, 5.625vw, 4.5rem); line-height: 1.03; max-width: 15em; }
.hero-lede { margin: 22px 0 0; max-width: 640px; font-size: clamp(1.1875rem, 1.72vw, 1.375rem); line-height: 1.45; color: var(--pale); text-wrap: balance; }
.hero-buttons { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px; margin-top: 28px; }

/* The sheet: a complete object in the blue. It is 250px + its corner radius
   tall, so the first screen shows it rising from the lower edge, as approved,
   and scrolling shows where it ends. It holds the example inbox and nothing
   else. */
.hero-sheet { background: #fff; color: var(--ink); line-height: normal; border-radius: var(--r-sheet); padding: 34px 44px 56px; }
.inbox-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.inbox-title { font-size: 1.25rem; font-weight: 600; text-wrap: balance; }
.inbox-tag { font-size: 0.9375rem; font-weight: 500; color: var(--muted); }
.inbox-row { display: flex; gap: 14px; margin-top: 22px; align-items: stretch; }
.mail { flex: 1 1 0; min-width: 0; background: var(--tile); border-radius: var(--r-tile); padding: 18px 20px; }
.mail b { display: block; font-size: 1.125rem; font-weight: 600; }
.mail > span,
.scam-mail > span { display: block; font-size: 1rem; color: var(--muted); margin-top: 2px; }
.inbox-arrow { flex: none; display: flex; align-items: center; padding: 0 2px; color: var(--coral); }
/* The folder is the last place in the row. Its dashed coral box is a part of
   its own (folder-box), so it can appear while the email is still on its way. */
.mail.scam { position: relative; z-index: 1; flex: 1.15 1 0; background: none; border: 2px solid transparent; padding: 16px 20px; }
.folder-box { position: absolute; inset: -2px; z-index: -1; border: 2px dashed var(--coral); border-radius: var(--r-tile); background: var(--coral-wash); }
.mail.scam .folder-label { display: block; margin: 0; font-size: 0.84375rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--coral-ink); }
.mail.scam .folder-name { display: inline; margin: 0; font: inherit; letter-spacing: inherit; color: inherit; }
.scam-mail { position: relative; display: block; }
.scam-mail b { color: var(--coral-deep); margin-top: 4px; }
.scam-mail > span { color: var(--coral-mid); margin-top: 0; }
/* The folder counts what is in it. */
.folder-count { position: absolute; right: -10px; top: -12px; display: grid; place-items: center; min-width: 28px; height: 28px; padding: 0 8px; border-radius: 999px; background: var(--coral-ink); color: #fff; box-shadow: 0 0 0 3px #fff; font-style: normal; font-size: 1rem; font-weight: 700; line-height: 1; }
/* The same email as an ordinary tile in the row, one tile wide. Only the
   animation shows it: there it arrives, is stamped and glides into the folder. */
.mail .scam-fly { position: absolute; left: -2px; top: -2px; bottom: -2px; z-index: 2; width: calc((100% + 4px) / 1.15); margin: 0; padding: 18px 20px; background: var(--tile); border-radius: var(--r-tile); color: var(--ink); font-size: inherit; opacity: 0; pointer-events: none; }
.scam-fly > span { display: block; margin-top: 2px; font-size: 1rem; color: var(--muted); }
/* Its shadow while it is lifted, and the coral edge it gets with the stamp. */
.scam-fly::before,
.scam-fly::after { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0; }
.scam-fly::before { z-index: -1; box-shadow: 0 16px 34px rgba(12, 26, 43, 0.2); }
.scam-fly::after { border: 2px solid var(--coral); }
/* The rubber stamp: the name of the folder, pressed onto the email. */
.rubber { position: absolute; right: -8px; bottom: -10px; padding: 5px 9px 4px; border: 2px solid currentColor; border-radius: 7px; background: rgba(255, 247, 234, 0.94); color: var(--coral-ink); font-style: normal; font-size: 0.8125rem; font-weight: 700; line-height: 1; letter-spacing: 0.09em; text-transform: uppercase; rotate: -7deg; }

/* Three short reassurances close the first screen, in the blue below the sheet. */
.hero-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px clamp(20px, 3.1vw, 40px); list-style: none; margin: 0; padding: 40px 0 clamp(64px, 7.5vw, 104px); font-size: 1.0625rem; font-weight: 500; line-height: 1.4; color: var(--pale); }
.hero-chips li { display: flex; align-items: center; gap: 10px; }
.hero-chips .i-tick { width: 20px; height: 20px; color: #fff; }

/* -------------------------------------------- the example inbox comes alive
   Once the page has loaded the sheet rises and the tiles arrive one after
   the other. Then the inbox tells what the product does, slowly, in a round
   of 16 seconds:
     0.0  the emails make room and a new one arrives among them
     3.0  it is stamped with the name of the folder (a short, soft thump)
     4.4  it is lifted; the others close up beneath it
     5.0  it glides to the end of the row, where the folder appears
     7.2  it settles in the folder; at 8.2 the folder counts "1"
     ...  a calm pause, as the markup has it
    14.4  folder and email fade, and the round begins again
   What the markup says is the end state; without motion that is simply what
   shows. Only transform and opacity move.
   --fx/--fy: where the email starts, measured from the folder (in the row:
   two tiles and the arrow further left; stacked: just above the folder).
   --shift: how far the emails behind it step aside (one tile and the gap). */
@media (prefers-reduced-motion: no-preference) {
  .inbox { --loop: 16s; --wait: 1.4s; --fx: calc(-200% - 90px); --fy: 0px; --shift: calc(100% + 14px); }
  .hero-sheet { animation: sheet-rise 0.9s var(--ease) both; }
  .inbox-head { animation: tile-in 0.7s var(--ease) 0.2s both; }
  .inbox .mail:nth-child(1) { animation: tile-in 0.7s var(--ease) 0.35s both; }
  .inbox .mail:nth-child(2) { animation: tile-in 0.7s var(--ease) 0.47s both, make-room var(--loop) var(--glide) var(--wait) infinite both; }
  .inbox .mail:nth-child(3) { animation: tile-in 0.7s var(--ease) 0.59s both, make-room var(--loop) var(--glide) var(--wait) infinite both; }
  .folder-box,
  .folder-label,
  .scam-mail,
  .folder-count,
  .scam-fly,
  .scam-fly::before,
  .scam-fly::after,
  .rubber,
  .inbox-arrow svg { animation-duration: var(--loop); animation-delay: var(--wait); animation-iteration-count: infinite; animation-fill-mode: both; animation-timing-function: var(--glide); }
  .folder-box { animation-name: folder-appear; }
  .inbox-arrow svg { animation-name: folder-appear; }
  .folder-label { animation-name: folder-fill; }
  .scam-mail { animation-name: folder-fill; }
  .folder-count { animation-name: folder-count; }
  .scam-fly { animation-name: fly-path, fly-press; }
  .scam-fly::before { animation-name: fly-shadow; }
  .scam-fly::after { animation-name: fly-edge; }
  .rubber { animation-name: rubber; }
}
@keyframes sheet-rise { from { opacity: 0; translate: 0 44px; } }
@keyframes tile-in { from { opacity: 0; translate: 0 14px; } }
@keyframes make-room {
  0% { transform: translateX(0); }
  6.5%, 29.5% { transform: translateX(var(--shift)); }
  38%, 100% { transform: translateX(0); }
}
@keyframes fly-path {
  0%, 3% { opacity: 0; translate: var(--fx) calc(var(--fy) + 16px); }
  8%, 31% { opacity: 1; translate: var(--fx) var(--fy); }
  45% { opacity: 1; translate: 0 0; }
  47.6%, 100% { opacity: 0; translate: 0 0; }
}
@keyframes fly-press {
  0%, 18.8% { scale: 1; animation-timing-function: ease-in; }
  19.9% { scale: 0.972; animation-timing-function: var(--ease); }
  22.5%, 27.5% { scale: 1; }
  30.5%, 42% { scale: 1.035; }
  45% { scale: 1; }
  47.6%, 100% { scale: 0.97; }
}
@keyframes fly-shadow { 0%, 27.5% { opacity: 0; } 30.5%, 42% { opacity: 1; } 46%, 100% { opacity: 0; } }
@keyframes fly-edge { 0%, 19% { opacity: 0; } 21.5%, 100% { opacity: 1; } }
@keyframes rubber {
  0%, 18.8% { opacity: 0; scale: 1.9; animation-timing-function: ease-in; }
  19.9% { opacity: 1; scale: 0.9; animation-timing-function: var(--ease); }
  22.5%, 100% { opacity: 1; scale: 1; }
}
@keyframes folder-appear { 0%, 35.5% { opacity: 0; } 40%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes folder-fill {
  0%, 46.8% { opacity: 0; translate: 0 5px; }
  50%, 90% { opacity: 1; translate: 0 0; }
  96%, 100% { opacity: 0; translate: 0 0; }
}
@keyframes folder-count {
  0%, 51% { opacity: 1; scale: 0; animation-timing-function: var(--ease); }
  52.8% { opacity: 1; scale: 1.28; }
  54.6%, 90% { opacity: 1; scale: 1; }
  96%, 100% { opacity: 0; scale: 0.7; }
}

/* ------------------------------------------------------------------- bands
   Full-width bands with straight edges; everything rounded is a sheet, a card
   or a tile inside a band. */
.band { padding-block: var(--band); background: #fff; --tile-bg: var(--tile); }
.band.soft { background: var(--tile); --tile-bg: #fff; }
.band.blue { background: var(--blue); color: #fff; --tile-bg: #fff; }
.band-head { max-width: 800px; margin: 0 auto clamp(40px, 5vw, 64px); text-align: center; }
.band-head h2,
.rules-copy h2,
.closing h2 { margin: 0; font-size: clamp(2.125rem, 4.4vw, 3.5rem); line-height: 1.04; letter-spacing: -0.03em; text-wrap: balance; }
.band-head p { margin: 18px auto 0; max-width: 620px; font-size: clamp(1.1875rem, 1.72vw, 1.375rem); line-height: 1.45; color: var(--soft); text-wrap: balance; }
.band-note { margin: clamp(32px, 4vw, 48px) auto 0; max-width: 760px; text-align: center; font-size: 1.125rem; line-height: 1.55; color: var(--muted); text-wrap: pretty; }

/* ---------------------------------------------------------- the pictures
   Drawn objects (src/vignettes.mjs): solid shapes, an ink outline, a few flat
   colours. Every colour is named here once. What differs with the ground a
   picture stands on is set by three properties: the disc behind the objects,
   the colour of dotted trails, and the third dot (blue cannot sit on blue). */
.pic { display: block; overflow: visible; --disc: var(--tile); --trail: var(--ink); --dot: var(--blue); }
.pic .o { stroke: var(--ink); stroke-linecap: round; stroke-linejoin: round; }
.pic .paper { fill: var(--paper); }
.pic .white { fill: #fff; }
.pic .ink { fill: var(--ink); }
.pic .sun { fill: var(--sun); }
.pic .sun-d { fill: var(--sun-deep); }
.pic .coral { fill: var(--coral); }
.pic .coral-d { fill: var(--coral-ink); }
.pic .blue { fill: var(--blue); }
.pic .blue-d { fill: var(--blue-deep); }
.pic .pale { fill: var(--pale); }
.pic .green { fill: var(--green); }
.pic .grey { fill: var(--grey); }
.pic .grey-d { fill: var(--grey-deep); }
.pic .disc { fill: var(--disc); }
.pic .s-trail { stroke: var(--trail); }
.pic .s-white { stroke: #fff; }
.pic .s-shine { stroke: #fff; stroke-opacity: 0.7; }
.pic .s-coral { stroke: var(--coral); }
.pic .s-blue { stroke: var(--blue); }
.pic .s-quiet { stroke: var(--dash); }
.pic .dot-a { fill: var(--sun); }
.pic .dot-b { fill: var(--coral); }
.pic .dot-c { fill: var(--dot); }
/* The few words inside pictures. */
.pic .word { font-weight: 700; letter-spacing: 0.01em; }
.pic .w-coral { fill: var(--coral-ink); }
.pic .w-blue { fill: var(--blue); }
.pic .w-ink { fill: var(--ink); }
.pic .w-white { fill: #fff; }
/* The email that travels the scam line of the sorter is there only while it moves. */
.pic .m-run { opacity: 0; }
/* The name under the shield of the sorter keeps the dotted lines off its letters. */
.sorter-hub .word { stroke: var(--tile); stroke-width: 6px; stroke-linejoin: round; paint-order: stroke fill; }
/* On blue ground. */
.step-art .pic,
.pitch .pic,
.page-head .pic { --disc: var(--blue-deep); --trail: #fff; --dot: var(--pale); }
/* On a cream tile the disc is white. */
.tile .pic { --disc: #fff; }

/* Each picture has one small movement that tells its sentence; then it rests
   as it is drawn. Parts turn and grow around their own middle (see moving()
   in src/vignettes.mjs). */
@media (prefers-reduced-motion: no-preference) {
  /* 1. Connect: the key turns, the seal says "connected". */
  .pic-connect .m-key { animation: key-turn 9s var(--glide) 1.2s infinite both; }
  .pic-connect .m-seal { animation: seal-after-key 9s var(--ease) 1.2s infinite both; }
  /* 2. Check: a new email comes in, the tick pops, the email goes on. */
  .pic-checks .m-mail { animation: mail-in 9s var(--glide) 2.4s infinite both; }
  .pic-checks .m-lines { animation: lines-in 9s var(--glide) 2.4s infinite both; }
  .pic-checks .m-seal { animation: seal-after-mail 9s var(--ease) 2.4s infinite both; }
  /* 3. Move: the scam email drops into the folder. Also on the strip beside
     a guide, and (with an ordinary email) for a rule of your own. */
  .m-drop { animation: drop-in 9s var(--glide) 3.6s infinite both; }
  .pic-strip .m-drop,
  .pic-rule .m-drop { animation-delay: 1s; }
  /* Who Guard Mail is for: the tick pops; the second letter box joins the first. */
  .pic-who .m-seal { animation: seal-pop 9s var(--ease) 1s infinite both; }
  .who > li:nth-child(2) .m-seal { animation-name: seal-after-join; animation-delay: 2.2s; }
  .who > li:nth-child(3) .m-seal { animation-delay: 3.4s; }
  .pic-who .m-join { animation: join 9s var(--glide) 2.2s infinite both; }
  /* Mailbox providers: the keys turn, one after the other. */
  .pic-provider .m-key { animation: key-turn 12s var(--glide) 0.6s infinite both; }
  .tiles > li:nth-child(2) .m-key { animation-delay: 1.8s; }
  .tiles > li:nth-child(3) .m-key { animation-delay: 3s; }
  .tiles > li:nth-child(4) .m-key { animation-delay: 4.2s; }
  /* The magnifying glass wanders over the email; the lost letter drifts. */
  .m-look { animation: look 8s var(--glide) infinite both; }
  .m-float { animation: drift 7s ease-in-out infinite both; }
  /* The sorter: a scam email travels its line, through the shield, to the folder. */
  .m-run { animation: run 9s linear 1s infinite both; }
  /* A card that is a link answers the pointer: its key turns, its tick pops, at once. */
  .tile:has(.more a:hover) .m-key { animation: key-turn 4s var(--glide) -0.2s infinite both; }
  .who-card:has(.more a:hover) .m-seal { animation: seal-pop 5s var(--ease) -0.25s infinite both; }
}
@keyframes key-turn {
  0%, 6% { transform: rotate(0); }
  13% { transform: rotate(-30deg); }
  19% { transform: rotate(7deg); }
  24%, 100% { transform: rotate(0); }
}
@keyframes seal-after-key {
  0%, 20% { transform: scale(0); }
  26% { transform: scale(1.22); }
  30%, 90% { transform: scale(1); }
  96%, 100% { transform: scale(0); }
}
@keyframes mail-in {
  0% { opacity: 0; transform: translateX(-96px); }
  4% { opacity: 1; }
  16%, 84% { opacity: 1; transform: translateX(0); }
  94%, 100% { opacity: 0; transform: translateX(30px); }
}
@keyframes lines-in {
  0% { opacity: 0; transform: translateX(-16px); }
  6% { opacity: 1; }
  16%, 84% { opacity: 1; transform: translateX(0); }
  90%, 100% { opacity: 0; transform: translateX(0); }
}
@keyframes seal-after-mail {
  0%, 18% { transform: scale(0); }
  24% { transform: scale(1.22); }
  28%, 84% { transform: scale(1); }
  90%, 100% { transform: scale(0); }
}
@keyframes seal-pop {
  0%, 6% { transform: scale(0); }
  12% { transform: scale(1.22); }
  16%, 90% { transform: scale(1); }
  96%, 100% { transform: scale(0); }
}
@keyframes join {
  0%, 4% { opacity: 0; transform: translate(44px, -10px) rotate(6deg); }
  8% { opacity: 1; }
  20%, 90% { opacity: 1; transform: translate(0, 0) rotate(0); }
  96%, 100% { opacity: 0; transform: translate(0, 0) rotate(0); }
}
@keyframes seal-after-join {
  0%, 22% { transform: scale(0); }
  28% { transform: scale(1.22); }
  32%, 90% { transform: scale(1); }
  96%, 100% { transform: scale(0); }
}
@keyframes drop-in {
  0% { opacity: 0; transform: translate(-62px, -58px) rotate(-26deg); animation-timing-function: ease-in; }
  5% { opacity: 1; }
  22% { opacity: 1; transform: translate(0, 7px) rotate(3deg); animation-timing-function: var(--ease); }
  29%, 86% { opacity: 1; transform: translate(0, 0) rotate(0); }
  95%, 100% { opacity: 0; transform: translate(0, 30px) rotate(0); }
}
@keyframes look {
  0%, 100% { transform: translate(0, 0); }
  30% { transform: translate(-26px, -12px); }
  60% { transform: translate(-8px, 6px); }
}
@keyframes drift {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-7px) rotate(-2.5deg); }
}
/* Along the scam line of the sorter (the numbers are points on its curve). */
@keyframes run {
  0% { opacity: 0; transform: translate(6px, 0); }
  4% { opacity: 1; transform: translate(10px, 0); }
  12% { transform: translate(31px, 23px); }
  20% { transform: translate(46px, 74px); }
  28% { transform: translate(60px, 125px); }
  36% { transform: translate(84px, 148px); }
  46% { transform: translate(136px, 148px); }
  54% { transform: translate(160px, 125px); }
  62% { transform: translate(173px, 74px); }
  70% { transform: translate(184px, 23px); }
  78% { opacity: 1; transform: translate(200px, 0); }
  84%, 100% { opacity: 0; transform: translate(214px, 0); }
}

/* How it works: three steps, each with its picture on a blue panel and a
   big sunflower numeral, outlined like the pictures. */
.bigsteps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.bigsteps li { display: flex; flex-direction: column; background: var(--tile-bg); border-radius: var(--r-card); padding: 12px; }
.step-art { display: grid; place-items: center; background: var(--blue); border-radius: 18px; overflow: hidden; padding: 16px 12px 12px; }
.pic-step { width: auto; height: 204px; max-width: 100%; }
.step-body { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; align-items: start; padding: 26px 22px 24px; }
.step-num { grid-row: 1 / span 2; min-width: 44px; margin-top: 2px; color: var(--sun); font-size: 4.25rem; font-weight: 700; line-height: 0.8; letter-spacing: -0.02em; text-align: center; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; stroke-linejoin: round; }
.bigsteps h3 { margin: 0; min-height: 52px; display: flex; align-items: center; font-size: 1.4375rem; line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; }
.bigsteps p { grid-column: 2; margin: 10px 0 0; font-size: 1.125rem; line-height: 1.5; color: var(--muted); }

/* What happens to your emails: the kind of email, a line, its folder. */
.sorter { position: relative; max-width: 1000px; margin: 0 auto; }
.sorter-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.sort { display: grid; grid-template-columns: minmax(0, 1fr) 84px minmax(0, 1fr); align-items: stretch; }
.sort-from,
.sort-to { display: flex; align-items: center; gap: 16px; min-height: 76px; border-radius: var(--r-tile); padding: 10px 22px 10px 20px; line-height: 1.3; }
.sort-from { background: var(--tile-bg); }
.sort-text { display: flex; flex-direction: column; min-width: 0; font-size: 1.25rem; font-weight: 600; }
.sort-from b { font-weight: 600; }
.sort-from small { font-size: 1rem; font-weight: 400; color: var(--muted); margin-top: 2px; }
.pic-mini { flex: none; width: 44px; height: 35px; }
.sort-arrow { display: grid; place-items: center; color: var(--dash); }
.sort-to { border: 2px dashed var(--dash); }
.sort.scam .sort-from { background: var(--coral-wash); color: var(--coral-deep); }
.sort.scam .sort-arrow { color: var(--coral); }
.sort.scam .sort-to { background: var(--coral-wash); border-color: var(--coral); color: var(--coral-ink); }
.sort.rest .sort-to { border-style: solid; border-color: var(--tile-bg); background: var(--tile-bg); }
.sorter-hub { display: none; }
/* Wide screens: rows of one height, and one drawing that leads every kind of
   email through the shield to its folder (84, 12 and 220 as in sorterHub). */
@media (min-width: 1000px) {
  .sorter-rows { grid-auto-rows: 84px; }
  .sort { grid-template-columns: minmax(0, 1fr) 220px minmax(0, 1fr); }
  .sort-from,
  .sort-to { min-height: 0; }
  .sort-arrow { visibility: hidden; }
  .sorter-hub { display: block; position: absolute; left: 50%; top: 0; width: 220px; height: 100%; translate: -50% 0; }
}

/* Mailbox providers: a tile each. The picture is the provider's mailbox (its
   initial on the seal) and the key to it; the tag says which kind of key. */
.tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.tiles.n3 { grid-template-columns: repeat(3, 1fr); }
.tile { position: relative; display: flex; flex-direction: column; background: var(--tile-bg); border-radius: var(--r-card); padding: 22px 28px 26px; transition: transform 0.25s var(--ease), background-color 0.25s; }
.tile-art { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.pic-provider { width: 148px; height: 104px; margin-left: -8px; }
.via-tags { display: flex; flex-wrap: wrap; gap: 6px; }
/* The tag on the key: a slip with a punched hole, not a button. */
.via { display: inline-flex; align-items: center; gap: 9px; padding: 4px 12px 4px 9px; border: 2px solid var(--ink); border-radius: 6px 12px 12px 6px; background: var(--sun); color: var(--ink); font-size: 0.9375rem; font-weight: 600; line-height: 1.25; text-wrap: balance; }
.via::before { content: ""; flex: none; width: 9px; height: 9px; border: 2px solid var(--ink); border-radius: 50%; background: var(--tile); }
.tile h3 { margin: 22px 0 8px; font-size: 1.4375rem; line-height: 1.18; letter-spacing: -0.015em; }
.tile p { margin: 0; font-size: 1.125rem; line-height: 1.5; color: var(--muted); }
.tile .more,
.who-card .more { margin-top: auto; padding-top: 22px; font-size: 1.125rem; line-height: 1.4; }
.tile .more a,
.who-card .more a { display: block; padding-top: 16px; border-top: 2px solid var(--line); color: var(--blue); }
/* The whole tile is the link. */
.tile .more a::after,
.who-card .more a::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-card); }
.tile:has(.more a:hover),
.who-card:has(.more a:hover) { transform: translateY(-4px); }
.tile:has(.more a:hover) { background: var(--sun-wash); }
.tile:has(.more a:focus-visible),
.who-card:has(.more a:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
.tile .more a:focus-visible,
.who-card .more a:focus-visible { outline: none; }

/* Who it is for: three white cards on blue, each with its picture. */
.who { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.who-card { position: relative; display: flex; flex-direction: column; background: #fff; color: var(--ink); border-radius: var(--r-card); padding: 26px 32px 28px; transition: transform 0.25s var(--ease); }
.who-art { display: grid; place-items: center; margin: -14px -20px 26px; padding: 14px 12px 12px; background: var(--tile); border-radius: 18px; }
.pic-who { width: auto; height: 176px; max-width: 100%; --disc: #fff; }
.who-card h3 { margin: 0 0 10px; font-size: 1.625rem; line-height: 1.12; letter-spacing: -0.025em; }
.who-card p { margin: 0; font-size: 1.125rem; line-height: 1.5; color: var(--muted); }

/* Your own rules: said out loud, and understood. */
.rules { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.rules-copy p { margin: 20px 0 0; font-size: clamp(1.1875rem, 1.72vw, 1.375rem); line-height: 1.45; color: var(--muted); text-wrap: pretty; }
.rule-demo { display: grid; }
.rule-bubble { margin: 0; background: var(--blue); color: #fff; border-radius: var(--r-sheet) var(--r-sheet) var(--r-sheet) 8px; padding: clamp(28px, 3.6vw, 44px) clamp(26px, 3.8vw, 48px); font-size: clamp(1.5rem, 2.6vw, 2.125rem); font-weight: 600; line-height: 1.2; letter-spacing: -0.015em; text-wrap: balance; }
.rule-art { justify-self: end; width: min(74%, 290px); margin: 6px 14px 0 0; }
.pic-rule { width: 100%; height: auto; }

/* The honest privacy statement: one calm sheet. */
.honest { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(20px, 3vw, 44px); align-items: center; max-width: 980px; margin: 0 auto; background: #fff; border-radius: var(--r-sheet); padding: clamp(28px, 5vw, 64px); }
.honest-mark { width: clamp(120px, 14vw, 168px); margin: -6px 0 0 -8px; }
.pic-read { width: 100%; height: auto; }
.honest h2 { margin: 6px 0 0; font-size: clamp(1.75rem, 3.2vw, 2.5rem); line-height: 1.08; letter-spacing: -0.03em; text-wrap: balance; }
.honest p { margin: 18px 0 0; max-width: 36em; font-size: clamp(1.1875rem, 1.6vw, 1.3125rem); line-height: 1.5; text-wrap: pretty; }

/* The price: a white card on blue. */
.price-card { display: grid; grid-template-columns: 1.1fr 1fr; max-width: 980px; margin: 0 auto; padding: 16px; background: #fff; color: var(--ink); border-radius: var(--r-sheet); }
.price-main { padding: 28px 32px 32px; }
.price-big { margin: 20px 0 0; font-size: clamp(2.75rem, 5.4vw, 4rem); font-weight: 700; line-height: 0.95; letter-spacing: -0.04em; color: var(--blue); }
.price-big .amount { white-space: nowrap; }
.price-big.short .amount { font-size: clamp(6rem, 11.5vw, 9rem); line-height: 0.9; }
.price-big small { font-size: 1.375rem; font-weight: 500; letter-spacing: 0; color: var(--muted); white-space: nowrap; }
.price-list { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 12px; font-size: 1.1875rem; line-height: 1.4; }
.price-list li { display: flex; gap: 14px; align-items: center; }
.price-card .pill { background: var(--sun); color: var(--ink); }
.price-side { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; background: var(--tile); border-radius: 24px; padding: 32px; }
.cta-title { margin: 0; font-size: 1.5rem; font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; }
.price-pitch { margin: 12px 0 24px; font-size: 1.125rem; line-height: 1.5; color: var(--muted); }

/* Questions and answers: the heading stays beside the list on wide screens. */
.faq-wrap { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.faq-wrap .band-head { position: sticky; top: 32px; margin: 0; text-align: left; }
.faq { display: grid; gap: 10px; }
.faq details { background: var(--tile); border-radius: var(--r-tile); transition: background-color 0.2s; }
.faq details[open] { background: var(--sun-wash); }
.faq summary { position: relative; list-style: none; cursor: pointer; padding: 20px 76px 20px 26px; font-size: 1.25rem; font-weight: 600; line-height: 1.3; border-radius: var(--r-tile); transition: color 0.18s; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--blue); }
/* A plus in a white circle; it turns into a cross when the answer is open. */
.faq summary::before { content: ""; position: absolute; right: 20px; top: 50%; width: 36px; height: 36px; margin-top: -18px; border-radius: 50%; background: #fff; transition: background-color 0.2s; }
.faq summary::after { content: ""; position: absolute; right: 29px; top: 50%; width: 18px; height: 18px; margin-top: -9px; background: linear-gradient(var(--blue), var(--blue)) center / 100% 2.6px no-repeat, linear-gradient(var(--blue), var(--blue)) center / 2.6px 100% no-repeat; transition: transform 0.25s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > p { margin: 0; padding: 0 26px 24px; max-width: 44em; font-size: 1.125rem; line-height: 1.55; }
@supports (interpolate-size: allow-keywords) {
  .faq details { interpolate-size: allow-keywords; }
  .faq details::details-content { block-size: 0; overflow: clip; transition: block-size 0.3s var(--glide), content-visibility 0.3s allow-discrete; }
  .faq details[open]::details-content { block-size: auto; }
}

/* The closing band, and the footer that rises into it as a white sheet. */
.closing { text-align: center; }
.closing h2 { max-width: 15em; margin-inline: auto; font-size: clamp(2.25rem, 5vw, 4rem); line-height: 1.02; letter-spacing: -0.035em; }
.closing-text { margin: 22px auto 0; max-width: 640px; font-size: clamp(1.1875rem, 1.72vw, 1.375rem); line-height: 1.45; color: var(--pale); text-wrap: balance; }
.closing .signup { align-items: center; margin-top: 30px; gap: 18px; }
.closing .actions { justify-content: center; }
.closing,
.page-body { padding-bottom: calc(var(--band) + var(--r-sheet)); }

.site-foot { position: relative; margin-top: calc(-1 * var(--r-sheet)); background: #fff; color: var(--ink); border-radius: var(--r-sheet) var(--r-sheet) 0 0; padding: clamp(44px, 6vw, 72px) 0 36px; font-size: 1.0625rem; line-height: 1.5; }
.site-foot .wrap { display: grid; grid-template-columns: minmax(0, 300px) 1fr; gap: 44px clamp(32px, 6vw, 88px); }
.site-foot .brand { color: var(--blue); }
.site-foot .brand span { color: var(--ink); }
.foot-brand p { margin: 14px 0 0; color: var(--muted); }
.foot-brand .foot-tag { margin-top: 14px; color: var(--ink); font-weight: 600; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.3fr) minmax(0, 0.8fr); gap: 32px 28px; }
.foot-grid h2 { margin: 6px 0 14px; font-size: 1rem; font-weight: 600; color: var(--muted); }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.site-foot a { color: var(--ink); text-decoration: none; transition: color 0.18s; }
.site-foot a:hover { color: var(--blue); text-decoration: underline; }
.foot-note { grid-column: 1 / -1; margin: 0; padding-top: 28px; border-top: 2px solid var(--tile); font-size: 1rem; color: var(--muted); }
.foot-note a { color: var(--muted); text-decoration: underline; }

/* ----------------------------------------------------------- guides, pages
   A blue band with breadcrumb, headline and lede; the text on a white sheet
   that overlaps the band; beside it the call to action, which stays in view. */
.page-head { background: var(--blue); color: #fff; padding: clamp(8px, 1.4vw, 16px) 0 calc(72px + clamp(32px, 4vw, 48px)); }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-bottom: clamp(22px, 3.4vw, 36px); font-size: 1rem; font-weight: 500; color: var(--pale); }
.crumbs a { color: var(--pale); text-decoration: none; }
.crumbs a:hover { color: #fff; text-decoration: underline; }
.crumbs [aria-current] { color: #fff; }
.eyebrow { margin: 0 0 14px; font-size: 1.0625rem; font-weight: 600; line-height: 1.4; color: var(--pale); }
.page-head h1 { margin: 0; max-width: 17em; font-size: clamp(2.25rem, 4.7vw, 3.75rem); line-height: 1.02; letter-spacing: -0.03em; text-wrap: balance; }
.page-head .lede { margin: 22px 0 0; max-width: 780px; font-size: clamp(1.1875rem, 1.72vw, 1.375rem); line-height: 1.45; color: var(--pale); text-wrap: pretty; }
.asof { margin: 18px 0 0; max-width: 780px; font-size: 1rem; line-height: 1.5; color: var(--pale); }

/* flow-root keeps the sheet's negative margin inside, so the sheet moves up and the grey ground does not. */
.page-body { display: flow-root; background: var(--tile); }
.article { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; align-items: start; }
.sheet { background: #fff; color: var(--ink); border-radius: var(--r-sheet); margin-top: -72px; }
.prose { padding: clamp(28px, 4.4vw, 56px) clamp(20px, 5vw, 64px) clamp(32px, 5vw, 64px); font-size: 1.21875rem; line-height: 1.62; }
/* About 68 characters per line. Tables, steps and cards may use the full sheet. */
.prose > * { max-width: 34rem; }
.prose > p,
.prose > ul,
.prose > h2,
.prose > h3 { max-width: 41.5rem; }
.prose > .table-wrap,
.prose > .steps,
.prose > .cta,
.prose > .pitch-inline,
.prose > .faq,
.prose > .sources { max-width: none; }
.prose h2 { margin: 2.1em 0 0.55em; font-size: clamp(1.625rem, 2.9vw, 2.125rem); line-height: 1.1; letter-spacing: -0.025em; text-wrap: balance; }
.prose > :first-child { margin-top: 0; }
.prose h3 { margin: 1.7em 0 0.45em; font-size: 1.4375rem; line-height: 1.2; letter-spacing: -0.015em; }
.prose p { margin: 0 0 1.05em; }
.prose ul { margin: 0 0 1.2em; padding-left: 1.15em; }
.prose ul li { margin-bottom: 0.5em; padding-left: 0.2em; }
.prose ul li::marker { color: var(--blue); }
.prose a { font-weight: 500; }
.note { background: var(--sun-wash); border-radius: var(--r-tile); padding: 20px 24px; font-size: 1.125rem; line-height: 1.55; }
.prose > .note { max-width: none; margin: 1.5em 0; }

/* Numbered steps: a sunflower number, a title, a sentence. */
.steps { list-style: none; counter-reset: step; margin: 1.5em 0; padding: 0; display: grid; gap: 10px; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 20px; align-items: start; background: var(--tile); border-radius: var(--r-tile); padding: 20px 24px 20px 20px; font-size: 1.125rem; line-height: 1.5; }
.steps li::before { content: counter(step); grid-row: 1 / span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--sun); color: var(--ink); font-size: 1.3125rem; font-weight: 700; line-height: 1; }
.steps strong { grid-column: 2; font-size: 1.25rem; font-weight: 600; line-height: 1.25; padding-top: 0.45rem; }
.steps span { grid-column: 2; margin-top: 4px; }

/* Tables. On narrow screens every row becomes a tile of its own. */
.table-wrap { margin: 1.5em 0; overflow-x: auto; }
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 1.125rem; line-height: 1.5; text-align: left; }
.table th,
.table td { padding: 15px 18px; vertical-align: top; }
.table thead th { background: var(--tile); font-size: 1rem; font-weight: 700; line-height: 1.35; }
.table thead th:first-child { border-radius: 14px 0 0 14px; }
.table thead th:last-child { border-radius: 0 14px 14px 0; }
.table tbody th { font-weight: 600; width: 27%; }
.table tbody th,
.table tbody td { border-bottom: 2px solid var(--tile); }
.table tbody tr:last-child th,
.table tbody tr:last-child td { border-bottom: 0; }

/* The call to action inside the text, and beside it. */
.cta,
.pitch { background: var(--blue); color: #fff; border-radius: var(--r-card); }
.cta { margin: 2em 0; padding: clamp(24px, 4vw, 40px); }
.cta p { margin: 10px 0 0; color: var(--pale); }
.cta .cta-title { margin: 0; color: #fff; font-size: clamp(1.5rem, 2.6vw, 1.875rem); }
.cta .signup { margin-top: 24px; }
.cta .fineprint,
.pitch .fineprint { margin: 0; }
.cta a:not(.button),
.pitch a:not(.button) { font-weight: 500; }
/* The card clips its picture: the scam email drops in from above the edge. */
.pitch { padding: 14px 14px 28px; overflow: hidden; }
.pitch-art { margin: 4px 6px 14px; }
.pic-strip { width: 100%; max-width: 340px; height: auto; }
.pitch > p,
.pitch > .signup { margin-inline: 14px; }
.pitch p { margin-top: 0; margin-bottom: 20px; font-size: 1.125rem; line-height: 1.5; color: var(--pale); }
.pitch .aside-title { margin-bottom: 10px; color: #fff; }
.pitch .signup { align-items: stretch; }
.pitch .actions { display: grid; }
.pitch .button { font-size: 1.125rem; padding: 15px 20px; }
.aside-title { font-size: 1.375rem; font-weight: 700; line-height: 1.15; letter-spacing: -0.015em; text-wrap: balance; }
.pitch-inline { display: none; margin: 2em 0; }
.pitch-inline .pitch { display: grid; grid-template-columns: minmax(0, 1fr); padding: 14px 14px 26px; }
.pitch-inline .signup { align-items: flex-start; }
.pitch-inline .actions { display: flex; }

.aside { position: sticky; top: 24px; display: grid; gap: 20px; margin-top: 40px; }
.aside-card { background: #fff; border-radius: var(--r-card); padding: 26px 28px 12px; }
.aside-card .aside-title { margin: 0 0 6px; font-size: 1.1875rem; letter-spacing: 0; }
.aside-card ul { list-style: none; margin: 0; padding: 0; }
.aside-card li + li { border-top: 2px solid var(--tile); }
.aside-card a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 0; font-size: 1.0625rem; font-weight: 500; line-height: 1.35; text-decoration: none; }
.aside-card a:hover span { text-decoration: underline; }
.aside-card .i-arrow { width: 18px; height: 18px; margin: 0; }

.sources { margin-top: 3.2em; padding-top: 2em; border-top: 2px solid var(--tile); font-size: 1.0625rem; line-height: 1.5; }
.sources h2 { margin: 0 0 0.3em; font-size: 1.375rem; letter-spacing: -0.01em; }
.sources p { color: var(--muted); margin-bottom: 0.9em; }
.sources ol { margin: 0; padding-left: 1.5em; }
.sources li { margin-bottom: 0.55em; padding-left: 0.2em; }
.sources li::marker { color: var(--muted); font-weight: 600; }
.sources a { overflow-wrap: anywhere; }
.prose .faq { margin-top: 1.2em; }
.prose .faq summary { font-size: 1.1875rem; }
.prose .faq summary::before { background: #fff; }

/* The interim page while sign-up is closed. */
.start-head .pill { margin-bottom: 22px; }
.start-head h1 { max-width: 13em; font-size: clamp(2.5rem, 5.6vw, 4.5rem); line-height: 1.02; letter-spacing: -0.035em; }
.start { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(20px, 3vw, 36px); align-items: start; max-width: 900px; padding: clamp(26px, 4.4vw, 52px); }
.start-mark { width: clamp(132px, 17vw, 200px); margin: -6px 0 0 -8px; }
.pic-check { width: 100%; height: auto; }
.start h2 { margin: 6px 0 0; font-size: clamp(1.75rem, 3vw, 2.25rem); line-height: 1.1; letter-spacing: -0.03em; }
.start p { margin: 12px 0 0; max-width: 32em; font-size: clamp(1.1875rem, 1.6vw, 1.3125rem); line-height: 1.5; }
.start .actions { margin-top: 28px; }
.start .fineprint { margin-top: 16px; font-size: 1rem; }

/* Page not found. */
/* The lost letter stands beside the headline on wide screens (the text keeps
   clear of it) and above it on narrow ones. */
.notfound-head .wrap { position: relative; }
.notfound-head h1 { font-size: clamp(2.75rem, 7.5vw, 6rem); line-height: 1; letter-spacing: -0.035em; }
.notfound-head :is(h1, .lede) { max-width: calc(100% - clamp(220px, 24vw, 290px)); }
.notfound-art { position: absolute; right: var(--gutter); top: -14px; width: clamp(200px, 22vw, 260px); }
.pic-lost { width: 100%; height: auto; }
.notfound { padding: clamp(14px, 2.4vw, 24px); max-width: 860px; }
.link-tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.link-tiles a { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--tile); border-radius: var(--r-tile); padding: 18px 22px; color: var(--ink); font-size: 1.1875rem; font-weight: 600; line-height: 1.3; text-decoration: none; transition: background-color 0.18s, color 0.18s; }
.link-tiles a:hover { background: var(--sun-wash); color: var(--blue); }
.link-tiles .i-arrow { width: 22px; height: 22px; margin: 0; color: var(--blue); }

/* ------------------------------------------------------- sections arrive
   Where the browser can tie an animation to the scroll position, headings,
   cards and tiles rise into place as they enter the window. Elsewhere, and
   for readers who ask for less motion, everything simply stands there. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .band-head,
    .bigsteps > li,
    .sorter,
    .band-note,
    .tiles > li,
    .who > li,
    .rules-copy,
    .rule-demo,
    .honest,
    .price-card,
    .faq-wrap .faq,
    .closing > .wrap { animation: arrive linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
    .bigsteps > li:nth-child(2),
    .tiles > li:nth-child(2),
    .who > li:nth-child(2),
    .rule-demo { animation-range: entry 12% entry 82%; }
    .bigsteps > li:nth-child(3),
    .tiles > li:nth-child(3),
    .who > li:nth-child(3) { animation-range: entry 24% entry 94%; }
    .tiles > li:nth-child(4) { animation-range: entry 36% entry 106%; }
  }
}
@keyframes arrive { from { opacity: 0; translate: 0 36px; } }

/* -------------------------------------------------------------- responsive */
/* A long navigation (German, French) needs about 1260px beside the mark and the pill. */
@media (max-width: 1263px) {
  .nav-long .nav,
  .nav-long .head-cta { display: none; }
  .nav-long .menu { display: block; }
  .nav-long .wrap { padding-block: 27.4px; }
}
@media (max-width: 1139px) {
  .article { grid-template-columns: minmax(0, 1fr) 290px; gap: 28px; }
  /* Three narrow step cards: the sentence uses the full width below number and title. */
  .bigsteps p { grid-column: 1 / -1; margin-top: 14px; }
  .tiles,
  .tiles.n3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1099px) {
  .nav,
  .head-cta { display: none; }
  .menu { display: block; }
  .lang { position: static; translate: none; }
  .site-head .wrap { padding-block: 27.4px; }
}
@media (max-width: 959px) {
  :root { --head-h: 84px; }
  .site-head .wrap { padding-block: 18px; }
  .article { grid-template-columns: minmax(0, 1fr); }
  .aside { position: static; margin-top: 0; }
  .aside .pitch { display: none; }
  .pitch-inline { display: block; }
  /* Stacked: the new email arrives below the others, just above the folder,
     as wide as one of them; nobody has to make room. */
  .inbox { --fx: 0px; --fy: -58px; --shift: 0px; }
  .mail .scam-fly { bottom: auto; width: calc((100% + 4px - 28px) / 3); }
  .inbox-row { flex-wrap: wrap; }
  .mail { flex: 1 1 28%; }
  .inbox-arrow { flex: 1 1 100%; justify-content: center; height: 44px; padding: 0; }
  .inbox-arrow svg { rotate: 90deg; }
  .mail.scam { flex: 1 1 100%; }
  .hero-sheet { min-height: 0; padding-bottom: 34px; }
  .bigsteps { grid-template-columns: 1fr; gap: 16px; }
  .bigsteps li { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); align-items: center; }
  .bigsteps p { grid-column: 2; margin-top: 10px; }
  .who { grid-template-columns: 1fr; gap: 12px; }
  .rules { grid-template-columns: 1fr; }
  .price-card { grid-template-columns: 1fr; }
  .faq-wrap { grid-template-columns: 1fr; }
  .faq-wrap .band-head { position: static; margin-bottom: 8px; text-align: center; }
  .site-foot .wrap { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 719px) {
  body { font-size: 1.125rem; }
  :root { --head-h: 76px; --r-sheet: 28px; --r-card: 24px; }
  .site-head .wrap { padding-block: 14px; }
  .lang,
  .nav-long .lang { display: none; }
  .button,
  .button.ghost { font-size: 1.125rem; padding-inline: 22px; }
  .hero-sheet { padding: 24px 16px 16px; }
  .inbox { --fy: -54px; }
  .mail .scam-fly { width: calc(100% + 4px); }
  .inbox-head { padding-inline: 6px; }
  .inbox-title { font-size: 1.125rem; }
  .mail { flex: 1 1 100%; }
  .inbox-row { gap: 10px; margin-top: 16px; }
  .hero-buttons { flex-direction: column; align-items: stretch; width: 100%; max-width: 420px; }
  .hero-chips { flex-direction: column; align-items: center; gap: 10px; padding-top: 28px; }
  .bigsteps li { display: flex; align-items: stretch; }
  .step-body { padding: 22px 12px 14px; }
  .sorter-rows { gap: 26px; }
  .sort { grid-template-columns: 1fr; }
  .sort-arrow { height: 46px; }
  .sort-arrow svg { rotate: 90deg; }
  .sort-from,
  .sort-to { min-height: 64px; padding: 14px 20px; }
  .tiles,
  .tiles.n3 { grid-template-columns: 1fr; gap: 12px; }
  .tile { padding: 24px 24px 22px; }
  .who-card { padding: 26px 24px 24px; }
  .who-art { margin: -14px -12px 22px; }
  .honest { grid-template-columns: 1fr; }
  .honest-mark { width: 148px; margin: -10px 0 -6px -6px; }
  .price-card { padding: 10px; }
  .price-main { padding: 22px 18px 26px; }
  .price-side { padding: 24px 20px; }
  .price-side .signup { align-self: stretch; }
  .faq summary { padding: 18px 66px 18px 20px; font-size: 1.1875rem; }
  .faq summary::before { right: 14px; }
  .faq summary::after { right: 23px; }
  .faq details > p { padding: 0 20px 20px; }
  .signup .button { width: 100%; }
  .signup,
  .actions { align-items: stretch; }
  .signup .actions { display: grid; }
  .closing .fineprint { text-align: center; }
  .prose { font-size: 1.125rem; line-height: 1.6; }
  .steps li { grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; padding: 16px 18px 18px 14px; }
  .steps li::before { width: 40px; height: 40px; font-size: 1.1875rem; }
  .steps strong { padding-top: 0.35rem; }
  .note { padding: 18px 20px; }
  .start { grid-template-columns: 1fr; }
  .start .actions { display: grid; }
  .notfound-head :is(h1, .lede) { max-width: none; }
  .notfound-art { position: static; width: 148px; margin: -4px 0 6px -10px; }
  /* Table rows as tiles; the column heading stands above each value. */
  .table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .table,
  .table tbody,
  .table tr,
  .table th,
  .table td { display: block; width: auto; }
  .table tbody tr { background: var(--tile); border-radius: var(--r-tile); padding: 16px 18px 18px; margin-bottom: 10px; }
  .table tbody th,
  .table tbody td { padding: 0; border: 0; }
  .table tbody th { font-size: 1.1875rem; line-height: 1.3; width: auto; }
  .table tbody td { margin-top: 12px; }
  .table td::before { content: attr(data-label); display: block; font-size: 1rem; font-weight: 600; color: var(--muted); }
  .foot-grid { grid-template-columns: 1fr; gap: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after { animation: none !important; transition: none !important; }
}

/* ------------------------------------------------------------------- print
   Black on white, no bands, no buttons to press, nothing moves; links in the
   text show where they lead. */
@media print {
  html { font-size: 75%; }
  :root { --band: 22pt; --gutter: 0px; }
  *,
  *::before,
  *::after { animation: none !important; transition: none !important; }
  body { color: #000; }
  .site-head,
  .hero,
  .page-head,
  .band,
  .band.soft,
  .band.blue,
  .page-body,
  .cta,
  .pitch,
  .rule-bubble,
  .steps li::before { background: none !important; color: #000 !important; }
  .site-head, .hero, .page-head, .band.blue, .cta, .pitch, .rule-bubble { --fg: #000; --soft: #333; --link: #000; }
  .hero-lede, .hero-chips, .page-head .lede, .asof, .eyebrow, .crumbs, .crumbs a, .crumbs [aria-current], .closing-text, .cta p, .cta .cta-title, .pitch p, .fineprint, .band-head p { color: #222 !important; }
  .nav, .head-tools, .skip, .hero-buttons, .actions, .aside, .pitch-inline, .foot-grid, .inbox-arrow, .sort-arrow, .pic, .step-art, .who-art, .tile-art, .rule-art, .honest-mark, .start-mark, .notfound-art, .pitch-art, .folder-count, .scam-fly, .hero-chips svg { display: none !important; }
  .site-head .wrap { padding-block: 0 10pt; }
  .hero-copy { min-height: 0; display: block; text-align: left; padding-bottom: 14pt; }
  .hero-copy::before, .hero-copy::after { display: none; }
  .hero h1, .hero h1.long, .hero h1.longer, .notfound-head h1, .start-head h1 { font-size: 30pt; }
  .page-head { padding: 0 0 14pt; }
  .page-head h1 { font-size: 24pt; }
  .band-head h2, .rules-copy h2, .closing h2, .honest h2 { font-size: 18pt; margin-inline: 0; }
  .band-head, .band-head p, .band-note, .closing, .closing-text, .closing .signup, .faq, .sorter, .honest, .price-card { text-align: left; margin-inline: 0; align-items: flex-start; }
  .sheet, .hero-sheet, .honest, .price-card { margin-top: 0; padding: 0; border-radius: 0; min-height: 0; }
  .hero-chips { justify-content: flex-start; padding: 10pt 0 0; }
  .faq-wrap { display: block; }
  .faq-wrap .band-head { position: static; margin-bottom: 12pt; }
  .prose { padding: 0; }
  .prose > * { max-width: none; }
  .article { display: block; }
  .sorter-rows { grid-auto-rows: auto; }
  .bigsteps { display: block; }
  .bigsteps li { display: block; margin-bottom: 8pt; }
  .sort { grid-template-columns: 1fr 1fr; column-gap: 8pt; }
  .mail, .tile, .who-card, .bigsteps li, .sort-from, .sort-to, .steps li, .faq details, .price-side, .note, .rule-bubble, .cta { border: 1pt solid #999; background: none !important; }
  .mail.scam, .sort.scam .sort-to { border: 1.5pt dashed var(--coral); }
  .folder-box { display: none; }
  .step-num { color: #000; font-size: 20pt; -webkit-text-stroke: 0; }
  .price-big, .steps li::before { color: #000; }
  .steps li::before { background: none; border: 1pt solid #000; }
  .faq details::details-content { content-visibility: visible; display: block; block-size: auto; }
  .faq summary::before, .faq summary::after { display: none; }
  .site-foot { margin-top: 0; padding: 14pt 0 0; border-radius: 0; border-top: 1pt solid #999; }
  .closing, .page-body { padding-bottom: 0; }
  h2, h3, .steps li, .faq details, .table tr, .tile, .who-card, .bigsteps li, .sort { break-inside: avoid; }
  h2, h3 { break-after: avoid; }
  .prose a[href^="http"]::after { content: " (" attr(href) ")"; font-weight: 400; overflow-wrap: anywhere; }
}