/* ============================================================
   Finnoto Home — dedicated stylesheet for the restructured
   homepage (design handoff: "Finnoto Home.dc.html").
   This page uses its own fixed dark/light section rhythm and
   does not participate in the sitewide dark/light toggle —
   every rule here is scoped under .hp- prefixed classes so it
   never collides with finnoto.css / finnoto-light.css.
   ============================================================ */

:root{
  --hp-bg:#050505;
  --hp-panel:#0a0c0b;
  --hp-panel-2:#0d0f0e;
  --hp-panel-3:#0f1010;
  --hp-white:#fff;
  --hp-ltext:#101413;
  --hp-lbody:#5d6664;
  --hp-lsmall:#3c4443;
  --hp-lborder:#e6e8e8;
  --hp-lmuted:#f4f6f5;
  --hp-lmuted-2:#f7f8f8;
  --hp-lmuted-3:#f2f4f3;
  --hp-green:#3df0b3;
  --hp-green-on:#05201a;
  --hp-green-good-text:#0d3b2c;
  --hp-green-good-bg:#daf6ea;
  --hp-amber-1:#8a4a25;
  --hp-amber-2:#8a5f13;
  --hp-orange:#f0a274;
  --hp-orange-bg:rgba(240,162,116,.14);
  --hp-orange-bad:#ef6a5a;
  --hp-orange-bad-bg:rgba(239,106,90,.14);
  --hp-dtext-1:#a6b0ae;
  --hp-dtext-2:#8d9795;
  --hp-dtext-3:#c3ccca;
  --hp-dtext-4:#7f8987;
  --hp-dtext-5:#6f7977;
  --hp-darkgreen:#2b7d61;
  --hp-jn-amazon:#4f8cff;
  --hp-jn-finnoto:#7c6cf6;
  --hp-jn-tpl:#b39ddb;

  /* Section-header spacing rhythm — use these for every section badge/heading/subheading
     combo so the vertical rhythm stays identical across the page. Do not hand-roll
     one-off margins for eyebrow/heading/lead spacing; see the "SECTION HEADER SPACING"
     rule below and the note in CLAUDE.md before adding a new section. */
  --hp-space-badge-heading:16px;  /* eyebrow/badge -> heading */
  --hp-space-heading-lead:20px;   /* heading -> subheading/lead paragraph */
  --hp-space-head-content:40px;   /* subheading -> the content below it (grid/cards/list) */
}

