/* Hallmark · checked: 2026-11-01 · genre: modern-minimal (inferred: B2B platform, AI distribution)
 * floor: 0 FAIL · fixed: 20 gates (2, 4, 10, 20, 26a, 34, 39a, 40, 48, 50, 54, 62, 63, 67) plus 24b, 29, 49b, F1, F3, F4, F7, F16, F21, F24, F26 · structural: 4 printed (44a, 44c, 58, 59)
 * brand: Lotvine tokens kept (Plus Jakarta Sans, Newsreader for numerals and the brand line, ink #13201B, cream surfaces, vine, lime mark accents, canopy footer)
 * finish-review: in-thread · 2 findings · 2 resolved (phone step numerals, market card spacing)
 * built: the project · redesign: polish · v2.0.0 */
/* Hallmark · reworded "Start with surplus. Grow into everyday B2B sales." to "Then grow into everyday B2B sales." · the path now sits inside the sign-up section to cut a section (59) */
/* Hallmark · dropped FAQ "Will buyers see my brand name?" and "Which categories do you take?" · brand-name control is in the control section; trims the FAQ screen (58) */
/* Hallmark · dismissed 40 · measured against the pixels: dark-card captions 9.5:1 and up, buyer bubbles sit on their own dark ground */
/* Hallmark · answered F7 · pills are the tab control, the pause control, switches and one chat chip; every card and panel takes the card radius */
/* Hallmark · answered F15 · text splits use 64 to 72px and card grids 16px, the cards read as one object per row */
/* Hallmark · dismissed render · fonts.googleapis.com is unreachable from the lint machine; Plus Jakarta Sans and Newsreader load on lotvine.com */
:root{
  --font:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;--serif:'Newsreader',Georgia,serif;
  --bg:#FFFFFF;--paper:#FFFFFF;--ink:#13201B;--ink2:#2A3833;--ink-hover:#24352E;--muted:#4B5A55;--faint:#5F6E69;--edge:#77837D;
  --line:#E7E3D8;--soft:#F7F5EF;--soft2:#F2EFE6;--soft3:#E9E5DA;--track:#E3DFD3;--switch-off:#D3D8D2;--dash:#CBD1CA;
  --photo:#F1EEE6;--photo2:#ECE9E1;--xls-bg:#E8F5E1;--xls-ink:#2E6B1F;--on-ink-muted:#B9C7C1;
  --lime:#D4F06A;--vine:#1F6F5C;--ok:#1F6F5C;--no:#A8381F;
  --canopy:#0F1F1A;--canopy2:#1A2E27;--canopyline:#2C443B;--oncanopy:#B9C7C1;--cream:#F5F2EA;
  --ok-soft:rgba(31,111,92,.10);--ok-line:rgba(31,111,92,.28);--no-soft:rgba(168,56,31,.08);
  --glow-lime:rgba(212,240,106,.42);--glow-vine:rgba(31,111,92,.10);
  --shadow-1:rgba(19,32,27,.05);--shadow-2:rgba(19,32,27,.10);--shadow-3:rgba(19,32,27,.12);--shadow-knob:rgba(19,32,27,.2);--shadow-seg:rgba(19,32,27,.08);
  --strike:rgba(19,32,27,.3);--ring-soft:rgba(19,32,27,.06);
  --mask:#000;--on-dark-line:rgba(245,242,234,.35);--on-dark-ground:rgba(15,31,26,.72);--cs-shade:rgba(15,31,26,.85);--cs-shade2:rgba(15,31,26,.5);--cs-drop:rgba(15,31,26,.45);--cs-glass:rgba(251,248,241,.9);--wa-green:#25D366;--wa-bg:#EFEAE2;--wa-out:#D9FDD3;--wa-tick:#53BDEB;--wa-head:#F0F2F5;--wa-ink:#111B21;--wa-meta:#667781;--mono:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace;--r:20px;--ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:80px;overflow-x:clip}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:clip;font-feature-settings:"cv11","ss01"}
img{max-width:100%;display:block}
[hidden]{display:none!important}
a{color:inherit}
button{font:inherit;color:inherit}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* type */
h1,h2,h3{font-weight:600;letter-spacing:-.025em;line-height:1.05;text-wrap:balance;overflow-wrap:break-word;min-width:0}
p{text-wrap:pretty}
::selection{background:var(--lime);color:var(--ink)}
html{scrollbar-color:var(--dash) var(--paper);caret-color:var(--ink)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.btn.dark:focus-visible,.chip.on:focus-visible{outline-offset:3px}
h1{font-size:clamp(42px,6.2vw,78px);letter-spacing:-.032em;line-height:1.04}
h2{font-size:clamp(34px,4.6vw,56px)}
h3{font-size:20px;letter-spacing:-.02em;line-height:1.25}
.lede{font-size:clamp(17px,1.6vw,20px);color:var(--muted);line-height:1.5;max-width:600px}
.muted{color:var(--muted)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 20px;border-radius:999px;font-size:15px;font-weight:500;text-decoration:none;border:0;cursor:pointer;transition:transform .2s var(--ease),background .2s,opacity .2s;white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn.dark{background:var(--ink);color:var(--paper)}
.btn.dark:hover{background:var(--ink-hover)}
.btn.light{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--edge)}
.btn.light:hover{background:var(--soft)}
.btn.sm{height:36px;padding:0 16px;font-size:14px}
.btn svg{width:16px;height:16px}
.tlink{font-size:15px;font-weight:500;text-decoration:underline;text-decoration-color:var(--lime);text-decoration-thickness:2px;text-underline-offset:5px;display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.tlink:hover{opacity:.7}

/* header */
.hdr{position:fixed;inset:0 0 auto;z-index:50;transition:background .3s,box-shadow .3s}
.hdr.sc{background:var(--paper);box-shadow:0 1px 0 var(--line)}
.hdr .wrap{height:64px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo img{height:22px;width:auto}
.nav{display:flex;gap:4px}
.nav a{font-size:14px;font-weight:500;color:var(--ink2);text-decoration:none;padding:8px 12px;border-radius:8px;transition:background .2s}
.nav a:hover{background:var(--soft)}
.hdr .end{display:flex;align-items:center;gap:16px}
.hdr .end .tlink{font-size:14px}
.burger{display:none;position:relative;width:40px;height:40px;border:0;background:none;border-radius:50%;cursor:pointer}
.burger span{position:absolute;left:calc(50% - 9px);top:calc(50% - .75px);width:18px;height:1.5px;background:var(--ink);transition:transform .3s var(--ease)}
.burger span:first-child{transform:translateY(-4px)}
.burger span:last-child{transform:translateY(4px)}
.burger[aria-expanded=true] span:first-child{transform:rotate(45deg)}
.burger[aria-expanded=true] span:last-child{transform:rotate(-45deg)}
.mnav{display:none}
.js .mnav{position:fixed;inset:64px 0 0;background:var(--paper);z-index:49;padding:16px 24px 32px;display:flex;flex-direction:column;visibility:hidden;opacity:0;transform:translateY(-8px);transition:opacity .3s var(--ease),transform .3s var(--ease),visibility 0s .3s}
.js .mnav.open{visibility:visible;opacity:1;transform:none;transition:opacity .3s var(--ease),transform .3s var(--ease)}
.mnav a{display:flex;align-items:center;min-height:56px;font-size:20px;font-weight:500;letter-spacing:-.015em;text-decoration:none;border-bottom:1px solid var(--line)}
.mnav .btn{justify-content:center;min-height:52px;height:52px;font-size:16px;border-bottom:0;margin-top:12px}
.mnav a:not(.btn)+.btn{margin-top:28px}
@media (max-width:900px){.nav,.hdr .end .tlink{display:none}.burger{display:block}}
@media (max-width:420px){.hdr .end .btn{display:none}}

/* sections */
section{position:relative}
.sec{padding:140px 0}
.head{max-width:720px;margin-bottom:64px}
.head.center{margin-left:auto;margin-right:auto;text-align:center}
.head.center .lede{margin:20px auto 0}
.head .lede{margin-top:20px}
@media (max-width:720px){.sec{padding:96px 0}.head{margin-bottom:44px}}

/* hero */
.hero{padding:144px 0 24px;text-align:center}
.announce{font-size:14px;font-weight:500;color:var(--ink2);text-decoration:underline;text-decoration-color:var(--lime);text-decoration-thickness:2px;text-underline-offset:5px}
.announce:hover{color:var(--ink)}
.hero h1{max-width:15ch;margin:24px auto 0}
.hero .lede{margin:24px auto 0;max-width:620px}
.hero .ctas{display:flex;gap:8px;justify-content:center;margin-top:36px;flex-wrap:wrap}
.split .w{display:inline-block;white-space:nowrap}
.split .w>span{display:inline-block}
@media (max-width:720px){.hero{padding-top:112px}.stage{margin-top:16px}}

/* hero demo: the AI agent working one lot */
.stage{margin-top:32px;padding-bottom:40px}
.demo{position:relative;max-width:520px;margin:0 auto}
.agent{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:20px;overflow:hidden;display:flex;flex-direction:column;text-align:left;box-shadow:0 1px 2px var(--shadow-1),0 24px 48px -32px var(--shadow-3)}
.ag-head{display:flex;align-items:center;justify-content:space-between;padding:16px 16px 0}
.ag-name{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;letter-spacing:-.01em}
.eq{display:inline-flex;align-items:center;gap:3px;height:14px}
.eq i{display:block;width:2.5px;height:100%;border-radius:2px;background:var(--vine);transform-origin:50% 50%}
.eq i:nth-child(1){transform:scaleY(.5)}.eq i:nth-child(2){transform:scaleY(.9)}.eq i:nth-child(3){transform:scaleY(.65)}.eq i:nth-child(4){transform:scaleY(.8)}
.agent.run .eq i{animation:eq 1s var(--ease) infinite alternate}
.agent.run .eq i:nth-child(2){animation-delay:-.3s}.agent.run .eq i:nth-child(3){animation-delay:-.6s}.agent.run .eq i:nth-child(4){animation-delay:-.15s}
@keyframes eq{from{transform:scaleY(.3)}to{transform:scaleY(1)}}
.ag-state{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.ag-state::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--vine);box-shadow:0 0 0 3px var(--ok-soft)}
.agent.won .ag-state::after{background:var(--lime);box-shadow:0 0 0 1.5px var(--ink) inset,0 0 0 4px var(--glow-lime)}
.ag-prog{height:2px;margin:14px 16px 0;border-radius:3px;background:var(--line);overflow:hidden}
.ag-prog i{display:block;height:100%;background:var(--vine);transform-origin:0 50%;transform:scaleX(1);transition:transform .8s var(--ease)}
.ag-card{padding:16px}
.ag-card+.ag-card{border-top:1px solid var(--line)}
.ag-title{display:flex;align-items:center;gap:12px;padding-bottom:12px;margin-bottom:8px;border-bottom:1px solid var(--line)}
.ag-ph{flex:none;width:48px;height:48px;border-radius:12px;object-fit:cover;background:var(--photo)}
.ag-tt{display:flex;flex-direction:column;gap:2px;min-width:0}
.ag-tt small{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ag-title b{font-size:15px;font-weight:600;letter-spacing:-.01em}
.ag-title>span{margin-left:auto;align-self:flex-start;white-space:nowrap;font-size:13px;color:var(--faint);font-variant-numeric:tabular-nums}
.ag-steps{list-style:none;display:flex;flex-direction:column}
.ag-steps li{position:relative;display:flex;align-items:center;gap:12px;min-height:32px;font-size:14px;color:var(--muted);transition:color .3s}
.ag-steps li::before{content:"";flex:none;width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--dash);transition:background .3s,box-shadow .3s}
.ag-steps li.now{color:var(--ink)}
.ag-steps li.now::before{box-shadow:inset 0 0 0 2px var(--line);border:2px solid transparent;border-top-color:var(--vine);width:12px;height:12px;animation:spin .8s linear infinite}
.ag-steps li.done{color:var(--faint)}
.ag-steps li.done::before{background:var(--vine);box-shadow:none}
.ag-steps li.done::after{content:"";position:absolute;left:5.5px;top:50%;width:4px;height:8px;border:solid var(--paper);border-width:0 2px 2px 0;transform:translateY(-62%) rotate(45deg)}
.agent.won .ag-steps li:last-child::before{background:var(--lime);box-shadow:inset 0 0 0 1.5px var(--ink)}
.agent.won .ag-steps li:last-child::after{border-color:var(--ink)}
@keyframes spin{to{transform:rotate(360deg)}}
.ag-ctx{height:176px;overflow:hidden}
.ag-q{display:inline-flex;align-items:center;gap:8px;max-width:100%;padding:8px 12px;border-radius:10px;background:var(--soft2);color:var(--ink2);font-size:13px}
.ag-q svg{flex:none;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.ag-q span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.caret{display:inline-block;width:1.5px;height:15px;background:currentColor;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.ag-res{list-style:none;margin-top:12px;display:flex;flex-direction:column}
.ag-res li{display:flex;align-items:baseline;gap:12px;min-height:32px;padding:4px 0;font-size:14px}
.ag-res li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--vine);transform:translateY(-2px)}
.ag-res b{font-weight:500;color:var(--ink)}
.ag-res span{font-size:12px;color:var(--faint)}
.ag-res li.no::before{background:var(--no)}.ag-res li.no span{color:var(--no)}
.ag-res li.ok::before{background:var(--lime);box-shadow:0 0 0 1.5px var(--ink)}.ag-res li.ok span{color:var(--vine);font-weight:600}
.js .ag-res li.new{animation:evIn .4s var(--ease) both}
@keyframes evIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.ag-foot{padding:0}
.ag-tools{display:flex;align-items:center;gap:4px;padding:12px 12px 12px 12px;border-bottom:1px solid var(--line);font-size:13px;color:var(--muted)}
.ag-tools span{padding:4px 8px;border-radius:8px;transition:background .3s,color .3s}
.ag-tools span.on{background:var(--soft2);color:var(--ink);font-weight:500}
.ag-tools em{margin-left:auto;font-style:normal;font-weight:500;color:var(--ink)}
.ag-meter{display:flex;align-items:center;gap:16px;padding:8px 8px 8px 16px;min-height:48px;font-size:12px;color:var(--faint);font-variant-numeric:tabular-nums}
.ag-meter .mt{display:inline-block;white-space:nowrap}
.ag-meter .pulse{display:inline-block;vertical-align:middle;margin:-2px 8px 0 0}
.pulse{width:6px;height:6px;border-radius:50%;background:var(--dash)}
.agent.run .pulse{background:var(--vine)}
.ag-pause{margin-left:auto;display:none;flex:none;align-items:center;gap:8px;height:32px;padding:0 12px;border:0;border-radius:999px;background:var(--soft2);color:var(--ink2);font-family:var(--font);font-size:13px;font-weight:500;cursor:pointer;transition:background .2s}
.ag-pause:hover{background:var(--soft3)}
.ag-pause svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ag-pause .pl{display:none}.ag-pause[aria-pressed=true] .pz{display:none}.ag-pause[aria-pressed=true] .pl{display:inline}
.js .agent.live .ag-pause{display:inline-flex}
.demo .note{position:relative;text-align:center;font-size:13px;color:var(--muted);margin-top:16px}
@media (max-width:400px){.ag-meter .lbl{display:none}.ag-ph{width:40px;height:40px;border-radius:10px}.ag-tt b{font-size:14px}}
@media (max-width:600px){
  .agent{border-radius:18px}
  .ag-tools{overflow:hidden;white-space:nowrap}
  .ag-tools em{display:none}
  .ag-meter{gap:12px;padding:8px 8px 8px 12px;font-size:11px}
  .ag-pause{height:36px}
}

/* channels strip */
.strip{padding:40px 24px 0;text-align:center}
.strip p{font-size:14px;color:var(--muted)}
.chans{display:flex;justify-content:center;flex-wrap:wrap;gap:12px 40px;margin-top:24px}
.chans span{display:inline-flex;align-items:center;gap:8px;font-size:17px;font-weight:500;letter-spacing:-.015em;color:var(--ink2)}
.chans svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.strip p{text-wrap:balance}
.chans svg.lvm{fill:currentColor;stroke:none;width:18px;height:18px}
/* category ticker */
.cats{max-width:1160px;margin:56px auto 0;padding:0 24px}
.cats figcaption{display:flex;align-items:center;justify-content:center;gap:8px;font-size:14px;color:var(--muted);margin-bottom:12px}
.tk-btn{display:none;width:32px;height:32px;border:0;border-radius:50%;background:none;color:var(--muted);cursor:pointer;place-items:center;transition:background .2s,color .2s}
.tk-btn:hover{background:var(--soft);color:var(--ink)}
.tk-btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tk-btn .pl{display:none}
.tk-btn[aria-pressed=true] .pz{display:none}.tk-btn[aria-pressed=true] .pl{display:inline}
.tk{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.showcase{padding-bottom:56px}
.tk-t{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:0 32px;padding:16px 0}
.tk-t li{display:flex;align-items:center;gap:12px;font-size:17px;font-weight:500;letter-spacing:-.01em;color:var(--ink2);white-space:nowrap;line-height:2}
.tk-t li::before{content:"";flex:none;width:10px;height:10px;border-radius:5px 0 5px 5px;background:var(--lime);box-shadow:inset 0 0 0 1.5px var(--ink)}
.js .tk.ready{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,var(--mask) 10%,var(--mask) 90%,transparent);mask-image:linear-gradient(90deg,transparent,var(--mask) 10%,var(--mask) 90%,transparent)}
.js .tk.ready .tk-t{flex-wrap:nowrap;justify-content:flex-start;width:max-content;gap:0;animation:tk 52s linear infinite}
.js .tk.ready .tk-t li{padding-right:40px}
.js .tk.ready:hover .tk-t,.js .tk.ready.paused .tk-t{animation-play-state:paused}
.js .cats.tk-on .tk-btn{display:grid}
@keyframes tk{to{transform:translateX(-50%)}}
@media (max-width:600px){.cats{margin-top:40px}.tk-t li{font-size:15px}.js .tk.ready .tk-t li{padding-right:28px}.js .tk.ready .tk-t{animation-duration:40s}}
@media (max-width:900px){.tk-btn{width:44px;height:44px}}
@media (max-width:600px){
  .strip p{max-width:30ch;margin:0 auto}
  /* phones: same plain icon + label row as desktop, no boxes */
  .chans{display:grid;grid-template-columns:repeat(2,max-content);justify-content:center;gap:14px 32px;margin:20px auto 0}
  .chans span{gap:8px;font-size:15px}
  .chans svg{width:18px;height:18px;flex:none}
  .chans svg.lvm{width:16px;height:16px}
}

/* section head: headline left, lede right */
.shead{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:64px;align-items:end;margin-bottom:56px}
.shead .lede{margin:0;max-width:480px}
@media (max-width:900px){.shead{grid-template-columns:minmax(0,1fr);gap:16px;margin-bottom:40px}}

/* how it works: tabs over one stage */
.card{background:var(--soft);border-radius:var(--r);padding:28px}
.flow-tabs{display:flex;gap:4px;width:max-content;max-width:100%;margin:0 auto 16px;padding:4px;border-radius:999px;background:var(--soft2);overflow-x:auto;scrollbar-width:none}
.flow-tabs::-webkit-scrollbar{display:none}
.flow-tabs button{position:relative;display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 20px;border:0;border-radius:999px;background:none;color:var(--muted);font-family:var(--font);font-size:15px;font-weight:500;cursor:pointer;white-space:nowrap;overflow:hidden;transition:background .3s,color .3s,box-shadow .3s}
.flow-tabs button:hover{color:var(--ink)}
.flow-tabs button[aria-selected=true]{background:var(--paper);color:var(--ink);box-shadow:0 1px 3px var(--shadow-seg)}
.flow-tabs .n{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;font-size:12px;font-weight:600;background:var(--soft3);color:var(--ink2);font-variant-numeric:tabular-nums}
.flow-tabs button[aria-selected=true] .n{background:var(--lime);color:var(--ink)}
@property --p{syntax:'<number>';inherits:false;initial-value:0}
.js .flow.auto .flow-tabs button[aria-selected=true] .n{background:radial-gradient(closest-side,var(--lime) 78%,transparent 80%),conic-gradient(var(--vine) calc(var(--p)*360deg),var(--soft3) 0);animation:ring var(--dur,7.5s) linear forwards}
.js .flow.hold .flow-tabs button[aria-selected=true] .n{animation-play-state:paused}
@keyframes ring{to{--p:1}}
.js .flow-stage{position:relative;height:640px;border-radius:28px;background-color:var(--soft);background-image:radial-gradient(var(--dash) 1px,transparent 1.2px);background-size:24px 24px;background-position:center;overflow:hidden}
.flow-stage::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 60% at 50% 45%,var(--soft) 40%,transparent 100%);pointer-events:none}
.fp{position:absolute;inset:0;display:flex;flex-direction:column}
.fp-vis{position:relative;flex:1;display:flex;align-items:center;justify-content:center;padding:56px 32px 0}
.fp-vis .ui{position:relative;width:min(100%,460px);box-shadow:0 1px 2px var(--shadow-1),0 32px 64px -32px var(--shadow-3)}
.fp-cap{position:relative;padding:0 40px 36px;max-width:560px}
.fp-cap h3{font-size:20px;font-weight:500;letter-spacing:-.015em}
.fp-cap p{font-size:15px;color:var(--muted);margin-top:8px}
.fchip{position:absolute;display:flex;align-items:center;gap:12px;padding:12px 16px 12px 12px;border-radius:16px;background:var(--paper);box-shadow:0 1px 2px var(--shadow-1),0 16px 40px -16px var(--shadow-3);font-size:14px;white-space:nowrap}
.fchip b{display:block;font-weight:600}
.fchip small{display:block;font-size:12px;color:var(--muted)}
.fchip .ci,.tb .ci{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--lime);flex:none}
.fchip .ci svg,.tb .ci svg{width:16px;height:16px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.js .fp{visibility:hidden;opacity:0;transition:opacity .5s var(--ease),visibility 0s .5s}
.js .fp.on{visibility:visible;opacity:1;transition:opacity .5s var(--ease)}
.js .fp .ui{transform:translateY(16px) scale(.985);transition:transform .7s var(--ease)}
.js .fp.on .ui{transform:none}
.js .fp .fchip{opacity:0;transform:translateY(12px);transition:opacity .5s var(--ease) .35s,transform .6s var(--ease) .35s}
.js .fp.on .fchip{opacity:1;transform:none}
/* floating cards sit beside the panel, never on it */
.side-l{right:calc(50% + 254px)}
.side-r{left:calc(50% + 254px)}
@media (max-width:1240px){.fp-vis:has(.side-l,.side-r){padding-top:120px}.side-l,.side-r{top:24px!important;left:24px;right:auto}}
/* step 1: raw file, enriched lot, channels */
.s1{gap:24px}
.s1 .ui{box-shadow:0 1px 2px var(--shadow-1),0 24px 48px -28px var(--shadow-3)}
.raw{width:250px!important;padding:16px}
.raw .uh{white-space:nowrap}
.raw .uh b{display:flex;align-items:center;gap:8px}
.raw .fi{display:grid;place-items:center;width:28px;height:28px;border-radius:7px;background:var(--xls-bg);color:var(--xls-ink);font-size:11px;font-weight:600}
.rr{display:grid;grid-template-columns:40px minmax(0,1fr) 36px 36px;gap:6px;padding:8px 6px;border-radius:8px;font-family:var(--mono);font-size:11px;color:var(--muted);white-space:nowrap}
.rr span{overflow:hidden;text-overflow:ellipsis}
.rr.on{background:var(--ok-soft);color:var(--ink)}
.arrow{flex:none;width:32px;height:2px;background:var(--dash);position:relative}
.arrow i{position:absolute;right:-1px;top:-4px;width:8px;height:8px;border-top:2px solid var(--dash);border-right:2px solid var(--dash);transform:rotate(45deg)}
.enr{width:300px!important;padding:12px}
.enr-ph{position:relative;height:120px;border-radius:12px;overflow:hidden;background:var(--photo)}
.enr-ph img{width:100%;height:100%;object-fit:cover;display:block}
.enr-ph .ai{position:absolute;left:8px;top:8px;display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 8px;border-radius:999px;background:var(--paper);font-size:12px;font-weight:600;color:var(--ink)}
.enr-ph .ai svg{width:12px;height:12px;fill:none;stroke:var(--vine);stroke-width:2;stroke-linecap:round}
.enr-t{display:block;font-size:15px;font-weight:600;margin:12px 4px 8px}
.enr-t small{display:block;font-size:12px;font-weight:400;color:var(--muted);margin-top:2px}
.enr-f{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 12px;padding:0 4px 4px}
.enr-f .f{padding:6px 0;border-top:1px solid var(--line)}
.enr-f dt{font-size:11px;color:var(--muted)}
.enr-f dd{font-size:13px;font-weight:500}
.outs{list-style:none;display:flex;flex-direction:column;gap:12px;width:250px}
.outs li{display:flex;align-items:center;gap:12px;padding:12px;border-radius:16px;background:var(--paper);box-shadow:0 1px 2px var(--shadow-1),0 16px 32px -20px var(--shadow-3)}
.outs b{display:block;font-size:14px;font-weight:600}
.outs small{display:block;font-size:12px;color:var(--muted)}
.oc{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--soft2)}
.oc svg{width:18px;height:18px;fill:none;stroke:var(--ink);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.oc.lv{background:none;overflow:hidden}.oc.lv img{display:block;width:100%;height:100%}
.oc.wa{background:var(--wa-green)}.oc.wa svg{stroke:var(--paper)}
.js .fp .enr-f .f,.js .fp .outs li,.js .fp .enr-ph .ai{opacity:0;transform:translateY(6px);transition:opacity .4s var(--ease),transform .5s var(--ease)}
.js .fp.on .enr-f .f{opacity:1;transform:none;transition-delay:calc(.6s + var(--i)*.18s)}
.js .fp.on .enr-ph .ai{opacity:1;transform:none;transition-delay:.4s}
.js .fp.on .outs li{opacity:1;transform:none;transition-delay:calc(1.9s + var(--i)*.25s)}
.js .fp.on .rr.on{animation:scan 1.6s var(--ease) 1}
@keyframes scan{0%{background:transparent}40%{background:var(--ok-soft)}}
/* step 3: WhatsApp and the AI call */
.wa-ph{position:relative;width:min(100%,380px);border-radius:24px;overflow:hidden;background:var(--wa-bg);box-shadow:0 1px 2px var(--shadow-1),0 32px 64px -32px var(--shadow-3);font-size:14px;color:var(--wa-ink)}
.wa-h{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--wa-head)}
.wa-h .av{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--soft3);font-size:12px;font-weight:600}
.wa-h .who{flex:1;min-width:0}.wa-h b{display:block;font-size:15px;font-weight:600}.wa-h small{display:block;font-size:12px;color:var(--wa-meta)}
.wa-logo{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--wa-green)}
.wa-logo svg,.oc.wa svg{width:20px;height:20px;fill:none;stroke:var(--paper);stroke-width:1.6;stroke-linejoin:round}
.wa-c{display:flex;flex-direction:column;gap:6px;padding:12px 12px 16px}
.m{position:relative;max-width:82%;padding:6px 8px 18px 10px;border-radius:10px;line-height:1.35;box-shadow:0 1px 1px var(--shadow-1)}
.m time{position:absolute;right:8px;bottom:3px;display:flex;align-items:center;gap:3px;font-size:11px;color:var(--wa-meta)}
.m.in{align-self:flex-start;background:var(--paper);border-top-left-radius:2px;padding-right:44px}
.m.out{align-self:flex-end;background:var(--wa-out);border-top-right-radius:2px;padding-right:62px}
.m.card{display:flex;gap:10px;align-items:center;padding:6px 62px 18px 6px}
.m.card img{width:56px;height:56px;border-radius:8px;object-fit:cover;flex:none}
.m.card b{display:block;font-size:14px}.m.card small{display:block;font-size:12px;color:var(--wa-meta)}
.wtk{display:inline-block;width:14px;height:8px;position:relative}
.wtk::before,.wtk::after{content:"";position:absolute;bottom:1px;width:4px;height:7px;border:solid var(--wa-tick);border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.wtk::before{left:2px}.wtk::after{left:6px}
.qr{align-self:flex-end;display:flex;gap:6px;max-width:82%}
.qr span{flex:1;text-align:center;padding:6px 10px;border-radius:10px;background:var(--paper);color:var(--vine);font-size:13px;font-weight:500;white-space:nowrap;box-shadow:0 1px 1px var(--shadow-1)}
.wa-sys{align-self:center;margin-top:4px;padding:4px 10px;border-radius:8px;background:var(--paper);font-size:12px;color:var(--vine);font-weight:500}
.wa-in{display:flex;align-items:center;gap:8px;padding:8px 12px 12px}
.wa-in span{flex:1;padding:8px 14px;border-radius:999px;background:var(--paper);color:var(--wa-meta);font-size:13px}
.wa-in i{width:34px;height:34px;border-radius:50%;background:var(--wa-green)}
.js .fp .wa-c>*{opacity:0;transform:translateY(6px);transition:opacity .35s var(--ease),transform .45s var(--ease)}
.js .fp.on .wa-c>*{opacity:1;transform:none;transition-delay:calc(.3s + var(--i)*.45s)}
.call{position:absolute;width:280px;padding:16px;border-radius:20px;background:var(--canopy);color:var(--cream);box-shadow:0 24px 48px -24px var(--shadow-3)}
.call-h{display:flex;align-items:center;gap:12px}
.call-h .ci{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--lime)}
.call-h .ci svg{width:16px;height:16px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.call-h b{display:block;font-size:14px;font-weight:600}.call-h small{display:block;font-size:12px;color:var(--oncanopy)}
.wave{display:flex;align-items:center;gap:3px;height:40px;margin:16px 0 12px}
.wave i{flex:1;height:100%;border-radius:2px;background:var(--lime);transform:scaleY(var(--h));transform-origin:50% 50%}
.js .fp.on .wave i{animation:wv .9s var(--ease) var(--d) infinite alternate}
@keyframes wv{from{transform:scaleY(.15)}to{transform:scaleY(var(--h))}}
.call .tr{font-size:13px;line-height:1.45;color:var(--cream)}
/* regions: one clean panel, status pills */
.mkt{width:min(100%,440px)!important;padding:24px 24px 8px}
.mkt-h{font-size:20px;font-weight:500;letter-spacing:-.02em;margin-bottom:12px}
.mr{display:grid;grid-template-columns:minmax(0,1.2fr) 108px minmax(0,1fr);align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line);font-size:14px}
.mr .mn{color:var(--ink)}
.mr .md{color:var(--muted);font-size:13px;text-align:right}
.mr .st{justify-self:start}
@media (max-width:480px){.mr{grid-template-columns:minmax(0,1fr) auto}.mr .md{display:none}.mr .st{justify-self:end}}
.st{display:inline-flex;align-items:center;gap:6px;padding:2px 10px 2px 8px;border-radius:999px;font-size:12px;font-weight:500;white-space:nowrap}
.st::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.st.yes{color:var(--vine);background:var(--ok-soft)}
.st.blk{color:var(--no);background:var(--no-soft)}
.st.na{color:var(--muted);background:var(--soft2)}
.mr.fade{opacity:.45}
.js .bc .mr{opacity:0;transform:translateY(6px);transition:opacity .45s var(--ease),transform .5s var(--ease)}
.js .bc.in .mr{opacity:1;transform:none;transition-delay:calc(.2s + var(--i)*.08s)}
.js .bc.in .mr.fade{opacity:.45}
@media (max-width:900px){
  .s1{flex-direction:column;gap:16px;justify-content:center}
  .s1 .raw,.s1 .arrow{display:none}
  .enr{width:min(100%,340px)!important}
  /* phones: channels as one plain line, no cards */
  .outs{flex-direction:row;justify-content:center;flex-wrap:nowrap;width:100%;gap:14px;margin-top:4px}
  .outs li{flex:none;gap:6px;padding:0;white-space:nowrap;background:none;box-shadow:none;border-radius:0}
  .outs .oc{width:22px;height:22px;border-radius:6px}
  .outs .oc svg{width:14px;height:14px}
  .outs small{display:none}
  .outs b{font-size:13px;font-weight:500}
  .call{width:min(100% - 32px,320px)}
  .call .tr{display:none}
  .wave{height:24px;margin:10px 0 0}
  .s3{padding-top:150px!important}
  /* phones: stage grows to its tallest step instead of a fixed 640px, so captions never collide or clip */
  .js .flow-stage{height:auto;display:grid;border-radius:24px}
  .js .flow-stage>.fp{position:relative;inset:auto;grid-area:1/1}
  .fp-vis{flex:1 0 auto;padding:28px 16px 0}
  .fp-cap{padding:24px 20px 28px}
  .fp-cap p{font-size:15px}
}
@media (prefers-reduced-motion:reduce){
  .js .fp .enr-f .f,.js .fp .outs li,.js .fp .enr-ph .ai,.js .fp .wa-c>*{opacity:1;transform:none;transition:none}
  .js .bc .mr{opacity:1;transform:none;transition:none}.js .bc .mr.fade{opacity:.45}
}
html:not(.js) .flow-tabs{display:none}
html:not(.js) .flow-stage{height:auto}
html:not(.js) .fp{position:relative;inset:auto;min-height:560px}
.ui{background:var(--paper);border-radius:20px;border:1px solid var(--line);box-shadow:0 2px 8px var(--shadow-1);padding:20px;width:min(100%,440px);font-size:14px}
.ui .uh{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--muted);margin-bottom:12px}
.ui .uh b{font-weight:500;color:var(--ink)}
.file{display:flex;align-items:center;gap:12px;padding:12px;border:1px dashed var(--dash);border-radius:12px;margin-bottom:12px}
.file .fi{width:36px;height:36px;border-radius:9px;background:var(--xls-bg);display:grid;place-items:center;font-size:11px;font-weight:600;color:var(--xls-ink)}
.file small{display:block;color:var(--muted);font-size:12px}
.rows div{display:grid;grid-template-columns:1fr 70px 70px;gap:8px;padding:8px 4px;border-top:1px solid var(--line);font-size:13px}
.rows div span:not(:first-child){text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}
.rows div.h span{color:var(--faint);font-size:11px}
.tog{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-top:1px solid var(--line)}
.tog:first-of-type{border-top:0}
.sw{width:34px;height:20px;border-radius:999px;background:var(--switch-off);position:relative;flex:none}
.sw::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--paper);box-shadow:0 1px 2px var(--shadow-knob);transition:transform .3s var(--ease)}
.sw.on{background:var(--ink)}.sw.on::after{transform:translateX(14px)}
.floor{display:flex;justify-content:space-between;align-items:center;background:var(--soft);border-radius:10px;padding:12px;margin-bottom:8px}
.floor strong{font-size:20px;font-weight:500;letter-spacing:-.02em}
.chat{display:flex;flex-direction:column;gap:8px}
.bub{max-width:82%;padding:8px 12px;border-radius:14px;font-size:13px;line-height:1.4}
.bub.them{background:var(--soft);border-bottom-left-radius:4px}
.bub.ai{background:var(--ink);color:var(--paper);align-self:flex-end;border-bottom-right-radius:4px}
.bub small{display:block;font-size:11px;opacity:.6;margin-top:4px}
.sys{align-self:center;font-size:12px;color:var(--muted);background:var(--paper);border:1px solid var(--line);padding:4px 8px;border-radius:6px}
.sys.ok{color:var(--ok);border-color:var(--ok-line)}
.rcpt .uh{margin-bottom:16px}
.rcpt .amt{font-family:var(--serif);font-size:48px;font-weight:400;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.rcpt .sub{font-size:13px;color:var(--muted);margin-top:8px}
.vsf{margin-top:24px;padding:16px;border-radius:12px;background:var(--soft)}
.vsf .bar{position:relative;height:8px;border-radius:8px;background:var(--track)}
.vsf .bar i{position:absolute;left:0;top:0;bottom:0;width:73%;border-radius:8px;background:var(--ink);transform-origin:0 50%;transition:transform 1.1s var(--ease) .25s}
.js .pane:not(.on) .vsf .bar i{transform:scaleX(.2);transition:none}
.vsf .fm{position:absolute;left:53%;top:-5px;bottom:-5px;width:2px;border-radius:2px;background:var(--lime);box-shadow:0 0 0 2px var(--soft)}
.vsf .lg{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:var(--muted);margin-top:8px}
.vsf .lg b{font-weight:500;color:var(--ink)}
.ledger{margin-top:16px}
.ledger div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid var(--line);font-size:13px}
.ledger div:first-child{border-top:0}
.ledger div span:first-child{color:var(--muted)}
.ledger div span:last-child{font-variant-numeric:tabular-nums;text-align:right}
@media (max-width:900px){
  .flow-tabs{width:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
  .flow-tabs button{justify-content:center;padding:0 8px;font-size:13px}
  .flow-tabs .n{display:none}
    .rows div{grid-template-columns:minmax(0,1fr) 56px 56px}
  .flow-stage{height:800px;border-radius:24px}
  .fp-vis{padding:72px 16px 0;align-items:flex-start}
  .fp-cap{padding:0 24px 28px}
  .fchip{transform-origin:0 0}

  .js .fp.on .fchip{transform:none}
}

/* control: ElevenLabs-style cards, picture on top, caption at the bottom */
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
.bc{position:relative;display:flex;flex-direction:column;min-height:560px;border-radius:28px;background:var(--soft);overflow:hidden}
.bc.c7{grid-column:span 7}.bc.c5{grid-column:span 5}
.bc .vis{position:relative;flex:1;display:flex;align-items:center;justify-content:center;padding:48px 32px 24px}
.bc .cap{position:relative;padding:0 36px 36px;max-width:520px}
.bc .cap h3{font-size:20px;font-weight:500;letter-spacing:-.015em}
.bc .cap p{font-size:15px;color:var(--muted);margin-top:8px}
.bc .ui{width:min(100%,420px);box-shadow:0 1px 2px var(--shadow-1),0 32px 64px -32px var(--shadow-3)}
.bc.dark{background:radial-gradient(45% 40% at 92% 0%,var(--glow-lime),transparent 70%),radial-gradient(60% 55% at 0% 0%,var(--vine),transparent 75%),var(--canopy);color:var(--cream)}
.bc.dark::after{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");opacity:.12;mix-blend-mode:overlay;pointer-events:none}
.bc.dark .cap h3{color:var(--cream)}
.bc.dark .cap p{color:var(--oncanopy)}
.talk{position:relative;z-index:1;display:flex;flex-direction:column;gap:12px;width:min(100%,440px)}
.tb{max-width:80%;padding:12px 18px;border-radius:22px;font-size:15px;line-height:1.4}
.tb.them{align-self:flex-end;border:1px solid var(--on-dark-line);background:var(--on-dark-ground);color:var(--cream)}
.tb.ai{align-self:flex-start;background:var(--paper);color:var(--ink)}
.tb.ok{align-self:flex-start;display:inline-flex;align-items:center;gap:12px;padding:8px 18px 8px 8px;border-radius:999px;background:var(--paper);color:var(--ink);font-weight:500}
.js .bc .tb{opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease),transform .6s var(--ease)}
.js .bc.in .tb{opacity:1;transform:none}
.js .bc.in .tb:nth-child(2){transition-delay:.5s}.js .bc.in .tb:nth-child(3){transition-delay:1s}.js .bc.in .tb:nth-child(4){transition-delay:1.5s}
.buyers .uh{margin-bottom:4px}
.buyers>div:not(.uh){display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line);font-size:14px}
.buyers .nm{flex:1;min-width:0}.buyers .nm small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.buyers div{border-color:var(--soft3)}
.buyers div:first-child{border-top:0}
.av{width:28px;height:28px;border-radius:50%;background:var(--soft2);display:grid;place-items:center;font-size:11px;font-weight:600;flex:none}
.buyers .nm{flex:1}.buyers .nm small{display:block;color:var(--muted);font-size:12px}
.pill{font-size:12px;font-weight:500;padding:4px 8px;border-radius:6px;background:var(--soft)}
.pill.ok{background:var(--ok-soft);color:var(--ok)}
.pill.dk{background:var(--ink);color:var(--paper)}
.chart{position:relative}
.chart .big{font-family:var(--serif);font-size:44px;letter-spacing:-.03em;line-height:1;margin:4px 0 12px;font-variant-numeric:tabular-nums}
.chart .big small{display:block;font-family:var(--font);font-size:13px;letter-spacing:0;color:var(--muted);margin-top:8px}
.ch{display:block;width:100%;height:auto;overflow:visible}
.ch .g{stroke:var(--line);stroke-width:1}
.ch .ar{fill:var(--ok-soft);fill-opacity:.55}
.ch .fl{stroke:var(--no);stroke-width:1.25;stroke-dasharray:4 4}
.ch .pl{fill:none;stroke:var(--vine);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.ch .dot{fill:var(--lime);stroke:var(--ink);stroke-width:1.5}
.ch .ax{font-family:var(--font);font-size:11px;fill:var(--faint)}
.tip{position:absolute;right:56px;top:104px;display:flex;flex-direction:column;padding:8px 12px;border-radius:10px;background:var(--paper);box-shadow:0 1px 2px var(--shadow-1),0 8px 24px -8px var(--shadow-3);font-size:12px}
.tip b{font-size:15px;font-weight:600}
.tip span{color:var(--muted)}
.js .ch .pl{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s var(--ease) .2s}
.js .ch .ar,.js .ch .dot,.js .chart .tip{opacity:0;transition:opacity .6s var(--ease) 1.2s}
.js .bc.in .ch .pl{stroke-dashoffset:0}
.js .bc.in .ch .ar,.js .bc.in .ch .dot,.js .bc.in .chart .tip{opacity:1}
@media (max-width:900px){
  .bc.c7,.bc.c5{grid-column:1/-1}
  .bc{min-height:0;border-radius:24px}
  .bc .vis{min-height:340px;padding:40px 20px 24px}
  .bc .cap{padding:0 24px 28px}
  .tip{right:40px;top:96px}
}
@media (prefers-reduced-motion:reduce){
  .js .ch .pl{stroke-dashoffset:0;transition:none}
  .js .ch .ar,.js .ch .dot,.js .chart .tip,.js .bc .tb{opacity:1;transform:none;transition:none}
  .js .fp .ui,.js .fp .fchip{transform:none;transition:none}
}

/* stock stories: ElevenLabs-style photo cards */
.cs-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:16px;height:720px}
.cs{position:relative;overflow:hidden;border-radius:28px;background:var(--photo)}
.cs-a{grid-row:span 2}.cs-b{grid-row:span 2}
.cs img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.cs:hover img{transform:scale(1.05)}
.cs::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,var(--cs-shade) 0%,var(--cs-shade2) 42%,transparent 68%);pointer-events:none}
.cs-t{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:28px;color:var(--cream)}
.cs-t h3{font-size:20px;font-weight:500;letter-spacing:-.015em;color:var(--cream)}
.cs-t p{font-size:15px;line-height:1.5;color:var(--oncanopy);margin-top:8px;max-width:420px}
.cs-c .cs-t,.cs-d .cs-t{padding:24px}
.cs-c .cs-t p,.cs-d .cs-t p{font-size:15px}
.cs-ui{position:absolute;z-index:1;left:50%;top:30%;transform:translate(-50%,-50%);width:min(78%,300px);padding:16px;border-radius:18px;background:var(--cs-glass);backdrop-filter:blur(14px);box-shadow:0 24px 48px -20px var(--cs-drop);color:var(--ink);font-size:13px;transition:transform .9s var(--ease)}
.cs:hover .cs-ui{transform:translate(-50%,calc(-50% - 6px))}
.cs:hover .cs-ui.sm{transform:translate(-50%,-6px)}
.cs-ui.sm{top:24px;transform:translateX(-50%);width:min(80%,280px);padding:14px}
.cu-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.cu-h b{font-weight:600}.cu-h span{color:var(--muted);font-size:12px}
.cu-lots{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.cu-lots i{font-style:normal;font-size:12px;padding:4px 10px;border-radius:999px;background:var(--soft2)}
.cu-lots i.more{background:var(--lime)}.cu-lots i.ok{background:var(--vine);color:var(--cream)}
.cu-f{margin-top:12px;font-size:12px;color:var(--muted)}
.cu-r{display:grid;grid-template-columns:64px minmax(0,1fr) 32px;align-items:center;gap:8px;margin-top:10px;font-size:12px}
.cu-r em{height:6px;border-radius:3px;background:var(--soft2);position:relative;overflow:hidden}
.cu-r em::after{content:"";position:absolute;inset:0;width:var(--w);border-radius:3px;background:var(--vine)}
.cu-r b{font-weight:600;text-align:right}
.cs-c .cs-ui.sm,.cs:hover .cs-c .cs-ui.sm{left:20px;width:min(58%,240px);transform:none}
.cs-c:hover .cs-ui.sm{transform:translateY(-6px)}
@media (prefers-reduced-motion:reduce){.cs-c:hover .cs-ui.sm{transform:none}}
@media (max-width:900px){.cs-c .cs-ui.sm,.cs-c:hover .cs-ui.sm{left:20px;width:min(58%,240px);transform:none}}
.cs-note{margin-top:20px;font-size:13px;color:var(--muted)}
@media (max-width:900px){
  .cs-grid{grid-template-columns:minmax(0,1fr);grid-template-rows:none;height:auto}
  .cs,.cs-a,.cs-b{grid-row:auto;height:420px;border-radius:24px}
  .cs-ui,.cs-ui.sm{top:24px;transform:translateX(-50%);width:min(84%,300px)}
  .cs:hover .cs-ui,.cs:hover .cs-ui.sm{transform:translateX(-50%)}
  .cs-t{padding:24px}
}
@media (prefers-reduced-motion:reduce){.cs img,.cs-ui{transition:none}.cs:hover img{transform:none}.cs:hover .cs-ui{transform:translate(-50%,-50%)}.cs:hover .cs-ui.sm{transform:translateX(-50%)}}

/* store row */
.store-top{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:56px}
.store-top .head{margin-bottom:0}
.rail{overflow:hidden;padding:4px 0}
.rail-t{display:flex;gap:16px;width:max-content;will-change:transform;padding-left:max(24px,calc((100vw - 1160px)/2 + 24px))}
.lc{width:300px;flex:none;border-radius:var(--r);background:var(--soft);padding:12px;transition:transform .4s var(--ease)}
.lc:hover{transform:translateY(-4px)}
.lc .im{aspect-ratio:4/3;border-radius:12px;background:var(--photo2) center/cover no-repeat;position:relative}
.lc .tag{position:absolute;top:12px;left:12px;font-size:12px;font-weight:500;background:var(--paper);padding:4px 8px;border-radius:6px}
.lc .tag.dk{background:var(--ink);color:var(--paper)}
.lc .b{padding:16px 8px 8px}
.lc .t{font-size:15px;font-weight:500;letter-spacing:-.01em}
.lc .m{font-size:13px;color:var(--muted);margin-top:4px;padding:0;max-width:none;border-radius:0;box-shadow:none;background:none}
.lc .p{display:flex;justify-content:space-between;align-items:center;margin-top:16px;font-size:13px}
.lc .p span:last-child{color:var(--muted)}
.lc.bundle .im{display:flex;flex-direction:column;justify-content:flex-end;padding:16px;background:var(--paper);gap:0}
.lc.bundle .im div{display:flex;justify-content:space-between;font-size:12px;padding:8px 0;border-top:1px solid var(--line)}
.lc.bundle .im div span:last-child{color:var(--muted);font-variant-numeric:tabular-nums}
.store-foot{margin-top:28px;font-size:13px;color:var(--muted)}
.caps{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;margin:0 0 48px;padding-top:24px;border-top:1px solid var(--line)}
.caps li{display:flex;flex-direction:column;gap:8px}
.caps b{font-size:16px;font-weight:600;letter-spacing:-.01em}
.caps b::before{content:"";display:block;width:12px;height:12px;border-radius:4px;background:var(--lime);box-shadow:inset 0 0 0 2px var(--ink);margin-bottom:12px}
.caps span{font-size:15px;color:var(--muted);line-height:1.5}
@media (max-width:900px){.caps{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px}}
@media (max-width:480px){.caps{grid-template-columns:minmax(0,1fr)}}
@media (max-width:720px){.store-top{flex-direction:column;align-items:flex-start;margin-bottom:40px}.lc{width:260px}}

/* how buyers order: offer or order, kept small */
.buy{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);align-items:center;gap:48px;margin-top:48px}
.buy-c h3{font-size:20px;font-weight:500;letter-spacing:-.015em;line-height:1.25;max-width:420px}
.buy-c p{font-size:15px;color:var(--muted);line-height:1.5;margin-top:10px;max-width:440px}
.bs-ui{display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:20px;background:var(--paper);border:1px solid var(--line);box-shadow:0 1px 2px var(--shadow-1),0 24px 48px -32px var(--shadow-3);font-size:14px}
.bs-lot{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:12px}
.bs-th{width:44px;height:44px;border-radius:10px;background:var(--photo2) url(lots/serum.jpg) center/cover}
.bs-lot b{display:block;font-weight:600}.bs-lot div span{font-size:13px;color:var(--muted)}
.bs-lot em{font-style:normal;font-size:17px;font-weight:600}.bs-lot small{font-size:12px;font-weight:400;color:var(--muted)}
.bs-acts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.bs-btn{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 16px;border-radius:999px;background:var(--ink);color:var(--paper);font-weight:500;white-space:nowrap}
.bs-btn.ol{background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 1px var(--dash)}
.bs-btn.lm{background:var(--lime);color:var(--ink);min-height:32px;padding:0 14px;font-size:13px}
.bs-st{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 8px 8px 12px;border-radius:12px;background:var(--soft2);font-size:13px;color:var(--ink2)}
@media (max-width:900px){.buy{grid-template-columns:minmax(0,1fr);gap:24px;margin-top:40px}}
@media (max-width:400px){.bs-lot{grid-template-columns:44px minmax(0,1fr)}.bs-lot em{grid-column:2}}

