/* Invola marketing website and sign-up pages (src/Signup/). One file, no
   framework. The app's Forest colours and the Outfit font. Phone first. */
@font-face{font-family:Outfit;font-style:normal;font-weight:400;font-display:swap;src:url(fonts/outfit-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Outfit;font-style:normal;font-weight:600;font-display:swap;src:url(fonts/outfit-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:Outfit;font-style:normal;font-weight:700;font-display:swap;src:url(fonts/outfit-latin-700-normal.woff2) format("woff2")}

:root{
  /* Brand green #134F2D and cream #F7F3E6 (public/brand/). */
  --forest:#134F2D;--pine:#134F2D;--mint:#a5dcb5;--cream:#F7F3E6;
  --bg:#F7F3E6;--band:#EEE8D5;--paper:#FFFDF7;--ink:#17261d;--mute:#4b5f52;--line:#DCD3BB;
  --link:#134F2D;--btn:#134F2D;--btn-ink:#F7F3E6;--bad:#a8322a;--ok:#17693f;--focus:#1d7a45;
  --shadow:0 18px 50px -20px rgba(19,79,45,.45);
  --r:14px;--gut:16px;--maxw:72rem;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.0625rem/1.6 Outfit,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
img{max-width:100%;height:auto;display:block}
a{color:var(--link);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
h1,h2,h3{line-height:1.15;margin:0 0 .5em;font-weight:600;letter-spacing:-.015em;text-wrap:balance}
h1{font-size:clamp(2rem,1.45rem + 2.6vw,3rem)}
h2{font-size:clamp(1.5rem,1.25rem + 1.2vw,2.05rem)}
h3{font-size:1.15rem;letter-spacing:-.005em}
p{margin:0 0 1em}
ul,ol{margin:0;padding:0}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:max(var(--gut),env(safe-area-inset-left));padding-right:max(var(--gut),env(safe-area-inset-right))}
.narrow{max-width:46rem}
.small{font-size:.9rem;color:var(--mute)}
.center{text-align:center}
.lead{font-size:clamp(1.1rem,1rem + .45vw,1.3rem);color:var(--mute);max-width:38rem}
.skip{position:absolute;left:-999px;top:8px;z-index:50;background:var(--paper);color:var(--ink);padding:10px 14px;border-radius:10px}
.skip:focus{left:8px}
.ic{width:24px;height:24px;flex:none}
.testbar{background:#a8322a;color:#fff;text-align:center;font-weight:700;font-size:13px;letter-spacing:.06em;padding:3px 8px}

/* Announcement bar */
.announce{background:var(--cream);color:#134F2D;font-weight:600;font-size:.95rem;padding:8px 0;text-align:center}
.announce a{color:#134F2D}

/* Header */
.top{position:sticky;top:0;z-index:30;background:var(--forest);color:#fff;padding-top:env(safe-area-inset-top)}
.top-in{display:flex;align-items:center;gap:18px;min-height:64px}
.brand{display:inline-flex;align-items:center;gap:10px;color:inherit;text-decoration:none;font-weight:700;font-size:1.3rem;letter-spacing:-.01em}
.brand .logo{height:36px;width:auto}
.tagline{display:none;color:var(--mint);font-size:.9rem;font-weight:500;white-space:nowrap}
@media (min-width:1180px){.tagline{display:inline}}
.foot-tag{font-weight:600;color:var(--ink)!important;margin-top:10px}
.nav{display:none}
.nav a,.signin{color:rgba(255,255,255,.88);text-decoration:none;font-weight:500;padding:8px 10px;border-radius:8px}
.nav a:hover,.signin:hover{color:#fff;background:rgba(255,255,255,.08)}
.nav a[aria-current]{color:#fff;box-shadow:inset 0 -2px 0 var(--mint);border-radius:0}
.top-cta{display:none;margin-left:auto;align-items:center;gap:6px}
.top :focus-visible{outline-color:var(--mint)}
.menu{margin-left:auto}
.menu summary{list-style:none;display:flex;align-items:center;gap:8px;min-height:44px;padding:0 10px;border-radius:10px;cursor:pointer;color:#fff;font-weight:600}
.menu summary::-webkit-details-marker{display:none}
.menu[open] summary{background:rgba(255,255,255,.1)}
.menu-sheet{position:absolute;left:0;right:0;top:100%;background:var(--forest);padding:8px var(--gut) 20px;border-top:1px solid rgba(255,255,255,.12);box-shadow:0 20px 30px -10px rgba(0,0,0,.4)}
.menu-sheet nav{display:grid}
.menu-sheet nav a{color:#fff;text-decoration:none;font-size:1.15rem;padding:12px 4px;border-bottom:1px solid rgba(255,255,255,.1)}
.menu-sheet .btn{margin-top:16px;width:100%}
@media (min-width:960px){
  .nav{display:flex;gap:2px}
  .top-cta{display:flex}
  .menu{display:none}
}

/* Buttons */
.btn,button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:10px 20px;border-radius:12px;border:2px solid var(--btn);background:var(--btn);color:var(--btn-ink);font-family:inherit;font-weight:600;font-size:1rem;line-height:1.2;text-decoration:none;cursor:pointer;text-align:center}
.btn:hover,button:hover{filter:brightness(1.08);text-decoration:none}
.btn-sm{min-height:40px;padding:6px 14px;font-size:.95rem}
.btn-lg{min-height:54px;padding:12px 24px;font-size:1.08rem}
.top .btn{background:var(--cream);border-color:var(--cream);color:#134F2D}
.btn-ghost{background:transparent;color:var(--link)}
button.sec{background:transparent;color:var(--link)}
.btn-light{background:var(--cream);border-color:var(--cream);color:#134F2D}

/* Hero: the one loud moment. Forest in both themes, with a line drawing of pipework. */
.hero{position:relative;background:var(--forest);color:#fff;overflow:hidden;padding:44px 0 0}
.hero::before{content:"";position:absolute;inset:0;background:url(img/pipes.svg) 0 0/320px 320px repeat;opacity:.13;pointer-events:none}
.hero-in{position:relative;display:grid;gap:28px;grid-template-columns:minmax(0,1fr)}
.kicker{color:var(--mint);font-weight:600;margin-bottom:14px}
.hero h1{font-size:clamp(2.35rem,1.5rem + 4.1vw,4.3rem);line-height:1.02;letter-spacing:-.03em;font-weight:700;margin-bottom:18px;max-width:14ch}
.hero .lead{color:rgba(255,255,255,.84)}
.hero .btn{background:var(--cream);border-color:var(--cream);color:#134F2D}
.hero .btn-ghost{background:transparent;border-color:rgba(255,255,255,.55);color:#fff}
.hero :focus-visible{outline-color:var(--mint)}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 12px}
.hero-note{color:rgba(255,255,255,.75)}
.hero-art{position:relative;display:flex;justify-content:center;align-items:flex-start;gap:0;padding:8px 0 0;min-width:0;max-height:min(118vw,470px);overflow:hidden}
.hero-art .phone{width:min(50vw,280px);flex:none}
.hero-art .p2{margin-left:-14%;margin-top:64px;transform:rotate(3deg)}
.hero-art .p1{transform:rotate(-2deg);z-index:1}
@media (min-width:900px){
  .hero{padding:72px 0 0}
  .hero-in{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center}
  .hero-art{max-height:540px;align-self:end;padding-top:0}
  .hero-art .phone{width:270px}
  .hero-text{padding-bottom:72px}
}

/* Phone frame around a screenshot */
.phone{position:relative;border-radius:34px;padding:9px;background:#0c2617;box-shadow:var(--shadow),inset 0 0 0 1px rgba(255,255,255,.08);max-width:300px;width:100%}
.phone picture,.phone img{border-radius:26px;overflow:hidden;width:100%}
/* The camera cutout sits in the screenshot's status bar (encode.py), never over the app. */
.phone::after{content:"";position:absolute;top:calc(9px + 2.1%);left:50%;width:30%;aspect-ratio:3.9/1;transform:translateX(-50%);border-radius:99px;background:#050c08}
.phone.force-dark{background:#0c2617}

/* Bands */
.band{padding:56px 0}
.band-alt{background:var(--band)}
.band > .wrap > h2{max-width:30ch;margin-bottom:28px}
@media (min-width:900px){.band{padding:84px 0}}
.intro{padding:44px 0 8px}
.intro h1{max-width:20ch}
.intro + .band{padding-top:28px}
.crumb{margin-bottom:8px}

/* Benefits: an open grid, icons in mint on forest discs */
.benefits{list-style:none;display:grid;gap:26px 32px;grid-template-columns:1fr}
.benefits li{display:grid;grid-template-columns:44px 1fr;column-gap:14px}
.benefits .ic,.trust .ic{width:44px;height:44px;padding:10px;border-radius:12px;background:var(--forest);color:var(--mint);grid-row:span 2}
.benefits h3{margin:2px 0 4px}
.benefits p{margin:0;color:var(--mute)}
@media (min-width:640px){.benefits{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.benefits{grid-template-columns:repeat(3,1fr)}}

/* Feature rows: words and a phone */
.feature{display:grid;gap:28px;align-items:center;margin:0 0 48px}
.feature:last-child{margin-bottom:0}
.feature .phone{margin:0 auto;width:min(72vw,280px)}
.feature-text{max-width:34rem}
@media (min-width:860px){
  .feature{grid-template-columns:1fr 300px;gap:64px;margin-bottom:72px}
  .feature.flip{grid-template-columns:300px 1fr}
  .feature.flip .phone{order:-1}
}
.toc{padding-bottom:12px}
.toc ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.toc a{display:inline-block;padding:6px 12px;border:1px solid var(--line);border-radius:99px;text-decoration:none;color:var(--ink);background:var(--paper);font-size:.95rem}
.toc a:hover{border-color:var(--link)}

/* Trust */
.trust{list-style:none;display:grid;gap:22px;grid-template-columns:1fr;margin-bottom:24px}
.trust li{display:flex;gap:14px}
.trust h3{margin:2px 0 4px}
.trust p{margin:0;color:var(--mute)}
@media (min-width:760px){.trust{grid-template-columns:1fr 1fr}}

/* How it works: a real sequence, so numbered */
.steps{list-style:none;counter-reset:s;display:grid;gap:18px}
.steps li{counter-increment:s;position:relative;padding:18px 18px 16px 70px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r)}
.steps li::before{content:counter(s);position:absolute;left:18px;top:16px;width:36px;height:36px;border-radius:50%;background:var(--forest);color:var(--mint);font-weight:700;display:flex;align-items:center;justify-content:center}
.steps p{margin:0;color:var(--mute)}
@media (min-width:860px){.steps{grid-template-columns:repeat(3,1fr)}}

/* Testimonials */
.quotes{display:grid;gap:20px}
@media (min-width:860px){.quotes{grid-template-columns:1fr 1fr}}
.quote{margin:0;padding:20px 22px;background:var(--paper);border-left:4px solid var(--mint);border-radius:0 var(--r) var(--r) 0}
.quote blockquote{margin:0 0 10px;font-size:1.1rem}
.quote figcaption{color:var(--mute);font-weight:600}

/* Closing call to action */
.cta{background:var(--forest);color:#fff;padding:56px 0}
.cta-in{display:grid;gap:20px;align-items:center}
.cta h2{font-size:clamp(1.8rem,1.3rem + 2vw,2.6rem);letter-spacing:-.025em}
.cta p{color:rgba(255,255,255,.82)}
.cta .small{color:rgba(255,255,255,.75);margin-top:10px}
.cta :focus-visible{outline-color:var(--mint)}
@media (min-width:860px){.cta-in{grid-template-columns:1fr auto;gap:48px}}

/* Pricing */
.plans{display:grid;gap:18px;grid-template-columns:1fr;margin-bottom:22px}
@media (min-width:640px){.plans{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.plans{grid-template-columns:repeat(4,1fr)}}
.plan{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.plan h2{font-size:1.45rem;margin-bottom:2px}
.users{color:var(--mute);margin-bottom:14px}
.price{margin:0}
.price strong{font-size:2rem;font-weight:700;letter-spacing:-.02em}
.year{color:var(--mute);font-size:.95rem;margin:2px 0 0}
.ticks-list{list-style:none;margin:18px 0 22px;display:grid;gap:8px}
.ticks-list li{display:flex;gap:8px;align-items:flex-start}
.ticks-list .ic{width:20px;height:20px;color:var(--link);margin-top:3px}
.plan .btn{margin-top:auto}
.faq{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:16px 36px 16px 0;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:24px;width:10px;height:10px;border-right:2px solid var(--link);border-bottom:2px solid var(--link);transform:rotate(45deg)}
.faq[open] summary::after{transform:rotate(-135deg);top:28px}
.faq summary h3{margin:0;font-size:1.1rem}
.faq p{color:var(--mute)}

/* Certificates */
.note-box{display:flex;gap:16px;background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--mint);border-radius:var(--r);padding:18px 20px;margin:0 0 30px}
.note-box .ic{color:var(--link);margin-top:4px}
.note-box h2{font-size:1.2rem}
.note-box p:last-child{margin:0}
.band > .wrap > h2.group,.group{margin:40px 0 16px;padding-bottom:8px;border-bottom:2px solid var(--forest);max-width:none}
.certs{list-style:none;display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
@media (min-width:860px){.certs{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.cert{display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;align-items:start;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:14px}
.cert img,.cert-ph{width:96px;border-radius:4px;border:1px solid var(--line);background:#fff}
.cert-ph{height:130px;display:flex;align-items:center;justify-content:center;color:var(--mute);background:var(--band)}
.cert h3{font-size:1.05rem;margin-bottom:4px}
.cert p{margin:0;color:var(--mute);font-size:.97rem}
.cert-shot{display:block;width:96px}.cert-shot img{border-radius:6px}
.more-certs{font-weight:600;margin:24px 0 8px}
.note-box h3{font-size:1.1rem;margin:2px 0 6px}
.cert .tag{display:inline-block;font-weight:600;color:var(--link);margin-bottom:4px}
@media (min-width:500px){.cert{grid-template-columns:120px minmax(0,1fr)}.cert img,.cert-ph{width:120px}}
.cert h3,.cert p{overflow-wrap:break-word}
/* Each certificate's name links to its guide; the gas work covered (cert guides round) */
.cert h3 a{color:inherit;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.cert h3 a:hover{text-decoration-color:currentColor}
.cert-scope{margin:0 0 30px}
.cert-scope h3{font-size:1.1rem;margin:0}
.cert-scope .ticks-list{margin:10px 0 0}
.all .cert-names{margin-top:8px;font-size:.92rem;color:var(--ink)}
@media (max-width:360px){.cert{grid-template-columns:72px minmax(0,1fr);gap:12px}.cert img,.cert-ph{width:72px}}

/* Help, about and legal text */
.prose{max-width:42rem}
.prose h2{font-size:1.35rem;margin-top:1.4em}
.prose ul{padding-left:1.2em;margin-bottom:1em}
.prose li{margin-bottom:.4em}
.articles{list-style:none;margin-bottom:28px;border-top:1px solid var(--line)}
.articles a{display:block;padding:14px 0;border-bottom:1px solid var(--line);font-weight:600;text-decoration:none}
.articles a:hover{text-decoration:underline}

/* Forms (contact, sign in and the sign-up flow) */
.contact{display:grid;gap:28px}
@media (min-width:900px){.contact{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:56px}}
.side h2{font-size:1.2rem;margin-top:8px}
.signin-grid{display:grid;gap:20px;max-width:60rem}
@media (min-width:860px){.signin-grid{grid-template-columns:1fr 1fr}.signin-grid .msg{grid-column:1/-1}}
.signin-grid h2{font-size:1.25rem}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:18px 18px 20px;margin:0 0 14px}
.form button{width:100%;margin-top:18px}
label{display:block;margin:14px 0 5px;font-weight:600;font-size:.97rem}
.opt{font-weight:400;color:var(--mute)}
.hint{color:var(--mute);font-size:.9rem;margin:4px 0 0}
input[type=text],input[type=email],input[type=password],input[type=tel],select,textarea{width:100%;font:inherit;min-height:48px;padding:10px 12px;border:1px solid #9fb2ac;border-radius:10px;background:var(--paper);color:var(--ink)}
textarea{min-height:140px;resize:vertical}
input[aria-invalid=true],select[aria-invalid=true],textarea[aria-invalid=true]{border:2px solid var(--bad)}
fieldset[aria-invalid=true]{border-left:3px solid var(--bad);padding-left:8px}
.addr{display:flex;align-items:center;border:1px solid #9fb2ac;border-radius:10px;background:var(--paper);overflow:hidden}
.addr:focus-within{outline:3px solid var(--focus);outline-offset:2px}
.addr input{border:0;border-radius:0;min-width:0;flex:1}
.addr input:focus-visible{outline:0}
.addr span{padding:0 12px;color:var(--mute);white-space:nowrap;font-size:.92rem;overflow:hidden;text-overflow:ellipsis;max-width:55%}
.code{font-size:1.6rem!important;letter-spacing:.3em;text-align:center}
fieldset{border:0;padding:0;margin:14px 0 0;min-width:0}
legend{font-weight:600;font-size:.97rem;margin-bottom:4px;padding:0}
.ticks{display:grid;grid-template-columns:1fr;gap:0 12px}
@media (min-width:420px){.ticks{grid-template-columns:1fr 1fr}}
.tap{display:inline-flex;align-items:center;min-height:44px}
.check{display:flex;align-items:center;gap:10px;min-height:44px;font-weight:400;margin:0}
.check input{width:1.5rem;height:1.5rem;flex:none;accent-color:var(--pine)}
/* Dark mode: empty radio buttons and tick boxes get a light ring so they
   show on the dark card (the browser's own were dark grey on dark). */
.check-off{opacity:.55;cursor:not-allowed}
.msg{padding:12px 14px;border-radius:10px;margin:0 0 14px;border:1px solid var(--line);background:var(--paper)}
.msg.err{border-color:var(--bad);color:var(--bad)}
.err-f{color:var(--bad);font-size:.92rem;margin:5px 0 0}
.mute{color:var(--mute);font-size:.93rem}
.sugg{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.sugg span{border:1px solid var(--line);border-radius:99px;padding:2px 10px;font-size:.9rem;background:var(--band);overflow-wrap:anywhere}
.big{font-size:1.15rem;font-weight:600;overflow-wrap:anywhere}
.spin{width:36px;height:36px;border:4px solid var(--line);border-top-color:var(--link);border-radius:50%;margin:8px auto 16px;animation:s 1s linear infinite}
@keyframes s{to{transform:rotate(1turn)}}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cf-turnstile{margin-top:16px;min-height:65px}
.flow{padding:32px 0 48px}
.flow-in{max-width:36rem}
.flow-in h1{font-size:clamp(1.7rem,1.4rem + 1.4vw,2.2rem)}
.flow .card button,.flow form > button{width:100%;margin-top:18px}
.flow form.card + form button.sec{width:100%}
.flow .btn{width:100%;margin-top:14px}
code{font-size:.92em;background:var(--band);padding:1px 5px;border-radius:5px}

/* Footer */
.foot{background:var(--band);border-top:1px solid var(--line);padding:44px 0 calc(24px + env(safe-area-inset-bottom));font-size:.97rem}
.foot-in{display:grid;gap:26px;grid-template-columns:1fr 1fr}
.foot-brand{grid-column:1/-1}
.foot-brand p{color:var(--mute);margin:10px 0 0;max-width:22rem}
.foot nav{display:grid;align-content:start;gap:2px}
.foot nav h2{font-size:.95rem;color:var(--mute);font-weight:600;margin:0 0 6px;letter-spacing:0}
.foot nav a{color:var(--ink);text-decoration:none;padding:5px 0}
.foot nav a:hover{text-decoration:underline}
.foot-base{margin-top:28px;padding-top:16px;border-top:1px solid var(--line);color:var(--mute);font-size:.9rem}
.foot-base p{margin:0}
@media (min-width:760px){.foot-in{grid-template-columns:2fr 1fr 1fr 1fr}.foot-brand{grid-column:auto}}

/* Screenshot strips (Features) */
.feature-text.wide{max-width:44rem}
.work-grid{display:grid;gap:16px;grid-template-columns:repeat(2,minmax(0,1fr));margin:22px 0 34px}
@media (min-width:900px){.work-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.work{margin:0;min-width:0}
.work img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px;border:1px solid var(--line)}
.work figcaption{font-size:.88rem;margin-top:8px;color:var(--mute)}
.strip{list-style:none;display:grid;gap:22px 16px;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:30px;align-items:start}
.strip li{text-align:center;min-width:0}
.strip .phone{margin:0 auto;max-width:240px}
.strip p{margin:10px 0 0;color:var(--mute);font-size:.92rem}
.strip li.wide{grid-column:1/-1}
@media (min-width:760px){.strip{grid-template-columns:repeat(3,minmax(0,1fr))}.strip li.wide{grid-column:span 2}}
@media (min-width:1100px){.strip{grid-template-columns:repeat(4,minmax(0,1fr))}}
.doc{margin:0;background:#fff;border-radius:6px;padding:10px;box-shadow:var(--shadow);border:1px solid var(--line)}
.doc img{width:100%;border-radius:2px}

/* Automatic reminders */
.reminders{list-style:none;display:grid;gap:12px;grid-template-columns:1fr;margin:22px 0 0}
@media (min-width:760px){.reminders{grid-template-columns:1fr 1fr}}
.reminders li{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px}
.reminders h3{font-size:1.05rem;margin:0 0 4px}
.reminders p{margin:0;color:var(--mute);font-size:.97rem}
.reminders .ctl{margin-top:6px;color:var(--link);font-weight:600;font-size:.92rem}
.rem-short{list-style:none;display:grid;gap:12px 28px;grid-template-columns:1fr;margin:8px 0 22px}
@media (min-width:860px){.rem-short{grid-template-columns:1fr 1fr}}
.rem-short li{display:flex;gap:10px;align-items:flex-start}
.rem-short .ic{width:22px;height:22px;color:var(--link);margin-top:2px}
.rem-short span{color:var(--mute)}
.rem-short strong{color:var(--ink)}

/* Make it yours: the colour themes, picked with radio buttons (no script) */
.themes{position:relative;display:grid;gap:22px;margin-top:22px}
.th-in{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.theme-picker{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.theme-picker legend{width:100%;margin-bottom:8px;font-weight:600}
.theme-picker label{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin:0;padding:6px 14px 6px 8px;border:1px solid var(--line);border-radius:99px;background:var(--paper);font-weight:500;cursor:pointer}
.sw{width:22px;height:22px;border-radius:50%;border:2px solid rgba(255,255,255,.7);box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.th-forest .sw{background:#1a5c52}.th-ocean .sw{background:#1d5f8a}.th-navy .sw{background:#1f3a68}.th-slate .sw{background:#3b4a5a}.th-plum .sw{background:#5b2f6b}
.th-burgundy .sw{background:#7a2434}.th-steel .sw{background:#2b5f9e}.th-midnight .sw{background:#1a3a6b}.th-contrast .sw{background:#0a2a66}.th-hivis .sw{background:linear-gradient(135deg,#000 50%,#ffd400 50%)}
.theme-phones{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:600px}
.theme-phones .phone{margin:0 auto;max-width:260px}
.tp{display:none}
.tp-dark p{text-align:center;margin:10px 0 0;color:var(--mute);font-size:.92rem}
#th-forest:checked~.theme-phones .tp-forest,#th-ocean:checked~.theme-phones .tp-ocean,#th-navy:checked~.theme-phones .tp-navy,#th-slate:checked~.theme-phones .tp-slate,
#th-plum:checked~.theme-phones .tp-plum,#th-burgundy:checked~.theme-phones .tp-burgundy,#th-steel:checked~.theme-phones .tp-steel,#th-midnight:checked~.theme-phones .tp-midnight,
#th-contrast:checked~.theme-phones .tp-contrast,#th-hivis:checked~.theme-phones .tp-hivis{display:block}
#th-forest:checked~.theme-picker .th-forest,#th-ocean:checked~.theme-picker .th-ocean,#th-navy:checked~.theme-picker .th-navy,#th-slate:checked~.theme-picker .th-slate,
#th-plum:checked~.theme-picker .th-plum,#th-burgundy:checked~.theme-picker .th-burgundy,#th-steel:checked~.theme-picker .th-steel,#th-midnight:checked~.theme-picker .th-midnight,
#th-contrast:checked~.theme-picker .th-contrast,#th-hivis:checked~.theme-picker .th-hivis{border:2px solid var(--link);font-weight:700}
#th-forest:focus-visible~.theme-picker .th-forest,#th-ocean:focus-visible~.theme-picker .th-ocean,#th-navy:focus-visible~.theme-picker .th-navy,#th-slate:focus-visible~.theme-picker .th-slate,
#th-plum:focus-visible~.theme-picker .th-plum,#th-burgundy:focus-visible~.theme-picker .th-burgundy,#th-steel:focus-visible~.theme-picker .th-steel,#th-midnight:focus-visible~.theme-picker .th-midnight,
#th-contrast:focus-visible~.theme-picker .th-contrast,#th-hivis:focus-visible~.theme-picker .th-hivis{outline:3px solid var(--focus);outline-offset:3px}
/* "Make it yours", second row: the same theme on the dashboard, an invoice, a CP12 or an email. */
.view-picker{margin-top:14px}
.tv{display:none}
#tv-dash:checked~.theme-phones .tv-dash,#tv-invoice:checked~.theme-phones .tv-invoice,#tv-cp12:checked~.theme-phones .tv-cp12,#tv-email:checked~.theme-phones .tv-email{display:block}
#tv-invoice:checked~.theme-phones .tp-dark,#tv-cp12:checked~.theme-phones .tp-dark,#tv-email:checked~.theme-phones .tp-dark{display:none}
#tv-invoice:checked~.theme-phones .tp,#tv-cp12:checked~.theme-phones .tp,#tv-email:checked~.theme-phones .tp{grid-column:1/-1}
.tv-doc img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:8px;background:#fff}
.tv-mail img{max-width:320px;margin:0 auto;border-radius:18px}
#tv-dash:checked~.view-picker .tvl-dash,#tv-invoice:checked~.view-picker .tvl-invoice,#tv-cp12:checked~.view-picker .tvl-cp12,#tv-email:checked~.view-picker .tvl-email{border:2px solid var(--link);font-weight:700}
#tv-dash:focus-visible~.view-picker .tvl-dash,#tv-invoice:focus-visible~.view-picker .tvl-invoice,#tv-cp12:focus-visible~.view-picker .tvl-cp12,#tv-email:focus-visible~.view-picker .tvl-email{outline:3px solid var(--focus);outline-offset:3px}
@media (min-width:900px){.themes{grid-template-columns:minmax(0,1fr) 560px;align-items:start}}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media print{.top,.foot,.cta,.announce{display:none}.hero{background:none;color:#000}}

/* Everything in Invola */
.all{list-style:none;display:grid;gap:12px;grid-template-columns:1fr}
@media (min-width:760px){.all{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.all{grid-template-columns:1fr 1fr 1fr}}
.all li{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px}
.all-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.all h3{font-size:1.05rem;margin:0 0 4px}
.all p{margin:0;color:var(--mute);font-size:.97rem}
.plan-tag{flex:none;font-size:.8rem;font-weight:600;color:var(--link);border:1px solid currentColor;border-radius:99px;padding:0 8px;white-space:nowrap}
.all-short{display:grid;gap:4px 32px;grid-template-columns:1fr;margin-bottom:20px}
@media (min-width:760px){.all-short{grid-template-columns:1fr 1fr}}
.all-short h3{font-size:1.05rem;margin:14px 0 4px}
.all-short p{margin:0;color:var(--mute)}

/* Signing, straight after the hero (home) */
.sign-band{background:var(--paper);border-bottom:1px solid var(--line)}
.sign-in{display:grid;gap:36px;grid-template-columns:minmax(0,1fr);align-items:center}
.sign-h{font-size:clamp(1.9rem,1.4rem + 2.2vw,2.9rem);letter-spacing:-.025em;margin-bottom:0;max-width:16ch}
.swash{display:block;width:min(320px,80%);height:auto;color:var(--forest);margin:4px 0 18px}
.sign-text .lead{color:var(--ink);max-width:34rem}
.sign-steps{list-style:none;counter-reset:st;display:grid;gap:14px;margin:26px 0 28px}
.sign-steps li{counter-increment:st;position:relative;padding-left:52px}
.sign-steps li::before{content:counter(st);position:absolute;left:0;top:0;width:36px;height:36px;border-radius:50%;border:2px solid var(--forest);color:var(--forest);font-weight:700;display:flex;align-items:center;justify-content:center}
.sign-steps h3{font-size:1.05rem;margin:5px 0 2px}
.sign-steps p{margin:0;color:var(--mute)}
.sign-art{position:relative;display:flex;justify-content:center;align-items:flex-start;min-width:0;padding:6px 0 12px}
.sign-art .phone{width:min(40vw,240px);flex:none}
.sign-art .sp2{margin-left:-16%;margin-top:42px;z-index:2}
.sign-art .sp3{margin-left:-16%;margin-top:84px;z-index:3}
@media (min-width:900px){.sign-in{grid-template-columns:minmax(0,1fr) 520px;gap:56px}.sign-art .phone{width:220px}}

/* Features: the in-depth pages */
.deep-links{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 12px;padding-bottom:6px}
.deep-links p{margin:0}
.deep-links ul,.deep-more{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.deep-links a,.deep-more a{display:inline-block;padding:7px 14px;border-radius:99px;background:var(--forest);color:var(--cream);text-decoration:none;font-weight:600;font-size:.95rem}
.deep-links a:hover,.deep-more a:hover{background:#0f3f24}
.feature-text .ticks-list{margin:14px 0 18px}
.feature-text.wide .ticks-list{grid-template-columns:1fr}
@media (min-width:860px){.feature-text.wide .ticks-list{grid-template-columns:1fr 1fr;column-gap:28px}}
.benefits h3 a{color:inherit;text-decoration:none}
.benefits h3 a:hover{text-decoration:underline}

/* Help centre (src/Signup/site-help.php). The one strong idea: each guide
   is a numbered rail, a forest line joining the steps, with the screen from
   the app beside the step that uses it. Everything else stays quiet. */
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hs-hero{background:var(--forest);color:var(--cream);padding:40px 0 44px}
.hs-hero h1{color:#fff;margin-bottom:.25em}
.hs-hero .lead{color:rgba(247,243,230,.82)}
.hs-search{display:flex;gap:8px;margin:18px 0 6px;max-width:40rem}
.hs-search input{flex:1;min-width:0;font:inherit;min-height:52px;padding:10px 14px;border:1px solid #9fb2ac;border-radius:12px;background:var(--paper);color:var(--ink);-webkit-appearance:none;appearance:none}
.hs-search input::-webkit-search-cancel-button{display:none}
.hs-search button{flex:none;min-height:52px;padding:10px 16px}
.hs-search button .ic{width:20px;height:20px}
.hs-search-big input{border-color:transparent;font-size:1.08rem;box-shadow:0 10px 30px -14px rgba(0,0,0,.6)}
.hs-hero .hs-search button{background:var(--cream);border-color:var(--cream);color:#134F2D}
.hs-hero :focus-visible{outline-color:var(--mint)}
@media (max-width:420px){.hs-search button span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}}
.hs-band{padding:40px 0}
@media (min-width:900px){.hs-band{padding:60px 0}}
.hs-topics{list-style:none;display:grid;grid-template-columns:1fr;border-top:1px solid var(--line)}
@media (min-width:700px){.hs-topics{grid-template-columns:1fr 1fr;column-gap:32px}}
@media (min-width:1100px){.hs-topics{grid-template-columns:repeat(3,1fr)}}
.hs-topics a{display:grid;grid-template-columns:44px 1fr;column-gap:14px;padding:16px 4px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);height:100%}
.hs-topics a:hover .hs-t{text-decoration:underline}
.hs-topics .ic{width:44px;height:44px;padding:10px;border-radius:12px;background:var(--forest);color:var(--mint);grid-row:span 3}
.hs-topics .hs-t{font-weight:600;font-size:1.08rem;color:var(--link)}
.hs-topics .hs-l{color:var(--mute);font-size:.95rem;line-height:1.45}
.hs-topics .hs-n{font-size:.85rem;color:var(--mute);margin-top:4px}
.hs-two{display:grid;gap:36px}
@media (min-width:900px){.hs-two{grid-template-columns:1fr 1fr;gap:56px}}
.hs-list{list-style:none;border-top:1px solid var(--line);margin-bottom:18px}
.hs-list a{display:flex;flex-direction:column;gap:2px;padding:13px 0;border-bottom:1px solid var(--line);text-decoration:none}
.hs-list .hs-t{font-weight:600}
.hs-list a:hover .hs-t{text-decoration:underline}
.hs-list .hs-l{color:var(--mute);font-size:.95rem;line-height:1.45}
.hs-list .hs-c{color:var(--mute);font-size:.85rem}
.hs-h{font-size:1.3rem;margin-top:28px}
.hs-chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.hs-chips a{display:inline-block;padding:7px 14px;border:1px solid var(--line);border-radius:99px;text-decoration:none;color:var(--ink);background:var(--paper);font-size:.95rem}
.hs-chips a:hover{border-color:var(--link)}
.hs-crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:2px 0;font-size:.92rem;margin-bottom:12px;color:var(--mute)}
.hs-crumbs li+li::before{content:"/";margin:0 8px;color:var(--line)}
.hs-crumbs a{color:var(--mute)}
.hs-crumbs [aria-current]{color:var(--ink)}
.hs-intro{padding-bottom:4px}
.hs-intro h1{max-width:24ch}
.hs-article{display:grid;gap:32px;padding-top:12px;padding-bottom:48px}
@media (min-width:1040px){.hs-article.has-aside{grid-template-columns:minmax(0,1fr) 270px;gap:56px}}
.hs-main{max-width:48rem;min-width:0}
.hs-sec{margin:0 0 34px}
.hs-sec > h2{font-size:clamp(1.3rem,1.2rem + .5vw,1.6rem);margin-top:6px;scroll-margin-top:84px}
.hs-sec > p,.hs-sec > ul{max-width:40rem}
.hs-sec ul{padding-left:1.2em;margin-bottom:1em}
.hs-sec li{margin-bottom:.3em}
.hs-steps{list-style:none;counter-reset:hs;margin:18px 0 8px;position:relative}
.hs-steps > li{counter-increment:hs;position:relative;padding:0 0 26px 54px;display:grid;gap:14px;align-items:start}
.hs-steps > li::before{content:counter(hs);position:absolute;left:0;top:-2px;width:36px;height:36px;border-radius:50%;background:var(--forest);color:var(--cream);font-weight:700;display:flex;align-items:center;justify-content:center;z-index:1}
.hs-steps > li::after{content:"";position:absolute;left:17px;top:36px;bottom:2px;width:2px;background:var(--line)}
.hs-steps > li:last-child{padding-bottom:6px}
.hs-steps > li:last-child::after{display:none}
.hs-step-text p{margin:0 0 .5em}
.hs-step-text p:last-child{margin:0}
.hs-step-text strong{font-weight:600;color:var(--ink)}
@media (min-width:760px){.hs-steps > li.has-pic{grid-template-columns:minmax(0,1fr) auto;gap:28px}}
.hs-shot{margin:0;width:100%;max-width:min(360px,100%);border-radius:16px;overflow:hidden;border:1px solid var(--line);background:var(--paper);box-shadow:0 14px 34px -22px rgba(19,79,45,.55)}
.hs-shot img{width:100%}
.hs-screen{border:7px solid #0c2617;border-radius:30px;max-width:min(300px,100%)}
.hs-screen img{border-radius:22px}
.hs-shot.hs-w300{max-width:min(300px,100%)}
.hs-shot.hs-w390{max-width:min(390px,100%)}
.hs-screen.hs-w300,.hs-screen.hs-w390{max-width:min(300px,100%)}
@media (min-width:760px){.has-pic .hs-shot{width:300px}.has-pic .hs-screen{width:260px}}
.hs-sec > .hs-shot{margin:6px 0 18px}
.hs-tip{background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--mint);border-radius:12px;padding:14px 18px;margin:12px 0 0;max-width:40rem}
.hs-tip-h{font-weight:600;margin:0 0 4px!important}
.hs-tip p{margin:0 0 .5em}
.hs-tip p:last-child{margin:0}
.hs-upd{margin:30px 0 14px}
.hs-vote{background:var(--band);border-radius:var(--r);padding:16px 18px;margin:0 0 34px;scroll-margin-top:84px}
.hs-vote p{margin:0}
.hs-vote-q{font-weight:600;margin-bottom:10px!important}
.hs-vote-row{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start}
.hs-vote .btn-ghost{min-height:44px;padding:6px 16px;border:2px solid var(--btn);background:transparent;color:var(--link);border-radius:12px;font-weight:600;display:inline-flex;align-items:center;gap:8px;cursor:pointer}
.hs-vote .ic{width:20px;height:20px}
.hs-vote details{flex:1 1 220px}
.hs-vote summary{list-style:none;width:max-content}
.hs-vote summary::-webkit-details-marker{display:none}
.hs-vote details[open] summary{background:var(--btn);color:var(--btn-ink)}
.hs-vote-more{margin-top:10px}
.hs-vote-more label{margin-top:4px}
.hs-vote-more textarea{min-height:90px}
.hs-vote-more button{margin-top:10px}
.hs-related{margin-top:30px}
.hs-related h2{font-size:1.25rem}
.hs-aside{position:sticky;top:84px;align-self:start;display:none}
@media (min-width:1040px){.hs-aside{display:block}}
.hs-aside-h{font-weight:600;font-size:.95rem;margin:0 0 8px}
.hs-toc{margin-bottom:26px}
.hs-toc ol{list-style:none;border-left:2px solid var(--line)}
.hs-toc a{display:block;padding:5px 0 5px 14px;margin-left:-2px;border-left:2px solid transparent;text-decoration:none;color:var(--mute);font-size:.95rem;line-height:1.35}
.hs-toc a:hover{color:var(--link);border-left-color:var(--link)}
.hs-aside .hs-search{flex-direction:column;margin:0}
.hs-aside .hs-search input{min-height:46px}
.hs-aside .hs-search button{min-height:44px}
.hs-qa{display:grid;gap:0}
.hs-q{padding:16px 0;border-bottom:1px solid var(--line);scroll-margin-top:84px}
.hs-q h3{font-size:1.1rem;margin-bottom:6px}
.hs-q p{color:var(--mute);margin-bottom:.6em}
.hs-q:target{background:var(--paper);box-shadow:0 0 0 10px var(--paper);border-radius:4px}
.hs-more{margin:0!important;color:var(--mute)}
.hs-more a{font-weight:600}
/* The Everything page: each feature's guide */
.all-help{display:inline-block;margin-top:6px;font-size:.92rem;font-weight:600}
@media print{.hs-hero,.hs-aside,.hs-vote{display:none}.hs-steps > li::after{display:none}}
/* Tap to enlarge (siteZoom): a link to an overlay shown by :target, no script */
.zoom{display:block;position:relative;color:inherit;cursor:zoom-in;border-radius:inherit;-webkit-tap-highlight-color:transparent}
.zoom-hint{position:absolute;right:10px;bottom:10px;width:34px;height:34px;border-radius:50%;background:rgba(12,38,23,.8);color:#fff;display:grid;place-items:center;pointer-events:none;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.zoom-hint .ic{width:18px;height:18px}
.hero-art .zoom-hint{bottom:auto;top:30%}
.cert .zoom-hint,.cert-shot .zoom-hint{width:26px;height:26px;right:4px;bottom:4px}
.cert .zoom-hint .ic,.cert-shot .zoom-hint .ic{width:14px;height:14px}
.zoom:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.lb{display:none;position:fixed;inset:0;z-index:200;background:rgba(8,18,12,.96);padding:64px 12px 12px;align-items:center;justify-content:center}
.lb:target{display:flex}
.lb-bg{position:absolute;inset:0;cursor:zoom-out}
.lb-fig{position:relative;margin:0;max-width:100%;max-height:100%;display:flex;flex-direction:column;align-items:center;gap:10px;pointer-events:none}
.lb-fig picture{display:contents}
.lb-fig img{display:block;max-width:100%;max-height:calc(100vh - 150px);max-height:calc(100dvh - 150px);width:auto;height:auto;object-fit:contain;border-radius:10px;background:#fff;pointer-events:auto}
.lb-fig figcaption{color:#F7F3E6;font-size:.95rem;line-height:1.4;text-align:center;max-width:40rem}
.lb-x{position:absolute;top:10px;right:12px;width:48px;height:48px;border-radius:50%;background:#F7F3E6;color:#134F2D;font-size:2rem;line-height:46px;text-align:center;text-decoration:none;font-weight:600}
.lb-x:focus-visible{outline:3px solid #a5dcb5;outline-offset:3px}
@media print{.lb,.zoom-hint{display:none!important}}
/* Help text marks added with the help editor: headings, numbered lists, notes in steps */
.hs-sec ol:not(.hs-steps),.hs-q ol,.hs-step-text ol{padding-left:1.4em;margin-bottom:1em;list-style:decimal}
.hs-q ul,.hs-step-text ul{padding-left:1.2em;margin-bottom:1em}
.hs-sec > ol:not(.hs-steps){max-width:40rem}
.hs-h{margin:1.1em 0 .4em;max-width:40rem}
h3.hs-h{font-size:1.2rem}
h4.hs-h{font-size:1.05rem}
.hs-sec > .hs-tip,.hs-step-text .hs-tip,.hs-q .hs-tip{margin:12px 0 14px}
/* Pipe sizing you draw (certificates page, item 36) */
.ps-feature{margin:8px 0 36px;padding:0}
.ps-feature h3{font-size:1.25rem}