/* ServiceM8 partner page only (servicem8.html, 30 Oct 2026). Shared look comes from site.css and industry-quote.css.
   ServiceM8's own product images and logo are shown as supplied (no recolour, no crop), on white or light grey. */

/* ---------- Hero: ServiceM8 on the laptop, our AI admin on the phone in front ---------- */
.hero--sm8 .hero__grid{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:32px}
.sm8-badge{display:inline-flex;align-items:center;gap:10px;padding:6px 14px 6px 6px;border-radius:999px;background:var(--white);border:1px solid var(--n200);box-shadow:var(--shadow-sm);font-size:14px;font-weight:700;color:var(--n800)}
.sm8-badge img{width:26px;height:26px;padding:3px;border-radius:50%;background:var(--n50);border:1px solid var(--n150)}
.sm8-trial{display:inline-flex;align-items:center;gap:6px;font-size:15px;color:var(--n600);transition:color .2s}
.sm8-trial b{color:var(--ink);text-decoration:underline;text-decoration-color:var(--orange-200);text-decoration-thickness:2px;text-underline-offset:4px;transition:text-decoration-color .2s}
.sm8-trial svg{width:15px;height:15px;color:var(--orange-700);transition:transform .2s var(--ease)}
.sm8-trial:hover b{text-decoration-color:var(--orange)}
.sm8-trial:hover svg{transform:translate(2px,-2px)}
.sm8-trial--dark{color:var(--n400)}
.sm8-trial--dark b{color:var(--white);text-decoration-color:var(--n600)}

.sm8-stage{position:relative;display:grid;align-items:center;min-height:580px}
.sm8-stage::before{content:"";position:absolute;width:520px;height:520px;left:30%;top:50%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(255,105,0,.16),rgba(255,105,0,0));pointer-events:none}
.sm8-stage__mac{position:relative;margin:0 calc(-1 * clamp(0px, (100vw - 1200px) / 2 + 8px, 120px)) 0 112px}
.sm8-stage__mac>img{width:100%;height:auto;filter:drop-shadow(0 40px 50px rgba(10,10,10,.16))}
.sm8-stage__phone{position:absolute;left:0;top:50%;transform:translateY(-50%);z-index:2}
.sm8-stage .phone{width:258px;height:520px;border-width:8px;border-radius:44px}
.sm8-stage .phone__top{height:40px;padding:2px 22px 0;font-size:13px}
.sm8-stage .phone__island{width:80px;height:24px}
.sm8-stage .chat__head{padding:6px 14px 10px;gap:9px}
.sm8-stage .chat__av{width:32px;height:32px}
.sm8-stage .chat__who b{font-size:14px}
.sm8-stage .chat__body{padding:12px 10px}
.sm8-stage .msg{font-size:12.6px;padding:8px 10px 9px;border-radius:16px;max-width:88%}
.sm8-stage .msg__chip{font-size:11px;margin-top:6px;padding:4px 8px}
.sm8-stage .msg__chip img{width:12px;height:12px;flex-shrink:0}
.sm8-stage .chat__body.is-live .msg{left:10px}
.sm8-stage .chat__body.is-live .msg--me{left:auto;right:10px}
.sm8-stage .chat__bar{margin:0 10px 12px;padding:8px 8px 8px 14px;font-size:13px}
.sm8-stage .chat__bar i{width:26px;height:26px}
.sm8-tag{position:absolute;display:inline-flex;align-items:center;gap:7px;padding:6px 12px 6px 9px;border-radius:999px;background:var(--white);border:1px solid var(--n200);box-shadow:var(--shadow);font-size:12.5px;font-weight:700;color:var(--n800);white-space:nowrap}
.sm8-tag img{width:16px;height:auto}
.sm8-tag--sm8{right:18%;top:-6px}
.sm8-tag--ai{left:50%;bottom:-14px;transform:translateX(-50%);background:var(--ink);color:var(--white);border-color:var(--ink)}
.sm8-tag--ai img{width:11px}

