/* The app's own tokens, copied from app/Shared/Palette.swift rather than
   invented, so the site and the product are one thing. */
/* One theme on purpose. The app follows the system and offers a setting;
   this page does not, because paper is the product's whole material and a
   dark version of a bank statement is a different object. Every colour is
   painted explicitly so the page holds on any host ground. */
:root {
  color-scheme: light;
  --paper: #ECF0E8;
  --card: #F6F8F3;
  --ink: #1A2420;
  --ink-soft: #4C5A52;
  --ink-faint: #626D66;
  --rule: #CBD6C6;
  --rule-soft: #DEE6D9;
  --accent: #2F6B4F;
  --out: #7B2D26;
  --notice: #8A3E12;
  --notice-ink: #ECF0E8;

  --serif: "Source Serif 4", ui-serif, Georgia, "Times New Roman", serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --display: "Rye", "Source Serif 4", ui-serif, Georgia, serif;
}
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: 860px;
  margin-inline: auto;
  padding-inline: 20px;
  padding-block: 0;
}

/* A statement is a stack of ruled sections. Every section boundary is a
   hairline, the same one the app draws between two rows. */
section { padding-block: 56px; border-top: 1px solid var(--rule); }
section:first-of-type { border-top: 0; }

.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 14px;
}

h1, h2, h3 { text-wrap: balance; margin: 0; font-weight: 700; }
h1 { font-size: clamp(34px, 6.2vw, 54px); line-height: 1.08; letter-spacing: -0.015em; }
h2 { font-size: clamp(26px, 4vw, 34px); line-height: 1.15; margin-bottom: 18px; }
h3 { font-size: 19px; line-height: 1.3; margin-bottom: 4px; }
p { margin: 0 0 16px; max-width: 62ch; }
p:last-child { margin-bottom: 0; }
.lead { font-size: 20px; color: var(--ink-soft); }

/* Masthead ------------------------------------------------------------ */
header { padding-block: 44px 8px; }
.brand { display: flex; align-items: center; gap: 16px; }
.brand img { width: 62px; height: 62px; border-radius: 14px; display: block; }
.wordmark {
  font-family: var(--display);
  font-size: 27px;
  line-height: 1;
  color: var(--ink);
  letter-spacing: 0.01em;
}

.hero { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 48px; align-items: start; }
/* A phone, not a picture of a screen.
   Every app site worth looking at puts the screenshot in a device: Proton,
   1Password, WhatsApp, Monarch. A bare rounded rectangle reads as an image
   file. The bezel is drawn in CSS rather than shipped as a PNG frame, so it
   costs nothing and takes the page's own ink colour.

   `height: auto` is not optional on the inner image. The width and height
   attributes are presentational hints, and author CSS overrides them one
   property at a time: set width alone and the height hint stands, so a 1217px
   picture keeps all 1217 pixels inside a 340px column. */
.device {
  position: relative;
  padding: 10px;
  border-radius: 40px;
  background: var(--ink);
  box-shadow: 0 1px 2px rgba(26, 36, 32, 0.18),
              0 18px 40px -18px rgba(26, 36, 32, 0.45);
  max-width: 320px;
}
.device img {
  width: 100%; max-width: 100%; height: auto; display: block;
  border-radius: 31px;
}
/* The side button. One detail, on the side a real one is on. */
.device::after {
  content: "";
  position: absolute;
  right: -2px;
  top: 27%;
  width: 2px;
  height: 9%;
  border-radius: 2px;
  background: var(--ink);
}
.shot-note {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.06em;
  color: var(--ink-faint); margin-top: 10px; text-transform: uppercase;
}

.promises { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 0; }
.promises li {
  padding-block: 14px;
  border-top: 1px solid var(--rule-soft);
  display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: baseline;
}
.promises li:last-child { border-bottom: 1px solid var(--rule-soft); }
.promises .tick { color: var(--accent); font-family: var(--mono); font-size: 14px; }
.promises strong { font-weight: 600; }
.promises span.detail { color: var(--ink-soft); display: block; font-size: 16.5px; }

.status {
  margin-top: 26px; display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--notice); color: var(--notice-ink);
  padding: 9px 14px; border-radius: 999px;
}
/* It is a link to the form now. Same pill, no underline, because underlining
   it would make the loud thing louder. */
