*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--text-body);font-family:var(--font-sans);-webkit-font-smoothing:antialiased}
a{color:var(--link);text-decoration:none}a:hover{color:var(--link-hover)}
h1,h2,h3,p{text-wrap:pretty}
.wrap{max-width:1240px;margin:0 auto;padding:0 32px}
.sec{padding:120px 0}
.sec-tight{padding:72px 0}
.eyebrow{font:500 12px var(--font-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:0}
.eyebrow.inv{color:var(--teal-300)}
.h1{font:600 clamp(40px,5.4vw,68px)/1.04 var(--font-display);letter-spacing:-.03em;color:var(--navy-900);margin:0}
.h2{font:600 clamp(30px,3.4vw,44px)/1.1 var(--font-display);letter-spacing:-.022em;color:var(--navy-900);margin:0}
.h3{font:600 20px/1.3 var(--font-display);letter-spacing:-.01em;color:var(--navy-900);margin:0}
.inv .h2,.inv .h3,.h2.inv{color:#fff}
.lede{font:400 18px/1.6 var(--font-sans);color:var(--grey-600);margin:0}
.body{font:400 16px/1.6 var(--font-sans);color:var(--grey-600);margin:0}
.inv .lede,.inv .body{color:var(--text-inverse-muted)}
.sec-head{display:grid;gap:18px;max-width:640px;margin-bottom:56px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:72px;align-items:center}
.card{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:32px}
.card.line{box-shadow:none;border:1px solid var(--border-subtle)}
.lift{transition:transform var(--dur-base) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard)}
.lift:hover{transform:translateY(-2px);box-shadow:var(--shadow-raised)}
.check{display:grid;gap:12px;list-style:none;padding:0;margin:0}
.check li{display:flex;gap:12px;font:400 15px/1.5 var(--font-sans);color:var(--grey-700)}
.check li i{margin-top:4px;flex:none}
.inv .check li{color:var(--text-inverse-muted)}
.hair{border-top:1px solid var(--border-subtle)}
.band-dark{position:relative;background:var(--navy-950);overflow:hidden}
.band-dark .bg{position:absolute;inset:0;background:url(assets/imagery/aerial-suburb-teal.png) center/cover;opacity:.42}
.band-dark .wash{position:absolute;inset:0;background:linear-gradient(90deg,rgba(17,21,43,.94),rgba(17,21,43,.7))}
.band-dark>.wrap{position:relative}
.ph-logo{height:56px;border-radius:var(--radius-md);background:var(--grey-100);display:flex;align-items:center;justify-content:center;font:500 12px var(--font-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--grey-400)}
.num{font:600 44px/1 var(--font-display);letter-spacing:-.03em;color:var(--navy-900)}
.inv .num{color:#fff}
.tlink{display:inline-flex;gap:8px;align-items:center;font:500 15px var(--font-sans);color:var(--link)}
.tlink:hover{gap:11px}
.tlink{transition:gap var(--dur-base) var(--ease-standard)}
.nav-link{display:flex;align-items:center;gap:6px;height:72px;padding:0 14px;font:500 14px var(--font-sans);color:var(--grey-700);cursor:pointer;background:none;border:0}
.nav-link:hover,.nav-link.on{color:var(--navy-900)}
.mega{position:absolute;left:0;right:0;top:100%;background:#fff;border-top:1px solid var(--border-subtle);box-shadow:var(--shadow-popover);animation:fadeIn var(--dur-base) var(--ease-standard)}
.mega-item{display:flex;gap:16px;padding:16px;border-radius:var(--radius-lg);color:inherit;transition:background var(--dur-fast)}
.mega-item:hover{background:var(--grey-50);color:inherit}
.mega-ico{width:40px;height:40px;border-radius:10px;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;flex:none}
@keyframes fadeIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.aud-tab{flex:1;min-width:0;display:flex;gap:14px;align-items:center;text-align:left;padding:16px 18px;border-radius:var(--radius-lg);border:1px solid var(--border-subtle);background:#fff;cursor:pointer;transition:border-color var(--dur-base),box-shadow var(--dur-base),background var(--dur-base)}
.aud-tab:hover{border-color:var(--border-default)}
.aud-tab.on{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;align-items:center;padding:24px 0;font:500 18px/1.4 var(--font-sans);color:var(--text-strong)}
.faq summary::-webkit-details-marker{display:none}
.faq details{border-bottom:1px solid var(--border-subtle)}
.faq details[open] summary i{transform:rotate(45deg)}
.faq summary i{transition:transform var(--dur-base) var(--ease-standard)}
.feat-tab{display:block;width:100%;text-align:left;background:none;border:0;border-left:2px solid var(--border-subtle);padding:18px 0 18px 24px;cursor:pointer}
.feat-tab.on{border-left-color:var(--accent)}
.foot a{color:rgba(255,255,255,.7)}.foot a:hover{color:#fff}
.menu-btn{display:none}
@media (max-width:1080px){.desk{display:none!important}.menu-btn{display:inline-flex}}
@media (max-width:920px){.grid-3,.grid-2,.split{grid-template-columns:minmax(0,1fr);gap:40px}.sec{padding:88px 0}.aud-row{flex-direction:column}.stack{grid-template-columns:minmax(0,1fr)!important}.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.hide-sm{display:none!important}.split[style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr)!important}}
@media (max-width:640px){.wrap{padding:0 20px}.card{padding:24px}}

.callout{position:absolute;z-index:2;display:flex;gap:12px;align-items:center;padding:12px 18px 12px 12px;background:rgba(255,255,255,.96);border-radius:14px;box-shadow:var(--shadow-popover);backdrop-filter:var(--blur-glass);opacity:0;animation:callIn 520ms var(--ease-out) forwards,floaty 7s ease-in-out 900ms infinite}
@keyframes callIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes growX{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes growY{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.rise{opacity:0;animation:riseIn 700ms var(--ease-out) forwards}
.rise-lg{opacity:0;animation:riseLg 1000ms var(--ease-out) forwards}
@keyframes riseIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes riseLg{from{opacity:0;transform:translateY(40px) scale(.985)}to{opacity:1;transform:none}}
.hero-grid{position:absolute;inset:0 0 40% 0;background-image:linear-gradient(var(--grey-200) 1px,transparent 1px),linear-gradient(90deg,var(--grey-200) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse 60% 70% at 50% 0%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 60% 70% at 50% 0%,#000 20%,transparent 75%);opacity:.55;pointer-events:none}
.feat-body{display:grid;transition:grid-template-rows 360ms var(--ease-standard)}
.marquee{-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;gap:28px;width:max-content;padding:8px 0 24px;animation:marq 60s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marq{to{transform:translateX(calc(-50% - 14px))}}
.zoom{transition:transform 600ms var(--ease-out)}
.lift:hover .zoom{transform:scale(1.03)}
.pulse{animation:pulse 2.4s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.35)}100%{box-shadow:0 0 0 22px rgba(255,255,255,0)}}
.reveal,.sec-head{opacity:0;transform:translateY(18px);transition:opacity 700ms var(--ease-out),transform 700ms var(--ease-out)}
.reveal.in,.sec-head.in{opacity:1;transform:none}
.epa-logo{display:flex;align-items:center;gap:10px;color:var(--navy-900)}
.epa-logo b{font:700 15px/1 var(--font-display);letter-spacing:.14em;text-transform:uppercase}
.epa-logo span span{font:500 10px/1 var(--font-display);letter-spacing:.32em;text-transform:uppercase;color:var(--grey-500)}
.epa-logo.inv{color:#fff}.epa-logo.inv span span{color:rgba(255,255,255,.6)}
@media (prefers-reduced-motion:reduce){.rise,.rise-lg,.callout,.reveal,.sec-head{opacity:1!important;transform:none!important;animation:none!important}.marquee-track{animation:none}}
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.step+.step{border-left:1px solid var(--border-subtle)}
@media (max-width:920px){.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}.step:nth-child(3){border-left:0}.step:nth-child(n+3){border-top:1px solid var(--border-subtle)}}
@media (max-width:640px){.grid-4{grid-template-columns:minmax(0,1fr)}.step+.step{border-left:0;border-top:1px solid var(--border-subtle)}}
.role-tabs{display:flex;gap:4px;max-width:100%;padding:6px;border-radius:999px;background:#fff;box-shadow:var(--shadow-card),0 0 0 1px var(--border-subtle);overflow-x:auto}
.role-tab{position:relative;overflow:hidden;display:flex;align-items:center;gap:10px;height:46px;padding:0 24px;border:0;border-radius:999px;background:transparent;color:var(--grey-600);font:500 15px var(--font-sans);cursor:pointer;white-space:nowrap;transition:background var(--dur-base) var(--ease-standard),color var(--dur-base)}
.role-tab:hover{color:var(--navy-900)}
.role-tab.on{background:var(--navy-900);color:#fff}
.role-tab>span[aria-hidden]{left:24px!important;right:24px!important;bottom:7px!important;background:rgba(255,255,255,.18)!important}
.role-tab:not(.on)>span[aria-hidden]{display:none}
.role-tab.on>span[aria-hidden]>span{background:var(--teal-300)!important}
.role-panel{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.25fr);gap:88px;align-items:center;text-align:left}
.role-copy>*{animation:riseIn 520ms var(--ease-out) both}
.role-copy>*:nth-child(2){animation-delay:60ms}.role-copy>*:nth-child(3){animation-delay:120ms}.role-copy>*:nth-child(4){animation-delay:180ms}.role-copy>*:nth-child(5){animation-delay:240ms}
.role-feats{list-style:none;margin:4px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 20px}
.role-feats li{display:flex;gap:12px;align-items:center;font:500 15px/1.35 var(--font-sans);color:var(--text-strong)}
.role-feats .mega-ico{flex:none}
.role-visual{position:relative;padding:0 8px}
.role-base{animation:riseIn 600ms var(--ease-out) both}
.cutout{position:absolute;z-index:2;border-radius:14px;background-repeat:no-repeat;background-color:#fff;box-shadow:0 28px 60px rgba(17,21,43,.22),0 0 0 1px rgba(15,23,42,.06);opacity:0;animation:cutIn 640ms var(--ease-out) forwards,floaty 8s ease-in-out 1200ms infinite}
@keyframes cutIn{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
@media (max-width:1080px){.role-panel{grid-template-columns:minmax(0,1fr);gap:56px}.role-copy{max-width:640px}.role-visual{padding:0 40px 48px}.cutout{zoom:.8}}
@media (max-width:920px){.cutout{zoom:.65}}
@media (max-width:640px){.role-feats{grid-template-columns:minmax(0,1fr)}.cutout{display:none}.role-tab{padding:0 16px}}
@media (prefers-reduced-motion:reduce){.cutout,.role-copy>*,.role-base{opacity:1!important;animation:none!important}}

/* ── Round 1 feedback, 28/10/26 ── */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Count-up: the final value holds the width, the live value sits on top */
.count{display:inline-grid;font-variant-numeric:tabular-nums}
.count>.count-final,.count>.count-live{grid-area:1/1}
.count>.count-final{visibility:hidden}
/* Cut-outs and callouts wait for their section to reveal before animating in */
.reveal:not(.in) .cutout,.reveal:not(.in) .callout{animation-play-state:paused}

/* Hero reviews badge (after the example site: Google mark, stars, figure) */
.review-badge{display:inline-flex;align-items:center;gap:12px;padding:10px 18px 10px 14px;border-radius:999px;background:#fff;box-shadow:var(--shadow-card),0 0 0 1px var(--border-subtle);color:var(--grey-600);font:400 14px var(--font-sans);transition:box-shadow var(--dur-base) var(--ease-standard)}
.review-badge:hover{color:var(--grey-600);text-decoration:none;box-shadow:var(--shadow-raised),0 0 0 1px var(--border-default)}
.review-stars{display:flex;gap:2px}
.review-txt b{color:var(--text-strong);font-weight:600}
/* Partner logos: square placeholders on a continuous scroll */
.logo-marquee{margin-top:28px}
.logo-track{animation-duration:40s;padding:4px 0}
.ph-logo.sq{width:120px;height:120px;flex:none;border-radius:var(--radius-lg)}
/* Speed panel build steps */
.speed-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.speed-steps li{display:flex;gap:12px;align-items:center;padding:14px 16px;border-radius:var(--radius-lg);background:rgba(255,255,255,.06);border:1px solid var(--border-inverse);font:500 14px/1.35 var(--font-sans);color:#fff}
.speed-steps li>span:last-child{display:grid;gap:2px}
.speed-step-n{font:500 11px var(--font-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--teal-300)}
.speed-step-ico{width:32px;height:32px;flex:none;border-radius:9px;display:flex;align-items:center;justify-content:center;background:rgba(127,190,197,.16);color:var(--teal-300)}
/* Security: framed panel with a numbered, ruled list */
.secure-panel{padding:64px;border-radius:24px;background:linear-gradient(135deg,var(--teal-50) 0%,#fff 55%);box-shadow:0 0 0 1px var(--border-subtle),var(--shadow-raised)}
.rules{list-style:none;margin:12px 0 0;padding:0;display:grid}
.rules li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;align-items:start;padding:20px 0;border-top:1px solid var(--border-subtle)}
.rules li:last-child{border-bottom:1px solid var(--border-subtle)}
.rules-ico{display:flex;height:27px;align-items:center}
/* Case studies as a blog feed */
.post{padding:0;overflow:hidden;display:flex;flex-direction:column}
.post-cover{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--grey-100)}
.post-cover img{width:100%;height:100%;object-fit:cover;display:block}
.post-body{padding:24px 28px 28px;display:flex;flex-direction:column;gap:14px;flex:1}
.post-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font:400 13px var(--font-sans);color:var(--text-muted)}
.post-title{color:inherit}.post-title:hover{color:var(--accent);text-decoration:none}
/* Testimonials on a scroll */
.testi-track{animation-duration:70s;align-items:stretch}
.testi{width:380px;flex:none;margin:0;display:flex;flex-direction:column;gap:18px}
.testi blockquote{margin:0;font:400 17px/1.6 var(--font-sans);color:var(--text-strong)}
.testi figcaption{display:grid;gap:2px;margin-top:auto}
.testi-name{font:500 14px var(--font-sans);color:var(--text-strong)}
.testi-role{font:400 13px var(--font-sans);color:var(--text-muted)}
/* Sticky "Book a 15-min demo" bar */
.sticky-demo{position:fixed;left:50%;bottom:20px;z-index:60;transform:translate(-50%,calc(100% + 40px));opacity:0;pointer-events:none;transition:transform 420ms var(--ease-out),opacity 300ms var(--ease-standard)}
.sticky-demo.on{transform:translate(-50%,0);opacity:1;pointer-events:auto}
.sticky-demo-inner{display:flex;align-items:center;gap:20px;padding:8px 8px 8px 20px;border-radius:999px;background:var(--navy-900);box-shadow:0 18px 44px rgba(17,21,43,.32),0 0 0 1px rgba(255,255,255,.08)}
.sticky-demo-txt{display:flex;align-items:center;gap:12px;font:500 15px var(--font-sans);color:#fff;white-space:nowrap}
.sticky-demo-ico{width:32px;height:32px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:rgba(127,190,197,.18);color:var(--teal-300)}
@media (max-width:920px){.speed-steps{grid-template-columns:minmax(0,1fr)}.secure-panel{padding:40px 28px}}
@media (max-width:640px){
  .sticky-demo{left:12px;right:12px;bottom:12px;transform:translateY(calc(100% + 24px))}
  .sticky-demo.on{transform:none}
  .sticky-demo-inner{padding:8px;justify-content:center}
  .sticky-demo-txt{display:none}
  .sticky-demo-inner>button{flex:1}
  .testi{width:300px}
  .ph-logo.sq{width:96px;height:96px}
  .secure-panel{padding:28px 20px}
}
@media (prefers-reduced-motion:reduce){.sticky-demo{transition:none}}
main{overflow-x:clip}
@media (max-width:920px){.split>[style*="sticky"]{position:static!important}}
@media (max-width:640px){.role-visual{padding:0}}
/* Testimonials: real quotes, long ones clamp with a toggle */
.testi blockquote p{margin:0}.testi blockquote p+p{margin-top:12px}
/* Optional add-ons table (stacks to labelled rows on mobile) */
.addons{max-width:1080px;margin:72px auto 0;display:grid;gap:24px}
.addons-table{border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 0 0 1px var(--border-subtle)}
.addons-row{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.3fr) 110px minmax(0,2fr);gap:24px;padding:16px 24px;align-items:center;font:400 15px/1.5 var(--font-sans);color:var(--grey-700)}
.addons-row:nth-child(odd):not(.addons-head){background:var(--grey-50)}
.addons-head{background:var(--navy-900);color:#fff;font-weight:500;padding-top:14px;padding-bottom:14px}
.addons-head span:nth-child(3),.addons-fee{text-align:right}
.addons-fee{font:600 16px var(--font-sans);color:var(--accent);font-variant-numeric:tabular-nums}
.addons-feat{color:var(--text-strong);font-weight:500}
.addons-note{margin:0;font:400 14px/1.6 var(--font-sans);color:var(--text-muted)}.addons-note b{color:var(--text-strong);font-weight:600}
@media (max-width:920px){
  .addons-head{display:none}
  .addons-row{grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;padding:18px 20px}
  .addons-row>span:nth-child(1){grid-column:1/-1;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}
  .addons-row>span:nth-child(4){grid-column:1/-1;font-size:14px}
}
/* "Design by Five by Five" credit, as on other Five by Five builds */
.fbf-credit{display:inline-flex;align-items:center;gap:9px;opacity:.65;transition:opacity .2s;color:#fff!important;font-weight:600;text-decoration:none}
.fbf-credit:hover,.fbf-credit:focus-visible{opacity:1;color:#fff!important;text-decoration:none}
.fbf-credit img{height:24px;width:auto;display:block}
/* Case-study cards: one fixed size; a long card scrolls inside its body instead of growing */
.post{height:520px}
.post-cover{flex:none}
.post-body{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--grey-300) transparent}
.post-body::-webkit-scrollbar{width:6px}.post-body::-webkit-scrollbar-thumb{background:var(--grey-300);border-radius:6px}
@media (max-width:640px){.post{height:520px}.hdr-logo img{height:42px!important}}
.post-cover{aspect-ratio:auto;height:236px}

/* ── Type system (Wayde, 28/10/26): two heading formats and two body formats, page wide.
   Declared last with !important so the inline font sizes left in the panels cannot drift from it.
   UI text (nav, buttons, badges, form fields, card meta, captions, stat figures, footer) is component
   styling, not body copy, and is outside these four. ── */
:root{
  --type-heading-1:600 clamp(32px,3.6vw,48px)/1.1 var(--font-display);
  --type-heading-2:600 20px/1.3 var(--font-display);
  --type-body-1:400 18px/1.6 var(--font-sans);
  --type-body-2:400 16px/1.6 var(--font-sans);
}
.h1,.h2{font:var(--type-heading-1)!important;letter-spacing:-.022em!important}
.h3,.faq summary,.feat-title{font:var(--type-heading-2)!important;letter-spacing:-.01em!important}
.faq summary h3{font:inherit!important;letter-spacing:inherit!important}
.lede{font:var(--type-body-1)!important}
.body,.check li,.role-feats li,.testi blockquote,.speed-steps li{font:var(--type-body-2)!important}
@media (min-width:921px) and (max-width:1100px){.post{height:610px}}
/* Testimonials: one fixed card size; long quotes scroll inside the card (replaces the Read more toggle) */
.testi-track{align-items:stretch}
.testi{height:360px;overflow:hidden}
.testi blockquote.testi-quote{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-right:8px;margin-right:-8px;scrollbar-width:thin;scrollbar-color:var(--grey-300) transparent}
.testi-quote::-webkit-scrollbar{width:6px}.testi-quote::-webkit-scrollbar-thumb{background:var(--grey-300);border-radius:6px}
.testi-quote:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px}
.testi figcaption{flex:none}
@media (max-width:640px){.testi{height:400px}}
.testi.scrolls:not(.at-end) .testi-quote{-webkit-mask-image:linear-gradient(#000 calc(100% - 40px),transparent);mask-image:linear-gradient(#000 calc(100% - 40px),transparent)}

/* ── Icon system (Wayde, 28/10/26). One family: Font Awesome 6 solid via the DS Icon component.
   Feature icons: always the same tile (40px, radius 10, teal-50 ground, 16px teal glyph), on light or dark.
   List markers (tick / cross): unboxed bullets, 14px. Controls (arrows, chevrons, FAQ plus, nav lock, menu,
   tab buttons) and ratings (stars, quote mark, Google G) are UI, not feature icons. ── */
.mega-ico{width:40px!important;height:40px!important;flex:none!important;border-radius:10px!important;background:var(--accent-soft)!important;color:var(--accent)!important;display:flex!important;align-items:center;justify-content:center}
.mega-ico>i{font-size:16px!important;color:var(--accent)!important}
.check li>i{font-size:14px!important;margin-top:4px}
/* places that previously set their own icon box */
.feat-tab:not(.on) .mega-ico{opacity:.6}
.rules li{align-items:start}
.rules li>.mega-ico{margin-top:-7px}
.speed-steps li{padding:12px 16px}
.sticky-demo-inner{padding-left:8px}
.sticky-demo-txt{gap:14px}
.secure-panel{background:#fff}

/* Problem comparison (restyled 28/10/26): two boxes, paired rows, arrows between */
.cmp{display:grid;grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr);grid-template-rows:repeat(5,auto);max-width:1040px;margin:0 auto}
.cmp-box{grid-row:1/6;border-radius:var(--radius-xl)}
.cmp-box-before{grid-column:1;background:var(--grey-100)}
.cmp-box-after{grid-column:3;background:#fff;box-shadow:0 0 0 2px var(--accent),var(--shadow-raised)}
.cmp-cell{grid-row:var(--r);position:relative;z-index:1;margin:0;padding:16px 36px}
.cmp-before{grid-column:1}.cmp-after{grid-column:3}
.cmp-head{padding-top:32px;padding-bottom:20px}
p.cmp-cell{display:flex;gap:14px;align-items:flex-start}
p.cmp-cell>i{margin-top:5px;flex:none}
p.cmp-cell::before{content:'';position:absolute;left:36px;right:36px;top:0;border-top:1px solid var(--border-subtle)}
.cmp-before.body{color:var(--grey-500)}.cmp-after.body{color:var(--text-strong)}
.cmp-before.cmp-head{color:var(--grey-600)}
.cmp-last{padding-bottom:32px!important}
.cmp-arrow{grid-column:2;grid-row:1/6;z-index:1;align-self:center;justify-self:center;width:40px;height:40px;border-radius:999px;background:#fff;box-shadow:var(--shadow-card),0 0 0 1px var(--border-subtle);display:flex;align-items:center;justify-content:center;color:var(--accent)}
@media (max-width:760px){
  .cmp{grid-template-columns:minmax(0,1fr);grid-template-rows:none;row-gap:0}
  .cmp-box-before{grid-column:1;grid-row:1/6}
  .cmp-box-after{grid-column:1;grid-row:6/11;margin-top:16px}
  .cmp-cell{grid-row:var(--rm);grid-column:1;padding:14px 24px}
  .cmp-after.cmp-head{margin-top:16px}
  .cmp-head{padding-top:24px;padding-bottom:12px}
  p.cmp-cell::before{left:24px;right:24px}
  .cmp-arrow{display:none}
}

/* Live in four steps: scroll-driven stepper (28/10/26, v2) */
.how-split{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)!important;align-items:start}
.how-intro{position:sticky;top:140px;display:grid;gap:18px;align-content:start}
.stepper{list-style:none;margin:0;padding:0;position:relative;display:grid;gap:20px}
.stepper-rail{position:absolute;left:19px;width:2px;border-radius:2px;background:var(--border-default)}
.stepper-fill{position:absolute;left:0;top:0;width:100%;border-radius:2px;background:var(--accent);transition:height 700ms var(--ease-out)}
.stepper-step{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr);gap:24px;align-items:start}
.stepper-step>.mega-ico{position:relative;z-index:1;margin-top:17px;box-shadow:0 0 0 6px var(--grey-50);transition:transform 500ms var(--ease-out)}
.stepper-step.on>.mega-ico{transform:scale(1.08)}
.stepper-card{display:grid;gap:10px;padding:24px 28px;border-radius:var(--radius-lg);background:transparent;box-shadow:0 0 0 1px var(--border-subtle);opacity:.5;transform:translateX(10px);transition:opacity 500ms var(--ease-standard),transform 600ms var(--ease-out),background 500ms var(--ease-standard),box-shadow 500ms var(--ease-standard)}
.stepper-step.on .stepper-card{opacity:1;transform:none;background:#fff;box-shadow:var(--shadow-raised),0 0 0 1px var(--border-subtle)}
@media (max-width:920px){.how-split{grid-template-columns:minmax(0,1fr)!important}.how-intro{position:static}}
@media (max-width:640px){.stepper-step{gap:16px}.stepper-card{padding:20px}.stepper-step>.mega-ico{margin-top:13px}}
@media (prefers-reduced-motion:reduce){.stepper-fill,.stepper-card,.stepper-step>.mega-ico{transition:none!important}}

/* ── Loom feedback, 29/10/26 ── */
/* Secondary CTAs carry their hover fill by default; without it they read as plain text */
.btn-soft{background:var(--accent-soft)!important}
.btn-soft:hover{background:var(--teal-100)!important}
/* CTA pairs sit side by side; they only stack on phones */
.cta-pair{display:flex;gap:12px;flex-wrap:nowrap;align-items:center}
@media (min-width:1081px) and (max-width:1240px){.role-panel{gap:56px}}
@media (max-width:520px){.cta-pair{flex-direction:column;align-items:stretch}.cta-pair>button{width:100%}}

/* Problem comparison: rows arrive in turn, clocks run underneath */
.cmp{grid-template-rows:repeat(6,auto)}
.cmp-box{grid-row:1/7}
.cmp p.cmp-cell{transition:opacity 420ms var(--ease-standard),transform 420ms var(--ease-out)}
.cmp p.cmp-cell:not(.on){opacity:0;transform:translateY(6px)}
.cmp-box-after{transition:box-shadow 500ms var(--ease-standard)}
.cmp-box-after.done{box-shadow:0 0 0 2px var(--accent),0 0 0 8px var(--accent-ring),var(--shadow-raised)}
/* Arrow spans all six rows so it centres on the boxes; the gutter is wide enough that the 8px "done" ring clears it */
.cmp-arrow{grid-row:1/7}
@media (min-width:761px){.cmp{grid-template-columns:minmax(0,1fr) 80px minmax(0,1fr)}}
/* Timer: label on its own line, clock and badge beneath, so the label never runs under the clock */
.cmp .cmp-timer{grid-template-columns:minmax(0,1fr);gap:10px}
.cmp .cmp-clock{justify-self:start;flex-wrap:wrap}
.cmp-timer{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px 16px;align-items:center;padding-top:22px!important}
.cmp-timer::before{content:'';position:absolute;left:36px;right:36px;top:0;border-top:1px solid var(--border-subtle)}
.cmp-timer-l{display:flex;gap:10px;align-items:center;font:500 14px var(--font-sans);color:var(--grey-600)}
.cmp-before .cmp-timer-l i{color:var(--grey-400)}.cmp-after .cmp-timer-l i{color:var(--accent)}
.cmp-clock{justify-self:end;display:flex;gap:10px;align-items:center;font:600 28px/1 var(--font-display);letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--navy-900)}
.cmp-before .cmp-clock{color:var(--grey-500)}
.cmp-bar{grid-column:1/-1;height:6px;border-radius:6px;background:var(--grey-200);overflow:hidden}
.cmp-bar>span{display:block;height:100%;background:var(--grey-400);transform-origin:left}
.cmp-after .cmp-bar{background:var(--accent-soft)}.cmp-after .cmp-bar>span{background:var(--accent)}
.cmp-done{display:inline-flex;gap:6px;align-items:center;padding:5px 10px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font:500 13px var(--font-sans);animation:riseIn 400ms var(--ease-out) both}
@media (max-width:760px){
  .cmp-box-before{grid-row:1/7}
  .cmp-box-after{grid-row:7/13}
  .cmp-timer::before{left:24px;right:24px}
  .cmp-clock{font-size:22px}
  .cmp-timer{grid-template-columns:minmax(0,1fr)}
  .cmp-clock{justify-self:start}
}

/* Speed panel: animated package build, driven by the step buttons */
.pub{position:relative;height:400px;padding:28px;background:#fff;overflow:hidden;font-family:var(--font-sans)}
.pub-pane{animation:riseIn 420ms var(--ease-out) both}
.pub-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;font:600 18px var(--font-display);color:var(--navy-900)}
.pub-count{padding:4px 10px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font:500 13px var(--font-sans);font-variant-numeric:tabular-nums}
.pub-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.pub-field{display:grid;gap:6px}
.pub-label{font:500 12px var(--font-sans);color:var(--grey-500)}
.pub-input{display:flex;align-items:center;height:42px;padding:0 14px;border-radius:10px;border:1px solid var(--border-default);font:500 15px var(--font-sans);color:var(--navy-900);white-space:nowrap;overflow:hidden;transition:border-color 200ms,box-shadow 200ms}
.pub-field.focus .pub-input{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}
.pub-pill{display:inline-flex;padding:3px 10px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font:500 13px var(--font-sans);animation:riseIn 300ms var(--ease-out) both}
.caret{display:inline-block;width:2px;height:18px;margin-left:1px;background:var(--accent);animation:blink 900ms steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.pub-photo{margin-top:18px;height:120px;border-radius:12px;overflow:hidden;transition:opacity 500ms var(--ease-standard)}
.pub-photo img,.pub-card img{display:block;width:100%;height:100%;object-fit:cover}
.pub-docs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.pub-doc{display:grid;grid-template-columns:auto minmax(0,1fr) 14px;gap:8px 10px;align-items:center;padding:12px 14px;border-radius:12px;border:1px solid var(--border-subtle);color:var(--grey-500);opacity:0;transform:translateY(8px);transition:opacity 300ms,transform 300ms var(--ease-out),border-color 300ms}
.pub-doc.in{opacity:1;transform:none}
.pub-doc.ok{border-color:var(--teal-100)}
.pub-doc>span:nth-of-type(1){font:500 14px var(--font-sans);color:var(--navy-900);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pub-doc-bar{grid-column:1/-1;height:4px;border-radius:4px;background:var(--grey-100);overflow:hidden}
.pub-doc-bar>span{display:block;height:100%;background:var(--accent);transform-origin:left}
.pub-doc.ok .pub-doc-bar{visibility:hidden}
.pub-live{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:24px;align-items:center}
.pub-doc-ok{display:flex;width:14px}
.pub-card{border-radius:14px;overflow:hidden;box-shadow:var(--shadow-card),0 0 0 1px var(--border-subtle)}
.pub-card img{height:150px}
.pub-card-b{display:grid;gap:2px;padding:12px 14px;font:400 13px var(--font-sans);color:var(--grey-500)}
.pub-card-b b{font:600 15px var(--font-sans);color:var(--navy-900)}
.pub-price{font:600 16px var(--font-display)!important;color:var(--navy-900)!important;margin-top:4px}
.pub-share{display:grid;gap:12px}
.pub-toggle-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;border:1px solid var(--border-subtle);font:500 14px var(--font-sans);color:var(--navy-900)}
.pub-toggle{position:relative;flex:none;width:38px;height:22px;border-radius:22px;background:var(--grey-300);transition:background 300ms}
.pub-toggle::after{content:'';position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform 300ms var(--ease-out)}
.pub-toggle.on{background:var(--accent)}.pub-toggle.on::after{transform:translateX(16px)}
.pub-btn{display:flex;align-items:center;justify-content:center;height:44px;border-radius:999px;background:var(--accent);color:#fff;font:500 15px var(--font-sans);transition:transform 150ms,background 150ms}
.pub-btn.press{transform:scale(.96);background:var(--accent-hover)}
.pub-toast{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);display:flex;gap:12px;align-items:center;padding:12px 18px;border-radius:14px;background:#fff;box-shadow:var(--shadow-popover),0 0 0 1px var(--border-subtle);white-space:nowrap;animation:toastIn 420ms var(--ease-out) both}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}
.pub-toast>span{display:grid;gap:2px;font:400 12px var(--font-sans);color:var(--grey-500)}
.pub-toast b{font:600 14px var(--font-sans);color:var(--navy-900)}
.speed-steps li{padding:0!important;background:none!important;border:0!important}
.speed-step{position:relative;overflow:hidden;width:100%;height:100%;display:flex;gap:12px;align-items:center;padding:12px 16px;border-radius:var(--radius-lg);background:rgba(255,255,255,.06);border:1px solid var(--border-inverse);color:rgba(255,255,255,.75);font:inherit;text-align:left;cursor:pointer;transition:background var(--dur-base),border-color var(--dur-base),color var(--dur-base)}
.speed-step:hover{background:rgba(255,255,255,.1)}
.speed-step.on{background:rgba(255,255,255,.12);border-color:rgba(127,190,197,.55);color:#fff}
.speed-step>span:nth-child(2){display:grid;gap:2px}
.speed-step>span[aria-hidden]{background:rgba(255,255,255,.12)!important}
.speed-step>span[aria-hidden]>span{background:var(--teal-300)!important}
@media (max-width:640px){
  .pub{height:470px;padding:20px}
  .pub-fields,.pub-docs,.pub-live{grid-template-columns:minmax(0,1fr)}
  .pub-live{gap:16px}
  .pub-card img{height:96px}
  .pub-photo{display:none}
  .pub-toast{top:14px;bottom:auto}
  @keyframes toastIn{from{opacity:0;transform:translate(-50%,-12px)}to{opacity:1;transform:translate(-50%,0)}}
}
@media (prefers-reduced-motion:reduce){.pub-pane,.pub-doc,.pub-toast,.caret,.cmp p.cmp-cell{animation:none!important;transition:none!important}}

/* "How it works" walkthrough modal */
.how-modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(17,21,43,.72);backdrop-filter:blur(4px);animation:fadeIn 200ms var(--ease-standard)}
.how-modal-box{width:min(960px,100%);max-height:100%;overflow:auto;border-radius:20px;background:#fff;box-shadow:var(--shadow-popover)}
.how-modal-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 16px 14px 24px;border-bottom:1px solid var(--border-subtle)}
.how-modal-x{flex:none;width:40px;height:40px;border-radius:999px;border:1px solid var(--border-subtle);background:#fff;color:var(--grey-700);display:flex;align-items:center;justify-content:center;cursor:pointer}
.how-modal-x:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.how-modal-frame{aspect-ratio:16/9;background:var(--navy-950)}
.how-modal-frame iframe{display:block;width:100%;height:100%;border:0}
.how-modal-ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:20px;text-align:center;color:#fff;font:500 16px var(--font-sans);background:linear-gradient(rgba(17,21,43,.84),rgba(17,21,43,.84)),url(assets/imagery/aerial-suburb-teal.png) center/cover}
.how-modal-play{width:72px;height:72px;border-radius:999px;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 10px rgba(127,190,197,.18)}
.how-modal-sub{font:400 14px var(--font-sans);color:rgba(255,255,255,.6)}
.how-modal-foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px 24px;padding:16px 24px}

/* Pricing heading on one line from tablet up */
.price-head .sec-head{max-width:900px}
@media (min-width:641px){.price-head .h2{white-space:nowrap}}


/* Closing CTA load-in: copy rises in turn, then the form lifts and its rows settle */
.demo-in.reveal{opacity:1;transform:none}
.demo-in .di{opacity:0;transform:translateY(18px);transition:opacity 600ms var(--ease-out),transform 700ms var(--ease-out);transition-delay:calc(var(--d) * 110ms)}
.demo-in .check li.di{transform:translateX(-12px)}
.demo-in .check li.di>i{transform:scale(0);transition:transform 420ms var(--ease-out);transition-delay:calc(var(--d) * 110ms + 220ms)}
.demo-in.in .di{opacity:1;transform:none}
.demo-in.in .check li.di>i{transform:none}
.demo-in .demo-form-in{opacity:0;transform:translateY(32px) scale(.98);transition:opacity 700ms var(--ease-out) 300ms,transform 900ms var(--ease-out) 300ms}
.demo-in.in .demo-form-in{opacity:1;transform:none}
.demo-in .demo-form-in>*{opacity:0;transform:translateY(10px);transition:opacity 500ms var(--ease-out),transform 500ms var(--ease-out)}
.demo-in.in .demo-form-in>*{opacity:1;transform:none}
.demo-in.in .demo-form-in>*:nth-child(1){transition-delay:550ms}
.demo-in.in .demo-form-in>*:nth-child(2){transition-delay:640ms}
.demo-in.in .demo-form-in>*:nth-child(3){transition-delay:730ms}
.demo-in.in .demo-form-in>*:nth-child(4){transition-delay:820ms}
@media (prefers-reduced-motion:reduce){.demo-in .di,.demo-in .check li.di>i,.demo-in .demo-form-in,.demo-in .demo-form-in>*{opacity:1!important;transform:none!important;transition:none!important}}