/* big small apps site styles. Plain CSS, system fonts, no external requests. Palette: brand/BRAND.md.
   Brand blue #1595c8 is too light for text on cream (3.1:1), so links and buttons use a deeper blue. */
:root{
  --bg:#f6f5f1;
  --panel:#ffffff;
  --text:#231f20;
  --dim:#5b5f6b;
  --brand:#1595c8;
  --accent:#0e6f98;
  --accent-ink:#ffffff;
  --line:#d7d9e3;
  --shadow:0 1px 2px rgba(35,31,32,0.05), 0 8px 24px rgba(35,31,32,0.06);
  color-scheme:light dark;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#15171a;
    --panel:#1e2125;
    --text:#ffffff;
    --dim:#a3a8b5;
    --accent:#65e5ff;
    --accent-ink:#231f20;
    --line:rgba(215,217,227,0.14);
    --shadow:0 1px 2px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.25);
  }
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font:16px/1.6 "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  min-height:100vh; display:flex; flex-direction:column;
}
a{ color:var(--accent); text-underline-offset:0.15em; }
a:focus-visible, .btn:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; }
img{ max-width:100%; height:auto; }

.skip{ position:absolute; left:-999px; top:0; background:var(--panel); padding:0.5rem 1rem; z-index:1; }
.skip:focus{ left:16px; top:8px; }

.wrap{ width:100%; max-width:60rem; margin:0 auto; padding:0 16px; }

header.site .wrap{ display:flex; align-items:center; justify-content:space-between; gap:1rem; height:4.5rem; }
.brand{ display:block; line-height:0; }
.brand img{ height:36px; width:auto; display:block; }
nav.site{ display:flex; gap:1.25rem; font-size:0.95rem; }
nav.site a{ color:var(--dim); text-decoration:none; }
nav.site a:hover, nav.site a[aria-current="page"]{ color:var(--text); }

main{ flex:1; }
.hero{ padding:3.5rem 0 2.5rem; }
.hero h1{ font-size:clamp(2rem, 6vw, 3.1rem); line-height:1.1; letter-spacing:-0.02em; margin:0 0 1rem; font-weight:600; }
.hero h1 .small{ font-weight:400; color:var(--brand); font-size:0.7em; }
.hero p{ font-size:1.15rem; color:var(--dim); max-width:38rem; margin:0; }

h2.section{ font-size:0.85rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--dim); margin:1rem 0; font-weight:600; }

.apps{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 24rem), 1fr)); gap:1rem; padding-bottom:4rem; }
.card{
  background:var(--panel); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow);
  padding:1.25rem; display:flex; gap:1rem; align-items:flex-start;
}
.card > img{ width:72px; height:72px; flex:none; }
.card h3{ margin:0 0 0.25rem; font-size:1.2rem; }
.card h3 a{ color:var(--text); text-decoration:none; }
.card h3 a:hover{ text-decoration:underline; }
.card p{ margin:0 0 0.9rem; color:var(--dim); font-size:0.95rem; }
.links{ display:flex; flex-wrap:wrap; gap:0.5rem 1rem; align-items:center; font-size:0.95rem; }
.btn{
  display:inline-block; background:var(--accent); color:var(--accent-ink); text-decoration:none;
  font-weight:600; padding:0.5rem 1rem; border-radius:999px;
}
.btn:hover{ filter:brightness(1.08); }
.badge{ display:inline-block; border:1px solid var(--line); color:var(--dim); border-radius:999px; padding:0.2rem 0.7rem; font-size:0.85rem; }

/* App landing page */
.app-hero{ display:flex; gap:1.5rem; align-items:center; padding:3rem 0 2rem; flex-wrap:wrap; }
.app-hero > img{ width:112px; height:112px; flex:none; }
.app-hero h1{ font-size:clamp(2rem, 6vw, 2.8rem); line-height:1.1; letter-spacing:-0.02em; margin:0 0 0.4rem; font-weight:600; }
.app-hero p{ margin:0 0 1rem; color:var(--dim); font-size:1.1rem; max-width:34rem; }
.features{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap:1rem 2rem; padding:1rem 0 2rem; }
.features h3{ margin:0 0 0.2rem; font-size:1.05rem; }
.features p{ margin:0; color:var(--dim); font-size:0.95rem; }
/* Screenshots: each picture carries its own background; light and dark versions follow the viewer's theme.
   Shown at its own size (the width/height attributes) or smaller, centred, with the caption underneath. */