.status a { color: inherit; text-decoration: none; }
.status a:hover { text-decoration: underline; }
.status a:focus-visible { outline: 2px solid var(--notice-ink); outline-offset: 2px; }

/* Steps --------------------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 8px; }
.step-n {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em;
  color: var(--accent); display: block; margin-bottom: 8px;
}

/* The reconciliation, which is the page's argument ---------------------- */
.ledger {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 6px 0 0;
  margin-top: 6px;
  overflow-x: auto;
}
table { width: 100%; border-collapse: collapse; font-size: 16px; min-width: 460px; }
caption {
  caption-side: top; text-align: left; padding: 14px 18px 8px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-faint);
}
th, td { padding: 11px 18px; text-align: left; }
thead th {
  font-family: var(--mono); font-weight: 500; font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint);
  border-bottom: 1px solid var(--rule);
}
tbody tr + tr td { border-top: 1px solid var(--rule-soft); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.desc { font-family: var(--mono); font-size: 13.5px; color: var(--ink-soft); }
td.out { color: var(--out); }
td.bal { font-weight: 600; }

.seal {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px; border-top: 1px solid var(--rule);
  color: var(--accent); font-size: 16px;
}
.seal svg { flex: none; }

/* Honest limits -------------------------------------------------------- */
.limits { list-style: none; margin: 0; padding: 0; }
.limits li {
  padding-block: 16px; border-top: 1px solid var(--rule-soft);
  display: grid; grid-template-columns: auto 1fr; gap: 14px;
}
.limits li:last-child { border-bottom: 1px solid var(--rule-soft); }
.limits .mark { color: var(--ink-faint); font-family: var(--mono); font-size: 14px; }

.two { display: grid; grid-template-columns: 1fr 0.8fr; gap: 44px; align-items: center; }
.two .device { max-width: 300px; justify-self: center; }

footer {
  border-top: 1px solid var(--rule);
  padding-block: 34px 56px;
  color: var(--ink-faint);
  font-size: 15px;
}
footer p { max-width: 62ch; }
.fine { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; }

a { color: var(--accent); }

@media (max-width: 760px) {
  body { font-size: 17px; }
  .hero, .two { grid-template-columns: 1fr; gap: 30px; }
  .steps { grid-template-columns: 1fr; gap: 22px; }
  .hero-shot { max-width: 300px; }
  .device { max-width: 300px; }
  section { padding-block: 42px; }
}

/* The language switcher. Three words, top right, and no automatic redirect:
   a Portuguese speaker who wants the English page should be able to stay on
   it, and a crawler should see three real pages rather than one that moves
   under it. */
/* Name on the left, everything else on the right. `space-between` spread the
   three of them evenly instead, which put the pages hard against the wordmark
   and read as one long run of words starting at the logo. */
header {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
/* Flags, not words. Sized in their own right rather than inheriting the
   twelve-pixel mono the words used, and dimmed until you are on them, so the
   one you are reading is the one that is fully there. */
.langs { display: flex; gap: 12px; align-items: center; font-size: 21px; }
.langs a, .langs span { text-decoration: none; line-height: 1; }
.langs a { opacity: 0.45; transition: opacity 120ms ease; }
.langs a:hover, .langs a:focus-visible { opacity: 1; }
.langs [aria-current="true"] {
  opacity: 1;
  outline: 2px solid var(--rule); outline-offset: 3px; border-radius: 3px;
}

a:focus-visible, .langs a:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px;
}

@media (max-width: 760px) {
  header { padding-block: 32px 4px; }
}


/* --- Pages other than the home page ------------------------------------- */
/* A document, not a landing page: one column, wider leading, and the same
   hairlines. The reading measure is the constraint, not the viewport. */
/* No narrower container for the text pages: they share the landing page's
   frame so the masthead, the footer and the left edge of the prose do not
   move between pages. `p { max-width: 62ch }` keeps the reading measure. */
.doc { border-top: 0; padding-block: 40px 56px; }
.doc h1 { margin-bottom: 14px; }
.doc .lead { margin-bottom: 4px; }

.blocks, .qas { display: grid; gap: 0; margin-top: 30px; }
.block, .qa { padding-block: 26px; border-top: 1px solid var(--rule-soft); }
.block h2, .qa h2 {
  font-size: 21px; line-height: 1.3; margin-bottom: 10px;
  text-wrap: balance; max-width: 48ch;
}
.qa p, .block p { color: var(--ink-soft); }
.block p + p { margin-top: 14px; }

.contact {
  margin-top: 34px; padding: 22px; max-width: 62ch;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 16px;
}
.contact .eyebrow { margin-bottom: 8px; }
.updated {
  margin-top: 26px; font-size: 14px; color: var(--ink-faint);
}

/* --- The check-up section ----------------------------------------------- */
/* Five findings, set as a ledger of its own: a rule between each, no bullets,
   because they are five separate statements rather than a list of features. */
.sub-lead {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-faint);
  margin: 26px 0 0;
}
.findings { list-style: none; margin: 8px 0 0; padding: 0; }
.findings li {
  padding-block: 13px; border-top: 1px solid var(--rule-soft);
  color: var(--ink); max-width: 62ch;
}
.findings li:last-child { border-bottom: 1px solid var(--rule-soft); }
.aside {
  margin-top: 22px; padding-left: 16px;
  border-left: 3px solid var(--accent);
  color: var(--ink-soft);
}

