@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,400;0,14..32,500;0,14..32,600;0,14..32,700;0,14..32,800;1,14..32,400&display=swap');

/* Bair Development — standard app page.
   One stylesheet for the simple app sites (QuickNotes Books, Journal, Teacher,
   Supervisors, Lifting, Time Without Incident, WardTrack).
   Replaces the separate styles.css that each of those folders used to carry.
   Load assets/brand.css after this file. */

:root {
  --bg: #2E3E31;
  --surface: #364b3c;
  --ink: #F7EBDF;
  --muted: #D5CBB3;
  --accent: #D5A873;
  --accent-ink: #2B200F;
  --border: rgba(255, 255, 255, .09);
  --shadow: 0 10px 30px rgba(0, 0, 0, .25);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  color: var(--ink);
  font: 16px/1.6 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
html { background: var(--bg); }
body {
  min-height: 100vh;
  background: radial-gradient(1200px 800px at 20% -10%, #3b5244 0%, var(--bg) 55%), var(--bg);
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }

.wrap { max-width: 1000px; margin: 0 auto; padding: 24px; }

/* App header */
header {
  padding: 4px 0 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.brand { display: flex; align-items: center; gap: 14px; }
.brand strong { font-size: 18px; line-height: 1.2; }
.logo { width: 52px; height: 52px; flex: none; display: block; }
.kicker { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.topnav { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.topnav a { color: var(--muted); font-weight: 500; }
.topnav a:hover { color: var(--accent); text-decoration: none; }

/* Hero */
.hero {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 28px;
  align-items: center;
  padding: 22px 0 8px;
}
.hero > :only-child { grid-column: 1 / -1; max-width: 760px; }
.hero h1 {
  font-size: clamp(28px, 4.2vw, 38px);
  line-height: 1.12;
  letter-spacing: -.02em;
  font-weight: 800;
  margin: 12px 0 14px;
  text-wrap: balance;
}
.lede { color: var(--muted); margin: 0 0 18px; font-size: 17px; }
.tag {
  display: inline-block;
  padding: 4px 11px;
  border: 1px solid var(--app, var(--accent));
  border-radius: 999px;
  font-size: 12px;
  color: var(--muted);
}

.cta { display: flex; gap: 12px; flex-wrap: wrap; margin: 10px 0 0; }
.btn {
  display: inline-flex;
  align-items: center;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 600;
  border: 1px solid transparent;
  transition: transform .06s ease, box-shadow .2s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); box-shadow: 0 0 0 3px rgba(213, 168, 115, .35); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(213, 168, 115, .5); }
.btn.secondary {
  background: rgba(255, 255, 255, .03);
  color: var(--ink);
  border-color: rgba(247, 235, 223, .2);
}

/* Cards & grids */
.card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .01));
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 20px;
  box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover { transform: translateY(-3px); border-color: rgba(255, 255, 255, .16); }
.card h3 { margin: 0 0 8px; font-size: 18px; }
.card p { margin: 0 0 10px; color: var(--muted); }
.card p:last-child { margin-bottom: 0; }

.grid { display: grid; gap: 16px; margin-top: 24px; }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.list { margin: 0; padding-left: 18px; color: var(--muted); }
.list li { margin: 3px 0; }
.list li::marker { color: var(--accent); }

/* Screenshots */
.screenshots { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.screenshots .shot {
  flex: 1 1 45%;
  max-width: 48%;
  width: 100%;
  border-radius: 14px;
  display: block;
  border: 1px solid var(--border);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .3);
}
@media (max-width: 700px) {
  .screenshots .shot { flex-basis: 100%; max-width: 100%; }
}

/* Video embed */
.video-wrapper { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 10px; margin-top: 12px; }
.video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 10px; }

/* Comparison table (Journal) */
.compare-wrap { margin-top: 24px; overflow-x: auto; }
.compare-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.compare-table th, .compare-table td {
  padding: 13px 18px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  font-size: 15px;
}
.compare-table thead th {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
  background: rgba(0, 0, 0, .18);
}
.compare-table thead th.col-us { color: var(--accent); }
.compare-table tbody tr:last-child td { border-bottom: none; }
.compare-table tbody tr:hover td { background: rgba(213, 168, 115, .06); }
.compare-table .col-feature { color: var(--muted); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.compare-table .col-them { color: rgba(247, 235, 223, .55); }
.compare-table .col-us { font-weight: 600; color: #A8DDB0; }
.compare-icon { margin-right: 6px; }

/* Blog post prose (Journal) */
.prose { max-width: 680px; margin: 0 auto; }
.prose h2 { font-size: 22px; margin: 32px 0 10px; }
.prose p { color: var(--muted); margin: 0 0 16px; line-height: 1.75; }
.prose blockquote {
  border-left: 3px solid var(--accent);
  margin: 24px 0;
  padding: 10px 20px;
  background: var(--surface);
  border-radius: 0 12px 12px 0;
  color: var(--ink);
  font-style: italic;
}
.post-meta { color: var(--muted); font-size: 13px; margin-bottom: 28px; }

/* WardTrack: hero with cards below, and the "why" comparison */
.hero:has(.hero-cards) { display: flex; flex-direction: column; align-items: stretch; gap: 20px; }
.hero-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.why-section { margin-top: 48px; }
.why-header { text-align: center; margin-bottom: 24px; }
.why-header h2 { font-size: 28px; margin: 10px 0 8px; }
.compare-grid { margin-top: 16px; }
.compare-card { display: flex; flex-direction: column; gap: 8px; }
.compare-label { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.compare-label.accent-label { color: var(--accent); }
.compare-card h3 { margin: 0 0 4px; }
.compare-list { margin: 0; padding-left: 18px; color: var(--muted); display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
.compare-list li { line-height: 1.5; }
.old-way .compare-list li::marker { color: #C97B6B; }
.new-way .compare-list li::marker { color: var(--accent); }
.callout-card { margin-top: 16px; border-color: rgba(213, 168, 115, .3); background: linear-gradient(135deg, rgba(213, 168, 115, .09), rgba(213, 168, 115, .03)); }
.callout-inner { display: flex; align-items: flex-start; gap: 24px; }
.callout-stat { font-size: 42px; font-weight: 800; color: var(--accent); white-space: nowrap; line-height: 1; padding-top: 4px; }
.callout-text strong { font-size: 17px; display: block; margin-bottom: 6px; }
.callout-text p { margin: 0; color: var(--muted); font-size: 15px; }

/* Responsive */
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; }
  .hero-cards { grid-template-columns: 1fr; }
  .grid.cols-3, .grid.cols-2 { grid-template-columns: 1fr; }
  header { flex-direction: column; align-items: flex-start; gap: 10px; }
}
@media (max-width: 600px) {
  .wrap { padding: 18px 16px; }
  .callout-inner { flex-direction: column; gap: 12px; }
  .callout-stat { font-size: 36px; }
}