/* iHouzez shared design tokens and primitives (website + app) — same look as HappySeller:
   GREEN = the one main action, INDIGO = every other button (white with indigo outline) and links,
   DEEP INDIGO = menu bar and footer, LAVENDER = soft accents. Day look only */
:root {
  --deep: #1c1f3a;
  --indigo: #3b3fc4;
  --violet: #5866e8;
  --green: #0f9d6e;
  --green-600: #0c8a60;
  --green-50: #e7f8f1;
  --red: #c42b2b;
  --red-50: #fdecec;
  --bg: #eef2f7;
  --surface: #ffffff;
  --ink: #1c1f3a;
  --title: #2a2c3d;
  --muted: #5a6a85;
  --soft-muted: #6b6f8e;
  --line: #dde4ee;
  --line-2: #c9d3e1;
  --lav: #f7f4fe;
  --lav-2: #ece6fc;
  --lav-line: #e6def9;
  --tone-purple: #ede9fe; --tone-purple-ink: #6d28d9;
  --tone-blue: #dbeafe; --tone-blue-ink: #1d4ed8;
  --tone-amber: #fef3c7; --tone-amber-ink: #b45309;
  --tone-pink: #fce7f3; --tone-pink-ink: #be185d;
  --tone-teal: #ccfbf1; --tone-teal-ink: #0f766e;
  --tone-green: #d1fae5; --tone-green-ink: #047857;
  --font: Montserrat, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --logo-font: Montserrat, system-ui, sans-serif;
  --radius: 14px;
  --shadow: none;
  --shadow-lg: none;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-weight: 700; letter-spacing: -0.015em; text-wrap: balance; margin: 0; color: var(--title); }
p { margin: 0; }
a { color: var(--indigo); }
img { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid rgba(88, 102, 232, .45); outline-offset: 2px; }

/* The name is the logo: a heavy, slanted wordmark in the style of Bolt (Montserrat Black Italic) */
.brand, .logo-type { font-family: var(--logo-font); font-weight: 900; font-style: italic; letter-spacing: -0.045em; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 28px; color: var(--indigo); text-decoration: none; line-height: 1; padding-right: .08em; }
.brand img { width: 34px; height: 34px; border-radius: 9px; }

.btn { border: 2px solid var(--indigo); border-radius: 10px; padding: 11px 20px; font-weight: 700; cursor: pointer; min-height: 48px; background: #fff; color: var(--indigo); text-align: center; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; line-height: 1.2; transition: background .12s, border-color .12s; }
.btn svg { width: 18px; height: 18px; flex: none; }
@media (hover: hover) { .btn:hover { background: var(--lav); } }
.btn.primary { background: var(--green); border-color: var(--green); color: #fff; }
@media (hover: hover) { .btn.primary:hover { background: var(--green-600); border-color: var(--green-600); } }
.btn.ghost { background: #fff; color: var(--indigo); border-color: var(--indigo); }
.btn.small { padding: 6px 12px; min-height: 38px; font-size: 14px; border-radius: 9px; }
.btn.danger { background: #fff; color: var(--red); border: 1px solid #f0c4c4; }
@media (hover: hover) { .btn.danger:hover { background: var(--red-50); } }
.btn.block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: default; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); }
.fine { font-size: 13px; color: var(--muted); }
.pill { display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--green-50); color: var(--green); }
.pill.warn { background: var(--tone-amber); color: var(--tone-amber-ink); }
.tick { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: #e3f8ef; color: var(--green); flex: none; }
.tick svg { width: 11px; height: 11px; }

/* Colored icon tiles — same tones as HappySeller */
.tone-purple { background: var(--tone-purple); color: var(--tone-purple-ink); }
.tone-blue { background: var(--tone-blue); color: var(--tone-blue-ink); }
.tone-amber { background: var(--tone-amber); color: var(--tone-amber-ink); }
.tone-pink { background: var(--tone-pink); color: var(--tone-pink-ink); }
.tone-teal { background: var(--tone-teal); color: var(--tone-teal-ink); }
.tone-green { background: var(--tone-green); color: var(--tone-green-ink); }
.tone-gray { background: #eef0f4; color: #5b6275; }

/* Link buttons (thank-you page, sign-in page, bio page) */
.link-list { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.link-btn { display: flex; align-items: center; gap: 12px; width: 100%; background: #fff; border: 1px solid var(--lav-line); border-radius: 14px; padding: 10px 14px 10px 10px; color: var(--deep); text-decoration: none; font-weight: 600; text-align: left; transition: border-color .12s, transform .12s; }
@media (hover: hover) { .link-btn:hover { border-color: var(--violet); transform: translateY(-1px); } }
.link-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; }
.link-ic svg { width: 20px; height: 20px; }
.link-ic.has-thumb { width: 40px; height: 52px; border-radius: 8px; overflow: hidden; background: #fff; border: 1px solid #e4e7f2; }
.link-ic.has-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.link-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.link-arrow { color: var(--violet); font-size: 22px; line-height: 1; }

/* The agent's own colors and headline font (sign-in page, thank-you page, door sign, bio page) */
.branded {
  --green: var(--brand-btn); --green-600: color-mix(in srgb, var(--brand-btn) 82%, #000); --green-50: color-mix(in srgb, var(--brand-btn) 10%, #fff);
  --violet: var(--brand-hl); --indigo: color-mix(in srgb, var(--brand-hl) 80%, #000);
  --lav: color-mix(in srgb, var(--brand-hl) 6%, #fff); --lav-2: color-mix(in srgb, var(--brand-hl) 14%, #fff); --lav-line: color-mix(in srgb, var(--brand-hl) 22%, #fff);
}
.branded h1, .branded h2, .branded .bc-name, .branded .bio-avatar { font-family: var(--brand-font), Montserrat, system-ui, sans-serif; }

/* Logo with the tagline underneath: "Open House Pal" */
.brand.stacked { flex-direction: column; align-items: flex-start; gap: 5px; }
.tagline { font-family: var(--font); font-style: normal; font-weight: 600; font-size: 12px; letter-spacing: .02em; color: var(--soft-muted); line-height: 1; padding-left: 1px; white-space: nowrap; }
.topbar .tagline, .site-foot .tagline { color: #a9acd2; }
@media (max-width: 560px) { .tagline { font-size: 10.5px; } }
/* "OPEN HOUSE PAL" in small capitals, spaced to about the logo's width */
.tagline { text-transform: uppercase; letter-spacing: .075em; font-size: 10.5px; font-weight: 700; padding-left: 2px; }
@media (max-width: 560px) { .tagline { font-size: 9px; letter-spacing: .06em; } }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* iPhones zoom the whole page in when you tap a box whose text is smaller than 16px, and the zoomed page then slides
   left and right. Every typing box is at least 16px on phones so that never happens (Sam, Oct 26) */
@media (max-width: 860px) { input, select, textarea { font-size: max(16px, 1em) !important; } }
/* Phones: no double-tap zoom (a quick double tap while scrolling zoomed the page in, and a zoomed page slides side to side —
   pinch to zoom still works), and iPhones never enlarge text on their own (Sam, Oct 26) */
html { touch-action: manipulation; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }