/* The app's palette, so the site and the product look like one thing.
   Values lifted from apps/mobile/lib/theme/app_theme.dart — if they change
   there, they change here. */
:root {
  --background: #ffffff;
  --foreground: #1a1a1a;
  --primary: #0066ff;
  --primary-foreground: #ffffff;
  --muted: #f4f7fb;
  --muted-foreground: #6a7180;
  --border: #e6ebf2;
  --measure: 42rem;

  /* One gutter, used by every page edge, so nothing on the site can end up
     closer to the screen than anything else. It grows with the viewport: a
     phone gets 28px, which is enough that a line of text reads as inset
     rather than as clipped, and a small tablet gets more. Above the measure
     the column is already centred and the gutter stops mattering. */
  --gutter: clamp(1.75rem, 6vw, 2.25rem);

  /* The same gutter, but never less than the room a notch or a rounded
     corner needs. Harmless where there is no cutout: the fallback is 0. */
  --gutter-start: max(var(--gutter), env(safe-area-inset-left, 0px));
  --gutter-end: max(var(--gutter), env(safe-area-inset-right, 0px));
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #101215;
    --foreground: #f2f4f7;
    --primary: #4d90ff;
    --primary-foreground: #06070a;
    --muted: #181b20;
    --muted-foreground: #9aa2b1;
    --border: #262b33;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Safari on iOS enlarges text when a phone turns landscape, which undoes
   every size decision below it. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

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

  /* An email address or a URL is one long word, and one long word is all it
     takes to push a narrow page sideways. */
  overflow-wrap: break-word;
}

img {
  max-width: 100%;
}

.wrap {
  max-width: var(--measure);
  margin: 0 auto;
  padding-inline: var(--gutter-start) var(--gutter-end);
}

/* Header */

header {
  border-bottom: 1px solid var(--border);
}

/* Wordmark and nav sit on one row while there is room for one row. There
   isn't, on a phone: the two link labels alone want more width than the
   whole screen has. Without wrapping, flexbox honours the row by squeezing
   each label until it breaks mid-phrase — "Terms &" over "conditions".
   Wrapping lets the nav drop to a second line intact instead. */
header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem 1rem;
  padding-top: 1.1rem;
  padding-bottom: 1.1rem;
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: clamp(1.2rem, 5vw, 1.35rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: inherit;
  text-decoration: none;
}

/* The same rounding the landing page and the app icon use, so the mark reads
   as one thing across all three. Decorative here: the wordmark beside it
   already says the name, and a screen reader announcing it twice is noise. */
.wordmark img {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 22%;
}

nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 1.25rem;
  font-size: 0.9rem;
}

/* The padding is the tap target. Without it these links are the height of
   their own text, which is about half of what a thumb can reliably hit. */
nav a {
  display: inline-block;
  padding: 0.4rem 0;
  color: var(--muted-foreground);
  text-decoration: none;
}

nav a:hover {
  color: var(--foreground);
}

/* The landing page: one column, centred, and vertically settled in the
   viewport rather than stuck to the top. There is little enough on it that
   top-aligning leaves it looking abandoned. */

.landing {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

.stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(2.5rem, 8vh, 4rem) var(--gutter-end) clamp(2rem, 6vh, 3rem)
    var(--gutter-start);
}

.mark {
  width: clamp(68px, 19vw, 88px);
  height: auto;
  border-radius: 22%;
  margin-bottom: clamp(1.25rem, 4vw, 1.75rem);
}

.landing h1 {
  font-size: clamp(2.5rem, 11vw, 4.25rem);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 1;
  margin: 0;
}

/* Apple's badge, used as supplied. The margin is the clear space their
   guidelines require — nothing may crowd it — and the height is comfortably
   above the minimum they set. Left at its given size on every screen: it
   fits the narrowest phone, and shrinking their artwork is not ours to do. */
.badge {
  display: inline-block;
  margin-top: clamp(2rem, 6vw, 2.5rem);
  padding: 0.5rem;
  line-height: 0;
}

