/*
================================================================================
  ML Software, LLC
  Copyright 2026. All rights reserved.

  Renewal IQ - renewal-iq.com

  assets/css/vertical.css
  Version: 1.5.0
  Created: 2026-09-03
  Updated: 2026-09-04

  Description: Shared stylesheet for the three vertical landing pages
  (restaurants.cfm, contractors.cfm, cannabis.cfm). Every rule takes its
  colour from six accent custom properties which each page declares inline
  before this file loads. Layout, type and status colours live here; only the
  accent differs per vertical.

  Two rules that are load-bearing and easy to undo by accident:

  1. Status colours (--ok / --warn / --crit) are NOT per-vertical. They mean
     compliant / expiring / expired and must read identically on every page.
  2. Nav link rules are scoped .nav a:not(.btn). Without the :not(), .nav a
     is specificity (0,1,1) and silently overrides .btnPrimary and .small
     (both 0,1,0) on the Get Started button.

  1.5.0 - 2026-09-04 - .priceName raised 12px to 16px with more space beneath.
                       At 12px the plan label read as a caption and the top of
                       each pricing card looked empty above the amount.
  1.4.0 - 2026-09-04 - .btn now declares font-family:inherit and
                       line-height:1.2. Without them a <button class="btn">
                       took the UA stylesheet's Arial at line-height:normal
                       while an <a class="btn"> inherited the body font, so
                       the two pricing-card buttons rendered at different
                       heights in different typefaces. Affects every button
                       on every page, by design.
  1.3.0 - 2026-09-04 - Pricing rebuilt for per-location billing. The grid is
                       two cards rather than three (the plan and Enterprise),
                       weighted 1.55fr / 1fr so the plan card carries the two
                       price units without crowding. New .priceSplit,
                       .priceUnit, .priceWhat and .priceNote rules. .priceList
                       still absorbs the slack so both buttons align.
  1.2.0 - 2026-09-03 - Added the homepage split-hero cards and proof strip so
                       one stylesheet serves the marketing root and all three
                       vertical pages.
  1.1.0 - 2026-09-03 - Pricing cards stretch to equal height; the feature list
                       absorbs the slack so the three buttons align.
================================================================================
*/

:root{
  --bg:#0d0d0f; --panel:#16161a; --panel2:#121215;
  --text:#f0f0f4; --muted:rgba(240,240,244,.68); --muted2:rgba(240,240,244,.45);
  --border:rgba(255,255,255,.09); --borderSoft:rgba(255,255,255,.06);
  --ok:#4cff91; --warn:#ffc832; --crit:#ff6450;
  --radius:10px; --maxw:1180px;
}

/* Per-vertical accent tokens. This block is the ONLY thing that differs
   between the three pages. Everything below reads these variables. */
.v-rest{ --accent:#f5a623; --accentHi:#f0b030; --accentInk:#1a0f00;
         --accentGlow:rgba(245,166,35,.10); --accentBorder:rgba(245,166,35,.30);
         --accentSoft:rgba(245,166,35,.05); }
.v-con { --accent:#4d9de0; --accentHi:#6bb0e8; --accentInk:#04121d;
         --accentGlow:rgba(77,157,224,.11); --accentBorder:rgba(77,157,224,.32);
         --accentSoft:rgba(77,157,224,.06); --steel:#8fa3b8;
         --panel:#15181c; --panel2:#111417; }
.v-can { --accent:#3f8f5e; --accentHi:#4da571; --accentInk:#04150b;
         --accentGlow:rgba(63,143,94,.14); --accentBorder:rgba(63,143,94,.38);
         --accentSoft:rgba(63,143,94,.07);
         --panel:#141815; --panel2:#101410; }

*{box-sizing:border-box}
.skipLink{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;z-index:999}
.skipLink:focus{left:12px;top:12px;width:auto;height:auto;padding:10px 16px;
  background:var(--accent);color:var(--accentInk);border-radius:6px;
  font-weight:700;font-size:14px}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);
  font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:'Barlow Condensed',sans-serif;font-weight:700;
  letter-spacing:.4px;word-spacing:1px;margin:0;line-height:1.22}
a{color:inherit}
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* ---------- mockup chrome (not part of the real page) ---------- */

.flowLine2{display:flex;align-items:flex-start;justify-content:center;gap:0;
  background:var(--accentSoft);border:1px solid var(--accentBorder);
  border-radius:var(--radius);padding:34px 22px 30px;margin-top:8px;flex-wrap:wrap}
