/* ---------------------------------------------------------------------------
   Handling Plan: the landing page.

   Loaded only on the landing. Everything is scoped under .lp, and because plans.css
   colours every anchor in the body (body.tp-body a, which is 0-1-2), any rule here that
   colours a link carries two classes so it wins on class count.

   Laid out the way apple.com and tesla.com present a product: full-width tiles with a
   12px gap between them, each with a short centred headline, one line under it, a
   button or a link, and the product large underneath. Tiles alternate white and the
   deep brand green; the brand green is the only colour. No photographs of people.

   Resets use :where() so they carry no weight. Do not put overflow on .lp: the header
   is sticky and an overflow on an ancestor kills that.
   ------------------------------------------------------------------------- */

.lp{
  --brand:#0d3d35;
  --brand-2:#0a302a;
  --deep:#0a2621;
  --deep-2:#0e312a;
  --leaf:#9fd4bf;
  --tint:#f5f7f6;
  --tint-2:#e9efec;
  --tint-3:#d3e0da;
  --ink:#1d1d1f;
  --ink-2:#424245;
  --muted:#6e6e73;
  --line:#e2e8e5;
  --max:1100px;
  --font:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --ease:cubic-bezier(.25,.8,.25,1);
  position:relative;isolation:isolate;background:#fff;color:var(--ink);
  font-family:var(--font);font-size:17px;line-height:1.47;letter-spacing:-.011em;-webkit-font-smoothing:antialiased
}
.lp *{box-sizing:border-box}
.lp :where(h1,h2,h3){margin:0;font-family:var(--font);color:inherit;font-weight:600;letter-spacing:-.025em;line-height:1.07;text-wrap:balance}
.lp :where(p){margin:0}
.lp :where(ul,ol){margin:0;padding:0;list-style:none}
.lp :where(button){font:inherit}
.lp [id]{scroll-margin-top:56px}
.lp__skip{position:absolute;left:-9999px;top:0;z-index:90;background:var(--brand);color:#fff;padding:12px 18px;font-weight:600}
.lp__skip:focus{left:0}
.lp :focus-visible{outline:2px solid var(--brand);outline-offset:3px}
html.lp-noscroll{overflow:hidden}

/* ---- The announcement ---------------------------------------------------------------- */
.lp__bar{background:var(--tint);border-bottom:1px solid var(--line);padding:11px 22px}
.lp__bar p{max-width:1200px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 14px;font-size:15px;color:var(--ink)}
.lp__new{display:inline-block;padding:3px 11px;border-radius:999px;background:linear-gradient(120deg,#cfe8da,#dff1ea);color:var(--brand);font-size:12.5px;font-weight:600;letter-spacing:.02em}
.lp .lp__barLink{display:inline-flex;align-items:center;gap:6px;color:var(--brand);font-size:14.5px;font-weight:600;text-decoration:none;border-bottom:1.5px solid currentColor;padding-bottom:1px}
.lp__barLink svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)}
.lp .lp__barLink:hover svg{transform:translateX(3px)}

/* ---- The header, with a mega menu under each heading ------------------------------------ */
.lp [id]{scroll-margin-top:96px}
.lp__head{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s}
.lp__head.is-stuck{border-bottom-color:var(--line);box-shadow:0 10px 30px -24px rgba(10,38,33,.35)}
.lp__headIn{position:relative;max-width:1200px;margin:0 auto;height:76px;padding:0 22px;display:flex;align-items:center;gap:28px;transition:height .3s var(--ease)}
.lp__head.is-stuck .lp__headIn{height:64px}
.lp__head .tp-logo{--lk:23px;flex:0 0 auto;text-decoration:none}
.lp .lp__head .tp-logo,.lp .lp__head .tp-logo span,.lp .lp__head .tp-logo i,.lp .lp__head .tp-logo b{color:var(--brand)}
.lp .lp__head .tp-logo small{color:var(--muted)}
.lp__nav{flex:1;display:flex;align-items:center;gap:12px;min-width:0}
.lp__menus{display:flex;align-items:center;gap:2px}
.lp .lp__navLink,.lp__ddBtn{appearance:none;display:inline-flex;align-items:center;gap:6px;padding:10px 14px;border:0;border-radius:10px;background:none;cursor:pointer;
  color:var(--ink);font:500 15.5px/1 var(--font);letter-spacing:-.01em;text-decoration:none;white-space:nowrap;transition:background .2s,color .2s}
.lp .lp__navLink:hover,.lp__ddBtn:hover,.lp__dd.is-open .lp__ddBtn{background:var(--tint);color:var(--brand)}
.lp__ddBtn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)}
.lp__dd.is-open .lp__ddBtn svg{transform:rotate(180deg)}
.lp__navActs{margin-left:auto;display:flex;align-items:center;gap:8px}
.lp .lp__navActs .lp__btn{min-height:44px;padding:10px 22px;font-size:15.5px}
.lp .lp__navActs .lp__btn--line{border:1.5px solid var(--tint-3)}
.lp .lp__navActs .lp__btn--line:hover{border-color:var(--brand)}
.lp__barShort{display:none}
.lp__burger{display:none}
.lp__headBar{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--brand);transform:scaleX(0);transform-origin:0 50%}

/* The panel: a wide card under the header, the items in two columns and a feature card. */
.lp__ddPanel{position:absolute;left:22px;right:22px;top:calc(100% - 6px);display:grid;grid-template-columns:1fr;gap:10px;padding:14px;border-radius:24px;background:#fff;
  border:1px solid var(--line);box-shadow:0 40px 80px -40px rgba(10,38,33,.45);opacity:0;visibility:hidden;transform:translateY(-8px) scale(.99);transform-origin:50% 0;
  transition:opacity .25s var(--ease),transform .3s var(--ease),visibility .3s}
.lp__ddPanel.has-aside{grid-template-columns:minmax(0,1fr) 320px}
.lp__dd.is-open .lp__ddPanel{opacity:1;visibility:visible;transform:none}
.lp__ddGrid{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.lp .lp__ddGrid a{display:flex;align-items:flex-start;gap:14px;padding:14px;border-radius:16px;color:var(--ink);text-decoration:none;transition:background .2s}
.lp .lp__ddGrid a:hover{background:var(--tint)}
.lp__ddIcon{flex:none;width:44px;height:44px;border-radius:12px;background:var(--tint-2);display:grid;place-items:center;transition:background .25s,transform .3s var(--ease)}
.lp__ddIcon svg{width:22px;height:22px;fill:none;stroke:var(--brand);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:stroke .25s}
.lp .lp__ddGrid a:hover .lp__ddIcon{background:var(--brand);transform:scale(1.05)}
.lp .lp__ddGrid a:hover .lp__ddIcon svg{stroke:#fff}
.lp__ddGrid b{display:block;font-size:16px;font-weight:600;letter-spacing:-.01em}
.lp__ddGrid small{display:block;margin-top:3px;font-size:14px;color:var(--muted);line-height:1.4}
.lp .lp__ddAside{display:flex;flex-direction:column;justify-content:flex-end;gap:8px;min-height:180px;padding:24px;border-radius:18px;text-decoration:none;color:#fff;
  background:radial-gradient(120% 90% at 100% 0%,#1d5a4c,var(--deep) 65%);position:relative;overflow:hidden}
.lp__ddAside small{font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--leaf)}
.lp__ddAside b{font-size:21px;font-weight:600;letter-spacing:-.02em;line-height:1.2}
.lp__ddAside span{font-size:20px;transition:transform .3s var(--ease)}
.lp .lp__ddAside:hover span{transform:translateX(5px)}
.lp__dd.is-open .lp__ddGrid a{animation:lp-ddIn .4s var(--ease) both}
.lp__dd.is-open .lp__ddGrid a:nth-child(2){animation-delay:.03s}.lp__dd.is-open .lp__ddGrid a:nth-child(3){animation-delay:.06s}
.lp__dd.is-open .lp__ddGrid a:nth-child(4){animation-delay:.09s}.lp__dd.is-open .lp__ddGrid a:nth-child(5){animation-delay:.12s}
@keyframes lp-ddIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}


/* ---- Buttons and links -------------------------------------------------------------- */
.lp .lp__btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:11px 22px;border-radius:980px;background:var(--brand);color:#fff;
  font-size:17px;font-weight:500;letter-spacing:-.02em;line-height:1.18;text-decoration:none;white-space:nowrap;border:1px solid var(--brand);transition:background .2s,color .2s,border-color .2s}
.lp .lp__btn:hover{background:var(--brand-2);border-color:var(--brand-2)}
.lp .lp__btn--ghost{background:transparent;color:var(--brand)}
.lp .lp__btn--ghost:hover{background:var(--brand);color:#fff}
.lp .lp__btn--sm{min-height:34px;padding:7px 15px;font-size:14px}
.lp .lp__link{color:var(--brand);text-decoration:none;font-size:17px;font-weight:500;white-space:nowrap}
.lp .lp__link:hover{text-decoration:underline;text-underline-offset:3px}
.lp__links{margin-top:22px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px 26px}

/* ---- Arrival ------------------------------------------------------------ */
.lp.is-live [data-lp-in]{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0ms)}
.lp.is-live [data-lp-in].is-in{opacity:1;transform:none}
.lp__w{display:inline-block;opacity:0;transform:translateY(.35em);filter:blur(8px);transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease);transition-delay:var(--d,0ms)}
.lp__words.is-in .lp__w{opacity:1;transform:none;filter:none}
/* Section headings rise word by word instead of fading as one block. */
.lp.is-live h2.lp__words[data-lp-in]{opacity:1;transform:none}
.lp h2.lp__words .lp__w{transform:translateY(.6em);transition-duration:1s}
.lp h2.lp__words.is-in .lp__w{transform:none}

