/* Component library. GENERATED -- built by tools/build_css.py and
   vendored here by tools/sync_theme.py.

   RULES ONLY. The :root block and the var() fallbacks are stripped
   on the way in, because build_css.py renders for one practice and
   this file is shared by every clinic. Token VALUES come from
   css/tokens.css and css/brands/<slug>.css, which load first.

   Do not hand-edit: the source is components/ in orthodynamo-layout. */
/* Orthodynamo layout system -- GENERATED, do not edit by hand.
 * Source: brand/tokens.base.json
 * Rebuild: python3 tools/build_css.py
 *
 * Clinic-agnostic by construction. A practice's own values live in its
 * handoff (build/delivery/<slug>/), never here: this file ships inside the
 * theme, which every clinic installs.
 */

h1, .od-h1 { font-family:var(--od-font-display);font-size:clamp(2.0rem, 1.8269rem + 0.7692vw, 2.75rem);line-height:1.15;font-weight:600; color:var(--od-text-heading); margin:0 0 .5em; }
h2, .od-h2 { font-family:var(--od-font-display);font-size:clamp(1.625rem, 1.5096rem + 0.5128vw, 2.125rem);line-height:1.2;font-weight:600; color:var(--od-text-heading); margin:0 0 .5em; }
h3, .od-h3 { font-family:var(--od-font-display);font-size:clamp(1.375rem, 1.3173rem + 0.2564vw, 1.625rem);line-height:1.3;font-weight:600; color:var(--od-text-heading); margin:0 0 .5em; }
h4, .od-h4 { font-family:var(--od-font-display);font-size:clamp(1.1875rem, 1.1442rem + 0.1923vw, 1.375rem);line-height:1.35;font-weight:600; color:var(--od-text-heading); margin:0 0 .5em; }
h5, .od-h5 { font-family:var(--od-font-body);font-size:clamp(1.0625rem, 1.0337rem + 0.1282vw, 1.1875rem);line-height:1.4;font-weight:600; color:var(--od-text-heading); margin:0 0 .5em; }
h6, .od-h6 { font-family:var(--od-font-body);font-size:clamp(1.0rem, 0.9856rem + 0.0641vw, 1.0625rem);line-height:1.45;font-weight:600; color:var(--od-text-heading); margin:0 0 .5em; }
p, .od-body { font-family:var(--od-font-body);font-size:clamp(1.0rem, 0.9712rem + 0.1282vw, 1.125rem);line-height:1.7;font-weight:400; color:var(--od-text-primary); margin:0 0 1em; }
.od-body-lg { font-family:var(--od-font-body);font-size:clamp(1.125rem, 1.0673rem + 0.2564vw, 1.375rem);line-height:1.6;font-weight:400; color:var(--od-text-primary); margin:0 0 1em; }
.od-small { font-family:var(--od-font-body);font-size:clamp(0.9375rem, 0.9231rem + 0.0641vw, 1.0rem);line-height:1.6;font-weight:400; color:var(--od-text-primary); }
.od-caption { font-family:var(--od-font-body);font-size:clamp(0.875rem, 0.8606rem + 0.0641vw, 0.9375rem);line-height:1.5;font-weight:500; color:var(--od-text-primary); }
.od-accent { font-family:var(--od-font-accent); font-size:3rem; line-height:1.1; color:var(--od-text-heading); }
body { font-family:var(--od-font-body);font-size:clamp(1.0rem, 0.9712rem + 0.1282vw, 1.125rem);line-height:1.7;font-weight:400; color:var(--od-text-primary); background:var(--od-surface-page); margin:0; }
/* GreenLight also applies paragraph spacing to body. Keep that gap inside
   paragraphs; the page footer and mobile action bar own their own clearance. */
body.gspb-bodyfront { margin-bottom:0; }
a { color: inherit; }
/* Global link colour lives HERE, above the components, on purpose.
   It is (0,1,1), the same specificity as `.od-utility a` and `.od-nav a`, so
   whichever comes later wins. Below the components it silently outranked chrome
   that had already set its own colour. Also scoped off .od-btn so a hovered
   button keeps its own label colour. */
