/* ==========================================================================
   BoardDrive marketing site
   Shared by index.html, privacy.html, terms.html.

   The palette, type, and spacing below are lifted from the app's own
   globals.css ("Civic Clarity") rather than invented for marketing. That is
   deliberate: the hero demo is a reproduction of the real agenda screen, and
   a district that signs up should recognise the product immediately. When
   the app's tokens change, these should change with them.

   Fonts are the app's actual vendored variable faces — the same two files
   src/app/layout.tsx loads — so the demo's type is identical, not merely
   similar.
   ========================================================================== */

@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('fonts/manrope-variable.woff2') format('woff2-variations');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* ── Tokens (mirrored from src/app/globals.css) ────────────────────────── */

:root {
  --primary-950: #001030;
  --primary-900: #1a365d;
  --primary-800: #20416e;
  --primary-700: #2d4a7a;
  --primary-600: #3d5f99;
  --primary-500: #5478b8;
  --primary-400: #7b9fd4;
  --primary-300: #a8c2e8;
  --primary-200: #d0dff5;
  --primary-100: #e8f0fb;
  --primary-50:  #f4f7fd;

  --accent-600: #0a6c44;
  --accent-500: #0d8050;
  --accent-400: #35a875;
  --accent-100: #d1f5e4;
  --accent-50:  #ecfdf5;

  --surface: #f7fafc;
  --surface-container-low: #f1f4f6;
  --surface-container-highest: #e0e3e5;
  --surface-warm: #edf0f2;
  --card: #ffffff;
  --border: #c4c7ca;
  --border-light: #d8dadd;

  --text: #181c1e;
  --text-reading: #4b515a;
  --text-secondary: #1e2d3d;
  --text-muted: #3d4f61;
  --text-light: #5c6f82;

  --private: #9f1239;
  --private-bg: #ffe4e6;

  --font-display: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Navy-tinted, never black — same rationale as the app. */
  --shadow-sm: 0 1px 2px rgba(0,32,69,.04), 0 1px 3px rgba(0,32,69,.06);
  --shadow-md: 0 2px 4px rgba(0,32,69,.04), 0 4px 12px rgba(0,32,69,.08);
  --shadow-lg: 0 8px 24px rgba(0,32,69,.07), 0 2px 8px rgba(0,32,69,.04);
  --shadow-xl: 0 24px 60px rgba(0,32,69,.13), 0 6px 18px rgba(0,32,69,.07);

  --r-sm: 6px;
  --r: 10px;
  --r-lg: 16px;

  --wrap: 70rem;
  --nav-h: 3.75rem;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* The UA's `[hidden] { display: none }` loses to any class that sets display,
   so `.demo-row` and friends stayed on screen even with the attribute set —
   the demo gave away its own ending. Restore the attribute's authority. */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 1.5rem);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  color: var(--text-reading);
  background: var(--card);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.032em;
}

a { color: inherit; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--primary-900); color: #fff;
  padding: 0.75rem 1.25rem; border-radius: 0 0 var(--r) 0;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 2px solid var(--primary-600);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ── Buttons ───────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.6rem 1.15rem;
  border-radius: var(--r);
  font-family: var(--font-body);
  font-size: 0.9375rem; font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease,
              border-color .18s ease, color .18s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--primary-900);
  color: #fff;
  box-shadow: var(--shadow-md);
}
.btn-primary:hover { background: var(--primary-800); box-shadow: var(--shadow-lg); }

.btn-ghost {
  background: var(--card);
  color: var(--text-secondary);
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}
.btn-ghost:hover { border-color: var(--primary-600); color: var(--primary-900); }

.btn-lg { padding: 0.85rem 1.6rem; font-size: 1rem; }

/* ── Nav ───────────────────────────────────────────────────────────────── */

.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 1.75rem;
  background: rgba(255, 255, 255, .85);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border-light);
}

.nav-brand {
  display: inline-flex; align-items: center; gap: 0.55rem;
  text-decoration: none; color: var(--primary-900);
  font-family: var(--font-display); font-weight: 800;
  font-size: 1.0625rem; letter-spacing: -0.03em;
}
.nav-brand svg { width: 22px; height: 22px; flex-shrink: 0; }

.nav-links { display: flex; align-items: center; gap: 1.75rem; }
.nav-links a {
  text-decoration: none; color: var(--text-muted);
  font-size: 0.9375rem; font-weight: 500;
  transition: color .18s ease;
}
.nav-links a:hover { color: var(--primary-900); }
.nav-links .btn { font-weight: 600; }

/* ── Hero ──────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  background: var(--surface);
  padding: calc(var(--nav-h) + 3.25rem) 1.75rem 4rem;
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid var(--border-light);
}

/* Soft navy wash — the light-mode equivalent of the old cobalt bloom. */
.hero::before {
  content: '';
  position: absolute; z-index: -1;
  top: -40%; right: -12%;
  width: 68rem; height: 68rem;
  background: radial-gradient(circle, rgba(61,95,153,.16) 0%, rgba(61,95,153,.06) 40%, transparent 70%);
  pointer-events: none;
}
.hero::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(rgba(26,54,93,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26,54,93,.045) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(ellipse 100% 68% at 50% 0%, #000 25%, transparent 76%);
  -webkit-mask-image: radial-gradient(ellipse 100% 68% at 50% 0%, #000 25%, transparent 76%);
  pointer-events: none;
}

.hero-inner {
  max-width: var(--wrap); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 3.5rem; align-items: center;
}

.hero h1 {
  font-size: clamp(2.35rem, 4.2vw, 3.35rem);
  font-weight: 800;
  letter-spacing: -0.042em;
  line-height: 1.04;
  margin-bottom: 1.35rem;
  text-wrap: balance;
}
.hero h1 .accent { color: var(--primary-700); }

.hero-sub {
  font-size: 1.125rem;
  color: var(--text-reading);
  max-width: 34rem;
  line-height: 1.62;
  margin-bottom: 2rem;
}

.hero-actions { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }

/* ══════════════════════════════════════════════════════════════════════════
   Speed Run — a five-screen walkthrough of the real product.

   Sign in → dashboard → open a meeting → agenda editor → add an item → saved.
   Every value here is read from the app rather than approximated, so a
   district that signs up recognises what they were shown:

     login card             src/app/login/page.tsx
     dashboard date blocks  src/app/dashboard/dashboard-client.tsx
     editor tile + toolbar  meetings/[id]/edit/meeting-builder-client.tsx
     section card header    src/components/agenda-editor/agenda-editor.tsx
     add-item wizard        meetings/[id]/edit/add-item-wizard-modal.tsx
     sidebar palette        src/lib/nav-theme.ts

   Keep them in step when the app changes.
   ══════════════════════════════════════════════════════════════════════════ */

.demo { position: relative; }

.demo-frame {
  position: relative;
  background: var(--card);
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-xl);
}

/* Browser chrome */
.demo-bar {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.6rem 0.9rem;
  background: var(--surface-container-low);
  border-bottom: 1px solid var(--border-light);
}
.demo-dots { display: flex; gap: 0.34rem; }
.demo-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--surface-container-highest); }
.demo-url {
  font-size: 0.6875rem; color: var(--text-light);
  background: var(--card);
  border: 1px solid var(--border-light);
  border-radius: 100px;
  padding: 0.15rem 0.6rem;
  transition: opacity .18s ease;
}

