/* Beacon Dental Solutions — design system. Self-contained, system fonts, no external requests. */
:root{
  --ink:#122B26; --ink-2:#1E3A34; --muted:#5A6B66; --line:#DDE5E1;
  --green:#0E5E52; --green-d:#0A4A40; --green-l:#E7F1ED;
  --gold:#E0A458; --gold-d:#A8781B; --gold-l:#FBF1E1;
  /* Deep Amber (#A8781B) is reserved for larger accents: it measures 3.50:1 on the
     warm ground, below the 4.5:1 AA floor for normal text. This is the small-text
     amber — 4.69:1 on warm, 5.24 on white, 4.81 on bone, 4.54 on wash. */
  --gold-dd:#8D6517;
  --paper:#F7F5F0; --white:#FFFFFF; --neg:#122B26;
  /* --line is a decorative rule and is exempt from WCAG 1.4.11. Form controls are not:
     a field boundary is a UI component and needs 3:1. --line-ui measures 3.58 on white,
     3.29 on bone, 3.11 on wash and 3.20 on warm, so it clears the floor on every ground. */
  --line-ui:#7A8B85;
  --serif:Georgia,"Iowan Old Style","Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --wrap:1120px; --measure:600px; --r:10px;
  --sp1:8px; --sp2:16px; --sp3:24px; --sp4:36px; --sp5:56px; --sp6:88px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
/* The header is sticky and 72px tall, so an anchor jump would land the target underneath
   it. Every element that can be an anchor target keeps that much clearance. */
:target,[id]{scroll-margin-top:88px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
body{margin:0;background:var(--white);color:var(--ink);
  font:400 17px/1.65 var(--sans);-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;height:auto}
a{color:var(--green);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--green-d)}
/* text-wrap:balance stops a heading dropping one word onto its own line. Browsers that
   do not support it simply wrap as before. */
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;letter-spacing:-0.01em;margin:0 0 var(--sp2);
  text-wrap:balance}
