/* Shared styling for the OMapp static pages (static.tjasadorelay-om.app).
   Brand fonts/colors borrowed from the mobile app: BeausiteFit (headings),
   Inter (body), teal #46AAB9. Self-contained, no build step. */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

@font-face {
  font-family: 'BeausiteFit';
  src: url('/fonts/BeausiteFitRegular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'BeausiteFit';
  src: url('/fonts/BeausiteFitMedium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'BeausiteFit';
  src: url('/fonts/BeausiteFitBold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --teal: #46AAB9;
  --teal-light: #DCFAFF;
  --ink: #222222;       /* neutral-100 */
  --body: #4C4C4C;      /* neutral-90 */
  --muted: #8F8F8F;     /* neutral-70 */
  --line: #EDEDED;      /* neutral-30 */
  --bg: #FFFFFF;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.65;
  font-size: 16px;
}
.wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 40px 20px 80px;
}
header {
  border-bottom: 1px solid var(--line);
  padding-bottom: 20px;
  margin-bottom: 28px;
}
.brand { display: inline-block; line-height: 0; }
.logo { height: 30px; width: auto; display: block; }

h1 {
  font-family: 'BeausiteFit', 'Inter', sans-serif;
  font-weight: 500;
  font-size: 28px;
  line-height: 1.2;
  color: var(--ink);
  margin: 18px 0 6px;
}
h2 {
  font-family: 'BeausiteFit', 'Inter', sans-serif;
  font-weight: 500;
  font-size: 19px;
  color: var(--ink);
  margin: 34px 0 8px;
}
h3 {
  font-family: 'BeausiteFit', 'Inter', sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: var(--ink);
  margin: 20px 0 6px;
}
.updated { color: var(--muted); font-size: 14px; margin: 0; }
p, li { color: var(--body); }
strong { color: var(--ink); font-weight: 600; }
a { color: var(--teal); text-decoration: none; }
a:hover { text-decoration: underline; }
ul { padding-left: 20px; }
li { margin: 4px 0; }
footer {
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
}
footer a { color: var(--muted); }