/* ============================================================
   SC Design Tokens v1.0.5
   Steps 1-3 of the September 2026 design audit.
   One radius (3px), shadows become edges, neutral off-whites
   collapse to two surfaces, size-relative heading tracking,
   real type scale, one button system at 120ms, global focus ring.
   Deactivating this plugin restores the previous appearance.
   ============================================================ */

:root{
  --scv2-rule:#D4D8D4;
  --scv2-sunk:#F1F3F1;
  --scv2-green:#4A7C6F;
  --scv2-green-deep:#3D6659;
  --scv2-ink:#15181A;
}

/* ---------- 1 · ONE RADIUS -------------------------------- */
/* Every component class found carrying 4/6/8/10/12/14/16/20px */
body.scv2 .sc-card,
body.scv2 .sc-answer,
body.scv2 .sc-price-disclaimer,
body.scv2 .sc-key-info,
body.scv2 .sc-toc,
body.scv2 .sc-yt,
body.scv2 .sc-yt__play,
body.scv2 .sc-research,
body.scv2 .sc-which-guide-cta,
body.scv2 .sc-price-methodology,
body.scv2 .sc-hero__media,
body.scv2 .sc-eyebrow,
body.scv2 .sc2-card,
body.scv2 .sc2-facts,
body.scv2 .sc2-trio-item,
body.scv2 .sc2-final,
body.scv2 .sc2-card-price,
body.scv2 .spt-box,
body.scv2 #main-content details,
body.scv2 #main-content iframe,
body.scv2 .aioseo-author-bio-compact,
body.scv2 .aioseo-author-bio-compact-image,
body.scv2 .et_pb_blurb,
body.scv2 .et_pb_image_wrap{
  border-radius:3px !important;
}
/* Inline-styled boxes (many sc-* boxes carry their radius inline).
   Never touch circles. */
body.scv2 #main-content [style*="border-radius" i]:not([style*="50%"]):not([class*="avatar"]){
  border-radius:3px !important;
}

/* ---------- 2 · SHADOWS BECOME EDGES ---------------------- */
body.scv2 .et_pb_blurb,
body.scv2 .et_pb_button,
body.scv2 #page-container .et_pb_button,
body.scv2 .sc-hero__media,
body.scv2 .sc-hero__cta,
body.scv2 .sc-mh__cta,
body.scv2 .et_pb_image_wrap.has-box-shadow-overlay{
  box-shadow:none !important;
}
body.scv2 .et_pb_blurb{
  border:1px solid var(--scv2-rule) !important;
}

/* ---------- 3 · TWO SURFACES ------------------------------ */
/* The six neutral off-whites collapse to one visible sunk tone.
   Accent tints (#f5faf8 green, #f9f4e8 gold) keep their meaning. */
body.scv2 #main-content [style*="#fafafa" i],
body.scv2 #main-content [style*="#f5f5f5" i],
body.scv2 #main-content [style*="#f8f9fa" i],
body.scv2 #main-content [style*="#f6f9fc" i],
body.scv2 #main-content [style*="#f5f7fa" i],
body.scv2 #main-content [style*="#f5f8fa" i],
body.scv2 #main-content [style*="#f4f8f6" i],
body.scv2 .sc-price-disclaimer,
body.scv2 .sc-toc,
body.scv2 .sc-research,
body.scv2 .sc-which-guide-cta,
body.scv2 .sc-price-methodology,
body.scv2 .sc2-card-price{
  background-color:var(--scv2-sunk) !important;
}

/* ---------- 4 · TRACKING SCALES WITH SIZE, SCALE GETS STEPS */
body.scv2 #main-content h1,
body.scv2 .sc-hero h1{
  font-size:clamp(38px,4.6vw,64px) !important;
  line-height:1.06 !important;
  letter-spacing:-.028em !important;
}
body.scv2 #main-content h2{
  font-size:38px !important;
  line-height:1.18 !important;
  letter-spacing:-.018em !important;
}
body.scv2 #main-content h3{
  font-size:26px !important;
  line-height:1.3 !important;
  letter-spacing:-.008em !important;
}
body.scv2 #main-content h4{
  letter-spacing:0 !important;
}
@media (max-width:980px){
  body.scv2 #main-content h2{font-size:31px !important;}
}
/* Body copy holds as a block instead of drifting apart */
body.scv2 #main-content .et_pb_text p,
body.scv2 #main-content .et_pb_text li{
  line-height:1.62;
}

