/* Landing styles. One palette in two themes, the same tones the portals and the Android app use
   (docs/portals-theming.md) plus the mascot's leaf greens for brand moments. Every colour is a
   variable: light is the default, dark applies to an explicit choice and to "system" on a dark OS. */

:root {
  --bg: #eef1f8;
  --panel: #ffffff;
  --line: #d9dfe7;
  --fg: #10161d;
  --muted: #5b6672;
  --accent: #1c6fa8;
  --accent-fg: #ffffff;
  --leaf: #3f7f42;
  --leaf-soft: #e8f1e6;
  --shadow: 0 1px 2px rgba(16, 22, 29, 0.06), 0 8px 24px rgba(16, 22, 29, 0.06);
}

:root[data-theme='dark'] {
  --bg: #0f1419;
  --panel: #1a2027;
  --line: #2b333d;
  --fg: #d7dde4;
  --muted: #8a95a1;
  --accent: #4ea1ff;
  --accent-fg: #08131f;
  --leaf: #7cc45a;
  --leaf-soft: #17241a;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #0f1419;
    --panel: #1a2027;
    --line: #2b333d;
    --fg: #d7dde4;
    --muted: #8a95a1;
    --accent: #4ea1ff;
    --accent-fg: #08131f;
    --leaf: #7cc45a;
    --leaf-soft: #17241a;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: ui-sans-serif, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

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

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

.skip {
  position: absolute;
  left: -9999px;
  top: 8px;
  background: var(--panel);
  padding: 8px 14px;
  border-radius: 8px;
}
.skip:focus { left: 8px; z-index: 10; }

/* ---------------------------------------------------------------- header */

.top {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  max-width: 1040px;
  margin: 0 auto;
  padding: 18px 20px;
}

.logo { display: inline-flex; line-height: 0; }
.logo img { width: 120px; height: auto; border-radius: 10px; }

.nav { display: flex; gap: 4px; flex-wrap: wrap; flex: 1 1 auto; }
.nav a {
  color: var(--fg);
  text-decoration: none;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 15px;
  white-space: nowrap;
}
.nav a:hover { background: var(--panel); }
.nav a[aria-current='page'] { background: var(--panel); box-shadow: var(--shadow); font-weight: 600; }

.tools { display: flex; align-items: center; gap: 8px; }

/* The way out to the client portal — the one thing in this row you DO rather than set, so it is the
   one thing that keeps a word and a shape of its own: an accent-outlined pill beside two circles.

   Header width is the constraint to respect here. Adding this pill at pill-sized settings controls
   overflowed the 1040px container and dropped the whole tools row to a second line; turning the
   language and theme switches into circles gave back more than it cost, which is why .top/.nav
   spacing above is back at its original, roomier values. Checked by screenshot in all six languages
   — Spanish is the tightest, its nav being the longest. Anything else added to this row needs the
   same check, not a guess. */
.portal {
  padding: 7px 14px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  color: var(--accent);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.portal:hover { background: var(--accent); color: var(--accent-fg); }

.picker { position: relative; }
/* Both settings controls are the same circle: one geometry, so the pair reads as a pair and neither
   competes with the Account pill. 38px is a comfortable touch target and matches the pill's height. */
.round {
  width: 38px;
  height: 38px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--panel);
  color: var(--fg);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.round:hover { border-color: var(--accent); color: var(--accent); }

.picker summary { list-style: none; }
.picker summary::-webkit-details-marker { display: none; }
.picker ul {
  position: absolute;
  right: 0;
  margin: 6px 0 0;
  padding: 6px;
  list-style: none;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
  min-width: 160px;
  z-index: 5;
}
.picker li a {
  display: block;
  padding: 6px 10px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--fg);
  font-size: 15px;
}
.picker li a:hover { background: var(--bg); }
.picker li a[aria-current='true'] { font-weight: 600; color: var(--accent); }

.theme { font: inherit; }
/* Three icons, one visible: the script sets data-mode, CSS picks. Keeping all three in the markup
   means no icon is built in JavaScript and none can go missing when the script is slow. */
.theme svg { display: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.theme[data-mode='system'] .i-system,
.theme[data-mode='light'] .i-light,
.theme[data-mode='dark'] .i-dark { display: block; }

/* ---------------------------------------------------------------- content */

main {
  max-width: 1040px;
  margin: 0 auto;
  padding: 24px 20px 72px;
}

h1 {
  font-size: clamp(30px, 5vw, 46px);
  line-height: 1.1;
  margin: 12px 0 16px;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h2 { font-size: 24px; line-height: 1.25; margin: 36px 0 12px; text-wrap: balance; }

p { margin: 0 0 16px; max-width: 68ch; }

.lead { font-size: 20px; color: var(--muted); max-width: 62ch; }

ul { max-width: 68ch; padding-left: 22px; }
li { margin-bottom: 8px; }
li::marker { color: var(--leaf); }

.note {
  background: var(--leaf-soft);
  border-left: 3px solid var(--leaf);
  border-radius: 0 12px 12px 0;
  padding: 14px 18px;
  margin: 24px 0;
  max-width: 68ch;
}
.note p { margin: 0; font-size: 16px; }
.banner { margin-top: 8px; }

/* ---------------------------------------------------------------- hero */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 32px;
  /* Pinned to the top, not centred: the home page's column is taller (it carries the buttons), and
     centring pushed the mascot a few pixels lower there than on every other page. Aligning to the
     start puts it in exactly the same place whatever the column below it holds. */
  align-items: start;
  padding: 8px 0 8px;
}
.hero-mascot { width: 100%; max-width: 340px; justify-self: center; }

.cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.btn {
  display: inline-block;
  padding: 11px 22px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--fg);
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
}
.btn:hover { border-color: var(--accent); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }

@media (max-width: 720px) {
  .hero { grid-template-columns: 1fr; }
  .hero-mascot { max-width: 260px; order: -1; }
  body { font-size: 16px; }
}

/* ---------------------------------------------------------------- footer */

.bottom {
  border-top: 1px solid var(--line);
  padding: 28px 20px 56px;
  max-width: 1040px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  color: var(--muted);
}
.bottom p { margin: 0; font-size: 15px; }
.foot-mascot { width: 130px; }

/* ---------------------------------------------------------------- language root */

body.root main {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
}
.root-logo { width: 200px; border-radius: 14px; }
.root h1 { font-size: 22px; font-weight: 600; }
.langs { list-style: none; padding: 0; display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.langs a {
  display: inline-block;
  padding: 10px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--fg);
  text-decoration: none;
}
.langs a:hover { border-color: var(--accent); }

/* ---------------------------------------------------------------- download page */

.version {
  font-size: 14px;
  color: var(--muted);
  letter-spacing: .04em;
  margin-top: 4px;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  margin: 8px 0 36px;
}

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.card h2 { margin: 0; font-size: 20px; }
.card p { margin: 0; font-size: 15px; color: var(--muted); }
.card-muted { border-style: dashed; background: transparent; }

.file { display: flex; flex-direction: column; gap: 8px; }
.file-head { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; color: var(--muted); }
.file-arch { font-weight: 600; color: var(--fg); }
.file-size { font-variant-numeric: tabular-nums; white-space: nowrap; }
.file .btn { text-align: center; }

.sum summary { cursor: pointer; font-size: 13px; color: var(--muted); }
.sum code {
  display: block;
  margin-top: 6px;
  font-size: 11.5px;
  line-height: 1.5;
  word-break: break-all;
  color: var(--muted);
}

.cli { margin: 0 0 36px; max-width: 68ch; }
.cli summary { cursor: pointer; font-weight: 600; }
.cli-list { list-style: none; padding: 12px 0 0; display: flex; flex-direction: column; gap: 8px; }
.cli-list li { display: flex; gap: 12px; justify-content: space-between; align-items: baseline; }

.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin: 16px 0 8px;
}
.steps h3 { font-size: 17px; margin: 0 0 8px; }
.steps ol { padding-left: 20px; margin: 0; }
.steps li { margin-bottom: 10px; font-size: 15px; }
.steps li::marker { color: var(--leaf); font-weight: 600; }