a:not(.od-btn) { color:var(--od-text-link); }
a:not(.od-btn):hover { color:var(--od-text-link-hover); }
img { max-width:100%; height:auto; display:block; }
* { box-sizing:border-box; }

/* ---- layout -------------------------------------------------------- */
.od-section { padding:var(--od-section-pad, clamp(3.0rem, 2.3077rem + 3.0769vw, 6.0rem)) 0;
               background:var(--od-surface-page); }
.od-section--alt { background:var(--od-surface-sunken); }
.od-section--tint { background:var(--od-surface-brand-subtle); }
.od-section--brand { background:var(--od-surface-brand);
                      color:var(--od-text-on-brand); }
.od-section--inverse { background:var(--od-surface-inverse);
                        color:var(--od-text-on-inverse); }
.od-container { max-width:var(--od-content-max);
                 margin:0 auto; padding-left:var(--od-gutter);
                 padding-right:var(--od-gutter); }
.od-section__head { text-align:center; margin-bottom:var(--od-space-7); }

/* ---- buttons -------------------------------------------------------
   Every button is at least 44x44 (WCAG 2.5.8 asks 24; 44 is the usability
   standard, and the right call for a 45+ audience on a phone). The label
   colour is DERIVED via on(), so it stays legible whatever the brand is. */
.od-btn { display:inline-flex; align-items:center; justify-content:center;
           gap:var(--od-gap);
           font-family:var(--od-font-body);font-size:clamp(1.0rem, 0.9856rem + 0.0641vw, 1.0625rem);line-height:1.0;font-weight:600; text-decoration:none; cursor:pointer; border:0;
           border-radius:var(--od-radius-pill);
           padding:var(--od-pad-y) var(--od-pad-x);
           min-height:var(--od-min-target);
           min-width:var(--od-min-target);
           transition:background-color .16s ease, color .16s ease, border-color .16s ease; }
@media (prefers-reduced-motion: reduce) { .od-btn { transition:none; } }

/* A button owns its own hover appearance. Themes commonly fade every link in
   the content area on hover -- custom-style.css does exactly that with
   `main div a:hover { opacity:.7 }`, and already exempts Greenshift's buttons
   the same way. A button IS an <a>, so without this the CTA washed out to 70%
   instead of darkening to its hover token -- the background changed correctly
   and the opacity then lightened it, which reads as faded rather than pressed.
   (0,2,0) beats that rule's (0,1,3). */
.od-btn:hover { opacity:1; }
.od-btn:focus-visible { outline:var(--od-focus-width) solid var(--od-border-focus);
                         outline-offset:var(--od-focus-offset); }
.od-btn[disabled], .od-btn--disabled {
  background:var(--od-action-disabled-bg);
  color:var(--od-action-disabled-text);
  cursor:not-allowed; pointer-events:none; }
.od-btn--primary { background:var(--od-action-primary-bg);
                    color:var(--od-action-primary-text); }
.od-btn--primary:hover { background:var(--od-action-primary-bg-hover);
                          color:var(--od-action-primary-text-hover); }
.od-btn--primary:active { background:var(--od-action-primary-bg-active);
                           color:var(--od-action-primary-text-hover); }
.od-btn--secondary { background:var(--od-action-secondary-bg);
                      color:var(--od-action-secondary-text); }
.od-btn--secondary:hover { background:var(--od-action-secondary-bg-hover);
                            color:var(--od-action-secondary-text-hover); }
.od-btn--secondary:active { background:var(--od-action-secondary-bg-active);
                             color:var(--od-action-secondary-text-hover); }
.od-btn--outline { background:transparent; color:var(--od-action-outline-text);
                    border:1.5px solid var(--od-action-outline-border); }
.od-btn--outline:hover { background:var(--od-action-outline-bg-hover);
                          color:var(--od-action-outline-text-hover);
                          border-color:var(--od-action-outline-border-hover); }
