:root {
  /* Heading font — h1, h2, h3, and the "Dental Web Co." wordmark */
  --font-heading: Georgia, "Times New Roman", Times, serif;
  /* Body font — paragraphs, labels, buttons, form fields, small print */
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Primary text colour — body copy and form values */
  --ink: #1f2d3a;
  /* Secondary text colour — subheadings, helper text, small print */
  --muted: #5b6b7a;
  /* Border colour — card borders and button borders */
  --line: #dde3e7;
  /* Page background */
  --bg: #f5f7f8;
  /* Card / panel background */
  --card: #ffffff;
  /* Primary action colour — buttons and focus outlines */
  --accent: #2b6777;
  /* Primary action colour, hover state */
  --accent-dark: #204f5c;
  /* Form field border. WCAG requires 3:1 contrast for a UI component border
     (not the 4.5:1 rule for text) — this is already the minimum that clears
     it (3.51:1 on white, 3.26:1 on the page background), so do not lighten
     it any further or the boxes become hard to see again, especially for
     older patients. */
  --field-border: #7b8b98;

  /* 8px spacing scale — the one set of spacing values new work uses.
     Section bands take --space-7 vertically on desktop, 40px on phones.
     (demo.html predates this and keeps a few off-scale component values.) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* Same-page anchor links (e.g. the hero's "Send me your site" -> #contact)
   ease into place instead of jumping. Disabled for anyone who asks for
   reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.55 var(--font-body);
}
h1, h2, h3, .wordmark {
  font-family: var(--font-heading);
}
/* The header wordmark is a link home on every page. Colour still comes from
   the header-scoped rules (.site-bar .wordmark / .demo-nav .wordmark). */
a.wordmark { text-decoration: none; }
a.wordmark:hover { opacity: .82; }
.wrap { max-width: 1040px; margin: 0 auto; padding: 48px 24px 88px; }

.btn-back {
  display: inline-block;
  margin-bottom: 24px;
  font: 600 14px/1 var(--font-body);
  padding: 9px 16px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  text-decoration: none;
}
.btn-back:hover { background: #f0f2f3; }

header h1 { font-size: 26px; line-height: 1.3; margin: 0 0 10px; }
header p.lede { color: var(--muted); margin: 0; max-width: 640px; font-size: 15px; }

.privacy {
  display: inline-block;
  margin: 20px 0 32px;
  padding: 10px 14px;
  background: #eaf1f2;
  color: #33505a;
  border-radius: 6px;
  font-size: 14px;
}

.try-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 30px;
}
.try-bar button {
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  padding: 11px 20px;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
}
#fillBtn { background: var(--accent); color: #fff; border-color: var(--accent); }
#fillBtn:hover { background: var(--accent-dark); }
#resetBtn:hover { background: #f0f2f3; }
.try-note { flex-basis: 100%; color: var(--muted); font-size: 14px; margin: 2px 0 0; }

.columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: start;
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 30px;
  min-height: 700px;
  box-shadow: 0 1px 3px rgba(20, 30, 40, .05);
}
.card h2 { font-size: 19px; margin: 0 0 4px; }
.card .sub { color: var(--muted); font-size: 14px; margin: 0 0 26px; }

form label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #33454f;
  margin: 18px 0 6px;
}
form label:first-of-type { margin-top: 0; }
/* Required-field marker — the asterisk in a field label. */
.req { color: var(--accent); margin-left: 2px; }

.field-hint {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--muted);
}

input, textarea {
  width: 100%;
  padding: 10px 12px;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--field-border);
  border-radius: 6px;
}
input:focus, textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}
textarea { resize: vertical; }

form button[type="submit"] {
  margin-top: 24px;
  padding: 12px 22px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 6px;
  cursor: pointer;
}
form button[type="submit"]:hover { background: var(--accent-dark); }
form button[type="submit"]:disabled { opacity: .55; cursor: default; }

