/* hmowarranties -- css/site.css
   Purpose: The one stylesheet for www.hmowarranties.com. The brand colours are the variables in the first
            block, taken from the logo pack (dark purple 412c8b, light purple 7961b4, and the brass of the
            keys for the call to action buttons) - everything below uses them, so a colour change only
            needs editing there. The same stylesheet as Conversion Warranties 1.4 apart from those colours
            and the HMO additions at the end.
   Version: 1.0  (2026-10-30 16:00:00)
   Changelog (newest first):
     1.0  2026-10-30 16:00:00  Initial. From the Conversion Warranties site.css 1.4 with the HMO Warranties
                               purples and brass, plus data tables with a copy button (.tablewrap, .dtable,
                               .chip), the answer first box (.answer), three fields in a row on the project
                               form (.row3) and the last reviewed line (.reviewed). */

/* HMO Warranties colours - the dark and light purples of the logo, and the brass of the keys for buttons. */
:root{
  --navy:#2e1f66; --navy2:#412c8b; --navy3:#7961b4; --shade:46,31,102;
  --sand:#f6f4fb; --shell:#e8e3f5; --shell2:#cbc0ea;
  --stone:#5d5a6b; --ink:#1d1830; --muted:#55516a; --line:#e3dfee;
  --cta:#d9a441; --cta2:#c48f2e; --cta-ink:#1e1240; --accent:#5b44a8; --sea:#4f3a9e; --tick:#cfc3f2;
  --on-dark:#efebfa; --on-dark2:#d3cbef; --on-dark3:#b4a8de; --ok:#1f7a4d; --bad:#b3261e;
  --radius:14px; --shadow:0 10px 30px rgba(46,31,102,.10);
  --head:'Montserrat',Arial,Helvetica,sans-serif; --body:'Source Sans 3','Segoe UI',Arial,Helvetica,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--ink);font:400 18px/1.65 var(--body)}
img{max-width:100%;height:auto;display:block}
a{color:var(--sea);text-underline-offset:3px}
a:hover{color:var(--navy)}
h1,h2,h3,h4{font-family:var(--head);color:var(--navy);line-height:1.2;margin:0 0 .6em;letter-spacing:-.01em}
h1{font-size:clamp(2rem,4.4vw,3.25rem);font-weight:800}
h2{font-size:clamp(1.55rem,2.8vw,2.2rem);font-weight:700}
h1,h2{text-wrap:balance}
h3{font-size:1.2rem;font-weight:700}
p{margin:0 0 1em}
ul,ol{margin:0 0 1em;padding-left:1.2em}
.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 20px}
.small{font-size:.9rem;color:var(--muted)}
.skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:10px 16px;z-index:100}
.skip:focus{left:10px;top:10px}
:focus-visible{outline:3px solid var(--tick);outline-offset:2px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:700 1rem/1 var(--head);text-decoration:none;
  padding:16px 26px;border-radius:999px;border:2px solid transparent;cursor:pointer;transition:background .15s,color .15s,border-color .15s,transform .15s}
