/* Shared by the pages around the landing page (example dashboard, terms, logo options).
   Same tokens as landing.html, which still carries its own copy inline. */
:root {
  --teal: #0B6E78; --teal-dark: #085660; --ink: #082A2E; --band: #EFF7F7; --line: #DDE9EA;
  --star: #FFC530; --muted: #46666A; --shell: 1200px;
  --display: "Bricolage Grotesque", system-ui, sans-serif; --text: "Instrument Sans", system-ui, sans-serif;
  --shadow: 0 18px 40px -18px rgb(8 42 46 / .28);
}
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.6 var(--text); color: var(--ink); background: #fff; }
h1, h2, h3 { font-family: var(--display); line-height: 1.1; margin: 0; letter-spacing: -.02em; font-weight: 800; }
h1 { font-size: clamp(2rem, 4vw, 3rem); }
h2 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); }
h3 { font-size: 1.1rem; font-weight: 600; letter-spacing: -.01em; }
p { margin: 0; }
a { color: inherit; }
.shell { max-width: var(--shell); margin: 0 auto; padding: 0 24px; }
.muted { color: var(--muted); }
:focus-visible { outline: 3px solid var(--star); outline-offset: 3px; }

.bar { background: var(--teal); color: #fff; position: sticky; top: 0; z-index: 20; }
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 76px; }
.logo { display: flex; align-items: center; gap: 8px; font: 800 1.5rem var(--display); letter-spacing: -.03em; text-decoration: none; }
.logo svg { width: 36px; height: 36px; }
.top a.back { font-weight: 700; text-decoration: none; border: 2px solid #fff; border-radius: 6px; padding: 7px 18px; white-space: nowrap; }
@media (hover: hover) { .top a.back:hover { background: #fff; color: var(--teal); } }

.btn { display: inline-flex; align-items: center; justify-content: center; width: 275px; max-width: 100%; height: 50px; border-radius: 6px;
  font: 700 15px var(--text); text-decoration: none; background: var(--teal); color: #fff; border: 2px solid var(--teal); }
@media (hover: hover) { .btn:hover { background: var(--teal-dark); border-color: var(--teal-dark); } }

.card { background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); padding: 24px; }
.stars { display: inline-flex; gap: 2px; vertical-align: middle; }
.stars svg { width: 18px; height: 18px; fill: var(--star); }
.stars svg.off { fill: var(--line); }

footer { background: var(--teal); color: #fff; padding: 28px 0; margin-top: 96px; font-size: .92rem; }
footer .shell { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
footer a { text-decoration: none; }
@media (hover: hover) { footer a:hover { color: var(--star); } }