/* Scalezu — site styles
   Sage, secondary text and mint are lifted from WellformStyle in the app's
   ContentView.swift, light and dark, so the site and the app are the same
   object. The app sets its type in the system font, so the site does too.
   Light values first, dark swapped under the media query. */

:root {
  --page:   #F4F5F1;   /* the page */
  --sheet:  #FFFFFF;   /* cards */
  --ink:    #1C2420;   /* primary text */
  --ink2:   #3D4A45;   /* secondary text: WellformStyle.secondaryText */
  --muted:  #77827C;   /* tertiary text */
  --line:   #DCE0D8;   /* hairlines */
  --sage:   #3B5933;   /* accent: WellformStyle.sage */
  --mint:   #B8CF9E;   /* WellformStyle.mint */
  --slab:   #3B5933;   /* filled blocks */
  --slab-ink: #FFFFFF;
  --shadow: 0 1px 0 rgba(28,36,32,.05), 0 10px 30px -18px rgba(28,36,32,.40);
  --maxw:   1080px;
  --body:   -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, "Segoe UI", sans-serif;
  --mono:   ui-monospace, "SF Mono", Menlo, monospace;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page:   #0F1311;
    --sheet:  #191E1B;
    --ink:    #ECEFEA;
    --ink2:   #D1DED6;
    --muted:  #8D9891;
    --line:   #2D342F;
    --sage:   #BFDEB3;
    --mint:   #B8CF9E;
    --slab:   #BFDEB3;
    --slab-ink: #0F1A14;
    --shadow: 0 1px 0 rgba(0,0,0,.30), 0 10px 30px -18px rgba(0,0,0,.85);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --page:#0F1311; --sheet:#191E1B; --ink:#ECEFEA; --ink2:#D1DED6;
  --muted:#8D9891; --line:#2D342F; --sage:#BFDEB3; --mint:#B8CF9E;
  --slab:#BFDEB3; --slab-ink:#0F1A14;
  --shadow: 0 1px 0 rgba(0,0,0,.30), 0 10px 30px -18px rgba(0,0,0,.85);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
}
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }

/* ---------- masthead ---------- */

.masthead {
  border-bottom: 1px solid var(--line);
  background: var(--page);
  position: sticky; top: 0; z-index: 20;
}
.masthead .wrap {
  display: flex; align-items: center; gap: 16px;
  min-height: 66px; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: inherit; }
.brand img { width: 34px; height: 34px; border-radius: 8px; display: block; }
.brand b { font-family: var(--display); font-weight: 700; font-size: 21px; letter-spacing: -.01em; }
.tabs { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; }
.tabs a {
  font-size: 14.5px; font-weight: 500; text-decoration: none;
  color: var(--ink2); padding: 7px 14px; border-radius: 999px;
  border: 1px solid transparent;
}
.tabs a:hover { color: var(--ink); border-color: var(--line); }
.tabs a[aria-current="page"] {
  color: var(--ink); border-color: var(--line); background: var(--sheet);
}

/* ---------- type ---------- */

.eyebrow {
  font-size: 13px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--sage);
  margin: 0 0 10px;
}
h1 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(38px, 7vw, 62px); line-height: 1.05;
  letter-spacing: -.025em; margin: 0 0 16px;
}
h2 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(25px, 3.6vw, 34px); line-height: 1.15;
  letter-spacing: -.015em; margin: 0 0 14px;
}
h3 { font-size: 18px; font-weight: 650; margin: 0 0 6px; line-height: 1.3; }
p  { margin: 0 0 15px; }
.lede { font-size: clamp(18px, 2.2vw, 21px); color: var(--ink2); max-width: 62ch; }
a { color: var(--sage); text-underline-offset: 3px; }
.fine { font-size: 14px; color: var(--muted); }

section { padding: 58px 0; border-top: 1px solid var(--line); }
section:first-of-type { border-top: 0; }
.hero { padding-top: 52px; }
.hero-mark { width: 96px; height: 96px; border-radius: 22px; display: block; margin-bottom: 24px; box-shadow: var(--shadow); }

/* ---------- status ---------- */

.pill {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 46px; padding: 0 20px; margin-top: 10px;
  border-radius: 999px; border: 1px solid var(--line);
  background: var(--sheet); color: var(--ink2);
  font-size: 15px; font-weight: 600;
}
.pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sage); }

/* ---------- cards / grids ---------- */

.card {
  background: var(--sheet); border: 1px solid var(--line);
  border-radius: 16px; padding: 20px; box-shadow: var(--shadow);
}
.card p { color: var(--ink2); margin: 0; font-size: 15.5px; }
.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* facts strip */
.facts { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.fact { border-left: 3px solid var(--mint); padding: 2px 0 2px 13px; }
.fact b { font-family: var(--display); font-weight: 700; font-size: 22px; display: block; line-height: 1.2; }
.fact span { font-size: 14px; color: var(--ink2); }

/* ---------- FAQ ---------- */

.faq { max-width: 78ch; }
.faq h3 { margin-top: 30px; color: var(--ink2); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.faq details {
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--sheet); margin-bottom: 10px; overflow: hidden;
}
.faq summary {
  cursor: pointer; list-style: none; padding: 15px 46px 15px 17px;
  font-weight: 650; font-size: 16.5px; position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 18px; top: 50%;
  transform: translateY(-50%); font-size: 20px; color: var(--sage); line-height: 1;
}
.faq details[open] summary::after { content: "\2013"; }
.faq details > div { padding: 0 17px 16px; color: var(--ink2); }
.faq details > div > p:last-child { margin-bottom: 0; }

/* ---------- prose (privacy / support body) ---------- */

.prose { max-width: 74ch; }
.prose h2 { font-size: clamp(21px, 3vw, 25px); margin-top: 38px; }
.prose h2:first-child { margin-top: 0; }
.prose ul { padding-left: 20px; margin: 0 0 16px; }
.prose li { margin-bottom: 7px; }
.callout {
  border-left: 3px solid var(--sage); background: var(--sheet);
  border-radius: 0 12px 12px 0; padding: 15px 17px; margin: 0 0 18px;
}
.callout p:last-child { margin-bottom: 0; }
.table-wrap { overflow-x: auto; margin: 0 0 16px; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { text-align: left; vertical-align: top; padding: 10px 8px; border-bottom: 1px solid var(--line); }
th { color: var(--muted); font-weight: 600; }

/* ---------- footer ---------- */

footer {
  border-top: 1px solid var(--line); padding: 30px 0 46px;
  color: var(--muted); font-size: 14px;
}
footer .wrap { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
footer a { color: var(--ink2); text-decoration: none; }
footer a:hover { color: var(--ink); text-decoration: underline; }
footer .spacer { margin-left: auto; }

@media (max-width: 560px) {
  .masthead .wrap { min-height: 0; padding-top: 12px; padding-bottom: 12px; }
  .tabs { margin-left: 0; width: 100%; }
  section { padding: 42px 0; }
}