/* =============================================================================
   Forward Oral Surgery, devices.css: the detail devices D01 to D20 (dna/DETAILS.md), the class names
   every package writes to. A device is never restyled per page. Tokens only (tokens.css).
   ========================================================================== */

/* D01 pill button + D02 text roll + D03 icons ------------------------------- */
.pill { display: inline-flex; align-items: center; gap: var(--gap-24); height: var(--btn-h); padding: var(--gap-16) var(--gap-24);
  border: 0; border-radius: var(--r-pill); background: var(--ground-light); color: var(--ink); cursor: pointer; white-space: nowrap;
  font-family: var(--t-c1-family); font-size: var(--t-c1-size); line-height: var(--t-c1-lh); font-weight: var(--t-c1-weight); letter-spacing: var(--t-c1-track);
  transition: background var(--dur-fast) var(--ease-io), color var(--dur-fast) var(--ease-io); }
.pill--dark { background: var(--ground-dark); color: var(--ink-invert); }
.pill--spruce { background: var(--cta); color: var(--cta-ink); }
.pill--line { background: transparent; color: inherit; box-shadow: inset 0 0 0 1px currentColor; }
.pill svg { width: var(--icon); height: var(--icon); flex: none; transition: transform var(--dur-fast) var(--ease-io); }
.pill:hover svg, .pill:focus-visible svg { transform: rotate(90deg); }
.pill:hover .ico-chev, .pill:focus-visible .ico-chev { transform: none; }

.roll { position: relative; display: inline-grid; overflow: hidden; height: 1.13em; line-height: 1.13; }
.roll > span { display: block; transition: transform var(--dur-fast) var(--ease-io); }
.roll > span + span { position: absolute; left: 0; top: 100%; }
.pill:hover .roll > span, .pill:focus-visible .roll > span { transform: translateY(-100%); }
.ulink .roll > span { transition-duration: var(--dur-link); transition-timing-function: var(--ease-out); }
.ulink:hover .roll > span, .ulink:focus-visible .roll > span { transform: translateY(-100%); }

.ico-plus, .ico-chev, .ico-corner, .ico-back { width: var(--icon); height: var(--icon); flex: none; }

/* D04 underline link ------------------------------------------------------- */
.ulink { display: inline-flex; align-items: center; gap: var(--gap-8); padding-bottom: 2px; border-bottom: 1px solid var(--line); min-height: 24px;
  font-family: var(--t-c2-family); font-size: var(--t-c2-size); line-height: var(--t-c2-lh); font-weight: var(--t-c2-weight); letter-spacing: var(--t-c2-track); }
.band--dark .ulink, .is-dark-ground .ulink, .foot .ulink { border-bottom-color: var(--ink-invert); }

/* D05 circle buttons ------------------------------------------------------- */
.circ { display: inline-grid; place-items: center; width: var(--circ); height: var(--circ); padding: 0; border: 0; border-radius: var(--r-circle);
  background: var(--tint); color: var(--anchor); cursor: pointer; flex: none; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.circ--ink { background: var(--anchor); color: var(--ink-invert); }
.circ--light { background: var(--ground-light); color: var(--anchor); }
.back { display: inline-flex; align-items: center; gap: var(--gap-16); font-family: var(--t-c1-family); font-size: var(--t-c1-size); font-weight: var(--t-c1-weight); letter-spacing: var(--t-c1-track); }
.circ svg { width: var(--icon); height: var(--icon); }
.form__submit { width: var(--circ-lg); height: var(--circ-lg); background: var(--cta); color: var(--cta-ink); }
.form__submit:hover { background: var(--ground-light); }
.form__submit[disabled] { opacity: .55; cursor: not-allowed; }/* D06 chip ----------------------------------------------------------------- */


/* D07 label with a colon --------------------------------------------------- */
.lbl { display: block; font-family: var(--t-c2-family); font-size: var(--t-c2-size); line-height: var(--t-c2-lh); font-weight: var(--t-c2-weight); letter-spacing: var(--t-c2-track); }
.lbl--sm { font-size: var(--t-c3-size); line-height: var(--t-c3-lh); font-weight: var(--t-c3-weight); letter-spacing: var(--t-c3-track); }
.lbl--faded { color: var(--ink-quiet); }
.band--dark .lbl--faded, .is-dark-ground .lbl--faded, .foot .lbl--faded, .nav .lbl--faded, .modal .lbl--faded { color: var(--ink-soft); }

/* D08 hairline rows + FAQ + concern ---------------------------------------- */
.rows { display: grid; }
.row { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-40); padding: var(--gap-24) 0; border-top: 1px solid var(--hairline-light); }
.rows > .row:last-child { border-bottom: 1px solid var(--hairline-light); }
.band--dark .row, .is-dark-ground .row, .foot .row, .nav .row { border-color: var(--hairline-dark); }
.faq__toggle { pointer-events: none; }
.faq__toggle svg { transition: transform var(--dur-fast) var(--ease-out); }