/* --- Navigation ---------------------------------------------------------- */
/* Four pages now, so a nav earns its place; with one page it was furniture. */
header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px 24px; flex-wrap: wrap;
}
.brand { text-decoration: none; color: inherit; }
.brand img { width: 52px; height: 52px; }

/* The pages sit on the right, away from the name. `margin-right: auto` put
   them immediately after the wordmark and pushed only the flags over, which
   read as one long run of words starting at the logo. */
.site-nav {
  display: flex; gap: 20px; align-items: baseline;
  font-size: 16px; margin-left: auto;
}
.site-nav a { color: var(--ink-soft); text-decoration: none; }
.site-nav a:hover { color: var(--accent); text-decoration: underline; }
.site-nav [aria-current="page"] {
  color: var(--ink); font-weight: 600;
  border-bottom: 2px solid var(--accent); padding-bottom: 2px;
}

.foot-links { margin-top: 10px; }
.foot-links a { color: var(--ink-soft); }
.more { font-weight: 600; text-decoration: none; }
.more:hover { text-decoration: underline; }

/* The waiting list ------------------------------------------------------
   The one place on the site that asks for anything. It is a card rather than
   a band of colour: this page has exactly one loud thing on it, the status
   pill, and a second one would make both of them quieter. */
.wait form { margin-top: 18px; max-width: 34rem; }
.wait label {
  display: block; font-family: var(--mono); font-size: 11.5px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint);
  margin-bottom: 8px;
}
.waitrow { display: flex; gap: 10px; flex-wrap: wrap; }
.wait input[type="email"] {
  flex: 1 1 16rem; min-width: 0;
  font-family: var(--serif); font-size: 18px; color: var(--ink);
  background: var(--card);
  border: 1px solid var(--rule); border-radius: 10px;
  padding: 13px 14px;
}
.wait input[type="email"]:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--accent);
}
.wait input[type="email"]:disabled { color: var(--ink-faint); background: var(--paper); }
.wait button {
  font-family: var(--serif); font-size: 18px; font-weight: 600;
  color: var(--paper); background: var(--accent);
  border: 1px solid var(--accent); border-radius: 10px;
  padding: 13px 20px; cursor: pointer;
}
.wait button:hover { background: #26563F; border-color: #26563F; }
.wait button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.wait button:disabled { opacity: 0.7; cursor: default; }
.waitsay { min-height: 1.2em; margin: 12px 0 0; font-size: 17px; }
.waitsay.good { color: var(--accent); }
.waitsay.bad { color: var(--out); }
.wait .fine { margin-top: 14px; color: var(--ink-faint); line-height: 1.7; }

/* The honeypot. Off the page rather than display:none, which some robots
   check for, and out of the tab order and the accessibility tree so that
   nobody using a keyboard or a screen reader ever meets it. */
.nobody {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden;
}

@media (max-width: 760px) {
  .site-nav { gap: 16px; font-size: 15px; order: 3; margin-left: 0; width: 100%; }
  .langs { order: 2; }
  .doc { padding-block: 28px 44px; }
  .wait button { flex: 1 1 100%; }
}