.flowUnit{display:flex;flex-direction:column;align-items:center;padding:0 30px}
.flowUnitNum{font-family:'Barlow Condensed',sans-serif;font-size:42px;font-weight:700;
  letter-spacing:.5px;color:var(--accent);line-height:1.1}
.flowUnitTxt{font-size:15px;color:var(--text);margin-top:5px;text-align:center;line-height:1.4}
.flowArrow{color:var(--accent);opacity:.7;flex-shrink:0;margin-top:12px}
.flowSum{width:100%;text-align:center;font-family:'Barlow Condensed',sans-serif;
  font-size:28px;font-weight:700;letter-spacing:.4px;line-height:1.25;color:var(--text);
  margin-top:24px;padding-top:22px;border-top:1px solid var(--accentBorder)}
.flowSum b{color:var(--accent);font-weight:700}

@media(max-width:768px){
  .flowLine2{flex-direction:column;gap:14px;padding:26px 18px}
  .flowArrow{transform:rotate(90deg);margin-top:0}
  .flowSum{font-size:23px}
}

.rotWrap{display:grid;margin-bottom:20px}
.rotSlide{grid-area:1/1;opacity:0;visibility:hidden;
  transition:opacity 480ms ease-in-out;pointer-events:none}
.rotSlide.on{opacity:1;visibility:visible;pointer-events:auto}
.rotSlide span{color:var(--accent)}
.rotDots{display:flex;gap:2px;margin:2px 0 22px}
.rotDot{width:44px;height:44px;background:none;border:none;padding:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  -webkit-tap-highlight-color:transparent}
.rotDot::before{content:'';display:block;width:26px;height:3px;border-radius:2px;
  background:rgba(255,255,255,.18);transition:background .2s}
.rotDot.on::before{background:var(--accent)}
.rotDot:hover::before{background:rgba(255,255,255,.35)}
.rotDot.on:hover::before{background:var(--accent)}
@media(prefers-reduced-motion:reduce){.rotSlide{transition:none}}

.relBand{background:var(--panel2);border-top:1px solid var(--borderSoft);padding:78px 0}
.relGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:8px}
.relCard{background:var(--panel);border:1px solid var(--border);
  border-radius:var(--radius);padding:20px 19px}
.relIcon{width:34px;height:34px;border-radius:8px;background:var(--accentGlow);
  border:1px solid var(--accentBorder);color:var(--accent);display:flex;
  align-items:center;justify-content:center;margin-bottom:13px}
.relCard h4{font-family:'Barlow Condensed',sans-serif;font-size:18px;font-weight:700;
  letter-spacing:.4px;line-height:1.25;margin:0 0 7px}
.relCard p{font-size:13.2px;color:var(--muted);line-height:1.55;margin:0}
.relLead{background:var(--accentSoft);border:1px solid var(--accentBorder);
  border-radius:var(--radius);padding:24px 26px;margin-bottom:18px;
  display:flex;gap:18px;align-items:flex-start}
.relLeadIcon{color:var(--accent);flex-shrink:0;margin-top:2px}
.relLeadTxt{font-family:'Barlow Condensed',sans-serif;font-size:25px;font-weight:700;
  letter-spacing:.4px;line-height:1.3;color:var(--text)}
.relLeadSub{font-size:14px;color:var(--muted);line-height:1.6;margin-top:9px;
  font-family:'DM Sans',sans-serif;font-weight:400;letter-spacing:0}
@media(max-width:980px){.relGrid{grid-template-columns:1fr 1fr}}
@media(max-width:768px){
  .relBand{padding:54px 0}
  .relGrid{grid-template-columns:1fr}
  .relLead{flex-direction:column;gap:12px;padding:20px}
  .relLeadTxt{font-size:21px}
}

