/* GENERATED by tools/build_proportional_css.py. DO NOT EDIT.
 * Source: care.css SHA256 38e1f286e63f40ecc3cb3af362e5229001428ea03118bb147987d432675ad702
 * 1460px desktop proportions at 721–1460px; original CSS outside. */
@media not all and (min-width: 721px) and (max-width: 1460px) {
/* ============================================================
   GECKO CARE · US ACQUISITION LANDING PAGE
   Styled from Dan's finalised content wireframe, 26 August 2026.
   Section order, copy hierarchy and the single CTA are his.
   Everything visual is gecko.css plus the page rules below.
   ============================================================ */

.wrap{max-width:var(--shell);margin:0 auto;padding:0 var(--pad)}

/* ---------- hero ---------- */
/* padding is set in full, not just the top. This is a <section>, so it
   inherits `padding: var(--band) 0` from gecko.css, and overriding only
   padding-top left 120px of dead space under the credibility strip. */
.hero{position:relative;min-height:min(860px,100svh);display:flex;flex-direction:column;
  overflow:hidden;background:#101108;color:var(--paper);padding:74px 0 0}
#gl{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero .fb{position:absolute;inset:0;display:none;
  background:repeating-linear-gradient(90deg,rgba(0,0,0,.5) 0 3px,transparent 3px 11px),
             radial-gradient(58% 74% at 74% 52%,#F7FF9E 0%,#EBFF00 26%,#5C6B00 52%,#101108 80%)}
.hero.nogl .fb{display:block}
.hero.nogl #gl{display:none}
.hero .scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,rgba(16,17,8,.94) 0%,rgba(16,17,8,.66) 40%,rgba(16,17,8,0) 70%),
             linear-gradient(to top,rgba(16,17,8,.9) 0%,rgba(16,17,8,0) 34%)}
/* the extra bottom padding is what pushes the credibility strip down.
   The copy stays optically centred, the strip gets its own air. */
.hero-body{position:relative;z-index:5;flex:1;display:flex;align-items:center;
  padding:clamp(24px,3.6vh,44px) 0 clamp(64px,9.5vh,124px)}
/* copy left, price badge right. The badge sits over the mesh, which is
   why it carries its own ground rather than relying on the scrim. */
/* The gap is bought from the card, not from the margins.

   There is no slack inside the container: the headline needs 588px but
   the lede sits on its 50 character measure and fills the full 678, so
   widening the gap from inside would push it onto a fourth line. The
   obvious alternative was to let the hero reach into the page margin,
   and it works, but at 1680 and above the card ends up 168px outside
   the line every section below it holds, which reads as a mistake
   rather than as air. So both edges stay locked and the card gives up
   42px of its own width instead.

   The tracks are fixed and justify-content hands the leftover to the
   space between them, which is what lets the gap grow with the viewport
   while the copy stays on its measure. */
.hero-in{max-width:var(--shell);margin:0 auto;width:100%;padding:0 var(--pad);
  display:grid;grid-template-columns:minmax(0,760px) 420px;
  justify-content:space-between;
  gap:clamp(40px,4vw,72px);align-items:center}
/* A wider measure should buy bigger type, not just more gap, so the cap
   goes from 55px to 62px. 23ch is what holds Dan's headline to three
   lines at that size. Measured, not guessed. */
.hero h1{margin:0;font-size:clamp(38px,4.2vw,62px);font-weight:500;
  letter-spacing:-.017em;line-height:1.02;max-width:23ch}
/* more than the system 24px. The hero has room the bands do not, and
   the headline is 62px here, so the label needs to sit further off it to
   read as a label rather than as a first line. */
.hero .eyebrow{margin-bottom:clamp(30px,3.6vw,48px)}
/* the hero paragraph moved to the summary band, under the line about the
   six things, so the hero is eyebrow, headline and the one ask. */
.hero-actions{display:flex;align-items:center;gap:12px 30px;flex-wrap:wrap;
  margin-top:clamp(46px,5.8vw,80px)}
/* a link, not a second pill. Two pills side by side read as two asks of
   equal weight, and this page has one ask. */
.hero-link{font-family:var(--ff-mono);font-size:12.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(250,248,242,.76);white-space:nowrap;
  padding:6px 0 7px;
  background:linear-gradient(currentColor,currentColor) bottom left/100% 1px no-repeat;
  transition:color var(--dur-hover) ease}
.hero-link:hover{color:var(--fluro)}
/* ---------- the audience cards ----------
   Full colour photography, no duotone. The palette does its work through
   the elements floating over the photograph rather than through a filter
   laid on top of it, which is why the picture is allowed to be a picture.
   The only treatment on the image itself is a slight desaturation and a
   bottom gradient, both there so the caption stays legible on any frame.

   Note the accent rule. The hero already spends its one Fluro on the
   primary button, so every floating element here is Paper or Ink glass
   with a single green state dot. Nothing in this block competes. */
.ucards{position:relative;justify-self:end;width:100%;max-width:420px}
.ustack{position:relative;aspect-ratio:3/4;border-radius:var(--r-card);overflow:hidden;
  background:var(--graphite);
  box-shadow:0 26px 60px rgba(0,0,0,.44),inset 0 1px 0 rgba(250,248,242,.16)}
.ucard{position:absolute;inset:0;margin:0;opacity:0;transform:scale(1.045);
  transition:opacity 900ms var(--ease),transform 2600ms var(--ease)}
.ucard.on{opacity:1;transform:scale(1)}
/* transparent text colour so a photograph that fails to load leaves the
   Graphite frame rather than spilling its alt text across the hero. The
   alt attribute itself is untouched and still reaches a screen reader. */
.ucard img{width:100%;height:100%;object-fit:cover;display:block;
  color:transparent;background:var(--graphite);
  filter:saturate(.94) contrast(1.03)}
/* just enough top and bottom shading to seat the marks and the panel.
   The middle of the photograph is left alone. */
.ucard::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(16,17,8,.3) 0%,rgba(16,17,8,0) 24%,
             rgba(16,17,8,0) 62%,rgba(16,17,8,.62) 100%)}

/* the marks run down the right edge rather than along the bottom, which
   is the one strip of the frame nothing else is hung over */
.udots{position:absolute;right:13px;top:50%;transform:translateY(-50%);z-index:4;
  display:flex;flex-direction:column;gap:6px}
.udots i{width:3px;height:17px;border-radius:2px;background:rgba(250,248,242,.34);
  transition:background var(--dur-hover) linear}
.udots i.on{background:rgba(250,248,242,.88)}

/* ---------- the one floating detail ----------
   This started as four elements hung off four corners and it made the
   hero busier than the headline. The rating went first, because it was
   already on screen twice above and below it, then the state pill,
   because it was decoration. What survives is the audience line and the
   price, in a single panel with a hairline between them. The Kinsta
   density it lost has a proper home further down the page. */
.ufloat{position:absolute;z-index:5;border-radius:var(--r-inner)}

/* Paper glass rather than solid Paper. The blur averages whatever is
   behind it, so the ground under the type is far flatter than the
   photograph is, and the panel reads as a pane rather than a sticker.

   The alpha is measured across ten frames of a full card cycle, not
   chosen. At 80% the small Char labels bottom out at 4.05:1 and fail.
   84% scrapes 4.54:1, which is too thin a margin to hold against real
   photographs rather than test images. 88% gives 4.80:1 with headroom
   and is still plainly a pane: at a 22px blur you read the colour and
   the movement behind it, never the detail. */
.uf-for{left:-30px;bottom:-28px;width:262px;color:var(--ink);
  background:rgba(250,248,242,.88);
  -webkit-backdrop-filter:blur(22px) saturate(150%);backdrop-filter:blur(22px) saturate(150%);
  padding:16px 18px 17px;
  box-shadow:0 20px 44px rgba(0,0,0,.36),inset 0 1px 0 rgba(250,248,242,.5)}
/* Char, not Slate. Slate is 5.31:1 on solid Paper but only 2.53:1 once
   the panel is glass over a dark photograph. Char holds at 4.80:1 at
   the worst frame of the cycle. */
.uf-for .uf-k{display:block;font-family:var(--ff-mono);font-size:10px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--char)}
/* the three lines share one box, so the panel never resizes as they swap */
.uf-for .uf-lines{position:relative;display:block;margin-top:9px}
.uf-for .uf-lines b{display:block;font-size:15.5px;font-weight:500;line-height:1.3;
  letter-spacing:-.008em;opacity:0;transition:opacity 600ms var(--ease)}
.uf-for .uf-lines b + b{position:absolute;inset:0}
.uf-for .uf-lines b.on{opacity:1}
/* the divider is a gap in a background, not a border. No borders anywhere. */
.uf-for .uf-price{display:flex;align-items:baseline;gap:10px;margin-top:16px;padding-top:15px;
  /* the rule is darker than --line because --line disappears on glass */
  background:linear-gradient(rgba(24,25,16,.16),rgba(24,25,16,.16)) top left/100% 1px no-repeat}
.uf-for .uf-price b{font-family:var(--ff-mono);font-weight:700;font-size:24px;line-height:1;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;margin-left:auto}
.uf-for .uf-price b em{font-style:normal;font-size:12px;font-weight:400;letter-spacing:0;
  color:var(--char);margin-left:3px}

/* ---------- the float ----------
   Two drifts, not one. The frame and the panel rise and fall on
   different periods and different amplitudes, so they separate and
   rejoin instead of moving as one rigid block, which is what makes it
   read as floating rather than as a shape being animated. The periods
   are deliberately coprime, 7s and 9s, so the pair never settles into a
   pattern the eye can predict. */
@keyframes ufloatA{ 0%,100%{transform:translate3d(0,0,0)} 50%{transform:translate3d(0,-7px,0)} }
@keyframes ufloatB{ 0%,100%{transform:translate3d(0,0,0)} 50%{transform:translate3d(0,-12px,0)} }
.ustack{animation:ufloatA 7s ease-in-out infinite}
.uf-for{animation:ufloatB 9s ease-in-out infinite .8s}
@media (prefers-reduced-motion: reduce){
  .ustack,.uf-for{animation:none}
}

/* ============================================================
   THE PARALLAX
   The hero is pinned and the page slides over it. --stick is set in
   script rather than being 0, because on a viewport shorter than the
   hero a plain top:0 pins the hero with its own foot below the fold and
   the credibility strip is never seen. The script sets it to the
   negative overhang so the hero rides up just far enough to show its
   own bottom edge, then holds.

   main carries the rounded top and the shadow, so the incoming layer
   reads as a sheet passing over rather than as the next section simply
   arriving. Everything below the first section is opaque, so the corner
   cut only ever shows the hero through it, which is the point.
   ============================================================ */
/* ---------- lock and pop ----------
   Each band locks at the top of the window and the next one rides over
   it. The whole stack is a deck of sheets rather than a scrolling column.

   The z-index is the important part, and it is why the first attempt
   was wrong. A pinned band holds until its own parent's bottom, which is
   the end of main, so it never releases. That is fine as long as every
   band after it paints above it, and it is a real bug the moment one
   does not: the second tier was sitting over the fourth and everything
   below, because those bands were unpositioned and had no z-index to
   beat it with. Positioning every band and stacking them in document
   order fixes it for good, and it cannot regress when a band is added,
   because the order is the rule. */
main > *{position:relative}
.pin{position:sticky;top:var(--stick,0px)}
.hero.pin{z-index:0}
main{position:relative;z-index:2}
/* the locking pair, contained so their pins release at the end of it */
.pinzone{position:relative}
/* :not(.pin) again. Positioning every child for the stacking order was
   overriding the sticky on both of them, so the third tier stopped
   riding over the second. Third time this exact trap has bitten: any
   blanket position rule has to stand aside for .pin. */
.pinzone > *:not(.pin){position:relative}
.pinzone > *:nth-child(1){z-index:1}
.pinzone > *:nth-child(2){z-index:2}
main > *:nth-child(1){z-index:1}    main > *:nth-child(2){z-index:2}
main > *:nth-child(3){z-index:3}    main > *:nth-child(4){z-index:4}
main > *:nth-child(5){z-index:5}    main > *:nth-child(6){z-index:6}
main > *:nth-child(7){z-index:7}    main > *:nth-child(8){z-index:8}
main > *:nth-child(9){z-index:9}    main > *:nth-child(10){z-index:10}
main > *:nth-child(11){z-index:11}  main > *:nth-child(12){z-index:12}
main > *:nth-child(n+13){z-index:13}

.sheet{border-radius:var(--r-band,30px) var(--r-band,30px) 0 0}
/* over the Ink hero the shadow can be heavy. Over Paper it cannot, or
   the seam reads as a smudge rather than an edge. */
/* the first sheet on the page rides over the Ink hero, so its shadow can
   be heavy. Every sheet after that lands on Paper, where the same shadow
   would read as a smudge rather than an edge. */
.pinzone > .sheet:first-child{box-shadow:0 -26px 70px rgba(16,17,8,.5)}
.pinzone > .sheet ~ .sheet, main > .sheet{box-shadow:0 -20px 46px rgba(24,25,16,.16)}
/* the last two do not lock. The FAQ changes height when an answer opens,
   which would leave the pin offset stale, and a form that locks while
   someone is typing in it is worse than one that simply scrolls. */
/* the hero dims as the sheet covers it, which is what sells the depth.
   Scroll driven, so it costs no scroll handler. Where the timeline is
   not supported the hero simply stays lit and the parallax still works. */
.hero .dim{position:absolute;inset:0;z-index:6;pointer-events:none;
  background:#0B0C06;opacity:0}
@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion: no-preference){
    /* duration must be auto. The `animation` shorthand resets it to 0s,
       which attaches the animation to the timeline and then never
       advances it, so the layer sits at opacity 0 for ever. It reads as
       "the feature does not work" and it is one missing word. */
    .hero .dim{animation:heroDim linear both;animation-duration:auto;
            /* scroll(root), not scroll(). The bare function resolves to the
         nearest ancestor scroll container, and .hero has overflow:hidden
         so it counts as one. Its scroll range is zero, so the animation
         attached and then sat still. */
      animation-timeline:scroll(root block);animation-range:0 92vh}
    @keyframes heroDim{ to{opacity:.62} }
  }
}
@media (prefers-reduced-motion: reduce){
  .hero{position:static}
  main > section:first-child{box-shadow:none}
}

/* ---------- the reveal band ----------
   It sits behind its neighbours rather than between them. The negative
   top margin tucks it under the band above, so it starts out of sight;
   sticky holds it while that band scrolls off, which is the reveal; and
   the band below arrives over the top of it, which is the hide. The
   z-index is the whole trick, and it has to beat the document order rule
   further up, so it is written at the same specificity and placed after.

   Fluro carrying a whole band, warmed slightly at one end so it is not a
   flat plane of yellow. The button inverts to Ink, because a Fluro
   button on a Fluro ground is not a button. */
main > .reveal{z-index:0}
/* The band is the runway, the content inside it is what pins.

   Sticking the band itself does not work, and the reason is worth
   keeping: a pinned band holds its top at zero while the band below it
   keeps scrolling up, and that band's top starts exactly at the pinned
   band's bottom. So it begins eating the pinned band from the foot the
   instant pinning starts, and the button was cut off before it was ever
   fully on screen. There is no frame where the thing is whole.

   Giving the band a tall foot fixes it. The band is content plus a
   runway, the content sticks inside it, and the band below cannot arrive
   until the whole runway has passed. The runway is exactly how long the
   thing sits there fully readable.

   The tuck and the inner top padding are still a pair: the padding has
   to clear the tuck, or the first line spends the reveal cut in half by
   the band above. */
