/* toucan-app.com — the one stylesheet. System fonts only; nothing is fetched from anyone else.
   Palette from branding/BRAND.md. Gold and orange are reward colours and are not used here.

   Contrast (WCAG 2.x, measured 2026-09-25):
     ink #231F1A on cream #FFF7E9 15.39   on face #FFF4DD 15.00   on white 16.38
     teal-deep #256554 on cream 6.43      on face 6.27             (links, focus ring, eyebrow)
     cream on teal #2F7D6B 4.62           (the button; its label is bold 19px and larger)
     cream on teal-deep 6.43              (the button, hovered or focused)
     muted #5A5149 on cream 7.29          on face 7.10
     field border #857A6B on white 4.21   (non-text, needs 3:1)
   The lighter teal #2F7D6B is only ever a button ground, never text: as text on face it is 4.51. */

:root {
  --cream: #FFF7E9;      /* page background */
  --ink: #231F1A;        /* all text */
  --teal: #2F7D6B;       /* interface accent: the button */
  --teal-deep: #256554;  /* links, focus, the button when hovered or focused */
  --face: #FFF4DD;       /* cards */
  --line: #EADFC9;       /* a quiet rule on cream */
  --field: #857A6B;      /* a form field's edge, 3:1 or better against white */
  --muted: #5A5149;      /* quieter grown-up text */

  /* Type scale: four sizes. */
  --fs-small: 0.94rem;
  --fs-body: 1rem;
  --fs-mid: clamp(1.15rem, 1rem + 0.75vw, 1.3rem);
  --fs-large: clamp(2rem, 1.4rem + 3vw, 2.6rem);

  /* Spacing scale. */
  --s1: 4px;
  --s2: 8px;
  --s3: 16px;
  --s4: 24px;
  --s5: 40px;
  --s6: 64px;

  --measure: 31rem;      /* about 68 characters a line at 18px, measured in the system rounded face */
  color-scheme: light;
}

* { box-sizing: border-box; }

/* 17px on phones, 18px from tablet width up. Everything else is in rem or em from here. */
html { font-size: 17px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (min-width: 720px) { html { font-size: 18px; } }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: ui-rounded, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--fs-body);
  line-height: 1.6;
  overflow-wrap: break-word;
}

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

.page { max-width: var(--measure); margin: 0 auto; padding: 0 16px var(--s5); }

/* Skip link: off screen until it has focus. */
.skip {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 1;
  background: var(--ink);
  color: var(--cream);
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 700;
}
.skip:focus { top: 12px; color: var(--cream); }

/* Header: the lockup and two links. Not sticky.
   The lockup's clear space is a quarter of the mark's height on every side (BRAND.md). At 248px
   wide the mark is about 61px tall, so the 16px gaps and 24px padding below clear it.
   248px is the floor: it keeps Perch at 56px or taller. */
.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3) var(--s4);
  padding: var(--s4) 0;
}
.site-header .lockup { display: block; width: 248px; flex: 0 0 auto; }
.site-header .lockup img { width: 248px; }
.site-nav { display: flex; gap: var(--s2); margin-left: -12px; }
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 10px;
  font-weight: 700;
}
.site-nav a[aria-current="page"] { color: var(--ink); text-decoration: none; }
@media (min-width: 560px) { .site-nav { margin-left: 0; margin-right: -12px; } }

/* Headings and text */
h1, h2, h3 { line-height: 1.2; text-wrap: balance; }
h1 { font-size: var(--fs-large); margin: var(--s4) 0 var(--s3); letter-spacing: -0.01em; }
h1 .eyebrow {
  display: block;
  font-size: var(--fs-small);
  letter-spacing: 0;
  color: var(--teal-deep);
  margin-bottom: var(--s2);
}
h2 { font-size: var(--fs-mid); margin: clamp(var(--s5), 9vw, var(--s6)) 0 var(--s3); }
h3 { font-size: var(--fs-body); margin: var(--s4) 0 var(--s1); }
p, ul, dl { margin: 0 0 var(--s3); }
ul { padding-left: 1.25rem; }
li { margin-bottom: var(--s2); }
li::marker { color: var(--teal-deep); }

