/* ---------- Self-hosted Fonts ---------- */

/* Google Sans Flex — variable weight (100-900), latin-ext subset */
@font-face {
  font-family: 'Google Sans Flex';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/google-sans-flex-latin-ext.woff2') format('woff2'),
       url('https://fonts.gstatic.com/s/googlesansflex/v19/t5s6IQcYNIWbFgDgAAzZ34auoVyXkJCOvp3SFWJbN5hF8Ju1x6sKCyp0l9sI40swNJwInycYAJzz0m7kJ4qFQOJBOjLvDSndo0SKMpKSTzwliVdHAy4xxxg2a2c.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Google Sans Flex — variable weight (100-900), latin subset */
@font-face {
  font-family: 'Google Sans Flex';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/google-sans-flex-latin.woff2') format('woff2'),
       url('https://fonts.gstatic.com/s/googlesansflex/v19/t5s6IQcYNIWbFgDgAAzZ34auoVyXkJCOvp3SFWJbN5hF8Ju1x6sKCyp0l9sI40swNJwInycYAJzz0m7kJ4qFQOJBOjLvDSndo0SKMpKSTzwliVdHAy4xyRg2.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Material Symbols Outlined — variable icon font (subsetted to 40 icons) */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 100 700;
  font-display: block;
  src: url('../fonts/material-symbols-outlined.woff2') format('woff2'),
       url('https://fonts.gstatic.com/l/font?kit=kJEhBvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oFsL7Hd8Hf2jnqckhV6U6gNQMXeXF2ASHyGUZqBfHyHKmKO1HU5Bt1FChXsl-1YEUvwH_49aExcI67mISW1Hx9uCpF_zAcKQJSkIisSfffELfI05apg&skey=b8dc2088854b122f&v=v325') format('woff2');
}

/* ---------- Tokens ---------- */
:root{
  /* Layout */
  --container: 1120px;

  /* Spacing scale */
  --space-1: 6px;
  --space-2: 10px;
  --space-3: 14px;
  --space-3-2: 15px;
  --space-4: 18px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 44px;
  --space-8: 56px;
  --space-9: 72px;

  /* Radius */
  --radius-1: 12px;
  --radius-2: 18px;

  /* Typography */
  --font-sans: "Google Sans Flex", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-icon: "Material Symbols Outlined";

  --text-light-WCAG: rgba(0, 0, 0, 0.57); /* .54 is minimum for WCAG AA compliance on white background: 4.5:1 contrast ratio */
  
  /* Fluid type scale */
  --step--2: clamp(0.82rem, 0.79rem + 0.14vw, 0.92rem);
  --step--1: clamp(0.92rem, 0.88rem + 0.2vw, 1.05rem);
  --step-0:  clamp(1.05rem, 0.95rem + 0.35vw, 1.15rem);
  --step-1:  clamp(1.15rem, 1.05rem + 0.7vw, 1.45rem);
  --step-2:  clamp(1.45rem, 1.25rem + 1.2vw, 2.05rem);
  --step-3:  clamp(1.85rem, 1.55rem + 1.6vw, 2.60rem);
  --step-4:  clamp(2.20rem, 1.80rem + 2.2vw, 3.20rem);
  --step-5:  clamp(2.70rem, 2.10rem + 3.0vw, 4.00rem);
}

/* ---------- Reset-ish ---------- */
*{ box-sizing: border-box; }
html, body{ height:100%; max-width:100vw; overflow-x:hidden; }
body{
  margin:0;
  font-family: var(--font-sans);
  font-size: var(--step-0);
  color: var(--text);
  background: #fff;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
}
img{ max-width:100%; height:auto; }
a{ color: inherit; text-decoration-thickness: .08em; text-underline-offset: .16em; }
a:hover{ text-decoration: underline; }

:focus-visible{
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

/* ---------- Skip Link (accessibility) ---------- */

.skip-link{
  position:absolute;
  left: var(--space-4);
  top: var(--space-4);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-strong);
  border: 1px solid var(--border);
  border-radius: var(--radius-1);
  transform: translateY(-150%);
}
.skip-link:focus{ transform: translateY(0); }

/* ---------- Site Structure (.site-header, .site-main, .site-footer and shared structural elements) ---------- */
/* Structural Overview
body
- header .site-header
-- div .container
- main .site-main
-- header .page-header
--- div .container
-- div .page-content
--- div .container
- footer .site-footer
-- div .container
*/

.site-header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--bg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(10px);
  transition: transform 180ms ease;
  transform: translateY(0);
}

.site-header.is-hidden {
  transform: translateY(-110%);
}

.site-main {
  margin: 0 auto;
  padding-top: 80px; /* Account for fixed header height */
  width: 100%;
  max-width: 65ch; /* Optional: limit line length for better readability */
}

.site-header__inner{
  display: flex;
  align-items:center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) 0;
}

.page-content { 
    padding: var(--space-6) 0 var(--space-5); 
}

.container{
  width: min(var(--container), calc(100% - 2*var(--space-6)));
  margin-inline: auto;
} 


/* Hero section (full viewport width background image) - TOP OF POST */
.hero {
  display: flex;
  align-items: center;
  position: relative;
  margin-top: -46px;
  margin-bottom: var(--space-8);
  margin-left: calc(50% - 50vw);  
  margin-right: calc(50% - 50vw);
  aspect-ratio: 16 / 9;
  background-color: #000;
  background-image: url('../images/ui/polygon-background.jpg');
  background-size: auto 110%;
  background-repeat: no-repeat;
  background-position: calc(50% - 30px) bottom;
  background-clip: padding-box; 
  border: var(--space-3) solid transparent;
  border-left: 0;
  border-right: 0;
  border-image: url('../images/ui/green-bg-1.webp') 5 5 5 5 stretch;
  padding: var(--space-7) var(--space-6);
  width: 100vw;
  max-height: 500px;
  box-shadow: 
    0 -4px 8px rgba(0, 0, 0, 0.18),
    0 8px 12px rgba(0, 0, 0, 0.18);
}

.hero::after {
  content: "";
  min-height: 360px;
}
.hero__content {
  margin: 0 0 0 auto;
  width: 67%;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.hero__title {
  margin: 0 0 0 auto;
  font-size: var(--step-3);
  font-weight: 200;
  letter-spacing: 0.02em;
  /* font-variation-settings: 'wdth' 125; */
}

.hero__subtitle {
  position: relative;
  margin: var(--space-2) 0 0 auto !important;
  padding-top: 13px;
  color: #fff !important;
  font-size: var(--step-1);
  font-weight: 300;
  opacity: 0.95;
}
.hero__subtitle:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  border-top: 1px dashed rgba(255, 255, 255, .4);
  width: 100%;
}

.hero__ctas {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin: var(--space-5) 0 0 auto;
}
.hero__cta {
  display: inline-block;
  text-decoration: none;
  border-radius: 4px;
}

.hero .btn {
  width: 100%;
}

/* ---------------------------
   CTA - BOTTOM OF POST
---------------------------- */
.cta {
    margin-top: var(--space-9);
    background: var(--link-1);
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 20px 32px var(--space-6);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.cta__title {
  margin-top: var(--space-1) !important;
  margin-bottom: 0 !important;
  border-bottom: 0 !important;
}
.cta__subtitle {
  margin: -16px 0 32px !important;
}
.cta__ctas {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.cta .btn,
.wpforms-submit  {
  width: 100%;
}
.cta__help {
  margin: 36px 0 4px;
  border-top: 1px dotted rgba(0,0,0,.2);
  padding-top: 24px;
  font-size: var(--step--1);
  opacity: .65;
}
.cta__explore {
  margin-top: var(--space-9);
  padding-right: 4px;
  text-align: right;
}
.cta__explore-links {
  margin-left: 0.1em !important;
  margin-bottom: 0 !important;
  list-style-type: none;
}
.cta__explore-link-current {
  margin-right: -1px !important;
}
.cta__explore-link-current a {
  text-decoration: none !important;
  font-weight: 500;
}
.cta__explore-link-current a::after {
  content: 'nest_eco_leaf';
  position: relative;
  left: 4px;
  top: 4px;
  transform: translateY(-50%);
  font-family: var(--font-icon);
  font-size: 1.15em;
  line-height: 1;
  color: currentColor;
  font-variation-settings:
    'FILL' 0,
    'wght' 300,
    'GRAD' 0,
    'opsz' 24;
}



/* ---------------------------
   NAV PANEL CTA - INSIDE NAV PANELS
---------------------------- */

  .nav-panel__cta .btn {
      width: 100%;
  }


 


/* layout variations applied to .page-content > .container only */

/* -- for two-column layouts (i.e., with a sidebar) */

.has-sidebar {
  display: grid;
  gap: var(--space-6);
}

.has-sidebar .page-content-main,
.has-sidebar .page-content-side { 
    min-width: 0; 
}

/* additional layout primitives (applied to .page-content > .container or other applicable container elements)
-- use .stack for verical rhythm
-- use .cluster for (typically small) horizontal groupings
-- use .grid for responsive structured layouts
*/

.stack > * + *{ margin-top: var(--space-4); }

.cluster {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap: var(--space-3);
}

.site-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 8px;
  z-index: 20;
  pointer-events: auto;
  min-height: 230px;
  color: var(--bg);
  animation: fade-in linear forwards;
  animation-timeline: view();
  animation-range: entry 0% entry 100%;
}
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.site-footer .container {
  position: relative;
  min-height: inherit;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-end;
  gap: var(--space-2);
  padding-bottom: var(--space-4);
}

.site-footer__links {
  gap: 0;
  justify-content: center;
}

.site-footer__links a {
  display: inline-flex;
  align-items: center;
}
.site-footer__links a.hide-xs {
  display: none;
}


.site-footer__sep {
  display: inline-flex;
  align-items: center;
  margin: 0 0.55em 0 0.4em;
  opacity: 0.8;
}

.site-footer__badge {
  display: inline-flex;
  justify-content: center;
  align-self: center;
  padding: 10px 0 6px;
  max-height: 140px;
  line-height: 0;
  text-decoration: none;
  aspect-ratio: 1/1;
}
.site-footer__badge a {
    opacity: .7;
    width: 140px !important;
}
.site-footer__badge a:focus,
.site-footer__badge a:hover,
.site-footer__badge a:active {
  opacity: 1;
} 
.site-footer__badge a::after,
.trust-badge-hipaa a::after {
  display: none !important;
}
.prose .trust-badge-hipaa a {
  margin: auto;
  width: auto !important;
  max-width: 178px;
}
.site-footer .copyright,
.site-footer .links {
  padding-top: 8px;
  width: 100%;
  text-align: center;
  white-space: nowrap;
}
.site-footer .copyright,
.site-footer .links a {
  opacity: .7;
}
.site-footer .links a:focus,
.site-footer .links a:hover,
.site-footer .links a:active {
  opacity: 1;
}




.grid {
  display:grid;
  gap: var(--space-4);
}

/* ---------- Global helpers ---------- */

/* screen-reader only */
.sr-only{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}



/* Responsive utilities */
.hide-xs,.hide-sm,.hide-md{ display:none; }
.show-sm{ display:inline-flex; }





.divider{
  border:0;
  border-top: 1px solid var(--border);
  margin: var(--space-6) 0;
}



/* ---------- Page structure ---------- */

.page-header{ padding: 38px 0 var(--space-5); }

.page-header .container {
  margin-bottom: calc(-1 * var(--space-8) - var(--space-2)); 
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  padding-bottom: var(--space-7);
}
.site-main:has(.figure-hero) .page-header .container,
.site-main:has(.video-circular-hero) .page-header .container,
.site-main:has(.wpforms-container) .page-header .container,
.site-main:has(.tell-dentist__inputs) .page-header .container,
.page-template-template-ag-iframe-contact-us .page-header .container,
.page-template-template-ag-iframe-get-started .page-header .container
 {
  margin-bottom: -94px;
  border: 0;
}
.site-main:has(.wpforms-container) .page-content,
.site-main:has(.tell-dentist__inputs) .page-content,
.page-template-template-ag-iframe-contact-us .page-content,
.page-template-template-ag-iframe-get-started .page-content {
  padding-top: var(--space-2);
}
.site-main:has(.wpforms-container) .post-callout,
.site-main:has(.tell-dentist__inputs) .post-callout,
.page-template-template-ag-iframe-contact-us .post-callout,
.page-template-template-ag-iframe-get-started .post-callout  {
  margin-bottom: var(--space-8);
}
.breadcrumbs {
  display: flex;
  gap: 6px;
  padding: 0 0 4px 2px;
  color: var(--text-light-WCAG);
  font-size: var(--step--1);
  white-space: nowrap;
}
.breadcrumbs a:focus,
.breadcrumbs a:hover,
.breadcrumbs a:active {
  text-decoration-style: dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}

.page-title{ margin:0; font-size: var(--step-3); letter-spacing: -0.02em; line-height: 1.35; }
.page-title a { text-decoration:none !important; }
.page-lede{ margin: var(--space-3) 0 0; color: var(--muted); font-size: var(--step-1); max-width: 72ch; }
.page-lede strong {
  font-weight: 600;
}
.page-lede a {
  text-decoration: underline;
    text-decoration-style: dotted;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 0.2em;
}
.post-byline {
  margin: var(--space-4) 0 0;
  color: var(--text-light-WCAG);
  font-size: var(--step--1);
}
.post-topics {
  margin: var(--space-2) 0 -24px;
  color: var(--text-light-WCAG);
  font-size: var(--step--1);
}
.site-main:has(.figure-hero) .page-header .post-topics {
  margin-bottom: 0;
}
.post-topics__label {
  padding-right: 4px;
}
.post-topics a {
  color: var(--link-700);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}
.post-topics a:is(:hover, :focus) {
  color: var(--link-600);
  text-decoration-style: solid;
  text-decoration-thickness: 1px;
}
.post-topics a:is(:active) {
  color: var(--link-700);
  text-decoration-style: dotted;
  text-decoration-thickness: 1px;
}


/* ---------- Typography ---------- */
.h1{ font-size: var(--step-3); line-height: 1.12; margin: 0 0 var(--space-3); }
.h2{ font-size: var(--step-2); line-height: 1.15; margin: 0 0 var(--space-3); }
.h3{ font-size: var(--step-1); line-height: 1.25; margin: 0 0 var(--space-2); }

.lede{ font-size: var(--step-1); color: var(--muted); margin: 0; }
.muted{ color: var(--muted); }
.hint{ margin: var(--space-2) 0 0; color: var(--muted); font-size: var(--step--1); }

/* ---------- Prose (for WP content) ---------- */
.prose{
  margin: auto;
}
.prose :where(h2){ 
  margin-top: var(--space-7);
  margin-bottom: var(--space-6);
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  padding-bottom: var(--space-5);
  letter-spacing: -0.015em;  
  scroll-margin-top: 96px; 
  font-size: var(--step-2);
  font-weight: 600;
}
.prose :where(.testimonials + h2) {
  margin-top: var(--space-9);
}
.prose :where(h3){ 
  margin-top: var(--space-7);
  margin-bottom: var(--space-6);
  letter-spacing: -0.015em;  
  scroll-margin-top: 96px; 
  font-size: var(--step-1);
  font-weight: 600;
}
.prose :where(p,ul,ol){ color: var(--text); line-height: 1.75; }
.prose :where(p){ margin: var(--space-4) 0; }
.prose :where(p.post-summary, p.post-callout, p.post-aside, aside){ 
  background: #f7f7f7;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 14px 20px 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.prose :where(.aside-message, .post-message) {
  font-size: var(--step--1);
}
.prose :where(p.post-summary){ 
  margin-bottom: var(--space-8);
  border: 1px dashed #ccc;
}
.prose :where(p.post-highlight){ 
  margin: var(--space-5) -15px;
  background: var(--link-1);
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 14px 20px 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.prose :where(p.post-callout) {
  margin: var(--space-6) 0 calc(var(--space-6) + 8px);
  background: var(--link-1);
}
.prose :where(p.post-aside) {
  margin: var(--space-6) 0;
}
.prose :where(aside)  {
  margin: var(--space-7) 0;
}
/*
.prose :where(.gt-aside__content p:first-child)::before {
  content: 'info';
  display: inline-block;
  margin-bottom: var(--space-2);
  font-family: var(--font-icon);
  font-size: 1.2em;
  line-height: 1;
  color: var(--muted);
  font-feature-settings: 'liga';
  -webkit-font-feature-settings: 'liga';
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}
  */
.prose :where(aside h3) {
  margin: 0 0 var(--space-4);
}
.prose :where(aside p:first-child) {
  margin-top: 0;
}
.prose :where(aside p:last-child) {
  margin-bottom: 0;
}

.green::after {
  content: 'nest_eco_leaf';
  position: relative;
  left: 4px;
  top: 4px;
  transform: translateY(-50%);
  font-family: var(--font-icon);
  font-size: 1.15em;
  line-height: 1;
  color: currentColor;
  font-variation-settings:
    'FILL' 0,
    'wght' 300,
    'GRAD' 0,
    'opsz' 24;
}

.prose :where(ul,ol){ margin-left: -17px;}
.prose :where(li){ margin: .4em 0; padding-left: 7px;}

.prose :where(a),
.search-results :where(a) { 
  color: var(--link-700);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}
.prose :where(h2 a){
  font-weight: 400;
}
.prose :where(a):is(:hover, :focus),
.search-results :where(a):is(:hover, :focus) {
  color: var(--link-600);
  text-decoration-style: solid;
  text-decoration-thickness: 1px;
}
.prose :where(a):is(:active),
.search-results :where(a):is(:active) {
  color: var(--link-700);
  text-decoration-style: dotted;
  text-decoration-thickness: 1px;
}
a[target="_blank"]::after {
  content: 'open_in_new';
  font-family: var(--font-icon);
  font-feature-settings: 'liga';
  -webkit-font-feature-settings: 'liga';
  font-variation-settings: 'FILL' 0, 'wght' 350, 'GRAD' 0, 'opsz' 22;
  font-size: 0.95em;
  line-height: 1;
  display: inline-block;
  margin-left: 0.26em;
  vertical-align: -.1em;
  text-decoration: none;
}
.prose :where(blockquote, table){ margin: 0 0 var(--space-4); }
.prose :where(blockquote){
  position: relative;
  margin: var(--space-7) 0;
  padding: var(--space-4) var(--space-6) var(--space-4) calc(var(--space-5) + 44px);
  border-left: 2px dashed rgba(0, 0, 0, .18);
  background: rgba(0, 0, 0, .01);
  border-radius: 0 var(--radius-1) var(--radius-1) 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.prose :where(blockquote)::before {
  content: "\201C";
  position: absolute;
  left: 13px;
  top: 6px;
  font-size: 110px;
  line-height: 1;
  color: var(--link-dark);
  opacity: .15;
}
.prose :where(blockquote p){
  margin: 0;
  font-size: var(--step-0);
  line-height: 1.65;
  font-style: italic;
}
.prose :where(blockquote p strong em){
  font-weight: 900;
}
.prose :where(blockquote cite){
  display: block;
  margin-top: var(--space-3);
  margin-bottom: -6px;
  text-align: right;
  font-size: var(--step--1);
  font-style: normal;
  color: var(--text-light-WCAG);
}

.prose :where(strong){ font-weight: 600; }
.prose :where(h2 strong,h3 strong){ font-weight: 800; }
.prose :where(figure) {
  margin: var(--space-7) auto;
}
.prose :where(figure.wp-block-table) {
  margin: var(--space-7) -15px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
.prose :where(figure):not(.wp-block-table, .gallery-polaroid, .video-circular, .figure-noframe) {
  padding: 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
.site-main:has(.page-header) .prose figure:first-child {
    margin-bottom: var(--space-8);
}
.prose :where(a img) {
  transition: transform 200ms ease, filter 200ms ease;
}
.prose :where(a:hover img),
.prose :where(a:focus img) {
  transform: scale(1.03);
  filter: brightness(1.1);
}
.prose :where(a:active img) {
  transform: scale(1);
}
.prose :where(table){
  margin-bottom: 0 !important;
  width: 100% !important;
  border-collapse: collapse;
  font-size: var(--step--1);
  overflow: hidden;
}
.prose :where(thead){
  border-top: 0 !important;
  border-bottom: 1px solid rgba(0,0,0,.25) !important;
}

.prose :where(th, td){
  border: 0 !important;
  padding: .8em 1.2em !important;
  text-align: center;
}
.prose :where(th:first-child, td:first-child){
  text-align: left;
}
.prose :where(th){
  font-weight: 600;
}
.prose :where(td){
  border-bottom: 1px solid rgba(0,0,0,.1) !important;
  vertical-align: top;
}
.prose :where(tr:last-child td){
  border-bottom: 0 !important;
  padding-bottom: 1em !important;
}
.prose :where(th),
.prose :where(tr):nth-child(even){
  background: rgba(0,0,0,.03);
}
.prose :where(hr) {
    margin: var(--space-6) 0;
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}
.prose :where(figure + hr) {
    margin-top: calc(var(--space-7) + var(--space-4));
}
.prose :where(.post-highlight + hr) {
    margin-top: var(--space-9);
}
.prose :where(.post-callout + hr) {
    margin-top: 48px;
}

.gallery-polaroid {
  padding: 0;
  border: 0;
  box-shadow: none;
}
.gallery-polaroid figure,
.figure-polaroid {
  display: inline-flex;
  flex-direction: column;
  background: #fff;
  /* background: var(--link-1); */
  padding: 10px 10px 14px;
  border: 1px solid rgba(0,0,0,.04);
  border-radius: 6px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
  transform: rotate(.7deg);
}
.gallery-polaroid figure {
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
  transform: rotate(0deg);
}
.gallery-polaroid figure:first-child {
  transform: rotate(-1.4deg);
}
.gallery-polaroid figure:nth-child(4) {
  transform: rotate(.7deg);
}
/*
.gallery-polaroid figure:nth-child(even) {
  transform: rotate(-0.7deg)
}
.gallery-polaroid figure:nth-child(6n) {
  transform: rotate(-1deg)
}
.gallery-polaroid figure:nth-child(5n) {
  transform: rotate(.5deg)
}
*/
.gallery-polaroid img,
.figure-polaroid img,
.wp-block-image img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}
.gallery-polaroid > a,
.figure-polaroid > a,
.wp-block-image > a {
  display: block;
}

.gallery-polaroid figcaption,
.figure-polaroid figcaption,
.wp-block-image figcaption {
  display: block;
  flex: 1; /* fills the remaining space down to the figure's bottom */
  margin: 8px 0 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.03),
    rgba(0, 0, 0, 0.01)
  );
  padding: 12px 10px;
  border-radius: 4px;
  font-size: 0.85rem;
  font-style: italic;
  letter-spacing: 0.02em;
  color: rgba(0, 0, 0, 0.95);
  text-align: center;
  min-height: 2.75rem; /* reserve vertical space */
}
.gallery-polaroid a + figcaption,
.figure-polaroid a + figcaption,
.wp-block-image a + figcaption {
  margin-top: 10px;
}
.figure-hero {
  /* margin-top: var(--space-6); */
  margin-top: 0;
  margin-right: -12px;
  margin-left: -12px;
  max-width: none !important;
}
.figure-center,
.figure-right {
  display: block;
  margin: var(--space-7) auto var(--space-8);
  width: fit-content;
}
.figure-right {
  margin-right: 0
}
.home .figure-right {
  margin-top: var(--space-9);
}

.figure-ema-logo {
  margin: var(--space-7) auto !important;
}
.figure-ema-logo img {
  display: block;
  margin: auto;
}

/* Gallery container with flex wrap for 2-3-2 pattern */
.gallery-polaroid {
  flex-wrap: wrap;
  gap: var(--space-3) !important;
}

/* Default width for 2-per-row items (items 1-2, 6-7, 11-12, etc.) */
.gallery-polaroid figure {
  width: clamp(200px, 46%, 480px) !important;
}

/* Golden ratio for 2-photo rows (1.618:1 ratio, first image wider) */
.gallery-polaroid figure:nth-child(7n + 1) {
  width: clamp(240px, 60%, 640px) !important;
}
.gallery-polaroid figure:nth-child(7n + 2) {
  width: clamp(150px, 37%, 400px) !important;
}

/* Width for 3-per-row items (items 3-5, 8-10, 13-15, etc.) */
.gallery-polaroid figure:nth-child(7n + 3),
.gallery-polaroid figure:nth-child(7n + 4),
.gallery-polaroid figure:nth-child(7n + 5) {
  width: clamp(180px, 30%, 340px) !important;
}

/* Vary widths within 3-photo rows with more contrast */
.gallery-polaroid figure:nth-child(7n + 3) {
  width: clamp(200px, 34%, 380px) !important;
}
.gallery-polaroid figure:nth-child(7n + 4) {
  width: clamp(170px, 28%, 320px) !important;
}
.gallery-polaroid figure:nth-child(7n + 5) {
  width: clamp(190px, 32%, 360px) !important;
}


.video-circular { /* applied to a figure element wrapping a video */
  display: block;
  border-radius: 50%;
  width: 320px;
  height: 320px;
  overflow: hidden;           /* THIS clips the child video */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.video-circular video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;          /* fill circle without distortion */
  object-position: 50% 50%;  /* 1px shift left */
  transform: scale(1.249);  
  filter: brightness(1.1);
}
.video-circular-hero {
  margin-top: var(--space-2);
}

.gt-smiles-logo { /* p tag containing embedded svg of GT Smiles logo, called with shortcode */
    margin: var(--space-7) var(--space-5);
}
.gt-smiles-logo .cls-60,
.gt-smiles-logo .cls-73 {
  stroke: #000;
  stroke-width: 3.5px;
}

.table-material-options th,
.table-material-options td {
  text-align: center;
}
.table-material-options th {
  text-indent: -2px
} 
.table-material-options img {
  display: block;
  margin: 4px auto 5px;
  max-width: calc(90% - 16px);
  filter: brightness(1.05);
}

.table-nowrap {
  white-space: nowrap;
}
.table-data-text th,
.table-data-text td {
  text-align: left;
}
.table-data-text th:last-child,
.table-data-text td:last-child {
  text-align: right;
}
.table-income-estimates td:nth-child(2),
.table-income-estimates td:nth-child(3) {
  display: none;
}

.figure-gt-flex-logo img {
  filter: brightness(1.05);
}
 /* ==========================================================================
   Steps Block Styles
========================================================================== */

.steps {
  list-style: none;
  padding: 0;
  margin: var(--space-6) 0;
  margin-left: -16px;
  width: calc(100% + 16px);
  counter-reset: step-counter;
}

.step {
  counter-increment: step-counter;
  position: relative;
  margin-bottom: var(--space-6);
  padding-left: 70px;
}

/* Step number circle */
.step::before {
  content: counter(step-counter);
  position: absolute;
  left: 0;
  top: -6px;
  width: 49px;
  height: 48px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
  color: rgba(0, 0, 0, 0.4);
}

/* Connecting vertical line */
.step:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 24px;
  top: 41px;
  width: 2px;
  height: calc(100% - 14px);
  background: rgba(0, 0, 0, 0.06);
}

.step__section {
  display: block;
}

.step__title {
  margin: 0;
  font-size: var(--step-0);
  font-weight: 600;
}

.step__subtitle {
  margin: 0 0 12px 0;
  font-size: var(--step--1);
  font-style: italic;
  color: var(--text-light-WCAG);
}

.step__content {
  margin: var(--space-2) 0 0 0;
  font-size: var(--step--1);
}

.step__content p {
  margin: 0 0 1em 0;
}

.step__content p:last-child {
  margin-bottom: 0;
}

/* Editor preview styles */
.steps-editor {
  list-style: none;
  padding: 0 !important;
  margin: 0 !important;
}


/* ---------- Reusable blocks ---------- */
.section{ padding: var(--space-6) 0; }
.section-header{ margin-bottom: var(--space-4); }
.section-title{ margin:0; font-size: var(--step-2); }
.section-desc{ margin: var(--space-2) 0 0; color: var(--muted); max-width: 72ch; }

.card{
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-1);
  padding: var(--space-5);
}
.card-header{ margin-bottom: var(--space-3); }
.card-title{ margin:0; font-size: var(--step-1); }
.card-desc{ margin: var(--space-2) 0 0; color: var(--muted); }



.notice{
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius-2);
  padding: var(--space-4);
}
.notice--emphasis{
  background: var(--surface-strong);
  box-shadow: var(--shadow-1);
}

