:root {
  --navy-950: #061a38;
  --navy-900: #0a2d62;
  --navy-800: #123f7d;
  --blue-700: #1550a1;
  --blue-600: #2163bd;
  --blue-100: #e8f1ff;
  --gold-500: #e6b735;
  --gold-400: #f0c94f;
  --gold-100: #fff5cf;
  --green-800: #184d3c;
  --green-700: #23644f;
  --green-100: #e8f5ef;
  --cream-100: #fbf7ec;
  --cream-200: #f3ecd9;
  --paper: #ffffff;
  --ink-950: #111c2d;
  --ink-800: #26364d;
  --ink-600: #5e6b7e;
  --ink-500: #788396;
  --line: #dce2eb;
  --line-strong: #c7d0dd;
  --danger: #b42318;
  --danger-soft: #fff0ee;
  --purple: #6d45aa;
  --purple-soft: #f2edfb;
  --shadow-xs: 0 1px 2px rgba(6, 26, 56, 0.05);
  --shadow-sm: 0 8px 24px rgba(6, 26, 56, 0.08);
  --shadow-md: 0 18px 50px rgba(6, 26, 56, 0.12);
  --shadow-lg: 0 28px 80px rgba(6, 26, 56, 0.18);
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 26px;
  --radius-xl: 34px;
  --shell: 1180px;
  --header-height: 74px;
  --mobile-nav-height: 72px;
  --ease: 180ms ease;
}

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

html {
  min-width: 320px;
  scroll-behavior: smooth;
  background: var(--paper);
  color: var(--ink-950);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink-950);
  background: var(--paper);
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body.modal-open { overflow: hidden; }

button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
svg { overflow: visible; }
p, h1, h2, h3, h4, ul, ol, dl, dd { margin-top: 0; }

h1, h2, h3, h4 {
  color: var(--ink-950);
  line-height: 1.08;
  letter-spacing: -0.032em;
}

h1 { font-size: clamp(2.5rem, 6vw, 5.4rem); margin-bottom: 1.25rem; }
h2 { font-size: clamp(2rem, 4vw, 3.45rem); margin-bottom: 1rem; }
h3 { font-size: 1.2rem; margin-bottom: 0.55rem; }

::selection { color: var(--navy-950); background: var(--gold-400); }

:focus-visible {
  outline: 3px solid rgba(33, 99, 189, 0.36);
  outline-offset: 3px;
}

[hidden] { display: none !important; }

.shell {
  width: min(calc(100% - 40px), var(--shell));
  margin-inline: auto;
}

.narrow-shell { width: min(calc(100% - 40px), 760px); }
.section { padding-block: clamp(72px, 8vw, 118px); }
.section-cream { background: var(--cream-100); }
.section-blue {
  color: white;
  background:
    radial-gradient(circle at 8% 10%, rgba(255, 255, 255, 0.11), transparent 28%),
    radial-gradient(circle at 92% 80%, rgba(230, 183, 53, 0.15), transparent 34%),
    var(--navy-900);
}
.section-blue h2,
.section-blue h3,
.section-blue .eyebrow { color: white; }
.section-blue .section-heading > p:last-child { color: rgba(255,255,255,.72); }

.skip-link {
  position: fixed;
  z-index: 10000;
  left: 12px;
  top: 12px;
  padding: 10px 14px;
  border-radius: 8px;
  color: white;
  background: var(--navy-900);
  transform: translateY(-180%);
  transition: transform var(--ease);
}
.skip-link:focus { transform: translateY(0); }

.icon {
  display: inline-flex;
  width: 1.15em;
  height: 1.15em;
  flex: 0 0 auto;
}
.icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.8rem;
  color: var(--blue-700);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  line-height: 1.25;
  text-transform: uppercase;
}
.pulse-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--gold-500);
  box-shadow: 0 0 0 0 rgba(230,183,53,.65);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  70% { box-shadow: 0 0 0 9px rgba(230,183,53,0); }
  100% { box-shadow: 0 0 0 0 rgba(230,183,53,0); }
}

.button {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.75rem 1.05rem;
  border: 1px solid transparent;
  border-radius: 12px;
  font-weight: 780;
  line-height: 1.15;
  text-align: center;
  transition: transform var(--ease), box-shadow var(--ease), background var(--ease), border-color var(--ease), color var(--ease), opacity var(--ease);
}
.button:hover:not(:disabled) { transform: translateY(-1px); }
.button:active:not(:disabled) { transform: translateY(0); }
.button:disabled { cursor: not-allowed; opacity: 0.5; }
.button-primary { color: white; background: var(--navy-900); box-shadow: 0 9px 24px rgba(10,45,98,.2); }
.button-primary:hover:not(:disabled) { background: var(--navy-800); box-shadow: 0 12px 28px rgba(10,45,98,.27); }
.button-gold { color: var(--navy-950); background: var(--gold-500); box-shadow: 0 9px 22px rgba(230,183,53,.23); }
.button-gold:hover:not(:disabled) { background: var(--gold-400); }
.button-light { color: var(--navy-900); background: white; box-shadow: var(--shadow-sm); }
.button-outline { color: var(--navy-900); border-color: var(--line-strong); background: white; }
.button-outline:hover:not(:disabled) { border-color: var(--blue-600); background: var(--blue-100); }
.button-ghost { color: var(--ink-800); border-color: transparent; background: transparent; }
.button-ghost:hover:not(:disabled) { background: rgba(10,45,98,.06); }
.button-warning { color: #7a4a00; border-color: #f0ca6a; background: #fff8df; }
.button-danger { color: white; background: var(--danger); }
.button-large { min-height: 54px; padding: 0.95rem 1.35rem; border-radius: 14px; }
.button-small { min-height: 36px; padding: 0.48rem 0.76rem; border-radius: 9px; font-size: .86rem; }
.full-button { width: 100%; }
.center-actions { display: flex; justify-content: center; margin-top: 2.25rem; }
.stack-actions { display: grid; gap: .75rem; }

.icon-button {
  display: inline-flex;
  width: 42px;
  height: 42px;
  padding: 0;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 11px;
  color: var(--ink-800);
  background: white;
  transition: background var(--ease), border var(--ease), color var(--ease), transform var(--ease);
}
.icon-button:hover { color: var(--navy-900); border-color: var(--blue-600); background: var(--blue-100); transform: translateY(-1px); }

.site-header {
  position: sticky;
  z-index: 80;
  top: 0;
  height: var(--header-height);
  border-bottom: 1px solid rgba(199,208,221,.8);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(18px);
}
.header-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.brand, .footer-brand, .owner-brand {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
}
.brand img { width: 44px; height: 44px; }
.brand-copy, .footer-brand span, .owner-brand span { display: grid; line-height: 1.08; }
.brand-copy strong, .footer-brand strong, .owner-brand strong { color: var(--navy-900); font-size: .98rem; letter-spacing: -.015em; }
.brand-copy small, .footer-brand small, .owner-brand small { margin-top: .22rem; color: var(--ink-600); font-size: .69rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.desktop-nav { display: flex; height: 100%; align-items: center; gap: .25rem; }
.desktop-nav a {
  position: relative;
  display: flex;
  height: 100%;
  align-items: center;
  padding-inline: .88rem;
  color: var(--ink-600);
  font-size: .92rem;
  font-weight: 720;
}
.desktop-nav a::after { position: absolute; right: .9rem; bottom: -1px; left: .9rem; height: 3px; border-radius: 3px 3px 0 0; content: ""; background: var(--gold-500); transform: scaleX(0); transition: transform var(--ease); }
.desktop-nav a:hover, .desktop-nav a.active { color: var(--navy-900); }
.desktop-nav a.active::after { transform: scaleX(1); }
.header-actions { display: flex; align-items: center; gap: .6rem; }
.install-trigger { color: var(--navy-900); }

.mobile-nav {
  position: fixed;
  z-index: 90;
  right: 0;
  bottom: 0;
  left: 0;
  display: none;
  height: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom));
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(18px);
}
.mobile-nav a {
  position: relative;
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 2px;
  color: var(--ink-500);
}
.mobile-nav a > span { font-size: 1.25rem; line-height: 1; }
.mobile-nav a small { font-size: .66rem; font-weight: 780; }
.mobile-nav a.active { color: var(--navy-900); }
.mobile-nav .mobile-primary > span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  margin-top: -22px;
  border: 4px solid white;
  border-radius: 50%;
  color: var(--navy-950);
  background: var(--gold-500);
  box-shadow: var(--shadow-sm);
}