.od-btn--outline:active { background:var(--od-surface-sunken);
                           color:var(--od-action-outline-text-hover);
                           border-color:var(--od-action-outline-border-hover); }
.od-btn--sm { padding:var(--od-pad-y-sm) var(--od-pad-x-sm);
               font-size:clamp(0.9375rem, 0.9231rem + 0.0641vw, 1.0rem); }
.od-btn--lg { padding:var(--od-pad-y-lg) var(--od-pad-x-lg); }
.od-btn--block { display:flex; width:100%; }

/* ---- cards --------------------------------------------------------- */
.od-card { display:flex; flex-direction:column;
            background:var(--od-surface-page);
            border-radius:var(--od-radius-card);
            padding:var(--od-space-5); }
.od-card--muted { background:var(--od-surface-sunken); }
.od-card > :last-child { margin-bottom:0; }
.od-card > .od-btn:last-child { margin-top:auto; align-self:flex-start; }
.od-card.od-center > .od-btn:last-child { align-self:center; }
.od-card--bordered { border:1px solid var(--od-border-subtle); }
.od-card__title { font-family:var(--od-font-display);font-size:clamp(1.375rem, 1.3173rem + 0.2564vw, 1.625rem);line-height:1.3;font-weight:600; margin:0 0 .5em; }
.od-card__links { display:flex; flex-wrap:wrap; gap:10px; margin-top:var(--od-space-4); }

.od-grid { display:grid; gap:var(--od-space-5); }
.od-grid--3 { grid-template-columns:repeat(3, 1fr); }
.od-grid--2 { grid-template-columns:repeat(2, 1fr); }
@media (max-width:900px) {
  .od-grid--3, .od-grid--2 { grid-template-columns:1fr; }
}


/* ---- page chrome: only what the component blocks below do not define ---- */
/* Body column. .od-container is the chrome width (header, footer, 82.5rem);
   .od-wrap is the narrower reading column page bodies sit in, self-centred
   with its own side gutter so it works inside the existing .od-section
   (which pads vertically only) without any extra wrapper. */
.od-wrap { width:min(var(--od-wrap-max), 100% - 2 * var(--od-gutter-side)); min-width:0; margin-inline:auto; }
.od-utility a { text-decoration:none; color:var(--od-text-on-hero); }
.od-header { background:var(--od-surface-hero); }
.od-nav { display:flex; gap:26px; flex-wrap:wrap; align-items:center; }
.od-nav a { display:inline-flex; align-items:center; text-decoration:none;
             font-size:clamp(1.0rem, 0.9856rem + 0.0641vw, 1.0625rem); font-weight:500;
             color:var(--od-text-on-hero); }
.od-logo b { font-weight:700; }
.od-logos div { background:var(--od-surface-sunken);
                 border-radius:var(--od-radius-chip);
                 padding:16px 8px; text-align:center;
                 font-size:clamp(0.875rem, 0.8606rem + 0.0641vw, 0.9375rem); font-weight:600; }
.od-faq { border:1px solid var(--od-border-subtle);
           border-radius:var(--od-radius-card);
           padding:20px 24px; margin-bottom:14px;
           background:var(--od-surface-page); }
.od-faq summary { font-family:var(--od-font-display);font-size:clamp(1.1875rem, 1.1442rem + 0.1923vw, 1.375rem);line-height:1.35;font-weight:600; cursor:pointer; list-style:none; }
.od-faq summary::-webkit-details-marker { display:none; }
.od-faq[open] summary { margin-bottom:.6em; }
.od-footer ul { list-style:none; padding:0; margin:0; }
.od-footer li { margin:.5em 0; font-size:clamp(0.9375rem, 0.9231rem + 0.0641vw, 1.0rem);
                 color:var(--od-text-on-inverse-muted); }

/* ---- trust strip ----------------------------------------------------- */
.od-trust { display:flex; flex-wrap:wrap; justify-content:center;
             gap:var(--od-space-3) var(--od-space-6);
             padding-block:var(--od-space-5) 0; }
/* A section that continues the block above it rather than starting a new one. */
.od-section--joined { padding-top:0; }
.od-trust__item { display:flex; align-items:center; gap:var(--od-space-2);
                   font-size:.875rem; color:var(--od-text-secondary); }
.od-trust__tick { color:var(--od-surface-hero); flex:none; }

/* ---- chips: insurance logos, area links ------------------------------ */
.od-chipgrid { display:flex; flex-wrap:wrap; justify-content:center; gap:var(--od-space-3); }
.od-chip { display:flex; align-items:center; justify-content:center;
            min-height:56px; padding:var(--od-space-3) var(--od-space-5);
            background:var(--od-surface-sunken);
            border-radius:var(--od-radius-chip);
            font-size:clamp(0.875rem, 0.8606rem + 0.0641vw, 0.9375rem); font-weight:600;
            /* The brand engine guarantees a role against white, and the chip's
               own surface is not white: secondary measured 4.2:1 on the default
               sunken and 4.29:1 on Freelove's, under the 4.5:1 WCAG 1.4.3 needs. */
            color:var(--od-text-primary); }
.od-arealink { display:inline-flex; align-items:center; gap:var(--od-space-2);
                padding:.5rem .5rem .5rem 1.15rem; min-height:var(--od-min-target);
                border:1px solid var(--od-border-default);
                border-radius:var(--od-radius-pill);
                background:var(--od-surface-page);
                color:var(--od-text-primary);
                text-decoration:none; font-size:.875rem;
                transition:background-color .16s ease, color .16s ease, border-color .16s ease; }
.od-arealink:hover { border-color:var(--od-surface-hero);
                      background:var(--od-surface-brand-subtle); }
.od-arealink__go { display:inline-flex; align-items:center; justify-content:center;
                    width:24px; height:24px; flex:none; border-radius:999px;
                    background:var(--od-surface-hero);
                    color:var(--od-text-on-hero); }
.od-arrow { width:12px; height:12px; }

/* ---- meet the doctor -------------------------------------------------- */
.od-meet { position:relative; display:grid;
            grid-template-columns:minmax(0,320px) minmax(0,1fr); align-items:center;
            max-width:1120px; margin-inline:auto; }
.od-meet__photo { position:relative; z-index:2; width:100%; aspect-ratio:1;
                   border-radius:999px; overflow:hidden;
                   background:var(--od-surface-sunken); }
.od-meet__photo img { width:100%; height:100%; object-fit:cover; }
/* The panel is an ellipse the portrait sits into, which is the shape the design
   is built on. It needs generous left padding so the copy clears the circle. */
.od-meet__panel { background:var(--od-surface-hero);
                   color:var(--od-text-on-hero);
                   border-radius:46%/50%;
                   padding:var(--od-space-8) var(--od-space-8)
                           var(--od-space-8) 190px;
                   margin-left:-120px; }
.od-meet__panel h2 { color:var(--od-text-on-hero); margin:0 0 .6em;
                      font-size:1.75rem; }
.od-meet__script { font-family:var(--od-font-accent); font-size:3.25rem;
                    line-height:.9; margin:0 0 .05em; }
.od-checklist { list-style:none; margin:0 0 var(--od-space-6); padding:0; }
.od-checklist li { display:grid; grid-template-columns:18px 1fr; gap:var(--od-space-3);
                    margin-bottom:var(--od-space-3); font-size:clamp(0.875rem, 0.8606rem + 0.0641vw, 0.9375rem); line-height:1.6; }
.od-checklist b { font-weight:700; }
@media (max-width:900px) {
  .od-meet { grid-template-columns:1fr; justify-items:center; }
  .od-meet__photo { max-width:260px; }
  .od-meet__panel { margin-left:0; margin-top:-60px; border-radius:var(--od-radius-card);
                     padding:var(--od-space-9) var(--od-space-6) var(--od-space-7); }
}


