/* ---------------------------------------------------------------------------
   The home page (template-parts/home-scenes.php, assets/js/home.js).

   Fifteen sections, each sized to the screen it is read on (100svh less the header).
   Cinematic dark bands (hero, how it works, the film, the way in) carry a slow aurora, a
   perspective grid floor and stars; the white sections between them stay calm. Motion
   comes from the partnerships page: headings rise word by word out of a mask, cards fly
   in from depth, a 3D orbit turns, steps stack with a line that draws as they are
   scrolled, the film grows to the width of the screen, a spotlight follows the pointer,
   and a section navigator tracks the reader. Every word is real text at full strength;
   motion never dims it. Reduced motion turns it all off.
   ------------------------------------------------------------------------- */
@property --rot{syntax:'<angle>';inherits:true;initial-value:0deg}
.lp .hz{--hdr:72px;--bg:#fff;--bg2:#f5f7f6;--ink:#101815;--ink2:#3a4642;--mute:#56635e;--green:#0d3d35;--green2:#1f6b52;--mint:#7fd8b0;--hl:#dcf1e5;--line:#e1e7e4;
  --ease:cubic-bezier(.2,.8,.2,1);background:var(--bg);color:var(--ink);overflow-x:clip}
.lp .hz *{box-sizing:border-box}
.lp .hz-in{position:relative;z-index:1;width:100%;max-width:1220px;margin:0 auto;padding:0 28px}
.lp .hz :focus-visible{outline:2px solid var(--green2);outline-offset:3px}

/* Every section fills the screen and centres what it holds. */
.lp .hz-sec,.lp .hz-hero{position:relative;display:flex;flex-direction:column;justify-content:center;min-height:calc(100svh - var(--hdr));padding:clamp(28px,6.5vh,84px) 0;background:var(--bg);scroll-margin-top:var(--hdr)}
.lp .hz-lib2,.lp .hz-fit,.lp .hz-made{background:var(--bg2)}
.lp .hz-c{position:relative;z-index:1;margin:clamp(16px,3vh,32px) 0 0;text-align:center}