.badge{
  display:inline-flex;
  align-items:center;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: var(--step--1);
  color: var(--text);
  background: rgba(0,0,0,.02);
}
.badge--muted{ color: var(--muted); }



/* ---------- Forms ---------- */

.wpforms-container {
  background: #f7f7f7;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 4px 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.form{
  display:block;
}

fieldset{
  margin: 14px 0 0;
  border:0;
  padding:0;
}
.form-field + fieldset,
.wpforms-field + fieldset  {
  margin-top: 24px;
}
legend {
  padding: 8px 8px 2px;
  font-weight: 500;
}
legend .form-help {
  margin-left: 4px;
  font-weight: normal;
  font-style: italic;
}
.form-field,
.wpforms-field { 
  display:block; 
  margin-bottom: var(--space-4);
}
.wpforms-field {
  margin-bottom: 14px;
}
.wpforms-field-border-top
{
  margin-top: 34px;
  border-top: 1px dotted rgba(0,0,0,.4);
  padding-top: 28px;
}
.wpforms-field-address.wpforms-field-border-top {
  padding-top: 20px;
}
.wpforms-field-address .wpforms-field-row {
  margin-bottom: 22px;
}
.wpforms-field-address + .wpforms-field-checkbox.wpforms-field-border-top {
    margin-top: 0;
}
.wpforms-field-checkbox.wpforms-field-border-top {
    padding: 20px 0 0;
}
.wpforms-field-checkbox.wpforms-field-border-top fieldset{
    margin-bottom: -8px;
}
.wpforms-field-content p {
    margin-top: 23px;
    background: var(--link-1);
    border: 1px dotted var(--link-dark);
    border-radius: 8px;
    padding: 12px 17px;
    font-size: var(--step--1);
}
#wpforms-3d388-field_13-container /* "Practice Name" on dentist > get started form */
{
  margin-top: 30px;
  border-top: 1px dotted rgba(0,0,0,.4);
  padding-top: 20px;
}
.form-field > * + *,
.wpforms-field > * + * { margin-top: 8px; }