/* ---- reviews ---------------------------------------------------------- */
.od-stars { color:var(--od-decor-rating);
             letter-spacing:.15em; font-size:1.125rem; }
.od-review { text-align:center; }
.od-review__quote { font-size:.875rem; line-height:1.75;
                     color:var(--od-text-secondary); margin:var(--od-space-4) 0; }
.od-review__name { font-weight:700; }

/* ---- before/after: cards pegged to a wire ----------------------------- */
.od-wire { position:relative; padding-block:var(--od-space-8); }
.od-wire__line { position:absolute; inset:0 0 auto; }
.od-pegged { display:flex; justify-content:center; align-items:flex-start;
              gap:var(--od-space-4); flex-wrap:wrap; }
.od-peg { position:relative; width:230px; background:var(--od-surface-page);
           border-radius:var(--od-radius-card);
           padding:var(--od-space-3); box-shadow:var(--od-shadow-lg, 0 6px 18px rgba(0,0,0,.10)); }
.od-peg:nth-child(odd)  { transform:rotate(-3deg); }
.od-peg:nth-child(even) { transform:rotate(2.5deg); margin-top:var(--od-space-6); }
.od-peg img { border-radius:var(--od-radius-chip); }
.od-peg__cap { text-align:center; font-size:clamp(0.875rem, 0.8606rem + 0.0641vw, 0.9375rem); padding-top:var(--od-space-3); }
@media (prefers-reduced-motion: reduce) { .od-peg { transform:none; } }


/* ---- numbered steps --------------------------------------------------- */
.od-steps { list-style:none; margin:0; padding:0; }
.od-steps li { position:relative; display:grid; grid-template-columns:38px 1fr;
                gap:var(--od-space-4); padding-bottom:var(--od-space-6); }
.od-steps li:not(:last-child)::before { content:""; position:absolute; left:18px; top:38px;
   bottom:8px; width:2px; background:currentColor; opacity:.35; }
.od-step__num { display:flex; align-items:center; justify-content:center; width:38px; height:38px;
   border-radius:999px; background:var(--od-surface-page);
   color:var(--od-text-heading); font-weight:700; font-size:.875rem; }
.od-step__body h3 { margin:.35em 0 .25em; font-size:1.0625rem; }
.od-step__body p { font-size:clamp(0.875rem, 0.8606rem + 0.0641vw, 0.9375rem); line-height:1.65; margin:0; }

/* ---- comparison ------------------------------------------------------- */
.od-compare { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
               gap:var(--od-space-5); }
.od-compare__col { background:var(--od-surface-sunken);
                    border-radius:var(--od-radius-card);
                    padding-bottom:var(--od-space-5); overflow:hidden; }
.od-compare__head { display:inline-block; padding:var(--od-space-3) var(--od-space-6);
   border-radius:0 var(--od-radius-pill)
                 var(--od-radius-pill) 0;
   font-family:var(--od-font-display); font-weight:600; font-size:1.25rem;
   margin:var(--od-space-5) 0 var(--od-space-5); }
.od-compare--yes .od-compare__head { background:var(--od-surface-compare-positive);
   color:var(--od-text-on-compare-positive); }
.od-compare--no .od-compare__head { background:var(--od-surface-compare-negative);
   color:var(--od-text-on-compare-negative); }
.od-compare ul { list-style:none; margin:0; padding:0 var(--od-space-6); }
.od-compare li { display:grid; grid-template-columns:18px 1fr; gap:var(--od-space-3);
                  font-size:clamp(0.875rem, 0.8606rem + 0.0641vw, 0.9375rem); line-height:1.6; margin-bottom:.7em; }
.od-compare--yes li::before { content:"\2713"; color:var(--od-status-success-text); font-weight:700; }
.od-compare--no  li::before { content:"\2715"; color:var(--od-status-error-text); font-weight:700; }