/* ---- Pointer effects (added by the script for mouse users only) -------------------- */
.lp__spot{--mx:50%;--my:50%}
.lp__spot::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(520px circle at var(--mx) var(--my),rgba(159,212,191,.16),transparent 55%)}
.lp__spot:hover::after{opacity:1}
.lp__moreItem.lp__spot,.lp__factCol.lp__spot,.lp__pillars>div.lp__spot,.lp__pickPanel.lp__spot{position:relative}
.lp__moreItem.lp__spot::after,.lp__factCol.lp__spot::after,.lp__pickPanel.lp__spot::after{background:radial-gradient(380px circle at var(--mx) var(--my),rgba(13,61,53,.07),transparent 60%)}
.lp__v{--rx:0deg;--ry:0deg;transform:perspective(1400px) rotateX(var(--rx)) rotateY(var(--ry));transition:transform .6s var(--ease)}
.lp__v.is-tilt{transition:transform .12s linear}
.lp .lp__btn{transition:background .2s,color .2s,border-color .2s,translate .35s var(--ease)}

/* A slow light moving across every dark tile. */
.lp__tile--dark::before{content:"";position:absolute;width:900px;height:900px;left:50%;top:-520px;margin-left:-450px;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(159,212,191,.13),rgba(159,212,191,0));animation:lp-aurora 16s ease-in-out infinite alternate}
@keyframes lp-aurora{from{transform:translateX(-18%) scale(1)}to{transform:translateX(18%) scale(1.15)}}
.lp__tileMedia{z-index:1}