/* ---------- topbar ---------- */
.topbar{background:rgba(13,13,15,.9);border-bottom:1px solid var(--borderSoft)}
@media(pointer:coarse){.topbar{position:static}}
.topbar .row{display:flex;align-items:center;justify-content:space-between;height:68px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.brandMark{width:34px;height:34px;border-radius:8px;background:var(--accent);
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.brandName{font-family:'Barlow Condensed',sans-serif;font-size:21px;font-weight:700;
  line-height:1.1;letter-spacing:.5px}
.brandTag{font-size:10.5px;color:var(--muted2);line-height:1.3;margin-top:1px}
.nav{display:flex;align-items:center;gap:26px}
.nav a:not(.btn){font-size:14px;color:var(--muted);text-decoration:none;
  padding:10px 0;touch-action:manipulation;transition:color .15s}
.nav a:not(.btn):hover{color:var(--text)}
.navLogin{color:var(--text)!important}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border-radius:6px;text-decoration:none;font-weight:700;
  border:1px solid transparent;cursor:pointer;transition:all .15s;
  touch-action:manipulation;text-align:center;
  /* font-family and line-height are declared, not inherited by accident.
     A <button> does not inherit either one from body -- the UA stylesheet
     gives it Arial at line-height:normal -- so a <button class="btn"> and an
     <a class="btn"> with identical padding rendered at different heights and
     in different typefaces. Both must be set explicitly here. */
  font-family:inherit;line-height:1.2;margin:0}
.btn.large,.btn.huge{min-height:44px}
@media(pointer:coarse){.btn{min-height:44px}}
.btnPrimary{background:var(--accent);color:#1a0f00;border-radius:6px;
  font-weight:700;letter-spacing:-.1px}
.btnPrimary:hover{background:var(--accentHi);transform:translateY(-1px)}
.btnGhost{background:transparent;color:var(--text);border-color:var(--border);
  border-radius:6px}
.btnGhost:hover{border-color:var(--accentBorder)}
.small{font-size:14px;padding:9px 20px}
.large{font-size:15.5px;padding:14px 34px}
.huge{font-size:17px;padding:17px 48px;max-width:100%}

/* ---------- hero ---------- */
.hero{padding:76px 0 60px;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;top:-180px;left:50%;
  transform:translateX(-50%);width:900px;height:620px;
  background:radial-gradient(circle,var(--accentGlow) 0%,transparent 66%);
  pointer-events:none}
.heroGrid{display:grid;grid-template-columns:1.02fr .98fr;gap:52px;
  align-items:center;position:relative;z-index:1}
.heroH1{font-size:47px;line-height:1.16;letter-spacing:.5px;margin-bottom:22px}
.heroH1 span{color:var(--accent)}
.heroLead{font-size:16.5px;color:var(--muted);line-height:1.68;
  margin:0 0 28px;max-width:56ch}
.heroCtas{display:flex;gap:13px;flex-wrap:wrap;margin-bottom:16px}
.heroNote{font-size:12.5px;color:var(--muted2)}

/* ---------- dashboard panel ---------- */
.heroPanel{background:var(--panel);border:1px solid var(--border);
  border-radius:14px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.42)}
.hpTop{display:flex;align-items:center;gap:10px;padding:13px 17px;
  border-bottom:1px solid var(--borderSoft);background:var(--panel2)}
.hpDot{width:9px;height:9px;border-radius:50%;background:var(--accent);flex-shrink:0}
.hpTitle{font-size:12px;color:var(--muted);font-weight:500}
.hpBody{padding:7px 0}
.lrow{display:flex;align-items:center;gap:12px;padding:11px 17px;
  border-bottom:1px solid var(--borderSoft)}
.lrow:last-child{border-bottom:none}
.licon{width:34px;height:34px;border-radius:8px;display:flex;align-items:center;
  justify-content:center;flex-shrink:0}
.licon svg{width:17px;height:17px}
.linfo{flex:1;min-width:0}
.lname{font-size:13.5px;font-weight:600;line-height:1.3}
.lent{font-size:11.5px;color:var(--muted2);margin-top:1px}
.ldays{font-size:12.5px;font-weight:700;flex-shrink:0;font-variant-numeric:tabular-nums}
.dRed{color:var(--crit)} .dAmb{color:var(--warn)} .dGrn{color:var(--ok)}
.iRed{background:rgba(255,100,80,.12);color:var(--crit)}
.iAmb{background:rgba(255,200,50,.12);color:var(--warn)}
.iGrn{background:rgba(76,255,145,.10);color:var(--ok)}
.hpFoot{display:flex;align-items:center;justify-content:space-between;
  padding:12px 17px;border-top:1px solid var(--borderSoft);background:var(--panel2);
  font-size:11.5px;color:var(--muted2)}