/* ---------- Why ServiceM8: tabbed product tour ---------- */
.tour{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:32px;align-items:center}
.tour__tabs{display:grid;gap:8px}
.tour__tab{position:relative;display:flex;align-items:flex-start;gap:14px;width:100%;padding:16px 18px;border-radius:18px;text-align:left;border:1px solid transparent;overflow:hidden;transition:background-color .25s,border-color .25s,box-shadow .25s}
.tour__tab:hover{background:rgba(255,255,255,.7)}
.tour__tab[aria-selected="true"]{background:var(--white);border-color:var(--n200);box-shadow:var(--shadow-sm)}
.tour__ic{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--white);border:1px solid var(--n200);color:var(--n600);flex:none;transition:background-color .25s,color .25s,border-color .25s}
.tour__ic svg{width:20px;height:20px}
.tour__tab[aria-selected="true"] .tour__ic{background:var(--orange-50);border-color:var(--orange-200);color:var(--orange-700)}
.tour__txt{display:grid;gap:3px}
.tour__txt b{font-family:var(--head);font-size:18px;font-weight:700;letter-spacing:-.015em;color:var(--n700);transition:color .25s}
.tour__tab[aria-selected="true"] .tour__txt b{color:var(--ink)}
.tour__txt small{font-size:14.5px;line-height:1.45;color:var(--n500);display:none}
.tour__tab[aria-selected="true"] .tour__txt small{display:block}
.tour__bar{position:absolute;left:18px;right:18px;bottom:0;height:2px;border-radius:2px;background:var(--orange);transform:scaleX(0);transform-origin:left;opacity:0}
.tour.is-auto .tour__tab[aria-selected="true"] .tour__bar{opacity:1;animation:tour-bar var(--tour-ms,5600ms) linear forwards}
.tour.is-held .tour__bar{animation-play-state:paused}
@keyframes tour-bar{to{transform:scaleX(1)}}
.tour__stage{position:relative;display:grid;aspect-ratio:3/2;border-radius:28px;background:var(--white);border:1px solid var(--n200);box-shadow:var(--shadow);overflow:hidden}
.tour__pane{grid-area:1/1;display:grid;place-items:center;margin:0;padding:22px;animation:tour-in .55s var(--ease-out)}
.tour__pane[hidden]{display:none}
.tour__pane img{width:100%;height:100%;object-fit:contain}
.tour__pane--tall img{width:auto;max-height:100%}
@keyframes tour-in{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}

.sm8-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:48px}
.sm8-stats li{display:grid;gap:4px;padding:22px 22px 20px;border-radius:20px;background:var(--white);border:1px solid var(--n200);border-left:3px solid var(--orange)}
.sm8-stats b{font-family:var(--head);font-size:clamp(32px,3vw,42px);font-weight:700;line-height:1;letter-spacing:-.035em}
.sm8-stats span{font-size:15px;line-height:1.42;color:var(--n600)}
.sm8-sync{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:20px;font-size:14px;font-weight:600;color:var(--n600)}
.sm8-sync ul{display:flex;flex-wrap:wrap;gap:8px}
.sm8-sync li{display:inline-flex;align-items:center;gap:7px;padding:5px 12px 5px 7px;border-radius:999px;background:var(--white);border:1px solid var(--n200);font-size:13.5px;color:var(--n800)}
.sm8-sync img{width:20px;height:20px;object-fit:contain}
.sm8-src{margin-left:auto;font-size:12.5px;font-weight:500;color:var(--n400)}

/* ---------- What we do ---------- */
.svc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.svc__card{display:grid;align-content:start;gap:12px;padding:28px 26px 26px;border-radius:24px;background:var(--n50);border:1px solid var(--n150)}
.svc__card h3{font-family:var(--head);font-size:23px;letter-spacing:-.02em;margin-top:6px}
.svc__card p{font-size:16px;line-height:1.55;color:var(--n600)}
.svc__ic{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--white);border:1px solid var(--n200);color:var(--orange-700)}
.svc__ic svg{width:24px;height:24px}
.svc__card--hi{background:var(--ink);border-color:var(--ink);color:var(--white)}
.svc__card--hi p{color:var(--n400)}
.svc__card--hi .svc__ic{background:var(--white);border-color:var(--white)}
.svc__card--hi .svc__ic img{width:17px;height:auto}

.sm8-flow{margin-top:96px}
.sm8-flow__h{font-family:var(--head);font-size:clamp(26px,2.6vw,36px);font-weight:500;line-height:1.12;letter-spacing:-.025em;text-wrap:balance}
.sm8-more{display:inline-flex;align-items:center;gap:7px;margin-top:6px;font-size:15px;font-weight:700;color:var(--orange-700)}
.sm8-more svg{width:16px;height:16px;transition:transform .2s var(--ease)}
.sm8-more:hover svg{transform:translateX(3px)}

