/* ---------------------------------------------------------------------------
   Home, three scroll scenes (assets/js/home6.js): Features, the deck of four and the
   belt. White and mint, the brand green, nothing else.
   ------------------------------------------------------------------------- */

/* ---- Features: index on the left, cards on the right ------------------------- */
.lp .hz-f2{background:var(--mintbg,#eef7f2)}
.lp .hz-f2In{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:clamp(32px,6vw,96px);align-items:start;max-width:1240px}
.lp .hz-f2Side{position:sticky;top:calc(var(--hdr,64px) + clamp(24px,6vh,64px))}
.lp .hz-f2Side .hz-h2{margin:14px 0 12px;text-align:left}
.lp .hz-f2Side .hz-sub{margin:0 0 clamp(18px,3vh,32px);text-align:left}
.lp .hz-f2Nav{list-style:none;margin:0;padding:0;display:grid;gap:4px;max-width:340px}
.lp .hz-f2Nav a{position:relative;display:flex;align-items:center;gap:14px;padding:11px 14px;border-radius:14px;text-decoration:none;color:#56635e;font-weight:600;font-size:16px;transition:background .3s,color .3s}
.lp .hz-f2Nav a b{font-size:13px;letter-spacing:.06em;color:#8a9893;transition:color .3s}
.lp .hz-f2Nav a i{position:absolute;left:14px;right:14px;bottom:5px;height:2px;border-radius:2px;background:#2fa67a;transform:scaleX(0);transform-origin:0 50%;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.lp .hz-f2Nav a:hover{background:rgba(255,255,255,.7);color:#0d3d35}
.lp .hz-f2Nav a.is-on{background:#fff;color:#0d3d35;box-shadow:0 12px 26px -20px rgba(13,61,53,.5)}
.lp .hz-f2Nav a.is-on b{color:#2fa67a}
.lp .hz-f2Nav a.is-on i{transform:scaleX(1)}
.lp .hz-f2Nav a.is-done{color:#3a4642}
.lp .hz-f2List{display:grid;gap:18px;padding:clamp(8px,4vh,40px) 0}
.lp .hz-f2Card{display:grid;grid-template-columns:auto minmax(0,1fr);gap:22px;align-items:start;padding:clamp(22px,2.4vw,32px);border-radius:24px;background:#fff;border:1px solid #d4e8dc;
  opacity:.55;transform:scale(.97);transition:opacity .5s,transform .6s cubic-bezier(.2,.8,.2,1),box-shadow .5s,border-color .5s}
.lp .hz-f2Card.is-on{opacity:1;transform:none;border-color:#2fa67a;box-shadow:0 34px 70px -44px rgba(13,61,53,.55)}
.lp .hz-f2Ico{display:grid;place-items:center;width:58px;height:58px;border-radius:18px;background:#e3f2ea;transition:background .5s}
.lp .hz-f2Ico svg{width:28px;height:28px;fill:none;stroke:#0d3d35;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:stroke .5s}
.lp .hz-f2Card.is-on .hz-f2Ico{background:#0d3d35}
.lp .hz-f2Card.is-on .hz-f2Ico svg{stroke:#fff}
.lp .hz-f2Tag{display:block;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#1f6b52}
.lp .hz-f2Card h3{margin:8px 0 14px;font-size:clamp(22px,2vw,30px);line-height:1.12;letter-spacing:-.02em;color:#101815}
.lp .hz-f2Card .hz-ticks{margin:0}
@media (max-width:900px){
  .lp .hz-f2In{grid-template-columns:1fr;gap:20px}
  .lp .hz-f2Side{position:static}
  .lp .hz-f2Side .hz-h2,.lp .hz-f2Side .hz-sub{text-align:center}
  .lp .hz-f2Side{text-align:center}
  .lp .hz-f2Nav{display:none}
  .lp .hz-f2List{padding:0;gap:14px}
  .lp .hz-f2Card{opacity:1;transform:none;grid-template-columns:1fr;gap:14px}
}

/* ---- The deck of four ------------------------------------------------------ */
.lp .hz-fan{--fo:0;background:#fff;overflow:clip}
.lp .hz-fanDeck{display:grid;place-items:center;max-width:1240px;margin:clamp(20px,4vh,44px) auto 0;min-height:clamp(300px,40vh,380px)}
.lp .hz-fanCard{--g:20px;grid-area:1/1;width:calc((min(1240px,100%) - 3 * var(--g)) / 4);min-height:clamp(280px,38vh,360px);padding:clamp(20px,2vw,30px);border-radius:26px;position:relative;overflow:hidden;
  display:flex;flex-direction:column;gap:10px;background:#fff;border:1px solid #dfe9e4;box-shadow:0 30px 60px -40px rgba(13,61,53,.45);
  transform:translateX(calc((var(--i) - 1.5) * var(--fo) * (100% + var(--g)))) translateY(calc((1 - var(--fo)) * (var(--i) * -10px + 40px))) rotate(calc((var(--i) - 1.5) * (1 - var(--fo)) * 7deg));
  z-index:calc(4 - var(--i));will-change:transform}
.lp .hz-fanCard:nth-child(2){background:#eef7f2}
.lp .hz-fanCard:nth-child(4){background:linear-gradient(160deg,#1f6b52,#0d3d35);border-color:transparent}
.lp .hz-fanCard:nth-child(4) h3,.lp .hz-fanCard:nth-child(4) p,.lp .hz-fanCard:nth-child(4) .hz-fanWho{color:#fff}
.lp .hz-fanCard:nth-child(4) .hz-fanIco{background:rgba(255,255,255,.14)}
.lp .hz-fanCard:nth-child(4) .hz-fanIco svg{stroke:#fff}
.lp .hz-fanCard:nth-child(4) .hz-fanNum{color:rgba(255,255,255,.12)}
.lp .hz-fanIco{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:#e3f2ea}
.lp .hz-fanIco svg{width:26px;height:26px;fill:none;stroke:#0d3d35;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lp .hz-fanWho{margin-top:auto;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#1f6b52}
.lp .hz-fanCard h3{margin:0;font-size:clamp(28px,2.8vw,42px);line-height:1;letter-spacing:-.03em;color:#0d3d35}
.lp .hz-fanCard p{margin:0;font-size:clamp(15px,1.1vw,17px);line-height:1.45;color:#3a4642}
.lp .hz-fanNum{position:absolute;right:16px;top:6px;font-size:clamp(60px,6vw,96px);font-weight:800;line-height:1;color:rgba(13,61,53,.06);letter-spacing:-.04em}
@media (max-width:900px){
  .lp .hz-fanDeck{grid-template-columns:1fr 1fr;gap:14px;place-items:stretch}
  .lp .hz-fanCard{grid-area:auto;width:auto;min-height:220px;transform:translateY(calc((1 - var(--fo)) * 40px));opacity:calc(.3 + var(--fo) * .7)}
}
@media (max-width:480px){
  .lp .hz-fanDeck{grid-template-columns:1fr}
  .lp .hz-fanCard{min-height:0}
}

/* ---- The belt: Works with what you have ------------------------------------ */
.lp .hz-belt{--bp:0;background:var(--mintbg,#eef7f2);overflow:clip;display:block!important;min-height:0!important}
.lp .hz-belt.is-pinned{padding:0}
.lp .hz-belt .hz-beltStage{display:flex;flex-direction:column;gap:clamp(20px,3.5vh,40px)}
.lp .hz-belt.is-pinned .hz-beltStage{position:sticky;top:var(--hdr,64px);padding:clamp(36px,6vh,72px) 0 clamp(20px,4vh,44px)}
.lp .hz-beltHead{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;max-width:1240px}
.lp .hz-beltHead .hz-h2,.lp .hz-beltHead .hz-sub{text-align:left;margin-left:0}
.lp .hz-beltHead .hz-h2{margin:12px 0 10px}
.lp .hz-beltHead .hz-sub{margin-bottom:0}
.lp .hz-beltCtl{display:flex;align-items:center;gap:12px;flex:none}
.lp .hz-beltCount{font-size:15px;color:#56635e;font-variant-numeric:tabular-nums;min-width:62px}
.lp .hz-beltCount b{color:#0d3d35;font-size:20px}
.lp .hz-beltBar{position:relative;width:clamp(80px,12vw,160px);height:3px;border-radius:3px;background:rgba(13,61,53,.14);overflow:hidden}
.lp .hz-beltBar i{position:absolute;inset:0;background:linear-gradient(90deg,#2fa67a,#0d3d35);transform-origin:0 50%;transform:scaleX(var(--bp))}
.lp .hz-beltBtn{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1.5px solid #c3d6cc;background:#fff;color:#0d3d35;cursor:pointer;transition:background .25s,color .25s,transform .25s,border-color .25s}
.lp .hz-beltBtn:hover{background:#0d3d35;color:#fff;border-color:#0d3d35;transform:translateY(-2px)}
.lp .hz-beltBtn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lp .hz-beltBtn:focus-visible{outline:3px solid #7fd8b0;outline-offset:2px}
.lp .hz-beltTrack{display:flex;gap:22px;padding:18px max(20px,calc((100vw - 1240px) / 2)) 30px;overflow-x:auto;scrollbar-width:none;will-change:transform;perspective:1200px}
.lp .hz-beltTrack::-webkit-scrollbar{display:none}
/* The row's own right padding is not counted in its scroll width, so the last card used
   to stop short of the screen, under the section navigator. A spacer after it gives the
   same margin as the left, plus room for the navigator on wide screens. */
.lp .hz-beltTrack::after{content:"";flex:0 0 max(1px,calc((100vw - 1240px) / 2 + 70px))}
@media (max-width:1179px){ .lp .hz-beltTrack::after{flex-basis:16px} }
.lp .hz-belt.is-pinned .hz-beltTrack{overflow:visible}
.lp .hz-beltCard{--rx:0deg;--ry:0deg;--gx:50%;--gy:50%;position:relative;flex:none;width:clamp(260px,26vw,340px);min-height:clamp(250px,32vh,310px);padding:26px 28px 28px;border-radius:28px;overflow:hidden;
  display:flex;flex-direction:column;background:#fff;border:1px solid #d4e8dc;box-shadow:0 34px 70px -50px rgba(13,61,53,.55);
  transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .4s}
.lp .hz-beltCard.is-tilt{transition:transform .08s linear,box-shadow .4s;box-shadow:0 44px 80px -46px rgba(13,61,53,.6)}
.lp .hz-beltGlare{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(420px circle at var(--gx) var(--gy),rgba(127,216,176,.28),transparent 45%)}
.lp .hz-beltCard.is-tilt .hz-beltGlare{opacity:1}
.lp .hz-beltNum{font-size:clamp(56px,5vw,84px);font-weight:800;line-height:1;letter-spacing:-.04em;color:rgba(13,61,53,.08)}
.lp .hz-beltIco{display:grid;place-items:center;width:64px;height:64px;margin-top:auto;border-radius:20px;background:linear-gradient(150deg,#e3f2ea,#cfe9dc);transform:translateZ(30px)}
.lp .hz-beltIco svg{width:30px;height:30px;fill:none;stroke:#0d3d35;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lp .hz-beltCard h3{margin:18px 0 8px;font-size:clamp(22px,1.9vw,28px);letter-spacing:-.02em;color:#101815}
.lp .hz-beltCard p{margin:0;font-size:16px;line-height:1.45;color:#3a4642}
.lp .hz-beltCard--deep{background:linear-gradient(160deg,#1f6b52,#0d3d35);border-color:transparent}
.lp .hz-beltCard--deep h3,.lp .hz-beltCard--deep p{color:#fff}
.lp .hz-beltCard--deep .hz-beltNum{color:rgba(255,255,255,.12)}
.lp .hz-beltCard--deep .hz-beltIco{background:rgba(255,255,255,.14)}
.lp .hz-beltCard--deep .hz-beltIco svg{stroke:#fff}
@media (max-width:900px){
  .lp .hz-beltHead{flex-direction:column;align-items:flex-start}
  .lp .hz-beltCard{width:min(78vw,320px);min-height:230px}
}

@media (prefers-reduced-motion:reduce){
  .lp .hz-f2Card,.lp .hz-f2Nav a i,.lp .hz-beltCard{transition:none}
  .lp .hz-fanCard{transform:none}
}

/* ---------------------------------------------------------------------------
   Arriving, on every device
   -------------------------------------------------------------------------

   The effects that make this page move are all desktop only, and for good reasons:
   the belt pins, which needs height, and the cards tilt, which needs a pointer. The
   consequence was that a phone got a page with no motion at all, and at 900px the
   feature cards had their reveal switched off outright.

   This is the one effect that belongs everywhere: a section rises as it is reached.
   It asks nothing of the device, costs one observer, and is what the page was missing
   on the screens most people read it on.

   Everything hides behind .hz-anim, which the script adds. With no script, nothing is
   hidden and the page is simply the page: the resting state is the visible one. */
.hz-anim .lp [data-hz-rise]{
  opacity:0;transform:translate3d(0,22px,0);
  transition:opacity .8s cubic-bezier(.2,.7,.3,1) var(--d,0ms),
             transform .9s cubic-bezier(.2,.7,.3,1) var(--d,0ms)
}
.hz-anim .lp [data-hz-rise].is-up{opacity:1;transform:none}

@media (max-width:900px){
  /* The reveal was cancelled here. It is a gentler rise on a phone, because a short
     viewport means more of the movement is on screen at once. */
  .hz-anim .lp .hz-f2Card[data-hz-rise]{opacity:0;transform:translate3d(0,16px,0)}
  .hz-anim .lp .hz-f2Card[data-hz-rise].is-up{opacity:1;transform:none}

  /* Fewer words where there is least room for them. Each feature card keeps the two
     lines that say what it is; the rest is detail a phone reader scrolls past, and six
     cards of it is what made this page feel like a wall. They are all still here on a
     wider screen, where there is room to read them. */
  .lp .hz-f2Card .hz-ticks li:nth-child(n+3){display:none}
}

@media (prefers-reduced-motion:reduce){
  .hz-anim .lp [data-hz-rise]{opacity:1;transform:none;transition:none}
}

/* A strip the script is driving must stop being a strip the finger drags, or the two
   fight each other. Scoped to .hz-driven, which the script adds only once it has a
   travel to drive, so a browser that never runs it keeps a row it can still swipe. */
.hz-slide .lp .hz-driven{overflow:hidden;scroll-snap-type:none;will-change:scroll-position;scroll-behavior:auto}
.hz-slide .lp .hz-driven::-webkit-scrollbar{display:none}

/* ---------------------------------------------------------------------------
   The stack: the row that cannot pin, on the screens that cannot pin it.

   A wide screen holds the section still and moves the cards across it, so a reader
   stays with a card until they choose to leave. A phone had no equivalent: the row
   travelled with the page, which meant the page carried it past while the first card
   was still being read, and whatever came after it was never seen.

   The same promise, made the way a phone can keep it. Each card rests under the header
   and stays there until the next one comes up to cover it, so nothing passes unread and
   the reader sets the pace. The card underneath gives up a little size and a little
   light as it is covered, which is what makes a pile of cards read as a pile.

   This is the pattern the partnerships page uses, for the same reason.
   ------------------------------------------------------------------------- */
/* The hold itself, at every width. A row travels when it is wider than its frame, and
   that is true of different rows at different sizes, so this cannot be a breakpoint. */
/* Block, not flex. These sections centre their contents, which is right when a section
   is a screen tall and wrong the moment it is made two thousand pixels tall to hold a
   gallery: the sticky stage was being centred in all of that, so it started five hundred
   and sixty eight pixels below the top of its own section and the reader met that much
   empty background before anything appeared. Half the empty space on the page was this,
   once per held section. */
.lp .hz-sec.hz-pinSec{height:var(--pinH)!important;min-height:0!important;
  display:block!important;align-items:initial;justify-content:initial;
  padding-top:0;padding-bottom:0;overflow:clip}
/* A screen's worth, so the row sits in the middle of what is held rather than at the top
   of it with the section's background below it. */
/* --hdr-now, not --hdr. --hdr is 76px, the header's height AT REST, but a pinned
   stage is only ever seen while the page is scrolled, and the header shrinks to
   64px the moment it sticks. Pinned to 76 the stage held 12px low and left a
   strip of page showing above the heading: the "heading is not at the top of the
   screen" that was reported. --hdr-now is written by the header script in
   functions.php and tracks the bar's real state, including the case where the
   bar has hidden itself on the way down, so the stage closes up behind it
   instead of holding a gap where the header used to be. */
.lp .hz-pinStage{position:sticky!important;top:var(--hdr-now,64px);
  /* Matched to the header's own .32s, because --hdr-now changes the moment the
     bar hides or returns and a pinned stage would otherwise jump 56px in one
     frame, mid scroll, with the heading in it. Transitioned, the two move as
     one thing: the stage closes up as the bar leaves and drops back as it
     returns. Reduced motion gets neither, below. */
  transition:top .32s cubic-bezier(.2,.7,.2,1);
  height:auto!important;max-height:none;
  display:flex;flex-direction:column;justify-content:center;gap:8px;padding:12px 0 16px}
/* Asked for less motion: nothing is held and nothing is driven, and every row stays a
   strip that can still be swiped by hand. */
@media (prefers-reduced-motion:reduce){
  .lp .hz-sec.hz-pinSec{height:auto!important}
  .lp .hz-pinStage{position:relative!important;height:auto!important}
}

/* ---------------------------------------------------------------------------
   What the scrub paints.
   ------------------------------------------------------------------------- */
/* A sentence arrives a word at a time as the reader comes down to it. The resting state
   is lit, so a browser that never runs the script shows the sentence, not a grey one. */
/* The unlit word has to stay readable (WCAG 1.4.3, 4.5:1): at .22 it measured 1.38:1,
   so anyone reading it off-centre, zoomed in or with a magnifier met grey on white. It
   now lights from a muted ink that passes on its own to the full ink: #0b1f19 at .64 is
   4.86:1 on white, 4.73:1 on sage and 4.69:1 on mist. Colour is set only while the
   script runs, so without it the sentence keeps the page's ordinary body ink. */
.hz-anim .lp .hz-lit .hz-sw{
  color:#0b1f19;
  opacity:calc(.64 + clamp(0,(var(--v,1) * (var(--n,1) + 2)) - var(--i,0),1) * .36);
  transition:opacity .45s ease}
/* Cards arrive one after another rather than all at once, which is the difference
   between a row appearing and a row being dealt. */
.hz-anim .lp .hz-stagger>*{opacity:0;transform:translate3d(0,18px,0);
  transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .8s cubic-bezier(.2,.7,.3,1)}
.hz-anim .lp .hz-stagger>*.is-on{opacity:1;transform:none}
/* The item nearest the middle of the screen is the one being read. */
.lp .hz-madeList li,.lp .hz-ticks li{opacity:calc(.45 + var(--f,1) * .55);transition:opacity .3s}
@media (prefers-reduced-motion:reduce){
  .hz-anim .lp .hz-lit .hz-sw{opacity:1}
  .hz-anim .lp .hz-stagger>*{opacity:1;transform:none;transition:none}
  .lp .hz-madeList li,.lp .hz-ticks li{opacity:1}
}

/* ---------------------------------------------------------------------------
   Icons with a body.

   Every icon on this page was a flat tile with a line drawing on it: the same light, the
   same edge, the same nothing, forty five times. An icon that reads as an object needs
   three things, and they are all light. A top edge catching it. A shadow gathering under
   the far edge inside the plate, which is what gives the plate thickness. A shadow cast
   on what is behind it, which is what lifts it off the card.

   The glyph is then given its own: a hairline of white under the stroke and a soft shade
   below that, so the drawing sits on the plate rather than being printed on it. The ink
   is a gradient rather than a colour, dark at the foot and lighter at the head, which is
   what a solid object does to a line drawn on it.

   Built from light rather than from images: it is sharp at any size, costs no requests,
   carries no licence, and recolours itself on a dark card.
   ------------------------------------------------------------------------- */
.lp .lp__ddIcon,.lp .hz-fanIco,.lp .hz-beltIco,.lp .hz-f2Ico,.lp .hz-tabIco{
  position:relative;isolation:isolate;overflow:hidden;
  background:linear-gradient(162deg,#f5fcf9 0%,#e1f2e9 46%,#c5e3d4 100%);
  border:1px solid rgba(255,255,255,.8);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -12px 16px -14px rgba(11,52,45,.6),
    0 10px 16px -12px rgba(11,52,45,.5),
    0 1px 2px rgba(11,52,45,.1);
  transition:transform .25s cubic-bezier(.2,.7,.3,1),box-shadow .25s}
.lp .lp__ddIcon::after,.lp .hz-fanIco::after,.lp .hz-beltIco::after,
.lp .hz-f2Ico::after,.lp .hz-tabIco::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(130% 85% at 20% 0%,rgba(255,255,255,.95),rgba(255,255,255,0) 56%),
    radial-gradient(90% 70% at 92% 100%,rgba(127,216,176,.45),rgba(127,216,176,0) 62%)}
.lp .lp__ddIcon svg,.lp .hz-fanIco svg,.lp .hz-beltIco svg,
.lp .hz-f2Ico svg,.lp .hz-tabIco svg{
  position:relative;z-index:1;
  stroke:#14564a;stroke:url(#hzIcoInk);stroke-width:1.65;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.85)) drop-shadow(0 2px 3px rgba(11,52,45,.28))}

/* The feature card the reader is on turns its icon over: the plate goes solid dark and
   the glyph becomes the light. Same object, lit from the same side, so it reads as the
   thing turning rather than as a different thing. */
.lp .hz-f2Card.is-on .hz-f2Ico{
  border-color:rgba(255,255,255,.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -14px 18px -14px rgba(0,0,0,.65),
    0 14px 20px -12px rgba(11,52,45,.55)}
.lp .hz-f2Card.is-on .hz-f2Ico::after{
  background:radial-gradient(130% 85% at 20% 0%,rgba(255,255,255,.3),rgba(255,255,255,0) 58%),
    radial-gradient(90% 70% at 92% 100%,rgba(127,216,176,.3),rgba(127,216,176,0) 64%)}
.lp .hz-f2Card.is-on .hz-f2Ico svg{
  stroke:url(#hzIcoLit);filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}

/* The same object on a dark card, lit the other way: glass over deep green. */
.lp .hz-beltCard--deep .hz-beltIco,.lp .hz-fanCard:nth-child(4) .hz-fanIco{
  background:linear-gradient(162deg,rgba(255,255,255,.26),rgba(255,255,255,.07) 52%,rgba(255,255,255,.03));
  border-color:rgba(255,255,255,.26);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 -12px 16px -14px rgba(0,0,0,.5),
    0 8px 16px -12px rgba(0,0,0,.55)}
.lp .hz-beltCard--deep .hz-beltIco::after,.lp .hz-fanCard:nth-child(4) .hz-fanIco::after{
  background:radial-gradient(130% 85% at 20% 0%,rgba(255,255,255,.42),rgba(255,255,255,0) 58%)}
.lp .hz-beltCard--deep .hz-beltIco svg,.lp .hz-fanCard:nth-child(4) .hz-fanIco svg{
  stroke:#fff;stroke:url(#hzIcoLit);
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.45))}

/* A thing with a body has a near side, so it comes towards the pointer. */
@media (hover:hover){
  .lp .lp__ddGrid a:hover .lp__ddIcon,.lp .hz-f2Card:hover .hz-f2Ico{
    transform:translateY(-1.5px);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.95),
      inset 0 -12px 16px -14px rgba(11,52,45,.55),
      0 15px 22px -12px rgba(11,52,45,.55)}
}
@media (prefers-reduced-motion:reduce){
  .lp .lp__ddIcon,.lp .hz-fanIco,.lp .hz-beltIco,.lp .hz-f2Ico,.lp .hz-tabIco{transition:none}
}

/* ---------------------------------------------------------------------------
   A phone stacks, it does not slide.

   Three of these rows were being held and driven sideways because they happened to
   overflow at this width. Five held sections on a twelve section page is not a page with
   motion, it is a page that will not let go, and it was most of what made this one feel
   broken. Only the two that are genuinely card carousels hold now. The rest become what
   a phone wants anyway: one column, in order, arriving as they are reached.
   ------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------
   The gallery, at every width.

   A held section is only worth the screen it costs if the screen is full. The stage is
   a column: the heading takes what it needs, the row takes everything left, and the
   cards take all of the row. One card fills the view, the next is at the edge showing
   there is more, and the page comes to a stop while they pass.
   ------------------------------------------------------------------------- */
.lp .hz-pinStage{display:flex;flex-direction:column}
.lp .hz-pinStage .hz-threeGrid,.lp .hz-pinStage .hz-gainGrid,
.lp .hz-pinStage .hz-postGrid,.lp .hz-pinStage .hz-madeList{
  display:flex!important;flex-wrap:nowrap!important;align-items:stretch;
  flex:1 1 auto;min-height:0;width:auto!important;max-width:none;
  gap:clamp(12px,1.4vw,22px);margin:0;padding:0 var(--hp-gutter,20px);
  transform:none!important;
  /* Hidden, not visible. The page drives this row by setting scrollLeft, and an element
     that does not scroll has no scrollLeft to set: with overflow visible the whole thing
     silently stops travelling while everything else still looks right. */
  overflow:hidden;scrollbar-width:none}
/* No minimum height, and nothing pushed to the foot. Giving the card a height was there
   to stop a short card floating in a tall stage, but the stage has hugged its content
   since, so the minimum only bought the card an empty hem of its own: two hundred pixels
   of nothing under four lines of text, once per card, on every gallery. A card is as
   tall as what is in it, the tallest card in the row sets the row, and the stage is the
   size of that. The next card still shows at the edge, which is the part that mattered:
   a row has to look like it has somewhere to go, or stopping the page to move it makes
   no sense. */
.lp .hz-pinStage .hz-threeGrid>*,.lp .hz-pinStage .hz-gainGrid>*,
.lp .hz-pinStage .hz-postGrid>*,.lp .hz-pinStage .hz-madeList>*{
  flex:0 0 min(84vw,520px)!important;width:auto!important;min-width:0;max-width:none;
  height:auto!important;min-height:0!important;transform:none!important;
  display:flex;flex-direction:column;justify-content:flex-start}
.lp .hz-pinStage .hz-threeGrid::after,.lp .hz-pinStage .hz-gainGrid::after,
.lp .hz-pinStage .hz-postGrid::after,.lp .hz-pinStage .hz-madeList::after{display:none}
/* The counter and the arrows describe a row somebody drives by hand. The page drives
   this one. */
.hz-pinned .lp .hz-beltCtl{display:none}

/* The rows that are not worth holding: a strip the thumb moves, one card at a time. The
   snap is what makes it feel deliberate rather than like a list that happens to run off
   the edge. */
.lp .hz-strip{display:flex!important;flex-wrap:nowrap!important;align-items:stretch;
  width:auto!important;max-width:none;gap:clamp(12px,1.4vw,22px);margin:0;
  padding:2px var(--hp-gutter,20px) 10px;transform:none!important;
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain}
.lp .hz-strip::-webkit-scrollbar{display:none}
.lp .hz-strip>*{flex:0 0 min(84vw,420px)!important;width:auto!important;min-width:0;
  max-width:none;height:auto!important;min-height:0!important;transform:none!important;
  scroll-snap-align:start}
.lp .hz-strip::after{display:none}

.lp .hz-pinSec .hz-head{padding-inline:var(--hp-gutter,20px);margin-bottom:clamp(14px,2.4vh,30px)}
.hz-pinned .lp .hz-beltBtn{display:none}


/* Fewer words, further up the range. A tablet in portrait is 768 and in landscape 1024,
   and the six feature cards were still a wall at both. The detail stays on a desktop,
   where there is room for it. */
@media (max-width:1100px){
  .lp .hz-f2Card .hz-ticks li:nth-child(n+3){display:none}
}
@media (max-width:560px){
  .lp .hz-f2Card .hz-ticks li:nth-child(n+3){display:none}
}

/* ---------------------------------------------------------------------------
   Phone typography, and the line that was cut too far.

   The paragraph under each card was hidden here on the grounds that a thumb scrolls
   past it. What that left was an eyebrow, two words and a large ghost numeral: a card
   that said "Clinicians. Write it." and nothing about why anybody would. The sentence
   under it is not decoration, it is the only thing on the card that sells anything,
   and the card now holds the screen long enough to be read. It comes back.

   What goes instead is the size of everything around it. The scale here follows the
   iPhone pages at the same width: body 14px, card titles 19 to 21, section headings
   28 to 32, with the slight negative tracking Apple uses to stop small text looking
   loose. Ours ran 15 to 16 on body and 22 to 28 on card titles, which is why four
   cards felt like a wall. The giant numerals go altogether on a phone: they were a
   desktop flourish that became a third of a small card.
   ------------------------------------------------------------------------- */
@media (max-width:900px){
  .lp .hz-lead,.lp .hz-sub{font-size:15.5px;line-height:22px;letter-spacing:-.012em}
  .lp .hz-tCard h3{font-size:17px;line-height:21px;letter-spacing:-.015em}
  .lp .hz-tCard p,.lp .hz-ticks li{font-size:14px;line-height:20px;letter-spacing:-.012em}
  .lp .hz-f2Card h3{font-size:19px;line-height:23px;letter-spacing:-.015em}

  /* The deck of four */
  .lp .hz-fanDeck{gap:12px;min-height:0}
  .lp .hz-fanCard{padding:16px 16px 18px;gap:6px;border-radius:20px}
  .lp .hz-fanIco{width:40px;height:40px;border-radius:12px}
  .lp .hz-fanIco svg{width:21px;height:21px}
  .lp .hz-fanWho{margin-top:0;font-size:11px;letter-spacing:.07em}
  .lp .hz-fanCard h3{font-size:21px;line-height:25px;letter-spacing:-.022em}
  .lp .hz-fanCard p{display:block;font-size:14px;line-height:20px;letter-spacing:-.012em}
  .lp .hz-fanNum{display:none}

  /* The belt, which is a stack at this width */
  .lp .hz-beltCard{min-height:0;padding:18px 18px 20px}
  .lp .hz-beltCard h3{margin:12px 0 6px;font-size:19px;line-height:23px;letter-spacing:-.015em}
  .lp .hz-beltCard p{display:block;font-size:14px;line-height:20px;letter-spacing:-.012em}
  .lp .hz-beltNum{font-size:30px}
  .lp .hz-beltIco{width:44px;height:44px;border-radius:14px}
  .lp .hz-beltIco svg{width:22px;height:22px}
}