/* ── Screen stack ──────────────────────────────────────────────────────────
   Fixed height, absolutely-stacked screens. The height is fixed on purpose:
   the five screens differ a lot in natural height, and letting the frame
   resize on each transition would make the whole hero jump.               */

.demo-stage { position: relative; height: 27rem; overflow: hidden; }

.screen {
  position: absolute; inset: 0;
  opacity: 0;
  transform: translateY(6px);
  /* Outgoing screens start leaving immediately; the incoming one arrives on
     a short delay. Without the offset a modal-over-screen handing off to a
     third screen puts three layers on top of each other mid-fade. */
  transition: opacity .26s ease, transform .26s ease;
  pointer-events: none;
  overflow: hidden;
  /* Each screen owns its stacking context. Without this, the z-index on the
     Draft|Ready pill labels escapes to the root and paints them on top of the
     wizard modal — visible wherever the modal overlaps a row. */
  isolation: isolate;
}
.screen.is-on { opacity: 1; transform: none; transition-delay: .08s; }

/* ── Screen 1 · Login ───────────────────────────────────────────────────── */

.lg-wrap {
  height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-warm);
  padding: 1rem;
}
.lg-card {
  width: 100%; max-width: 17rem;
  background: var(--card);
  border: 1px solid var(--border-light);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  padding: 1.5rem 1.4rem;
  text-align: center;
}
.lg-mark {
  width: 40px; height: 40px; margin: 0 auto 0.75rem;
  border-radius: 12px;
  background: var(--primary-900); color: #fff;
  display: grid; place-items: center;
}
.lg-mark svg { width: 22px; height: 22px; }
.lg-title {
  font-family: var(--font-display);
  font-size: 1rem; font-weight: 600; letter-spacing: -0.03em;
  color: var(--text);
}
.lg-sub { font-size: 0.75rem; color: var(--text-muted); margin: 0.3rem 0 1rem; line-height: 1.5; }
.lg-google {
  width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  background: #000; color: #fff;
  border: none; border-radius: 10px;
  padding: 0.6rem 1rem;
  font-family: var(--font-body); font-size: 0.75rem; font-weight: 500;
  transition: transform .12s ease, box-shadow .12s ease;
}
.lg-google svg { width: 15px; height: 15px; }
.lg-google.is-press { transform: scale(.975); box-shadow: var(--shadow-md); }

/* ── Shared app shell (screens 2–5) ─────────────────────────────────────── */

.demo-app { display: grid; grid-template-columns: 140px minmax(0, 1fr); height: 100%; }

.demo-side {
  background: var(--surface-container-low);
  padding: 0.9rem 0.6rem;
  border-right: 1px solid var(--border-light);
}
.demo-district {
  font-size: 0.75rem; font-weight: 600; color: var(--primary-900);
  padding: 0 0.5rem; margin-bottom: 0.9rem; line-height: 1.35;
}
.demo-navitem {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.4rem 0.5rem;
  border-radius: 8px;
  font-size: 0.75rem; font-weight: 500;
  color: var(--text-muted);
}
.demo-navitem + .demo-navitem { margin-top: 0.1rem; }
.demo-navitem svg { width: 14px; height: 14px; flex-shrink: 0; }
.demo-navitem.is-active {
  background: var(--card);
  color: var(--primary-900);
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(0,32,69,0.07);
}

.demo-main { padding: 1rem 1.15rem 1.15rem; background: var(--card); overflow: hidden; }

/* Only rendered where the app itself swaps the sidebar out — see the mobile
   block near the end of this file. */
.app-bar { display: none; }

/* ── Screen 2 · Dashboard ───────────────────────────────────────────────── */

.dash-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: 0.9rem;
}
.dash-h1 {
  font-family: var(--font-body);
  font-size: 1.125rem; font-weight: 670; letter-spacing: -0.032em; color: var(--text);
}
.dash-eyebrow {
  font-size: 0.5625rem; font-weight: 665;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--text-muted);
  margin: 0.9rem 0 0.4rem;
}
.dash-eyebrow:first-child { margin-top: 0; }

/* Meeting card — the navy date block is the app's most recognisable element. */
.mtg {
  display: flex; align-items: stretch;
  background: var(--card);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: box-shadow .2s ease, transform .2s ease;
}
.mtg + .mtg { margin-top: 0.45rem; }
.mtg.is-hot { box-shadow: var(--shadow-lg); transform: translateY(-1px); }

.mtg-date {
  width: 58px; flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  background: var(--primary-900); color: #fff;
  padding: 0.5rem 0;
}
.mtg-date .m { font-size: 0.5rem; font-weight: 670; text-transform: uppercase; letter-spacing: 0.15em; opacity: .72; line-height: 1; }
.mtg-date .d { font-size: 1.35rem; font-weight: 680; letter-spacing: -0.035em; line-height: 1; margin: 2px 0; font-variant-numeric: tabular-nums; }
.mtg-date .w { font-size: 0.5rem; font-weight: 550; text-transform: uppercase; letter-spacing: 0.05em; opacity: .68; line-height: 1; }

/* Upcoming rows step back to the tonal block, as the app does. */
.mtg.soft .mtg-date { background: var(--primary-200); color: var(--primary-900); }
.mtg.soft .mtg-date .m,
.mtg.soft .mtg-date .w { opacity: .7; }

.mtg-body {
  flex: 1; min-width: 0;
  padding: 0.6rem 0.75rem;
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
}
.mtg-title { font-size: 0.8125rem; font-weight: 645; letter-spacing: -0.021em; color: var(--text); }
.mtg-meta { font-size: 0.625rem; color: var(--text-light); margin-top: 0.1rem; }

.badge {
  font-size: 0.5rem; font-weight: 665;
  text-transform: uppercase; letter-spacing: 0.1em;
  padding: 0.18rem 0.45rem; border-radius: 100px;
  white-space: nowrap;
}
.badge.draft { background: #fef3c7; color: #92400e; }
.badge.pub   { background: var(--accent-100); color: var(--accent-600); }

/* ── Screens 3–5 · Agenda editor ────────────────────────────────────────── */

.ed-tile {
  display: flex; align-items: stretch;
  background: var(--card);
  border-radius: 10px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
  margin-bottom: 0.8rem;
}
.ed-tile .mtg-date { width: 62px; }
.ed-tile-body { flex: 1; min-width: 0; padding: 0.55rem 0.75rem; display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }

.dash-btn {
  display: inline-flex; align-items: center; gap: 0.35rem;
  background: var(--primary-900); color: #fff;
  border-radius: 8px;
  padding: 0.36rem 0.65rem;
  font-family: var(--font-display);
  font-size: 0.6875rem; font-weight: 650;
  flex-shrink: 0;
}

.ed-toolbar { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.7rem; }
.ed-search {
  flex: 1; min-width: 0;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--card);
  padding: 0.4rem 0.6rem;
  font-size: 0.6875rem; color: var(--text-light);
  display: flex; align-items: center; gap: 0.4rem;
}
.ed-search svg { width: 12px; height: 12px; flex-shrink: 0; }