/* ---- pricing ---------------------------------------------------------- */
.od-prices { display:flex; flex-wrap:wrap; justify-content:center; gap:var(--od-space-4); }
.od-price { flex:1 1 170px; max-width:210px; text-align:center;
             background:var(--od-surface-page);
             border-radius:var(--od-radius-card);
             padding:var(--od-space-6) var(--od-space-4);
             box-shadow:var(--od-shadow-md, 0 4px 14px rgba(0,0,0,.06)); }
.od-price__fig { font-family:var(--od-font-display); font-weight:700;
                  font-size:1.75rem; color:var(--od-text-heading);
                  font-variant-numeric:tabular-nums; }
.od-price__label { font-size:clamp(0.875rem, 0.8606rem + 0.0641vw, 0.9375rem); color:var(--od-text-secondary);
                    margin-top:.4em; }

/* ---- tinted band ------------------------------------------------------ */
.od-band { background:linear-gradient(180deg,
   var(--od-surface-page) 0%,
   var(--od-surface-brand-subtle) 45%,
   var(--od-surface-page) 100%); }
.od-panel { background:var(--od-surface-hero);
             color:var(--od-text-on-hero);
             border-radius:0 var(--od-radius-card)
                           var(--od-radius-card) 0;
             padding:var(--od-space-8); position:relative; overflow:hidden; }

/* ---- chrome: utility bar, header, footer ---------------------------- */
.od-utility { background:var(--od-surface-hero);
               color:var(--od-text-on-hero); font-size:clamp(0.875rem, 0.8606rem + 0.0641vw, 0.9375rem); }
.od-utility__bar { display:flex; flex-wrap:wrap; align-items:center;
                    justify-content:space-between; gap:var(--od-space-4);
                    padding-block:16px;
                    border-bottom:1px solid var(--od-border-on-hero-subtle); }
.od-utility__links { display:flex; flex-wrap:wrap; gap:var(--od-space-5); }
.od-utility__links a { color:inherit; text-decoration:none; }
.od-utility__links a:hover { text-decoration:underline; }
.od-utility__actions { display:flex; align-items:center; gap:var(--od-space-4); }
.od-utility__phone { display:inline-flex; align-items:center; gap:.45em;
                      color:inherit; text-decoration:none; font-weight:600;
                      white-space:nowrap; }
.od-header__bar { display:flex; flex-wrap:wrap; align-items:center;
                   justify-content:space-between; gap:var(--od-space-5);
                   padding-block:19px; }
.od-logo { font-family:var(--od-font-display); font-weight:700;
            font-size:1.375rem; color:var(--od-text-heading);
            text-decoration:none; }
.od-logo--footer { color:var(--od-text-on-inverse); margin:0 0 var(--od-space-4); }
.od-btn--light { background:var(--od-surface-page);
                  color:var(--od-text-primary); }
.od-btn--light:hover { background:var(--od-surface-sunken);
                        color:var(--od-text-primary); }
.od-btn--light:active { background:var(--od-surface-sunken);
                         color:var(--od-text-primary); }
.od-btn--inverse { background:var(--od-surface-inverse);
                    color:var(--od-text-on-inverse); }
.od-btn--inverse:hover { background:var(--od-text-heading);
                          color:var(--od-text-on-inverse); }
.od-btn--inverse:active { background:var(--od-text-heading);
                           color:var(--od-text-on-inverse); }
.od-footer { background:var(--od-surface-inverse);
              color:var(--od-text-on-inverse);
              padding-block:var(--od-space-8); margin-top:var(--od-space-9); }
.od-footer a { color:inherit; text-decoration:none; }
.od-footer a:hover { text-decoration:underline; }
.od-footer h4 { color:var(--od-text-on-inverse);
                 font-size:1rem; margin:0 0 var(--od-space-4); }
.od-footer__grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
                    gap:var(--od-space-6); padding-block:var(--od-space-7); }