/* ---------- 5 · ONE BUTTON, 120ms ------------------------- */
body.scv2 .et_pb_button,
body.scv2 .sc-hero__cta,
body.scv2 .sc-mh__cta,
body.scv2 .sc2-btn{
  border-radius:3px !important;
  background:var(--scv2-green) !important;
  color:#fff !important;
  border:1.5px solid var(--scv2-green) !important;
  font-family:"Open Sans",Helvetica,Arial,sans-serif !important;
  font-size:17px !important;
  font-weight:600 !important;
  letter-spacing:.01em !important;
  text-transform:none !important;
  line-height:1.2 !important;
  padding:13px 24px !important;
  box-shadow:none !important;
  transition:background-color .12s linear,border-color .12s linear,color .12s linear,transform .06s linear !important;
}
/* Divi's hover arrow and padding jump, retired */
body.scv2 .et_pb_button:after{display:none !important;}
body.scv2 .et_pb_button:hover,
body.scv2 .sc-hero__cta:hover,
body.scv2 .sc-mh__cta:hover,
body.scv2 .sc2-btn:hover{
  background:var(--scv2-green-deep) !important;
  border-color:var(--scv2-green-deep) !important;
  color:#fff !important;
  padding:13px 24px !important;
}
body.scv2 .et_pb_button:active,
body.scv2 .sc-hero__cta:active,
body.scv2 .sc-mh__cta:active,
body.scv2 .sc2-btn:active{
  transform:translateY(1px);
}
/* The one secondary role keeps its outline shape */
body.scv2 .sc2-btn-ghost{
  background:transparent !important;
  color:var(--scv2-green-deep) !important;
}
body.scv2 .sc2-btn-ghost:hover{
  background:var(--scv2-green-deep) !important;
  color:#fff !important;
}

/* ---------- 6 · FOCUS + MOTION ---------------------------- */
body.scv2 :where(a,button,input,select,summary,[tabindex]):focus-visible{
  outline:2px solid currentColor;
  outline-offset:3px;
}
@media (prefers-reduced-motion:reduce){
  body.scv2 *{transition-duration:0s !important;}
}

/* ---------- v1.0.2 PATCH ---------------------------------- */
/* Hero context: the CTA sits ON the brand green, so it flips white */
body.scv2 .sc-hero .sc-hero__cta{
  background:#ffffff !important;
  color:var(--scv2-green-deep) !important;
  border-color:#ffffff !important;
}
body.scv2 .sc-hero .sc-hero__cta:hover{
  background:transparent !important;
  color:#ffffff !important;
  border-color:#ffffff !important;
}
/* Hero stat chips and remaining 4px content images join the system */
body.scv2 .sc-hero__stats li{border-radius:3px !important;}
body.scv2 #main-content img:not([class*="avatar"]){border-radius:3px !important;}
/* Divi's per-module button shadows carry an id in their selector; outrank them */
body.scv2 #page-container .et_pb_button,
body.scv2 #page-container .et_pb_button:hover{box-shadow:none !important;}

/* ---------- v1.0.3 PATCH ---------------------------------- */
/* BUTTON TIMING, WON PROPERLY.
   An old homepage snippet sets transition:.3s !important on
   body.home .et_pb_button at equal specificity and later order,
   so v1.0.0's rule lost. The id outranks it everywhere. */
body.scv2 #page-container .et_pb_button{
  transition:background-color .12s linear,border-color .12s linear,color .12s linear,transform .06s linear !important;
}

