/* DaveWays Front Desk — homepage stylesheet (index.html only).
   Mobile-first. Other Front Desk pages still use front-desk.css. */

:root {
  --bg: #F4F2EC;
  --ink: #1C2B24;
  --ink-soft: #3F4E46;
  --green: #24604A;
  --green-dark: #1B4A39;
  --green-panel: #205443; /* dark-green blocks (stat tiles, team panel); lighter than --green-dark, text stays AA+ */
  --sage: #E4E9DF;
  --card: #FFFFFF;
  --line: #D6D9CF;
  --amber-bg: #F7E3B5;
  --amber-ink: #6A4300;
  --on-dark: #F4F2EC;
  --on-dark-soft: #C5D1C9;
  --radius: 12px;
  --serif: "Manrope", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --wrap: 1160px;
  --header-h: 64px;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--green); text-underline-offset: 3px; }
a:hover { color: var(--green-dark); }

:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; border-radius: 4px; }
.band-dark :focus-visible, .site-footer :focus-visible { outline-color: #9FD4BC; }

h1, h2, h3 { margin: 0 0 16px; line-height: 1.15; }
h1, h2, h3, h4, h5, h6 { font-family: var(--serif); }
h1, h2 { font-weight: 700; letter-spacing: -0.02em; }
h1 { font-size: clamp(2rem, 4.6vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); }
h3 { font-size: 1.15rem; font-weight: 700; }
p { margin: 0 0 16px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
section { padding: 72px 0; scroll-margin-top: var(--header-h); }
.section-sage { background: var(--sage); }

.eyebrow {
  font-size: 0.8rem;
  font-family: var(--serif);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--green);
  margin-bottom: 12px;
}
.lede { font-size: 1.15rem; color: var(--ink-soft); max-width: 60ch; }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--ink); color: #fff; padding: 12px 16px; border-radius: 8px;
}
.skip-link:focus { top: 12px; color: #fff; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 22px;
  border-radius: 10px; border: 2px solid transparent;
  font: 600 1rem/1.2 var(--sans); text-decoration: none; cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.btn-primary { background: var(--green); color: #fff; }
.btn-primary:hover { background: var(--green-dark); color: #fff; }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-secondary:hover { background: var(--ink); color: #fff; }
.btn-block { width: 100%; }
.btn small { font-weight: 500; opacity: .9; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(244, 242, 236, 0.96);
  border-bottom: 1px solid var(--line);
  backdrop-filter: saturate(1.2) blur(6px);
}
.header-inner { display: flex; align-items: center; gap: 12px; min-height: var(--header-h); }
.wordmark {
  font-family: var(--serif); font-weight: 700; font-size: 1.3rem; letter-spacing: 0.08em;
  color: var(--ink); text-decoration: none; margin-right: auto;
  display: inline-flex; align-items: center; min-height: 44px;
}
.wordmark:hover { color: var(--ink); }
.header-call { gap: 0; padding: 10px 14px; font-size: 0.92rem; white-space: nowrap; }
.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--card); color: var(--ink); cursor: pointer;
}
.nav-toggle svg { width: 22px; height: 22px; }
.primary-nav ul { list-style: none; margin: 0; padding: 0; }
.primary-nav a {
  display: flex; align-items: center; min-height: 48px; padding: 0 12px;
  color: var(--ink); text-decoration: none; font-weight: 500; border-radius: 8px;
}
.primary-nav a:hover { background: var(--sage); color: var(--ink); }

/* Mobile: nav drops below the bar when toggled (only hidden once JS is running) */
@media (max-width: 939px) {
  .primary-nav { position: absolute; left: 0; right: 0; top: 100%; background: var(--bg); border-bottom: 1px solid var(--line); padding: 8px 12px 16px; }
  .js .primary-nav:not(.is-open) { display: none; }
  .header-call .long { display: none; }
}
@media (min-width: 940px) {
  .nav-toggle { display: none; }
  .primary-nav { order: 0; }
  .primary-nav ul { display: flex; gap: 4px; }
  .primary-nav a { font-size: 0.95rem; }
  .wordmark { margin-right: 24px; }
  .primary-nav { margin-right: auto; }
  .header-call { padding: 10px 18px; }
}
@media (max-width: 380px) {
  .header-call { font-size: 0.85rem; padding: 8px 10px; }
  .wordmark { font-size: 1.1rem; }
}

/* ---------- Hero ---------- */
.hero { padding: 48px 0 64px; }
.hero-grid { display: grid; gap: 40px; align-items: center; }
.hero .eyebrow { font-size: 0.75rem; }
.hero h1 { max-width: 15ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 14px; }
.hero-note { font-size: 0.95rem; color: var(--ink-soft); margin: 0; }
@media (min-width: 940px) {
  .hero { padding: 72px 0 88px; }
  .hero-grid { grid-template-columns: 1.1fr 0.9fr; gap: 56px; }
}

/* Job-ticket call card */
.ticket {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; scroll-margin-top: calc(var(--header-h) + 16px);
}
.ticket-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  padding: 14px 18px; border-bottom: 1px dashed var(--line);
  font-size: 0.85rem;
}
.ticket-live { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--green); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.75rem; }
.ticket-live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.ticket-id { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; color: var(--ink-soft); }
.ticket-shop { flex-basis: 100%; font-weight: 700; font-size: 1rem; color: var(--ink); }
.ticket-note { font-weight: 400; font-size: 0.85rem; color: var(--ink-soft); }
.tag-urgent {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  background: var(--amber-bg); color: var(--amber-ink);
  font-weight: 700; font-size: 0.75rem; letter-spacing: 0.08em;
}
.transcript { list-style: none; margin: 0; padding: 18px; display: grid; gap: 14px; min-height: 300px; align-content: start; }
.turn { display: grid; gap: 2px; }
.turn-who { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; color: var(--ink-soft); }
.turn-ai .turn-who { color: var(--green); }
.turn-text { margin: 0; line-height: 1.5; }
.turn-ai .turn-text { background: var(--sage); border-radius: 10px; padding: 10px 12px; }
.turn-caller .turn-text { padding: 0 2px; }
.ticket-foot {
  display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center;
  padding: 12px 18px; background: var(--ink); color: var(--on-dark); font-size: 0.85rem;
}
.ticket-foot strong { color: #FFD98A; }

/* Typing reveal (JS adds .is-typing; no-JS and reduced motion show everything) */
.is-typing .turn, .is-typing .ticket-foot { opacity: 0; transform: translateY(6px); transition: opacity .35s ease, transform .35s ease; }
.is-typing .turn.is-shown, .is-typing .ticket-foot.is-shown { opacity: 1; transform: none; }
.typing-dots { display: inline-flex; gap: 4px; padding: 10px 12px; }
.typing-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-soft); animation: blink 1s infinite; }
.typing-dots span:nth-child(2) { animation-delay: .15s; }
.typing-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