.mode-banner {
  display: flex;
  min-height: 43px;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  padding: .62rem 20px;
  font-size: .82rem;
}
.mode-banner .icon { width: 1.05rem; height: 1.05rem; }
.mode-banner a { margin-left: .2rem; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.mode-local { color: #654d0d; border-bottom: 1px solid #f3d983; background: #fff8da; }
.mode-cloud { color: #16533e; border-bottom: 1px solid #b8e0d0; background: #eaf7f1; }

.hero {
  position: relative;
  overflow: hidden;
  min-height: min(790px, calc(100vh - var(--header-height)));
  display: flex;
  align-items: center;
  padding-block: clamp(70px, 8vw, 112px);
  background:
    linear-gradient(100deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.92) 42%, rgba(244,248,253,.76) 100%),
    radial-gradient(circle at 84% 20%, rgba(230,183,53,.19), transparent 25%),
    #f7f9fc;
}
.hero::before {
  position: absolute;
  width: 480px;
  height: 480px;
  right: -180px;
  top: -220px;
  border: 1px solid rgba(10,45,98,.09);
  border-radius: 50%;
  content: "";
  box-shadow: 0 0 0 70px rgba(10,45,98,.025), 0 0 0 150px rgba(10,45,98,.02);
}
.hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, .95fr) minmax(430px, 1.05fr); align-items: center; gap: clamp(40px, 7vw, 90px); }
.hero-copy { position: relative; z-index: 2; }
.hero-copy h1 { max-width: 680px; margin-bottom: 1.2rem; }
.hero-copy h1 em { color: var(--blue-700); font-family: Georgia, "Times New Roman", serif; font-weight: 500; }
.hero-lede { max-width: 650px; margin-bottom: 1.9rem; color: var(--ink-600); font-size: clamp(1.05rem, 1.55vw, 1.22rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; }
.hero-trust { display: flex; flex-wrap: wrap; gap: 1rem 1.35rem; margin-top: 1.55rem; color: var(--ink-600); font-size: .86rem; font-weight: 680; }
.hero-trust span { display: inline-flex; align-items: center; gap: .38rem; }
.hero-trust .icon { color: var(--green-700); }
.hero-visual { position: relative; min-height: 500px; display: flex; align-items: center; justify-content: center; }
.hero-visual::before { position: absolute; inset: 13% 4% 9% 6%; border-radius: 44% 56% 50% 50% / 50% 42% 58% 50%; content: ""; background: linear-gradient(145deg, var(--blue-100), #f8efd0); transform: rotate(-5deg); }
.hero-visual > img { position: relative; z-index: 2; width: 108%; max-width: none; filter: drop-shadow(0 26px 24px rgba(8,25,51,.22)); }
.hero-card { position: absolute; z-index: 3; display: flex; align-items: center; gap: .8rem; min-width: 222px; padding: .8rem 1rem; border: 1px solid rgba(255,255,255,.9); border-radius: 15px; background: rgba(255,255,255,.92); box-shadow: var(--shadow-md); backdrop-filter: blur(10px); }
.hero-card > span { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 11px; color: var(--navy-900); background: var(--gold-100); }
.hero-card div { display: grid; }
.hero-card strong { font-size: .87rem; }
.hero-card small { margin-top: .15rem; color: var(--ink-600); font-size: .72rem; }
.hero-card-top { top: 4%; left: 0; }
.hero-card-bottom { right: 0; bottom: 3%; }

.trust-strip { border-block: 1px solid var(--line); background: white; }
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.trust-grid > div { display: grid; gap: .15rem; padding: 1.25rem 1.4rem; border-right: 1px solid var(--line); }
.trust-grid > div:first-child { border-left: 1px solid var(--line); }
.trust-grid strong { color: var(--navy-900); font-size: .96rem; }
.trust-grid small { color: var(--ink-600); font-size: .74rem; }

.section-heading { max-width: 770px; margin-bottom: clamp(2rem, 4vw, 3.4rem); }
.section-heading h2 { margin-bottom: .85rem; }
.section-heading > p:last-child { max-width: 700px; color: var(--ink-600); font-size: 1rem; }
.section-heading-center { margin-inline: auto; text-align: center; }
.section-heading-center .eyebrow { justify-content: center; }
.section-heading-center > p:last-child { margin-inline: auto; }

.service-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.15rem; }
.featured-services { grid-template-columns: repeat(4, minmax(0,1fr)); }
.service-card {
  position: relative;
  display: flex;
  min-height: 300px;
  flex-direction: column;
  padding: 1.55rem;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: white;
  box-shadow: var(--shadow-xs);
  transition: transform var(--ease), border var(--ease), box-shadow var(--ease);
}
.service-card::after { position: absolute; right: -36px; bottom: -46px; width: 130px; height: 130px; border: 1px solid rgba(10,45,98,.08); border-radius: 50%; content: ""; }
.service-card:hover { transform: translateY(-4px); border-color: #b8c7dc; box-shadow: var(--shadow-md); }
.service-card-top { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; }
.service-card-top > span:first-child { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 14px; color: var(--blue-700); background: var(--blue-100); }
.service-card h3 { position: relative; z-index: 1; margin: 1.2rem 0 .6rem; font-size: 1.28rem; }
.service-card p { position: relative; z-index: 1; flex: 1; color: var(--ink-600); font-size: .9rem; }
.service-card-bottom { position: relative; z-index: 1; display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-top: 1.25rem; }
.service-card-bottom strong { color: var(--navy-900); font-size: 1.22rem; }
.service-card-bottom a { display: inline-flex; align-items: center; gap: .25rem; color: var(--blue-700); font-size: .85rem; font-weight: 800; }
.service-category { color: var(--ink-500); font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.service-badge { padding: .32rem .52rem; border-radius: 999px; color: #6e4d00; background: var(--gold-100); font-size: .65rem; font-weight: 800; }
.service-section + .service-section { margin-top: 4rem; }
.service-section-title { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.4rem; }
.service-section-title h2 { margin: 0; font-size: 1.7rem; }
.service-section-title::after { height: 1px; flex: 1; content: ""; background: var(--line); }
.pricing-notice { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; padding: 1.2rem 1.3rem; margin-bottom: 2rem; border: 1px solid #f1d57a; border-radius: var(--radius); background: #fff9e6; }
.pricing-notice > span { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 11px; color: #6f4b00; background: var(--gold-100); }
.pricing-notice p { margin: .25rem 0 0; color: #66572d; font-size: .88rem; }
.policy-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 3rem; }
.policy-grid > article { padding: 1.35rem; border-radius: var(--radius); background: var(--cream-100); }
.policy-grid p { margin: 0; color: var(--ink-600); font-size: .88rem; }

.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.process-card { position: relative; min-height: 230px; padding: 1.55rem; overflow: hidden; border: 1px solid rgba(255,255,255,.15); border-radius: var(--radius-lg); background: rgba(255,255,255,.075); }
.process-card > span { display: block; margin-bottom: 2.6rem; color: var(--gold-400); font-size: .78rem; font-weight: 850; letter-spacing: .13em; }
.process-card h3 { font-size: 1.35rem; }
.process-card p { margin: 0; color: rgba(255,255,255,.7); font-size: .9rem; }
.process-card::after { position: absolute; right: -26px; bottom: -32px; width: 100px; height: 100px; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; content: ""; }

.split-section { display: grid; grid-template-columns: minmax(0, .95fr) minmax(340px, .7fr); align-items: center; gap: clamp(50px, 8vw, 110px); }
.check-list { display: grid; gap: .85rem; padding: 0; margin: 0 0 2rem; list-style: none; color: var(--ink-800); }
.check-list li { display: flex; align-items: center; gap: .7rem; }
.check-list .icon { display: grid; width: 25px; height: 25px; place-items: center; padding: 4px; border-radius: 50%; color: var(--green-700); background: var(--green-100); }
.phone-mockup { position: relative; width: min(100%, 355px); min-height: 670px; padding: 18px 12px 12px; margin-inline: auto; border: 9px solid var(--ink-950); border-radius: 48px; background: var(--ink-950); box-shadow: var(--shadow-lg); transform: rotate(2deg); }
.phone-speaker { width: 86px; height: 20px; margin: -8px auto 8px; border-radius: 0 0 13px 13px; background: var(--ink-950); }
.phone-screen { min-height: 620px; padding: 1.2rem; border-radius: 33px; background: linear-gradient(180deg, #f7faff 0%, white 34%); }
.mini-brand { display: flex; align-items: center; gap: .5rem; margin-bottom: 2.2rem; color: var(--navy-900); font-size: .82rem; }
.phone-screen > h3 { margin: 1rem 0 .25rem; font-size: 1.38rem; }
.phone-screen > p { color: var(--ink-600); font-size: .7rem; }
.mini-timeline { position: relative; display: grid; gap: .9rem; margin: 2rem 0; }
.mini-timeline::before { position: absolute; top: 7px; bottom: 7px; left: 6px; width: 2px; content: ""; background: var(--line); }
.mini-timeline > div { position: relative; display: flex; align-items: center; gap: .65rem; color: var(--ink-500); }
.mini-timeline span { position: relative; z-index: 1; width: 14px; height: 14px; border: 3px solid white; border-radius: 50%; background: var(--line-strong); box-shadow: 0 0 0 1px var(--line); }
.mini-timeline .done span { background: var(--green-700); }
.mini-timeline small { font-size: .73rem; font-weight: 680; }
.mini-card { display: grid; grid-template-columns: 1fr auto; gap: .45rem; padding: 1rem; border: 1px solid var(--line); border-radius: 14px; background: white; box-shadow: var(--shadow-sm); }
.mini-card strong { font-size: .82rem; }
.mini-card > span { color: var(--navy-900); font-weight: 850; }
.mini-card button { grid-column: 1 / -1; padding: .6rem; border: 0; border-radius: 9px; color: white; background: var(--navy-900); font-size: .75rem; font-weight: 800; }

.callout-grid { display: grid; grid-template-columns: 1.3fr .7fr; align-items: center; gap: 3rem; }
.callout-grid .section-heading { margin-bottom: 0; }
.callout-actions { display: grid; gap: .75rem; }
.three-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.feature-grid article { padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: white; }
.feature-grid article > span { display: grid; width: 46px; height: 46px; place-items: center; margin-bottom: 1.15rem; border-radius: 13px; color: var(--blue-700); background: var(--blue-100); }
.feature-grid p { margin: 0; color: var(--ink-600); font-size: .9rem; }

.page-hero { padding-block: clamp(64px, 8vw, 100px); color: white; background: radial-gradient(circle at 80% 10%, rgba(230,183,53,.17), transparent 35%), var(--navy-900); }
.page-hero h1, .page-hero h2, .page-hero .eyebrow { color: white; }
.page-hero .section-heading { margin-bottom: 0; }
.page-hero .section-heading > p:last-child { color: rgba(255,255,255,.72); }
.compact-hero { padding-block: clamp(52px, 6vw, 76px); }

.form-card, .portal-card, .owner-section, .sidebar-card, .settings-card, .diagnostic-card, .confirmation-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: white;
  box-shadow: var(--shadow-xs);
}
.booking-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; align-items: start; gap: 1.5rem; }
.booking-form { padding: clamp(1.25rem, 3vw, 2rem); }
.booking-sidebar { min-width: 0; }
.sidebar-card { padding: 1.5rem; }
.sidebar-card > img { margin-bottom: 1rem; }
.sidebar-card ol { display: grid; gap: 1rem; padding: 0; margin: 1.5rem 0; list-style: none; }
.sidebar-card li { display: grid; grid-template-columns: 28px 1fr; gap: .7rem; color: var(--ink-600); font-size: .85rem; }
.sidebar-card li > span { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 8px; color: var(--navy-900); background: var(--gold-100); font-size: .72rem; font-weight: 850; }
.contact-line { display: flex; align-items: center; gap: .7rem; padding: .9rem 0 0; border-top: 1px solid var(--line); color: var(--navy-900); }
.contact-line > span { display: grid; }
.contact-line small { color: var(--ink-600); }
.sticky-card { position: sticky; top: calc(var(--header-height) + 22px); }

.form-section { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.05rem; padding: 1.6rem 0; border-bottom: 1px solid var(--line); }
.form-section:first-child { padding-top: 0; }
.form-section:last-of-type { border-bottom: 0; }
.form-section-heading { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: .8rem; margin-bottom: .2rem; }
.form-section-heading > span { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; border-radius: 10px; color: var(--navy-950); background: var(--gold-500); font-size: .78rem; font-weight: 850; }
.form-section-heading h2 { margin: 0 0 .2rem; font-size: 1.25rem; }
.form-section-heading p { margin: 0; color: var(--ink-600); font-size: .83rem; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; }
.compact-grid { gap: .8rem; }
.field { display: grid; align-content: start; gap: .42rem; min-width: 0; }
.field label, .upload-field > label { color: var(--ink-800); font-size: .79rem; font-weight: 770; }
.field label span, .upload-field > label span { color: var(--ink-500); font-weight: 560; }
.field > small, .upload-field small { color: var(--ink-500); font-size: .7rem; line-height: 1.4; }
.field-wide, .full-field { grid-column: 1 / -1; }
input, select, textarea {
  width: 100%;
  min-height: 46px;
  padding: .72rem .82rem;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  color: var(--ink-950);
  background: white;
  box-shadow: inset 0 1px 1px rgba(6,26,56,.025);
  transition: border var(--ease), box-shadow var(--ease), background var(--ease);
}
textarea { min-height: 100px; resize: vertical; line-height: 1.45; }
select { padding-right: 2.3rem; }
input::placeholder, textarea::placeholder { color: #9aa3b1; }
input:hover, select:hover, textarea:hover { border-color: #aab7c8; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--blue-600); box-shadow: 0 0 0 3px rgba(33,99,189,.13); }
input[type="checkbox"], input[type="radio"] { width: 18px; min-height: 18px; accent-color: var(--navy-900); box-shadow: none; }
.input-action { display: flex; gap: .55rem; }
.input-action input { flex: 1; min-width: 0; }
.check-field { padding: .9rem 1rem; border: 1px solid var(--line); border-radius: 12px; background: #fbfcfe; }
.check-field > label { display: flex; align-items: flex-start; gap: .72rem; cursor: pointer; }
.check-field input { margin-top: 2px; flex: 0 0 auto; }
.check-field span { display: grid; gap: .12rem; }
.check-field strong { font-size: .84rem; }
.check-field small { color: var(--ink-600); font-size: .72rem; }
.upload-field input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.photo-preview { display: flex; min-height: 116px; align-items: center; justify-content: center; flex-direction: column; gap: .55rem; padding: 1rem; overflow: hidden; border: 1px dashed #aab7c8; border-radius: 12px; color: var(--ink-600); background: #fafbfd; cursor: pointer; text-align: center; }
.photo-preview p { margin: 0; font-size: .78rem; }
.photo-preview > span { color: var(--blue-700); font-size: 1.5rem; }
.photo-preview img { width: 100%; max-height: 240px; border-radius: 10px; object-fit: cover; }
.photo-preview .button { margin-top: .3rem; }
.inline-result { padding: .85rem 1rem; border: 1px solid #b7d4c6; border-radius: 11px; color: #164f3b; background: var(--green-100); font-size: .82rem; }
.inline-warning { padding: .8rem 1rem; border-radius: 10px; color: #7b4e00; background: #fff7db; font-size: .8rem; }
.error-text { color: var(--danger); font-size: .75rem; }
.form-submit-row { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; padding-top: 1.5rem; }
.form-submit-row > div { display: grid; }
.form-submit-row small { max-width: 450px; color: var(--ink-600); font-size: .72rem; }
.empty-state, .empty-inline { display: grid; place-items: center; gap: .5rem; padding: 1.5rem; border: 1px dashed var(--line-strong); border-radius: 14px; color: var(--ink-600); background: #fafbfd; text-align: center; }
.empty-state p, .empty-inline p { margin: 0; }
.empty-inline { min-height: 86px; font-size: .83rem; }
.fine-print { margin: .9rem 0 0; color: var(--ink-500); font-size: .7rem; line-height: 1.45; }

.booking-confirmation-bg { min-height: calc(100vh - var(--header-height)); display: grid; place-items: center; }
.booking-success { max-width: 650px; padding: 2rem; border-radius: var(--radius-xl); color: var(--ink-950); background: white; box-shadow: var(--shadow-lg); text-align: center; }
.booking-success h1 { margin: .65rem 0 .5rem; color: var(--navy-900); font-size: clamp(2.4rem, 7vw, 4rem); }
.booking-success > p { color: var(--ink-600); }
.success-mark { display: grid; width: 72px; height: 72px; place-items: center; margin: 0 auto; border-radius: 50%; color: var(--green-700); background: var(--green-100); font-size: 2rem; }
.confirmation-card { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; margin: 1.5rem 0; overflow: hidden; text-align: left; }
.confirmation-card > div { display: grid; gap: .18rem; padding: 1rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.confirmation-card > div:nth-child(even) { border-right: 0; }
.confirmation-card > div:nth-last-child(-n+2) { border-bottom: 0; }
.confirmation-card span { color: var(--ink-500); font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; }
.confirmation-card strong { font-size: .88rem; }

.track-hero { min-height: calc(100vh - var(--header-height)); display: grid; place-items: center; padding-block: 72px; color: white; background: radial-gradient(circle at 82% 18%, rgba(230,183,53,.21), transparent 28%), linear-gradient(135deg, var(--navy-950), var(--navy-800)); }
.track-grid { display: grid; grid-template-columns: 1fr minmax(330px, .72fr); align-items: center; gap: clamp(40px, 8vw, 100px); }
.track-copy h1 { color: white; }
.track-copy > p { max-width: 640px; color: rgba(255,255,255,.72); font-size: 1.08rem; }
.tracker-feature-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; margin-top: 2rem; }
.tracker-feature-list span { display: flex; align-items: center; gap: .55rem; color: rgba(255,255,255,.84); font-size: .82rem; }
.tracker-feature-list .icon { color: var(--gold-400); }
.track-card { padding: clamp(1.4rem, 3vw, 2rem); border-radius: var(--radius-lg); color: var(--ink-950); background: white; box-shadow: var(--shadow-lg); }
.track-card > img { margin-bottom: 1rem; }
.track-card h2 { font-size: 1.8rem; }
.track-card > p { color: var(--ink-600); }
.track-card .field + .field { margin-top: .9rem; }
.track-card .button { margin-top: 1rem; }
.security-note { display: flex; align-items: flex-start; gap: .55rem; margin-top: 1rem; color: var(--ink-500); font-size: .7rem; }
.demo-hint { margin-top: 1rem; padding: .75rem; border-radius: 10px; color: #674b00; background: var(--gold-100); font-size: .72rem; }
.code-chip { display: inline-flex; padding: .3rem .48rem; border-radius: 7px; color: var(--navy-900); background: var(--blue-100); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 800; }

.portal-header { color: white; background: linear-gradient(135deg, var(--navy-950), var(--navy-800)); }
.portal-header-grid { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2rem; padding-block: 2rem; }
.portal-title { display: flex; align-items: center; gap: 1rem; }
.portal-title > img { width: 54px; height: 54px; }
.portal-title h1 { margin: .15rem 0 .2rem; color: white; font-size: clamp(1.55rem, 4vw, 2.5rem); }
.portal-title p { margin: 0; color: rgba(255,255,255,.68); font-size: .8rem; }
.portal-header .eyebrow { margin: 0; color: var(--gold-400); }
.portal-body { background: #f5f7fb; }
.portal-grid { display: grid; grid-template-columns: minmax(0,1fr) 330px; align-items: start; gap: 1.4rem; }
.portal-main { display: grid; gap: 1.25rem; }
.portal-sidebar { min-width: 0; }
.portal-card { padding: clamp(1.2rem, 2.5vw, 1.7rem); }
.card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.3rem; }
.card-heading h2 { margin: .15rem 0 0; font-size: 1.45rem; }
.card-heading .eyebrow { margin-bottom: .2rem; }
.card-heading > .icon { width: 28px; height: 28px; color: var(--blue-700); }
.next-action { max-width: 220px; padding: .45rem .65rem; border-radius: 999px; color: var(--navy-900); background: var(--blue-100); font-size: .72rem; font-weight: 750; text-align: center; }
.timeline { position: relative; display: grid; gap: 0; }
.timeline::before { position: absolute; top: 12px; bottom: 12px; left: 13px; width: 2px; content: ""; background: var(--line); }
.timeline-item { position: relative; display: grid; grid-template-columns: 28px 1fr; gap: .8rem; padding-bottom: 1.25rem; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-dot { position: relative; z-index: 1; display: grid; width: 28px; height: 28px; place-items: center; border: 3px solid white; border-radius: 50%; color: white; background: var(--green-700); box-shadow: 0 0 0 1px #b7d4c6; font-size: .65rem; }
.timeline-item.current .timeline-dot { background: var(--gold-500); box-shadow: 0 0 0 1px #ebcf6f, 0 0 0 5px #fff7d9; }
.timeline-item strong, .timeline-item small { display: block; }
.timeline-item small { margin-top: .12rem; color: var(--ink-500); font-size: .68rem; }
.timeline-item p { margin: .3rem 0 0; color: var(--ink-600); font-size: .8rem; }
.diagnosis-copy { margin: 0; color: var(--ink-800); font-size: 1rem; line-height: 1.7; }

.status-badge { display: inline-flex; align-items: center; justify-content: center; padding: .37rem .58rem; border-radius: 999px; font-size: .69rem; font-weight: 820; white-space: nowrap; }
.status-neutral { color: #46566b; background: #edf0f4; }
.status-blue { color: #174c8e; background: #e6f0ff; }
.status-purple { color: #60409a; background: var(--purple-soft); }
.status-gold { color: #725100; background: var(--gold-100); }
.status-green { color: #17523e; background: var(--green-100); }
.status-slate { color: #3d4b5e; background: #e8ebef; }
.status-red { color: #902016; background: var(--danger-soft); }

.estimate-lines { display: grid; gap: .75rem; }
.estimate-line { display: grid; grid-template-columns: 1fr auto; gap: .75rem 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: 13px; }
.estimate-line-copy span { color: var(--blue-700); font-size: .65rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.estimate-line-copy h3 { margin: .18rem 0 .25rem; font-size: .97rem; }
.estimate-line-copy small { color: var(--ink-500); font-size: .7rem; }
.estimate-line > strong { color: var(--navy-900); }
.decision-toggle { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.decision-toggle label { cursor: pointer; }
.decision-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.decision-toggle span { display: grid; min-height: 40px; place-items: center; border: 1px solid var(--line); border-radius: 9px; font-size: .78rem; font-weight: 780; transition: all var(--ease); }
.decision-approve input:checked + span { color: #164f3b; border-color: #70b595; background: var(--green-100); }
.decision-decline input:checked + span { color: #8b2118; border-color: #e5a29b; background: var(--danger-soft); }
.estimate-summary { display: grid; gap: .55rem; width: min(100%, 370px); margin: 1.25rem 0 1rem auto; }
.estimate-summary > div { display: flex; justify-content: space-between; gap: 1rem; color: var(--ink-600); font-size: .82rem; }
.estimate-summary strong { color: var(--ink-950); }
.estimate-summary .summary-total { padding-top: .75rem; border-top: 1px solid var(--line); color: var(--ink-950); font-size: 1rem; }
.estimate-total { color: var(--navy-900); font-size: 1.35rem; }
.estimate-note { margin: -.4rem 0 1rem; padding: .8rem; border-radius: 10px; color: var(--ink-700); background: var(--cream-100); font-size: .82rem; }

.inspection-summary-row { display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: 1rem; }
.inspection-count { padding: .36rem .55rem; border-radius: 999px; font-size: .68rem; font-weight: 780; }
.inspection-count.good { color: #17523e; background: var(--green-100); }
.inspection-count.monitor { color: #765000; background: var(--gold-100); }
.inspection-count.attention { color: #902016; background: var(--danger-soft); }
.inspection-customer-list { display: grid; }
.inspection-customer-item { display: grid; grid-template-columns: 14px 1fr auto; align-items: start; gap: .75rem; padding: .9rem 0; border-top: 1px solid var(--line); }
.inspection-customer-item:first-child { border-top: 0; }
.inspection-dot { width: 12px; height: 12px; margin-top: 4px; border-radius: 50%; background: #aeb7c3; }
.inspection-dot.good { background: #2e8568; }
.inspection-dot.monitor { background: var(--gold-500); }
.inspection-dot.attention { background: var(--danger); }
.inspection-customer-item strong, .inspection-customer-item small { display: block; }
.inspection-customer-item small { margin-top: .12rem; color: var(--ink-500); font-size: .68rem; }
.inspection-customer-item p { margin: .28rem 0 0; color: var(--ink-600); font-size: .78rem; }
.inspection-customer-item b { color: var(--ink-600); font-size: .68rem; }

.message-thread { display: grid; gap: .7rem; max-height: 420px; padding: .2rem 0; overflow: auto; }
.message-bubble { width: min(82%, 520px); padding: .75rem .9rem; border-radius: 15px; }
.message-bubble p { margin: 0; font-size: .83rem; }
.message-bubble small { display: block; margin-top: .3rem; font-size: .62rem; opacity: .7; }
.message-bubble.incoming { justify-self: start; border-bottom-left-radius: 4px; color: var(--ink-800); background: #eef1f5; }
.message-bubble.outgoing { justify-self: end; border-bottom-right-radius: 4px; color: white; background: var(--navy-900); }
.message-composer { display: flex; gap: .55rem; margin-top: 1rem; }
.message-composer input { flex: 1; min-width: 0; }
.detail-list { display: grid; margin-bottom: 1rem; }
.detail-list > div { display: grid; grid-template-columns: minmax(85px,.7fr) minmax(0,1.3fr); gap: .75rem; padding: .62rem 0; border-bottom: 1px solid var(--line); }
.detail-list dt { color: var(--ink-500); font-size: .72rem; }
.detail-list dd { margin: 0; color: var(--ink-800); font-size: .78rem; font-weight: 680; text-align: right; overflow-wrap: anywhere; }
.portal-card hr { height: 1px; border: 0; background: var(--line); }
.balance-block { display: grid; grid-template-columns: 1fr auto; gap: .45rem .75rem; margin: 1rem 0; }
.balance-block > span { color: var(--ink-500); font-size: .76rem; }
.balance-block > strong { font-size: .85rem; text-align: right; }
.balance-block > div { grid-column: 1 / -1; display: flex; justify-content: space-between; padding-top: .75rem; border-top: 1px solid var(--line); }
.balance-block > div b { color: var(--navy-900); font-size: 1.22rem; }
.portal-sidebar .button + .button { margin-top: .55rem; }

.site-footer { padding: 4rem 0 1.25rem; color: rgba(255,255,255,.75); background: var(--navy-950); }
.footer-grid { display: grid; grid-template-columns: 1.5fr .65fr .75fr; gap: 4rem; }
.footer-brand { margin-bottom: 1rem; }
.footer-brand strong { color: white; }
.footer-brand small { color: rgba(255,255,255,.56); }
.footer-grid > div:first-child > p { max-width: 430px; color: rgba(255,255,255,.58); font-size: .85rem; }
.footer-grid h3 { margin-bottom: 1rem; color: white; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; }
.footer-grid > div:not(:first-child) { display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; }
.footer-grid a, .footer-grid span { font-size: .8rem; }
.footer-grid a:hover { color: var(--gold-400); }
.footer-bottom { display: flex; justify-content: space-between; gap: 2rem; padding-top: 1.25rem; margin-top: 3rem; border-top: 1px solid rgba(255,255,255,.11); color: rgba(255,255,255,.42); font-size: .67rem; }

/* Owner console */
.owner-route .site-header,
.owner-route > .mobile-nav { display: none !important; }
.owner-route #main-content { min-height: 100vh; }
.owner-login-page { min-height: calc(100vh - var(--header-height)); display: grid; grid-template-columns: 1.1fr .9fr; background: #f5f7fb; }
.owner-login-art { position: relative; display: grid; align-items: center; overflow: hidden; padding: clamp(3rem, 8vw, 8rem); color: white; background: radial-gradient(circle at 12% 12%, rgba(230,183,53,.22), transparent 23%), linear-gradient(145deg, var(--navy-950), var(--navy-800)); }
.owner-login-art::after { position: absolute; right: -130px; bottom: -160px; width: 480px; height: 480px; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; content: ""; box-shadow: 0 0 0 80px rgba(255,255,255,.022), 0 0 0 170px rgba(255,255,255,.018); }
.owner-login-art > div { position: relative; z-index: 1; max-width: 650px; }
.owner-login-art img { width: min(100%, 450px); margin-bottom: 3rem; }
.owner-login-art h1 { color: white; font-size: clamp(2.4rem, 5vw, 4.5rem); }
.owner-login-art > div > p:not(.eyebrow) { color: rgba(255,255,255,.7); font-size: 1rem; }
.owner-login-features { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; margin-top: 2rem; }
.owner-login-features span { display: flex; align-items: center; gap: .55rem; padding: .75rem; border: 1px solid rgba(255,255,255,.12); border-radius: 11px; color: rgba(255,255,255,.82); background: rgba(255,255,255,.06); font-size: .78rem; }
.owner-login-features .icon { color: var(--gold-400); }
.owner-login-panel { display: grid; place-items: center; padding: 2rem; }
.owner-login-card { width: min(100%, 430px); padding: 2rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: white; box-shadow: var(--shadow-md); }
.owner-login-card > img { margin-bottom: 1rem; }
.owner-login-card h2 { font-size: 1.9rem; }
.login-form { display: grid; gap: .95rem; margin-top: 1.35rem; }
.login-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-top: 1.2rem; border-radius: 11px; background: #eef1f5; }
.login-tabs button { min-height: 38px; border: 0; border-radius: 8px; color: var(--ink-600); background: transparent; font-size: .78rem; font-weight: 780; }
.login-tabs button.active { color: var(--navy-900); background: white; box-shadow: var(--shadow-xs); }
.login-help { margin: 1rem 0 0; color: var(--ink-500); font-size: .72rem; }
.back-link { display: inline-block; margin-top: 1.25rem; color: var(--blue-700); font-size: .79rem; font-weight: 750; }

.owner-app { min-height: 100vh; display: grid; grid-template-columns: 244px minmax(0,1fr); color: var(--ink-950); background: #f4f6fa; }
.owner-sidebar { position: fixed; z-index: 55; top: 0; bottom: 0; left: 0; display: flex; width: 244px; flex-direction: column; padding: 1.1rem; color: rgba(255,255,255,.74); background: var(--navy-950); }
.owner-brand { padding: .5rem; margin-bottom: 1.7rem; }
.owner-brand strong { color: white; }
.owner-brand small { color: rgba(255,255,255,.48); }
.owner-nav { display: grid; gap: .3rem; }
.owner-nav a { display: flex; min-height: 46px; align-items: center; gap: .8rem; padding: .65rem .75rem; border-radius: 10px; color: rgba(255,255,255,.62); font-size: .84rem; font-weight: 730; }
.owner-nav a:hover { color: white; background: rgba(255,255,255,.07); }
.owner-nav a.active { color: var(--navy-950); background: var(--gold-500); }
.owner-nav .icon { width: 1.1rem; height: 1.1rem; }
.owner-sidebar-bottom { display: grid; gap: .3rem; margin-top: auto; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.1); }
.owner-sidebar-bottom a, .owner-sidebar-bottom button { display: flex; min-height: 40px; align-items: center; gap: .55rem; padding: .55rem .7rem; border: 0; border-radius: 8px; color: rgba(255,255,255,.57); background: transparent; font-size: .75rem; text-align: left; }
.owner-sidebar-bottom a:hover, .owner-sidebar-bottom button:hover { color: white; background: rgba(255,255,255,.07); }
.owner-workspace { grid-column: 2; min-width: 0; }
.owner-topbar { position: sticky; z-index: 45; top: 0; display: flex; min-height: 88px; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.1rem clamp(1.25rem, 3vw, 2.6rem); border-bottom: 1px solid var(--line); background: rgba(255,255,255,.92); backdrop-filter: blur(16px); }
.owner-topbar h1 { margin: .1rem 0 0; font-size: 1.7rem; }
.owner-topbar .eyebrow { margin: 0; font-size: .62rem; }
.owner-top-actions { display: flex; align-items: center; gap: .7rem; }
.sync-pill { display: inline-flex; min-height: 38px; align-items: center; gap: .45rem; padding: .45rem .68rem; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-600); background: white; font-size: .7rem; font-weight: 760; }
.sync-pill.local { color: #664a00; border-color: #ecd17c; background: #fff9e6; }
.sync-pill.saved { color: #17523e; border-color: #b3dac9; background: var(--green-100); }
.sync-pill.saving, .sync-pill.loading { color: #174c8e; border-color: #bad2f5; background: var(--blue-100); }
.sync-pill.error { color: #902016; border-color: #efbbb6; background: var(--danger-soft); }
.demo-banner { display: flex; align-items: center; justify-content: center; gap: .9rem; padding: .55rem 1rem; color: #654d0d; border-bottom: 1px solid #efd57f; background: #fff8da; font-size: .75rem; }
.demo-banner button { padding: 0; border: 0; color: #5e4300; background: transparent; font-weight: 850; text-decoration: underline; }
.owner-content { width: min(100%, 1500px); padding: clamp(1.2rem, 3vw, 2.6rem); margin-inline: auto; }
.owner-mobile-nav { display: none; }

.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .9rem; margin-bottom: 1rem; }
.stat-grid article { display: flex; align-items: center; gap: .85rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: white; box-shadow: var(--shadow-xs); }
.stat-icon { display: grid; width: 44px; height: 44px; flex: 0 0 auto; place-items: center; border-radius: 12px; }
.stat-icon.blue { color: var(--blue-700); background: var(--blue-100); }
.stat-icon.purple { color: var(--purple); background: var(--purple-soft); }
.stat-icon.gold { color: #7a5500; background: var(--gold-100); }
.stat-icon.green { color: var(--green-700); background: var(--green-100); }
.stat-grid small { display: block; color: var(--ink-500); font-size: .66rem; font-weight: 700; }
.stat-grid strong { display: block; margin-top: .05rem; color: var(--ink-950); font-size: 1.35rem; line-height: 1.05; }
.stat-grid p { margin: .08rem 0 0; color: var(--ink-500); font-size: .68rem; }
.owner-section { padding: 1.15rem; }
.owner-section + .owner-section { margin-top: 1rem; }
.owner-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.owner-section-heading h2, .owner-section-heading h3 { margin: 0 0 .2rem; font-size: 1.15rem; }
.owner-section-heading p { margin: 0; color: var(--ink-500); font-size: .75rem; }
.board-filters { display: flex; align-items: center; gap: .6rem; }
.board-filters > span, .count-pill { padding: .33rem .52rem; border-radius: 999px; color: var(--ink-600); background: #edf0f4; font-size: .68rem; font-weight: 750; }
.kanban-board { display: grid; grid-template-columns: repeat(5, minmax(205px,1fr)); gap: .75rem; overflow-x: auto; padding-bottom: .4rem; scrollbar-width: thin; }
.kanban-column { min-width: 205px; padding: .7rem; border: 1px solid var(--line); border-radius: 13px; background: #f6f8fb; }
.kanban-column > header { display: flex; align-items: center; justify-content: space-between; padding: .15rem .25rem .65rem; }
.kanban-column > header h3 { margin: 0; color: var(--ink-800); font-size: .76rem; letter-spacing: .03em; }
.kanban-column > header span { display: grid; min-width: 24px; height: 24px; place-items: center; border-radius: 999px; color: var(--ink-600); background: white; font-size: .65rem; font-weight: 800; }
.kanban-stack { display: grid; gap: .6rem; }
.kanban-empty { display: grid; min-height: 104px; place-items: center; border: 1px dashed var(--line-strong); border-radius: 10px; color: var(--ink-500); background: rgba(255,255,255,.65); font-size: .72rem; }
.job-card { padding: .8rem; border: 1px solid var(--line); border-radius: 11px; background: white; box-shadow: var(--shadow-xs); transition: transform var(--ease), box-shadow var(--ease); }
.job-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.job-card-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.job-card-top > span:first-child { color: var(--ink-500); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .63rem; font-weight: 780; }
.job-card h4 { margin: .7rem 0 .15rem; font-size: .88rem; }
.job-card > p { margin: 0; color: var(--ink-600); font-size: .7rem; }
.job-card-meta { display: flex; flex-wrap: wrap; gap: .4rem .65rem; margin-top: .65rem; color: var(--ink-500); font-size: .63rem; }
.job-next { display: grid; gap: .12rem; margin-top: .65rem; padding: .55rem; border-radius: 8px; color: var(--ink-700); background: #f5f7fa; font-size: .65rem; }
.job-next small { color: var(--ink-500); font-size: .58rem; }
.job-next strong { font-size: .67rem; }
.job-card-actions { display: flex; justify-content: space-between; gap: .4rem; margin-top: .65rem; }
.activity-list { display: grid; }
.activity-list > div { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: .7rem; padding: .65rem 0; border-top: 1px solid var(--line); }
.activity-list > div:first-child { border-top: 0; }
.activity-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold-500); }
.activity-list p { margin: 0; color: var(--ink-800); font-size: .75rem; }
.activity-list time { color: var(--ink-500); font-size: .64rem; }

.appointment-list { display: grid; gap: .75rem; }
.appointment-card { display: grid; grid-template-columns: 92px 1fr auto; gap: 1rem; align-items: center; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: white; }
.appointment-date { display: grid; place-items: center; align-self: stretch; padding: .7rem; border-radius: 11px; color: var(--navy-900); background: var(--blue-100); text-align: center; }
.appointment-date strong { font-size: 1.5rem; line-height: 1; }
.appointment-date span { font-size: .66rem; font-weight: 780; text-transform: uppercase; }
.appointment-heading { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.appointment-heading h3 { margin: 0; font-size: 1rem; }
.appointment-main > p { margin: .25rem 0 0; color: var(--ink-600); font-size: .75rem; }
.appointment-location { display: flex; align-items: center; gap: .35rem; margin-top: .5rem; color: var(--ink-500); font-size: .68rem; }
.appointment-complaint { margin-top: .55rem !important; padding: .55rem .65rem; border-radius: 8px; background: #f6f8fb; }
.appointment-actions { display: grid; gap: .45rem; min-width: 130px; }
.customer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }
.customer-card { display: grid; grid-template-columns: 40px minmax(0,1fr); gap: .75rem; align-items: start; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: white; }
.customer-avatar { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 50%; color: var(--navy-900); background: var(--gold-100); font-weight: 850; }
.customer-card h3 { margin: 0 0 .12rem; font-size: .92rem; }
.customer-card > div:nth-child(2) { min-width: 0; }
.customer-card > div:nth-child(2) a, .customer-card > div:nth-child(2) small { display: block; overflow-wrap: anywhere; }
.customer-card > div:nth-child(2) a { color: var(--blue-700); font-size: .7rem; font-weight: 750; }
.customer-card > div:nth-child(2) small { margin-top: .16rem; color: var(--ink-500); font-size: .64rem; }
.customer-card dl { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .4rem; margin: .1rem 0 0; padding: .65rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.customer-card dl div { min-width: 0; }
.customer-card dt { color: var(--ink-500); font-size: .58rem; font-weight: 760; text-transform: uppercase; letter-spacing: .04em; }
.customer-card dd { margin: .14rem 0 0; color: var(--ink-800); font-size: .7rem; font-weight: 780; overflow-wrap: anywhere; }
.customer-vehicles { grid-column: 1 / -1; display: grid; gap: .35rem; }
.customer-vehicles span { color: var(--ink-700); font-size: .68rem; }
.customer-card > .full-button { grid-column: 1 / -1; }

.diagnostic-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; }
.diagnostic-card { padding: 1.2rem; }
.diagnostic-card > header { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.diagnostic-card > header > span { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 12px; color: var(--blue-700); background: var(--blue-100); }
.diagnostic-card h2 { margin: 0 0 .15rem; font-size: 1.1rem; }
.diagnostic-card header p { margin: 0; color: var(--ink-500); font-size: .7rem; }
.tool-form { display: flex; align-items: end; gap: .55rem; }
.tool-form .field { flex: 1; }
.small-tool-field { max-width: 110px; }
.tool-placeholder { display: grid; min-height: 190px; place-items: center; padding: 1.2rem; border: 1px dashed var(--line-strong); border-radius: 12px; color: var(--ink-500); background: #fafbfd; text-align: center; }
.tool-placeholder .icon { width: 34px; height: 34px; margin: 0 auto .7rem; color: var(--blue-700); }
.tool-placeholder p { margin: 0; font-size: .78rem; }
.diagnostic-result, .vin-card { margin-top: 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: 12px; background: #fafbfd; }
.diagnostic-result h3, .vin-card h3 { font-size: 1rem; }
.diagnostic-result > span { color: var(--blue-700); font-size: .7rem; font-weight: 800; }
.diagnostic-result ul { display: grid; gap: .4rem; padding-left: 1.1rem; margin: .8rem 0 0; color: var(--ink-600); font-size: .72rem; }
.vin-card dl { display: grid; grid-template-columns: repeat(2,1fr); gap: .55rem 1rem; }
.vin-card dl div { display: grid; }
.vin-card dt { color: var(--ink-500); font-size: .64rem; }
.vin-card dd { margin: .1rem 0 0; color: var(--ink-800); font-size: .75rem; font-weight: 700; }
.recall-results { display: grid; gap: .65rem; margin-top: 1rem; }
.recall-results article { padding: .85rem; border: 1px solid #eed480; border-radius: 10px; background: #fff9e6; }
.recall-results h4 { margin: 0 0 .35rem; font-size: .82rem; }
.recall-results p { margin: 0; color: #64572f; font-size: .68rem; }
.safety-note { margin-top: 1rem; padding: .8rem; border-radius: 10px; color: #67521a; background: var(--gold-100); font-size: .68rem; }

.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; }
.settings-card { padding: 1.2rem; }
.settings-card h2 { font-size: 1.1rem; }
.settings-card > p { color: var(--ink-500); font-size: .72rem; }
.settings-card.full-field { grid-column: 1 / -1; }
.settings-hours { display: grid; gap: .55rem; margin-top: .8rem; }
.settings-hours > h3 { margin-bottom: 0; }
.settings-hours > p { margin: -.25rem 0 .2rem; color: var(--ink-500); font-size: .69rem; }
.hours-row { display: grid; grid-template-columns: 150px minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: .55rem; }
.hours-row label { display: flex; align-items: center; gap: .5rem; font-size: .72rem; font-weight: 750; }
.hours-row > span { font-size: .68rem; font-weight: 700; text-align: center; }
.settings-service-list { display: grid; gap: .65rem; }
.service-settings-card { display: block; }
.service-settings-row { border: 1px solid var(--line); border-radius: 11px; background: white; overflow: clip; }
.service-settings-row summary { display: grid; grid-template-columns: minmax(0,1fr) minmax(180px,2fr) auto 18px; gap: .75rem; align-items: center; padding: .78rem; cursor: pointer; list-style: none; }
.service-settings-row summary::-webkit-details-marker { display: none; }
.service-settings-row summary::after { content: "+"; grid-column: 4; grid-row: 1; color: var(--blue-700); font-size: 1rem; font-weight: 800; }
.service-settings-row[open] summary::after { content: "−"; }
.service-settings-row summary > span { color: var(--blue-700); font-size: .6rem; font-weight: 820; letter-spacing: .05em; text-transform: uppercase; }
.service-settings-row summary strong { font-size: .78rem; }
.service-settings-row summary b { color: var(--navy-900); font-size: .78rem; white-space: nowrap; }
.service-settings-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .75rem; padding: .85rem; border-top: 1px solid var(--line); background: #f8fafc; }
.service-settings-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .85rem; }
.service-settings-footer p { margin: 0; }
.settings-actions { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1rem; }
.data-mode-card { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: start; gap: .75rem; padding: 1rem; border-radius: 12px; background: #f5f7fa; }
.data-mode-card small { display: block; margin-bottom: .12rem; color: var(--ink-500); font-size: .61rem; font-weight: 780; letter-spacing: .04em; text-transform: uppercase; }
.data-mode-card strong { display: block; }
.data-mode-card p { margin: .3rem 0 0; color: var(--ink-600); font-size: .72rem; }
.setup-list { display: grid; gap: .55rem; padding-left: 1.2rem; color: var(--ink-600); font-size: .74rem; }
.file-button { position: relative; overflow: hidden; }
.file-button input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.job-detail-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.job-title-row { display: flex; align-items: center; gap: .65rem; flex-wrap: wrap; }
.job-title-row h2 { margin: 0; font-size: 1.55rem; }
.job-detail-header > div > p { margin: .4rem 0 0; color: var(--ink-500); font-size: .73rem; }
.job-header-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .55rem; }
.job-detail-grid { display: grid; grid-template-columns: minmax(0,1fr) 310px; align-items: start; gap: 1rem; }
.job-detail-main { display: grid; gap: 1rem; }
.job-detail-sidebar { display: grid; gap: 1rem; }
.job-section { margin-top: 0 !important; }
.estimate-admin-list { display: grid; gap: .55rem; }
.estimate-admin-item { display: grid; grid-template-columns: 1fr auto auto 38px; align-items: center; gap: .7rem; padding: .7rem; border: 1px solid var(--line); border-radius: 10px; }
.estimate-admin-item > div { display: grid; }
.estimate-admin-item span { color: var(--blue-700); font-size: .6rem; font-weight: 800; text-transform: uppercase; }
.estimate-admin-item strong { font-size: .76rem; }
.estimate-admin-item small { color: var(--ink-500); font-size: .62rem; }
.estimate-admin-item > b { color: var(--navy-900); font-size: .78rem; }
.estimate-admin-item > em { padding: .28rem .42rem; border-radius: 999px; font-size: .6rem; font-style: normal; font-weight: 800; text-transform: capitalize; }
.decision-approved { color: #17523e; background: var(--green-100); }
.decision-declined { color: #902016; background: var(--danger-soft); }
.decision-pending, .decision-null { color: var(--ink-600); background: #edf0f4; }
.danger-icon { color: var(--danger); }
.estimate-add-form { display: grid; grid-template-columns: 110px minmax(180px,1fr) 80px 100px auto auto; gap: .45rem; margin-top: .75rem; }
.inline-form input, .inline-form select { min-height: 40px; padding: .55rem .65rem; font-size: .75rem; }
.mini-check { display: flex; align-items: center; gap: .35rem; color: var(--ink-600); font-size: .7rem; white-space: nowrap; }
.mini-check input { width: 16px; min-height: 16px; }
.estimate-settings-form { padding-top: 1rem; margin-top: 1rem; border-top: 1px solid var(--line); }
.admin-summary { margin-bottom: 0; }
.inspection-admin-list { display: grid; gap: .45rem; margin-bottom: .8rem; }
.inspection-admin-item { display: grid; grid-template-columns: minmax(150px,1fr) 150px 120px minmax(160px,1fr); gap: .5rem; align-items: center; padding: .6rem; border: 1px solid var(--line); border-radius: 9px; }
.inspection-admin-item > div { display: grid; }
.inspection-admin-item span { color: var(--ink-500); font-size: .58rem; text-transform: uppercase; }
.inspection-admin-item strong { font-size: .72rem; }
.inspection-admin-item input, .inspection-admin-item select { min-height: 38px; padding: .5rem .58rem; font-size: .7rem; }
.inspection-select.good { border-color: #80bea5; background: var(--green-100); }
.inspection-select.monitor { border-color: #e5c65f; background: var(--gold-100); }
.inspection-select.attention { border-color: #e5a29b; background: var(--danger-soft); }
.admin-thread { max-height: 320px; padding: .75rem; border: 1px solid var(--line); border-radius: 11px; background: #fafbfd; }
.payment-card h3 { font-size: 1rem; }
.payment-form { display: grid; gap: .65rem; }
.payment-history { display: grid; margin-top: .85rem; }
.payment-history > div { display: flex; justify-content: space-between; gap: .5rem; padding: .55rem 0; border-top: 1px solid var(--line); font-size: .67rem; }
.payment-history span { color: var(--ink-500); }
.break-all { word-break: break-all; }
.back-link + .owner-form-card { margin-top: 1rem; }
.owner-form-card { max-width: 900px; padding: 1.25rem; }

/* Modal, install, toast */
.modal-root { position: fixed; z-index: 200; inset: 0; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(6,26,56,.62); backdrop-filter: blur(4px); }
.modal-card { position: relative; z-index: 1; width: min(calc(100% - 32px), 480px); max-height: min(86vh, 760px); padding: 1.5rem; margin: 7vh auto 0; overflow: auto; border-radius: var(--radius-lg); background: white; box-shadow: var(--shadow-lg); }
.modal-wide { width: min(calc(100% - 32px), 820px); }
.modal-close { position: absolute; top: .8rem; right: .8rem; }
.modal-card h2 { padding-right: 3rem; font-size: 1.5rem; }
.modal-actions { display: flex; justify-content: flex-end; gap: .55rem; margin-top: 1.3rem; }
.confirm-dialog { text-align: center; }
.confirm-icon { display: grid; width: 58px; height: 58px; place-items: center; margin: 0 auto 1rem; border-radius: 50%; color: var(--navy-900); background: var(--blue-100); font-size: 1.4rem; }
.confirm-dialog p { color: var(--ink-600); }

.install-sheet { position: fixed; z-index: 190; inset: 0; }
.sheet-scrim { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: rgba(6,26,56,.58); }
.sheet-card { position: absolute; right: 0; bottom: 0; left: 0; display: grid; width: min(100%, 520px); gap: .8rem; padding: 1.2rem 1.3rem calc(1.3rem + env(safe-area-inset-bottom)); margin-inline: auto; border-radius: 24px 24px 0 0; background: white; box-shadow: var(--shadow-lg); }
.sheet-handle { width: 42px; height: 5px; margin: -.5rem auto .2rem; border-radius: 999px; background: var(--line-strong); }
.sheet-card h2 { margin: 0; font-size: 1.35rem; }
.sheet-card p { margin: 0; color: var(--ink-600); font-size: .82rem; }
.sheet-card .eyebrow { color: var(--blue-700); }

.toast-region { position: fixed; z-index: 300; top: calc(var(--header-height) + 14px); right: 14px; display: grid; width: min(calc(100% - 28px), 390px); gap: .55rem; pointer-events: none; }
.toast { display: grid; grid-template-columns: 30px 1fr; align-items: center; gap: .65rem; padding: .8rem .9rem; border: 1px solid var(--line); border-radius: 13px; background: white; box-shadow: var(--shadow-md); opacity: 0; transform: translateY(-8px); transition: opacity 220ms ease, transform 220ms ease; }
.toast-visible { opacity: 1; transform: translateY(0); }
.toast > span { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; font-weight: 850; }
.toast p { margin: 0; color: var(--ink-800); font-size: .78rem; }
.toast-success > span { color: #17523e; background: var(--green-100); }
.toast-error > span { color: #902016; background: var(--danger-soft); }
.toast-info > span { color: #174c8e; background: var(--blue-100); }
.loading-screen { min-height: calc(100vh - var(--header-height)); display: grid; place-items: center; align-content: center; gap: 1rem; color: var(--navy-900); }
.noscript { padding: 1rem; color: white; background: var(--danger); text-align: center; }

/* Responsive */
@media (max-width: 1180px) {
  .featured-services { grid-template-columns: repeat(2, 1fr); }
  .service-grid { grid-template-columns: repeat(2, 1fr); }
  .process-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .customer-grid { grid-template-columns: repeat(2, 1fr); }
  .estimate-add-form { grid-template-columns: 100px minmax(160px,1fr) 80px 100px; }
  .estimate-add-form .mini-check, .estimate-add-form .button { grid-column: span 2; }
  .inspection-admin-item { grid-template-columns: minmax(150px,1fr) 145px 110px; }
  .inspection-admin-item > input:last-child { grid-column: 1 / -1; }
}

@media (max-width: 980px) {
  .desktop-nav { display: none; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero { padding-bottom: 40px; }
  .hero-copy { text-align: center; }
  .hero-copy .eyebrow, .hero-actions, .hero-trust { justify-content: center; }
  .hero-copy h1, .hero-lede { margin-inline: auto; }
  .hero-visual { min-height: 430px; width: min(100%, 670px); margin-inline: auto; }
  .booking-layout, .portal-grid, .job-detail-grid { grid-template-columns: 1fr; }
  .booking-sidebar { order: -1; }
  .booking-sidebar .sticky-card, .portal-sidebar .sticky-card, .job-detail-sidebar .sticky-card { position: static; }
  .booking-sidebar .sidebar-card { display: grid; grid-template-columns: auto 1fr; gap: 0 1rem; }
  .booking-sidebar .sidebar-card > img { grid-row: 1 / 3; }
  .booking-sidebar .sidebar-card > .eyebrow, .booking-sidebar .sidebar-card > h2 { grid-column: 2; }
  .booking-sidebar .sidebar-card ol, .booking-sidebar .contact-line { grid-column: 1 / -1; }
  .portal-sidebar { order: -1; }
  .portal-sidebar .portal-card { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
  .portal-sidebar .portal-card > * { margin: 0; }
  .portal-sidebar .portal-card > .eyebrow, .portal-sidebar .portal-card > h2 { grid-column: 1; }
  .portal-sidebar .detail-list { grid-column: 1; }
  .portal-sidebar .portal-card hr { display: none; }
  .portal-sidebar .balance-block { grid-column: 2; grid-row: 1 / 4; align-self: center; }
  .portal-sidebar .button { grid-column: span 1; }
  .owner-login-page { grid-template-columns: 1fr; }
  .owner-login-art { min-height: 480px; }
  .owner-login-panel { padding-block: 4rem; }
  .owner-app { grid-template-columns: 82px minmax(0,1fr); }
  .owner-sidebar { width: 82px; padding-inline: .65rem; }
  .owner-brand span, .owner-nav span, .owner-sidebar-bottom { display: none; }
  .owner-brand { justify-content: center; padding: .3rem; }
  .owner-nav a { justify-content: center; padding: .7rem; }
  .owner-nav .icon { width: 1.25rem; height: 1.25rem; }
  .owner-workspace { grid-column: 2; }
  .diagnostic-grid, .settings-grid { grid-template-columns: 1fr; }
  .settings-card.full-field { grid-column: auto; }
}

@media (max-width: 760px) {
  :root { --header-height: 64px; }
  body:not(.owner-route) { padding-bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom)); }
  .shell, .narrow-shell { width: min(calc(100% - 28px), var(--shell)); }
  .site-header { height: var(--header-height); }
  .brand img { width: 40px; height: 40px; }
  .brand-copy strong { font-size: .86rem; }
  .brand-copy small { font-size: .59rem; }
  .desktop-call { display: none; }
  .mobile-nav { display: flex; }
  .mode-banner { justify-content: flex-start; font-size: .72rem; }
  .mode-banner .icon { display: none; }
  .mode-banner strong { display: inline; }
  .hero { min-height: auto; padding-top: 56px; }
  .hero-copy { text-align: left; }
  .hero-copy .eyebrow, .hero-actions, .hero-trust { justify-content: flex-start; }
  .hero-copy h1 { font-size: clamp(2.65rem, 12vw, 4rem); }
  .hero-lede { font-size: 1rem; }
  .hero-actions { display: grid; }
  .hero-actions .button { width: 100%; }
  .hero-trust { display: grid; gap: .55rem; }
  .hero-visual { min-height: 300px; margin-top: 1rem; }
  .hero-card { min-width: 185px; padding: .65rem .75rem; }
  .hero-card > span { width: 34px; height: 34px; }
  .hero-card-top { top: 2%; }
  .hero-card-bottom { bottom: 0; }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-grid > div:nth-child(odd) { border-left: 1px solid var(--line); }
  .trust-grid > div { border-bottom: 1px solid var(--line); }
  .trust-grid > div:nth-last-child(-n+2) { border-bottom: 0; }
  .section { padding-block: 70px; }
  .section-heading h2 { font-size: clamp(2rem, 10vw, 2.8rem); }
  .featured-services, .service-grid, .process-grid, .three-grid, .policy-grid, .callout-grid, .split-section, .track-grid { grid-template-columns: 1fr; }
  .service-card { min-height: 260px; }
  .process-card { min-height: 190px; }
  .process-card > span { margin-bottom: 1.8rem; }
  .split-section { gap: 55px; }
  .phone-mockup { width: min(94%, 340px); min-height: 620px; }
  .phone-screen { min-height: 570px; }
  .callout-actions { width: 100%; }
  .form-card, .portal-card, .owner-section { border-radius: 18px; }
  .booking-form { padding: 1.1rem; }
  .form-section, .form-grid { grid-template-columns: 1fr; }
  .field-wide, .full-field, .form-section-heading { grid-column: auto; }
  .form-submit-row { align-items: stretch; flex-direction: column; }
  .input-action { flex-direction: column; }
  .input-action .button { width: 100%; }
  .booking-sidebar .sidebar-card { display: block; }
  .booking-sidebar .sidebar-card > img { width: 52px; }
  .confirmation-card { grid-template-columns: 1fr; }
  .confirmation-card > div { border-right: 0; }
  .confirmation-card > div:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); }
  .confirmation-card > div:last-child { border-bottom: 0; }
  .tracker-feature-list { grid-template-columns: 1fr; }
  .track-hero { min-height: calc(100vh - var(--header-height) - var(--mobile-nav-height)); padding-block: 54px; }
  .portal-header-grid { grid-template-columns: 1fr; }
  .portal-header-grid > .button { width: 100%; }
  .portal-sidebar .portal-card { display: block; }
  .portal-sidebar .detail-list, .portal-sidebar .balance-block { margin-top: 1rem; }
  .portal-sidebar .button { margin-top: .55rem !important; }
  .estimate-line { grid-template-columns: 1fr auto; }
  .inspection-customer-item { grid-template-columns: 12px 1fr; }
  .inspection-customer-item > b { grid-column: 2; }
  .message-bubble { width: 91%; }
  .message-composer { flex-direction: column; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer-bottom { flex-direction: column; gap: .6rem; }
  .site-footer { padding-bottom: 2rem; }
  .owner-login-page { min-height: calc(100vh - var(--header-height) - var(--mobile-nav-height)); }
  .owner-login-art { min-height: auto; padding: 3.5rem 1.2rem; }
  .owner-login-art img { margin-bottom: 2rem; }
  .owner-login-features { grid-template-columns: 1fr; }
  .owner-login-panel { padding: 1.2rem 1rem 4rem; }
  .owner-login-card { padding: 1.35rem; }
  .owner-route { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  .owner-app { display: block; }
  .owner-sidebar { display: none; }
  .owner-workspace { min-height: 100vh; }
  .owner-topbar { min-height: 78px; padding: .85rem 1rem; }
  .owner-topbar h1 { font-size: 1.3rem; }
  .owner-topbar .eyebrow { display: none; }
  .owner-top-actions .sync-pill { display: none; }
  .owner-top-actions .button { min-height: 42px; padding: .65rem .8rem; font-size: .75rem; }
  .owner-content { padding: 1rem; }
  .owner-mobile-nav { position: fixed; z-index: 70; right: 0; bottom: 0; left: 0; display: block; padding-bottom: env(safe-area-inset-bottom); border-top: 1px solid var(--line); background: rgba(255,255,255,.97); backdrop-filter: blur(18px); }
  .owner-mobile-nav > .owner-nav { display: flex; }
  .owner-mobile-nav .owner-nav a { flex: 1; min-height: 62px; justify-content: center; flex-direction: column; gap: .1rem; padding: .45rem .2rem; border-radius: 0; color: var(--ink-500); font-size: .62rem; }
  .owner-mobile-nav .owner-nav a.active { color: var(--navy-900); background: transparent; }
  .owner-mobile-nav .owner-nav .icon { width: 1.2rem; height: 1.2rem; }
  .owner-mobile-nav .owner-nav span { display: block; }
  .stat-grid { grid-template-columns: repeat(2,1fr); }
  .stat-grid article { align-items: flex-start; flex-direction: column; gap: .55rem; }
  .stat-grid strong { font-size: 1.15rem; }
  .board-section { padding-right: 0; overflow: hidden; }
  .kanban-board { margin-right: -1rem; padding-right: 1rem; }
  .appointment-card { grid-template-columns: 74px 1fr; align-items: start; }
  .appointment-actions { grid-column: 1 / -1; grid-template-columns: repeat(2,1fr); }
  .customer-grid { grid-template-columns: 1fr; }
  .tool-form { align-items: stretch; flex-direction: column; }
  .small-tool-field { max-width: none; }
  .vin-card dl { grid-template-columns: 1fr; }
  .hours-row { grid-template-columns: 1fr 1fr; }
  .hours-row label { grid-column: 1 / -1; }
  .hours-row > span { display: none; }
  .service-settings-row summary { grid-template-columns: 1fr auto 18px; }
  .service-settings-row summary > span { grid-column: 1 / -1; }
  .service-settings-row summary::after { grid-column: 3; grid-row: 2; }
  .service-settings-fields { grid-template-columns: 1fr; }
  .service-settings-fields .field-wide { grid-column: auto; }
  .service-settings-footer { align-items: stretch; flex-direction: column; }
  .job-detail-header { flex-direction: column; }
  .job-header-actions { width: 100%; justify-content: flex-start; }
  .job-header-actions .button { flex: 1; }
  .estimate-admin-item { grid-template-columns: 1fr auto 38px; }
  .estimate-admin-item > em { grid-column: 1 / -1; justify-self: start; }
  .estimate-add-form { grid-template-columns: 1fr 1fr; }
  .estimate-add-form > select, .estimate-add-form > input:nth-of-type(1) { grid-column: 1 / -1; }
  .estimate-add-form .mini-check, .estimate-add-form .button { grid-column: span 1; }
  .inspection-admin-item { grid-template-columns: 1fr; }
  .inspection-admin-item > input:last-child { grid-column: auto; }
  .modal-card { margin-top: 4vh; }
  .toast-region { top: calc(var(--header-height) + 10px); }
  .owner-route .toast-region { top: 10px; }
}

@media (max-width: 420px) {
  .shell, .narrow-shell { width: min(calc(100% - 22px), var(--shell)); }
  .brand-copy small { display: none; }
  .mode-banner { padding-inline: 11px; }
  .hero-card { min-width: 165px; }
  .hero-card small { font-size: .64rem; }
  .trust-grid strong { font-size: .82rem; }
  .service-card { padding: 1.25rem; }
  .stat-grid { gap: .6rem; }
  .stat-grid article { padding: .8rem; }
  .stat-icon { width: 38px; height: 38px; }
  .appointment-card { grid-template-columns: 1fr; }
  .appointment-date { display: flex; justify-content: space-between; }
  .appointment-actions { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media print {
  @page { margin: .55in; }
  body { padding: 0 !important; color: black; background: white; }
  .site-header, .mobile-nav, .owner-sidebar, .owner-topbar, .owner-mobile-nav, .demo-banner, .job-header-actions, .button, .message-composer, .estimate-add-form, .estimate-settings-form, .payment-form, .toast-region { display: none !important; }
  .owner-app, .owner-workspace, .owner-content { display: block; width: 100%; padding: 0; margin: 0; background: white; }
  .job-detail-grid { display: block; }
  .owner-section, .portal-card { break-inside: avoid; margin: 0 0 12px !important; border: 1px solid #ccc; box-shadow: none; }
  .job-detail-sidebar { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
}