/* Lead-to-paid steps (same look as the plumbers work order card) */
.wo__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:center}
.wo__copy{display:grid;gap:18px;justify-items:start}
.wo__vis{position:relative;display:grid;gap:14px}
.wo__vis::before{content:"";position:absolute;inset:8% -4% -6% 6%;border-radius:28px;background:radial-gradient(closest-side,rgba(255,105,0,.14),rgba(255,105,0,0));pointer-events:none}
.wo__mail{position:relative;padding:18px 20px;border-radius:22px;background:var(--white);border:1px solid var(--n200);box-shadow:var(--shadow)}
.wo__from{display:flex;align-items:center;gap:10px;margin:0 0 12px}
.wo__from b{display:block;font-size:14.5px}
.wo__from small{display:block;font-size:12.5px;color:var(--n500)}
.wo__av{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--job);color:var(--job-ink);font-size:12px;font-weight:800;flex:none}
.wo__time{margin-left:auto;font-size:12px;color:var(--n400)}
.wo__subj{margin:0;font-family:var(--head);font-size:18px;font-weight:700;letter-spacing:-.015em}
.wo__steps{position:relative;display:grid;gap:8px;margin:0;padding:0 0 0 22px;list-style:none}
.wo__steps::before{content:"";position:absolute;left:8px;top:14px;bottom:14px;border-left:2px dashed var(--orange-200)}
.wo__s{position:relative;display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:16px;background:var(--white);border:1px solid var(--n200);box-shadow:var(--shadow-sm);opacity:0;animation:pop-on .5s var(--ease-out) forwards paused;animation-delay:calc(var(--k) * 450ms + .4s)}
.wo__s::before{content:"";position:absolute;left:-19px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 3px var(--orange-50)}
.wo__vis.is-play .wo__s{animation-play-state:running}
.wo__s b{display:block;font-size:14.5px}
.wo__s small{display:block;font-size:12.5px;color:var(--n500)}
.wo__ic{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:var(--n50);border:1px solid var(--n150);color:var(--n700);flex:none}
.wo__ic img,.wo__ic svg{width:18px;height:18px}
.wo__s--ok{background:var(--green-50);border-color:var(--green-200)}
.wo__s--ok b{color:var(--green)}

/* ---------- Results ---------- */
.sm8-res__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.sm8-res__grid li{display:flex}
.sm8-res__grid .rcard{width:auto;flex:1;container-type:inline-size}
.sm8-res__grid .rcard__n{font-size:min(46px,17cqi);white-space:nowrap}

/* ---------- Get started ---------- */
.sm8-start .step{align-content:start}
.sm8-start .step__n{box-shadow:0 0 0 10px var(--white)}
.sm8-step-link{display:inline-flex;align-items:center;gap:6px;margin-top:2px;font-size:15px;font-weight:700;color:var(--orange-700)}
.sm8-step-link svg{width:15px;height:15px;transition:transform .2s var(--ease)}
.sm8-step-link:hover svg{transform:translate(2px,-2px)}
.sm8-contact{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px;margin-top:64px;padding:24px 28px;border-radius:24px;background:var(--white);border:1px solid var(--n200);box-shadow:var(--shadow-sm)}
.sm8-contact__brand{display:flex;align-items:center;gap:14px}
.sm8-contact__brand>img:first-child{height:24px;width:auto}
.sm8-contact__x{width:1px;height:26px;background:var(--n200)}
.sm8-contact__sm8{height:22px;width:auto}
.sm8-contact__p{padding:3px 9px;border-radius:999px;background:var(--n50);border:1px solid var(--n200);font-size:12px;font-weight:700;color:var(--n600)}
.sm8-contact__list{display:flex;flex-wrap:wrap;gap:10px 26px}
.sm8-contact__list li{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;color:var(--n700)}
.sm8-contact__list svg{width:17px;height:17px;color:var(--orange-700);flex:none}
.sm8-contact__list a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* ---------- FAQ ---------- */
.faq{max-width:820px;margin:0 auto;border-top:1px solid var(--n200)}
.faq__item{border-bottom:1px solid var(--n200)}
.faq__item summary{position:relative;display:block;padding:22px 48px 22px 0;font-family:var(--head);font-size:19px;font-weight:700;letter-spacing:-.015em;cursor:pointer;list-style:none}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:"";position:absolute;right:6px;top:50%;width:11px;height:11px;margin-top:-8px;border:solid var(--n500);border-width:0 2px 2px 0;transform:rotate(45deg);transition:transform .25s var(--ease),margin-top .25s var(--ease)}
.faq__item[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.faq__item summary:hover{color:var(--orange-700)}
.faq__item p{padding:0 48px 24px 0;font-size:16.5px;line-height:1.6;color:var(--n600)}
.faq__item p a{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--orange-200);text-underline-offset:3px}

/* ---------- Final call ---------- */
.final__ctas{display:flex;flex-direction:column;align-items:center;gap:18px}