.shots{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap:2rem 1.5rem; padding:0 0 2rem; }
.shots figure{ margin:0; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:0.6rem; }
.shots figure.wide{ grid-column:1 / -1; }
.shots picture{ display:contents; }
.shots img{ display:block; max-width:100%; height:auto; border-radius:12px; border:1px solid var(--line); box-shadow:var(--shadow); }
.shots figcaption{ font-size:0.95rem; text-align:center; max-width:36rem; }
.note{ color:var(--dim); font-size:0.95rem; padding-bottom:4rem; }

.prose{ max-width:42rem; padding:3rem 0 4rem; }
.prose h1{ font-size:clamp(1.7rem, 5vw, 2.2rem); letter-spacing:-0.02em; line-height:1.15; margin:0 0 0.3rem; font-weight:600; }
.prose h2{ font-size:1.1rem; margin:2rem 0 0.4rem; }
.prose ul{ padding-left:1.2rem; }
.dim{ color:var(--dim); }
.lede{ font-size:1.15rem; color:var(--dim); }

/* The two contact options on /support and /accessibility */
.contact{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap:0.75rem; margin:1.25rem 0 0.5rem; }
.contact .option{ display:block; background:var(--panel); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow);
  padding:1rem 1.1rem; text-decoration:none; color:var(--text); }
.contact .option:hover{ border-color:var(--accent); }
.contact .option:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.contact strong{ display:block; color:var(--accent); font-size:1.05rem; }
.contact span{ color:var(--dim); font-size:0.95rem; }
.email{ font-size:1.25rem; font-weight:600; }

footer.site{ border-top:1px solid var(--line); color:var(--dim); font-size:0.9rem; }
footer.site .wrap{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:0.5rem 1.5rem; padding-top:1.25rem; padding-bottom:1.5rem; }
footer.site nav{ display:flex; gap:1.25rem; }
footer.site a{ color:var(--dim); }

@media (max-width: 30rem){
  .brand img{ height:28px; }
  nav.site{ gap:0.9rem; }
  .hero{ padding:2.5rem 0 2rem; }
  .app-hero > img{ width:84px; height:84px; }
}

/* "What each app uses" table on /privacy. Under 40rem each row becomes a card with labels, so nothing scrolls sideways. */
.uses table{ width:100%; border-collapse:collapse; font-size:0.95rem; margin:0.5rem 0 1rem; }
.uses caption{ text-align:left; font-weight:600; font-size:1.05rem; padding-bottom:0.5rem; }
.uses th, .uses td{ text-align:left; vertical-align:top; padding:0.6rem 0.75rem 0.6rem 0; border-bottom:1px solid var(--line); }
.uses thead th{ color:var(--dim); font-weight:600; font-size:0.85rem; }
.uses tbody th{ font-weight:600; }
@media (max-width: 40rem){
  .uses thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .uses tr{ display:block; border-bottom:1px solid var(--line); padding:0.6rem 0; }
  .uses th, .uses td{ display:block; border:0; padding:0.15rem 0; }
  .uses td::before{ content:attr(data-label) ": "; color:var(--dim); font-weight:600; }
}

/* Per-app blocks on /accessibility */
.per-app{ background:var(--panel); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); padding:1rem 1.25rem; margin:1rem 0; }
.per-app h3{ margin:0 0 0.5rem; font-size:1.1rem; }
.per-app h3 a{ color:var(--text); }
.per-app dl{ margin:0; display:grid; grid-template-columns:9.5rem 1fr; gap:0.5rem 1rem; font-size:0.95rem; }
.per-app dt{ font-weight:600; color:var(--dim); }
.per-app dd{ margin:0; }
@media (max-width: 30rem){ .per-app dl{ grid-template-columns:1fr; gap:0.1rem; } .per-app dd{ margin-bottom:0.5rem; } }