/* Kingdom Keys Realty — design tokens */
:root{
  --ink:#0a0a0a; --ink-2:#181818; --accent:#c9a227; --accent-dk:#8a6d12; --accent-lt:#f7f0d9;
  --paper:#fdfcfa; --card:#ffffff; --line:#e3e8ea; --muted:#5d6b74; --gold:#c9a227;
  --ok:#12805c; --warn:#b7791f; --err:#b42318;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --shadow:0 1px 2px rgba(10,10,10,.06),0 8px 24px rgba(10,10,10,.06);
  --radius:14px;
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bot:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.55;
  /* the bug in the screenshots: wide children pushing the page sideways */
  overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto}
h1,h2,h3,h4{font-family:var(--serif);line-height:1.15;margin:0 0 .5em;
  /* long single-word headings must wrap, never overflow the viewport */
  overflow-wrap:anywhere; hyphens:auto;}
h1{font-size:clamp(1.9rem,7vw,3.6rem)}
h2{font-size:clamp(1.45rem,5.2vw,2.4rem)}
h3{font-size:clamp(1.1rem,3.6vw,1.4rem)}
p{margin:0 0 1em}
a{color:var(--accent-dk)}
.wrap{width:100%;max-width:1120px;margin:0 auto;padding-inline:clamp(16px,5vw,40px)}
.narrow{max-width:760px}
.eyebrow{font-family:var(--sans);font-size:clamp(.68rem,2.4vw,.8rem);letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);font-weight:700;margin:0 0 .75rem;
  overflow-wrap:anywhere}
.muted{color:var(--muted)}
.center{text-align:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.85rem 1.5rem;border-radius:999px;border:1px solid transparent;font:inherit;
  font-weight:600;cursor:pointer;text-decoration:none;min-height:48px;transition:.15s}
.btn-primary{background:linear-gradient(135deg,#e2c25a,#c9a227 55%,#a8861b);color:#111}
.btn-primary:hover{filter:brightness(1.08)}
.brandmark{display:inline-flex;align-items:center;gap:10px}
.brandmark img{display:block;height:42px;width:42px;border-radius:8px}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent-dk)}
.btn-sm{padding:.45rem .85rem;min-height:36px;font-size:.85rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(18px,4vw,28px);box-shadow:var(--shadow)}
.grid{display:grid;gap:clamp(14px,2.5vw,22px)}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr))}
.pill{display:inline-block;padding:.2rem .6rem;border-radius:999px;font-size:.72rem;
  font-weight:700;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.pill-ok{background:#e7f5f0;color:var(--ok)}
.pill-wait{background:#fdf3e3;color:var(--warn)}
.pill-off{background:#eef1f2;color:var(--muted)}
.pill-err{background:#fdecea;color:var(--err)}
/* Shared by both consoles: the box used whenever the screen has to admit something about
   itself — sample data, a demo feed, a figure that came out of OCR. */
.warnbox{background:#fdf3e3;border:1px solid #f0d9a8;border-radius:12px;padding:14px;font-size:.87rem}
.pill-accent{background:var(--accent-lt);color:var(--accent-dk)}
table{width:100%;border-collapse:collapse;font-size:.9rem}
th,td{text-align:left;padding:.6rem .7rem;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700}
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}
input,select,textarea{width:100%;padding:.7rem .8rem;border:1px solid var(--line);
  border-radius:10px;font:inherit;background:#fff;color:var(--ink);min-height:46px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
label{display:block;font-size:.8rem;font-weight:600;margin:0 0 .3rem}
.field{margin-bottom:.9rem}
/* .btn sets display:inline-flex, which outranks the browser's [hidden] rule.
   Without this, hiding a button by setting .hidden silently does nothing. */
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}