/* Outfit — the typeface the Joontos wordmark is cut from (SIL Open Font
   License, see type/OFL.txt). Served as separate WOFF2 files rather than
   embedded, so the stylesheet stays small and the fonts cache on their own.
   font-display: swap means text is readable immediately either way. */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/type/Outfit-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/type/Outfit-700.woff2') format('woff2');
}

/* Palette and radius come from the app's design system. The site commits to a
   single visual world on purpose (black header and footer, white page, green
   for action and for the environmental idea), so every colour is painted
   explicitly rather than inherited from the viewer's theme. */

:root {
  --green: #17B36B;         /* actions, money/positive, the green idea */
  --green-deep: #0E8A52;
  --green-soft: #E7F6EE;

  --ink: #111114;           /* brand ink */
  --ink-raised: #1A1A20;    /* raised surfaces on ink */
  --ink-line: rgba(255, 255, 255, 0.14);
  --ink-dim: rgba(255, 255, 255, 0.66);

  --paper: #FFFFFF;
  --bone: #F0F1F0;          /* light band; brand background is #F7F7F8 */
  --line: #E3E7E4;
  --muted: #5B655F;

  --radius: 16px;
  --radius-sm: 12px;
  --wide: 1080px;
  --text: 660px;

  --display: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

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

img, svg { max-width: 100%; }

a { color: inherit; }

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

.wrap {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 0 22px;
}

.narrow { max-width: var(--text); }

/* ============================================================
   Header — black across every page, so the legal pages feel
   like part of the same product rather than a separate document.
   ============================================================ */

.site-head {
  background: var(--ink);
  color: var(--paper);
}

.site-head .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 68px;
}

.wordmark { display: block; line-height: 0; }
.wordmark img { display: block; height: 24px; width: auto; }

