/* ============================================================
   AllureTrak — franchisor site, implemented from the Claude
   Design brief. The design is inline-style led; this file only
   carries what inline styles cannot express: :hover, the
   responsive rules behind data-m, and the proof tabs.
   ============================================================ */
html,body{margin:0;padding:0;background:#FFFFFF;color:#39494F;font-family:'Open Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
html{scroll-behavior:smooth}
*,*::before,*::after{box-sizing:border-box}
a{color:#0E9E8F;text-decoration:none}
a:hover{color:#0A7A6E}
button{font-family:inherit}
img{display:block;max-width:100%}
ul{list-style:none}

/* responsive behaviour driven by data-m, exactly as authored */
@media (max-width:880px){
  [data-m~="hide"]{display:none!important}
  [data-m~="show"]{display:flex!important}
  [data-m~="stack"]{grid-template-columns:1fr!important}
  [data-m~="rule"]{border-left:0!important;border-top:1px solid var(--rule,rgba(11,18,21,.13))!important;padding:18px 0!important}
  [data-m~="rule"]:first-child{border-top:0!important}
  [data-m~="tight"]{padding-top:64px!important;padding-bottom:64px!important}
}

/* ---- hover states (were style-hover in the design) ---- */
.ds-solid{background:#0A7A6E;color:#FFFFFF;transition:background .15s ease}
.ds-solid:hover{background:#0A7A6E;color:#FFFFFF}
.ds-line{background:transparent;color:#FFFFFF;border:1px solid rgba(255,255,255,.38);transition:border-color .15s ease}
.ds-line:hover{border-color:#FFFFFF;color:#FFFFFF}
.ds-navlink{color:#C6D2D6;transition:color .15s ease}
.ds-navlink:hover{color:#FFFFFF}
.ds-navlink.is-active{color:#FFFFFF}
.ds-footlink{color:#C6D2D6;transition:color .15s ease}
.ds-footlink:hover{color:#FFFFFF}
.ds-legallink{color:#93A6AC;transition:color .15s ease}
.ds-legallink:hover{color:#FFFFFF}
.ds-readmore{color:#0B1215;border-bottom:1px solid rgba(11,18,21,.28);transition:border-color .15s ease}
.ds-readmore:hover{color:#0B1215;border-color:#0B1215}
.ds-quiet{color:#93A6AC;transition:color .15s ease}
.ds-quiet:hover{color:#FFFFFF}

/* ---- proof tabs ---- */
.ds-tab{background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:12px 22px 14px 0;margin-right:28px;font-size:14px;font-weight:700;letter-spacing:.02em;color:#5E6F75;cursor:pointer;transition:color .15s ease}
.ds-tab:last-child{margin-right:0}
.ds-tab:hover{color:#0B1215}
.ds-tab[aria-selected="true"]{color:#0B1215;border-bottom-color:#0E9E8F}
.ds-panel{display:none}
.ds-panel.is-on{display:block}

/* ---- mobile menu (the design's own, not the legacy drawer) ---- */
.ds-mobile-menu{display:none;border-top:1px solid rgba(255,255,255,.1);background:#0B1215;padding:6px clamp(20px,4vw,48px) 26px;flex-direction:column}
.ds-mobile-menu.is-open{display:flex}
.ds-mobile-menu a{font-size:17px;font-weight:600;color:#FFFFFF;padding:15px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.ds-mobile-menu a.ds-mobile-cta{margin-top:10px;display:flex;justify-content:center;border-bottom:0;padding:15px 26px;border-radius:2px}

/* the lead modal keeps the site's own styling from site.css */
.dh1:hover{background:#0A7A6E;color:#FFFFFF}
.dh2:hover{border-color:#FFFFFF;color:#FFFFFF}
.dh3:hover{color:#FFFFFF;border-color:#FFFFFF}
.dh4:hover{color:#FFFFFF}
.dh5:hover{color:#0B1215;border-color:#0B1215}
.dh6:hover{color:#0B1215;border-color:#0A7A6E}
.dh7:hover{background:#0A7A6E}

/* --- review remediation --- */
/* mobile menu button was 38px tall; 44px is the minimum comfortable target */
[data-ds-menu]{min-height:44px}
.ds-mobile-menu a,.ds-mobile-menu button{min-height:44px;align-items:center}
/* visible keyboard focus — the design defined none */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid #0A7A6E;outline-offset:2px}
.ds-solid:focus-visible,[data-ds-menu]:focus-visible{outline-color:#5FD3C4}
/* form inputs sit on #0B1215; give focus a visible teal edge */
[data-ds-form] input:focus,[data-ds-form] select:focus,[data-ds-form] textarea:focus{
  border-color:#5FD3C4 !important}
/* browsers default textarea/select to monospace; the design assumed inherit */
[data-ds-form] input,[data-ds-form] select,[data-ds-form] textarea{font-family:inherit}