.badge img {
  width: 150px;
  height: auto;
}

/* Black on light, white on dark. Swapped rather than filtered: recolouring
   their artwork is the thing the guidelines rule out. */
.badge-light {
  display: none;
}

@media (prefers-color-scheme: dark) {
  .badge-dark {
    display: none;
  }

  .badge-light {
    display: inline-block;
  }
}

.landing-footer {
  padding: 0 var(--gutter-end)
    max(clamp(2rem, 6vh, 2.5rem), calc(env(safe-area-inset-bottom, 0px) + 1.25rem))
    var(--gutter-start);
  font-size: 0.8rem;
  color: var(--muted-foreground);
}

.landing-footer p {
  margin: 0.35rem 0 0;
}

.landing-footer a {
  color: inherit;
}

.tagline {
  margin: 1rem 0 0;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: clamp(0.25em, 1.2vw, 0.4em);
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.lede {
  margin: clamp(1.5rem, 5vw, 2rem) auto 0;
  max-width: 32rem;
  font-size: clamp(1.05rem, 4vw, 1.15rem);
  color: var(--muted-foreground);
  text-wrap: pretty;
}

/* The 404 says its piece in both languages, one line under the other. The
   stage is a flex column, so these margins do not collapse — left alone, the
   second line would sit as far from the first as the first does from the
   heading, and read as a separate thought rather than a translation. */
.lede + .lede {
  margin-top: 0.4rem;
}

.cta {
  display: inline-block;
  margin-top: clamp(2rem, 6vw, 2.5rem);
  padding: 0.85rem 2rem;
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-foreground);
  font-weight: 600;
  text-decoration: none;
}

.cta + .cta {
  margin-top: 0.75rem;
}

.cta:hover {
  filter: brightness(1.08);
}

/* A phone held sideways has a viewport a third as tall as it is wide. The
   centred column would rather scroll than shrink, so give it less to carry
   and let it stay on one screen. */
@media (orientation: landscape) and (max-height: 26em) {
  .mark {
    width: 56px;
    margin-bottom: 0.85rem;
  }

  .landing h1 {
    font-size: clamp(2rem, 6vw, 2.75rem);
  }

  .lede {
    margin-top: 0.85rem;
  }

  .badge,
  .cta {
    margin-top: 1.25rem;
  }
}

/* Long-form documents */

/* Block only. .doc and .wrap sit on the same element and carry the same
   weight, so a `padding` shorthand here would win on source order and reset
   the gutter .wrap just set — which is how these pages came to print their
   text against the edge of the screen. Anything that touches one axis states
   that axis. */
.doc {
  padding-block: clamp(2.25rem, 7vw, 3.5rem) clamp(3rem, 8vw, 4rem);
}

.doc h1 {
  font-size: clamp(1.75rem, 7vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  margin: 0 0 0.5rem;
  text-wrap: balance;
}

.doc .updated {
  margin: 0 0 clamp(2rem, 7vw, 3rem);
  font-size: 0.85rem;
  color: var(--muted-foreground);
}

/* The policy version, and the reason it is set as a token rather than a date.
   2026-08-04 is the string the app records against somebody's consent and sends
   back when they give it — the server refuses one it does not recognise — so it
   has to match the API character for character and cannot be localised. Beside a
   Dutch date it would otherwise read as a date in the wrong notation, which is
   how somebody comes to "fix" it and quietly breaks consent. Monospace says
   identifier. */
.doc .updated code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.95em;
  padding: 0.1em 0.35em;
  border-radius: 0.25rem;
  background: var(--muted);
}

/* A page with no "last updated" line loses the space that line was carrying,
   and its opening paragraph ends up sitting closer to the title than the
   legal pages' do. Hand that space to the paragraph instead, so every
   document begins at the same height. */
.doc h1 + p:not(.updated) {
  margin-top: clamp(2rem, 7vw, 3rem);
}

