/* Durham Design System — shared tokens + components for Durham AI Business OS, Durham Real Estate OS, School, funnels and the app.
   Builds on the base tokens in app.css (navy / gold / serif headings). One system, many products. */
:root{
  --space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.5rem;--space-6:2rem;--space-7:3rem;--space-8:4.5rem;
  --radius-s:6px;--radius-m:10px;--radius-l:16px;--shadow-1:0 1px 2px rgba(15,24,40,.06),0 2px 8px rgba(15,24,40,.05);
  --shadow-2:0 8px 30px rgba(15,24,40,.10);--max:1120px;--ease:cubic-bezier(.2,.7,.2,1);
  --accent:var(--navy);--accent-ink:var(--paper);--available:var(--ok);--later:var(--muted);
}
.mk{font-size:1.05rem}
.mk .wrap{max-width:var(--max);margin:0 auto;padding:0 var(--space-5)}
.mk section{padding:var(--space-8) 0;border-bottom:1px solid var(--line)}
.mk section:last-of-type{border-bottom:0}
.mk h1{font-size:clamp(2.1rem,5.2vw,3.6rem);letter-spacing:-.01em;margin:.2em 0 .35em;max-width:18ch}
.mk h2{font-size:clamp(1.5rem,3vw,2.15rem);margin:0 0 .4em;max-width:26ch}
.mk .eyebrow{font:600 .78rem/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:0 0 var(--space-3)}
.mk .lead{font-size:clamp(1.05rem,2vw,1.25rem);color:var(--muted);max-width:60ch}
.mk .mk-hero{padding:var(--space-8) 0 var(--space-7);background:linear-gradient(180deg,var(--mist),transparent 75%)}
.mk .ctas{display:flex;flex-wrap:wrap;gap:var(--space-3);margin:var(--space-5) 0}
.btn-xl{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 1.4rem;border-radius:var(--radius-m);font:600 1rem var(--sans);text-decoration:none;
  background:var(--navy);color:var(--paper);border:1px solid var(--navy);transition:transform .15s var(--ease),box-shadow .15s var(--ease)}