/* D09 counters ------------------------------------------------------------- */
.counter { display: inline-flex; align-items: baseline; gap: var(--gap-8); }
.counter__n { font-family: var(--t-h2-family); font-size: var(--t-h2-size); line-height: 1; letter-spacing: var(--t-h2-track); }
.counter__of { font-family: var(--t-c3-family); font-size: var(--t-c3-size); font-weight: var(--t-c3-weight); }

/* D10 cards ---------------------------------------------------------------- */
.card { position: relative; border-radius: var(--r-card); overflow: hidden; display: flex; flex-direction: column; }

/* D11 split headline ------------------------------------------------------- */
.split-h { display: grid; font-family: var(--display); font-weight: 400; }
.split-h > span { display: block; }
.split-h > .sl { text-align: left; }
.split-h > .sr { text-align: right; }
.split-h > .sc { text-align: center; }

/* D12 scroll-revealed words ------------------------------------------------ */
.reveal-words .w { color: var(--ink-reveal-light); transition: color var(--dur-fast) linear; }
.band--dark .reveal-words .w { color: var(--ink-reveal-dark); }
.reveal-words .w.on { color: var(--ink); }
.band--dark .reveal-words .w.on { color: var(--ink-invert); }
html:not(.js) .reveal-words .w, .reduced .reveal-words .w { color: inherit; }

/* D13 key-indicator ring --------------------------------------------------- */
.ring { display: grid; place-items: center; width: var(--ring); height: var(--ring); flex: none; padding: var(--gap-40); border: 1px solid var(--hairline-light); border-radius: var(--r-circle); text-align: center;
  font-family: var(--t-p1-family); font-size: var(--t-p1-size); line-height: var(--t-p1-lh); font-weight: var(--t-p1-weight); letter-spacing: var(--t-p1-track); }
.band--dark .ring { border-color: var(--hairline-dark); }

/* D14 pill form ------------------------------------------------------------ */
.form { display: grid; gap: var(--gap-12); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-12); }
.form__end { display: flex; align-items: center; gap: var(--gap-12); }
.form__end .field { flex: 1; }
.field { position: relative; display: block; }
.field input, .field textarea, .field select { width: 100%; height: var(--field-h); padding: var(--gap-24) var(--gap-32) var(--gap-8); border: 1px solid var(--hairline-dark); border-radius: var(--r-field);
  background: transparent; color: var(--ink-invert); font-family: var(--t-p3-family); font-size: 16px; line-height: 1.2; transition: border-color var(--dur-fast) var(--ease-io); }
.field textarea { height: var(--circ-lg); padding-top: var(--gap-32); resize: none; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--ink-invert); outline: none; }
/* A3: every form sits on a dark ground (modal, x03, footer); the ring is light there, never the dark-on-dark shadow (focus-ring-contrast) */
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { box-shadow: 0 0 0 2px var(--ink-invert); }
.field label { position: absolute; left: var(--gap-32); top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--ink-3-dark);
  font-family: var(--t-p3-family); font-size: var(--t-p3-size); transition: top var(--dur-fast) var(--ease-io), font-size var(--dur-fast) var(--ease-io); }
.field--area label { top: var(--gap-24); transform: none; }
.field input:focus ~ label, .field input:not(:placeholder-shown) ~ label, .field textarea:focus ~ label, .field textarea:not(:placeholder-shown) ~ label {
  top: var(--gap-16); transform: none; font-size: var(--t-c3-size); }