.hpFoot strong{color:var(--crit)}
.soonTag{font-size:9.5px;font-weight:700;color:var(--accent);
  background:var(--accentGlow);border:1px solid var(--accentBorder);
  border-radius:20px;padding:1px 7px;margin-left:7px;vertical-align:1px;
  letter-spacing:.3px}

/* ---------- pain strip ---------- */
.painStrip{background:rgba(255,100,80,.06);
  border-top:1px solid rgba(255,100,80,.18);
  border-bottom:1px solid rgba(255,100,80,.18);padding:18px 0}
.painItems{display:flex;justify-content:center;flex-wrap:wrap}
.painItem{display:flex;align-items:center;gap:10px;font-size:13.5px;
  color:rgba(255,180,170,.9);padding:8px 28px;
  border-right:1px solid rgba(255,100,80,.15);line-height:1.4}
.painItem:last-child{border-right:none}
.painItem svg{flex-shrink:0;color:var(--crit)}
.painCost{font-family:'Barlow Condensed',sans-serif;font-size:21px;font-weight:700;
  color:var(--crit);display:block;line-height:1.15;letter-spacing:.4px;margin-bottom:3px}

/* ---------- sections ---------- */
.section{padding:82px 0}
.section.alt{background:var(--panel2)}
.sectionHead{text-align:center;max-width:680px;margin:0 auto 44px}
.sectionHead h2{font-size:37px;line-height:1.2;margin-bottom:16px}
.sectionSub{font-size:15.5px;color:var(--muted);line-height:1.65;margin:0}
.pill{display:inline-block;font-size:11px;font-weight:700;color:var(--accent);
  background:var(--accentGlow);border:1px solid var(--accentBorder);
  border-radius:20px;padding:4px 13px;margin-bottom:14px;letter-spacing:.2px}

/* ---------- scenes (pain) ---------- */
.sceneGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.scene{background:rgba(255,100,80,.045);border:1px solid rgba(255,100,80,.18);
  border-left:3px solid var(--crit);border-radius:0 var(--radius) var(--radius) 0;
  padding:22px 20px}
.sceneWhen{font-size:11px;font-weight:700;color:var(--crit);
  letter-spacing:.4px;margin-bottom:9px}
.scene h3{font-size:20px;line-height:1.25;margin-bottom:9px}
.scene p{font-size:13.6px;color:var(--muted);line-height:1.6;margin:0}

/* ---------- before/after ---------- */
.baGrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px}
.baCard{border-radius:var(--radius);padding:22px 20px;border:1px solid}
.baCard.before{background:rgba(255,100,80,.05);border-color:rgba(255,100,80,.2)}
.baCard.after{background:var(--accentSoft);border-color:var(--accentBorder)}
.baLabel{font-size:12px;font-weight:700;margin-bottom:14px}
.baCard.before .baLabel{color:var(--crit)}
.baCard.after .baLabel{color:var(--accent)}
.baItem{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;
  color:var(--muted);padding:6px 0;border-bottom:1px solid rgba(255,255,255,.05);
  line-height:1.4}
.baItem:last-child{border-bottom:none}
.bi{flex-shrink:0;margin-top:1px}

/* ---------- features ---------- */
.fGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.fCard{background:var(--panel);border:1px solid var(--border);
  border-radius:var(--radius);padding:24px 22px}
.fCard h3{font-size:20px;margin-bottom:9px}
.fCard p{font-size:13.8px;color:var(--muted);line-height:1.6;margin:0}
.fIcon{width:42px;height:42px;border-radius:9px;background:var(--accentGlow);
  border:1px solid var(--accentBorder);color:var(--accent);display:flex;
  align-items:center;justify-content:center;margin-bottom:15px}
.fCard.bonus{background:var(--accentSoft);border-color:var(--accentBorder)}
.bonusBadge{display:inline-flex;align-items:center;gap:6px;font-size:11px;
  font-weight:700;color:var(--accent);background:var(--accentGlow);
  border:1px solid var(--accentBorder);border-radius:20px;padding:3px 11px;
  margin-bottom:11px}

/* ---------- roadmap band ---------- */
.roadBand{background:var(--accentSoft);border-top:1px solid var(--accentBorder);
  border-bottom:1px solid var(--accentBorder);padding:70px 0}
.roadGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.roadCard{background:var(--panel);border:1px solid var(--border);
  border-radius:var(--radius);padding:18px 18px}
.roadCard h4{font-family:'Barlow Condensed',sans-serif;font-size:18px;
  font-weight:700;margin:0 0 7px;letter-spacing:.4px;line-height:1.25}