.head-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.head-nav a {
  font-size: 14.5px;
  color: var(--ink-dim);
  text-decoration: none;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.head-nav a:hover { color: var(--paper); }

.head-nav .lang {
  border: 1px solid var(--ink-line);
  padding: 7px 12px;
  margin-left: 4px;
}

/* Hide the in-page anchors on small screens; the page is short enough to
   scroll, and a cramped nav row looks worse than no nav row. */
@media (max-width: 620px) {
  .head-nav a.jump { display: none; }
}

/* ============================================================
   Hero
   ============================================================ */

.hero {
  background: var(--ink);
  color: var(--paper);
  position: relative;
  overflow: hidden;
}

.hero .wrap {
  display: grid;
  gap: 8px;
  padding-top: 44px;
  padding-bottom: 8px;
  position: relative;
  z-index: 1;
}

.hero h1 {
  font-family: var(--display);
  font-size: clamp(2.5rem, 8.5vw, 4.25rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 800;
  margin: 0 0 18px;
  text-wrap: balance;
}

.hero h1 em {
  font-style: normal;
  color: var(--green);
}

.hero-lede {
  font-size: clamp(1.05rem, 2.4vw, 1.2rem);
  color: var(--ink-dim);
  margin: 0 0 26px;
  max-width: 34ch;
}

.hero-art {
  position: relative;
  margin: 0 -22px -2px;
  line-height: 0;
}
.hero-art svg { width: 100%; height: auto; display: block; }

/* Store buttons. These are neutral, unbranded placeholders — swap them for the
   official Apple and Google badge artwork the day the apps are published. */
.stores {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 14px;
}

.store {
  display: flex;
  align-items: center;
  gap: 11px;
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  border-radius: var(--radius);
  padding: 11px 18px 11px 15px;
  min-width: 168px;
}
.store:hover { background: #ECEFEC; }

.store svg { flex: none; }

.store span { display: block; }

.store .top {
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.3;
}

.store .name {
  font-family: var(--display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.hero-note {
  font-size: 14.5px;
  color: var(--ink-dim);
  margin: 0 0 34px;
}
.hero-note a { color: var(--green); text-decoration: none; font-weight: 600; }
.hero-note a:hover { text-decoration: underline; }

/* ============================================================
   Sections
   ============================================================ */

section { position: relative; }

.band { padding: 62px 0; }
.band-bone { background: var(--bone); }
.band-ink { background: var(--ink); color: var(--paper); }

.eyebrow {
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--green);
  margin: 0 0 12px;
}

h2 {
  font-family: var(--display);
  font-size: clamp(1.6rem, 4.4vw, 2.1rem);
  line-height: 1.12;
  letter-spacing: -0.028em;
  font-weight: 800;
  margin: 0 0 14px;
  text-wrap: balance;
}

h3 {
  font-family: var(--display);
  font-size: 17.5px;
  font-weight: 700;
  letter-spacing: -0.012em;
  margin: 0 0 6px;
}

p { margin: 0 0 15px; }

.lead {
  font-size: clamp(1.05rem, 2.3vw, 1.18rem);
  margin: 0 0 26px;
}

.dim { color: var(--muted); }
.band-ink .dim { color: var(--ink-dim); }

/* Three short points */
.points {
  display: grid;
  gap: 12px;
  margin: 30px 0 0;
}

.point {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
}
.band-bone .point { background: var(--paper); }

.point .ico {
  display: block;
  color: var(--green);
  margin: 0 0 12px;
}

.point p { margin: 0; color: var(--muted); font-size: 16px; }

/* Numbered steps — the order is real, so the numbers carry meaning */
.steps {
  list-style: none;
  counter-reset: step;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  gap: 4px;
}

.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 14px;
  align-items: start;
  padding: 13px 0;
  border-top: 1px solid var(--line);
}
.steps li:first-child { border-top: 0; }
.band-ink .steps li { border-top-color: var(--ink-line); }

.steps li::before {
  content: counter(step);
  font-size: 13px;
  font-weight: 700;
  color: var(--green);
  padding-top: 2px;
  font-variant-numeric: tabular-nums;
}

/* Both the label and the description sit in the second column — without this
   the description drops into the 30px number column and wraps to a sliver. */
.steps b,
.steps span { grid-column: 2; }

.steps b { display: block; font-family: var(--display); font-weight: 700; }
.steps span { display: block; color: var(--muted); font-size: 16px; }
.band-ink .steps span { color: var(--ink-dim); }

/* The environmental section */
.ethos-grid {
  display: grid;
  gap: 26px;
  align-items: center;
}

.leafline { line-height: 0; }
.leafline svg { width: 100%; height: auto; }

.stat {
  border-left: 2px solid var(--green);
  padding: 2px 0 2px 16px;
  margin: 22px 0 0;
}
.stat p { margin: 0; font-size: 16px; }

/* ============================================================
   Contact form
   ============================================================ */

.form {
  display: grid;
  gap: 14px;
  margin: 26px 0 0;
  max-width: 520px;
}

.field { display: grid; gap: 6px; }

.field label {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
}

.field input,
.field textarea {
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  width: 100%;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input::placeholder,
.field textarea::placeholder { color: #9AA39D; }

.hp { position: absolute; left: -9999px; }

.btn {
  justify-self: start;
  font: inherit;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--paper);
  background: var(--green);
  border: 0;
  border-radius: var(--radius);
  padding: 14px 26px;
  cursor: pointer;
}
.btn:hover { background: var(--green-deep); }

.form-note { font-size: 14.5px; color: var(--muted); margin: 4px 0 0; }
.form-note a { color: var(--ink); }

/* ============================================================
   Long-form document pages (privacy, terms, deletion, support)
   ============================================================ */

.doc { padding: 40px 0 8px; max-width: var(--text); }

.doc h1 {
  font-family: var(--display);
  font-size: clamp(1.9rem, 5.4vw, 2.4rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 800;
  margin: 0 0 10px;
}

.doc h2 {
  font-size: 1.25rem;
  margin: 36px 0 10px;
}

.doc h3 {
  font-size: 17px;
  margin: 24px 0 6px;
}

.doc ul, .doc ol { margin: 0 0 15px; padding-left: 22px; }
.doc li { margin: 0 0 7px; }

.doc .lede { font-size: 1.1rem; margin: 0 0 8px; }

.updated { color: var(--muted); font-size: 15px; margin: 0 0 10px; }

.card {
  background: var(--bone);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  margin: 0 0 14px;
}
.card p:last-child { margin-bottom: 0; }
.card-note { color: var(--muted); margin: 0; }

/* ============================================================
   Footer
   ============================================================ */

.site-foot {
  background: var(--ink);
  color: var(--ink-dim);
  margin: 56px 0 0;
  padding: 40px 0 46px;
  font-size: 15px;
}
.hero + .site-foot, .band + .site-foot { margin-top: 0; }

.site-foot .mark { margin: 0 0 20px; }
.site-foot .mark img { height: 22px; width: auto; display: block; }

.site-foot nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin: 0 0 20px;
}
.site-foot a { color: var(--ink-dim); text-decoration: none; }
.site-foot a:hover { color: var(--paper); text-decoration: underline; }

.site-foot p { margin: 0; font-size: 14px; color: rgba(255,255,255,0.45); }

/* ============================================================
   Wider screens
   ============================================================ */

@media (min-width: 760px) {
  body { font-size: 17.5px; }

  .hero .wrap {
    grid-template-columns: 1.02fr 0.98fr;
    align-items: center;
    gap: 30px;
    padding-top: 66px;
    padding-bottom: 66px;
  }
  .hero-art { margin: 0; }
  .hero-note { margin-bottom: 0; }

  .band { padding: 84px 0; }

  .points { grid-template-columns: repeat(3, 1fr); gap: 16px; }

  .ethos-grid { grid-template-columns: 1fr 1fr; gap: 48px; }

  .doc { padding-top: 56px; }
}