.reveal{--tuck:clamp(110px,15vh,190px);
  position:relative;
  margin-top:calc(-1 * var(--tuck));
  /* min-height, not padding-bottom. A sticky child is constrained to its
     parent's CONTENT box, so padding on the parent gives it nowhere to
     travel and it simply scrolls away with the band. Real height in the
     content box is what buys the runway. */
  min-height:clamp(575px,70vh,760px);
  /* the same ground as the hero, with the shader painted over it. The
     flat colour is what shows on the first frame and on any machine that
     cannot give us a context. */
  background:#101108;color:var(--paper);border-radius:0;isolation:isolate}
/* no overflow:hidden on the band. It would make the band its own scroll
   container and the sticky inner would stop pinning to the window, which
   is the whole reveal. The canvas is inset to the band instead. */
#gl2{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}

.reveal .cb-fb{position:absolute;inset:0;z-index:0;display:none;
  background:repeating-linear-gradient(90deg,rgba(0,0,0,.5) 0 3px,transparent 3px 11px),
             radial-gradient(64% 96% at 40% 46%,#F7FF9E 0%,#EBFF00 24%,#5C6B00 54%,#101108 82%)}
.reveal.nogl .cb-fb{display:block}
.reveal.nogl #gl2{display:none}
/* the copy half is held down hard and the montage half is left open, so
   the picture sits on the mesh the way the hero card does. The bottom
   fade seats the runway: the band ends in ground, not in a cut. */
.reveal .cb-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(96deg,rgba(16,17,8,.95) 0%,rgba(16,17,8,.86) 30%,
             rgba(16,17,8,.46) 58%,rgba(16,17,8,.2) 78%,rgba(16,17,8,.5) 100%),
             linear-gradient(to top,rgba(16,17,8,.9) 0%,rgba(16,17,8,0) 46%)}
/* Keep the content anchored in its band; only the artwork floats. */
.reveal-in{position:relative;top:auto;z-index:2;min-height:clamp(400px,51vh,530px);
  display:flex;align-items:center;
  /* the top bias is the tuck plus clearance for the nav bar, so the first
     line never pins underneath it */
  padding:calc(var(--tuck) + clamp(30px,4.2vh,60px)) 0 clamp(20px,2.6vh,38px)}
.reveal-in > .wrap{width:100%}
/* Keep z-index effective when pinning is disabled, above the background. */
@media (prefers-reduced-motion: reduce){ .reveal-in{position:relative} }
/* 590px of the 1360 band was dead middle, 43% of it, because the copy
   was capped at 34ch and the art at 430. Both grow into it: the art takes
   roughly half the band and the title runs to its own measure rather than
   an arbitrary one. */
.cb-grid{display:grid;grid-template-columns:minmax(0,1fr) clamp(400px,42vw,600px);
  gap:clamp(30px,4vw,72px);align-items:center}
.cb-in{max-width:none}
/* The hero's headline setting, not the mono one. Mono read as a change of
   voice halfway down a page that only has one, and the point of this band
   is that the header has come back. Roboto 500, the hero's tracking, the
   hero's leading, one step smaller because the column is narrower. 24ch
   is what holds Dan's sentence to four lines at the cap. */
/* the mark stays. Ink on Fluro reads on the mesh as well as it does on
   Paper, and it is the one thing on this band that is not the header. */
.reveal .eyebrow{margin-bottom:clamp(22px,2.6vw,32px)}
.cb-line{margin:0;font-size:clamp(27px,3.15vw,45px);font-weight:500;
  letter-spacing:-.017em;line-height:1.06;color:var(--paper);max-width:24ch}
.reveal .btn{margin-top:clamp(30px,3.6vw,46px)}

/* ---------- the montage ----------
   One large frame with two smaller ones breaking its corners, and the
   boxed mark sitting outside the group at the foot. Squared up, no
   rotation: the overlap is doing the work, and tilting as well would be
   two devices saying the same thing.

   The small pair carry a Paper mat, which is what makes them read as
   separate objects laid over the big one rather than as holes cut in it. */
/* clip, so the entrance offsets never widen the page. The clip margin is
   generous enough that the drop shadows still show, and it means the
   frames slide out from under their own edge rather than in from the
   middle of nowhere. Without this a visitor who lands above this band
   gets a horizontal scrollbar from three images parked off-canvas. */
.cb-art{position:relative;width:100%;aspect-ratio:15/9;justify-self:end;
  z-index:2;overflow:clip;overflow-clip-margin:72px}
/* The entrance rides on the `translate` property and the float rides on
   `transform`. They are separate properties that compose, so the two can
   run at once without one cancelling the other, which is what happens if
   you try to do both with transform. */
.cb-art figure{position:absolute;margin:0;overflow:hidden;border-radius:var(--r-card);
  background:var(--graphite);
  translate:var(--fx,0) var(--fy,0);opacity:0;
  transition:translate 1000ms var(--ease) var(--d,0ms),
             opacity 700ms var(--ease) var(--d,0ms)}
.cb-art.is-in figure{translate:0 0;opacity:1}
.cb-art .cb-big{--fy:66px;--d:0ms}
.cb-art .cb-sm1{--fy:46px;--d:180ms}
.cb-art .cb-sm2{--fy:58px;--d:340ms}
/* the settle. Three periods, none of them a multiple of another, so the
   group never locks into a pattern you can predict. */
@keyframes cbFloat{0%,100%{transform:translate3d(0,0,0)}
                   50%{transform:translate3d(0,calc(-1 * var(--amp,9px)),0)}}
.cb-art.is-in figure img{animation:cbFloat var(--per,8s) ease-in-out infinite var(--pd,0s)}
/* No parallax here. The band already moves: it is revealed by one sheet
   leaving and hidden by the next arriving, and a scroll-linked drift on
   top of that was two motions competing for the same beat. What is left
   is the entrance and a slow settle, which is what the hero card does. */
.cb-art .cb-big{--amp:9px; --per:8s;   --pd:.2s}
.cb-art .cb-sm1{--amp:14px;--per:6.5s; --pd:.9s}
.cb-art .cb-sm2{--amp:12px;--per:7.3s; --pd:.5s}
@media (prefers-reduced-motion: reduce){
  .cb-art figure,.cb-art figure img{translate:0 0;opacity:1;transition:none;animation:none}
}
.cb-art img{width:100%;height:100%;object-fit:cover;display:block;color:transparent;
  filter:saturate(.94) contrast(1.03)}
/* the hero card's edge: a deep shadow to lift it off the mesh and a one
   pixel Paper highlight along the top, which is the whole of what makes
   a frame read as glass sitting on light rather than a rectangle cut
   into it. Same two values as .ustack. */
.cb-big{left:14%;top:0;width:72%;aspect-ratio:3/2;z-index:1;
  box-shadow:0 26px 60px rgba(0,0,0,.5),inset 0 1px 0 rgba(250,248,242,.16)}
.cb-art .cb-sm{z-index:2;
  box-shadow:0 18px 42px rgba(0,0,0,.52),inset 0 1px 0 rgba(250,248,242,.18)}
/* 6% in, then 50px further out, which is what puts it clear of the
   big frame's corner rather than sitting on it */
.cb-sm1{left:calc(6% - 50px); top:52%; width:29%; aspect-ratio:3/2}
.cb-sm2{right:2%; top:14%; width:41%; aspect-ratio:3/2}
/* The boxed mark, in Fluro, exactly as the footer carries it. The box is
   the artwork and the foot is a hole cut through it, so it needs no tile
   of its own: it already is one. The earlier version put the open mark
   on a Paper glass pane, which was a second container around a mark that
   comes with its own. */
.cb-mark{position:absolute;right:3%;bottom:2%;z-index:3;display:block;
  width:clamp(54px,5.8vw,74px);color:var(--fluro);
  filter:drop-shadow(0 16px 34px rgba(0,0,0,.45))}
.cb-mark svg{width:100%;height:auto;display:block}

@media(max-width:900px){
  /* stacked, the content is taller than the runway can hold, so the pin
     would be a few pixels of nothing. It becomes an ordinary band. */
  .reveal{min-height:auto}
  .reveal-in{position:relative}
  .cb-grid{grid-template-columns:minmax(0,1fr)}
  .cb-art{max-width:420px;justify-self:start;margin-top:clamp(34px,5.4vw,54px)}

}
@media (prefers-reduced-motion: reduce){
  /* no pin and no tuck, so it reads as an ordinary band */
  .reveal{position:static;margin-top:0}
}

/* ---------- the eyebrow as a highlighter ----------
   Ink on a Fluro block, sized to the words rather than to the column.
   inline-block is the whole of it: a <p> carrying a background runs the
   full measure and reads as a bar across the page instead of as a mark
   made on the words.

   Everywhere but the hero. The hero eyebrow is a long line and a Fluro
   bar that wide, sitting above a Fluro button, gives the top of the page
   two bright objects competing before the headline has been read. It
   keeps Fluro type on the mesh. */
/* The hero is the one exception in the system. Its eyebrow is a long
   line sitting directly above a Fluro button, and a Fluro bar that wide
   gives the top of the page two bright objects to look at before the
   headline has been read. Fluro type on the mesh instead. */
.hero .eyebrow{display:block;background:none;padding:0;color:var(--fluro);animation:none}

/* ---------- the band items arrive in sequence ----------
   Each item carries its own delay as a custom property so the stagger
   is declarative rather than a loop in script. The delay is keyed to the
   column, not to source order, so a three by two grid reads left to right
   as one sweep rather than snaking back on itself at the end of each row.
   Script writes --d once, when the group crosses the viewport. */
.ig > div, .probs > div, .steps > li, .dual > div{
  opacity:0;transform:translateY(var(--rise,38px));
  transition:opacity var(--dur-rise) var(--ease) var(--d,0ms),
             transform var(--dur-rise) var(--ease) var(--d,0ms)}
.ig.is-in > div, .probs.is-in > div, .steps.is-in > li, .dual.is-in > div{
  opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .ig > div, .probs > div, .steps > li, .dual > div{
    opacity:1;transform:none;transition:none}
}

/* the credibility strip, welded to the bottom of the hero */
.proof{position:relative;z-index:5;background:rgba(0,0,0,.28)}
.proof .in{max-width:var(--shell);margin:0 auto;padding:22px var(--pad);
  display:grid;grid-template-columns:repeat(3,auto);justify-content:space-between;
  align-items:center;gap:14px 26px;
  font-family:var(--ff-mono);font-size:12px;letter-spacing:.03em;white-space:nowrap;color:rgba(250,248,242,.68)}
@media(max-width:1320px){ .proof .in{grid-template-columns:repeat(2,auto);justify-content:start;gap:12px 44px} }
@media(max-width:560px){ .proof .in{grid-template-columns:1fr} }
.proof b{color:var(--fluro);font-weight:500}
.proof .gr{display:flex;align-items:center;gap:10px}

/* ---------- the Google rating device ---------- */
.stars{display:inline-flex;gap:3px;flex:0 0 auto}
.stars i{display:block;width:15px;height:15px;background:var(--fluro-deep);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.9 5.9 6.5.9-4.7 4.6 1.1 6.5L12 17.4 6.2 20.5l1.1-6.5L2.6 9.4l6.5-.9z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.9 5.9 6.5.9-4.7 4.6 1.1 6.5L12 17.4 6.2 20.5l1.1-6.5L2.6 9.4l6.5-.9z'/%3E%3C/svg%3E") center/contain no-repeat}
/* Fluro on every dark ground, including the footer and the mobile bar,
   which were still on Fluro Deep and read as olive rather than as the
   brand. Fluro Deep stays for the two light grounds. */
.dark .stars i,.slab .stars i,.proof .stars i,.gnav .stars i,
.foot .stars i,.mcta .stars i,.conv .stars i{background:var(--fluro)}
.stars.lg i{width:22px;height:22px}

/* ---------- nav, trimmed so it cannot compete with the CTA ---------- */
.gnav-meta{display:flex;align-items:center;gap:10px;font-family:var(--ff-mono);
  font-size:12.5px;letter-spacing:.06em;color:rgba(250,248,242,.72);white-space:nowrap}
.gnav-meta b{color:var(--paper);font-weight:500}
@media(max-width:820px){
  /* the sticky bar carries the CTA on small screens, so the bar in the nav
     would be the same button twice */
  .gnav-meta,.gnav .gnav-right{display:none}
}

/* the standing CTAs stand down once the form is on screen */
.gnav .gnav-right,.gnav-meta{transition:opacity var(--dur-reveal) var(--ease),visibility var(--dur-reveal)}
.gnav.cta-off .gnav-right{opacity:0;visibility:hidden}
/* Over the hero the nav is a wordmark and nothing else. The rating is
   already in the strip at the foot of the hero and the CTA is a Fluro
   button in the middle of the screen, so carrying both up here was the
   rating stated twice in one view and the same ask offered twice. */
.gnav.hero-on .gnav-meta,.gnav.hero-on .gnav-right{opacity:0;visibility:hidden}
.mcta{transform:translateY(110%);transition:transform var(--dur-reveal) var(--ease)}
.mcta.on{transform:none}

/* ---------- summary band ---------- */
/* 19ch breaks the heading over three lines rather than two at every
   width the band is used at, which is what makes room for the column on
   its right. Measured against the live string, not guessed. */
.sum h2{max-width:19ch}
.sum .sum-note{margin-top:20px;font-size:16px;line-height:1.66;color:var(--slate);
  max-width:46ch}
.sum .row.bottom .col-5{align-self:end}
.sum .ig{margin-top:clamp(30px,3.6vw,46px)}
.sum .ig h3{font-size:17px}

/* Mobile: keep each label centred alongside its icon, even when it wraps. */
@media(max-width:720px){
  .sum .ig > div{display:grid;grid-template-columns:40px minmax(0,1fr);gap:16px;align-items:center}
  .sum .ig .ic{margin:0}
  .sum .ig h3{margin:0}
}

/* ---------- the problem ---------- */
/* 30% out of the junction under the tiles. Their own hairline is already
   a closing edge, so a full band's padding beneath them plus a full
   band's padding above the next heading was two terminators doing one
   job. 284px from the tiles to the next heading, now 199.

   Note :has(.probs) rather than :has(> .probs): the tiles live inside
   .wrap, so the child combinator matched nothing and an earlier version
   of this rule was doing exactly zero. And the band below is the sibling
   of the pinzone, not of the section, because the two locking bands are
   wrapped together. */
section:has(.probs){padding-bottom:clamp(42px,4.9vw,70px)}
.pinzone + section{padding-top:clamp(52px,5.9vw,85px)}

/* Inside the measure, and aligned to it. The tiles were already the full
   grid width, but their own 26px padding meant the 01 started inset from
   the line the heading above it sits on, which is what read as narrow.
   The outer two give up their outer padding so the first number and the
   last tile's right edge land on the grid, and the inner padding stays
   where it is doing real work between the columns. */
.probs{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  margin-top:clamp(34px,4vw,52px);
  box-shadow:0 1px 0 var(--line),0 -1px 0 var(--line)}
.probs > div{background:var(--paper);
  padding:clamp(28px,3.2vw,40px) 26px clamp(30px,3.4vw,44px)}
.probs > div:first-child{padding-left:0}
.probs > div:last-child{padding-right:0}
@media(max-width:1100px) and (min-width:641px){
  .probs > div:nth-child(odd){padding-left:0}
  .probs > div:nth-child(even){padding-right:0}
}
@media(max-width:640px){ .probs > div{padding-left:0;padding-right:0} }
.probs .n{display:block;font-family:var(--ff-mono);font-size:12px;letter-spacing:.12em;
  color:var(--slate)}
.probs h3{font-size:19px;font-weight:700;letter-spacing:-.008em;margin:14px 0 10px;line-height:1.24}
.probs p{font-size:14.5px;line-height:1.6;color:var(--slate)}

/* ---------- included versus quoted separately ---------- */
/* ---------- the two colour chip ----------
   Included is Fluro, quoted separately is Ink. No hairline between them:
   two solid grounds meeting is its own edge, and a line drawn between
   them would be a border pretending to be a join.

   Note the accent. A Fluro column is a much larger spend of the accent
   than a button, and when the nav is stuck its CTA is Fluro too, so this
   band is the one place on the page where two Fluro objects can be in
   view at once. Deliberate here, but it is the reason not to do this
   twice. */
.dual{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.6vw,22px);
  margin-top:clamp(30px,3.6vw,46px)}
.dual > div{border-radius:var(--r-card);
  padding:clamp(28px,3.2vw,40px) clamp(26px,3vw,38px) clamp(32px,3.6vw,44px)}
.dual > div:first-child{background:var(--fluro);color:var(--ink)}
.dual > div:last-child{background:var(--ink);color:var(--paper)}
/* the chip head is a row, so the icon can sit in the far corner without
   being positioned absolutely and without the heading having to know it
   is there */
.dual > div{display:flex;flex-direction:column;
  position:relative;overflow:hidden;isolation:isolate}
/* ---------- the corner mesh ----------
   A small drifting field in the top corner of each chip, behind the icon
   tile, so the eye is pulled to the thing that names what the chip is.

   Not the WebGL shader. Two more contexts on a page that already runs two
   would be four, for a decorative patch 240px wide, and the shader's own
   ramp runs dark to Fluro which reads as a hole punched in the Fluro chip
   rather than as light on it. This is three blurred blobs on a slow
   offset drift, coloured per chip, which is the same idea done in CSS.

   The mask is doing the work. It holds the field solid in the corner and
   takes it to nothing well before the heading, so nothing the reader has
   to read is ever sitting on a moving ground. */
.dual-mesh{position:absolute;top:0;right:0;z-index:0;pointer-events:none;
  width:clamp(280px,56%,470px);aspect-ratio:1;
  -webkit-mask:radial-gradient(115% 115% at 100% 0%,#000 30%,rgba(0,0,0,.45) 56%,transparent 78%);
          mask:radial-gradient(115% 115% at 100% 0%,#000 30%,rgba(0,0,0,.45) 56%,transparent 78%)}
.dual-mesh i{position:absolute;display:block;border-radius:50%;filter:blur(26px);
  animation:dmDrift var(--dmp,13s) ease-in-out infinite alternate var(--dmd,0s)}
.dual-mesh i:nth-child(1){inset:-24% -30% 34% 22%;--dmp:8s;--dmd:0s}
.dual-mesh i:nth-child(2){inset:6% -12% 12% 34%;--dmp:10.5s;--dmd:-3s}
.dual-mesh i:nth-child(3){inset:-14% 26% 42% -6%;--dmp:6.5s;--dmd:-4s}
@keyframes dmDrift{
  from{transform:translate3d(-9%,5%,0) scale(1)}
  to  {transform:translate3d(12%,-8%,0) scale(1.22)}}
/* Fluro chip: back up the ramp rather than down it, but held back. The
   darker version read as a shadow on the chip; the first light version
   bleached to near white and read as a lens flare. This sits between
   them, lifting towards a pale citron and stopping well short of white,
   with the blobs at 62% so the field reads as depth in the surface
   rather than as a light shining on it.

   It only lightens, so the Ink heading, the Ink list and the Ink icon
   tile all keep at least the contrast they have on flat Fluro. */
.dual > div:first-child .dual-mesh i{opacity:.62}
.dual > div:first-child .dual-mesh i:nth-child(1){background:#F4FF9C}
.dual > div:first-child .dual-mesh i:nth-child(2){background:#FBFFD2}
.dual > div:first-child .dual-mesh i:nth-child(3){background:#EDFF6E}
/* Ink chip: the brand ramp, olive into Fluro, at the strength the hero
   uses at its far edge rather than at its core. */
.dual > div:last-child .dual-mesh i:nth-child(1){background:#6B7500}
.dual > div:last-child .dual-mesh i:nth-child(2){background:rgba(235,255,0,.38)}
.dual > div:last-child .dual-mesh i:nth-child(3){background:#343C0A}
/* everything the reader reads sits above the field */
.dual .chip-head,.dual ul,.dual .dual-note{position:relative;z-index:1}
@media (prefers-reduced-motion: reduce){
  .dual-mesh i{animation:none}
}
.dual .chip-head{display:flex;align-items:flex-start;justify-content:space-between;
  gap:20px;margin-bottom:22px}
.dual h3{font-size:20px;font-weight:700;letter-spacing:-.008em;margin:0}
/* the same tile the six USPs use, so the page has one icon treatment
   rather than two. It inverts between the chips: Ink tile with a Fluro
   mark on the Fluro side, Paper tile with an Ink mark on the Ink side.
   A Fluro mark on both would put a second Fluro object in a band that is
   already spending the accent on a whole column. */
.dual-ic{flex:0 0 auto;order:2;width:44px;height:44px;border-radius:13px;
  display:grid;place-items:center}
.dual-ic svg{width:23px;height:23px;display:block}
.dual > div:first-child .dual-ic{background:var(--ink);color:var(--fluro)}
.dual > div:last-child  .dual-ic{background:var(--paper);color:var(--ink)}

/* the last line is not another exclusion, it is the promise that closes
   the column, so it is Paper rather than Ash and it gets its own air */
/* no special treatment. It sits in the list as one more line, which is
   what was asked for and what keeps the column even. */
.dual ul{display:grid;gap:12px}

.dual li{position:relative;padding-left:28px;font-size:15px;line-height:1.5;color:inherit}
.dual li::before{content:'';position:absolute;left:0;top:2px;width:18px;height:18px}
/* Ink, not the green. On a Fluro ground the green tick measures 4.8:1,
   which passes, but green on yellow is a colour pairing nobody chose. */
.dual .yes li::before{background:var(--ink);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.4 12.6 5 5L19.6 6.8'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.4 12.6 5 5L19.6 6.8'/%3E%3C/svg%3E") center/contain no-repeat}
/* Ash, not Slate. Slate is a light ground colour and it is 1.8:1 on Ink.
   Ash measures 4.9:1 there. */
.dual .no li{color:var(--ash)}
.dual .no li::before{background:var(--ash);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E") center/contain no-repeat}
/* .dual-note, not .foot. The page footer component is also .foot and is
   defined later in this file with an Ink background, so a <p class="foot">
   inside a light band was picking up a black ground from a component it
   has nothing to do with. Local names have to be local. */
.dual .dual-note{margin: auto 0 0;padding-top:26px;font-size:13px;line-height:1.6;color:var(--ash)}
.dual > div:first-child .dual-note{color:var(--ink)}
.dual > div:first-child::selection,.dual > div:first-child *::selection{background:var(--ink);color:var(--paper)}

/* ---------- reviews, on a dark slab because this is the page's proof ---------- */
/* ---------- the review rail ----------
   Separate cards on their own grounds rather than one panel divided by
   hairlines, and a continuous run rather than a fixed three, so the wall
   of proof can grow as more excerpts come in without the layout caring.

   Same seam arithmetic as the audience band: the run is duplicated in
   script and the keyframe travels one copy plus one gap, not 50%. */
.revs{overflow:hidden;margin-top:clamp(30px,3.6vw,46px);
  /* integers, not a vw clamp. A fractional card width makes the two
     copies land on different subpixels and the loop stops being seamless:
     1611 differing pixels at the wrap with 27vw, 24 with a whole number. */
  --rev-gap:20px;
  -webkit-mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
          mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.revs-run{display:flex;gap:var(--rev-gap);width:max-content;padding-bottom:6px;
  animation:revsRun 37s linear infinite}
.revs:hover .revs-run,.revs:focus-within .revs-run{animation-play-state:paused}
@keyframes revsRun{
  from{transform:translate3d(0,0,0)}
  to  {transform:translate3d(calc(-50% - var(--rev-gap) / 2),0,0)} }
@media (prefers-reduced-motion: reduce){
  .revs{overflow-x:auto;scroll-snap-type:x mandatory}
  .revs-run{animation:none;width:auto}
  .revs article{scroll-snap-align:center}
}
.revs article{flex:0 0 auto;width:390px;border-radius:var(--r-card)}
@media(max-width:1180px){ .revs article{width:340px} }
@media(max-width:620px){  .revs{--rev-gap:14px} .revs article{width:284px} }
.revs .stars{margin-bottom:18px}
.revs-old{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--char);
  border-radius:var(--r-inner);overflow:hidden;margin-top:clamp(30px,3.6vw,44px)}
.revs article{background:var(--graphite);padding:26px 24px 28px;display:flex;flex-direction:column}
.revs .q1{font-size:19px;line-height:1.42;font-weight:500;letter-spacing:-.008em;color:var(--paper)}
.revs .q2{font-size:14.5px;line-height:1.6;color:var(--stone);margin-top:14px}
.revs .who{margin-top:auto;padding-top:24px;font-family:var(--ff-mono);font-size:12px;
  letter-spacing:.08em;color:var(--stone)}
.revs .who b{display:block;font-family:var(--ff);font-size:15px;font-weight:700;
  letter-spacing:-.006em;color:var(--paper);margin-bottom:5px}
.rev-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap}
.rev-head > div:first-child{flex:1 1 460px}
.rev-score{flex:0 0 auto}
.rev-score{display:flex;align-items:center;gap:14px}
.rev-score b{font-family:var(--ff-mono);font-weight:700;font-size:38px;line-height:1;
  letter-spacing:-.02em;color:var(--paper)}
.rev-score span{font-family:var(--ff-mono);font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ash)}

/* Mobile reviews: full-width band, roomy cards and native thumb scrolling. */
@media(max-width:720px){
  .reviews-section > .wrap{padding-inline:0}
  .reviews-section .slab{border-radius:0;padding-inline:0}
  .reviews-section .rev-head,.reviews-section .srcnote{margin-inline:var(--pad)}
  .reviews-section .revs{overflow-x:auto;--rev-gap:16px;margin-inline:var(--pad);padding-inline:0;scroll-padding-inline:0;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:thin;-webkit-mask:none;mask:none}
  .reviews-section .revs-run{animation:none;transform:none;width:max-content;padding-bottom:24px}
  .reviews-section .revs article{width:min(84vw,420px);padding:26px 24px 28px;scroll-snap-align:start}
  .reviews-section .revs article[aria-hidden="true"]{display:none}
  .reviews-section .revs .q2{font-size:16px}
}

/* ---------- how moving works ---------- */
/* the outer tiles give up their outer padding so the 01 and the last
   tile's right edge land on the grid lines, exactly as .probs does.
   These cards are the same colour as the band behind them, so the only
   thing drawing an edge is the hairline, and an inset first item reads
   as a misalignment rather than as padding. */
.steps > li:first-child{padding-left:0}
.steps > li:last-child{padding-right:0}
.sum .ig > div:nth-child(3n+1){padding-left:0}
.sum .ig > div:nth-child(3n){padding-right:0}
@media(max-width:1100px){
  .steps > li:nth-child(odd){padding-left:0}
  .steps > li:nth-child(even){padding-right:0}
}
@media(max-width:640px){
  .steps > li{padding-left:0;padding-right:0}
  .sum .ig > div{padding-left:0;padding-right:0}
}
/* identical to .probs, because they are the same device doing the same
   job two bands apart and they were not matching: .steps still had the
   rounded corners and the clipped hairlines, and no rules closing it top
   and bottom. Same padding scale, same closing rules, no radius. */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  margin-top:clamp(34px,4vw,52px);
  box-shadow:0 1px 0 var(--line),0 -1px 0 var(--line)}
.steps li{background:var(--paper);
  padding:clamp(28px,3.2vw,40px) 26px clamp(30px,3.4vw,44px)}
.st-n{font-family:var(--ff-mono);font-size:12px;letter-spacing:.12em;color:var(--fluro-deep)}
.steps h3{font-weight:700;font-size:19px;letter-spacing:-.008em;margin:14px 0 10px;line-height:1.24}
.steps p{font-size:14.5px;line-height:1.6;color:var(--slate)}
.tone-c .steps{background:var(--line)}
.tone-c .steps li{background:var(--paper-3)}

/* ---------- suitability ---------- */
/* It was already a true 50/50 across the full measure, 656.141px each.
   What made it look otherwise was the 34px of inner padding on the outer
   edges, holding the text off the grid line the heading above sits on.
   Same fix as the numbered tiles, and the 34px it gives back to the left
   column is what pulls the long line onto one line. The panels are also
   transparent now so the band's mesh reads through them, which is the
   whole point of putting a mesh there. */
.fit{display:grid;grid-template-columns:1fr 1fr;gap:0;
  margin-top:clamp(30px,3.6vw,46px);
  /* the divider is one drawn line rather than a gap in a coloured ground,
     because the panels have to be transparent for the band's mesh to read
     through them */
  background:linear-gradient(var(--line),var(--line)) 50% 0/1px 100% no-repeat;
  box-shadow:0 1px 0 var(--line),0 -1px 0 var(--line)}
.fit > div{background:transparent;
  padding:clamp(30px,3.4vw,42px) clamp(24px,2.8vw,34px) clamp(32px,3.6vw,44px)}
.fit > div:first-child{padding-left:0}
.fit > div:last-child{padding-right:0;padding-left:clamp(30px,3.4vw,44px)}

/* ---------- the band's mesh ----------
   A very quiet one. Two soft radials, Fluro warm at the top left and the
   grey green at the foot, both under 18%. It exists so the band is not a
   flat plane, and it lightens rather than darkens, so every contrast on
   it improves rather than degrades. Measured either way, worst case. */
.fitband{position:relative;isolation:isolate;overflow:hidden}
.fitband::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  /* every stop lightens. A grey green radial looked better and took the
     ground down to about #DBDACA, where Slate body copy measures 4.0:1
     and fails. Lightening only means every contrast on this band is at
     least as good as it is on plain Paper 3, whatever the mesh does.

     Turned over: the light is at the head of the band and the colour
     gathers at the foot. The heading sits on near white and the band
     warms as it goes down, which hands the reader on to the next tier
     rather than fading out under them. */
  background:
    radial-gradient(72% 46% at 50% -6%, rgba(252,251,247,.78), transparent 74%),
    radial-gradient(62% 60% at 14% 104%, rgba(235,255,0,.26), transparent 70%),
    radial-gradient(54% 52% at 84% 98%, rgba(235,255,0,.15), transparent 72%)}
.fitband > .wrap{position:relative;z-index:1}
.fit h3{font-size:20px;font-weight:700;letter-spacing:-.008em;margin-bottom:20px}
.fit ul{display:grid;gap:12px}
.fit li{position:relative;padding-left:28px;font-size:15px;line-height:1.5}
.fit li::before{content:'';position:absolute;left:0;top:2px;width:18px;height:18px}
.fit .good li::before{background:var(--ok);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.4 12.6 5 5L19.6 6.8'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.4 12.6 5 5L19.6 6.8'/%3E%3C/svg%3E") center/contain no-repeat}
.fit .check li{color:var(--slate)}
.fit .check li::before{background:var(--slate);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 7v6M12 16.6v.2'/%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 7v6M12 16.6v.2'/%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3C/svg%3E") center/contain no-repeat}

/* ---------- the FAQ pair ----------
   Nine questions in one full width column was a wall. Half the measure
   makes each line a comfortable read, and the empty half becomes the last
   piece of proof before the form: photography, the rating, the years.

   The media panel is sticky, so it holds while the questions scroll past
   it and the two halves stay in conversation instead of one running out
   long before the other. */
/* one third to two thirds, not half and half. At 50/50 the photograph
   was 628 wide and 785 tall and outweighed the ten questions beside it,
   which are the reason anyone is at this point on the page. A third is
   enough for the panel to carry its two chips and no more. */
.faqrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(30px,4vw,72px);
  align-items:start;margin-top:clamp(52px,6vw,84px)}
/* the questions carry their own top margin everywhere else on the site.
   In this row the picture is the thing they line up with, so it comes off
   and both columns start on the same line. */
.faqrow .faq{margin-top:0}
.faq-media{position:sticky;top:96px}
.faq-media .ustack{aspect-ratio:4/5;box-shadow:0 22px 50px rgba(24,25,16,.26),none}
.fm-chip{background:rgba(250,248,242,.9);
  -webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%);
  box-shadow:0 16px 34px rgba(24,25,16,.24);
  color:var(--ink);padding:14px 18px 15px;width:min(224px,62%)}
.fm-a{top:26px;left:-26px}
.fm-b{bottom:-26px;right:-24px}
.fm-chip b{display:block;font-family:var(--ff-mono);font-weight:700;font-size:30px;
  line-height:1;letter-spacing:-.03em;margin:10px 0 8px;font-variant-numeric:tabular-nums}
.fm-chip .fm-k{display:block;font-family:var(--ff-mono);font-size:10.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--char);line-height:1.4}
.fm-chip .stars i{background:var(--fluro-deep)}
@media(max-width:900px){
  .faqrow{grid-template-columns:1fr}
  .faq-media{position:static;max-width:460px;margin-bottom:clamp(56px,8vw,84px)}
  /* the chips come inside the frame's edges. Hanging them out on a narrow
     screen puts them past the page and gives the whole document a
     horizontal scrollbar, the same trap the montage fell into. */
  .fm-a{left:0}
  .fm-b{right:0}
}

/* ---------- plans ----------
   More air under the heading than the other bands get, because three
   priced cards are a decision rather than a list and the reader needs a
   beat before it. The three arrive in sequence for the same reason: they
   are the thing on this page most worth noticing. */
.plans{margin-top:clamp(52px,6.4vw,88px)}
.plans > div{opacity:0;transform:translateY(var(--rise,48px));
  transition:opacity var(--dur-rise) var(--ease) var(--d,0ms),
             transform var(--dur-rise) var(--ease) var(--d,0ms)}
.plans.is-in > div{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .plans > div{opacity:1;transform:none;transition:none}
}
/* Ordinary running copy across the grid. It was set in three columns to
   hold a readable measure, and it read as three separate notes rather
   than as one. Full width it is, which is what was asked for. */
#plans .microcopy{text-align:left;margin-left:0;margin-right:0;max-width:none;
  margin-top:clamp(32px,3.6vw,46px)}
/* Elevation, so the three cards read as objects on the band rather than
   as three painted rectangles. Light on the two, heavier on the one the
   reader is meant to choose, which is the same job the flag is doing. */
.plan{background:var(--paper);border-radius:var(--r-card);padding:30px 28px 32px;
  display:flex;flex-direction:column;height:100%;position:relative;
  box-shadow:0 2px 4px rgba(24,25,16,.05),0 14px 34px rgba(24,25,16,.09);
  transition:box-shadow var(--dur-reveal) var(--ease),translate var(--dur-reveal) var(--ease)}
.plan:hover{box-shadow:0 4px 8px rgba(24,25,16,.07),0 22px 48px rgba(24,25,16,.14);
  translate:0 -3px}
@media (prefers-reduced-motion: reduce){ .plan,.plan:hover{transition:none;translate:none} }

/* ---------- the recommended card ----------
   The field goes in one card, not behind all three. Behind all three it
   is a wash and it says nothing; inside this one it is a signal, and it
   is saying the same thing the flag above it says. It is also the only
   card whose ground the brand ramp actually suits: the ramp runs dark
   olive into Fluro, which is light ON Ink and a hole ON Paper.

   Free, not masked to a corner. The vignette is doing the readability
   work instead, so the field is whole and the type still sits on ground
   that is dark where the type is. */
/* No overflow:hidden on the card. The recommended flag straddles the top
   edge by design and clipping the card cut it in half. The field clips
   itself instead, which is where the clip belonged all along. */
.plan--lead{isolation:isolate;
  box-shadow:0 4px 10px rgba(24,25,16,.12),0 26px 60px rgba(24,25,16,.22),
             0 0 0 0 rgba(235,255,0,0)}
.plan--lead:hover{box-shadow:0 6px 14px rgba(24,25,16,.16),0 34px 76px rgba(24,25,16,.28)}
.pmesh{position:absolute;inset:0;z-index:0;pointer-events:none;
  overflow:hidden;border-radius:var(--r-card)}
.pmesh i{position:absolute;display:block;border-radius:50%;filter:blur(44px);opacity:.9;
  animation:pmDrift var(--pmp,19s) ease-in-out infinite alternate var(--pmd,0s)}
/* The ceiling is measured, not chosen. Stone body copy needs 4.5:1 and
   the ground it can tolerate tops out at 0.051 relative luminance, which
   is about #2E3312. Every blob is drawn under that, so the brightest
   frame of the drift still clears the bar under every line of type. */
.pmesh i:nth-child(1){inset:-30% -20% 44% 10%;background:#2C3110;--pmp:19s;--pmd:0s}
.pmesh i:nth-child(2){inset:-18% 34% 52% -24%;background:#23280C;--pmp:23s;--pmd:-8s}
.pmesh i:nth-child(3){inset:4% -28% 22% 40%;background:rgba(235,255,0,.10);--pmp:16s;--pmd:-5s}
.pmesh i:nth-child(4){inset:52% 6% -22% -10%;background:#1E2208;--pmp:27s;--pmd:-12s}
@keyframes pmDrift{
  from{transform:translate3d(-6%,3%,0) scale(1)}
  to  {transform:translate3d(8%,-5%,0) scale(1.16)}}
/* the vignette. Ink at the edges and through the middle third, so every
   line of type is on ground the field cannot lift. */
/* a light vignette only. The blobs are already inside the contrast
   budget, so this is shaping the field rather than rescuing it. */
.pmesh::after{content:'';position:absolute;inset:0;
  background:radial-gradient(128% 94% at 50% 44%,rgba(16,17,8,0) 0%,rgba(16,17,8,.2) 56%,rgba(16,17,8,.5) 100%)}
/* Both exclusions are load bearing, and this is the fifth time the same
   trap has bitten this build. A blanket `> *{position:relative}` rule
   outranks any absolutely positioned child: it dropped the field into
   flow, where it rendered as nothing, and it dropped the recommended
   flag into flow, where it went from a pill straddling the top edge to a
   full width bar inside the card. Neither failure says anything in the
   console. */
.plan--lead > *:not(.pmesh):not(.p-flag){position:relative;z-index:1}
@media (prefers-reduced-motion: reduce){ .pmesh i{animation:none} }
.p-flag{position:absolute;top:-13px;right:20px;font-family:var(--ff-mono);font-size:10.5px;
  font-weight:700;letter-spacing:.12em;text-transform:uppercase;background:var(--paper);
  color:var(--ink);padding:8px 13px;border-radius:var(--r-pill)}
/* Paper, not Fluro. The accent on this band belongs to the button that
   converts, and one flag plus one button would be two. */
.plan h3{font-size:26px;font-weight:700;letter-spacing:-.01em;margin:0 0 10px}
.plan .p-sub{font-size:15px;line-height:1.55;color:var(--slate)}
@media(min-width:1000px){.plan .p-sub{min-height:4.65em}}
.p-help{margin-top:22px;font-size:16px;line-height:1.6}
.p-addon{max-width:none}
.p-help a{text-decoration:underline;text-underline-offset:3px}
.p-price{display:flex;align-items:baseline;gap:10px;margin:24px 0 10px}
.p-price .p-standard{font-size:22px;line-height:1;color:var(--slate);text-decoration-thickness:1.5px}
.p-price b{font-size:50px;line-height:1;letter-spacing:-.02em;font-weight:500}
.p-price span{font-family:var(--ff-mono);font-size:13px;color:var(--slate)}
.p-terms{font-family:var(--ff-mono);font-size:11.5px;line-height:1.62;letter-spacing:.02em;
  color:var(--slate);margin-bottom:24px}
.plan ul{display:grid;gap:11px;margin-bottom:26px}
.plan li{position:relative;padding-left:26px;font-size:14.5px;line-height:1.5;color:var(--slate)}
.plan li::before{content:'';position:absolute;left:0;top:1px;width:17px;height:17px;
  background:var(--fluro-deep);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.4 12.6 5 5L19.6 6.8'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.4 12.6 5 5L19.6 6.8'/%3E%3C/svg%3E") center/contain no-repeat}
.plan li.none{color:var(--slate)}
.plan li.none::before{background:var(--slate);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E") center/contain no-repeat}
.plan .btn{margin-top:auto;align-self:flex-start}

/* the recommended plan is Ink, so it separates by lightness rather than hue.
   See the tier study, treatment A4. */
.plan--lead{background:var(--ink)}
.plan--lead h3,.plan--lead .p-price b{color:var(--paper)}
/* Stone, not Ash, on this card only. Ash measures 4.78:1 on flat Ink,
   which is the whole of its headroom, and there is a moving field behind
   it now. Stone holds through every frame of the drift. */
.plan--lead .p-sub,.plan--lead li,.plan--lead .p-price span,.plan--lead .p-terms{color:var(--stone)}
.plan--lead .p-standard{color:var(--stone)}
.plan--lead li::before{background:var(--fluro)}
.plan--lead .btn{background:var(--fluro);color:var(--ink)}
.plan--lead .btn:hover{background:var(--fluro-lift)}

/* ---------- FAQ ---------- */
.faq{margin-top:clamp(28px,3.4vw,44px);display:grid;gap:1px;background:var(--line);
  border-radius:var(--r-card);overflow:hidden}
.faq details{background:var(--paper)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:20px;cursor:pointer;
  padding:22px 26px;font-family:var(--ff);font-weight:700;font-size:18px;letter-spacing:-.01em;
  list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq .fq{width:22px;height:22px;color:var(--slate);flex:0 0 auto;
  transition:transform 420ms var(--ease)}
.faq .fq svg{width:100%;height:100%;display:block}
.faq p{padding:0 26px 26px;font-size:15px;line-height:1.66;color:var(--slate);max-width:78ch}
/* ---------- the answers open and close ----------
   Driven from script, not from ::details-content. The CSS only route
   parses and computes correctly in current Chrome, interpolate-size is
   inherited and the transition is on the pseudo, and it still does not
   start: checked with getAnimations(), which reports the summary's
   padding transition and nothing on the pseudo at all. So the answer
   snapped, which is what it did before.

   A wrapper the script can measure and animate does work, everywhere,
   and it degrades to the native snap if script is off. The close is held
   open until the animation finishes, so the state class rather than the
   open attribute drives the chevron. */
.faq-body{overflow:hidden}
.faq summary{transition:padding-bottom 420ms var(--ease)}
.faq details[open] .fq{transform:rotate(180deg)}
.faq details.is-closing .fq{transform:rotate(0)}
.faq details[open] summary{padding-bottom:10px}
.faq details.is-closing summary{padding-bottom:22px}

/* ---------- the form ---------- */
.conv{background:var(--ink-deep);color:var(--paper);
  position:relative;overflow:hidden;isolation:isolate}
/* ---------- the field under the form ----------
   Free, not clipped to a shape and not masked to an edge. It sits in the
   quiet quarter of the band, below the card and to the right of the
   steps, and it runs behind everything including the card. The card is
   opaque Paper, so what the reader actually sees is the field breaking
   out from under it, which is the effect.

   Same contrast ceiling as the recommended plan card: Ash body copy on
   this band needs 4.5:1 and cannot take a ground brighter than about
   #2E3312, so every blob is drawn under that. It is a glow, not a light. */
.cmesh{position:absolute;z-index:0;pointer-events:none;
  left:42%;right:2%;top:26%;bottom:2%}
.cmesh i{position:absolute;display:block;border-radius:50%;filter:blur(60px);
  animation:cmDrift var(--cmp,24s) ease-in-out infinite alternate var(--cmd,0s)}
.cmesh i:nth-child(1){inset:-6% 24% 34% 4%;background:#2E3312;--cmp:24s;--cmd:0s}
.cmesh i:nth-child(2){inset:22% -2% 6% 34%;background:#262B0C;--cmp:31s;--cmd:-11s}
.cmesh i:nth-child(3){inset:34% 40% 8% -4%;background:rgba(235,255,0,.09);--cmp:19s;--cmd:-6s}
.cmesh i:nth-child(4){inset:2% 6% 52% 42%;background:#1F2409;--cmp:27s;--cmd:-15s}
@keyframes cmDrift{
  from{transform:translate3d(-5%,3%,0) scale(1)}
  to  {transform:translate3d(7%,-4%,0) scale(1.14)}}
/* :not(.cmesh), or the blanket rule drops the field into flow */
.conv > *:not(.cmesh){position:relative;z-index:1}
@media (prefers-reduced-motion: reduce){ .cmesh i{animation:none} }
@media(max-width:900px){ .cmesh{left:8%;top:52%} }
.conv h2{color:var(--paper)}
/* Stone, not Ash, now the band carries a live field. Ash is 4.78:1 on
   flat Ink and has no headroom left once anything moves behind it. */
/* Vertically centred against the form. The card is the tall object in
   this row and the copy is the short one, so top aligning them left the
   left column stranded at the ceiling. */
.conv .row{align-items:center}
.conv .lede{color:var(--stone);margin-top:24px}
.conv h2{margin-top:16px}
.conv .safe{margin-top:34px;display:flex;align-items:flex-start;gap:12px;font-size:14.5px;
  line-height:1.55;color:var(--stone)}
.conv .safe i{width:19px;height:19px;flex:0 0 auto;color:var(--ok-dark);margin-top:2px}
.conv .safe i svg{width:100%;height:100%;display:block}
/* Hairlines, not a box. The boxed version carried 20px of its own left
   padding, so the three steps sat inset from the headline and the lede
   above them and the column had two left edges. Same device as the
   tiles further up: a one pixel gap over a line coloured ground, with
   the top and bottom rules drawn by a shadow.

   One colour for both parts. A Fluro numeral against Ash text made the
   count the loudest thing in the column, and it is the least important
   thing in it. Size carries the numerals instead. */
/* Transparent cells, so the field behind the band runs through the steps
   instead of stopping at them.

   That means giving up the gap over a coloured ground, because that
   device needs the cells to paint: transparent cells and the whole block
   turns into a pale panel with no rules in it. The rules are drawn per
   row instead, as an inset shadow inside each row's own box. Still not a
   border, and it works on a ground it cannot see. */
.next{display:grid;gap:0;background:none;
  margin-top:clamp(30px,3.6vw,44px);
  box-shadow:inset 0 1px 0 var(--line-dark)}
/* opaque, not transparent. The hairline device is a gap showing a line
   coloured ground through it, so the cells have to paint. Made these
   transparent to let the field through and the whole block turned into a
   pale panel with no rules in it. */
.next li{background:none;padding:21px 0 22px;display:flex;gap:22px;align-items:baseline;
  font-size:15px;line-height:1.5;color:var(--stone);
  box-shadow:inset 0 -1px 0 var(--line-dark)}
/* Fluro on the count. It is the one place on this band where a number is
   the structure rather than the content, and Fluro on Ink is 15.9:1, so
   it can carry the weight without the type getting bigger again. */
.next li b{font-family:var(--ff-mono);font-size:21px;font-weight:700;letter-spacing:-.02em;
  color:var(--fluro);flex:0 0 auto;line-height:1;font-variant-numeric:tabular-nums}

.fcard{background:var(--paper);color:var(--ink);border-radius:var(--r-card);
  padding:clamp(26px,3vw,36px) clamp(24px,2.8vw,34px) clamp(28px,3.2vw,38px)}
.fprog{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px}
.fprog .lbl{font-family:var(--ff-mono);font-size:11.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--slate)}
.fbar{display:flex;gap:5px;flex:0 0 92px}
.fbar i{display:block;height:4px;flex:1;border-radius:100px;background:var(--paper-3)}
.fbar i.on{background:var(--ink)}
.fcard h3{font-size:23px;font-weight:700;letter-spacing:-.01em;margin-bottom:20px}
.field{display:block;margin-bottom:18px}
/* A lead form wants sentence case labels, not the mono micro-caps the
   brand form component uses. Scoped to this card so nothing else moves.
   Worth considering as the default, see the note to Matt. */
.fcard .field > span{display:block;font-family:var(--ff);font-size:14.5px;font-weight:500;
  letter-spacing:0;text-transform:none;color:var(--ink);margin-bottom:8px}
.fcard .field > span em{font-style:normal;color:var(--slate);font-weight:400}
.fcard .field input,.fcard .field select,.fcard .field textarea{
  width:100%;background:var(--paper-3);border-radius:var(--r-inner);
  padding:15px 16px;font-size:16px;color:var(--ink);
  -webkit-appearance:none;appearance:none}
.field textarea{min-height:96px;resize:vertical}
.field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2368694F' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;background-size:19px;
  padding-right:46px}
/* Stone would be 1.9:1 on Paper 3. Every field has a real label above it,
   so a readable placeholder cannot be mistaken for a value. */
.fcard .field input::placeholder,.fcard .field textarea::placeholder{color:var(--slate);opacity:1}
/* the browser's own fieldset border. It is the only rule on the page and
   it framed one question out of four for no reason. */
.fcard fieldset{border:0;margin:0 0 18px;padding:0;min-width:0}
.choice{display:flex;gap:10px;flex-wrap:wrap}
.choice label{position:relative;flex:1 1 90px}
.choice input,.consent input{position:absolute;opacity:0;width:0;height:0;padding:0;pointer-events:none}
.choice span{display:block;text-align:center;background:var(--paper-3);border-radius:var(--r-inner);
  padding:14px 12px;font-size:15px;cursor:pointer;transition:background var(--dur-hover)}
.choice label:hover span{background:#E3E0CE}
.choice input:checked + span{background:var(--ink);color:var(--paper)}
.choice input:focus-visible + span{outline:2px solid var(--ink);outline-offset:2px}
.consent{position:relative;display:flex;gap:12px;align-items:flex-start;margin:6px 0 22px;
  font-size:14px;line-height:1.55;color:var(--slate);cursor:pointer}

.consent .box{flex:0 0 auto;width:24px;height:24px;border-radius:7px;background:var(--paper-3);
  position:relative;margin-top:1px}
.consent input:checked + .box{background:var(--ink)}
.consent input:focus-visible + .box{outline:2px solid var(--ink);outline-offset:2px}
.form-privacy{margin:0 0 22px;font-size:14px;line-height:1.55}
.form-privacy a{text-decoration:underline;text-underline-offset:3px}
.consent .box::after{content:'';position:absolute;inset:5px;background:var(--fluro);opacity:0;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.4 12.6 5 5L19.6 6.8'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.4 12.6 5 5L19.6 6.8'/%3E%3C/svg%3E") center/contain no-repeat}
.consent input:checked + .box::after{opacity:1}
.fstep[hidden]{display:none}
/* Three times the gap the fields give each other. The button ends the
   step, so it should not read as the next thing in the list, and the
   card has the height to spend on saying so. */
.facts{display:flex;gap:10px;flex-wrap:wrap;margin-top:clamp(30px,3.6vw,46px)}
/* wider than the label needs. A lead form's one action should look like
   the end of the step, not like a chip sitting under it. */
.fcard .facts .btn{padding-left:44px;padding-right:44px}
.ferr{font-size:14px;color:var(--alert);margin-bottom:16px}
.ferr[hidden]{display:none}
.fdone{text-align:left}
.fdone .tick{width:46px;height:46px;border-radius:14px;background:var(--ok);color:var(--paper);
  display:grid;place-items:center;margin-bottom:20px}
.fdone .tick svg{width:24px;height:24px;display:block}

/* ---------- footer ---------- */
/* the same ground as the conversion band above it, so the two read as
   one close rather than as two dark bands with a seam between them.

   position and z-index are not decoration. The hero is sticky for the
   whole document and main sits above it on z-index 2, which hides it.
   The footer is outside main, so as a static element it painted BELOW a
   positioned one and the pinned hero came through over the top of it at
   any viewport tall enough to hold the hero whole. It has to join the
   stack to stay visible. */
.foot{position:relative;z-index:14;
  background:var(--ink-deep);color:var(--paper);padding:clamp(44px,5.4vw,68px) 0 clamp(30px,3.6vw,46px)}
/* the wordmark shrink wraps inside the block so the mark can hang off
   its real right edge, the same construction the nav bar uses */
/* height first, width auto. Set from the width the box came out 43.49px
   tall, so every horizontal stem in the wordmark straddled a half pixel
   and the whole mark softened. A whole number height puts them back on
   the pixel grid. */
/* inline-block, not block. A block level box with width:auto fills its
   column, so the mark hung off the far right of the footer instead of
   off the wordmark's own edge and left the view entirely. */
.foot .f-word{display:inline-block;height:44px;width:auto;color:var(--fluro)}
.foot .f-word .mk{position:relative;display:block;height:100%}
.foot .f-word .tm{position:absolute;top:0;left:100%;margin-left:6px;
  font-family:var(--ff);font-weight:700;font-size:13px;line-height:1;
  color:currentColor;opacity:.8}
/* the rating and the two links sit in the same six columns the form card
   occupies above them, so the foot of the page lines up with its head */
/* the same doubled gap the wordmark column takes, so the two sides of
   the footer breathe together */
.foot .f-right{display:flex;flex-direction:column;align-items:flex-end;
  gap:clamp(38px,4.6vw,60px)}
.foot .f-mark{display:block;width:clamp(44px,4.4vw,54px);color:var(--fluro)}
.foot .f-mark svg{width:100%;height:auto;display:block}
.foot .f-line{display:flex;align-items:center;justify-content:space-between;
  width:100%;gap:24px;flex-wrap:wrap}
@media(max-width:860px){
  .foot .f-right{align-items:flex-start;margin-top:clamp(30px,5vw,42px)}
}
.foot .f-word svg{height:100%;width:auto;shape-rendering:geometricPrecision}
.foot .meta{margin-top:34px;color:var(--stone);text-transform:none;letter-spacing:.02em;
  font-size:13px;line-height:1.6;max-width:44ch}
.foot .lnks{display:flex;gap:20px;flex-wrap:wrap;font-size:14px;color:var(--ash)}
.foot .lnks a{text-decoration:underline;text-underline-offset:4px}
.foot .lnks a:hover{color:var(--fluro)}
.foot .grow{display:flex;align-items:center;gap:12px;font-family:var(--ff-mono);font-size:13px;
  letter-spacing:.05em;color:var(--ash)}
.foot .grow b{color:var(--paper);font-weight:500}
.foot .rule{height:1px;background:var(--line-dark);margin:clamp(30px,3.6vw,44px) 0}
.foot .legal{font-size:12.5px;line-height:1.65;color:var(--stone);max-width:80ch}

/* ---------- the mobile CTA. Sits under the content, never over it ---------- */
.mcta{position:fixed;left:0;right:0;bottom:0;z-index:50;display:none;
  padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom));
  background:rgba(24,25,16,.86);
  -webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);
  box-shadow:inset 0 1px 0 rgba(250,248,242,.12)}
.mcta .in{display:flex;align-items:center;gap:14px;justify-content:space-between}
.mcta .rate{display:flex;align-items:center;gap:8px;font-family:var(--ff-mono);font-size:12px;
  letter-spacing:.04em;color:rgba(250,248,242,.74);flex:0 0 auto}
.mcta .rate b{color:var(--paper);font-weight:500}
.mcta .btn{font-size:12px;padding-left:18px;padding-right:18px}
@media(max-width:430px){ .mcta .rate .rn{display:none} }
.mcta .btn{flex:0 0 auto}
@media(max-width:720px){
  .mcta .in{gap:clamp(8px,2.5vw,12px)}
  .mcta .btn{font-size:clamp(10px,2.8vw,11px);line-height:1.2;letter-spacing:.04em;padding:10px 12px;min-height:44px;justify-content:center}
}
@media(max-width:820px){
  .mcta{display:block}
  body{padding-bottom:82px}   /* the bar reserves its own space, it never covers copy */
}

/* ---------- responsive ---------- */
@media(max-width:1100px){
  .probs,.steps{grid-template-columns:1fr 1fr}
}
@media(max-width:1080px){
  .hero-in{grid-template-columns:minmax(0,1fr)}
  .hero h1{max-width:19ch}
  /* stacked, the card takes a landscape crop and the panel pulls in so
     nothing hangs over the page padding */
  .ucards{justify-self:start;max-width:520px;margin:clamp(44px,6vw,60px) 0 50px}
  .ustack{aspect-ratio:16/10}
  .uf-for{left:-20px;bottom:-26px}
}
@media(max-width:820px){
  .dual,.fit{grid-template-columns:1fr}
  .fit > div{padding-left:0;padding-right:0}

  .hero{min-height:auto;padding-bottom:0}
}
@media(max-width:560px){
  /* below this there is no margin left to hang into, so the panel sits
     flush with the left edge of the frame */
  .ucards{margin:clamp(38px,9vw,50px) 0 62px}
  .ustack{aspect-ratio:4/3}
  .udots{top:14px;bottom:auto;left:14px;right:auto;transform:none;flex-direction:row}
  .udots i{width:17px;height:3px}
  .uf-for{left:0;bottom:-30px;width:min(246px,88%)}
}
@media(max-width:640px){
  .probs,.steps{grid-template-columns:1fr}
  .faq summary{font-size:16.5px;padding:18px 20px}
  .faq p{padding:0 20px 22px}
}

/* Mobile stacks have no inner column gutters. Keep floating proof
   attached to its photograph and reserve CTA clearance inside the footer. */
@media(max-width:720px){
  .steps{grid-template-columns:1fr}
  .fit{background:none} /* No vertical column divider in the mobile stack. */
  .steps > li:nth-child(n),.fit > div:nth-child(n){padding-left:0;padding-right:0}
  .faqrow{margin-top:40px}
  /* Clear the desktop sticky inset when switching to relative positioning. */
  .faq-media{position:relative;top:auto;margin-bottom:26px}
  .faq-media .fm-a{top:-16px;left:0}
  .faq-media .fm-b{bottom:-26px;right:0}
  body{padding-bottom:0}
  .foot{padding-bottom:calc(112px + env(safe-area-inset-bottom))}
}

/* ============================================================
   THE AUDIENCE BAND
   Full bleed, one continuous run to the left, duplicated once so
   the loop is seamless. It is a translate on a fixed-width row
   rather than a scroll position, so nothing fights the page's own
   scrolling and there is no jump at the wrap.
   ============================================================ */
.ustrip{--ub-gap:20px;margin-top:clamp(38px,4.6vw,60px);margin-bottom:clamp(46px,5.4vw,72px);
  overflow:hidden;
  /* the ends fade into the band rather than being cut by it */
  -webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.ustrip-run{display:flex;gap:var(--ub-gap);width:max-content;padding-bottom:8px;
  animation:ustrip 64s linear infinite}
.ustrip:hover .ustrip-run,.ustrip:focus-within .ustrip-run{animation-play-state:paused}
/* Not -50%. With the run duplicated there are two copies and one gap
   between them, so half the total width lands half a gap short of the
   second copy's first card and the loop visibly jumps. The distance that
   actually repeats is one copy plus one gap, which is 50% plus half a
   gap. Verified by diffing the first and last frames pixel for pixel. */
@keyframes ustrip{
  from{ transform:translate3d(0,0,0) }
  to  { transform:translate3d(calc(-50% - var(--ub-gap) / 2),0,0) } }

/* Whole numbers, in steps. A clamp on vw resolves to a fraction at most
   viewport widths, the two copies of the run then land on different
   subpixels, and the loop stops being seamless: the same fault that was
   measured on the review rail at 1611 differing pixels. Integers at every
   breakpoint bring it back to two. */
.ub{position:relative;margin:0;flex:0 0 auto;width:290px;
  aspect-ratio:4/5;border-radius:var(--r-card);overflow:hidden;background:var(--graphite)}
@media(max-width:1180px){ .ub{width:258px} }
@media(max-width:820px){  .ub{width:232px} }
.ub img{width:100%;height:100%;object-fit:cover;display:block;
  color:transparent;filter:saturate(.94) contrast(1.03)}
.ub::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(16,17,8,0) 44%,rgba(16,17,8,.78) 100%)}
.ub figcaption{position:absolute;left:18px;right:18px;bottom:16px;z-index:2;
  font-size:15px;font-weight:500;letter-spacing:-.008em;color:var(--paper)}
/* the white chip is the Kinsta device. One per card, naming one thing
   Care actually does, sitting on the picture rather than beside it. */
.ub-chip{position:absolute;left:14px;top:14px;z-index:2;display:inline-flex;align-items:center;
  gap:8px;max-width:calc(100% - 28px);padding:8px 13px 8px 10px;border-radius:var(--r-pill);
  /* glass, not a sticker. Sampled over every chip in the run at eight
     positions with the marquee paused: the ground never falls below
     #E1DCD4, which is 13.0:1 to the Ink label and 4.1:1 to the green
     icon. Both clear, so 86% holds. */
  background:rgba(250,248,242,.86);color:var(--ink);
  -webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);
  box-shadow:0 8px 20px rgba(24,25,16,.24);
  font-family:var(--ff-mono);font-size:10.5px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;line-height:1.2}
.ub-chip svg{width:15px;height:15px;flex:0 0 auto;color:var(--ok)}
/* Every third chip drops to the foot of its card so the run does not read
   as one straight line of chips passing the eye. The position is a class
   in the markup rather than nth-child, because the run is duplicated for
   the marquee: with ten cards the copy holds children 11 to 20, and
   nth-child(3n) then picks a different card in each copy and the seam
   stops matching. A class is cloned with the node. */
.ub.ub-low .ub-chip{top:auto;bottom:56px}

@media (prefers-reduced-motion: reduce){
  /* no marquee. It becomes an ordinary row you scroll yourself. */
  .ustrip{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
  .ustrip-run{animation:none;width:auto}
  .ub{scroll-snap-align:center}
}
@media(max-width:640px){
  .ustrip{--ub-gap:14px}
  .ub{width:206px}
  .ustrip-run{animation-duration:46s}
}

}
@media (min-width: 721px) and (max-width: 1460px) {
.wrap{max-width:var(--shell);margin:0 auto;padding:0 var(--pad);}
.hero{position:relative;min-height:min(58.904109589vw,calc(100svh * tan(atan2(100vw, 1460px))));display:flex;flex-direction:column;overflow:hidden;background:#101108;color:var(--paper);padding:5.0684931507vw 0 0;}
#gl{position:absolute;inset:0;width:100%;height:100%;display:block;}
.hero .fb{position:absolute;inset:0;display:none;background:repeating-linear-gradient(90deg,rgba(0,0,0,.5) 0 0.2054794521vw,transparent 0.2054794521vw 0.7534246575vw),
             radial-gradient(58% 74% at 74% 52%,#F7FF9E 0%,#EBFF00 26%,#5C6B00 52%,#101108 80%);}
.hero.nogl .fb{display:block;}
.hero.nogl #gl{display:none;}
.hero .scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,rgba(16,17,8,.94) 0%,rgba(16,17,8,.66) 40%,rgba(16,17,8,0) 70%),
             linear-gradient(to top,rgba(16,17,8,.9) 0%,rgba(16,17,8,0) 34%);}
.hero-body{position:relative;z-index:5;flex:1;display:flex;align-items:center;padding:clamp(1.6438356164vw,calc(3.6vh * tan(atan2(100vw, 1460px))),3.0136986301vw) 0 clamp(4.3835616438vw,calc(9.5vh * tan(atan2(100vw, 1460px))),8.4931506849vw);}
.hero-in{max-width:var(--shell);margin:0 auto;width:100%;padding:0 var(--pad);display:grid;grid-template-columns:minmax(0,52.0547945205vw) 28.7671232877vw;justify-content:space-between;gap:clamp(2.7397260274vw,4vw,4.9315068493vw);align-items:center;}
.hero h1{margin:0;font-size:clamp(2.602739726vw,4.2vw,4.2465753425vw);font-weight:500;letter-spacing:-.017em;line-height:1.02;max-width:23ch;}
.hero .eyebrow{margin-bottom:clamp(2.0547945205vw,3.6vw,3.2876712329vw);}
.hero-actions{display:flex;align-items:center;gap:0.8219178082vw 2.0547945205vw;flex-wrap:wrap;margin-top:clamp(3.1506849315vw,5.8vw,5.4794520548vw);}
.hero-link{font-family:var(--ff-mono);font-size:0.8561643836vw;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(250,248,242,.76);white-space:nowrap;padding:0.4109589041vw 0 0.4794520548vw;background:linear-gradient(currentColor,currentColor) bottom left/100% 0.0684931507vw no-repeat;transition:color var(--dur-hover) ease;}
.hero-link:hover{color:var(--fluro);}
.ucards{position:relative;justify-self:end;width:100%;max-width:28.7671232877vw;}
.ustack{position:relative;aspect-ratio:3/4;border-radius:var(--r-card);overflow:hidden;background:var(--graphite);box-shadow:0 1.7808219178vw 4.1095890411vw rgba(0,0,0,.44),inset 0 0.0684931507vw 0 rgba(250,248,242,.16);}
.ucard{position:absolute;inset:0;margin:0;opacity:0;transform:scale(1.045);transition:opacity 900ms var(--ease),transform 2600ms var(--ease);}
.ucard.on{opacity:1;transform:scale(1);}
.ucard img{width:100%;height:100%;object-fit:cover;display:block;color:transparent;background:var(--graphite);filter:saturate(.94) contrast(1.03);}
.ucard::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(16,17,8,.3) 0%,rgba(16,17,8,0) 24%,
             rgba(16,17,8,0) 62%,rgba(16,17,8,.62) 100%);}
.udots{position:absolute;right:0.8904109589vw;top:50%;transform:translateY(-50%);z-index:4;display:flex;flex-direction:column;gap:0.4109589041vw;}
.udots i{width:0.2054794521vw;height:1.1643835616vw;border-radius:0.1369863014vw;background:rgba(250,248,242,.34);transition:background var(--dur-hover) linear;}
.udots i.on{background:rgba(250,248,242,.88);}
.ufloat{position:absolute;z-index:5;border-radius:var(--r-inner);}
.uf-for{left:-2.0547945205vw;bottom:-1.9178082192vw;width:17.9452054795vw;color:var(--ink);background:rgba(250,248,242,.88);-webkit-backdrop-filter:blur(1.5068493151vw) saturate(150%);backdrop-filter:blur(1.5068493151vw) saturate(150%);padding:1.095890411vw 1.2328767123vw 1.1643835616vw;box-shadow:0 1.3698630137vw 3.0136986301vw rgba(0,0,0,.36),inset 0 0.0684931507vw 0 rgba(250,248,242,.5);}
.uf-for .uf-k{display:block;font-family:var(--ff-mono);font-size:0.6849315068vw;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--char);}
.uf-for .uf-lines{position:relative;display:block;margin-top:0.6164383562vw;}
.uf-for .uf-lines b{display:block;font-size:1.0616438356vw;font-weight:500;line-height:1.3;letter-spacing:-.008em;opacity:0;transition:opacity 600ms var(--ease);}
.uf-for .uf-lines b + b{position:absolute;inset:0;}
.uf-for .uf-lines b.on{opacity:1;}
.uf-for .uf-price{display:flex;align-items:baseline;gap:0.6849315068vw;margin-top:1.095890411vw;padding-top:1.0273972603vw;background:linear-gradient(rgba(24,25,16,.16),rgba(24,25,16,.16)) top left/100% 0.0684931507vw no-repeat;}
.uf-for .uf-price b{font-family:var(--ff-mono);font-weight:700;font-size:1.6438356164vw;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;margin-left:auto;}
.uf-for .uf-price b em{font-style:normal;font-size:0.8219178082vw;font-weight:400;letter-spacing:0;color:var(--char);margin-left:0.2054794521vw;}
@keyframes ufloatA{
0%,100%{transform:translate3d(0,0,0);}
50%{transform:translate3d(0,-0.4794520548vw,0);}
}
@keyframes ufloatB{
0%,100%{transform:translate3d(0,0,0);}
50%{transform:translate3d(0,-0.8219178082vw,0);}
}
.ustack{animation:ufloatA 7s ease-in-out infinite;}
.uf-for{animation:ufloatB 9s ease-in-out infinite .8s;}
@media (prefers-reduced-motion: reduce){
.ustack,.uf-for{animation:none;}
}
main > *{position:relative;}
.pin{position:sticky;top:var(--stick,0vw);}
.hero.pin{z-index:0;}
main{position:relative;z-index:2;}
.pinzone{position:relative;}
.pinzone > *:not(.pin){position:relative;}
.pinzone > *:nth-child(1){z-index:1;}
.pinzone > *:nth-child(2){z-index:2;}
main > *:nth-child(1){z-index:1;}
main > *:nth-child(2){z-index:2;}
main > *:nth-child(3){z-index:3;}
main > *:nth-child(4){z-index:4;}
main > *:nth-child(5){z-index:5;}
main > *:nth-child(6){z-index:6;}
main > *:nth-child(7){z-index:7;}
main > *:nth-child(8){z-index:8;}
main > *:nth-child(9){z-index:9;}
main > *:nth-child(10){z-index:10;}
main > *:nth-child(11){z-index:11;}
main > *:nth-child(12){z-index:12;}
main > *:nth-child(n/**/+13){z-index:13;}
.sheet{border-radius:var(--r-band,2.0547945205vw) var(--r-band,2.0547945205vw) 0 0;}
.pinzone > .sheet:first-child{box-shadow:0 -1.7808219178vw 4.7945205479vw rgba(16,17,8,.5);}
.pinzone > .sheet ~ .sheet, main > .sheet{box-shadow:0 -1.3698630137vw 3.1506849315vw rgba(24,25,16,.16);}
.hero .dim{position:absolute;inset:0;z-index:6;pointer-events:none;background:#0B0C06;opacity:0;}
@supports (animation-timeline: scroll()){
@media (prefers-reduced-motion: no-preference){
.hero .dim{animation:heroDim linear both;animation-duration:auto;animation-timeline:scroll(root block);animation-range:0 calc(92vh * tan(atan2(100vw, 1460px)));}
@keyframes heroDim{
to{opacity:.62;}
}
}
}
@media (prefers-reduced-motion: reduce){
.hero{position:static;}
main > section:first-child{box-shadow:none;}
}
main > .reveal{z-index:0;}
.reveal{--tuck:clamp(7.5342465753vw,calc(15vh * tan(atan2(100vw, 1460px))),13.0136986301vw);position:relative;margin-top:calc(-1 * var(--tuck));min-height:clamp(39.3835616438vw,calc(70vh * tan(atan2(100vw, 1460px))),52.0547945205vw);background:#101108;color:var(--paper);border-radius:0;isolation:isolate;}
#gl2{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;}
.reveal .cb-fb{position:absolute;inset:0;z-index:0;display:none;background:repeating-linear-gradient(90deg,rgba(0,0,0,.5) 0 0.2054794521vw,transparent 0.2054794521vw 0.7534246575vw),
             radial-gradient(64% 96% at 40% 46%,#F7FF9E 0%,#EBFF00 24%,#5C6B00 54%,#101108 82%);}
.reveal.nogl .cb-fb{display:block;}
.reveal.nogl #gl2{display:none;}
.reveal .cb-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(96deg,rgba(16,17,8,.95) 0%,rgba(16,17,8,.86) 30%,
             rgba(16,17,8,.46) 58%,rgba(16,17,8,.2) 78%,rgba(16,17,8,.5) 100%),
             linear-gradient(to top,rgba(16,17,8,.9) 0%,rgba(16,17,8,0) 46%);}
.reveal-in{position:relative;top:auto;z-index:2;min-height:clamp(27.397260274vw,calc(51vh * tan(atan2(100vw, 1460px))),36.301369863vw);display:flex;align-items:center;padding:calc(var(--tuck) + clamp(2.0547945205vw,calc(4.2vh * tan(atan2(100vw, 1460px))),4.1095890411vw)) 0 clamp(1.3698630137vw,calc(2.6vh * tan(atan2(100vw, 1460px))),2.602739726vw);}
.reveal-in > .wrap{width:100%;}
@media (prefers-reduced-motion: reduce){
.reveal-in{position:relative;}
}
.cb-grid{display:grid;grid-template-columns:minmax(0,1fr) clamp(27.397260274vw,42vw,41.095890411vw);gap:clamp(2.0547945205vw,4vw,4.9315068493vw);align-items:center;}
.cb-in{max-width:none;}
.reveal .eyebrow{margin-bottom:clamp(1.5068493151vw,2.6vw,2.1917808219vw);}
.cb-line{margin:0;font-size:clamp(1.8493150685vw,3.15vw,3.0821917808vw);font-weight:500;letter-spacing:-.017em;line-height:1.06;color:var(--paper);max-width:24ch;}
.reveal .btn{margin-top:clamp(2.0547945205vw,3.6vw,3.1506849315vw);}
.cb-art{position:relative;width:100%;aspect-ratio:15/9;justify-self:end;z-index:2;overflow:clip;overflow-clip-margin:4.9315068493vw;}
.cb-art figure{position:absolute;margin:0;overflow:hidden;border-radius:var(--r-card);background:var(--graphite);translate:var(--fx,0) var(--fy,0);opacity:0;transition:translate 1000ms var(--ease) var(--d,0ms),
             opacity 700ms var(--ease) var(--d,0ms);}
.cb-art.is-in figure{translate:0 0;opacity:1;}
.cb-art .cb-big{--fy:4.5205479452vw;--d:0ms;}
.cb-art .cb-sm1{--fy:3.1506849315vw;--d:180ms;}
.cb-art .cb-sm2{--fy:3.9726027397vw;--d:340ms;}
@keyframes cbFloat{
0%,100%{transform:translate3d(0,0,0);}
50%{transform:translate3d(0,calc(-1 * var(--amp,0.6164383562vw)),0);}
}
.cb-art.is-in figure img{animation:cbFloat var(--per,8s) ease-in-out infinite var(--pd,0s);}
.cb-art .cb-big{--amp:0.6164383562vw;--per:8s;--pd:.2s;}
.cb-art .cb-sm1{--amp:0.9589041096vw;--per:6.5s;--pd:.9s;}
.cb-art .cb-sm2{--amp:0.8219178082vw;--per:7.3s;--pd:.5s;}
@media (prefers-reduced-motion: reduce){
.cb-art figure,.cb-art figure img{translate:0 0;opacity:1;transition:none;animation:none;}
}
.cb-art img{width:100%;height:100%;object-fit:cover;display:block;color:transparent;filter:saturate(.94) contrast(1.03);}
.cb-big{left:14%;top:0;width:72%;aspect-ratio:3/2;z-index:1;box-shadow:0 1.7808219178vw 4.1095890411vw rgba(0,0,0,.5),inset 0 0.0684931507vw 0 rgba(250,248,242,.16);}
.cb-art .cb-sm{z-index:2;box-shadow:0 1.2328767123vw 2.8767123288vw rgba(0,0,0,.52),inset 0 0.0684931507vw 0 rgba(250,248,242,.18);}
.cb-sm1{left:calc(6% - 3.4246575342vw);top:52%;width:29%;aspect-ratio:3/2;}
.cb-sm2{right:2%;top:14%;width:41%;aspect-ratio:3/2;}
.cb-mark{position:absolute;right:3%;bottom:2%;z-index:3;display:block;width:clamp(3.698630137vw,5.8vw,5.0684931507vw);color:var(--fluro);filter:drop-shadow(0 1.095890411vw 2.3287671233vw rgba(0,0,0,.45));}
.cb-mark svg{width:100%;height:auto;display:block;}
@media (prefers-reduced-motion: reduce){
.reveal{position:static;margin-top:0;}
}
.hero .eyebrow{display:block;background:none;padding:0;color:var(--fluro);animation:none;}
.ig > div, .probs > div, .steps > li, .dual > div{opacity:0;transform:translateY(var(--rise,2.602739726vw));transition:opacity var(--dur-rise) var(--ease) var(--d,0ms),
             transform var(--dur-rise) var(--ease) var(--d,0ms);}
.ig.is-in > div, .probs.is-in > div, .steps.is-in > li, .dual.is-in > div{opacity:1;transform:none;}
@media (prefers-reduced-motion: reduce){
.ig > div, .probs > div, .steps > li, .dual > div{opacity:1;transform:none;transition:none;}
}
.proof{position:relative;z-index:5;background:rgba(0,0,0,.28);}
.proof .in{max-width:var(--shell);margin:0 auto;padding:1.5068493151vw var(--pad);display:grid;grid-template-columns:repeat(3,auto);justify-content:space-between;align-items:center;gap:0.9589041096vw 1.7808219178vw;font-family:var(--ff-mono);font-size:0.8219178082vw;letter-spacing:.03em;white-space:nowrap;color:rgba(250,248,242,.68);}
.proof b{color:var(--fluro);font-weight:500;}
.proof .gr{display:flex;align-items:center;gap:0.6849315068vw;}
.stars{display:inline-flex;gap:0.2054794521vw;flex:0 0 auto;}
.stars i{display:block;width:1.0273972603vw;height:1.0273972603vw;background:var(--fluro-deep);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.9 5.9 6.5.9-4.7 4.6 1.1 6.5L12 17.4 6.2 20.5l1.1-6.5L2.6 9.4l6.5-.9z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.9 5.9 6.5.9-4.7 4.6 1.1 6.5L12 17.4 6.2 20.5l1.1-6.5L2.6 9.4l6.5-.9z'/%3E%3C/svg%3E") center/contain no-repeat;}
.dark .stars i,.slab .stars i,.proof .stars i,.gnav .stars i,
.foot .stars i,.mcta .stars i,.conv .stars i{background:var(--fluro);}
.stars.lg i{width:1.5068493151vw;height:1.5068493151vw;}
.gnav-meta{display:flex;align-items:center;gap:0.6849315068vw;font-family:var(--ff-mono);font-size:0.8561643836vw;letter-spacing:.06em;color:rgba(250,248,242,.72);white-space:nowrap;}
.gnav-meta b{color:var(--paper);font-weight:500;}
.gnav .gnav-right,.gnav-meta{transition:opacity var(--dur-reveal) var(--ease),visibility var(--dur-reveal);}
.gnav.cta-off .gnav-right{opacity:0;visibility:hidden;}
.gnav.hero-on .gnav-meta,.gnav.hero-on .gnav-right{opacity:0;visibility:hidden;}
.mcta{transform:translateY(110%);transition:transform var(--dur-reveal) var(--ease);}
.mcta.on{transform:none;}
.sum h2{max-width:19ch;}
.sum .sum-note{margin-top:1.3698630137vw;font-size:1.095890411vw;line-height:1.66;color:var(--slate);max-width:46ch;}
.sum .row.bottom .col-5{align-self:end;}
.sum .ig{margin-top:clamp(2.0547945205vw,3.6vw,3.1506849315vw);}
.sum .ig h3{font-size:1.1643835616vw;}
section:has(.probs){padding-bottom:clamp(2.8767123288vw,4.9vw,4.7945205479vw);}
.pinzone + section{padding-top:clamp(3.5616438356vw,5.9vw,5.8219178082vw);}
.probs{display:grid;grid-template-columns:repeat(4,1fr);gap:0.0684931507vw;background:var(--line);margin-top:clamp(2.3287671233vw,4vw,3.5616438356vw);box-shadow:0 0.0684931507vw 0 var(--line),0 -0.0684931507vw 0 var(--line);}
.probs > div{background:var(--paper);padding:clamp(1.9178082192vw,3.2vw,2.7397260274vw) 1.7808219178vw clamp(2.0547945205vw,3.4vw,3.0136986301vw);}
.probs > div:first-child{padding-left:0;}
.probs > div:last-child{padding-right:0;}
.probs .n{display:block;font-family:var(--ff-mono);font-size:0.8219178082vw;letter-spacing:.12em;color:var(--slate);}
.probs h3{font-size:1.301369863vw;font-weight:700;letter-spacing:-.008em;margin:0.9589041096vw 0 0.6849315068vw;line-height:1.24;}
.probs p{font-size:0.9931506849vw;line-height:1.6;color:var(--slate);}
.dual{display:grid;grid-template-columns:1fr 1fr;gap:clamp(0.9589041096vw,1.6vw,1.5068493151vw);margin-top:clamp(2.0547945205vw,3.6vw,3.1506849315vw);}
.dual > div{border-radius:var(--r-card);padding:clamp(1.9178082192vw,3.2vw,2.7397260274vw) clamp(1.7808219178vw,3vw,2.602739726vw) clamp(2.1917808219vw,3.6vw,3.0136986301vw);}
.dual > div:first-child{background:var(--fluro);color:var(--ink);}
.dual > div:last-child{background:var(--ink);color:var(--paper);}
.dual > div{display:flex;flex-direction:column;position:relative;overflow:hidden;isolation:isolate;}
.dual-mesh{position:absolute;top:0;right:0;z-index:0;pointer-events:none;width:clamp(19.1780821918vw,56%,32.1917808219vw);aspect-ratio:1;-webkit-mask:radial-gradient(115% 115% at 100% 0%,#000 30%,rgba(0,0,0,.45) 56%,transparent 78%);mask:radial-gradient(115% 115% at 100% 0%,#000 30%,rgba(0,0,0,.45) 56%,transparent 78%);}
.dual-mesh i{position:absolute;display:block;border-radius:50%;filter:blur(1.7808219178vw);animation:dmDrift var(--dmp,13s) ease-in-out infinite alternate var(--dmd,0s);}
.dual-mesh i:nth-child(1){inset:-24% -30% 34% 22%;--dmp:8s;--dmd:0s;}
.dual-mesh i:nth-child(2){inset:6% -12% 12% 34%;--dmp:10.5s;--dmd:-3s;}
.dual-mesh i:nth-child(3){inset:-14% 26% 42% -6%;--dmp:6.5s;--dmd:-4s;}
@keyframes dmDrift{
from{transform:translate3d(-9%,5%,0) scale(1);}
to{transform:translate3d(12%,-8%,0) scale(1.22);}
}
.dual > div:first-child .dual-mesh i{opacity:.62;}
.dual > div:first-child .dual-mesh i:nth-child(1){background:#F4FF9C;}
.dual > div:first-child .dual-mesh i:nth-child(2){background:#FBFFD2;}
.dual > div:first-child .dual-mesh i:nth-child(3){background:#EDFF6E;}
.dual > div:last-child .dual-mesh i:nth-child(1){background:#6B7500;}
.dual > div:last-child .dual-mesh i:nth-child(2){background:rgba(235,255,0,.38);}
.dual > div:last-child .dual-mesh i:nth-child(3){background:#343C0A;}
.dual .chip-head,.dual ul,.dual .dual-note{position:relative;z-index:1;}
@media (prefers-reduced-motion: reduce){
.dual-mesh i{animation:none;}
}
.dual .chip-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1.3698630137vw;margin-bottom:1.5068493151vw;}
.dual h3{font-size:1.3698630137vw;font-weight:700;letter-spacing:-.008em;margin:0;}
.dual-ic{flex:0 0 auto;order:2;width:3.0136986301vw;height:3.0136986301vw;border-radius:0.8904109589vw;display:grid;place-items:center;}
.dual-ic svg{width:1.5753424658vw;height:1.5753424658vw;display:block;}
.dual > div:first-child .dual-ic{background:var(--ink);color:var(--fluro);}
.dual > div:last-child  .dual-ic{background:var(--paper);color:var(--ink);}
.dual ul{display:grid;gap:0.8219178082vw;}
.dual li{position:relative;padding-left:1.9178082192vw;font-size:1.0273972603vw;line-height:1.5;color:inherit;}
.dual li::before{content:"";position:absolute;left:0;top:0.1369863014vw;width:1.2328767123vw;height:1.2328767123vw;}
.dual .yes li::before{background:var(--ink);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.4 12.6 5 5L19.6 6.8'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.4 12.6 5 5L19.6 6.8'/%3E%3C/svg%3E") center/contain no-repeat;}
.dual .no li{color:var(--ash);}
.dual .no li::before{background:var(--ash);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E") center/contain no-repeat;}
.dual .dual-note{margin:auto 0 0;padding-top:1.7808219178vw;font-size:0.8904109589vw;line-height:1.6;color:var(--ash);}
.dual > div:first-child .dual-note{color:var(--ink);}
.dual > div:first-child::selection,.dual > div:first-child *::selection{background:var(--ink);color:var(--paper);}
.revs{overflow:hidden;margin-top:clamp(2.0547945205vw,3.6vw,3.1506849315vw);--rev-gap:1.3698630137vw;-webkit-mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);}
.revs-run{display:flex;gap:var(--rev-gap);width:max-content;padding-bottom:0.4109589041vw;animation:revsRun 37s linear infinite;}
.revs:hover .revs-run,.revs:focus-within .revs-run{animation-play-state:paused;}
@keyframes revsRun{
from{transform:translate3d(0,0,0);}
to{transform:translate3d(calc(-50% - var(--rev-gap) / 2),0,0);}
}
@media (prefers-reduced-motion: reduce){
.revs{overflow-x:auto;scroll-snap-type:x mandatory;}
.revs-run{animation:none;width:auto;}
.revs article{scroll-snap-align:center;}
}
.revs article{flex:0 0 auto;width:26.7123287671vw;border-radius:var(--r-card);}
.revs .stars{margin-bottom:1.2328767123vw;}
.revs-old{display:grid;grid-template-columns:repeat(3,1fr);gap:0.0684931507vw;background:var(--char);border-radius:var(--r-inner);overflow:hidden;margin-top:clamp(2.0547945205vw,3.6vw,3.0136986301vw);}
.revs article{background:var(--graphite);padding:1.7808219178vw 1.6438356164vw 1.9178082192vw;display:flex;flex-direction:column;}
.revs .q1{font-size:1.301369863vw;line-height:1.42;font-weight:500;letter-spacing:-.008em;color:var(--paper);}
.revs .q2{font-size:0.9931506849vw;line-height:1.6;color:var(--stone);margin-top:0.9589041096vw;}
.revs .who{margin-top:auto;padding-top:1.6438356164vw;font-family:var(--ff-mono);font-size:0.8219178082vw;letter-spacing:.08em;color:var(--stone);}
.revs .who b{display:block;font-family:var(--ff);font-size:1.0273972603vw;font-weight:700;letter-spacing:-.006em;color:var(--paper);margin-bottom:0.3424657534vw;}
.rev-head{display:flex;align-items:baseline;justify-content:space-between;gap:1.6438356164vw;flex-wrap:wrap;}
.rev-head > div:first-child{flex:1 1 31.5068493151vw;}
.rev-score{flex:0 0 auto;}
.rev-score{display:flex;align-items:center;gap:0.9589041096vw;}
.rev-score b{font-family:var(--ff-mono);font-weight:700;font-size:2.602739726vw;line-height:1;letter-spacing:-.02em;color:var(--paper);}
.rev-score span{font-family:var(--ff-mono);font-size:0.8219178082vw;letter-spacing:.1em;text-transform:uppercase;color:var(--ash);}
.steps > li:first-child{padding-left:0;}
.steps > li:last-child{padding-right:0;}
.sum .ig > div:nth-child(3n/**/+1){padding-left:0;}
.sum .ig > div:nth-child(3n){padding-right:0;}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0.0684931507vw;background:var(--line);margin-top:clamp(2.3287671233vw,4vw,3.5616438356vw);box-shadow:0 0.0684931507vw 0 var(--line),0 -0.0684931507vw 0 var(--line);}
.steps li{background:var(--paper);padding:clamp(1.9178082192vw,3.2vw,2.7397260274vw) 1.7808219178vw clamp(2.0547945205vw,3.4vw,3.0136986301vw);}
.st-n{font-family:var(--ff-mono);font-size:0.8219178082vw;letter-spacing:.12em;color:var(--fluro-deep);}
.steps h3{font-weight:700;font-size:1.301369863vw;letter-spacing:-.008em;margin:0.9589041096vw 0 0.6849315068vw;line-height:1.24;}
.steps p{font-size:0.9931506849vw;line-height:1.6;color:var(--slate);}
.tone-c .steps{background:var(--line);}
.tone-c .steps li{background:var(--paper-3);}
.fit{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:clamp(2.0547945205vw,3.6vw,3.1506849315vw);background:linear-gradient(var(--line),var(--line)) 50% 0/0.0684931507vw 100% no-repeat;box-shadow:0 0.0684931507vw 0 var(--line),0 -0.0684931507vw 0 var(--line);}
.fit > div{background:transparent;padding:clamp(2.0547945205vw,3.4vw,2.8767123288vw) clamp(1.6438356164vw,2.8vw,2.3287671233vw) clamp(2.1917808219vw,3.6vw,3.0136986301vw);}
.fit > div:first-child{padding-left:0;}
.fit > div:last-child{padding-right:0;padding-left:clamp(2.0547945205vw,3.4vw,3.0136986301vw);}
.fitband{position:relative;isolation:isolate;overflow:hidden;}
.fitband::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(72% 46% at 50% -6%, rgba(252,251,247,.78), transparent 74%),
    radial-gradient(62% 60% at 14% 104%, rgba(235,255,0,.26), transparent 70%),
    radial-gradient(54% 52% at 84% 98%, rgba(235,255,0,.15), transparent 72%);}
.fitband > .wrap{position:relative;z-index:1;}
.fit h3{font-size:1.3698630137vw;font-weight:700;letter-spacing:-.008em;margin-bottom:1.3698630137vw;}
.fit ul{display:grid;gap:0.8219178082vw;}
.fit li{position:relative;padding-left:1.9178082192vw;font-size:1.0273972603vw;line-height:1.5;}
.fit li::before{content:"";position:absolute;left:0;top:0.1369863014vw;width:1.2328767123vw;height:1.2328767123vw;}
.fit .good li::before{background:var(--ok);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.4 12.6 5 5L19.6 6.8'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.4 12.6 5 5L19.6 6.8'/%3E%3C/svg%3E") center/contain no-repeat;}
.fit .check li{color:var(--slate);}
.fit .check li::before{background:var(--slate);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 7v6M12 16.6v.2'/%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 7v6M12 16.6v.2'/%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3C/svg%3E") center/contain no-repeat;}
.faqrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(2.0547945205vw,4vw,4.9315068493vw);align-items:start;margin-top:clamp(3.5616438356vw,6vw,5.7534246575vw);}
.faqrow .faq{margin-top:0;}
.faq-media{position:sticky;top:6.5753424658vw;}
.faq-media .ustack{aspect-ratio:4/5;box-shadow:0 1.5068493151vw 3.4246575342vw rgba(24,25,16,.26),none;}
.fm-chip{background:rgba(250,248,242,.9);-webkit-backdrop-filter:blur(1.3698630137vw) saturate(150%);backdrop-filter:blur(1.3698630137vw) saturate(150%);box-shadow:0 1.095890411vw 2.3287671233vw rgba(24,25,16,.24);color:var(--ink);padding:0.9589041096vw 1.2328767123vw 1.0273972603vw;width:min(15.3424657534vw,62%);}
.fm-a{top:1.7808219178vw;left:-1.7808219178vw;}
.fm-b{bottom:-1.7808219178vw;right:-1.6438356164vw;}
.fm-chip b{display:block;font-family:var(--ff-mono);font-weight:700;font-size:2.0547945205vw;line-height:1;letter-spacing:-.03em;margin:0.6849315068vw 0 0.5479452055vw;font-variant-numeric:tabular-nums;}
.fm-chip .fm-k{display:block;font-family:var(--ff-mono);font-size:0.7191780822vw;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--char);line-height:1.4;}
.fm-chip .stars i{background:var(--fluro-deep);}
.plans{margin-top:clamp(3.5616438356vw,6.4vw,6.0273972603vw);}
.plans > div{opacity:0;transform:translateY(var(--rise,3.2876712329vw));transition:opacity var(--dur-rise) var(--ease) var(--d,0ms),
             transform var(--dur-rise) var(--ease) var(--d,0ms);}
.plans.is-in > div{opacity:1;transform:none;}
@media (prefers-reduced-motion: reduce){
.plans > div{opacity:1;transform:none;transition:none;}
}
#plans .microcopy{text-align:left;margin-left:0;margin-right:0;max-width:none;margin-top:clamp(2.1917808219vw,3.6vw,3.1506849315vw);}
.plan{background:var(--paper);border-radius:var(--r-card);padding:2.0547945205vw 1.9178082192vw 2.1917808219vw;display:flex;flex-direction:column;height:100%;position:relative;box-shadow:0 0.1369863014vw 0.2739726027vw rgba(24,25,16,.05),0 0.9589041096vw 2.3287671233vw rgba(24,25,16,.09);transition:box-shadow var(--dur-reveal) var(--ease),translate var(--dur-reveal) var(--ease);}
.plan:hover{box-shadow:0 0.2739726027vw 0.5479452055vw rgba(24,25,16,.07),0 1.5068493151vw 3.2876712329vw rgba(24,25,16,.14);translate:0 -0.2054794521vw;}
@media (prefers-reduced-motion: reduce){
.plan,.plan:hover{transition:none;translate:none;}
}
.plan--lead{isolation:isolate;box-shadow:0 0.2739726027vw 0.6849315068vw rgba(24,25,16,.12),0 1.7808219178vw 4.1095890411vw rgba(24,25,16,.22),
             0 0 0 0 rgba(235,255,0,0);}
.plan--lead:hover{box-shadow:0 0.4109589041vw 0.9589041096vw rgba(24,25,16,.16),0 2.3287671233vw 5.2054794521vw rgba(24,25,16,.28);}
.pmesh{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;border-radius:var(--r-card);}
.pmesh i{position:absolute;display:block;border-radius:50%;filter:blur(3.0136986301vw);opacity:.9;animation:pmDrift var(--pmp,19s) ease-in-out infinite alternate var(--pmd,0s);}
.pmesh i:nth-child(1){inset:-30% -20% 44% 10%;background:#2C3110;--pmp:19s;--pmd:0s;}
.pmesh i:nth-child(2){inset:-18% 34% 52% -24%;background:#23280C;--pmp:23s;--pmd:-8s;}
.pmesh i:nth-child(3){inset:4% -28% 22% 40%;background:rgba(235,255,0,.10);--pmp:16s;--pmd:-5s;}
.pmesh i:nth-child(4){inset:52% 6% -22% -10%;background:#1E2208;--pmp:27s;--pmd:-12s;}
@keyframes pmDrift{
from{transform:translate3d(-6%,3%,0) scale(1);}
to{transform:translate3d(8%,-5%,0) scale(1.16);}
}
.pmesh::after{content:"";position:absolute;inset:0;background:radial-gradient(128% 94% at 50% 44%,rgba(16,17,8,0) 0%,rgba(16,17,8,.2) 56%,rgba(16,17,8,.5) 100%);}
.plan--lead > *:not(.pmesh):not(.p-flag){position:relative;z-index:1;}
@media (prefers-reduced-motion: reduce){
.pmesh i{animation:none;}
}
.p-flag{position:absolute;top:-0.8904109589vw;right:1.3698630137vw;font-family:var(--ff-mono);font-size:0.7191780822vw;font-weight:700;letter-spacing:.12em;text-transform:uppercase;background:var(--paper);color:var(--ink);padding:0.5479452055vw 0.8904109589vw;border-radius:var(--r-pill);}
.plan h3{font-size:1.7808219178vw;font-weight:700;letter-spacing:-.01em;margin:0 0 0.6849315068vw;}
.plan .p-sub{font-size:1.0273972603vw;line-height:1.55;color:var(--slate);}
.plan .p-sub{min-height:4.65em;}
.p-help{margin-top:1.5068493151vw;font-size:1.095890411vw;line-height:1.6;}
.p-addon{max-width:none;}
.p-help a{text-decoration:underline;text-underline-offset:0.2054794521vw;}
.p-price{display:flex;align-items:baseline;gap:0.6849315068vw;margin:1.6438356164vw 0 0.6849315068vw;}
.p-price .p-standard{font-size:1.5068493151vw;line-height:1;color:var(--slate);text-decoration-thickness:0.102739726vw;}
.p-price b{font-size:3.4246575342vw;line-height:1;letter-spacing:-.02em;font-weight:500;}
.p-price span{font-family:var(--ff-mono);font-size:0.8904109589vw;color:var(--slate);}
.p-terms{font-family:var(--ff-mono);font-size:0.7876712329vw;line-height:1.62;letter-spacing:.02em;color:var(--slate);margin-bottom:1.6438356164vw;}
.plan ul{display:grid;gap:0.7534246575vw;margin-bottom:1.7808219178vw;}
.plan li{position:relative;padding-left:1.7808219178vw;font-size:0.9931506849vw;line-height:1.5;color:var(--slate);}
.plan li::before{content:"";position:absolute;left:0;top:0.0684931507vw;width:1.1643835616vw;height:1.1643835616vw;background:var(--fluro-deep);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.4 12.6 5 5L19.6 6.8'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.4 12.6 5 5L19.6 6.8'/%3E%3C/svg%3E") center/contain no-repeat;}
.plan li.none{color:var(--slate);}
.plan li.none::before{background:var(--slate);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E") center/contain no-repeat;}
.plan .btn{margin-top:auto;align-self:flex-start;}
.plan--lead{background:var(--ink);}
.plan--lead h3,.plan--lead .p-price b{color:var(--paper);}
.plan--lead .p-sub,.plan--lead li,.plan--lead .p-price span,.plan--lead .p-terms{color:var(--stone);}
.plan--lead .p-standard{color:var(--stone);}
.plan--lead li::before{background:var(--fluro);}
.plan--lead .btn{background:var(--fluro);color:var(--ink);}
.plan--lead .btn:hover{background:var(--fluro-lift);}
.faq{margin-top:clamp(1.9178082192vw,3.4vw,3.0136986301vw);display:grid;gap:0.0684931507vw;background:var(--line);border-radius:var(--r-card);overflow:hidden;}
.faq details{background:var(--paper);}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:1.3698630137vw;cursor:pointer;padding:1.5068493151vw 1.7808219178vw;font-family:var(--ff);font-weight:700;font-size:1.2328767123vw;letter-spacing:-.01em;list-style:none;}
.faq summary::-webkit-details-marker{display:none;}
.faq .fq{width:1.5068493151vw;height:1.5068493151vw;color:var(--slate);flex:0 0 auto;transition:transform 420ms var(--ease);}
.faq .fq svg{width:100%;height:100%;display:block;}
.faq p{padding:0 1.7808219178vw 1.7808219178vw;font-size:1.0273972603vw;line-height:1.66;color:var(--slate);max-width:78ch;}
.faq-body{overflow:hidden;}
.faq summary{transition:padding-bottom 420ms var(--ease);}
.faq details[open] .fq{transform:rotate(180deg);}
.faq details.is-closing .fq{transform:rotate(0);}
.faq details[open] summary{padding-bottom:0.6849315068vw;}
.faq details.is-closing summary{padding-bottom:1.5068493151vw;}
.conv{background:var(--ink-deep);color:var(--paper);position:relative;overflow:hidden;isolation:isolate;}
.cmesh{position:absolute;z-index:0;pointer-events:none;left:42%;right:2%;top:26%;bottom:2%;}
.cmesh i{position:absolute;display:block;border-radius:50%;filter:blur(4.1095890411vw);animation:cmDrift var(--cmp,24s) ease-in-out infinite alternate var(--cmd,0s);}
.cmesh i:nth-child(1){inset:-6% 24% 34% 4%;background:#2E3312;--cmp:24s;--cmd:0s;}
.cmesh i:nth-child(2){inset:22% -2% 6% 34%;background:#262B0C;--cmp:31s;--cmd:-11s;}
.cmesh i:nth-child(3){inset:34% 40% 8% -4%;background:rgba(235,255,0,.09);--cmp:19s;--cmd:-6s;}
.cmesh i:nth-child(4){inset:2% 6% 52% 42%;background:#1F2409;--cmp:27s;--cmd:-15s;}
@keyframes cmDrift{
from{transform:translate3d(-5%,3%,0) scale(1);}
to{transform:translate3d(7%,-4%,0) scale(1.14);}
}
.conv > *:not(.cmesh){position:relative;z-index:1;}
@media (prefers-reduced-motion: reduce){
.cmesh i{animation:none;}
}
.conv h2{color:var(--paper);}
.conv .row{align-items:center;}
.conv .lede{color:var(--stone);margin-top:1.6438356164vw;}
.conv h2{margin-top:1.095890411vw;}
.conv .safe{margin-top:2.3287671233vw;display:flex;align-items:flex-start;gap:0.8219178082vw;font-size:0.9931506849vw;line-height:1.55;color:var(--stone);}
.conv .safe i{width:1.301369863vw;height:1.301369863vw;flex:0 0 auto;color:var(--ok-dark);margin-top:0.1369863014vw;}
.conv .safe i svg{width:100%;height:100%;display:block;}
.next{display:grid;gap:0;background:none;margin-top:clamp(2.0547945205vw,3.6vw,3.0136986301vw);box-shadow:inset 0 0.0684931507vw 0 var(--line-dark);}
.next li{background:none;padding:1.4383561644vw 0 1.5068493151vw;display:flex;gap:1.5068493151vw;align-items:baseline;font-size:1.0273972603vw;line-height:1.5;color:var(--stone);box-shadow:inset 0 -0.0684931507vw 0 var(--line-dark);}
.next li b{font-family:var(--ff-mono);font-size:1.4383561644vw;font-weight:700;letter-spacing:-.02em;color:var(--fluro);flex:0 0 auto;line-height:1;font-variant-numeric:tabular-nums;}
.fcard{background:var(--paper);color:var(--ink);border-radius:var(--r-card);padding:clamp(1.7808219178vw,3vw,2.4657534247vw) clamp(1.6438356164vw,2.8vw,2.3287671233vw) clamp(1.9178082192vw,3.2vw,2.602739726vw);}
.fprog{display:flex;align-items:center;justify-content:space-between;gap:1.095890411vw;margin-bottom:1.5068493151vw;}
.fprog .lbl{font-family:var(--ff-mono);font-size:0.7876712329vw;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--slate);}
.fbar{display:flex;gap:0.3424657534vw;flex:0 0 6.301369863vw;}
.fbar i{display:block;height:0.2739726027vw;flex:1;border-radius:6.8493150685vw;background:var(--paper-3);}
.fbar i.on{background:var(--ink);}
.fcard h3{font-size:1.5753424658vw;font-weight:700;letter-spacing:-.01em;margin-bottom:1.3698630137vw;}
.field{display:block;margin-bottom:1.2328767123vw;}
.fcard .field > span{display:block;font-family:var(--ff);font-size:0.9931506849vw;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink);margin-bottom:0.5479452055vw;}
.fcard .field > span em{font-style:normal;color:var(--slate);font-weight:400;}
.fcard .field input,.fcard .field select,.fcard .field textarea{width:100%;background:var(--paper-3);border-radius:var(--r-inner);padding:1.0273972603vw 1.095890411vw;font-size:1.095890411vw;color:var(--ink);-webkit-appearance:none;appearance:none;}
.field textarea{min-height:6.5753424658vw;resize:vertical;}
.field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2368694F' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1.0273972603vw center;background-size:1.301369863vw;padding-right:3.1506849315vw;}
.fcard .field input::placeholder,.fcard .field textarea::placeholder{color:var(--slate);opacity:1;}
.fcard fieldset{border:0;margin:0 0 1.2328767123vw;padding:0;min-width:0;}
.choice{display:flex;gap:0.6849315068vw;flex-wrap:wrap;}
.choice label{position:relative;flex:1 1 6.1643835616vw;}
.choice input,.consent input{position:absolute;opacity:0;width:0;height:0;padding:0;pointer-events:none;}
.choice span{display:block;text-align:center;background:var(--paper-3);border-radius:var(--r-inner);padding:0.9589041096vw 0.8219178082vw;font-size:1.0273972603vw;cursor:pointer;transition:background var(--dur-hover);}
.choice label:hover span{background:#E3E0CE;}
.choice input:checked + span{background:var(--ink);color:var(--paper);}
.choice input:focus-visible + span{outline:0.1369863014vw solid var(--ink);outline-offset:0.1369863014vw;}
.consent{position:relative;display:flex;gap:0.8219178082vw;align-items:flex-start;margin:0.4109589041vw 0 1.5068493151vw;font-size:0.9589041096vw;line-height:1.55;color:var(--slate);cursor:pointer;}
.consent .box{flex:0 0 auto;width:1.6438356164vw;height:1.6438356164vw;border-radius:0.4794520548vw;background:var(--paper-3);position:relative;margin-top:0.0684931507vw;}
.consent input:checked + .box{background:var(--ink);}
.consent input:focus-visible + .box{outline:0.1369863014vw solid var(--ink);outline-offset:0.1369863014vw;}
.form-privacy{margin:0 0 1.5068493151vw;font-size:0.9589041096vw;line-height:1.55;}
.form-privacy a{text-decoration:underline;text-underline-offset:0.2054794521vw;}
.consent .box::after{content:"";position:absolute;inset:0.3424657534vw;background:var(--fluro);opacity:0;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.4 12.6 5 5L19.6 6.8'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.4 12.6 5 5L19.6 6.8'/%3E%3C/svg%3E") center/contain no-repeat;}
.consent input:checked + .box::after{opacity:1;}
.fstep[hidden]{display:none;}
.facts{display:flex;gap:0.6849315068vw;flex-wrap:wrap;margin-top:clamp(2.0547945205vw,3.6vw,3.1506849315vw);}
.fcard .facts .btn{padding-left:3.0136986301vw;padding-right:3.0136986301vw;}
.ferr{font-size:0.9589041096vw;color:var(--alert);margin-bottom:1.095890411vw;}
.ferr[hidden]{display:none;}
.fdone{text-align:left;}
.fdone .tick{width:3.1506849315vw;height:3.1506849315vw;border-radius:0.9589041096vw;background:var(--ok);color:var(--paper);display:grid;place-items:center;margin-bottom:1.3698630137vw;}
.fdone .tick svg{width:1.6438356164vw;height:1.6438356164vw;display:block;}
.foot{position:relative;z-index:14;background:var(--ink-deep);color:var(--paper);padding:clamp(3.0136986301vw,5.4vw,4.6575342466vw) 0 clamp(2.0547945205vw,3.6vw,3.1506849315vw);}
.foot .f-word{display:inline-block;height:3.0136986301vw;width:auto;color:var(--fluro);}
.foot .f-word .mk{position:relative;display:block;height:100%;}
.foot .f-word .tm{position:absolute;top:0;left:100%;margin-left:0.4109589041vw;font-family:var(--ff);font-weight:700;font-size:0.8904109589vw;line-height:1;color:currentColor;opacity:.8;}
.foot .f-right{display:flex;flex-direction:column;align-items:flex-end;gap:clamp(2.602739726vw,4.6vw,4.1095890411vw);}
.foot .f-mark{display:block;width:clamp(3.0136986301vw,4.4vw,3.698630137vw);color:var(--fluro);}
.foot .f-mark svg{width:100%;height:auto;display:block;}
.foot .f-line{display:flex;align-items:center;justify-content:space-between;width:100%;gap:1.6438356164vw;flex-wrap:wrap;}
.foot .f-word svg{height:100%;width:auto;shape-rendering:geometricPrecision;}
.foot .meta{margin-top:2.3287671233vw;color:var(--stone);text-transform:none;letter-spacing:.02em;font-size:0.8904109589vw;line-height:1.6;max-width:44ch;}
.foot .lnks{display:flex;gap:1.3698630137vw;flex-wrap:wrap;font-size:0.9589041096vw;color:var(--ash);}
.foot .lnks a{text-decoration:underline;text-underline-offset:0.2739726027vw;}
.foot .lnks a:hover{color:var(--fluro);}
.foot .grow{display:flex;align-items:center;gap:0.8219178082vw;font-family:var(--ff-mono);font-size:0.8904109589vw;letter-spacing:.05em;color:var(--ash);}
.foot .grow b{color:var(--paper);font-weight:500;}
.foot .rule{height:0.0684931507vw;background:var(--line-dark);margin:clamp(2.0547945205vw,3.6vw,3.0136986301vw) 0;}
.foot .legal{font-size:0.8561643836vw;line-height:1.65;color:var(--stone);max-width:80ch;}
.mcta{position:fixed;left:0;right:0;bottom:0;z-index:50;display:none;padding:0.6849315068vw var(--pad) calc(0.6849315068vw + env(safe-area-inset-bottom));background:rgba(24,25,16,.86);-webkit-backdrop-filter:blur(1.2328767123vw) saturate(150%);backdrop-filter:blur(1.2328767123vw) saturate(150%);box-shadow:inset 0 0.0684931507vw 0 rgba(250,248,242,.12);}
.mcta .in{display:flex;align-items:center;gap:0.9589041096vw;justify-content:space-between;}
.mcta .rate{display:flex;align-items:center;gap:0.5479452055vw;font-family:var(--ff-mono);font-size:0.8219178082vw;letter-spacing:.04em;color:rgba(250,248,242,.74);flex:0 0 auto;}
.mcta .rate b{color:var(--paper);font-weight:500;}
.mcta .btn{font-size:0.8219178082vw;padding-left:1.2328767123vw;padding-right:1.2328767123vw;}
.mcta .btn{flex:0 0 auto;}
.ustrip{--ub-gap:1.3698630137vw;margin-top:clamp(2.602739726vw,4.6vw,4.1095890411vw);margin-bottom:clamp(3.1506849315vw,5.4vw,4.9315068493vw);overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);}
.ustrip-run{display:flex;gap:var(--ub-gap);width:max-content;padding-bottom:0.5479452055vw;animation:ustrip 64s linear infinite;}
.ustrip:hover .ustrip-run,.ustrip:focus-within .ustrip-run{animation-play-state:paused;}
@keyframes ustrip{
from{transform:translate3d(0,0,0);}
to{transform:translate3d(calc(-50% - var(--ub-gap) / 2),0,0);}
}
.ub{position:relative;margin:0;flex:0 0 auto;width:19.8630136986vw;aspect-ratio:4/5;border-radius:var(--r-card);overflow:hidden;background:var(--graphite);}
.ub img{width:100%;height:100%;object-fit:cover;display:block;color:transparent;filter:saturate(.94) contrast(1.03);}
.ub::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(16,17,8,0) 44%,rgba(16,17,8,.78) 100%);}
.ub figcaption{position:absolute;left:1.2328767123vw;right:1.2328767123vw;bottom:1.095890411vw;z-index:2;font-size:1.0273972603vw;font-weight:500;letter-spacing:-.008em;color:var(--paper);}
.ub-chip{position:absolute;left:0.9589041096vw;top:0.9589041096vw;z-index:2;display:inline-flex;align-items:center;gap:0.5479452055vw;max-width:calc(100% - 1.9178082192vw);padding:0.5479452055vw 0.8904109589vw 0.5479452055vw 0.6849315068vw;border-radius:var(--r-pill);background:rgba(250,248,242,.86);color:var(--ink);-webkit-backdrop-filter:blur(1.095890411vw) saturate(150%);backdrop-filter:blur(1.095890411vw) saturate(150%);box-shadow:0 0.5479452055vw 1.3698630137vw rgba(24,25,16,.24);font-family:var(--ff-mono);font-size:0.7191780822vw;font-weight:700;letter-spacing:.07em;text-transform:uppercase;line-height:1.2;}
.ub-chip svg{width:1.0273972603vw;height:1.0273972603vw;flex:0 0 auto;color:var(--ok);}
.ub.ub-low .ub-chip{top:auto;bottom:3.8356164384vw;}
@media (prefers-reduced-motion: reduce){
.ustrip{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;}
.ustrip-run{animation:none;width:auto;}
.ub{scroll-snap-align:center;}
}
}