.roadCard p{font-size:12.8px;color:var(--muted);line-height:1.5;margin:0}
.roadStage{font-size:10px;font-weight:700;color:var(--accent);
  letter-spacing:.4px;margin-bottom:8px}

/* ---------- ease / who / steps ---------- */
.whoGrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.whoCard{display:flex;gap:16px;background:var(--panel);border:1px solid var(--border);
  border-radius:var(--radius);padding:22px 20px}
.whoMark{color:var(--accent);opacity:.6;flex-shrink:0;font-size:18px;line-height:1.4}
.whoCard h3{font-size:19px;margin-bottom:7px}
.whoCard p{font-size:13.6px;color:var(--muted);line-height:1.6;margin:0}
.stepGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.stepCard{background:var(--panel);border:1px solid var(--border);
  border-radius:var(--radius);padding:28px 24px}
.stepNum{font-family:'Barlow Condensed',sans-serif;font-size:30px;font-weight:700;
  letter-spacing:.5px;color:var(--accentInk);background:var(--accent);
  width:58px;height:58px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;margin-bottom:18px;line-height:1;
  box-shadow:0 0 0 6px var(--accentGlow)}
.stepCard h3{font-size:19px;margin-bottom:8px}
.stepCard p{font-size:13.6px;color:var(--muted);line-height:1.6;margin:0}

/* ---------- consequence ---------- */
.conGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:28px}
.conCard{background:rgba(255,100,80,.05);border:1px solid rgba(255,100,80,.18);
  border-radius:var(--radius);padding:18px 16px}
.conTitle{font-size:13.5px;font-weight:700;color:var(--crit);margin-bottom:5px}
.conCard p{font-size:12.8px;color:var(--muted);line-height:1.5;margin:0}

/* ---------- pricing ----------
   Two cards, not three: one plan and Enterprise. The plan card is weighted
   heavier because it carries two price units side by side. Both cards stretch
   and .priceList absorbs the slack, so the buttons align at the base. */
.priceGrid{display:grid;grid-template-columns:1.55fr 1fr;gap:16px;align-items:stretch}
.priceCard{background:var(--panel);border:1px solid var(--border);
  border-radius:var(--radius);padding:26px 22px;display:flex;flex-direction:column}
.priceCard.hot{border-color:var(--accentBorder);box-shadow:0 0 0 1px var(--accentGlow)}
/* Plan label. At 12px this read as a caption rather than a heading and lost
   the top of the card. 16px sits between .priceWhat (12px) and .priceAmt
   (44px) so the card has three distinct type sizes instead of two. */
.priceName{font-size:16px;font-weight:700;color:var(--muted2);
  letter-spacing:-.1px;margin-bottom:14px}
.priceCard.hot .priceName{color:var(--accent)}

/* Two price units on one row. Baseline-aligned rather than bottom-aligned so
   the 32px secondary amount sits on the same line as the 44px primary. */
.priceSplit{display:flex;align-items:baseline;gap:30px;flex-wrap:wrap;
  row-gap:12px;margin-bottom:12px}
.priceUnit{display:flex;flex-direction:column;min-width:0}
.priceWhat{font-size:12px;font-weight:600;color:var(--muted2);
  letter-spacing:.4px;margin-top:5px;white-space:nowrap}

.priceAmt{font-family:'Barlow Condensed',sans-serif;font-size:44px;
  font-weight:700;line-height:1.1;letter-spacing:.5px}
.priceAmt small{font-family:'DM Sans',sans-serif;font-size:14px;font-weight:500;
  color:var(--muted2)}
.priceUnit.sub .priceAmt{font-size:32px;color:var(--muted)}

.priceNote{font-size:12.8px;color:var(--muted2);line-height:1.55;
  padding-top:12px;border-top:1px solid var(--borderSoft)}

.priceList{list-style:none;padding:0;margin:16px 0 22px;flex:1}
.priceList li{display:flex;gap:9px;font-size:13.4px;color:var(--muted);
  padding:5px 0;line-height:1.45}
.priceList .bi{color:var(--accent);flex-shrink:0}

/* ---------- final cta ---------- */
.ctaSection{padding:88px 0;background:var(--panel2);
  border-top:1px solid var(--accentBorder);position:relative;overflow:hidden}
