/* ===========================================================================
   FFInc 2.0 — the HOMEPAGE (page 1593). Pass 66.

   PASS 62's PERFORMANCE RULES STILL HOLD FOR EVERY LINE BELOW:

   1. NOTHING ANIMATES A PROPERTY THAT REPAINTS OR RELAYS OUT. transform,
      translate, scale and opacity only. A keyframe on SVG geometry, an SVG
      transform or stroke-dashoffset is an SVG LAYOUT every frame, so every
      drawn scene on this page is a STATIC SVG and every moving part is an
      HTML span laid over it.
   2. NO SMIL.
   3. EVERY SECTION BELOW THE HERO IS content-visibility:auto, so what is off
      screen is neither painted nor animated — including every bento scene,
      the review rows and the step mocks.
   4. NO backdrop-filter AND NO LARGE filter:blur ANYWHERE ON THE PAGE.
   5. EVERYTHING STOPS UNDER prefers-reduced-motion IN ITS FINISHED STATE,
      AND NOTHING IS EVER LEFT HIDDEN BY AN ANIMATION THAT DID NOT RUN.

   ⚠ PASS 66: THE WIDTH RHYTHM WAS NEVER ACTUALLY ON THE PAGE, AND THIS IS
   WHY. Pass 65 called three sections "full width" and gave each of them
   `max-width:1460px; margin:0 auto` — so on a 1440 screen a full section was
   1344px of content against a centred section's 1220, a difference nobody
   can see, and on anything wider every section was the same centred column.
   The user, after three days: "All sections are still center-aligned."
   Correct. Width is now TWO CLASSES ON THE INNER WRAPPER, and nothing else:

     .full   no max-width at all; content runs to a small edge gutter
             (--edge, 20-64px), and a marquee or a rail inside a full
             section runs to the viewport edge itself
     .wrap   --wrap (1120px), centred

   so at 1440 a full section is ~1340px against a centred one's 1120, at
   1920 it is ~1800 against 1120, and the reviews and the product rail
   touch both screen edges at every width.

   THE HEADINGS ALTERNATE TOO, AND THE RULE IS "NEVER TWO CENTRED HEADINGS IN
   A ROW": hero (centred) → categories (left) → suppliers (left, action
   opposite) → what verified means (centred) → reviews (left) → how it works
   (centred) → products (left, action opposite) → CTA (centred).

   The two renderers (the Breakdance tree and templates/ffinc2-home.php) emit
   the same classes in the same order; Breakdance additionally wraps every
   code fragment in a bde-f-html-code div that carries no CSS of its own, so
   nothing here keys on a direct-child count.
   =========================================================================== */

/* ---- Tokens ------------------------------------------------------------ */
body.ffinc2-home{
  --g0:#050D18; --g1:#08172A; --g2:#0B1D33;
  --sf:#0B1A2C; --sf2:#0E2238; --sf3:#112842;
  --ln:rgba(74,159,224,.13); --ln2:rgba(74,159,224,.24); --ln3:rgba(74,159,224,.4);
  --tx:#FFFFFF; --tx2:#A6C3D9; --tx3:#6B9DB7;
  --ac:#4A9FE0; --ac-ink:#8DCAF2; --gr:#2ECC9A; --gr-ink:#52DEB5; --am:#F59E0B;
  --sh:0 1px 0 rgba(255,255,255,.04) inset,0 24px 60px -24px rgba(0,0,0,.7);
  --sh2:0 1px 0 rgba(255,255,255,.05) inset,0 40px 90px -30px rgba(0,0,0,.8),0 0 0 1px rgba(74,159,224,.08);
  --gr0:5; --gg0:13; --gb0:24;
  --edge:clamp(20px,3.4vw,64px);
  --wrap:1120px;
  --bc-bg:#0A1828;
  --mk:#0F2540;
}
body.ffinc2-home.light-mode{
  --g0:#F4F9FF; --g1:#E8F1FB; --g2:#DDEAF8;
  --sf:#FFFFFF; --sf2:#F5F9FD; --sf3:#EDF4FB;
  --ln:rgba(30,107,171,.13); --ln2:rgba(30,107,171,.22); --ln3:rgba(30,107,171,.38);
  --tx:#050D18; --tx2:#35546A; --tx3:#47687D;
  --ac:#1E6BAB; --ac-ink:#1E6BAB; --gr:#0F9B72; --gr-ink:#0A6B4F; --am:#B45309;
  --sh:0 1px 2px rgba(10,40,70,.05),0 14px 36px -18px rgba(10,40,70,.22);
  --sh2:0 2px 4px rgba(10,40,70,.05),0 30px 70px -28px rgba(10,40,70,.3),0 0 0 1px rgba(30,107,171,.06);
  --gr0:244; --gg0:249; --gb0:255;
  --bc-bg:#FFFFFF;
  --mk:#EDF4FB;
  background:var(--g0);
}

/* ---- Page ground ------------------------------------------------------- */
.pg-grid{position:fixed;inset:0;background-image:linear-gradient(rgba(74,159,224,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(74,159,224,.035) 1px,transparent 1px);background-size:56px 56px;pointer-events:none;z-index:0;-webkit-mask-image:radial-gradient(ellipse 80% 55% at 50% 22%,#000,transparent);mask-image:radial-gradient(ellipse 80% 55% at 50% 22%,#000,transparent)}
body.ffinc2-home .pg-aura{filter:none;will-change:auto;opacity:1}
.pg-a1{width:900px;height:900px;background:radial-gradient(circle,rgba(74,159,224,.16),transparent 62%);top:-420px;left:-300px}
.pg-a2{width:760px;height:760px;background:radial-gradient(circle,rgba(46,204,154,.09),transparent 62%);top:-260px;right:-260px}
.pg-a3{width:700px;height:700px;background:radial-gradient(circle,rgba(74,159,224,.07),transparent 62%);bottom:-320px;left:30%}
body.ffinc2-home.light-mode .pg-aura{opacity:.55}
body.light-mode .pg-grid{opacity:.6}

/* Every section below the hero is skipped while off screen. */
.cats,.pd,.pu,.vf,.pr,.pw,.pk-cta{content-visibility:auto}
.cats{contain-intrinsic-size:auto 1300px}
.pu{contain-intrinsic-size:auto 1000px}
.vf{contain-intrinsic-size:auto 900px}
.pr{contain-intrinsic-size:auto 900px}
.pw{contain-intrinsic-size:auto 900px}
.pd{contain-intrinsic-size:auto 900px}
.pk-cta{contain-intrinsic-size:auto 860px}

.section-flakes{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}

/* ---- THE WIDTH SYSTEM — two classes, on the inner wrapper -------------- */
.full{position:relative;z-index:1;max-width:none;margin:0;padding-left:var(--edge);padding-right:var(--edge)}
.wrap{position:relative;z-index:1;max-width:var(--wrap);margin-left:auto;margin-right:auto}

/* ---- Shared type --------------------------------------------------------- */
.sec-h{font-family:'Plus Jakarta Sans';font-size:44px;font-weight:800;letter-spacing:-1.3px;line-height:1.07;color:var(--tx);margin:0 0 14px;text-wrap:balance}
.sec-h em{font-style:normal;color:var(--ac-ink)}
.sec-sub{font-size:16.5px;line-height:1.65;color:var(--tx2);max-width:580px;margin:0 0 44px}
/* The two renderers must agree on vertical margin (Breakdance ships
   .bde-heading{margin:0}; the fallback has user-agent margins). */
.hero h1,.sec-h,.cta-blurb h2{margin-top:0}
.hero-sub,.sec-sub,.cta-blurb .cta-lede{margin-top:0}

/* THE LEFT-ALIGNED SECTION HEADER. Heading left, supporting line and the
   section's one action right, on a hairline that fades before the right
   edge so it reads as a header rule rather than a section delimiter (§6). */
.sec-head{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);align-items:end;column-gap:64px;row-gap:20px;padding-bottom:28px;margin-bottom:44px}
.sec-head::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,var(--ln3) 0%,var(--ln2) 40%,transparent 100%)}
.sec-head .sec-h{margin-bottom:0;max-width:17ch}
.sec-head-r{display:flex;flex-direction:column;align-items:flex-start;gap:18px;max-width:430px}
.sec-head-r .sec-sub{margin:0;font-size:15px;line-height:1.62}
/* THE CENTRED HEADING BLOCK. */
.vf-head,.pw-h,.pw-sub{text-align:center}
.vf-head{max-width:760px;margin:0 auto 60px}
.vf-head .sec-sub,.pw-sub{margin-left:auto;margin-right:auto;max-width:640px}
.vf-head .sec-sub{margin-bottom:0}
.pw-sub{margin-bottom:64px}
.scr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hi{display:block;flex-shrink:0}
@keyframes mqscroll{to{transform:translateX(-50%)}}

.more-btn{display:inline-flex;align-items:center;gap:8px;padding:13px 22px;border-radius:12px;font-size:13.5px;font-weight:600;text-decoration:none;color:var(--ac-ink);background:var(--sf);border:1px solid var(--ln2);box-shadow:var(--sh);transition:border-color .2s,transform .2s,background-color .2s;white-space:nowrap}
.more-btn:hover{border-color:var(--ln3);transform:translateY(-1px);background:var(--sf2)}
.more-btn .hi{transition:transform .22s}
.more-btn:hover .hi{transform:translateX(3px)}

/* PASS 67: THE SUPPLIERS SECTION CLOSES ON ITS ONE ACTION, CENTRED UNDER THE
   GRID (the user's instruction). A larger pill than the header-row button,
   with a gradient ring that brightens, a sheen that crosses once and an arrow
   that leads on hover. Transform and opacity only; nothing loops. */
.more-row{display:flex;justify-content:center;margin-top:52px}
.more-cta{position:relative;isolation:isolate;overflow:hidden;gap:12px;padding:16px 16px 16px 28px;border-radius:999px;font-size:14.5px;
  color:var(--tx);border-color:transparent;background:linear-gradient(180deg,var(--sf2),var(--sf));
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 18px 40px -20px rgba(0,0,0,.75),0 0 0 1px var(--ln2);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.more-cta::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;padding:1px;
  background:linear-gradient(120deg,rgba(141,202,242,.85),rgba(74,159,224,.2) 40%,rgba(46,204,154,.55));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  opacity:.55;transition:opacity .35s}