.ed-additem {
  display: inline-flex; align-items: center; gap: 0.35rem;
  background: var(--primary-900); color: #fff;
  border: 1px solid var(--primary-900); border-radius: 8px;
  padding: 0.42rem 0.7rem;
  font-family: var(--font-display);
  font-size: 0.71875rem; font-weight: 650;
  flex-shrink: 0;
  transition: background .12s ease, transform .12s ease;
}
.ed-additem svg { width: 13px; height: 13px; }
.ed-additem.is-press { background: var(--primary-700); transform: scale(.97); }

/* Section card */
.ed-sec { border-radius: 9px; overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--border-light); }
.ed-sec + .ed-sec { margin-top: 0.5rem; }
.ed-sechead {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.45rem 0.6rem;
  background: var(--surface-warm);
  border-bottom: 1px solid var(--border-light);
}
.ed-chev { color: var(--text-light); display: grid; place-items: center; }
.ed-chev svg { width: 13px; height: 13px; }
.ed-badge {
  min-width: 24px; height: 24px; padding: 0 6px;
  border-radius: 6px;
  background: var(--primary-900); color: #fff;
  font-family: var(--font-display); font-size: 0.75rem; font-weight: 700;
  display: grid; place-items: center; flex-shrink: 0;
}
.ed-secname { font-size: 0.78125rem; font-weight: 645; letter-spacing: -0.021em; color: var(--text); }

.ed-rows { background: var(--card); padding: 0.15rem 0.6rem 0.3rem; }
.ed-row {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
  padding: 0.42rem 0;
  font-size: 0.75rem; color: var(--text);
}
.ed-row + .ed-row { border-top: 1px solid var(--border-light); }
.ed-row-t { font-weight: 600; letter-spacing: -0.018em; min-height: 1.05em; }

/* Draft | Ready pill toggle */
.pill {
  display: inline-flex; align-items: center;
  width: 4.6rem; height: 1.2rem; padding: 2px;
  border-radius: 100px; flex-shrink: 0; overflow: hidden;
  background: var(--surface-container-highest);
  font-size: 0.4375rem; font-weight: 660; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-muted);
  position: relative;
}
.pill span { flex: 1; text-align: center; z-index: 1; }
.pill::before {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: calc(50% - 2px); height: calc(100% - 4px);
  background: var(--card); border-radius: 100px;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease;
}
.pill.ready::before { transform: translateX(100%); }
.pill.ready { background: var(--accent-100); color: var(--accent-600); }

.ed-row.is-new { animation: rowIn .42s cubic-bezier(.2,.8,.3,1) both; }
@keyframes rowIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* ── Screen 4 · Add Agenda Item wizard ──────────────────────────────────── */

.wz-back {
  position: absolute; inset: 0;
  background: rgba(24, 28, 30, .42);
  display: grid; place-items: center;
  padding: 0.9rem;
}
.wz {
  width: 100%; max-width: 26rem;
  background: var(--card);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,32,69,.28);
  /* 118px of 416 is the same share the app's 220px rail takes of its 900px
     dialog — wide enough that "Add Agenda Item" and the step labels sit on
     one line, as they do in the product. */
  display: grid; grid-template-columns: 118px minmax(0, 1fr);
}

.wz-rail { background: var(--surface-warm); border-right: 1px solid var(--border-light); padding: 0.85rem 0.6rem; }
.wz-mark {
  width: 24px; height: 24px; border-radius: 7px;
  background: var(--primary-900); color: #fff;
  display: grid; place-items: center; margin-bottom: 0.5rem;
}
.wz-mark svg { width: 13px; height: 13px; }
.wz-h { font-family: var(--font-display); font-size: 0.71875rem; font-weight: 600; color: var(--primary-900); line-height: 1.25; margin-bottom: 0.7rem; }

.wz-step {
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0.3rem 0.35rem;
  border-radius: 6px;
  font-size: 0.625rem; font-weight: 500;
  color: var(--text-muted);
  border-left: 2px solid transparent;
}
.wz-step + .wz-step { margin-top: 0.15rem; }
.wz-step i {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--surface-container-highest); color: #fff;
  font-size: 0.5rem; font-weight: 700; font-style: normal;
  display: grid; place-items: center; flex-shrink: 0;
}
.wz-step.is-on {
  background: var(--card); color: var(--primary-900); font-weight: 700;
  border-left-color: var(--primary-900);
  box-shadow: 0 1px 4px rgba(0,32,69,.06);
}
.wz-step.is-on i { background: var(--primary-900); }

