/* Shared by every page on fourfold-spintech.web.app (docs/AUTHORITY.md §87.1).

   Light, always: the house rule for generated pages, and the right register
   for a policy read by somebody already suspicious and a reviewer in a hurry.
   The app's identity comes through the palette and the mark, not the ground.
   Four tokens, from docs/design/tokens.json:
     --paper   colors.surface   #FFFFFF
     --ink     colors.onSurface #241B4D  (15.7 : 1 on paper)
     --accent  colors.primary   #0B6657  (6.9 : 1 on paper: no darkening needed)
     --quiet   the ink eased 30% toward the paper, #665F82 (6.0 : 1)
   Type is the system stack. Nothing on this site is fetched from a third
   party. */
:root {
  color-scheme: only light; /* "only": Chrome's auto-darkening skips the page too */
  --paper: #FFFFFF;
  --ink: #241B4D;
  --accent: #0B6657;
  --quiet: #665F82;
  /* --ink at 16 % and --accent at 7 % over --paper, precomputed: color-mix()
     is missing from WebViews before Chrome 111, and a custom property cannot
     carry a fallback (it is invalid only at computed-value time). */
  --rule: #DCDBE3;
  --tint: #EEF4F3;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  padding: 40px 22px 72px;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
main, footer { max-width: 640px; margin: 0 auto; }
h1 { font-size: 27px; letter-spacing: .3px; margin: 0 0 4px; }
h2 {
  font-size: 17px;
  margin: 34px 0 8px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
}
p, li { margin: 0 0 11px; }
ul, ol { padding-left: 20px; }
a { color: var(--accent); }
.updated { color: var(--quiet); font-size: 14px; margin: 0 0 30px; }
table { border-collapse: collapse; width: 100%; margin: 6px 0 14px; }
th, td {
  text-align: left;
  vertical-align: top;
  padding: 8px 10px 8px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 15px;
}
th { width: 38%; font-weight: 600; }
.note {
  background: var(--tint);
  border-left: 3px solid var(--accent);
  padding: 12px 14px;
  margin: 16px 0;
  font-size: 15px;
}
footer { margin-top: 42px; color: var(--quiet); font-size: 14px; }

/* Landing page only. */
.landing { text-align: center; padding-top: 24px; }
.landing .mark { width: 96px; height: 96px; border-radius: 22px; }
.landing h1 { font-size: 34px; margin-top: 14px; }
.landing .play { display: inline-block; background: var(--accent); color: var(--paper); font-weight: 700; text-decoration: none; padding: 14px 26px; border-radius: 999px; min-height: 48px; }
.landing .play:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.landing .note { color: var(--quiet); margin-top: 10px; }
.landing .lede { font-size: 19px; color: var(--quiet); margin: 0 auto 26px; max-width: 30ch; }
.play {
  display: inline-block;
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--paper);
  font-weight: 600;
  text-decoration: none;
}
.shot {
  display: block;
  width: min(270px, 80vw);
  height: auto;
  margin: 36px auto 0;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(36, 27, 77, 0.22); /* --ink at 22 % */
}
.landing + footer { text-align: center; }