.more-sh{position:absolute;top:0;bottom:0;left:0;width:40%;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.14),transparent);transform:translateX(-120%) skewX(-18deg);opacity:0}
.more-a{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;flex-shrink:0;color:#fff;
  background:linear-gradient(135deg,#1B6FB5,#14528A);box-shadow:0 6px 16px -6px rgba(27,111,181,.8);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.more-cta:hover{transform:translateY(-3px);background:linear-gradient(180deg,var(--sf2),var(--sf));
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 26px 54px -22px rgba(0,0,0,.8),0 0 0 1px var(--ln3),0 0 36px -8px rgba(74,159,224,.45)}
.more-cta:hover::before{opacity:1}
.more-cta:hover .more-sh{animation:moreSheen .8s ease-out forwards}
.more-cta:hover .more-a{transform:translateX(4px) rotate(-8deg)}
.more-cta:hover .hi{transform:none}
@keyframes moreSheen{0%{opacity:1;transform:translateX(-120%) skewX(-18deg)}100%{opacity:1;transform:translateX(320%) skewX(-18deg)}}
body.light-mode .more-cta{box-shadow:0 1px 2px rgba(10,40,70,.06),0 16px 34px -18px rgba(10,40,70,.3),0 0 0 1px var(--ln2)}
body.light-mode .more-cta::before{background:linear-gradient(120deg,rgba(30,107,171,.7),rgba(30,107,171,.12) 40%,rgba(15,155,114,.5))}
body.light-mode .more-cta:hover{box-shadow:0 1px 2px rgba(10,40,70,.08),0 22px 44px -20px rgba(10,40,70,.38),0 0 0 1px var(--ln3),0 0 30px -10px rgba(30,107,171,.4)}
body.light-mode .more-sh{background:linear-gradient(100deg,transparent,rgba(30,107,171,.1),transparent)}

/* ===========================================================================
   1. HERO — FULL BLEED, centred copy over the photograph
   =========================================================================== */
/* THE LOWER EDGE FACES DOWN AND DISSOLVES INTO THE NEXT SECTION. The user:
   "The lower edges fix of the hero section should be facing downward and
   seamlessly blend in the following section." So the bottom of the hero is
   ONE elliptical arc, lowest at the centre — each bottom corner takes 50% of
   the width as its horizontal radius — and the photograph under it ramps to
   the page ground exactly at that lowest point. The arc is therefore visible
   at the sides, where it cuts the photograph high, and invisible at the
   centre, where photograph and page are already the same colour: the edge
   draws itself in and then fades out. --hd is the arc's depth; the bottom
   padding is always deeper than it, so the arc can never reach a control. */
.hero{--hd:clamp(34px,7.2vw,120px);position:relative;z-index:2;padding:190px var(--edge) calc(var(--hd) + 84px);text-align:center;isolation:isolate;overflow:hidden;
  border-radius:0 0 50% 50% / 0 0 var(--hd) var(--hd)}
/* ⚠ THIS RULE IS SCOPED TO THE CLASS WE PUT ON THE ELEMENT. A negation of
   siblings (`.hero > *:not(.hb)`) matches Breakdance's bde-f-html-code
   wrapper, makes it a positioned containing block of height 0 and collapses
   the photograph to 1344x0 — which is what shipped in pass 64 (§2). */
.hero > .hero-copy,.hero > *:has(> .hero-copy){position:relative;z-index:2;min-width:0}
.hero-copy{max-width:1060px;margin:0 auto;display:flex;flex-direction:column;align-items:stretch}
.hero-copy > *{width:100%;min-width:0}
/* The rim along the arc, strong at the sides and gone before the centre. */
.hero::after{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;
  border:0 solid transparent;border-bottom:1.5px solid rgba(141,202,242,.5);border-radius:inherit;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.85) 14%,transparent 38%,transparent 62%,rgba(0,0,0,.85) 86%,#000 100%);
  mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.85) 14%,transparent 38%,transparent 62%,rgba(0,0,0,.85) 86%,#000 100%)}
body.light-mode .hero::after{border-bottom-color:rgba(30,107,171,.45)}

.hb{position:absolute;inset:0;z-index:0;overflow:hidden}
.hb-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 44%}
.hb-top{position:absolute;left:0;right:0;top:0;height:230px;background:linear-gradient(180deg,rgba(3,9,18,.74),rgba(3,9,18,.34) 48%,transparent)}
.hb-vig{position:absolute;inset:0;background:radial-gradient(138% 108% at 50% 36%,transparent 40%,rgba(3,9,18,.46) 100%)}
.hb-veil{position:absolute;left:50%;top:46%;width:min(1180px,102%);height:640px;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(3,10,20,.52),rgba(3,10,20,.32) 58%,transparent 100%)}
/* THE RAMP SITS BELOW THE CONTROLS. It spans the arc and a little above it,
   so the browse row is still on the photograph in both colour modes — in
   light mode a ramp that started higher washed white text out — and it lands
   on the page ground EXACTLY at the arc's lowest point. */
.hb-grad{position:absolute;left:0;right:0;bottom:0;height:calc(var(--hd) + 112px);background:linear-gradient(180deg,
  rgba(var(--gr0),var(--gg0),var(--gb0),0) 0%,
  rgba(var(--gr0),var(--gg0),var(--gb0),.06) 16%,
  rgba(var(--gr0),var(--gg0),var(--gb0),.18) 30%,
  rgba(var(--gr0),var(--gg0),var(--gb0),.36) 44%,
  rgba(var(--gr0),var(--gg0),var(--gb0),.56) 58%,
  rgba(var(--gr0),var(--gg0),var(--gb0),.76) 72%,
  rgba(var(--gr0),var(--gg0),var(--gb0),.9) 84%,
  rgba(var(--gr0),var(--gg0),var(--gb0),.98) 94%,
  rgba(var(--gr0),var(--gg0),var(--gb0),1) 100%)}
.hero:not(:has(.hb)){padding-top:176px}

/* the pre-header trust row */
.tp{display:inline-flex;align-items:center;gap:12px;padding:6px 16px 6px 6px;border-radius:999px;margin:0 0 26px;
  background:rgba(6,16,30,.44);border:1px solid rgba(255,255,255,.16)}
/* In the fallback the row is a direct child of the flex column; without
   this it stretches into a full-width bar. */
.hero-copy > .tp{width:auto;align-self:center}
.tp-stack{display:inline-flex;align-items:center}
.tp-av{display:block;width:30px;height:30px;border-radius:50%;overflow:hidden;flex-shrink:0;border:2px solid rgba(8,20,36,.9);margin-left:-9px}
.tp-av:first-child{margin-left:0}
.tp-face{display:block;width:100%;height:100%;object-fit:cover}
/* PASS 67: five gold stars and the user's line. The stars are one static SVG
   (ffinc2_home_stars_svg) filled with a gradient from the reviews' own
   #F5B544 up to a lighter gold, so the pill and the review cards carry the
   same star. The glow is a drop-shadow on the SVG, painted once. */