.wz-body { display: flex; flex-direction: column; min-width: 0; }
.wz-content { padding: 0.9rem 1rem; flex: 1; }
.wz-eyebrow { font-size: 0.5rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-muted); }
.wz-h3 { font-family: var(--font-display); font-size: 1rem; font-weight: 700; letter-spacing: -0.03em; color: var(--primary-900); margin: 0.15rem 0 0.75rem; }
.wz-label { display: block; font-size: 0.5rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-muted); margin-bottom: 0.25rem; }
.wz-field + .wz-field { margin-top: 0.6rem; }
.wz-input {
  border: 1px solid var(--border-strong, #767676); border-radius: 7px;
  background: var(--card);
  padding: 0.4rem 0.55rem;
  font-family: var(--font-display);
  font-size: 0.71875rem; font-weight: 600; color: var(--primary-900);
  min-height: 1.9rem;
  display: flex; align-items: center;
}
.wz-input.is-focus { border-color: var(--primary-700); box-shadow: 0 0 0 2px rgba(45,74,122,.14); }
.wz-input.ph { color: var(--text-light); font-weight: 400; }
.wz-select {
  border: 1px solid var(--border-strong, #767676); border-radius: 7px;
  padding: 0.4rem 0.55rem;
  font-size: 0.6875rem; color: var(--text);
  display: flex; align-items: center; justify-content: space-between;
  min-height: 1.9rem;
}
.wz-select svg { width: 11px; height: 11px; color: var(--text-light); }

.wz-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  padding: 0.55rem 0.7rem;
  border-top: 1px solid var(--border-light);
  background: var(--card);
}
.wz-ghost { font-size: 0.625rem; font-weight: 600; color: var(--text-muted); }
.wz-acts { display: flex; align-items: center; gap: 0.35rem; }
.wz-go {
  font-size: 0.625rem; font-weight: 650;
  padding: 0.32rem 0.7rem; border-radius: 7px;
  background: var(--primary-900); color: #fff;
  transition: background .12s ease, transform .12s ease;
}
.wz-go.is-press { background: var(--primary-700); transform: scale(.97); }

/* ── Typing caret + pointer ─────────────────────────────────────────────── */

.caret {
  display: inline-block; width: 1.5px; height: 0.95em;
  background: var(--primary-700);
  vertical-align: text-bottom;
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* A pointer that glides between targets. This is what makes the demo read as
   somebody using the product rather than boxes appearing on a timer.
   Positions are percentages of the frame, so they hold at any width. */
.pointer {
  position: absolute; top: 0; left: 0;
  width: 25px; height: 25px;
  z-index: 20; pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity .25s ease;
  /* Stacked drop-shadows rather than a box-shadow: the pointer is a
     transparent SVG, so only drop-shadow follows the arrow's actual outline.
     Tight core, soft halo, then a little depth so it still reads as an
     object on the lighter screens. */
  filter:
    drop-shadow(0 0 2px rgba(10, 108, 68, .95))
    drop-shadow(0 0 6px rgba(53, 208, 138, .9))
    drop-shadow(0 0 14px rgba(53, 208, 138, .55))
    drop-shadow(0 2px 3px rgba(0, 32, 69, .28));
}
.pointer.is-on { opacity: 1; }
.pointer.is-gliding { transition: left .42s cubic-bezier(.4,0,.2,1), top .42s cubic-bezier(.4,0,.2,1), opacity .25s ease; }
.pointer svg { width: 100%; height: 100%; display: block; }

.ripple {
  position: absolute; z-index: 19; pointer-events: none;
  width: 30px; height: 30px; margin: -15px 0 0 -15px;
  border-radius: 50%;
  border: 2px solid var(--accent-400);
  opacity: 0;
}
.ripple.is-go { animation: ripple .45s ease-out; }
@keyframes ripple {
  from { opacity: .55; transform: scale(.3); }
  to   { opacity: 0; transform: scale(1.5); }
}

/* ── Stopwatch overlay ─────────────────────────────────────────────────────
   Deliberately off-palette. The app is navy, white and green; this is a
   black case with steel buttons and an orange sweep, none of which appear
   anywhere in the product. That is the whole point — a viewer should never
   have to work out whether the timer is part of BoardDrive or laid over it.

   It floats over the app sidebar's empty lower half — dead space on every
   screen — so the walkthrough stays inside the browser window.            */

.hud {
  position: absolute; z-index: 15;
  left: 0.7rem; bottom: 0.7rem;
  display: flex; flex-direction: column; align-items: center; gap: 0.45rem;

  --sw-case: #141416;
  --sw-face: #0d0d0f;
  --sw-steel: #9aa0a8;
  --sw-sweep: #ffffff;
}

.sw { position: relative; width: 7.25rem; height: 7.25rem; }

/* Crown and side buttons, in brushed steel against the black case. */
.sw-crown {
  position: absolute; left: 50%; top: -0.55rem;
  width: 1.35rem; height: 0.95rem;
  transform: translateX(-50%);
  border-radius: 3px 3px 2px 2px;
  background: linear-gradient(180deg, #d3d7dc 0%, var(--sw-steel) 55%, #6d737b 100%);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}
.sw-lug {
  position: absolute; top: 0.2rem;
  width: 0.85rem; height: 0.52rem;
  border-radius: 2px;
  background: linear-gradient(180deg, #c7ccd2, #737980);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .45);
}
.sw-lug.left  { left: 0.16rem;  transform: rotate(-45deg); }
.sw-lug.right { right: 0.16rem; transform: rotate(45deg); }

.sw-face {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 32%, #202024 0%, var(--sw-face) 72%);
  border: 3px solid var(--sw-case);
  display: grid; place-items: center;
  box-shadow:
    0 16px 34px rgba(0, 0, 0, .42),
    0 4px 10px rgba(0, 0, 0, .32),
    inset 0 0 0 1px rgba(255, 255, 255, .10),
    inset 0 2px 10px rgba(0, 0, 0, .6);
}

.sw-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.sw-ticks line { stroke: rgba(255, 255, 255, .3); stroke-width: 1.6; stroke-linecap: round; }
.sw-track {
  fill: none; stroke: rgba(255, 255, 255, .1);
  stroke-width: 4;
}
.sw-prog {
  fill: none; stroke: var(--sw-sweep);
  stroke-width: 4; stroke-linecap: round;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, .5));
  /* Circumference of r=44. demo.js drives the offset each frame. */
  stroke-dasharray: 276.46;
  stroke-dashoffset: 276.46;
}

.watch-time {
  position: relative;
  font-family: var(--font-display);
  font-size: 1.375rem; font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}
/* No completion colour or glow — the numerals read identically from the
   first frame to the last. The ring reaching full is the finish cue. */

.watch-replay {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem;
  font-family: var(--font-body);
  font-size: 0.5625rem; font-weight: 650;
  text-transform: uppercase; letter-spacing: 0.09em;
  padding: 0.3rem 0.7rem; border-radius: 100px;
  background: var(--sw-case); color: #fff;
  border: 1px solid rgba(255, 255, 255, .2);
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .3);
  transition: background .18s ease, border-color .18s ease;
}
.watch-replay:hover { background: #26262b; border-color: rgba(255, 255, 255, .42); }
.watch-replay svg { width: 10px; height: 10px; }

/* ── Sections ──────────────────────────────────────────────────────────── */

.sec { padding: 5.5rem 1.75rem; }
.sec-surface { background: var(--surface); border-block: 1px solid var(--border-light); }
.sec-tint { background: var(--primary-50); border-block: 1px solid var(--primary-100); }

.sec-head { max-width: var(--wrap); margin: 0 auto 3rem; }
.sec-head.center { text-align: center; }
.sec-head.center p { margin-left: auto; margin-right: auto; }

.eyebrow {
  font-size: 0.75rem; font-weight: 660;
  text-transform: uppercase; letter-spacing: 0.13em;
  color: var(--primary-700);
  margin-bottom: 0.85rem;
}

.sec-head h2 {
  font-size: clamp(1.95rem, 3.6vw, 2.7rem);
  margin-bottom: 0.85rem;
  text-wrap: balance;
}
.sec-head p {
  font-size: 1.0625rem;
  color: var(--text-reading);
  max-width: 40rem;
  line-height: 1.7;
}

/* ── Drive ownership ───────────────────────────────────────────────────── */

.drive-grid { max-width: var(--wrap); margin: 0 auto; }

/* Three statements across, and no tick badges: these are facts about where
   files live and who can open them, and a column of checkmarks reads as a
   feature grid ticking itself off. A quiet rule keeps the rhythm. */
.factlist {
  list-style: none;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.25rem;
}
.factlist li { border-left: 2px solid var(--primary-200); padding-left: 1.1rem; }
.factlist h3 { font-family: var(--font-body); font-size: 1rem; font-weight: 660; letter-spacing: -0.021em; margin-bottom: 0.3rem; }
.factlist p { font-size: 0.9375rem; color: var(--text-reading); line-height: 1.65; }

@media (max-width: 900px) {
  .factlist { grid-template-columns: 1fr; gap: 1.4rem; }
}

/* ── Features ──────────────────────────────────────────────────────────── */

.feats { max-width: var(--wrap); margin: 0 auto; border-top: 1px solid var(--border-light); }
.feat {
  display: grid; grid-template-columns: 3rem 15rem 1fr;
  gap: 1.5rem; align-items: baseline;
  padding: 1.6rem 1rem 1.6rem 0.5rem;
  border-bottom: 1px solid var(--border-light);
  border-radius: var(--r);
  transition: background .2s ease, box-shadow .2s ease;
}
.feat:hover { background: var(--card); box-shadow: var(--shadow-sm); }
.feat-n { font-size: 0.8125rem; font-weight: 660; color: var(--primary-600); font-variant-numeric: tabular-nums; }
.feat h3 { font-family: var(--font-body); font-size: 1.0625rem; font-weight: 660; letter-spacing: -0.021em; }
.feat p { font-size: 0.9375rem; color: var(--text-reading); line-height: 1.65; }
.feat .badge-pro {
  display: inline-block; margin-left: 0.5rem; vertical-align: middle;
  font-size: 0.5625rem; font-weight: 665;
  text-transform: uppercase; letter-spacing: 0.1em;
  padding: 0.12rem 0.42rem; border-radius: 100px;
  background: var(--primary-100); color: var(--primary-800);
}

/* ── Cards ─────────────────────────────────────────────────────────────── */

/* ── Homepage walkthroughs ─────────────────────────────────────────────────
   The three how-it-works demos, stacked in one section. Each is a numbered
   heading over a frame that waits for a play button.                      */

.wt { max-width: 48rem; margin: 0 auto; }
.wt + .wt { margin-top: 3.25rem; }
.wt-head {
  display: grid; grid-template-columns: auto 1fr;
  gap: 1rem; align-items: baseline;
  margin-bottom: 1.1rem;
}
.wt-n {
  font-family: var(--font-display);
  font-size: 0.875rem; font-weight: 700;
  color: #fff; background: var(--primary-900);
  padding: 0.22rem 0.55rem; border-radius: 100px;
  font-variant-numeric: tabular-nums;
}
.wt-head h3 {
  font-family: var(--font-display);
  font-size: 1.3125rem; font-weight: 700; letter-spacing: -0.028em;
  color: var(--primary-900);
  margin-bottom: 0.25rem;
}
.wt-head > div > p { font-size: 0.9375rem; color: var(--text-reading); line-height: 1.6; }
.wt-more { max-width: 48rem; margin: 2.5rem auto 0; text-align: center; }
.wt-more a { font-size: 0.9375rem; font-weight: 620; color: var(--primary-700); }
.wt-more a:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .wt-head { grid-template-columns: 1fr; gap: 0.5rem; }
  .wt-head h3 { font-size: 1.1875rem; }
}

.cards {
  max-width: var(--wrap); margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem;
}
.cards.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.card {
  border-radius: var(--r-lg);
  padding: 1.75rem;
  background: var(--card);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }

.card-ico {
  width: 38px; height: 38px; border-radius: var(--r);
  display: grid; place-items: center;
  background: var(--primary-100); color: var(--primary-800);
  margin-bottom: 1rem;
}
.card-ico svg { width: 19px; height: 19px; }
.card h3 { font-family: var(--font-body); font-size: 1.0625rem; font-weight: 660; letter-spacing: -0.021em; margin-bottom: 0.5rem; }
.card p { font-size: 0.9375rem; color: var(--text-reading); line-height: 1.65; }

/* ── Pricing ───────────────────────────────────────────────────────────── */

.tiers {
  max-width: var(--wrap); margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem;
  align-items: start;
}

.tier {
  border-radius: var(--r-lg);
  border: 1px solid var(--border-light);
  background: var(--card);
  padding: 2rem 1.75rem;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-sm);
}
.tier.is-feature {
  border-color: var(--primary-700);
  box-shadow: 0 0 0 1px var(--primary-700), var(--shadow-lg);
  position: relative;
}
.tier-flag {
  position: absolute; top: -0.7rem; left: 1.75rem;
  font-size: 0.5625rem; font-weight: 665;
  text-transform: uppercase; letter-spacing: 0.12em;
  padding: 0.25rem 0.6rem; border-radius: 100px;
  background: var(--primary-900); color: #fff;
}
.tier-name { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; letter-spacing: -0.03em; color: var(--text); }
.tier-blurb { font-size: 0.9375rem; color: var(--text-reading); line-height: 1.6; margin-top: 0.4rem; min-height: 3.2rem; }
.tier-price {
  margin: 1.25rem 0 0.25rem;
  font-family: var(--font-display); font-weight: 800;
  font-size: 2.5rem; letter-spacing: -0.05em; color: var(--primary-900);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.tier-per {
  font-size: 0.6875rem; font-weight: 650;
  text-transform: uppercase; letter-spacing: 0.11em; color: var(--text-light);
  margin-bottom: 1.4rem;
}
.tier ul { list-style: none; display: grid; gap: 0.6rem; margin-bottom: 1.75rem; flex: 1; }
.tier li {
  display: grid; grid-template-columns: auto 1fr; gap: 0.6rem; align-items: start;
  font-size: 0.9375rem; color: var(--text-reading); line-height: 1.5;
}
.tier li svg { width: 14px; height: 14px; color: var(--accent-500); margin-top: 0.3rem; flex-shrink: 0; }
.tier .btn { width: 100%; }

.tier-foot {
  max-width: var(--wrap); margin: 1.75rem auto 0;
  font-size: 0.875rem; color: var(--text-light); text-align: center;
}

/* ── Contact ───────────────────────────────────────────────────────────── */

.contact { max-width: 46rem; margin: 0 auto; text-align: center; }
.contact h2 { font-size: clamp(2rem, 4vw, 2.9rem); margin-bottom: 1rem; }
.contact p { font-size: 1.0625rem; color: var(--text-reading); margin-bottom: 2rem; line-height: 1.7; }
.contact-actions { display: flex; align-items: center; justify-content: center; gap: 0.75rem; flex-wrap: wrap; }
.contact-hint { margin-top: 2rem; font-size: 0.875rem; color: var(--text-light); }

/* ── Footer ────────────────────────────────────────────────────────────── */

.foot { border-top: 1px solid var(--border-light); padding: 2rem 1.75rem; background: var(--surface); }
.foot-inner {
  max-width: var(--wrap); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.foot-brand {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-display); font-weight: 800; font-size: 0.9375rem;
  letter-spacing: -0.03em; color: var(--primary-900); text-decoration: none;
}
.foot-brand svg { width: 18px; height: 18px; }
.foot-links { display: flex; gap: 1.5rem; }
.foot-links a { font-size: 0.9375rem; color: var(--text-muted); text-decoration: none; }
.foot-links a:hover { color: var(--primary-900); }
.foot-copy { font-size: 0.875rem; color: var(--text-light); }

/* ── Legal pages ───────────────────────────────────────────────────────── */

.legal { max-width: 46rem; margin: 0 auto; padding: calc(var(--nav-h) + 3.5rem) 1.75rem 4rem; }
.crumbs { font-size: 0.8125rem; color: var(--text-light); margin-bottom: 1.25rem; }
.crumbs a { color: var(--text-muted); text-decoration: none; }
.crumbs a:hover { color: var(--primary-900); }
.crumbs .sep { margin: 0 0.5rem; color: var(--border); }

.legal h1 { font-size: clamp(2rem, 4.2vw, 2.75rem); margin-bottom: 0.75rem; }
.legal .effective { font-size: 0.9375rem; color: var(--text-light); margin-bottom: 2.5rem; }
.legal h2 {
  font-family: var(--font-body);
  font-size: 1.25rem; font-weight: 670; letter-spacing: -0.03em;
  margin: 2.5rem 0 0.85rem; padding-top: 1.5rem;
  border-top: 1px solid var(--border-light);
}
.legal h3 { font-family: var(--font-body); font-size: 1rem; font-weight: 660; margin: 1.75rem 0 0.5rem; }
.legal p { color: var(--text-reading); margin-bottom: 1rem; font-size: 1rem; line-height: 1.75; }
.legal ul, .legal ol { margin: 0 0 1.25rem 1.25rem; color: var(--text-reading); }
.legal li { margin-bottom: 0.5rem; line-height: 1.7; }
.legal a.inline { color: var(--primary-700); text-decoration: underline; text-underline-offset: 3px; }
.legal strong { color: var(--text); font-weight: 640; }

/* ── Scroll reveal ─────────────────────────────────────────────────────── */

/* Scoped to .js (set by an inline script in <head>) so a visitor without
   JavaScript gets the page rather than a column of invisible sections —
   there is no observer to add .is-visible for them. */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.is-visible { opacity: 1; transform: none; }

/* ── Responsive ────────────────────────────────────────────────────────── */

@media (max-width: 1000px) {
  .hero-inner { grid-template-columns: 1fr; gap: 2.75rem; }
  .hero-sub { max-width: none; }
  .cards, .cards.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiers { grid-template-columns: 1fr; max-width: 30rem; }
  .tier.is-feature { order: -1; }
  .feat { grid-template-columns: 2.5rem 1fr; }
  .feat p { grid-column: 2; }
}

@media (max-width: 640px) {
  .nav { padding: 0 1.1rem; }
  .nav-links { gap: 0.6rem; }
  .nav-links a:not(.btn) { display: none; }
  .hero { padding: calc(var(--nav-h) + 2.75rem) 1.1rem 3.5rem; }
  .sec { padding: 3.5rem 1.1rem; }
  .cards, .cards.two { grid-template-columns: 1fr; }
  .hero-actions, .contact-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn, .contact-actions .btn { width: 100%; }
  /* The demo follows the app's own mobile behaviour: the sidebar slides
     off-canvas and a header bar takes its place, the wizard drops its step
     rail, and the date blocks narrow. See mobile-header.tsx and nav-bar.tsx. */
  .demo-stage { height: 24rem; }
  .demo-app { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .demo-side { display: none; }
  .demo-main { padding: 0.85rem 0.85rem 1rem; }

  /* A phone frame cannot hold the whole agenda AND the stopwatch, and the
     new row is the payoff. The search field and the consent section come off
     here so the saved item lands in view and clear of the dial — a shorter
     agenda reads fine; a section header over no rows would not. */
  .ed-search { display: none; }
  .phone-hide { display: none; }
  .ed-tile { margin-bottom: 0.5rem; }
  .ed-toolbar { margin-bottom: 0.5rem; }

  .app-bar {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.45rem 0.6rem;
    background: var(--surface-container-low);
    border-bottom: 1px solid var(--border-light);
  }
  .app-bar svg { width: 15px; height: 15px; color: var(--primary-900); flex-shrink: 0; }
  .app-bar-name {
    font-family: var(--font-display); font-weight: 700;
    font-size: 0.75rem; line-height: 1.15; color: var(--primary-900);
  }
  .app-bar-district {
    font-size: 0.5rem; font-weight: 500;
    text-transform: uppercase; letter-spacing: 0.12em;
    color: var(--text-muted); line-height: 1.15; margin-top: 0.06rem;
  }

  .wz { grid-template-columns: 1fr; max-width: 19rem; }
  .wz-rail { display: none; }
  .wz-back { padding: 0.6rem; }

  .mtg-date, .ed-tile .mtg-date { width: 46px; }
  .mtg-date .d { font-size: 1.1rem; }

  /* On a phone the wizard is nearly full-width, so a full-size dial would
     sit on its fields. Shrink it enough to clear the modal. */
  .hud { left: 0.45rem; bottom: 0.45rem; gap: 0.35rem; }
  .sw { width: 4.75rem; height: 4.75rem; }
  .sw-face { border-width: 2px; }
  .watch-time { font-size: 0.875rem; }
  .sw-crown { width: 1rem; height: 0.72rem; top: -0.42rem; }
  .sw-lug { width: 0.62rem; height: 0.4rem; top: 0.16rem; }
  .sw-lug.left { left: 0.1rem; } .sw-lug.right { right: 0.1rem; }
  .watch-replay { font-size: 0.5rem; padding: 0.24rem 0.5rem; }

  .feat { grid-template-columns: 1fr; gap: 0.4rem; }
  .feat-n { display: none; }
  .foot-inner { flex-direction: column; text-align: center; }
  .legal { padding: calc(var(--nav-h) + 2.5rem) 1.1rem 3rem; }
}

/* ── Reduced motion ────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .caret { display: none; }
  .btn:hover, .card:hover { transform: none; }

  /* Screens cut instead of fading and the pointer jumps instead of gliding.
     The timeline and the stopwatch still run, so the number stays a real
     measurement rather than a stand-in. */
  .screen { transition: none; }
  .pointer, .pointer.is-gliding { transition: none; }
  .ripple.is-go { animation: none; }
}

/* ── Print ─────────────────────────────────────────────────────────────── */

@media print {
  .nav, .demo, .watch, .steps, .contact-actions { display: none !important; }
  body { color: #000; background: #fff; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Additional walkthrough screens (how-it-works.html)

   Same rule as the rest of the demo kit: values come from the app, not from
   imagination. New Meeting modal → dashboard-client.tsx; publish checklist →
   components/publish-checklist.tsx; archive → app/archive/archive-client.tsx;
   the Drive control → components/drive-picker-upload.tsx.

   The Drive panel is deliberately NOT a copy of Google's own picker chrome —
   it shows the district's files in BoardDrive's styling. Reproducing another
   company's interface in a sales demo would misrepresent whose product the
   viewer is looking at.
   ══════════════════════════════════════════════════════════════════════════ */

/* Generic modal card, for screens that are a dialog over another screen. */
.mdl {
  width: 100%; max-width: 22rem;
  background: var(--card);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 32, 69, .28);
}
.mdl-head { padding: 0.8rem 0.95rem 0.7rem; border-bottom: 1px solid var(--border-light); }
.mdl-title {
  font-family: var(--font-display);
  font-size: 0.9375rem; font-weight: 700; letter-spacing: -0.03em;
  color: var(--primary-900);
}
.mdl-sub { font-size: 0.6875rem; color: var(--text-muted); margin-top: 0.15rem; line-height: 1.45; }
.mdl-body { padding: 0.8rem 0.95rem; display: grid; gap: 0.55rem; }
.mdl-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  padding: 0.55rem 0.7rem;
  border-top: 1px solid var(--border-light);
}
.mdl-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem; }

/* Publish checklist — details block plus passing checks. */
.pub-details {
  background: var(--surface);
  border-radius: 8px;
  padding: 0.55rem 0.65rem;
  display: grid; gap: 0.25rem;
  font-size: 0.6875rem;
}
.pub-details b { color: var(--text-muted); font-weight: 650; margin-right: 0.3rem; }
.pub-checks { display: grid; gap: 0.35rem; }
.pub-check {
  display: flex; align-items: center; gap: 0.45rem;
  font-size: 0.71875rem; color: var(--text);
}
.pub-check svg { width: 13px; height: 13px; color: var(--accent-600); flex-shrink: 0; }

/* Public archive — the page a community member lands on. */
.arc-head { margin-bottom: 0.8rem; }
.arc-eyebrow {
  font-size: 0.5625rem; font-weight: 660;
  text-transform: uppercase; letter-spacing: 0.13em;
  color: var(--text-muted);
}
.arc-h1 {
  font-family: var(--font-body);
  font-size: 1.125rem; font-weight: 670; letter-spacing: -0.032em;
  color: var(--primary-900); margin-top: 0.15rem;
}

/* ── how-it-works page layout ──────────────────────────────────────────── */

.hiw-head { max-width: 46rem; margin: 0 auto 1rem; text-align: center; }
.hiw-head h1 { font-size: clamp(2rem, 3.8vw, 2.8rem); margin-bottom: 0.85rem; text-wrap: balance; }
.hiw-head p { font-size: 1.0625rem; color: var(--text-reading); line-height: 1.7; }

.hiw-step { max-width: 48rem; margin: 0 auto; }
.hiw-copy { max-width: 40rem; margin: 0 auto 1.75rem; text-align: center; }
.hiw-copy h2 {
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  margin-bottom: 0.6rem; text-wrap: balance;
}
.hiw-copy p { font-size: 1rem; color: var(--text-reading); line-height: 1.7; }
.hiw-n {
  display: inline-block;
  font-size: 0.6875rem; font-weight: 660;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--primary-700);
  margin-bottom: 0.7rem;
}

