/* =========================================================================== Handling Plan: one system, on white. Measured off apple.com/uk/mac and physitrack.com rather than guessed. They are the same system underneath: apple physitrack ground #fff / #f5f5f7 #fff / #f7f5f3 ink rgb(29,29,31) rgb(0,42,44) secondary ink rgb(110,110,115) rgb(51,65,85) card radius 28px 8 to 12px card shadow none none pills 980px --- Two things stand out and both are restraint. The ink is never pure black: it carries a hue, which is what stops a white page looking like a document. And the cards have no shadow at all. What separates a card from the page is a hairline and a change of ground, not a drop shadow, which is the single biggest difference between a page that looks designed and one that looks assembled. So: white, with one off-white alternate, ink at #0b1f1a, one hairline, one radius, and deep green reserved for the two moments that earn a full bleed. Marked important throughout, deliberately: the theme underneath sets grounds, borders and colours at three class weight across six stylesheets, and a skin that loses half its declarations is worse than no skin. This file loads last and wins outright. ======================================================================== */ .lp{ --x-paper:#ffffff; --x-mist:#f5f7f6; --x-ink:#0b1f1a; --x-ink2:#5b6b66; /* #8b9995 measured 2.96:1 on white and this token sets the description line under every item in the mega menu, at 12.5px, on every page. AA wants 4.5:1 for text that size. #67736f is 4.93:1 and keeps the step down from --x-ink2. */ --x-ink3:#67736f; --x-green:#0e5c4a; --x-green2:#147a62; --x-mint:#7fd8b0; --x-deep:#07201b; --x-line:rgba(11,31,26,.10); --x-line2:rgba(11,31,26,.18); --x-r:18px; --x-ease:cubic-bezier(.2,.7,.2,1); } /* ---- The ground --------------------------------------------------------- White, with no field behind it. The dark version needed an aurora to stop the ground reading as a void; white needs nothing, and anything added to it is noise. */ .lp.lp{background:var(--x-paper)!important;color:var(--x-ink2)!important; position:relative;isolation:isolate} .lp.lp::before,.lp.lp::after{display:none!important} .lp .hz-fx,.lp .hz-aurora,.lp .hz-f2::before{display:none!important} /* Sections are transparent; two alternate to the off-white, the way both references alternate, so the page reads as bands rather than as one sheet. */ .lp .hz-sec,.lp .hp-hero,.lp .hz-who2,.lp .hz-f2,.lp .hp-board,.lp .hz-made, .lp .hz-lib2,.lp .hz-posts,.lp .hz-faq,.lp .hz-three,.lp .hz-gain,.lp .hz-how, .lp .lp__tiles,.lp .hz,.lp .hz-in,.lp .hp-wrap,.lp .hz-hsStage,.lp .hz-beltStage, .lp .hp-hero__screen,.lp .hp-steps,.lp .hz-f2In,.lp .hz-f2Side,.lp .hz-f2List, .lp .hp-board__grid,.lp .hz-head,.lp .hz-tabs,main.lp__tiles{ background:transparent!important} /* The band rhythm, taken from the artifact. The page alternates paper and off-white and drops into a deep scene twice, so it reads as a sequence of bands rather than one long sheet: hero, how, library, features, outcomes, who, cost, start runs paper / mist / paper / deep / mist / paper / mist / deep. Only the ground changes here. Every section and every word of its copy stays exactly where it was. */ .lp .hz-sec.hz-how,.lp .hz-sec.hz-gain,.lp .hz-sec.hz-cost{background:var(--x-mist)!important} /* The full bleed deep scenes. Green is earned here and nowhere else. */ .lp .hz-sec.hz-who2,.lp .hz-sec.hz-join,.lp .hz-sec.hz-f2{ background:linear-gradient(180deg,#07201b,#0c332b 55%,#07201b)!important} /* The feature row is the third deep scene, and the one that earns it: its cards are white and stay white, which is the artifact's strongest move, a pale card lifted off a deep ground. Only the heading turns over, because only the heading sits on the ground. The cards keep their own ink, so nothing inside them has to be restyled. */ .lp .hz-sec.hz-f2 .hz-head h2,.lp .hz-sec.hz-f2 .hz-head .hz-h2{color:#fff!important} .lp .hz-sec.hz-f2 .hz-head p,.lp .hz-sec.hz-f2 .hz-head .hz-sub{ color:rgba(255,255,255,.78)!important} .lp .hz-sec.hz-f2 .hz-head em,.lp .hz-sec.hz-f2 .hz-head .hp-eyebrow{ color:var(--x-mint)!important} /* ---- Ink ---------------------------------------------------------------- */ .lp h1,.lp h2,.lp h3,.lp h4,.lp .hz-h1,.lp .hz-h2,.lp .hp-display{color:var(--x-ink)!important} .lp p,.lp li,.lp dd,.lp figcaption,.lp small{color:var(--x-ink2)!important} .lp em,.lp .lp__hl,.lp mark,.lp .hz-h2 em,.lp .hp-display em{ color:var(--x-green)!important;background:none!important;font-style:normal} .lp .hp-eyebrow,.lp .hz-chip,.lp .hz-f2Tag,.lp .hp-tile__name,.lp .hz-panelKick, .lp .hz-tTag,.lp .hz-gainWho,.lp .hz-madeWho,.lp .hz-postTag{ color:var(--x-green2)!important;background:none!important;border:0!important; letter-spacing:.11em!important;text-transform:uppercase} .lp .hz-sub,.lp .hp-lead,.lp .hp-note{color:var(--x-ink2)!important} .lp .hp-link,.lp .hz-link{color:var(--x-green)!important} .lp .hz-gainNum,.lp .hz-fanNum,.lp .hz-beltNum,.lp .hz-f2Num{ color:rgba(11,31,26,.09)!important} .lp .hz-gainCard b,.lp .hz-madeList b,.lp .hz-post b,.lp .hz-tCard b,.lp .hz-step b, .lp .hz-panel b,.lp .hz-f2Card b,.lp .hp-whoCard b,.lp .hz-faq b, .lp .hp-tile b:not(.hp-tile__dial b),.lp .hz-sec strong{color:var(--x-ink)!important} /* Everything inside a deep scene turns over. */ .lp .hz-who2 h2,.lp .hz-who2 h3,.lp .hz-who2 b,.lp .hz-join h2,.lp .hz-join h3, .lp .hz-who2 .hz-h2,.lp .hz-join .hz-h2{color:#fff!important} .lp .hz-who2 p,.lp .hz-who2 li,.lp .hz-join p,.lp .hz-who2 .hz-sub, .lp .hz-join .hz-sub{color:rgba(255,255,255,.78)!important} .lp .hz-who2 em,.lp .hz-join em,.lp .hz-who2 .hp-eyebrow,.lp .hz-join .hz-chip, .lp .hz-who2 .hp-link,.lp .hz-who2 .hp-stageNum b{color:var(--x-mint)!important} .lp .hz-who2 .hp-stageNum i{color:rgba(255,255,255,.6)!important} /* ---- Surfaces ----------------------------------------------------------- White on white, separated by a hairline, not a shadow. On the off-white bands and on the deep scenes the card changes with the ground rather than keeping its own colour. */ .lp .hz-tCard,.lp .hz-step,.lp .hp-tile,.lp .hz-gainCard,.lp .hz-post,.lp .hz-f2Card, .lp .hz-madeList li,.lp .hp-whoCard,.lp .hz-libCard,.lp .hz-faq details,.lp .hz-tab{ background:var(--x-paper)!important; border:1px solid var(--x-line)!important; border-radius:var(--x-r)!important; box-shadow:none!important; color:var(--x-ink2)!important; -webkit-backdrop-filter:none;backdrop-filter:none} .lp .hz-gain .hz-gainCard,.lp .hz-lib2 .hz-libCard{border-color:var(--x-line2)!important} .lp .hz-who2 .hp-stages>li,.lp .hz-who2 .hz-panel{ background:rgba(255,255,255,.06)!important;border:1px solid rgba(255,255,255,.16)!important} /* The lit top edge belonged to glass. On paper it is a smudge. */ .lp .hz-tCard::before,.lp .hp-tile::before,.lp .hz-gainCard::before, .lp .hz-post::before,.lp .hp-whoCard::before{display:none!important} /* ---- Buttons ------------------------------------------------------------- */ .lp .hz-btn,.lp .hp-btn{border-radius:999px!important;font-weight:650;letter-spacing:-.006em} .lp .hz-btn--solid,.lp .hp-btn--solid{ background:var(--x-ink)!important;color:#fff!important;border:0!important; box-shadow:none!important} .lp .hz-btn--line,.lp .hp-btn--ghost{ background:transparent!important;color:var(--x-ink)!important; border:1px solid var(--x-line2)!important} .lp .hz-who2 .hz-btn--solid,.lp .hz-join .hz-btn--solid, .lp .hz-who2 .hp-btn--solid,.lp .hz-join .hp-btn--solid{ background:var(--x-mint)!important;color:#07201b!important} .lp .hz-who2 .hz-btn--line,.lp .hz-join .hz-btn--line{ color:#fff!important;border-color:rgba(255,255,255,.28)!important} @media (hover:hover){ .lp .hz-btn:hover,.lp .hp-btn:hover{transform:translateY(-2px)} } /* ---- Icon plates --------------------------------------------------------- */ .lp .hz-tabIco,.lp .hz-f2Ico,.lp .lp__ddIcon,.lp .hz-fanIco,.lp .hz-beltIco{ background:var(--x-mist)!important;border:1px solid var(--x-line)!important} .lp .hz-tabIco svg,.lp .hz-f2Ico svg,.lp .lp__ddIcon svg,.lp .hz-fanIco svg, .lp .hz-beltIco svg,.lp .hz-ticks svg{stroke:var(--x-green)!important} .lp .hp-tile__dial{background:conic-gradient(var(--x-green) calc(var(--lit,0) * 360deg), rgba(11,31,26,.10) 0)!important;border:0!important} .lp .hp-tile__dial::after{background:var(--x-paper)!important} .lp .hp-tile__dial b{color:var(--x-green)!important} .lp .hp-tile__list li::before{background:var(--x-green)!important} .lp .hz-who2 .hz-tabIco{background:rgba(255,255,255,.1)!important; border-color:rgba(255,255,255,.2)!important} .lp .hz-who2 .hz-tabIco svg{stroke:var(--x-mint)!important} /* ---- Live states --------------------------------------------------------- */ .lp .hz-f2Card.is-on,.lp .hp-tile:hover,.lp .hz-step.is-on{ border-color:rgba(14,92,74,.4)!important;box-shadow:none!important} .lp .hz-f2Nav a{color:var(--x-ink3)!important} .lp .hz-f2Nav a.is-on,.lp .hz-f2Nav a:hover{color:var(--x-ink)!important} .lp .hz-f2Nav::before{background:var(--x-line)!important} .lp .hz-f2Nav::after{background:linear-gradient(180deg,var(--x-green),transparent)!important; box-shadow:none!important} .lp .hz-f2Nav a::before{background:var(--x-paper)!important; border-color:rgba(14,92,74,.4)!important} .lp .hz-f2Nav a.is-on::before{background:var(--x-green)!important; box-shadow:0 0 0 4px rgba(14,92,74,.12)!important} .lp .hz-who2 .hp-wheelRing li{background:rgba(255,255,255,.08)!important; border-color:rgba(255,255,255,.2)!important} .lp .hz-who2 .hp-wheelRing li b{color:var(--x-mint)!important; border-color:rgba(127,216,176,.5)!important} .lp .hz-who2 .hp-wheelRing li span{color:#fff!important} .lp .hz-who2 .hp-wheelRing li.is-live{background:var(--x-mint)!important; border-color:var(--x-mint)!important} .lp .hz-who2 .hp-wheelRing li.is-live b{background:#07201b!important;color:var(--x-mint)!important} .lp .hz-who2 .hp-wheelRing li.is-live span{color:#07201b!important} /* ---- Chrome -------------------------------------------------------------- */ .lp__head,.lp__head .lp__headIn{background:rgba(255,255,255,.82)!important; -webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px); border-bottom:1px solid var(--x-line)!important} .lp__head a,.lp__head button,.lp__ddBtn{color:var(--x-ink)!important} .lp__head .tp-logo i,.lp__head .tp-logo b{color:var(--x-ink)!important} .lp__head .tp-logo small{color:var(--x-ink3)!important} .lp__ddPanel{background:rgba(255,255,255,.98)!important;border:1px solid var(--x-line)!important; box-shadow:0 30px 60px -40px rgba(11,31,26,.35)!important} .lp__ddPanel b{color:var(--x-ink)!important} .lp__ddPanel small{color:var(--x-ink3)!important} /* The promo card in the mega menu is the one dark thing in a white panel, so the two rules above paint its words in near-black on near-black and the card reads as empty. Its own colour:#fff in landing.css cannot win against an !important, so the exception has to live here, beside the rule that caused it, and carry one more class than it. */ .lp__head a.lp__ddAside, .lp__ddPanel a.lp__ddAside b, .lp__ddPanel a.lp__ddAside span{color:#fff!important} .lp__ddPanel a.lp__ddAside small{color:#9fd4bf!important} /* The shared hover is a flat light tint, and background is shorthand, so hovering the card would also wipe the gradient out from under the white text. */ .lp__ddPanel a.lp__ddAside:hover{background:radial-gradient(120% 90% at 100% 0%,#1d5a4c,#0a2621 65%)} .lp__bar{background:var(--x-mist)!important;color:var(--x-ink2)!important; border-bottom:1px solid var(--x-line)!important} .lp__new{background:var(--x-green)!important;color:#fff!important} .lp__foot{background:var(--x-deep)!important;border-top:0!important} .lp__foot a,.lp__foot li,.lp__foot p{color:rgba(255,255,255,.76)!important} .lp__foot b,.hf__logo i,.hf__logo b{color:#fff!important} /* The regulations band kept the old deep ground while its type turned to the light theme's grey: 2.2 to 1, a line of standards nobody could read. It joins the page. */ .lp .hz-basis,.lp .hz-basisRow,.lp .hz-basisTrack,.lp .hz-marq,.lp .hz-marqPlane{ background:transparent!important} .lp .hz-basis,.lp .hz-basis *{color:var(--x-ink2)!important} .lp .hz-basis b,.lp .hz-basisRow b{color:var(--x-ink)!important} /* The strapline under the wordmark was the palest ink on white at seven pixels. */ .lp__head .tp-logo small,.lp .tp-logo small{color:var(--x-ink2)!important} .lp hr,.lp .hz-rule,.lp .hz-panelFoot{border-color:var(--x-line)!important} .lp .hz-faq summary{color:var(--x-ink)!important} /* ---- The motion, unchanged in shape, retimed for paper ------------------- Light pages read as nearer than dark ones, so the travel is shorter and the timing a little quicker than it was on the deep ground. Everything is transform and opacity. */ .hp-go .lp .hp-slide{opacity:0;transform:translate3d(0,28px,0); transition:opacity .9s var(--x-ease) var(--hp-sd,0ms), transform .95s var(--x-ease) var(--hp-sd,0ms)} .hp-go .lp .hz-sec.is-in .hp-slide, .hp-go .lp [data-hp-scene].is-in .hp-slide{opacity:1;transform:none} /* ---- The blocks do not slide in on a phone (20 October 2026) ------------- This animation was the largest contentful paint on the landing page, and the figures say so plainly. Lighthouse breaks a 4.2 second paint into 134ms to first byte, 13ms of load delay, 173ms to fetch the image, and 1,351ms of element render delay: the poster of the first screen guide was on the wire inside half a second and then sat invisible while this ran. It is .9s of opacity with up to 600ms of stagger in front of it, which is the 1,351 almost exactly. Switched off below 760px, which is what the reduced-motion rule below already does for anybody who asks for it. On a phone each block is read as it is scrolled to anyway, so 28px of travel buys very little and costs the headline figure on the page. */ @media (max-width:760px){ .hp-go .lp .hp-slide{opacity:1;transform:none;transition:none} } .hp-go .lp .hz-h2 .lp__w>.hp-w{transition:transform .95s var(--x-ease) calc(var(--w,0) * 60ms)} .lp .hp-eyebrow,.lp .hz-chip{position:relative;display:inline-flex;align-items:center;gap:12px} .lp .hp-eyebrow::before,.lp .hz-chip::before{content:"";display:block;width:0;height:1.5px; background:currentColor;opacity:.75;transition:width .85s var(--x-ease) .12s} .hp-go .lp .hz-sec.is-in .hp-eyebrow::before, .hp-go .lp .hz-sec.is-in .hz-chip::before, .hp-go .lp [data-hp-scene].is-in .hp-eyebrow::before{width:30px} .lp .hp-hero .hp-eyebrow::before{display:none} .lp .hz-madeList li,.lp .hz-ticks li,.lp .hp-tile__list li{opacity:1!important} /* Smoothed to the artifact's feel. One ease for everything that moves, and a short transition on the surfaces a cursor touches, so a card or a button eases under the hand instead of changing state in a single frame. Transform is deliberately not in the list: the pinned rows own theirs and set it a pixel at a time, and a transition on it would fight the driver rather than smooth it. */ .lp .hz-tCard,.lp .hp-tile,.lp .hz-gainCard,.lp .hz-post,.lp .hp-fCard,.lp .hz-libCard, .lp .hz-btn,.lp .hp-btn,.lp .hz-faq details,.lp .hz-tab{ transition:background-color .22s var(--x-ease),border-color .22s var(--x-ease), box-shadow .28s var(--x-ease),color .22s var(--x-ease)} /* ---- Responsive --------------------------------------------------------- Nothing here has a fixed width. The things that can break a narrow screen are a grid with a minimum wider than the screen, a wheel measured in viewport width, and padding that does not shrink. All three are handled. */ .lp img,.lp svg,.lp video{max-width:100%;height:auto} .lp .hp-board__grid,.lp .hz-gainGrid,.lp .hz-postGrid,.lp .hz-madeList{ grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))!important} @media (max-width:899px){ .lp .hz-f2In{grid-template-columns:1fr!important} .lp .hz-f2Side{position:static!important} .lp .hp-steps{grid-template-columns:1fr!important} .lp .hp-wheel{display:none!important} } @media (max-width:560px){ .lp .hz-sec{padding-inline:0!important} .lp .hz-in,.lp .hp-wrap{padding-inline:18px!important} .lp .hp-board__grid,.lp .hz-gainGrid,.lp .hz-postGrid,.lp .hz-madeList{ grid-template-columns:1fr!important} .lp .hz-btn,.lp .hp-btn{width:100%;justify-content:center} .lp .hp-cta,.lp .hz-ctas{width:100%} } @media (prefers-reduced-motion:reduce){ .hp-go .lp .hp-slide{opacity:1;transform:none;transition:none} .hp-go .lp .hz-h2 .lp__w>.hp-w{transform:none;transition:none} .lp .hp-eyebrow::before,.lp .hz-chip::before{width:30px;transition:none} } /* ---- Three things: the sideways deck -------------------------------------- The row is carried sideways by home.js through --tx, and that is the only thing allowed to own its transform. The page reveal also animates transform, so whenever the two met on this one element the reveal won and the deck stood still: --tx counted all the way down while the row never moved. The guard in home6.js keeps the reveal off any block that is already being driven, and this declaration makes the travel immune to the same collision returning. */ .lp .hz-threeGrid{transform:translateX(var(--tx,0px))!important} /* ---- The footer mark ------------------------------------------------------ footer.css flattened the logo with brightness(0) invert(1). That forces every pixel to one solid white and throws away the yellow, which is a third of the mark. The mark is two colours, a yellow leaf over a teal figure, and the teal is too dark to sit straight on the deep footer, so it keeps its own colours on a small light tile and reads exactly as it does in the header. The tile goes on the image alone: the link around it also holds the wordmark, which is white. */ footer.hf .hf__logo img,.lp__foot .hf__logo img{ filter:none!important; width:34px!important;height:auto; padding:4px;box-sizing:border-box; background:#fff;border-radius:9px} /* The footer tagline is sized by the theme's own fitting script, which measures the wordmark above it and shrinks the line until it fits: 6.01px at the moment. Its box is nowrap with overflow hidden and no ellipsis, so overriding that size to something larger does not make the line more readable, it cuts the end of it off. At 9.5px the text needs 145px and the box is 111px, which clipped it to "Optimised moving and han". Left to the script. If it should genuinely be bigger, widen the box it has to fit into, do not force the font size. */ /* --------------------------------------------------------------------------- The front page hero, in the plan library's design --------------------------------------------------------------------------- Asked for on 4 October: the home page opens in the same voice as the library page. Same ink (#1d1d1f rather than the deep green), the same gradient carried by the second line, the same size of line underneath, and the same pair of pill buttons, one filled and one outlined. The rules above set these at two classes, so these sit at three and win without fighting them. The hero only. The rest of the page is left as it is. */ .lp .hp-hero .hp-display{ font-size:clamp(44px,6.6vw,88px)!important; line-height:1.08!important;letter-spacing:-.045em!important; font-weight:700!important;color:#1d1d1f!important} /* The second line carries the brand gradient, the way .lp__hl does on the library page: painted on the line and clipped to the letters. */ .lp .hp-hero .hp-display .hp-mask:nth-of-type(2)>span{ background:linear-gradient(90deg,#0d3d35 0%,#1f6b52 55%,#2c8a68 100%)!important; -webkit-background-clip:text!important;background-clip:text!important; color:transparent!important;-webkit-text-fill-color:transparent!important; padding-bottom:.06em} .lp .hp-hero .hp-lead{ font-size:clamp(19px,1.7vw,24px)!important;line-height:1.45!important; letter-spacing:-.01em!important;color:#424245!important; max-width:34ch!important;margin-top:18px!important} .lp .hp-hero .hp-cta{gap:14px 26px!important;margin-top:22px!important} /* The artifact's one action, to its own numbers: a 46px green pill, Archivo at 500 and 14px, tracked .11em and uppercased, carrying a near-black label. The dark green this held before belonged to the old palette, and white on the new green measures 3.36:1, which is why the label is ink rather than paper. */ .lp .hp-hero .hp-btn--solid{ min-height:46px!important;padding:0 26px!important; border-radius:999px!important; font-family:"Archivo","Helvetica Neue",Arial,sans-serif!important; font-size:14px!important;font-weight:500!important; letter-spacing:.11em!important;text-transform:uppercase!important; background:#176B52!important;border:1px solid #176B52!important;color:#fff!important} .lp .hp-hero .hp-btn--solid:hover{ background:#1a7a5c!important;border-color:#1a7a5c!important;color:#fff!important} /* The quiet action was a bare line of text. On the library page it is an outlined pill, so it is one here too, which also gives it a real target. */ .lp .hp-hero .hp-link{ display:inline-flex!important;align-items:center;justify-content:center;gap:8px; min-height:44px!important;padding:11px 22px!important; border-radius:980px!important;font-size:17px!important;font-weight:500!important; background:transparent!important;border:1px solid #d3e0da!important; color:#0d3d35!important} .lp .hp-hero .hp-link:hover{ background:#eef4f1!important;border-color:#bcd3c9!important} .lp .hp-hero .hp-link svg{width:16px;height:16px;flex:0 0 auto} /* --------------------------------------------------------------------------- Pay for what you use: the claim, and the card that shows it counting --------------------------------------------------------------------------- Drawn and animated rather than filmed. A recording of this would be the one thing on the page that keeps showing the old number after the billing ladder moves, it would weigh more than the rest of the section put together, and it would be a video of a price. The card is the real one's furniture at a smaller size, so what it demonstrates is the thing the visitor meets on the pricing page rather than an illustration of it. */ .lp .hz-costIn{ display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(30px,5vw,72px);align-items:center} .lp .hz-costList{list-style:none;margin:22px 0 4px;padding:0;display:grid;gap:11px} .lp .hz-costList li{ position:relative;padding-left:26px; font-size:17px;line-height:1.5;color:#424245} .lp .hz-costList li::before{ content:"";position:absolute;left:0;top:.52em; width:9px;height:9px;border-radius:50%;background:#2fa67a} .lp .hz-costList b{color:#1d1d1f;font-weight:700} /* The card that was drawn here in CSS has been replaced by the filmed simulation, so that this reads as one of the screen guides rather than as a second, slightly different, rendering of the same control. It sits in the device frame the rest of the page uses. */ .lp .hz-costDemo{min-width:0} .lp .hz-costDemo .lp__v{width:100%;margin-inline:auto;position:relative} /* The whole film is the target. Its text is for a screen reader and for anyone who lands on it with a keyboard, so it is taken out of sight rather than out of the accessibility tree, and the focus ring is drawn on the frame itself. */ .lp .hz-costDemo__hit{ position:absolute;inset:0;z-index:3;display:block; border-radius:inherit;overflow:hidden;text-indent:-9999px;white-space:nowrap; color:transparent} .lp .hz-costDemo__hit:focus-visible{ outline:3px solid #2fa67a;outline-offset:3px;border-radius:14px} .lp .hz-costDemo .lp__vBtn{z-index:4} /* --------------------------------------------------------------------------- Readability: text that ended up the colour of what it sits on --------------------------------------------------------------------------- The ink rules near the top of this file set headings, bold text and buttons to one dark colour. That is right on the white bands and wrong everywhere the page goes dark, and nothing here distinguished the two, so several pieces of text were being painted in a colour within touching distance of their own ground. Measured against WCAG AA, worst first: Start free trial, in the header #0b1f1a on #0d3d35 1.42:1 The numbers on the feature tiles #0e5c4a on #0e5c4a 1.00:1 Bold text in the dark scenes #101815 on #0d3d35 1.49:1 Each of those is text a reader could not make out, not text that merely looked dull, and the first of them is the button the whole page is pointing at. */ /* The filled button was dark green, and white was the only label it could carry. It is the artifact's lighter green pill now, on which white measures 3.36:1 and fails outright, so the label is the artifact's near-black instead, at 5:1. The outlined one keeps its own colour, hence the exclusions. */ .lp .lp__btn:not(.lp__btn--line):not(.lp__btn--ghost), .lp .lp__navActs .lp__btn:not(.lp__btn--line):not(.lp__btn--ghost){color:#fff!important} /* The number on a feature tile sits in a green dial, so it reads white. */ .lp .hp-tile__dial b{color:#fff!important} /* Bold text inside the three dark scenes. The ink rule above is for the paper bands; here it put near black on deep green. Not .hz-how as a whole. That section holds a mock of a printed plan with a white head and a dark green foot, so lightening everything bold inside it put near-white on the white part: the same half-a-change that has caught this page before. The two halves are addressed separately, below. */ .lp .hz-who2 b,.lp .hz-who2 strong, .lp .hz-join b,.lp .hz-join strong{color:#eaf6f0!important} /* The dark foot of the document mock. Its text was brand green on deep green. */ .lp .hz-how .hz-docFoot, .lp .hz-how .hz-docFoot b, .lp .hz-how .hz-docFoot em, .lp .hz-how .hz-docFoot span{color:#dff0e8!important} /* The small numerals around the wheel were mint at 4.33:1 against the panel they sit on, which is under AA for text this size. */ .lp .hz-who2 .hp-wheelRing li b, .lp .hz-who2 .hp-wheel b{color:#a9e8c9!important} /* The chip for the reader being shown fills with mint, and its numeral was mint as well: the same colour as the thing behind it, so on the one chip out of five that is being pointed at, the number disappeared. It takes the dark ink its own label already uses, which is the only colour on that chip that has anything to sit on. Only .is-live. The completed chips carry aria-current as well, and catching them too put the same dark ink on the dark chip: 1.57:1, which is the fault moved rather than fixed. .is-live is the only one that fills with mint. */ .lp .hz-who2 .hp-wheelRing li.is-live b{color:#07201b!important} /* Who it is for: the reading passed on contrast and still read thin, because the line under the heading was at 78% and the small labels are set in caps at 12px. Full strength for the sentence, and the stage number lifted off the mint that was sitting at 4.33:1 against the panel behind it. */ .lp .hz-who2 .hz-sub{color:rgba(255,255,255,.94)!important} .lp .hz-who2 .hp-stageNum b{color:#a9e8c9!important} .lp .hz-who2 .hp-wheelRing li span{font-weight:700;letter-spacing:.04em} /* --------------------------------------------------------------------------- Who it is for: five cards, and nothing to operate --------------------------------------------------------------------------- Light, because the complaint that started this was white type on green, and the surest answer to it is to stop asking anyone to read light text on a coloured ground at all. Ink on white, one card per reader, every one of them on the screen. The deep green is now spent in one place, on the sign-up band, which is the only thing on the page it was ever earning. No pinning, no wheel and no state: nothing here can be mid-animation, out of step with a scroll position, or showing the fourth card to somebody who arrived looking for the first. */ .lp .hz-who3{background:#f3faf7!important} .lp .who3__head{max-width:62ch;margin:0 0 clamp(26px,4vw,44px)} .lp .who3__grid{ list-style:none;margin:0;padding:0;display:grid;gap:18px; grid-template-columns:repeat(auto-fit,minmax(min(100%,268px),1fr))} .lp .who3__card{display:flex} .lp .who3__link{ display:flex;flex-direction:column;width:100%; padding:24px 24px 22px;background:#fff; border:1px solid #e2e8e5;border-radius:20px; text-decoration:none;color:inherit; transition:border-color .18s,transform .18s,box-shadow .18s} .lp .who3__link:hover{ border-color:#b9d2c7;transform:translateY(-2px); box-shadow:0 22px 38px -28px rgba(13,61,53,.45)} .lp .who3__link:focus-visible{outline:3px solid #2fa67a;outline-offset:3px} .lp .who3__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px} .lp .who3__ico{ width:42px;height:42px;flex:0 0 auto;display:grid;place-items:center; border-radius:13px;background:#e7f4ee;color:#0d3d35} .lp .who3__ico svg{width:21px;height:21px} .lp .who3__n{ font-size:13px;font-weight:700;letter-spacing:.04em; color:#2f6f5e;font-variant-numeric:tabular-nums} .lp .who3__link h3{margin:0;font-size:19px;line-height:1.25;letter-spacing:-.02em;color:#1d1d1f!important} .lp .who3__who{margin:5px 0 0;font-size:13px;line-height:1.45;color:#6e6e73!important} .lp .who3__body{margin:10px 0 0;font-size:15.5px;line-height:1.5;color:#424245!important} /* Pinned to the foot of the card, so five cards of unequal copy still line their actions up along one row. */ .lp .who3__go{ margin-top:auto;padding-top:16px; display:inline-flex;align-items:center;gap:6px; font-size:14.5px;font-weight:600;color:#0d3d35} .lp .who3__go svg{ width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4; stroke-linecap:round;stroke-linejoin:round;transition:transform .18s} .lp .who3__link:hover .who3__go svg{transform:translateX(3px)} /* --------------------------------------------------------------------------- Monitor the plan: the state chip on the step 3 illustration --------------------------------------------------------------------------- The same palette the client list uses, so what the home page shows and what the clinician meets afterwards are the same thing rather than a drawing of it. Amber is a review falling due, red is one past its date, and the card sits on white, so the chips keep their light grounds and dark text. */ .lp .hz-monState{ display:flex;align-items:center;gap:10px;flex-wrap:wrap; margin:12px 0 2px;padding:0 2px} .lp .hz-monState small{font-size:11.5px;line-height:1.4;color:#6e6e73} .lp .hz-monChip{ display:inline-block;padding:3px 9px;border-radius:999px; font-size:11px;font-weight:700;letter-spacing:.02em;white-space:nowrap; background:#f0f0f1;color:#646970} .lp .hz-monChip--on{background:#e6f4ea;color:#14663a} .lp .hz-monChip--due{background:#fdf3d8;color:#7a5200} .lp .hz-monChip--over{background:#fdecec;color:#8c1d18} .lp .hz-monChip--down{background:#eceef6;color:#38407a} /* The template library's film. It is the section now, so it takes the full width of the container rather than the 960px it shared with the plane of titles. The dark device bezel comes off. It drew a screen around a screen: the film is already a picture of the product's own window, frame and all, so the second frame added nothing and took 20px off every edge of the thing being looked at. A soft shadow is enough to lift it off the page. */ .lp .hz-libFilm{width:min(1400px,100%);margin:clamp(26px,3.4vw,40px) auto 0} .lp .hz-libFilm .lp__v{width:100%;position:relative} .lp .hz-libFilm .lp__v--device{ border:0;border-radius:clamp(14px,1.5vw,22px); box-shadow:0 44px 80px -50px rgba(10,38,33,.42)} @media (max-width:560px){ .lp .who3__link{padding:20px} } @media (prefers-reduced-motion:reduce){ .lp .who3__link,.lp .who3__go svg{transition:none} .lp .who3__link:hover{transform:none} } @media (max-width:899px){ .lp .hz-costIn{grid-template-columns:1fr} .lp .hz-costDemo{margin-top:6px} } /* =========================================================================== THE ARTIFACT DESIGN SYSTEM, HEADER TO FOOTER --------------------------------------------------------------------------- Asked for on 2026-10-17: the design of the Handling Plan artifact exactly, carrying this site's own sections and its own words. Everything below restyles markup that already exists. Nothing here adds a section, removes one, or changes a single line of copy. The grammar it is written in: ground paper #fff, mist #f4f6f5, forest #0d3d35, ink #0b1f19 accent green #3f9d6d, mint for type on deep ground, gold for focus display Archivo 300, tracked in, wrap balanced body Open Sans 16/1.6, measure held at 46 characters action one green pill, repeated, never a second shape surface a hairline and a radius; the one real shadow is the hero card rhythm bands of one idea, 1080px measure, generous vertical air This block sits last on purpose: it is the authority, and it says so with !important the way the rest of this file already does. =========================================================================== */ /* Sage on the large bands, per the palette note: #DCE9DF in place of the artifact's near-white #f4f6f5. It is the only value in here that departs from the artifact, and it is a darker ground, so two things have to come with it: the muted text drops a step (#5a6f68 is 4.3:1 on sage and fails AA; #4e625c is 5.2:1 and passes) and the hairline darkens, because #dfe6e2 against #DCE9DF is very nearly the same colour and the rule would simply vanish on those bands. --x-mist is overridden alongside --a-mist because the band rule further up reads that token, and the two must not be allowed to drift apart. */ .lp{ --a-ink:#0b1f19;--a-forest:#0d3d35;--a-leaf:#2c6b52;--a-green:#3f9d6d; --a-gold:#d9a441;--a-paper:#fff;--a-mist:#DCE9DF;--a-line:#cfdfd5; --x-mist:#DCE9DF; /* --x-ink2, not just --a-muted: the body rule near the top of this file sets p, li and dd from --x-ink2, so that token is what most text on the page actually resolves to. Left at #5b6b66 it measured 4.48:1 on sage, which is a fail by two hundredths and exactly the sort of near miss that gets waved through. Both tokens now carry the same darker value. */ --x-ink2:#4e625c; --a-muted:#4e625c;--a-onDark:#e8f0ec;--a-onDarkMuted:#9db5aa; --a-disp:"Archivo","Helvetica Neue",Arial,sans-serif; --a-ease:cubic-bezier(.2,.7,.2,1); } /* ---- Display type ------------------------------------------------------- 2026-10-25, by instruction, "use the font on every other page for the home page": back to 700. The family was never the difference, and neither was the file. Every other page already draws Archivo at 700 (pages.css .lp .lp__tiles h1, hp26.css .lp .hp-display.hp-display, home.css .lp .hz-h2) and only this block forced 300, so the home page was the single page in the set drawn light. Tracking goes with the weight: -.02em was chosen for 300 and reads loose under a bold display, so it closes to -.028em. The wrap stays balanced, so a two line heading still breaks evenly. */ .lp h1,.lp h2,.lp h3,.lp .hz-h1,.lp .hz-h2,.lp .hp-display{ font-family:var(--a-disp)!important;font-weight:700!important; letter-spacing:-.028em!important;text-wrap:balance} /* The hero heading. A rule further up this file sets .lp .hp-hero .hp-display in vw with no ceiling, which outranks a .lp prefixed selector: at 1280 it drew 84px where the artifact draws 68, and it kept growing with the window. The artifact's own clamp, repeated on the hero so it beats that rule too. */ .lp .hp-display,.lp .hz-h1, .lp .hp-hero .hp-display,.lp .hp-hero h1.hp-display{ font-size:clamp(2.6rem,6.4vw,4.25rem)!important; line-height:1.02!important;letter-spacing:-.035em!important} .lp .hz-h2{font-size:clamp(2rem,4.6vw,2.75rem)!important;line-height:1.12!important} .lp .hz-sec h3,.lp .hp-fCard h3{font-size:clamp(1.0625rem,1.4vw,1.1875rem)!important; line-height:1.25!important;letter-spacing:-.015em!important} /* ---- Body sizes, to the artifact's own numbers -------------------------- The artifact is restrained about size: 16px for body, 14px inside cards and rows, and the lede is the only line allowed to sit above that. This site was running a 17px base and 15.5px card text, which is what made the page read large even in the places where the headings were already right. The class is doubled because pages.css floors .lp paragraphs and would otherwise win. */ .lp.lp{font-size:16px!important;line-height:1.6!important} .lp.lp .hp-fCard li,.lp.lp .hp-fCard p, .lp.lp .hz-gainCard p,.lp.lp .hz-tCard p,.lp.lp .hz-step p, .lp.lp .hp-tile p,.lp.lp .hz-post p,.lp.lp .hz-libCard p, .lp.lp .hz-costList li,.lp.lp .hz-ticks li,.lp.lp .hz-madeList li{ font-size:14px!important;line-height:1.55!important} /* The lede, and the hero's own, which the artifact allows one step larger. */ .lp.lp .hz-sub,.lp.lp .hp-lead{ font-size:clamp(1rem,1.6vw,1.0625rem)!important;line-height:1.6!important} .lp.lp .hp-hero .hp-lead{font-size:clamp(1rem,1.7vw,1.125rem)!important} /* The lede. Held to 46 characters, because a line longer than that is read twice: once for the words and once to find the start of the next one. */ .lp .hz-sub,.lp .hp-lead{font-size:clamp(1rem,1.6vw,1.0625rem)!important; line-height:1.6!important;color:var(--a-muted)!important;max-width:46ch} .lp .hp-fgal .hz-sub,.lp .hz-head--c .hz-sub{margin-inline:auto} /* ---- Alignment ---------------------------------------------------------- The artifact has two kinds of band and only two: a split band whose words sit left against their picture, and a full-width band whose single idea is centred. These heads were doing neither. A split head carries text-align:center, so it centred inside its own grid column instead of over the content beneath it: #how centred its eyebrow and heading on x=409 while the card under them ran 172 to 1152, centre 662. And the 46ch measure I gave the lede met a margin-inline:auto that was already on it, so on #cost the lede sat 26px in from the heading directly above it. So: in a split head every line shares one left edge with the content, and in a centred head the lede is centred on the same axis as the heading. */ .lp .hz-head--split, .lp .hz-head--split>div, .lp .hz-head--split .hp-eyebrow,.lp .hz-head--split .hz-chip, .lp .hz-head--split .hz-h2,.lp .hz-head--split .hz-sub, .lp .hz-costText,.lp .hz-costText .hp-eyebrow, .lp .hz-costText .hz-h2,.lp .hz-costText .hz-sub{ text-align:left!important} .lp .hz-head--split,.lp .hz-head--split>div,.lp .hz-costText{ padding-inline:0!important;margin-inline:0!important} .lp .hz-head--split .hz-sub,.lp .hz-head--split .hp-lead, .lp .hz-costText .hz-sub,.lp .hz-costText .hp-lead{ margin-inline:0!important} /* The centred bands keep their axis, and the lede is centred on it rather than sitting left inside a box wider than itself. */ .lp .hp-fgal .hz-head,.lp .hz-head--c,.lp .hz-lib2 .hz-head{text-align:center} .lp .hp-fgal .hz-sub,.lp .hz-head--c .hz-sub,.lp .hz-lib2 .hz-sub, .lp .hp-hero .hp-lead{margin-inline:auto!important} /* The eyebrow is the artifact's one piece of small tracked type. */ /* Leaf, not the mid green. The artifact uses --green for an eyebrow only on its dark hero and --leaf everywhere on paper, and the reason shows in the numbers: #3f9d6d on the mist band is 3.12:1 and fails, where #2c6b52 is 5.6:1. The deep bands override this to mint further down. Three greens, one per ground. */ .lp .hp-eyebrow,.lp .hz-chip{font-family:var(--a-disp)!important; font-size:11.5px!important;font-weight:500!important;letter-spacing:.24em!important; text-transform:uppercase;color:var(--a-leaf)!important;background:none!important; border:0!important;padding:0!important} /* ---- The measure and the rhythm ----------------------------------------- 1080px, and bands with real air above and below them. The pinned feature row is exempt from both: it runs edge to edge and its height is computed by the driver in home6.js, which padding here would quietly falsify. */ .lp .hz-in{max-width:1080px!important} .lp .hz-sec:not(.hz-pinSec){padding-block:clamp(72px,11vw,132px)!important} .lp .hz-sec.hz-f2 .hz-in{max-width:none!important;padding:0!important} /* ---- The header --------------------------------------------------------- A translucent deep bar that blurs whatever is passing under it, carrying pill links and the same green CTA the hero uses. It stays deep over the pale bands too, which is what the artifact does: one bar, one colour, so the eye never has to re-find it. */ /* The bar that is actually painted is .lp__headIn, a white translucent pill sitting inside the header element. Colouring .lp__head alone leaves that pill on top of it, white, with white type on it: both are set here. */ /* One pane of glass, not two. Tinting .lp__head AND .lp__headIn at .72 each composites to about .92, which is why the bar read as solid rather than translucent: the artifact has a single pane at .72 over whatever is passing beneath it. The outer element is a transparent shell now; the inner one is the glass, and it is the only thing carrying a tint or a blur. */ /* Corrected: the glass goes on .lp__head, which spans the viewport. It was on .lp__headIn, which is the 1200px content measure, so the bar floated with 40px of page showing down either side instead of running edge to edge. The two are swapped, not doubled - the outer element is the pane now and the inner one is transparent, holding only the row to its measure - so it is still one tint and one blur, which is what keeps it translucent rather than solid. */ .lp .lp__head,.lp .lp__head.is-stuck{ background:rgba(11,31,25,.72)!important;background-image:none!important; -webkit-backdrop-filter:blur(10px) saturate(140%); backdrop-filter:blur(10px) saturate(140%); border:0!important;box-shadow:none!important; transition:transform .32s var(--a-ease)} .lp .lp__headIn,.lp .lp__head.is-stuck .lp__headIn{ background:transparent!important;background-image:none!important; -webkit-backdrop-filter:none!important;backdrop-filter:none!important; border:0!important;box-shadow:none!important} /* Sticky, and out of the way on the way down: the bar leaves on a downward scroll and returns on the first upward one, so a long read is uninterrupted and the nav is never more than a flick away. The script that sets .is-away holds it open above the fold and while the mobile menu is expanded, since hiding it then would take the close button off the screen with it. */ .lp .lp__head.is-away{transform:translateY(-100%)} @media (prefers-reduced-motion:reduce){ .lp .lp__head{transition:none!important} .lp .lp__head.is-away{transform:none!important} /* The bar never leaves under reduced motion, so the stage never needs to chase it, and a transition on a sticky offset is motion like any other. */ .lp .hz-pinStage{transition:none!important} } /* ---- Touch targets ------------------------------------------------------ The film's play/pause control is 38x38, and there are seven of them on this page. That clears the WCAG minimum but not the 44px a fingertip actually needs, and it is the one square control on the page, so there is no width to make up for the height. Raised to 44 where the pointer is coarse or the screen is narrow; a mouse keeps the smaller, quieter button. */ @media (hover:none),(pointer:coarse),(max-width:860px){ .lp .lp__vBtn{width:44px!important;height:44px!important; min-width:44px!important;min-height:44px!important} } /* ---- The feature cards' drawn panels ----------------------------------- One per card, between the claim and the lines beneath it, each showing the mechanic that card describes. Transform, opacity and width only, which keeps them cheap beside the seven films already on this page, and none of them loads anything. Under prefers-reduced-motion every panel holds its finished state instead of looping, so the drawing still reads and nothing moves. */ /* A dark instrument panel, not shapes floating on the card. The first version of this drew white sheets with a #cfdfd5 hairline onto a white card, which is as close to invisible as makes no difference: that is why it could not be seen. Each panel is its own deep ground now, with a faint mint grid over it, and everything inside is drawn in mint on top. It reads as a small screen set into the card, which is both the clearest way to show the mechanic and the right register for the product. */ /* No ground at all now, on the owner's call: the panel is transparent and the drawing carries itself. That is the harder way to do it and the reason the first attempt failed - white shapes with a pale hairline on a white card are invisible - so everything in these is drawn with a real forest stroke, solid darks, and a cast shadow under it. The depth comes from stacking and from the shadow, not from a box. */ /* overflow:hidden, and the svg constrained to the box. The previous pass set overflow:visible here and width:auto on the svg, and an svg with a viewBox and no intrinsic size does not resolve width:auto to its container: the drawings escaped the panel entirely, the figure's legs ran past the foot of the card and the written lines sat on top of the bullet text underneath. width and height at 100% with the default preserveAspectRatio scales each drawing to fit inside its box and centres it, which is what was wanted, and the clip is there so a mistake like that shows as a crop rather than as type with a green bar across it. Smaller too: 76 to 104 rather than 106 to 148, so the panel sits inside the card as a detail instead of competing with the heading above it. */ /* ---- Collapsing the tiles ---------------------------------------------- Each card measured 430px and only 370 of that was content: 266 of children, 61 of padding and 43 of gaps, leaving 60px of slack that space-between spread out between the three rows. Padding, gaps and the panel all come down so there is less slack to spread, and the stage comes down with them. The stage is the floor on how short this section can get. Below 58% of the viewport the driver in home6.js deliberately gives up the pin and hands back a swipe strip instead, so 62svh is as tight as this can go while still being the pinned gallery. Going under that is a different interaction, not a smaller one, and worth asking about rather than assuming. */ /* Walked back. The previous pass took padding to 26 and the gaps to 12 and the stage to 62svh, which is squeezed rather than tightened: the cards had no room inside them and the gallery sat hard against the bands above and below with only the colour change between them. These are the comfortable numbers, still well short of the 430px tiles this started from. */ .lp .hz-f2 .hp-fCard{padding:clamp(22px,2.4vw,32px)!important; gap:clamp(14px,1.9vh,22px)!important} /* No min-height. The stage held 594px against 564px of content, so it carried 30px of nothing and the gallery was not quite centred in its own band. With the floor removed the stage is exactly as tall as the heading and the row, and justify-content:center then has nothing left to distribute: content centred, no excess above or below it. This is still safely a pinned gallery. The driver gives up the pin when the stage is under 58% of the viewport, which is 522px at this height, and the content measures 564. The 30px came off the slack, not off the margin. */ /* The stage fills the screen, and that is not a luxury: it is the only thing that hides the runway. A sticky stage shorter than the viewport leaves the rest of the section showing underneath it as bare ground for the whole of the hold, which is the band of empty sage that keeps being reported under the cards. 68svh left some 320px of it on a 1200px window; min(72vh,620px), which is what this rule said for one round, left more. Full height, as .hz-who2 already does, and there is nothing underneath to see. The runway is then paid for in scrolling rather than in blank space, which is the whole idea of a pinned gallery. --hdr-now, not --hdr: the first is the live header height, which is what home6.css sticks this to, and the second is only ever the tall one. */ /* 62svh, not the full screen. A full-screen stage hid the runway completely but made a 979px tile out of 630px of content on a tall window, which is the sparseness that was reported. The driver will not pin a stage below 58% of the window, so 62 is about as short as this can be and still slide at all: it is the floor, chosen deliberately, and 4% of clearance over the guard rather than a round number. The tile comes down with it, and what runway is left is cut below instead. */ .lp .hp-fgal .hz-pinStage{min-height:62svh!important;padding-block:0!important} /* And the section's own band top and bottom, which was paying for a full-screen stage it no longer has. */ .lp .hz-sec.hz-f2{padding-block:clamp(28px,3.2vw,48px)!important} /* And the travel is shortened where it was longest. Four 440px cards against a 665px frame is 1067px of sideways travel at 705px wide, which is what the runway is a proportion of. Narrower cards below 900px put more of the row on screen at once and cut the travel by a quarter, which shortens the section and shows more at a glance. */ @media (max-width:900px){ .lp .hz-f2 .hp-fRow>*,.lp .hp-fgal .hp-fRow>*{flex-basis:min(74vw,340px)!important} } /* ---- "What changes": padding that was bigger than the content ---------- 132px top and bottom around 301px of content, so more than half that band was empty: 565px tall to say three things. Brought to a proportionate figure and the inner block centred in what is left. */ .lp .hz-sec.hz-gain{padding-block:clamp(44px,5.5vw,72px)!important; display:flex;flex-direction:column;justify-content:center} .lp .hp-fCard .hp-fArt{position:relative;display:grid;place-items:center; height:clamp(72px,7.8vw,98px);margin:6px 0 4px; background:none;border-radius:0;overflow:hidden;box-shadow:none} .lp .hp-fCard .hp-fArt svg{display:block;width:100%;height:100%; max-width:100%;max-height:100%;overflow:hidden} /* 01 - the plan writes itself, then a row is selected and its line writes back in white over the selection. The caret steps down the sheet with the line being written, which is what makes this read as writing rather than as three bars growing. width is a CSS geometry property on an SVG rect, so it can be animated directly; the per-line measure rides in --w. */ .lp .hp-fArt--write .hpLn{animation:hpWrite 7.2s cubic-bezier(.3,.8,.4,1) infinite} .lp .hp-fArt--write .hpLn--a{--w:68px} .lp .hp-fArt--write .hpLn--b{--w:74px;animation-delay:.8s} .lp .hp-fArt--write .hpLn--c{--w:52px;animation-delay:1.6s} .lp .hp-fArt--write .hpLn--d{--w:62px;animation-delay:3.3s} @keyframes hpWrite{0%{width:0}8%{width:var(--w)}88%{width:var(--w)}97%,100%{width:0}} .lp .hp-fArt--write .hpSel{animation:hpSelect 7.2s cubic-bezier(.3,.8,.4,1) infinite} @keyframes hpSelect{0%,38%{opacity:0}44%,88%{opacity:1}97%,100%{opacity:0}} .lp .hp-fArt--write .hpCaret{animation:hpCaret 7.2s steps(1,end) infinite} @keyframes hpCaret{0%{transform:translate(68px,0);opacity:1} 11%{transform:translate(74px,12px)}22%{transform:translate(52px,24px)} 46%{transform:translate(62px,39px)}88%,100%{opacity:0}} /* 02 - the limbs, set one at a time. Pale with a forest outline until set, then filled green: solid colour, because this is drawn on paper now, not lit. */ /* Not width:auto. That is the declaration that let this one escape its box. */ .lp .hp-fArt--limb svg{height:100%;width:100%} .lp .hp-fArt--limb .hpL{fill:#cfe0d6;stroke:#2c6b52;stroke-width:1.3; animation:hpLimb 4.4s linear infinite} .lp .hp-fArt--limb .hpL--b{animation-delay:.55s} .lp .hp-fArt--limb .hpL--c{animation-delay:1.1s} .lp .hp-fArt--limb .hpL--d{animation-delay:1.65s} @keyframes hpLimb{0%,8%{fill:#cfe0d6}22%,68%{fill:#3f9d6d}86%,100%{fill:#cfe0d6}} /* 03 - the envelope leaves the practice and arrives at the service. offset-path carries it along the very curve the dashes draw, and offset-rotate banks it into the turn, so it flies the arc instead of sliding flat across it. The slot in the far building lights as it lands. */ .lp .hp-fArt--send .hpEnv{offset-path:path('M56 40 Q92 8 128 42'); offset-rotate:auto; animation:hpFly 4.6s cubic-bezier(.45,.05,.3,1) infinite} @keyframes hpFly{0%,5%{offset-distance:0%;opacity:0} 12%{opacity:1}72%{offset-distance:100%;opacity:1} 80%,100%{offset-distance:100%;opacity:0}} .lp .hp-fArt--send .hpPath{animation:hpDash 4.6s linear infinite} @keyframes hpDash{0%{stroke-dashoffset:40;opacity:.3} 20%,72%{opacity:1}100%{stroke-dashoffset:0;opacity:.3}} .lp .hp-fArt--send .hpSlot{animation:hpSlot 4.6s cubic-bezier(.2,.7,.2,1) infinite} @keyframes hpSlot{0%,64%{fill:#cfe0d6}74%,88%{fill:#3f9d6d}100%{fill:#cfe0d6}} /* 04 - the envelope opens, the plan rises out of it, the receipt lands as a tick. The flap is drawn in its open position and folded SHUT by the animation, hinged on its own bottom edge, which is the fold line. transform-box:fill-box is what makes transform-origin mean something inside an SVG; without it the origin is the whole viewport's and the flap swings off the card. rotateX at 180deg reads as a fold even with no perspective set, because flat it is exactly scaleY(-1) about the hinge. The three times are one sequence, not three loops: shut, then open, then the plan, then the tick, on one 5.2s clock so they cannot drift apart. */ .lp .hp-fArt--read .hpFlap{transform-box:fill-box;transform-origin:center bottom; animation:hpOpen 5.2s cubic-bezier(.3,.8,.4,1) infinite} @keyframes hpOpen{0%,14%{transform:rotateX(180deg)} 34%,88%{transform:rotateX(0deg)}100%{transform:rotateX(180deg)}} .lp .hp-fArt--read .hpLtr{transform-box:fill-box;transform-origin:center bottom; animation:hpLift 5.2s cubic-bezier(.3,.8,.4,1) infinite} @keyframes hpLift{0%,28%{transform:translateY(20px);opacity:0} 48%,88%{transform:translateY(0);opacity:1}100%{transform:translateY(20px);opacity:0}} .lp .hp-fArt--read .hpTick{transform-box:fill-box;transform-origin:center; animation:hpRead 5.2s cubic-bezier(.2,1.5,.4,1) infinite} @keyframes hpRead{0%,58%{transform:scale(.3);opacity:0} 72%,90%{transform:scale(1);opacity:1}100%{transform:scale(.3);opacity:0}} /* The bars this replaced, kept only so the old keyframe name below still parses. */ .lp .hp-fArt--seen i::after{content:"";position:absolute;inset:0;width:0; border-radius:999px;background:#3f9d6d; animation:hpSeen 4s cubic-bezier(.2,.7,.2,1) infinite} .lp .hp-fArt--seen i:nth-child(2)::after{animation-delay:.46s} .lp .hp-fArt--seen i:nth-child(3)::after{animation-delay:.92s} @keyframes hpSeen{0%,6%{width:0}38%,76%{width:100%}95%,100%{width:0}} /* Every panel holds its finished state instead of looping: the plan written and a row selected, all four limbs set, the envelope arrived at the slot, every receipt back. The drawing still says what it says; nothing moves. */ @media (prefers-reduced-motion:reduce){ .lp .hp-fArt *,.lp .hp-fArt i::after{animation:none!important} .lp .hp-fArt--write .hpLn{width:var(--w)} .lp .hp-fArt--write .hpSel{opacity:1} .lp .hp-fArt--write .hpCaret{opacity:0} .lp .hp-fArt--limb .hpL{fill:#3f9d6d} .lp .hp-fArt--send .hpEnv{offset-distance:100%;opacity:1} .lp .hp-fArt--send .hpSlot{fill:#3f9d6d} /* The read card rests on its finished state: envelope open, plan up, tick shown. */ .lp .hp-fArt--read .hpFlap{transform:rotateX(0deg)} .lp .hp-fArt--read .hpLtr{transform:none;opacity:1} .lp .hp-fArt--read .hpTick{transform:none;opacity:1} } .lp .lp__headBar{display:none!important} /* The code link keeps its pale pill. On a deep bar that is the artifact's quiet second action, so only its ink has to turn over. */ .lp .lp__codeLink{background:var(--a-paper)!important;color:var(--a-ink)!important; border:0!important;border-radius:999px!important} .lp .lp__codeLink span,.lp .lp__codeLink svg{color:var(--a-ink)!important} .lp .lp__head .tp-logo,.lp .lp__mark{font-family:var(--a-disp)!important; font-weight:500!important;letter-spacing:.18em!important;text-transform:uppercase; color:#fff!important} .lp .lp__head .tp-logo i,.lp .lp__head .tp-logo b, .lp .lp__mark i,.lp .lp__mark b{color:#fff!important} /* Not font-size: the strapline is fitted by the theme's own measuring script into a fixed box, and a size forced here clips it mid word. Colour only. */ /* Lifted from onDarkMuted. Now that the bar is a single pane at .72 rather than two stacked to .92, the page shows through it, and over a pale band the glass settles at about rgb(79,94,89) where #9db5aa measured 3.13:1. Colour only: the size of this line is still the fitting script's to decide. */ .lp .lp__head .tp-logo small,.lp .lp__mark small{color:#cfded7!important} .lp .lp__navLink,.lp .lp__ddBtn{color:var(--a-onDark)!important;background:none!important; font-family:var(--body,"Open Sans"),sans-serif!important;font-weight:400!important; font-size:13.5px!important;letter-spacing:0!important;padding:9px 12px!important; border-radius:999px!important;border:0!important; transition:background .2s var(--a-ease),color .2s var(--a-ease)} .lp .lp__navLink:hover,.lp .lp__ddBtn:hover,.lp .lp__dd.is-open .lp__ddBtn{ background:rgba(255,255,255,.1)!important;color:#fff!important} .lp .lp__codeLink,.lp .lp__navCode{color:var(--a-onDark)!important} .lp .lp__burger i{background:#fff!important} /* ---- The hero ----------------------------------------------------------- The artifact's ground, to the value: a green light high on the right, a deeper pool at the bottom left, over a forest to ink raking gradient. */ .lp .hp-hero{ background: radial-gradient(120% 90% at 78% 8%,rgba(63,157,109,.34),transparent 58%), radial-gradient(90% 70% at 10% 96%,rgba(13,61,53,.9),transparent 60%), linear-gradient(170deg,#0b1f19,#0d3d35 58%,#09231d)!important; color:var(--a-onDark)!important;overflow:hidden} .lp .hp-hero__field{display:none!important} /* ---- The hero, two columns --------------------------------------------- Centred type with the film dropped underneath meant the two jobs the hero has - say what this is, and show it - happened one after the other, and the showing started below the fold. They sit side by side now: words left, the product on the right, which is the shape the artifact's hero uses and the shape of the reference that came with this request. No photograph. A stock or generated clinician would be a picture of nobody, on a product whose own audit was about an image that did not show what it claimed to. The screen is the subject, and it is the honest one. */ .lp .hp-hero .hp-hero__screen{ display:grid!important; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr)!important; gap:clamp(32px,4.5vw,64px)!important;align-items:center!important; max-width:1080px!important;margin-inline:auto!important; padding-inline:max(20px,env(safe-area-inset-left,0px))!important} .lp .hp-hero .hp-wrap{width:auto!important;max-width:none!important;padding:0!important} .lp .hp-hero .hp-hero__in{max-width:none!important;margin:0!important; text-align:left!important} .lp .hp-hero .hp-display{text-align:left!important;max-width:13ch!important; margin-inline:0!important} .lp.lp .hp-hero .hp-lead{text-align:left!important;max-width:40ch!important; margin-inline:0!important} .lp .hp-hero .hp-cta{justify-content:flex-start!important} .lp .hp-hero .hp-hero__stage{width:auto!important;max-width:none!important} .lp .hp-hero .hp-hero__stage .hz-screen, .lp .hp-hero .hp-hero__stage .lp__v{width:100%!important;max-width:none!important} /* The artifact spends its one real shadow on the thing in front. This is it. */ .lp .hp-hero .hp-hero__stage .lp__v--device{ box-shadow:0 40px 80px -36px rgba(0,0,0,.65)!important} @media (max-width:860px){ .lp .hp-hero .hp-hero__screen{grid-template-columns:1fr!important; gap:clamp(26px,6vw,40px)!important} } .lp .hp-hero .hp-display,.lp .hp-hero h1,.lp .hp-hero h2,.lp .hp-hero h3, .lp .hp-hero b,.lp .hp-hero strong{color:#fff!important} .lp .hp-hero .hp-lead,.lp .hp-hero p,.lp .hp-hero li,.lp .hp-hero summary{ color:var(--a-onDarkMuted)!important} .lp .hp-hero em,.lp .hp-hero .lp__hl,.lp .hp-hero .hp-eyebrow{ color:var(--a-green)!important} /* The quiet second action sits on the deep hero, so it is a white hairline pill with white type. It was forest green on near-black, which is an invisible button: a leaf-level contrast sweep missed it because its label shares the box with an svg, so the box was never measured as text. */ .lp .hp-hero .hp-link{background:transparent!important;color:#fff!important; border-color:rgba(255,255,255,.38)!important} .lp .hp-hero .hp-link:hover{background:rgba(255,255,255,.12)!important; border-color:rgba(255,255,255,.7)!important;color:#fff!important} .lp .hp-hero .hp-link svg{color:#fff!important;stroke:currentColor!important} /* The hero heading is the one the artifact sets lightest, and it was the only one left bold: a rule further up this file pins .hp-display at 700, and the type rule above is outranked by it. Matched on weight here and placed later, so the largest words on the page read the way the artifact draws them. */ .lp .hp-hero h1.hp-display,.lp .hp-hero .hp-display{font-weight:700!important} /* ---- The strip under the hero ------------------------------------------- The artifact states three facts on ink directly under the hero. This is that band, carrying the row of standards this site already names. */ .lp .hz-basis,.lp section.hz-basis{background:var(--a-ink)!important} .lp .hz-basis,.lp .hz-basis *{color:var(--a-onDarkMuted)!important} .lp .hz-basis b,.lp .hz-basisRow b{color:#fff!important} /* The basis band, redesigned. It was a label and a marquee with no air and no heading of its own; it is a band now, with an eyebrow, a heading that makes the claim, and the standards running underneath as the evidence for it. */ .lp .hz-basis{padding-block:clamp(44px,6vw,76px)!important;text-align:center} .lp .hz-basis .hz-basisKick{display:block!important;margin:0 0 12px!important; color:#a8ebcb!important} .lp .hz-basis h2.hz-basisLabel{ font-family:var(--a-disp)!important;font-weight:700!important; font-size:clamp(1.5rem,3vw,2.1rem)!important;line-height:1.14!important; letter-spacing:-.028em!important;text-transform:none!important; color:#fff!important;margin:0 0 clamp(22px,3.2vw,36px)!important} /* "Full screen" and the film captions, both out at the owner's request. The captions were already hidden visually; they leave the accessibility tree too now, which costs nothing here because every one of the seven films carries its own aria-label describing what it shows, so no description is lost with them. */ .lp .hz-grow,.lp .lp__vText{display:none!important} /* ---- The one action, repeated ------------------------------------------- One shape for every call to action: a green pill, Archivo, tracked and uppercase, that lifts a pixel under the cursor. A page with two button shapes has already told the reader that one of them matters less. */ .lp .lp__btn,.lp .hz-btn,.lp .hp-btn, .lp .hz-btn--solid,.lp .hp-btn--solid{ display:inline-flex!important;align-items:center;justify-content:center; min-height:46px;padding:0 26px!important;border:0!important; /* Deep green and white, not mid green and near-black. The pale pill measured 5:1 with an ink label, so it passed, but passing is not the same as reading well: dark type on a mid green goes muddy at 14px with .11em tracking, which is the one piece of type on the page that has to be read at a glance. White on #176B52 is 6.5:1 and reads clean. #3f9d6d stays as an accent elsewhere. */ border-radius:999px!important;background:#176B52!important; color:#fff!important;font-family:var(--a-disp)!important;font-weight:500!important; font-size:14px!important;letter-spacing:.11em!important;text-transform:uppercase; text-decoration:none;cursor:pointer; transition:transform .18s var(--a-ease),background .18s var(--a-ease)} .lp .lp__btn:hover,.lp .hz-btn:hover,.lp .hp-btn:hover{ background:#1a7a5c!important;color:#fff!important;transform:translateY(-1px)} /* The quiet second action. On a pale band it is a forest hairline; on the deep scenes and in the header it is a white one, because a forest outline on forest is not an outline. */ .lp .lp__btn--line,.lp .hz-btn--light,.lp .hp-btn--line{ background:transparent!important;color:var(--a-forest)!important; border:1px solid var(--a-line)!important} .lp .lp__btn--line:hover,.lp .hz-btn--light:hover,.lp .hp-btn--line:hover{ background:var(--a-mist)!important;border-color:var(--a-leaf)!important; transform:translateY(-1px)} .lp .lp__head .lp__btn--line, .lp .hp-hero .hz-btn--light,.lp .hp-hero .hp-btn--line, .lp .hz-join .hz-btn--light,.lp .hz-f2 .hz-btn--light{ color:#fff!important;border-color:rgba(255,255,255,.35)!important} .lp .lp__head .lp__btn--line:hover, .lp .hp-hero .hz-btn--light:hover,.lp .hz-join .hz-btn--light:hover{ background:rgba(255,255,255,.12)!important;border-color:rgba(255,255,255,.6)!important} /* ---- Surfaces ----------------------------------------------------------- A hairline and a radius, and no shadow. The artifact spends its one real shadow on the card in the hero, which is the only thing on the page that is meant to look like it is lying on top of something. */ .lp .hz-tCard,.lp .hz-step,.lp .hp-tile,.lp .hz-gainCard,.lp .hz-post, .lp .hz-libCard,.lp .hz-faq details,.lp .hz-tab,.lp .who3__link{ background:var(--a-paper)!important;border:1px solid var(--a-line)!important; border-radius:14px!important;box-shadow:none!important} /* On the deep feature band the card keeps its paper and takes the shadow, which is the artifact's strongest single move. */ .lp .hz-f2 .hp-fCard{background:var(--a-paper)!important; border:1px solid transparent!important;border-radius:14px!important; box-shadow:0 40px 80px -36px rgba(0,0,0,.55)!important} .lp .hz-f2 .hp-fCard h3,.lp .hz-f2 .hp-fCard b{color:var(--a-ink)!important} .lp .hz-f2 .hp-fCard li,.lp .hz-f2 .hp-fCard p{color:var(--a-muted)!important} .lp .hz-f2 .hp-fCard__name{color:var(--a-leaf)!important} /* Numerals, set in the display face and tabular so a column of them lines up. */ .lp .hz-gainNum,.lp .hp-fCard__n,.lp .hz-fanNum,.lp .hz-beltNum,.lp .hz-f2Num{ font-family:var(--a-disp)!important;font-weight:400!important; letter-spacing:-.01em!important;font-variant-numeric:tabular-nums} /* ---- The footer --------------------------------------------------------- The artifact ends quietly: an off-white band under a hairline, small muted type, nothing competing with the close above it. The three columns of links this site carries keep their places; only the ground and the ink change. No font-size on the lockup strapline, for the reason given in the header. */ .lp .lp__foot{background:var(--a-mist)!important; border-top:1px solid var(--a-line)!important;color:var(--a-muted)!important} .lp .lp__foot a,.lp .lp__foot p,.lp .lp__foot li,.lp .hf__line{ color:var(--a-muted)!important} .lp .lp__foot a:hover{color:var(--a-forest)!important} .lp .lp__foot b,.lp .hf__col b{color:var(--a-ink)!important; font-family:var(--a-disp)!important;font-weight:500!important; font-size:11px!important;letter-spacing:.14em!important;text-transform:uppercase} .lp .hf__logo,.lp .hf__logo i,.lp .hf__logo b{color:var(--a-ink)!important} .lp .hf__logo small{color:var(--a-muted)!important} .lp .hf__base p{color:var(--a-muted)!important;font-size:12px!important} /* footer.css doubles its own class (footer.hf.hf) to win on weight rather than position, and sets the small print and the lockup strapline to a pale mint. That was right on the deep ground and measures 1.23:1 on this one. Out-weighted here, colour only: the strapline's size stays the fitting script's to decide. */ html body footer.hf.hf .hf__base p{color:var(--a-muted)!important} html body footer.hf.hf .hf__logo small{color:var(--a-muted)!important} html body footer.hf.hf .hf__base{border-top:1px solid var(--a-line)!important} .lp .hf__go{color:var(--a-green)!important} /* footer.css paints the foot with two radial gradients over a deep ground, under the selector html body footer.lp__foot.hf, which outranks anything prefixed with .lp. It is matched here at the same weight and later in the load order so the artifact's quiet close wins. This also keeps the deep band above it as the last dark thing on the page, which is how the artifact ends: a dark close, then an off-white strip of small print under a hairline. */ html body footer.lp__foot.hf{ background:var(--a-mist)!important;color:var(--a-muted)!important; border-top:1px solid var(--a-line)!important} html body footer.lp__foot.hf::before{display:none!important} html body footer.lp__foot.hf a, html body footer.lp__foot.hf p, html body footer.lp__foot.hf li, html body footer.lp__foot.hf .hf__line{color:var(--a-muted)!important} html body footer.lp__foot.hf a:hover{color:var(--a-forest)!important} html body footer.lp__foot.hf b, html body footer.lp__foot.hf .hf__logo, html body footer.lp__foot.hf .hf__logo i, html body footer.lp__foot.hf .hf__logo b{color:var(--a-ink)!important} html body footer.lp__foot.hf .hf__logo small{color:var(--a-muted)!important} /* The footer's "Get started" is a call to action, so it takes the same pill as every other one on the page. As plain green type on the pale ground it read 3.36:1; as the pill it is near-black on green at 5:1, and it matches. */ html body footer.lp__foot.hf .hf__go{ display:inline-flex!important;align-items:center;gap:8px; min-height:46px!important;padding:0 26px!important; background:#176B52!important;color:#fff!important; border:0!important;border-radius:999px!important; font-family:"Archivo","Helvetica Neue",Arial,sans-serif!important; font-weight:500!important;font-size:14px!important; letter-spacing:.11em!important;text-transform:uppercase!important} html body footer.lp__foot.hf .hf__go:hover{background:#1a7a5c!important;color:#fff!important} html body footer.lp__foot.hf .hf__go svg{color:#fff!important} /* ---- Focus -------------------------------------------------------------- Gold, offset, on everything that takes a key. It is the one colour on the page used for nothing else, which is what makes it legible as focus. */ .lp a:focus-visible,.lp button:focus-visible,.lp summary:focus-visible, .lp input:focus-visible,.lp select:focus-visible{ outline:3px solid var(--a-gold)!important;outline-offset:3px!important} /* ---- Readability on the deep grounds ------------------------------------ The green bands were the one place a contrast sweep could not see. An element standing on a gradient has no background-colour to measure, so the usual walk up the tree returns nothing and the text is skipped: every deep band on this page was being reported clean because it was never read at all. Resolved against the gradient's own colour stops instead, and against the lit spot in the hero in particular, where rgba(63,157,109,.34) lifts the ground to rgb(30,94,72), the mid green fails badly: brand-gradient heading 1.74:1 mid-green eyebrow 2.27:1 onDarkMuted lede 3.52:1 device caption 1.06:1 So: mint is the accent on a deep ground, never the mid green, which is a text colour for pale bands only. The lede is lifted one step, and the captions take light type because the panel under them is dark on every band. */ .lp .hp-hero em,.lp .hp-hero .lp__hl, .lp .hp-hero .hp-display em,.lp .hp-hero .hp-display .lp__hl, .lp .hp-hero .hp-eyebrow, .lp .hz-join .hp-eyebrow,.lp .hz-join .hz-chip, .lp .hz-sec.hz-f2 .hp-eyebrow,.lp .hz-sec.hz-f2 .hz-chip{ color:#a8ebcb!important;-webkit-text-fill-color:#a8ebcb!important; background:none!important;background-image:none!important; -webkit-background-clip:border-box!important;background-clip:border-box!important} .lp.lp .hp-hero .hp-lead,.lp.lp .hp-hero .hz-sub{color:#c5d6ce!important} /* The second line of the hero heading is not an em and has no class. It is a bare span painted by a linear-gradient through background-clip:text, with its own fill set transparent. The gradient's first stop is #0d3d35, which is the hero's own ground, so the line starts invisible and only resolves as it runs to the right. A transparent fill also reads as "no colour" to a contrast sweep, so it was skipped rather than failed: that is how this survived two passes. Painted solid instead, white for the first line and mint for the second, which keeps the two-tone heading without the vanishing act. */ .lp .hp-hero .hp-display .hp-mask>span{ background-image:none!important; -webkit-background-clip:border-box!important;background-clip:border-box!important; color:#fff!important;-webkit-text-fill-color:#fff!important} .lp .hp-hero .hp-display .hp-mask:last-of-type>span{ color:#a8ebcb!important;-webkit-text-fill-color:#a8ebcb!important} /* The film captions go. The artifact carries none, and "Read what this guide shows" followed by a restatement of the film was the page explaining its own illustration twice. Hidden visually, not removed. Each one is the text alternative for a silent film, so display:none would take it out of the accessibility tree along with the screen: this keeps it there for anyone reading the page as text, and for anyone who cannot see the film at all. It also settles the overlap with the absolutely positioned "Full screen" control, since nothing is in its lane any more, so the film no longer needs the bottom padding that held it off. */ .lp .lp__vText{position:absolute!important;width:1px!important;height:1px!important; padding:0!important;margin:-1px!important;overflow:hidden!important; clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important; white-space:nowrap!important;border:0!important} /* ---- How it works, in the artifact's band grammar ----------------------- A hairline card per step on the pale band, with real air inside it, the step tag set as an eyebrow so it reads as a label rather than a second heading, and the bullets given a quiet green dot instead of a list marker. Nothing here touches .hz-steps itself, or the card's own columns. Those cards stack under a scroll driver in home6.js that owns their transform and sets it a frame at a time, so a layout change or a transition on transform here would fight the driver rather than smooth it. The smoothness in this section comes from air, hairlines and one consistent type scale, which is where it came from in the artifact too. */ .lp .hz-how .hz-step{ background:var(--a-paper)!important;border:1px solid var(--a-line)!important; border-radius:18px!important;box-shadow:none!important; padding:clamp(22px,2.6vw,38px)!important} .lp .hz-how .hz-stepTag{ font-family:var(--a-disp)!important;font-size:11.5px!important;font-weight:500!important; letter-spacing:.24em!important;text-transform:uppercase!important; color:var(--a-leaf)!important;background:none!important; border:0!important;padding:0!important} .lp .hz-how .hz-stepText h3{margin:12px 0 0!important} .lp .hz-how .hz-stepText ul{margin:16px 0 0!important;padding:0!important; list-style:none!important;display:grid;gap:10px} .lp .hz-how .hz-stepText li{position:relative;padding-left:20px!important; color:var(--a-muted)!important} .lp .hz-how .hz-stepText li::before{content:"";position:absolute;left:0;top:.6em; width:7px;height:7px;border-radius:50%;background:var(--a-green)} /* The rail is a scroll-progress indicator. The track is meant to be quiet, but the fill and the dot are the parts that move and have to stay visible: greying all three, as an earlier pass here did, left the progress invisible against its own track. Track quiet, fill and marker green. */ .lp .hz-how .hz-rail{background:rgba(13,61,53,.12)!important} .lp .hz-how .hz-rail i{background:var(--a-green)!important} .lp .hz-how .hz-rail b{background:var(--a-green)!important; box-shadow:0 0 0 5px rgba(63,157,109,.18),0 0 18px rgba(63,157,109,.5)!important} /* The rail only exists at 1200px and up, where home.css also gives .hz-steps a padding-left of 44px to clear it. The head takes the same 44px at the same width, so the heading sits over the steps it introduces rather than out over the rail. Below 1200px the rail is display:none and the two already share an edge, which is why this is not a flat indent. */ /* ---- How it works, redesigned ------------------------------------------ It was three cards pinned with position:sticky on a staggered top, so each parked under the header while the next slid over it. A good effect, but it charged three screens of scrolling for three steps and six lines of text: the band measured 2060px, the tallest thing on the page after the features. It is the artifact's split band now, three times, alternating side the way the bands above and below it do. The sticky goes, so the section is as tall as its content and no taller. The card chrome goes with it, because in the artifact a split band is text against a picture, not a box around both. And the rail goes too: a progress line down the side only means something while something is being pinned, and the step numbers already carry the sequence. A note I got wrong earlier in this file said home6.js owned these cards' transform, and that restyling the layout would fight it. It does not. The stacking was the CSS sticky in home.css, and the script only computes the rail's progress, which is why this restructure is safe to make. */ .lp .hz-how .hz-steps{padding-left:0!important; gap:clamp(36px,5vw,72px)!important} /* min-height:0 is the one that matters. Each step carried a min-height so that a pinned card filled the screen it was parked on; with nothing pinned any more that became dead air, and it was most of the problem: the steps measured 600px each against 291px of content, which is 900px of nothing across the three. */ .lp .hz-how .hz-step{position:static!important;top:auto!important; min-height:0!important;height:auto!important; background:transparent!important;border:0!important;box-shadow:none!important; border-radius:0!important;padding:0!important; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)!important; gap:clamp(28px,5vw,72px)!important;align-items:center!important} /* nth-of-type, not nth-child: the rail is the first child of .hz-steps, so counting children would offset every step by one. Counting articles gives the middle step, and the band alternates. */ .lp .hz-how .hz-step:nth-of-type(even) .hz-stepMedia{order:-1} .lp .hz-how .hz-rail{display:none!important} @media (max-width:860px){ .lp .hz-how .hz-step{grid-template-columns:1fr!important; gap:clamp(18px,4vw,28px)!important} .lp .hz-how .hz-step:nth-of-type(even) .hz-stepMedia{order:0} .lp .hz-how .hz-steps{gap:clamp(40px,9vw,64px)!important} } /* ---- The care team line ------------------------------------------------- Nineteen words on their own band, with no heading, no edge and nothing to hold them: it read as a sentence that had fallen out of the section above. It is a deliberate aside now, centred between two hairlines, which is what it is: not a feature, a note to a different reader. The band stays on paper rather than taking a tint, because the bands either side of it are already mist and three in a row would flatten the rhythm. */ .lp .hz-serve{padding-block:clamp(32px,4vw,52px)!important} .lp .hz-serve .hz-in{border-top:1px solid var(--a-line); border-bottom:1px solid var(--a-line); padding-block:clamp(22px,2.8vw,34px)!important} .lp .hz-serve .hz-serve__alt{max-width:54ch;margin-inline:auto!important; text-align:center!important;color:var(--a-muted)!important} .lp .hz-serve .hz-serve__alt a{color:var(--a-forest)!important; font-weight:600!important;text-decoration:underline!important; text-underline-offset:3px!important} .lp .hz-serve .hz-serve__alt a:hover{color:var(--a-leaf)!important} /* ---- The closing band --------------------------------------------------- It was left aligned, which is the split-band rule applied to a band that is not split: a heading, one line and one button, with nothing beside them and two thirds of the measure empty to their right. The artifact closes centred, so this does. The rule above that left-aligns every .hz-head--split is out-specified here rather than edited, because every other split head on the page still wants it. */ .lp .hz-join .hz-head,.lp .hz-join .hz-head--split, .lp .hz-join .hz-head--split>div, .lp .hz-join .hz-h2,.lp .hz-join .hz-sub, .lp .hz-join .hp-eyebrow,.lp .hz-join .hz-chip{text-align:center!important} .lp .hz-join .hz-sub{margin-inline:auto!important;max-width:54ch} .lp .hz-join .hz-ctas{justify-content:center!important} @media (max-width:860px){ .lp .hz-sec:not(.hz-pinSec){padding-block:clamp(56px,9vw,88px)!important} .lp .hz-sub,.lp .hp-lead{max-width:none} } /* =========================================================================== LIGHT GROUND --------------------------------------------------------------------------- Asked for on 2026-10-17: no dark green on /welcome/. White and light green only, and a header light enough that the logo reads as the mark it is rather than as a knockout on a dark bar. This block sits last and inverts the dark-ground treatments above it instead of editing each one in place. That is deliberate: every deep band, and every piece of type that was turned over to sit on one, is undone from a single place, so the deep version is one deletion away if it is ever wanted back. =========================================================================== */ /* ---- The header, light, so the mark is the mark ---- */ .lp .lp__head,.lp .lp__head.is-stuck{ background:rgba(255,255,255,.88)!important; -webkit-backdrop-filter:blur(12px) saturate(150%); backdrop-filter:blur(12px) saturate(150%); border-bottom:1px solid var(--a-line)!important} .lp .lp__headIn,.lp .lp__head.is-stuck .lp__headIn{ background:transparent!important} .lp .lp__head .tp-logo,.lp .lp__mark, .lp .lp__head .tp-logo i,.lp .lp__head .tp-logo b, .lp .lp__mark i,.lp .lp__mark b{color:var(--a-ink)!important} /* Colour only on the strapline: it is fitted by the measuring script. */ .lp .lp__head .tp-logo small,.lp .lp__mark small{color:var(--a-leaf)!important} .lp .lp__navLink,.lp .lp__ddBtn{color:var(--a-ink)!important} .lp .lp__navLink:hover,.lp .lp__ddBtn:hover, .lp .lp__dd.is-open .lp__ddBtn{background:var(--a-mist)!important; color:var(--a-forest)!important} .lp .lp__burger i{background:var(--a-ink)!important} .lp .lp__codeLink,.lp .lp__navCode{color:var(--a-ink)!important; background:var(--a-mist)!important} .lp .lp__codeLink span,.lp .lp__codeLink svg{color:var(--a-ink)!important} .lp .lp__head .lp__btn--line{color:var(--a-forest)!important; border-color:var(--a-line)!important} .lp .lp__head .lp__btn--line:hover{background:var(--a-mist)!important; border-color:var(--a-leaf)!important} /* ---- The hero, light green ---- */ .lp .hp-hero{ background: /* .14, not .20: at .20 this radial pulled the sage down to rgb(189,218,200) under the heading, which took the accent to 4.20:1 and the lede to 4.34. */ radial-gradient(118% 88% at 78% 6%,rgba(63,157,109,.14),transparent 58%), radial-gradient(92% 70% at 6% 98%,rgba(44,107,82,.11),transparent 62%), linear-gradient(170deg,#f7fbf9,#dce9df 60%,#eef4f0)!important; color:var(--a-ink)!important} .lp .hp-hero .hp-display,.lp .hp-hero h1,.lp .hp-hero h2,.lp .hp-hero h3, .lp .hp-hero b,.lp .hp-hero strong{color:var(--a-ink)!important} .lp .hp-hero .hp-display .hp-mask>span{color:var(--a-ink)!important; -webkit-text-fill-color:var(--a-ink)!important} /* Forest, not leaf, and a darker lede than the page default. On white the leaf green is comfortable, but the hero is the one light band with a tint under it, and on that tint leaf measured 4.20:1 and --a-muted 4.34. Forest is 8:1 there and still reads as the green accent; #45574f is 5.1:1 and still clearly quieter than the heading. The hero needs its own two values for that reason. */ .lp .hp-hero .hp-display .hp-mask:last-of-type>span{ color:var(--a-forest)!important;-webkit-text-fill-color:var(--a-forest)!important} .lp.lp .hp-hero .hp-lead,.lp .hp-hero p,.lp .hp-hero li, .lp .hp-hero summary{color:#45574f!important} .lp .hp-hero em,.lp .hp-hero .lp__hl,.lp .hp-hero .hp-eyebrow{ color:var(--a-forest)!important;-webkit-text-fill-color:var(--a-forest)!important} /* ---- The second action gets a fill of its own ------------------------- "See how it works" and "Got a code?" were an outline and a flat tint, which worked while the grounds behind them were deep. On a white and light green page they stopped reading as controls at all: a transparent pill with a #cfdfd5 edge on light green is very close to a ghost. The primary stays the solid green pill. The secondary is solid WHITE with a forest edge and a soft lift, which is distinct from the ground and from the primary without competing with it, and keeps the hierarchy the right way round. In the header, where the ground is already white, a white fill would vanish, so the code link takes the sage fill and gains the edge instead. */ .lp .hp-hero .hp-link, .lp .hz-btn--light,.lp .hp-btn--line{ background:var(--a-paper)!important; border:1px solid var(--a-leaf)!important; color:var(--a-forest)!important; box-shadow:0 10px 24px -20px rgba(11,31,26,.5)!important} .lp .hp-hero .hp-link:hover, .lp .hz-btn--light:hover,.lp .hp-btn--line:hover{ background:var(--a-mist)!important;border-color:var(--a-forest)!important; color:var(--a-forest)!important} .lp .hp-hero .hp-link svg{color:var(--a-forest)!important} /* The header sits on white, so its two secondaries take the tint, not a fill. */ .lp .lp__head .lp__btn--line{background:var(--a-mist)!important; border:1px solid var(--a-leaf)!important;color:var(--a-forest)!important} .lp .lp__head .lp__btn--line:hover{background:#cfe0d6!important; border-color:var(--a-forest)!important} .lp .lp__codeLink,.lp .lp__navCode{ background:var(--a-mist)!important;color:var(--a-ink)!important; border:1px solid var(--a-leaf)!important;border-radius:999px!important} .lp .lp__codeLink:hover,.lp .lp__navCode:hover{background:#cfe0d6!important; border-color:var(--a-forest)!important;color:var(--a-ink)!important} /* ---- The primary action, richer --------------------------------------- #176B52 sat in the same register as the page's own sage and leaf, so against a pale green ground it read flat rather than as the one thing to press. This is deeper and more saturated, with a slight vertical gradient and a cast shadow so the button has a body to it on an otherwise flat page. Darker rather than brighter, and that is the deciding reason: white on a more vivid green drops below AA, where white on this is 8.5:1 at the foot of the gradient and 6.0 at the head, against 6.44 flat before. Better looking and better contrast at once, which a brighter green could not have given. */ .lp .lp__btn:not(.lp__btn--line):not(.lp__btn--ghost), .lp .hz-btn:not(.hz-btn--light),.lp .hp-btn:not(.hp-btn--line), .lp .hz-btn--solid,.lp .hp-btn--solid, .lp .hp-hero .hp-btn--solid, html body footer.lp__foot.hf .hf__go{ background:linear-gradient(180deg,#17714F,#0F5740)!important; border-color:#0F5740!important;color:#fff!important; box-shadow:0 10px 24px -14px rgba(15,87,64,.55)!important} .lp .lp__btn:not(.lp__btn--line):not(.lp__btn--ghost):hover, .lp .hz-btn:not(.hz-btn--light):hover,.lp .hp-btn:not(.hp-btn--line):hover, .lp .hp-hero .hp-btn--solid:hover, html body footer.lp__foot.hf .hf__go:hover{ background:linear-gradient(180deg,#1d835c,#13674b)!important; border-color:#13674b!important;color:#fff!important; box-shadow:0 14px 28px -14px rgba(15,87,64,.6)!important} /* ---- The hero film, larger on a desktop -------------------------------- The columns were 1.02 to .98, which gave the words slightly more than the product. On a wide screen the film is the thing doing the explaining, so the ratio turns over and the hero takes a little more measure than the 1080 the bands use. Desktop only: below 861px the hero is already one column and the film is full width there. */ @media (min-width:861px){ .lp .hp-hero .hp-hero__screen{ grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr)!important; max-width:1160px!important} } /* ---- The strip under the hero, white ---- */ .lp .hz-basis,.lp section.hz-basis{background:var(--a-paper)!important} .lp .hz-basis,.lp .hz-basis *{color:var(--a-muted)!important} .lp .hz-basis b,.lp .hz-basisRow b{color:var(--a-ink)!important} .lp .hz-basis .hz-basisKick{color:var(--a-leaf)!important} .lp .hz-basis h2.hz-basisLabel{color:var(--a-ink)!important} /* ---- The standards strip, with a rule between each --------------------- Eight standards ran as one continuous line with nothing between them, so "LOLER 1998 PUWER 1998 HSE guidance" read as a single phrase rather than as three separate documents. Each sits between hairlines now, with a little more air either side of it and the type set a touch smaller and steadier. The row is masked at both ends so it reads as deliberately continuous rather than as a line of text clipped by the viewport. */ .lp .hz-basisRow{ -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)} .lp .hz-basisTrack span{position:relative; padding-inline:clamp(16px,2.6vw,34px); font-size:clamp(12.5px,1.15vw,14px)!important; letter-spacing:.01em;white-space:nowrap} /* The divider belongs to the item, so the loop joins up without a double rule or a missing one where the duplicated half of the marquee begins. */ .lp .hz-basisTrack span::after{content:"";position:absolute;right:0;top:50%; width:1px;height:1.1em;margin-top:-0.55em;background:var(--a-line)} /* ---- The deep scenes, turned back over ---- */ .lp .hz-who2 h2,.lp .hz-who2 h3,.lp .hz-who2 b, .lp .hz-join h2,.lp .hz-join h3,.lp .hz-join b, .lp .hz-who2 .hz-h2,.lp .hz-join .hz-h2, .lp .hz-sec.hz-f2 .hz-head h2,.lp .hz-sec.hz-f2 .hz-head .hz-h2{ color:var(--a-ink)!important} .lp .hz-who2 p,.lp .hz-who2 li,.lp .hz-join p, .lp .hz-who2 .hz-sub,.lp .hz-join .hz-sub, .lp .hz-sec.hz-f2 .hz-head p,.lp .hz-sec.hz-f2 .hz-head .hz-sub{ color:var(--a-muted)!important} .lp .hz-who2 em,.lp .hz-join em, .lp .hz-who2 .hp-eyebrow,.lp .hz-join .hp-eyebrow,.lp .hz-join .hz-chip, .lp .hz-sec.hz-f2 .hp-eyebrow,.lp .hz-sec.hz-f2 .hz-chip, .lp .hz-sec.hz-f2 .hz-head em{color:var(--a-leaf)!important} /* The closing band's action is THE action of the page, not a second one. The rule that used to live here set .hz-join .hz-btn--light transparent, which was right for the deep ground it sat on, and at .lp .hz-join (0,3,0) it then beat the white fill the secondaries were given later. The result was forest type on nothing at all: not a button, and unreadable as one. It takes the green pill, like every other primary on the page. */ .lp .hz-join .hz-btn,.lp .hz-join .hz-btn--light, .lp .hz-join .hz-btn--solid,.lp .hz-join .hp-btn{ background:linear-gradient(180deg,#17714F,#0F5740)!important; border:1px solid #0F5740!important;color:#fff!important; box-shadow:0 10px 24px -14px rgba(15,87,64,.55)!important} .lp .hz-join .hz-btn:hover,.lp .hz-join .hp-btn:hover{ background:linear-gradient(180deg,#1d835c,#13674b)!important; border-color:#13674b!important;color:#fff!important} /* The other two bands keep a true secondary, which on a pale ground is the white fill from the block further down, so they only need their ink set. */ .lp .hz-f2 .hz-btn--light,.lp .hz-who2 .hz-btn--light{ color:var(--a-forest)!important} .lp .hz-who2 .hp-stageNum i{color:var(--a-muted)!important} /* The cards were white on forest, which is edge enough on its own. White on sage is a far quieter boundary, so they take their hairline back. */ .lp .hz-f2 .hp-fCard{border:1px solid var(--a-line)!important; box-shadow:0 18px 40px -34px rgba(11,31,26,.42)!important} /* ---- The band rhythm, all light ---- hero light green, then white and sage alternating: basis white, how sage, library white, features sage, outcomes white, who white, cost sage, start white. who is a thin aside between two whites, which is why it does not break the alternation to sit next to one. */ .lp .hz-sec.hz-how,.lp .hz-sec.hz-f2,.lp .hz-sec.hz-cost{ background:var(--a-mist)!important} .lp .hz-sec.hz-lib2,.lp .hz-sec.hz-gain, .lp .hz-sec.hz-serve,.lp .hz-sec.hz-join, .lp .hz-sec.hz-who2{background:var(--a-paper)!important} /* ==== 17 October 2026 ===================================================== */ /* ---- The features gallery stops holding the page ---- This section has been asked to be shorter four times, and each time the answer was the padding or the stage, which is not where the height was. It was the pin: a sticky stage has to be scrolled THROUGH, so the section carries a runway underneath it as tall as the sideways travel. At 1280 that was 1032px and looked deliberate; at 705 the cards are min(86vw,440px) so the travel, and therefore the runway, grows as the window narrows, and it reached 1201px with nearly 450 of them empty. There is no padding to remove there. Four cards do not need a gallery. Two by two reads in one go, carries no runway at all, and the heading is at the top of the section because nothing is being held. The row is dropped from home6.js's ROWS so no pin is built; these rules also neutralise the pin's own classes, in case a cached copy of the script still adds them. */ /* These two rules used to switch the pin off from the CSS side as well. They are gone: the slide is wanted back, so the stage must be allowed to stick and the section must be allowed to take the --pinH the driver gives it. */ /* Four across, in one row, which is the shape that actually saves height. Two by two was tried first and was worse: at 1280 the cards came out 629px wide and still 370 tall, so two rows made 1185px, more than the pin had cost. One row of four is 4 x 300 and one card deep. The width is the page container, not 100%: the row carried its horizontal inset as scroll-padding for the strip, and zeroing that padding for the grid ran the cards out to both edges, past the heading above them. */ /* The grid that replaced the slide is gone with it. The row is a flex strip again, which is what the driver scrolls sideways. */ /* ---- The footer mark, whole ---- The white tile under the leaf was for the deep green footer: the teal figure was too dark to sit straight on it, so the mark kept its colours on a light patch. The footer is pale now, so the patch is a white box on near-white, and the mark can sit on the ground itself. */ footer.hf .hf__logo img,.lp__foot .hf__logo img, html body footer.lp__foot.hf .hf__logo img{ filter:none!important;background:none!important; padding:0!important;border-radius:0!important; width:35px!important;height:auto!important} /* The footer mark IS the header mark, 17 October 2026. The first pass at this invented a second lockup: Open Sans at 19 with the name semibold and "PLAN" set uppercase on 2.66px of tracking, over an Open Sans strapline at 9.5 on .17em. The header is Archivo at 23 with the name at 300 and Plan at 700, no space between them, over an Archivo strapline the fitting script sizes to the width of the name. Those are not the same logo. The markup is now the header's, character for character, and every property below is the header's computed value, pinned here rather than inherited, because the footer's own older rules (a 17px name, a 26px image, display:none on the strapline) sit at .lp__foot .hf__logo and would otherwise win. The size is NOT set on small. The script fits it to the name's box and writes the result inline; the header lands on 7.71px that way. Forcing a number here is what clipped it to "Optimised moving and han" the last time. */ html body footer.lp__foot.hf .hf__logo{ display:inline-flex!important;align-items:center!important;gap:8px!important} html body footer.lp__foot.hf .hf__logo>span{ display:grid!important;line-height:1.08!important;min-width:0} html body footer.lp__foot.hf .hf__logo i{ font-family:var(--a-disp),"Archivo",sans-serif!important; font-size:23px!important;font-weight:300!important;font-style:normal!important; letter-spacing:-.015em!important;text-transform:none!important; line-height:1.08!important;display:block!important} html body footer.lp__foot.hf .hf__logo b{ font-family:var(--a-disp),"Archivo",sans-serif!important; font-size:23px!important;font-weight:700!important;font-style:normal!important; letter-spacing:-.015em!important;text-transform:none!important; display:inline!important} html body footer.lp__foot.hf .hf__logo small{ display:block!important;font-family:var(--a-disp),"Archivo",sans-serif!important; font-weight:600!important;font-style:normal!important; text-transform:uppercase!important;white-space:nowrap; color:var(--a-leaf)!important;opacity:1!important} /* ---- The footer link columns, closer together ---- Sixteen pixel links on a thirteen pixel row gap, three columns of eight, is a footer with more air in it than words. The links are a directory: they want to read as a list you scan, not as eight separate invitations. */ html body footer.hf .hf__in{gap:clamp(22px,3vw,46px)!important; padding-bottom:clamp(28px,3.6vw,44px)!important} html body footer.hf .hf__col,html body footer.hf .hf__col nav{gap:6px!important} html body footer.hf .hf__col b,html body footer.hf .hf__soc b{ margin:0 0 9px!important;font-size:11px!important;font-weight:700!important; letter-spacing:.13em!important;text-transform:uppercase!important} html body footer.hf .hf__col a{font-size:13.5px!important;line-height:1.5!important; min-height:0!important;padding:1px 0!important;opacity:1!important} /* The strapline sits between a 23px name and a 7.4px mark strapline, and at 15px it was the loudest thing in the column, which made three competing sizes in one lockup. It drops to the size of the links beside it, so the brand column reads name, mark strapline, then one sentence at the weight of everything else. */ html body footer.hf .hf__line{margin:16px 0 18px!important; font-size:13.5px!important;line-height:1.55!important; max-width:30ch!important;color:var(--a-muted)!important} html body footer.hf a.hf__go{min-height:46px!important;padding:0 22px!important; font-size:15px!important; background:linear-gradient(180deg,#17714F,#0F5740)!important;color:#fff!important; box-shadow:0 10px 24px -14px rgba(15,87,64,.55)!important} html body footer.hf a.hf__go:hover{ background:linear-gradient(180deg,#1d835c,#13674b)!important;color:#fff!important} html body footer.hf .hf__soc{margin-top:16px!important;gap:8px!important} html body footer.hf .hf__socRow a{width:36px!important;height:36px!important; border-radius:10px!important} html body footer.hf .hf__socRow svg{width:17px!important;height:17px!important} /* ---- The legal lines, as lines ---- One sentence carrying the trading name, the registration and a seven part address, joined by middots, is unreadable at thirteen pixels: the company number is the thing people come looking for and it was buried mid-run. Three paragraphs, the first a shade stronger. */ html body footer.hf .hf__base p{padding:0!important;margin:0 auto!important; font-size:12.5px!important;line-height:1.65!important; text-align:center!important;text-wrap:balance} html body footer.hf .hf__base{padding:14px 0 22px!important} html body footer.hf .hf__base .hf__copy{font-weight:600!important; color:var(--a-ink)!important;padding-bottom:3px!important} html body footer.hf .hf__base .hf__reg{color:var(--a-muted)!important} /* ---- One green on every call to action ---- The closing band, the footer and the landing primaries are #17714F to #0F5740. Anything else green with white type on it joins them; see plans.css for the signed-in side, which was a flatter, darker forest. */ .lp .lp__btn:not(.lp__btn--line):not(.lp__btn--ghost), .lp .lp__navActs .lp__btn:not(.lp__btn--line){ background:linear-gradient(180deg,#17714F,#0F5740)!important; border-color:#0F5740!important;color:#fff!important; box-shadow:0 10px 24px -14px rgba(15,87,64,.55)!important} .lp .lp__btn:not(.lp__btn--line):not(.lp__btn--ghost):hover{ background:linear-gradient(180deg,#1d835c,#13674b)!important; border-color:#13674b!important;color:#fff!important} /* A full height stage makes a tall card, and a tall card on space-between opens a hole in the middle of itself. The artwork takes the slack instead: it keeps its old height as a floor and grows into whatever is left, with the drawing centred in it, so the card fills out rather than spreading apart. */ .lp .hp-fCard .hp-fArt{height:auto!important; min-height:clamp(76px,8.4vw,104px)!important; /* Raising this further does not help: the drawings are 150x104 viewBoxes that fit to width, so a taller box just letterboxes them in more empty frame. */ max-height:clamp(104px,18vh,190px)!important; flex:1 1 auto!important;align-self:stretch!important} /* Letting the art take ALL the slack was the first try and it was worse: on a 1200px window the stage is 1164 tall, which made a 979px card carrying a 697px drawing. The art is capped, and the card is capped too and centred in the row rather than stretched down it. The stage still fills the screen, so the runway stays hidden; what is left over now sits as even margin above and below the cards instead of as a band under them, which is the difference between padding and a hole. */ /* Centring the cards in the row, and capping their height, was two rounds of the wrong idea: align-items:center takes them off stretch so they size to content, a max-height then has nothing to cap, and height:100% does not resolve against a row whose own height comes from flex-grow. The result each time was a 493px card with 280px of bare sage above it, which is the hole moved rather than closed. They stretch, as hp26 intended ("the card is as tall as the row"). The card fills the stage, so there is no bare ground anywhere; the slack that a tall window leaves is inside a white card, where it reads as a generous card rather than as a gap in the page. Only the drawing is capped, because that was the thing that got silly. */ /* 640 was too low a ceiling: on a 1200px window it left 250px of bare sage between the heading and the cards, which is the same hole moved upwards. High enough that the cards take nearly all the row, and what remains divides evenly above and below as margin. On a normal window the cap never binds and they simply fill it. */ /* height:100% is the half that makes the cap mean anything: align-items:center takes the cards off stretch, so they size to content and a max-height has nothing to cap. Given a height to resolve against the row, they fill it up to the ceiling and centre in what is left. */ /* ---- The screen guide transcript, on a ground it can be read on ---------- 18 October 2026. The transcript under each screen guide is a details element carrying forest green on a dark screen graphic: the summary measured 1.06:1 and the paragraph 1.31:1, which is not low contrast, it is invisible. It inherited the page's ink when the bands went light and nothing told it that the thing behind it had stayed dark. It gets its own ground rather than only its own ink, because what is behind it is a picture: a frame can be light where the next is dark, and ink alone would be legible on one and gone on the next. On this panel it clears 13:1. */ .lp .hz-screen .lp__vText{background:rgba(11,31,26,.74);border-radius:10px; padding:8px 12px;margin-top:8px; -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)} .lp .hz-screen .lp__vText > summary{color:#eaf6f0!important} .lp .hz-screen .lp__vText > summary::marker{color:#a8ebcb} .lp .hz-screen .lp__vText > p, .lp .hz-screen .lp__vText > ol, .lp .hz-screen .lp__vText > ul, .lp .hz-screen .lp__vText li{color:rgba(255,255,255,.86)!important} /* ---- The closing band gets a ground of its own ---- It was white, between a sage band and the footer, so the one panel on the page that is actually asking for something read as the gap between two others. A pale green panel, the hero's own mix at a lower strength, puts a frame round it. All four roles still clear AA on it: heading 14.9:1, sentence 7.39:1, eyebrow 7.4:1, and white on the button 5.98:1. */ .lp .hz-sec.hz-join{ background: radial-gradient(96% 72% at 86% 8%,rgba(63,157,109,.13),transparent 60%), radial-gradient(70% 60% at 4% 96%,rgba(44,107,82,.08),transparent 64%), linear-gradient(170deg,#f6fbf8,#e4efe7 62%,#f1f7f3)!important} /* ---- The closing band's copy gets room to be read ---- Contrast was never the problem here: the eyebrow runs 8.54:1, the heading 17.15:1, the sentence 8.73:1 and the button 5.98:1. The problem was the measure. The band is a two column grid and it stood at 336px / 624px, so a 44px heading was wrapping inside 336px, roughly seven characters a line, and the sentence's own 50ch cap could never apply because the column was narrower than the cap. The film keeps the larger half, but not by that much, and the gap was 120px of the 1080 it had to share. */ @media (min-width:861px){ .lp .hz-join .hz-in,.lp .hz-join *:has(> .hz-joinMedia){ grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)!important; gap:clamp(36px,3.6vw,60px)!important; align-items:center!important} } /* ---- The closing band, easier to read ---- The eyebrow was leaf on white at a weight that made it decoration; the lede was muted at the body size over a 54ch measure. The band is the last thing on the page and the only one asking for anything, so it gets the ink. */ .lp .hz-join .hz-h2,.lp .hz-join h2{color:#0b1f19!important} .lp .hz-join .hz-sub,.lp .hz-join p{color:#3c4f49!important; font-size:clamp(15.5px,.95vw + .5rem,17px)!important; line-height:1.62!important;max-width:50ch!important} /* -webkit-text-fill-color as well as color, and this is the whole reason the eyebrow went on reading as pale mint on pale green however often the colour was set. A hero rule sets BOTH on its highlight, and its selector list reaches this chip; fill wins over colour wherever both are given, so setting colour alone changed nothing that was painted. Worse, it is invisible to the obvious test: getComputedStyle reported rgb(15,87,64) and the contrast came out at 8.17:1 while the screen showed about 1.5:1. When type on this site looks wrong and the colour says it is right, read webkitTextFillColor before believing the colour. */ .lp .hz-join .hz-chip,.lp .hz-join .hp-eyebrow{color:#0F5740!important; -webkit-text-fill-color:#0F5740!important; font-weight:700!important;letter-spacing:.14em!important;opacity:1!important; font-size:12.5px!important} /* ==== The outcomes wheel =================================================== Ported from the journey section on the partnerships site, in this site's own colours rather than that one's gold on deep green: the owner took the dark green off these pages on 4 October and asked for light green and white, so the ring is leaf on pale and the live node is the filled pill. The geometry is the original's. Each node is placed by rotating it out to the radius and then counter-rotating it by the same amount, so the pill travels the ring while its text stays upright. --step comes from PHP (360/n) so the ring renumbers itself if a reader is added or removed, and --rot is the whole rotation the wheel has turned through, which is (n-1) steps at full progress. */ /* Held while it turns, as the partnerships one is. The section is given its inner's height plus the scroll the turn is bought with (the script writes --owH), and the inner sticks to the header, so the ring turns WITH the page rather than stepping. justify-content is overridden because this band is a centring flex column everywhere else, and a sticky child centred in a tall section starts in the wrong place. Off below 1000px and under reduced motion: the script does not set --owH or the class there, so the section is its own height and the controls do the work. */ .lp .hz-sec.hp-owPin{height:var(--owH,auto);justify-content:flex-start!important} /* Centred in the window, 20 October 2026, not hung off the header. Pinned at the header alone, the heading and the wheel sat at the top of the screen and the rest of the scroll runway showed below them as empty ground: the wheel appeared to be turning in a blank half-page. The offset is the header plus half of whatever is left over once the inner has taken its share, so the block holds the middle of the window the whole way through the turn, and the runway is simply scroll rather than scenery. The inner's own height comes from the script as --owIn, because CSS cannot measure it, and it is a height rather than a finished offset so this sum keeps up with a header that draws itself in as the page moves. max() keeps it off the header on a short window where there is nothing left over to share. */ .lp .hp-owPin > .hz-in{position:sticky; top:calc(var(--hdr-now,64px) + max(0px,(100svh - var(--hdr-now,64px) - var(--owIn,0px)) / 2)); transition:top .32s cubic-bezier(.2,.7,.2,1)} @media (prefers-reduced-motion:reduce){ .lp .hp-owPin > .hz-in{transition:none} } .lp .hp-wheelGrid{display:grid;gap:clamp(18px,2.4vw,34px);align-items:center} @media (min-width:1000px){ .lp .hp-wheelGrid{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); gap:clamp(24px,3vw,48px)} } /* hp-ow, not hp-wheel: this theme already owns .hp-wheel and .hp-stages for the who-it-is-for wheel, and borrowing those names handed this section two rules that broke it, display:none below 900px and position:absolute;inset:0 on the entries. */ .lp .hp-ow{ --R:min(168px,23vw,calc((100svh - var(--hdr-now,64px)) * .25)); --rot:calc(var(--p,0) * (1 - var(--n,3)) * var(--step,120deg)); position:relative;width:calc(var(--R) * 2 + 120px);height:calc(var(--R) * 2 + 76px); margin:0 auto;display:grid;place-items:center} .lp .hp-wheel__track{position:absolute;left:50%;top:50%; width:calc(var(--R) * 2);height:calc(var(--R) * 2); transform:translate(-50%,-50%) rotate(var(--rot));border-radius:50%; border:1px dashed rgba(44,107,82,.34); box-shadow:0 0 50px rgba(44,107,82,.08),inset 0 0 50px rgba(44,107,82,.05); transition:transform .6s cubic-bezier(.2,.7,.2,1)} .lp .hp-wheel__arc{position:absolute;left:50%;top:50%; width:calc(var(--R) * 2 + 14px);height:calc(var(--R) * 2 + 14px); transform:translate(-50%,-50%) rotate(-90deg);overflow:visible;pointer-events:none} .lp .hp-wheel__arc circle{fill:none;stroke:#0F5740;stroke-width:1.6; stroke-linecap:round;stroke-dasharray:100; stroke-dashoffset:calc(100 - var(--p,0) * 100); transition:stroke-dashoffset .6s cubic-bezier(.2,.7,.2,1)} /* The core carries the live numeral and who it belongs to. */ .lp .hp-wheel__core{position:relative;z-index:1; width:calc(var(--R) * 1.2);height:calc(var(--R) * 1.2);border-radius:50%; display:grid;place-content:center;justify-items:center;gap:2px;text-align:center; padding:0 8%; background:radial-gradient(120% 120% at 30% 20%,#ffffff,#eaf1ed 70%); border:3px solid #0F5740; box-shadow:0 26px 54px -34px rgba(11,31,26,.55),0 0 0 9px rgba(44,107,82,.09)} .lp .hp-wheel__core b{font-family:var(--a-disp),"Archivo",sans-serif; font-size:clamp(34px,5.2vw,52px);line-height:.92;font-weight:700; letter-spacing:-.03em;color:#0F5740} .lp .hp-wheel__core i{font-style:normal;font-size:11px;font-weight:700; letter-spacing:.13em;text-transform:uppercase;color:var(--a-muted); line-height:1.25} .lp .hp-wheel__ring{list-style:none;margin:0;padding:0; position:absolute;left:50%;top:50%;width:0;height:0} .lp .hp-wheel__ring li{position:absolute;left:0;top:0; display:flex;align-items:center;gap:8px;white-space:nowrap; padding:5px 14px 5px 5px;border-radius:999px; background:var(--a-paper,#fff);border:1px solid var(--a-line);cursor:pointer; transform-origin:0 0; transform:rotate(calc(var(--i) * var(--step,120deg) + var(--rot))) translateY(calc(-1 * var(--R))) rotate(calc(-1 * (var(--i) * var(--step,120deg) + var(--rot)))) translate(-50%,-50%); transition:transform .6s cubic-bezier(.2,.7,.2,1), background .3s,border-color .3s,box-shadow .3s} .lp .hp-wheel__ring li b{flex:none;width:32px;height:32px;border-radius:50%; display:grid;place-items:center;background:#eaf1ed; border:1.5px solid rgba(44,107,82,.45);color:#0F5740; font-size:12px;font-weight:800;transition:background .3s,color .3s,border-color .3s} .lp .hp-wheel__ring li span{font-size:12px;font-weight:800;letter-spacing:.06em; text-transform:uppercase;color:var(--a-ink);transition:color .3s} .lp .hp-wheel__ring li.is-done{border-color:rgba(44,107,82,.45)} .lp .hp-wheel__ring li.is-done b{background:rgba(44,107,82,.16);border-color:#2c6b52} .lp .hp-wheel__ring li.is-live{background:linear-gradient(180deg,#17714F,#0F5740); border-color:#0F5740; box-shadow:0 0 0 6px rgba(15,87,64,.14),0 14px 34px -12px rgba(15,87,64,.55)} .lp .hp-wheel__ring li.is-live b{background:#fff;border-color:#fff;color:#0F5740} .lp .hp-wheel__ring li.is-live span{color:#fff} /* The entries. All three stand until the script collapses them, so a reader without it gets the content rather than a third of it. */ .lp .hp-owList{list-style:none;margin:0;padding:0;display:grid;gap:12px} .lp .hp-owList li{position:relative;overflow:hidden; display:grid;grid-template-columns:auto minmax(0,1fr); column-gap:clamp(14px,1.6vw,22px);align-items:start; padding:clamp(18px,2vw,26px) clamp(18px,2.2vw,28px) clamp(16px,1.8vw,24px) clamp(22px,2.4vw,30px); background:var(--a-paper,#fff);border:1px solid var(--a-line);border-radius:20px; box-shadow:0 18px 40px -34px rgba(11,31,26,.42)} .lp .hp-owList li::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px; background:linear-gradient(180deg,#17714F,#0F5740);opacity:0;transition:opacity .45s} .lp .hp-owList li.is-live::before{opacity:1} .lp .hp-stage__num{display:grid;gap:4px;justify-items:start;min-width:62px} .lp .hp-stage__num b{font-family:var(--a-disp),"Archivo",sans-serif; font-size:clamp(32px,4vw,48px);line-height:.9;font-weight:700; letter-spacing:-.03em;color:#0F5740} .lp .hp-stage__num i{font-style:normal;font-size:10.5px;font-weight:700; letter-spacing:.15em;text-transform:uppercase;color:var(--a-muted)} .lp .hp-stage__body{display:grid;gap:7px} .lp .hp-stage__body strong{font-family:var(--a-disp),"Archivo",sans-serif; font-size:clamp(20px,2.1vw,27px);line-height:1.12;letter-spacing:-.012em; font-weight:600;color:var(--a-ink)} .lp .hp-stage__p{font-size:15.5px;line-height:1.58;color:var(--a-muted)} .lp .hp-stage__pay{font-size:13px;font-weight:700;letter-spacing:.02em;color:#0F5740} /* One at a time, once the script is running. They share one grid cell so the panel does not change height as it moves between them. */ .lp .hp-ow-on .hp-owList{grid-template-columns:minmax(0,1fr); grid-template-areas:"s";gap:0} .lp .hp-ow-on .hp-owList li{grid-area:s;opacity:0;transform:translateY(12px); pointer-events:none; transition:opacity .45s cubic-bezier(.2,.7,.2,1),transform .45s cubic-bezier(.2,.7,.2,1)} .lp .hp-ow-on .hp-owList li.is-live{opacity:1;transform:none;pointer-events:auto} .lp .hp-stage__nav{display:flex;align-items:center;justify-content:space-between; gap:12px;margin-top:14px;flex-wrap:wrap} .lp .hp-stage__rail{list-style:none;margin:0;padding:0;display:flex;gap:6px} .lp .hp-stage__rail button{display:grid;gap:7px;justify-items:center; background:none;border:0;padding:6px 4px;cursor:pointer;color:var(--a-muted); font-family:inherit;font-size:11.5px;font-weight:800;letter-spacing:.12em; line-height:1;transition:color .3s} .lp .hp-stage__rail button::after{content:"";width:32px;height:3px;border-radius:2px; background:rgba(44,107,82,.2);transition:background .3s,box-shadow .3s} .lp .hp-stage__rail button.is-done,.lp .hp-stage__rail button.is-live{color:#0F5740} .lp .hp-stage__rail button.is-done::after{background:rgba(44,107,82,.5)} .lp .hp-stage__rail button.is-live::after{background:#0F5740; box-shadow:0 0 10px rgba(15,87,64,.4)} .lp .hp-stage__rail button:hover{color:var(--a-ink)} .lp .hp-stage__rail button:focus-visible{outline:2px solid #0F5740;outline-offset:2px; border-radius:6px} .lp .hp-stage__btn{display:inline-flex;align-items:center;gap:10px; background:var(--a-paper,#fff);border:1px solid var(--a-line);color:var(--a-ink); border-radius:999px;padding:8px 16px;font-family:inherit;cursor:pointer; text-align:left;transition:border-color .3s,background .3s,opacity .3s} .lp .hp-stage__btn span{display:grid;gap:3px;line-height:1.1} .lp .hp-stage__btn small{font-size:10.5px;font-weight:700;letter-spacing:.15em; text-transform:uppercase;color:var(--a-muted)} .lp .hp-stage__btn b{font-size:14px;color:var(--a-ink);font-weight:600} .lp .hp-stage__btn svg{width:18px;height:18px;flex:none;stroke:#0F5740;fill:none; stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .lp .hp-stage__btn:hover:not(:disabled),.lp .hp-stage__btn:focus-visible{ border-color:#0F5740;background:#f3f8f5} .lp .hp-stage__btn:focus-visible{outline:2px solid #0F5740;outline-offset:2px} .lp .hp-stage__btn:disabled{opacity:.38;cursor:default} @media (max-width:999px){ .lp .hp-ow{--R:min(104px,27vw,calc((100svh - var(--hdr-now,64px)) * .17)); width:100%;max-width:calc(var(--R) * 2 + 120px);height:calc(var(--R) * 2 + 60px)} /* On a phone only the live pill carries its word; the rest are discs, or the ring runs out past the edge of the screen. */ .lp .hp-wheel__ring li{gap:6px;padding:4px 10px 4px 4px} .lp .hp-wheel__ring li:not(.is-live){padding:4px} .lp .hp-wheel__ring li:not(.is-live) span{display:none} .lp .hp-wheel__ring li b{width:28px;height:28px;font-size:11px} .lp .hp-wheel__ring li span{font-size:11px} .lp .hp-stage__rail{order:-1;width:100%;justify-content:center} .lp .hp-stage__nav{gap:8px;margin-top:10px} } /* ---- Short screens, so the wheel turns there too ---- 18 October 2026. The hold is refused when the stage does not fit the window, which is right: a stage taller than the screen would put the rail and the arrows below the fold and strand the reader in a section whose controls are off it. But on a 375 by 667 phone the stage came to 686 against 586 of usable height and missed by a hundred pixels, so that phone got no turn at all. A hundred pixels is a smaller wheel and a tighter card, not a different design. Keyed to the HEIGHT of the window rather than its width, because height is what the stage is being measured against: a wide short laptop has the same problem and the same answer. */ @media (max-height:720px){ .lp .hp-ow{--R:min(74px,21vw,calc((100svh - var(--hdr-now,64px)) * .125))!important; height:calc(var(--R) * 2 + 42px)!important} .lp .hp-wheelGrid{gap:10px!important} .lp .hp-owList li{padding:13px 15px 11px 17px!important;border-radius:16px!important} .lp .hp-stage__num{min-width:46px!important} .lp .hp-stage__num b{font-size:25px!important} .lp .hp-stage__body strong{font-size:17px!important} .lp .hp-stage__p{font-size:14px!important;line-height:1.45!important} .lp .hp-stage__pay{font-size:12px!important} .lp .hp-stage__nav{margin-top:8px!important;gap:6px!important} .lp .hp-stage__btn{padding:6px 12px!important} .lp .hp-stage__btn b{font-size:13px!important} .lp .hp-ow__core b{font-size:clamp(24px,4vw,32px)!important} } @media (prefers-reduced-motion:reduce){ .lp .hp-wheel__track,.lp .hp-wheel__ring li,.lp .hp-wheel__arc circle, .lp .hp-ow-on .hp-owList li{transition:none} } /* ---- The care team aside is a footnote, not a band ---- One sentence, and it was carrying 132px of padding at both ends: 425px of section for two lines of text, most of it nothing. It sits between two white bands as an aside, which is a role that wants to be small. The measure goes with it, because at its old width the sentence broke after "there" and left "is no account." alone on a second line; it fits on one line now at anything above a phone. */ .lp .hz-sec.hz-serve--only{padding-block:clamp(20px,2.4vw,34px)!important} .lp .hz-serve__alt,.lp .hz-serve--only .hz-serve__alt{ max-width:74ch!important;margin-inline:auto!important; text-wrap:balance;line-height:1.55!important} /* ---- The closing sentence is lit from the start ---- This was the readability fault, and it was not contrast: the last five words of "An Organisation subscription starts when it is paid for." were sitting at opacity .22 against the ground, which is about 1.6:1 and effectively invisible. home6.css meters .hz-lit words against how far the reader has come down the section: opacity is .22 + clamp(0,(--v * (--n + 2)) - --i,1) * .78, so a sentence of 19 words needs --v to reach .905 before its last word lights. Three things make that unreachable HERE and nowhere else. It is the longest sentence on the page, so it demands the most; it is the last band, so --v only finishes once the footer is on screen; and at the position a reader actually reads it from, centred in the window, --v is .671. The other three sentences are six to ten words, need .75 to .83, and finish while they are still being read. A reveal that cannot finish until you have scrolled past the thing it is revealing is not a reveal. The closing band keeps the rise and drops the metering. */ .hz-anim .lp .hz-join .hz-lit .hz-sw{opacity:1!important} /* ---- The menu on a phone and a tablet ---- It was a full height panel of twenty pixel rows with a fixed height, so a six item menu left a screen of empty sheet under it. It is a sheet that is as tall as its contents now, scrolls if it has to, keeps the home indicator clear, and turns its chevrons over when a group opens. */ @media (max-width:860px){ .lp .lp__nav{height:auto!important; max-height:calc(100dvh - var(--hdr-now,64px) - 8px)!important; overflow-y:auto;overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding:2px 18px calc(20px + env(safe-area-inset-bottom,0px))!important; background:var(--a-paper)!important; border-top:1px solid var(--a-line)!important; box-shadow:0 26px 50px -30px rgba(11,31,26,.5)!important} /* The radius goes with the pill shape these have on the desktop bar. Left on, a one pixel bottom border on a 999px corner draws as an arc, which is what put a stray rounded box around Pricing. */ .lp .lp__nav .lp__navLink,.lp .lp__nav .lp__ddBtn{ padding:13px 2px!important;min-height:52px;border-radius:0!important; font-size:16.5px!important;font-weight:600!important; letter-spacing:-.012em!important;color:var(--a-ink)!important} .lp .lp__menus>.lp__dd,.lp .lp__menus>.lp__navLink{ border-bottom:1px solid var(--a-line)!important} .lp .lp__menus>.lp__dd:last-of-type{border-bottom:0!important} .lp .lp__nav .lp__ddBtn svg{width:17px;height:17px;flex:none; transition:transform .28s cubic-bezier(.2,.7,.2,1)} .lp .lp__dd.is-open .lp__ddBtn svg{transform:rotate(180deg)} .lp .lp__dd.is-open .lp__ddBtn{color:var(--a-leaf)!important} .lp .lp__ddPanel{padding:2px 0 10px!important} .lp .lp__ddLabel{font-size:10.5px!important;letter-spacing:.13em!important; text-transform:uppercase!important;color:var(--a-muted)!important; margin:10px 0 4px!important} .lp .lp__ddPanel a{padding:9px 2px!important;min-height:44px} .lp .lp__ddPanel a b{font-size:14.5px!important} .lp .lp__ddPanel a small{font-size:12px!important;color:var(--a-muted)!important} /* The actions read as the end of the menu, not as two more rows of it. Rebuilt 18 October 2026. It was three pills, each 354 wide and each the full width of the sheet, stacked: Open a plan, Sign in, START FREE TRIAL. Three identical shapes say the three are the same weight of decision, when one is a care worker looking something up and one is the start of a subscription, and at that width a primary action stops reading as a button and starts reading as a banner. Two now, side by side, the primary given the wider cell so the hierarchy is in the geometry rather than only in the colour. */ .lp .lp__navActs{display:grid!important; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)!important; gap:8px!important;align-items:stretch!important; margin:16px 0 0!important;padding-top:14px!important; border-top:1px solid var(--a-line)!important} /* Open a plan comes out of the sheet. "Got a code?" sits in the header, points at the same /open-a-plan/, and is readable without opening the menu at all, so this was a second door to the same room and was spending a full row on it. */ .lp .lp__navActs .lp__navCode{display:none!important} .lp .lp__navActs .lp__navLink{justify-content:center!important; font-size:15px!important;padding:0 10px!important;min-height:46px; border:1px solid var(--a-line)!important;border-radius:999px!important} /* The tracking goes with the width. At 1.54px on a 354px pill the label was spread from edge to edge, which is most of why it read as oversized. */ .lp .lp__navActs .lp__btn{min-height:46px!important;font-size:14.5px!important; letter-spacing:.04em!important;padding:0 12px!important;width:auto!important; border-radius:999px!important;justify-content:center!important} } @media (max-width:860px) and (prefers-reduced-motion:reduce){ .lp .lp__nav .lp__ddBtn svg{transition:none} }