/* FamTap — public site.
   Colours and type are the canvas tokens, extracted to
   design/tokens/canvas-root.css and mirrored in
   ios/FamTap/DesignSystem/Tokens.swift. Do not introduce new values here;
   this page should look like the product. */

/* Self-hosted, so the sites make no third-party requests at all. Both files
   are the upstream Google Fonts releases, losslessly repackaged ttf -> woff2
   and otherwise unmodified — no subsetting. Source Sans 3 carries a Reserved
   Font Name ("Source"), and the OFL forbids a Modified Version keeping the
   reserved name; shipping the files unmodified sidesteps that entirely.
   Licences: fonts/Newsreader-OFL.txt and fonts/SourceSans3-OFL.txt. */

@font-face {
  font-family: "Newsreader";
  src: url("/fonts/Newsreader.woff2") format("woff2");
  font-weight: 200 800;      /* wght axis, per the font's fvar table */
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans 3";
  src: url("/fonts/SourceSans3.woff2") format("woff2");
  /* The wght axis DEFAULTS to 200 in this file, so the range must be declared
     or an unstyled fallback renders ExtraLight. */
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-heading: "Newsreader", Georgia, serif;
  --font-body: "Source Sans 3", "Helvetica Neue", system-ui, sans-serif;

  --pg: #EFE6D6;
  --card: #FFFDF9;
  --card-2: #F6EFE2;
  --card-3: #EDE2CE;
  --line: #E2D5BC;
  --line-2: #C9B694;

  --ink: #201E1D;
  --ink-2: #5F564A;
  --ink-3: #7A6E5E;

  --pri: #B85C22;
  --pri-tint: #FBEADC;
  --pri-deep: #8A4116;
}

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

body {
  margin: 0;
  font-optical-sizing: auto;
  background: var(--pg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.bar { padding: 28px 24px 8px; max-width: 780px; margin: 0 auto; }
.lockup { display: inline-block; }
.lockup img { display: block; height: 44px; width: auto; }

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

h1 {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: -0.018em;
  font-size: clamp(30px, 5vw, 42px);
  line-height: 1.14;
  margin: 24px 0 14px;
  text-wrap: balance;
}
h2 {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: -0.018em;
  font-size: 24px;
  margin: 0 0 12px;
}
h3 {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 22px 0 6px;
}

.lede { font-size: 19px; color: var(--ink-2); max-width: 62ch; margin: 0 0 20px; }
p { max-width: 68ch; }
ul { max-width: 68ch; padding-left: 20px; }
li { margin-bottom: 6px; }

a { color: var(--pri-deep); text-underline-offset: 2px; }
a:focus-visible, .lockup:focus-visible {
  outline: 2px solid var(--pri);
  outline-offset: 3px;
  border-radius: 4px;
}

.panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 26px 28px;
  margin: 22px 0;
}

/* The three carrier-required sentences. Tinted so a reviewer finds them at a
   glance, but not a terracotta fill — that is reserved for actions. */
.required {
  background: var(--card-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  margin: 14px 0 0;
  font-size: 16px;
}

.sample {
  background: var(--card-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 14px;
  margin: 10px 0 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13.5px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-x: auto;
  color: var(--ink-2);
}

.disclaimer {
  background: var(--pri-tint);
  border: 1px solid var(--line);
  border-left: 6px solid var(--pri);
  border-radius: 18px;
  padding: 16px 18px;
  color: var(--ink-2);
}

/* Unapproved copy is visibly unapproved. This rule is deliberately loud, and
   removing it is part of shipping — see web/LEGAL-REVIEW.md. */
[data-placeholder] {
  outline: 2px dashed var(--pri);
  outline-offset: 3px;
  background: var(--pri-tint);
}
p[data-placeholder]::before,
pre[data-placeholder]::before,
div[data-placeholder]::before {
  content: "⚠ DRAFT COPY — NOT LEGALLY REVIEWED. ";
  font-weight: 600;
  color: var(--pri-deep);
  font-size: 13px;
  letter-spacing: 0.02em;
}
/* Inline placeholders sit mid-sentence; a full banner there shreds the
   paragraph. Still outlined and tinted, so still unmissable. */
span[data-placeholder], strong[data-placeholder] {
  outline-offset: 1px;
  border-radius: 3px;
  padding: 0 3px;
}
span[data-placeholder]::before, strong[data-placeholder]::before {
  content: "⚠ ";
  color: var(--pri-deep);
  font-weight: 600;
}

footer {
  border-top: 1px solid var(--line);
  max-width: 780px;
  margin: 0 auto;
  padding: 22px 24px 56px;
  color: var(--ink-3);
}
footer nav { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 10px; }
.small { font-size: 14px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* --- Long-form documents (privacy, terms) ------------------------------- */

.doc { padding-bottom: 40px; }
.doc h2 {
  font-size: 21px;
  margin: 30px 0 8px;
  padding-top: 4px;
  border-top: 1px solid var(--line);
}
.doc h2:first-of-type { border-top: 0; }
.meta { font-size: 14px; color: var(--ink-3); margin-top: -8px; }
.back { margin-top: 34px; }
.note { display: block; font-size: 15px; color: var(--ink-3); margin-top: 6px; }

table.data {
  border-collapse: collapse;
  width: 100%;
  max-width: 68ch;
  margin: 10px 0 4px;
  font-size: 16px;
}
table.data th, table.data td {
  text-align: left;
  vertical-align: top;
  padding: 9px 12px 9px 0;
  border-bottom: 1px solid var(--line);
}
table.data th { color: var(--ink-3); font-weight: 600; font-size: 14px; }
table.data td:first-child { white-space: nowrap; padding-right: 20px; font-weight: 600; }

@media (max-width: 560px) {
  table.data td:first-child { white-space: normal; }
}