/* ---------- Footer note ---------- */
.ftr__tm{margin-top:18px;font-size:12px;line-height:1.5;color:var(--n600)}
a.ftr__partner{transition:border-color .2s,color .2s}
a.ftr__partner:hover{border-color:var(--n600);color:var(--white)}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .sm8-res__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:960px){
  .hero--sm8 .hero__grid{grid-template-columns:1fr;gap:40px}
  .sm8-stage{max-width:640px;width:100%;margin:0 auto}
  .tour{grid-template-columns:1fr;gap:20px}
  .tour__stage{order:-1}
  .svc{grid-template-columns:1fr;max-width:620px;margin:0 auto}
  .wo__grid{grid-template-columns:1fr;gap:36px}
  .sm8-flow{margin-top:72px}
}
@media (max-width:760px){
  .sm8-stage{min-height:440px}
  .sm8-stage__mac{margin:0 -14px 0 34%}
  .sm8-stage__phone{left:-4px}
  .sm8-stage .phone{width:196px;height:400px;border-width:6px;border-radius:34px}
  .sm8-stage .phone__top{height:32px;font-size:11px;padding:2px 16px 0}
  .sm8-stage .phone__island{width:60px;height:18px}
  .sm8-stage .chat__head{padding:4px 10px 8px}
  .sm8-stage .chat__av{width:26px;height:26px}
  .sm8-stage .chat__av img{width:10px}
  .sm8-stage .chat__who b{font-size:12px}
  .sm8-stage .chat__who small{font-size:10.5px}
  .sm8-stage .msg{font-size:10.6px;padding:6px 8px 7px;border-radius:13px}
  .sm8-stage .msg__chip{font-size:9.5px;padding:3px 6px;margin-top:5px}
  .sm8-stage .chat__bar{margin:0 8px 10px;padding:6px 6px 6px 12px;font-size:11px}
  .sm8-stage .chat__bar i{width:22px;height:22px}
  .sm8-tag{font-size:11px;padding:5px 10px 5px 8px}
  .sm8-tag--sm8{right:4%;top:-14px}
  .tour__tabs{grid-auto-flow:column;grid-auto-columns:minmax(240px,78%);overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;padding-bottom:6px;margin:0 calc(var(--gutter) * -1);padding-left:var(--gutter);padding-right:var(--gutter);scrollbar-width:none}
  .tour__tabs::-webkit-scrollbar{display:none}
  .tour__tab{scroll-snap-align:start;background:rgba(255,255,255,.6);border-color:var(--n200)}
  .tour__txt small{display:block}
  .tour__stage{border-radius:22px}
  .tour__pane{padding:12px}
  .sm8-stats{grid-template-columns:1fr;gap:10px;margin-top:32px}
  .sm8-stats li{grid-template-columns:auto 1fr;align-items:center;gap:16px;padding:16px 18px}
  .sm8-stats b{font-size:30px;min-width:3.4ch}
  .sm8-src{margin-left:0;width:100%}
  .svc__card{padding:22px 20px}
  .sm8-res__grid{grid-template-columns:1fr}
  .sm8-contact{padding:20px;margin-top:48px}
  .sm8-contact__brand{flex-wrap:wrap}
  .sm8-contact__list{flex-direction:column}
  .faq__item summary{font-size:17px;padding:18px 40px 18px 0}
  .faq__item p{padding-right:0;font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  .wo__s{opacity:1;animation:none}
  .tour__pane{animation:none}
  .tour.is-auto .tour__tab[aria-selected="true"] .tour__bar{animation:none;opacity:0}
}
html:not(.js) .wo__s{opacity:1;animation:none}

/* ---------- Partner link offer (shown on ServiceM8's own sign-up page for our link, checked 30 Oct 2026) ---------- */
.sm8-offer{display:flex;align-items:center;gap:20px;margin-top:28px;padding:22px 24px;border-radius:24px;background:var(--white);border:1px solid var(--n200);box-shadow:var(--shadow-sm)}
.sm8-offer__ic{width:44px;height:44px;flex:none}
.sm8-offer__txt{display:grid;gap:3px;flex:1}
.sm8-offer__txt b{font-family:var(--head);font-size:20px;letter-spacing:-.015em}
.sm8-offer__txt span{font-size:15px;line-height:1.45;color:var(--n600)}
.sm8-offer__btn{font-size:15.5px;padding:14px 22px;flex:none}
@media (max-width:760px){
  .sm8-step-link{grid-column:2}
  .sm8-start .step__n{box-shadow:0 0 0 8px var(--white)}
  .sm8-offer{flex-direction:column;align-items:flex-start;gap:14px;padding:20px}
  .sm8-offer__btn{width:100%}
}