/* AppDad site styles. Plain CSS, system fonts, no external requests. */
:root{
  --bg:#f6f5f1;
  --panel:#ffffff;
  --text:#15181e;
  --dim:#5a6170;
  --accent:#d0661b;
  --accent-ink:#ffffff;
  --line:rgba(20,24,30,0.10);
  --shadow:0 1px 2px rgba(20,24,30,0.06), 0 8px 24px rgba(20,24,30,0.06);
  color-scheme:light dark;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b0e13;
    --panel:#141922;
    --text:#f3f5f8;
    --dim:#98a1b0;
    --accent:#ff9a4d;
    --accent-ink:#1a0f05;
    --line:rgba(255,255,255,0.09);
    --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 system-ui, -apple-system, "Segoe UI", 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; }

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

header.site{ border-bottom:1px solid var(--line); }
header.site .wrap{ display:flex; align-items:center; justify-content:space-between; gap:1rem; height:4rem; }
.brand{ display:flex; align-items:center; gap:0.6rem; color:var(--text); text-decoration:none; font-weight:700; font-size:1.15rem; letter-spacing:-0.01em; }
.brand img{ width:32px; height:32px; 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:4rem 0 2.5rem; }
.hero h1{ font-size:clamp(2rem, 6vw, 3rem); line-height:1.1; letter-spacing:-0.02em; margin:0 0 1rem; }
.hero p{ font-size:1.15rem; color:var(--dim); max-width:36rem; margin:0; }

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

.apps{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap:1rem; padding-bottom:4rem; }
.card{
  background:var(--panel); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow);
  padding:1.25rem; display:flex; gap:1rem; align-items:flex-start;
}
.card img{ width:64px; height:64px; border-radius:14px; flex:none; }
.card h3{ margin:0 0 0.25rem; font-size:1.15rem; }
.card p{ margin:0 0 0.9rem; color:var(--dim); font-size:0.95rem; }
.card .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.45rem 0.9rem; border-radius:999px;
}
.btn:hover{ filter:brightness(1.05); }

.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; }
.prose h2{ font-size:1.1rem; margin:2rem 0 0.4rem; }
.prose ul{ padding-left:1.2rem; }
.dim{ color:var(--dim); }
.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){
  nav.site{ gap:0.9rem; }
  .hero{ padding:2.5rem 0 2rem; }
}