/* Dark bands */
.lp .hz-dark{--ink:#f2f8f5;--ink2:#cbdad3;--mute:#a7bab2;--line:rgba(255,255,255,.12);--hl:rgba(127,216,176,.16);
  background:radial-gradient(120% 80% at 80% 0%,#0f3a30 0%,transparent 55%),radial-gradient(90% 70% at 0% 100%,#0b2e27 0%,transparent 60%),#05110d;color:var(--ink);overflow:clip}
.lp .hz-dark .hz-h1 em,.lp .hz-dark .hz-h2 em{color:#9fe6c4}
.lp .hz-dark .hz-chip{background:rgba(255,255,255,.08);color:#bfead6;border:1px solid rgba(255,255,255,.1)}
.lp .hz-dark a.hz-btn--solid{background:var(--mint);color:#04231a}
.lp .hz-dark a.hz-btn--solid:hover{background:#9fe6c4}
.lp .hz-dark a.hz-btn--line{background:transparent;border-color:rgba(255,255,255,.4);color:#fff}
.lp .hz-dark a.hz-btn--line:hover{border-color:#fff}

/* Decorative layers: aurora, grid floor, stars. */
.lp .hz-fx{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.lp .hz-aurora{position:absolute;inset:-35%;background:conic-gradient(from 90deg at 60% 45%,rgba(127,216,176,.20),rgba(31,107,82,.05),rgba(217,164,65,.12),rgba(127,216,176,.04),rgba(56,170,140,.18),rgba(127,216,176,.20));filter:blur(70px);animation:hzSpin 46s linear infinite}
.lp .hz-aurora--soft{opacity:.6}
.lp .hz-floor{position:absolute;left:-50%;right:-50%;bottom:-6%;height:52%;background-image:linear-gradient(rgba(127,216,176,.22) 1px,transparent 1px),linear-gradient(90deg,rgba(127,216,176,.22) 1px,transparent 1px);background-size:68px 68px;
  transform:perspective(520px) rotateX(72deg);transform-origin:50% 100%;-webkit-mask:linear-gradient(to top,#000 0%,transparent 78%);mask:linear-gradient(to top,#000 0%,transparent 78%);animation:hzGrid 2.6s linear infinite}
.lp .hz-floor--low{height:40%;opacity:.7}
.lp .hz-stars{position:absolute;inset:0;background-image:radial-gradient(1.5px 1.5px at 12% 22%,rgba(255,255,255,.7),transparent),radial-gradient(1px 1px at 32% 68%,rgba(255,255,255,.5),transparent),radial-gradient(1.5px 1.5px at 58% 14%,rgba(191,234,214,.8),transparent),radial-gradient(1px 1px at 76% 42%,rgba(255,255,255,.55),transparent),radial-gradient(1.5px 1.5px at 88% 78%,rgba(191,234,214,.7),transparent),radial-gradient(1px 1px at 46% 88%,rgba(255,255,255,.4),transparent),radial-gradient(1px 1px at 6% 82%,rgba(255,255,255,.5),transparent);
  background-size:100% 100%;animation:hzTwinkle 6s ease-in-out infinite alternate}
.lp .hz-glow{position:absolute;left:50%;top:55%;width:min(1200px,130vw);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%) scale(calc(.7 + var(--fp,0) * .6));background:radial-gradient(circle,rgba(127,216,176,.30) 0%,rgba(31,107,82,.22) 32%,transparent 66%);filter:blur(12px)}
@keyframes hzSpin{to{transform:rotate(360deg)}}
@keyframes hzGrid{to{background-position:0 68px,0 0}}
@keyframes hzTwinkle{from{opacity:.55}to{opacity:1}}

/* Type */
.lp .hz-chip{display:inline-block;margin-bottom:clamp(10px,2vh,18px);padding:6px 12px;border-radius:8px;background:#ebf2ee;color:var(--green);font-size:12.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.lp .hz-chip--sm{font-size:11px;padding:4px 10px;margin:0}
.lp .hz h1.hz-h1{margin:0;font-size:clamp(34px,min(4.1vw,7.4vh),62px);line-height:1.05;letter-spacing:-.04em;font-weight:700;color:var(--ink);text-wrap:balance}
.lp .hz-h2{margin:0;font-size:clamp(28px,min(4.2vw,6.6vh),58px);line-height:1.08;letter-spacing:-.035em;font-weight:700;color:var(--ink);text-wrap:balance}
.lp .hz-h1 em,.lp .hz-h2 em{font-style:normal;color:var(--green);background-color:transparent;transition:background-color .8s .55s;border-radius:.18em;padding:0 .12em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.lp .hz-h1.is-in em,.lp .hz-h2.is-in em{background-color:var(--hl)}
.lp .hz-lead{margin:clamp(14px,2.6vh,24px) 0 0;max-width:46ch;font-size:clamp(16px,min(1.45vw,2.3vh),20px);line-height:1.55;color:var(--ink2)}
.lp .hz-sub{margin:clamp(10px,2vh,18px) 0 0;max-width:58ch;font-size:clamp(16px,min(1.35vw,2.2vh),19px);line-height:1.55;color:var(--ink2)}
.lp .hz-head{margin-bottom:clamp(18px,4.5vh,52px)}
.lp .hz-head--c{text-align:center}
.lp .hz-head--c .hz-sub{margin-left:auto;margin-right:auto}
.lp .hz-head--split{display:flex;align-items:flex-end;justify-content:space-between;gap:32px}
.lp .hz-head--split .hz-sub{max-width:44ch;margin:0}
.lp .hz-sec h3{margin:0;color:var(--ink);letter-spacing:-.02em}

/* Headings rise word by word out of a mask (the partnerships page's reveal). */
.lp .hz .lp__words .lp__w{display:inline-block;opacity:1;filter:none;transform:translateY(.9em) rotate(3deg);clip-path:inset(-.3em -.2em 100% -.2em);
  transition:transform 1.05s var(--ease),clip-path 1.05s var(--ease);transition-delay:var(--d,0ms)}
.lp .hz .lp__words.is-in .lp__w{transform:none;clip-path:inset(-.3em -.2em -.3em -.2em)}
.lp.is-live .hz .lp__words[data-lp-in]{opacity:1;transform:none}

/* Arrivals: from depth, rising, flipping, wiping. */
.lp.is-live .hz [data-hz-fx]{transition:opacity 1s var(--ease),transform 1.25s var(--ease),clip-path 1.2s var(--ease),box-shadow .35s,border-color .35s,background .35s;transition-delay:var(--d,0ms)}
.lp.is-live .hz [data-hz-fx="tile"]:not(.is-in){opacity:0;transform:perspective(1200px) rotateY(-34deg) rotateX(8deg) translate3d(-40px,30px,-180px)}
.lp.is-live .hz [data-hz-fx="rise"]:not(.is-in){opacity:0;transform:perspective(1200px) rotateX(16deg) translateY(70px) scale(.95)}
.lp.is-live .hz [data-hz-fx="flip"]:not(.is-in){opacity:0;transform:perspective(1000px) rotateX(55deg) translateY(50px);transform-origin:50% 0}
.lp.is-live .hz [data-hz-fx="pop"]:not(.is-in){opacity:0;transform:translate(-50%,-50%) scale(.8)}
.lp.is-live .hz [data-hz-fx="left"]:not(.is-in){opacity:0;transform:translateX(-50px)}
.lp.is-live .hz [data-hz-fx="zoom"]:not(.is-in){opacity:0;transform:perspective(1400px) rotateY(-18deg) scale(.86)}
.lp.is-live .hz [data-hz-fx="wipe"]:not(.is-in){opacity:0;clip-path:inset(0 0 82% 0 round 22px);transform:translateY(30px)}
.lp.is-live .hz [data-hz-fx="wipe"].is-in{clip-path:inset(0 0 0 0 round 22px)}

/* Spotlight and tilt under the pointer. */
.lp .hz [data-hz-tilt]{position:relative;isolation:isolate}
.lp .hz [data-hz-tilt]::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(47,166,122,.16),transparent 62%);opacity:0;transition:opacity .35s}
.lp .hz [data-hz-tilt].is-tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-5px)!important;transition:transform .12s linear,box-shadow .4s!important;box-shadow:0 40px 70px -40px rgba(13,61,53,.45)}
.lp .hz [data-hz-tilt].is-tilt::after{opacity:1}

/* Buttons and links */
.lp .hz-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(18px,3.4vh,32px)}
.lp .hz-ctas--sized>span{display:grid;justify-items:center;gap:8px}
.lp .hz-ctas--sized small{font-size:13.5px;color:var(--mute)}
.lp .hz-btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 26px;border-radius:999px;font-size:16.5px;font-weight:600;text-decoration:none;transition:background .2s,border-color .2s,color .2s,translate .35s var(--ease),box-shadow .3s}
.lp .hz-btn::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s var(--ease)}
.lp .hz-btn:hover::before{transform:translateX(120%)}
.lp .hz-btn svg,.lp .hz-link svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.lp .hz-btn:hover svg,.lp .hz-link:hover svg{transform:translateX(3px)}
.lp a.hz-btn--solid{background:var(--green);color:#fff;box-shadow:0 14px 30px -16px rgba(13,61,53,.7)}
.lp a.hz-btn--solid:hover{background:#0a302a}
.lp a.hz-btn--line{border:1.5px solid #c3cfca;color:var(--green);background:#fff}
.lp a.hz-btn--line:hover{border-color:var(--green)}
.lp a.hz-btn--soft{background:#e4eee9;color:var(--green)}
.lp a.hz-btn--soft:hover{background:#d6e7de}
.lp a.hz-btn--light{background:#fff;color:#0a2e25}
.lp a.hz-btn--ghost{border:1.5px solid rgba(255,255,255,.45);color:#fff}
.lp a.hz-btn--ghost:hover{border-color:#fff}
.lp a.hz-link{display:inline-flex;align-items:center;gap:8px;margin-top:clamp(12px,2.4vh,22px);font-size:16.5px;font-weight:600;color:var(--green2);text-decoration:none}

/* Screens: a real device. Bezel, glass, a light that sweeps across, a shadow on the floor. */
.lp .hz-screen{position:relative;padding:clamp(6px,.7vw,11px);border-radius:clamp(14px,1.6vw,24px);
  background:linear-gradient(150deg,#353b39 0%,#121614 38%,#0a0d0c 62%,#222725 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),inset 0 1px 0 rgba(255,255,255,.22),0 2px 4px rgba(0,0,0,.2),0 40px 80px -36px rgba(0,0,0,.55),0 90px 140px -70px rgba(13,61,53,.55)}
.lp .hz-screen::before{content:"";position:absolute;left:50%;top:clamp(2px,.25vw,4px);width:5px;height:5px;border-radius:50%;background:#2c3431;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);transform:translateX(-50%);z-index:2}
.lp .hz .hz-screen .lp__v--device{border:0;border-radius:clamp(9px,1vw,15px);box-shadow:none;transform:none;background:#0c1311}
.lp .hz-glare{position:absolute;inset:clamp(6px,.7vw,11px);border-radius:clamp(9px,1vw,15px);pointer-events:none;z-index:3;
  background:linear-gradient(180deg,rgba(255,255,255,.07),transparent 28%),linear-gradient(112deg,transparent 38%,rgba(255,255,255,.13) 46%,rgba(255,255,255,.04) 52%,transparent 58%);background-size:100% 100%,260% 100%;background-position:0 0,140% 0;animation:hzSheen 8s var(--ease) infinite;mix-blend-mode:screen}
@keyframes hzSheen{0%,60%{background-position:0 0,140% 0}100%{background-position:0 0,-60% 0}}
.lp .hz .lp__vBtn{opacity:1;width:38px;height:38px;z-index:4}

/* 1. Hero */
.lp .hz-hero{padding-top:clamp(20px,5vh,64px);padding-bottom:clamp(40px,7vh,84px)}
.lp .hz-heroIn{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(30px,4.5vw,72px);align-items:center}
.lp .hz-heroMedia{position:relative;min-width:0;perspective:1800px;animation:hzDeviceIn 1.6s var(--ease) .15s both}
.lp .hz-screen--hero{width:min(100%,calc((100svh - var(--hdr) - 120px) * 1.62));margin-left:auto;transform-style:preserve-3d;
  transform:rotateY(calc(-17deg * (1 - var(--hp,0)) + var(--ry,0deg))) rotateX(calc(9deg * (1 - var(--hp,0)) + var(--rx,0deg))) translateZ(0);transition:transform .25s linear}
.lp .hz-reflect{position:absolute;left:12%;right:4%;bottom:-11%;height:22%;border-radius:50%;background:radial-gradient(closest-side,rgba(127,216,176,.35),transparent);filter:blur(20px);pointer-events:none}
@keyframes hzDeviceIn{from{opacity:0;transform:translate3d(60px,40px,0) rotateY(-30deg) rotateX(14deg) scale(.88)}}
.lp .hz-cue{position:absolute;left:50%;bottom:clamp(10px,2.4vh,26px);z-index:2;display:grid;place-items:center;width:30px;height:48px;margin-left:-15px;border-radius:999px;border:1.5px solid rgba(255,255,255,.4)}
.lp .hz-cue i{width:4px;height:9px;border-radius:4px;background:#bfead6;animation:hzCue 1.8s var(--ease) infinite}
@keyframes hzCue{0%{opacity:0;transform:translateY(-8px)}40%{opacity:1}100%{opacity:0;transform:translateY(10px)}}

/* 2. Basis strip */
.lp .hz-basis{position:relative;padding:clamp(18px,3.4vh,32px) 0;border-bottom:1px solid var(--line);background:#fff;overflow:hidden;scroll-margin-top:var(--hdr)}
.lp .hz-basisLabel{margin:0 0 14px;text-align:center;font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.lp .hz-basisRow{-webkit-mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.lp .hz-basisTrack{display:flex;width:max-content;animation:hzMarq 46s linear infinite}
.lp .hz-basisTrack span{padding:0 30px;font-size:clamp(16px,1.3vw,19px);font-weight:700;color:#24302b;white-space:nowrap;border-right:1px solid var(--line)}
@keyframes hzMarq{to{transform:translateX(-50%)}}

/* 3. Three things */
.lp .hz-threeGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.lp .hz-tCard{display:flex;flex-direction:column;gap:clamp(12px,2vh,18px);padding:clamp(12px,1.3vw,18px);border-radius:26px;background:linear-gradient(180deg,#f7f9f8,#eef3f0);border:1px solid var(--line)}
.lp .hz-tMedia .hz-screen{margin:0 auto;width:min(100%,calc((100svh - var(--hdr)) * .5))}
.lp .hz-tText{padding:0 clamp(4px,.6vw,10px) clamp(4px,.8vh,10px)}
.lp .hz-tTag{font-size:13px;font-weight:700;color:var(--green2)}
.lp .hz-tCard h3{margin-top:6px;font-size:clamp(18px,min(1.6vw,2.6vh),22px);line-height:1.25}
.lp .hz-tCard p{margin:8px 0 0;font-size:clamp(15px,min(1.15vw,1.9vh),16px);line-height:1.5;color:var(--ink2)}

/* 4. Who: tabs and a panel */
.lp .hz-tabs{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:20px;padding:clamp(10px,1.6vh,16px);border-radius:30px;background:rgba(255,255,255,.75);border:1px solid var(--line);box-shadow:0 50px 90px -60px rgba(13,61,53,.45);backdrop-filter:blur(12px)}
.lp .hz-tabList{display:grid;gap:8px;align-content:start}
.lp .hz-tab{position:relative;display:flex;align-items:center;gap:14px;width:100%;padding:clamp(8px,1.4vh,14px) 16px;border-radius:18px;border:1.5px solid transparent;background:transparent;font:inherit;text-align:left;cursor:pointer;color:var(--ink);transition:background .25s,border-color .25s,transform .25s var(--ease)}
.lp .hz-tab:hover{background:var(--bg2);transform:translateX(4px)}
.lp .hz-tab.is-on{background:#eaf5ef;border-color:#b6dcc8}
.lp .hz-tabIco{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:13px;background:#eaf1ed;color:var(--green);transition:background .25s,color .25s,transform .4s var(--ease)}
.lp .hz-tab.is-on .hz-tabIco{background:var(--green);color:#fff;transform:rotateY(360deg)}
.lp .hz-tabIco svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.lp .hz-tabName{display:grid;gap:2px;flex:1}
.lp .hz-tabName b{font-size:17px}
.lp .hz-tabName small{font-size:14px;color:var(--mute)}
.lp .hz-tabGo svg{width:18px;height:18px;fill:none;stroke:var(--green2);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.45;transition:opacity .2s,transform .2s}
.lp .hz-tab.is-on .hz-tabGo svg{opacity:1;transform:translateX(3px)}
.lp .hz-panel{padding:clamp(16px,3vh,30px) clamp(20px,2.4vw,34px);border-radius:22px;background:radial-gradient(120% 90% at 100% 0%,#d9f0e3,transparent 60%),linear-gradient(160deg,#eef7f2,#f8fbf9);animation:hzPanel .6s var(--ease)}
.lp .hz-panelKick{font-size:12.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--green2)}
.lp .hz-panel h3{margin-top:10px;font-size:clamp(22px,min(2.3vw,3.6vh),32px);line-height:1.15}
.lp .hz-panel>p{margin:12px 0 0;font-size:clamp(15.5px,min(1.3vw,2.1vh),17px);line-height:1.55;color:var(--ink2)}
.lp .hz-ticks{margin:clamp(12px,2.4vh,20px) 0 0;padding:0;list-style:none;display:grid;gap:clamp(8px,1.4vh,12px)}
.lp .hz-ticks li{display:flex;gap:12px;align-items:flex-start;font-size:clamp(15.5px,min(1.25vw,2vh),16.5px);line-height:1.45;color:var(--ink)}
.lp .hz-ticks svg{flex:none;width:22px;height:22px;padding:3px;border-radius:50%;background:var(--green);fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.lp .hz-panel .hz-ticks li{animation:hzRowIn .55s var(--ease) both}
.lp .hz-panel .hz-ticks li:nth-child(2){animation-delay:.08s}
.lp .hz-panel .hz-ticks li:nth-child(3){animation-delay:.16s}
.lp .hz-panelFoot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin-top:clamp(16px,3vh,28px);padding-top:clamp(12px,2.2vh,20px);border-top:1px solid #cfe3d8}
.lp .hz-panelFoot b{font-size:15px;color:var(--green)}
@keyframes hzPanel{from{opacity:0;transform:perspective(1000px) rotateY(-12deg) translateX(20px)}}
@keyframes hzRowIn{from{opacity:0;transform:translateX(-14px)}}

/* 5. How: glass cards that stack, with a line that draws beside them. */
.lp .hz-steps{position:relative;display:grid;gap:clamp(20px,4vh,40px);padding-left:0}
.lp .hz-step{position:sticky;top:calc(var(--hdr) + 18px + var(--i) * 22px);display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(22px,4vw,56px);align-items:center;
  min-height:min(calc(100svh - var(--hdr) - 90px),600px);padding:clamp(22px,3.6vw,48px);border-radius:30px;
  background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 -30px 60px -40px rgba(0,0,0,.8);
  transform-origin:50% 0;transform:scale(calc(1 - var(--c,0) * .06));filter:brightness(calc(1 - var(--c,0) * .45))}
.lp .hz-step--0{background:linear-gradient(160deg,#123e33,#0a2620)}
.lp .hz-step--1{background:linear-gradient(160deg,#164a3c,#0c2d25)}
.lp .hz-step--2{background:linear-gradient(160deg,#1a5644,#0f3429)}
.lp .hz-stepTag{display:inline-block;padding:6px 12px;border-radius:8px;background:rgba(127,216,176,.16);color:#bfead6;font-size:12.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.lp .hz-step h3{margin-top:clamp(10px,2vh,18px);font-size:clamp(24px,min(3vw,4.6vh),40px);line-height:1.1;color:#fff}
.lp .hz-step ul{margin:clamp(12px,2.6vh,22px) 0 0;padding:0;list-style:none;display:grid;gap:clamp(8px,1.6vh,14px)}
.lp .hz-step li{position:relative;padding-left:22px;font-size:clamp(15.5px,min(1.3vw,2.1vh),17px);line-height:1.5;color:#dbe8e2}
.lp .hz-step li::before{content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;border-radius:50%;background:var(--mint);box-shadow:0 0 12px rgba(127,216,176,.8)}
.lp .hz-stepMedia{min-width:0}
.lp .hz-stepMedia .hz-screen{width:min(100%,calc((100svh - var(--hdr) - 170px) * 1.7));margin-left:auto}
.lp .hz-rail{display:none}
@media (min-width:1200px){
  .lp .hz-steps{padding-left:44px}
  .lp .hz-rail{display:block;position:absolute;left:8px;top:0;bottom:0;width:2px;border-radius:2px;background:rgba(255,255,255,.1)}
  .lp .hz-rail i{position:absolute;inset:0;border-radius:2px;background:linear-gradient(var(--mint),#2fa67a);transform-origin:50% 0;transform:scaleY(var(--rp,0))}
  .lp .hz-rail b{position:absolute;left:50%;top:calc(var(--rp,0) * 100%);width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#fff;box-shadow:0 0 0 5px rgba(127,216,176,.25),0 0 22px var(--mint)}
}
/* The read record, drawn */
.lp .hz-doc{border-radius:22px;background:#fff;padding:clamp(16px,2.4vh,24px);color:var(--ink);box-shadow:0 50px 90px -40px rgba(0,0,0,.7);--ink:#101815;--mute:#56635e;--line:#e1e7e4}
.lp .hz-docHead{padding-bottom:12px;margin-bottom:8px;border-bottom:1px solid var(--line)}
.lp .hz-docHead b{display:block;font-size:17px;color:#0d3d35}
.lp .hz-docHead small{font-size:13.5px;color:#56635e}
.lp .hz-readRow{display:grid;grid-template-columns:12px minmax(0,1fr) auto;column-gap:12px;row-gap:2px;align-items:center;padding:clamp(8px,1.4vh,12px) 10px;border-radius:12px}
.lp .hz-readRow+.hz-readRow{border-top:1px solid #f0f2f1}
.lp .hz-readDot{width:10px;height:10px;border-radius:50%;background:#2f9e6e;box-shadow:0 0 0 4px rgba(47,158,110,.15);animation:hzBlink 2.4s ease-in-out infinite}
.lp .hz-readRow b{font-size:15.5px;color:#101815}
.lp .hz-readRow em{grid-column:2;font-style:normal;font-size:13.5px;color:#1f6b52}
.lp .hz-readRow small{grid-row:1/3;grid-column:3;font-size:13px;color:#56635e}
.lp .hz-readRow.is-old{background:#fff4e0}
.lp .hz-readRow.is-old .hz-readDot{background:#c98a14;box-shadow:0 0 0 4px rgba(201,138,20,.18)}
.lp .hz-readRow.is-old em{color:#7a4f00}
.lp .hz-docFoot{display:flex;justify-content:space-between;align-items:center;margin-top:10px;padding:12px 14px;border-radius:12px;background:#0d3d35;color:#fff;font-size:14.5px;font-weight:600}
.lp .hz-docFoot em{font-style:normal;padding:4px 12px;border-radius:999px;background:#fff;color:#0d3d35;font-size:13px}
.lp .hz-docNote{margin:8px 0 0;font-size:12px;color:#56635e;text-align:right}
@keyframes hzBlink{50%{box-shadow:0 0 0 7px rgba(47,158,110,0)}}

/* 6. Film: grows from a framed screen to the width of the page while it is scrolled. */
.lp .hz-film{position:relative;height:210svh;scroll-margin-top:var(--hdr)}
.lp .hz-filmStage{position:sticky;top:var(--hdr);height:calc(100svh - var(--hdr));display:flex;align-items:center;overflow:hidden}
.lp .hz-filmIn{position:relative;display:grid;place-items:center;height:100%}
.lp .hz-film .hz-head{position:absolute;left:28px;right:28px;top:clamp(14px,4vh,48px);z-index:2;margin:0;opacity:calc(1 - var(--fp,0) * 1.6);transform:translateY(calc(var(--fp,0) * -50px))}
.lp .hz-filmBox{position:relative;z-index:1;width:min(92vw,2400px,calc((100svh - var(--hdr) - 110px) * 1.72));
  transform:perspective(1600px) translateY(calc((1 - var(--fp,0)) * 13vh - var(--fp,0) * 26px)) rotateX(calc((1 - var(--fp,0)) * 16deg)) scale(calc(.58 + var(--fp,0) * .42));transform-origin:50% 50%;will-change:transform}
.lp .hz-filmCta{position:absolute;left:0;right:0;bottom:clamp(14px,3vh,30px);z-index:3;margin:0;opacity:clamp(0,calc((var(--fp,0) - .75) * 5),1);transform:translateY(calc((1 - var(--fp,0)) * 20px))}

/* 7. Library: titles on a plane in depth, a search card floating in front. */
.lp .hz-marq{position:relative;display:grid;align-content:center;height:clamp(250px,42vh,420px);perspective:1100px;overflow:hidden}
.lp .hz-marqPlane{display:grid;gap:14px;transform:rotateX(26deg) rotateZ(-5deg) scale(1.12);transform-origin:50% 60%;-webkit-mask:radial-gradient(70% 90% at 50% 50%,#000 40%,transparent 100%);mask:radial-gradient(70% 90% at 50% 50%,#000 40%,transparent 100%)}
.lp .hz-marqRow{overflow:hidden}
.lp .hz-marqTrack{display:flex;gap:12px;width:max-content;animation:hzMarq 90s linear infinite}
.lp .hz-marqRow.is-rev .hz-marqTrack{animation-direction:reverse;animation-duration:110s}
.lp .hz-marqTrack span{display:inline-flex;align-items:center;gap:10px;padding:10px 18px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:15px;font-weight:500;color:var(--ink2);white-space:nowrap;box-shadow:0 10px 20px -16px rgba(13,61,53,.4)}
.lp .hz-marqTrack span::before{content:"";width:6px;height:6px;border-radius:50%;background:#2fa67a}
.lp .hz-search{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(440px,86vw);padding:clamp(14px,2.4vh,22px);border-radius:24px;background:rgba(255,255,255,.92);backdrop-filter:blur(14px);box-shadow:0 50px 100px -30px rgba(13,61,53,.45),0 0 0 1px rgba(13,61,53,.06);display:grid;gap:10px;text-align:center;animation:hzFloat 7s ease-in-out infinite}
.lp.is-live .hz .hz-search[data-hz-fx].is-in{transform:translate(-50%,-50%)}
@keyframes hzFloat{50%{margin-top:-10px}}
.lp .hz-search .hz-chip{justify-self:center}
.lp .hz-searchBox{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;border:1.5px solid var(--green);text-align:left;font-size:16px;color:var(--ink);box-shadow:0 0 0 4px rgba(47,166,122,.12)}
.lp .hz-searchBox svg{width:18px;height:18px;fill:none;stroke:var(--mute);stroke-width:2;stroke-linecap:round}
.lp .hz-searchBox i{width:2px;height:20px;background:var(--green);animation:hzCaret 1s steps(1) infinite;margin-left:-6px}
@keyframes hzCaret{50%{opacity:0}}
.lp .hz-searchRow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:12px;background:var(--bg2);text-align:left;animation:hzRowIn .6s var(--ease) both;animation-delay:calc(1.2s + var(--r,0) * .15s)}
.lp .hz-searchRow b{font-size:14.5px;font-weight:600;color:var(--ink)}
.lp .hz-searchRow span{flex:none;padding:4px 12px;border-radius:999px;background:var(--hl);color:var(--green);font-size:13px;font-weight:700}

/* 8. Feature tabs */
.lp .hz-ftabs{max-width:1000px;margin:0 auto}
.lp .hz-fList{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:clamp(14px,2.6vh,22px)}
.lp .hz-ftab{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;border:1.5px solid var(--line);background:#fff;font:inherit;font-size:15.5px;font-weight:600;color:var(--ink2);cursor:pointer;transition:background .25s,color .25s,border-color .25s,transform .25s var(--ease),box-shadow .25s}
.lp .hz-ftab svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lp .hz-ftab:hover{border-color:var(--green2);color:var(--green);transform:translateY(-2px)}
.lp .hz-ftab.is-on{background:var(--green);border-color:var(--green);color:#fff;box-shadow:0 14px 26px -14px rgba(13,61,53,.7)}
.lp .hz-fPanel{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(20px,4vw,52px);align-items:center;padding:clamp(22px,4vh,48px) clamp(22px,4vw,52px);border-radius:30px;background:radial-gradient(90% 120% at 0% 0%,#d6efe2,transparent 60%),linear-gradient(150deg,#eaf5ef,#f7faf8);border:1px solid #d7e8df;animation:hzPanel .6s var(--ease)}
.lp .hz-fIco{display:grid;place-items:center;width:clamp(96px,min(14vw,20vh),170px);aspect-ratio:1;border-radius:32px;background:linear-gradient(145deg,#1a6a52,#0b3128);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 30px 60px -26px rgba(13,61,53,.8);animation:hzIcoIn .9s var(--ease)}
.lp .hz-fIco svg{width:46%;height:46%;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
@keyframes hzIcoIn{from{transform:perspective(600px) rotateY(-180deg) scale(.7);opacity:0}}
.lp .hz-fPanel h3{font-size:clamp(22px,min(2.4vw,3.8vh),32px);line-height:1.15}

/* 9. Product family: a wall of tiles. */
.lp .hz-wall{perspective:1400px}
.lp .hz-famGrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.4vw,18px)}
.lp .hz-famCol{display:grid;gap:12px;align-content:start}
.lp .hz-famLabel{padding:0 4px 2px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--green2)}
.lp .hz-famItem{padding:clamp(16px,2.6vh,22px);border-radius:20px;background:var(--bg2);border:1px solid var(--line);transition:background .25s,border-color .25s}
.lp .hz-famItem:hover{background:#eaf4ee;border-color:#c5e2d3}
.lp .hz-famItem b{display:block;font-size:clamp(16.5px,min(1.4vw,2.3vh),18px);color:var(--ink)}
.lp .hz-famItem p{margin:6px 0 0;font-size:clamp(15px,min(1.2vw,1.9vh),15.5px);line-height:1.5;color:var(--ink2)}

/* 10. Fits: a 3D orbit beside the six tiles. */
.lp .hz-fitWrap{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(24px,4vw,60px);align-items:center}
.lp .hz-orb{--r:clamp(110px,min(13vw,19vh),170px);--tilt:64deg;position:relative;height:calc(var(--r) * 2.1);perspective:1000px}
.lp .hz-orbFloor{position:absolute;left:50%;top:50%;width:calc(var(--r) * 2.4);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%) rotateX(var(--tilt));background:radial-gradient(circle,rgba(47,166,122,.16),rgba(47,166,122,.04) 50%,transparent 70%);border:1px solid rgba(31,107,82,.3)}
.lp .hz-orbFloor::before{content:"";position:absolute;inset:16%;border-radius:50%;border:1px dashed rgba(31,107,82,.35)}
.lp .hz-orbRing{position:absolute;left:50%;top:50%;transform-style:preserve-3d;transform:rotateX(var(--tilt));animation:hzRot 32s linear infinite}
@keyframes hzRot{to{--rot:360deg}}
.lp .hz-orbNode{--a:calc(var(--i) * 60deg + var(--rot));position:absolute;left:0;top:0;transform-style:preserve-3d;transform:rotate(var(--a)) translateX(var(--r)) rotate(calc(-1 * var(--a))) rotateX(calc(-1 * var(--tilt)))}
.lp .hz-orbNode i{display:grid;place-items:center;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:16px;background:#fff;border:1px solid #cfe3d8;color:var(--green);box-shadow:0 18px 30px -16px rgba(13,61,53,.5)}
.lp .hz-orbNode svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.lp .hz-orbCore{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:calc(var(--r) * .95);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#2a8a69,#0d3d35 60%,#072720);box-shadow:inset 0 2px 10px rgba(255,255,255,.25),0 30px 60px -20px rgba(13,61,53,.7),0 0 0 10px rgba(47,166,122,.08);animation:hzBob 6s ease-in-out infinite}
.lp .hz-orbCore b{font-size:clamp(14px,1.3vw,18px);color:#fff;text-align:center;line-height:1.15;padding:0 10px}
@keyframes hzBob{50%{transform:translate(-50%,calc(-50% - 8px))}}
.lp .hz-fitGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(10px,1.2vw,14px)}
.lp .hz-fitTile{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:14px;row-gap:2px;align-items:center;padding:clamp(12px,2.2vh,20px) clamp(14px,1.6vw,20px);border-radius:18px;background:#fff;border:1px solid var(--line);transition:border-color .25s,box-shadow .25s,transform .25s var(--ease)}
.lp .hz-fitTile:hover{border-color:#b6dcc8;box-shadow:0 20px 40px -26px rgba(13,61,53,.4);transform:translateY(-3px)}
.lp .hz-fitTile span{grid-row:1/3;display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:#eaf1ed;color:var(--green)}
.lp .hz-fitTile svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.lp .hz-fitTile b{font-size:clamp(16px,min(1.3vw,2.2vh),17px);color:var(--ink)}
.lp .hz-fitTile small{font-size:14.5px;color:var(--mute)}

/* 11. What changes */
.lp .hz-gainGrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.4vw,18px)}
.lp .hz-gainCard{position:relative;overflow:hidden;display:flex;flex-direction:column;padding:clamp(20px,3.4vh,28px) 24px;border-radius:24px;background:linear-gradient(170deg,#f6f9f7,#ecf3ef);border:1px solid var(--line);min-height:clamp(220px,34vh,300px)}
.lp .hz-gainNum{position:absolute;right:14px;top:4px;font-size:clamp(56px,8vh,84px);font-weight:700;letter-spacing:-.05em;line-height:1;color:transparent;-webkit-text-stroke:1.5px rgba(31,107,82,.22);pointer-events:none}
.lp .hz-gainWho{position:relative;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--green2)}
.lp .hz-gainCard p{position:relative;margin:12px 0 0;font-size:clamp(16px,min(1.4vw,2.3vh),18px);line-height:1.5;color:var(--ink)}
.lp .hz-gainCard b{margin-top:auto;padding-top:16px;font-size:15px;color:var(--green)}

/* 12. Made by: the step nearest the middle of the screen comes forward. */
.lp .hz-madeIn{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:center}
.lp .hz-madeList{margin:0;padding:0;list-style:none;display:grid;gap:clamp(10px,1.8vh,14px)}
.lp .hz-madeList li{display:flex;gap:18px;padding:clamp(16px,2.6vh,22px) 24px;border-radius:20px;background:#fff;border:1px solid var(--line);border-left:4px solid rgba(31,107,82,calc(.15 + var(--f,0) * .85));box-shadow:0 calc(var(--f,0) * 30px) calc(var(--f,0) * 60px) calc(var(--f,0) * -30px) rgba(13,61,53,.45);transition:box-shadow .3s,border-color .3s}
.lp.is-live .hz .hz-madeList li.is-in{transform:translateX(calc(var(--f,0) * 10px))!important}
.lp .hz-madeList li>span{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--hl);color:var(--green);font-weight:700}
.lp .hz-madeList b{font-size:19px;color:var(--ink)}
.lp .hz-madeList p{margin:6px 0 0;font-size:clamp(15px,min(1.25vw,2vh),16px);line-height:1.5;color:var(--ink2)}

/* 13. Articles */
.lp .hz-postGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,18px)}
.lp .hz-post{display:flex;flex-direction:column;padding:clamp(20px,3.4vh,28px);border-radius:22px;border:1px solid var(--line);background:#fff;text-decoration:none;color:inherit;transition:border-color .25s}
.lp .hz-post:hover{border-color:#b6dcc8}
.lp .hz-post small{font-size:13.5px;color:var(--mute)}
.lp .hz-post b{margin-top:10px;font-size:clamp(18px,min(1.6vw,2.6vh),20px);line-height:1.3;letter-spacing:-.015em;color:var(--ink)}
.lp .hz-post p{margin:10px 0 0;font-size:15.5px;line-height:1.55;color:var(--ink2)}
.lp .hz-post span{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:16px;font-size:15px;font-weight:600;color:var(--green2)}
.lp .hz-post span svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* 14. Join */
.lp .hz-joinIn{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,5vw,72px);align-items:center}
.lp .hz-joinMedia .hz-screen{width:min(100%,calc((100svh - var(--hdr) - 120px) * 1.7));margin-left:auto}

/* 15. FAQ */
.lp .hz-faqIn{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(28px,5vw,72px);align-items:start}
.lp .hz-faqIn .hz-head{position:sticky;top:calc(var(--hdr) + 30px);margin:0}
.lp .hz-faq .lp__faqList{margin:0;width:100%}
.lp .hz-faq .lp__faqList summary{padding:clamp(10px,1.8vh,18px) 2px;font-size:clamp(16.5px,min(1.4vw,2.3vh),19px);transition:color .2s,padding-left .3s var(--ease)}
.lp .hz-faq .lp__faqList summary:hover{color:var(--green2);padding-left:8px}

/* Scroll progress and the section navigator. */
.lp .hz-prog{position:fixed;left:0;right:0;top:0;z-index:1001;height:3px;pointer-events:none}
.lp .hz-prog i{display:block;height:100%;background:linear-gradient(90deg,#2fa67a,var(--mint));transform-origin:0 50%;transform:scaleX(var(--sp,0));box-shadow:0 0 12px rgba(127,216,176,.8)}
.lp .hz-dots{position:fixed;z-index:60}
.lp .hz-dots ol{margin:0;padding:0;list-style:none}
.lp .hz-dots a{display:flex;align-items:center;text-decoration:none}

/* Present while the page is moving, gone when it is not. A fixed rail is useful exactly
   when somebody is travelling through the document and is furniture the rest of the
   time, which matters most on a phone where it is furniture over the content. It slides
   out to the right rather than simply fading, so the eye reads it as leaving rather than
   as something that failed to paint. */
.lp .hz-dots{transition:opacity .4s ease,transform .4s cubic-bezier(.2,.7,.3,1),visibility .4s}
.lp .hz-dots.is-idle{opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(-50%) translateX(18px)}
/* Never hidden from somebody using it, whether by pointer or by keyboard. */
.lp .hz-dots:hover,.lp .hz-dots:focus-within{opacity:1;visibility:visible;pointer-events:auto;
  transform:translateY(-50%)}

/* The dot is 5px and the target around it is larger, so a thumb has something to hit
   without the rail itself growing. Written with the list in the selector because the
   block that sizes the target sits further down this file: at equal weight the later
   rule wins, and this one has to outrank it rather than merely precede it. */
@media (hover:none){
  .lp .hz-dots ol a{width:20px;height:23px}
}
/* No name beside the dot on a touch screen. The label needs a pointer resting on a dot
   to be worth anything, and a tap leaves :hover stuck on, so what it actually did was
   park a dark chip over the text after the reader had moved on. */
@media (hover:none),(max-width:1024px){
  .lp .hz-dots ol a span{display:none}
}
/* Without backdrop-filter the glass would be a barely visible smear, so those browsers
   get an opaque pill instead. Firefox on older versions and anything with the effect
   turned off for battery or accessibility reasons lands here. */
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .lp .hz-dots ol{background:rgba(255,255,255,.92)}
}
@media (prefers-reduced-motion:reduce){
  .lp .hz-dots{transition:opacity .2s linear}
  .lp .hz-dots.is-idle{transform:translateY(-50%)}
}
/* The rail, on every width. It used to become a pill at the bottom left below 1180px:
   a button that had to be pressed to see a list, which is a menu rather than a position
   indicator, and it sat over the content in the corner a thumb rests in. The dots do the
   same job without being asked, and they belong on the right on a phone for the same
   reason they do on a desktop.
   Written as "all" rather than by deleting the query so the block keeps its shape and
   the one below it, which held the pill, can be switched off the same way. */
@media all{
  .lp .hz-dots{right:10px;top:50%;transform:translateY(-50%);left:auto;bottom:auto}
  .lp .hz-dotsBtn{display:none}
  /* Liquid glass. The rail should read as a sliver of wet glass laid over the page rather
     than a white chip sitting on it, so the tint is nearly clear and whatever scrolls
     behind keeps showing through. Blur with saturate is what makes that look like glass
     instead of like something merely half transparent; the two inset lines are the lit top
     edge and the shadowed bottom edge of a piece of glass with thickness. */
  /* Barely there. The glass is almost clear now: enough blur to separate the dots from
     whatever runs under them, and little enough tint that the page reads straight
     through it. What marks the rail is the dots, not the pane they sit on. */
  .lp .hz-dots ol{position:relative;display:grid;gap:0;padding:3px 2px;border-radius:999px;
    background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.06));
    -webkit-backdrop-filter:blur(18px) saturate(180%);backdrop-filter:blur(18px) saturate(180%);
    border:1px solid rgba(255,255,255,.34);
    box-shadow:0 4px 14px -12px rgba(10,40,34,.3),inset 0 1px 0 rgba(255,255,255,.6)}
  /* The specular: light catching the curved left face, which is what stops a flat
     translucent panel from looking like a sheet of tracing paper. */
  .lp .hz-dots ol::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
    background:linear-gradient(105deg,rgba(255,255,255,.38),rgba(255,255,255,0) 46%)}
  .lp .hz-dots a{position:relative;justify-content:center;width:16px;height:19px}
  .lp .hz-dots a i{width:4px;height:4px;border-radius:50%;background:rgba(43,82,72,.34);transition:transform .3s var(--ease),background .3s,height .3s}
  .lp .hz-dots a:hover i{background:var(--green2);transform:scale(1.5)}
  .lp .hz-dots a.is-on i{background:var(--green);height:11px;border-radius:3px}
  .lp .hz-dots a span{position:absolute;right:26px;top:50%;transform:translate(8px,-50%);padding:5px 11px;border-radius:999px;background:rgba(13,61,53,.88);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;font-size:12.5px;font-weight:600;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s var(--ease)}
  .lp .hz-dots a:hover span,.lp .hz-dots a:focus-visible span{opacity:1;transform:translate(0,-50%)}
}
/* The pill that used to replace the rail below 1180px. Switched off rather than deleted,
   so the shape of what it was is still legible if it is ever wanted back. */
@media (max-width:0px){
  .lp .hz-dots{left:14px;bottom:14px}
  .lp .hz-dotsBtn{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid rgba(13,61,53,.12);background:rgba(255,255,255,.92);backdrop-filter:blur(10px);box-shadow:0 14px 30px -14px rgba(0,0,0,.45);font:inherit;font-size:14px;color:var(--ink2);cursor:pointer}
  .lp .hz-dotsBtn b{color:var(--green);font-weight:700}
  .lp .hz-dots ol{position:absolute;left:0;bottom:54px;display:grid;width:min(260px,calc(100vw - 28px));max-height:min(70svh,560px);overflow:auto;padding:8px;border-radius:20px;background:#fff;box-shadow:0 30px 60px -20px rgba(0,0,0,.45);border:1px solid var(--line);
    opacity:0;transform:translateY(10px) scale(.97);transform-origin:0 100%;pointer-events:none;transition:opacity .25s,transform .3s var(--ease)}
  .lp .hz-dots.is-open ol{opacity:1;transform:none;pointer-events:auto}
  .lp .hz-dots a{gap:12px;min-height:44px;padding:0 12px;border-radius:12px;font-size:15.5px;color:var(--ink)}
  .lp .hz-dots a i{width:8px;height:8px;border-radius:50%;background:#b5c4bd}
  .lp .hz-dots a.is-on{background:#eaf5ef;color:var(--green);font-weight:700}
  .lp .hz-dots a.is-on i{background:var(--green)}
}

/* The home page has its own buttons in every section, so the floating one stands down. */
.lp:has(.hz) .lp__float{display:none!important}

/* Tablet */
@media (max-width:1068px){
  .lp .hz-heroIn,.lp .hz-madeIn,.lp .hz-joinIn,.lp .hz-faqIn,.lp .hz-fitWrap{grid-template-columns:1fr}
  .lp .hz-screen--hero,.lp .hz-joinMedia .hz-screen,.lp .hz-stepMedia .hz-screen{margin:0 auto;width:min(100%,calc((100svh - var(--hdr)) * .62))}
  .lp .hz-faqIn .hz-head{position:static}
  .lp .hz-tabs{grid-template-columns:1fr}
  .lp .hz-tabList{display:flex;gap:8px;overflow-x:auto;margin:0 -10px;padding:2px 10px 4px;scrollbar-width:none}
  .lp .hz-tabList::-webkit-scrollbar{display:none}
  .lp .hz-tab{flex:none;width:auto;padding:8px 14px 8px 8px;gap:10px;border-color:var(--line);background:#fff}
  .lp .hz-tab:hover{transform:none}
  .lp .hz-tabIco{width:34px;height:34px;border-radius:10px}
  .lp .hz-tabName small,.lp .hz-tabGo{display:none}
  .lp .hz-tabName b{font-size:15px;white-space:nowrap}
  .lp .hz-step{grid-template-columns:1fr;gap:18px}
  .lp .hz-head--split{flex-direction:column;align-items:flex-start;gap:14px}
  .lp .hz-orb{display:none}
}

/* Phones: rows of cards become swipeable so each section still fits one screen. */
@media (max-width:734px){
  .lp .hz-in{padding:0 18px}
  .lp .hz-sec,.lp .hz-hero{padding:clamp(24px,5vh,48px) 0}
  .lp .hz h1.hz-h1{font-size:clamp(30px,min(8.6vw,5.2vh),40px)}
  .lp .hz-h2{font-size:clamp(26px,min(7.4vw,4.4vh),34px)}
  .lp .hz-lead{font-size:16px;line-height:1.5}
  .lp .hz-sub{font-size:16px;line-height:1.5}
  .lp .hz-head{margin-bottom:clamp(14px,2.6vh,24px)}
  .lp .hz-chip{font-size:11.5px;padding:5px 10px}
  .lp .hz-ctas--sized{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .lp .hz-ctas--sized .hz-btn{width:100%;padding:0 12px}
  .lp .hz-heroIn{gap:22px}
  .lp .hz-screen--hero{transform:none}
  .lp .hz-cue{display:none}
  .lp .hz-swipe{display:flex!important;gap:12px;overflow-x:auto;margin:0 -18px;padding:6px 18px 14px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .lp .hz-swipe::-webkit-scrollbar{display:none}
  .lp .hz-swipe>*{flex:0 0 84%;min-width:0}
  .lp .hz-tabList{display:flex;gap:8px;overflow-x:auto;margin:0 -10px;padding:2px 10px 4px;scrollbar-width:none}
  .lp .hz-tabList::-webkit-scrollbar{display:none}
  .lp .hz-tab{flex:none;width:auto;padding:8px 14px 8px 8px;gap:10px;border-color:var(--line);background:#fff}
  .lp .hz-tab:hover{transform:none}
  .lp .hz-tabIco{width:34px;height:34px;border-radius:10px}
  .lp .hz-tabName small,.lp .hz-tabGo{display:none}
  .lp .hz-tabName b{font-size:15px;white-space:nowrap}
  .lp .hz-tabs{padding:10px;gap:12px;border-radius:24px}
  .lp .hz-panel{padding:18px}
  .lp .hz-step{top:calc(var(--hdr) + 10px + var(--i) * 12px);padding:20px 18px;border-radius:24px;min-height:0}
  .lp .hz-stepMedia .hz-screen{width:100%}
  .lp .hz-film{height:auto}
  .lp .hz-filmStage{position:relative;top:auto;height:auto;padding:48px 0}
  .lp .hz-film .hz-head{position:static;opacity:1;transform:none;margin-bottom:16px}
  .lp .hz-filmIn{display:block;height:auto}
  .lp .hz-filmBox{width:100%;margin:0;transform:none}
  .lp .hz-filmCta{position:static;opacity:1;transform:none;margin-top:18px}
  .lp .hz-marq{height:clamp(300px,46vh,380px)}
  .lp .hz-marqTrack span{font-size:13.5px;padding:8px 14px}
  .lp .hz-fList{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;scrollbar-width:none;margin:0 -18px 14px;padding:2px 18px}
  .lp .hz-fList::-webkit-scrollbar{display:none}
  .lp .hz-ftab{flex:none}
  .lp .hz-fPanel{grid-template-columns:1fr;gap:14px;padding:20px 18px}
  .lp .hz-fIco{width:64px;border-radius:18px}
  .lp .hz-fitGrid{grid-template-columns:1fr 1fr;gap:8px}
  .lp .hz-fitTile{grid-template-columns:1fr;grid-template-rows:auto;row-gap:4px;padding:10px 12px}
  .lp .hz-fit .hz-c{margin-top:12px}
  .lp .hz-fit .hz-btn,.lp .hz-c .hz-btn--soft{min-height:44px}
  .lp .hz-fitTile span{grid-row:auto;width:36px;height:36px;border-radius:11px}
  .lp .hz-fitTile small{font-size:13.5px;line-height:1.35}
  .lp .hz-gainCard{min-height:210px}
  .lp .hz-madeList li{padding:12px 14px;gap:12px}
  .lp .hz-madeList p{font-size:15px;line-height:1.45}
  .lp .hz-madeIn{gap:18px}
  .lp .hz-madeList li>span{width:36px;height:36px}
  .lp .hz-madeList b{font-size:17px}
}

/* Phones, continued: every section on one screen, down to a 360 by 740 phone. Text never
   goes below 15px; space comes from padding, wrapping and badges instead. */
@media (max-width:734px){
  .lp .hz-sec,.lp .hz-hero{padding:clamp(16px,3.6vh,40px) 0}
  .lp .hz-chip{letter-spacing:.05em}
  .lp .hz-hero .hz-chip{font-size:10.5px;letter-spacing:.04em;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
  .lp .hz-lead{font-size:clamp(15px,2.15vh,16px);line-height:1.45}
  .lp .hz-heroIn{gap:16px}
  .lp .hz-tabs{padding:8px;gap:10px}
  .lp .hz-panel{padding:14px 14px 12px}
  .lp .hz-panel h3{margin-top:6px;font-size:21px}
  .lp .hz-panel>p{margin-top:8px;font-size:15px;line-height:1.5}
  .lp .hz-ticks{margin-top:10px;gap:6px}
  .lp .hz-ticks li{font-size:15px;gap:10px}
  .lp .hz-ticks svg{width:20px;height:20px}
  .lp .hz-panelFoot{flex-wrap:nowrap;gap:10px;margin-top:12px;padding-top:10px}
  .lp .hz-panelFoot b{font-size:13px;line-height:1.3}
  .lp .hz-panelFoot .hz-btn{flex:none;min-height:44px;padding:0 16px;font-size:15px}
  .lp .hz-panelFoot .hz-btn svg{display:none}
  .lp .hz-marq{height:clamp(250px,38vh,360px)}
  .lp .hz-fitTile{grid-template-columns:auto 1fr;column-gap:8px;row-gap:4px}
  .lp .hz-fitTile span{grid-row:1;width:30px;height:30px;border-radius:9px}
  .lp .hz-fitTile span svg{width:18px;height:18px}
  .lp .hz-fitTile small{grid-column:1/-1}
  .lp .hz-madeList li{position:relative;display:block;padding:12px 52px 12px 14px}
  .lp .hz-madeList li>span{position:absolute;right:12px;top:12px;width:30px;height:30px;font-size:13px}
  .lp .hz-faq .lp__faqList summary{padding:9px 2px;font-size:16px;min-height:44px}
  .lp .hz-faqIn{gap:14px}
}

@media (max-width:734px){
  .lp .hz-madeList{display:flex;gap:12px;overflow-x:auto;margin:0 -18px;padding:6px 18px 12px;scrollbar-width:none}
  .lp .hz-madeList::-webkit-scrollbar{display:none}
  .lp .hz-madeList li{flex:0 0 82%}
}
@media (max-width:734px) and (max-height:760px){
  .lp .hz-sec,.lp .hz-hero{padding:clamp(12px,2.4vh,24px) 0}
  .lp .hz-chip{margin-bottom:8px}
  .lp .hz-head{margin-bottom:10px}
  .lp .hz-panelKick{display:none}
  .lp .hz-panel h3{margin-top:0}
  .lp .hz-ticks{gap:4px}
}
@media (max-width:734px) and (max-height:700px){
  .lp .hz-screen--hero{width:min(100%,calc((100svh - var(--hdr)) * .42))}
  .lp .hz h1.hz-h1{font-size:clamp(28px,min(8.6vw,4.6vh),40px)}
  .lp .hz-lead{font-size:15px;line-height:1.4}
  .lp .hz-panel h3{font-size:19px}
  .lp .hz-panel{padding:12px 12px 10px}
}

/* The "who" heading puts its line beside it on wide screens, as the split headings do. */
@media (min-width:901px){
  .lp .hz-who2 .hz-head{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);column-gap:40px;align-items:end}
  .lp .hz-who2 .hz-chip{grid-column:1;justify-self:start}
  .lp .hz-who2 .hz-h2{grid-column:1}
  .lp .hz-who2 .hz-sub{grid-column:2;grid-row:2;margin:0}
}
/* Narrow tablets: four columns become two. */
@media (max-width:900px) and (min-width:735px){
  .lp .hz-famGrid,.lp .hz-gainGrid{grid-template-columns:1fr 1fr}
}
@media (max-width:1068px) and (min-width:901px){
  .lp .hz-gainCard{min-height:0}
  .lp .hz-gainNum{font-size:56px}
}

/* Short screens: tighten so each section still fits. */
@media (min-width:735px) and (max-height:800px){
  .lp .hz-panel{padding:14px 22px}
  .lp .hz-ticks{margin-top:10px;gap:6px}
  .lp .hz-panelFoot{margin-top:12px;padding-top:10px}
}
@media (min-width:735px) and (max-height:760px){
  .lp .hz-sec,.lp .hz-hero{padding:clamp(18px,4vh,40px) 0}
  .lp .hz-head{margin-bottom:clamp(14px,3.2vh,30px)}
  .lp .hz-c{margin-top:14px}
}
/* Large and 4K screens: a wider stage, larger type, larger screens. */
@media (min-width:1800px){
  .lp .hz-in{max-width:min(2040px,84vw)}
  .lp .hz h1.hz-h1{font-size:clamp(56px,min(3.6vw,7vh),84px)}
  .lp .hz-h2{font-size:clamp(52px,min(3.4vw,6.4vh),78px)}
  .lp .hz-lead{font-size:clamp(20px,min(1.1vw,2.2vh),25px)}
  .lp .hz-sub{font-size:clamp(19px,min(1.05vw,2.1vh),23px)}
  .lp .hz-tCard h3,.lp .hz-fPanel h3{font-size:clamp(22px,1.4vw,30px)}
  .lp .hz-tCard p,.lp .hz-ticks li,.lp .hz-step li,.lp .hz-famItem p,.lp .hz-gainCard p,.lp .hz-post p,.lp .hz-madeList p{font-size:clamp(16px,.95vw,20px)}
  .lp .hz-step h3{font-size:clamp(36px,2.4vw,52px)}
  .lp .hz-marqTrack span{font-size:17px;padding:12px 22px}
  .lp .hz-search{width:540px}
}

@media (prefers-reduced-motion:reduce){
  .lp .hz-aurora,.lp .hz-floor,.lp .hz-stars,.lp .hz-basisTrack,.lp .hz-marqTrack,.lp .hz-searchBox i,.lp .hz-glare,.lp .hz-orbRing,.lp .hz-orbCore,.lp .hz-search,.lp .hz-readDot,.lp .hz-cue i,.lp .hz-heroMedia,.lp .hz-panel,.lp .hz-fPanel,.lp .hz-fIco,.lp .hz-panel .hz-ticks li,.lp .hz-searchRow{animation:none!important}
  .lp .hz .lp__words .lp__w{transform:none;clip-path:none}
  .lp .hz-screen--hero,.lp .hz-step,.lp .hz-filmBox,.lp .hz [data-hz-fx]{transform:none!important;filter:none!important;clip-path:none!important;opacity:1!important}
  .lp .hz-film{height:auto}
  .lp .hz-filmStage{position:relative;height:auto;padding:60px 0}
  .lp .hz-film .hz-head,.lp .hz-filmCta{opacity:1;transform:none}
  .lp .hz-filmCta{position:static;margin-top:20px}
  .lp .hz-filmBox{margin:0}
}

/* ===========================================================================
   White throughout (1 October 2026). Every band is white; the motion stays. The light
   that moved across the dark bands is kept as a faint mint wash on white, the grid floor
   as hairlines, and the step cards become white cards that stack with a shadow.
   Screens are larger everywhere, and any screen opens full size when it is clicked.
   ========================================================================= */
.lp .hz-dark{--ink:#101815;--ink2:#3a4642;--mute:#56635e;--line:#e1e7e4;--hl:#dcf1e5;background:#fff;color:var(--ink)}
.lp .hz-lib2,.lp .hz-fit,.lp .hz-made{background:#fff}
.lp .hz-dark .hz-h1 em,.lp .hz-dark .hz-h2 em{color:var(--green)}
.lp .hz-dark .hz-chip,.lp .hz .hz-chip--dark{background:#ebf2ee;color:var(--green);border:0}
.lp .hz-dark a.hz-btn--solid{background:var(--green);color:#fff}
.lp .hz-dark a.hz-btn--solid:hover{background:#0a302a}
.lp .hz-dark a.hz-btn--line{background:#fff;border-color:#c3cfca;color:var(--green)}
.lp .hz-dark a.hz-btn--line:hover{border-color:var(--green)}
.lp .hz a.hz-btn--light{background:var(--green);color:#fff;box-shadow:0 14px 30px -16px rgba(13,61,53,.7)}
.lp .hz a.hz-btn--ghost{border-color:#c3cfca;color:var(--green);background:#fff}
.lp .hz-join .hz-h2{color:var(--ink)}
.lp .hz-join .hz-h2 em,.lp .hz-join .hz-h2.is-in em{background-color:var(--hl);color:var(--green)}
.lp .hz-join .hz-sub{color:var(--ink2)}
.lp .hz-join .lp__v--device{border-color:transparent}
.lp .hz-aurora{opacity:.32}
.lp .hz-floor{background-image:linear-gradient(rgba(13,61,53,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(13,61,53,.07) 1px,transparent 1px)}
.lp .hz-stars{display:none}
.lp .hz-glow{opacity:.45}
.lp .hz-cue{border-color:#c3cfca}
.lp .hz-cue i{background:var(--green2)}
.lp .hz-reflect{opacity:.6}
/* Steps: white cards that stack. */
.lp .hz-step,.lp .hz-step--0,.lp .hz-step--1,.lp .hz-step--2{background:#fff;border:1px solid var(--line);backdrop-filter:none;-webkit-backdrop-filter:none;
  box-shadow:0 -24px 60px -40px rgba(13,61,53,.35),0 30px 60px -44px rgba(13,61,53,.35);filter:none}
.lp .hz-step h3{color:var(--ink)}
.lp .hz-step li{color:var(--ink2)}
.lp .hz-step li::before{background:var(--green2);box-shadow:0 0 0 4px rgba(47,166,122,.14)}
.lp .hz-stepTag{background:#ebf2ee;color:var(--green)}
.lp .hz-step{opacity:calc(1 - var(--c,0) * .25)}
@media (min-width:1200px){
  .lp .hz-rail{background:rgba(13,61,53,.1)}
  .lp .hz-rail i{background:linear-gradient(#2fa67a,var(--green))}
  .lp .hz-rail b{background:var(--green);box-shadow:0 0 0 5px rgba(47,166,122,.18),0 0 18px rgba(47,166,122,.6)}
}
.lp .hz-doc{box-shadow:0 40px 80px -40px rgba(13,61,53,.35);border:1px solid var(--line)}
/* The bar above the header and the footer join the white page. */
.lp:has(.hz) .lp__bar{background:#fff;border-bottom:1px solid #e1e7e4}
.lp:has(.hz) .lp__foot{background:#fff;border-top:1px solid #e1e7e4;color:#3f4a46;font-size:14px}
.lp:has(.hz) .lp__foot a{color:#1f3b33}
/* Less to read: article cards show their title only. */
.lp .hz-post p{display:none}

/* Larger screens everywhere. */
.lp .hz-heroIn{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr)}
.lp .hz-screen--hero{width:min(100%,calc((100svh - var(--hdr) - 70px) * 1.78))}
.lp .hz-three .hz-in{max-width:1500px}
.lp .hz-tMedia .hz-screen{width:100%}
.lp .hz-tCard{padding:clamp(10px,1vw,14px)}
.lp .hz-step{grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr)}
.lp .hz-stepMedia .hz-screen{width:min(100%,calc((100svh - var(--hdr) - 120px) * 1.78))}
.lp .hz-how .hz-in{max-width:1440px}
.lp .hz-joinIn{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr)}
.lp .hz-joinMedia .hz-screen{width:min(100%,calc((100svh - var(--hdr) - 80px) * 1.78))}
.lp .hz-join .hz-in{max-width:1440px}
@media (max-width:1068px){
  .lp .hz-heroIn,.lp .hz-joinIn{grid-template-columns:1fr}
  .lp .hz-step{grid-template-columns:1fr}
  .lp .hz-screen--hero,.lp .hz-joinMedia .hz-screen,.lp .hz-stepMedia .hz-screen{width:100%}
}
@media (max-width:734px){
  .lp .hz-swipe>*{flex-basis:88%}
  .lp .hz-screen--hero{width:100%}
}

/* Any screen opens full size. */
.lp .hz-screen{cursor:zoom-in}
.lp .hz-screen .hz-grow{position:absolute;left:clamp(14px,1.4vw,20px);bottom:clamp(14px,1.4vw,20px);z-index:5;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;border:0;border-radius:999px;background:rgba(16,24,21,.72);backdrop-filter:blur(8px);color:#fff;font:600 13px/1 inherit;cursor:pointer;opacity:.92;transition:opacity .2s,transform .2s}
.lp .hz-screen .hz-grow:hover{opacity:1;transform:scale(1.04)}
.lp .hz-screen .hz-grow svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hz-lightbox{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;padding:clamp(12px,3vw,40px);background:rgba(255,255,255,.94);backdrop-filter:blur(10px);opacity:0;transition:opacity .3s}
.hz-lightbox.is-on{opacity:1}
.hz-lightbox__box{position:relative;width:min(96vw,calc((100svh - 80px) * 1.78));padding:clamp(6px,.7vw,10px);border-radius:22px;background:linear-gradient(150deg,#353b39,#0a0d0c 60%,#222725);box-shadow:0 60px 120px -40px rgba(13,61,53,.5);transform:scale(.94);transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.hz-lightbox.is-on .hz-lightbox__box{transform:none}
.hz-lightbox video{display:block;width:100%;height:auto;border-radius:14px;background:#0c1311}
.hz-lightbox__x{position:absolute;right:-14px;top:-14px;width:44px;height:44px;border-radius:50%;border:0;background:#0d3d35;color:#fff;font-size:22px;line-height:1;cursor:pointer;box-shadow:0 10px 24px -10px rgba(0,0,0,.5)}
@media (max-width:734px){ .hz-lightbox__x{right:6px;top:-54px} }
@media (prefers-reduced-motion:reduce){ .hz-lightbox,.hz-lightbox__box{transition:none} }
/* Tablets: the stacked screens are as wide as the screen allows without pushing their
   section past one screen; the three guides swipe at a large size. */
@media (max-width:1068px){
  .lp .hz-screen--hero,.lp .hz-joinMedia .hz-screen{margin:0 auto;width:min(100%,max(300px,calc((100svh - var(--hdr) - 440px) * 1.78)))}
}
@media (max-width:1068px) and (min-width:735px){
  .lp .hz-threeGrid{display:flex;gap:16px;overflow-x:auto;margin:0 -28px;padding:6px 28px 14px;scrollbar-width:none}
  .lp .hz-threeGrid::-webkit-scrollbar{display:none}
  .lp .hz-threeGrid>*{flex:0 0 min(72%,calc((100svh - var(--hdr) - 380px) * 1.78));min-width:0}
}
@media (min-width:1800px){
  .lp .hz-three .hz-in,.lp .hz-how .hz-in,.lp .hz-join .hz-in{max-width:min(2200px,90vw)}
}
/* The wide sections keep clear of the section navigator on the right. */
.lp .hz-three .hz-in,.lp .hz-how .hz-in,.lp .hz-join .hz-in{max-width:min(1500px,calc(100vw - 140px))}
@media (min-width:1800px){ .lp .hz-three .hz-in,.lp .hz-how .hz-in,.lp .hz-join .hz-in{max-width:min(2200px,calc(100vw - 180px))} }
@media (max-width:1179px){ .lp .hz-three .hz-in,.lp .hz-how .hz-in,.lp .hz-join .hz-in{max-width:none} }

/* ===========================================================================
   v5 (2 October 2026): white and green, every screen facing the viewer.
   White sections alternate with a soft mint; three deep-green bands carry the strip of
   standards, who we are, and the way in. The hero is a showreel: the words, then the
   one-minute film, which grows to the width of the screen as the page is scrolled. The
   three things paper cannot do slide across while the page holds still. Sections are as
   tall as what they hold, never taller than the screen. No screen is ever tilted.
   ========================================================================= */
.lp .hz{--mintbg:#eef7f2;--deep:#0d3d35}
.lp .hz-sec{min-height:0}
@media (min-width:735px) and (min-height:761px){ .lp .hz-sec{padding:clamp(48px,6.5vh,100px) 0} }

/* White and mint, alternating. */
.lp .hz-three,.lp .hz-how,.lp .hz-feat,.lp .hz-fit,.lp .hz-posts{background:var(--mintbg)}
.lp .hz-who2,.lp .hz-lib2,.lp .hz-fam,.lp .hz-gain,.lp .hz-faq{background:#fff}
.lp .hz-three .hz-tCard,.lp .hz-feat .hz-fPanel,.lp .hz-fit .hz-fitTile,.lp .hz-posts .hz-post{background:#fff}
.lp .hz-how .hz-step{background:#fff}
.lp .hz-feat .hz-fPanel{border-color:#d4e8dc}

/* Deep green bands */
.lp .hz-basis,.lp .hz-made,.lp .hz-join{background:radial-gradient(120% 90% at 85% 0%,#1f6b52 0%,transparent 55%),radial-gradient(90% 80% at 0% 100%,#11493d 0%,transparent 60%),#0d3d35;border:0}
.lp .hz-basis .hz-basisLabel{color:#bfead6}
.lp .hz-basis .hz-basisTrack span{color:#fff;border-right-color:rgba(255,255,255,.18)}
.lp .hz-made .hz-chip,.lp .hz-join .hz-chip,.lp .hz .hz-join .hz-chip--dark{background:rgba(0,0,0,.18);color:#fff;border:1px solid rgba(255,255,255,.22)}
.lp .hz-made .hz-h2,.lp .hz-join .hz-h2{color:#fff}
.lp .hz-made .hz-h2 em,.lp .hz-made .hz-h2.is-in em,.lp .hz-join .hz-h2 em,.lp .hz-join .hz-h2.is-in em{background-color:rgba(127,216,176,.2);color:#a8ebcb}
.lp .hz-made .hz-sub,.lp .hz-join .hz-sub{color:#d5e6de}
.lp .hz-made a.hz-link{color:#a8ebcb}
.lp .hz-made .hz-madeList li{border-color:transparent}
.lp .hz .hz-join a.hz-btn--light,.lp .hz-join a.hz-btn--solid{background:#fff;color:#0d3d35;box-shadow:0 14px 30px -16px rgba(0,0,0,.5)}
.lp .hz .hz-join a.hz-btn--ghost{background:transparent;border-color:rgba(255,255,255,.5);color:#fff}
.lp .hz-join .hz-aurora{opacity:.5}

/* Every screen faces the viewer: no tilt, no turn, on arrival or under the pointer. */
.lp .hz .hz-screen,.lp .hz .hz-screen--hero,.lp .hz .hz-joinMedia,.lp .hz .hz-tMedia{transform:none!important}
.lp.is-live .hz [data-hz-fx="tile"]:not(.is-in),.lp.is-live .hz [data-hz-fx="rise"]:not(.is-in),.lp.is-live .hz [data-hz-fx="zoom"]:not(.is-in),.lp.is-live .hz [data-hz-fx="flip"]:not(.is-in){transform:translateY(46px)}
.lp .hz [data-hz-tilt].is-tilt{transform:translateY(-5px)!important}
.lp .hz-heroMedia{animation:none}

/* 1. The showreel */
.lp .hz-reel{display:block;height:205svh;min-height:0;padding:0;background:radial-gradient(70% 60% at 50% 0%,rgba(127,216,176,.22),transparent 70%),#fff;overflow:clip}
.lp .hz-reelStage{position:sticky;top:var(--hdr);height:calc(100svh - var(--hdr));overflow:hidden}
.lp .hz-reel .hz-heroIn{display:block;position:relative;z-index:2;text-align:center;padding-top:clamp(20px,5.5vh,64px);
  opacity:calc(1 - var(--fp,0) * 2.6);transform:translateY(calc(var(--fp,0) * -85vh))}
/* The words leave faster than the film rises, so the film never passes over them. */
.lp .hz-reel .hz-heroText{max-width:980px;margin:0 auto}
.lp .hz-reel .hz h1.hz-h1,.lp .hz-reel h1.hz-h1{font-size:clamp(36px,min(5vw,7vh),84px);line-height:1.02}
.lp .hz-reel .hz-lead{margin-left:auto;margin-right:auto;max-width:40ch}
.lp .hz-reel .hz-ctas{justify-content:center}
.lp .hz-reelBox{position:absolute;left:50%;top:50%;z-index:1;width:min(calc(100vw - 2 * clamp(16px,3vw,40px)),calc((100svh - var(--hdr) - 32px) * 1.778));
  transform:translate(-50%,-50%) translateY(var(--rty,calc((1 - var(--fp,0)) * 27vh))) scale(calc(.46 + var(--fp,0) * .54));transform-origin:50% 50%;will-change:transform}
.lp .hz-reelBox .hz-screen{box-shadow:0 60px 120px -50px rgba(13,61,53,.55),0 0 0 1px rgba(13,61,53,.06)}

/* 3. Three things, sliding across while the page holds still (wide screens). */
.lp .hz-hsBar{display:none}
@media (min-width:1069px){
  .lp .hz-three{height:var(--hsH,auto);padding:0;display:block;overflow:clip}
  .lp .hz-hsStage{position:sticky;top:var(--hdr);height:calc(100svh - var(--hdr));display:flex;flex-direction:column;justify-content:center;overflow:hidden}
  .lp .hz-three .hz-in{max-width:none!important;padding:0}
  .lp .hz-three .hz-head{padding:0 max(28px,calc((100vw - 1220px) / 2));margin-bottom:clamp(18px,4vh,40px)}
  .lp .hz-threeGrid{display:flex!important;gap:28px;width:max-content;padding:0 max(28px,calc((100vw - 1220px) / 2));transform:translateX(var(--tx,0px));will-change:transform}
  .lp .hz-tCard{flex:none;width:min(1060px,76vw);display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);align-items:center;gap:clamp(20px,3vw,40px);padding:clamp(14px,1.4vw,22px);border-radius:30px;box-shadow:0 40px 80px -60px rgba(13,61,53,.45)}
  .lp .hz-tMedia .hz-screen{width:100%;max-width:calc((100svh - var(--hdr) - 250px) * 1.778);margin:0 auto}
  .lp .hz-tCard .hz-tTag{font-size:13.5px;letter-spacing:.06em}
  .lp .hz-tCard h3{font-size:clamp(24px,min(2.4vw,4vh),38px);line-height:1.12}
  .lp .hz-tCard p{font-size:clamp(16px,1.3vw,19px)}
  .lp .hz-hsBar{display:block;position:relative;height:3px;margin:clamp(16px,3vh,28px) max(28px,calc((100vw - 1220px) / 2)) 0;border-radius:3px;background:rgba(13,61,53,.12);overflow:hidden}
  .lp .hz-hsBar i{position:absolute;inset:0;background:linear-gradient(90deg,#2fa67a,#0d3d35);transform-origin:0 50%;transform:scaleX(var(--hp3,0))}
}

/* Who we serve: held still while each audience slides in from the side (wide screens). */
.lp .hz-panel{animation:hzSideIn .6s cubic-bezier(.2,.8,.2,1)}
.lp .hz-who2.is-back .hz-panel{animation-name:hzSideBack}
@keyframes hzSideIn{from{opacity:0;transform:translateX(80px)}}
@keyframes hzSideBack{from{opacity:0;transform:translateX(-80px)}}
@media (min-width:1069px){
  .lp .hz-who2{height:var(--whoH,auto);padding:0;display:block;overflow:clip}
  .lp .hz-who2>.hz-in{position:sticky;top:var(--hdr);height:calc(100svh - var(--hdr));display:flex;flex-direction:column;justify-content:center}
  .lp .hz-who2 .hz-tabs{position:relative}
  .lp .hz-who2 .hz-tabs::after{content:"";position:absolute;left:16px;right:16px;bottom:-14px;height:3px;border-radius:3px;background:linear-gradient(90deg,#2fa67a,#0d3d35) 0 0/calc(var(--wp,0) * 100%) 100% no-repeat,rgba(13,61,53,.12)}
}

/* Tablets and phones: the showreel and the three cards sit in the flow. */
@media (max-width:1068px){
  .lp .hz-reel{height:auto;padding:clamp(28px,5vh,56px) 0 clamp(36px,6vh,64px)}
  .lp .hz-reelStage{position:relative;top:auto;height:auto;overflow:visible}
  .lp .hz-reel .hz-heroIn{opacity:1;transform:none;padding-top:0}
  .lp .hz-reelBox{position:relative;left:auto;top:auto;transform:none;width:min(100% - 36px,max(300px,calc((100svh - var(--hdr) - 430px) * 1.78)));margin:clamp(20px,4vh,36px) auto 0}
}
@media (max-width:734px){
  .lp .hz-reelBox{width:calc(100% - 24px)}
  .lp .hz-reel h1.hz-h1{font-size:clamp(32px,9.6vw,44px)}
}
@media (prefers-reduced-motion:reduce){
  .lp .hz-reel{height:auto;padding:40px 0}
  .lp .hz-reelStage{position:relative;height:auto;top:auto}
  .lp .hz-reel .hz-heroIn{opacity:1;transform:none}
  .lp .hz-reelBox{position:relative;left:auto;top:auto;transform:none!important;margin:28px auto 0}
  .lp .hz-three{height:auto!important}
  .lp .hz-hsStage{position:relative;height:auto}
  .lp .hz-threeGrid{transform:none!important;flex-wrap:wrap;width:auto}
}