/* markets */
.mk{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.mk .card{min-height:300px;display:flex;flex-direction:column;gap:72px}
.mk .st.live{color:var(--vine);background:var(--ok-soft)}
.mk .st{display:inline-flex;align-items:center;font-size:13px;font-weight:500;padding:4px 8px;border-radius:6px;background:var(--paper);color:var(--ink2);align-self:flex-start}
.mk .st.live{color:var(--ok)}
.mk h3{font-size:20px;font-weight:500;letter-spacing:-.015em;margin-bottom:8px}
.mk p{color:var(--muted);font-size:15px}
.mk .w{font-size:13px;color:var(--ink2);margin-top:16px}
.mk-note{margin-top:28px;font-size:13px;color:var(--muted);text-align:center}
@media (max-width:900px){.mk{grid-template-columns:1fr}.mk .card{min-height:0;gap:32px}}

/* growth path, inside the sign-up section */
.grow{margin-top:48px;padding-top:28px;border-top:1px solid var(--soft3)}
.grow h3{font-size:20px;font-weight:500;letter-spacing:-.015em;margin-bottom:20px}
.path{list-style:none;position:relative;display:flex;flex-direction:column;gap:20px;padding-left:28px}
.path::before{content:"";position:absolute;left:5px;top:8px;bottom:8px;width:2px;background:var(--soft3);border-radius:2px}
.path .ln{display:none}
.path .s{position:relative;display:flex;flex-direction:column;gap:4px;font-size:15px}
.path .s::before{content:"";position:absolute;left:-28px;top:5px;width:12px;height:12px;border-radius:50%;background:var(--paper);border:2px solid var(--edge);transition:background .4s,border-color .4s}
.path .s.on::before{background:var(--lime);border-color:var(--ink)}
.path .s b{font-weight:600}
.path .s span{color:var(--muted);font-size:14px}
/* faq */
.faq{display:grid;grid-template-columns:1fr 1.5fr;gap:72px;align-items:start}
.faq .head{position:sticky;top:120px;margin-bottom:0}
.faq .head .tlink{margin-top:24px}
.qa details{border-top:1px solid var(--line)}
.qa details:last-child{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 0;font-size:17px;font-weight:500;letter-spacing:-.015em;cursor:pointer}
.qa summary::-webkit-details-marker{display:none}
.qa summary i{flex:none;width:14px;height:14px;position:relative}
.qa summary i::before,.qa summary i::after{content:"";position:absolute;left:0;right:0;top:6px;height:1.5px;background:var(--ink);transition:transform .35s var(--ease)}
.qa summary i::after{transform:rotate(90deg)}
.qa details[open] summary i::after{transform:rotate(0)}
.qa .a{overflow:hidden}
.qa .a p{color:var(--muted);padding:0 40px 24px 0;max-width:620px}
.qa .grp{font-size:14px;font-weight:500;letter-spacing:0;color:var(--muted);margin:40px 0 8px;line-height:1.4}
.qa .grp:first-child{margin-top:0}
@media (max-width:900px){.faq{grid-template-columns:1fr;gap:40px}.faq .head{position:static}}

/* cta + form */
.cta{border-radius:32px;background:var(--soft);padding:72px;display:grid;grid-template-columns:1fr 1fr;gap:64px;position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;inset:0;background:radial-gradient(50% 70% at 0% 0%,var(--glow-lime),transparent 60%);pointer-events:none}
.cta>*{position:relative}
.cta h2{max-width:10ch}
.cta .lede{margin-top:20px}
.cta .tlink{margin-top:28px}
.lf{display:flex;flex-direction:column;gap:16px}
.role{display:grid;grid-template-columns:1fr 1fr;background:var(--soft3);border-radius:999px;padding:4px}
.role input{position:absolute;opacity:0;pointer-events:none}
.role label{text-align:center;font-size:14px;font-weight:500;padding:8px;border-radius:999px;cursor:pointer;color:var(--ink2);transition:background .25s,color .25s}
.role input:checked+label{background:var(--paper);color:var(--ink);box-shadow:0 1px 3px var(--shadow-seg)}
.role input:focus-visible+label{outline:2px solid var(--ink);outline-offset:1px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.f{display:flex;flex-direction:column;gap:8px;font-size:13px;font-weight:500;color:var(--ink2)}
.f input,.f textarea{font:inherit;font-size:16px;font-weight:400;color:var(--ink);border:1px solid var(--edge);background:var(--paper);border-radius:10px;padding:12px;min-height:48px}
.f textarea{min-height:88px;resize:vertical}
.f input:focus-visible,.f textarea:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.lf .btn{height:48px;width:100%}
.lf .btn:disabled{background:var(--soft3);color:var(--ink2);cursor:not-allowed}
.fine{font-size:13px;color:var(--muted);text-align:center}
.hp{position:absolute;left:-9999px}
.msg{font-size:14px;text-align:center;padding:8px;border-radius:10px}
.msg.ok{background:var(--ok-soft);color:var(--ok)}
.msg.err{background:var(--no-soft);color:var(--no)}
@media (max-width:900px){.cta{grid-template-columns:1fr;padding:40px 20px 20px;gap:36px;border-radius:24px}}
@media (max-width:480px){.row2{grid-template-columns:1fr}}

/* footer */
.foot{padding:96px 0 40px}
.foot.dark{background:var(--canopy);color:var(--oncanopy)}
.foot.dark .brand p{color:var(--oncanopy)}
.foot.dark .brand .line{font-family:var(--serif);font-size:clamp(28px,3vw,36px);line-height:1.15;letter-spacing:-.02em;color:var(--cream);max-width:12ch;margin-top:28px}
.foot.dark h2{color:var(--oncanopy)}
.foot.dark ul a{color:var(--cream)}
.foot.dark ul a:hover{color:var(--lime)}
.foot.dark .bot{border-color:var(--canopyline);color:var(--oncanopy)}
.foot.dark :focus-visible{outline-color:var(--lime)}
.foot .top{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:64px}
.foot .brand img{height:24px;width:auto}
.foot .brand p{margin-top:16px;color:var(--muted);font-size:15px;max-width:280px}
.foot h2{letter-spacing:0;line-height:1.4;font-size:13px;font-weight:500;color:var(--muted);margin-bottom:16px}
.foot ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.foot ul a{font-size:14px;text-decoration:none;color:var(--ink2);white-space:nowrap}
.foot ul a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.foot .bot{margin-top:72px;padding-top:24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
@media (max-width:820px){.foot .top{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 24px}.foot .brand{grid-column:1/-1}}

/* motion: reveal on scroll (only when JS runs and motion is allowed) */
.js [data-a]{opacity:0;transform:translateY(28px);filter:blur(8px);transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease);transition-delay:var(--d,0s)}
.js [data-a].in{opacity:1;transform:none;filter:none}
.js .split .w>span{opacity:0;transform:translateY(.45em);filter:blur(10px);transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease);transition-delay:calc(var(--i)*55ms + .05s)}
.js .split.in .w>span{opacity:1;transform:none;filter:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js [data-a],.js .split .w>span,.js .ag-res li.new{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
  .rail-t{transform:none!important}
  .js .tk.ready .tk-t{animation:none}
  .agent .eq i,.ag-steps li.now::before,.caret{animation:none!important}
}

/* phone tap targets: 44px for every link and control */
@media (max-width:900px){
  .logo{display:inline-flex;align-items:center;min-height:44px}
  .burger{width:44px;height:44px}
  .announce,.tlink{display:inline-flex;align-items:center;min-height:44px}
  .role label{padding:12px 8px}
  .foot ul{gap:0}
  .foot ul a{display:inline-flex;align-items:center;min-height:44px}
  .qa summary{min-height:56px}
}
/* type scale on phones: every card title 18px */
@media (max-width:600px){.fp-cap h3,.bc .cap h3,.cs-t h3,.buy-c h3,.grow h3,.mk h3{font-size:18px}}