.label{ font-weight: 800; }
.help{ color: var(--muted); font-size: .95em; }
.form-help {
  font-size: var(--step--1);
  color: var(--text-light-WCAG);
}
.wpforms-field-container legend,
.wpforms-field-container label {
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}
.wpforms-field-container input[type="checkbox"] + label,
.wpforms-show-legend legend
{
  display: inline;
  position: static !important;
  width: auto; height: auto;
  padding: 0 0 0 6px; margin: 0;
  overflow: visible; clip: auto;
  white-space: normal; border: 0;
  font-size: var(--step--1);
}
.icon-privacy {
  margin: -3px -1px 0 -2px;
}
.control,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="url"],
select {
  width:100%;
  border: 1px dotted rgba(0,0,0,.4);
  border-radius: var(--radius-1);
  padding: 13px 17px 12px;
  background: #fff; 
  color: inherit;
  font: inherit;
}
.wpforms-field-row:has(.wpforms-one-half) {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}
input.wpforms-error  {
  border-color: var(--link-error);
}
.control:hover,
input[type="text"]:hover,
input[type="email"]:hover,
input[type="tel"]:hover,
input[type="number"]:hover,
input[type="url"]:hover,
select:hover,
textarea:hover {
  border-color: var(--link-dark);
}
.control:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="url"]:focus,
select:focus,
textarea:focus{
  border: 1px solid var(--link-800);
}
.control:focus-visible,
input[type="text"]:focus-visible,
input[type="email"]:focus-visible,
input[type="tel"]:focus-visible,
input[type="number"]:focus-visible,
input[type="url"]:focus-visible,
select:focus-visible{
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.wpforms-field-textarea {
  position: relative;
}

input[type="checkbox"] {
  accent-color: var(--link-800);
}
.wpforms-field-checkbox {
  font-size: var(--step--1);
}

.wpforms-field-checkbox + .wpforms-field-checkbox {
  margin-top: -28px;
}
.wpforms-field-textarea + .wpforms-field-checkbox {
  margin-top: -12px;
}
.form-checkbox-list,
.wpforms-field-checkbox ul {
  margin: var(--space-2) 0 0 6px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-0);
}