.explain { margin-top: 60px; max-width: 760px; }
.explain h2 { font-size: 20px; margin: 0 0 18px; }
.explain ol { margin: 0; padding-left: 22px; }
.explain li { margin-bottom: 16px; color: #33454f; }
.explain li:last-child { margin-bottom: 0; }

@media (max-width: 880px) {
  .columns { grid-template-columns: 1fr; }
  .card { min-height: 0; }
}

/* =========================================================================
 * index.html — full-width alternating bands on the 8px scale.
 *
 * Every selector below is either an index-only class (.band, .hero, .offer,
 * .problem-list, .reassurance-list, .contact-grid, .site-bar, .site-footer …)
 * or scoped through one, or an #contactForm rule. demo.html has none of those
 * classes and its <body> has no `home` class, so this whole section is
 * invisible to it. The shared selectors above (.wrap, .card, form label,
 * input, .try-bar …) were not touched.
 * ========================================================================= */

body.home { background: var(--card); }

/* --- bands: full-width strips, content held to the 1040px wrap --------- */
.band { padding-top: var(--space-7); padding-bottom: var(--space-7); }
.band-inner {
  max-width: 1040px;
  margin: 0 auto;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
  text-align: left;
}
.band-white  { background: var(--card); }
.band-bg     { background: var(--bg); }
.band-accent { background: var(--accent); color: #fff; }
.band-dark   { background: var(--ink); color: #fff; }

.band h2 { margin: 0 0 var(--space-3); line-height: 1.2; }
.band p {
  margin: 0 0 var(--space-3);
  max-width: 62ch;      /* ~68 characters — keeps lines readable */
}
.band p:last-child { margin-bottom: 0; }

/* --- header bar ------------------------------------------------------- */
/* Sits above the white hero band, so it needs its own colour to read as a
   header rather than more page. Accent-teal gradient, white text, a shadow
   to lift it off the band, and sticky so it stays present on scroll. */
.site-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: linear-gradient(90deg, var(--accent-dark) 0%, var(--accent) 100%);
  border-bottom: 3px solid #7fc6b8;
  box-shadow: 0 2px 12px rgba(20, 30, 40, .18);
}
.site-bar .bar-inner {
  max-width: 1040px;
  margin: 0 auto;
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.site-bar .wordmark {
  font-size: 22px;
  margin: 0;
  color: #fff;
  letter-spacing: .01em;
}
.site-bar .bar-email {
  color: #fff;
  text-decoration: none;
  font: 600 14px/1 var(--font-body);
  padding: var(--space-2) var(--space-3);
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 999px;
  transition: background .15s ease, border-color .15s ease;
}
.site-bar .bar-email:hover { background: rgba(255, 255, 255, .16); border-color: #fff; }

/* --- hero ----------------------------------------------------------- */
.hero h1 { font-size: 48px; line-height: 1.15; margin: 0 0 var(--space-4); }
.hero .hero-lede { font-size: 19px; }
.hero .hero-stat { font-size: 15px; color: var(--muted); }
.hero .hero-cta { margin-top: var(--space-5); }
.hero .hero-cta .cta-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.hero .hero-cta .cta-note { color: var(--muted); font-size: 14px; margin: 0; max-width: 62ch; }

.btn-primary,
.btn-secondary {
  display: inline-block;
  font: 600 16px/1 var(--font-body);
  padding: var(--space-3) var(--space-4);
  border-radius: 6px;
  text-decoration: none;
}
.btn-primary {
  color: #fff;
  background: var(--accent);
  border: 1px solid var(--accent);
}
.btn-primary:hover { background: var(--accent-dark); }
/* Secondary CTA — same size as .btn-primary but outlined, so a second
   action can sit beside it without competing with the filled button. */
.btn-secondary {
  color: var(--accent);
  background: #fff;
  border: 1px solid var(--accent);
}
.btn-secondary:hover { background: #eef3f4; }

/* --- the three problems, side by side on desktop ------------------- */
.problem-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
.problem-list li { margin: 0; }
.problem-list h2 { font-size: 18px; line-height: 1.3; margin: 0 0 var(--space-2); }
.problem-list p { font-size: 15px; margin: 0; max-width: none; }

/* --- the offer, the one accent-coloured band --------------------- */
.offer h2 { font-size: 40px; line-height: 1.1; }
.offer p  { font-size: 18px; }

/* --- what it isn't --------------------------------------------- */
.reassurance-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
  max-width: 62ch;
}
.reassurance-list li {
  padding-left: var(--space-3);
  border-left: 3px solid var(--accent);
}
/* One item is highlighted — the "your web person could just do this"
   objection. Tinted panel (same pale teal as .privacy), full padding and a
   heavier accent edge so it reads as the pull-out point of the list. */
.reassurance-list li.lead {
  padding: var(--space-3) var(--space-4);
  border-left-width: 5px;
  background: #eaf1f2;
  border-radius: 0 8px 8px 0;
  color: #33505a;
}

/* --- install --------------------------------------------------- */
.install h2 { font-size: 24px; line-height: 1.25; }

/* --- contact: two columns, form on the right ------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: start;
}
/* The "#contact" jump (nav link, demo CTA) lands here. Without this the
   sticky header sits on top of the section heading and the first form
   field; the offset drops the landing point clear of the header with a
   little breathing room above the heading. */
#contact { scroll-margin-top: 120px; }
.contact-left h2 { font-size: 24px; line-height: 1.25; }
.contact-right { min-width: 0; }
/* Reserve the filled form's height (~681px measured) so the card — and with
   it the whole contact section — doesn't shrink when form-fix.js swaps the
   form for its short confirmation panel. The section height then depends only
   on the bio column and this fixed reserve, never on the form's state.
   Released below 880px where the grid is a single column. */
.contact-card { min-height: 685px; padding: var(--space-5); }

#contactForm label { margin: var(--space-3) 0 var(--space-2); }
#contactForm input,
#contactForm textarea { padding: var(--space-2) var(--space-3); }
#contactForm button[type="submit"] { margin-top: var(--space-4); padding: var(--space-3) var(--space-4); }

.contact-under { margin: var(--space-5) 0 0; font-size: 14px; color: var(--muted); }
.contact-under a { color: var(--accent); }

.send-failed {
  margin: var(--space-3) 0 0;
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
  color: var(--ink);
  font-size: 14.5px;
}
.send-failed a { color: var(--accent); }

/* --- dark footer -------------------------------------------- */
.site-footer .band-inner { text-align: center; }
.site-footer .wordmark { font-size: 20px; margin: 0 0 var(--space-2); }
/* clear the 62ch cap from `.band p` so each line fills the centred
   .band-inner and text-align:center actually reads as centred */
.site-footer p { margin: 0 0 var(--space-1); max-width: none; }
.site-footer a { color: #fff; }
.site-footer .footer-address { opacity: .65; }

/* --- responsive ------------------------------------------- */
@media (max-width: 880px) {
  .problem-list { grid-template-columns: 1fr; gap: var(--space-5); }
  .contact-grid { grid-template-columns: 1fr; gap: var(--space-5); }
  /* Single column now — no sibling to stay level with, so let the card size
     to its content (and not reserve 685px when only the confirmation shows). */
  .contact-card { min-height: 0; }
}
@media (max-width: 640px) {
  .band { padding-top: 40px; padding-bottom: 40px; }
  .hero h1 { font-size: 34px; }
  .offer h2 { font-size: 30px; }
  .site-bar .bar-inner { flex-direction: column; text-align: center; gap: var(--space-2); }
}