@media (max-width: 640px) {
  .mdl { max-width: 19rem; }
  .mdl-row2 { grid-template-columns: 1fr; }
}

/* ── Instructional caption strip ───────────────────────────────────────────
   The how-it-works walkthroughs teach rather than sell, so they narrate
   themselves: a numbered instruction under the frame that changes with the
   step, and a bar showing how far through the workflow you are. These demos
   carry no stopwatch — how long it took is a sales question, and the answer
   here is "as long as it takes to learn it".                              */

/* Nothing narrates itself without JavaScript, so the strip would just sit
   there reading "1 / 1" over a static screen. Hide it and let the screen
   speak for itself. */
html:not(.js) .cap { display: none; }

.cap {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: 0.7rem;
  margin-top: 0.85rem;
  padding: 0.6rem 0.85rem;
  background: var(--card);
  border: 1px solid var(--border-light);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
}
.cap-n {
  font-family: var(--font-display);
  font-size: 0.75rem; font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff; background: var(--primary-900);
  padding: 0.2rem 0.5rem; border-radius: 100px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cap-t {
  font-size: 0.9375rem; font-weight: 550;
  color: var(--text); line-height: 1.4;
}
.cap-bar {
  grid-column: 1 / -1;
  height: 3px; border-radius: 100px;
  background: var(--surface-container-highest);
  overflow: hidden;
}
.cap-bar span {
  display: block; height: 100%; width: 0;
  background: var(--primary-700);
  border-radius: 100px;
  transition: width .3s ease;
}

/* A walkthrough that teaches needs to be stoppable, and watchable twice.
   Pause holds the strip's third slot while the run is going; Replay takes
   it over once the run is finished. */
.cap-replay,
.cap-pause {
  font-family: inherit;
  font-size: 0.6875rem; font-weight: 650;
  padding: 0.28rem 0.6rem; border-radius: 100px;
  color: var(--primary-900);
  background: var(--primary-50);
  border: 1px solid var(--primary-200);
  cursor: pointer;
  white-space: nowrap;
  min-width: 4.4rem; text-align: center;
  transition: background .14s ease;
}
.cap-replay:hover,
.cap-pause:hover { background: var(--primary-100, var(--primary-200)); }
.cap-replay:focus-visible,
.cap-pause:focus-visible { outline: 2px solid var(--primary-700); outline-offset: 2px; }

/* Timers stop on their own; CSS keyframes need telling. The ripple, the
   row-in animations and the typing caret all sit inside the stage. */
.demo.is-paused .demo-stage,
.demo.is-paused .demo-stage * { animation-play-state: paused !important; }

/* ── Play button, for demos that wait to be asked ──────────────────────────
   Where three walkthroughs share a section, none of them starts on its own.
   The frame sits on its first screen under a scrim with this in the middle,
   which is the one control every visitor already knows.                   */

.demo-play {
  position: absolute; inset: 0;
  z-index: 24;
  display: grid; place-items: center;
  border: 0; padding: 0;
  background: rgba(24, 28, 30, .28);
  cursor: pointer;
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease;
}
.demo.is-idle .demo-play { opacity: 1; pointer-events: auto; }
.demo-play span {
  width: 62px; height: 62px; border-radius: 50%;
  background: var(--card);
  box-shadow: 0 10px 28px rgba(0, 32, 69, .3);
  display: grid; place-items: center;
  transition: transform .16s ease;
}
.demo-play svg {
  width: 24px; height: 24px;
  color: var(--primary-900);
  margin-left: 3px; /* optical centring: a triangle's mass sits left */
}
.demo-play:hover span { transform: scale(1.06); }
.demo-play:focus-visible span { outline: 3px solid var(--primary-700); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .demo-play, .demo-play span { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cap-bar span { transition: none; }
}

@media (max-width: 640px) {
  .cap { gap: 0.5rem; padding: 0.5rem 0.6rem; }
  .cap-t { font-size: 0.8125rem; }
  .cap-replay,
  .cap-pause { font-size: 0.625rem; padding: 0.22rem 0.5rem; min-width: 3.9rem; }
}


/* ── Controls the instructional walkthroughs need ──────────────────────────
   Each of these mirrors a control in the real app that the shorter, sales-cut
   demos skipped over: a select that actually opens, the template row on the
   New Meeting dialog, the wizard's real three-button footer, the attachment
   tile with its Public/Private toggle, and the status menu that publishing
   really goes through.                                                     */

/* Anchor for a dropdown that belongs to one field. */
.fld { position: relative; }

.wz-menu {
  position: absolute; left: 0; right: 0; top: calc(100% + 3px);
  z-index: 8;
  background: var(--card);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  box-shadow: 0 10px 26px rgba(0, 32, 69, .18);
  padding: 0.2rem;
  display: grid; gap: 1px;
}
.wz-opt {
  display: block;
  padding: 0.3rem 0.45rem;
  border-radius: 6px;
  font-size: 0.6875rem; font-weight: 500; color: var(--text);
}
.wz-opt.is-hot { background: var(--primary-50); color: var(--primary-900); font-weight: 650; }

/* The New Meeting dialog's template row. */
.mdl-tpl {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
  padding: 0.45rem 0.55rem;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.mdl-tpl-l { font-size: 0.5625rem; font-weight: 650; color: var(--text-muted); }
.mdl-tpl-v { font-size: 0.71875rem; font-weight: 600; color: var(--text); margin-top: 0.05rem; }
.mdl-tpl-b {
  font-size: 0.5625rem; font-weight: 650; color: var(--text-muted);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 0.2rem 0.4rem; background: var(--card); flex-shrink: 0;
}

/* Caption-driven highlight: the narration points at something the viewer
   should look at, without the pointer pretending to click it. */
.is-lit {
  border-color: var(--primary-300) !important;
  box-shadow: 0 0 0 3px rgba(45, 74, 122, .13);
  border-radius: 8px;
}

/* Wizard step 1's Recommended Action switch, shown in its default Off state. */
.wz-toggle {
  display: inline-flex; align-items: center; gap: 0.3rem;
  height: 1.05rem; padding: 0 0.4rem 0 0.15rem;
  border-radius: 100px;
  background: var(--text-muted); color: #fff;
  font-size: 0.4375rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.wz-toggle i { width: 0.8rem; height: 0.8rem; border-radius: 50%; background: #fff; }

/* Description textarea. */
.wz-area {
  border: 1px solid var(--border-strong, #767676); border-radius: 7px;
  background: var(--card);
  padding: 0.4rem 0.55rem;
  font-size: 0.6875rem; font-weight: 400; color: var(--text);
  line-height: 1.5;
  min-height: 3.6rem;
}
.wz-area.ph { color: var(--text-light); }
.wz-area.is-focus { border-color: var(--primary-700); box-shadow: 0 0 0 2px rgba(45,74,122,.14); }

/* ── Attachment tiles ──────────────────────────────────────────────────────
   Reproduced from the components rather than sketched: the same four ways in
   — a file, Google Drive, an HTML snippet, a link — on the same 2px dashed
   border over --surface, so a district recognises them on sight.          */

.uptiles { display: grid; gap: 0.35rem; }
.uptiles-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.uptile {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  gap: 0.15rem;
  border: 2px dashed var(--border);
  background: var(--surface);
  border-radius: 9px;
  padding: 0.5rem 0.3rem;
  transition: border-color .14s ease, background .14s ease, transform .14s ease;
}
.uptile svg { width: 17px; height: 17px; color: var(--text-light); }
.uptile b { font-size: 0.5625rem; font-weight: 600; color: var(--text-muted); line-height: 1.2; }
.uptile i { font-size: 0.4375rem; font-style: normal; color: var(--text-light); line-height: 1.25; }
.uptiles-2 .uptile { padding: 0.7rem 0.4rem; gap: 0.2rem; }
.uptiles-2 .uptile svg { width: 20px; height: 20px; }
.uptiles-2 .uptile b { font-size: 0.625rem; }
.uptiles-2 .uptile i { font-size: 0.5rem; }
/* The Drive tile carries Google's own mark, so it keeps its own colours. */
.uptile .drive-logo { color: inherit; }
.uptile.is-press {
  border-color: var(--accent-500);
  background: var(--accent-50);
  transform: scale(.97);
}

/* An attached file, as the item editor shows it. */
.att-tile {
  display: flex; align-items: center; gap: 0.4rem;
  margin-top: 0.35rem;
  padding: 0.35rem 0.5rem;
  border-radius: 8px;
  background: var(--card);
  border: 1px solid var(--border-light);
  animation: rowIn .34s cubic-bezier(.2,.8,.3,1) both;
}
.att-tile svg { width: 13px; height: 13px; color: var(--text-muted); flex-shrink: 0; }
.att-name { font-size: 0.6875rem; font-weight: 600; color: var(--text); min-width: 0; }
.att-sz { display: block; font-size: 0.5625rem; font-weight: 400; color: var(--text-light); }
.att-vis {
  margin-left: auto; flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 0.2rem;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface-container-highest);
  color: var(--text-muted);
  padding: 0.14rem 0.35rem;
  font-size: 0.5rem; font-weight: 660;
}
.att-vis svg { width: 9px; height: 9px; color: inherit; }

/* Item titles are text-primary in the app. */
.ed-row-t { color: var(--primary-900); }

/* Wizard footer, with the two save paths the app really offers. */
.wz-soft {
  font-size: 0.5625rem; font-weight: 650;
  padding: 0.3rem 0.45rem; border-radius: 7px;
  background: var(--primary-50); color: var(--primary-900);
}
.wz-ok {
  font-size: 0.5625rem; font-weight: 660;
  padding: 0.3rem 0.45rem; border-radius: 7px;
  background: var(--accent-100); color: var(--accent-600);
  transition: filter .12s ease, transform .12s ease;
}
.wz-ok.is-press { filter: brightness(.94); transform: scale(.97); }

/* Meeting status badge and its menu. Publishing runs through this, not
   through a toolbar button. */
.ed-tile.has-menu { overflow: visible; }
.ed-tile.has-menu .mtg-date { border-radius: 10px 0 0 10px; }
.stat-wrap { position: relative; flex-shrink: 0; }
.badge.is-btn {
  display: inline-flex; align-items: center; gap: 0.2rem;
  border: 1px solid rgba(146, 64, 14, .28);
}
.badge.is-btn svg { width: 9px; height: 9px; }
.badge.pub.is-btn { border-color: var(--accent-300, rgba(13, 128, 80, .3)); }
.stat-menu {
  position: absolute; right: 0; top: calc(100% + 5px);
  z-index: 9;
  background: var(--card);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  box-shadow: 0 10px 26px rgba(0, 32, 69, .18);
  padding: 0.2rem;
  display: grid; gap: 1px;
  min-width: 7rem;
}
.stat-opt {
  display: flex; align-items: center; gap: 0.35rem;
  padding: 0.28rem 0.4rem; border-radius: 6px;
  font-size: 0.6875rem; font-weight: 550; color: var(--text);
  white-space: nowrap;
}
.stat-opt.is-hot { background: var(--primary-50); color: var(--primary-900); font-weight: 660; }
.dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.dot.warn { background: #d97706; }
.dot.info { background: var(--primary-700); }
.dot.ok { background: var(--accent-500); }

/* Publish checklist counts. */
.pub-counts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.35rem; }
.pub-count {
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 0.35rem 0.25rem;
  font-size: 0.5625rem; color: var(--text-light);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.pub-count b {
  display: block;
  font-family: var(--font-display);
  font-size: 0.9375rem; font-weight: 700; color: var(--primary-900);
  line-height: 1.1; margin-bottom: 0.1rem;
}

/* A card that has just appeared on the archive. */
.mtg.is-new { animation: rowIn .42s cubic-bezier(.2,.8,.3,1) both; }

/* A select still showing its placeholder. */
.wz-select.ph { color: var(--text-light); }

.dash-btn { transition: background .12s ease, transform .12s ease; }
.dash-btn.is-press { background: var(--primary-700); transform: scale(.97); }

/* The checklist is a highlight target, so it needs an edge to light up. */
.pub-checks { border: 1px solid transparent; border-radius: 8px; padding: 0.25rem 0.3rem; }

/* New Meeting is the tallest dialog in the app — type, template, title, date,
   time and location. At the frame's fixed height it needs tighter metrics to
   fit without either clipping the footer or growing every demo on the page. */
.mdl-compact .mdl-head { padding: 0.6rem 0.85rem 0.5rem; }
.mdl-compact .mdl-sub { line-height: 1.35; }
.mdl-compact .mdl-body { padding: 0.6rem 0.85rem; gap: 0.4rem; }
.mdl-compact .wz-label { margin-bottom: 0.15rem; }
.mdl-compact .wz-input,
.mdl-compact .wz-select { min-height: 1.7rem; padding: 0.3rem 0.5rem; }
.mdl-compact .mdl-tpl { padding: 0.35rem 0.5rem; }
.mdl-compact .mdl-foot { padding: 0.45rem 0.7rem; }