/* TABLES: RULES, NOT BANDS.
   The filled header bands (#2C5F85 snippet rule, #172A44 table.spt,
   #1B3A2D entry-content) all lose to the id. Horizontal rules only,
   digits align via tabular figures, zebra off-whites retired.
   Cells whose background is set inline carry meaning - left alone. */
body.scv2 #main-content table{
  border-collapse:collapse !important;
  font-variant-numeric:tabular-nums;
}
body.scv2 #main-content table th{
  background:transparent !important;
  color:var(--scv2-ink) !important;
  border:0 !important;
  border-bottom:2px solid var(--scv2-ink) !important;
  font-weight:700;
  vertical-align:bottom;
}
body.scv2 #main-content table td{
  border:0 !important;
  border-bottom:1px solid var(--scv2-rule) !important;
}
body.scv2 #main-content table td:not([style*="background" i]){
  background-color:transparent !important;
}

/* ---------- v1.0.4 PATCH ---------------------------------- */
/* The tracker's zebra stripe (#F5F8FA) sits on the tr, not the td. */
body.scv2 #main-content table tr:not([style*="background" i]){
  background-color:transparent !important;
}

/* ---------- v1.0.5 PATCH: the calculator widget ---------- */
/* /stairlift-calculator/ is a bespoke shortcode whose select,
   result and quote panels, disclosure box and its own button.btn
   were still an island at 8/10/6px. Scoped under #main-content so
   no global button is hit. */
body.scv2 #main-content .result,
body.scv2 #main-content .sc-quote,
body.scv2 #main-content .sc-cta-disclosure,
body.scv2 #main-content select,
body.scv2 #main-content button.btn{
  border-radius:3px !important;
}
body.scv2 #main-content button.btn{
  background:var(--scv2-green) !important;
  color:#fff !important;
  border:1.5px solid var(--scv2-green) !important;
  text-transform:none !important;
  box-shadow:none !important;
  transition:background-color .12s linear,border-color .12s linear,color .12s linear,transform .06s linear !important;
}
body.scv2 #main-content button.btn:hover{
  background:var(--scv2-green-deep) !important;
  border-color:var(--scv2-green-deep) !important;
}
body.scv2 #main-content button.btn:active{transform:translateY(1px);}

/* ---------- v1.0.6 · HEADER CONDENSE-ON-SCROLL ----------- */
/* The fixed header (header.sc-mh) is 187px, ~a quarter of a
   laptop viewport, on every page. Past ~200px of scroll it
   condenses to ~88px: secondary nav collapses, logo and CTA
   shrink. At rest it is untouched, so nothing moves above the
   fold. The .sc-mh--condensed class is toggled by tokens.js.
   All heights animate; the reduced-motion guard above zeroes
   the duration. Deactivating the plugin removes both. */
body.scv2 header.sc-mh{
  transition:box-shadow .2s ease !important;
}
body.scv2 header.sc-mh .sc-mh__logo img{
  transition:height .22s cubic-bezier(.2,0,0,1) !important;
}
body.scv2 header.sc-mh .sc-mh__secondary{
  overflow:hidden;
  transition:max-height .22s cubic-bezier(.2,0,0,1),
             opacity .16s linear !important;
  max-height:60px;
}
body.scv2 header.sc-mh .sc-mh__cta{
  transition:background-color .12s linear,border-color .12s linear,
             color .12s linear,transform .06s linear,
             padding .22s cubic-bezier(.2,0,0,1) !important;
}

body.scv2 header.sc-mh.sc-mh--condensed{
  box-shadow:0 1px 0 var(--scv2-rule) !important;
}
body.scv2 header.sc-mh.sc-mh--condensed .sc-mh__logo img{
  height:38px !important;
}
body.scv2 header.sc-mh.sc-mh--condensed .sc-mh__cta{
  padding-top:9px !important;
  padding-bottom:9px !important;
}
body.scv2 header.sc-mh.sc-mh--condensed .sc-mh__secondary{
  max-height:0 !important;
  opacity:0 !important;
  pointer-events:none !important;
}