.hp *{box-sizing:border-box}
.hp{background:var(--hp-white);color:#eef2f1;font-family:'Inter',system-ui,sans-serif;overflow-x:clip}
.hp img{max-width:none}
.hp a,.hp a:hover,.hp a:focus,.hp a:active{color:var(--hp-green);text-decoration:none!important}
.hp h1,.hp h2,.hp h3{font-family:'Geist',system-ui,sans-serif;font-weight:600}

@keyframes hpMarq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes hpMarqR{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@keyframes hpBar{from{width:0}to{width:100%}}
@keyframes hpPulse{0%,100%{opacity:.4}50%{opacity:1}}
@keyframes hpVert{from{transform:translateY(0)}to{transform:translateY(-50%)}}

/* ---------- NAV ---------- */
.hp-nav{position:fixed;top:0;left:0;right:0;z-index:90;padding:16px 40px 0}
.hp-nav-inner{max-width:1140px;margin:0 auto;height:62px;padding:0 12px 0 20px;border-radius:999px;background:rgba(12,14,13,.58);backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);border:1px solid rgba(255,255,255,.1);box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 24px 50px -34px rgba(0,0,0,.95);display:flex;align-items:center;justify-content:space-between;gap:12px;position:relative}
.hp-nav-left{display:flex;align-items:center;gap:14px;min-width:0}
/* `.hp a` (line ~51) is specificity (0,1,1) and beats a bare `.hp-logo`
   (0,1,0), which is why the nav wordmark rendered brand-green instead of
   white. Qualify the selector so it outranks it — the mark itself is an
   SVG with its own fill, so only the "Finnoto" text is affected. */
.hp a.hp-logo,.hp a.hp-logo:hover,.hp a.hp-logo:focus{color:#fff}
.hp-logo{display:flex;align-items:center;gap:8px;color:#fff;font-family:'Geist',system-ui,sans-serif;font-weight:600;font-size:18px;letter-spacing:-.02em}
.hp-logo img{width:24px;height:24px;flex-shrink:0}
.hp-logo-mark{width:24px;height:24px;flex-shrink:0;border-radius:7px;background:var(--hp-green);color:var(--hp-green-on,#04170f);font-family:'Geist',system-ui,sans-serif;font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center}
a.hp-btn-outline-sm{font-size:13.5px;font-weight:600;color:#dfe5e4;border:1px solid transparent;padding:9px 14px;border-radius:999px;white-space:nowrap;transition:background .18s ease,color .18s ease;display:inline-block}
.hp-btn-outline-sm:hover{background:rgba(255,255,255,.09);color:#fff}
/* the nav's Book a Demo button shares the .hp-btn-green class with a much
   larger button used in the Platform Overview section further down this
   file; that later rule was winning on source order and inflating the nav
   button's height above Explore Platform's. Scope it back down here. */
.hp-navcta a.hp-btn-green{padding:10px 15px;font-size:13.5px}
.hp-navlinks{display:flex;align-items:center;justify-content:center;gap:2px;font-size:13px;min-width:0;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.hp-navitem{position:relative}
.hp-navlink{display:inline-flex;align-items:center;gap:6px;padding:8px 11px;border-radius:999px;white-space:nowrap;color:var(--hp-dtext-3);background:transparent;transition:background .18s ease,color .18s ease;cursor:pointer;border:0;font:inherit;font-size:13px}
.hp-navitem.open .hp-navlink,.hp-navlink:hover{color:#fff;background:rgba(255,255,255,.08)}
.hp-caret{display:inline-flex;align-items:center;color:var(--hp-dtext-1);transition:transform .18s ease,color .18s ease}
.hp-caret svg{width:11px;height:11px;display:block}
.hp-navitem.open .hp-caret{transform:rotate(180deg);color:var(--hp-green)}
@media(max-width:640px){.hp-nav{padding:14px 16px 0}}
.hp-dropdown{box-sizing:border-box;font-family:'Inter',system-ui,sans-serif;position:fixed;top:0;left:0;min-width:280px;padding:10px;border-radius:14px;background:rgba(12,14,13,.68);backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);border:1px solid rgba(255,255,255,.1);box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 26px 50px -24px rgba(0,0,0,.9);display:flex;flex-direction:column;gap:2px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s ease,transform .18s ease,visibility .18s;z-index:120;pointer-events:none}
.hp-dropdown *{box-sizing:border-box}
.hp-dropdown.open{pointer-events:auto;opacity:1;visibility:visible;transform:translateY(0)}
.hp-dropdown a{display:block;padding:9px 12px;border-radius:9px;font-size:13.5px;color:var(--hp-dtext-3);text-decoration:none;transition:background .15s,color .15s}
.hp-dropdown a:hover{background:rgba(255,255,255,.06);color:#fff}
.hp-dropdown .hp-note{display:block;font-size:11.5px;color:var(--hp-dtext-4);margin-top:2px}

/* mega menu (Revenue OS / Accounts Payable / Resources) — compact card grid, no icons */
.hp-dropdown.hp-mega{display:block;width:520px;max-width:calc(100vw - 32px);padding:16px}
.hp-dropdown.hp-mega.hp-mega-narrow{width:320px}
.hp-mega-label{display:none}
.hp-mega-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hp-mega-list{display:flex;flex-direction:column;gap:8px}
a.hp-mega-item{display:block;padding:16px 16px;border-radius:14px;background:rgba(255,255,255,.05);color:inherit;transition:background .15s}
.hp-mega-item:hover{background:rgba(255,255,255,.09)}
.hp-mega-item .t{display:block;font-size:15px;font-weight:600;color:#fff;line-height:1.25;margin-bottom:6px}
.hp-mega-item .s{display:block;font-size:12.5px;color:var(--hp-dtext-2);line-height:1.35;transition:color .15s}
.hp-mega-item:hover .s{color:var(--hp-dtext-3)}
.hp-mega-feature{grid-column:1/-1;background:rgba(61,240,179,.08)}
.hp-mega-feature:hover{background:rgba(61,240,179,.13)}
a.hp-mega-cta{display:flex;align-items:center;justify-content:center;gap:6px;margin:14px 2px 2px;padding-top:0;border-top:0;font-size:14px;font-weight:600;color:var(--hp-green);border-radius:0}
a.hp-mega-cta:hover{background:none;color:var(--hp-green)}
@media(max-width:700px){.hp-dropdown.hp-mega,.hp-dropdown.hp-mega.hp-mega-narrow{width:calc(100vw - 32px)}}

/* mega menu — sectioned split (Revenue OS): left list w/ category labels, right live preview */
.hp-dropdown.hp-mega.hp-mega-split{display:flex;flex-direction:row;width:478px;height:289px;max-width:calc(100vw - 32px);padding:0;gap:0;overflow:hidden}
.hp-mega-side{flex:0 0 200px;padding:12px;display:flex;flex-direction:column;gap:10px}
.hp-mega-col{display:flex;flex-direction:column;gap:1px}
.hp-mega-cat{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--hp-dtext-4);padding:4px 12px 6px;font-family:'Geist',system-ui,sans-serif}
a.hp-mega-side-item{display:block;padding:9px 12px;border-radius:6px;font-size:13.5px;font-weight:500;color:var(--hp-dtext-3);text-decoration:none;transition:background .15s,color .15s;white-space:nowrap}
.hp-mega-side-item:hover,.hp-mega-side-item.active{background:rgba(255,255,255,.08);color:#fff}
.hp-mega-preview{flex:1;padding:18px 20px;display:flex;flex-direction:column;min-width:0}
.hp-mega-preview-eyebrow{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--hp-green);margin-bottom:9px;font-family:'Geist',system-ui,sans-serif}
.hp-mega-preview-title{font-size:18px;font-weight:600;color:#fff;line-height:1.3;font-family:'Geist',system-ui,sans-serif;margin-bottom:7px}
.hp-mega-preview-desc{font-size:13.5px;line-height:1.6;color:var(--hp-dtext-2);margin:0;max-width:240px}
.hp-mega-preview a.hp-mega-cta{justify-content:flex-start;margin:14px 0 0 0;margin-top:auto;padding:0}
@media(max-width:700px){.hp-dropdown.hp-mega.hp-mega-split{width:calc(100vw - 32px);height:auto;flex-direction:column}.hp-mega-side{flex:none;border-right:0;border-bottom:1px solid rgba(255,255,255,.08);flex-direction:row;flex-wrap:wrap}}
a.hp-navlink-plain{color:var(--hp-dtext-3);padding:8px 11px;border-radius:999px;white-space:nowrap;transition:background .18s ease,color .18s ease}
.hp-navlink-plain:hover{background:rgba(255,255,255,.07);color:#fff}
.hp-navcta{display:flex;align-items:center;gap:6px;justify-content:flex-end;min-width:0}
a.hp-btn-text{font-size:13.5px;font-weight:600;color:#dfe5e4;padding:9px 12px;border-radius:999px;white-space:nowrap;transition:background .18s ease}
.hp-btn-text:hover{background:rgba(255,255,255,.09);color:#fff}
a.hp-btn-green{font-size:13.5px;font-weight:600;color:var(--hp-green-on);background:var(--hp-green);padding:10px 15px;border-radius:999px;white-space:nowrap;display:inline-block;border:0;cursor:pointer;transition:background .18s ease}
.hp a.hp-btn-green:hover{color:var(--hp-green-on);background:#68f5c9}
.hp-menu-btn{display:none;background:rgba(255,255,255,.07);border:0;color:#fff;cursor:pointer;width:44px;height:44px;border-radius:50%;align-items:center;justify-content:center;transition:background .18s ease}
.hp-menu-btn:hover{background:rgba(255,255,255,.12)}
.hp-menu-btn svg{width:17px;height:17px;display:block}
@media(max-width:920px){
  .hp-navlinks{display:none}
  .hp-navcta .hp-btn-text,.hp-navcta .hp-btn-green,.hp-navcta .hp-btn-outline-sm{display:none}
  .hp-menu-btn{display:grid;place-items:center}
}
.hp.nav-open .hp-mobile-panel{display:flex}
.hp-mobile-panel{display:none;position:fixed;top:78px;left:20px;right:20px;flex-direction:column;gap:4px;background:rgba(12,14,13,.68);backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:14px;z-index:89;box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 26px 50px -24px rgba(0,0,0,.9);max-height:calc(100vh - 100px);overflow:auto}
.hp-macc{border-bottom:1px solid rgba(255,255,255,.08)}
.hp-macc:last-of-type{border-bottom:0}
.hp-macc-head{width:100%;display:flex;align-items:center;justify-content:space-between;background:none;border:0;padding:16px 12px;color:#fff;font-size:15px;font-weight:600;font-family:'Geist',system-ui,sans-serif;cursor:pointer}
.hp-macc-head .hp-caret{transition:transform .2s ease;color:var(--hp-dtext-2);display:inline-flex;align-items:center}
.hp-macc-head .hp-caret svg{width:11px;height:11px;display:block}
.hp-macc.open .hp-macc-head .hp-caret{transform:rotate(180deg);color:var(--hp-green)}
.hp-macc-body{display:none;flex-direction:column;padding:0 12px 10px;max-height:220px;overflow-y:auto}
.hp-macc.open .hp-macc-body{display:flex}
.hp-macc-body a{padding:9px 8px;border-radius:8px;color:var(--hp-dtext-3);font-size:14px}
.hp-macc-body a:hover{background:rgba(255,255,255,.06);color:#fff}
.hp-mobile-panel-cta{display:flex;flex-direction:column;gap:10px;padding:14px 12px 4px}
.hp-mobile-panel-cta a{text-align:center;width:100%}

/* ---------- HERO ---------- */
.hp-hero{padding:96px 0 56px;border-radius:0 0 36px 36px;background:radial-gradient(1000px 480px at 82% 2%,rgba(61,240,179,.06),transparent 62%),var(--hp-bg)}
.hp-hero-grid{max-width:1280px;margin:0 auto;padding:40px 40px;display:grid;grid-template-columns:1fr .95fr;gap:72px;align-items:center}
.hp-hero-grid--single{grid-template-columns:1fr;max-width:820px;text-align:center}
.hp-hero-grid--single .hp-h1-line{white-space:normal}
.hp-hero-grid--single .hp-hero-sub{margin-left:auto;margin-right:auto}
.hp-hero-grid--single .cs-meta{justify-content:center}
.hp-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--hp-green);margin-bottom:var(--hp-space-badge-heading)}
.hp-h1{font-size:clamp(26px,7.6vw,55px);line-height:1.05;letter-spacing:-.035em;margin:0 0 var(--hp-space-heading-lead);color:#fff}
.hp-h1-line{display:block;white-space:nowrap}
@media(max-width:480px){.hp-hero-grid{padding:40px 20px}}
.hp-hero-sub{font-size:17px;line-height:1.6;color:var(--hp-dtext-1);margin:0 0 12px;max-width:490px;text-wrap:pretty}
.hp-hero-note{font-size:14px;color:var(--hp-dtext-3);margin:0 0 28px}
.hp-h1-accent{color:var(--hp-green)}
.hp-hero-cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
a.hp-btn-outline{font-size:14px;font-weight:600;color:#dfe5e4;border:1px solid rgba(255,255,255,.2);padding:12px 24px;border-radius:999px;white-space:nowrap;transition:background .18s ease;display:inline-block}
.hp-btn-outline:hover{background:rgba(255,255,255,.09);color:#fff}
a.hp-btn-green-lg{font-size:14px;font-weight:600;color:var(--hp-green-on);background:var(--hp-green);padding:13px 25px;border-radius:999px;white-space:nowrap;display:inline-block;transition:background .18s ease}
.hp a.hp-btn-green-lg:hover{color:var(--hp-green-on);background:#68f5c9}

.hp-ledger{border-radius:16px;background:var(--hp-panel);box-shadow:0 30px 60px -34px rgba(0,0,0,.95);overflow:hidden;max-width:560px;justify-self:end;width:100%}
.hp-ledger-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:rgba(255,255,255,.02)}
.hp-ledger-dots{display:flex;gap:5px}
.hp-ledger-dots span{width:8px;height:8px;border-radius:50%;background:#3a3f3d;display:block}
.hp-ledger-title{font-size:12px;color:var(--hp-dtext-2);margin-left:6px;white-space:nowrap}
.hp-ledger-live{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:600;letter-spacing:.12em;color:var(--hp-green)}
.hp-ledger-live i{width:6px;height:6px;border-radius:50%;background:var(--hp-green);display:block;animation:hpPulse 1.8s ease-in-out infinite}
.hp-ledger-body{height:330px;overflow:hidden;position:relative;padding:0 14px;mask-image:linear-gradient(180deg,transparent,#000 10%,#000 88%,transparent);-webkit-mask-image:linear-gradient(180deg,transparent,#000 10%,#000 88%,transparent)}
.hp-ledger-feed{display:flex;flex-direction:column;gap:8px;padding:14px 0;width:max-content;min-width:100%;animation:hpVert 24s linear infinite}
.hp-feed-row{background:rgba(255,255,255,.03);border-radius:12px;padding:14px 16px;display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;width:100%}
.hp-feed-row .k{font-size:13px;color:var(--hp-dtext-3)}
.hp-feed-row .s{font-size:11px;color:var(--hp-dtext-4);margin-top:3px}
.hp-feed-row .v{font-size:11.5px;font-weight:600;color:var(--hp-green);background:rgba(61,240,179,.12);border-radius:999px;padding:5px 10px;white-space:nowrap}

/* Payout-control ledger variant (orange accent, icon rows, banner) — accounts-payable hero */
.hp-ledger--payout .hp-ledger-body{height:auto;overflow:visible;mask-image:none;-webkit-mask-image:none}
.hp-ledger--payout .hp-ledger-feed{width:100%;min-width:0;animation:none;padding:14px 0 18px}
.hp-ledger--payout .hp-ledger-live{color:var(--hp-orange)}
.hp-ledger--payout .hp-ledger-live i{background:var(--hp-orange)}
.hp-ledger--payout .hp-feed-amt{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:16px 18px;margin-bottom:2px}
.hp-ledger--payout .hp-feed-amt .k{font-family:'Geist',system-ui,sans-serif;font-weight:700;font-size:23px;color:#fff}
.hp-ledger--payout .hp-feed-amt .s{font-size:11.5px;color:var(--hp-dtext-4);margin-top:4px}
.hp-ledger--payout .hp-feed-row{grid-template-columns:auto 1fr auto;animation:hpAutoRow 7.2s ease-in-out infinite}
.hp-ledger--payout .hp-feed-row .v{color:var(--hp-orange);background:var(--hp-orange-bg);text-transform:uppercase;letter-spacing:.03em;font-size:10.5px}
.hp-ledger--payout .hp-feed-row.bad .v{color:var(--hp-orange-bad);background:var(--hp-orange-bad-bg)}
@keyframes hpAutoRow{0%{opacity:1}10%{opacity:1}14%{opacity:.45}100%{opacity:.45}}
.hp-feed-ico{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;border:1.5px solid var(--hp-orange);color:var(--hp-orange);opacity:0;transform:scale(.6)}
.hp-feed-ico svg{width:13px;height:13px}
.hp-ledger--payout .hp-feed-row .hp-feed-ico{animation:hpAutoIco 7.2s ease-in-out infinite;animation-delay:inherit}
@keyframes hpAutoIco{0%{opacity:1;transform:scale(1)}10%{opacity:1;transform:scale(1)}14%{opacity:0;transform:scale(.6)}100%{opacity:0;transform:scale(.6)}}
.hp-ledger--payout .hp-feed-row.bad .hp-feed-ico{border-color:var(--hp-orange-bad);color:var(--hp-orange-bad)}
.hp-feed-banner{position:relative;display:flex;align-items:center;gap:10px;background:linear-gradient(135deg,var(--hp-orange),#e88a5c);color:#241207;font-weight:700;font-size:13px;border-radius:12px;padding:14px 16px;width:100%;overflow:hidden}
.hp-feed-banner svg{width:16px;height:16px;flex-shrink:0;position:relative;z-index:1}
.hp-feed-banner span{position:relative;z-index:1}
.hp-feed-banner::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.55),transparent)}
.hp-ledger--payout .hp-feed-banner::after{animation:hpShine 7.2s ease-in-out infinite}
@keyframes hpShine{0%,73%{left:-60%}88%{left:120%}100%{left:120%}}
@media(prefers-reduced-motion:reduce){.hp-ledger--payout .hp-feed-row,.hp-ledger--payout .hp-feed-row .hp-feed-ico,.hp-ledger--payout .hp-feed-banner::after{animation:none}.hp-ledger--payout .hp-feed-row{opacity:1}.hp-ledger--payout .hp-feed-row .hp-feed-ico{opacity:1;transform:scale(1)}}

/* Disbursement engine hero widget (bulk-payouts) */
.hp-disb .hp-ledger-body{display:none}
.hp-disb-body{padding:18px 20px 22px}
.hp-disb-amt .k{font-weight:700;font-size:34px;color:#fff;line-height:1.1}
.hp-disb-amt .s{font-size:12.5px;color:var(--hp-dtext-2);margin-top:6px}
.hp-disb-amt .s b{color:var(--hp-green);font-weight:600}
.hp-disb-rails{display:flex;align-items:center;gap:18px;margin-top:26px}
.hp-disb-icon{width:48px;height:48px;border-radius:14px;background:var(--hp-green);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.hp-disb-list{flex:1;display:flex;flex-direction:column;gap:16px;min-width:0}
.hp-disb-row{display:grid;grid-template-columns:44px 1fr 14px;align-items:center;gap:12px;color:var(--hp-green)}
.hp-disb-row .rail{font-size:11px;font-weight:700;letter-spacing:.06em;color:currentColor}
.hp-disb-track{position:relative;height:2px;background:rgba(255,255,255,.1);border-radius:2px;overflow:hidden}
.hp-disb-track .fill{position:absolute;top:0;left:0;height:100%;border-radius:2px;background:currentColor;opacity:.9;width:0;animation:hpDisbFill var(--t) ease-in-out infinite;animation-delay:var(--d)}
@keyframes hpDisbFill{0%{width:0}50%{width:var(--w)}100%{width:0}}
.hp-disb-dot{width:12px;height:12px;border-radius:50%;border:2px solid currentColor;background:var(--hp-panel);flex-shrink:0}
.hp-disb-foot{display:flex;align-items:center;gap:8px;margin-top:22px;padding-top:16px;border-top:1px solid rgba(255,255,255,.08);font-size:11.5px;color:var(--hp-dtext-2)}
.hp-disb-foot b{color:var(--hp-dtext-3);font-weight:600}
@media(prefers-reduced-motion:reduce){.hp-disb-track .fill{animation:none;width:var(--w)}}

/* Order descent hero widget (revenue-execution) — spine of 6 stations,
   a token travels down from source cards into the settlement tray */
.hp-rx .hp-ledger-body{display:none}
.hp-rx-body{padding:14px 18px 15px}
.hp-rx-src{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:11px}
.hp-rx-s{border-radius:10px;padding:9px 6px;text-align:center;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);transition:border-color .5s ease,box-shadow .5s ease}
.hp-rx-s .sn{font-family:'Geist',system-ui,sans-serif;font-size:10.5px;font-weight:700;color:#fff;letter-spacing:-.01em;transition:color .5s ease}
.hp-rx-s .sd{font-size:7.5px;color:var(--hp-dtext-4);margin-top:2px;letter-spacing:.04em}
.hp-rx-s.ping{border-color:rgba(61,240,179,.5);box-shadow:0 0 18px -4px rgba(61,240,179,.4)}
.hp-rx-s.ping .sn{color:var(--hp-green)}
.hp-rx-lane{position:relative;padding:2px 0 6px}
.hp-rx-lane::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;transform:translateX(-.5px);background:linear-gradient(180deg,rgba(61,240,179,.5),rgba(61,240,179,.12))}
.hp-rx-drip{position:absolute;left:50%;top:0;width:4px;height:4px;border-radius:50%;transform:translate(-50%,-50%);background:var(--hp-green);opacity:0;box-shadow:0 0 8px rgba(61,240,179,.7);animation:hpRxDrip linear infinite}
@keyframes hpRxDrip{0%{top:0;opacity:0}8%{opacity:.6}92%{opacity:.6}100%{top:100%;opacity:0}}
.hp-rx-st{position:relative;display:grid;grid-template-columns:1fr 40px 1fr;align-items:center;padding:2px 0}
.hp-rx-st .med{grid-column:2;justify-self:center;z-index:2;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--hp-dtext-4);background:var(--hp-bg);border:1px solid rgba(255,255,255,.1);box-shadow:0 0 0 4px var(--hp-bg);transition:color .5s,border-color .5s,box-shadow .5s}
.hp-rx-st .med svg{width:13px;height:13px}
.hp-rx-st.active .med{color:var(--hp-green);border-color:rgba(61,240,179,.6);box-shadow:0 0 0 4px var(--hp-bg),0 0 18px rgba(61,240,179,.45)}
.hp-rx-st.done .med{color:var(--hp-green);border-color:rgba(61,240,179,.4)}
.hp-rx-st .card{border-radius:10px;padding:7px 10px;max-width:100%;background:var(--hp-panel-2);border:1px solid rgba(255,255,255,.08);box-shadow:0 14px 30px -22px rgba(0,0,0,.9);opacity:.55;transition:opacity .5s ease,border-color .5s ease,box-shadow .5s ease}
.hp-rx-st:nth-of-type(odd) .card{grid-column:1;justify-self:end;text-align:center}
.hp-rx-st:nth-of-type(even) .card{grid-column:3;justify-self:start;text-align:center}
.hp-rx-st.active .card{opacity:1;border-color:rgba(61,240,179,.5);box-shadow:0 14px 34px -20px rgba(0,0,0,.9),0 0 22px -6px rgba(61,240,179,.35)}
.hp-rx-st.done .card{opacity:.85;border-color:rgba(61,240,179,.3)}
.hp-rx-st .card .t{font-family:'Geist',system-ui,sans-serif;font-size:12px;font-weight:600;color:#fff;letter-spacing:-.015em;line-height:1.2}
.hp-rx-st .card .s{font-size:9px;color:var(--hp-dtext-4);margin-top:1px;letter-spacing:.03em}
.hp-rx-st .chips{display:flex;gap:3px;margin-top:4px;flex-wrap:wrap;justify-content:center}
.hp-rx-st .chips i{font-style:normal;font-size:7.5px;font-weight:700;letter-spacing:.03em;padding:2px 6px;border-radius:999px;white-space:nowrap;color:var(--hp-dtext-4);border:1px solid rgba(255,255,255,.08);opacity:0;transform:translateY(3px);transition:opacity .4s ease,transform .4s ease,color .4s,border-color .4s}
.hp-rx-st.active .chips i,.hp-rx-st.done .chips i{opacity:1;transform:none}
.hp-rx-st.active .chips i{color:var(--hp-green);border-color:rgba(61,240,179,.4)}
.hp-rx-st.done .chips i{color:var(--hp-green);border-color:rgba(61,240,179,.28)}
.hp-rx-st .chips i:nth-child(1){transition-delay:.05s}
.hp-rx-st .chips i:nth-child(2){transition-delay:.2s}
.hp-rx-st .chips i:nth-child(3){transition-delay:.35s}
.hp-rx-st .chips i:nth-child(4){transition-delay:.5s}
.hp-rx-tok{position:absolute;left:50%;z-index:3;transform:translate(-50%,-50%);display:flex;align-items:center;gap:6px;border-radius:999px;padding:6px 11px;white-space:nowrap;background:linear-gradient(155deg,rgba(20,26,24,.97),rgba(10,14,12,.97));border:1px solid rgba(61,240,179,.45);box-shadow:0 10px 30px -8px rgba(0,0,0,.8),0 0 22px -4px rgba(61,240,179,.4);opacity:0;transition:transform .45s cubic-bezier(.32,.72,0,1)}
.hp-rx-tok.sl{transform:translate(calc(-100% - 18px),-50%)}
.hp-rx-tok.sr{transform:translate(18px,-50%)}
.hp-rx-tok .b{font-family:'Geist',system-ui,sans-serif;font-size:8px;font-weight:800;letter-spacing:.05em;padding:2px 6px;border-radius:999px;color:var(--hp-green);background:rgba(61,240,179,.14);border:1px solid rgba(61,240,179,.35)}
.hp-rx-tok .l{font-size:9.5px;font-weight:600;color:#fff;letter-spacing:-.005em}
.hp-rx-tok.fin{border-color:rgba(61,240,179,.7);box-shadow:0 10px 30px -8px rgba(0,0,0,.8),0 0 22px -4px rgba(61,240,179,.6)}
.hp-rx-tray{display:flex;align-items:center;gap:10px;margin-top:11px;border-radius:12px;padding:10px 14px;background:rgba(61,240,179,.06);border:1px solid rgba(61,240,179,.28);transition:border-color .4s ease,box-shadow .4s ease}
.hp-rx-tray.land{border-color:rgba(61,240,179,.65);box-shadow:0 0 26px -8px rgba(61,240,179,.45)}
.hp-rx-tray .ti{width:22px;height:22px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#04241a;background:linear-gradient(140deg,#3df0b3,#10b981)}
.hp-rx-tray .ti svg{width:12px;height:12px}
.hp-rx-tray .tl{font-size:10px;font-weight:700;letter-spacing:.1em;color:var(--hp-dtext-4);text-transform:uppercase}
.hp-rx-tray .tv{margin-left:auto;font-family:'Geist',system-ui,sans-serif;font-size:19px;font-weight:700;letter-spacing:-.03em;color:var(--hp-green);line-height:1}
@media(max-width:820px){.hp-rx-s .sd{display:none}.hp-rx-st .card .s{display:none}.hp-rx-tok .l{display:none}}
@media(prefers-reduced-motion:reduce){.hp-rx-drip{animation:none}.hp-rx-tok,.hp-rx-st .card,.hp-rx-st .med,.hp-rx-s{transition:none}}

/* Ageing → collection timeline (revenue-recovery hero) — adapted
   from Finnoto's original reference build for this page: a native
   SVG <animateMotion> dot travels the rail with zero JS/rAF involved
   (the browser's own SMIL engine drives it, so it can never be
   blocked/throttled the way a rAF-driven loop can be). Step cards
   fade in once on load (staggered via inline animation-delay) and
   hold their done/now state — no repeating JS state machine needed.
   Recolored from the reference's orange to this site's teal token. */
.hp-hz .hp-ledger-body{display:none}
.hp-hz-body{padding:16px 18px 18px}
.viz{position:relative;width:100%;max-width:100%;margin:0 auto}
.viz.viz-tall::before{content:"";display:block;padding-top:96%}
.viz>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hzl{fill:none;stroke:rgba(61,240,179,.28);stroke-width:1.4}
.hzd{fill:var(--hp-green);filter:drop-shadow(0 0 5px rgba(61,240,179,.7))}
.hz-bead,.hz-step,.hz-stat{position:absolute;transform:translate(-50%,-50%)}
.hz-bead{width:9px;height:9px;border-radius:50%;background:var(--hp-dtext-4);opacity:0;animation:hzIn .5s cubic-bezier(.22,.9,.3,1) forwards}
.hz-bead.done{background:var(--hp-green)}
.hz-bead.now{background:var(--hp-green);box-shadow:0 0 0 3px rgba(61,240,179,.16);animation:hzIn .5s cubic-bezier(.22,.9,.3,1) forwards,hzBead 1.8s ease-in-out infinite}
@keyframes hzIn{from{opacity:0;transform:translate(-50%,-50%) scale(.9)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes hzBead{0%,100%{box-shadow:0 0 0 3px rgba(61,240,179,.16)}50%{box-shadow:0 0 0 6px rgba(61,240,179,0)}}
.hz-step{display:flex;align-items:center;justify-content:space-between;gap:10px;width:min(352px,86%);border-radius:10px;padding:9px 12px;background:var(--hp-panel-2);border:1px solid rgba(255,255,255,.07);opacity:0;animation:hzIn .5s cubic-bezier(.22,.9,.3,1) forwards}
.hz-step.now{border-color:rgba(61,240,179,.3)}
.hz-step .st{font-family:'Geist',system-ui,sans-serif;font-size:12.5px;font-weight:600;color:#fff;line-height:1.25}
.hz-step .sd{font-size:10.5px;color:var(--hp-dtext-4);margin-top:2px}
.sb{flex-shrink:0;font-size:9.5px;font-weight:700;letter-spacing:.04em;padding:4px 9px;border-radius:6px;white-space:nowrap;border:1px solid rgba(61,240,179,.35);background:rgba(61,240,179,.09);color:var(--hp-green)}
.hz-step.now .sb{border-color:rgba(61,240,179,.5);background:rgba(61,240,179,.12);box-shadow:0 0 12px -3px rgba(61,240,179,.55)}
.hz-stat{width:min(200px,60%);border-radius:12px;padding:14px 16px;text-align:center;background:var(--hp-panel-2);border:1px solid rgba(61,240,179,.3);opacity:0;animation:hzIn .5s cubic-bezier(.22,.9,.3,1) forwards;animation-delay:.85s}
.hz-stat .sv{font-family:'Geist',system-ui,sans-serif;font-weight:700;font-size:24px;line-height:1;letter-spacing:-.03em;color:var(--hp-green)}
.hz-stat .sl{font-size:9.5px;color:var(--hp-dtext-4);margin-top:6px;letter-spacing:.05em;text-transform:uppercase}
@media(max-width:620px){.hz-step .sd{display:none}}
@media(prefers-reduced-motion:reduce){.hzd{display:none}.hz-bead,.hz-step,.hz-stat{animation:none;opacity:1}}
@media(prefers-reduced-motion:reduce){.hp-hz-row,.hp-hz-stat,.hp-hz-pointer,.hp-hz-bead,.hp-hz-card,.hp-hz-card .b{transition:none}}

/* ══════════════════════════════════════════════════════════════
   THE EXCEPTION ENGINE (revenue-intelligence hero)
   Supporting HTML/CSS for exception-engine.js — the JS is the
   unmodified source of truth (see exception-engine.js) and drives
   every class toggle here (.show/.on/.good/.did/.won/.amber/.mint);
   this stylesheet only defines what those states look like.
   An atmospheric field, not a dashboard card — no bordered panel,
   the canvas sits directly in the hero's own dark/glow background.
   ══════════════════════════════════════════════════════════════ */
.hp-xe-wrap{overflow:hidden}
.hp-xe-wrap .xe{margin:28px 16px 16px}
.xe{
  position:relative;width:calc(100% - 32px);
  aspect-ratio:1/.86;
  -webkit-user-select:none;user-select:none
}
.xe canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1}

.xe-top{position:absolute;top:0;left:0;right:0;text-align:center;pointer-events:none;z-index:2}
.xe-count{
  font-family:'Geist',system-ui,sans-serif;font-weight:600;
  font-size:clamp(21px,3vw,30px);letter-spacing:-.03em;line-height:1;
  color:#fff;font-variant-numeric:tabular-nums
}
.xe-label{
  font-size:9.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--hp-dtext-4);margin-top:8px;transition:color .6s ease
}
.xe-label.amber{color:rgba(240,162,116,.9)}
.xe-label.mint{color:rgba(61,240,179,.9)}

/* transaction identity tags — quiet metadata annotations */
.xe-tag{
  position:absolute;transform:translate(-50%,-140%);z-index:2;pointer-events:none;
  font-size:8.5px;font-weight:600;letter-spacing:.03em;white-space:nowrap;
  padding:3px 7px;border-radius:5px;
  background:rgba(10,12,11,.82);backdrop-filter:blur(4px);
  border:1px solid rgba(255,255,255,.1);color:var(--hp-dtext-2);
  opacity:0;transition:opacity .5s ease
}
.xe-tag::after{
  content:"";position:absolute;left:50%;top:100%;width:1px;height:7px;
  background:rgba(255,255,255,.1);transform:translateX(-.5px)
}
.xe-tag.amber{
  color:var(--hp-orange);border-color:rgba(240,162,116,.42);
  background:rgba(30,18,10,.88);box-shadow:0 0 14px -4px rgba(240,162,116,.4)
}
.xe-tag.amber::after{background:rgba(240,162,116,.42)}
.xe-tag.show{opacity:1}

/* the exception case card — a compact premium glass ticket */
.xe-case{
  position:absolute;left:50%;top:54%;transform:translate(-50%,-50%) scale(.96);
  width:min(272px,74%);z-index:3;pointer-events:none;
  border-radius:16px;overflow:hidden;
  background:rgba(13,15,14,.86);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 30px 64px -28px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.05);
  opacity:0;
  transition:opacity .6s cubic-bezier(.32,.72,0,1),
             transform .6s cubic-bezier(.32,.72,0,1),
             border-color .8s ease
}
.xe-case.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
.xe-case.won{border-color:rgba(61,240,179,.45)}
.xe-case-top{
  display:flex;align-items:center;gap:12px;padding:14px 16px;
  border-bottom:1px solid rgba(255,255,255,.08)
}
.xe-amt{
  font-family:'Geist',system-ui,sans-serif;font-weight:700;font-size:20px;
  letter-spacing:-.03em;color:var(--hp-orange);line-height:1;
  font-variant-numeric:tabular-nums;transition:color .8s ease;flex-shrink:0
}
.xe-case.won .xe-amt{color:var(--hp-green)}
.xe-title{font-size:12.5px;font-weight:600;color:#fff;line-height:1.25;letter-spacing:-.005em}
.xe-sub{font-size:9px;color:var(--hp-dtext-4);margin-top:2px;letter-spacing:.06em}

.xe-steps{padding:10px 16px 13px}
.xe-stp{display:flex;align-items:center;gap:11px;padding:7px 0;opacity:.28;transition:opacity .55s ease}
.xe-stp.on{opacity:1}
.xe-stp-indicator{
  width:9px;height:9px;border-radius:50%;flex-shrink:0;position:relative;
  background:var(--hp-dtext-4);opacity:.5;
  transition:background .5s ease,opacity .5s ease,box-shadow .5s ease
}
.xe-stp.on .xe-stp-indicator{background:var(--hp-orange);opacity:1;box-shadow:0 0 0 3px rgba(240,162,116,.16)}
.xe-stp.on.good .xe-stp-indicator{background:var(--hp-green);box-shadow:0 0 0 3px rgba(61,240,179,.16)}
.xe-stp .lt{font-size:11.5px;font-weight:600;color:var(--hp-dtext-2);line-height:1.2;letter-spacing:-.005em;transition:color .5s ease}
.xe-stp.on .lt{color:#fff}
.xe-stp .ld{font-size:9.5px;color:var(--hp-dtext-4);margin-top:1.5px;line-height:1.25}
.xe-stp.did .xe-stp-indicator{background:var(--hp-green);opacity:1;box-shadow:0 0 0 3px rgba(61,240,179,.16)}
.xe-stp.did .xe-stp-indicator::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:var(--hp-green);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  -webkit-mask-size:120%;mask-size:120%;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat
}

@media(max-width:900px){
  .xe{max-width:480px}
}
@media(max-width:620px){
  .xe{aspect-ratio:1/1}
  .xe-case{width:86%}
  .xe-amt{font-size:17px}
  .xe-tag{font-size:8px}
}
@media(prefers-reduced-motion:reduce){
  .xe-case,.xe-stp,.xe-stp-indicator,.xe-tag,.xe-count,.xe-label{transition:none}
}

/* Static dashboard mockup (Quick Commerce hero) */
.hp-dash-tabs{display:flex;gap:6px;padding:12px 14px 0;flex-wrap:wrap}
.hp-dash-tab{font-size:11.5px;font-weight:600;color:var(--hp-dtext-3);background:rgba(255,255,255,.05);padding:6px 12px;border-radius:999px}
.hp-dash-tab.active{color:var(--hp-green-on);background:var(--hp-green)}
.hp-dash-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px}
.hp-dash-stat{background:rgba(255,255,255,.03);border-radius:12px;padding:14px}
.hp-dash-stat .v{display:block;font-family:'Geist',system-ui,sans-serif;font-size:22px;font-weight:600;color:#fff;margin-bottom:2px}
.hp-dash-stat .l{font-size:11px;color:var(--hp-dtext-3)}
.hp-dash-subtabs{display:flex;gap:18px;padding:0 14px;border-bottom:1px solid rgba(255,255,255,.08)}
.hp-dash-subtab{font-size:12.5px;font-weight:600;color:var(--hp-dtext-4);padding:10px 0;border-bottom:2px solid transparent}
.hp-dash-subtab.active{color:#fff;border-color:var(--hp-green)}
.hp-dash-rows{padding:14px}

.hp-stats{max-width:1280px;margin:80px auto 0;padding:0 40px;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.hp-stat-card{display:flex;align-items:center;gap:10px;border-radius:14px;padding:13px 16px;box-shadow:0 20px 44px -30px rgba(0,0,0,.9);background:var(--hp-panel-3)}
.hp-stat-pill{flex-shrink:0;font-size:12px;font-weight:700;color:var(--hp-green-on);background:var(--hp-green);padding:5px 11px;border-radius:999px;letter-spacing:-.01em}
.hp-stat-label{font-size:12.5px;line-height:1.35;color:var(--hp-dtext-3)}

.hp-trust{max-width:1280px;margin:0 auto;padding:80px 40px 60px}
.hp-trust-label{text-align:center;font-size:15px;color:var(--hp-dtext-2);margin:0 0 40px;font-weight:600}
.hp-logomarq-mask{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.hp-logomarq{display:flex;gap:90px;padding-right:90px;width:max-content;align-items:center;animation:hpMarq 46s linear infinite}
.hp-logomarq:hover{animation-play-state:paused}
.hp-logomarq .lg{flex-shrink:0;height:34px;width:auto;display:block;opacity:.75}
.hp-logomarq .lg.sq{height:50px}

@media(max-width:900px){
  .hp-hero-grid{grid-template-columns:1fr;gap:40px}
  .hp-ledger{justify-self:stretch;max-width:none}
  .hp-stats{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){.hp-stats{grid-template-columns:1fr}}

/* ---------- PROBLEM ---------- */
.hp-problem{background:var(--hp-lmuted-3);color:var(--hp-ltext);padding:100px 0 125px}
.hp-problem--grey{background:#e6e8e7}
.hp-problem--grey .hp-lead{color:var(--hp-lsmall)}
.hp-problem--grey .hp-problem-tag{background:#3ea672;color:#fff}
.hp-problem--white{background:#fff}
.hp-problem--white .hp-problem-card{background:var(--hp-lmuted-3)}
.hp-problem--dark{background:var(--hp-bg)}
.hp-problem--dark .hp-eyebrow-dark{color:var(--hp-green)}
.hp-problem--dark .hp-problem-h2{color:#fff}
.hp-problem--dark .hp-lead{color:var(--hp-dtext-1)}
.hp-problem--dark .hp-problem-card{background:var(--hp-panel-2)}
.hp-problem--dark .hp-problem-card .n{color:var(--hp-dtext-5)}
.hp-problem--dark .hp-problem-card .t{color:#fff}
.hp-problem--dark .hp-problem-card p{color:var(--hp-dtext-1)}
.hp-problem--dark .hp-step-badge{background:rgba(255,255,255,.08);color:var(--hp-dtext-2)}
.hp-problem--dark .hp-dv-row{background:rgba(255,255,255,.05)}
.hp-problem--dark .hp-dv-body .l{color:#fff}
.hp-problem--dark .hp-dv-body .s{color:var(--hp-dtext-4)}
.hp-problem--dark .hp-dv-ico.green{background:rgba(61,240,179,.14);color:var(--hp-green)}
.hp-problem .hp-sec-head-center{max-width:1020px}
.hp-problem-h2{white-space:nowrap;font-size:clamp(13px,3.6vw,37px)}
.hp-problem .hp-lead{max-width:820px;margin:0 auto}
.hp-problem-wrap{max-width:1280px;margin:0 auto;padding:0 40px}
.hp-problem-grid{display:grid;grid-template-columns:1fr 0.95fr 1.15fr;grid-auto-rows:auto;gap:18px}
.hp-problem-card{background:#fff;border-radius:20px;padding:32px;display:flex;flex-direction:column}
.hp-problem-card--lg{grid-row:1/3}
.hp-problem-card--wide{grid-column:2/4}
.hp-problem-card .n{font-family:'Geist',system-ui,sans-serif;font-weight:600;font-size:28px;color:var(--hp-ltext);margin-bottom:18px}
.hp-problem-card .t{font-family:'Geist',system-ui,sans-serif;font-size:18px;font-weight:600;color:var(--hp-ltext);margin-bottom:8px}
.hp-problem-card p{font-size:14px;line-height:1.6;color:var(--hp-lbody);margin:0 0 18px}
.hp-problem-tag{display:inline-block;align-self:flex-start;margin-top:auto;background:var(--hp-green-good-bg);color:var(--hp-green-good-text);font-size:13px;font-weight:600;padding:8px 14px;border-radius:999px}
.hp-problem-card--row{flex-direction:column}
.hp-problem-card-top{display:flex;align-items:center;gap:16px;margin-bottom:10px}
.hp-problem-card-top .n{margin-bottom:0}
.hp-problem-card-top .t{margin-bottom:0}
.hp-problem-tag--top{margin:0 0 0 auto;flex-shrink:0}
@media(max-width:900px){.hp-problem-grid{grid-template-columns:1fr 1fr}.hp-problem-card--lg{grid-row:auto;grid-column:1/3}.hp-problem-card--wide{grid-column:1/3}}
@media(max-width:560px){.hp-problem-grid{grid-template-columns:1fr}.hp-problem-card--lg{grid-column:auto}.hp-problem-card--wide{grid-column:auto}.hp-problem-card-top{flex-wrap:wrap}.hp-problem-tag--top{margin-left:0}}

/* uniform 6-card problem grid variant: same n/t/p/tag pattern in every box, no mosaic sizing */
.hp-problem-grid.hp-problem-grid-6{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.hp-problem-grid.hp-problem-grid-6{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.hp-problem-grid.hp-problem-grid-6{grid-template-columns:1fr}}

/* ---------- PLATFORM OVERVIEW ---------- */
.hp-platform-sec{background:var(--hp-lmuted-3);color:var(--hp-ltext);padding:96px 0 0}
.hp-platform-wrap{max-width:1280px;margin:0 auto;padding:0 40px 104px}
.hp-sec-head-center{text-align:center;max-width:820px;margin:0 auto var(--hp-space-head-content)}
.hp-h2{font-size:clamp(30px,3.6vw,41px);letter-spacing:-.035em;margin:0 0 var(--hp-space-heading-lead);color:var(--hp-ltext)}
.hp-lead{font-size:15.5px;line-height:1.65;color:var(--hp-lbody);margin:0}
.hp-cta-row-center{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
a.hp-btn-green{font-size:14px;font-weight:600;color:var(--hp-green-on);background:var(--hp-green);padding:13px 25px;border-radius:999px;white-space:nowrap;display:inline-block}
a.hp-btn-ghost-light{font-size:14px;font-weight:600;color:var(--hp-lsmall);border:1px solid #d8dcdb;padding:12px 24px;border-radius:999px;white-space:nowrap;transition:background .18s ease;display:inline-block}
.hp-btn-ghost-light:hover{background:var(--hp-lmuted-3)}

.hp-pf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.hp-pf-grid.hp-pf-grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1040px){.hp-pf-grid.hp-pf-grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.hp-pf-grid.hp-pf-grid-4{grid-template-columns:1fr}}
.hp-pf-card{border:0;border-radius:16px;padding:24px;display:flex;flex-direction:column;text-decoration:none;color:inherit;cursor:pointer;background:#fff;box-shadow:none;transition:box-shadow .2s ease,transform .2s ease}
.hp-pf-card:hover{box-shadow:0 10px 24px -14px rgba(20,30,26,.16);transform:translateY(-3px)}
.hp-pf-card .t{font-family:'Geist',system-ui,sans-serif;font-size:17px;font-weight:600;color:var(--hp-ltext);margin-bottom:8px}
.hp-pf-card p{font-size:13.5px;line-height:1.6;color:var(--hp-lbody);margin:0 0 20px}
.hp-pf-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px;padding-top:16px;border-top:1px solid var(--hp-lborder)}
.hp-pf-metric{font-size:12.5px;line-height:1.4;color:var(--hp-lbody)}
.hp-pf-metric b{color:var(--hp-ltext);font-weight:600}
.hp-pf-explore-btn{flex-shrink:0;font-size:12.5px;font-weight:600;color:var(--hp-ltext);background:#fff;border:1px solid var(--hp-lborder);border-radius:999px;padding:8px 18px;transition:background .18s ease,border-color .18s ease}
.hp-pf-card:hover .hp-pf-explore-btn{background:var(--hp-lmuted-2);border-color:var(--hp-lborder-strong,var(--hp-lborder))}
.hp-pf-visual{margin-top:auto;background:var(--hp-lmuted-2);border-radius:12px;padding:12px}
.hp-pf-chip{font-family:'Inter',system-ui,sans-serif;font-size:10.5px;font-weight:400;color:var(--hp-lsmall);background:#fff;border-radius:6px;padding:5px 9px}
.hp-pf-rowlist{display:flex;flex-direction:column;gap:7px}
.hp-pf-row{background:#fff;border-radius:9px;padding:9px 11px;display:flex;justify-content:space-between;gap:10px}
.hp-pf-row span:first-child{font-size:11.5px;color:var(--hp-lsmall)}
.hp-pf-row span:last-child{font-size:11.5px;font-weight:400}
.c-neutral{color:var(--hp-ltext)}
.c-good{color:var(--hp-green-good-text)}
.c-warn{color:var(--hp-amber-1)}
.hp-pf-badge{font-family:'Inter',system-ui,sans-serif;font-size:10.5px;font-weight:400;color:var(--hp-green-good-text);background:var(--hp-green-good-bg);border-radius:5px;padding:4px 8px;display:inline-block}
.hp-pf-note{font-family:'Inter',system-ui,sans-serif;font-size:12.5px;font-weight:400;color:var(--hp-ltext);margin-top:8px}
.hp-pf-note2{font-size:11px;color:#6b7472;margin-top:3px}
.hp-bars{display:flex;align-items:flex-end;gap:7px;height:82px}
.hp-bars div{flex:1;border-radius:5px 5px 0 0}
.hp-ct-rows{display:flex;flex-direction:column;gap:9px}
.hp-ct-row-top{display:flex;justify-content:space-between;font-size:11.5px;color:var(--hp-lsmall);margin-bottom:5px}
.hp-ct-row-top span:last-child{font-weight:400;color:var(--hp-ltext)}
.hp-ct-bar{height:6px;border-radius:4px;background:#fff;overflow:hidden}
.hp-ct-bar span{display:block;height:100%;border-radius:4px;background:#f3c7ae}
@media(max-width:900px){.hp-pf-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.hp-pf-grid{grid-template-columns:1fr}}

/* ---------- ARCHITECTURE ---------- */
.hp-arch-band{background:#fff;border-top:1px solid var(--hp-lborder);border-bottom:1px solid var(--hp-lborder);padding:100px 0 132px}
.hp-arch-wrap{max-width:1280px;margin:0 auto;padding:0 40px}
.hp-arch-head{max-width:700px;margin:0 0 var(--hp-space-head-content)}
.hp-eyebrow-dark{display:inline-flex;align-items:center;gap:9px;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--hp-darkgreen);margin-bottom:var(--hp-space-badge-heading)}
.hp-h2-left{font-size:clamp(28px,3.2vw,37px);line-height:1.06;letter-spacing:-.035em;color:var(--hp-ltext);margin:0 0 var(--hp-space-heading-lead)}
.hp-lead-tight{font-size:14.5px;line-height:1.7;color:var(--hp-lbody);margin:0}

.hp-arch-tabsrow{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;padding-bottom:20px;border-bottom:1px solid var(--hp-lborder);flex-wrap:wrap}
.hp-arch-tabs{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.hp-arch-tab{padding:4px 0;cursor:pointer;display:flex;align-items:center;gap:9px;opacity:.42;transition:opacity .3s ease;border:0;background:none;font:inherit}
.hp-arch-tab.active{opacity:1}
.hp-arch-tab .n{font-size:12px;font-weight:600;color:#9aa3a1}
.hp-arch-tab.active .n{color:var(--hp-darkgreen)}
.hp-arch-tab .s{font-size:13px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--hp-lbody);transition:color .25s ease}
.hp-arch-tab.active .s{color:var(--hp-ltext)}
.hp-arch-next{display:flex;flex-direction:column;align-items:flex-end;gap:9px}
.hp-arch-next-label{font-size:11.5px;color:var(--hp-dtext-2)}
.hp-pips{display:flex;align-items:center;gap:6px}
.hp-pip{height:6px;border-radius:3px;cursor:pointer;overflow:hidden;flex-shrink:0;width:36px;background:#e3e7e6;transition:width .4s ease,background .3s ease;border:0;padding:0}
.hp-pip.done{background:#c7cecc}
.hp-pip.active{width:108px}
.hp-pip-fill{height:100%;width:0;background:var(--hp-darkgreen)}
.hp-pip.active .hp-pip-fill{animation:hpBar 2s linear forwards}
.hp-arch-wrap.paused .hp-pip.active .hp-pip-fill{animation-play-state:paused}

.hp-arch-panel-set{position:relative}
.hp-arch-body{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;padding:44px 4px 0;min-height:280px;align-items:start;transition:opacity .28s ease}
.hp-arch-body.hp-leaving{opacity:0}
.hp-arch-kicker{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--hp-darkgreen);margin-bottom:12px}
.hp-arch-title{font-size:34px;font-weight:600;letter-spacing:-.03em;line-height:1.1;color:var(--hp-ltext);margin:0 0 20px}
.hp-arch-desc{font-size:15.5px;line-height:1.7;color:var(--hp-lbody);margin:0 0 22px;max-width:540px}
.hp-arch-chips{display:flex;gap:9px;flex-wrap:wrap}
.hp-chip-stat{font-size:11.5px;font-weight:600;color:var(--hp-green-good-text);background:var(--hp-green-good-bg);border-radius:999px;padding:6px 12px}
.hp-chip-meta{font-size:11.5px;color:var(--hp-lbody);background:var(--hp-lmuted-3);border-radius:999px;padding:6px 12px}
.hp-arch-panel{background:var(--hp-lmuted);border-radius:20px;padding:30px 28px;display:flex;flex-direction:column;gap:10px}
.hp-arch-panel-title{font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--hp-dtext-2);margin-bottom:4px}
.hp-arch-row{background:#fff;border-radius:12px;padding:16px 18px;display:flex;justify-content:space-between;align-items:center}
.hp-arch-row span:first-child{font-size:12.5px;color:var(--hp-lbody)}
.hp-arch-row span:last-child{font-size:12.5px;font-weight:600;color:var(--hp-ltext)}
@media(max-width:820px){
  .hp-arch-body{grid-template-columns:1fr;gap:28px}
  .hp-arch-tabsrow{flex-direction:column;align-items:flex-start;gap:18px}
  .hp-arch-next{align-items:flex-start}
}

/* How a batch runs (bulk-payouts) — hover-driven, no auto-advance, no numbering */
.hp-batchflow{background:var(--hp-bg);padding:100px 0 125px}
.hp-batchflow-wrap{max-width:1180px;margin:0 auto;padding:0 40px;text-align:left}
.hp-batchflow .hp-eyebrow-dark{color:var(--hp-green)}
.hp-batchflow .hp-h2-left{color:#fff}
.hp-batchflow .hp-lead-tight{color:var(--hp-dtext-1);max-width:560px}
.hp-batchflow-tabs{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:40px 0 0}
.hp-batchflow-tab{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 18px;border-radius:14px;border:0;background:none;color:var(--hp-dtext-1);cursor:pointer;font:inherit;transition:color .2s ease}
.hp-batchflow-tab .ico{width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;color:var(--hp-dtext-1);transition:background .3s ease,color .3s ease}
.hp-batchflow-tab .s{font-size:13px;font-weight:600;letter-spacing:-.005em}
.hp-batchflow-tab.active .ico{background:rgba(61,240,179,.16);color:var(--hp-green)}
.hp-batchflow-tab.active .s{color:#fff}
.hp-batchflow-panels{position:relative;padding-top:36px}
.hp-batchflow-panel{display:none;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:center}
.hp-batchflow-panel.active{display:grid;animation:hpBatchFade .35s ease}
.hp-batchflow-kicker{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--hp-green);margin-bottom:12px}
.hp-batchflow-title{font-size:26px;font-weight:600;color:#fff;margin:0 0 14px;letter-spacing:-.02em}
.hp-batchflow-desc{font-size:15.5px;line-height:1.65;color:var(--hp-dtext-1);margin:0}
@media(max-width:820px){.hp-batchflow-panel{grid-template-columns:1fr;gap:28px}}
@keyframes hpBatchFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.hp-batchflow-card{display:grid;grid-template-columns:1fr 1px 1fr;background:var(--hp-panel-2);border-radius:20px;overflow:hidden;text-align:left}
.hp-batchflow-divider{background:rgba(255,255,255,.08)}
.hp-batchflow-left,.hp-batchflow-right{padding:28px 32px}
.hp-batchflow-doc-head{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;color:var(--hp-dtext-3);margin-bottom:16px}
.hp-batchflow-doc-head .badge{font-size:10px;font-weight:700;letter-spacing:.08em;color:var(--hp-green);background:rgba(61,240,179,.12);border-radius:999px;padding:3px 9px}
.hp-batchflow-item{display:flex;justify-content:space-between;align-items:center;gap:10px;background:rgba(255,255,255,.03);border-radius:10px;padding:11px 14px;margin-bottom:8px;font-size:12.5px;color:var(--hp-dtext-2)}
.hp-batchflow-item b{color:#fff;font-weight:600}
.hp-batchflow-item .st{font-size:11px;color:var(--hp-dtext-4);white-space:nowrap}
.hp-batchflow-right h3{font-size:16px;font-weight:600;color:#fff;margin:0 0 18px}
.hp-batchflow-check{display:flex;align-items:center;gap:12px;padding:11px 0;opacity:0;animation:hpBatchStep .4s ease forwards}
.hp-batchflow-panel.active .hp-batchflow-check:nth-child(2){animation-delay:.05s}
.hp-batchflow-panel.active .hp-batchflow-check:nth-child(3){animation-delay:.2s}
.hp-batchflow-panel.active .hp-batchflow-check:nth-child(4){animation-delay:.35s}
.hp-batchflow-panel.active .hp-batchflow-check:nth-child(5){animation-delay:.5s}
@keyframes hpBatchStep{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:translateX(0)}}
.hp-batchflow-check .ic{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:rgba(61,240,179,.14);color:var(--hp-green)}
.hp-batchflow-check .ic.warn{background:#3a2a15;color:var(--hp-orange)}
.hp-batchflow-check b{display:block;font-size:13px;color:#fff;font-weight:600}
.hp-batchflow-check span.s{font-size:11.5px;color:var(--hp-dtext-4)}
@media(prefers-reduced-motion:reduce){.hp-batchflow-panel.active,.hp-batchflow-check{animation:none;opacity:1}}
@media(max-width:820px){.hp-batchflow-card{grid-template-columns:1fr}.hp-batchflow-divider{display:none}}

/* Engineered like a bank (bulk-payouts) — light grey section, white grained cards */
.hp-eibank{background:var(--hp-lmuted-3);padding:100px 0}
.hp-eibank-wrap{max-width:1280px;margin:0 auto;padding:0 40px}
.hp-eibank-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.hp-eibank-card{background:var(--hp-lmuted-2);border:1px solid var(--hp-lborder);border-radius:20px;padding:28px;display:flex;flex-direction:column;justify-content:space-between}
.hp-eibank-card h3{font-family:'Geist',system-ui,sans-serif;font-size:18px;font-weight:600;color:var(--hp-ltext);margin:0 0 8px}
.hp-eibank-card p{font-size:14px;line-height:1.6;color:var(--hp-lbody);margin:0 0 18px}
.hp-eibank-chart{flex:1;display:flex;align-items:flex-end;gap:6px;min-height:64px;background:#fff;border-radius:12px;padding:14px}
.hp-eibank-chart span{flex:1;border-radius:3px;background:var(--hp-green-good-bg)}
.hp-eibank-chart span.hi{background:var(--hp-green)}
.hp-eibank-chart span.warn{background:var(--hp-orange)}
.hp-eibank-rows{flex:1;display:flex;flex-direction:column;justify-content:center;gap:8px;background:#fff;border-radius:12px;padding:14px}
.hp-eibank-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:9px;background:var(--hp-lmuted-3)}
.hp-eibank-row .ic{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--hp-green-good-bg);color:var(--hp-darkgreen)}
.hp-eibank-row.warn .ic{background:#fde4d1;color:var(--hp-amber-1)}
.hp-eibank-row span.t{font-size:12px;color:var(--hp-lbody);font-weight:500}
.hp-eibank-chips{flex:1;display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:#fff;border-radius:12px;padding:14px;min-height:64px}
.hp-eibank-chip{font-size:11.5px;font-weight:600;color:var(--hp-ltext);background:var(--hp-lmuted-3);border-radius:999px;padding:6px 12px}
.hp-eibank-icon{flex:0 0 auto;width:64px;height:64px;display:flex;align-items:center;justify-content:center;background:#fff;border-radius:12px;color:var(--hp-darkgreen)}
.hp-eibank-flow{display:flex;align-items:center;justify-content:center;gap:10px;height:64px;background:#fff;border-radius:12px;color:var(--hp-lbody)}
.hp-eibank-flow .node{width:32px;height:32px;border-radius:8px;background:var(--hp-lmuted-3);display:flex;align-items:center;justify-content:center;color:var(--hp-darkgreen)}
.hp-eibank-flow .node.off{background:#fde4d1;color:var(--hp-amber-1)}
.hp-eibank-head{display:flex;flex-direction:column}
.hp-eibank-head h3{margin:0 0 8px}
.hp-eibank-head p{margin:0}
@media(max-width:900px){.hp-eibank-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.hp-eibank-grid{grid-template-columns:1fr}}

/* Dashboard visual (bulk-payouts "How a batch runs" side panel) */
.hp-dashv2{background:var(--hp-panel);border-radius:20px;padding:24px;border:1px solid rgba(255,255,255,.06)}
.hp-dashv2-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px}
.hp-dashv2-src{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--hp-dtext-3)}
.hp-dashv2-src svg{color:var(--hp-jn-amazon);flex-shrink:0}
.hp-dashv2-live{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:600;letter-spacing:.1em;color:var(--hp-green);background:rgba(61,240,179,.12);border-radius:999px;padding:3px 9px;margin-left:4px}
.hp-dashv2-live i{width:5px;height:5px;border-radius:50%;background:var(--hp-green);display:block;animation:hpPulse 1.8s ease-in-out infinite}
.hp-dashv2-bal{text-align:right}
.hp-dashv2-bal .l{display:block;font-size:9.5px;letter-spacing:.1em;color:var(--hp-dtext-4);margin-bottom:4px}
.hp-dashv2-bal .v{font-family:'Geist',system-ui,sans-serif;font-weight:700;font-size:19px;color:#fff}
.hp-dashv2-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:20px}
.hp-dashv2-label{font-size:10px;letter-spacing:.1em;color:var(--hp-dtext-4);margin-bottom:10px}
.hp-dashv2-pay{display:flex;flex-direction:column;gap:8px}
.hp-dashv2-row{display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.03);border-radius:10px;padding:9px 12px;gap:10px}
.hp-dashv2-row .who{min-width:0}
.hp-dashv2-row .who b{display:block;font-size:12px;color:#fff;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hp-dashv2-row .who span{font-size:10.5px;color:var(--hp-dtext-4)}
.hp-dashv2-row .amt{font-size:12.5px;font-weight:600;color:#fff;white-space:nowrap}
.hp-dashv2-row .tag{font-size:9.5px;font-weight:700;background:rgba(124,108,246,.18);color:var(--hp-jn-finnoto);border-radius:6px;padding:3px 6px;flex-shrink:0}
.hp-dashv2-row .st{font-size:10.5px;color:var(--hp-dtext-3);white-space:nowrap;flex-shrink:0}
.hp-dashv2-row .st.ok{color:var(--hp-green)}
.hp-dashv2-rail-row{display:grid;grid-template-columns:34px 1fr 24px;align-items:center;gap:8px;margin-bottom:9px}
.hp-dashv2-rail-row .n{font-size:9.5px;font-weight:700;letter-spacing:.05em;color:var(--hp-dtext-3)}
.hp-dashv2-rail-row .bar{position:relative;height:4px;background:rgba(255,255,255,.08);border-radius:2px;overflow:hidden}
.hp-dashv2-rail-row .bar span{position:absolute;top:0;left:0;height:100%;border-radius:2px;background:var(--hp-green)}
.hp-dashv2-rail-row .c{font-size:10px;color:var(--hp-dtext-4);text-align:right}
.hp-dashv2-stat{margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.08)}
.hp-dashv2-stat .big{display:block;font-family:'Geist',system-ui,sans-serif;font-weight:700;font-size:26px;color:#fff}
.hp-dashv2-stat .l{font-size:11px;color:var(--hp-dtext-4)}
.hp-dashv2-mini{display:flex;gap:14px;margin-top:12px}
.hp-dashv2-mini div{flex:1}
.hp-dashv2-mini b{display:block;font-size:13px;color:#fff;font-weight:700}
.hp-dashv2-mini span{font-size:9px;letter-spacing:.06em;color:var(--hp-dtext-4)}
@media(max-width:820px){.hp-dashv2-grid{grid-template-columns:1fr}}

/* ---------- BUILT FOR ---------- */
.hp-builtfor{background:var(--hp-bg);padding:104px 0}
.hp-bf-wrap{max-width:1280px;margin:0 auto;padding:0 40px}
.hp-bf-head{max-width:760px;margin:0 0 var(--hp-space-head-content)}
.hp-eyebrow-dark2{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--hp-green);margin-bottom:var(--hp-space-badge-heading)}
.hp-h2-dark-left{font-size:clamp(28px,3.2vw,37px);line-height:1.08;letter-spacing:-.035em;margin:0 0 var(--hp-space-heading-lead);color:#fff}
.hp-lead-dark{font-size:14.5px;line-height:1.7;color:var(--hp-dtext-1);margin:0}
.hp-bf-grid{display:grid;grid-template-columns:repeat(3,minmax(240px,380px));justify-content:center;gap:18px}
.hp-bf-card{border-radius:18px;background:var(--hp-panel-2);box-shadow:0 26px 50px -34px rgba(0,0,0,.95);padding:30px;display:flex;flex-direction:column;width:100%;max-width:380px}
.hp-bf-card .t{font-family:'Geist',system-ui,sans-serif;font-size:20px;font-weight:600;letter-spacing:-.02em;color:#fff;margin-bottom:6px}
.hp-bf-card .tag{font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--hp-green);margin-bottom:16px}
.hp-bf-card p{font-size:13.5px;line-height:1.68;color:var(--hp-dtext-1);margin:0 0 22px}
.hp-bf-tags{margin-top:auto;display:flex;flex-direction:column;gap:9px}
.hp-bf-tags div{background:rgba(255,255,255,.04);border-radius:9px;padding:11px 13px;font-size:12.5px;color:var(--hp-dtext-3)}
@media(max-width:900px){.hp-bf-grid{grid-template-columns:minmax(240px,380px);justify-content:center}}

/* ---------- IMPLEMENTATION ---------- */
.hp-impl{background:var(--hp-lmuted-3);color:var(--hp-ltext);padding:100px 0 125px}
.hp-impl-wrap{max-width:1280px;margin:0 auto;padding:0 40px}
.hp-impl-head{text-align:left;margin-bottom:var(--hp-space-head-content)}
.hp-impl-h2{font-size:clamp(28px,3.2vw,37px);line-height:1.06}

/* ---------- 1P MODEL FLOW DIAGRAM ---------- */
.hp-impl-head .hp-lead-tight{max-width:600px}
.hp-grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.hp-grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:700px){.hp-grid2{grid-template-columns:1fr}}
.hp-impl-card{background:#fff;border:0;border-radius:20px;padding:22px;display:flex;flex-direction:column}
.hp-impl-card .wk{display:inline-block;align-self:flex-start;font-family:'Geist',system-ui,sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--hp-darkgreen);background:var(--hp-green-good-bg);padding:4px 10px;border-radius:999px;margin-bottom:14px}
.hp-impl-card .t{font-family:'Geist',system-ui,sans-serif;font-size:20px;font-weight:600;color:var(--hp-ltext);margin-bottom:8px}
.hp-impl-card p{font-size:14px;line-height:1.55;color:var(--hp-lbody);margin:0 0 16px}
.hp-impl-rowbox{margin-top:auto;display:flex;flex-direction:column;gap:8px}
.hp-impl-row{background:var(--hp-lmuted-2);border-radius:10px;padding:11px 13px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.hp-impl-row span:first-child{font-size:12.5px;color:var(--hp-lsmall)}
.hp-impl-row span:last-child{font-size:12.5px;font-weight:400}

/* ---------- FAQ ---------- */
.hp-faq{background:#fff;color:var(--hp-ltext);padding:0 0 125px}
.hp-faq .hp-impl-head{text-align:center}
.hp-faq .hp-faq-list{margin:0 auto}
.hp-faq-list{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px;max-width:1100px;align-items:start}
.hp-faq-item{border:1px solid var(--hp-lborder);border-radius:14px;background:var(--hp-lmuted-3);overflow:hidden}
.hp-faq-item summary{cursor:pointer;list-style:none;padding:18px 22px;font-family:'Geist',system-ui,sans-serif;font-weight:600;font-size:15px;color:var(--hp-ltext);display:flex;align-items:center;justify-content:space-between;gap:14px}
.hp-faq-item summary::-webkit-details-marker{display:none}
.hp-faq-item summary::after{content:'+';width:28px;height:28px;border-radius:50%;background:var(--hp-ltext);color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:400;line-height:1;flex-shrink:0;transition:background .2s ease}
.hp-faq-item summary:hover::after{background:var(--hp-darkgreen)}
.hp-faq-item[open] summary::after{content:'\2212';background:var(--hp-darkgreen)}
.hp-faq-item p{margin:0;padding:0 22px 20px;font-size:14px;line-height:1.6;color:var(--hp-lbody)}
@media(max-width:700px){.hp-faq-list{grid-template-columns:1fr}}
@media(max-width:900px){.hp-grid4{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.hp-grid4{grid-template-columns:1fr}}

/* ---------- SHIFT ---------- */
.hp-shift{background:var(--hp-bg);padding:104px 0}
.hp-shift-head{max-width:900px;margin:0 auto var(--hp-space-head-content);padding:0 40px;text-align:center}
.hp-shift-h2{font-size:clamp(28px,3.4vw,39px);line-height:1.12;letter-spacing:-.03em;color:#fff;margin:0 0 var(--hp-space-heading-lead);text-wrap:pretty}
.hp-shift-grid{max-width:1100px;margin:52px auto 0;padding:0 40px;display:grid;grid-template-columns:1fr auto 1fr;gap:34px;align-items:center}
.hp-shift-label{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px}
.hp-shift-stat{display:flex;align-items:baseline;gap:12px;margin-bottom:20px}
.hp-shift-stat b{font-size:44px;font-weight:600;letter-spacing:-.04em;line-height:1;font-family:'Geist',system-ui,sans-serif}
.hp-shift-stat span{font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.hp-shift-list{display:flex;flex-direction:column;gap:9px}
.hp-shift-bad{padding:15px 18px;border-radius:12px;background:rgba(255,255,255,.03);font-size:13.5px;color:var(--hp-dtext-2)}
.hp-shift-good{display:flex;align-items:center;gap:12px;padding:15px 18px;border-radius:12px;background:rgba(61,240,179,.07);font-size:13.5px;color:#dfe5e4}
.hp-shift-good img{width:28px;height:28px;flex-shrink:0}
.hp-shift-divider{display:flex;flex-direction:column;align-items:center;gap:12px}
.hp-shift-divider .line{width:1px;height:80px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.16))}
.hp-shift-divider .line2{width:1px;height:80px;background:linear-gradient(180deg,rgba(255,255,255,.16),transparent)}
.hp-shift-divider .arrow{font-size:16px;color:var(--hp-green)}
@media(max-width:760px){.hp-shift-grid{grid-template-columns:1fr;gap:20px}.hp-shift-divider{flex-direction:row}.hp-shift-divider .line,.hp-shift-divider .line2{width:60px;height:1px}.hp-shift-divider .arrow{display:inline-block;transform:rotate(90deg)}}
.hp-shift--grey{background:var(--hp-lborder)}
.hp-shift--grey .hp-shift-h2{color:var(--hp-ltext)}
.hp-shift--grey .hp-shift-bad{background:#fff;color:var(--hp-lbody)}
.hp-shift--grey .hp-shift-good{background:#3ea672;color:#fff}
.hp-shift--grey .hp-shift-good img{filter:brightness(0) invert(1)}
.hp-shift--grey .hp-shift-divider .arrow{color:var(--hp-darkgreen)}
.hp-shift--grey .hp-shift-divider .line{background:linear-gradient(180deg,transparent,rgba(16,20,19,.18))}
.hp-shift--grey .hp-shift-divider .line2{background:linear-gradient(180deg,rgba(16,20,19,.18),transparent)}

/* ---------- INTEGRATIONS ---------- */
.hp-integrations{background:#fff;color:var(--hp-ltext);padding:100px 0 100px}
.hp-int-head{max-width:1180px;margin:0 auto var(--hp-space-head-content);padding:0 40px;text-align:center}
.hp-int-head h2{white-space:nowrap}
@media(max-width:760px){.hp-int-head h2{white-space:normal}}
.hp-int-rows{margin-top:52px;padding:36px 0 0;display:flex;flex-direction:column;gap:14px}
.hp-int-mask{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.hp-int-marq{display:flex;gap:14px;padding-right:14px;width:max-content}
.hp-int-marq.a{animation:hpMarq 30s linear infinite}
.hp-int-marq.b{animation:hpMarqR 34s linear infinite}
.hp-int-marq.c{animation:hpMarq 38s linear infinite}
.hp-int-chip{flex-shrink:0;display:flex;align-items:center;gap:12px;background:var(--hp-lmuted-2);border-radius:12px;padding:14px 24px}
.hp-int-chip img{width:24px;height:24px;object-fit:contain;flex-shrink:0}
.hp-int-chip span{font-size:15.5px;font-weight:500;color:#2c3332;white-space:nowrap;font-family:'Geist',system-ui,sans-serif}
.hp-int-lead{max-width:760px;margin:0 auto}

/* ---------- OUTCOMES ---------- */
.hp-outcomes{background:var(--hp-bg);border-radius:36px 36px 0 0;padding:100px 0 125px}
.hp-outc-head{max-width:820px;margin:0 auto;padding:0 40px;padding-bottom:var(--hp-space-head-content);text-align:center}
.hp-outc-mask{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.hp-outc-marq{display:flex;gap:20px;width:max-content;padding-right:20px;animation:hpMarq 44s linear infinite}
.hp-outc-card{flex-shrink:0;width:320px;min-height:200px;border-radius:20px;background:var(--hp-panel-2);box-shadow:0 26px 50px -32px rgba(0,0,0,.95);padding:28px;display:flex;flex-direction:column;justify-content:space-between}
.hp-outc-card .v{font-size:44px;font-weight:600;letter-spacing:-.03em;color:var(--hp-green);line-height:1;font-family:'Geist',system-ui,sans-serif}
.hp-outc-card .l{font-size:14px;line-height:1.55;color:var(--hp-dtext-1)}

/* ---------- CTA ----------
   Every CTA is a boxed card (.hp-cta-card) — same treatment on every page.
   .hp-cta-panel is an additional modifier that also rounds the outer section's
   top corners and gives the section itself the black background, for pages
   where the CTA section sits directly on the page background with nothing
   else supplying that visual weight. The card inside stays boxed either way.
   The footer directly below must always follow with zero gap so CTA+footer
   never show a seam. */
.hp-cta{background:var(--hp-bg);padding:100px 0 125px}
.hp-cta-wrap{max-width:1280px;margin:0 auto;padding:0 40px}
.hp-cta-card{border-radius:24px;background:radial-gradient(700px 300px at 50% 0%,rgba(61,240,179,.12),transparent 70%),rgba(255,255,255,.04);padding:72px 40px;text-align:center;display:flex;flex-direction:column;align-items:center}
.hp-cta-h2{font-size:clamp(15px,4.3vw,37px);line-height:1.16;letter-spacing:-.03em;color:#fff;margin:0 0 var(--hp-space-heading-lead);max-width:680px}
.hp-cta-h2-line{display:block;white-space:nowrap}
.hp-cta-p{font-size:15px;line-height:1.6;color:var(--hp-dtext-1);margin:0 auto 28px;max-width:560px}
.hp-cta-row{display:flex;gap:12px;justify-content:center;align-items:center;flex-wrap:wrap}
.hp-cta-caption{font-size:12.5px;color:var(--hp-dtext-4);margin:26px 0 0;max-width:520px}
.hp-cta.hp-cta-panel{border-radius:32px 32px 0 0;padding:88px 0 125px}
@media(max-width:560px){.hp-cta{padding:56px 0 90px}.hp-cta.hp-cta-panel{padding:56px 0 90px;border-radius:24px 24px 0 0}.hp-cta-card{padding:52px 24px}.hp-cta-row{flex-direction:column;width:100%}.hp-cta-row a{width:100%;text-align:center}}

/* ---------- FOOTER ---------- */
.hp-footer{background:var(--hp-bg);padding:0;overflow:hidden}
.hp-footer-wrap{max-width:1280px;margin:0 auto;padding:0 40px}
.hp-footer-panel{border-radius:24px;background:rgba(255,255,255,.03);padding:52px 48px}
.hp-footer-grid{display:grid;grid-template-columns:1.4fr .6fr .6fr .6fr;gap:44px}
.hp-footer-brand a{display:flex;align-items:center;gap:8px;color:#fff;font-family:'Geist',system-ui,sans-serif;font-weight:600;font-size:19px;margin-bottom:16px}
.hp-footer-brand img{width:30px;height:30px;flex-shrink:0}
.hp-footer-brand p{font-size:13.5px;line-height:1.7;color:var(--hp-dtext-2);margin:0;max-width:370px}
.hp-footer-certs{display:flex;align-items:center;gap:16px;margin-top:20px}
.hp-footer-certs img{width:auto;height:32px;flex-shrink:0;opacity:.85}
.hp-footer-certs img.sq{height:44px}
@media(max-width:560px){.hp-footer-certs{flex-wrap:wrap;gap:14px}}
.hp-fcol{display:flex;flex-direction:column;gap:13px}
.hp-fcol .h{font-size:13.5px;font-weight:600;color:#fff;margin-bottom:3px}
.hp-fcol a{font-size:13.5px;color:var(--hp-dtext-2)}
.hp-fcol a:hover{color:#fff}
.hp-footer-wordmark{margin-top:120px;max-width:1280px;margin-left:auto;margin-right:auto;padding:0 40px}
.hp-footer-wordmark img{width:100%;aspect-ratio:1157/262;display:block;opacity:.25;user-select:none;pointer-events:none}
.hp-footer-bottom{max-width:1280px;margin:0 auto;padding:64px 40px 40px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:flex-start}
.hp-footer-bottom p{font-size:12.5px;color:var(--hp-dtext-5);margin:0}
.hp-footer-legal{display:flex;gap:28px;font-size:12.5px}
.hp-footer-legal a{color:var(--hp-dtext-2)}
.hp-footer-legal a:hover{color:#fff}
@media(max-width:760px){
  .hp-footer-grid{grid-template-columns:1fr 1fr;row-gap:32px}
  .hp-footer-brand{grid-column:1/-1}
  .hp-footer-wordmark{margin-top:60px}
}

/* ---------- PRODUCT-PAGE HERO (smaller headline than the homepage hero) ---------- */
.hp-h1-md{font-size:clamp(30px,5.6vw,51px);line-height:1.08;letter-spacing:-.03em;margin:0 0 var(--hp-space-heading-lead);color:#fff}

/* ---------- DETAIL VISUAL ROW (icon + two-line label + status pill) ---------- */
.hp-dv-rows{display:flex;flex-direction:column;gap:8px}
.hp-dv-row{display:flex;align-items:center;gap:11px;background:var(--hp-lmuted-2);border-radius:10px;padding:9px 11px}
.hp-dv-ico{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.hp-dv-ico svg{width:15px;height:15px}
.hp-dv-ico.green{background:var(--hp-green-good-bg);color:var(--hp-darkgreen)}
.hp-dv-body{flex:1;min-width:0}
.hp-dv-body .l{font-size:12.5px;font-weight:600;color:var(--hp-ltext);line-height:1.3}
.hp-dv-body .s{font-size:11px;color:var(--hp-lsmall);line-height:1.3;margin-top:1px}
.hp-dv-pill{flex-shrink:0;font-size:10.5px;font-weight:600;padding:4px 9px;border-radius:999px}
.hp-dv-pill.c-good{color:var(--hp-green-good-text);background:var(--hp-green-good-bg)}
.hp-dv-pill.c-warn{color:var(--hp-amber-1);background:#fde4d1}
.hp-dv-pill.c-neutral{color:var(--hp-lsmall);background:#fff;border:1px solid var(--hp-lborder)}

/* ---------- DETAIL VISUAL STATS (stat chips + sparkline) ---------- */
.hp-dv-stats{display:flex;gap:8px;margin-bottom:12px}
.hp-dv-stat{flex:1;background:var(--hp-lmuted-2);border-radius:10px;padding:10px 11px;display:flex;flex-direction:column;gap:2px}
.hp-dv-stat .n{font-family:'Geist',system-ui,sans-serif;font-size:16px;font-weight:600;color:var(--hp-ltext)}
.hp-dv-stat .l{font-size:10px;color:var(--hp-lsmall);line-height:1.3}
.hp-dv-spark{display:block;width:100%;height:52px}

/* ---------- DETAIL VISUAL PILL CLUSTER ---------- */
.hp-dv-pillcluster{display:flex;flex-direction:column;align-items:center;gap:9px;padding:6px 0}
.hp-dv-pillitem{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;padding:8px 16px;border-radius:999px;background:var(--hp-lmuted-2);color:var(--hp-lsmall)}
.hp-dv-pillitem svg{width:13px;height:13px;flex-shrink:0}
.hp-dv-pillitem.active{background:var(--hp-darkgreen);color:#fff;font-size:12.5px;padding:9px 18px}

/* ---------- DETAIL VISUAL BAR CHART ---------- */
.hp-dv-bars{display:flex;align-items:flex-end;gap:8px;height:64px;padding:16px 2px 0}
.hp-dv-bar{flex:1;position:relative;background:var(--hp-green-good-bg);border-radius:5px 5px 2px 2px;min-height:10px}
.hp-dv-bar .v{position:absolute;top:-16px;left:0;right:0;text-align:center;font-size:9.5px;font-weight:600;color:var(--hp-darkgreen);white-space:nowrap}
.hp-dv-bar.warn{background:#fde4d1}
.hp-dv-bar.warn .v{color:var(--hp-amber-1)}
.hp-dv-bars-labels{display:flex;gap:8px;margin-top:7px}
.hp-dv-bars-labels span{flex:1;text-align:center;font-size:10px;color:var(--hp-lsmall)}

/* ---------- STEP BADGE (reusable small pill, e.g. "Step 01") ---------- */
.hp-step-badge{display:inline-block;align-self:flex-start;font-family:'Geist',system-ui,sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--hp-darkgreen);background:var(--hp-green-good-bg);padding:4px 10px;border-radius:999px;margin-bottom:14px}

/* ---------- SOLUTION (alternating step rows) ---------- */
.hp-sol{background:#fff;color:var(--hp-ltext);padding:100px 0 125px}
/* Solution reuses the Platform Overview card (.hp-pf-card), but this section's
   background is white, so the card itself needs a visible surface — invert the
   card/visual shading versus Platform Overview (which sits on a grey section). */
.hp-sol .hp-pf-grid .hp-pf-card,.hp-sol .hp-grid4 .hp-pf-card{background:var(--hp-lmuted)}
/* Solution section cards are informational, not links — no click/hover affordance (that's reserved for Platform Overview) */
.hp-sol .hp-pf-grid .hp-pf-card,.hp-sol .hp-grid4 .hp-pf-card{cursor:default}
.hp-pf-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}
.hp-sol .hp-pf-grid .hp-pf-card:hover,.hp-sol .hp-grid4 .hp-pf-card:hover{box-shadow:none;transform:none}
.hp-sol .hp-pf-grid .hp-pf-visual,.hp-sol .hp-grid4 .hp-pf-visual{background:#fff}
.hp-sol .hp-pf-grid .hp-pf-row,.hp-sol .hp-grid4 .hp-pf-row{background:var(--hp-lmuted-2)}
.hp-sol .hp-pf-grid .hp-pf-foot,.hp-sol .hp-grid4 .hp-pf-foot{border-top-color:#e2e5e4}
.hp-sol-wrap{max-width:1280px;margin:0 auto;padding:0 40px}
.hp-sol-head{max-width:760px;margin:0 0 var(--hp-space-head-content)}
.hp-sol-list{display:flex;flex-direction:column;gap:64px}
.hp-sol-row{display:grid;grid-template-columns:1fr .85fr;gap:56px;align-items:center}
.hp-sol-row.flip{grid-template-columns:.85fr 1fr}
.hp-sol-row.flip .hp-sol-copy{order:2}
.hp-sol-row.flip .hp-sol-visual{order:1}
.hp-sol-step{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--hp-darkgreen);margin-bottom:14px}
.hp-sol-step svg{width:14px;height:14px}
.hp-sol-copy .t{font-family:'Geist',system-ui,sans-serif;font-size:24px;font-weight:600;letter-spacing:-.02em;line-height:1.2;color:var(--hp-ltext);margin:0 0 12px}
.hp-sol-copy p{font-size:14.5px;line-height:1.65;color:var(--hp-lbody);margin:0 0 16px}
.hp-sol-points{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:8px}
.hp-sol-points li{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;color:var(--hp-lbody);line-height:1.5}
.hp-sol-points svg{width:14px;height:14px;flex-shrink:0;margin-top:2px;color:var(--hp-darkgreen)}
.hp-sol-out{display:inline-flex;align-self:flex-start;background:var(--hp-green-good-bg);color:var(--hp-green-good-text);font-size:12.5px;font-weight:600;padding:8px 14px;border-radius:999px}
.hp-sol-visual{background:var(--hp-lmuted);border-radius:16px;padding:20px;display:flex;flex-direction:column;gap:8px}
.hp-sol-vrow{background:#fff;border-radius:9px;padding:11px 13px;display:flex;justify-content:space-between;gap:10px}
.hp-sol-vrow span:first-child{font-size:12px;color:var(--hp-lsmall)}
.hp-sol-vrow span:last-child{font-size:12px;font-weight:400}
@media(max-width:820px){.hp-sol-row,.hp-sol-row.flip{grid-template-columns:1fr}.hp-sol-row.flip .hp-sol-copy,.hp-sol-row.flip .hp-sol-visual{order:0}}

/* ---------- ANOMALY CATALOGUE ("What we catch") ---------- */
.hp-anom{background:var(--hp-bg);padding:100px 0 125px}
.hp-anom-wrap{max-width:1280px;margin:0 auto;padding:0 40px}
.hp-anom-head{max-width:760px;margin:0 0 var(--hp-space-head-content)}
.hp-anom-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
/* Dark-section overrides for the reused Platform Overview / Solution card pattern */
.hp-anom-grid .hp-pf-card{background:var(--hp-panel-2);box-shadow:0 26px 50px -34px rgba(0,0,0,.95)}
.hp-anom-grid .hp-pf-card:hover{box-shadow:0 14px 30px -18px rgba(0,0,0,.7);transform:translateY(-3px)}
.hp-anom-grid .hp-pf-card .t{color:#fff}
.hp-anom-grid .hp-pf-card p{color:var(--hp-dtext-1)}
.hp-anom-grid .hp-pf-visual{background:transparent;padding:0;margin-top:auto}
.hp-anom-grid .hp-dv-row{background:rgba(255,255,255,.05)}
.hp-anom-grid .hp-dv-body .l{color:#fff}
.hp-anom-grid .hp-dv-body .s{color:var(--hp-dtext-4)}
.hp-anom-grid .hp-dv-ico.green{background:rgba(61,240,179,.14);color:var(--hp-green)}
.hp-anom-grid .hp-step-badge{background:rgba(255,255,255,.08);color:var(--hp-dtext-2)}
.hp-anom-grid .hp-dv-stat{background:rgba(255,255,255,.05)}
.hp-anom-grid .hp-dv-stat .n{color:#fff}
.hp-anom-grid .hp-dv-stat .l{color:var(--hp-dtext-4)}
.hp-anom-grid .hp-dv-pillitem{background:rgba(255,255,255,.06);color:var(--hp-dtext-3)}
.hp-anom-grid .hp-dv-bar{background:rgba(61,240,179,.18)}
.hp-anom-grid .hp-dv-bar .v{color:var(--hp-green)}
.hp-anom-grid .hp-dv-bar.warn{background:rgba(232,163,85,.22)}
.hp-anom-grid .hp-dv-bar.warn .v{color:#e8a355}
.hp-anom-grid .hp-dv-bars-labels span{color:var(--hp-dtext-3)}
@media(max-width:900px){.hp-anom-grid{grid-template-columns:1fr 1fr}}
/* Penny-to-penny reconciliation chain + RTO stat callout (Shopify/D2C page) */
.hp-recon-chain{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;margin:0 0 24px}
.hp-recon-chip{background:var(--hp-panel-2);border-radius:14px;padding:14px 18px;min-width:120px;text-align:center;box-shadow:0 20px 40px -28px rgba(0,0,0,.9);display:flex;flex-direction:column;align-items:center;gap:4px}
.hp-recon-chip .v{font-family:'Geist',system-ui,sans-serif;font-size:18px;font-weight:600;color:#fff}
.hp-recon-chip .l{font-size:11px;color:var(--hp-dtext-2)}
.hp-recon-eq{font-size:18px;font-weight:600;color:var(--hp-dtext-3)}
.hp-recon-note{max-width:720px;margin:0 auto 8px;text-align:center;font-size:14px;line-height:1.6;color:var(--hp-dtext-1)}
.hp-rto-callout{max-width:640px;margin:40px auto 0;text-align:center;padding-top:40px;border-top:1px solid rgba(255,255,255,.08)}
.hp-rto-callout .big{display:block;font-family:'Geist',system-ui,sans-serif;font-size:clamp(40px,6vw,64px);font-weight:700;color:var(--hp-green);line-height:1;margin-bottom:8px}
.hp-rto-callout h3{font-family:'Geist',system-ui,sans-serif;font-size:clamp(20px,2.6vw,26px);color:#fff;margin:0 0 12px}
.hp-rto-callout p{font-size:14.5px;line-height:1.6;color:var(--hp-dtext-1);margin:0}
@media(max-width:560px){.hp-recon-chip{min-width:104px;padding:12px 14px}.hp-recon-eq{display:none}}
@media(max-width:560px){.hp-anom-grid{grid-template-columns:1fr}}

/* ---------- ONE PO, END TO END — hub & spoke journey diagram ---------- */
.hp-journey-legend{display:flex;flex-wrap:wrap;gap:22px;margin:0 0 28px}
.hp-journey-legend span{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--hp-dtext-2)}
.hp-journey-legend .dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex-shrink:0}
.hp-journey-legend .dot.amazon{background:var(--hp-jn-amazon)}
.hp-journey-legend .dot.finnoto{background:var(--hp-jn-finnoto)}
.hp-journey-legend .dot.tpl{background:var(--hp-jn-tpl)}
.hp-journey-diagram{position:relative;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:14px;max-width:760px;margin:0 auto}
.hp-journey-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.hp-journey-lines line{stroke:rgba(255,255,255,.16);stroke-width:.012;stroke-dasharray:.03 .035}
.hp-journey-node,.hp-journey-hub{position:relative;z-index:1;background:var(--hp-panel-2);border:1px solid rgba(255,255,255,.07);border-radius:16px;padding:16px 18px;display:flex;flex-direction:column;box-shadow:0 20px 40px -30px rgba(0,0,0,.9)}
.hp-journey-node .b{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;font-size:11px;font-weight:700;color:#fff;margin-bottom:10px}
.hp-journey-node.amazon .b{background:var(--hp-jn-amazon)}
.hp-journey-node.finnoto .b{background:var(--hp-jn-finnoto)}
.hp-journey-node.tpl .b{background:var(--hp-jn-tpl)}
.hp-journey-node .t{font-family:'Geist',system-ui,sans-serif;font-size:14.5px;font-weight:600;color:#fff;margin-bottom:3px}
.hp-journey-node .s{font-size:11.5px;line-height:1.4;color:var(--hp-dtext-4)}
.hp-journey-hub{align-items:center;justify-content:center;text-align:center;background:linear-gradient(165deg,var(--hp-panel-2),var(--hp-panel));border-color:rgba(124,108,246,.35)}
.hp-journey-hub .ico{width:34px;height:34px;border-radius:10px;background:var(--hp-jn-finnoto);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Geist',system-ui,sans-serif;font-weight:700;font-size:15px;margin-bottom:8px}
.hp-journey-hub .l{font-family:'Geist',system-ui,sans-serif;font-size:14.5px;font-weight:600;color:#fff}
.hp-journey-hub .s{font-size:11px;color:var(--hp-dtext-4)}
.hp-journey-note{max-width:640px;margin:28px auto 0!important;text-align:center}
@media(prefers-reduced-motion:no-preference){
  .hp-journey-node{animation:hpJourneyPulse 8s ease-in-out infinite}
  .hp-journey-node:nth-of-type(1){animation-delay:0s}
  .hp-journey-node:nth-of-type(2){animation-delay:1s}
  .hp-journey-node:nth-of-type(3){animation-delay:2s}
  .hp-journey-node:nth-of-type(4){animation-delay:3s}
  .hp-journey-node:nth-of-type(5){animation-delay:4s}
  .hp-journey-node:nth-of-type(6){animation-delay:5s}
  .hp-journey-node:nth-of-type(7){animation-delay:6s}
  .hp-journey-node:nth-of-type(8){animation-delay:7s}
}
@keyframes hpJourneyPulse{0%{box-shadow:0 0 0 3px rgba(124,108,246,.45),0 20px 40px -30px rgba(0,0,0,.9)}12%{box-shadow:0 0 0 3px rgba(124,108,246,.45),0 20px 40px -30px rgba(0,0,0,.9)}13%,100%{box-shadow:0 20px 40px -30px rgba(0,0,0,.9)}}
@media(max-width:760px){.hp-journey-diagram{grid-template-columns:1fr}.hp-journey-lines{display:none}.hp-journey-hub{order:-1}}

/* ---------- "BOOK A DEMO" MODAL ---------- */
/* The modal (and the portalled select list) live outside .hp on <body>, so the
   sitewide ".hp *{box-sizing:border-box}" reset never reaches them — without this
   every input rendered content-box and overflowed its grid column into its neighbour. */
.hp-demo-overlay,.hp-demo-overlay *,.hp-select-list,.hp-select-list *{box-sizing:border-box}
.hp-demo-overlay{position:fixed;inset:0;background:rgba(0,0,0,.72);display:flex;align-items:center;justify-content:center;padding:24px;z-index:999;opacity:0;visibility:hidden;transition:opacity .2s ease;font-family:'Inter',system-ui,sans-serif}
.hp-demo-overlay.open{opacity:1;visibility:visible}
.hp-demo-modal{background:var(--hp-panel);border:1px solid rgba(255,255,255,.08);border-radius:24px;max-width:640px;width:100%;max-height:90vh;overflow-y:auto;padding:44px 48px;position:relative;transform:translateY(12px);transition:transform .2s ease;font-family:'Inter',system-ui,sans-serif}
.hp-demo-overlay.open .hp-demo-modal{transform:translateY(0)}
.hp-demo-close{position:absolute;top:26px;right:28px;background:none;border:0;color:var(--hp-dtext-3);font-size:22px;line-height:1;cursor:pointer;padding:6px;font-family:inherit}
.hp-demo-title{font-family:'Geist',system-ui,sans-serif;font-size:25px;font-weight:600;color:#fff;margin:0 0 14px;letter-spacing:-.02em;line-height:1.25}
.hp-demo-sub{font-family:'Inter',system-ui,sans-serif;font-size:14.5px;line-height:1.65;color:var(--hp-dtext-1);margin:0 0 26px;max-width:520px}
.hp-demo-step{display:block;font-family:'Geist',system-ui,sans-serif;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--hp-dtext-4);margin-bottom:24px}
.hp-demo-form{display:flex;flex-direction:column;gap:24px}
.hp-demo-row{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
.hp-demo-form label{display:flex;flex-direction:column;gap:9px;font-family:'Inter',system-ui,sans-serif;font-size:13px;color:var(--hp-dtext-2);font-weight:500}
.hp-demo-form input,.hp-demo-form textarea{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.14);border-radius:11px;padding:13px 15px;color:#fff;font-size:14.5px;line-height:1.4;font-family:'Inter',system-ui,sans-serif;width:100%}
.hp-demo-form input::placeholder,.hp-demo-form textarea::placeholder{color:var(--hp-dtext-4);font-family:inherit}
.hp-demo-form input:focus,.hp-demo-form textarea:focus{outline:none;border-color:var(--hp-green)}
.hp-demo-form input:-webkit-autofill,.hp-demo-form input:-webkit-autofill:hover,.hp-demo-form input:-webkit-autofill:focus,.hp-demo-form textarea:-webkit-autofill{-webkit-text-fill-color:#fff;-webkit-box-shadow:0 0 0 1000px rgba(255,255,255,.04) inset;box-shadow:0 0 0 1000px rgba(255,255,255,.04) inset;caret-color:#fff;transition:background-color 9999s ease-in-out 0s}
.hp-select-btn:-webkit-autofill{-webkit-text-fill-color:var(--hp-dtext-4)}
.hp-demo-form textarea{resize:vertical;min-height:76px}
.hp-demo-submit{width:100%;background:#fff;color:#0a0c0b;border:0;border-radius:999px;padding:15px;font-size:15px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;font-family:'Geist',system-ui,sans-serif;transition:background .18s ease,color .18s ease;margin-top:6px}
.hp-demo-submit:hover{background:var(--hp-green);color:var(--hp-green-on)}
.hp-demo-legal{font-family:'Inter',system-ui,sans-serif;font-size:11.5px;color:var(--hp-dtext-4);text-align:center;margin:8px 0 0}
.hp-demo-legal a{color:var(--hp-dtext-2);text-decoration:underline}
@media(max-width:560px){.hp-demo-modal{padding:30px 24px}.hp-demo-row{grid-template-columns:1fr}}

/* custom "team size" dropdown — native <select> can't be styled consistently, so this is a fake
   listbox. Its open list is portalled to <body> (see home.js) and positioned fixed, purely so the
   modal's own overflow-y:auto never clips it. */
.hp-select{position:relative;display:flex;flex-direction:column;gap:9px;font-family:'Inter',system-ui,sans-serif;font-size:13px;color:var(--hp-dtext-2);font-weight:500}
.hp-select-btn{width:100%;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.14);border-radius:11px;padding:13px 40px 13px 15px;color:var(--hp-dtext-4);font-size:14.5px;line-height:1.4;font-family:'Inter',system-ui,sans-serif;text-align:left;position:relative;cursor:pointer;display:block}
.hp-select.open .hp-select-btn,.hp-select-btn:focus{outline:none;border-color:var(--hp-green)}
.hp-select-value[data-empty]{color:var(--hp-dtext-4)}
.hp-select-value:not([data-empty]){color:#fff}
.hp-select-caret{position:absolute;top:50%;right:16px;transform:translateY(-50%);color:var(--hp-dtext-3);transition:transform .18s ease;pointer-events:none}
.hp-select.open .hp-select-caret{transform:translateY(-50%) rotate(180deg)}
.hp-select-list{position:fixed;background:var(--hp-panel-2);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:6px;box-shadow:0 20px 40px -20px rgba(0,0,0,.8);z-index:1001;list-style:none;margin:0}
.hp-select-list li{padding:10px 12px;border-radius:9px;color:var(--hp-dtext-2);font-size:14px;font-family:'Inter',system-ui,sans-serif;cursor:pointer;transition:background .12s ease,color .12s ease}
.hp-select-list li:hover{background:rgba(255,255,255,.06);color:#fff}
.hp-select-list li.active{background:rgba(61,240,179,.12);color:var(--hp-green)}
.hp-select-error{display:none;font-size:12px;color:#e8a355;margin-top:2px}
.hp-select.error .hp-select-btn{border-color:#e8a355}
.hp-select.error .hp-select-error{display:block}

/* ---------- DEMO SCHEDULED (confirmation page) ---------- */
.hp-demo-confirm{background:var(--hp-bg);padding:152px 0 100px;min-height:70vh}
.hp-demo-confirm-wrap{max-width:640px;margin:0 auto;padding:0 40px}
.hp-demo-check{width:52px;height:52px;border-radius:12px;border:1px solid rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;color:#fff;margin-bottom:28px}
.hp-demo-confirm-step{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--hp-dtext-4);margin-bottom:18px;font-family:'Geist',system-ui,sans-serif}
.hp-demo-confirm-h1{font-family:'Geist',system-ui,sans-serif;font-size:clamp(28px,3.6vw,35px);font-weight:600;color:#fff;letter-spacing:-.03em;margin:0 0 18px}
.hp-demo-confirm-p{font-family:'Inter',system-ui,sans-serif;font-size:15.5px;line-height:1.65;color:var(--hp-dtext-1);margin:0 0 32px}
.hp-demo-confirm-p strong{color:#fff;font-weight:600}
.hp-demo-card{border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:22px 24px;margin-bottom:28px;background:var(--hp-panel-2)}
.hp-demo-card-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.hp-demo-card-head .ico{width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;color:var(--hp-green);flex-shrink:0}
.hp-demo-card-head .t{font-family:'Geist',system-ui,sans-serif;font-size:15px;font-weight:600;color:#fff}
.hp-demo-card-head .s{font-size:12.5px;color:var(--hp-dtext-4);margin-top:2px}
.hp-demo-card p{font-size:13.5px;line-height:1.6;color:var(--hp-dtext-1);margin:0}
.hp-demo-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:32px}
.hp-demo-confirm-foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;padding-top:22px;border-top:1px solid rgba(255,255,255,.08);font-size:13px;color:var(--hp-dtext-3)}
.hp-demo-confirm-foot a{color:var(--hp-dtext-3)}
@media(max-width:560px){.hp-demo-confirm-wrap{padding:0 22px}}

@media(prefers-reduced-motion:reduce){
  .hp-logomarq,.hp-int-marq,.hp-outc-marq,.hp-ledger-feed,.hp-ledger-live i{animation:none!important}
}