.field--area textarea:focus ~ label, .field--area textarea:not(:placeholder-shown) ~ label { top: var(--gap-12); }
.field__err { margin-top: var(--gap-8); padding-left: var(--gap-32); font-size: var(--t-c2-size); font-weight: 600; color: var(--ink-invert); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--cta); }
.radios { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-24); border: 0; margin: 0 0 var(--gap-12); padding: 0; }
.radios legend { padding: 0; margin-bottom: var(--gap-12); }
.radio { display: inline-flex; align-items: center; gap: var(--gap-8); min-height: 24px; cursor: pointer; font-family: var(--t-c2-family); font-size: var(--t-c2-size); font-weight: var(--t-c2-weight); }
/* the measured 10px dot (D14), drawn inside a 24px target (WCAG 2.5.8): a 1px ring, filled when checked */
.radio input { appearance: none; flex: none; width: var(--gap-24); height: var(--gap-24); margin: 0; border: 0; border-radius: var(--r-circle); color: var(--ink-invert);
  background: radial-gradient(circle, transparent 0 4px, currentColor 4.5px 5.25px, transparent 5.75px); }
.radio input:checked { background: radial-gradient(circle, currentColor 0 5.25px, transparent 5.75px); }
.radio input:focus-visible { outline: 2px solid var(--ink-invert); outline-offset: 3px; }
.form-noscript, .form__demo { color: var(--ink-soft); font-size: var(--t-c2-size); line-height: 1.4; }
/* F: the one post-submit message (SUBMIT_NOTE_HTML), full ink so it reads at 14.9:1; the number is a tel link */
.form-note { color: var(--ink-invert); font-family: var(--t-p1-family); font-size: var(--t-p1-size); font-weight: var(--t-p1-weight); line-height: 1.3; letter-spacing: var(--t-p1-track); }
.form-note a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; white-space: nowrap; }
.form-note[hidden] { display: none; }

/* D16 procedure row -------------------------------------------------------- */
.proc { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-16); min-height: 44px; padding: var(--gap-12) 0; border-top: 1px solid var(--hairline-dark);
  font-family: var(--t-c2-family); font-size: var(--t-c2-size); line-height: var(--t-c2-lh); font-weight: var(--t-c2-weight); letter-spacing: var(--t-c2-track); }
.hdr__panel .proc { border-top-color: var(--hairline-light); }
.proc:hover { opacity: .6; }/* D17 avatar stack: retired (builder H2, Cleven 2 Nov): the people show at native size in h02 .pcard (home.css) */

/* D19 testimonial block ---------------------------------------------------- */
/* D20 comparison slider ---------------------------------------------------- */



@media (max-width: 1023px) {
  .form__row { grid-template-columns: 1fr; }
  .radio { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .reveal-words .w { color: inherit !important; } }

/* ---- prefooter: the last band of every page (fix wave 2, C4; St. Mary's pre-footer and Your visit) ---------------------------
   A full-bleed bright photo about 900px tall at 1440. No filter on the picture: the only dark is a bottom gradient under the type.
   The footer's curve rises over its bottom edge (footer.css margin-top), so the type clears the curve. */
.s-prefoot { position: relative; display: flex; align-items: flex-end; overflow: hidden; height: clamp(520px, 62.5vw, 1280px); background: var(--anchor); color: var(--ink-invert); }
.s-prefoot__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.s-prefoot::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 62%; pointer-events: none;
  background: linear-gradient(to top, rgba(20, 32, 31, .8), rgba(20, 32, 31, .5) 58%, transparent); }
.s-prefoot__in { position: relative; z-index: 1; display: grid; gap: var(--gap-32); width: 100%; padding-bottom: calc(var(--foot-curve) + var(--gap-48)); }
.s-prefoot__h { color: var(--ink-invert); margin: 0; }
.s-prefoot__go { display: flex; justify-content: flex-end; }
@media (max-width: 1023px) { .s-prefoot { height: auto; min-height: 80svh; } .s-prefoot__go { justify-content: flex-start; } }

/* ---- rings: N overlapping hairline circles, one light disc on the ring line (fix wave 2, C3; D13, St. Mary's step device) ---- */
.band--white { background: var(--white); color: var(--ink); }
.rings { --ov: 40px; --disc: 56px; overflow: hidden; }
.rings__in { display: grid; gap: var(--gap-48); }
.rings__lbl { justify-self: center; }
.rings__stage { position: relative; }
.rings__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n), calc((100% - var(--ov)) / var(--n))); align-items: stretch; }
.rings__i { position: relative; display: flex; flex-direction: column; gap: var(--gap-24); min-width: 0; }
.rings__ring { position: relative; border: 0; width: calc(100% + var(--ov)); aspect-ratio: 1; height: auto; padding: var(--gap-24); gap: var(--gap-8); align-content: center; justify-items: center; }
.rings__ring .counter__n { font-size: var(--t-h4-size); }
.rings__t { margin: 0; font-weight: 400; }
.rings__p { flex: 1 1 auto; margin: 0; width: calc(100% - var(--gap-24)); margin-left: calc((var(--ov) + var(--gap-24)) / 2); text-align: center;
  font-size: 16px; line-height: 1.45; color: var(--ink-quiet); }
