/*
 * chamo.app.br (FS). The app's design tokens (chamo-app lib/ui/theme.dart), the same as the
 * backoffice: phone first from 320 px, 17 px body (D-06), 48 px touch targets (D-05).
 */

@font-face {
  font-family: "Work Sans";
  src: url("WorkSans.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Fraunces";
  src: url("Fraunces.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  --screen: #f3efe7;
  --surface: #fffdf9;
  --border: #ddd4c3;
  --title: #1c2a24;
  --body: #35453d;
  --soft: #5e6e64;
  --link: #1f4a3c;
  --focus: #3d7c66;
  --mark: #e0a03f;
  --mark-text: #2e1d02;
  --radius-card: 20px;
  --margin: 16px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --screen: #0e1813;
    --surface: #17251e;
    --border: #34493d;
    --title: #f3efe7;
    --body: #d9e2dc;
    --soft: #a7b6ac;
    --link: #8fd0b4;
    --focus: #8fd0b4;
  }
}

@media (min-width: 400px) {
  :root { --margin: 20px; }
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-width: 320px;
  background: var(--screen);
  color: var(--body);
  font: 400 17px/26px "Work Sans", system-ui, sans-serif;
  overflow-wrap: break-word;
}

.top, main, footer {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 var(--margin);
}

h1, h2 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  color: var(--title);
  letter-spacing: -0.02em;
  margin: 0;
}

h1 { font-size: 40px; line-height: 46px; margin-bottom: 16px; }
h2 { font-size: 24px; line-height: 31px; margin: 40px 0 16px; }
h3 { font: 600 19px/26px "Work Sans", system-ui, sans-serif; color: var(--title); margin: 0 0 4px; }

@media (min-width: 600px) {
  h1 { font-size: 56px; line-height: 62px; }
}

p { margin: 0 0 12px; }
a { color: var(--link); text-underline-offset: 3px; }
strong { color: var(--title); font-weight: 600; }

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

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  margin: 16px 0;
  color: var(--title);
  text-decoration: none;
  font: 600 24px/1 "Fraunces", Georgia, serif;
  letter-spacing: -0.02em;
}

.brand svg { width: 36px; height: 36px; border-radius: 10px; flex: none; }

.hero { padding: 32px 0 8px; }

.chip {
  display: inline-block;
  margin-bottom: 20px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--mark);
  color: var(--mark-text);
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
}

.lead { font-size: 19px; line-height: 29px; }

.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; }

.steps li {
  counter-increment: step;
  position: relative;
  padding: 0 0 20px 52px;
}

.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -4px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--title);
  font: 600 17px/34px "Fraunces", Georgia, serif;
  text-align: center;
}

.card {
  margin-top: 24px;
  padding: 4px 20px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
}

.card h2 { margin-top: 16px; margin-bottom: 8px; }

footer {
  margin-top: 48px;
  padding-top: 20px;
  padding-bottom: 32px;
  border-top: 1px solid var(--border);
  color: var(--soft);
  font-size: 15px;
  line-height: 22px;
}

footer p { margin-bottom: 4px; }

/* The contact link is the one tap target in the footer. */
footer a { display: inline-block; padding: 13px 0; }