a { color: var(--teal-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

/* One visible focus ring for everything a keyboard can reach. */
:focus-visible { outline: 3px solid var(--teal-deep); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }

.lede { font-size: var(--fs-mid); line-height: 1.45; }
.muted, .quiet { color: var(--muted); font-size: var(--fs-small); }
.effective { color: var(--muted); font-size: var(--fs-small); }

/* The one call to action, and the form's button. Teal on cream, never gold.
   Full width on phones, its own width from 560px up. */
.button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  padding: 12px 28px;
  background: var(--teal);
  color: var(--cream);
  font: inherit;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border: 0;
  border-radius: 14px;
  cursor: pointer;
}
.button:hover, .button:focus-visible { background: var(--teal-deep); color: var(--cream); }
.button[disabled] { cursor: progress; background: var(--teal-deep); }
@media (min-width: 560px) { .button { display: inline-flex; width: auto; } }

.cta { margin: var(--s4) 0 var(--s2); }
.cta + .muted { margin-bottom: 0; }
.closing { margin-top: var(--s6); padding-top: var(--s5); border-top: 2px solid var(--line); }
.closing h2 { margin-top: 0; }

.card {
  background: var(--face);
  border: 2px solid var(--line);
  border-radius: 18px;
  padding: 20px;
  margin: 0 0 var(--s3);
}
.card > :last-child { margin-bottom: 0; }

.modes dt { font-weight: 700; margin-top: var(--s3); }
.modes dt:first-child { margin-top: 0; }
.modes dd { margin: 2px 0 0; }

/* The limits sentence: kept where it is, set quieter. */
.note { color: var(--muted); font-size: var(--fs-small); border-top: 2px solid var(--line); margin-top: var(--s5); padding-top: var(--s3); }

/* Questions and answers */
.qa h3:first-of-type { margin-top: 0; }
.qa p { margin-bottom: var(--s3); }

/* The contact form */
.form { margin-top: var(--s3); }
.form label { display: block; font-weight: 700; margin: var(--s3) 0 6px; }
.form label:first-of-type { margin-top: 0; }
.form input[type="text"], .form input[type="email"], .form textarea {
  display: block;
  width: 100%;
  min-height: 48px;
  font: inherit;
  font-size: max(1rem, 16px); /* 16px or more, so iOS does not zoom on focus */
  color: var(--ink);
  background: #FFFFFF;
  border: 2px solid var(--field);
  border-radius: 12px;
  padding: 10px 12px;
}
.form input:focus-visible, .form textarea:focus-visible { border-color: var(--teal-deep); outline: 3px solid var(--teal-deep); outline-offset: 1px; }
.form textarea { min-height: 10rem; resize: vertical; }
.form .button { margin-top: var(--s4); }
.form .hp { display: none; }
.form-hint { color: var(--muted); font-size: var(--fs-small); margin: 0 0 var(--s3); }
.form-status { margin-top: var(--s3); font-weight: 700; }
.form-status:empty { display: none; }
.form-status:focus { outline: none; }

/* Footer: the three pages and the company. */
.site-footer {
  margin-top: var(--s6);
  padding-top: var(--s3);
  border-top: 2px solid var(--line);
  font-size: var(--fs-small);
  color: var(--muted);
}
.site-footer nav { display: flex; flex-wrap: wrap; gap: 0 var(--s3); margin: 0 0 var(--s2) -8px; }
.site-footer nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; }
.site-footer nav a[aria-current="page"] { color: var(--ink); text-decoration: none; }
.site-footer p { margin: 0; }

/* There is no motion on this site, and the mark never animates. This keeps it that way
   for anyone who has asked for less. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}