.btn-xl:hover{transform:translateY(-1px);box-shadow:var(--shadow-2)}
.btn-xl.ghost{background:transparent;color:var(--navy);border-color:var(--line)}
.btn-xl:focus-visible,.mk a:focus-visible,.seg a:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.cards{display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));margin-top:var(--space-5)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-l);padding:var(--space-5);box-shadow:var(--shadow-1)}
.card h3{margin:.1em 0 .4em;font-size:1.15rem}.card p{margin:0;color:var(--muted)}
.card .k{font:700 .72rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.pill{display:inline-block;font:600 .72rem/1 var(--sans);padding:.35rem .55rem;border-radius:99px;border:1px solid currentColor;margin-left:.4rem;vertical-align:middle}
.pill.avail{color:var(--available)}.pill.later{color:var(--later)}
.flow{display:flex;flex-wrap:wrap;gap:var(--space-2);list-style:none;padding:0;margin:var(--space-5) 0 0;counter-reset:f}
.flow li{flex:1 1 130px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-m);padding:var(--space-4);position:relative;counter-increment:f}
.flow li::before{content:counter(f,decimal-leading-zero);display:block;font:700 .75rem var(--sans);color:var(--gold);margin-bottom:.3rem}
.flow li strong{display:block;color:var(--navy)}.flow li span{font-size:.9rem;color:var(--muted)}
.scatter{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:var(--space-5) 0}
.scatter span{border:1px dashed var(--line);border-radius:var(--radius-s);padding:.45rem .7rem;color:var(--muted);background:var(--surface);font-size:.92rem}
.join{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--space-5);align-items:center}
.join .arrow{font-size:2rem;color:var(--gold)}
@media (max-width:760px){.join{grid-template-columns:1fr}.join .arrow{transform:rotate(90deg);justify-self:center}}
.org{list-style:none;margin:var(--space-5) 0 0;padding:0}
.org ul{list-style:none;margin:0;padding:0 0 0 var(--space-5);border-left:2px solid var(--line)}
.org li{margin:var(--space-2) 0}
.node{display:inline-flex;gap:.5rem;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-m);padding:.55rem .8rem;box-shadow:var(--shadow-1)}
.node.ai{border-color:var(--gold);background:var(--gold-soft)}
.node small{color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:var(--space-4)}
.chips span{background:var(--mist);border-radius:99px;padding:.3rem .7rem;font-size:.88rem}
.split{display:grid;gap:var(--space-7);grid-template-columns:1.1fr .9fr;align-items:start}
@media (max-width:860px){.split{grid-template-columns:1fr;gap:var(--space-5)}}
.video-slot{display:block;border:1px solid var(--line);border-radius:var(--radius-l);padding:var(--space-5);background:var(--surface);text-decoration:none}
.seg{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:var(--space-5) 0 0}
.seg a{padding:.6rem 1rem;border-radius:99px;border:1px solid var(--line);text-decoration:none;color:var(--ink);background:var(--surface)}
.seg a[aria-current="true"]{background:var(--navy);color:var(--paper);border-color:var(--navy)}
.final{text-align:center}.final h2,.final .lead{margin-left:auto;margin-right:auto}.final .ctas{justify-content:center}
.notice{font-size:.9rem;color:var(--muted);border-left:3px solid var(--gold);padding-left:.8rem;margin-top:var(--space-4)}
@media (prefers-reduced-motion:reduce){.btn-xl{transition:none}.btn-xl:hover{transform:none}}
/* ---- App components (signed-in screens) ---- */
.page-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-4)}
.page-head h1{margin:0}.page-head .sub{color:var(--muted);margin:.2rem 0 0}
.tiles{display:grid;gap:var(--space-3);grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));margin:var(--space-4) 0}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-m);padding:var(--space-4);box-shadow:var(--shadow-1);text-decoration:none;color:inherit;display:block}
.tile span{display:block;font-size:.82rem;color:var(--muted)}.tile strong{display:block;font:600 1.6rem/1.2 var(--serif);color:var(--navy)}.tile em{font-style:normal;font-size:.8rem;color:var(--muted)}
.tile.attn{border-color:var(--gold);background:var(--gold-soft)}
@media (max-width:560px){.tiles{grid-template-columns:1fr 1fr}}
.list{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:var(--radius-m);background:var(--surface);overflow:hidden}
.list li{border-top:1px solid var(--line)}.list li:first-child{border-top:0}
.list a.row,.list .row{display:flex;gap:var(--space-3);align-items:center;justify-content:space-between;padding:.85rem 1rem;min-height:56px;text-decoration:none;color:inherit}
.list .row small{display:block;color:var(--muted)}.list a.row:hover{background:var(--mist)}
.quick{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:var(--space-4) 0}
.quick .btn,.quick button{min-height:48px}
.copybox{white-space:pre-wrap;background:var(--mist);border:1px solid var(--line);border-radius:var(--radius-s);padding:var(--space-3);font:400 .92rem/1.5 var(--sans);max-height:320px;overflow:auto}
.vcard{display:grid;grid-template-columns:96px 1fr;gap:var(--space-3);align-items:center}
.vcard img{width:96px;height:72px;object-fit:cover;border-radius:var(--radius-s);background:var(--mist)}
.vgrid{display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.vgrid .card img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-s);background:var(--mist);margin-bottom:var(--space-3)}
.gallery{display:grid;gap:var(--space-2);grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}.gallery img{width:100%;border-radius:var(--radius-s)}
@media (max-width:560px){.content input,.content select,.content textarea{font-size:16px}}  /* stops iOS zoom on focus */
@media (max-width:560px){.content .btn,.content button:not(.link),.content .btn.small{min-height:44px;padding-top:.6rem;padding-bottom:.6rem}.content form.inline{display:flex;flex-wrap:wrap;gap:.5rem;align-items:flex-end}}