.od-linklist { list-style:none; margin:0; padding:0; font-size:.875rem; line-height:2; }
.od-footer__row { display:flex; flex-wrap:wrap; gap:var(--od-space-5);
                   padding-block:var(--od-space-4); font-size:clamp(0.875rem, 0.8606rem + 0.0641vw, 0.9375rem);
                   border-top:1px solid rgba(255,255,255,.14); }
.od-footer__legal { display:flex; flex-wrap:wrap; justify-content:space-between;
                     gap:var(--od-space-4); padding-top:var(--od-space-6); }
.od-discountbar { display:flex; flex-wrap:wrap; align-items:center; gap:var(--od-space-4);
   border:1px solid rgba(255,255,255,.18); border-radius:var(--od-radius-pill);
   padding:var(--od-space-2); font-size:clamp(0.875rem, 0.8606rem + 0.0641vw, 0.9375rem); }
.od-discountbar__label { background:var(--od-surface-hero);
   color:var(--od-text-on-hero); font-weight:700;
   padding:var(--od-space-2) var(--od-space-5);
   border-radius:var(--od-radius-pill); }
.od-discountbar__items { flex:1 1 auto; }

/* ---- small helpers ---------------------------------------------------- */
.od-eyebrow { text-transform:uppercase; letter-spacing:.08em; font-size:clamp(0.875rem, 0.8606rem + 0.0641vw, 0.9375rem);
               font-weight:700; text-align:center; line-height:1.3;
               color:var(--od-text-secondary);
               margin:0 0 2.75rem; }
.od-center { text-align:center; }
.od-grid--4 { grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); }

/* ---- responsive -------------------------------------------------------
   Kept together and LAST on purpose. A media query carries no extra
   specificity, so a plain rule further down the file beats it: that is exactly
   how the hero stopped collapsing on mobile. Order is the whole defence. */
@media (max-width:900px) {
  .od-footer__grid { grid-template-columns:repeat(2,1fr); }
  .od-panel { padding:var(--od-space-6); border-radius:var(--od-radius-card); }
  .od-compare { grid-template-columns:1fr; }
}

@media (max-width:600px) {
  .od-grid, .od-grid--2, .od-grid--3, .od-grid--4 { grid-template-columns:1fr; }
  .od-footer__grid { grid-template-columns:1fr; }
  .od-utility__bar, .od-header__bar { flex-direction:column; align-items:flex-start; }
  .od-nav { gap:14px; }
  .od-trust { justify-content:flex-start; }
  .od-btn { width:100%; }
}

/* ---- surface ink ----------------------------------------------------
   A rule that matches an element beats a colour inherited from an ancestor,
   and `p` and `h2`-`h6` above each carry a colour of their own. So a band that
   set `color` on itself never actually coloured its own text: each band had to
   restate the colour element by element, and anything nobody restated fell back
   to body ink. The consultation banner measured 4.38:1 that way; WCAG 1.4.3
   needs 4.5:1 for body text.

   A band's ink now reaches its text once. The second rule stops it at the edge
   of any surface laid inside the band: that surface owns its own ink, and the
   `inherit` above resolves to the surface, not the band. Add a light surface to
   the second list whenever you add one; a band goes in the first. */
:is(.od-section--brand, .od-section--inverse, .od-meet__panel, .od-site-footer__cta)
  :is(p, h1, h2, h3, h4, h5, h6, li, dt, dd, address, blockquote, figcaption, small,
      .od-body, .od-body-lg, .od-small, .od-caption) { color:inherit; }
:is(.od-card, .od-faq, .od-price, .od-compare__col, .od-peg, .od-logos div)
  { color:var(--od-text-primary); }

/* ---- accessibility ------------------------------------------------- */
.od-skip { position:absolute; left:-9999px; }
.od-skip:focus { left:8px; top:8px; z-index:100; padding:10px 16px;
                  background:var(--od-surface-page); }
@media (prefers-reduced-motion:reduce) {
  /* Zero prevents inherited visibility from transitioning through each drawer
     descendant and leaving keyboard targets temporarily hidden. */
  * { animation-duration:.01ms !important; transition-duration:0s !important; }
}