/* Revision 21: selected hero artwork and clearly identifiable secondary CTAs.
   Load after the existing Home/page styles. Header, footer, inline prose links,
   primary .button actions and treatment-card layout are deliberately untouched. */

#main .h19-free-smile{
  top:47%;
  bottom:auto;
  transform:translateY(-50%) rotate(-14deg);
}
#main .h19-free-spark{
  width:78px;
  height:78px;
  top:12%;
}

#main{
  --ui21-secondary-bg:#f2faf8;
  --ui21-secondary-ink:#006f86;
  --ui21-secondary-line:#79aeb9;
  --ui21-secondary-hover:#ddf6ec;
  --ui21-secondary-arrow:#dcefeb;
  --ui21-secondary-focus:#2463c5;
}
[data-theme=dark] #main{
  --ui21-secondary-bg:#173e48;
  --ui21-secondary-ink:#eefbf7;
  --ui21-secondary-line:#6fabb7;
  --ui21-secondary-hover:#24535f;
  --ui21-secondary-arrow:#285663;
  --ui21-secondary-focus:#75c6e5;
}

/* Fixed light and blue brand fields retain a light secondary button in both themes. */
#main :is(.h19-prevention,.h19-surgery,.h19-conservative,.h19-hero-panel-2,
          .h19-problem-implant,.h18-contact,.p20-hub-contact,.p20-hygiene,
          .p20-aesthetic,.p20-implant){
  --ui21-secondary-bg:#ffffffed;
  --ui21-secondary-ink:#006f86;
  --ui21-secondary-line:#70a8b4;
  --ui21-secondary-hover:#ddf6ec;
  --ui21-secondary-arrow:#e4f3ef;
  --ui21-secondary-focus:#0c222d;
}

#main :is(a.text-link,a.phone-link,a.p20-phone):not(.button):not(p a):not(address a){
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:fit-content;
  max-width:100%;
  min-height:46px;
  padding:9px 14px;
  border:1.5px solid var(--ui21-secondary-line);
  border-radius:8px;
  background:var(--ui21-secondary-bg);
  color:var(--ui21-secondary-ink);
  font-weight:600;
  line-height:1.25;
  text-align:left;
  text-decoration:none;
  white-space:normal;
  box-shadow:0 2px 0 color-mix(in srgb,var(--ui21-secondary-line) 20%,transparent);
  transition:background .18s,border-color .18s,box-shadow .18s,translate .18s;
}
#main :is(a.text-link,a.phone-link,a.p20-phone):not(.button):not(p a):not(address a)>span{
  display:grid;
  place-items:center;
  flex:0 0 26px;
  width:26px;
  height:26px;
  margin:0;
  padding:0;
  border-radius:5px;
  background:var(--ui21-secondary-arrow);
  color:var(--ui21-secondary-ink);
  font-size:22px;
  line-height:1;
  transform:none;
  transition:translate .18s,background .18s;
}
#main :is(a.text-link,a.phone-link,a.p20-phone):not(.button):not(p a):not(address a):hover{
  background:var(--ui21-secondary-hover);
  border-color:var(--ui21-secondary-ink);
  color:var(--ui21-secondary-ink);
  translate:0 -1px;
  box-shadow:0 3px 0 color-mix(in srgb,var(--ui21-secondary-line) 24%,transparent);
}
#main :is(a.text-link,a.phone-link,a.p20-phone):not(.button):not(p a):not(address a):hover>span{
  background:var(--ui21-secondary-arrow);
  color:var(--ui21-secondary-ink);
  transform:none;
  translate:1px -1px;
}
#main :is(a.text-link,a.phone-link,a.p20-phone):not(.button):not(p a):not(address a):focus-visible{
  outline:3px solid var(--ui21-secondary-focus);
  outline-offset:4px;
}
#main :is(a.text-link,a.phone-link,a.p20-phone):not(.button):not(p a):not(address a):active{
  translate:0 1px;
  box-shadow:none;
}
#main a.p20-phone:not(.button){font-size:19px;letter-spacing:-.02em}
#main .h19-treatment a.text-link:not(.button){
  padding:8px 10px;
  min-height:44px;
  gap:9px;
}
#main .h19-treatment a.text-link:not(.button)>span{
  flex-basis:22px;
  width:22px;
  height:22px;
  font-size:20px;
}

@media(max-width:1180px){
  #main .h19-free-spark{width:59px;height:59px;top:12%}
}
@media(max-width:700px){
  #main .h19-free-spark{width:48px;height:48px;top:8%}
}
@media(max-width:600px){
  #main .h19-free-smile{top:48%;bottom:auto}
  #main .h19-free-spark{width:55px;height:55px;top:7%;right:7%}
  #main :is(a.text-link,a.phone-link,a.p20-phone):not(.button):not(p a):not(address a){
    padding:9px 12px;
    gap:10px;
  }
  #main .h19-treatment a.text-link:not(.button){padding:8px 10px;gap:9px}
}
@media(prefers-reduced-motion:reduce){
  #main :is(a.text-link,a.phone-link,a.p20-phone):not(.button),
  #main :is(a.text-link,a.phone-link,a.p20-phone):not(.button)>span{
    transition:none;
  }
  #main :is(a.text-link,a.phone-link,a.p20-phone):not(.button):hover,
  #main :is(a.text-link,a.phone-link,a.p20-phone):not(.button):hover>span,
  #main :is(a.text-link,a.phone-link,a.p20-phone):not(.button):active{
    translate:none;
  }
}