.doc h2 {
  font-size: clamp(1.15rem, 4.5vw, 1.2rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: clamp(2.25rem, 7vw, 2.75rem) 0 0.75rem;
  text-wrap: balance;
}

.doc h3 {
  font-size: 1rem;
  font-weight: 600;
  margin: 1.75rem 0 0.5rem;
  text-wrap: balance;
}

.doc p,
.doc li {
  color: var(--foreground);
}

/* The registered details, on the privacy policy and the terms. Set apart
   because it is an address rather than a sentence: the line breaks are the
   content, and a reader looking for who they are contracting with should find
   it as a block rather than parse it out of a paragraph. Consumer law and the
   DSA both want it findable, which is a layout question as much as a legal
   one. */
.doc .entity {
  margin: 1rem 0 1.5rem;
  padding: 1rem 1.15rem;
  border-left: 3px solid var(--border);
  border-radius: 0 0.5rem 0.5rem 0;
  background: var(--muted);
  font-size: 0.95rem;
  line-height: 1.7;
}

.doc ul {
  padding-left: 1.25rem;
}

.doc li {
  margin-bottom: 0.5rem;
}

.doc a {
  color: var(--primary);
}

.doc table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.25rem 0;
  font-size: 0.95rem;
}

/* Flush with the text column on both sides, so the table lines up with the
   prose around it, with the gap between columns carried by the neighbour. */
.doc th,
.doc td {
  text-align: left;
  vertical-align: top;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--border);
}

.doc th:first-child,
.doc td:first-child {
  padding-left: 0;
}

.doc th:last-child,
.doc td:last-child {
  padding-right: 0;
}

.doc th {
  font-weight: 600;
  white-space: nowrap;
}

/* Wide tables scroll on their own rather than pushing the page sideways. */
.scroller {
  overflow-x: auto;
}

/* Three columns of prose do not fit a phone, and a table that has to be
   dragged sideways is a table nobody reads. Below this width each row
   becomes a small block with its column heading printed above each value:
   the page stays one column, and no cell ends up against the screen edge.
   The real <thead> stays in the document — hidden, not removed — and the
   labels come from generated content, which WebKit and Blink both put in
   the accessibility tree. */
@media (max-width: 40em) {
  .scroller {
    overflow-x: visible;
  }

  .doc table,
  .doc tbody,
  .doc tr,
  .doc td {
    display: block;
    width: 100%;
  }

  .doc thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .doc tr {
    padding: 1.15rem 0;
    border-bottom: 1px solid var(--border);
  }

  .doc tr:first-child {
    padding-top: 0.25rem;
  }

  .doc td {
    padding: 0;
    border: 0;
  }

  .doc td + td {
    margin-top: 0.85rem;
  }

  .doc td::before {
    content: attr(data-label);
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted-foreground);
  }
}

/* Something the reader must supply before this goes live. Deliberately loud:
   a placeholder that blends in is a placeholder that ships. */
.fill-in {
  background: #ffe9a8;
  color: #4a3600;
  padding: 0.1em 0.4em;
  border-radius: 0.25em;
  font-weight: 600;
}

@media (prefers-color-scheme: dark) {
  .fill-in {
    background: #6b5300;
    color: #ffeeb8;
  }
}

/* Footer */

/* Centred on every page, landing and document alike. The document footer used
   to inherit the left edge of the prose above it, which lined it up with the
   text and the wordmark — three edges on one line, and a reason to keep it.
   The reason it lost: a footer is not part of the document it follows, and
   two footers that disagree about something this visible read as an oversight
   rather than as a distinction. One rule now, and .landing-footer is left
   holding only what actually differs about it. */
footer {
  border-top: 1px solid var(--border);
  padding: clamp(2rem, 6vw, 2.5rem) 0
    max(clamp(2.5rem, 8vw, 4rem), calc(env(safe-area-inset-bottom, 0px) + 2rem));
  text-align: center;
  font-size: 0.85rem;
  color: var(--muted-foreground);
}

footer nav {
  justify-content: center;
  margin-bottom: 0.75rem;
}

footer p {
  margin: 0.4rem 0 0;
}

footer a {
  color: inherit;
}