.form-checkbox-list label,
.wpforms-field-checkbox li {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-4);
}

.form-checkbox-list input[type="checkbox"],
.wpforms-field-checkbox input[type="checkbox"] {
  position: relative;
  top: 3px;
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  flex: 0 0 18px;
  margin: 0;
}
.wpforms-field-checkbox input[type="checkbox"] {
  top: 4px;
}
.wpforms-required-label {
  display: none;
}
textarea {
  width: 100%;
  min-height: 280px;
  border: 1px dotted rgba(0,0,0,.4);
  border-radius: var(--radius-1);
  padding: var(--space-4);
  background: #fff;
  color: var(--text);
  font: inherit;
  line-height: 1.55;
  resize: none;
}
textarea.expandable {
   resize: vertical;
}

.control[readonly] {
  background: #f6f6f6;
  border: 1px solid rgba(0,0,0,.08);
}

select {
  min-width: 220px;
  padding: 8px 40px 8px 12px;
  font-family: var(--font-sans);
  font-size: var(--step--2);
  font-weight: 400;
  color: var(--text);
  border: 1px dotted rgba(0,0,0,.4);
  border-radius: 8px;
  background-color: #fff;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 14px 14px;
  background-position: right 12px center;
}
.wpforms-container select {
  padding: 13px 17px 12px;
  width: 100%;
  font-size: var(--step--0);
}
.wpforms-container select .placeholder {
  color: var(--text-light-WCAG);
}