.ctaSection::before{content:'';position:absolute;top:-100px;left:50%;
  transform:translateX(-50%);width:700px;height:500px;
  background:radial-gradient(circle,var(--accentGlow) 0%,transparent 65%);
  pointer-events:none}
.ctaInner{max-width:700px;margin:0 auto;text-align:center;position:relative;z-index:1}
.ctaInner h2{font-size:37px;line-height:1.2;margin-bottom:16px}
.ctaInner .lead{font-size:15.5px;color:var(--muted);margin:0 0 34px}
.valueList{list-style:none;padding:0;margin:0 auto 34px;display:flex;
  flex-direction:column;gap:10px;text-align:left;max-width:480px}
.valueList li{display:flex;align-items:flex-start;gap:12px;font-size:14.5px;
  color:var(--muted);line-height:1.5}
.vcheck{width:20px;height:20px;border-radius:50%;background:var(--accentGlow);
  border:1px solid var(--accentBorder);color:var(--accent);display:flex;
  align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;font-size:11px}
.guarantee{display:flex;align-items:flex-start;gap:14px;background:var(--panel);
  border:1px solid var(--borderSoft);border-radius:var(--radius);padding:18px 20px;
  margin-top:28px;text-align:left}
.gIcon{flex-shrink:0;color:var(--accent)}
.gText{font-size:13.5px;color:var(--muted);line-height:1.6}
.gText strong{color:var(--text)}

/* ---------- footer ---------- */
.footer{padding:42px 0 34px;border-top:1px solid var(--borderSoft);background:var(--bg)}
.footRow{display:flex;justify-content:space-between;align-items:flex-start;
  gap:30px;flex-wrap:wrap}
.footCross{font-size:13px;color:var(--muted2);line-height:1.7}
.footCross a{color:var(--accent);text-decoration:none;
  border-bottom:1px solid var(--accentBorder)}
.footLegal{font-size:12px;color:var(--muted2);margin-top:22px;padding-top:18px;
  border-top:1px solid var(--borderSoft)}

/* ---------- responsive ---------- */
@media(max-width:1080px){
  .fGrid,.roadGrid{grid-template-columns:1fr 1fr}
}
@media(max-width:980px){
  .heroGrid{grid-template-columns:1fr;gap:38px}
  .fGrid,.stepGrid,.priceGrid,.sceneGrid,.roadGrid{grid-template-columns:1fr}
  .whoGrid{grid-template-columns:1fr}
  .nav a:not(.btn):not(.navLogin){display:none}
  .hero{padding:56px 0 48px}
  .heroH1{font-size:41px}
}
@media(max-width:768px){
  .container{padding:0 18px}
  .section{padding:52px 0}
  .heroH1{font-size:33px;letter-spacing:.3px}
  .heroLead{font-size:15.5px}
  .sectionHead{margin-bottom:32px}
  .sectionHead h2,.ctaInner h2{font-size:27px}
  .sectionSub{font-size:14.5px}
  .heroCtas{flex-direction:column;align-items:stretch}
  .heroCtas .btn{width:100%}
  .painItem{border-right:none;border-bottom:1px solid rgba(255,100,80,.15);
    padding:11px 4px;width:100%}
  .painItem:last-child{border-bottom:none}
  .baGrid,.conGrid{grid-template-columns:1fr}
  .licon{width:30px;height:30px}
  .licon svg{width:15px;height:15px}
  .lrow{gap:10px;padding:10px 13px;align-items:flex-start}
  .lname{font-size:13px;line-height:1.35}
  .ldays{font-size:12px;padding-top:1px}
  .hpTop,.hpFoot{padding:11px 13px}
  .hpFoot{flex-direction:column;align-items:flex-start;gap:4px}
  .soonTag{margin-left:5px}
  .ctaSection{padding:62px 0}
  .flowUnit{padding:0}
  .stepNum{width:50px;height:50px;font-size:26px;margin-bottom:15px}
  .footRow{gap:20px}
}
@media(max-width:480px){
  .heroH1{font-size:28px;line-height:1.2}
  .sectionHead h2,.ctaInner h2{font-size:24px}
  .scene h3,.whoCard h3,.stepCard h3,.fCard h3{font-size:18px}
  .flowUnitNum{font-size:36px}
  .flowSum{font-size:20px}
  .priceAmt{font-size:38px}
  .priceUnit.sub .priceAmt{font-size:28px}
  .priceSplit{gap:22px}
  .brandTag{display:none}
  .topbar .row{height:60px}
  .small{padding:10px 20px}
  .valueList li{font-size:13.8px}
  .guarantee{flex-direction:column;gap:10px}
}
a:focus-visible,.btn:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* ============================================================================
   HOMEPAGE COMPONENTS
   Used only by the marketing root index.cfm. The two vertical cards on the
   homepage carry their own accent (restaurant amber, contractor blue) rather
   than the page accent, because the homepage serves both.
   ========================================================================= */