/* ---------- Trades strip ---------- */
.band-dark { background: var(--ink); color: var(--on-dark); }
.trades { padding: 0; }
.trades-list {
  list-style: none; margin: 0 auto; padding: 18px 20px;
  display: flex; gap: 28px; overflow-x: auto; white-space: nowrap;
  max-width: var(--wrap); scrollbar-width: none;
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em;
}
.trades-list::-webkit-scrollbar { display: none; }
.trades-list li { flex: none; }
.trades-list li + li::before { content: "\00B7"; margin-right: 28px; color: var(--on-dark-soft); }
@media (min-width: 1100px) {
  /* Wraps to two lines here, so drop the dot separators: a line starting with "·" looked broken */
  .trades-list { justify-content: center; flex-wrap: wrap; gap: 0 40px; }
  .trades-list li + li::before { content: none; }
}

/* ---------- Cards ---------- */
.card-grid { display: grid; gap: 16px; margin-top: 32px; }
@media (min-width: 760px) { .card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.card p { margin: 0; color: var(--ink-soft); }
.card h3 { margin-bottom: 8px; }

/* ---------- Admin support ---------- */
.admin-band { border-top: 1px solid var(--line); }
.admin-grid { list-style: none; padding: 0; }
@media (min-width: 760px) { .card-grid.cols-2 { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
.admin-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: 12px; border-radius: 10px; color: var(--green); background: var(--sage); }
.admin-scope { margin: 24px 0 0; max-width: 72ch; color: var(--ink-soft); font-size: 0.95rem; }

.stat-grid { display: grid; gap: 16px; margin-top: 20px; }
@media (min-width: 760px) { .stat-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.stat-tile { background: var(--green-panel); color: var(--on-dark); border-radius: var(--radius); padding: 24px; }
.stat-num { display: block; font-family: var(--serif); font-weight: 800; font-size: clamp(2rem, 4vw, 2.6rem); line-height: 1.1; margin-bottom: 6px; }
.stat-tile p { margin: 0; color: var(--on-dark-soft); }
.stat-source { margin: 16px 0 0; font-size: 0.85rem; color: var(--ink-soft); }

/* ---------- How it works ---------- */
.steps { list-style: none; margin: 32px 0 0; padding: 0; border-top: 1px solid var(--line); }
.step { display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.step-num { font-family: var(--serif); font-size: 2.2rem; font-weight: 600; line-height: 1; color: var(--green); }
.step-num { grid-row: span 2; }
.step h3, .step p { grid-column: 2; }
.step h3 { margin: 4px 0 4px; }
.step p { margin: 0; color: var(--ink-soft); }
@media (min-width: 760px) {
  .step { grid-template-columns: 96px 280px 1fr; align-items: baseline; gap: 24px; }
  .step-num { font-size: 3rem; }
  .step h3 { margin: 0; }
  .step-num { grid-row: auto; }
  .step h3, .step p { grid-column: auto; }
}

/* ---------- Calculator ---------- */
.formula { font-weight: 600; margin-top: 8px; }
.calc { display: grid; gap: 28px; margin-top: 28px; }
.calc > *, .calc-out > * { min-width: 0; } /* let the grid shrink below its content on 320px phones */
.calc-inputs { display: grid; gap: 20px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.calc-field label { display: block; font-weight: 600; margin-bottom: 6px; }
.calc-row { display: flex; align-items: center; gap: 14px; }
.calc-row input[type="range"] { flex: 1; min-width: 0; height: 44px; accent-color: var(--green); cursor: pointer; }
.num-wrap { position: relative; flex: none; }
.num-wrap input { width: 110px; }
.num-wrap .affix { position: absolute; top: 50%; transform: translateY(-50%); color: var(--ink-soft); pointer-events: none; }
.num-wrap .affix-pre { left: 12px; }
.num-wrap .affix-post { right: 12px; }
.num-wrap .has-pre { padding-left: 26px; }
.num-wrap .has-post { padding-right: 30px; }
.calc-out { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.stat-label { display: block; font-size: 0.85rem; color: var(--ink-soft); margin-bottom: 4px; }
.stat-value { font-family: var(--serif); font-size: 2rem; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat-big { grid-column: 1 / -1; background: var(--ink); color: var(--on-dark); border-color: var(--ink); }
.stat-big .stat-label { color: var(--on-dark-soft); }
.stat-big .stat-value { font-size: 2.6rem; color: #fff; }
.calc-note { font-size: 0.9rem; color: var(--ink-soft); margin: 16px 0 0; }
@media (min-width: 940px) {
  .calc { grid-template-columns: 1.1fr 1fr; align-items: start; }
}

/* ---------- Inputs (shared) ---------- */
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select {
  width: 100%; min-height: 48px; padding: 10px 12px;
  font: 400 1rem var(--sans); color: var(--ink);
  background: #fff; border: 1.5px solid #8A958D; border-radius: 8px;
}
input:focus-visible, select:focus-visible { outline: 3px solid var(--green); outline-offset: 1px; border-color: var(--green); }
[aria-invalid="true"] { border-color: #A12B1F !important; }

/* ---------- Pricing ---------- */
.price-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px 22px; max-width: 760px; margin-top: 32px;
}
.price-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; padding-bottom: 20px; border-bottom: 1px solid var(--line); margin-bottom: 20px; }
.price-plan { font-family: var(--serif); font-weight: 700; font-size: 1.1rem; width: 100%; margin: 0; }
.price { font-family: var(--serif); font-size: 2.8rem; font-weight: 600; line-height: 1; margin: 0; }
.price small { font-family: var(--sans); font-size: 1rem; font-weight: 500; color: var(--ink-soft); }
.price-setup { margin: 0; color: var(--ink-soft); }
.terms-list { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 12px; }
.terms-list li { display: grid; grid-template-columns: 24px 1fr; gap: 10px; }
.terms-list svg { width: 22px; height: 22px; color: var(--green); margin-top: 2px; }
.price-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.text-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
@media (min-width: 760px) { .price-card { padding: 36px; } }

/* ---------- Founder ---------- */
.founder { display: grid; gap: 24px; align-items: center; max-width: 820px; }
.founder img { width: 140px; height: 140px; border-radius: 50%; object-fit: cover; background: var(--sage); }
.founder h2 { font-size: clamp(1.3rem, 2.6vw, 1.6rem); }
.founder p { color: var(--ink-soft); }
@media (min-width: 640px) { .founder { grid-template-columns: 160px 1fr; gap: 36px; } .founder img { width: 160px; height: 160px; } }

/* ---------- Contact form ---------- */
.form-wrap { display: grid; gap: 32px; }
.lead-form { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; display: grid; gap: 18px; }
.field label { display: block; font-weight: 600; margin-bottom: 6px; }
.field .optional { font-weight: 400; color: var(--ink-soft); }
.error { display: block; color: #A12B1F; font-size: 0.9rem; margin-top: 4px; min-height: 0; }
.error:empty { display: none; }
.field-checkbox { display: grid; grid-template-columns: 28px 1fr; gap: 8px; align-items: start; font-size: 0.9rem; color: var(--ink-soft); }
.field-checkbox input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--green); }
.field-checkbox .error { grid-column: 2; }
.honeypot-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { margin: 0; font-size: 0.95rem; }
.form-status:empty { display: none; }
.form-status-error { color: #A12B1F; }
@media (min-width: 640px) { .lead-form { grid-template-columns: 1fr 1fr; padding: 32px; } .field-full { grid-column: 1 / -1; } }
@media (min-width: 940px) { .form-wrap { grid-template-columns: 0.8fr 1.2fr; align-items: start; gap: 56px; } }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: var(--on-dark-soft); padding: 48px 0 32px; font-size: 0.95rem; }
.site-footer .wordmark { color: var(--on-dark); }
.site-footer a { color: var(--on-dark); }
.site-footer a:hover { color: #fff; }
.footer-top { display: grid; gap: 32px; grid-template-columns: 1fr 1fr; padding-bottom: 32px; border-bottom: 1px solid #34453C; }
.footer-brand { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.footer-top p { margin: 0; max-width: 32ch; }
.footer-col h2 { color: var(--on-dark); font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 8px; }
.footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.footer-links a { display: inline-flex; align-items: center; min-height: 36px; }
.footer-small { margin: 20px 0 0; font-size: 0.85rem; }
.footer-small + .footer-small { margin-top: 8px; }
@media (min-width: 760px) {
  .footer-top { grid-template-columns: 2fr 1fr 1fr 1fr; align-items: start; }
  .footer-brand { grid-column: auto; }
}

/* ---------- Managed-service additions (2026-09-24) ---------- */
.founding-bar {
  background: var(--green); color: #fff; font-size: 0.88rem; line-height: 1.4;
  padding: 8px 20px; text-align: center;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 12px;
}
.founding-bar a { color: #fff; font-weight: 600; display: inline-flex; align-items: center; min-height: 32px; }
.founding-bar a:hover { color: #fff; }
.founding-bar :focus-visible { outline-color: #fff; }
.founding-bar span { display: inline-flex; align-items: center; opacity: .92; }
.hero-kicker { font-family: var(--serif); font-size: 1.35rem; font-weight: 600; color: var(--green); margin: -4px 0 12px; }
.ticket-caption { font-size: 0.88rem; color: var(--ink-soft); margin: 10px 4px 0; }
.trades-list a { color: var(--on-dark); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.trades-list a:hover { color: #fff; text-decoration: underline; }
.trades { padding: 4px 0; }
.trades-list { padding-top: 6px; padding-bottom: 6px; }

.split { display: grid; gap: 16px; margin-top: 28px; }
@media (min-width: 860px) { .split { grid-template-columns: 1fr 1.25fr; gap: 20px; align-items: start; } }
.card-team { border: 2px solid var(--green); }
.card .checks li, .tier .checks li { color: var(--ink-soft); }
.checks { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 12px; }
.checks li { position: relative; padding-left: 30px; line-height: 1.5; }
.checks li::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center/13px no-repeat;
}
.checks strong { color: var(--ink); }
.more-link { margin: 20px 0 0; }
.more-link a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }

.tiers { display: grid; gap: 16px; margin-top: 32px; }
@media (min-width: 980px) { .tiers { grid-template-columns: 1fr 1fr 1.1fr; gap: 20px; align-items: stretch; } }
.tier { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; position: relative; }
.tier h3 { font-size: 1.15rem; margin-bottom: 10px; }
.tier .price { font-size: 2.4rem; margin: 0 0 4px; }
.tier .price small { font-size: 0.9rem; }
.tier .price-setup { font-size: 0.92rem; margin: 0 0 8px; }
.tier-featured { border: 2px solid var(--green); }
/* Prices sit on one row across tiers: no lift on the featured card, its 2px border offset by 1px less padding,
   and plan names reserve two lines ("Managed Front Desk + Google Ads" wraps, the others don't). */
@media (min-width: 980px) {
  .tier-featured { padding: 23px; }
  .tier h3 { line-height: 1.25; min-height: 2.5em; }
}
.tier-badge {
  position: absolute; top: -13px; left: 20px; margin: 0;
  background: var(--green); color: #fff; font-size: 0.75rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; padding: 3px 12px; border-radius: 999px;
}
.tier-pitch { font-family: var(--serif); font-size: 1.15rem; font-weight: 600; line-height: 1.3; color: var(--green); margin: 0 0 14px; }
.founding-note, .guarantee-note { margin-top: 20px; padding: 16px 20px; border-radius: var(--radius); max-width: 820px; }
.founding-note { background: var(--amber-bg); color: #3D2A00; }
.guarantee-note { background: var(--card); border: 2px solid var(--green); margin-top: 12px; }
#pricing .price-actions { margin-top: 24px; }

.case-meta { color: var(--ink-soft); font-size: .9rem; }
.case-figures { display: grid; gap: 8px; margin: 12px 0; }
.case-figures div { display: flex; justify-content: space-between; gap: 12px; }
.case-figures dt { color: var(--ink-soft); }
.case-figures dd { margin: 0; font-weight: 700; }

.founder-legal { font-size: .9rem; }

.faq-wrap { max-width: 860px; }
.faq { margin-top: 24px; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  min-height: 56px; padding: 12px 0; cursor: pointer; list-style: none;
  font-family: var(--serif); font-weight: 700; font-size: 1.05rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 1.5rem; font-weight: 400; color: var(--green); flex: none; }
.faq-item[open] summary::after { content: "\2212"; }
.faq-item p { color: var(--ink-soft); margin: 0 0 18px; max-width: 70ch; }

/* ---------- Hero photo carousel (restored from the old homepage, 2026-09-24) ---------- */
.hero-photo { position: relative; overflow: hidden; background: var(--ink); color: var(--on-dark); padding-bottom: 88px; }
.hero-photo .hero-grid { position: relative; z-index: 2; }
.hero-carousel { position: absolute; inset: 0; z-index: 0; }
.hero-carousel-frame { position: absolute; inset: 0; }
.hero-carousel-slide {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: right center;
  opacity: 0; transition: opacity 900ms ease;
}
.hero-carousel-slide.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hero-carousel-slide { transition: none; } }
.hero-scrim { position: absolute; inset: 0; z-index: 1; background: rgba(22, 35, 29, 0.6); pointer-events: none; }
/* Dots: 44px tap targets with a small visible dot */
.hero-carousel-dots {
  position: absolute; left: 0; right: 0; bottom: 12px; z-index: 3;
  display: flex; flex-wrap: wrap; justify-content: center; padding: 0 12px;
}
.hero-carousel-dots button {
  width: 28px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.hero-carousel-dots button::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.45);
}
.hero-carousel-dots button.is-active::before { background: #fff; }
.hero-carousel-dots button:focus-visible { outline: 3px solid #9FD4BC; outline-offset: -6px; }
/* Text on the photo */
.hero-photo .eyebrow { color: #9FD4BC; }
.hero-photo h1 { color: #fff; }
.hero-photo .hero-kicker { color: #9FD4BC; }
.hero-photo .lede, .hero-photo .hero-note, .hero-photo .ticket-caption { color: var(--on-dark-soft); }
.hero-photo .lede, .hero-photo .hero-note { color: #fff; }
.hero-photo h1, .hero-photo .lede, .hero-photo .hero-note { text-shadow: 0 1px 3px rgba(0,0,0,0.5); }
.hero-photo .btn-primary { background: #fff; color: var(--ink); }
.hero-photo .btn-primary:hover { background: var(--sage); color: var(--ink); }
.hero-photo .btn-secondary { color: #fff; border-color: #fff; }
.hero-photo .btn-secondary:hover { background: #fff; color: var(--ink); }
.hero-photo :focus-visible { outline-color: #9FD4BC; }
.hero-photo .ticket { color: var(--ink); }
@media (min-width: 940px) {
  .hero-scrim { background: linear-gradient(100deg, rgba(22,35,29,0.8) 0%, rgba(22,35,29,0.62) 45%, rgba(22,35,29,0.3) 65%, rgba(22,35,29,0.12) 100%); }
}
/* Caption under the call ticket sits on a solid strip so photos never affect its contrast */
.hero-photo .ticket-caption {
  margin: 10px 0 0; padding: 10px 14px;
  background: var(--ink); color: var(--on-dark);
  border: 1px solid rgba(255,255,255,0.14); border-radius: 10px;
}
/* Logo image in header and footer */
.wordmark img { height: 36px; width: auto; display: block; }
.wordmark-footer { background: #fff; padding: 8px 12px; border-radius: 10px; }
.wordmark-footer img { height: 32px; }
@media (max-width: 380px) { .wordmark img { height: 30px; } }
/* "The job goes to whoever answers." — highlighted line in the hero */
.hero-kicker { margin: 4px 0 18px; }
.hero-kicker .highlight {
  display: inline; padding: 4px 12px; line-height: 1.7;
  background: var(--amber-bg); color: #2E2000; border-radius: 6px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.hero-photo .hero-kicker { color: #2E2000; font-size: clamp(1.1rem, 1.8vw, 1.3rem); }

/* ---------- Comparison chart ---------- */
.compare-band { padding: 72px 0; background: #D9E8DE; color: var(--ink); border-top: 1px solid #C3D6CA; border-bottom: 1px solid #C3D6CA; }
.compare-band h2 { color: var(--ink); max-width: 24ch; }
.compare-band .eyebrow { color: var(--green); }
.compare-band :focus-visible { outline-color: var(--green); }
.compare-wrap {
  margin-top: 28px; overflow-x: auto; background: #fff; color: var(--ink);
  border: 1px solid #C3D6CA; border-radius: var(--radius); -webkit-overflow-scrolling: touch;
}
.compare-wrap:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
.compare-table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 0.95rem; }
.compare-table th, .compare-table td { padding: 14px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.compare-table tbody tr:last-child th, .compare-table tbody tr:last-child td { border-bottom: 0; }
.compare-table thead th {
  font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft);
  background: var(--bg); vertical-align: bottom;
}
.compare-table tbody th { font-weight: 600; width: 30%; }
/* first column stays visible while the table scrolls sideways on phones */
.compare-table th:first-child { position: sticky; left: 0; background: #fff; z-index: 1; box-shadow: 1px 0 0 var(--line); }
.compare-table thead th:first-child { background: var(--bg); }
.c-label { display: none; }
.c-val::before { display: inline-block; width: 1.3em; font-weight: 700; }
.c-yes .c-val::before { content: "\2713"; color: var(--green); }
.c-no { color: #6B7770; }
.c-no .c-val::before { content: "\2715"; color: #9A3B2E; }
.c-mid { color: var(--ink-soft); }
.c-mid .c-val::before { content: "~"; color: var(--amber-ink); }
.c-dw .c-val::before { content: "\2713"; color: var(--green); }
.compare-table .c-dw-head { background: var(--green); color: #fff; font-family: var(--serif); font-size: 1.3rem; font-weight: 800; letter-spacing: -0.01em; text-transform: none; }
.c-dw { background: #EEF3EB; color: var(--green-dark); font-weight: 700; }
.compare-note { margin: 14px 0 0; font-size: 0.88rem; color: var(--ink-soft); max-width: 70ch; }
.compare-more { margin: 16px 0 0; font-weight: 600; }
.compare-more a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
.compare-more a:hover { color: var(--green-dark); }
/* Phones: each row becomes a card, DaveWays listed first */
@media (max-width: 759px) {
  .compare-wrap { overflow: visible; background: none; border: 0; border-radius: 0; }
  .compare-table, .compare-table tbody { display: block; min-width: 0; }
  .compare-table thead { display: none; }
  .compare-table tr {
    display: flex; flex-direction: column; background: #fff; border: 1px solid #C3D6CA; border-radius: var(--radius);
    margin-bottom: 12px; overflow: hidden;
  }
  .compare-table tbody th { position: static; width: auto; box-shadow: none; font-size: 1rem; padding: 14px 16px 10px; border-bottom: 0; order: -2; }
  .compare-table td { display: flex; justify-content: space-between; gap: 12px; padding: 10px 16px; border-bottom: 0; border-top: 1px solid var(--line); }
  .compare-table td.c-dw { order: -1; }
  .c-label { display: block; color: var(--ink-soft); font-weight: 500; }
  .c-dw .c-label { color: var(--green-dark); font-family: var(--serif); font-size: 1.05rem; font-weight: 800; }
  .c-val { text-align: right; }
}
/* The photos fill the whole hero, so hovering anywhere over it would pause the
   rotation forever on desktop. Only the dots take pointer events (hovering them
   still pauses, clicking still jumps to a photo). */
.hero-photo .hero-carousel { pointer-events: none; }
.hero-photo .hero-carousel-dots { pointer-events: auto; }
.hero-photo .hero-carousel-dots { pointer-events: none; }
.hero-photo .hero-carousel-dots button { pointer-events: auto; }

/* ---- Who does the work (#team), 2026-09-27 ----
   Two mirrored panels either side of "your phone line": the callers' side in
   light speech bubbles, the team's side in dark green numbered steps. Equal
   widths, equal heights, same frame and header on both. All in Manrope. */
.team-band { font-family: var(--serif); }
.team-head { max-width: 820px; margin: 0 auto; text-align: center; }

/* Headline in two registers: a quiet set-up line, then the answer, big */
.team-title { margin: 0; }
.team-title-lead { display: block; font-size: clamp(1.15rem, 2.2vw, 1.45rem); font-weight: 600; letter-spacing: -0.01em; color: var(--ink-soft); }
.team-title-lead s { text-decoration-thickness: 3px; text-decoration-color: var(--green); }
.team-title-main { display: block; margin-top: 6px; font-size: clamp(2.6rem, 7vw, 4.4rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1; color: var(--green); }

/* "You never ..." as three struck-off tags */
.team-nevers { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; margin: 28px 0 0; }
.team-nevers-label { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); margin-right: 4px; }
.team-never {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px 7px 12px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--card);
  font-weight: 600; font-size: 0.95rem; color: var(--ink);
}
.team-never::before {
  content: ""; width: 18px; height: 18px; border-radius: 50%; flex: none;
  background: #B4432E url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center/11px no-repeat;
}

/* The two halves of the lede, each sitting over the panel it describes */
.team-captions { display: grid; gap: 4px; margin-top: 44px; text-align: center; }
.team-caption { margin: 0; font-size: clamp(1.1rem, 1.8vw, 1.3rem); font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; }
.team-caption-front { color: var(--ink-soft); }
.team-caption-back { color: var(--green); }
.team-caption-gap { display: none; }

.team-stage { display: grid; gap: 16px; margin-top: 20px; }
.team-front, .team-back {
  display: flex; flex-direction: column;
  border-radius: 20px; padding: 32px;
}
.team-front { background: var(--sage); border: 1px solid var(--line); }
.team-back { background: var(--green-panel); color: var(--on-dark); border: 1px solid var(--green-panel); }
.team-side-title { font-family: var(--serif); font-size: 1.3rem; font-weight: 800; letter-spacing: -0.01em; margin: 0 0 24px; }
.team-side-kicker { display: block; margin-bottom: 6px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--green); }
.team-back .team-side-title { color: #fff; }
.team-back .team-side-kicker { color: #9FD4BC; }

/* Callers' side: speech bubbles, spread to fill the panel's height */
.team-bubbles { list-style: none; margin: 0; padding: 0; flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 14px; }
.team-bubbles li {
  position: relative; background: var(--card); color: var(--ink);
  border: 1px solid var(--line); border-radius: 16px 16px 16px 4px;
  padding: 14px 18px 14px 50px; font-weight: 500; line-height: 1.45;
  box-shadow: 0 1px 2px rgba(28, 43, 36, 0.06);
}
.team-bubbles li::before {
  content: ""; position: absolute; left: 16px; top: 15px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center/13px no-repeat;
}

/* Team's side: numbered steps */
.team-steps { list-style: none; margin: 0; padding: 0; flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 14px; counter-reset: team; }
.team-steps li { counter-increment: team; position: relative; padding-left: 50px; color: var(--on-dark-soft); line-height: 1.5; font-size: 0.95rem; }
.team-steps li::before {
  content: counter(team, decimal-leading-zero); position: absolute; left: 0; top: 0;
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid #9FD4BC; color: #9FD4BC; font-size: 0.8rem; font-weight: 800;
}
.team-steps strong { display: block; color: #fff; font-weight: 700; font-size: 1.02rem; margin-bottom: 2px; }

/* The phone line between them: horizontal on phones, vertical on desktop */
.team-divider { display: flex; align-items: center; gap: 12px; color: var(--green); }
.team-divider::before, .team-divider::after { content: ""; flex: 1; border-top: 2px dashed var(--line); }
.team-divider span {
  flex: none; padding: 6px 14px; border-radius: 999px; background: var(--card); border: 1px solid var(--line);
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
}
@media (min-width: 900px) {
  .team-stage { grid-template-columns: 1fr 44px 1fr; gap: 20px; align-items: stretch; margin-top: 16px; }
  .team-captions { grid-template-columns: 1fr 44px 1fr; gap: 20px; margin-top: 56px; }
  .team-caption-gap { display: block; }
  .team-front, .team-back { padding: 40px; }
  .team-divider { flex-direction: column; }
  .team-divider::before, .team-divider::after { border-top: 0; border-left: 2px dashed var(--line); }
  .team-divider span { writing-mode: vertical-rl; transform: rotate(180deg); padding: 14px 6px; }
}
@media (max-width: 480px) {
  .team-front, .team-back { padding: 24px 20px; }
  .team-bubbles li { padding-left: 46px; }
}

/* ---- Sound familiar? (.problem-photo), 2026-09-27 ----
   Photo of a vet with a client and her cat (2026-10-06; was a plumber), behind
   real HTML text. The photo shows at full width across the top (heading on
   its dark left side) and fades into solid dark where the cards and stats
   sit, so the cards never hide the people. */
.problem-photo {
  position: relative; isolation: isolate; color: var(--on-dark);
  padding-top: 250px;
  background: #111915 url("/assets/img/missed-call-plumber-bg-960.webp") right top / auto 320px no-repeat;
}
.problem-photo::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(17, 25, 21, 0.1) 0, rgba(17, 25, 21, 0.35) 160px, rgba(17, 25, 21, 0.92) 270px, #111915 320px);
}
.problem-photo .eyebrow { color: #9FD4BC; font-size: clamp(1.05rem, 2vw, 1.3rem); font-weight: 800; margin-bottom: 14px; }
.problem-photo h2 { font-family: var(--serif); font-weight: 800; font-size: clamp(2rem, 5vw, 3.25rem); line-height: 1.1; letter-spacing: -0.02em; max-width: 22ch; }
.problem-photo h2 { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }
.problem-photo .card h3 { color: var(--ink); }
.problem-photo .stat-tile { border: 1px solid rgba(159, 212, 188, 0.25); }
.problem-photo .stat-source { color: var(--on-dark-soft); }
.problem-photo .stat-source a { color: #9FD4BC; }
.problem-photo .stat-source a:hover { color: #fff; }
.problem-photo :focus-visible { outline-color: #9FD4BC; }
@media (min-width: 760px) {
  /* Image height is 44.4vw at full width (1672x743, 2.25:1) */
  .problem-photo {
    padding-top: clamp(80px, 9vw, 140px);
    background-image: url("/assets/img/missed-call-plumber-bg.webp");
    background-size: 100% auto; background-position: center top;
  }
  .problem-photo::before {
    background:
      linear-gradient(90deg, rgba(17, 25, 21, 0.88) 0%, rgba(17, 25, 21, 0.6) 32%, rgba(17, 25, 21, 0) 62%),
      linear-gradient(180deg, rgba(17, 25, 21, 0) calc(44.4vw - 150px), #111915 44.4vw);
  }
  .problem-photo h2 { max-width: 16ch; }
  .problem-photo .card-grid { margin-top: clamp(40px, calc(44vw - 330px), 440px); }
}

/* ---- Phone fixes from the 2026-09-27 mobile check ---- */
/* Headings wrap into even lines instead of leaving one word alone ("a job.") */
h1, h2, h3 { text-wrap: balance; }
/* Call card: the typing dots overlap the next (still hidden) line instead of
   adding a row, so the card no longer shrinks ~55px when the typing ends */
.typing-dots { margin-bottom: -40px; }
/* Call card footer reads as one sentence; flex was breaking it into
   "Urgent" / "— sent to on-call tech" on narrow screens */
.ticket-foot { display: block; }
/* Calculator: the shared input width:100% was overriding the fixed width,
   so the three number boxes came out 97, 106 and 129px wide */
.calc-row .num-wrap { width: 112px; }
.calc-row .num-wrap input { width: 100%; }
/* Result tiles: numbers line up even when one label wraps to two lines */
.calc-out .stat { display: flex; flex-direction: column; justify-content: space-between; }
@media (max-width: 480px) {
  /* "You never" on its own line, tags centred under it */
  .team-nevers-label { flex-basis: 100%; margin: 0 0 2px; }
}

/* Logo tagline: real text under the logo image, set flush to its bottom-right edge */
.wordmark { flex-direction: column; justify-content: center; }
.wordmark-tagline {
  align-self: flex-end; margin-top: -5px; margin-right: 2px;
  font-family: "Manrope", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 0.7rem; font-weight: 600; line-height: 1; letter-spacing: 0.01em;
  color: #0a224d; white-space: nowrap;
}
/* Tuck the tagline into the empty band under the letters (the logo image has ~13% clear space below the "y" descender) and end it under the "s". */
.wordmark-footer .wordmark-tagline { margin-top: 2px; font-size: 0.67rem; } /* 32px logo: too narrow to tuck without hitting the circle; 0.67rem is the widest that still fits under it */
@media (max-width: 380px) { .wordmark-footer .wordmark-tagline { font-size: 0.62rem; } } /* logo drops to 30px here */
/* Phones: at 0.7rem the tucked tagline reaches the circle, and the header button squeezed the logo, so keep the logo full width and drop the tuck. */
.site-header .wordmark { flex-shrink: 0; }
@media (max-width: 440px) { .wordmark-tagline { margin-top: 1px; font-size: 0.62rem; } }

/* ---- Sample follow-up thread (#example), 2026-10-06 ---- */
.thread-grid { display: grid; gap: 32px; align-items: start; }
@media (min-width: 940px) { .thread-grid { grid-template-columns: 0.9fr 1.1fr; gap: 56px; } }
#example .transcript { min-height: 0; }