.iti__country-container {
  left: 8px !important;
}
.wpforms-smart-phone-field {
  padding-left: 52px !important;
}
em.wpforms-error {
  padding: 2px 0 0 17px;
  color: var(--link-error);
  font-size: var(--step--2);
  font-style: normal;
}
.wpforms-field-limit-text {
  position: absolute;
  right: 0;
  bottom: 16px;
  padding: 2px 17px 0;
  color: rgba(0,0,0,.25);
  font-size: var(--step--2);
  font-style: italic;
}
.wpforms-field-checkbox em.wpforms-error {
  padding-left: 49px;
}
.wpforms-submit-container {
  padding: 8px 0 24px;
}

.submit-terms {
  margin-top: -16px;
}
.submit-terms input {
  display: none;
}
.submit-terms label {
  color: var(--text-light-WCAG);
}

/* ---------- SEARCH ---------- */

.page-template-page-find-a-dentist .page-header .container,
.page-template-page-ask .page-header .container {
  border: 0;
  padding-bottom: 0;
  margin-bottom: 0;
}

.page-template-page-find-a-dentist .page-header,
.page-template-page-ask .page-header {
  margin-bottom: 10px;
  padding-bottom: 0;
}
.page-template-page-find-a-dentist .page-content,
.page-template-page-ask .page-content,
.page-content:has(#gtsmile-chat-form) {
  padding-top: 0;
}


.search { /* contains search form */
  margin: var(--space-2) -32px 26px ;
  background: transparent;
  border: 0;
  padding: 14px 20px 15px;
  box-shadow: none;
  width:calc(100% + 64px);
}
.search-find-a-dentist {
  padding-top: 2px;
}
.search-wrap {
  position: relative;
}

.search-input {
  background: #fff;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 28px;
  padding: 16px 52px 16px 24px;
  font-size: var(--step--1);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
}

.search-input:hover {
  border: 1px solid rgba(0,0,0,.3);
}
.search-input:focus {
  border: 1px solid rgba(0,0,0,.3);
}

.search-submit {
  position: absolute;
  top: 50%;
  right: 11px;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: inherit;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.search-submit .icon {
  font-size: 26px;
}
.search-submit:hover {
  background: rgba(0, 0, 0, 0.05);
}

.search-submit:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}
.search-help {
  padding: 8px 25px;
  color: var(--text-light-WCAG);
  font-size: calc(var(--step--1) - 2px);
}
.search-help p {
  margin: 0 0 8px;
  color: var(--text-light-WCAG);
}

.search-results {
  margin-top: 12px;
}
.archive .search-results {
  margin-top: 24px;
}
.archive .search-results:has(.faq-accordion) {
  margin: 24px -16px 0;
}
.faq-accordion--more a {
  color: var(--text) !important;
  text-decoration: none !important;
}

.search-results__breadcrumbs a {
  text-decoration: none;
}
.search-results__breadcrumbs-leaf,
.search-results__breadcrumbs a:last-child {
  color: var(--text) !important;
  text-decoration: none !important;
  font-weight: 500;
}
.search-results__topic-group {
  margin-top: var(--space-6, 32px);
}
.search-results__topic-group:first-child {
  margin-top: 0;
}
.search-results__topic-header {
  display: none;
  align-items: baseline;
  gap: var(--space-3, 12px);
  padding: var(--space-2, 8px) 0 var(--space-2, 8px) 4px;
}
.search-results:has(.faq-accordion) .search-results__topic-header {
  display: flex;
}
.search-results__header + .search-results__topic-group .search-results__topic-header {
  margin-top: -16px;
}
.search-results__topic-heading {
  position: relative;
  margin: 0;
  padding: 0 0 0 13px;
  font-size: var(--step-0);
  font-weight: 600;
}
.search-results__topic-view-all {
  margin-right: 4px;
  margin-left: auto;
  font-size: var(--step--1, 0.875rem);
  white-space: nowrap;
}

.page-template-page-find-a-dentist .search-results {
  margin-top: -18px;
}
.search-result,
body:not(.archive) .search-results__header {
  margin-top: 0;
  padding: 24px 18px;
  border-top: 1px dotted rgba(0, 0, 0, .12);
}
.archive .search-results__header {
  margin-bottom: -10px;
  padding: 0 16px;
}
.search-results:not(:has(.faq-accordion)) .search-results__header {
  margin-right: -16px;
  margin-left: -16px;
}
body:not(.page-template-page-find-a-dentist) .search-result:first-child {
  border-top: 0;
}
.search-results__header p { 
  margin-top: var(--space-2); 
}
.search-result:last-child {
  border-bottom: 1px dotted rgba(0, 0, 0, .12);
}