/* ---- The tiles --------------------------------------------------------------------- */
.lp__tiles{display:grid;gap:12px;padding-bottom:12px;background:#fff}
/* One rhythm for every section: the same space above and below the content, and the
   same gap between a headline and its screen. Nothing is cut off at the edge. */
.lp{--sec:clamp(64px,7vw,96px);--gap:44px}
.lp__tile{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;text-align:center;padding:var(--sec) 22px}
.lp__tile--dark{background:var(--deep);color:#fff}
.lp__tile--light{background:var(--tint)}
.lp__tile--mid{background:var(--tint-2)}
.lp__tile--white{background:#fff}

.lp__tileText{position:relative;z-index:1;max-width:760px}
.lp__tile h2{font-size:clamp(34px,4.6vw,56px)}
.lp__sub{margin:10px auto 0;max-width:34ch;font-size:clamp(19px,2vw,28px);font-weight:400;letter-spacing:-.015em;line-height:1.2;color:var(--ink-2)}
.lp__tile--dark .lp__sub{color:rgba(255,255,255,.78)}
.lp .lp__tile--dark .lp__link{color:var(--leaf)}
.lp .lp__tile--dark .lp__btn{background:#fff;color:var(--brand);border-color:#fff}
.lp .lp__tile--dark .lp__btn:hover{background:var(--tint-2);border-color:var(--tint-2)}
.lp .lp__tile--dark .lp__btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.lp .lp__tile--dark .lp__btn--ghost:hover{background:#fff;color:var(--brand);border-color:#fff}

/* The product under each headline, rising and growing into place as it arrives. */
.lp__tileMedia{--p:1;position:relative;width:min(900px,100%);margin-top:var(--gap);
  transform:translateY(calc((1 - var(--p)) * 36px)) scale(calc(.94 + var(--p) * .06));transform-origin:50% 50%;will-change:transform}
.lp__tileMedia--hero{width:min(1000px,100%)}
.lp__tileMedia--wide{width:min(1000px,100%)}

/* ---- Guides in place: a device, playing by itself, easing in to the action -------- */
.lp__v{position:relative;overflow:hidden;background:var(--tint);aspect-ratio:16/9;isolation:isolate}
.lp__v--device{border:10px solid #111615;border-radius:26px;box-shadow:0 40px 80px -44px rgba(10,38,33,.55)}
.lp__tile--dark .lp__v--device{border-color:#030a08;box-shadow:0 40px 90px -40px rgba(0,0,0,.75)}
.lp__vZoom{position:absolute;inset:0;transform-origin:var(--zo,50% 50%)}
/* No zoom on the page: the guides carry their own camera, which follows the cursor. A
   zoom here was fixed on one spot, so the cursor walked out of the frame. */
@keyframes lp-zoom{0%,8%{transform:scale(1)}32%,64%{transform:scale(var(--zs,1.22))}88%,100%{transform:scale(1)}}
.lp__v video,.lp__v img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.lp__vBtn{position:absolute;right:14px;bottom:14px;z-index:2;width:34px;height:34px;border-radius:50%;border:0;cursor:pointer;background:rgba(29,29,31,.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:grid;place-items:center;opacity:.75;transition:opacity .2s}
.lp__vBtn:hover{opacity:1}
.lp__vBtn i{width:10px;height:12px;border-left:3px solid #fff;border-right:3px solid #fff}
.lp__vBtn.is-paused i{width:0;height:0;border-right:0;border-left:11px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent;margin-left:3px}
.lp__v--still{display:grid;grid-template-rows:auto 1fr;background:#fff}
.lp__vBar{display:flex;align-items:center;gap:6px;padding:9px 12px;background:var(--tint);border-bottom:1px solid var(--line);font-size:11.5px;color:var(--muted)}
.lp__vBar i{width:8px;height:8px;border-radius:50%;background:var(--tint-3)}
.lp__vBar span{margin-left:8px}
.lp__vBody{padding:18px 20px;display:grid;gap:9px;align-content:start;text-align:left}
.lp__vBody b{font-size:15px;color:var(--brand)}
.lp__vBody i{height:8px;border-radius:4px;background:var(--tint-2)}
.lp__vBody i.is-short{width:55%}

/* ---- The hero ---------------------------------------------------------------------- */
.lp__hero{justify-content:flex-start;background:radial-gradient(70% 55% at 50% 0%,#e6f3ec,rgba(255,255,255,0) 70%),#fff}
.lp__hero h1{font-size:clamp(40px,5.6vw,76px);line-height:1.05;letter-spacing:-.035em;color:var(--brand)}
.lp__hero .lp__tileText{max-width:980px}
.lp__hero .lp__eyebrow{margin-bottom:22px}
.lp__hero .lp__sub{max-width:24ch;color:var(--ink-2)}
.lp__heroNote{position:relative;z-index:2;margin-top:24px;font-size:14px;color:var(--muted)}
.lp .lp__hero .lp__btn--ghost{border-color:var(--tint-3)}
/* On a white page the sections are told apart by space and a hairline, not by colour. */
.lp__tiles{gap:0}
.lp__tile--white+.lp__tile--white,.lp__tile--white+.lp__pair,.lp__pair+.lp__say,.lp__say+.lp__who,.lp__who+.lp__tile--white{border-top:1px solid #eef2f0}
.lp__pair{padding-top:12px;padding-bottom:12px}
.lp__pair .lp__tile{border-radius:28px}
/* The one dark block left: the close, as an inset card. */
#start.lp__tile--dark{margin:24px 12px 12px;border-radius:32px}

/* ---- The two-up tiles ------------------------------------------------------------------ */
.lp__pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 12px}
.lp__tile--half{padding:clamp(48px,5vw,64px) 22px}
.lp__tile--half .lp__sub{min-height:2.4em}
.lp__tile--half h2{font-size:clamp(28px,3vw,40px)}
.lp__tile--half .lp__sub{font-size:clamp(17px,1.5vw,21px)}
.lp__tile--half .lp__tileMedia{width:100%;margin-top:36px}
.lp__tile--half .lp__v--device{border-width:8px;border-radius:22px}

/* ---- The statement, lighting up as it is read ----------------------------------------- */
.lp__say{height:150vh;background:#fff}
.lp__sayIn{position:sticky;top:0;height:100vh;display:flex;align-items:center;justify-content:center;padding:0 22px}
.lp__sayIn p{width:min(1100px,100%);font-size:clamp(28px,4.2vw,56px);font-weight:600;letter-spacing:-.03em;line-height:1.14;text-align:left}
.lp__sw{color:#d3ddd9;transition:color .35s ease}
.lp__sw.is-lit{color:var(--brand)}
/* Four lines, centred, each lighting up in turn; the phrase that matters in each gets
   the brand highlight sweeping in behind it once the whole phrase is lit. */
.lp__sayIn .lp__sayLines{text-align:center;font-size:clamp(30px,4.6vw,64px);line-height:1.12;letter-spacing:-.035em}
.lp__line{display:block}
.lp__line+.lp__line{margin-top:.28em}
.lp__sayLines em{font-style:normal;padding:0 .12em;border-radius:.18em;background:linear-gradient(120deg,#d6ecdf,#e4f2ec) no-repeat 0 50%/0% 100%;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;transition:background-size .8s var(--ease)}
.lp__sayLines em:has(.lp__sw:last-child.is-lit){background-size:100% 100%}

/* ---- Who you are: pick on the left, the answer on the right ------------------------- */
.lp__who{background:#fff;padding:var(--sec) 22px}
.lp__whoIn{max-width:1100px;margin:0 auto}
.lp__whoTitle{font-size:clamp(38px,5.2vw,68px);letter-spacing:-.035em;line-height:1.1;color:var(--brand)}
.lp__hl{display:inline;padding:0 .14em;border-radius:14px;background:linear-gradient(120deg,#d6ecdf,#e4f2ec);box-decoration-break:clone;-webkit-box-decoration-break:clone}
.lp__whoLead{margin-top:28px;max-width:60ch;font-size:clamp(17px,1.3vw,19px);color:var(--ink-2)}
.lp__pick{margin-top:clamp(36px,5vw,64px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;padding:24px;border:1px solid var(--line);border-radius:30px;background:#fff}
.lp__pickSide{display:flex;flex-direction:column;min-width:0}
.lp__pickList{display:grid;gap:14px}
.lp__pickList button{appearance:none;display:flex;align-items:center;gap:18px;width:100%;padding:16px 22px 16px 16px;border:1px solid var(--line);border-radius:16px;background:#fff;color:var(--ink);text-align:left;cursor:pointer;
  transition:background .25s,border-color .25s,box-shadow .25s}
.lp__pickList button:hover{border-color:var(--tint-3);box-shadow:0 12px 28px -22px rgba(10,38,33,.5)}
.lp__pickList button[aria-selected="true"]{background:var(--tint-2);border-color:var(--brand)}
.lp__pickIcon{flex:none;width:58px;height:58px;border-radius:12px;background:var(--tint);display:grid;place-items:center;transition:background .25s}
.lp__pickIcon svg{width:24px;height:24px;fill:none;stroke:var(--brand);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:stroke .25s}
.lp__pickList button[aria-selected="true"] .lp__pickIcon{background:var(--brand)}
.lp__pickList button[aria-selected="true"] .lp__pickIcon svg{stroke:#fff}
.lp__pickName{flex:1;min-width:0}
.lp__pickName b{display:block;font-size:clamp(19px,1.6vw,23px);font-weight:600;letter-spacing:-.02em}
.lp__pickName small{display:block;margin-top:2px;font-size:16px;color:var(--ink-2)}
.lp__pickArrow{flex:none;width:22px;height:22px;fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--ease)}
.lp__pickList button:hover .lp__pickArrow,.lp__pickList button[aria-selected="true"] .lp__pickArrow{transform:translateX(3px)}
.lp__pickCarer{margin-top:auto;padding-top:26px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:16px}
.lp__pickList{margin-bottom:28px}
.lp__pickCarer b{display:block;font-size:20px;font-weight:600;letter-spacing:-.02em}
.lp__pickCarer small{display:block;margin-top:2px;font-size:16px;color:var(--ink-2)}
.lp .lp__btn--line{background:#fff;color:var(--brand);border-color:var(--line)}
.lp .lp__btn--line:hover{background:var(--tint);color:var(--brand);border-color:var(--brand)}
.lp .lp__btn--white{background:#fff;color:var(--brand);border-color:#fff}
.lp .lp__btn--white:hover{background:var(--brand);color:#fff;border-color:var(--brand)}
.lp__pickPanel{display:flex;flex-direction:column;gap:18px;padding:clamp(28px,3.4vw,40px);border-radius:24px;
  background:linear-gradient(135deg,#dcefe4 0%,#e3f1ea 45%,#d9ece8 100%);color:var(--ink)}
.lp__pickPanel[hidden]{display:none}
.lp__pickPanel.is-fresh{animation:lp-fresh .45s var(--ease) both}
@keyframes lp-fresh{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.lp__pickTag{font-size:14px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--brand)}
.lp__pickPanel h3{font-size:clamp(28px,2.8vw,38px);letter-spacing:-.03em;color:var(--brand)}
.lp__pickPanel>p{font-size:clamp(16px,1.3vw,19px);line-height:1.55;color:var(--ink-2)}
.lp__pickPanel ul{display:grid;gap:18px;margin-top:6px}
.lp__pickPanel li{position:relative;padding-left:36px;font-size:clamp(16px,1.3vw,19px);font-weight:500;color:var(--brand)}
.lp__pickPanel li::before{content:"";position:absolute;left:0;top:3px;width:22px;height:22px;border-radius:50%;background:var(--brand)}
.lp__pickPanel li::after{content:"";position:absolute;left:6.5px;top:9px;width:9px;height:5px;border:2px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg)}
.lp__pickFoot{margin-top:auto;padding-top:24px;border-top:1px solid rgba(13,61,53,.18);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px}
.lp__pickFoot b{font-size:clamp(17px,1.4vw,21px);font-weight:600;color:var(--brand)}
.lp .lp__pickFoot .lp__btn{min-height:52px;padding:13px 26px;font-size:18px}

/* ---- Safe by design ------------------------------------------------------------------ */

.lp__eyebrow{display:inline-block;margin-bottom:16px;font-size:14px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--brand)}
.lp__safe .lp__sub{max-width:44ch}
.lp__pillars{width:min(1100px,100%);margin-top:clamp(40px,5vw,64px);display:grid;grid-template-columns:repeat(3,1fr);gap:16px;text-align:left}
.lp__pillars>div{padding:34px 30px;border-radius:26px;background:linear-gradient(160deg,#f4f9f6,#e8f2ed);border:1px solid #dcebe3;display:grid;gap:12px;align-content:start;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),opacity .9s var(--ease)}
.lp__pillars>div.is-in:hover{transform:translateY(-6px);box-shadow:0 34px 60px -40px rgba(10,38,33,.5)}
.lp__pillIcon{width:56px;height:56px;border-radius:16px;background:linear-gradient(145deg,#1d5a4c,var(--brand));display:grid;place-items:center;margin-bottom:8px;box-shadow:0 14px 26px -12px rgba(13,61,53,.6)}
.lp__pillIcon svg{width:27px;height:27px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lp__pillars h3{font-size:clamp(21px,1.8vw,24px);color:var(--brand);letter-spacing:-.02em}
.lp__pillars p{font-size:16px;line-height:1.55;color:var(--ink-2)}

/* ---- Everything else ---------------------------------------------------------------- */
/* 3D cards: they swing up into place in a wave as they arrive, and with a mouse each
   one turns towards the pointer with its number, icon and heading at different depths
   and a glare following the light. */
.lp__moreGrid{width:min(1100px,100%);margin-top:clamp(40px,5vw,60px);display:grid;grid-template-columns:repeat(4,1fr);gap:18px;text-align:left;perspective:1600px}
.lp__moreItem{--rx:0deg;--ry:0deg;--gx:50%;--gy:50%;position:relative;display:grid;gap:10px;align-content:start;min-height:250px;padding:28px 24px 26px;border-radius:24px;
  background:linear-gradient(160deg,#fff 0%,#fbfdfc 60%,#f1f7f4 100%);border:1px solid var(--line);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 24px 50px -36px rgba(10,38,33,.45);transform-style:preserve-3d;overflow:hidden}
.lp.is-live .lp__moreItem[data-lp-in]{opacity:0;transform:perspective(1200px) rotateX(46deg) translateY(60px) translateZ(-80px);transform-origin:50% 100%;
  transition:opacity .9s var(--ease),transform 1.1s cubic-bezier(.2,.9,.25,1.08),box-shadow .4s;transition-delay:var(--d,0ms)}
.lp.is-live .lp__moreItem[data-lp-in].is-in{opacity:1;transform:perspective(1200px) rotateX(0) rotateY(0)}
.lp.is-live .lp__moreItem[data-lp-in].is-in.is-tilt{transform:perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)) translateZ(14px);
  transition:transform .12s linear,box-shadow .4s;transition-delay:0ms;box-shadow:0 1px 0 #fff inset,0 50px 80px -40px rgba(10,38,33,.5)}
.lp__moreItem>*{transition:transform .5s var(--ease)}
.lp__moreItem.is-tilt .lp__moreIcon{transform:translateZ(46px)}
.lp__moreItem.is-tilt h3{transform:translateZ(30px)}
.lp__moreItem.is-tilt p{transform:translateZ(16px)}
.lp__moreItem.is-tilt .lp__moreNum{transform:translateZ(8px)}
.lp__moreNum{position:absolute;right:18px;top:10px;font-size:64px;font-weight:700;letter-spacing:-.05em;line-height:1;
  background:linear-gradient(180deg,rgba(13,61,53,.13),rgba(13,61,53,0));-webkit-background-clip:text;background-clip:text;color:transparent;pointer-events:none}
.lp__moreIcon{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;margin-bottom:10px;
  background:linear-gradient(145deg,#1d5a4c,var(--brand));box-shadow:0 14px 26px -12px rgba(13,61,53,.6)}
.lp__moreIcon svg{width:24px;height:24px;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.lp__moreItem h3{font-size:19px;letter-spacing:-.02em;color:var(--ink)}
.lp__moreItem p{font-size:15px;line-height:1.55;color:var(--muted)}
.lp__glare{position:absolute;inset:0;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .35s;
  background:radial-gradient(420px circle at var(--gx) var(--gy),rgba(255,255,255,.75),rgba(255,255,255,0) 45%),radial-gradient(600px circle at var(--gx) var(--gy),rgba(159,212,191,.18),transparent 60%)}
.lp__moreItem.is-tilt .lp__glare{opacity:1}

/* ---- Library ------------------------------------------------------------------------ */
.lp__lib{padding-left:0;padding-right:0}
.lp__marquee{width:100%;margin-top:40px;overflow:hidden;display:grid;gap:12px;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.lp__track{display:flex;gap:10px;width:max-content;animation:lp-marq 100s linear infinite}
.lp__track--rev{animation-direction:reverse;animation-duration:120s}
.lp__marquee:hover .lp__track{animation-play-state:paused}
@keyframes lp-marq{to{transform:translateX(-50%)}}
.lp__track span{display:inline-flex;align-items:center;padding:12px 20px;border-radius:980px;background:#fff;font-size:15px;font-weight:500;white-space:nowrap;color:var(--ink-2)}

/* ---- Clinical basis and IG -------------------------------------------------------------- */
.lp__facts{width:min(1100px,100%);margin-top:48px;display:grid;grid-template-columns:1fr 1fr;gap:14px;text-align:left}
.lp__factCol{background:var(--tint);border-radius:22px;padding:32px 30px;display:grid;gap:18px;align-content:start}
.lp__factCol h3{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--brand)}
.lp__factCol ul{display:grid;gap:16px}
.lp__factCol li{position:relative;padding-left:32px}
.lp__factCol li::before{content:"";position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:50%;background:var(--brand)}
.lp__factCol li::after{content:"";position:absolute;left:6px;top:7.5px;width:8px;height:4px;border:2px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg)}
.lp__factCol b{display:block;font-size:16px;font-weight:600}
.lp__factCol li span{display:block;margin-top:2px;font-size:14.5px;color:var(--muted)}
.lp__factCol .lp__link{justify-self:start}

/* ---- FAQ ---------------------------------------------------------------------------- */
.lp__faqList{width:min(820px,100%);margin-top:36px;text-align:left;border-top:1px solid var(--line)}
.lp__faqList details{border-bottom:1px solid var(--line)}
.lp__faqList summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 2px;min-height:44px;font-size:19px;font-weight:600;letter-spacing:-.015em}
.lp__faqList summary::-webkit-details-marker{display:none}
.lp__faqList summary::after{content:"";flex:none;width:13px;height:13px;background:linear-gradient(var(--brand),var(--brand)) center/13px 2px no-repeat,linear-gradient(var(--brand),var(--brand)) center/2px 13px no-repeat;transition:transform .3s var(--ease)}
.lp__faqList details[open] summary::after{transform:rotate(45deg)}
.lp__faqList p{padding:0 2px 22px;color:var(--ink-2);font-size:16px;max-width:64ch}
.lp .lp__faqList a{color:var(--brand)}
.lp__faqMore{margin-top:26px}

/* ---- Footer: small and grey, like Apple's ----------------------------------------------- */
.lp__foot{background:var(--tint);color:var(--muted);font-size:12.5px;line-height:1.5}
.lp__footIn{max-width:1024px;margin:0 auto;padding:22px 22px 30px}
.lp__footNote{padding-bottom:16px;border-bottom:1px solid var(--tint-3)}
.lp__footCols{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:22px 0}
.lp__foot nav{display:grid;gap:2px;align-content:start}
.lp__foot nav b{color:var(--ink);font-weight:600;margin-bottom:6px}
.lp .lp__foot nav a{color:var(--muted);text-decoration:none;padding:4px 0}
.lp .lp__foot nav a:hover{color:var(--ink);text-decoration:underline}
.lp__footSmall{padding-top:14px;border-top:1px solid var(--tint-3)}

/* ---- The floating button, once the first screen has passed ------------------------------ */
.lp .lp__float{position:fixed;left:50%;bottom:22px;z-index:45;transform:translate(-50%,140%);opacity:0;padding:13px 26px;border-radius:980px;
  background:rgba(13,61,53,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#fff;text-decoration:none;font-size:15px;font-weight:500;
  box-shadow:0 18px 40px -16px rgba(10,38,33,.6);transition:transform .5s var(--ease),opacity .4s}
.lp .lp__float.is-on{transform:translate(-50%,0);opacity:1}
.lp .lp__float:hover{background:var(--brand-2)}

/* ---- The home page's story ---------------------------------------------------------------- */
.lp .lp__hero .lp__sub--hero{max-width:42ch;margin-top:20px;font-size:clamp(18px,1.6vw,22px);line-height:1.45}
.lp__trust{margin-top:26px;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px}
.lp__trust li{position:relative;padding-left:24px;font-size:14.5px;font-weight:500;color:var(--ink-2)}
.lp__trust li::before{content:"";position:absolute;left:0;top:2px;width:17px;height:17px;border-radius:50%;background:var(--brand)}
.lp__trust li::after{content:"";position:absolute;left:5px;top:7px;width:7px;height:3.5px;border:1.8px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg)}
.lp__more1{margin-top:34px}

/* The usual way against this one: the old dims and crosses out as the new arrives. */
.lp__vs{width:min(1100px,100%);margin-top:clamp(36px,5vw,56px);text-align:left;border-radius:26px;border:1px solid var(--line);overflow:hidden;background:#fff;
  box-shadow:0 40px 80px -60px rgba(10,38,33,.5)}
.lp__vsHead,.lp__vsRow{display:grid;grid-template-columns:200px 1fr 1fr}
.lp__vsHead span{padding:18px 26px;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:var(--tint)}
.lp__vsHead span:last-child{color:#fff;background:var(--brand)}
.lp__vsRow{border-top:1px solid var(--line)}
.lp__vsRow>span{padding:24px 26px;font-size:16px;line-height:1.5}
.lp__vsTopic{display:flex;align-items:center;gap:12px;font-weight:600;color:var(--ink);background:var(--tint)}
.lp__vsIcon{flex:none;width:38px;height:38px;border-radius:11px;background:#fff;display:grid;place-items:center;border:1px solid var(--line)}
.lp__vsIcon svg{width:19px;height:19px;fill:none;stroke:var(--brand);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lp__vsOld{position:relative;color:var(--muted);padding-left:54px !important}
.lp__vsOld::before{content:"";position:absolute;left:22px;top:26px;width:20px;height:20px;border-radius:50%;background:#eef1f0}
.lp__vsOld::after{content:"\00D7";position:absolute;left:22px;top:25px;width:20px;text-align:center;font-size:15px;line-height:20px;color:#8a9691}
.lp__vsNew{position:relative;color:var(--brand);font-weight:500;padding-left:56px !important;background:linear-gradient(90deg,#f1f8f4,#fff)}
.lp__vsNew::before{content:"";position:absolute;left:22px;top:26px;width:22px;height:22px;border-radius:50%;background:var(--brand);transform:scale(0);transition:transform .5s cubic-bezier(.3,1.6,.5,1) .35s}
.lp__vsNew::after{content:"";position:absolute;left:28.5px;top:32.5px;width:9px;height:4.5px;border:2px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) scale(0);transition:transform .4s var(--ease) .55s}
.lp__vsRow.is-in .lp__vsNew::before{transform:scale(1)}
.lp__vsRow.is-in .lp__vsNew::after{transform:rotate(-45deg) scale(1)}

/* The four steps, and what each saves. */
.lp__tile--intro{padding-bottom:0}
.lp__stepTile{padding-top:clamp(48px,5vw,72px)}
.lp__step{display:inline-block;margin-bottom:14px;padding:7px 14px;border-radius:999px;background:var(--tint-2);color:var(--brand);font-size:13.5px;font-weight:600;letter-spacing:.02em}
.lp__saves{display:inline-flex;align-items:center;gap:9px;margin-top:18px;padding:9px 16px 9px 12px;border-radius:999px;border:1px solid #dcebe3;background:#f6faf8;font-size:14.5px;font-weight:500;color:var(--brand)}
.lp__saves svg{width:18px;height:18px;fill:none;stroke:var(--brand);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* The anatomy of a plan: a page held still on the left, its parts lighting up as the
   list on the right is read. */
.lp__anat{width:min(1100px,100%);margin-top:clamp(40px,5vw,60px);display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(28px,5vw,72px);align-items:start;text-align:left}
.lp__anatDoc{position:sticky;top:110px;padding:26px;border-radius:24px;background:#fff;border:1px solid var(--line);box-shadow:0 50px 90px -60px rgba(10,38,33,.55);
  transform:perspective(1400px) rotateY(6deg) rotateX(2deg);transform-origin:0 50%}
.lp__anatHead{padding-bottom:16px;margin-bottom:10px;border-bottom:1px solid var(--line)}
.lp__anatHead b{display:block;font-size:18px;color:var(--brand)}
.lp__anatHead small{display:block;margin-top:3px;font-size:13px;color:var(--muted)}
.lp__anatRow{display:grid;gap:7px;padding:13px 14px;margin:4px 0;border-radius:14px;border-left:3px solid transparent;transition:background .4s var(--ease),border-color .4s,transform .4s var(--ease)}
.lp__anatRow span{font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);transition:color .4s}
.lp__anatRow i{display:block;height:7px;border-radius:4px;background:#edf1ef;transition:background .4s}
.lp__anatRow i.is-short{width:58%}
.lp__anatRow.is-on{background:#eff7f2;border-left-color:var(--brand);transform:translateX(6px) scale(1.02)}
.lp__anatRow.is-on span{color:var(--brand)}
.lp__anatRow.is-on i{background:#cfe6da}
.lp__anatFoot{margin-top:12px;padding-top:14px;border-top:1px solid var(--line);display:flex;justify-content:space-between;font-size:13.5px;color:var(--muted)}
.lp__anatFoot em{font-style:normal;font-weight:600;color:var(--brand)}
.lp__anatList{display:grid;gap:10px;counter-reset:none}
.lp__anatList li{display:flex;gap:18px;padding:22px 22px;border-radius:20px;border:1px solid transparent;opacity:.45;transition:opacity .4s,background .4s,border-color .4s}
.lp__anatList li.is-on{opacity:1;background:#fff;border-color:var(--line);box-shadow:0 30px 60px -48px rgba(10,38,33,.5)}
.lp__anatNum{flex:none;width:44px;height:44px;border-radius:13px;display:grid;place-items:center;font-size:15px;font-weight:700;color:var(--brand);background:var(--tint-2);transition:background .4s,color .4s}
.lp__anatList li.is-on .lp__anatNum{background:var(--brand);color:#fff}
.lp__anatList h3{font-size:20px;letter-spacing:-.02em;color:var(--ink)}
.lp__anatList p{margin-top:4px;font-size:15.5px;line-height:1.55;color:var(--ink-2)}

/* ---- The site's other pages --------------------------------------------------------------- */
.hp__hero{padding-top:clamp(72px,9vw,120px);background:radial-gradient(70% 60% at 50% 0%,#e6f3ec,rgba(255,255,255,0) 70%),#fff}
.hp__hero h1{font-size:clamp(40px,6vw,76px);letter-spacing:-.035em;color:var(--brand);max-width:18ch;margin:0 auto}
.hp__hero .lp__sub{max-width:46ch;margin-top:18px}
.lp .hp__hero .lp__btn--ghost,.lp .lp__hero .lp__btn--ghost{border-color:var(--tint-3)}
.hp__splitIn{width:min(1100px,100%);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,72px);align-items:center;text-align:left}
.hp__split.is-flip .hp__splitText{order:2}
.hp__splitText h2{margin-top:6px;font-size:clamp(30px,3.4vw,44px)}
.hp__splitText>p{margin-top:16px;font-size:17px;line-height:1.6;color:var(--ink-2)}
.hp__splitMedia{margin-top:0;width:100%}
.hp__ticks{margin-top:22px;display:grid;gap:12px}
.hp__ticks li{position:relative;padding-left:32px;font-size:16px;font-weight:500;color:var(--ink)}
.hp__ticks li::before{content:"";position:absolute;left:0;top:2px;width:21px;height:21px;border-radius:50%;background:var(--brand)}
.hp__ticks li::after{content:"";position:absolute;left:6.5px;top:8px;width:8px;height:4px;border:2px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg)}
.lp__moreGrid.hp__cols3{grid-template-columns:repeat(3,1fr)}
.lp__moreGrid.hp__cols4{grid-template-columns:repeat(4,1fr)}
.hp__stepList{width:min(1100px,100%);margin-top:clamp(36px,5vw,56px);display:grid;grid-template-columns:repeat(3,1fr);gap:18px;text-align:left;position:relative}
.hp__stepList li{position:relative;padding:30px 28px;border-radius:24px;background:linear-gradient(160deg,#f4f9f6,#e8f2ed);border:1px solid #dcebe3}
.hp__stepNum{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--brand);color:#fff;font-size:19px;font-weight:700;margin-bottom:18px;box-shadow:0 0 0 8px rgba(13,61,53,.08)}
.hp__stepList h3{font-size:21px;letter-spacing:-.02em;color:var(--brand)}
.hp__stepList p{margin-top:6px;font-size:15.5px;line-height:1.55;color:var(--ink-2)}
.lp__facts.hp__facts3{grid-template-columns:repeat(3,1fr)}
.hp__timeList{width:min(820px,100%);margin-top:clamp(36px,5vw,56px);text-align:left;position:relative;padding-left:28px}
.hp__timeList::before{content:"";position:absolute;left:6px;top:8px;bottom:8px;width:2px;background:linear-gradient(var(--brand),#dcebe3)}
.hp__timeList li{position:relative;display:grid;grid-template-columns:150px 1fr;gap:20px;padding:0 0 34px}
.hp__timeList li::before{content:"";position:absolute;left:-28px;top:4px;width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid var(--brand)}
.hp__timeDate{font-size:14px;font-weight:600;color:var(--muted);padding-top:1px}
.hp__timeTag{display:inline-block;padding:3px 10px;border-radius:999px;background:var(--tint-2);color:var(--brand);font-size:12px;font-weight:600;margin-bottom:8px}
.hp__timeList h3{font-size:20px;letter-spacing:-.02em;color:var(--ink)}
.hp__timeList p{margin-top:4px;font-size:15.5px;line-height:1.55;color:var(--ink-2)}
.hp__lib{padding-top:0}
.hp__libBar{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:34px}
.hp__libBar button{appearance:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 20px;border-radius:999px;border:1px solid var(--line);background:#fff;
  color:var(--ink-2);font:500 15px/1 var(--font);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.hp__libBar button:hover{border-color:var(--brand)}
.hp__libBar button.is-on{background:var(--brand);border-color:var(--brand);color:#fff}
.hp__libBar small{font-size:12.5px;opacity:.75}
.hp__libGroups{width:min(1100px,100%);display:grid;grid-template-columns:repeat(2,1fr);gap:16px;text-align:left;align-items:start}
.hp__libGroup{padding:26px;border-radius:24px;border:1px solid var(--line);background:#fff}
.hp__libGroup h3{display:flex;align-items:center;justify-content:space-between;font-size:19px;color:var(--brand);margin-bottom:10px}
.hp__libGroup h3 small{font-size:13px;font-weight:600;padding:3px 10px;border-radius:999px;background:var(--tint-2)}
.hp__libGroup li{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-top:1px solid #f0f3f1;font-size:15px;color:var(--ink)}
.hp__libGroup li[hidden]{display:none}
.hp__libGroup em{flex:none;font-style:normal;font-size:12.5px;color:var(--muted)}
.hp__cta{margin:24px 12px 12px;border-radius:32px}

/* Link cards: every route, each a card that lifts. */
.hp__linkGrid{width:min(1100px,100%);margin-top:clamp(36px,5vw,56px);display:grid;grid-template-columns:repeat(3,1fr);gap:16px;text-align:left}
.lp .hp__linkCard{display:grid;gap:10px;align-content:start;padding:28px 26px;border-radius:24px;border:1px solid var(--line);background:#fff;color:var(--ink);text-decoration:none;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .3s,opacity .9s var(--ease)}
.lp .hp__linkCard.is-in:hover{transform:translateY(-5px);border-color:var(--tint-3);box-shadow:0 36px 64px -44px rgba(10,38,33,.5)}
.hp__linkCard h3{font-size:19px;letter-spacing:-.02em}
.hp__linkCard p{font-size:15px;line-height:1.55;color:var(--muted)}
.hp__linkGo{margin-top:6px;font-size:15px;font-weight:600;color:var(--brand)}

/* The blog: category chips and search, a lead article, then cards. Covers are drawn,
   not photographed: the category's own tint and its icon. */
.hp__blog{padding-top:clamp(24px,3vw,40px)}
.hp__blogBar{width:min(1100px,100%);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin-bottom:34px}
.hp__chips{display:flex;flex-wrap:wrap;gap:8px}
.hp__chips button{appearance:none;min-height:42px;padding:9px 18px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink-2);font:500 15px/1 var(--font);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.hp__chips button:hover{border-color:var(--brand)}
.hp__chips button.is-on{background:var(--brand);border-color:var(--brand);color:#fff}
.hp__search{position:relative;display:block;width:min(320px,100%)}
.hp__search input{width:100%;min-height:44px;padding:10px 44px 10px 18px;border-radius:999px;border:1px solid var(--line);font:400 15px/1.2 var(--font);color:var(--ink);background:#fff}
.hp__search input:focus{outline:2px solid var(--brand);outline-offset:2px}
.hp__search svg{position:absolute;right:16px;top:50%;width:18px;height:18px;margin-top:-9px;fill:none;stroke:var(--muted);stroke-width:1.8}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.hp__posts{width:min(1100px,100%);display:grid;grid-template-columns:repeat(3,1fr);gap:22px 20px;text-align:left}
.lp .hp__post{display:grid;grid-template-rows:auto 1fr;border-radius:24px;overflow:hidden;background:#fff;border:1px solid var(--line);color:var(--ink);text-decoration:none;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),opacity .9s var(--ease)}
.lp .hp__post.is-in:hover{transform:translateY(-6px);box-shadow:0 40px 70px -46px rgba(10,38,33,.5)}
.hp__post[hidden]{display:none}
.hp__cover{position:relative;display:grid;place-items:center;aspect-ratio:16/10;overflow:hidden;background:linear-gradient(145deg,#e4f2ea,#cfe6da)}
.hp__cover::before{content:"";position:absolute;width:140%;height:140%;left:-20%;top:-20%;background:radial-gradient(40% 40% at 70% 30%,rgba(255,255,255,.7),transparent 70%),radial-gradient(30% 30% at 20% 80%,rgba(13,61,53,.12),transparent 70%)}
.hp__cover--practice{background:linear-gradient(145deg,#dcefe9,#bfe0d6)}
.hp__cover--insight{background:linear-gradient(145deg,#eef4f1,#d9e7e1)}
.hp__cover--product{background:linear-gradient(145deg,#1d5a4c,var(--brand))}
.hp__coverIcon{position:relative;width:84px;height:84px;border-radius:24px;display:grid;place-items:center;background:#fff;box-shadow:0 24px 44px -20px rgba(10,38,33,.45);transition:transform .6s var(--ease)}
.hp__coverIcon svg{width:40px;height:40px;fill:none;stroke:var(--brand);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.lp .hp__post:hover .hp__coverIcon{transform:translateY(-6px) rotate(-4deg) scale(1.05)}
.hp__cover em{position:absolute;left:16px;top:16px;padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.9);font-style:normal;font-size:12.5px;font-weight:600;color:var(--brand)}
.hp__postText{display:grid;gap:8px;align-content:start;padding:22px 24px 24px}
.hp__postText small{font-size:13px;color:var(--muted)}
.hp__postText b{font-size:20px;font-weight:600;letter-spacing:-.02em;line-height:1.25;color:var(--ink)}
.hp__postText>span{font-size:15px;line-height:1.55;color:var(--ink-2)}
.hp__read{margin-top:6px;font-style:normal;font-size:15px;font-weight:600;color:var(--brand)}
.lp .hp__post.is-lead{grid-column:1/-1;grid-template-rows:none;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.hp__post.is-lead .hp__cover{aspect-ratio:auto;min-height:340px}
.hp__post.is-lead .hp__coverIcon{width:120px;height:120px;border-radius:32px}
.hp__post.is-lead .hp__coverIcon svg{width:56px;height:56px}
.hp__post.is-lead .hp__postText{align-content:center;padding:40px}
.hp__post.is-lead .hp__postText b{font-size:clamp(26px,2.6vw,34px)}
.hp__none{margin-top:24px;color:var(--muted)}
.hp__related .hp__post.is-lead{grid-column:auto}

/* An article. */
.hp__article{padding-top:clamp(24px,3vw,40px)}
.hp__prose{width:min(720px,100%);text-align:left;font-size:18px;line-height:1.7;color:var(--ink-2)}
.hp__prose p{margin:0 0 1.1em}
.hp__prose h2{margin:1.8em 0 .5em;font-size:clamp(24px,2.4vw,30px);letter-spacing:-.02em;color:var(--brand)}
.hp__prose ul{margin:0 0 1.2em;display:grid;gap:10px}
.hp__prose li{position:relative;padding-left:30px}
.hp__prose li::before{content:"";position:absolute;left:4px;top:.62em;width:9px;height:9px;border-radius:50%;background:var(--brand)}
.lp .hp__prose a{color:var(--brand);text-decoration:underline;text-underline-offset:3px}
.hp__prose .hp__note{margin-top:2em;padding:18px 22px;border-radius:16px;background:var(--tint);font-size:15px;line-height:1.6;color:var(--muted)}
.lp__footCols{grid-template-columns:repeat(4,1fr)}
.lp--page .lp__tiles>.lp__tile--white+.lp__tile--white{border-top:1px solid #eef2f0}

/* ---- Widths ------------------------------------------------------------------------------ */
@media (max-width:1068px){
  .lp__burger{display:grid;margin-left:auto;gap:6px;width:44px;height:44px;padding:0;place-content:center;border:0;background:none;cursor:pointer}
  .lp__burger i{display:block;width:18px;height:1.5px;background:var(--ink);transition:transform .3s var(--ease)}
  .lp__burger[aria-expanded="true"] i:first-child{transform:translateY(3.75px) rotate(45deg)}
  .lp__burger[aria-expanded="true"] i:last-child{transform:translateY(-3.75px) rotate(-45deg)}
  .lp__headIn,.lp__head.is-stuck .lp__headIn{height:64px}
  .lp__nav{position:absolute;left:0;right:0;top:100%;height:var(--navh,calc(100dvh - 64px));display:none;flex-direction:column;align-items:stretch;gap:0;
    padding:10px 22px 28px;background:#fff;border-top:1px solid var(--line);overflow:auto;overscroll-behavior:contain}
  .lp__nav.is-open{display:flex;animation:lp-drop .35s var(--ease) both}
  @keyframes lp-drop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
  .lp__menus{flex-direction:column;align-items:stretch;gap:0}
  .lp__dd{border-bottom:1px solid var(--line)}
  .lp .lp__navLink,.lp__ddBtn{width:100%;justify-content:space-between;padding:18px 4px;font-size:20px;font-weight:600;border-radius:0}
  .lp .lp__navLink:hover,.lp__ddBtn:hover,.lp__dd.is-open .lp__ddBtn{background:none}
  .lp__ddPanel,.lp__ddPanel.has-aside{position:static;display:none;grid-template-columns:1fr;padding:0 0 14px;border:0;border-radius:0;box-shadow:none;opacity:1;visibility:visible;transform:none}
  .lp__dd.is-open .lp__ddPanel{display:grid}
  .lp__ddGrid{grid-template-columns:1fr}
  .lp .lp__ddGrid a{padding:10px 4px}
  .lp .lp__ddAside{min-height:0;padding:18px}
  .lp__ddAside b{font-size:17px}
  .lp__navActs{margin:22px 0 0;flex-direction:column;align-items:stretch;gap:10px}
  .lp__navActs .lp__navLink{justify-content:center;font-size:17px;padding:12px}
  .lp .lp__navActs .lp__btn{min-height:50px;font-size:17px}
  .lp__pick{grid-template-columns:1fr}
  .lp__pillars{grid-template-columns:1fr}
  .lp__moreGrid,.lp__moreGrid.hp__cols3,.lp__moreGrid.hp__cols4{grid-template-columns:1fr 1fr}
  .lp__vsHead,.lp__vsRow{grid-template-columns:150px 1fr 1fr}
  .lp__anat{grid-template-columns:1fr}
  .lp__anatDoc{display:none}
  .lp__anatList li{opacity:1;background:#fff;border-color:var(--line)}
  .hp__splitIn{grid-template-columns:1fr}
  .hp__split.is-flip .hp__splitText{order:0}
  .lp__facts.hp__facts3{grid-template-columns:1fr}
  .hp__linkGrid,.hp__posts{grid-template-columns:1fr 1fr}
  .lp .hp__post.is-lead{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .hp__post.is-lead .hp__cover{min-height:0;aspect-ratio:16/9}
  .lp__footCols{grid-template-columns:1fr 1fr}
}
@media (max-width:734px){
  .lp{font-size:16px}
  .lp__headIn{padding:0 16px}
  .lp__head .tp-logo{--lk:19px}
  .lp__bar{padding:10px 16px}
  .lp__bar p{font-size:13.5px;gap:6px 10px;flex-wrap:nowrap}
  .lp__barText,.lp__new{display:none}
  .lp__barShort{display:inline;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .lp .lp__barLink{flex:none;font-size:13.5px}
  .lp__nav{padding:6px 16px 24px}
  .lp{--sec:56px;--gap:30px}
  .lp__tile,.lp__tile--half{padding:var(--sec) 16px}
  .lp__tileMedia{transform:none}
  .lp__v--device,.lp__tile--half .lp__v--device{border-width:6px;border-radius:18px}
  .lp__tile--half .lp__sub{min-height:0}
  .lp__tile--half .lp__tileMedia{margin-top:var(--gap)}
  .lp__pair{grid-template-columns:1fr;padding:8px}
  .lp__pair .lp__tile{border-radius:22px}
  #start.lp__tile--dark{margin:16px 8px 8px;border-radius:24px}
  .lp__moreItem{min-height:0}
  .lp__moreGrid,.lp__moreGrid.hp__cols3,.lp__moreGrid.hp__cols4{grid-template-columns:1fr}
  .lp__vsHead{display:none}
  .lp__vsRow{grid-template-columns:1fr}
  .lp__vsRow>span{padding:14px 18px}
  .lp__vsTopic{padding-top:16px !important}
  .lp__vsOld{padding-left:48px !important}
  .lp__vsOld::before,.lp__vsOld::after{left:16px;top:15px}
  .lp__vsOld::after{top:14px}
  .lp__vsNew{padding-left:50px !important;padding-bottom:18px !important}
  .lp__vsNew::before{left:16px;top:15px}
  .lp__vsNew::after{left:22.5px;top:21.5px}
  .lp__anatList li{padding:18px 16px;gap:14px}
  .hp__stepList{grid-template-columns:1fr}
  .hp__libGroups{grid-template-columns:1fr}
  .hp__libGroup{padding:20px}
  .hp__timeList li{grid-template-columns:1fr;gap:6px}
  .hp__cta{margin:16px 8px 8px;border-radius:24px}
  .lp__trust{flex-direction:column;align-items:center;gap:8px}
  .hp__linkGrid,.hp__posts{grid-template-columns:1fr}
  .hp__post.is-lead .hp__postText{padding:22px 24px 24px}
  .hp__blogBar{flex-direction:column;align-items:stretch}
  .hp__search{width:100%}
  .hp__prose{font-size:17px}
  .lp__links{flex-direction:column;gap:12px}
  .lp__links .lp__btn{min-width:220px}
  .lp__say{height:130vh}
  .lp__heroNote{margin-top:20px}
  .lp__who{padding:var(--sec) 16px}
  .lp__pick{padding:12px;border-radius:22px;gap:14px}
  .lp__pickList{gap:10px}
  .lp__pickList button{padding:12px 14px 12px 12px;gap:14px}
  .lp__pickIcon{width:46px;height:46px}
  .lp__pickCarer{flex-direction:column;align-items:flex-start}
  .lp__pickPanel{padding:24px 20px;border-radius:18px}
  .lp__pickFoot{flex-direction:column;align-items:stretch}
  .lp .lp__pickFoot .lp__btn{width:100%}
  .lp__pillars>div{padding:26px 22px}
  .lp__moreGrid{grid-template-columns:1fr;gap:32px}
  .lp__facts{grid-template-columns:1fr}
  .lp__factCol{padding:26px 22px}
  .lp__footCols{grid-template-columns:1fr}
  .lp .lp__float{bottom:14px}
}

/* ---- Emphasis in headings: coloured letters, never a block -----------------------------------
   The phrase that matters in a heading used to sit on a green block. However it was
   drawn, a block behind the second line of a heading ends up against the letters of the
   first, and it read as the highlight covering them. There is no block now, anywhere:
   the phrase is set in the brand green, running from deep to bright across the words,
   in the letters themselves. Nothing sits behind any text, so nothing can touch or cover
   a letter at any width. The words still rise into place, and the colour arrives with
   them. */
/* Airy headings: a clear gap between lines, so a two-line headline reads as two lines
   and never as a block. */
.lp h1,.lp h2{line-height:1.2}
.lp .lp__hero h1,.lp .hp__hero h1{line-height:1.2;letter-spacing:-.03em}
.lp .lp__whoTitle{line-height:1.2}
/* No single word left alone on the last line of a paragraph. */
.lp p,.lp .lp__sub{text-wrap:pretty}
.lp .lp__hero .lp__tileText h1{margin-top:4px}

/* The highlight is back, as a marker: it covers the lower part of the phrase only, from
   30% of the way down the letters to just under the baseline. With headings at 1.2 line
   height its top edge sits about a third of an em below the tails of the letters on the
   line above, so the two cannot meet at any size, and every word is drawn above every
   highlight besides. The phrase keeps the brand's deep green. It sweeps in behind the
   words once they have risen into place. */
/* The full highlight: a soft rounded box behind the whole phrase, tops of the letters
   to the tails of g and y, in the deep brand green, as the site first had it. What made
   it collide was the line height, not the box: a heading with a highlight is set at 1.36,
   which leaves about a tenth of an em between the tails on one line and the box on the
   next, at every size. */
.lp h1:has(.lp__hl),.lp h2:has(.lp__hl),.lp .lp__hero h1:has(.lp__hl),.lp .hp__hero h1:has(.lp__hl),.lp .lp__whoTitle{line-height:1.36}
@media (max-width:734px){ .lp h1:has(.lp__hl),.lp h2:has(.lp__hl),.lp .lp__hero h1:has(.lp__hl),.lp .hp__hero h1:has(.lp__hl),.lp .lp__whoTitle{line-height:1.44} }
.lp .lp__hl,.lp .lp__words .lp__hl{color:var(--brand);padding:.02em .16em;margin:0 .02em;border-radius:.2em;
  background:linear-gradient(#d6ede0,#d6ede0) no-repeat 0 0/100% 100%;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;position:relative;z-index:0}
.lp .lp__words .lp__hl{background-size:0% 100%;transition:background-size 1s cubic-bezier(.25,.8,.25,1) .5s}
.lp .lp__words.is-in .lp__hl{background-size:100% 100%}
.lp h1 .lp__w,.lp h2 .lp__w,.lp .lp__sayLines .lp__sw{position:relative;z-index:1}
.lp .lp__sayIn .lp__sayLines{line-height:1.36}
/* The statement's key phrases take the same full highlight once the whole phrase is lit. */
.lp .lp__sayLines em{padding:.02em .14em;border-radius:.2em;position:relative;z-index:0;box-decoration-break:clone;-webkit-box-decoration-break:clone;
  background:linear-gradient(#cfe8da,#cfe8da) no-repeat 0 0/0% 100%;transition:background-size .9s cubic-bezier(.25,.8,.25,1)}
.lp .lp__sayLines em:has(.lp__sw:last-child.is-lit){background-size:100% 100%}
.lp .lp__say .lp__sayLines em .lp__sw.is-lit{color:var(--brand)}
@media (prefers-reduced-motion:reduce){ .lp .lp__words .lp__hl{background-size:100% 100%} }

/* ---- From the partnerships page -------------------------------------------------------------
   The effects that page is built on, in Handling Plan's green and white: paragraphs
   that light up word by word as they rise, a short rule that draws itself beside each
   label, a values band, a turning ring of words on the hero film, the three safety
   cards fanned like a hand and spreading into a row, a drifting glow behind the hero,
   and a pulsing dot on the floating button. */
.lp .lp__lw{color:#b7c6bf;transition:color .45s ease}
.lp .lp__lw.is-lit{color:inherit}
.lp .lp__sub .lp__lw.is-lit,.lp .lp__whoLead .lp__lw.is-lit,.lp .hp__splitText>p .lp__lw.is-lit{color:var(--ink-2)}
.lp .lp__eyebrow{display:inline-flex;align-items:center;gap:12px}
.lp .lp__eyebrow::before{content:"";width:28px;height:2px;border-radius:2px;background:currentColor;opacity:.7;transform:scaleX(0);transform-origin:0 50%;transition:transform .9s cubic-bezier(.25,.8,.25,1) .25s}
.lp .lp__eyebrow.is-in::before,.lp:not(.is-live) .lp__eyebrow::before{transform:scaleX(1)}
.lp__values{overflow:hidden;border-top:1px solid #e6eeea;border-bottom:1px solid #e6eeea;background:#fff;padding:20px 0;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.lp__valuesTrack{display:flex;width:max-content;animation:lp-marq 60s linear infinite}
.lp__valuesTrack span{display:inline-flex;align-items:center;gap:34px;padding-right:34px;font-size:clamp(17px,1.6vw,22px);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--brand);white-space:nowrap}
.lp__valuesTrack span::after{content:"";width:9px;height:9px;border-radius:50%;background:#2a9a74}
.lp__values:hover .lp__valuesTrack{animation-play-state:paused}
.lp__badge{position:absolute;left:-46px;bottom:-40px;z-index:3;width:124px;height:124px;border-radius:50%;background:#fff;box-shadow:0 20px 44px -22px rgba(10,38,33,.5);display:grid;place-items:center}
.lp__badge>svg{position:absolute;inset:6px;width:calc(100% - 12px);height:calc(100% - 12px);animation:lp-spin 22s linear infinite}
.lp__badge text{font:700 10.5px/1 var(--font);letter-spacing:.2em;fill:var(--brand)}
.lp__badgeCore{width:46px;height:46px;border-radius:50%;background:var(--brand);display:grid;place-items:center}
.lp__badgeCore svg{width:24px;height:24px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
@keyframes lp-spin{to{transform:rotate(360deg)}}
.lp .lp__hero{position:relative;overflow:hidden}
.lp .lp__hero::before{content:"";position:absolute;z-index:0;width:720px;height:720px;left:50%;top:-360px;margin-left:-360px;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(143,210,178,.35),rgba(143,210,178,0));animation:lp-drift2 18s ease-in-out infinite alternate}
@keyframes lp-drift2{from{transform:translate(-22%,0) scale(1)}to{transform:translate(22%,60px) scale(1.2)}}
.lp .lp__hero .lp__tileText,.lp .lp__hero .lp__heroNote{position:relative;z-index:1}
.lp.is-live [data-lp-in][data-lp-fx="fan"],.lp.is-live [data-lp-in][data-lp-fx="fan"].is-in{
  transform:translateX(calc((1 - var(--i,1)) * 0px)) rotate(calc(var(--r,0deg) * (1 - var(--fan,1)))) translate(calc(var(--x,0%) * (1 - var(--fan,1))),calc(var(--yy,0px) * (1 - var(--fan,1))));
  transition:opacity .8s var(--ease),box-shadow .4s;transform-origin:50% 120%}
.lp__pillars>div:nth-child(1){--r:-9deg;--x:62%;--yy:26px}
.lp__pillars>div:nth-child(2){--r:0deg;--x:0%;--yy:-10px;z-index:2}
.lp__pillars>div:nth-child(3){--r:9deg;--x:-62%;--yy:26px}
.lp .lp__float{display:inline-flex;align-items:center;gap:10px}
.lp .lp__float::before{content:"";width:8px;height:8px;border-radius:50%;background:#9fd4bf;animation:lp-ping2 2s ease-out infinite}
@keyframes lp-ping2{0%{box-shadow:0 0 0 0 rgba(159,212,191,.75)}80%,100%{box-shadow:0 0 0 10px rgba(159,212,191,0)}}
@media (max-width:1068px){ .lp.is-live [data-lp-in][data-lp-fx="fan"],.lp.is-live [data-lp-in][data-lp-fx="fan"].is-in{transform:none} }
@media (max-width:734px){
  .lp__badge{width:92px;height:92px;left:-10px;bottom:-30px}
  .lp__badge text{font-size:9.5px}
  .lp__badgeCore{width:36px;height:36px}
  .lp.is-live [data-lp-in][data-lp-fx="fan"],.lp.is-live [data-lp-in][data-lp-fx="fan"].is-in{transform:none}
  .lp__valuesTrack span{gap:22px;padding-right:22px}
}
@media (prefers-reduced-motion:reduce){
  .lp__badge>svg,.lp__valuesTrack,.lp .lp__hero::before,.lp .lp__float::before{animation:none}
  .lp.is-live [data-lp-in][data-lp-fx="fan"]{transform:none}
}

/* The ring of words sits on the film's top right corner, clear of the caption under it. */
.lp .lp__badge{left:auto;bottom:auto;right:-46px;top:-44px}
@media (max-width:734px){ .lp .lp__badge{right:-8px;top:-34px} }

/* ---- Who it is for: a row that slides sideways as the page scrolls ------------------------ */
.lp__who{padding-bottom:0}
/* The page is a one-column grid, and an auto column grows to fit its widest child, which
   here is a track the width of four cards. Held to the viewport, or the whole page widens. */
.lp .lp__tiles{grid-template-columns:minmax(0,1fr)}
.lp__who{min-width:0}
.lp__hs{position:relative;margin:clamp(28px,4vw,48px) -22px 0;min-width:0}
.lp__hsPin{width:100%;max-width:100%;overflow:hidden}
@media (max-width:734px){ .lp__hs{margin-left:-16px;margin-right:-16px} .lp__who{padding-bottom:40px} }
.lp__hs.is-pinned .lp__hsPin{position:sticky;top:64px;height:calc(100vh - 64px);display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.lp__hsTrack{display:flex;gap:26px;width:max-content;padding:8px max(22px,calc((100vw - 1100px) / 2)) 8px;will-change:transform}
.lp__hsCard{--near:1;flex:none;width:min(760px,74vw);min-height:min(470px,64vh);display:grid;grid-template-rows:auto auto auto 1fr auto;gap:18px;
  padding:clamp(28px,3.4vw,46px);border-radius:32px;border:1px solid #dcebe3;background:linear-gradient(160deg,#f4f9f6,#e7f2ec);
  opacity:calc(.55 + var(--near) * .45);transform:scale(calc(.94 + var(--near) * .06));transition:opacity .25s,transform .25s;box-shadow:0 40px 80px -60px rgba(10,38,33,.5)}
.lp__hsCard--0{background:linear-gradient(150deg,#123f36,var(--deep));border-color:var(--deep);color:#fff}
.lp__hsCard--2{background:#fff}
.lp__hsTop{display:flex;align-items:center;gap:16px}
.lp__hsNum{font-size:clamp(40px,4.4vw,58px);font-weight:700;letter-spacing:-.04em;line-height:1;color:var(--brand);opacity:.2}
.lp__hsCard--0 .lp__hsNum{color:#fff;opacity:.25}
.lp__hsIcon{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;background:var(--brand)}
.lp__hsCard--0 .lp__hsIcon{background:#fff}
.lp__hsIcon svg{width:26px;height:26px;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.lp__hsCard--0 .lp__hsIcon svg{stroke:var(--brand)}
.lp__hsName b{display:block;font-size:clamp(20px,1.8vw,24px);font-weight:600;letter-spacing:-.02em}
.lp__hsName small{display:block;margin-top:2px;font-size:15px;color:var(--muted)}
.lp__hsCard--0 .lp__hsName small{color:rgba(255,255,255,.7)}
.lp__hsCard h3{font-size:clamp(28px,3.1vw,42px);letter-spacing:-.03em;line-height:1.12;color:var(--brand)}
.lp__hsCard--0 h3{color:#fff}
.lp__hsCard>p{font-size:clamp(16px,1.3vw,18px);line-height:1.55;color:var(--ink-2);max-width:52ch}
.lp__hsCard--0>p{color:rgba(255,255,255,.8)}
.lp__hsTicks{display:grid;gap:12px;align-content:start}
.lp__hsTicks li{position:relative;padding-left:32px;font-size:16px;font-weight:500;color:var(--ink)}
.lp__hsTicks li::before{content:"";position:absolute;left:0;top:2px;width:21px;height:21px;border-radius:50%;background:var(--brand)}
.lp__hsTicks li::after{content:"";position:absolute;left:6.5px;top:8px;width:8px;height:4px;border:2px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg)}
.lp__hsCard--0 .lp__hsTicks li{color:#fff}
.lp__hsCard--0 .lp__hsTicks li::before{background:#9fd4bf}
.lp__hsCard--0 .lp__hsTicks li::after{border-color:var(--deep)}
.lp__hsFoot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;padding-top:20px;border-top:1px solid rgba(13,61,53,.14)}
.lp__hsCard--0 .lp__hsFoot{border-top-color:rgba(255,255,255,.18)}
.lp__hsFoot b{font-size:16px;font-weight:600;color:var(--brand)}
.lp__hsCard--0 .lp__hsFoot b{color:#fff}
.lp .lp__hsCard--0 .lp__hsFoot .lp__btn{background:#fff;color:var(--brand);border-color:#fff}
.lp__hsNav{width:min(1100px,calc(100% - 44px));margin:30px auto 0;display:flex;align-items:center;gap:18px}
.lp__hsCount{font-size:14px;font-weight:700;letter-spacing:.08em;color:var(--brand);font-variant-numeric:tabular-nums;min-width:64px}
.lp__hsBar{flex:1;height:3px;border-radius:3px;background:#e3ece8;overflow:hidden}
.lp__hsBar i{display:block;height:100%;background:var(--brand);transform:scaleX(.04);transform-origin:0 50%}
.lp__hsHint{font-size:13px;color:var(--muted);letter-spacing:.04em}
/* Phones and reduced motion: a row to swipe, one card at a time. */
.lp__hs:not(.is-pinned) .lp__hsTrack{width:auto;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:8px 16px 16px}
.lp__hs:not(.is-pinned) .lp__hsTrack::-webkit-scrollbar{display:none}
.lp__hs:not(.is-pinned) .lp__hsCard{width:86vw;min-height:0;scroll-snap-align:center;opacity:1;transform:none}
.lp__hs:not(.is-pinned) .lp__hsNav{display:none}
.lp__hs.is-pinned + *,.lp__who + *{position:relative}

/* ---- More movement on scroll ----------------------------------------------------------------
   Entrances by kind (set by the script as data-lp-fx), then four effects tied to the
   scroll position: the closing card, the plan's page, the What's new line and the hero
   screen. Reduced motion turns every one of them off. */
.lp.is-live [data-lp-in][data-lp-fx]{transition:opacity .9s var(--ease),transform 1s cubic-bezier(.2,.9,.25,1.05);transition-delay:var(--d,0ms)}
.lp.is-live [data-lp-in][data-lp-fx="left"]:not(.is-in){transform:translateX(-48px)}
.lp.is-live [data-lp-in][data-lp-fx="zoom"]:not(.is-in){transform:scale(.88) translateY(24px)}
.lp.is-live [data-lp-in][data-lp-fx="flip"]:not(.is-in){transform:perspective(1000px) rotateX(38deg) translateY(40px);transform-origin:50% 0}
.lp.is-live [data-lp-in][data-lp-fx="up"]:not(.is-in){transform:translateY(14px)}
.lp.is-live [data-lp-in][data-lp-fx="pop"]:not(.is-in){transform:scale(.7)}
.lp .lp__vsRow{will-change:transform}
/* The close grows into place. */
.lp #start.lp__tile--dark{--cp:1;transform:scale(calc(.92 + var(--cp) * .08));border-radius:calc(32px + (1 - var(--cp)) * 40px);transform-origin:50% 100%}
/* The plan's page turns to face you. */
.lp .lp__anatDoc{--ap:1;transform:perspective(1400px) rotateY(calc(16deg - var(--ap) * 14deg)) rotateX(calc(6deg - var(--ap) * 5deg)) translateY(calc((1 - var(--ap)) * 40px))}
/* The What's new line draws itself. */
.lp .hp__timeList::before{transform:scaleY(var(--tl,1));transform-origin:50% 0}
/* The hero screen settles back as the page moves on. */
.lp .lp__hero .lp__tileMedia .lp__v{opacity:calc(1 - var(--ho,0) * .35)}
.lp .lp__hero .lp__tileMedia{transform:translateY(calc(var(--ho,0) * 60px)) scale(calc(1 - var(--ho,0) * .06))}
@media (prefers-reduced-motion:reduce){
  .lp #start.lp__tile--dark,.lp .lp__anatDoc,.lp .lp__hero .lp__tileMedia{transform:none}
  .lp .hp__timeList::before{transform:none}
  .lp.is-live [data-lp-in][data-lp-fx]{transform:none}
}
@media (max-width:734px){ .lp #start.lp__tile--dark{transform:none;border-radius:24px} .lp .lp__hero .lp__tileMedia{transform:none} }
/* Room between a headline and the line under it. */
.lp .hp__hero .lp__sub,.lp .lp__hero .lp__sub--hero{margin-top:26px}

/* ---- The statement, without the empty page ---------------------------------------------------
   It used to be pinned inside a section a screen and a half tall, which left a screen of
   white above and below the words. It is now as tall as it needs to be, lights up as it
   crosses the window, and the space around it moves: two soft pools of the brand tint
   drift apart as the lines light (--sp, set by the script), and four marks under the
   words fill as each line is read. */
.lp .lp__say{position:relative;height:auto;overflow:hidden;padding:clamp(64px,7vw,100px) 22px;margin:8px 12px;border-radius:32px;--sp:0;
  background:linear-gradient(160deg,#f3f9f6 0%,#e8f3ed 55%,#f1f8f4 100%)}
/* The statement is a band of its own, so the sections either side need less room. */
.lp .lp__hero{padding-bottom:clamp(48px,5vw,72px)}
.lp .lp__say+.lp__tile{padding-top:clamp(56px,6vw,84px)}
.lp .lp__say .lp__sw{color:#bfd1c8}
.lp .lp__say .lp__sw.is-lit{color:var(--brand)}
.lp .lp__say .lp__sayLines em .lp__sw.is-lit{color:var(--brand)}
.lp .lp__say .lp__sayDots i{background:#d3e4dc}
.lp .lp__sayIn{position:relative;z-index:1;height:auto;display:grid;justify-items:center;gap:36px;padding:0}
.lp .lp__say::before,.lp .lp__say::after{content:"";position:absolute;z-index:0;width:min(760px,90vw);aspect-ratio:1;border-radius:50%;pointer-events:none;filter:blur(10px);
  transition:transform .6s cubic-bezier(.25,.8,.25,1),opacity .6s}
.lp .lp__say::before{left:-8%;top:-30%;background:radial-gradient(closest-side,rgba(143,210,178,.32),rgba(143,210,178,0));
  transform:translate(calc(var(--sp) * 18%),calc(var(--sp) * 22%)) scale(calc(.85 + var(--sp) * .25))}
.lp .lp__say::after{right:-10%;bottom:-38%;background:radial-gradient(closest-side,rgba(99,190,170,.22),rgba(99,190,170,0));
  transform:translate(calc(var(--sp) * -16%),calc(var(--sp) * -20%)) scale(calc(.8 + var(--sp) * .3))}
.lp__sayDots{display:flex;gap:10px}
.lp__sayDots i{display:block;width:44px;height:5px;border-radius:5px;background:#e3ece8;overflow:hidden;position:relative}
.lp__sayDots i::after{content:"";position:absolute;inset:0;background:var(--brand);transform:scaleX(0);transform-origin:0 50%;transition:transform .5s cubic-bezier(.25,.8,.25,1)}
.lp__sayDots i.is-on::after{transform:scaleX(1)}
@media (max-width:734px){ .lp .lp__say{height:auto;padding:52px 16px;margin:4px 8px;border-radius:24px} .lp__sayDots i{width:32px} }
@media (prefers-reduced-motion:reduce){ .lp .lp__say{padding:80px 22px} .lp__sayDots i::after{transform:scaleX(1)} }

/* ---- Reduced motion ------------------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  .lp *,.lp *::before,.lp *::after{animation:none !important;transition:none !important}
  .lp.is-live [data-lp-in]{opacity:1;transform:none}
  .lp__w{opacity:1;transform:none;filter:none}
  .lp__tileMedia{transform:none}
  .lp__say{height:auto}
  .lp__sayIn{position:static;height:auto;padding:80px 22px}
}

/* ---------------------------------------------------------------------------
   Round-table fixes, 30 September 2026. Measured by the review panel.
   ------------------------------------------------------------------------- */
/* Words that light as they are read start readable (4.5:1 on white), not pale. */
.lp .lp__lw{color:#6b7c75}
/* On the dark closing band the lit colour was the light pages' grey, 1.6:1 on green. */
.lp .lp__tile--dark .lp__lw{color:rgba(255,255,255,.62)}
.lp .lp__tile--dark .lp__sub .lp__lw.is-lit,.lp .lp__tile--dark .lp__lw.is-lit{color:inherit}
/* The statement's unlit words, readable before they light. */
.lp .lp__say .lp__sw{color:#7f928a}
/* Headlines arrive without the blur, which read as out of focus. */
.lp .lp__w{filter:none}
/* Skip link and focus rings that can be seen. */
.lp .lp__skip,.lp a.lp__skip{color:#fff}
.lp .lp__tile--dark :focus-visible,.lp .lp__hsCard--0 :focus-visible{outline-color:#fff}
/* The floating button leaves the tab order while it is hidden. */
.lp .lp__float{transition:transform .45s var(--ease),opacity .3s,visibility 0s linear .45s;visibility:hidden}
.lp .lp__float.is-on{visibility:visible;transition:transform .45s var(--ease),opacity .3s,visibility 0s}
/* A gap before every arrow in a button. Flex drops the space the markup has. */
.lp .lp__btn>span[aria-hidden],.lp .hp__linkGo>span[aria-hidden]{margin-left:6px}
/* The badge moves to the top left of the screen, clear of the demonstration caption. */
.lp .lp__badge{right:auto;left:-46px;top:-44px;bottom:auto}
@media (max-width:734px){ .lp .lp__badge{display:none} }
/* Got a code: in the bar on phones and tablets, in the menu row on wide screens. */
.lp__codeLink{display:none}
.lp__heroCode{margin:18px 0 0;font-size:15px;color:var(--ink-2);text-align:center}
.lp__heroCode a{color:var(--brand);font-weight:600;text-decoration:underline;text-underline-offset:3px}
@media (max-width:1068px){
  .lp__navCode{display:none}
  .lp__codeLink{display:inline-flex;align-items:center;gap:7px;margin-left:auto;min-height:40px;padding:0 14px;border-radius:980px;
    border:1px solid var(--line,#dfe6e2);background:#fff;color:var(--brand);font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap}
  .lp__codeLink svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linejoin:round}
  .lp__burger{margin-left:6px}
}
/* Phone hero: the eyebrow's rule stays on the line with its words. */
@media (max-width:734px){
  .lp .lp__hero .lp__eyebrow{font-size:12px;letter-spacing:.1em}
  .lp .lp__hero .lp__eyebrow::before{display:none}
}
/* Larger targets for the small "more" links on phones. */
@media (max-width:734px){ .lp .hp__linkGo,.lp .lp__more{display:inline-flex;align-items:center;min-height:44px} }
/* Keep content clear of the floating buttons at the foot of a phone screen. */
@media (max-width:734px){ .lp .lp__foot{padding-bottom:96px} }