pre {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  overflow-x: auto;
  max-width: 68ch;
}
pre code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 14px; }

/* Tables — only the formal policy uses them, so they get their rules here rather than in the page
   styles above. Both themes come from the same variables as everything else; a table that read well
   in light and turned into a grey slab in dark would be worse than none. */
.policy table {
  border-collapse: collapse;
  width: 100%;
  max-width: 68ch;
  margin: 0 0 20px;
  font-size: 15px;
}
.policy th,
.policy td {
  border-bottom: 1px solid var(--line);
  padding: 10px 14px 10px 0;
  text-align: left;
  vertical-align: top;
}
.policy th {
  font-weight: 600;
  color: var(--muted);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
/* The first column of every table here is the thing being described; the rest explains it. */
.policy td:first-child { font-weight: 600; }
.policy tr:last-child td { border-bottom: none; }

/* A legal document is read, not skimmed: give it the measure and the spacing of prose. */
.policy h2 { margin-top: 44px; }
.policy h3 { font-size: 18px; margin: 28px 0 10px; }
.policy hr { border: 0; border-top: 1px solid var(--line); margin: 40px 0; }

/* Narrow screens: a table cannot fold, so let it scroll rather than push the page sideways. */
@media (max-width: 640px) {
  .policy table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* ---------------------------------------------------------------- guides */

/* The list on the help page. One card per guide, the same panel as the download cards so the two
   pages read as one site — but a single column: these are titles and sentences, not a row of
   choices to compare, and a person picks a guide by reading it rather than by scanning across. */
.guides {
  list-style: none;
  padding: 0;
  margin: 8px 0 36px;
  display: grid;
  gap: 16px;
}
.guide-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px 24px;
}
.guide-card h2 { margin: 0 0 8px; font-size: 20px; }
.guide-card h2 a { color: var(--fg); text-decoration: none; }
.guide-card h2 a:hover { color: var(--accent); text-decoration: underline; }
.guide-card p { margin: 0; color: var(--muted); font-size: 15px; }

/* A guide is read top to bottom, so it keeps the measure of prose. The screenshots are the
   exception and are allowed to be wider than the text: they are the thing being read at that
   point, and a shrunken screenshot of an interface is a screenshot nobody can use. */
.guide { max-width: 78ch; }
.guide h2 { margin-top: 44px; font-size: 24px; }
.guide h3 { margin: 28px 0 10px; font-size: 18px; }
.guide p, .guide li { max-width: 68ch; }

/* The border matters: most of these are screenshots of a light interface on a light page, and
   without an edge they bleed into the background and stop looking like a picture of a screen. */
.shot {
  display: block;
  width: 100%;
  height: auto;
  margin: 20px 0 28px;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
  background: var(--panel);
}

/* The way back to the list, above the title and again at the end. */
.crumb { margin: 0 0 18px; font-size: 15px; }
.crumb a { color: var(--muted); text-decoration: none; }
.crumb a:hover { color: var(--accent); text-decoration: underline; }
.guide .crumb:last-child { margin: 36px 0 0; padding-top: 20px; border-top: 1px solid var(--line); }

/* The line on the Download page that leads to the guides: a sentence, not a button — the buttons
   above it are the download itself, and a second accent shape beside them would compete with it. */
.guide-cta { margin: 0 0 28px; color: var(--muted); max-width: 68ch; }
.guide-cta a { color: var(--accent); font-weight: 600; white-space: nowrap; }

/* Code and tables inside a guide. The deployment guide is the first to need either: a configuration
   a reader copies, and rule/consequence tables. Both are shaped like the policy page's, which is the
   only other place on this site that carries them, so the two read as one design. */
.guide pre {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  overflow-x: auto;          /* a long command scrolls in its own box, never widens the page */
  font-size: 14px;
  line-height: 1.55;
  max-width: 100%;
}
.guide pre code { background: none; padding: 0; font-size: inherit; }

/* A wide table scrolls inside its wrapper for the same reason. */
.guide .table-wrap { overflow-x: auto; margin: 0 0 24px; max-width: 100%; }
.guide table { border-collapse: collapse; width: 100%; font-size: 15px; }
.guide th, .guide td {
  border-bottom: 1px solid var(--line);
  padding: 10px 14px 10px 0;
  text-align: left;
  vertical-align: top;
}
.guide th {
  font-weight: 600;
  color: var(--muted);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.guide td:first-child { font-weight: 600; }
.guide tr:last-child td { border-bottom: none; }