.search-result-spotlight {
  margin: 36px -14px 30px;
  background: var(--link-1);
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 26px 32px 30px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.page-template-page-find-a-dentist .search-result-spotlight {
  margin-top: 22px;
}
.search-result h3 {
  display:flex;
  align-items:flex-start;
  gap: .5rem;
  margin: 0;
}
.search-result__title-text{
  min-width: 0;
  text-decoration: none;
  color: inherit;
}
a.search-result__title-text{
  color:var(--link-dark);
}
.search-result__title-spotlight{
  flex: 0 0 auto;
  margin: -2px -4px 0 auto;
  border: 1px dotted rgba(0,0,0,.1);
  padding-right: 12px;
  white-space: nowrap;
  font-weight: 400;
}
.search-result__title-spotlight a {
  text-decoration: none;
}
.search-result__title-spotlight .icon {
  position: relative;
  left: -2px;
  margin-top: -2px;
  opacity: .9;
  font-variation-settings: 
  'FILL' 1,
    'wght' 300,
    'GRAD' 0,
    'opsz' 24
}
.search-result header p {
  margin-top: 4px;
  font-size: var(--step-0);
}
.search-result p {
  margin: 6px 0;
  font-size: var(--step--1);
}
.search-result__details {
  opacity: .7;
}
.search-result__meta {
  display: flex;
  margin-top: 16px !important;
  font-style: normal;
  opacity: .7;
}
.search-result__post-type {
    margin-left: 16px;margin-left: auto;
    padding-left: 16px;
    border-left: 1px dotted rgba(0, 0, 0, .2);
}
.search-result address {
  font-size: var(--step--1);
  font-style: normal;
}
.search-result__contact {
  margin-bottom: 2px !important;
  padding-top: 12px;
  font-weight: 500;
}
.search-result__contact span {
  padding-left: 4px;
}
.search-result__contact a {
  font-weight: normal;
}

.search-results .cta {
  margin-top: var(--space-7);
}
.search-result-spotlight + .cta {
  margin-top: var(--space-9);
  background: #f9f9f9;
}
.search-results .cta .search-results__message {
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px dotted rgba(0, 0, 0, .2);
}
.search-results .cta__ctas {
  margin-top: 32px;
}


/* ---------- ASK ---------- */

.page-template-gt-ask .page-header {
  margin-bottom: -14px;
}
.page-template-gt-ask .page-header .container {
  border: 0;
}
.page-template-gt-ask.gt-ask-has-replies .page-header .container {
    padding-bottom: 36px;
}
.page-template-gt-ask .search-input { 
  min-height: 0; 
}
.page-template-gt-ask .search-submit { 
  top: 29px; 
}
.page-template-gt-ask .search-help { 
  padding-top: 12px;
}
.gt-ask-has-replies .gtsmile-chatbot-messages {
  font-size: var(--step--1);
}

body.page-template-gt-ask.gt-ask-has-replies .parallax-content {
  z-index: 30;
}
#gtsmile-chat-form {
  width: calc(100% + 24px);
  margin-left: -12px;
}
.gt-ask-has-replies #gtsmile-chat-form {
  /* position: fixed;
  left: 0;
  right: 0;
  bottom: max(10px, env(safe-area-inset-bottom));
  margin: 0 auto;
  width: calc(100% - 20px);
  z-index: 1100;
  */
  margin-left: -16px;
  width: calc(100% + 32px);
  background: var(--link-1);
  border: 1px dotted var(--link-dark);
  border-radius: 14px;
  padding: 16px 4vw 0;
  pointer-events: auto;
}
.gt-ask-has-replies .search-input {
  margin-left: -5px;
  width: calc(100% + 10px);
}
.gt-ask-has-replies .search-submit {
  right: 6px;
}
.gt-ask-has-replies .search-help {
  margin-bottom: -12px;
  padding: 6px 4px 4px;
}

.gtsmile-chatbot-row {
  margin-bottom: 26px;
}
.gtsmile-chatbot-row.is-ai {
  margin-bottom: 48px;
}

/* User chat bubble */
.gtsmile-chatbot-row.is-user {
  display: flex;
  justify-content: flex-end;
}

.gtsmile-chatbot-row.is-user .gtsmile-chatbot-bubble {
  background: var(--link-1);
  border: 1px dotted var(--link-dark);
  border-radius: 18px 18px 3px 18px;
  padding: 10px 16px 9px 17px;
  max-width: 70%;
}
.gtsmile-chatbot-row.is-ai .gtsmile-chatbot-text {
  /*
  background: rgba(0,0,0,.008);
  border: 1px dotted #ddd;
  border-radius: 18px 18px 18px 3px;
  padding: 14px 21px 16px 22px;
  max-width: 85%;
  */
  font-weight: 450;
}

.gtsmile-chatbot-row.is-user .gtsmile-chatbot-meta,
.gtsmile-chatbot-row.is-user .gtsmile-chatbot-footer {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.gtsmile-chatbot-row.is-user .gtsmile-chatbot-text,
.gtsmile-chatbot-row.is-ai .gtsmile-chatbot-text {
  margin: 0;
  line-height: 1.5;
}

.gtsmile-chatbot-row.is-ai .gtsmile-chatbot-meta,
.gtsmile-chatbot-row.is-ai .gtsmile-chatbot-footer {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.gtsmile-chatbot-typing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 28px 0 2px;
}

.gtsmile-chatbot-typing span {
  display: inline-block;
  font-family: var(--font-icon);
  font-size: 1.15em;
  line-height: 1;
  color: var(--link-dark);
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
  animation: gtsmile-chatbot-leaf-flutter 1.2s infinite ease-in-out;
  opacity: .6;
}

.gtsmile-chatbot-typing span::before {
  content: 'nest_eco_leaf';
}

.gtsmile-chatbot-typing span:nth-child(2) {
  animation-delay: 0.2s;
}

.gtsmile-chatbot-typing span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes gtsmile-chatbot-leaf-flutter {
  0%, 100% {
    transform: translateY(0) rotate(-10deg);
    opacity: 0.45;
  }
  50% {
    transform: translateY(-5px) rotate(10deg);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gtsmile-chatbot-typing span {
    animation: none;
    opacity: 0.55;
  }
}

.page-template-gt-ask .gtsmile-chatbot-row.is-new {
  animation: gt-ask-chat-row-fade-in 420ms ease-out;
}

@keyframes gt-ask-chat-row-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-template-gt-ask .gtsmile-chatbot-row.is-new {
    animation: none;
  }
}




/* ---------- TELL YOUR DENTIST ---------- */


.tell-dentist__outputs {
  padding-top: var(--space-3);
}
.tell-dentist__outputs .btn:active {
  margin: 9px 1px 1px;
}
.tell-dentist__outputs .btn .icon {
  margin: -2px -6px -2px -1px;
  font-size: 1.2em;
}
.tell-dentist__outputs input,
.tell-dentist__outputs textarea {
  margin-top: 12px;
}
/*
.tell-dentist__field {
  display: grid;
  gap: var(--space-3);
}

.tell-dentist__inputs {
  border-top: 1px dotted rgba(0, 0, 0, .16);
  border-bottom: 1px dotted rgba(0, 0, 0, .16);
  padding: var(--space-4) 0;
}

.tell-dentist__inputs-title {
  margin: 0 0 var(--space-3);
  font-size: var(--step-0);
}

.tell-dentist__products {
  margin: 0;
  border: 0;
  padding: 0;
}

.tell-dentist__product-list {
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-2);
}

.tell-dentist__product-list label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.tell-dentist__product-checkbox {
  width: 18px;
  height: 18px;
  margin: 0;
}

.tell-dentist__label {
  margin: 0;
  font-weight: 600;
}

.page-slug-tell-your-dentist-about-gt-smiles .tell-dentist .button {
  width: fit-content;
}

.tell-dentist__subject {
  width: 100%;
  border: 1px solid rgba(0,0,0,.14);
  border-radius: var(--radius-1);
  padding: var(--space-3) var(--space-4);
  background: #fff;
  color: var(--text);
  font: inherit;
  line-height: 1.4;
}

.tell-dentist__text {
  width: 100%;
  min-height: 280px;
  border: 1px solid rgba(0,0,0,.14);
  border-radius: var(--radius-1);
  padding: var(--space-4);
  background: #fff;
  color: var(--text);
  font: inherit;
  line-height: 1.55;
  resize: vertical;
}

.tell-dentist__text:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.tell-dentist__subject:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
*/

/* ---------- Practice Spotlight Page ---------- */

.single-gt_spotlight .page-lede .icon {
  position: relative;
  top: -3px;
}
.prose .spotlight-contact {
  margin: var(--space-8) 0 var(--space-7);
}

.prose .spotlight-contact-gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}


.prose .spotlight-contact-tile {
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 12px;
  padding: 14px 16px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.prose .spotlight-contact-tile__title {
  margin: 0;
  font-size: var(--step-0);
}

.prose .spotlight-contact-tile__doctor {
  margin: 6px 0 0;
  color: var(--muted);
}

.prose .spotlight-contact-tile__address {
  margin: 10px 0 0;
}

.prose .spotlight-contact-tile__address span {
  display: block;
}

.prose .spotlight-contact-tile__links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 0;
}
.spotlight-contact-tile__links .icon {
  position: relative;
  top: -2px;
  left: -1px;
  margin-right: 0.22em;
  font-size: 1.15em;
  font-variation-settings: 'FILL' 0, 'wght' 350, 'GRAD' 0, 'opsz' 24;
  opacity: .9;
}

/* ---------- Contact Us ---------- */

/* field 20 = checkboxes for Patients > Questions about my account/orders
   field 24 = checkboxes for Dentists > Questions about my account/orders */
