/* The four public pages: / (home.html), /wholesalers.html, /buyers.html,
   /providers.html. Ported from the agreed v3 mockup (owner 2026-10-04,
   ~/Desktop/Fresh connects LLC/HANDOFF-2026-10-03/mockups/home-v3-mockup.html):
   its CSS as written, minus the review bar, the tab switcher's [hidden] views
   and the two sign-in/sign-up views; the additions at the end are marked.
   Light only, by choice. */
:root{
  --paper:#fbfcf9; --paper-2:#f1f5ee; --ink:#15211b; --ink-2:#4c5a52; --rule:#dde5dc;
  --green:#1d6b45; --green-deep:#0f2a1e; --leaf:#8fe3a4; --sun:#ffd766;
  --note:#fff3c4; --note-ink:#5d4a00;
  --display:"Bricolage Grotesque", "Instrument Sans", system-ui, sans-serif;
  --body:"Instrument Sans", system-ui, -apple-system, sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{font-family:var(--display);font-weight:800;letter-spacing:-.02em;line-height:1.02;margin:0;text-wrap:balance}
h1{font-size:clamp(2.5rem,6.6vw,5rem)}
h2{font-size:clamp(2rem,4.6vw,3.4rem)}
h3{font-size:1.3rem;font-weight:700;line-height:1.2}
p{margin:0}
a{color:inherit}
.wrap{max-width:1120px;margin:0 auto;padding-inline:20px}
.eyebrow{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--green);font-weight:600}
.lede{font-size:clamp(1.1rem,1.6vw,1.35rem);color:var(--ink-2);max-width:36ch}
.btn{display:inline-flex;align-items:center;gap:.5rem;background:var(--ink);color:#fff;border:0;border-radius:999px;padding:.95rem 1.5rem;font:600 1rem var(--body);text-decoration:none;cursor:pointer;white-space:nowrap;transition:transform .15s ease,background .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn.green{background:var(--green)}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.btn.ghost.light{color:#fff;border-color:rgba(255,255,255,.6)}
.btn:focus-visible{outline:3px solid var(--leaf);outline-offset:2px}
.tag{display:inline-block;background:var(--note);color:var(--note-ink);font-size:.72rem;font-weight:600;letter-spacing:.04em;padding:.2rem .55rem;border-radius:6px;vertical-align:middle}
.band{padding-block:clamp(56px,9vw,120px)}
.band + .band{border-top:1px solid var(--rule)}
.two{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,72px);align-items:center}
.stack{display:grid;gap:1.25rem}
.cta-row{display:flex;flex-wrap:wrap;gap:.9rem 1rem;align-items:center}
.depend{border-left:4px solid var(--green);padding:.4rem 0 .4rem 1.2rem;margin-top:1.4rem;display:grid;gap:.4rem;max-width:62ch}
.depend h3{font-size:clamp(1.4rem,2.6vw,1.9rem);letter-spacing:-.02em}
.depend p{color:var(--ink-2)}
.calc{background:var(--green-deep);color:#eef5ef;border-radius:22px;padding:1.4rem;display:grid;gap:.8rem;align-content:start}
.calc h3{color:#fff}
.calc .sub{color:#bfd4c5;font-size:.92rem}
.calc .f{display:grid;gap:.3rem}
.calc label{font-size:.8rem;color:#bfd4c5;font-weight:600}
.calc input{width:100%;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;border-radius:10px;padding:.6rem .75rem;font:500 1rem var(--body);font-variant-numeric:tabular-nums}
.calc input:focus{outline:2px solid var(--leaf);outline-offset:1px}
.calc .r{border-top:1px solid rgba(255,255,255,.18);padding-top:.8rem;display:grid;gap:.5rem;font-size:.98rem}
.calc .r b{color:var(--leaf);font-variant-numeric:tabular-nums}
.calc .note{font-size:.78rem;color:#9fb8aa}
.calc .note a{color:#bfd4c5}
.tdemo{display:flex;gap:.5rem;margin-top:.7rem;flex-wrap:wrap}
.tdemo input{flex:1;min-width:150px;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);color:#fff;border-radius:999px;padding:.7rem 1rem;font:500 1rem var(--body)}
.tdemo input::placeholder{color:#8fa698}
.tdemo .btn{padding:.7rem 1.2rem}
.tiny{font-size:.74rem;color:#9fb8aa;margin-top:.5rem}
.vid{margin-top:.8rem;aspect-ratio:16/9;border-radius:14px;background:linear-gradient(135deg,#1d6b45,#0f2a1e);position:relative;display:grid;place-items:center;max-width:100%}
.vid .play{width:54px;height:54px;border-radius:50%;background:#fff;color:var(--green-deep);display:grid;place-items:center;font-size:1.1rem;padding-left:4px}
.vid .dur{position:absolute;right:10px;bottom:8px;font-size:.72rem;background:rgba(0,0,0,.45);color:#fff;padding:.15rem .45rem;border-radius:6px}
.np{list-style:none;margin:1rem 0 0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:1rem}
.np li{border-top:3px solid var(--green);padding-top:.8rem;display:grid;gap:.3rem;align-content:start}
.np li b{font-family:var(--display);font-weight:700;font-size:1.05rem;letter-spacing:-.01em}
.np li span{color:var(--ink-2);font-size:.92rem}
@media (max-width:900px){.np{grid-template-columns:repeat(2,1fr)}}
@media (max-width:460px){.np{grid-template-columns:1fr}}
.flow{margin-top:.8rem;background:rgba(255,255,255,.08);border-radius:14px;padding:.9rem;display:grid;gap:.6rem;color:#fff}
.flow .oc{display:flex;justify-content:space-between;align-items:center;gap:.5rem;font-size:.85rem;font-weight:600}
.flow .pl{background:#fff1c2;color:#6a4b00;border-radius:6px;font-size:.64rem;font-weight:700;padding:.2rem .45rem;letter-spacing:.06em;white-space:nowrap;transition:background .3s,color .3s}
.flow .pl.ok{background:#e3f3e8;color:#1d6b45}.flow .pl.go{background:#dbe9ff;color:#1b4a8a}
.flow .track{display:grid;grid-template-columns:repeat(6,1fr);gap:4px}
.flow .track i{height:6px;border-radius:3px;background:rgba(255,255,255,.18);transition:background .3s}
.flow .track i.on{background:var(--leaf)}
.flow .lbl{font-size:.82rem;color:#bfd4c5;min-height:2.4em}
.promise{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem .9rem;font-size:.92rem;color:var(--ink-2)}
.promise li::before{content:"✓";color:var(--green);font-weight:700;margin-right:.35rem}
.fine{font-size:.92rem;color:var(--ink-2)}
@media (max-width:760px){.two{grid-template-columns:1fr}}

/* motion: visible at rest; with JS, bands slide in as they enter the viewport */
.js .rv{opacity:.001;transform:translateY(34px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.js .rv.in{opacity:1;transform:none}
.js .rv.d1{transition-delay:.08s}.js .rv.d2{transition-delay:.16s}.js .rv.d3{transition-delay:.24s}.js .rv.d4{transition-delay:.32s}
.js .hero .rv{transform:translateY(22px)}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}}

/* nav: four real pages (the mockup's switcher buttons are links here) */
.site{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:rgba(251,252,249,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
.site .wrap{display:flex;align-items:center;gap:.8rem;padding-block:.65rem;min-width:0}
.logo{font-family:var(--display);font-weight:800;font-size:1.15rem;letter-spacing:-.02em;white-space:nowrap;display:inline-flex;align-items:center;gap:.5rem}
.logo .mark{flex:none;border-radius:7px;box-shadow:0 1px 2px rgba(0,0,0,.12)}
.logo span{color:var(--green)}
.views{display:flex;gap:.2rem;margin-inline-start:auto;overflow-x:auto;scrollbar-width:none}
.views::-webkit-scrollbar{display:none}
.views a{background:transparent;border:0;font:500 .95rem var(--body);color:var(--ink-2);padding:.5rem .8rem;border-radius:999px;cursor:pointer;white-space:nowrap;text-decoration:none}
.views a[aria-current="page"]{background:var(--paper-2);color:var(--ink);font-weight:600}
.site .btn{padding:.6rem 1.05rem;font-size:.9rem}
.site .signin{font:600 .92rem var(--body);text-decoration:none;color:var(--ink);white-space:nowrap;padding:.5rem .4rem}
@media (max-width:760px){.site .wrap{flex-wrap:wrap}.views{order:3;width:100%;margin-inline-start:0}.site .signin{margin-inline-start:auto}}

/* hero */
.hero{padding-block:clamp(48px,8vw,110px)}
.hero .stack{gap:1.5rem}

/* phones: an iPhone text thread and an iPhone call screen, scripted by JS */
/* [POLISH 2026-10-05] The iOS greys the mockup drew (#8e8e93 / #9a9aa0) sit at 2.8–3.3:1 on the white thread; #6b6b70 keeps the look at ≥ 4.5:1 (Lighthouse a11y on Buyers was 96). The typing dots and the dark call screen's label keep theirs (decorative / dark background). */
.ph-wrap{perspective:1200px;width:min(330px,100%);margin-inline:auto}
.ph-float{animation:float 7s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.ph{background:#111;border-radius:46px;padding:10px;box-shadow:0 40px 70px -35px rgba(15,42,30,.65);transition:transform .18s ease;transform-style:preserve-3d}
.ph .scr{position:relative;background:#fff;border-radius:38px;overflow:hidden;height:600px;display:flex;flex-direction:column;color:#000;font-family:-apple-system,"SF Pro Text","Instrument Sans",system-ui,sans-serif}
.ph .island{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:108px;height:30px;background:#111;border-radius:20px;z-index:3}
.ph .status{display:flex;justify-content:space-between;padding:16px 24px 0;font-weight:600;font-size:.8rem}
.ph .hdr{display:grid;justify-items:center;gap:2px;padding:8px 12px 10px;border-bottom:1px solid #e5e5ea;background:#f9f9f9}
.ph .av{width:42px;height:42px;border-radius:50%;background:#6b6b70;color:#fff;display:grid;place-items:center;font-weight:700;font-size:.95rem}
.ph .nm{font-size:.74rem;color:#000;text-align:center}
.ph .nm small{color:#6b6b70;font-size:.64rem;display:block;text-align:center}
.ph .msgs{flex:1;padding:10px 12px;display:grid;gap:6px;align-content:start;overflow:hidden}
.ph .ts{text-align:center;font-size:.68rem;color:#6b6b70;margin:2px 0 4px}
.ph .b{max-width:82%;padding:8px 12px;border-radius:18px;font-size:.92rem;line-height:1.3;white-space:pre-line}
.ph .b.out{background:#34c759;color:#fff;justify-self:end;border-bottom-right-radius:5px}
.ph .b.in{background:#e9e9eb;color:#000;border-bottom-left-radius:5px}
.ph .dlv{font-size:.66rem;color:#6b6b70;justify-self:end;margin-top:-3px}
.ph .typing{display:flex;gap:4px;padding:11px 14px;background:#e9e9eb;border-radius:18px;border-bottom-left-radius:5px;width:max-content}
.ph .typing i{width:7px;height:7px;border-radius:50%;background:#8e8e93;animation:blink 1.2s infinite}
.ph .typing i:nth-child(2){animation-delay:.2s}.ph .typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.ph .inp{display:flex;align-items:center;gap:8px;padding:8px 12px 6px;border-top:1px solid #e5e5ea;background:#f9f9f9}
.ph .inp .cam{width:30px;height:30px;border-radius:50%;background:#e9e9eb;flex:none}
.ph .inp .box{flex:1;border:1px solid #c7c7cc;border-radius:18px;padding:6px 12px;font-size:.85rem;background:#fff;min-height:32px;display:flex;align-items:center;gap:6px;overflow:hidden;white-space:nowrap}
.ph .inp .box .plc{color:#6b6b70}
.ph .inp .box .typed{color:#000}
.ph .inp .box .typed:not(:empty)::after{content:"";display:inline-block;width:1.5px;height:1em;background:#0a84ff;margin-left:1px;vertical-align:-2px;animation:caret 1s steps(2) infinite}
@keyframes caret{to{opacity:0}}
.ph .inp .send{width:28px;height:28px;border-radius:50%;background:#c7c7cc;color:#fff;display:grid;place-items:center;font-weight:700;font-size:.9rem;flex:none;transition:background .2s}
.ph .inp .send.on{background:#34c759}
.ph .home{width:120px;height:5px;border-radius:3px;background:#000;margin:4px auto 8px}
.ph .banner{position:absolute;top:50px;left:10px;right:10px;z-index:4;background:rgba(245,245,247,.96);box-shadow:0 10px 30px -10px rgba(0,0,0,.35);border-radius:18px;padding:10px 12px;display:flex;gap:10px;align-items:center;transform:translateY(calc(-100% - 70px));transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.ph .banner.show{transform:translateY(0)}
.ph .banner .bi{width:34px;height:34px;border-radius:9px;background:var(--green);color:#fff;display:grid;place-items:center;font-weight:800;font-size:.8rem;flex:none}
.ph .banner b{display:block;font-size:.78rem}
.ph .banner span{font-size:.74rem;color:#3a3a3c;display:block;line-height:1.25}
.ph .banner em{font-style:normal;font-size:.66rem;color:#6b6b70;margin-left:auto;align-self:flex-start}
/* scripted reveal: without JS everything shows at rest */
.js .ph .b,.js .ph .dlv,.js .ph .typing{display:none}
.js .ph .b.show,.js .ph .dlv.show,.js .ph .typing.show{display:block;animation:pop .45s cubic-bezier(.2,.8,.2,1) both}
.js .ph .typing.show{display:flex}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
/* call screen */
.ph.call .scr{background:linear-gradient(180deg,#3a3a3c 0%,#141416 60%,#0b0b0d 100%);color:#fff;align-items:center}
.ph.call .status{width:100%;color:#fff}
.call .who{text-align:center;margin-top:30px;display:grid;gap:4px;justify-items:center}
.call .ring{width:78px;height:78px;border-radius:50%;display:grid;place-items:center;position:relative;margin-bottom:8px}
.call .ring .av{width:64px;height:64px;font-size:1.3rem;background:#5b6b60}
.call .ring::before,.call .ring::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(143,227,164,.6);opacity:0}
.js .call.speaking .ring::before{animation:ripple 1.6s ease-out infinite}
.js .call.speaking .ring::after{animation:ripple 1.6s ease-out .8s infinite}
@keyframes ripple{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.6);opacity:0}}
.call .who .big{font-weight:600;font-size:1.6rem;letter-spacing:-.01em}
.call .who .st{color:#b0b0b5;font-size:.9rem;font-variant-numeric:tabular-nums}
.call .cap{width:calc(100% - 24px);margin:16px 12px 0;background:rgba(255,255,255,.1);border-radius:14px;padding:10px 12px;display:grid;gap:7px;font-size:.86rem;line-height:1.3;min-height:150px;align-content:start}
.call .cap .l{color:#8e8e93;font-size:.64rem;text-transform:uppercase;letter-spacing:.08em;display:flex;align-items:center;gap:8px}
.call .wave{display:inline-flex;gap:2px;align-items:flex-end;height:12px}
.call .wave i{width:3px;height:4px;background:#8fe3a4;border-radius:2px;opacity:.35}
.js .call.speaking .wave i{animation:wave .8s ease-in-out infinite;opacity:1}
.call .wave i:nth-child(2){animation-delay:.1s}.call .wave i:nth-child(3){animation-delay:.2s}.call .wave i:nth-child(4){animation-delay:.3s}.call .wave i:nth-child(5){animation-delay:.4s}
@keyframes wave{0%,100%{height:4px}50%{height:12px}}
.call .cap .c{color:#fff}.call .cap .f{color:#8fe3a4}
.js .call .cap .c,.js .call .cap .f{display:none}
.js .call .cap .c.show,.js .call .cap .f.show{display:block;animation:pop .45s ease both}
.call .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 6px;width:100%;padding:0 22px;margin-top:auto;text-align:center;font-size:.66rem;color:#d7d7db}
.call .grid i{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:rgba(255,255,255,.16);margin:0 auto 5px;font-style:normal;font-size:1.2rem}
.call .end{width:58px;height:58px;border-radius:50%;background:#ff3b30;margin:14px auto 20px;display:grid;place-items:center;font-size:1.25rem}
.call .end span{display:inline-block;transform:rotate(135deg)}
@media (prefers-reduced-motion:reduce){.ph-float{animation:none}.js .ph .b.show,.js .ph .dlv.show,.js .call .cap .c.show,.js .call .cap .f.show{animation:none}.ph .banner{transition:none}}

/* mission */
.mission{background:var(--green-deep);color:#eef5ef}
.mission h2{color:#fff;max-width:18ch}
.mission .lede{color:#bfd4c5}
.mission .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2.4rem}
.mission .cell{border-top:2px solid var(--leaf);padding-top:1rem;display:grid;gap:.5rem;align-content:start}
.mission .cell h3{color:#fff}
.mission .cell p{color:#bfd4c5;font-size:.98rem}
.mission .eyebrow{color:var(--leaf)}
@media (max-width:760px){.mission .grid{grid-template-columns:1fr}}

/* big-stat row */
.wins{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.win{background:var(--paper-2);border-radius:22px;padding:1.4rem;display:grid;gap:.4rem;align-content:start}
.win .k{font-family:var(--display);font-weight:800;font-size:1.9rem;letter-spacing:-.02em;color:var(--green);line-height:1}
.win p{color:var(--ink-2);font-size:.95rem}
@media (max-width:900px){.wins{grid-template-columns:1fr 1fr}}
@media (max-width:460px){.wins{grid-template-columns:1fr}}

/* tiles */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.tile{background:var(--paper-2);border-radius:22px;padding:1.5rem;display:grid;gap:.6rem;align-content:start;cursor:pointer;border:1.5px solid transparent;text-align:start;font:inherit;color:inherit;text-decoration:none;transition:transform .2s ease,border-color .2s ease}
.tile:hover,.tile:focus-visible{border-color:var(--green);outline:none;transform:translateY(-3px)}
.tile .arrow{color:var(--green);font-weight:600;margin-top:.4rem}
@media (max-width:760px){.tiles{grid-template-columns:1fr}}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;counter-reset:s}
.step{padding-top:1rem;border-top:3px solid var(--green)}
.step::before{counter-increment:s;content:counter(s,decimal-leading-zero);font-family:var(--display);font-weight:800;font-size:2rem;color:var(--green);display:block;line-height:1;margin-bottom:.5rem}
.step p{color:var(--ink-2);font-size:.98rem}
@media (max-width:760px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:460px){.steps{grid-template-columns:1fr}}

/* app card illustrations */
.ui{background:#fff;border:1px solid var(--rule);border-radius:18px;padding:1.1rem 1.2rem;box-shadow:0 24px 50px -32px rgba(21,33,27,.4);max-width:440px;width:100%;margin-inline:auto}
.ui .row{display:flex;justify-content:space-between;align-items:center;gap:.6rem;flex-wrap:wrap}
.ui .t{font-family:var(--display);font-weight:700;font-size:1.15rem}
.pill{font-size:.72rem;font-weight:700;letter-spacing:.06em;padding:.25rem .55rem;border-radius:6px;background:#fff1c2;color:#6a4b00}
.pill.ok{background:#e3f3e8;color:#1d6b45}.pill.bad{background:#fde2de;color:#8a2c20}
.ui .meta{color:var(--ink-2);font-size:.9rem;margin:.35rem 0 .9rem}
.ui .acts{display:flex;gap:.5rem;flex-wrap:wrap}
.ui .acts span{padding:.5rem .9rem;border-radius:10px;border:1.5px solid var(--ink);font-weight:600;font-size:.9rem}
.ui .acts span.go{background:var(--green);border-color:var(--green);color:#fff}
.ui .line{display:flex;justify-content:space-between;gap:.8rem;border-top:1px dashed var(--rule);padding:.45rem 0;font-size:.92rem}
.ui .line:first-of-type{border-top:0}
.ui .search{border:1.5px solid var(--rule);border-radius:12px;padding:.55rem .8rem;color:var(--ink-2);font-size:.95rem;margin-bottom:.6rem}

/* today → with FC */
.pr{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.pr .cell{display:grid;gap:.5rem;align-content:start}
.pr .pain{font-family:var(--display);font-weight:700;font-size:1.25rem;color:#8a2c20;line-height:1.15}
.pr .pain::before{content:"Today";display:block;font:600 .72rem var(--body);letter-spacing:.12em;text-transform:uppercase;color:#b2534a;margin-bottom:.3rem}
.pr .relief{font-family:var(--display);font-weight:800;font-size:1.45rem;letter-spacing:-.01em;line-height:1.1;margin-top:.4rem}
.pr .relief::before{content:"With Fresh Connects";display:block;font:600 .72rem var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--green);margin-bottom:.3rem}
.pr p{color:var(--ink-2);font-size:.98rem}
@media (max-width:760px){.pr{grid-template-columns:1fr}}

/* price */
.price{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center}
.big{font-family:var(--display);font-weight:800;font-size:clamp(3.4rem,9vw,6rem);letter-spacing:-.04em;line-height:1}
.big small{font-size:1.2rem;letter-spacing:0;font-weight:600;color:var(--ink-2);margin-left:.4rem}
.checks{list-style:none;margin:0;padding:0;display:grid;gap:.55rem;color:var(--ink-2)}
.checks li::before{content:"✓";color:var(--green);font-weight:700;margin-right:.6rem}
@media (max-width:760px){.price{grid-template-columns:1fr}}

/* faq */
details{border-top:1px solid var(--rule);padding:.9rem 0}
details:last-of-type{border-bottom:1px solid var(--rule)}
summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:1rem}
summary::after{content:"+";color:var(--green);font-weight:700}
details[open] summary::after{content:"–"}
details p{color:var(--ink-2);margin-top:.6rem;max-width:62ch}

/* chips (buyers) */
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chips button{border:1.5px solid var(--rule);background:#fff;border-radius:999px;padding:.45rem .9rem;font:500 .9rem var(--body);cursor:pointer;color:var(--ink);transition:background .15s}
.chips button[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}

.formats{display:flex;gap:.6rem;flex-wrap:wrap}
.formats span{border:1.5px solid var(--ink);border-radius:10px;padding:.5rem .9rem;font-weight:600;font-size:.9rem}

.row2{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
@media (max-width:460px){.row2{grid-template-columns:1fr}}

/* story phone: three stacked screens */
.ph .stage{position:relative;height:600px;border-radius:38px;overflow:hidden;background:#fff}
.ph .stage .scr{position:absolute;inset:0;opacity:0;transition:opacity .55s ease;pointer-events:none;height:600px}
.ph .stage .scr.on{opacity:1}
.ph-cap{text-align:center;margin-top:1.1rem;font-weight:600;color:var(--ink-2);min-height:1.6em;transition:opacity .3s}
.ph-cap.fade{opacity:0}
.ph .s-call .cap{max-height:168px;overflow:hidden;align-content:end;min-height:120px}
/* [HOMEPAGE v3 · lead] The Wholesalers call phone has the same squeeze the story phone fixes above: `.cap` is a flex child of the 600 px screen, so once all four captions are shown it is pressed to its min-height and the text spills over the keypad (measured on the mockup too). Newest captions stay visible, older ones scroll out of view. */
.ph.call .cap{max-height:168px;overflow:hidden;align-content:end}
.ph .s-call .who{margin-top:26px}
.ph .s-call .grid{margin-top:auto;gap:10px 6px}
.ph .s-call .grid i{width:50px;height:50px;font-size:1.05rem}
.ph .s-call .end{flex:none;width:54px;height:54px;margin:10px auto 16px}
.ph .s-orders{background:#f6f8f4;display:flex;flex-direction:column;color:#000;font-family:-apple-system,"SF Pro Text","Instrument Sans",system-ui,sans-serif}
.s-orders .ohdr{padding:52px 16px 10px;font-weight:700;font-size:1.05rem;display:flex;justify-content:space-between;align-items:center}
.s-orders .ohdr .cnt{font-size:.7rem;font-weight:700;background:#fff1c2;color:#6a4b00;padding:.2rem .5rem;border-radius:6px}
.s-orders .ocard{margin:0 12px 10px;background:#fff;border-radius:14px;padding:12px;box-shadow:0 2px 8px rgba(0,0,0,.06);transition:opacity .4s}
.s-orders .ocard.done{opacity:.55}
.s-orders .ocard .r{display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:.95rem;gap:.5rem}
.s-orders .ocard .m{color:#6b6b70;font-size:.8rem;margin:3px 0 9px}
.s-orders .ocard .a{display:flex;gap:6px}
.s-orders .ocard .a span{padding:7px 11px;border-radius:9px;border:1.5px solid #15211b;font-size:.82rem;font-weight:600;position:relative;transition:transform .12s}
.s-orders .ocard .a span.go{background:var(--green);border-color:var(--green);color:#fff}
.s-orders .ocard .a span.press{transform:scale(.9)}
.s-orders .opill{font-size:.66rem;font-weight:700;letter-spacing:.06em;padding:.22rem .5rem;border-radius:6px;background:#fff1c2;color:#6a4b00;transition:background .3s,color .3s;white-space:nowrap}
.s-orders .opill.ok{background:#e3f3e8;color:#1d6b45}
.s-orders .tap{position:absolute;width:36px;height:36px;border-radius:50%;background:rgba(0,0,0,.22);border:2px solid rgba(255,255,255,.9);left:50%;top:50%;transform:translate(-50%,-50%) scale(.5);opacity:0;transition:opacity .2s,transform .2s;pointer-events:none}
.s-orders .tap.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.s-orders .toast{margin:auto 12px 14px;background:#15211b;color:#fff;border-radius:12px;padding:10px 12px;font-size:.82rem;opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s}
.s-orders .toast.on{opacity:1;transform:none}
.s-orders .home{margin-top:0}
/* laptop + phone in sync */
.duo{position:relative;width:100%;max-width:640px;margin-inline:auto;padding:0 0 60px 0}
.laptop{width:100%}
.laptop .lid{background:#111;border-radius:18px 18px 6px 6px;padding:12px 12px 0;box-shadow:0 40px 70px -35px rgba(15,42,30,.6)}
.laptop .lscr{background:#f6f8f4;border-radius:10px 10px 0 0;aspect-ratio:16/10;overflow:hidden;position:relative;font-family:var(--body);color:var(--ink);font-size:11px;line-height:1.3}
.laptop .base{height:14px;background:linear-gradient(#e6e8e3,#c3c7bf);border-radius:0 0 14px 14px;margin:0 -18px;position:relative}
.laptop .base::after{content:"";position:absolute;left:50%;top:0;width:90px;height:5px;background:#b1b5ad;border-radius:0 0 6px 6px;transform:translateX(-50%)}
.laptop .foot{height:5px;background:#9fa39b;border-radius:0 0 10px 10px;margin:0 -10px}
.lscr .topbar{display:flex;align-items:center;gap:14px;padding:8px 14px;background:#fff;border-bottom:1px solid var(--rule)}
.lscr .topbar .lg{font-family:var(--display);font-weight:800;font-size:12px;display:inline-flex;align-items:center;gap:5px}
.lscr .topbar .lg b{color:var(--green)}
.lscr .topbar nav{display:flex;gap:12px;color:var(--ink-2);font-weight:500}
.lscr .topbar nav span.on{color:var(--ink);font-weight:700;border-bottom:2px solid var(--green);padding-bottom:2px}
.lscr .topbar .me{margin-left:auto;width:20px;height:20px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font-weight:700;font-size:9px}
.lscr .lbody{padding:10px 150px 10px 14px;display:grid;gap:8px}
.lscr .lhead{display:flex;justify-content:space-between;align-items:center}
.lscr .lhead h4{margin:0;font-family:var(--display);font-weight:800;font-size:14px;letter-spacing:-.01em}
.lscr .chips{display:flex;gap:6px}
.lscr .chips span{background:#fff;border:1px solid var(--rule);border-radius:999px;padding:2px 8px;font-size:10px;color:var(--ink-2)}
.lscr .chips span b{color:var(--ink)}
.lscr .lrows{display:grid;gap:5px}
.lrow{display:none;grid-template-columns:30px 1fr 56px 66px 58px;gap:8px;align-items:center;background:#fff;border:1px solid var(--rule);border-radius:9px;padding:7px 9px}
.lrow.show{display:grid;animation:rowin .55s cubic-bezier(.2,.8,.2,1)}
.lrow.new{box-shadow:0 0 0 2px var(--leaf)}
@keyframes rowin{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.lrow .n{font-weight:700;color:var(--ink-2)}
.lrow .by{display:grid;line-height:1.2}
.lrow .by b{font-weight:600}
.lrow .by small{color:var(--ink-2);font-size:9.5px}
.lrow .tot{font-variant-numeric:tabular-nums;font-weight:600;text-align:right}
.lrow .pill{font-size:8.5px;font-weight:700;letter-spacing:.06em;padding:3px 6px;border-radius:5px;background:#fff1c2;color:#6a4b00;text-align:center;transition:background .3s,color .3s}
.lrow .pill.ok{background:#e3f3e8;color:#1d6b45}
.lrow .act{background:var(--green);color:#fff;border-radius:7px;padding:5px 0;text-align:center;font-weight:700;font-size:10px;transition:transform .12s,opacity .3s}
.lrow .act.press{transform:scale(.92)}
.lrow.done .act{opacity:.25}
.lscr .lnote{font-size:10px;color:var(--ink-2);opacity:0;transition:opacity .3s}
.lscr .lnote.on{opacity:1}
.lscr .cursor{position:absolute;left:60%;top:70%;width:16px;height:16px;transition:left .7s cubic-bezier(.2,.8,.2,1),top .7s cubic-bezier(.2,.8,.2,1),transform .12s;pointer-events:none;z-index:3;filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}
.lscr .cursor.press{transform:scale(.85)}
.ph-mini{position:absolute;right:-26px;bottom:-16px;width:170px;height:318px}
.ph-mini .ph-wrap{transform:scale(.5);transform-origin:top left;width:330px}
.duo .ping{position:absolute;right:140px;bottom:120px;width:14px;height:14px;border-radius:50%;background:var(--leaf);opacity:0;pointer-events:none}
.duo .ping.on{animation:ping .9s ease-out}
@keyframes ping{0%{opacity:.9;transform:scale(.6);box-shadow:0 0 0 0 rgba(143,227,164,.7)}100%{opacity:0;transform:scale(1.4);box-shadow:0 0 0 30px rgba(143,227,164,0)}}
.s-orders .olist{display:grid;gap:8px;padding:0 12px}
@media (max-width:760px){.duo{max-width:520px}}
@media (max-width:460px){.ph-mini{width:142px;height:268px;right:-10px;bottom:-12px}.ph-mini .ph-wrap{transform:scale(.42)}.duo{padding-bottom:50px}.laptop .lscr{font-size:9px}.lscr .lbody{padding-right:118px}.lrow{grid-template-columns:24px 1fr 44px 54px 44px;gap:5px}}

/* who-it's-for ticker */
.ticker{overflow:hidden;border-block:1px solid var(--rule);padding-block:.9rem;white-space:nowrap}
.ticker .track{display:inline-flex;animation:tick 40s linear infinite}
.ticker span{font-family:var(--display);font-weight:700;font-size:1.05rem;color:var(--ink-2);padding-right:2.4rem}
.ticker span::before{content:"✽";color:var(--green);margin-right:2.4rem;font-weight:400}
@keyframes tick{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker .track{animation:none}}
/* a day with it */
.day{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.mo{border-left:3px solid var(--green);padding-left:1rem;display:grid;gap:.3rem;align-content:start}
.mo time{font-family:var(--display);font-weight:800;font-size:1.6rem;color:var(--green);letter-spacing:-.02em;line-height:1}
.mo p{color:var(--ink-2);font-size:.98rem}
@media (max-width:760px){.day{grid-template-columns:1fr 1fr}}
@media (max-width:460px){.day{grid-template-columns:1fr}}

footer{border-top:1px solid var(--rule);padding-block:2rem;color:var(--ink-2);font-size:.88rem}
footer .wrap{display:flex;flex-wrap:wrap;gap:.8rem 1.6rem;justify-content:space-between}
footer a{text-decoration:none}

/* ───────── Public-site additions (not in the mockup) ───────── */

/* Keyboard focus on every link, button, chip and FAQ question (the mockup
   styled only .btn and .tile). */
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--green);outline-offset:2px}
.btn:focus-visible{outline:3px solid var(--leaf);outline-offset:2px}
.tile:focus-visible{outline:none}
.logo{text-decoration:none;color:inherit}

/* Skip link: hidden ABOVE the page, never off to the left — in right-to-left
   (Arabic, set by the language button) the left is the scrollable side, and a
   big negative left offset once gave the homepage ~10,000 px of sideways
   scroll. */
.skip-link{position:absolute;left:8px;top:8px;transform:translateY(-300%);background:var(--ink);color:#fff;padding:10px 16px;z-index:100;border-radius:8px;font-weight:600}
html[dir="rtl"] .skip-link{left:auto;right:8px}
.skip-link:focus{transform:none}

/* Visually hidden, still in the page (clip, not a negative offset). */
.vh{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0,0,0,0) !important;clip-path:inset(50%) !important;white-space:nowrap !important;border:0 !important}

/* The shared language button. lang-picker.js (every page) appends
   #fc-lang-picker to <body> as a fixed overlay with inline positions;
   public-site.js moves it into the header just before Sign in, and these
   !important rules make it an ordinary flex item there at every width
   (between the page links and Sign in on desktop, between the logo and
   Sign in on phones). Never parked off-screen. */
.site #fc-lang-picker{position:relative !important;top:auto !important;right:auto !important;bottom:auto !important;left:auto !important;z-index:auto !important;flex:none;box-shadow:none !important;cursor:auto !important;align-self:center}
@media (max-width:760px){.site #fc-lang-picker{margin-inline-start:auto}.site #fc-lang-picker + .signin{margin-inline-start:0}}
/* Tablets (761–1000 px): with the language button in the row, the four page
   links no longer fit beside it (one line needs ~970 px), and the scrolling
   strip hid Buyers and Services at 820. They take their own row, as on phones. */
@media (min-width:761px) and (max-width:1000px){.site .wrap{flex-wrap:wrap}.views{order:3;width:100%;margin-inline-start:0}.site .signin,.site #fc-lang-picker{margin-inline-start:auto}.site #fc-lang-picker + .signin{margin-inline-start:0}}

/* Three-up rows. The mockup set these columns inline, which beat its own
   phone breakpoints and pushed the page 50 px past a 390 px screen. */
.wins.three{grid-template-columns:repeat(3,1fr)}
.steps.three{grid-template-columns:repeat(3,1fr)}
@media (max-width:760px){.wins.three,.steps.three{grid-template-columns:1fr}}

/* "Watch an order go through": the pickup run has five stages, not six. */
.flow .track.five{grid-template-columns:repeat(5,1fr)}

/* "Text me the demo": the one-line answer stands out; the consent line under
   the box is smaller than the cell's text (the mockup's .tiny line renders at
   the cell size because .mission .cell p outranks .tiny — kept as drawn). */
.tdemo input:focus{outline:2px solid var(--leaf);outline-offset:1px}
.tdemo .btn[aria-disabled="true"]{cursor:default;transform:none}
.mission .cell .demo-note{color:#fff;font-weight:600;font-size:.95rem;margin-top:.6rem}
.mission .cell .demo-note:empty{margin:0}
.mission .cell p.consent{font-size:.82rem;line-height:1.45;margin-top:.5rem}
.mission .cell p.consent a{color:#e3efe6}

/* Overview hero on phones (owner 2026-10-04): the devices come right under
   the two buttons; the promise list and the fine print follow them. Desktop
   keeps the mockup's columns (text left, devices right). */
@media (max-width:760px){
  .hero-duo{grid-template-areas:"eyebrow" "head" "lede" "cta" "devices" "promise" "fine";row-gap:1.5rem}
  .hero-duo > .stack{display:contents}
  .hero-duo .eyebrow{grid-area:eyebrow}
  .hero-duo h1{grid-area:head}
  .hero-duo .lede{grid-area:lede}
  .hero-duo .cta-row{grid-area:cta}
  .hero-duo .hero-devices{grid-area:devices;min-width:0}
  .hero-duo .promise{grid-area:promise}
  .hero-duo .fine{grid-area:fine}
}
/* Nothing may stick out past the screen: the mockup's small phone sits 26 px
   (10 px under 460) outside the laptop, which runs past the edge whenever the
   page is narrower than ~1,132 px (6 px at 480 or 820). Flush with the laptop
   there instead; the laptop's base keeps its 18 px lip, which the page's 20 px
   gutter holds. Wider screens keep the mockup's overhang. */
@media (max-width:1131px){.ph-mini{right:0}}