h1{font-size:clamp(34px,5.2vw,54px);line-height:1.1}
h2{font-size:clamp(26px,3.6vw,38px);line-height:1.18}
h3{font-size:clamp(19px,2vw,22px);line-height:1.3;margin-bottom:var(--sp1)}
h4{font-size:17px;line-height:1.35;margin-bottom:6px}
p{margin:0 0 var(--sp2)}
.lede{font-size:clamp(18px,2.1vw,21px);line-height:1.6;color:var(--ink-2)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.narrow{max-width:var(--measure)}
/* One left rail. .wrap.narrow shrank the whole wrap to the measure and centred it, so a
   narrow section began 240px further in than the full-width section above it, on nine of
   the ten pages. The wrap now keeps the page's own left edge and the measure is set on the
   children instead. Grids, tables and figures are exempt: they are not reading matter. */
.wrap.narrow{max-width:var(--wrap)}
.wrap.narrow > *{max-width:var(--measure)}
.wrap.narrow > .grid,.wrap.narrow > .tbl,.wrap.narrow > table,
.wrap.narrow > figure,.wrap.narrow > .fig-wrap{max-width:none}
/* A disclosure list is not a paragraph. The row needs width for the question and the marker
   to sit apart, or the section reads as a narrow column stranded on the left of the page.
   The answer inside still takes the reading measure. */
.wrap.narrow > .faq{max-width:820px}
.faq details .a{max-width:var(--measure)}
/* .mid marks the few blocks that are deliberately centred, so their boxes centre too
   rather than leaving centred text hugging the left rail. */
.wrap.narrow.mid > *{margin-left:auto;margin-right:auto}
/* Measure. At 17px in a 712px column the body ran to 93 characters a line, well past the
   45-75 the typographic standard allows. 600px brings it to about 80. The small grey
   supporting notes ran to 165 characters because nothing capped them, so they get a
   ch-based cap of their own that survives any future container width. */
.small,.statnote,.src,figcaption,.fig-hint{max-width:64ch}
.statnote{margin-left:auto;margin-right:auto}
section{padding:var(--sp6) 0}
section.tight{padding:var(--sp5) 0}
.paper{background:var(--paper)}
.dark{background:var(--ink);color:#EAF2EE}
.dark h1,.dark h2,.dark h3{color:#fff}
.dark a{color:var(--gold)}
.eyebrow{font:600 12px/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;
  color:var(--green);margin:0 0 14px}
.dark .eyebrow{color:var(--gold)}
.muted{color:var(--muted)}
.small{font-size:14.5px;line-height:1.55}
/* ---------- header ---------- */
header.site{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);
  backdrop-filter:saturate(150%) blur(8px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:var(--sp3);height:72px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);flex:0 0 auto;min-height:44px}
.brand .bn{font-family:var(--serif);font-size:21px;line-height:1}
.brand .bs{display:block;font:600 8.5px/1 var(--sans);letter-spacing:.19em;
  text-transform:uppercase;color:var(--muted);margin-top:4px}
.nav nav{margin-left:auto;display:flex;gap:var(--sp3);align-items:center}
/* The bar must never wrap: nav labels and the header button stay on one line at every
   width, and the menu takes over before the bar runs out of room. In-page buttons are
   left free to wrap, because a long label on a 320px screen has to go somewhere. */
.nav nav a{font-size:15px;text-decoration:none;color:var(--ink-2);white-space:nowrap}
header.site .btn,.menu>summary{white-space:nowrap}
.nav nav a:hover,.nav nav a[aria-current]{color:var(--green);text-decoration:underline}
/* ---------- buttons ---------- */
.btn{display:inline-block;font:600 15.5px/1 var(--sans);padding:14px 22px;border-radius:8px;
  text-decoration:none;border:1.5px solid transparent;cursor:pointer;
  transition:background-color .15s,border-color .15s,color .15s}
.btn-p{background:var(--green);color:#fff;border-color:var(--green)}
.btn-p:hover{background:var(--green-d);border-color:var(--green-d);color:#fff}
.btn-s{background:transparent;color:var(--green);border-color:var(--line)}
.btn-s:hover{border-color:var(--green);color:var(--green-d)}
.dark .btn-s{color:#fff;border-color:rgba(255,255,255,.35)}
.dark .btn-s:hover{border-color:var(--gold);color:var(--gold)}
.btns{display:flex;gap:12px;flex-wrap:wrap;margin:var(--sp3) 0 0}
/* ---------- layout helpers ---------- */
.grid{display:grid;gap:var(--sp3)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--sp5);align-items:center}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:24px}
.paper .card{background:var(--white)}
.card.flat{background:var(--paper);border-color:transparent}
.dark .card{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.13)}
/* ---------- hero ---------- */
.hero{padding:var(--sp6) 0 var(--sp5);background:
  radial-gradient(1100px 420px at 80% -12%, #EAF3EF 0%, rgba(234,243,239,0) 62%), var(--white)}
.tag{display:inline-flex;align-items:center;gap:9px;background:var(--ink);color:#fff;
  font:600 12.5px/1 var(--sans);letter-spacing:.05em;padding:9px 15px;border-radius:99px;margin-bottom:22px}
.tag .dot{width:7px;height:7px;border-radius:50%;background:var(--gold)}
.hero-note{font-size:14.5px;color:var(--muted);margin-top:22px;padding-top:16px;border-top:1px solid var(--line)}
/* ---------- claim strip ---------- */
.strip{background:var(--ink);color:#EAF2EE;padding:var(--sp4) 0}
/* Display type wants a shorter measure than body text, not a longer one. Unconstrained,
   this ran to 93 characters a line across the full wrap. */
.strip p{margin:0;font-family:var(--serif);font-size:clamp(20px,2.5vw,27px);line-height:1.35;
  color:#fff;max-width:58ch;text-wrap:balance}
.strip .src{font-family:var(--sans);font-size:13.5px;color:#9DB5AE;margin-top:12px;max-width:58ch}
.strip em{color:var(--gold);font-style:normal}
/* ---------- numbered steps ---------- */
.step .n{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;
  background:var(--green);color:#fff;font:600 14px/1 var(--sans);margin-bottom:14px}
/* ---------- clause card ---------- */
.clause{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  box-shadow:0 18px 44px -28px rgba(18,43,38,.45);padding:26px 28px;font-size:14.5px;line-height:1.62}
.clause .ch{display:flex;justify-content:space-between;font:600 10.5px/1 var(--sans);
  letter-spacing:.13em;text-transform:uppercase;color:var(--muted);
  border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:16px}
.clause .hl{background:var(--gold-l);box-shadow:inset 0 -1px 0 var(--gold)}
.clause .stamp{display:inline-block;border:1.5px solid var(--green);color:var(--green);
  font:600 11px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;
  padding:8px 13px;border-radius:99px;transform:rotate(-3deg);margin-top:18px}
/* ---------- tables ---------- */
table{width:100%;border-collapse:collapse;font-size:15.5px}
th,td{text-align:left;padding:13px 14px;border-bottom:1px solid var(--line);vertical-align:top}
th{font:600 12.5px/1.3 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
td.n,th.n{text-align:right;white-space:nowrap}
tbody tr:last-child td{border-bottom:none}
.tbl{border:1px solid var(--line);border-radius:var(--r);overflow-x:auto;background:#fff;-webkit-overflow-scrolling:touch}
.tbl table{margin:0}
@media (max-width:620px){table{font-size:14px}th,td{padding:11px 10px}
  .tbl table{min-width:0}
  th.n,td.n{white-space:normal}}
/* The three-column comparison needed 287px inside a 252px box at 360, so it scrolled by
   35px: enough to look broken, not enough to look deliberate. Tighter cells fit it. */
@media (max-width:430px){.tbl table{font-size:13px}.tbl th,.tbl td{padding:10px 5px}
  .tbl th{font-size:11.5px;letter-spacing:.05em}
  /* the intrinsic minimum was set by the longest single word in the middle column;
     proper hyphenation lets it break rather than force the table into a scrollbar */
  .tbl td,.tbl th{hyphens:auto;overflow-wrap:break-word}}
/* ---------- lists ---------- */
ul.ticks,ul.crosses{list-style:none;padding:0;margin:0}
ul.ticks li,ul.crosses li{position:relative;padding-left:30px;margin-bottom:13px}
ul.ticks li::before{content:"";position:absolute;left:4px;top:8px;width:11px;height:6px;
  border-left:2px solid var(--green);border-bottom:2px solid var(--green);transform:rotate(-45deg)}
ul.crosses li::before{content:"\00d7";position:absolute;left:2px;top:-2px;color:var(--neg);
  font-size:21px;font-weight:600}
/* ---------- FAQ ---------- */
/* :not(.menu) keeps the FAQ styling off the header disclosure menu, which is also a
   <details> but must not inherit the rule, the divider or the +/- marker. */
details:not(.menu){border-bottom:1px solid var(--line);padding:18px 0}
details:not(.menu)>summary{cursor:pointer;font-weight:600;font-size:17px;list-style:none;
  display:flex;justify-content:space-between;gap:18px;align-items:flex-start}
details>summary::-webkit-details-marker{display:none}
details:not(.menu)>summary::after{content:"+";color:var(--green);font-size:22px;line-height:1;flex:0 0 auto}
details:not(.menu)[open]>summary::after{content:"\2013"}
details .a{padding-top:12px;color:var(--ink-2)}
/* ---------- forms ---------- */
label{display:block;font:600 14px/1 var(--sans);margin:0 0 7px}
input,textarea,select{width:100%;font:400 16px/1.5 var(--sans);color:var(--ink);
  padding:12px 14px;border:1px solid var(--line-ui);border-radius:8px;background:#fff}
input:focus,textarea:focus,select:focus{outline:2px solid var(--green);outline-offset:1px;border-color:var(--green)}
.field{margin-bottom:18px}
/* ---------- footer ---------- */
footer.site{background:var(--ink);color:#B9CCC6;padding:var(--sp5) 0 var(--sp4);font-size:14.5px}
footer.site a{color:#EAF2EE;text-decoration:none}
footer.site a:hover{color:var(--gold);text-decoration:underline}
footer.site .fh{color:#fff;font:600 12px/1 var(--sans);letter-spacing:.13em;
  text-transform:uppercase;margin:0 0 14px}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:var(--sp4)}
.fbar{border-top:1px solid rgba(255,255,255,.14);margin-top:var(--sp4);padding-top:22px;
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:13.5px;color:#8FA8A1}
/* ---------- misc ---------- */
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:#fff;padding:10px 14px;z-index:99;border-radius:6px}
.kicker-line{width:46px;height:3px;background:var(--gold);border-radius:2px;margin-bottom:20px}
@media (max-width:900px){
  .split{grid-template-columns:1fr;gap:var(--sp4)}
  .g3,.g4{grid-template-columns:1fr 1fr}
  .fgrid{grid-template-columns:1fr 1fr}
  section{padding:var(--sp5) 0}
}
/* The header has its own breakpoint, higher than the layout's. Measured: the five labels,
   the lockup and the full-length button need 979px. Below 1000 the menu takes over, so the
   bar is never asked to hold more than it can. */
@media (max-width:999px){
  .nav > nav{display:none}
}
@media (max-width:620px){
  .g2,.g3,.g4{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr}
  body{font-size:16.5px}
}
/* ---------- print ----------
   Practice owners print pricing and guarantee pages to take to a partner. Browsers do not
   print background colours by default, so every dark band would have printed as near-white
   text on white paper. Dark sections invert, disclosures open, and links show their URL. */
@media print{
  header.site,footer.site,.menu,.skip,.btns,.dl,.fig-hint{display:none!important}
  body{font-size:11pt;color:#000;background:#fff}
  .dark,.strip,section.dark{background:#fff!important;color:#000!important;
    border-top:1px solid #999;border-bottom:1px solid #999}
  .dark h1,.dark h2,.dark h3,.strip p{color:#000!important}
  .dark .eyebrow,.strip em,.tagline,.dark .tagline{color:#6b4d10!important}
  .wash,.warm,.paper{background:#fff!important}
  .card,.card.flat,.clause,.tbl,.fig-box{border:1px solid #bbb!important;background:#fff!important;
    break-inside:avoid;page-break-inside:avoid}
  details:not(.menu){break-inside:avoid;page-break-inside:avoid}
  details:not(.menu) .a{display:block!important}
  details:not(.menu)>summary::after{content:""!important}
  h1,h2,h3{break-after:avoid;page-break-after:avoid}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#444;word-break:break-all}
  a[href^="mailto:"]::after,a[href^="tel:"]::after,a[href^="#"]::after{content:""}
  .fig-box{overflow:visible!important}
  .fig-box>svg,.only-wide{min-width:0!important;max-width:100%!important}
  .menu .panel::after{display:none!important}
}

/* ---------- brand ---------- */
.brand img,.brand svg.lockup{display:block;width:214px;height:auto}
footer.site .brand img{width:190px}
.amber-text{color:var(--gold-d)}
.tagline{font-family:var(--serif);font-style:italic;color:var(--gold-d)}
.dark .tagline{color:var(--gold)}

.show-sm{display:none}
@media (max-width:620px){
  .hide-sm{display:none}
  .show-sm{display:inline}
  .nav{height:64px}
  header.site .btn{padding:11px 16px;font-size:14.5px}
}
/* 320px is the narrowest screen the site claims to support and the bar overflowed it by
   21px. The lockup and the button both give a little back here. */


/* ---------- dark-surface corrections ---------- */
/* .dark a was overriding button colour, and Beacon Green on Ink has too little contrast.
   Brand rule: amber works on dark. Primary CTA on dark surfaces is Amber with Ink text. */
.dark .btn-p{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.dark .btn-p:hover{background:#EBB877;border-color:#EBB877;color:var(--ink)}
footer.site .tagline{color:var(--gold)}
footer.site .brand svg.lockup{width:190px}

footer.site .fh{color:#fff;font:600 12px/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;margin:0 0 14px}
/* display:block so the hit area spans the column: "About" and "Terms" are short words
   and were only 38px wide as inline-block targets. */
footer.site .fnav a{display:block;padding:11px 0;min-height:44px;line-height:1.4}

h2.as-h3{font-size:clamp(19px,2vw,22px);line-height:1.3;margin-bottom:var(--sp1)}

/* ---------- focus ----------
   The browser default ring is black: 2.74:1 on Beacon Green and 1.40:1 on Ink, below the 3:1
   WCAG 2.2 asks of a focus indicator. A two-tone ring (Ink inside, Beacon Amber outside) keeps at
   least one edge above 3:1 on white, on Bone, on Beacon Green and on Ink, and the two tones
   contrast 6.88:1 with each other. */
:focus{outline:none}
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--ink);
  outline-offset:2px;
  border-radius:4px;
  box-shadow:0 0 0 6px var(--gold)}
input:focus-visible,select:focus-visible,textarea:focus-visible{border-color:var(--green)}

/* ---- scheduler card ---- */
.card.sched{padding:0;overflow:hidden}
.sched-head{display:flex;gap:20px;align-items:center;padding:26px 30px;flex-wrap:wrap}
.sched-face{width:72px;height:72px;border-radius:50%;object-fit:cover;flex:0 0 auto;
  border:2px solid var(--green-l)}
.sched-copy{flex:1 1 300px;min-width:0}
.sched-act{flex:0 0 auto}
.sched-act .btn{white-space:nowrap}
.cal-note{margin:0;padding:14px 30px;background:var(--paper);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cal-mount{position:relative;background:var(--white);min-height:120px}
.cal-load{margin:0;padding:40px 30px;text-align:center}
.cal-frame{display:block;width:100%;height:740px;border:0}
@media (max-width:620px){
  .sched-head{padding:22px;gap:16px}
  .sched-act{flex:1 1 100%}
  .sched-act .btn{width:100%;text-align:center}
  .cal-note{padding:14px 22px}
  .cal-frame{height:900px}
}

/* ---- schematic figures ---- */
figure.fig{margin:0}
.fig-box{border:1px solid var(--line);border-radius:var(--r);background:var(--white);
  overflow-x:auto;-webkit-overflow-scrolling:touch}
/* A silent scroll box reads as a cropped picture. The fade on the right edge is the only
   thing that tells a thumb there is more to the figure. It is painted on the wrapper, so
   it does not travel with the scrolled content. */
.fig-wrap{position:relative}
.fig-box:focus-visible,.tbl:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
@media (max-width:768px){
  .fig-wrap::after{content:"";position:absolute;top:1px;right:1px;bottom:1px;width:46px;
    border-radius:0 var(--r) var(--r) 0;pointer-events:none;
    background:linear-gradient(to right,rgba(255,255,255,0),rgba(255,255,255,.96))}
  .dark .fig-wrap::after{background:linear-gradient(to right,rgba(18,43,38,0),rgba(18,43,38,.96))}
}
.fig-box>svg{display:block;width:100%;height:auto}
.fig-680>svg{min-width:680px}
.fig-700>svg{min-width:700px}
.fig-720>svg{min-width:720px}
.fig-hint{display:none;margin:10px 0 0;font-size:13.5px;color:var(--muted)}
@media (max-width:768px){.fig-hint{display:block}}
figure.fig figcaption{margin:14px 0 0;font-size:14.5px;color:var(--muted)}
.dark figure.fig figcaption,.dark .fig-hint{color:#8FA8A1}
.dark .fig-box{border-color:#2A4C45}
details.plain{border:1px solid var(--line);border-radius:var(--r);background:var(--white);margin-top:16px}
details.plain>summary{cursor:pointer;padding:14px 18px;font-size:14.5px;font-weight:600;color:var(--green)}
details.plain[open]>summary{border-bottom:1px solid var(--line)}
details.plain .inner{padding:6px 18px 18px}

/* ---- downloads ---- */
.dl{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--white);text-decoration:none;color:inherit;margin-bottom:12px}
a.dl:hover{border-color:var(--green);background:var(--green-l)}
.dl .ico{flex:0 0 auto;width:34px;height:42px;border:1.5px solid var(--green);border-radius:3px;
  position:relative;background:var(--white)}
.dl .ico::before{content:"";position:absolute;right:-1.5px;top:-1.5px;border-width:0 11px 11px 0;
  border-style:solid;border-color:var(--green-l) var(--white)}
.dl .ico::after{content:"PDF";position:absolute;left:0;right:0;bottom:5px;text-align:center;
  font-size:8.5px;font-weight:700;letter-spacing:0.6px;color:var(--green)}
.dl .t{font-weight:600;display:block;margin-bottom:2px}
.dl .m{font-size:13px;color:var(--muted);display:block}
.dark .dl{background:transparent;border-color:#2A4C45;color:#fff}
.dark a.dl:hover{border-color:var(--gold);background:rgba(224,164,88,.08)}
.dark .dl .m{color:#8FA8A1}
.dark .dl .ico{border-color:var(--gold);background:transparent}
.dark .dl .ico::after{color:var(--gold)}
.dark .dl .ico::before{border-color:transparent transparent}

/* --- mobile legibility pass 2026-09-12 --- */
/* Three real defects found by rendering every page at 360, 390 and 768: the clause
   card's two-part header collided when the first label wrapped (flex + line-height:1),
   eyebrow labels sat at 12px and the clause header at 10.5px, and buttons rendered
   39px tall against the 44px tap-target guideline. */
/* These are not phone-only problems, so they are not in a phone-only query.
   10.5px is too small at any width, and a 28px summary is a poor target for a
   mouse as well as a thumb. */
.clause .ch{line-height:1.5;font-size:11.5px;flex-wrap:wrap;column-gap:14px}
.clause .ch span + span{color:var(--muted)}
details>summary{min-height:44px;display:flex;align-items:center}
@media (max-width:620px){
  /* the header of the contract-clause card: stack instead of colliding */
  .clause .ch{display:block}
  .clause .ch span{display:block}
  /* small caps labels are the smallest text on the site — lift them */
  .eyebrow{font-size:13px;letter-spacing:.11em}
  /* tap targets: 44px minimum, header included */
  .btn{padding:15px 22px;min-height:46px;line-height:1.05}
  header.site .btn{min-height:44px;padding:13px 16px}
}

/* ============================================================================
   COLOUR, PHOTOGRAPHY AND SCALE PASS — 2026-09-12
   Three problems this fixes, in Tunde's words: no pictures, not enough of our
   own palette, and the numbers deserve more scale.

   The palette was always defined; it just was not used. The site ran on two
   grounds (white and bone) plus one ink section. This adds two more grounds
   from tokens that already existed, so alternating bands do the warming work
   that photography alone cannot. Nothing here changes a word of copy.
   ========================================================================== */

/* --- two more section grounds, from tokens we already owned --------------- */
.wash{background:var(--green-l)}
.warm{background:var(--gold-l)}
.wash .card,.warm .card{background:var(--white)}
.wash .card{border-color:#CFE2DB}
.warm .card{border-color:#EBDCC0}
.wash .card.flat{background:rgba(255,255,255,.55);border-color:transparent}
.warm .card.flat{background:rgba(255,255,255,.55);border-color:transparent}
.wash hr,.warm hr{border-color:rgba(18,43,38,.12)}
/* the eyebrow needs more contrast on a tinted ground than on white */
.wash .eyebrow{color:var(--green-d)}
.warm .eyebrow{color:var(--gold-dd)}

/* --- photography ---------------------------------------------------------
   Every photograph is self-hosted (the CSP allows img-src 'self' only), CC0,
   graded to the palette so the set reads as commissioned rather than sourced,
   and carries explicit width/height so nothing shifts as it loads. */
/* the caption sits OUTSIDE the clipped box: clipping the figure as a whole put a
   stray white bar under the photograph. The radius lives on the image instead. */
.photo{margin:0}
.photo img{display:block;width:100%;height:auto;border-radius:var(--r);
  background:var(--paper);box-shadow:0 1px 2px rgba(18,43,38,.10)}
.photo figcaption{font:400 13px/1.5 var(--sans);color:var(--muted);padding:12px 2px 0;
  max-width:44em}
/* a photograph used as a full-width band, with the caption sitting under it */
.photoband{margin:0}
.photoband img{display:block;width:100%;height:auto;border-radius:var(--r)}

/* --- the numbers, given scale --------------------------------------------
   Serif rather than a shouty sans, and capped at 52px: the point is that the
   floors are legible at a glance, not that they shout. */
.stats{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--sp3) var(--sp2);
  margin-top:var(--sp4)}
.stat{text-align:center}
.stat .n{display:block;font-family:var(--serif);font-size:clamp(38px,4.4vw,52px);
  line-height:.95;color:var(--green);letter-spacing:-.015em}
.wash .stat .n{color:var(--green-d)}
.stat .l{display:block;font:400 13px/1.42 var(--sans);color:var(--muted);
  margin-top:10px;max-width:16em;margin-left:auto;margin-right:auto;text-wrap:balance}
.stat .u{font-size:.52em;vertical-align:.30em;margin-left:1px;letter-spacing:0}
.statnote{font-size:13.5px;color:var(--muted);margin:var(--sp3) 0 0;text-align:center}

@media (max-width:820px){
  .stats{grid-template-columns:repeat(3,1fr)}
  .stats .stat:nth-child(4){grid-column:1/2}
  .stats .stat:nth-child(5){grid-column:2/4}
}
@media (max-width:520px){
  .stats{grid-template-columns:repeat(2,1fr);gap:var(--sp3) 14px}
  .stats .stat:nth-child(4){grid-column:auto}
  .stats .stat:nth-child(5){grid-column:1/-1}
  .stat .n{font-size:40px}
  .stat .l{font-size:12.5px}
}

/* --- reversing an existing .split so the photograph can lead ------------- */
.split.rev>:first-child{order:2}
@media (max-width:900px){.split.rev>:first-child{order:0}}

/* ---------- mobile navigation ----------
   Below 1000px the horizontal nav is switched off, so this carries it. It is built from
   <details>, so it needs no script: the browser gives it the button semantics, the
   expanded state and the keyboard behaviour, and it cannot fail to load.

   The first version floated a narrow rounded card under the button with six widely spaced
   links and no separators, over a page that carried on showing through around it. It read
   as a stray box rather than a menu. This is a full-width sheet dropped from the header
   edge, with divided rows and a scrim behind it, which is the conventional treatment and
   the one that reads as deliberate. */
.menu{display:none}
.menu>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:9px;
  min-height:44px;padding:0 14px;border:1px solid var(--line-ui);border-radius:8px;
  font:600 14.5px/1 var(--sans);color:var(--ink-2);background:var(--white)}
.menu>summary::-webkit-details-marker{display:none}
.menu>summary svg{flex:0 0 auto;display:block;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;fill:none}
.menu>summary .ico-x{display:none}
.menu>summary:hover{border-color:var(--ink-2)}
.menu[open]>summary{border-color:var(--ink);color:var(--ink)}
.menu[open]>summary .ico-bars{display:none}
.menu[open]>summary .ico-x{display:block}

.menu .panel{display:block;margin:0;gap:0;position:absolute;left:0;right:0;top:100%;
  z-index:60;background:var(--white);border-top:1px solid var(--line);
  box-shadow:0 18px 34px -12px rgba(18,43,38,.30);padding:0}
.menu .panel a{display:flex;align-items:center;justify-content:space-between;
  padding:0 24px;min-height:56px;border-bottom:1px solid var(--line);
  font:500 16.5px/1.25 var(--sans);text-decoration:none;color:var(--ink);
  background:none;border-radius:0}
.menu .panel a::after{content:"";width:7px;height:7px;flex:0 0 auto;
  border-top:2px solid var(--muted);border-right:2px solid var(--muted);
  transform:rotate(45deg);margin-right:2px}
.menu .panel a:last-child{border-bottom:0}
/* the scrim. header.site carries backdrop-filter, which makes it the containing block for
   any position:fixed descendant, so a fixed overlay was clipped to the 72px bar and never
   appeared. Dimming downward from the panel needs no fixed positioning and covers exactly
   the page, never the bar. */
.menu .panel::after{content:"";position:absolute;left:0;right:0;top:100%;height:100vh;
  background:rgba(18,43,38,.34);pointer-events:none}
.menu .panel a:hover{background:var(--green-l);color:var(--green-d)}
.menu .panel a:hover::after{border-color:var(--green-d)}
.menu .panel a[aria-current]{background:var(--green-l);color:var(--green-d);font-weight:700}
.menu .panel a[aria-current]::after{border-color:var(--green-d)}

@media (max-width:999px){
  .menu{display:block;margin-left:auto}
  /* the panel spans the header, so it anchors to the bar rather than to the button */
  header.site .wrap.nav{position:static}
  header.site{position:sticky}
  .menu .panel{left:0;right:0}
}
@media (max-width:620px){
  .nav{gap:12px}
  header.site .wrap.nav{padding-left:16px;padding-right:16px}
  .menu .panel a{padding:0 16px;min-height:54px;font-size:16px}
}
@media (max-width:520px){
  /* three items share 328px at 360. The word "Menu" is the one that can go: the button
     keeps its aria-label, so it is still announced as Menu. */
  .menu>summary span{display:none}
  .menu>summary{padding:0;width:44px;justify-content:center}
  .brand img,.brand svg.lockup{width:146px}
}

/* ---------- diagrams on small screens ----------
   Both of these were single SVGs sized for a desktop column. Squeezed into a phone the
   timeline was clipped to 40 per cent of itself inside a silent scroll box, and the
   how-it-works diagram scaled its labels down to under 7px. An SVG cannot reflow, so
   below 760px each is replaced by the same content built from real HTML, where the type
   is real type at real sizes. Only one of the pair is ever in the document's
   accessibility tree, because display:none removes the other. */
.only-wide{display:block}
.only-narrow{display:none}
/* 840px is where the homepage timeline stops needing a scrollbar: its SVG has a 720px
   floor and the card gives it viewport minus about 102px. Below that the stacked version
   takes over. */
@media (max-width:840px){
  .only-wide{display:none}
  .only-narrow{display:block}
}

/* vertical claim timeline */
.vtl{list-style:none;margin:0;padding:0}
.vtl li{position:relative;padding:0 0 22px 42px}
.vtl li::before{content:"";position:absolute;left:12px;top:22px;bottom:-4px;width:2px;
  background:var(--line)}
.vtl li:last-child{padding-bottom:0}
.vtl li:last-child::before{display:none}
.vtl .pin{position:absolute;left:0;top:0;width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font:700 13px/1 var(--sans);color:#fff;background:var(--green)}
.vtl .pin.q{background:var(--line);width:18px;height:18px;left:4px;top:4px}
.vtl .pin.p{background:var(--gold);width:18px;height:18px;left:4px;top:4px}
.vtl .st{display:block;font:700 16px/1.3 var(--sans);color:var(--ink)}
.vtl .sd{display:block;font:400 14.5px/1.45 var(--sans);color:var(--muted);margin-top:2px}
.vtl .fl{display:inline-block;margin-top:9px;padding:5px 12px;border-radius:14px;
  font:700 13px/1.35 var(--sans);background:var(--green-l);color:var(--green-d)}
.vtl .fl.none{background:transparent;color:var(--muted);font-weight:400;padding-left:0}
.vkey{margin:20px 0 0;padding:16px 0 0;border-top:1px solid var(--line);list-style:none}
.vkey li{position:relative;padding-left:22px;margin-bottom:9px;
  font:400 13.5px/1.45 var(--sans);color:var(--muted)}
.vkey li:last-child{margin-bottom:0}
.vkey li::before{content:"";position:absolute;left:0;top:5px;width:11px;height:11px;border-radius:50%}
.vkey li.b::before{background:var(--green)}
.vkey li.o::before{background:var(--gold)}

/* stacked "records never leave" diagram */
.flow{margin:0}
.flow .fbox{border:1.5px solid var(--line);border-radius:var(--r);padding:16px 16px 14px}
.flow .fbox.you{background:var(--green-l);border-color:var(--green)}
.flow .fbox.payer{background:var(--paper)}
.flow .fbox.none{background:var(--white);border-style:dashed;border-color:var(--ink)}
.flow .ft{display:block;font:700 15.5px/1.3 var(--sans);color:var(--ink);margin-bottom:10px}
.flow .fi{background:var(--white);border:1px solid var(--line);border-radius:7px;
  padding:10px 12px;font:400 14.5px/1.4 var(--sans);color:var(--ink);margin-bottom:8px}
.flow .fi:last-of-type{margin-bottom:0}
.flow .fn{display:block;font:400 13.5px/1.45 var(--sans);color:var(--muted);margin-top:10px}
.flow .fbox.payer .fn,.flow .fbox.none .fn{margin-top:0}
.flow .farrow{position:relative;padding:14px 0 14px 34px;
  font:400 13.5px/1.4 var(--sans);color:var(--muted)}
.flow .farrow::before{content:"";position:absolute;left:12px;top:10px;bottom:16px;
  width:2px;background:var(--green)}
.flow .farrow::after{content:"";position:absolute;left:8px;bottom:9px;width:0;height:0;
  border-left:5px solid transparent;border-right:5px solid transparent;
  border-top:8px solid var(--green)}
.flow .fgap{height:16px}

/* 320px is narrower than the 360 the accessibility statement promises, but the bar
   overflowed it by 21px. This rule sits last so it beats the 520px lockup width. */
@media (max-width:359px){
  .brand img,.brand svg.lockup{width:124px}
  header.site .btn{padding:11px 12px;font-size:14px}
  .nav{gap:8px}
  header.site .wrap.nav{padding-left:12px;padding-right:12px}
  .wrap{padding-left:16px;padding-right:16px}
}

/* ---------- published price bands ----------
   The card is banded by the number of dentists. Showing the bands as a list rather than a
   single headline number is the only way the site's own promise of a published price is
   true for a two-dentist practice, which is roughly a third of the target market. */
.bands{border-top:1px solid var(--line);margin:0 0 16px}
.band{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:13px 0;border-bottom:1px solid var(--line)}
.band .bl{font:500 15.5px/1.35 var(--sans);color:var(--ink-2)}
.band .bp{font-family:var(--serif);font-size:clamp(28px,3.2vw,36px);line-height:1;
  color:var(--ink);white-space:nowrap;letter-spacing:-.01em}
.band .bu{font:400 13.5px/1 var(--sans);color:var(--muted);margin-left:4px;letter-spacing:0}
.bands.sm .bp{font-size:clamp(22px,2.4vw,26px)}
.bands.sm .band{padding:10px 0}
.setup{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  font:400 14.5px/1.4 var(--sans);color:var(--muted);margin:0 0 18px}
.setup strong{color:var(--ink-2);font-weight:600;white-space:nowrap}