/* #wpforms-3371-field_20 .choice-5 input,
#wpforms-3371-field_20 .choice-6 input,
#wpforms-3371-field_20 .choice-9 input,
#wpforms-3371-field_20 .choice-13 input,
#wpforms-3371-field_24 .choice-5 input,
#wpforms-3371-field_24 .choice-6 input,
#wpforms-3371-field_24 .choice-9 input,
#wpforms-3371-field_24 .choice-13 input {
  display: none;
}
#wpforms-3371-field_20 .choice-5 label,
#wpforms-3371-field_20 .choice-6 label,
#wpforms-3371-field_20 .choice-9 label,
#wpforms-3371-field_20 .choice-13 label,
#wpforms-3371-field_24 .choice-5 label,
#wpforms-3371-field_24 .choice-6 label,
#wpforms-3371-field_24 .choice-9 label,
#wpforms-3371-field_24 .choice-13 label {
  margin-left: -1px;
  color: var(--text-light-WCAG);
  font-style: italic;
}
  */
#wpforms-3371-field_20 .choice-1 input,
#wpforms-3371-field_20 .choice-6 input,
#wpforms-3371-field_20 .choice-12 input,
#wpforms-3371-field_20 .choice-15 input,
#wpforms-3371-field_24 .choice-1 input,
#wpforms-3371-field_24 .choice-6 input,
#wpforms-3371-field_24 .choice-12 input,
#wpforms-3371-field_24 .choice-15 input {
  display: none;
}
#wpforms-3371-field_20 .choice-1 label,
#wpforms-3371-field_20 .choice-6 label,
#wpforms-3371-field_20 .choice-12 label,
#wpforms-3371-field_20 .choice-15 label,
#wpforms-3371-field_24 .choice-1 label,
#wpforms-3371-field_24 .choice-6 label,
#wpforms-3371-field_24 .choice-12 label,
#wpforms-3371-field_24 .choice-15 label {
  margin-left: -1px;
  color: var(--text-light-WCAG);
  font-style: italic;
}

/* ---------- Dentists > Get Started ---------- */

.page-id-32 .cta,
.page-id-32 .cta__explore {
  display: none;
}

/* ---------- Archives ---------- */

.blog .page-header .container, /* /topics/ */
.archive .page-header .container {
  border:0;
  padding-bottom: var(--space-3);
}
.archive-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin: var(--space-5) -16px -32px;
  background: rgba(0,0,0,.02);
  border: 1px dotted rgba(0,0,0,.15);
  border-radius: var(--radius-1);
  padding: 12px 21px;
  font-size: var(--step--1);  
}
.archive-filter {
  padding: 12px;
}
.archive-filter__topic label,
.archive-filter__scope {
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}
.archive-filter__audience {
  margin-top: 1px !important;
}
.archive-filter__audience input {
  position: relative;
  top: 1px;
}
.archive-filter label {
  white-space: nowrap;
}
.archive-filter > div {
  display: inline-flex;
  align-items: center;
  gap: 13px;
}
.archive-filter > fieldset {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  border: none;
  margin: 0;
  padding: 0;
}
.archive-filter > fieldset legend {
  float: left;
  margin-left: 12px;
  padding: 0;
}
.archive-filter > div.archive-filter__ask {
  display: none;
  margin-left: auto;
  padding-right: 6px;
}
.archive-filter__ask a {
    text-decoration: underline;
    text-decoration-style: dotted;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    color: var(--text);
}

.archive-filter__topic {
  flex: 1 1 100%;
}
.archive-filter select {
  width: auto;
  min-width: 0;
}
.archive-filter .archive-filter__topic select {
  width: 100% !important;
}

.archive-section {
  margin-bottom: var(--space-7);
}

.archive-section__title {
  margin: 0;
  border-top: 1px dotted rgba(0,0,0,.2);
  border-bottom: 0;
  padding-top: var(--space-5);
  font-size: var(--step-1);
}
.archive-section:first-child .archive-section__title {
  border-top: 0;
}

.archive-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