.btn:hover{transform:translateY(-1px)}
.btn-cta{background:var(--cta);color:var(--cta-ink)}
.btn-cta:hover{background:var(--cta2);color:var(--cta-ink)}
.btn-ghost{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.7)}
.btn-ghost:hover{background:#fff;color:var(--navy)}
.btn-light{background:#fff;color:var(--navy);border-color:#fff}
.btn-light:hover{background:transparent;color:#fff}
.btn-line{background:#fff;color:var(--navy);border-color:var(--navy)}
.btn-line:hover{background:var(--navy);color:#fff}
.btn-sm{padding:11px 18px;font-size:.92rem}
.btn-wide{width:100%}
.btn-wa{background:#1f7a4d;color:#fff}
.btn-wa:hover{background:#17603c;color:#fff}
.btn .ico{flex:none}
.speed .card{position:relative;padding-top:58px}
.speed-n{position:absolute;top:18px;left:24px;margin:0;width:30px;height:30px;border-radius:50%;background:var(--cta);color:var(--cta-ink);font:800 .95rem/30px var(--head);text-align:center}
.botband{background:var(--sand);border-top:1px solid var(--line);padding:48px 0}
.botin{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap}
.botcopy{max-width:46em}
.botcopy h2{margin-bottom:.3em}
.botband .small{color:var(--muted);font-size:.92rem;margin-bottom:0}
.botbtns{display:flex;gap:12px;flex-wrap:wrap}

/* WARRANTYWIZARD - the wizard picture, the launcher button and the chat panel */
.botart{width:120px;height:120px;flex:none}
.botband .botart{width:220px;height:220px}
.waband{background:#eef6f1;border-top:1px solid var(--line);padding:48px 0}
.waband .kicker{color:var(--ok)}
.waart{width:220px;flex:none;display:flex;justify-content:center}
.walogo{width:120px;height:120px;object-fit:contain}
.wafall{display:flex;align-items:center;justify-content:center;width:120px;height:120px;border-radius:50%;background:var(--ok);color:#fff}
.wafall .ico{width:60px;height:60px}
.botcopy .botbtns{margin-top:20px}
.bot-launch{position:fixed;right:20px;bottom:20px;z-index:45;display:flex;align-items:center;gap:8px;padding:5px 18px 5px 6px;border:2px solid var(--navy);border-radius:999px;background:#fff;color:var(--navy);font:700 .95rem/1 var(--head);letter-spacing:.03em;box-shadow:0 8px 24px rgba(16,40,64,.28);cursor:pointer}
.bot-launch:hover{background:var(--sand)}
.bot-launch img{width:40px;height:40px;flex:none}
.bot-open .bot-launch{display:none}
.botpanel{position:fixed;right:20px;bottom:20px;z-index:60;width:390px;max-width:calc(100vw - 40px);height:580px;max-height:calc(100vh - 40px);display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 50px rgba(16,40,64,.30);overflow:hidden}
.botpanel[hidden]{display:none}
.bot-top{display:flex;align-items:center;gap:12px;padding:10px 12px 10px 14px;background:var(--sand);border-bottom:1px solid var(--line)}
.bot-top .botart{width:54px;height:54px}
.bot-who{flex:1;min-width:0}
.bot-name{margin:0;font:800 1.05rem/1.1 var(--head);color:var(--navy);letter-spacing:.05em}
.bot-tag{margin:3px 0 0;font-size:.8rem;line-height:1.3;color:var(--muted)}
.bot-x{flex:none;width:38px;height:38px;border:0;border-radius:50%;background:transparent;color:var(--navy);font-size:1.7rem;line-height:1;cursor:pointer}
.bot-x:hover{background:#fff}
.bot-log{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px}
.bot-msg{max-width:88%;padding:10px 13px;border-radius:14px;font-size:.95rem;line-height:1.5;overflow-wrap:anywhere}
.bot-msg p{margin:0 0 .5em}
.bot-msg p:last-child{margin:0}
.bot-it{align-self:flex-start;background:var(--sand);color:var(--ink);border-bottom-left-radius:4px}
.bot-me{align-self:flex-end;background:var(--navy);color:#fff;border-bottom-right-radius:4px}
.bot-next{display:inline-block;margin-top:8px;padding:8px 13px;border-radius:8px;background:var(--cta);color:#fff;font:700 .88rem/1 var(--head);text-decoration:none}
.bot-next:hover{background:var(--cta2);color:#fff}
.bot-wait span{display:inline-block;width:7px;height:7px;margin:0 2px;border-radius:50%;background:var(--muted);animation:botdot 1s infinite ease-in-out}
.bot-wait span:nth-child(2){animation-delay:.15s}
.bot-wait span:nth-child(3){animation-delay:.3s}
@keyframes botdot{0%,80%,100%{opacity:.25}40%{opacity:1}}
.bot-form{display:flex;align-items:flex-end;gap:8px;padding:10px 12px;border-top:1px solid var(--line)}
.bot-form textarea{flex:1;resize:none;min-height:46px;max-height:120px;padding:11px 12px;border:1px solid var(--shell2);border-radius:10px;font:400 16px/1.4 var(--body);color:var(--ink)}
.bot-form textarea:focus{outline:2px solid var(--navy);outline-offset:0}
.bot-send{padding:13px 18px}
.bot-note{margin:0;padding:8px 12px 10px;font-size:.76rem;line-height:1.45;color:var(--ink);background:var(--sand);border-top:1px solid var(--line)}
.bot-note b{color:var(--navy)}
.bot-note a{color:var(--muted)}
.grecaptcha-badge{visibility:hidden}
@media (max-width:1040px){.bot-launch{bottom:68px;right:14px}.botband .botart{width:160px;height:160px}.waart{width:160px}}
@media (max-width:640px){
  .botband .botart{width:110px;height:110px}
  .waart{width:auto;justify-content:flex-start}
  .waband .waart{order:-1}
  .walogo,.wafall{width:84px;height:84px}
  .wafall .ico{width:42px;height:42px}
  .bot-launch{padding:5px}
  .bot-launch span{display:none}
  .botpanel{top:0;left:0;right:0;bottom:0;width:auto;max-width:none;height:auto;max-height:none;border-radius:0;border:0}
  .bot-top .botart{width:46px;height:46px}
}
@media (prefers-reduced-motion:reduce){.bot-wait span{animation:none}}

/* header */
.site-head{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line)}
.head-in{display:flex;align-items:center;gap:20px;min-height:104px;max-width:1300px}
.brand{flex:none}
.brand img{width:205px;height:auto}
.sitenav{display:flex;align-items:center;gap:14px;margin-left:auto}
.sitenav>ul{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0}
.sitenav a,.dropbtn{font:600 .98rem/1 var(--head);color:var(--navy);text-decoration:none;padding:12px 9px;white-space:nowrap;border-radius:8px;background:none;border:0;cursor:pointer;display:block}
.sitenav a:hover,.dropbtn:hover{background:var(--sand)}
.sitenav a[aria-current=page],.hasdrop.here>.dropbtn{color:var(--accent)}
.hasdrop{position:relative}
.dropbtn::after{content:'';display:inline-block;width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin:0 0 3px 8px}
.drop{position:absolute;left:0;top:100%;min-width:250px;list-style:none;margin:0;padding:8px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);display:none}
.drop a{padding:11px 12px;font-weight:600}
.hasdrop:hover>.drop,.hasdrop:focus-within>.drop,.hasdrop.open>.drop{display:block}
.navcta{display:flex;align-items:center;gap:12px}
.navphone{font:700 1rem/1 var(--head)!important;color:var(--navy)!important;white-space:nowrap}
.sitenav a.btn-cta{display:inline-flex;justify-content:center;background:var(--cta);color:var(--cta-ink);padding:12px 20px;border-radius:999px}
.sitenav a.btn-cta:hover{background:var(--cta2);color:var(--cta-ink)}
.navtoggle{display:none;margin-left:auto;background:none;border:0;padding:10px;cursor:pointer}
.navtoggle span{display:block;width:26px;height:3px;background:var(--navy);margin:5px 0;border-radius:2px;transition:transform .2s,opacity .2s}
.navtoggle em{position:absolute;left:-9999px}

/* hero */
.hero{position:relative;color:#fff;overflow:hidden;background:var(--navy)}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-shade{position:absolute;inset:0;background:linear-gradient(100deg,rgba(var(--shade),.94) 0%,rgba(var(--shade),.82) 42%,rgba(var(--shade),.35) 100%)}
.hero-in{position:relative;padding:70px 20px 64px;max-width:1180px}
.hero-big .hero-in{padding:110px 20px 96px}
.hero h1{color:#fff;max-width:17em}
.hero .lead{font-size:clamp(1.08rem,1.7vw,1.3rem);max-width:37em;color:var(--on-dark);text-wrap:pretty}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 22px}
.ticks{display:flex;flex-wrap:wrap;gap:10px 30px;list-style:none;padding:0;margin:0;font-weight:700;font-size:1.2rem;color:#fff}
.ticks li::before{content:'';display:inline-block;width:13px;height:7px;border-left:3px solid var(--tick);border-bottom:3px solid var(--tick);transform:rotate(-45deg);margin:0 11px 5px 0}
.crumbs{font-size:.92rem;margin-bottom:18px;color:var(--on-dark2)}
.crumbs a{color:#fff}

/* sections */
.sec{padding:72px 0}
.sec-sand{background:var(--sand)}
.sec-navy{background:var(--navy);color:var(--on-dark)}
.sec-navy h2,.sec-navy h3{color:#fff}
.kicker{font:700 .82rem/1 var(--head);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 12px}
.sec-navy .kicker{color:var(--tick)}
.intro{max-width:46em;font-size:1.12rem;color:var(--muted)}
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.split.rev{grid-template-columns:.9fr 1.1fr}
.split .pic img{border-radius:var(--radius);box-shadow:var(--shadow);width:100%;aspect-ratio:4/3;object-fit:cover}
.prose{max-width:48em}
.prose h2{margin-top:1.6em}
.prose h3{margin-top:1.4em}
.prose li{margin-bottom:.4em}

/* cards */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px;box-shadow:0 2px 6px rgba(var(--shade),.04)}
.card h3{margin-bottom:.4em}
.card p:last-child{margin-bottom:0}
.card .more{font:700 .95rem/1 var(--head);text-decoration:none;display:inline-block;margin-top:6px}
.icard{display:block;border-radius:var(--radius);overflow:hidden;background:#fff;border:1px solid var(--line);text-decoration:none;color:var(--ink);box-shadow:0 2px 6px rgba(var(--shade),.05);transition:transform .2s,box-shadow .2s}
.icard:hover{transform:translateY(-3px);box-shadow:var(--shadow);color:var(--ink)}
.icard img{width:100%;aspect-ratio:16/10;object-fit:cover}
.icard div{padding:22px 24px 24px}
.icard h3{margin:0 0 .35em}
.icard p{margin:0;color:var(--muted);font-size:1rem}
.icard .go{display:inline-block;margin-top:12px;font:700 .95rem/1 var(--head);color:var(--accent)}
.num{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--navy);color:#fff;font:800 1.05rem/1 var(--head);margin-bottom:14px}
.steps{counter-reset:s;list-style:none;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.steps li{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px 20px}
.steps li::before{counter-increment:s;content:counter(s);display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:var(--cta);color:var(--cta-ink);font:800 1rem/1 var(--head);margin-bottom:12px}
.steps h3{font-size:1.05rem}
.steps p{font-size:.98rem;color:var(--muted);margin:0}
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:10px}
.fact{border-left:4px solid var(--accent);padding:6px 0 6px 16px}
.fact b{display:block;font:800 1.5rem/1.1 var(--head);color:var(--navy)}
.fact span{color:var(--muted);font-size:.98rem}
.sec-navy .fact{border-left-color:var(--tick)}.sec-navy .fact b{color:#fff}.sec-navy .fact span{color:var(--on-dark2)}
.tick-list{list-style:none;padding:0}
.tick-list li{position:relative;padding-left:32px;margin-bottom:.6em}
.tick-list li::before{content:'';position:absolute;left:4px;top:.45em;width:12px;height:6px;border-left:3px solid var(--ok);border-bottom:3px solid var(--ok);transform:rotate(-45deg)}
.note{background:var(--sand);border-left:4px solid var(--shell2);border-radius:0 10px 10px 0;padding:16px 20px;font-size:1rem;color:var(--stone)}

/* faq */
.faq details{border:1px solid var(--line);border-radius:12px;margin-bottom:12px;background:#fff}
.faq summary{list-style:none;cursor:pointer;padding:18px 54px 18px 22px;font:700 1.06rem/1.35 var(--head);color:var(--navy);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';position:absolute;right:22px;top:50%;transform:translateY(-50%);font:700 1.5rem/1 var(--head);color:var(--accent)}
.faq details[open] summary::after{content:'\2212'}
.faq .ans{padding:0 22px 18px;color:var(--ink)}
.faq .ans p:last-child{margin:0}

/* call to action band */
.ctaband{background:linear-gradient(120deg,var(--navy) 0%,var(--navy3) 100%);color:var(--on-dark);padding:54px 0}
.ctain{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap}
.ctaband h2{color:#fff;margin-bottom:.3em}
.ctaband p{margin:0;max-width:40em}
.ctabtns{display:flex;gap:12px;flex-wrap:wrap}

/* project form */
.formband{background:var(--sand);padding:76px 0;border-top:1px solid var(--shell)}
.formgrid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
.checks{list-style:none;padding:0;margin:0 0 1.2em}
.checks li{position:relative;padding-left:30px;margin-bottom:.55em;font-weight:600}
.checks li::before{content:'';position:absolute;left:3px;top:.45em;width:12px;height:6px;border-left:3px solid var(--accent);border-bottom:3px solid var(--accent);transform:rotate(-45deg)}
.pform{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:30px;border:1px solid var(--line)}
.pform label{display:block;font:600 .95rem/1.3 var(--body);color:var(--navy);margin-bottom:14px}
.pform input[type=text],.pform input[type=email],.pform input[type=tel],.pform input[type=number],.pform input[type=date],.pform select,.pform textarea{
  display:block;width:100%;margin-top:6px;font:400 1.02rem/1.4 var(--body);color:var(--ink);padding:12px 14px;border:1.5px solid #cfd6de;border-radius:10px;background:#fff}
.pform input:focus,.pform select:focus,.pform textarea:focus{border-color:var(--navy3);outline:none;box-shadow:0 0 0 3px rgba(var(--shade),.15)}
.pform .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pform .consent{display:flex;gap:10px;align-items:flex-start;font-weight:400;color:var(--muted);font-size:.93rem}
.pform .consent input{margin-top:4px;width:18px;height:18px;flex:none}
.pform .opt{font-weight:400;color:var(--muted)}
.pform .retroq{border-top:1px solid var(--line);margin:4px 0 14px;padding-top:14px}
.pform .retroq-h{font:600 .95rem/1.3 var(--body);color:var(--navy);margin:0 0 12px}
.pform .have{border:0;margin:0;padding:0;min-width:0}
.pform .have legend{font:600 .95rem/1.3 var(--body);color:var(--navy);margin:0 0 8px;padding:0}
.pform .have-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.pform .have .tick{display:flex;gap:10px;align-items:flex-start;font-weight:400;color:var(--ink);font-size:.93rem;margin-bottom:8px}
.pform .have .tick input{margin-top:2px;width:18px;height:18px;flex:none}
/* asked only once the project has started or finished - browsers without :has() always show it */
.pform:has(select[name=stage] option[value='']:checked) .retroq-auto,.pform:has(select[name=stage] option[value='1']:checked) .retroq-auto{display:none}
.pform .bad{border-color:var(--bad)!important;background:#fff7f6}
.pform .errbox{background:#fff4f2;border:1px solid #f1c3bd;color:var(--bad);border-radius:10px;padding:10px 14px;margin-bottom:14px;font-size:.95rem;display:none}
.formnote{font-size:.85rem;color:var(--muted);margin:12px 0 0;text-align:center}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* footer */
.site-foot{background:var(--navy);color:var(--on-dark2);padding:60px 0 90px;font-size:.98rem}
.footgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:34px}
.site-foot a{color:#fff;text-decoration:none}
.site-foot a:hover{text-decoration:underline}
.site-foot ul{list-style:none;padding:0;margin:0}
.site-foot li{margin-bottom:8px}
.fname{font:800 1.35rem/1.1 var(--head);color:#fff;letter-spacing:.02em;margin-bottom:10px}
.fhead{font:700 .82rem/1 var(--head);letter-spacing:.14em;text-transform:uppercase;color:var(--shell2);margin-bottom:16px}
.fphone{font:700 1.2rem/1.6 var(--head)}
.reg{border-top:1px solid rgba(255,255,255,.14);margin-top:40px;padding-top:26px;font-size:.88rem;color:var(--on-dark3)}
.reg a{text-decoration:underline}
.copy{margin:0}
.mobilebar{display:none}

/* thank you and small pages */
.okmark{width:64px;height:64px;border-radius:50%;background:var(--ok);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.okmark::before{content:'';width:22px;height:11px;border-left:5px solid #fff;border-bottom:5px solid #fff;transform:rotate(-45deg);margin-top:-6px}
.refbox{display:inline-block;background:#fff;border:1px dashed var(--shell2);border-radius:10px;padding:10px 16px;font:700 1.05rem/1 var(--head);color:var(--navy)}

/* responsive */
@media (max-width:1199px){
  .sitenav .navphone{display:none}
}
@media (max-width:1180px){
  .brand img{width:185px}
  .steps{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:1040px){
  .navtoggle{display:block}
  .head-in{min-height:88px}
  .brand img{width:185px}
  .sitenav{position:fixed;left:0;right:0;top:88px;bottom:0;background:#fff;flex-direction:column;align-items:stretch;gap:0;padding:12px 20px 110px;overflow:auto;display:none;border-top:1px solid var(--line)}
  .sitenav.open{display:flex}
  .sitenav>ul{flex-direction:column;align-items:stretch}
  .sitenav a,.dropbtn{padding:14px 6px;font-size:1.08rem;width:100%;text-align:left}
  .drop{position:static;display:block;box-shadow:none;border:0;padding:0 0 6px 14px;min-width:0}
  .dropbtn{pointer-events:none;color:var(--stone);font-size:.8rem!important;letter-spacing:.14em;text-transform:uppercase;padding-top:18px!important}
  .dropbtn::after{display:none}
  .navcta{flex-direction:column;align-items:stretch;margin-top:14px}
  .navphone{display:block;text-align:center;padding:14px!important}
  .navtoggle[aria-expanded=true] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  .navtoggle[aria-expanded=true] span:nth-child(2){opacity:0}
  .navtoggle[aria-expanded=true] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
  .split,.split.rev,.formgrid{grid-template-columns:1fr;gap:34px}
  .split.rev .pic{order:-1}
  .grid3{grid-template-columns:1fr 1fr}
  .facts{grid-template-columns:1fr 1fr}
  .footgrid{grid-template-columns:1fr 1fr}
  .mobilebar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;background:#fff;border-top:1px solid var(--line);box-shadow:0 -6px 20px rgba(var(--shade),.08)}
  .mobilebar a{flex:1;text-align:center;padding:15px 10px;font:700 1rem/1 var(--head);text-decoration:none;color:var(--navy)}
  .mobilebar .mb-cta{background:var(--cta);color:var(--cta-ink)}
  .mobilebar .mb-wa{color:#1f7a4d}
}
@media (max-width:640px){
  body{font-size:17px}
  .head-in{min-height:78px}
  .sitenav{top:78px}
  .brand img{width:150px}
  .sec{padding:52px 0}
  .hero-in,.hero-big .hero-in{padding:48px 20px 44px}
  .hero-shade{background:linear-gradient(180deg,rgba(var(--shade),.9) 0%,rgba(var(--shade),.84) 100%)}
  .hero-cta .btn{width:100%}
  .ticks{font-size:1.05rem;gap:8px 20px}
  .grid3,.grid2,.steps{grid-template-columns:1fr}
  .pform{padding:22px}
  .pform .row2{grid-template-columns:1fr;gap:0}
  .pform .have-grid{grid-template-columns:1fr}
  .footgrid{grid-template-columns:1fr}
  .ctabtns .btn,.botbtns .btn{width:100%}
  .botbtns{width:100%}
  .mobilebar a{padding:15px 6px;font-size:.95rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn,.icard{transition:none}
  .btn:hover,.icard:hover{transform:none}
}

/* ---- HMO Warranties additions ---- */
/* data tables - scroll sideways on a phone rather than squash, with a copy button added by site.js */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:20px 0 6px;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.dtable{width:100%;border-collapse:collapse;font-size:.98rem;line-height:1.45;min-width:600px}
.dtable caption{caption-side:bottom;text-align:left;padding:10px 14px;font-size:.88rem;color:var(--muted);background:#fff}
.dtable th,.dtable td{padding:12px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);color:var(--ink)}
.dtable thead th{background:var(--navy);color:#fff !important;font:700 .9rem/1.3 var(--head);letter-spacing:.01em}
.dtable tbody th{font-weight:700;color:var(--navy);background:#fff}
.dtable tbody tr:nth-child(even) td,.dtable tbody tr:nth-child(even) th{background:var(--sand)}
.dtable tr:last-child td,.dtable tr:last-child th{border-bottom:0}
.chip{display:inline-block;padding:3px 10px;border-radius:999px;font:700 .8rem/1.4 var(--head);white-space:nowrap}
.chip-y{background:#e3f3ea;color:#17603c}.chip-m{background:#fbf0d6;color:#6d4f00}.chip-n{background:#f5e1e1;color:#8a2020}
.tablecopy{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin:0 0 18px}
.sec-navy .tablecopy span{color:var(--tick)}
.tablecopy button{font:700 .85rem/1 var(--head);padding:9px 14px;border-radius:999px;border:2px solid var(--navy2);background:#fff;color:var(--navy2);cursor:pointer}
.tablecopy button:hover{background:var(--navy2);color:#fff}
.tablecopy span{font-size:.85rem;color:var(--ok)}
.tablecopy .tablehint{margin-right:auto;font-size:.85rem;color:var(--muted)}
.sec-navy .tablecopy .tablehint{color:var(--on-dark2)}
/* answer first - the two sentence answer at the top of a guide */
.answer{background:#fff;border:1px solid var(--line);border-left:6px solid var(--navy3);border-radius:0 var(--radius) var(--radius) 0;padding:22px 26px;font-size:1.12rem;box-shadow:0 2px 6px rgba(var(--shade),.05);max-width:52em}
.answer p:last-child{margin-bottom:0}
.answer .kicker{margin-bottom:8px}
.reviewed{margin-top:26px}
.pform .row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
@media (max-width:760px){
  .pform .row3{grid-template-columns:1fr;gap:0}
  .answer{padding:18px 18px;font-size:1.05rem}
}