:root{ --rest:#f5a623; --con:#4d9de0; }

.proofStrip{display:grid;grid-template-columns:repeat(4,1fr);
  background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden}
.proofCell{padding:24px 20px;text-align:center;border-right:1px solid var(--borderSoft)}
.proofCell:last-child{border-right:none}
.proofNum{font-family:'Barlow Condensed',sans-serif;font-size:30px;font-weight:700;
  letter-spacing:.5px;color:var(--accent);line-height:1.15;margin-bottom:5px}
.proofTxt{font-size:12.8px;color:var(--muted);line-height:1.5}
.splitHero{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:34px}
.shHalf{padding:32px 32px 34px;border:1px solid var(--border);border-radius:12px;
  background:var(--panel);display:flex;flex-direction:column;
  transition:border-color .18s,transform .14s}
.shHalf.r{background:linear-gradient(180deg,rgba(245,166,35,.06),rgba(22,22,26,1) 62%);
  border-color:rgba(245,166,35,.22)}
.shHalf.c{background:linear-gradient(180deg,rgba(77,157,224,.06),rgba(22,22,26,1) 62%);
  border-color:rgba(77,157,224,.22)}
.shHalf.r:hover{border-color:rgba(245,166,35,.5);transform:translateY(-2px)}
.shHalf.c:hover{border-color:rgba(77,157,224,.5);transform:translateY(-2px)}
.shTag{display:flex;align-items:center;gap:13px;
  font-family:'Barlow Condensed',sans-serif;font-size:31px;font-weight:700;
  letter-spacing:.6px;line-height:1.15;margin:0 0 22px;padding:0 0 18px;
  border-bottom:1px solid var(--borderSoft)}
.shHalf.r .shTag{color:var(--rest);border-bottom-color:rgba(245,166,35,.28)}
.shHalf.c .shTag{color:var(--con);border-bottom-color:rgba(77,157,224,.28)}
.shTag i{width:15px;height:15px;border-radius:50%;display:block;flex-shrink:0}
.shHalf.r .shTag i{background:var(--rest)}
.shHead{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:27px;
  letter-spacing:.4px;line-height:1.24;margin:0 0 14px;color:var(--text)}
.shHalf.r .shHead em{font-style:normal;color:var(--rest)}
.shHalf.c .shHead em{font-style:normal;color:var(--con)}
.shBody{font-size:14.5px;color:var(--muted);line-height:1.65;margin:0 0 20px}
.shList{list-style:none;padding:0;margin:0 0 26px}
.shList li{font-size:13.2px;color:var(--muted2);padding:7px 0;
  border-bottom:1px solid var(--borderSoft)}
.shList li:last-child{border-bottom:none}
.shGo{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border-radius:6px;font-weight:700;font-size:15px;padding:13px 26px;
  text-decoration:none;min-height:44px;margin-top:auto;align-self:flex-start}
.shHalf.r .shGo{background:var(--rest);color:#1a0f00}
.shHalf.c .shGo{background:var(--con);color:#04121d}
.shHalf.r .shGo:hover{background:#f0b030}
.shSpanTxt{font-size:15px;color:var(--muted);line-height:1.6;max-width:640px;
  margin:0 auto;text-align:center}

@media(max-width:980px){
  .splitHero{grid-template-columns:1fr}
  .shHalf{padding:30px 24px}
  .proofStrip{grid-template-columns:1fr 1fr}
  .proofCell:nth-child(2){border-right:none}
  .proofCell:nth-child(1),.proofCell:nth-child(2){border-bottom:1px solid var(--borderSoft)}
}
@media(max-width:768px){
  .proofStrip{grid-template-columns:1fr}
  .proofCell{border-right:none;border-bottom:1px solid var(--borderSoft)}
  .proofCell:last-child{border-bottom:none}
  .shHead{font-size:23px} .shTag{font-size:26px}
}