.archive-card {
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}
.archive-card:has(.archive-card__media) {
  border-radius: 0 0 14px 14px;
}
.archive-card__media {
  --spotlight-archive-media-pad: 12px;
  display: block;
  height: auto;
  min-height: 0;
  aspect-ratio: 16 / 9;
  background: #fff url('../images/ui/green-bg-1.webp') center center / cover no-repeat;
  position: relative;
  overflow: hidden;
  padding: var(--spotlight-archive-media-pad);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.archive-card__media img {
  position: absolute;
  top: var(--spotlight-archive-media-pad);
  left: var(--spotlight-archive-media-pad);
  width: calc(100% - (2 * var(--spotlight-archive-media-pad)));
  height: calc(100% - (2 * var(--spotlight-archive-media-pad)));
  object-fit: cover;
  object-position: top left;
  display: block;
  transform:none !important;
}

.archive-card__placeholder {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: grid;
  place-items: center;
  color: rgba(0,0,0,.45);
}

.archive-card__placeholder .icon {
  background: #fff;
  font-size: 2.1rem;
}

.archive-card__body {
  padding: 18px 28px 24px;
}
.archive-card:has(.archive-card__media) .archive-card__body {
  padding: 10px 24px 24px;
}

.archive-card__title {
  margin: 0;
  font-size: var(--step-1);
}

.archive-card__title a {
  text-decoration: none;
  color: var(--link-dark);
}

.archive-card__title a:hover,
.archive-card__title a:focus {
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

.archive-card__lede {
  margin: 2px 0 0 -2px;
  color: var(--text-light-WCAG);
}

.archive-card__lede .icon {
  position: relative;
  top: -2px;
  margin-right: 3px;
}

.archive-card__summary {
  margin: var(--space-3) 0 0;
  font-size: var(--step--1);
}

.archive-card__links {
  margin: var(--space-3) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.archive-card__links .icon {
  position: relative;
  top: -2px;
  left: -1px;
  margin-right: 0.22em;
  font-size: 1.15em;
  font-variation-settings: 'FILL' 0, 'wght' 350, 'GRAD' 0, 'opsz' 24;
  opacity: .9;
}

.archive-card__topics {
  margin-top: 6px;
  color: var(--text-light-WCAG);
  font-size: var(--step--1);
}
.archive-card__topics-label {
  padding-right: 4px;
}
.archive-card__cta-wrap {
  margin: var(--space-4) 0 0;
}

/* ---------- CPT: Patient Stories ---------- */

body:not(.post-type-archive-gt_spotlight) .archive-section {
  padding-top: var(--space-7);
}

.single-patient_story .aside-message {
  position: relative;
  margin-top: calc(2 * var(--space-9));
}
.single-patient_story .aside-message::before {
  content: '';
  position: absolute;
  top: calc(-1 * var(--space-9) - 6px);
  left: 0;
  border-top: 1px dotted rgba(0,0,0,.2);
  width: 100%;
}
.post-type-archive-patient_story .aside-message,
.tax-patient_story_topic .aside-message {
  display: none;
}
.post-type-archive-patient_story .cta,
.tax-patient_story_topic .cta {
  margin-top: calc(2 * var(--space-9));
}


/* ---------- CPT: Practice Spotlight ---------- */

.single-gt_spotlight .cta,
.post-type-archive-gt_spotlight .cta {
  margin-top: calc(2 * var(--space-9));
}

/* ---------- CPT: Tell Your Dentist ---------- */

.page-id-628 .cta {
  margin-top: calc(2 * var(--space-9));
}

/* ---------- Front Page ---------- */

.home .cta {
  margin-top: calc(2 * var(--space-9) + 36px);
}

/* ---------- Icon System ---------- */
/* Material Symbols - Variable icon font (self-hosted in assets/fonts/) */

.icon{
  font-family: var(--font-icon);
  font-weight: normal;
  font-style: normal;
  font-size: 1.25em;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  vertical-align: middle;
  /* Enable ligatures for icon names */
  font-feature-settings: 'liga';
  -webkit-font-feature-settings: 'liga';
  /* Optimize rendering */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Default variable font settings */
  font-variation-settings: 
    'FILL' 0,
    'wght' 300,
    'GRAD' 0,
    'opsz' 24;
}

/* Size variants */
.icon--sm{ 
  font-size: 1em; 
  font-variation-settings: 'FILL' 0, 'wght' 30, 'GRAD' 0, 'opsz' 20;
}
.icon--lg{ 
  font-size: 2em; 
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 48;
}

/* Style variants */
.icon--filled{ 
  font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}
.icon--bold{ 
  font-variation-settings: 'FILL' 0, 'wght' 700, 'GRAD' 0, 'opsz' 24;
}
.icon--high-emphasis{ 
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 200, 'opsz' 24;
}

/* Directional helpers */
.icon--flip-h{ transform: scaleX(-1); }
.icon--flip-v{ transform: scaleY(-1); }
.icon--rotate-90{ transform: rotate(90deg); }
.icon--rotate-180{ transform: rotate(180deg); }
.icon--rotate-270{ transform: rotate(270deg); }

/* Animation helpers */
.icon--spin{
  animation: icon-spin 1s linear infinite;
}
@keyframes icon-spin{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}


/* ============================================
   RESPONSIVE OVERRIDES
   Adjust values at different breakpoints
   ============================================ */



@media (min-width: 640px) {
  .hide-xs{ display:inline-flex; }
  .page-header {
    padding-top: var(--space-7);
  }
  .form-checkbox-list {
    margin-right: 20px;
  }
  
  .hero {
    background-position: calc(50% - 80px) bottom; 
  }
    
  .hero__content {
    width: 64%;
  }

  /*
  .figure-hero {
    margin-top: var(--space-7);
  }
  */
  .figure-center,
  .figure-right {
    margin: var(--space-8) auto var(--space-9);
  }
  .figure-right {
    margin-right: 0;
  }
  .prose :where(ul,ol){ margin-left: var(--space-3);}
  .prose :where(li:not(.step)){ margin: .4em 0; padding-left: 7px;}
  .prose :where(figure:not(.wp-block-gallery,.video-circular,.wp-block-table)){
    max-width: 62%;
  }
  .prose :where(figure.wp-block-table){
    margin-left: 0;
    margin-right: 0;
  }
  .prose :where(p.post-summary, p.post-callout, aside){
    padding: 20px 28px;
  }
 
  .prose :where(p.post-highlight){ 
    margin: var(--space-5) -20px;
    width:calc(100% + 40px);
  }
 
  .table-income-estimates td:nth-child(2),
  .table-income-estimates td:nth-child(3) {
    display: table-cell;
  }
  .prose :where(blockquote){
    border-left-width: 4px;
    padding: var(--space-5) var(--space-6) var(--space-5) calc(var(--space-5) + 68px);
  }
  .prose :where(blockquote)::before {
    left: 12px;
    top: 2px;
    font-size: 160px;
  }
  .video-circular {
    width: 420px;
    height: 420px;
  }
  .video-circular video {
    object-position: calc(50% - 1px) 50%;
  }
  .steps {
    margin-left: 0;
    width: auto;
  }

  .archive-filter {
    margin: var(--space-5) -19px -32px;
    padding: 12px 18px !important;
    width: calc(100% + 36px);
  }
  .archive-filter__topic {
    flex: 0 1 auto;
  }
  .archive-filter .archive-filter__topic select {
    width: auto !important;
  }
  /* 
  .archive-filter > div.archive-filter__ask {
    display: inline-flex !important;
  }
  */
  .archive .search-results {
    margin-top: 24px;
  }
  .archive .search-results:has(.faq-accordion) {
    margin: 24px 0 0;
  }
  .archive .search-results__header {
    padding: 0;
  }
  .search-results:not(:has(.faq-accordion)) .search-results__header {
    margin-right: 0;
    margin-left: 0;
  }
  .search-results__topic-heading {
    padding: 0;
  }
  .search-results__topic-view-all {
    margin-right: 2px;
  }

  .wpforms-container {
    padding: 14px 28px;
  }
  .wpforms-field-container input[type="checkbox"] + label,
  .wpforms-show-legend legend {
    padding: 0;
  }
  .site-footer__links a.hide-xs {
    display: inline-flex;
  }
}

@media (min-width: 728px) {

  .hero {
    background-position: calc(50% - 100px) bottom; 
  }

  .prose .spotlight-contact-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .archive-card:has(.archive-card__media) {
    grid-template-columns: minmax(220px, 38.2%) minmax(0, 61.8%);
    align-items: stretch;
    border-radius: 0 14px 14px 0;
  }

  .archive-card__media,
  .archive-card__placeholder {
    min-height: 0;
    height: 100%;
    aspect-ratio: auto;
    align-self: stretch;
  }


  .archive-card__body {
    padding: 24px 32px 26px;
  }
  .archive-card:has(.archive-card__media) .archive-card__body {
    padding: 18px 30px 26px 10px;
  }

}


@media (min-width: 860px){ /* breakpoint for "sm" */
  .grid{ grid-template-columns: repeat(12, 1fr); }
  .hide-sm{ display:inline-flex; }
  .show-sm{ display:none; }
  .site-main {
     width: 65ch;
  }
  .page-header {
    padding-top: var(--space-8);
  }
  .page-header .container,
  .page-content .container {
    width: min(var(--container), calc(100% - 2*var(--space-7)));
  }
  /*
  .hero {
    margin-top: var(--space-5);
    margin-left: calc(50% - min(50vw, 640px) + var(--space-6));
    margin-bottom: var(--space-9);
    border-left: var(--space-3) solid transparent;
    border-right: var(--space-3) solid transparent;
    width: min(100vw - var(--space-6) * 2, 1280px - var(--space-6) * 2);
  }
  */
  .hero {
    background-position: calc(50% - 3.6vw) calc(100% + 34px); 
  }
    
  .hero__content {
    position: relative;
    left: calc(22.5vw + 10px);
    margin: auto;
    padding-right: 100px;
  }
  .hero__subtitle:before {
    width: 140%;
  }
  .hero .btn,
  .cta .btn,
  .nav-panel__cta .btn,
  .wpforms-submit {
      width: auto;
  }
  .prose :where(p.post-highlight),
  .card-highlight{ 
    margin: var(--space-6) -28px;
    padding: 20px 28px;
    width:calc(100% + 56px);
  }
  .step {
    padding-left: 80px;
  }

  .search {
    margin: var(--space-2) -24px 26px ;
    width:calc(100% + 48px);
  }
  
  .page-template-gt-ask .page-header {
    margin-bottom: -2px;
  }
  .gt-ask-has-replies #gtsmile-chat-form {
    /*
    bottom: max(40px, env(safe-area-inset-bottom));
    width: min(100% - 24px, 760px);
    */
    padding: 26px 32px 0;
  }
  #gtsmile-chat-form {
    width: calc(100% + 8px);
    margin-left: -4px;
  }

  .search-find-a-dentist {
    padding-top: 14px;
  }

  .site-footer {
    padding: 20px 8px;
  }

  .site-footer__content {
    flex: 1 1 auto;
  }
  .site-footer__links {
    gap: 0;
    justify-content: flex-end;
  }
  .site-footer__badge {
    align-self: auto;
    padding-bottom: 10px;
  }
  .site-footer .gt-hipaa-trust-badge-slot {
    margin-left: auto;
  }
 
  .site-footer .copyright,
  .site-footer .links {
    width: auto;
  }
  .site-footer .copyright {
    position: absolute;
    left: 0;
    bottom: 18px;
  }
  .site-footer .links { 
    margin-left: auto;
  }
  
  .wpforms-field-row:has(.wpforms-one-half) {
    grid-template-columns: 1fr 1fr;
  }

}



@media (min-width: 980px){
  
  .has-sidebar{
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: start;
  }
  /*
  .hero {
    margin-left: calc(50% - min(50vw, 640px) + var(--space-7));
    border-width: var(--space-3-2) !important;
    width: min(100vw - var(--space-7) * 2, 1280px - var(--space-7) * 2);
  }
  */
  .hide-md {
    display: inline-flex;
  }
}
@media (min-width: 1024px) {
  .hero {
    background-position: calc(50% - 7.2vw) calc(100% + 34px); 
  }
  .hero__content {
    left: calc(22.5vw + 10px);
  }
}