.tp-rate{display:inline-flex;align-items:center;gap:10px;min-width:0}
.tp-stars{display:block;flex-shrink:0;width:86px;height:auto;filter:drop-shadow(0 0 6px rgba(245,181,68,.35))}
.tp-txt{font-size:12.5px;line-height:1.3;color:rgba(255,255,255,.84);text-align:left}
.tp-txt b{font-weight:700;color:#fff}
body.light-mode .tp{background:rgba(7,18,33,.62)}

.hero h1{font-family:'Plus Jakarta Sans';font-size:62px;font-weight:800;line-height:1.05;letter-spacing:-2.2px;color:#fff;max-width:960px;margin:0 auto 20px;overflow-wrap:break-word;text-wrap:balance;text-shadow:0 2px 28px rgba(0,0,0,.45)}
.hero h1 em{font-style:normal;color:#8DCAF2}
body.light-mode .hero h1{color:#fff}
body.light-mode .hero h1 em{color:#9FD5F7}
.hero-sub{font-size:18px;line-height:1.62;color:rgba(255,255,255,.86);max-width:680px;margin:0 auto 32px;text-shadow:0 1px 16px rgba(0,0,0,.5)}

/* the search box */
.hero-sb{display:flex;align-items:center;gap:8px;width:100%;max-width:640px;margin:0 auto 24px;padding:7px;border-radius:15px;
  background:rgba(255,255,255,.97);box-shadow:0 22px 50px -20px rgba(0,0,0,.6);transition:box-shadow .25s}
.hero-sb:focus-within{box-shadow:0 22px 50px -20px rgba(0,0,0,.6),0 0 0 4px rgba(141,202,242,.32)}
.hero-si{flex:1;display:flex;align-items:center;gap:13px;padding:0 8px 0 20px;color:#2D7FC4}
.hero-in{background:transparent;border:0;outline:0;font:15px 'Inter',system-ui,sans-serif;color:#0B1B2C;width:100%;min-width:0}
.hero-in::placeholder{color:#5A7D93;opacity:1}
.hero-btn{flex-shrink:0;border:0;cursor:pointer;padding:13px 27px;border-radius:10px;font:600 14.5px 'Inter',system-ui,sans-serif;color:#fff;background:linear-gradient(135deg,#1B6FB5,#14528A);box-shadow:0 6px 20px -6px rgba(20,82,138,.7);transition:transform .2s,box-shadow .2s}
.hero-btn:hover{transform:translateY(-1px);box-shadow:0 10px 26px -6px rgba(27,111,181,.9)}

/* THE BROWSE ROW. The label is TEXT — "How can the Browse by: text also be
   a pill?" — and the chips are the /search/ page's .fb-chip treatment: the
   label in the category's own colour, a border of that colour at ~30%, a
   tint of it that deepens on hover and on focus. On the photograph each chip
   sits on a dark wash under that tint so the colour reads in both modes. */
.hero-ql{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin:0}
.hero-ql-l{font-size:12.5px;font-weight:600;letter-spacing:.02em;color:#fff;margin-right:6px;text-shadow:0 1px 2px rgba(0,0,0,.55),0 1px 12px rgba(0,0,0,.7)}
.hero-chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;text-decoration:none;padding:7px 14px;border-radius:999px;white-space:nowrap;
  color:color-mix(in srgb,var(--c,#4A9FE0) 72%,#fff);border:1px solid var(--c-bd,rgba(74,159,224,.3));
  background:linear-gradient(var(--c-bg,transparent),var(--c-bg,transparent)),rgba(5,13,24,.84);
  transition:transform .2s,background-color .2s,border-color .2s,box-shadow .2s}
.hero-chip:hover,.hero-chip:focus-visible{transform:translateY(-1px);border-color:var(--c);
  background:linear-gradient(color-mix(in srgb,var(--c) 24%,transparent),color-mix(in srgb,var(--c) 24%,transparent)),rgba(5,13,24,.86);
  box-shadow:0 8px 22px -10px color-mix(in srgb,var(--c) 70%,transparent)}

@keyframes h-rise{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}
.hero-copy > *{animation:h-rise .6s cubic-bezier(.22,.7,.3,1) both}
.hero-copy > :nth-child(2){animation-delay:.06s}
.hero-copy > :nth-child(3){animation-delay:.12s}
.hero-copy > :nth-child(4){animation-delay:.18s}
.hero-copy > :nth-child(5){animation-delay:.24s}

/* ===========================================================================
   2. CATEGORIES — CONTAINED, left header, five cards with drawn scenes
   =========================================================================== */
.cats{position:relative;z-index:3;padding:112px 24px 112px;overflow-x:clip}
.bgrid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:18px}
.bc-poultry{grid-column:span 7}
.bc-beef{grid-column:span 5}
.bc-seafood{grid-column:span 5}
.bc-veg{grid-column:span 7}
.bc-cold{grid-column:1/-1}

.bc{position:relative;isolation:isolate;display:flex;flex-direction:column;border-radius:22px;overflow:hidden;text-decoration:none;color:inherit;
  background:linear-gradient(180deg,var(--sf2),var(--sf));border:1px solid var(--ln);box-shadow:var(--sh);
  transition:transform .34s cubic-bezier(.3,1.2,.55,1),border-color .3s,box-shadow .34s}
.bc::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;z-index:3;background:linear-gradient(90deg,transparent,rgba(var(--acrgb),.95) 30%,rgba(var(--acrgb),.95) 70%,transparent)}
.bc::after{content:'';position:absolute;inset:-1px;border-radius:23px;padding:1px;pointer-events:none;z-index:4;opacity:0;transition:opacity .35s;
  background:linear-gradient(150deg,rgba(var(--acrgb),.9),transparent 45%,transparent 60%,rgba(var(--acrgb),.5));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.bc:hover{transform:translateY(-6px);border-color:rgba(var(--acrgb),.45);box-shadow:var(--sh),0 34px 70px -30px rgba(var(--acrgb),.7)}
.bc:hover::after{opacity:1}

/* THE SCENE. A blueprint grid with corner registration marks, an accent
   glow rising from the floor, and the drawing on top. */
.bc-scene{position:relative;display:block;height:232px;overflow:hidden;border-bottom:1px solid var(--ln);
  background:radial-gradient(70% 95% at 50% 105%,rgba(var(--acrgb),.2),transparent 70%),var(--bc-bg)}
.bc-grid{position:absolute;inset:0;
  background-image:linear-gradient(rgba(var(--acrgb),.10) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--acrgb),.10) 1px,transparent 1px);background-size:28px 28px;background-position:center;
  -webkit-mask-image:radial-gradient(ellipse 72% 80% at 50% 55%,#000 30%,transparent 100%);mask-image:radial-gradient(ellipse 72% 80% at 50% 55%,#000 30%,transparent 100%)}
.bc-x{position:absolute;width:11px;height:11px;opacity:.55}
.bc-x::before,.bc-x::after{content:'';position:absolute;background:rgba(var(--acrgb),.8)}
.bc-x::before{left:5px;top:0;width:1px;height:11px}
.bc-x::after{top:5px;left:0;height:1px;width:11px}
.bc-x1{left:12px;top:12px}.bc-x2{right:12px;top:12px}.bc-x3{left:12px;bottom:12px}.bc-x4{right:12px;bottom:12px}
.bs{position:absolute;inset:0;display:block;color:var(--ac)}
body.light-mode .bs{color:var(--acl)}
.bs-tag{position:absolute;left:50%;top:20px;translate:-50% 0;display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;white-space:nowrap;
  font:600 11px 'Inter',system-ui,sans-serif;letter-spacing:.02em;color:var(--tx);background:var(--sf2);border:1px solid rgba(var(--acrgb),.35);box-shadow:0 10px 24px -14px rgba(0,0,0,.6)}
.bs-tag::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--ac);box-shadow:0 0 8px var(--ac)}
.bs-spark{position:absolute;width:4px;height:4px;border-radius:50%;background:#fff;box-shadow:0 0 8px #fff;opacity:0;animation:bsTw 3.6s ease-in-out infinite}
body.light-mode .bs-spark{background:var(--ac);box-shadow:0 0 6px var(--ac)}
.bs-sp1{left:24%;top:30%}.bs-sp2{left:70%;top:66%;animation-delay:1.2s}.bs-sp3{left:82%;top:24%;animation-delay:2.4s}
@keyframes bsTw{0%,100%{opacity:0;scale:.4}50%{opacity:.9;scale:1}}
@keyframes spin{to{transform:rotate(360deg)}}

/* -- poultry: what the category is sold as, orbiting the glyph ----------- */
.sp-orbit{position:absolute;left:50%;top:50%;width:176px;height:176px;margin:-88px 0 0 -88px;border-radius:50%;border:1px dashed rgba(var(--acrgb),.45);animation:spin 36s linear infinite}
.sp-orbit2{width:270px;height:270px;margin:-135px 0 0 -135px;border:1px solid rgba(var(--acrgb),.16);animation-duration:64s;animation-direction:reverse}
.sp-orbit::before{content:'';position:absolute;left:50%;top:-4px;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--ac);box-shadow:0 0 12px var(--ac)}
.sp-core{position:absolute;left:50%;top:50%;width:92px;height:92px;margin:-46px 0 0 -46px;border-radius:28px;display:grid;place-items:center;
  color:color-mix(in srgb,var(--ac) 45%,#fff);background:linear-gradient(145deg,rgba(var(--acrgb),.32),rgba(var(--acrgb),.07));border:1px solid rgba(var(--acrgb),.55);
  box-shadow:0 0 0 8px rgba(var(--acrgb),.06),0 22px 44px -18px rgba(var(--acrgb),.8)}
body.light-mode .sp-core{color:var(--acl);background:linear-gradient(145deg,rgba(var(--acrgb),.22),#fff)}
.sp-core::after{content:'';position:absolute;inset:-1px;border-radius:28px;border:1px solid rgba(var(--acrgb),.7);animation:spPulse 3.2s ease-out infinite}
@keyframes spPulse{from{opacity:.8;scale:1}to{opacity:0;scale:1.45}}
.sp-chip{position:absolute;padding:6px 11px;border-radius:999px;white-space:nowrap;font:600 11.5px 'Inter',system-ui,sans-serif;color:var(--tx);
  background:var(--sf2);border:1px solid rgba(var(--acrgb),.38);box-shadow:0 12px 26px -14px rgba(0,0,0,.7);animation:spBob 5.4s ease-in-out infinite}
.sp-chip::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:7px;vertical-align:1px;background:var(--ac)}
.sp-c1{left:9%;top:22%}
.sp-c2{right:9%;top:28%;animation-delay:-1.4s}
.sp-c3{left:13%;bottom:18%;animation-delay:-2.7s}
.sp-c4{right:14%;bottom:22%;animation-delay:-4s}
@keyframes spBob{0%,100%{translate:0 0}50%{translate:0 -7px}}

/* -- beef: a side of beef in primals, the priced cut moving across it ---- */
.bf-side{position:absolute;left:50%;top:66px;width:min(80%,330px);height:96px;translate:-50% 0}
.bf-side svg{position:absolute;inset:0;width:100%;height:100%}
.bf-hl{position:absolute;top:8%;bottom:8%;left:5%;width:21%;border-radius:12px;
  background:linear-gradient(180deg,rgba(var(--acrgb),.36),rgba(var(--acrgb),.12));border:1px solid rgba(var(--acrgb),.75);box-shadow:0 0 26px rgba(var(--acrgb),.45);
  animation:bfMove 8s cubic-bezier(.65,0,.3,1) infinite}
@keyframes bfMove{0%,21%{translate:0 0}25%,46%{translate:108% 0}50%,71%{translate:222% 0}75%,96%{translate:342% 0}100%{translate:0 0}}
.bf-lbls{position:absolute;left:50%;top:174px;width:min(80%,330px);height:14px;translate:-50% 0}
.bf-lbl{position:absolute;top:0;translate:-50% 0;font:700 10.5px 'Inter',system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--tx2);opacity:.45;animation:bfLbl 8s linear infinite}
.bf-l1{left:15.5%}.bf-l2{left:38.5%;animation-delay:-6s}.bf-l3{left:62%;animation-delay:-4s}.bf-l4{left:85.5%;animation-delay:-2s}
@keyframes bfLbl{0%,21%{opacity:1}25%,96%{opacity:.45}100%{opacity:1}}
.bf-spec{position:absolute;left:50%;top:20px;translate:-50% 0;display:flex;align-items:center;gap:12px;padding:6px 13px;border-radius:999px;white-space:nowrap;
  font:600 11px 'Inter',system-ui,sans-serif;color:var(--tx);background:var(--sf2);border:1px solid rgba(var(--acrgb),.35);box-shadow:0 10px 24px -14px rgba(0,0,0,.6)}
.bf-sh{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--tx3)}
.bf-si{display:inline-flex;align-items:center;gap:5px}
.bf-si i{position:relative;width:12px;height:12px;border-radius:50%;border:1.5px solid rgba(var(--acrgb),.7)}
.bf-si i::after{content:'';position:absolute;inset:2px;border-radius:50%;background:var(--ac);opacity:0;scale:.3;animation:bfTick 8s ease infinite}
.bf-s2 i::after{animation-delay:.5s}.bf-s3 i::after{animation-delay:1s}
@keyframes bfTick{0%,6%{opacity:0;scale:.3}10%,86%{opacity:1;scale:1}92%,100%{opacity:0;scale:.3}}

/* -- seafood: fish across a moving sea ----------------------------------- */
.sw{position:absolute;left:0;right:0;bottom:0;height:68px;overflow:hidden;opacity:.24}
.sw-b{height:92px;opacity:.12}
.sw-t{display:flex;width:200%;height:100%;animation:mqscroll 13s linear infinite}
.sw-b .sw-t{animation-duration:19s;animation-direction:reverse}
.sw svg{flex:none;width:50%;height:100%}
.sf{position:absolute;left:0;right:0;height:26px;animation:sfSwim 13s linear infinite}
.sf svg{position:absolute;left:0;top:0;width:58px;height:32px}
.sf-1{top:62px}
.sf-2{top:104px;animation-duration:17s;animation-delay:-8s;opacity:.75}
.sf-2 svg{width:44px;height:24px}
.sf-3{top:140px;animation-duration:15s;animation-delay:-3s;opacity:.55}
.sf-3 svg{width:36px;height:20px}
@keyframes sfSwim{from{transform:translateX(100%)}to{transform:translateX(-60px)}}
.sb{position:absolute;bottom:48px;width:7px;height:7px;border-radius:50%;border:1px solid rgba(var(--acrgb),.7);opacity:0;animation:sbRise 5.2s ease-in infinite}
.sb-1{left:24%}.sb-2{left:57%;animation-delay:1.7s;width:5px;height:5px}.sb-3{left:79%;animation-delay:3.4s}
@keyframes sbRise{0%{opacity:0;translate:0 0}18%{opacity:1}100%{opacity:0;translate:4px -120px}}

/* -- fruit & veg: individually quick frozen pieces onto a calibre scale -- */
.vq{position:absolute;top:-22px;width:18px;height:18px;margin-left:-9px;border-radius:50%;opacity:0;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55),inset -3px -4px 6px rgba(0,0,0,.25),0 6px 14px -6px rgba(0,0,0,.6);animation:vqDrop 5s infinite}
.vq-b{background:radial-gradient(circle at 34% 30%,#C7D2FE,#6366F1 45%,#3730A3)}
.vq-p{background:radial-gradient(circle at 34% 30%,#BBF7D0,#22C55E 50%,#15803D);width:14px;height:14px;margin-left:-7px}
.vq-m{background:radial-gradient(circle at 34% 30%,#FEF3C7,#F59E0B 55%,#B45309);border-radius:6px}
.vq-s{background:radial-gradient(circle at 34% 30%,#FECACA,#EF4444 50%,#B91C1C);border-radius:50% 50% 46% 46% / 60% 60% 40% 40%}
.vq-1{left:16%}.vq-2{left:28%;animation-delay:-.72s}.vq-3{left:40%;animation-delay:-1.44s}.vq-4{left:52%;animation-delay:-2.16s}
.vq-5{left:64%;animation-delay:-2.88s}.vq-6{left:76%;animation-delay:-3.6s}.vq-7{left:86%;animation-delay:-4.32s}
@keyframes vqDrop{
  0%{opacity:0;translate:0 0;animation-timing-function:cubic-bezier(.55,0,1,.45)}
  6%{opacity:1}
  48%{translate:0 170px;animation-timing-function:ease-out}
  54%{translate:0 160px;animation-timing-function:ease-in}
  60%{translate:0 170px}
  86%{opacity:1;translate:0 170px}
  100%{opacity:0;translate:0 170px}}
.vq-tray{position:absolute;left:8%;right:8%;bottom:30px;height:24px}
.vq-tray svg{width:100%;height:100%}

/* -- cold chain: a reefer on the road under a four-stop route ------------ */
.cc-route{position:absolute;left:10%;right:10%;top:44px;height:48px}
.cc-rail,.cc-fill{position:absolute;left:0;right:0;top:9px;height:2px;border-radius:2px}
.cc-rail{background:rgba(var(--acrgb),.22)}
.cc-fill{background:linear-gradient(90deg,rgba(var(--acrgb),.25),var(--ac));transform-origin:left center;animation:ccFill 9s linear infinite}
@keyframes ccFill{0%{transform:scaleX(0);opacity:1}82%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
.cc-run{position:absolute;left:0;right:0;top:0;height:20px;animation:ccRun 9s linear infinite}
.cc-dot{position:absolute;left:-8px;top:2px;width:16px;height:16px;border-radius:50%;background:var(--ac);box-shadow:0 0 0 5px rgba(var(--acrgb),.2),0 0 20px var(--ac)}
@keyframes ccRun{0%{transform:translateX(0);opacity:1}82%{transform:translateX(100%);opacity:1}100%{transform:translateX(100%);opacity:0}}
.cc-stop{position:absolute;top:0;display:flex;flex-direction:column;align-items:center;gap:9px;translate:-50% 0}
.cc-stop i{position:relative;width:20px;height:20px;border-radius:50%;background:var(--bc-bg);border:2px solid rgba(var(--acrgb),.7)}
.cc-stop i::after{content:'';position:absolute;inset:-6px;border-radius:50%;background:rgba(var(--acrgb),.35);opacity:0;animation:ccPass 9s ease-out infinite}
.cc-stop b{font:600 11.5px 'Inter',system-ui,sans-serif;color:var(--tx2);white-space:nowrap}
.cc-st1{left:0}.cc-st2{left:33.333%}.cc-st3{left:66.667%}.cc-st4{left:100%}
.cc-st2 i::after{animation-delay:2.46s}.cc-st3 i::after{animation-delay:4.92s}.cc-st4 i::after{animation-delay:7.38s}
@keyframes ccPass{0%{opacity:1;scale:1.25}26%,100%{opacity:0;scale:1}}
.cc-temp{position:absolute;left:10%;bottom:104px;display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;white-space:nowrap;
  font:600 11.5px 'Inter',system-ui,sans-serif;color:var(--tx);background:var(--sf2);border:1px solid rgba(var(--acrgb),.35)}
.cc-temp i{width:7px;height:7px;border-radius:50%;background:#52DEB5;box-shadow:0 0 0 0 rgba(82,222,181,.6);animation:ccLive 2.2s ease-out infinite}
@keyframes ccLive{0%{box-shadow:0 0 0 0 rgba(82,222,181,.55)}100%{box-shadow:0 0 0 9px rgba(82,222,181,0)}}
.cc-road{position:absolute;left:0;right:0;bottom:38px;height:2px;background:rgba(var(--acrgb),.3);overflow:visible}
.cc-dash{position:absolute;left:0;top:12px;width:calc(100% + 46px);height:2px;background:repeating-linear-gradient(90deg,rgba(var(--acrgb),.45) 0 22px,transparent 22px 46px);animation:ccRoad .8s linear infinite}
@keyframes ccRoad{to{transform:translateX(-46px)}}
.cc-truck{position:absolute;left:58%;bottom:37px;width:150px;height:64px;margin-left:-75px;animation:ccBob .9s ease-in-out infinite alternate}
.cc-truck svg{width:100%;height:100%}
@keyframes ccBob{to{translate:0 -1.5px}}

/* THE BODY */
.bc-body{position:relative;z-index:1;display:flex;flex-direction:column;flex:1;padding:24px 26px 22px}
.bc-top{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.bc-ico{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex-shrink:0;color:var(--ac);background:rgba(var(--acrgb),.12);border:1px solid rgba(var(--acrgb),.32)}
body.light-mode .bc-ico{color:var(--acl)}
.bc-name{font:800 20px/1.2 'Plus Jakarta Sans';letter-spacing:-.4px;color:var(--tx)}
.bc-desc{font-size:14px;line-height:1.62;color:var(--tx2);margin:0 0 20px;max-width:54ch}
.bc-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:auto;padding-top:16px;border-top:1px solid var(--ln)}
.bc-count{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--tx3)}
.bc-count b{color:var(--tx);font-weight:700}
.bc-count i{width:7px;height:7px;border-radius:50%;background:var(--ac);box-shadow:0 0 0 3px rgba(var(--acrgb),.2)}
.bc-go{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:color-mix(in srgb,var(--ac) 55%,#fff);white-space:nowrap}
body.light-mode .bc-go{color:var(--acl)}
.bc-go .hi{transition:transform .25s}
.bc:hover .bc-go .hi{transform:translateX(4px)}

/* The service card is the wide one: copy left, the scene right. */
.bc-cold{flex-direction:row}
.bc-cold .bc-scene{order:2;flex:1.25;height:auto;min-height:264px;border-bottom:0;border-left:1px solid var(--ln)}
.bc-cold .bc-body{flex:1;justify-content:center;padding:34px 36px}
.bc-cold .bc-name{font-size:24px}
.bc-cold .bc-desc{font-size:15px}

body.light-mode .bc{background:linear-gradient(180deg,#FFFFFF,#F9FCFF)}
body.light-mode .bc-scene{background:radial-gradient(70% 95% at 50% 105%,rgba(var(--acrgb),.16),transparent 70%),#F5F9FE}
body.light-mode .sp-chip,body.light-mode .bs-tag,body.light-mode .bf-spec,body.light-mode .cc-temp{background:#FFFFFF;box-shadow:0 8px 20px -12px rgba(10,40,70,.35)}
.cc-wheel{fill:var(--bc-bg)}

/* ===========================================================================
   3. VERIFIED SUPPLIERS — FULL WIDTH, edge to edge
   =========================================================================== */
.pu{position:relative;z-index:2;padding:112px 0 112px;overflow:hidden;background:linear-gradient(180deg,var(--g0),var(--g1) 40%,var(--g1) 60%,var(--g0))}
.sgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
/* THE CARD MARKUP IS THE 1.0 PLACEHOLDER'S, BYTE FOR BYTE (PRE-LAUNCH.md).
   Everything below is presentation only. */
.sc{position:relative;isolation:isolate;display:flex;flex-direction:column;padding:24px 24px 22px;border-radius:22px;overflow:hidden;
  background:radial-gradient(120% 60% at 0% 0%,color-mix(in srgb,var(--ac,#4A9FE0) 12%,transparent),transparent 60%),linear-gradient(180deg,var(--sf2),var(--sf));
  border:1px solid var(--ln);box-shadow:var(--sh);
  transition:transform .34s cubic-bezier(.3,1.2,.55,1),border-color .25s,box-shadow .3s}
.sc::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;z-index:2;background:linear-gradient(90deg,var(--ac,#4A9FE0),color-mix(in srgb,var(--ac,#4A9FE0) 12%,transparent) 74%,transparent)}
/* a light that travels the accent rail now and then, card by card */
.sc-head::after{content:'';position:absolute;top:0;left:0;width:28%;height:2px;z-index:3;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent);opacity:0;animation:scRail 8s ease-in-out infinite}
.sc:nth-child(2) .sc-head::after{animation-delay:1s}.sc:nth-child(3) .sc-head::after{animation-delay:2s}.sc:nth-child(4) .sc-head::after{animation-delay:3s}
.sc:nth-child(5) .sc-head::after{animation-delay:4s}.sc:nth-child(6) .sc-head::after{animation-delay:5s}.sc:nth-child(7) .sc-head::after{animation-delay:6s}.sc:nth-child(8) .sc-head::after{animation-delay:7s}
@keyframes scRail{0%{opacity:0;transform:translateX(-100%)}4%{opacity:1}22%{opacity:1;transform:translateX(360%)}26%,100%{opacity:0;transform:translateX(360%)}}
.sc::after{content:'';position:absolute;inset:-1px;border-radius:23px;padding:1px;pointer-events:none;z-index:3;opacity:0;transition:opacity .35s;
  background:linear-gradient(150deg,var(--ac,#4A9FE0),transparent 45%,transparent 65%,color-mix(in srgb,var(--ac,#4A9FE0) 60%,transparent));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.sc:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--ac,#4A9FE0) 40%,transparent);box-shadow:var(--sh),0 30px 60px -24px color-mix(in srgb,var(--ac,#4A9FE0) 55%,transparent)}
.sc:hover::after{opacity:1}
.sc-head{display:flex;align-items:flex-start;gap:13px;margin-bottom:16px}
.sc-logo{position:relative;width:50px;height:50px;border-radius:15px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--g0);font:800 14.5px 'Plus Jakarta Sans';
  box-shadow:0 10px 24px -12px color-mix(in srgb,var(--ac,#4A9FE0) 70%,transparent);transition:box-shadow .3s,transform .3s}
.sc:hover .sc-logo{transform:translateY(-1px) rotate(-3deg);box-shadow:0 0 0 5px color-mix(in srgb,var(--ac,#4A9FE0) 14%,transparent),0 12px 26px -12px var(--ac,#4A9FE0)}
.sc-li{position:absolute;inset:0;border-radius:15px;opacity:.18}
.sc-lt{position:relative;z-index:1}
.sc-ng{flex:1;min-width:0;padding-top:2px}
.sc-name{font:700 15.5px/1.28 'Plus Jakarta Sans';letter-spacing:-.25px;color:var(--tx);margin-bottom:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sc-loc{display:flex;align-items:center;gap:4px;font-size:11.5px;color:var(--tx2)}
.sc-bdgs{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex-shrink:0}
.sc-v,.sc-f{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;padding:4px 9px;border-radius:999px;white-space:nowrap}
.sc-v{background:rgba(46,204,154,.11);color:var(--gr-ink);border:1px solid rgba(46,204,154,.28)}
.sc-f{background:rgba(245,158,11,.12);color:var(--am);border:1px solid rgba(245,158,11,.3)}
.sc-tags,.sc-certs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:13px}
.sc-tag{font-size:11px;padding:4px 10px;border-radius:7px;background:var(--sf3);border:1px solid var(--ln);color:var(--tx2)}
.sc-desc{font-size:13.5px;line-height:1.62;color:var(--tx2);margin:0 0 18px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.sc-stats{display:flex;margin-bottom:15px;border-radius:14px;overflow:hidden;background:var(--g0);border:1px solid var(--ln)}
body.light-mode .sc-stats{background:#F2F7FC}
.sc-stat{flex:1;padding:12px 6px;text-align:center}
.sc-stat+.sc-stat{border-left:1px solid var(--ln)}
.sc-sv{display:block;font:800 16px 'Plus Jakarta Sans';line-height:1.2;color:var(--tx);font-variant-numeric:tabular-nums}
.sc-sl{display:block;margin-top:3px;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--tx3)}
.sc-certs{margin-bottom:18px}
.sc-cert{font-size:10.5px;font-weight:600;padding:4px 10px;border-radius:6px;background:color-mix(in srgb,var(--ac,#4A9FE0) 10%,transparent);border:1px solid var(--ln2);color:var(--ac-ink)}
body.light-mode .sc-cert{color:#17568B}
/* the monogram sits on its own tinted tile in light mode, so it needs a
   deeper ink than the other accent-as-text uses (measured 3.6:1 at 62%) */
body.light-mode .sc .sc-lt{color:color-mix(in srgb,var(--ac,#4A9FE0) 46%,#000)!important}
.sc-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:14px;border-top:1px solid var(--ln)}
.sc-rate{display:flex;align-items:center;gap:4px;font-size:12px;letter-spacing:1px;color:var(--am)}
body.light-mode .sc-rate,body.light-mode .sc-f{color:#9A4708}
.sc-rate span{font-size:11px;letter-spacing:0;color:var(--tx3)}
.sc-cta{display:flex;align-items:center;gap:6px;font:600 12px 'Inter',system-ui,sans-serif;color:var(--ac,#4A9FE0);background:transparent;border:1px solid var(--ln2);padding:8px 13px;border-radius:10px;pointer-events:none;white-space:nowrap;transition:background-color .22s,color .22s,border-color .22s}
.sc:hover .sc-cta{background:var(--ac,#4A9FE0);border-color:var(--ac,#4A9FE0);color:#050D18}
body.light-mode .sc{background:radial-gradient(120% 60% at 0% 0%,color-mix(in srgb,var(--ac,#4A9FE0) 9%,transparent),transparent 60%),linear-gradient(180deg,#FFFFFF,#FAFCFF)}
/* The tabler glyphs inside the placeholder markup, drawn as masks (the font
   is not loaded on this page, and the placeholders stay byte-for-byte). */
.pu .ti{display:inline-block;width:1em;height:1em;vertical-align:-.12em;background:currentColor;-webkit-mask:var(--tim) center/contain no-repeat;mask:var(--tim) center/contain no-repeat}
.pu .ti-map-pin{--tim:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='11' r='3'/%3E%3Cpath d='M17.66 16.66L13.41 20.9a2 2 0 01-2.83 0l-4.24-4.24a8 8 0 1111.32 0z'/%3E%3C/svg%3E")}
.pu .ti-star{--tim:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 17.75l-6.17 3.25 1.18-6.88-5-4.87 6.9-1L12 2l3.09 6.25 6.9 1-5 4.87 1.18 6.88z'/%3E%3C/svg%3E")}
.pu .ti-circle-check{--tim:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E")}
.pu .ti-arrow-right{--tim:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 18l6-6M13 6l6 6'/%3E%3C/svg%3E")}

/* ===========================================================================
   4. WHAT VERIFIED MEANS — CONTAINED, centred head, a listing under review
   =========================================================================== */
.vf{position:relative;z-index:2;padding:112px 24px 116px;overflow-x:clip}
.vx{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px) minmax(0,1fr);gap:30px;align-items:center}
.vx-col{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:20px}
.vx-card{position:relative;isolation:isolate;display:flex;flex-direction:column;padding:20px 20px 18px;border-radius:18px;
  background:linear-gradient(180deg,var(--sf2),var(--sf));border:1px solid var(--ln);box-shadow:var(--sh)}
body.light-mode .vx-card{background:linear-gradient(180deg,#FFFFFF,#F9FCFF)}
.vx-lit{position:absolute;inset:-1px;border-radius:19px;border:1px solid var(--gr);pointer-events:none;opacity:0;
  box-shadow:0 0 0 4px rgba(46,204,154,.10),0 20px 44px -22px rgba(46,204,154,.7)}
.vx-c1 .vx-lit{animation:vxL1 9s linear infinite}.vx-c2 .vx-lit{animation:vxL2 9s linear infinite}
.vx-c3 .vx-lit{animation:vxL3 9s linear infinite}.vx-c4 .vx-lit{animation:vxL4 9s linear infinite}
@keyframes vxL1{0%,13%{opacity:0}16%{opacity:1}30%,88%{opacity:.35}94%,100%{opacity:0}}
@keyframes vxL2{0%,23%{opacity:0}26%{opacity:1}40%,88%{opacity:.35}94%,100%{opacity:0}}
@keyframes vxL3{0%,33%{opacity:0}36%{opacity:1}50%,88%{opacity:.35}94%,100%{opacity:0}}
@keyframes vxL4{0%,43%{opacity:0}46%{opacity:1}60%,88%{opacity:.35}94%,100%{opacity:0}}
.vx-stub{position:absolute;top:50%;width:30px;height:1px;pointer-events:none}
.vx-l .vx-stub{right:-31px;background:linear-gradient(90deg,var(--ln3),transparent)}
.vx-r .vx-stub{left:-31px;background:linear-gradient(270deg,var(--ln3),transparent)}
.vx-stub i{position:absolute;top:-3px;width:7px;height:7px;border-radius:50%;background:var(--ac);box-shadow:0 0 10px var(--ac)}
.vx-l .vx-stub i{right:-3px}.vx-r .vx-stub i{left:-3px}
.vx-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.vx-ico{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;color:var(--ac-ink);background:color-mix(in srgb,var(--ac) 12%,transparent);border:1px solid var(--ln2)}
.vx-n{font:700 11px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;color:var(--tx3)}
.vx-t{display:block;font:700 16.5px/1.3 'Plus Jakarta Sans';letter-spacing:-.25px;color:var(--tx);margin-bottom:6px}
.vx-b{display:block;font-size:13.5px;line-height:1.6;color:var(--tx2);margin-bottom:14px}
.vx-ok{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;margin-top:auto;padding:5px 11px;border-radius:999px;font-size:11px;font-weight:700;
  color:var(--gr-ink);background:rgba(46,204,154,.1);border:1px solid rgba(46,204,154,.3)}

.vs{position:relative;margin:0;display:grid;place-items:center;min-height:440px}
.vs-halo{position:absolute;left:50%;top:50%;width:420px;height:420px;margin:-210px 0 0 -210px;border-radius:50%;background:radial-gradient(circle,rgba(74,159,224,.22),transparent 64%)}
body.light-mode .vs-halo{background:radial-gradient(circle,rgba(30,107,171,.12),transparent 64%)}
.vs-ring{position:absolute;left:50%;top:50%;width:360px;height:360px;margin:-180px 0 0 -180px;border-radius:50%;border:1px dashed var(--ln3);animation:spin 44s linear infinite}
.vs-ring2{width:432px;height:432px;margin:-216px 0 0 -216px;border:1px solid var(--ln);animation-duration:72s;animation-direction:reverse}
.vs-ring::before{content:'';position:absolute;left:50%;top:-4px;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:#52DEB5;box-shadow:0 0 12px #52DEB5}
.vs-ring2::before{background:var(--ac);box-shadow:0 0 12px var(--ac);top:auto;bottom:-4px}
.vs-card{position:relative;z-index:1;display:block;width:312px;padding:18px;border-radius:22px;overflow:hidden;
  background:linear-gradient(180deg,var(--sf2),var(--sf));border:1px solid var(--ln2);box-shadow:var(--sh2)}
body.light-mode .vs-card{background:linear-gradient(180deg,#FFFFFF,#F7FBFF)}
.vs-head{display:flex;align-items:center;gap:11px;padding-bottom:14px;margin-bottom:12px;border-bottom:1px solid var(--ln)}
.vs-av{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex-shrink:0;color:var(--ac-ink);background:color-mix(in srgb,var(--ac) 14%,transparent);border:1px solid var(--ln2)}
.vs-id{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.vs-id b{font:700 13px 'Plus Jakarta Sans';color:var(--tx)}
.vs-id i{display:block;width:72%;height:5px;border-radius:4px;background:var(--ln2)}
.vs-id .vs-id2{width:46%}
.vs-state{display:grid;justify-items:end}
.vs-st{grid-area:1/1;display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;padding:4px 9px;border-radius:999px;white-space:nowrap}
.vs-st-a{color:var(--am);background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.32);animation:vsA 9s linear infinite}
.vs-st-b{color:var(--gr-ink);background:rgba(46,204,154,.12);border:1px solid rgba(46,204,154,.36);opacity:0;animation:vsB 9s linear infinite}
body.light-mode .vs-st-a{color:#9A4708}
@keyframes vsA{0%,47%{opacity:1}51%,90%{opacity:0}95%,100%{opacity:1}}
@keyframes vsB{0%,47%{opacity:0}51%,90%{opacity:1}95%,100%{opacity:0}}
.vs-rows{display:flex;flex-direction:column;gap:8px}
.vs-row{display:grid;grid-template-columns:18px minmax(0,1fr) auto 20px;align-items:center;gap:9px;padding:10px 10px;border-radius:12px;background:var(--mk);border:1px solid var(--ln)}
.vs-ri{color:var(--tx3)}
.vs-rl{font:600 12.5px 'Inter',system-ui,sans-serif;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vs-rs{font-size:10.5px;color:var(--tx3);white-space:nowrap}
.vs-tick{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#52DEB5,#2ECC9A);color:#04342C;box-shadow:0 0 0 3px rgba(46,204,154,.18)}
.vs-r1 .vs-tick,.vs-r1 .vs-rs{animation:vtk1 9s linear infinite}
.vs-r2 .vs-tick,.vs-r2 .vs-rs{animation:vtk2 9s linear infinite}
.vs-r3 .vs-tick,.vs-r3 .vs-rs{animation:vtk3 9s linear infinite}
.vs-r4 .vs-tick,.vs-r4 .vs-rs{animation:vtk4 9s linear infinite}
@keyframes vtk1{0%,13%{opacity:0;scale:.4}16%{opacity:1;scale:1.15}18%,88%{opacity:1;scale:1}94%,100%{opacity:0;scale:1}}
@keyframes vtk2{0%,23%{opacity:0;scale:.4}26%{opacity:1;scale:1.15}28%,88%{opacity:1;scale:1}94%,100%{opacity:0;scale:1}}
@keyframes vtk3{0%,33%{opacity:0;scale:.4}36%{opacity:1;scale:1.15}38%,88%{opacity:1;scale:1}94%,100%{opacity:0;scale:1}}
@keyframes vtk4{0%,43%{opacity:0;scale:.4}46%{opacity:1;scale:1.15}48%,88%{opacity:1;scale:1}94%,100%{opacity:0;scale:1}}
.vs-foot{display:flex;gap:8px;margin-top:14px}
.vs-foot i{display:block;height:5px;width:38%;border-radius:4px;background:var(--ln2)}
.vs-foot .vs-f2{width:22%}
.vs-beam{position:absolute;left:0;right:0;top:0;height:70px;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(74,159,224,.16) 55%,rgba(141,202,242,.75) 97%,transparent);animation:vsBeam 9s linear infinite}
body.light-mode .vs-beam{background:linear-gradient(180deg,transparent,rgba(30,107,171,.08) 55%,rgba(30,107,171,.45) 97%,transparent)}
@keyframes vsBeam{0%{transform:translateY(-80px);opacity:0}3%{opacity:1}45%{transform:translateY(330px);opacity:1}49%,100%{transform:translateY(330px);opacity:0}}
.vs-seal{position:absolute;z-index:2;left:50%;top:50%;margin:118px 0 0 70px;display:inline-flex;align-items:center;gap:8px;padding:10px 16px 10px 12px;border-radius:14px;
  font:800 13px 'Plus Jakarta Sans';letter-spacing:.08em;text-transform:uppercase;color:#04211A;background:linear-gradient(135deg,#52DEB5,#2ECC9A 55%,#0F9B72);
  box-shadow:0 18px 40px -14px rgba(46,204,154,.85),inset 0 1px 0 rgba(255,255,255,.35);rotate:-7deg;opacity:0;animation:vsSeal 9s cubic-bezier(.3,1.4,.5,1) infinite}
@keyframes vsSeal{0%,49%{opacity:0;scale:1.7}54%{opacity:1;scale:.94}57%,88%{opacity:1;scale:1}94%,100%{opacity:0;scale:1}}

/* ===========================================================================
   5. REVIEWS — FULL WIDTH, two rows running end to end in opposite directions
   =========================================================================== */
.pr{position:relative;z-index:2;padding:112px 0 112px;overflow:hidden;background:linear-gradient(180deg,var(--g0),var(--g1) 45%,var(--g1) 55%,var(--g0))}
.rmq{position:relative;z-index:1;display:flex;flex-direction:column;gap:22px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%)}
.rmq-row{overflow:hidden;padding:8px 0 14px}
.rmq-track{display:flex;width:max-content;animation:mqscroll 84s linear infinite}
.rmq-b .rmq-track{animation-duration:96s;animation-direction:reverse}
.rmq-row:hover .rmq-track,.rmq-row:focus-within .rmq-track{animation-play-state:paused}
/* A FIXED MARGIN, NOT A GAP, so translateX(-50%) lands exactly on the first
   card of the second half and the loop has no seam. */
.rcard{position:relative;isolation:isolate;flex:none;width:clamp(300px,29vw,440px);margin-right:22px;display:flex;flex-direction:column;padding:26px 28px 24px;border-radius:22px;overflow:hidden;
  background:radial-gradient(110% 70% at 100% 0%,color-mix(in srgb,var(--rc) 16%,transparent),transparent 60%),linear-gradient(180deg,var(--sf2),var(--sf));
  border:1px solid var(--ln);box-shadow:var(--sh);transition:transform .3s cubic-bezier(.3,1.2,.55,1),border-color .3s,box-shadow .3s}
.rcard::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--rc),color-mix(in srgb,var(--rc) 10%,transparent) 70%,transparent)}
.rcard:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--rc) 45%,transparent);box-shadow:var(--sh),0 26px 54px -26px color-mix(in srgb,var(--rc) 65%,transparent)}
body.light-mode .rcard{background:radial-gradient(110% 70% at 100% 0%,color-mix(in srgb,var(--rc) 10%,transparent),transparent 60%),linear-gradient(180deg,#FFFFFF,#FAFCFF)}
.rglow{position:absolute;right:-60px;top:-60px;width:180px;height:180px;border-radius:50%;z-index:-1;background:radial-gradient(circle,color-mix(in srgb,var(--rc) 22%,transparent),transparent 70%)}
.rtop{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:14px}
.rstars{display:flex;gap:3px;margin-top:4px}
.rstar{width:15px;height:15px;background:#F5B544;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 17.75l-6.17 3.25 1.18-6.88-5-4.87 6.9-1L12 2l3.09 6.25 6.9 1-5 4.87 1.18 6.88z'/%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 17.75l-6.17 3.25 1.18-6.88-5-4.87 6.9-1L12 2l3.09 6.25 6.9 1-5 4.87 1.18 6.88z'/%3E%3C/svg%3E") center/contain no-repeat}
body.light-mode .rstar{background:#D97706}
.rcq{font:800 76px/.62 'Plus Jakarta Sans';height:40px;color:var(--rc);opacity:.5}
body.light-mode .rcq{color:color-mix(in srgb,var(--rc) 70%,#000);opacity:.4}
.rtext{flex:1;font-size:16px;line-height:1.66;font-weight:500;letter-spacing:-.1px;color:var(--tx);margin:0 0 22px}
.rhead{display:flex;align-items:center;gap:13px;padding-top:18px;border-top:1px solid var(--ln)}
.rav{position:relative;width:46px;height:46px;border-radius:50%;overflow:hidden;flex-shrink:0;box-shadow:0 0 0 2px var(--sf),0 0 0 3.5px color-mix(in srgb,var(--rc) 65%,transparent)}
.rav-img{display:block;width:100%;height:100%;object-fit:cover}
.rav-ini{display:grid;place-items:center;width:100%;height:100%;font:700 14px 'Plus Jakarta Sans';color:#fff}
.rwho{display:flex;flex-direction:column;gap:2px;min-width:0}
.rname{font:700 14.5px 'Plus Jakarta Sans';color:var(--tx)}
.rrole{font-size:12px;color:var(--tx2)}
.rco{font-size:12px;font-weight:600;color:var(--tx3)}

/* ===========================================================================
   6. HOW IT WORKS — CONTAINED, centred head, a journey across three screens
   =========================================================================== */
.pw{position:relative;z-index:2;padding:112px 24px 116px;overflow-x:clip}
.hw{position:relative}
.hw-tl{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));height:46px;margin-bottom:28px;overflow:clip;overflow-clip-margin:24px}
.hw-rail,.hw-fill{position:absolute;left:16.667%;right:16.667%;top:22px;height:2px;border-radius:2px}
.hw-rail{background:var(--ln2)}
.hw-fill{background:linear-gradient(90deg,#4A9FE0,#52DEB5 50%,#F59E0B);transform-origin:left center;animation:hwFill 8s linear infinite}
@keyframes hwFill{0%{transform:scaleX(0);opacity:1}84%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
.hw-run{position:absolute;left:16.667%;right:16.667%;top:16px;height:14px;animation:hwRun 8s linear infinite}
.hw-run i{position:absolute;left:-7px;top:0;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(141,202,242,.3),0 0 18px #8DCAF2}
body.light-mode .hw-run i{background:#1E6BAB;box-shadow:0 0 0 4px rgba(30,107,171,.2),0 0 14px rgba(30,107,171,.6)}
@keyframes hwRun{0%{transform:translateX(0);opacity:1}84%{transform:translateX(100%);opacity:1}100%{transform:translateX(100%);opacity:0}}
.hw-node{position:relative;z-index:1;justify-self:center;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  font:800 16px 'Plus Jakarta Sans';color:var(--tx);background:var(--sf);border:1.5px solid var(--nc);box-shadow:0 0 0 6px color-mix(in srgb,var(--nc) 12%,transparent),var(--sh)}
.hw-n1{--nc:#4A9FE0}.hw-n2{--nc:#52DEB5}.hw-n3{--nc:#F59E0B}
.hw-node::after{content:'';position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--nc);opacity:0;animation:hwPing 8s ease-out infinite}
.hw-n2::after{animation-delay:3.36s}.hw-n3::after{animation-delay:6.72s}
@keyframes hwPing{0%{opacity:.9;scale:1}18%,100%{opacity:0;scale:1.7}}
.hw-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.hw-step{position:relative;isolation:isolate;display:flex;flex-direction:column;border-radius:22px;overflow:hidden;text-align:left;
  background:linear-gradient(180deg,var(--sf2),var(--sf));border:1px solid var(--ln);box-shadow:var(--sh);transition:transform .32s cubic-bezier(.3,1.2,.55,1),border-color .3s,box-shadow .3s}
.hw-step::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;z-index:2;background:linear-gradient(90deg,transparent,var(--ac) 30%,var(--ac) 70%,transparent)}
.hw-step:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--ac) 42%,transparent);box-shadow:var(--sh),0 30px 60px -28px color-mix(in srgb,var(--ac) 60%,transparent)}
body.light-mode .hw-step{background:linear-gradient(180deg,#FFFFFF,#F9FCFF)}
.hw-mock{position:relative;display:grid;place-items:center;height:222px;overflow:hidden;border-bottom:1px solid var(--ln);
  background:radial-gradient(80% 90% at 50% 0%,color-mix(in srgb,var(--ac) 18%,transparent),transparent 70%),var(--bc-bg)}
body.light-mode .hw-mock{background:radial-gradient(80% 90% at 50% 0%,color-mix(in srgb,var(--ac) 14%,transparent),transparent 70%),#F5F9FE}
.hw-mock::before{content:'';position:absolute;inset:0;background-image:radial-gradient(color-mix(in srgb,var(--ac) 35%,transparent) 1px,transparent 1.4px);background-size:18px 18px;
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,#000,transparent);mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,#000,transparent);opacity:.55}
.hw-body{display:block;padding:22px 24px 26px}
.hw-num{display:block;font:700 11px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--ac)}
body.light-mode .hw-num{color:color-mix(in srgb,var(--ac) 48%,#000)}
.hw-t{display:block;font:800 20px/1.25 'Plus Jakarta Sans';letter-spacing:-.4px;color:var(--tx);margin:9px 0 8px}
.hw-d{display:block;font-size:14px;line-height:1.62;color:var(--tx2)}

/* the mocks: fixed 280 x 170 drawings, so every coordinate below is exact */
.m{position:relative;z-index:1;display:block;width:280px;height:170px}
.m-sk{display:block;height:4px;border-radius:3px;background:var(--ln3)}
.w35{width:35%}.w40{width:40%}.w45{width:45%}.w60{width:60%}.w65{width:65%}.w70{width:70%}.w75{width:75%}.w85{width:85%}
.m-av{display:block;flex-shrink:0;width:16px;height:16px;border-radius:5px;background:color-mix(in srgb,var(--ac) 40%,transparent)}
/* 1 — a query typed, results arriving */
.m-bar1{position:absolute;left:0;right:0;top:4px;height:40px;display:flex;align-items:center;gap:9px;padding:0 12px;border-radius:12px;background:var(--sf);border:1px solid color-mix(in srgb,var(--ac) 45%,transparent);box-shadow:0 12px 26px -16px rgba(0,0,0,.6),0 0 0 4px color-mix(in srgb,var(--ac) 10%,transparent)}
.m-sico{color:var(--ac)}
.m-q{position:relative;display:block;font-size:12.5px;font-weight:500;color:var(--tx);white-space:nowrap;overflow:hidden;line-height:18px}
.m-cover{position:absolute;inset:0 -2px 0 0;background:var(--sf);animation:mType 8s infinite}
.m-cover::before{content:'';position:absolute;left:0;top:1px;bottom:1px;width:1.5px;background:var(--ac)}
@keyframes mType{0%{transform:translateX(0);animation-timing-function:steps(19,end)}30%{transform:translateX(100%)}88%{transform:translateX(100%);animation-timing-function:steps(10,end)}100%{transform:translateX(0)}}
.m-fil{position:absolute;left:0;top:54px;display:flex;gap:6px}
.m-fil b{font-size:10px;font-weight:600;padding:4px 9px;border-radius:999px;color:var(--ac);background:color-mix(in srgb,var(--ac) 11%,transparent);border:1px solid color-mix(in srgb,var(--ac) 40%,transparent)}
body.light-mode .m-fil b{color:color-mix(in srgb,var(--ac) 58%,#000)}
.m-res{position:absolute;left:0;right:0;top:86px;display:flex;flex-direction:column;gap:7px}
.m-r{display:flex;align-items:center;gap:9px;height:24px;padding:0 9px;border-radius:8px;background:var(--sf);border:1px solid var(--ln);opacity:0;animation:mRes 8s ease infinite}
.m-r1{animation-delay:2.5s}.m-r2{animation-delay:2.95s}.m-r3{animation-delay:3.4s}
@keyframes mRes{0%{opacity:0;translate:0 8px}5%{opacity:1;translate:0 0}56%{opacity:1}62%,100%{opacity:0;translate:0 0}}
.m-rl{flex:1;display:flex;flex-direction:column;gap:3px}
.m-ok{width:15px;height:15px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;color:#04342C;background:linear-gradient(135deg,#52DEB5,#2ECC9A)}
/* 2 — one specification out to three suppliers at once */
.m-spec{position:absolute;left:0;top:16px;width:150px;display:flex;flex-direction:column;gap:7px;padding:12px;border-radius:13px;background:var(--sf);border:1px solid var(--ln2);box-shadow:0 14px 30px -18px rgba(0,0,0,.65)}
.m-spec-h{display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;color:var(--tx);margin-bottom:2px}
.m-spec-h .hi{color:var(--ac)}
.m-send{align-self:flex-start;display:inline-flex;align-items:center;gap:5px;margin-top:5px;padding:5px 10px;border-radius:8px;font-size:10px;font-weight:700;color:#032A22;background:var(--ac);animation:mSend 8s ease infinite}
@keyframes mSend{0%,16%{scale:1}19%{scale:.9}23%,100%{scale:1}}
.m-sups{position:absolute;right:0;top:0;bottom:0;width:56px;display:flex;flex-direction:column;justify-content:space-around;align-items:center}
.m-sup{position:relative;width:40px;height:40px;border-radius:13px;display:grid;place-items:center;background:var(--sf);border:1px solid var(--ln2)}
.m-sup i{width:17px;height:17px;border-radius:50%;background:color-mix(in srgb,var(--ac) 45%,transparent)}
.m-sring{position:absolute;inset:-5px;border-radius:16px;border:2px solid var(--ac);opacity:0;animation:mRing 8s ease infinite}
.m-s1 .m-sring{animation-delay:2.2s}.m-s2 .m-sring{animation-delay:2.3s}.m-s3 .m-sring{animation-delay:2.4s}
@keyframes mRing{0%{opacity:0;scale:.8}4%{opacity:1;scale:1}66%{opacity:1}76%,100%{opacity:0}}
.m-fly{position:absolute;left:40px;top:94px;width:10px;height:10px;border-radius:50%;background:var(--ac);box-shadow:0 0 12px var(--ac);opacity:0;animation:8s cubic-bezier(.45,0,.25,1) infinite}
.m-f1{animation-name:mFly1}.m-f2{animation-name:mFly2}.m-f3{animation-name:mFly3}
@keyframes mFly1{0%,20%{opacity:0;transform:translate(0,0)}21%{opacity:1}28%{opacity:1;transform:translate(207px,-71px)}30%,100%{opacity:0;transform:translate(207px,-71px)}}
@keyframes mFly2{0%,20%{opacity:0;transform:translate(0,0)}21%{opacity:1}28%{opacity:1;transform:translate(207px,-14px)}30%,100%{opacity:0;transform:translate(207px,-14px)}}
@keyframes mFly3{0%,20%{opacity:0;transform:translate(0,0)}21%{opacity:1}28%{opacity:1;transform:translate(207px,43px)}30%,100%{opacity:0;transform:translate(207px,43px)}}
/* 3 — three quotes compared, one chosen, a direct line */
.m-qt{position:absolute;left:0;right:0;height:36px;display:flex;align-items:center;gap:10px;padding:0 12px;border-radius:11px;background:var(--sf);border:1px solid var(--ln)}
.m-q1{top:0}.m-q2{top:45px}.m-q3{top:90px}
.m-qt b{font-size:10px;font-weight:600;color:var(--tx3)}
.m-qb{flex:1;display:block;height:6px;border-radius:4px;background:var(--ln);overflow:hidden}
.m-qb i{display:block;height:100%;width:calc(var(--w) * 100%);border-radius:4px;background:color-mix(in srgb,var(--ac) 70%,transparent);transform-origin:left center;animation:mBar 8s ease-out infinite}
.m-q2 .m-qb i{animation-delay:.25s}.m-q3 .m-qb i{animation-delay:.5s}
@keyframes mBar{0%{transform:scaleX(0)}14%,90%{transform:scaleX(1)}100%{transform:scaleX(0)}}
.m-q2::after{content:'';position:absolute;inset:-2px;border-radius:12px;border:2px solid var(--ac);box-shadow:0 0 0 4px color-mix(in srgb,var(--ac) 16%,transparent);opacity:0;animation:mPickR 8s ease infinite}
@keyframes mPickR{0%,38%{opacity:0}43%,88%{opacity:1}94%,100%{opacity:0}}
.m-pick{position:absolute;right:-6px;top:-11px;display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:999px;font-size:9.5px;font-weight:800;color:#2A1600;background:var(--ac);opacity:0;animation:mPick 8s cubic-bezier(.3,1.5,.5,1) infinite}
@keyframes mPick{0%,38%{opacity:0;scale:.6}43%{opacity:1;scale:1.08}46%,88%{opacity:1;scale:1}94%,100%{opacity:0;scale:1}}
.m-direct{position:absolute;left:50%;bottom:2px;translate:-50% 0;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;padding:6px 12px;border-radius:999px;font-size:10.5px;font-weight:700;
  color:var(--gr-ink);background:color-mix(in srgb,#2ECC9A 14%,var(--sf));border:1px solid rgba(46,204,154,.45);opacity:0;animation:mDirect 8s ease infinite}
@keyframes mDirect{0%,52%{opacity:0;scale:.85}57%,88%{opacity:1;scale:1}94%,100%{opacity:0}}

/* ===========================================================================
   7. PRODUCTS — FULL WIDTH, a filterable rail running off the right edge
   =========================================================================== */
.pd{position:relative;z-index:2;padding:112px 0 100px;overflow:hidden;background:linear-gradient(180deg,var(--g0),var(--g1) 46%,var(--g0))}
.pd-inner .sec-head{margin-bottom:30px}
.hp{position:relative;z-index:1}
.hp-tabs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:0 var(--edge);margin:0 0 24px}
.hp-r{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;margin:0}
.hp-tab{display:inline-flex;align-items:center;gap:9px;padding:9px 15px 9px 17px;border-radius:999px;font-size:13px;font-weight:600;cursor:pointer;user-select:none;
  color:var(--tx2);background:var(--sf);border:1px solid var(--ln2);transition:color .2s,background-color .2s,border-color .2s}
.hp-tab span{font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;color:var(--tx3);background:var(--sf3)}
.hp-tab:hover{color:var(--tx);border-color:var(--ln3)}
.hp-r:checked + .hp-tab{color:#fff;background:linear-gradient(135deg,#1B6FB5,#14528A);border-color:transparent;box-shadow:0 10px 24px -12px rgba(27,111,181,.9)}
.hp-r:checked + .hp-tab span{color:#fff;background:rgba(255,255,255,.18)}
.hp-r:focus-visible + .hp-tab{outline:2px solid #8DCAF2;outline-offset:3px}
body.light-mode .hp-r:focus-visible + .hp-tab{outline-color:#1E6BAB}
/* THE FILTER IS :has(), SO IT NEEDS NO SCRIPT. */
.hp:has(#hp-f-poultry:checked) .hp-card:not([data-k="poultry"]),
.hp:has(#hp-f-beef:checked) .hp-card:not([data-k="beef"]),
.hp:has(#hp-f-seafood:checked) .hp-card:not([data-k="seafood"]),
.hp:has(#hp-f-veg:checked) .hp-card:not([data-k="veg"]){display:none}
.hp-vp{overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-left:var(--edge);scroll-behavior:smooth;
  padding:8px var(--edge) 28px;scrollbar-width:thin;scrollbar-color:var(--ln3) transparent;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 90px),transparent);mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 90px),transparent)}
.hp-vp:focus-visible{outline:2px solid #8DCAF2;outline-offset:-2px}
.hp-vp::-webkit-scrollbar{height:6px}
.hp-vp::-webkit-scrollbar-thumb{background:var(--ln3);border-radius:6px}
.hp-track{display:flex;gap:18px;width:max-content;padding-right:90px}
.hp-card{flex:none;width:276px;scroll-snap-align:start;display:flex;flex-direction:column;border-radius:20px;overflow:hidden;text-decoration:none;color:inherit;
  background:linear-gradient(180deg,var(--sf2),var(--sf));border:1px solid var(--ln);box-shadow:var(--sh);
  transition:transform .32s cubic-bezier(.3,1.2,.55,1),border-color .3s,box-shadow .3s}
.hp-card:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--ac) 45%,transparent);box-shadow:var(--sh),0 28px 56px -26px color-mix(in srgb,var(--ac) 65%,transparent)}
body.light-mode .hp-card{background:linear-gradient(180deg,#FFFFFF,#FAFCFF)}
.hp-plate{position:relative;display:block;aspect-ratio:1/.8;overflow:hidden;background:#FFFFFF}
.hp-img{position:absolute;left:9%;top:9%;width:82%;height:82%;object-fit:contain;transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.hp-card:hover .hp-img{transform:scale(1.07)}
.hp-noimg{position:absolute;inset:0;display:grid;place-items:center;color:color-mix(in srgb,var(--ac) 70%,#000);background:radial-gradient(70% 70% at 50% 45%,color-mix(in srgb,var(--ac) 16%,#fff),#EEF4FA)}
.hp-cat{position:absolute;left:12px;top:12px;display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;font-size:10.5px;font-weight:700;letter-spacing:.03em;color:#fff;background:rgba(5,13,24,.84)}
.hp-cat::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--ac)}
.hp-sheen{position:absolute;top:0;bottom:0;left:-40%;width:30%;transform:skewX(-18deg) translateX(-160%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);transition:transform .7s ease;pointer-events:none}
.hp-card:hover .hp-sheen{transform:skewX(-18deg) translateX(620%)}
.hp-body{display:flex;flex-direction:column;flex:1;padding:16px 18px 18px}
.hp-n{font:700 15px/1.36 'Plus Jakarta Sans';letter-spacing:-.2px;color:var(--tx);min-height:2.72em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hp-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:12px}
.hp-p{display:flex;flex-direction:column;font:800 23px/1 'Plus Jakarta Sans';letter-spacing:-.6px;color:var(--tx);font-variant-numeric:tabular-nums}
.hp-u{margin-top:6px;font:500 11px 'Inter',system-ui,sans-serif;letter-spacing:0;color:var(--tx3)}
.hp-arr{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;flex-shrink:0;color:var(--ac-ink);background:var(--sf3);border:1px solid var(--ln2);transition:background-color .22s,color .22s,border-color .22s,transform .22s}
.hp-card:hover .hp-arr{background:var(--ac);border-color:var(--ac);color:#050D18;transform:translateX(2px)}
.hp-range{display:block;margin-top:15px;padding-top:13px;border-top:1px solid var(--ln)}
.hp-rbar{position:relative;display:block;height:4px;border-radius:4px;background:linear-gradient(90deg,color-mix(in srgb,var(--ac) 18%,transparent),color-mix(in srgb,var(--ac) 60%,transparent))}
.hp-rbar i{position:absolute;top:50%;left:calc(var(--pos) * 100%);width:13px;height:13px;margin:-6.5px 0 0 -6.5px;border-radius:50%;background:var(--sf);border:2.5px solid var(--ac);box-shadow:0 0 0 3px color-mix(in srgb,var(--ac) 22%,transparent)}
.hp-rl{display:flex;justify-content:space-between;gap:8px;margin-top:8px;font-size:10px;color:var(--tx3)}
.hp-rl span:nth-child(2){color:var(--tx2);font-weight:600}
.pd-foot{margin-top:18px}
.hp-foot-row{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.hp-note{display:inline-flex;align-items:flex-start;gap:9px;font-size:12.5px;line-height:1.55;color:var(--tx3);max-width:68ch}
.hp-note .hi{flex-shrink:0;margin-top:1px}
/* ===========================================================================
   8. CTA — CENTRED panel, and the page's last word
   =========================================================================== */
.pk-cta{position:relative;z-index:2;padding:112px 24px 116px;overflow:hidden;
  background:radial-gradient(55% 80% at 0% 0%,rgba(74,159,224,.17),transparent 60%),radial-gradient(50% 75% at 100% 100%,rgba(46,204,154,.13),transparent 60%),linear-gradient(180deg,var(--g0),var(--g1) 35%,var(--g1) 65%,var(--g0))}
.pk-cta::before{content:'';position:absolute;top:0;left:20%;right:20%;height:1px;background:linear-gradient(90deg,transparent,rgba(141,202,242,.55),transparent)}
body.light-mode .pk-cta{background:radial-gradient(55% 80% at 0% 0%,rgba(74,159,224,.14),transparent 60%),radial-gradient(50% 75% at 100% 100%,rgba(46,204,154,.12),transparent 60%),linear-gradient(180deg,var(--g0),#FFFFFF 35%,#FFFFFF 65%,var(--g0))}
.pk-panel{position:relative;z-index:1}
.cta-blurb{position:relative;z-index:1;max-width:700px;margin:0 auto 50px;text-align:center}
.cta-blurb h2{font-family:'Plus Jakarta Sans';font-size:44px;font-weight:800;letter-spacing:-1.2px;line-height:1.1;color:var(--tx);margin-bottom:16px;text-wrap:balance}
.cta-hl{color:var(--ac-ink)}
.cta-blurb .cta-lede{font-size:16px;line-height:1.7;color:var(--tx2)}
.pk-inner{position:relative;z-index:1}
.cta-cols{display:grid;grid-template-columns:1fr 1fr;gap:22px}
/* THEY LIFT, THEY DO NOT SINK. The band behind them is --g1, a step
   LIGHTER than the page, and the first version painted the columns
   --g0 — so the page's two closing objects were the only cards on it
   that receded. Same surface and shadow as every other card here. */
.cta-col{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:flex-start;padding:34px 32px 32px;border-radius:24px;overflow:hidden;
  background:linear-gradient(180deg,var(--sf2),var(--sf));border:1px solid color-mix(in srgb,var(--ac) 26%,transparent);box-shadow:var(--sh);
  transition:transform .32s cubic-bezier(.3,1.15,.55,1),box-shadow .32s,border-color .3s}
.cta-col:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--ac) 52%,transparent);box-shadow:var(--sh),0 30px 60px -26px color-mix(in srgb,var(--ac) 55%,transparent)}
body.light-mode .cta-col{background:linear-gradient(180deg,#FFFFFF,#F7FBFF)}
/* the accent rail across the head, then the ring down the corner */
.cta-col::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,var(--ac),color-mix(in srgb,var(--ac) 12%,transparent) 74%,transparent)}
.cta-ring{position:absolute;inset:-1px;border-radius:25px;padding:1px;pointer-events:none;z-index:0;
  background:linear-gradient(145deg,color-mix(in srgb,var(--ac) 70%,transparent),transparent 48%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.cta-glow{position:absolute;inset:auto -22% -46% -22%;height:76%;z-index:-1;pointer-events:none;opacity:.55;transition:opacity .35s;
  background:radial-gradient(50% 100% at 50% 100%,color-mix(in srgb,var(--ac) 24%,transparent),transparent 72%)}
.cta-col:hover .cta-glow{opacity:1}
.cta-top{display:flex;align-items:center;gap:13px;margin-bottom:18px}
.cta-icon{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--ac);background:color-mix(in srgb,var(--ac) 13%,transparent);border:1px solid color-mix(in srgb,var(--ac) 30%,transparent)}
.cta-lbl{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ac)}
.cta-h{font-family:'Plus Jakarta Sans';font-size:28px;font-weight:800;letter-spacing:-.6px;line-height:1.18;color:var(--tx);margin-bottom:12px}
.cta-p{font-size:14.5px;line-height:1.7;color:var(--tx2);margin:0 0 18px;max-width:430px}
.cta-proof{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--tx3);margin-bottom:26px}
.cta-proof .hi{color:var(--ac)}
.cta-btn{position:relative;overflow:hidden;margin-top:auto;display:inline-flex;align-items:center;gap:8px;padding:14px 22px;border-radius:12px;font:600 14.5px 'Inter',system-ui,sans-serif;text-decoration:none;transition:transform .2s,box-shadow .2s}
.cta-btn-sh{position:absolute;inset:0;border-radius:12px;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.22),transparent 56%)}
.cta-col.buyers .cta-btn{color:#fff;background:linear-gradient(135deg,#4A9FE0,#2D7FC4);box-shadow:0 8px 26px -8px rgba(74,159,224,.8)}
.cta-col.supps .cta-btn{color:#04342C;background:linear-gradient(135deg,#52DEB5,#2ECC9A);box-shadow:0 8px 26px -8px rgba(46,204,154,.75)}
body.light-mode .cta-col.buyers .cta-btn{background:linear-gradient(135deg,#1B6FB5,#14528A)}
.cta-btn:hover{transform:translateY(-2px)}
.cta-btn-a{display:inline-flex;transition:transform .22s}
.cta-btn:hover .cta-btn-a{transform:translateX(3px)}
.cta-btn::after{content:'';position:absolute;top:0;bottom:0;left:-40%;width:28%;transform:skewX(-18deg) translateX(-160%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:transform .55s ease;pointer-events:none}
.cta-btn:hover::after{transform:skewX(-18deg) translateX(560%)}
/* LIGHT MODE AND AN INLINE ACCENT. The columns, the bento and the placeholder
   cards all carry their accent as an inline --ac, and an inline declaration
   beats any stylesheet — so the light-mode answer is not to redefine --ac but
   to darken it where it is used as TEXT. #4A9FE0 is 2.9:1 on white; mixed 62%
   with black it is ~6:1, and the green ~4.9:1. */
body.light-mode .cta-lbl,body.light-mode .cta-icon,body.light-mode .cta-proof .hi,
body.light-mode .sc-cta,
body.light-mode .sc-lt{color:color-mix(in srgb,var(--ac,#4A9FE0) 62%,#000)!important}

/* Focus rings for every real control on the page. */
.hero-chip:focus-visible,.hp-card:focus-visible,.more-btn:focus-visible,.cta-btn:focus-visible,.bc:focus-visible,.hero-btn:focus-visible{outline:2px solid #8DCAF2;outline-offset:3px}
body.light-mode .hp-card:focus-visible,body.light-mode .more-btn:focus-visible,body.light-mode .cta-btn:focus-visible,body.light-mode .bc:focus-visible{outline-color:#1E6BAB}

/* ===========================================================================
   SCROLL-DRIVEN REVEAL — zero JavaScript, and it can never leave anything
   hidden: a browser with no view() timeline never enters the block, nor does
   a reader who asked for less motion. `translate`, never `transform`, so a
   card's hover transform still composes on top of a finished reveal.
   =========================================================================== */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    @keyframes ff-rise{from{opacity:0;translate:0 26px}to{opacity:1;translate:0 0}}
    .bc,.sc,.vx-card,.hw-step,.cta-col,.sec-head,.more-row{
      animation:ff-rise linear both;animation-timeline:view();animation-range:entry 0% entry 40%}
    .vs{animation:ff-rise linear both;animation-timeline:view();animation-range:entry 0% entry 50%}
  }
}

/* ===========================================================================
   REDUCED MOTION — everything stops in its FINISHED frame, nothing hides
   =========================================================================== */
@media (prefers-reduced-motion:reduce){
  .hero-copy > *,.ff-flakes .ff-lyr,.more-sh,
  .bs *,.bs *::before,.bs *::after,.sc-head::after,
  .vx-lit,.vs *,.vs::before,.rmq-track,
  .hw-fill,.hw-run,.hw-node::after,.m *,.m *::before,.m *::after{animation:none!important}
  .hero-copy > *{opacity:1!important;translate:none!important;transform:none!important}
  /* the finished frames */
  .vs-tick,.vs-rs,.vs-st-b,.vs-seal,.m-r,.m-pick,.m-direct,.m-q2::after,.vx-lit{opacity:1!important}
  .vx-lit{opacity:.35!important}
  .vs-st-a,.vs-beam,.m-fly,.m-sring,.sc-head::after,.bs-spark,.sb,.hw-run{opacity:0!important}
  .m-cover{transform:translateX(100%)!important}
  .hw-fill{transform:none!important}
  .vq{opacity:1!important;translate:0 170px!important}
  .sf{transform:translateX(40%)!important}
  .sf-2{transform:translateX(15%)!important}.sf-3{transform:translateX(65%)!important}
  .bf-lbl{opacity:.8!important}
  .bf-si i::after{opacity:1!important;scale:1!important}
  /* the review rows become ordinary scrollable strips, with the loop's
     presentation copies removed so each quote appears once */
  .rmq{-webkit-mask-image:none;mask-image:none}
  .rmq-row{overflow-x:auto;padding-left:var(--edge);padding-right:var(--edge)}
  .rcard[aria-hidden="true"]{display:none}
  .bc,.sc,.rcard,.hero-chip,.hp-card,.hp-img,.vx-card,.hw-step,.cta-col,.hp-sheen,.more-cta,.more-a{transition:none}
  .more-cta:hover{transform:none}
  .hp-vp{scroll-behavior:auto}
}

/* ===========================================================================
   RESPONSIVE — 1440 / 1200 / 1100 / 1000 / 900 / 768 / 600 / 420
   =========================================================================== */
@media (min-width:1700px){
  .sgrid{gap:24px}
}
@media (max-width:1200px){
  .hero h1{font-size:54px;letter-spacing:-1.8px}
  .sec-h{font-size:38px;letter-spacing:-1px}
  .cta-blurb h2{font-size:38px}
  .sec-head{column-gap:40px}
  .vx{grid-template-columns:minmax(0,1fr) minmax(0,360px) minmax(0,1fr);gap:24px}
  .vs-card{width:292px}
  .vs-seal{margin-left:54px}
}
@media (max-width:1100px){
  .vx{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
  .vs{grid-column:1/-1;order:-1;min-height:420px;margin-bottom:8px}
  .vs-card{width:312px}
  .vs-seal{margin-left:70px}
  .vx-stub{display:none}
  .hw-steps{gap:16px}
  .hw-body{padding:20px 20px 22px}
  .sgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1000px){
  .hero{padding-top:168px}
  .bc-poultry,.bc-beef,.bc-seafood,.bc-veg{grid-column:span 6}
  .cats,.pu,.vf,.pr,.pw,.pd,.pk-cta{padding-top:92px;padding-bottom:96px}
  /* the journey becomes a column: the timeline goes, each step keeps its number */
  .hw-tl{display:none}
  .hw-steps{grid-template-columns:minmax(0,1fr);max-width:560px;margin:0 auto;gap:18px}
}
@media (max-width:900px){
  .hero{padding-top:150px}
  .hero h1{font-size:44px;letter-spacing:-1.4px;max-width:20ch}
  .hero-sub{font-size:16.5px}
  .sec-h{font-size:32px;letter-spacing:-.8px}
  .cta-blurb h2{font-size:32px}
  .cats,.vf,.pw,.pk-cta{padding-left:22px;padding-right:22px}
  .sec-head{grid-template-columns:minmax(0,1fr);align-items:start;row-gap:16px;padding-bottom:22px;margin-bottom:34px}
  .sec-head .sec-h{max-width:none}
  .sec-head-r{max-width:none;flex-direction:row;align-items:center;justify-content:space-between;gap:20px;width:100%;flex-wrap:wrap}
  .bc-cold{flex-direction:column}
  .bc-cold .bc-scene{order:0;flex:none;height:250px;min-height:0;border-left:0;border-bottom:1px solid var(--ln)}
  .bc-cold .bc-body{padding:24px 26px 22px}
  .bc-cold .bc-name{font-size:20px}
}
@media (max-width:860px){
  .cta-cols{grid-template-columns:minmax(0,1fr)}
  .cta-blurb{margin-bottom:36px}
}
@media (max-width:768px){
  .hero{padding-top:134px}
  /* PASS 67: THE PHOTOGRAPH SHOWS ON A PHONE. The user: "On mobile display
     the Hero's background image is not visible, it's completely covered by
     something that looks like shade." It was: on a narrow frame the 640px
     veil ellipse is wider and taller than the whole hero, so its .52 core
     covered everything, and the 230px top scrim and the vignette stacked on
     top of it. Below 768 the veil is a soft band behind the copy only, the
     top scrim is short, the vignette is light, and the headline carries its
     own shadow instead of borrowing the frame's darkness. */
  .hb-img{object-position:50% 40%}
  .hb-top{height:150px;background:linear-gradient(180deg,rgba(3,9,18,.62),rgba(3,9,18,.18) 60%,transparent)}
  .hb-vig{background:radial-gradient(150% 100% at 50% 40%,transparent 55%,rgba(3,9,18,.28) 100%)}
  .hb-veil{top:42%;width:130%;height:58%;background:radial-gradient(closest-side,rgba(3,10,20,.34),rgba(3,10,20,.16) 62%,transparent 100%)}
  .hero h1{text-shadow:0 2px 3px rgba(0,0,0,.35),0 2px 24px rgba(0,0,0,.55)}
  .hero-sub{text-shadow:0 1px 2px rgba(0,0,0,.45),0 1px 14px rgba(0,0,0,.6)}
  .hero h1{font-size:38px;letter-spacing:-1.1px}
  .rcard{padding:22px 22px 20px}
  .rtext{font-size:15px}
  .rmq{gap:16px}
  .rmq{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%)}
}
@media (max-width:640px){
  .bgrid{gap:14px}
  .bc-poultry,.bc-beef,.bc-seafood,.bc-veg{grid-column:1/-1}
  .sgrid{grid-template-columns:minmax(0,1fr)}
  .vx{grid-template-columns:minmax(0,1fr)}
  .vs{min-height:380px}
  .vs-ring2{display:none}
}
@media (max-width:600px){
  .hero{padding-top:126px}
  /* the stars sit over the line rather than beside it, so the pill stays one
     compact object instead of wrapping its text into the avatar stack */
  .tp{border-radius:22px;gap:10px}
  .tp-rate{flex-direction:column;align-items:flex-start;gap:3px}
  .tp-stars{width:76px}
  .hero h1{font-size:33px;letter-spacing:-.8px;max-width:none}
  .hero-sub{font-size:15.5px}
  .hero-sb{flex-wrap:wrap;gap:6px}
  .hero-si{flex:1 0 100%;padding:8px 10px 8px 16px}
  .hero-btn{flex:1;padding:12px 18px}
  .hero-ql{gap:7px}
  .hero-ql-l{flex:1 0 100%;margin:0 0 2px}
  .sec-h{font-size:28px;letter-spacing:-.6px}
  .cta-blurb h2{font-size:28px}
  .sec-sub{font-size:15px}
  .cats,.pu,.vf,.pr,.pw,.pd,.pk-cta{padding-top:72px;padding-bottom:76px}
  .cats,.vf,.pw,.pk-cta{padding-left:18px;padding-right:18px}
  .bc-scene{height:212px}
  .bc-body{padding:20px 20px 18px}
  .bc-name{font-size:18px}
  .sp-chip{font-size:10.5px;padding:5px 9px}
  .sp-c1{left:5%}.sp-c2{right:5%}.sp-c3{left:6%}.sp-c4{right:6%}
  .cc-route{left:9%;right:9%}
  .cc-stop b{font-size:10px}
  .cc-temp{bottom:98px}
  .vs-card{width:min(292px,100%)}
  .vs-seal{margin-left:30px;margin-top:112px;font-size:12px}
  .hp-card{width:236px}
  .hp-tab{padding:8px 12px 8px 14px;font-size:12.5px}
  .cta-col{padding:28px 24px 26px}
  .cta-h{font-size:24px}
  .m{scale:.92}
}
@media (max-width:480px){
  .vs-row{grid-template-columns:18px minmax(0,1fr) 20px}
  .vs-rs{display:none}
}
@media (max-width:420px){
  .hero h1{font-size:29px}
  .tp{padding:5px 13px 5px 5px}
  .tp-txt{font-size:11.5px}
  .tp-stars{width:72px}
  .rcard{width:300px}
  .rcq{font-size:60px;height:32px}
  .cc-stop:nth-child(n) b{max-width:62px;white-space:normal;text-align:center;line-height:1.2}
}