.rings__disc { position: absolute; z-index: 2; width: var(--disc); height: var(--disc); left: calc((100% - var(--ov)) / var(--n) * 1.5 + var(--ov) / 2); top: 0;
  margin: calc(var(--disc) / -2) 0 0 calc(var(--disc) / -2); fill: var(--tint); pointer-events: none; }
@media (max-width: 1023px) {
  .rings { --ov: 20px; --disc: 40px; }
  .rings__view { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--hairline-light) transparent; padding-bottom: var(--gap-16); }
  .rings__stage { width: max-content; }
  .rings__list { display: flex; }
  .rings__i { flex: none; width: 280px; scroll-snap-align: start; }
  .rings__i + .rings__i { margin-left: calc(var(--ov) * -1); }
  .rings__ring { width: 100%; }
  .rings__p { width: calc(100% - 2 * var(--ov)); margin-left: var(--ov); }
  .rings__disc { left: calc(280px * 1.5 - var(--ov)); }
}
.rings__line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke: var(--hairline-light); stroke-width: 1px; pointer-events: none; }

/* =============================================================================
   Forward Oral Surgery: the navy accent pill, a button that looks like an underline link, the pills on dark grounds, the dark navy band,
   and the before and after slider (D20, ported from our St. Mary Dental smile gallery; loaded by assets/js/ba.js).
   ========================================================================== */
.pill--navy { background: var(--cta); color: var(--cta-ink); }
/* on a dark ground (the footer, the menu, the dialog, the dark bands) the accent would vanish into it, so the pill turns paper */
.foot .pill--navy, .nav .pill--navy, .modal .pill--navy, .band--dark .pill--navy, .band--navy .pill--navy, .s-prefoot .pill--navy { background: var(--ground-light); color: var(--ink); }
button.ulink { border-style: solid; border-width: 0 0 1px; border-color: var(--line); background: none; font: inherit; color: inherit; cursor: pointer; padding-inline: 0; }
.band--navy { background: var(--navy); color: var(--ink-invert); }
.band--navy .ulink, .band--navy button.ulink { border-bottom-color: var(--ink-invert); }
.band--navy .lbl--faded { color: var(--ink-soft); }
.band--navy .row { border-color: var(--hairline-dark); }
.band--navy .counter__of { color: var(--ink-soft); }

.ba { position: relative; overflow: hidden; border-radius: var(--r-frame); --pos: 50%; }
.ba img { width: 100%; height: auto; }
.ba__after { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos)); }
.ba__after img { width: 100%; height: 100%; object-fit: cover; }
.ba__line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 1px; background: var(--ink-invert); pointer-events: none; }
.ba__knob { position: absolute; top: 50%; left: var(--pos); transform: translate(-50%, -50%); pointer-events: none; }
.ba__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.ba__range:focus-visible + .ba__knob { outline: 2px solid var(--ink-invert); outline-offset: 3px; border-radius: var(--r-circle); }
.ba__lbl { position: absolute; bottom: var(--gap-16); padding: var(--gap-8) var(--gap-12); border-radius: var(--r-pill); background: var(--anchor); color: var(--ink-invert); pointer-events: none; }
.ba__lbl--b { left: var(--gap-16); }
.ba__lbl--a { right: var(--gap-16); }
.ba-fig { margin: 0; display: grid; gap: var(--gap-8); }
.ba-fig--native { width: var(--native); max-width: 100%; }
.ba-fig--native .ba { border-radius: var(--r-img); aspect-ratio: var(--fr); }
.ba-fig--native .ba > img { height: 100%; object-fit: cover; }
.ba-fig--native .ba__lbl { font-size: var(--t-c3-size); }
.ba-fig--native .ba__knob { width: var(--icon); height: var(--icon); }
.foot .form__submit, .modal .form__submit { background: var(--ground-light); color: var(--ink); }