/* ==========================================================================
   Page: homepage (resources/views/home/pages/landing.blade.php)
   Every selector is tag-qualified (div.x, a.x): the inline styles these replace
   used to beat single-class rules such as revideo.css `.rv-scope a`.
   Prefix: hp-{section}__{role}. One class per design element; the values are
   the design prototype's own declarations, moved out of style="" attributes
   (owner, 2026-09-11). Responsive and dark-mode variants for these classes
   are at the bottom of this file. Requires revideo.css tokens + home-v4.css.
   ========================================================================== */

/* ---- shared (same declaration reused in several sections) ---- */
span.hp-shared__label { color:#6d5ce6; }
div.hp-shared__stack-8 { display:flex; flex-direction:column; gap:6px; }
div.hp-shared__row-4 { display:flex; align-items:center; gap:8px; }
div.hp-shared__row-5 { display:flex; gap:2px; }
div.hp-shared__row-6 { display:flex; align-items:center; gap:14px; }
img.hp-shared__img-4 { width:15px; height:15px; }
img.hp-shared__img-5 { width:24px; height:24px; }
img.hp-shared__img-6 { width:20px; height:20px; }
div.hp-shared__row-7 { display:flex; align-items:center; gap:9px; }
div.hp-shared__label-2, span.hp-shared__label-2 { font-size:12px; color:#8e8ea3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
div.hp-shared__stack-7 { display:flex; flex-direction:column; gap:14px; max-width:640px; }
h2.hp-shared__title { margin:0; font-family:'Plus Jakarta Sans',sans-serif; font-size:42px; font-weight:800; letter-spacing:-.03em; line-height:1.06; text-wrap:pretty; }
div.hp-shared__row-2 { display:flex; align-items:center; gap:10px; }
div.hp-shared__stack-4 { display:flex; flex-direction:column; gap:7px; }
img.hp-shared__img-2 { width:14px; height:14px; }
p.hp-shared__text-2 { margin:0; font-size:15px; line-height:1.65; color:#5c5c70; }
img.hp-shared__img-3 { width:12px; height:12px; }
div.hp-shared__stack-5 { display:flex; flex-direction:column; gap:20px; }
div.hp-shared__stack-6 { display:flex; flex-direction:column; gap:12px; }
span.hp-shared__row-3 { width:28px; height:28px; border-radius:999px; background:linear-gradient(120deg,#5850ec,#8b5cf6); display:inline-flex; align-items:center; justify-content:center; font-size:14px; }
div.hp-shared__box { position:relative; }
span.hp-shared__dot-2 { width:9px; height:9px; border-radius:999px; background:#ff5f57; }
span.hp-shared__dot-3 { width:9px; height:9px; border-radius:999px; background:#febc2e; }
span.hp-shared__dot-4 { width:9px; height:9px; border-radius:999px; background:#28c840; }
div.hp-shared__row { display:flex; align-items:baseline; gap:10px; }
span.hp-shared__dot { width:7px; height:7px; border-radius:999px; background:#34d399; animation:rv-pulse 1.6s ease infinite; }
span.hp-shared__pill { align-self:flex-start; font-size:12px; font-weight:700; letter-spacing:.08em; color:#6d5ce6; background:#f0effa; border-radius:999px; padding:5px 13px; text-transform:uppercase; }
div.hp-shared__card { background:#fff; border:1px solid #ececf4; border-radius:26px; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 6px 24px -14px rgba(22,22,29,.1); transition:transform .22s cubic-bezier(.23,1,.32,1),box-shadow .22s cubic-bezier(.23,1,.32,1); }
div.hp-shared__stack-3 { padding:26px; display:flex; flex-direction:column; gap:12px; flex:1; }
h3.hp-shared__heading { margin:0; font-family:'Plus Jakarta Sans',sans-serif; font-size:20px; font-weight:800; letter-spacing:-.02em; line-height:1.2; }
p.hp-shared__text { margin:0; font-size:14.5px; line-height:1.65; color:#5c5c70; flex:1; }
div.hp-shared__stack { display:flex; flex-direction:column; gap:4px; }
div.hp-shared__stack-2, span.hp-shared__stack-2 { display:flex; flex-direction:column; gap:3px; }
img.hp-shared__img { width:22px; height:22px; }
div.hp-shared__stack-9 { display:flex; flex-direction:column; gap:18px; }
section.hp-shared__section { position:relative; z-index:1; max-width:1200px; margin:0 auto; padding:0 32px 112px; }

/* ---- hero ---- */
section.hp-hero__section { position:relative; z-index:1; position:relative; }
div.hp-hero__layer { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
div.hp-hero__layer-2 { position:absolute; top:50%; right:6%; transform:translateY(-50%); width:820px; height:820px; }
div.hp-hero__anim { position:absolute; inset:0; border-radius:50%; border:1.5px solid rgba(109,92,230,.22); animation:rv-sonar 5s cubic-bezier(.23,1,.32,1) infinite; }
div.hp-hero__anim-2 { position:absolute; inset:0; border-radius:50%; border:1.5px solid rgba(109,92,230,.22); animation:rv-sonar 5s cubic-bezier(.23,1,.32,1) 1.25s infinite; }
div.hp-hero__anim-3 { position:absolute; inset:0; border-radius:50%; border:1.5px solid rgba(109,92,230,.22); animation:rv-sonar 5s cubic-bezier(.23,1,.32,1) 2.5s infinite; }
div.hp-hero__anim-4 { position:absolute; inset:0; border-radius:50%; border:1.5px solid rgba(109,92,230,.22); animation:rv-sonar 5s cubic-bezier(.23,1,.32,1) 3.75s infinite; }
div.hp-hero__glow { position:absolute; top:-180px; right:-140px; width:640px; height:640px; border-radius:50%; background:radial-gradient(circle,rgba(139,92,246,.1),transparent 65%); }
div.hp-hero__glow-2 { position:absolute; bottom:-200px; left:-180px; width:560px; height:560px; border-radius:50%; background:radial-gradient(circle,rgba(88,80,236,.07),transparent 65%); }
div.hp-hero__layer-3 { position:absolute; inset:0; background:linear-gradient(0deg,#fbfbfd 0%,rgba(251,251,253,0) 22%); }
div.hp-hero__grid { position:relative; max-width:1200px; margin:0 auto; padding:64px 32px 96px; display:grid; grid-template-columns:1.04fr .96fr; gap:60px; align-items:center; pointer-events:none; }
div.hp-hero__glow-3 { position:absolute; top:-140px; right:-180px; width:560px; height:560px; background:radial-gradient(circle,rgba(109,92,230,.10),transparent 65%); pointer-events:none; }
div.hp-hero__stack { display:flex; flex-direction:column; gap:24px; pointer-events:auto; }
/* The admin H1 field may carry <span class="blue-text"> (old home page markup) — brand gradient here */
h1.hp-hero__title .blue-text, div.hp-hero__title .blue-text { background:linear-gradient(120deg,#5850ec,#8b5cf6); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:#6d5ce6; }
h1.hp-hero__title, div.hp-hero__title { margin:0; font-family:'Plus Jakarta Sans',sans-serif; letter-spacing:-.03em; font-size:clamp(34px,3.4vw,48px); line-height:1.1; font-weight:800; text-wrap:pretty; animation:rv-up .6s cubic-bezier(.23,1,.32,1) .08s both; }
p.hp-hero__text { margin:0; font-size:18.5px; line-height:1.6; color:#5c5c70; max-width:470px; text-wrap:pretty; animation:rv-up .6s cubic-bezier(.23,1,.32,1) .16s both; }

/* ---- proof ---- */
div.hp-proof__anim { display:flex; align-items:center; gap:16px; flex-wrap:wrap; animation:rv-up .6s cubic-bezier(.23,1,.32,1) .24s both; }
div.hp-proof__row { display:flex; }
span.hp-proof__row-4 { width:16px; height:16px; border-radius:2px; background:#00b67a; display:inline-flex; align-items:center; justify-content:center; color:#fff; font-size:10px; }
span.hp-proof__row-5 { width:16px; height:16px; border-radius:2px; background:linear-gradient(90deg,#00b67a 78%,#e3e3ec 78%); display:inline-flex; align-items:center; justify-content:center; color:#fff; font-size:10px; }
span.hp-proof__strong { font-size:14px; font-weight:800; letter-spacing:-.01em; }
span.hp-proof__label { font-size:13.5px; color:#5c5c70; }
span.hp-proof__row-7 { display:inline-flex; align-items:center; gap:5px; transition:opacity .18s,transform .18s cubic-bezier(.23,1,.32,1); opacity:.9; }
span.hp-proof__strong-2 { font-size:14px; font-weight:800; letter-spacing:-.02em; color:#16161d; }
img.hp-proof__img-2 { height:17px; opacity:.9; transition:opacity .18s,transform .18s cubic-bezier(.23,1,.32,1); }
span.hp-proof__dot { width:9px; height:9px; border-radius:999px; background:#FF9D28; }

/* ---- widget ---- */
div.hp-widget__anim { perspective:1100px; animation:rv-up .7s cubic-bezier(.23,1,.32,1) .2s both; pointer-events:auto; position:relative; }
div.hp-widget__anim-2 { position:absolute; top:-26px; left:-30px; width:52px; height:52px; border-radius:999px; background:#fff; border:1px solid #ececf4; box-shadow:0 10px 26px -8px rgba(22,22,29,.18); display:flex; align-items:center; justify-content:center; animation:rv-float-a 4.2s ease-in-out infinite; z-index:2; pointer-events:none; }
div.hp-widget__anim-3 { position:absolute; top:34%; right:-26px; width:46px; height:46px; border-radius:999px; background:#fff; border:1px solid #ececf4; box-shadow:0 10px 26px -8px rgba(22,22,29,.18); display:flex; align-items:center; justify-content:center; animation:rv-float-b 3.6s ease-in-out .6s infinite; z-index:2; pointer-events:none; }
div.hp-widget__anim-4 { position:absolute; bottom:-20px; left:-22px; width:46px; height:46px; border-radius:999px; background:#fff; border:1px solid #ececf4; box-shadow:0 10px 26px -8px rgba(22,22,29,.18); display:flex; align-items:center; justify-content:center; animation:rv-float-c 4.8s ease-in-out 1.1s infinite; z-index:2; pointer-events:none; }
img.hp-widget__img-3 { width:21px; height:21px; }
div.hp-widget__card { background:rgba(22,22,29,.04); border:1px solid rgba(22,22,29,.06); border-radius:32px; padding:10px; transition:transform .18s ease-out; will-change:transform; }
div.hp-widget__card-2 { background:#fff; border:1px solid rgba(22,22,29,.06); border-radius:24px; padding:26px; display:flex; flex-direction:column; gap:15px; box-shadow:0 30px 80px -30px rgba(80,63,205,.25),inset 0 1px 0 rgba(255,255,255,.8); }
div.hp-widget__row { display:flex; justify-content:space-between; align-items:center; }
span.hp-widget__label { font-family:'Plus Jakarta Sans',sans-serif; letter-spacing:-.02em; font-size:17px; font-weight:600; }
span.hp-widget__pill { font-size:12px; font-weight:600; color:#6d5ce6; background:#f0effa; border-radius:999px; padding:4px 12px; }
div.hp-widget__card-3 { border:1.5px dashed #d6d4ee; border-radius:18px; padding:36px 20px; display:flex; flex-direction:column; align-items:center; gap:10px; cursor:pointer; background:#fafaff; transition:all .22s cubic-bezier(.23,1,.32,1); }
img.hp-widget__img-4 { width:46px; height:46px; object-fit:contain; animation:rv-float 3.5s ease-in-out infinite; }
/* picked-file poster (home-v4.js swaps the mascot for a captured frame) */
img.hp-widget__img-4.is-poster { width:100%; max-width:360px; height:auto; aspect-ratio:16/9; object-fit:cover; border-radius:14px; background:#16161d; box-shadow:0 14px 32px -16px rgba(22,22,29,.5); animation:none; }
div.hp-widget__box { font-size:16px; font-weight:700; }
div.hp-widget__box-2 { font-size:13px; color:#8e8ea3; }
input.hp-widget__input { background:#fafaff; border:1px solid #e4e4ef; border-radius:14px; padding:14px 16px; color:#16161d; font-size:14.5px; font-family:'Plus Jakarta Sans',sans-serif; outline:none; transition:border-color .3s,box-shadow .3s; }
div.hp-widget__anim-5 { display:none; flex-direction:column; gap:10px; animation:rv-up .38s cubic-bezier(.23,1,.32,1) both; }
span.hp-widget__eyebrow { font-size:11.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:#8e8ea3; white-space:nowrap; }
span.hp-widget__label-2 { flex:1; height:1px; background:#f0f0f6; }
div.hp-widget__grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(196px,1fr)); gap:10px; }
button.hp-widget__btn { display:flex; flex-direction:column; align-items:flex-start; gap:8px; text-align:left; cursor:pointer; border-radius:16px; padding:15px; font-family:inherit; transition:all .2s cubic-bezier(.23,1,.32,1); background:#fff; border:1.5px solid #ececf4; }
span.hp-widget__row-3 { display:flex; align-items:center; gap:8px; width:100%; }
span.hp-widget__strong { width:19px; height:19px; border-radius:999px; flex-shrink:0; font-size:10px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; transition:all .18s; background:#fff; color:transparent; border:1.5px solid #dcdce8; }
span.hp-widget__strong-2 { font-size:14.5px; font-weight:800; letter-spacing:-.015em; color:#16161d; }
span.hp-widget__pill-2 { font-size:12.5px; font-weight:700; color:#00915f; background:#e8f8f1; border:1px solid #b9e8d4; border-radius:999px; padding:3px 10px; white-space:nowrap; }
span.hp-widget__label-3 { font-size:12.5px; color:#5c5c70; line-height:1.5; }
span.hp-widget__row-4 { display:flex; align-items:center; gap:8px; width:100%; flex-wrap:wrap; }
span.hp-widget__pill-3 { margin-left:auto; font-size:10px; font-weight:800; letter-spacing:.05em; color:#5b4dd1; background:#f0effa; border:1px solid #ddd6fe; border-radius:999px; padding:3px 8px; white-space:nowrap; }
span.hp-widget__row-5 { display:flex; gap:6px; align-items:center; }
span.hp-widget__strong-3 { font-size:11.5px; font-weight:800; color:#8e8ea3; letter-spacing:-.01em; }
label.hp-widget__box-3 { display:none; align-items:flex-start; gap:9px; font-size:12.5px; color:#5c5c70; line-height:1.5; cursor:pointer; margin-top:2px; }
input.hp-widget__input-2 { margin-top:3px; accent-color:#6d5ce6; }
strong.hp-widget__box-4 { color:#16161d; }
button.hp-widget__btn-2 { display:flex; align-items:center; justify-content:center; gap:12px; background:linear-gradient(120deg,#5850ec,#8b5cf6); color:#fff; border:none; border-radius:999px; padding:15px 20px; font-size:16px; font-weight:700; font-family:'Plus Jakarta Sans',sans-serif; cursor:pointer; transition:transform .22s cubic-bezier(.23,1,.32,1),box-shadow .22s cubic-bezier(.23,1,.32,1); }
span.hp-widget__row-6 { width:28px; height:28px; border-radius:999px; background:rgba(255,255,255,.18); display:flex; align-items:center; justify-content:center; font-size:14px; }
div.hp-widget__box-5 { text-align:center; font-size:12.5px; color:#8e8ea3; }

/* ---- marquee ---- */
section.hp-marquee__section { position:relative; z-index:1; max-width:1200px; margin:0 auto; padding:0 32px 112px; display:flex; flex-direction:column; gap:18px; align-items:center; }
div.hp-marquee__box { font-size:13px; font-weight:600; letter-spacing:.1em; color:#77778c; text-transform:uppercase; }
div.hp-marquee__box-2 { width:100%; position:relative; padding-top:26px; }
div.hp-marquee__anim { position:absolute; top:0; left:50%; transform:translateX(-50%); z-index:5; pointer-events:none; animation:rv-toast 9s cubic-bezier(.23,1,.32,1) 1.4s infinite; opacity:0; }
div.hp-marquee__card { display:flex; align-items:center; gap:12px; background:#fff; border:1px solid #ececf4; border-radius:16px; padding:13px 16px; box-shadow:0 22px 50px -16px rgba(22,22,29,.28); width:296px; }
span.hp-marquee__row { width:38px; height:38px; border-radius:12px; background:linear-gradient(120deg,#5850ec,#8b5cf6); display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; animation:rv-bellring 9s ease 1.4s infinite; }
span.hp-marquee__row-2 { display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
span.hp-marquee__row-3 { display:flex; align-items:center; justify-content:space-between; gap:8px; }
span.hp-marquee__strong { font-size:13.5px; font-weight:800; color:#16161d; }
span.hp-marquee__label { font-size:11px; color:#8e8ea3; flex-shrink:0; }
div.hp-marquee__box-3 { width:100%; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
div.hp-marquee__anim-2 { display:inline-flex; gap:14px; animation:rv-marquee 46s linear infinite; padding-right:14px; }
div.hp-marquee__card-2 { width:196px; flex-shrink:0; background:#fff; border:1px solid #ececf4; border-radius:18px; padding:16px 18px; display:flex; flex-direction:column; gap:11px; box-shadow:0 4px 14px -6px rgba(22,22,29,.08); cursor:default; transition:transform .22s cubic-bezier(.23,1,.32,1),box-shadow .22s cubic-bezier(.23,1,.32,1),border-color .22s; }
span.hp-marquee__strong-2 { font-size:14.5px; font-weight:700; }
div.hp-marquee__stack { height:34px; display:flex; flex-direction:column; justify-content:center; gap:6px; }
div.hp-marquee__box-4 { height:4px; border-radius:99px; background:#ececf4; overflow:hidden; }
div.hp-marquee__anim-3 { height:100%; border-radius:99px; background:linear-gradient(90deg,#5850ec,#8b5cf6); width:0; animation:rv-draw .7s cubic-bezier(.23,1,.32,1) forwards; }
span.hp-marquee__label-3 { font-size:12px; color:#77778c; }
div.hp-marquee__anim-4 { display:inline-flex; gap:12px; animation:rv-marquee-r 52s linear infinite; padding-right:12px; }
div.hp-marquee__card-3 { display:inline-flex; align-items:center; gap:10px; flex-shrink:0; background:#fff; border:1px solid #ececf4; border-radius:999px; padding:11px 18px; box-shadow:0 4px 14px -8px rgba(22,22,29,.08); transition:border-color .22s,transform .22s cubic-bezier(.23,1,.32,1); }
span.hp-marquee__dot { width:8px; height:8px; border-radius:999px; background:#ef4444; flex-shrink:0; }
span.hp-marquee__label-4 { font-size:14px; font-weight:600; color:#40404f; white-space:nowrap; }

/* ---- problem ---- */
section.hp-problem__section { position:relative; z-index:1; max-width:1200px; margin:0 auto; padding:0 32px 112px; display:flex; flex-direction:column; gap:32px; }
h2.hp-problem__title { margin:0; font-family:'Plus Jakarta Sans',sans-serif; font-size:clamp(32px,3.4vw,44px); font-weight:800; letter-spacing:-.03em; line-height:1.06; text-wrap:pretty; }
p.hp-problem__text { margin:0; font-size:17.5px; line-height:1.6; color:#5c5c70; text-wrap:pretty; }
div.hp-problem__grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(272px,1fr)); gap:18px; align-items:stretch; }
div.hp-problem__card { background:#fff; border:1px solid #ececf4; border-radius:22px; padding:18px; display:flex; flex-direction:column; gap:13px; transition:transform .3s cubic-bezier(.23,1,.32,1),box-shadow .3s; }
div.hp-problem__row { display:flex; align-items:center; gap:11px; }
span.hp-problem__row-2 { width:34px; height:34px; border-radius:11px; background:#f5f5fa; border:1px solid #ececf4; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
div.hp-problem__stack-2 { display:flex; flex-direction:column; gap:1px; min-width:0; }
span.hp-problem__strong { font-size:14.5px; font-weight:800; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
div.hp-problem__card-2 { background:#fafaff; border:1px solid #ececf4; border-radius:14px; padding:13px 15px; flex:1; min-height:124px; display:flex; flex-direction:column; position:relative; overflow:hidden; }
span.hp-problem__eyebrow { font-size:10.5px; font-weight:800; letter-spacing:.08em; color:#8e8ea3; padding-bottom:7px; display:flex; align-items:center; gap:7px; }
span.hp-problem__dot { width:5px; height:5px; border-radius:999px; background:#c7c7d8; animation:rv-pulse 1.4s ease infinite; }
span.hp-problem__layer { position:absolute; left:0; right:0; top:34px; height:22px; background:linear-gradient(180deg,transparent,rgba(109,92,230,.14),transparent); animation:rv-scandown 3.2s cubic-bezier(.45,0,.55,1) infinite; pointer-events:none; }
div.hp-problem__row-3 { display:flex; gap:9px; align-items:center; padding:5px 0; border-bottom:1px solid #f1f1f6; }
div.hp-problem__stack-3 { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
span.hp-problem__label { font-size:11.5px; font-weight:600; color:#77778c; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
span.hp-problem__label-2 { font-size:10px; color:#a8a8bb; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
span.hp-problem__label-3 { font-size:11.5px; color:#77778c; padding-top:9px; line-height:1.5; }
span.hp-problem__strong-2 { display:inline-flex; align-self:flex-start; align-items:center; gap:7px; font-size:17px; font-weight:800; letter-spacing:-.025em; color:#c81e1e; }
span.hp-problem__row-4 { width:19px; height:19px; border-radius:999px; background:#fef2f2; border:1px solid #fecaca; font-size:9px; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
span.hp-problem__label-4 { font-size:13px; color:#5c5c70; line-height:1.5; }
span.hp-problem__label-5 { font-size:15px; }
div.hp-problem__card-3 { background:#fafaff; border:1px solid #ececf4; border-radius:14px; padding:13px 15px; flex:1; min-height:124px; display:flex; flex-direction:column; }
span.hp-problem__eyebrow-2 { font-size:10.5px; font-weight:800; letter-spacing:.08em; color:#8e8ea3; padding-bottom:9px; }
div.hp-problem__row-5 { display:flex; flex-wrap:wrap; gap:6px; }
span.hp-problem__row-6 { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600; color:#8e8ea3; background:#fff; border:1px solid #ececf4; border-radius:8px; padding:5px 9px; white-space:nowrap; animation:rv-chipcycle 6.6s ease-in-out 0.00s infinite; }
span.hp-problem__row-7 { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600; color:#8e8ea3; background:#fff; border:1px solid #ececf4; border-radius:8px; padding:5px 9px; white-space:nowrap; animation:rv-chipcycle 6.6s ease-in-out 0.55s infinite; }
span.hp-problem__row-8 { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600; color:#8e8ea3; background:#fff; border:1px solid #ececf4; border-radius:8px; padding:5px 9px; white-space:nowrap; animation:rv-chipcycle 6.6s ease-in-out 1.10s infinite; }
span.hp-problem__row-9 { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600; color:#8e8ea3; background:#fff; border:1px solid #ececf4; border-radius:8px; padding:5px 9px; white-space:nowrap; animation:rv-chipcycle 6.6s ease-in-out 1.65s infinite; }
span.hp-problem__row-10 { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600; color:#8e8ea3; background:#fff; border:1px solid #ececf4; border-radius:8px; padding:5px 9px; white-space:nowrap; animation:rv-chipcycle 6.6s ease-in-out 2.20s infinite; }
div.hp-problem__stack-4 { display:flex; flex-direction:column; padding-top:12px; }
span.hp-problem__eyebrow-3 { font-size:10.5px; font-weight:800; letter-spacing:.08em; color:#8e8ea3; padding-bottom:5px; }
div.hp-problem__anim { display:flex; align-items:center; gap:9px; padding:6px 0; border-bottom:1px solid #f1f1f6; animation:rv-daytick 5.4s cubic-bezier(.23,1,.32,1) 0.00s infinite; }
span.hp-problem__strong-3 { font-size:10.5px; font-weight:800; color:#8e8ea3; width:26px; flex-shrink:0; }
span.hp-problem__label-6 { font-size:11.5px; color:#8e8ea3; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
span.hp-problem__strong-4 { font-size:10.5px; font-weight:700; color:#77778c; white-space:nowrap; flex-shrink:0; }
div.hp-problem__anim-2 { display:flex; align-items:center; gap:9px; padding:6px 0; border-bottom:1px solid #f1f1f6; animation:rv-daytick 5.4s cubic-bezier(.23,1,.32,1) 0.32s infinite; }
div.hp-problem__anim-3 { display:flex; align-items:center; gap:9px; padding:6px 0; border-bottom:1px solid #f1f1f6; animation:rv-daytick 5.4s cubic-bezier(.23,1,.32,1) 0.64s infinite; }
span.hp-problem__strong-5 { font-size:10.5px; font-weight:700; color:#c81e1e; white-space:nowrap; flex-shrink:0; }
div.hp-problem__anim-4 { display:flex; align-items:center; gap:9px; padding:6px 0; border-bottom:1px solid #f1f1f6; animation:rv-daytick 5.4s cubic-bezier(.23,1,.32,1) 0.96s infinite; }
div.hp-problem__anim-5 { display:flex; align-items:center; gap:9px; padding:6px 0; border-bottom:1px solid #f1f1f6; animation:rv-daytick 5.4s cubic-bezier(.23,1,.32,1) 1.28s infinite; }
div.hp-problem__anim-6 { display:flex; align-items:center; gap:9px; padding:6px 0; border-bottom:1px solid #f1f1f6; animation:rv-daytick 5.4s cubic-bezier(.23,1,.32,1) 1.60s infinite; }
div.hp-problem__row-11 { display:flex; align-items:center; gap:8px; padding-top:11px; margin-top:auto; }
span.hp-problem__pill { font-size:11px; font-weight:800; color:#c81e1e; background:#fef2f2; border:1px solid #fecaca; border-radius:999px; padding:3px 9px; white-space:nowrap; }
span.hp-problem__strong-6 { font-size:14px; font-weight:800; color:#8e8ea3; }
span.hp-problem__eyebrow-4 { font-size:10.5px; font-weight:800; letter-spacing:.08em; color:#8e8ea3; padding-bottom:7px; }
div.hp-problem__stack-5 { display:flex; flex-direction:column; gap:5px; padding:9px 0; border-bottom:1px solid #f1f1f6; }
span.hp-problem__strong-7 { font-size:10px; font-weight:700; color:#8e8ea3; letter-spacing:.04em; }
span.hp-problem__row-12 { height:22px; border-radius:5px; background:#f4f4f9; display:flex; align-items:center; padding:0 5px; overflow:hidden; }
span.hp-problem__label-7 { --fw:64%; height:8px; border-radius:3px; background:#e2e0f0; animation:rv-fillin 5.4s cubic-bezier(.23,1,.32,1) 0.00s infinite; }
span.hp-problem__label-8 { width:1.5px; height:11px; background:#a0a0b2; margin-left:3px; animation:rv-caret 1s steps(1) infinite; }
span.hp-problem__label-9 { --fw:86%; height:8px; border-radius:3px; background:#e2e0f0; animation:rv-fillin 5.4s cubic-bezier(.23,1,.32,1) 1.15s infinite; }
span.hp-problem__label-10 { --fw:78%; height:8px; border-radius:3px; background:#e2e0f0; animation:rv-fillin 5.4s cubic-bezier(.23,1,.32,1) 2.30s infinite; }
span.hp-problem__label-11 { --fw:42%; height:8px; border-radius:3px; background:#e2e0f0; animation:rv-fillin 5.4s cubic-bezier(.23,1,.32,1) 3.45s infinite; }
span.hp-problem__label-12 { font-size:11.5px; color:#77778c; padding-top:10px; line-height:1.5; }
div.hp-problem__card-4 { background:linear-gradient(150deg,#16161d,#241f42); border:1px solid #16161d; border-radius:24px; padding:22px; display:flex; flex-direction:column; gap:16px; position:relative; overflow:hidden; box-shadow:0 30px 64px -28px rgba(80,63,205,.42); transition:transform .3s cubic-bezier(.23,1,.32,1); }
div.hp-problem__glow { position:absolute; top:-90px; right:-60px; width:300px; height:300px; background:radial-gradient(circle,rgba(139,92,246,.3),transparent 66%); pointer-events:none; }
div.hp-problem__row-13 { position:relative; display:flex; align-items:center; gap:11px; }
span.hp-problem__row-14 { width:34px; height:34px; border-radius:11px; background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.12); display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
img.hp-problem__img { width:17px; height:17px; object-fit:contain; }
span.hp-problem__strong-8 { font-size:14.5px; font-weight:800; letter-spacing:-.01em; color:#fff; }
span.hp-problem__label-13 { font-size:12px; color:#8a8aa0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
span.hp-problem__pill-2 { margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:800; color:#34d399; background:rgba(52,211,153,.12); border:1px solid rgba(52,211,153,.3); border-radius:999px; padding:4px 9px; white-space:nowrap; flex-shrink:0; }
span.hp-problem__dot-2 { width:6px; height:6px; border-radius:999px; background:#34d399; animation:rv-pulse 1.6s ease infinite; }
div.hp-problem__card-5 { position:relative; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09); border-radius:14px; padding:13px 15px; flex:1; min-height:124px; display:flex; flex-direction:column; }
span.hp-problem__eyebrow-5 { font-size:10.5px; font-weight:800; letter-spacing:.08em; color:#8a8aa0; padding-bottom:7px; }
div.hp-problem__anim-7 { display:flex; gap:11px; align-items:center; padding:8px 0; border-bottom:1px solid rgba(255,255,255,.07); animation:rv-newrow .5s cubic-bezier(.23,1,.32,1) 0.00s both; }
span.hp-problem__strong-9 { font-size:12.5px; font-weight:700; color:#f0f0f8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
span.hp-problem__label-14 { font-size:11px; color:#7c7c92; white-space:nowrap; }
span.hp-problem__pill-3 { font-size:11px; font-weight:800; color:#fb7185; background:rgba(251,113,133,.13); border:1px solid rgba(251,113,133,.3); border-radius:999px; padding:3px 8px; white-space:nowrap; flex-shrink:0; }
div.hp-problem__anim-8 { display:flex; gap:11px; align-items:center; padding:8px 0; border-bottom:1px solid rgba(255,255,255,.07); animation:rv-newrow .5s cubic-bezier(.23,1,.32,1) 0.16s both; }
div.hp-problem__anim-9 { display:flex; gap:11px; align-items:center; padding:8px 0; border-bottom:1px solid rgba(255,255,255,.07); animation:rv-newrow .5s cubic-bezier(.23,1,.32,1) 0.32s both; }
div.hp-problem__anim-10 { display:flex; gap:11px; align-items:center; padding:8px 0; border-bottom:1px solid rgba(255,255,255,.07); animation:rv-newrow .5s cubic-bezier(.23,1,.32,1) 0.48s both; }
div.hp-problem__anim-11 { display:flex; gap:11px; align-items:center; padding:8px 0; border-bottom:1px solid rgba(255,255,255,.07); animation:rv-newrow .5s cubic-bezier(.23,1,.32,1) 0.64s both; }
div.hp-problem__row-15 { display:flex; align-items:center; gap:8px; padding-top:10px; margin-top:auto; }
span.hp-problem__pill-4 { font-size:11px; font-weight:800; color:#34d399; background:rgba(52,211,153,.12); border:1px solid rgba(52,211,153,.3); border-radius:999px; padding:3px 9px; white-space:nowrap; }
div.hp-problem__stack-6 { position:relative; display:flex; flex-direction:column; gap:6px; }
span.hp-problem__strong-10 { display:inline-flex; align-self:flex-start; align-items:center; gap:7px; font-size:17px; font-weight:800; letter-spacing:-.025em; color:#fff; }
span.hp-problem__row-16 { width:19px; height:19px; border-radius:999px; background:rgba(52,211,153,.16); border:1px solid rgba(52,211,153,.4); color:#34d399; font-size:9px; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
span.hp-problem__label-15 { font-size:13px; color:#a3a3bd; line-height:1.5; }
div.hp-problem__card-6 { display:flex; align-items:center; gap:16px; flex-wrap:wrap; background:#fff; border:1px solid #ececf4; border-radius:20px; padding:20px 24px; }
span.hp-problem__strong-11 { font-size:15.5px; font-weight:700; letter-spacing:-.01em; flex:1; min-width:240px; text-wrap:pretty; }
a.hp-problem__btn { display:inline-flex; align-items:center; gap:11px; background:#16161d; color:#fff; border-radius:999px; padding:13px 11px 13px 22px; font-size:15px; font-weight:700; white-space:nowrap; transition:transform .16s cubic-bezier(.23,1,.32,1),box-shadow .16s; }
span.hp-problem__row-17 { width:27px; height:27px; border-radius:999px; background:linear-gradient(120deg,#5850ec,#8b5cf6); display:inline-flex; align-items:center; justify-content:center; font-size:13px; }

/* ---- walker ---- */
div.hp-walker__box { position:relative; z-index:0; height:104px; margin:-52px 0 0; overflow:hidden; pointer-events:none; user-select:none; }
div.hp-walker__layer { position:absolute; bottom:22px; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(22,22,29,.06) 14%,rgba(22,22,29,.06) 86%,transparent); }
div.hp-walker__anim { position:absolute; bottom:0; left:0; width:78px; height:96px; animation:rv-walk 30s linear 1s infinite; }
div.hp-walker__anim-2 { position:absolute; inset:0; animation:rv-bob .62s ease-in-out infinite; }
img.hp-walker__img { position:absolute; bottom:0; left:0; width:100%; height:auto; opacity:.62; animation:rv-frameA .62s steps(1,end) infinite; }
img.hp-walker__img-2 { position:absolute; bottom:0; left:0; width:100%; height:auto; opacity:0; animation:rv-frameB .62s steps(1,end) infinite; }
div.hp-walker__anim-3 { position:absolute; bottom:0; left:0; width:78px; height:96px; animation:rv-walk-rev 38s linear 0s infinite; }

/* ---- pain ---- */
section.hp-pain__section { position:relative; z-index:1; max-width:1200px; margin:0 auto; padding:0 32px 112px; display:flex; flex-direction:column; gap:44px; }
div.hp-pain__grid { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:34px; align-items:start; }
div.hp-pain__stack { display:flex; flex-direction:column; gap:10px; }
span.hp-pain__row { display:flex; flex-direction:column; gap:3px; text-align:left; min-width:0; }
span.hp-pain__strong { font-size:16.5px; font-weight:700; letter-spacing:-.01em; }
div.hp-pain__card { background:#fff; border:1px solid #ececf4; border-radius:26px; padding:32px; min-height:360px; box-shadow:0 18px 46px -30px rgba(22,22,29,.18); }
div.hp-pain__anim { display:flex; flex-direction:column; gap:22px; animation:rv-fadein .32s cubic-bezier(.23,1,.32,1) both; }
span.hp-pain__pill { display:inline-flex; align-self:flex-start; align-items:center; gap:8px; background:#f0effa; border:1px solid #ddd6fe; border-radius:999px; padding:6px 14px; font-size:11px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:#5b4dd1; }
h3.hp-pain__heading { margin:0; font-family:'Plus Jakarta Sans',sans-serif; font-size:28px; font-weight:800; letter-spacing:-.03em; line-height:1.14; text-wrap:pretty; }
p.hp-pain__text { margin:0; font-size:16.5px; line-height:1.65; color:#5c5c70; max-width:440px; text-wrap:pretty; }
div.hp-pain__card-2 { background:#fafaff; border:1px solid #ececf4; border-radius:18px; padding:18px; display:flex; flex-direction:column; gap:10px; }
span.hp-pain__eyebrow { font-size:11px; font-weight:800; letter-spacing:.08em; color:#8e8ea3; }
span.hp-pain__pill-2 { margin-left:auto; font-size:11.5px; font-weight:700; color:#c81e1e; background:#fef2f2; border:1px solid #fecaca; border-radius:999px; padding:3px 9px; }
div.hp-pain__card-3 { display:flex; align-items:center; gap:10px; background:#fff; border:1px solid #ececf4; border-radius:10px; padding:8px 11px; }
span.hp-pain__label { font-size:12.5px; font-weight:600; flex:1; }
span.hp-pain__strong-2 { font-size:11.5px; font-weight:700; color:#c81e1e; }
span.hp-pain__strong-3 { font-size:11.5px; font-weight:700; color:#00915f; }
span.hp-pain__strong-4 { display:inline-flex; align-self:flex-start; align-items:center; gap:9px; font-size:15px; font-weight:700; color:#16161d; }
div.hp-pain__card-4 { background:#fafaff; border:1px solid #ececf4; border-radius:18px; padding:18px; display:flex; align-items:flex-end; gap:22px; }
div.hp-pain__stack-3 { display:flex; flex-direction:column; gap:7px; flex:1; }
div.hp-pain__tile { height:34px; border-radius:8px; background:linear-gradient(90deg,#ddd6fe,#c4b5fd); width:52%; }
span.hp-pain__strong-5 { font-size:13px; font-weight:700; color:#6d5ce6; }
span.hp-pain__eyebrow-2 { font-size:11px; font-weight:800; letter-spacing:.08em; color:#c81e1e; }
div.hp-pain__tile-2 { height:34px; border-radius:8px; background:linear-gradient(90deg,#fca5a5,#ef4444); width:100%; }
span.hp-pain__strong-6 { font-size:13px; font-weight:700; color:#c81e1e; }
div.hp-pain__card-5 { background:#fafaff; border:1px solid #ececf4; border-radius:18px; padding:18px; display:flex; flex-direction:column; gap:9px; }
div.hp-pain__card-6 { display:flex; align-items:center; gap:9px; background:#fff; border:1.5px solid #ddd6fe; border-radius:10px; padding:8px 11px; }
span.hp-pain__pill-3 { font-size:9.5px; font-weight:800; color:#fff; background:linear-gradient(120deg,#5850ec,#8b5cf6); border-radius:999px; padding:2px 8px; white-space:nowrap; }
span.hp-pain__label-2 { font-size:12.5px; font-weight:600; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
div.hp-pain__card-7 { display:flex; align-items:center; gap:9px; background:#fff; border:1px solid #ececf4; border-radius:10px; padding:8px 11px; }
img.hp-pain__img { width:12px; height:12px; flex-shrink:0; }
span.hp-pain__label-3 { font-size:12.5px; color:#5c5c70; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
div.hp-pain__card-8 { background:#fafaff; border:1px solid #ececf4; border-radius:18px; padding:18px; display:flex; align-items:center; gap:16px; }
span.hp-pain__strong-7 { width:44px; height:44px; border-radius:999px; background:#fef2f2; border:1px solid #fecaca; color:#c81e1e; display:inline-flex; align-items:center; justify-content:center; font-size:19px; font-weight:800; flex-shrink:0; }
div.hp-pain__stack-4 { display:flex; flex-direction:column; gap:3px; min-width:0; }
span.hp-pain__strong-8 { font-size:14px; font-weight:700; }
span.hp-pain__label-4 { font-size:12.5px; color:#8e8ea3; line-height:1.5; }

/* ---- how ---- */
section.hp-how__section { position:relative; z-index:1; max-width:1200px; margin:0 auto; padding:0 32px 112px; display:flex; flex-direction:column; gap:48px; }
div.hp-how__stack { display:flex; flex-direction:column; gap:16px; align-items:center; text-align:center; }
span.hp-how__pill { display:inline-flex; align-items:center; gap:9px; background:#f0effa; border:1px solid #ddd6fe; border-radius:999px; padding:6px 15px; font-size:11.5px; font-weight:800; letter-spacing:.1em; color:#5b4dd1; }
img.hp-how__img { width:16px; height:16px; object-fit:contain; }
h2.hp-how__title { margin:0; font-family:'Plus Jakarta Sans',sans-serif; letter-spacing:-.03em; font-size:42px; font-weight:800; }
p.hp-how__text { margin:0; font-size:17.5px; line-height:1.6; color:#5c5c70; max-width:520px; text-wrap:pretty; }
div.hp-how__grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(238px,1fr)); gap:18px; }
div.hp-how__card { background:rgba(22,22,29,.03); border:1px solid rgba(22,22,29,.05); border-radius:28px; padding:8px; }
div.hp-how__card-2 { background:#fff; border:1px solid #ececf4; border-radius:22px; padding:28px; display:flex; flex-direction:column; gap:14px; height:100%; box-sizing:border-box; transition:transform .22s cubic-bezier(.23,1,.32,1); }
div.hp-how__stack-2 { background:#fafaff; border:1.5px dashed #d6d4ee; border-radius:14px; height:96px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; }
img.hp-how__img-2 { width:32px; height:32px; object-fit:contain; animation:rv-float 3s ease-in-out infinite; }
div.hp-how__row { display:flex; gap:8px; align-items:center; }
span.hp-how__label { font-size:11.5px; color:#8e8ea3; font-weight:600; }
div.hp-how__row-2 { display:flex; align-items:center; gap:12px; }
div.hp-how__row-3 { width:40px; height:40px; border-radius:13px; background:linear-gradient(120deg,#5850ec,#8b5cf6); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:16px; color:#fff; box-shadow:0 8px 20px -6px rgba(88,80,236,.5); }
h3.hp-how__heading { margin:0; font-family:'Plus Jakarta Sans',sans-serif; letter-spacing:-.02em; font-size:21px; font-weight:600; }
div.hp-how__row-4 { display:flex; align-items:center; gap:9px; margin-top:-2px; }
span.hp-how__row-5 { width:38px; height:38px; border-radius:999px; background:#f0effa; border:1px solid #ddd6fe; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; overflow:hidden; }
img.hp-how__img-4 { width:34px; height:34px; object-fit:contain; animation:rv-float 2.8s ease-in-out infinite; }
span.hp-how__label-2 { font-size:12.5px; font-style:italic; color:#8e8ea3; line-height:1.4; }
div.hp-how__card-3 { background:#0f0f16; border:1px solid #1e1e2b; border-radius:14px; height:96px; position:relative; overflow:hidden; padding:26px 14px 12px; box-sizing:border-box; display:flex; align-items:flex-end; gap:2.5px; }
div.hp-how__layer { position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px); background-size:100% 16px; }
span.hp-how__label-3 { flex:1; height:16px; border-radius:3px; background:linear-gradient(180deg,#a78bfa,#5850ec); transform-origin:bottom; animation:rv-eq 1.10s ease-in-out 0.00s infinite; opacity:0.71; }
span.hp-how__label-4 { flex:1; height:29px; border-radius:3px; background:linear-gradient(180deg,#a78bfa,#5850ec); transform-origin:bottom; animation:rv-eq 1.32s ease-in-out 0.06s infinite; opacity:0.84; }
span.hp-how__label-5 { flex:1; height:41px; border-radius:3px; background:linear-gradient(180deg,#a78bfa,#5850ec); transform-origin:bottom; animation:rv-eq 1.54s ease-in-out 0.11s infinite; opacity:0.96; }
span.hp-how__label-6 { flex:1; height:22px; border-radius:3px; background:linear-gradient(180deg,#a78bfa,#5850ec); transform-origin:bottom; animation:rv-eq 1.76s ease-in-out 0.17s infinite; opacity:0.77; }
span.hp-how__label-7 { flex:1; height:33px; border-radius:3px; background:linear-gradient(180deg,#a78bfa,#5850ec); transform-origin:bottom; animation:rv-eq 1.98s ease-in-out 0.22s infinite; opacity:0.88; }
span.hp-how__label-8 { flex:1; height:46px; border-radius:3px; background:linear-gradient(180deg,#a78bfa,#5850ec); transform-origin:bottom; animation:rv-eq 1.10s ease-in-out 0.28s infinite; opacity:1.01; }
span.hp-how__label-9 { flex:1; height:25px; border-radius:3px; background:linear-gradient(180deg,#a78bfa,#5850ec); transform-origin:bottom; animation:rv-eq 1.32s ease-in-out 0.33s infinite; opacity:0.80; }
span.hp-how__label-10 { flex:1; height:17px; border-radius:3px; background:linear-gradient(180deg,#a78bfa,#5850ec); transform-origin:bottom; animation:rv-eq 1.54s ease-in-out 0.39s infinite; opacity:0.72; }
span.hp-how__label-11 { flex:1; height:37px; border-radius:3px; background:linear-gradient(180deg,#a78bfa,#5850ec); transform-origin:bottom; animation:rv-eq 1.76s ease-in-out 0.44s infinite; opacity:0.92; }
span.hp-how__label-12 { flex:1; height:30px; border-radius:3px; background:linear-gradient(180deg,#a78bfa,#5850ec); transform-origin:bottom; animation:rv-eq 1.98s ease-in-out 0.49s infinite; opacity:0.85; }
span.hp-how__label-13 { flex:1; height:44px; border-radius:3px; background:linear-gradient(180deg,#a78bfa,#5850ec); transform-origin:bottom; animation:rv-eq 1.10s ease-in-out 0.55s infinite; opacity:0.99; }
span.hp-how__label-14 { flex:1; height:21px; border-radius:3px; background:linear-gradient(180deg,#a78bfa,#5850ec); transform-origin:bottom; animation:rv-eq 1.32s ease-in-out 0.60s infinite; opacity:0.76; }
span.hp-how__label-15 { flex:1; height:34px; border-radius:3px; background:linear-gradient(180deg,#a78bfa,#5850ec); transform-origin:bottom; animation:rv-eq 1.54s ease-in-out 0.66s infinite; opacity:0.89; }
span.hp-how__label-16 { flex:1; height:42px; border-radius:3px; background:linear-gradient(180deg,#a78bfa,#5850ec); transform-origin:bottom; animation:rv-eq 1.76s ease-in-out 0.71s infinite; opacity:0.97; }
span.hp-how__label-17 { flex:1; height:24px; border-radius:3px; background:linear-gradient(180deg,#a78bfa,#5850ec); transform-origin:bottom; animation:rv-eq 1.98s ease-in-out 0.77s infinite; opacity:0.79; }
span.hp-how__label-18 { flex:1; height:28px; border-radius:3px; background:linear-gradient(180deg,#a78bfa,#5850ec); transform-origin:bottom; animation:rv-eq 1.10s ease-in-out 0.82s infinite; opacity:0.83; }
span.hp-how__label-19 { flex:1; height:45px; border-radius:3px; background:linear-gradient(180deg,#a78bfa,#5850ec); transform-origin:bottom; animation:rv-eq 1.32s ease-in-out 0.88s infinite; opacity:1.00; }
span.hp-how__label-20 { flex:1; height:19px; border-radius:3px; background:linear-gradient(180deg,#a78bfa,#5850ec); transform-origin:bottom; animation:rv-eq 1.54s ease-in-out 0.94s infinite; opacity:0.74; }
span.hp-how__label-21 { flex:1; height:36px; border-radius:3px; background:linear-gradient(180deg,#a78bfa,#5850ec); transform-origin:bottom; animation:rv-eq 1.76s ease-in-out 0.99s infinite; opacity:0.91; }
span.hp-how__label-22 { flex:1; height:27px; border-radius:3px; background:linear-gradient(180deg,#a78bfa,#5850ec); transform-origin:bottom; animation:rv-eq 1.98s ease-in-out 1.04s infinite; opacity:0.82; }
span.hp-how__label-23 { flex:1; height:43px; border-radius:3px; background:linear-gradient(180deg,#a78bfa,#5850ec); transform-origin:bottom; animation:rv-eq 1.10s ease-in-out 1.10s infinite; opacity:0.98; }
span.hp-how__label-24 { flex:1; height:23px; border-radius:3px; background:linear-gradient(180deg,#a78bfa,#5850ec); transform-origin:bottom; animation:rv-eq 1.32s ease-in-out 1.16s infinite; opacity:0.78; }
div.hp-how__anim { position:absolute; top:0; bottom:0; left:0; width:14%; background:linear-gradient(90deg,transparent,rgba(196,181,253,.5),transparent); animation:rv-scanline 2.4s cubic-bezier(.5,0,.5,1) infinite; }
span.hp-how__layer-2 { position:absolute; top:8px; left:12px; font-size:9px; font-weight:800; letter-spacing:.09em; color:#8b8ba8; white-space:nowrap; }
div.hp-how__card-4 { background:#fafaff; border:1px solid #ececf4; border-radius:14px; height:96px; display:flex; flex-direction:column; justify-content:center; gap:6px; padding:0 16px; box-sizing:border-box; }
div.hp-how__anim-2 { display:flex; align-items:center; gap:8px; background:#fff; border:1px solid #ececf4; border-radius:8px; padding:5px 10px; animation:rv-rowin 5.2s cubic-bezier(.32,.72,0,1) infinite; }
span.hp-how__label-25 { font-size:11.5px; font-weight:600; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
span.hp-how__strong { font-size:11px; font-weight:700; color:#6d5ce6; }
div.hp-how__anim-3 { display:flex; align-items:center; gap:8px; background:#fff; border:1px solid rgba(109,92,230,.45); border-radius:8px; padding:5px 10px; animation:rv-rowin 5.2s cubic-bezier(.32,.72,0,1) .5s infinite; }
span.hp-how__pill-2 { font-size:9.5px; font-weight:700; color:#fff; background:linear-gradient(120deg,#5850ec,#8b5cf6); border-radius:999px; padding:2px 7px; white-space:nowrap; }
div.hp-how__anim-4 { display:flex; align-items:center; gap:8px; background:#fff; border:1px solid #ececf4; border-radius:8px; padding:5px 10px; animation:rv-rowin 5.2s cubic-bezier(.32,.72,0,1) 1s infinite; }
img.hp-how__img-6 { width:34px; height:34px; object-fit:contain; }
div.hp-how__anim-5 { display:flex; align-items:center; gap:7px; background:#fff; border:1px solid #b9e8d4; border-radius:8px; padding:5px 9px; animation:rv-rowin 5.2s cubic-bezier(.32,.72,0,1) 0s infinite; }
span.hp-how__dot { width:12px; height:12px; border-radius:999px; background:#e8f8f1; border:1px solid #b9e8d4; color:#00915f; font-size:7px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
span.hp-how__strong-2 { font-size:9.5px; font-weight:700; color:#00915f; white-space:nowrap; }
div.hp-how__anim-6 { display:flex; align-items:center; gap:7px; background:#fff; border:1px solid #ddd6fe; border-radius:8px; padding:5px 9px; animation:rv-rowin 5.2s cubic-bezier(.32,.72,0,1) 0.5s infinite; }
span.hp-how__dot-2 { width:12px; height:12px; border-radius:999px; background:#f0effa; border:1px solid #ddd6fe; color:#4c3fbf; font-size:7px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
span.hp-how__strong-3 { font-size:9.5px; font-weight:700; color:#6d5ce6; white-space:nowrap; }
div.hp-how__anim-7 { display:flex; align-items:center; gap:7px; background:#fff; border:1px solid #ececf4; border-radius:8px; padding:5px 9px; animation:rv-rowin 5.2s cubic-bezier(.32,.72,0,1) 1s infinite; }
span.hp-how__dot-3 { width:12px; height:12px; border-radius:999px; background:#f5f5fa; border:1px solid #ececf4; color:#77778c; font-size:7px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
span.hp-how__strong-4 { font-size:9.5px; font-weight:700; color:#77778c; white-space:nowrap; }

/* ---- preview ---- */
section.hp-preview__section { position:relative; z-index:1; max-width:1200px; margin:0 auto; padding:0 32px 112px; display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:48px; align-items:center; }
span.hp-preview__eyebrow { font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#77778c; }
h2.hp-preview__title { margin:0; font-family:'Plus Jakarta Sans',sans-serif; font-size:clamp(28px,3vw,40px); font-weight:800; letter-spacing:-.03em; line-height:1.08; text-wrap:pretty; }
p.hp-preview__text { margin:0; font-size:16.5px; line-height:1.6; color:#5c5c70; max-width:420px; text-wrap:pretty; }
div.hp-preview__row { display:flex; gap:11px; align-items:flex-start; }
span.hp-preview__strong { width:22px; height:22px; border-radius:999px; background:#f0effa; border:1px solid #ddd6fe; color:#4c3fbf; font-size:11px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px; }
span.hp-preview__label { font-size:15px; line-height:1.55; color:#40404f; }
a.hp-preview__btn { display:inline-flex; align-self:flex-start; align-items:center; gap:11px; background:#16161d; color:#fff; border-radius:999px; padding:14px 11px 14px 22px; font-size:15px; font-weight:700; transition:transform .18s cubic-bezier(.23,1,.32,1),box-shadow .18s; }
div.hp-preview__glow { position:absolute; top:-50px; right:-40px; width:340px; height:340px; background:radial-gradient(circle,rgba(139,92,246,.18),transparent 68%); pointer-events:none; }
div.hp-preview__card { position:relative; background:#fff; border:1px solid #ececf4; border-radius:22px; overflow:hidden; box-shadow:0 32px 68px -30px rgba(80,63,205,.3); transition:transform .35s cubic-bezier(.23,1,.32,1); }
div.hp-preview__row-3 { display:flex; align-items:center; gap:7px; padding:11px 14px; background:#f5f5fa; border-bottom:1px solid #ececf4; }
span.hp-preview__pill { margin-left:10px; font-size:11.5px; font-weight:600; color:#8e8ea3; background:#fff; border:1px solid #ececf4; border-radius:999px; padding:3px 11px; }
img.hp-preview__img { display:block; width:100%; height:auto; }

/* ---- cases ---- */
section.hp-cases__section { position:relative; z-index:1; max-width:1200px; margin:0 auto; padding:0 32px 112px; display:flex; flex-direction:column; gap:40px; }
div.hp-cases__stack { display:flex; flex-direction:column; gap:14px; max-width:620px; }
h2.hp-cases__title { margin:0; font-family:'Plus Jakarta Sans',sans-serif; letter-spacing:-.03em; font-size:42px; font-weight:800; letter-spacing:-.02em; line-height:1.06; }

/* ---- case-agency ---- */
div.hp-case-agency__grid { background:#fff; border:1px solid #ececf4; border-radius:26px; overflow:hidden; display:grid; grid-template-columns:1.05fr .95fr; box-shadow:0 6px 24px -14px rgba(22,22,29,.1); transition:transform .22s cubic-bezier(.23,1,.32,1),box-shadow .22s cubic-bezier(.23,1,.32,1); }
div.hp-case-agency__row { background:#16161d; padding:34px; display:flex; align-items:center; gap:30px; position:relative; overflow:hidden; }
div.hp-case-agency__glow { position:absolute; top:-90px; right:-60px; width:280px; height:280px; background:radial-gradient(circle,rgba(139,92,246,.3),transparent 70%); }
div.hp-case-agency__stack { display:flex; flex-direction:column; gap:16px; flex:1; position:relative; }
span.hp-case-agency__strong { font-family:'Plus Jakarta Sans',sans-serif; font-size:52px; font-weight:800; letter-spacing:-.03em; color:#fff; }
span.hp-case-agency__label { font-size:13px; color:#a3a3b8; }
div.hp-case-agency__row-3 { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
span.hp-case-agency__pill { display:inline-flex; align-items:center; gap:5px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); border-radius:999px; padding:5px 11px; font-size:11.5px; font-weight:700; color:#e6e6f0; animation:rv-popcycle 8s cubic-bezier(.23,1,.32,1) .2s infinite; }
img.hp-case-agency__img { width:11px; height:11px; }
span.hp-case-agency__pill-2 { display:inline-flex; align-items:center; gap:5px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); border-radius:999px; padding:5px 11px; font-size:11.5px; font-weight:700; color:#e6e6f0; animation:rv-popcycle 8s cubic-bezier(.23,1,.32,1) .55s infinite; }
span.hp-case-agency__pill-3 { display:inline-flex; align-items:center; gap:5px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); border-radius:999px; padding:5px 11px; font-size:11.5px; font-weight:700; color:#e6e6f0; animation:rv-popcycle 8s cubic-bezier(.23,1,.32,1) .9s infinite; }
span.hp-case-agency__strong-2 { font-size:11.5px; font-weight:700; color:#a3a3b8; animation:rv-popcycle 8s cubic-bezier(.23,1,.32,1) 1.25s infinite; }
div.hp-case-agency__row-4 { display:flex; align-items:center; gap:8px; font-size:12px; font-weight:700; color:#34d399; }
div.hp-case-agency__box { position:relative; width:110px; height:110px; flex-shrink:0; }
circle.hp-case-agency__anim { animation:rv-ring 3.2s cubic-bezier(.23,1,.32,1) infinite alternate; }
div.hp-case-agency__layer { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
span.hp-case-agency__big { font-family:'Plus Jakarta Sans',sans-serif; font-size:22px; font-weight:800; color:#fff; }
span.hp-case-agency__label-2 { font-size:9.5px; color:#a3a3b8; text-align:center; line-height:1.3; }
div.hp-case-agency__stack-2 { padding:34px; display:flex; flex-direction:column; gap:13px; justify-content:center; }
h3.hp-case-agency__heading { margin:0; font-family:'Plus Jakarta Sans',sans-serif; font-size:24px; font-weight:800; letter-spacing:-.02em; line-height:1.2; }
div.hp-case-agency__grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }

/* ---- case-creator ---- */
div.hp-case-creator__stack { background:linear-gradient(135deg,#f4f2ff,#ece9ff); padding:26px; display:flex; flex-direction:column; gap:13px; border-bottom:1px solid #ececf4; position:relative; }
div.hp-case-creator__row { display:flex; align-items:baseline; gap:8px; }
span.hp-case-creator__strong { font-family:'Plus Jakarta Sans',sans-serif; font-size:38px; font-weight:800; letter-spacing:-.03em; background:linear-gradient(120deg,#5850ec,#a855f7); -webkit-background-clip:text; background-clip:text; color:transparent; }
span.hp-case-creator__label { font-size:12.5px; color:#5c5c70; }
div.hp-case-creator__card-2 { display:flex; align-items:center; gap:10px; background:#fff; border:1px solid #ececf4; border-radius:12px; padding:10px 12px; }
span.hp-case-creator__label-2 { font-size:12.5px; font-weight:600; flex:1; color:#40404f; }
span.hp-case-creator__label-3 { color:#77778c; }
span.hp-case-creator__strong-2 { font-size:10.5px; font-weight:800; color:#ef4444; background:#fef2f2; border:1.5px solid #fecaca; border-radius:8px; padding:4px 10px; animation:rv-stamp 5.5s cubic-bezier(.23,1,.32,1) infinite; }
div.hp-case-creator__row-2 { display:flex; align-items:center; gap:8px; font-size:11.5px; font-weight:700; color:#6d5ce6; }
span.hp-case-creator__label-4 { position:relative; width:8px; height:8px; }
span.hp-case-creator__layer { position:absolute; inset:0; border-radius:999px; background:#6d5ce6; }
span.hp-case-creator__ping { position:absolute; inset:0; border-radius:999px; background:#6d5ce6; animation:rv-ping 2s ease-out infinite; }

/* ---- case-news ---- */
div.hp-case-news__row { background:#fafaff; padding:26px; display:flex; align-items:center; gap:22px; border-bottom:1px solid #ececf4; }
div.hp-case-news__tile { position:relative; width:96px; height:96px; flex-shrink:0; border-radius:999px; border:1px solid #e3e1f7; background:radial-gradient(circle,#fff 0%,#f4f2ff 100%); }
div.hp-case-news__layer { position:absolute; inset:14px; border-radius:999px; border:1px solid #ececf4; }
div.hp-case-news__layer-2 { position:absolute; inset:29px; border-radius:999px; border:1px solid #ececf4; }
div.hp-case-news__anim { position:absolute; inset:0; border-radius:999px; background:conic-gradient(from 0deg,transparent 0%,transparent 72%,rgba(109,92,230,.3) 100%); animation:rv-spin 3.4s linear infinite; }
div.hp-case-news__layer-3 { position:absolute; top:22%; left:26%; width:9px; height:9px; }
span.hp-case-news__layer-4 { position:absolute; inset:0; border-radius:999px; background:#00b67a; border:2px solid #fff; box-shadow:0 1px 5px rgba(0,182,122,.5); }
span.hp-case-news__ping { position:absolute; inset:0; border-radius:999px; background:#00b67a; animation:rv-ping 3.4s ease-out infinite; }
div.hp-case-news__stack { display:flex; flex-direction:column; gap:9px; min-width:0; }
span.hp-case-news__pill { align-self:flex-start; font-size:11px; font-weight:800; color:#ef4444; background:#fef2f2; border:1px solid #fecaca; border-radius:999px; padding:4px 11px; }
span.hp-case-news__pill-2 { align-self:flex-start; font-size:11px; font-weight:800; color:#15803d; background:#dcfce7; border:1px solid #86efac; border-radius:999px; padding:4px 11px; }
div.hp-case-news__row-2 { display:flex; align-items:baseline; gap:7px; }
span.hp-case-news__strong { font-family:'Plus Jakarta Sans',sans-serif; font-size:30px; font-weight:800; letter-spacing:-.03em; color:#16161d; }
span.hp-case-news__label { font-size:12px; color:#5c5c70; }
div.hp-case-news__box { font-size:12px; color:#8e8ea3; text-align:center; }

/* ---- bento ---- */
section.hp-bento__section { position:relative; z-index:1; max-width:1200px; margin:0 auto; padding:0 32px 112px; display:flex; flex-direction:column; gap:26px; }
div.hp-bento__stack { display:flex; flex-direction:column; gap:12px; max-width:600px; }
div.hp-bento__grid { display:grid; grid-template-columns:repeat(2,minmax(300px,1fr)); gap:20px; }

/* ---- bento-pirate ---- */
div.hp-bento-pirate__card { border-radius:26px; transition:transform .34s cubic-bezier(.23,1,.32,1),box-shadow .34s; background:linear-gradient(170deg,#ffffff,#faf9ff); border:1px solid #ececf4; box-shadow:0 8px 30px -18px rgba(22,22,29,.16); overflow:hidden; display:flex; flex-direction:column; }
div.hp-bento-pirate__row { background:#f2f2f7; border-bottom:1px solid #e6e6ef; padding:11px 14px; display:flex; align-items:center; gap:9px; }
span.hp-bento-pirate__row-2 { display:flex; gap:5px; }
span.hp-bento-pirate__pill { flex:1; background:#fff; border:1px solid #e6e6ef; border-radius:999px; padding:5px 12px; font-size:12px; color:#77778c; text-decoration:line-through; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:center; }
div.hp-bento-pirate__stack { padding:40px 28px 30px; display:flex; flex-direction:column; align-items:center; gap:12px; background:#fff; }
span.hp-bento-pirate__strong { font-family:'Plus Jakarta Sans',sans-serif; font-size:62px; font-weight:800; letter-spacing:-.05em; color:#dcdce8; line-height:1; }
span.hp-bento-pirate__row-3 { width:52px; height:52px; border-radius:14px; background:#16161d; display:inline-flex; align-items:center; justify-content:center; animation:rv-float-a 4s ease-in-out infinite; }
img.hp-bento-pirate__img { width:30px; height:30px; object-fit:contain; filter:brightness(0) invert(1); }
span.hp-bento-pirate__strong-2 { font-size:14.5px; font-weight:700; color:#16161d; }
div.hp-bento-pirate__stack-2 { padding:26px 28px 30px; display:flex; flex-direction:column; gap:12px; border-top:1px solid #f2f2f7; }
span.hp-bento-pirate__big { font-family:'Plus Jakarta Sans',sans-serif; font-size:26px; font-weight:800; letter-spacing:-.03em; line-height:1.15; }
span.hp-bento-pirate__big-2 { font-size:24px; font-weight:800; letter-spacing:-.03em; color:#00915f; }
span.hp-bento-pirate__label { font-size:14px; color:#5c5c70; }
span.hp-bento-pirate__label-2 { font-size:14.5px; color:#5c5c70; line-height:1.6; }

/* ---- bento-number ---- */
div.hp-bento-number__card { border-radius:26px; transition:transform .34s cubic-bezier(.23,1,.32,1),box-shadow .34s; background:linear-gradient(165deg,#efedff,#f6f1ff 60%,#fdf2ff); border:1px solid #e6e1fb; padding:38px 30px 30px; display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; position:relative; overflow:hidden; }
span.hp-bento-number__strong { font-family:'Plus Jakarta Sans',sans-serif; font-size:clamp(52px,6vw,78px); font-weight:800; letter-spacing:-.05em; line-height:1; background:linear-gradient(120deg,#8b5cf6,#5850ec); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
span.hp-bento-number__strong-2 { font-size:13px; font-weight:800; letter-spacing:.12em; color:#16161d; }
span.hp-bento-number__label { font-size:15px; color:#5c5c70; line-height:1.6; max-width:340px; }
span.hp-bento-number__label-2 { font-size:12.5px; color:#8e8ea3; margin-top:14px; line-height:1.5; }

/* ---- bento-figure ---- */
div.hp-bento-figure__card { border-radius:26px; transition:transform .34s cubic-bezier(.23,1,.32,1),box-shadow .34s; background:linear-gradient(155deg,#fde7f3,#f1e6ff 55%,#e9e6ff); border:1px solid #f0dcef; padding:34px 30px; display:flex; flex-direction:column; gap:22px; position:relative; overflow:hidden; }
div.hp-bento-figure__stack { display:flex; flex-direction:column; gap:2px; min-width:0; }
span.hp-bento-figure__strong { display:flex; align-items:center; gap:6px; font-size:16px; font-weight:800; letter-spacing:-.02em; }
span.hp-bento-figure__row { width:16px; height:16px; border-radius:999px; background:#6d5ce6; color:#fff; font-size:9px; display:inline-flex; align-items:center; justify-content:center; }
span.hp-bento-figure__label { font-size:12.5px; color:#6a6a7e; }
span.hp-bento-figure__strong-2 { font-family:'Plus Jakarta Sans',sans-serif; font-size:clamp(40px,4.4vw,54px); font-weight:800; letter-spacing:-.04em; line-height:1; color:#00915f; }
span.hp-bento-figure__eyebrow { font-size:12.5px; font-weight:800; letter-spacing:.1em; color:#5c5c70; }
div.hp-bento-figure__box { height:1px; background:rgba(22,22,29,.09); }
div.hp-bento-figure__row-2 { display:flex; gap:34px; flex-wrap:wrap; }
span.hp-bento-figure__big { font-size:26px; font-weight:800; letter-spacing:-.03em; color:#6d5ce6; }
span.hp-bento-figure__strong-3 { font-size:11.5px; font-weight:700; letter-spacing:.06em; color:#6a6a7e; }
a.hp-bento-figure__btn { align-self:flex-start; display:inline-flex; align-items:center; gap:10px; background:linear-gradient(120deg,#5850ec,#8b5cf6); color:#fff; border-radius:999px; padding:12px 12px 12px 22px; font-size:14.5px; font-weight:700; margin-top:auto; transition:transform .2s cubic-bezier(.23,1,.32,1); }
span.hp-bento-figure__row-3 { width:26px; height:26px; border-radius:999px; background:rgba(255,255,255,.22); display:inline-flex; align-items:center; justify-content:center; font-size:13px; }

/* ---- bento-tools ---- */
div.hp-bento-tools__card { border-radius:26px; transition:transform .34s cubic-bezier(.23,1,.32,1),box-shadow .34s; background:#0f0f16; border:1px solid #1d1d29; padding:34px 30px; display:flex; flex-direction:column; gap:20px; position:relative; overflow:hidden; box-shadow:0 24px 56px -28px rgba(15,15,22,.6); }
div.hp-bento-tools__glow { position:absolute; inset:0; background:radial-gradient(circle at 82% 22%,rgba(139,92,246,.28),transparent 58%); pointer-events:none; }
div.hp-bento-tools__layer { position:absolute; top:0; right:0; bottom:0; width:44%; pointer-events:none; }
div.hp-bento-tools__anim { position:absolute; right:16%; top:12%; width:62px; height:62px; border-radius:19px; background:linear-gradient(150deg,#ff4d6d,#e0143c); display:flex; align-items:center; justify-content:center; box-shadow:0 18px 36px -14px rgba(0,0,0,.5); animation:rv-float-a 4.4s ease-in-out 0.4s infinite; }
img.hp-bento-tools__img { width:27px; height:27px; }
div.hp-bento-tools__anim-2 { position:absolute; right:44%; top:30%; width:54px; height:54px; border-radius:16px; background:linear-gradient(150deg,#8b5cf6,#5850ec); display:flex; align-items:center; justify-content:center; box-shadow:0 18px 36px -14px rgba(0,0,0,.5); animation:rv-float-b 3.8s ease-in-out 0.8s infinite; }
div.hp-bento-tools__anim-3 { position:absolute; right:10%; top:46%; width:50px; height:50px; border-radius:15px; background:linear-gradient(150deg,#f97362,#e1306c); display:flex; align-items:center; justify-content:center; box-shadow:0 18px 36px -14px rgba(0,0,0,.5); animation:rv-float-a 4.8s ease-in-out 1.2000000000000002s infinite; }
div.hp-bento-tools__anim-4 { position:absolute; right:38%; top:62%; width:46px; height:46px; border-radius:14px; background:linear-gradient(150deg,#f5b942,#f59e0b); display:flex; align-items:center; justify-content:center; box-shadow:0 18px 36px -14px rgba(0,0,0,.5); animation:rv-float-b 4.1s ease-in-out 1.6s infinite; }
div.hp-bento-tools__anim-5 { position:absolute; right:16%; bottom:8%; width:44px; height:44px; border-radius:13px; background:linear-gradient(150deg,#3f3f52,#16161d); display:flex; align-items:center; justify-content:center; box-shadow:0 18px 36px -14px rgba(0,0,0,.5); animation:rv-float-a 3.6s ease-in-out 2s infinite; }
img.hp-bento-tools__img-3 { width:19px; height:19px; }
div.hp-bento-tools__card-2 { position:relative; display:inline-flex; align-self:flex-start; align-items:center; gap:9px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); border-radius:999px; padding:6px 14px; }
span.hp-bento-tools__eyebrow { font-size:11.5px; font-weight:800; letter-spacing:.1em; color:#c4b5fd; }
span.hp-bento-tools__strong { position:relative; font-family:'Plus Jakarta Sans',sans-serif; font-size:34px; font-weight:800; letter-spacing:-.035em; line-height:1.1; color:#fff; max-width:340px; }
span.hp-bento-tools__label { font-style:italic; color:#c4b5fd; }
div.hp-bento-tools__row { position:relative; display:flex; gap:9px; flex-wrap:wrap; max-width:400px; }
span.hp-bento-tools__pill { font-size:13.5px; font-weight:700; color:#f0f0f8; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.13); border-radius:999px; padding:8px 15px; white-space:nowrap; transition:all .2s; }
a.hp-bento-tools__btn { position:relative; align-self:flex-start; display:inline-flex; align-items:center; gap:11px; background:#fff; color:#0f0f16; border-radius:999px; padding:13px 12px 13px 24px; font-size:14.5px; font-weight:700; margin-top:auto; transition:transform .2s cubic-bezier(.23,1,.32,1),box-shadow .2s; }
span.hp-bento-tools__row-2 { width:26px; height:26px; border-radius:999px; background:linear-gradient(120deg,#5850ec,#8b5cf6); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:13px; }

/* ---- testi ---- */
section.hp-testi__section { position:relative; z-index:1; padding:0 0 112px; display:flex; flex-direction:column; gap:40px; overflow:hidden; }
div.hp-testi__stack { display:flex; flex-direction:column; gap:16px; align-items:center; text-align:center; padding:0 32px; }
span.hp-testi__label { font-family:'Plus Jakarta Sans',sans-serif; letter-spacing:-.02em; font-size:19px; font-weight:600; }
div.hp-testi__row { display:flex; gap:2px; margin-left:6px; }
span.hp-testi__row-2 { width:19px; height:19px; background:#00b67a; display:inline-flex; align-items:center; justify-content:center; color:#fff; font-size:12px; }
span.hp-testi__row-3 { width:19px; height:19px; background:linear-gradient(90deg,#00b67a 80%,#dcdce5 80%); display:inline-flex; align-items:center; justify-content:center; color:#fff; font-size:12px; }
span.hp-testi__strong { font-size:15px; font-weight:700; margin-left:4px; }
h2.hp-testi__title { margin:0; font-family:'Plus Jakarta Sans',sans-serif; font-size:40px; font-weight:800; letter-spacing:-.03em; line-height:1.1; max-width:660px; }
div.hp-testi__box { overflow:hidden; white-space:nowrap; }
div.hp-testi__anim { display:inline-flex; gap:18px; animation:rv-marquee 60s linear infinite; padding-right:18px; }
div.hp-testi__card { width:400px; white-space:normal; background:#fff; border:1px solid #ececf4; border-radius:20px; padding:26px; display:inline-flex; flex-direction:column; gap:13px; vertical-align:top; box-shadow:0 6px 24px -14px rgba(22,22,29,.1); transition:transform .22s cubic-bezier(.23,1,.32,1),box-shadow .22s cubic-bezier(.23,1,.32,1); }
span.hp-testi__row-4 { width:16px; height:16px; background:#00b67a; display:inline-flex; align-items:center; justify-content:center; color:#fff; font-size:10px; }
div.hp-testi__row-5 { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
span.hp-testi__strong-2 { font-size:11.5px; font-weight:700; color:#5c5c70; }
span.hp-testi__label-2 { font-size:11.5px; color:#8e8ea3; }
p.hp-testi__text { margin:0; font-size:14.5px; line-height:1.6; color:#40404f; flex:1; }
div.hp-testi__box-2 { min-width:0; flex:1; }
div.hp-testi__row-6 { display:flex; align-items:center; gap:5px; }
span.hp-testi__strong-3 { font-size:13.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
span.hp-testi__dot { width:14px; height:14px; border-radius:999px; background:#6d5ce6; color:#fff; font-size:8px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
a.hp-testi__btn { display:inline-flex; align-items:center; gap:6px; flex-shrink:0; font-size:11.5px; font-weight:700; color:#8e8ea3; background:#fafaff; border:1px solid #ececf4; border-radius:999px; padding:5px 10px; white-space:nowrap; transition:all .16s; }

/* ---- evidence ---- */
section.hp-evidence__section { position:relative; z-index:1; max-width:1200px; margin:0 auto; padding:0 32px 112px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.02fr); gap:64px; align-items:center; }
div.hp-evidence__stack { display:flex; flex-direction:column; gap:26px; }
p.hp-evidence__text { margin:0; font-size:17.5px; line-height:1.6; color:#5c5c70; max-width:440px; text-wrap:pretty; }
div.hp-evidence__row { display:flex; gap:13px; align-items:flex-start; }
span.hp-evidence__row-2 { width:24px; height:24px; border-radius:999px; background:#f0effa; border:1px solid #ddd6fe; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px; }
span.hp-evidence__row-3 { display:flex; flex-direction:column; gap:2px; }
span.hp-evidence__strong { font-size:15.5px; font-weight:700; letter-spacing:-.01em; }
span.hp-evidence__label { font-size:13.5px; color:#5c5c70; line-height:1.5; }
a.hp-evidence__btn { display:inline-flex; align-self:flex-start; align-items:center; gap:11px; background:#16161d; color:#fff; border-radius:999px; padding:14px 10px 14px 24px; font-size:15.5px; font-weight:700; transition:transform .16s cubic-bezier(.23,1,.32,1),box-shadow .16s; }
div.hp-evidence__glow { position:absolute; top:-40px; right:-30px; width:340px; height:340px; background:radial-gradient(circle,rgba(139,92,246,.16),transparent 68%); pointer-events:none; }
div.hp-evidence__card { position:relative; background:#fff; border:1px solid #ececf4; border-radius:26px; padding:26px; box-shadow:0 34px 70px -28px rgba(80,63,205,.28); display:flex; flex-direction:column; gap:18px; transition:transform .35s cubic-bezier(.23,1,.32,1); }
div.hp-evidence__row-4 { display:flex; align-items:center; justify-content:space-between; gap:12px; }
span.hp-evidence__strong-2 { font-size:15px; font-weight:800; letter-spacing:-.01em; }
span.hp-evidence__label-2 { font-size:12px; color:#8e8ea3; }
span.hp-evidence__pill { font-size:10.5px; font-weight:800; letter-spacing:.06em; color:#00b67a; background:#e8f8f1; border:1px solid #b9e8d4; border-radius:999px; padding:5px 11px; }
div.hp-evidence__grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
div.hp-evidence__box { border:1px solid #ececf4; border-radius:14px; overflow:hidden; position:relative; }
div.hp-evidence__box-2 { height:96px; background:url(https://picsum.photos/seed/rv-orig/412/232) center/cover; }
div.hp-evidence__glow-2 { position:absolute; top:8px; left:8px; font-size:10px; font-weight:800; letter-spacing:.05em; color:#fff; background:rgba(10,10,16,.66); backdrop-filter:blur(4px); border-radius:999px; padding:4px 9px; }
div.hp-evidence__box-3 { border:1.5px solid #fecaca; border-radius:14px; overflow:hidden; position:relative; }
div.hp-evidence__box-4 { height:96px; background:url(https://picsum.photos/seed/rv-orig/412/232) 62% 42%/128% no-repeat; }
div.hp-evidence__layer { position:absolute; top:8px; left:8px; font-size:10px; font-weight:800; letter-spacing:.05em; color:#fff; background:#ef4444; border-radius:999px; padding:4px 9px; }
div.hp-evidence__glow-3 { position:absolute; bottom:8px; left:8px; font-size:9.5px; font-weight:700; letter-spacing:.04em; color:#fff; background:rgba(10,10,16,.66); backdrop-filter:blur(4px); border-radius:999px; padding:3px 8px; }
div.hp-evidence__card-2 { background:#fafaff; border:1px solid #ececf4; border-radius:16px; padding:16px; display:flex; flex-direction:column; gap:11px; }
div.hp-evidence__row-5 { display:flex; align-items:center; justify-content:space-between; gap:10px; }
span.hp-evidence__eyebrow { font-size:12px; font-weight:800; letter-spacing:.08em; color:#8e8ea3; }
span.hp-evidence__label-3 { height:7px; border-radius:3px; width:92%; background:#e7e6f3; }
span.hp-evidence__label-4 { height:7px; border-radius:3px; width:78%; background:#e7e6f3; }
span.hp-evidence__label-5 { height:7px; border-radius:3px; width:60%; background:linear-gradient(90deg,#8b5cf6,#5850ec); }
span.hp-evidence__label-6 { height:7px; border-radius:3px; width:86%; background:#e7e6f3; }
span.hp-evidence__label-7 { height:7px; border-radius:3px; width:44%; background:#e7e6f3; }
div.hp-evidence__row-6 { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
span.hp-evidence__pill-2 { font-size:12px; font-weight:700; color:#40404f; background:#f5f5fa; border:1px solid #ececf4; border-radius:999px; padding:6px 12px; }

/* ---- demo ---- */
div.hp-demo__grid { background:linear-gradient(155deg,#efedff,#f7f2ff 60%,#fdf3ff); border:1px solid #e6e1fb; border-radius:36px; padding:56px; display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; position:relative; overflow:hidden; }
div.hp-demo__glow { position:absolute; top:-160px; right:-120px; width:520px; height:520px; background:radial-gradient(circle,rgba(139,92,246,.14),transparent 70%); pointer-events:none; }
div.hp-demo__stack { display:flex; flex-direction:column; gap:20px; position:relative; }
span.hp-demo__pill { align-self:flex-start; font-size:12px; font-weight:700; letter-spacing:.08em; color:#6d5ce6; background:#fff; border:1px solid #ddd6fe; border-radius:999px; padding:5px 13px; text-transform:uppercase; }
h2.hp-demo__title { margin:0; font-family:'Plus Jakarta Sans',sans-serif; letter-spacing:-.03em; font-size:40px; font-weight:800; letter-spacing:-.02em; line-height:1.06; color:#16161d; text-wrap:pretty; }
p.hp-demo__text { margin:0; font-size:16.5px; line-height:1.65; color:#5c5c70; max-width:460px; }
ul.hp-demo__list { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:11px; font-size:15px; color:#40404f; }
li.hp-demo__item { display:flex; gap:11px; align-items:center; }
span.hp-demo__strong { width:21px; height:21px; border-radius:999px; background:#e8f8f1; border:1px solid #b9e8d4; color:#00915f; display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; }
div.hp-demo__card { position:relative; background:#fff; border-radius:24px; padding:30px; display:flex; flex-direction:column; gap:14px; box-shadow:0 40px 90px -30px rgba(0,0,0,.5); }
span.hp-demo__label { font-family:'Plus Jakarta Sans',sans-serif; letter-spacing:-.02em; font-size:20px; font-weight:600; }
span.hp-demo__label-2 { font-size:13.5px; color:#8e8ea3; }
label.hp-demo__box { font-size:13px; font-weight:700; color:#40404f; }
input.hp-demo__input { background:#fafaff; border:1px solid #e4e4ef; border-radius:12px; padding:12px 14px; color:#16161d; font-size:14.5px; font-family:'Plus Jakarta Sans',sans-serif; outline:none; transition:border-color .16s,box-shadow .16s; }
div.hp-demo__row { display:flex; gap:8px; }
button.hp-demo__btn { flex:1; border-radius:999px; padding:9px 0; font-size:13.5px; font-weight:700; font-family:'Plus Jakarta Sans',sans-serif; cursor:pointer; transition:all .16s cubic-bezier(.23,1,.32,1); background:#fafaff; color:#5c5c70; border:1px solid #e4e4ef; }
button.hp-demo__btn-2 { display:flex; align-items:center; justify-content:center; gap:12px; background:#16161d; color:#fff; border:none; border-radius:999px; padding:14px 20px; font-size:15.5px; font-weight:700; font-family:'Plus Jakarta Sans',sans-serif; cursor:pointer; margin-top:4px; transition:transform .16s cubic-bezier(.23,1,.32,1),box-shadow .16s; }
span.hp-demo__row-2 { width:28px; height:28px; border-radius:999px; background:#ddd6fe; display:inline-flex; align-items:center; justify-content:center; font-size:13px; }
div.hp-demo__box-2 { font-size:12px; color:#5c5c70; text-align:center; }
div.hp-demo__stack-2 { display:flex; flex-direction:column; align-items:center; gap:14px; padding:36px 10px; text-align:center; }
div.hp-demo__row-3 { width:56px; height:56px; border-radius:999px; background:#dcfce7; color:#16a34a; display:flex; align-items:center; justify-content:center; font-size:24px; font-weight:700; }
span.hp-demo__label-3 { font-family:'Plus Jakarta Sans',sans-serif; letter-spacing:-.02em; font-size:21px; font-weight:600; }
p.hp-demo__text-2 { margin:0; font-size:14.5px; color:#5c5c70; line-height:1.6; }

/* ---- faq ---- */
section.hp-faq__section { position:relative; z-index:1; max-width:820px; margin:0 auto; padding:0 32px 112px; display:flex; flex-direction:column; gap:36px; }
div.hp-faq__stack { display:flex; flex-direction:column; gap:14px; text-align:center; }
h2.hp-faq__title { margin:0; font-family:'Plus Jakarta Sans',sans-serif; letter-spacing:-.03em; font-size:42px; font-weight:800; letter-spacing:-.02em; }
div.hp-faq__card { background:#fff; border:1px solid #ececf4; border-radius:18px; overflow:hidden; transition:border-color .3s,box-shadow .3s; }
button.hp-faq__btn { width:100%; background:none; border:none; color:#16161d; font-family:'Plus Jakarta Sans',sans-serif; font-size:16.5px; font-weight:700; text-align:left; padding:21px 24px; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px; transition:transform .16s cubic-bezier(.23,1,.32,1); }
div.hp-faq__box { min-height:0; overflow:hidden; }
div.hp-faq__box-2 { padding:0 24px 21px; font-size:15px; line-height:1.65; color:#5c5c70; }

/* ---- final ---- */
div.hp-final__card { position:relative; overflow:hidden; background:#16161d; border-radius:36px; padding:80px 48px; display:flex; flex-direction:column; align-items:center; gap:22px; text-align:center; }
div.hp-final__glow { position:absolute; top:-180px; left:50%; transform:translateX(-50%); width:700px; height:380px; background:radial-gradient(ellipse,rgba(139,92,246,.35),transparent 70%); pointer-events:none; }
img.hp-final__img { width:56px; height:56px; object-fit:contain; animation:rv-float 3.5s ease-in-out infinite; }
h2.hp-final__title { margin:0; font-family:'Plus Jakarta Sans',sans-serif; letter-spacing:-.03em; font-size:46px; font-weight:800; letter-spacing:-.02em; line-height:1.05; max-width:720px; color:#fff; text-wrap:pretty; }
p.hp-final__text { margin:0; font-size:17px; color:#a3a3b8; max-width:500px; line-height:1.6; }
a.hp-final__btn { display:flex; align-items:center; gap:12px; background:#fff; color:#16161d; padding:15px 12px 15px 32px; border-radius:999px; font-size:17px; font-weight:700; margin-top:8px; transition:transform .22s cubic-bezier(.23,1,.32,1),box-shadow .22s cubic-bezier(.23,1,.32,1); }
span.hp-final__row { width:32px; height:32px; border-radius:999px; background:linear-gradient(120deg,#5850ec,#8b5cf6); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:15px; }
div.hp-final__box { font-size:13px; color:#7c7c92; }
div.hp-final__layer { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ── ported from responsive-v4.css (these classes replaced inline values that file targeted) ── */
@media (max-width: 980px) {
    div.hp-hero__grid,
    div.hp-pain__grid,
    section.hp-preview__section,
    section.hp-evidence__section,
    div.hp-case-agency__grid,
    div.hp-demo__grid { grid-template-columns: minmax(0, 1fr) !important; }
        div.hp-hero__grid { padding: 40px 20px 64px !important; gap: 40px !important; }
        section.hp-shared__section,
    section.hp-marquee__section,
    section.hp-problem__section,
    section.hp-pain__section,
    section.hp-how__section,
    section.hp-preview__section,
    section.hp-cases__section,
    section.hp-bento__section,
    section.hp-evidence__section,
    section.hp-faq__section { padding: 0 20px 72px !important; }
        div.hp-demo__grid { padding: 32px 22px !important; gap: 28px !important; }
        p.hp-hero__text,
    p.hp-pain__text,
    p.hp-evidence__text,
    p.hp-how__text,
    p.hp-preview__text,
    div.hp-shared__stack-7,
    div.hp-hero__glow,
    div.hp-cases__stack,
    div.hp-bento__stack,
    div.hp-bento-tools__row,
    div.hp-testi__card,
    h2.hp-testi__title { width: auto !important; max-width: 100% !important; }
        div.hp-hero__layer-2 { width: 520px !important; height: 520px !important; }
    }
@media (max-width: 640px) {
    div.hp-case-agency__grid-2,
    div.hp-bento__grid,
    div.hp-evidence__grid { grid-template-columns: minmax(0, 1fr) !important; }
        div.hp-widget__grid { grid-template-columns: 1fr !important; }
        div.hp-problem__grid,
    div.hp-how__grid { grid-template-columns: 1fr !important; }
        div.hp-demo__grid,
    div.hp-final__card { border-radius: 24px !important; }
        h1.hp-hero__title, div.hp-hero__title { font-size: clamp(30px, 8.6vw, 38px) !important; }
        span.hp-problem__strong-11 { min-width: 0 !important; }
    }

/* ── ported from dark-v4.css (these classes replaced inline values that file targeted) ── */
[data-theme="dark"] div.hp-shared__card,
[data-theme="dark"] div.hp-widget__anim-2,
[data-theme="dark"] div.hp-widget__anim-3,
[data-theme="dark"] div.hp-widget__anim-4,
[data-theme="dark"] div.hp-widget__card-2,
[data-theme="dark"] button.hp-widget__btn,
[data-theme="dark"] span.hp-widget__strong,
[data-theme="dark"] div.hp-marquee__card,
[data-theme="dark"] div.hp-marquee__card-2,
[data-theme="dark"] div.hp-marquee__card-3,
[data-theme="dark"] div.hp-problem__card,
[data-theme="dark"] span.hp-problem__row-6,
[data-theme="dark"] span.hp-problem__row-7,
[data-theme="dark"] span.hp-problem__row-8,
[data-theme="dark"] span.hp-problem__row-9,
[data-theme="dark"] span.hp-problem__row-10,
[data-theme="dark"] div.hp-problem__card-6,
[data-theme="dark"] div.hp-pain__card,
[data-theme="dark"] div.hp-pain__card-3,
[data-theme="dark"] div.hp-pain__card-6,
[data-theme="dark"] div.hp-pain__card-7,
[data-theme="dark"] div.hp-how__card-2,
[data-theme="dark"] div.hp-how__anim-2,
[data-theme="dark"] div.hp-how__anim-3,
[data-theme="dark"] div.hp-how__anim-4,
[data-theme="dark"] div.hp-how__anim-5,
[data-theme="dark"] div.hp-how__anim-6,
[data-theme="dark"] div.hp-how__anim-7,
[data-theme="dark"] div.hp-preview__card,
[data-theme="dark"] span.hp-preview__pill,
[data-theme="dark"] div.hp-case-agency__grid,
[data-theme="dark"] div.hp-case-creator__card-2,
[data-theme="dark"] span.hp-bento-pirate__pill,
[data-theme="dark"] a.hp-bento-tools__btn,
[data-theme="dark"] div.hp-testi__card,
[data-theme="dark"] div.hp-evidence__card,
[data-theme="dark"] span.hp-demo__pill,
[data-theme="dark"] div.hp-demo__card,
[data-theme="dark"] div.hp-faq__card,
[data-theme="dark"] a.hp-final__btn,
[data-theme="dark"] div.hp-bento-pirate__stack { background: var(--rv-surface) !important; }
[data-theme="dark"] div.hp-widget__card-3,
[data-theme="dark"] input.hp-widget__input,
[data-theme="dark"] div.hp-problem__card-2,
[data-theme="dark"] div.hp-problem__card-3,
[data-theme="dark"] div.hp-pain__card-2,
[data-theme="dark"] div.hp-pain__card-4,
[data-theme="dark"] div.hp-pain__card-5,
[data-theme="dark"] div.hp-pain__card-8,
[data-theme="dark"] div.hp-how__stack-2,
[data-theme="dark"] div.hp-how__card-4,
[data-theme="dark"] div.hp-case-news__row,
[data-theme="dark"] a.hp-testi__btn,
[data-theme="dark"] div.hp-evidence__card-2,
[data-theme="dark"] input.hp-demo__input,
[data-theme="dark"] button.hp-demo__btn,
[data-theme="dark"] span.hp-problem__row-2,
[data-theme="dark"] span.hp-how__dot-3,
[data-theme="dark"] div.hp-preview__row-3,
[data-theme="dark"] span.hp-evidence__pill-2,
[data-theme="dark"] span.hp-problem__row-12,
[data-theme="dark"] span.hp-widget__label-2,
[data-theme="dark"] div.hp-bento-pirate__row { background: var(--rv-surface-2) !important; }
[data-theme="dark"] span.hp-shared__pill,
[data-theme="dark"] span.hp-widget__pill,
[data-theme="dark"] span.hp-widget__pill-3,
[data-theme="dark"] span.hp-pain__pill,
[data-theme="dark"] span.hp-how__pill,
[data-theme="dark"] span.hp-how__row-5,
[data-theme="dark"] span.hp-how__dot-2,
[data-theme="dark"] span.hp-preview__strong,
[data-theme="dark"] span.hp-evidence__row-2,
[data-theme="dark"] span.hp-evidence__label-3,
[data-theme="dark"] span.hp-evidence__label-4,
[data-theme="dark"] span.hp-evidence__label-6,
[data-theme="dark"] span.hp-evidence__label-7,
[data-theme="dark"] span.hp-problem__label-7,
[data-theme="dark"] span.hp-problem__label-9,
[data-theme="dark"] span.hp-problem__label-10,
[data-theme="dark"] span.hp-problem__label-11,
[data-theme="dark"] div.hp-marquee__box-4,
[data-theme="dark"] div.hp-how__card,
[data-theme="dark"] div.hp-widget__card { background: var(--rv-surface-4) !important; }
[data-theme="dark"] span.hp-problem__row-4,
[data-theme="dark"] span.hp-problem__pill,
[data-theme="dark"] span.hp-pain__pill-2,
[data-theme="dark"] span.hp-pain__strong-7,
[data-theme="dark"] span.hp-case-creator__strong-2,
[data-theme="dark"] span.hp-case-news__pill { background: var(--rv-danger-wash) !important; }
[data-theme="dark"] span.hp-widget__pill-2,
[data-theme="dark"] span.hp-how__dot,
[data-theme="dark"] span.hp-evidence__pill,
[data-theme="dark"] span.hp-demo__strong,
[data-theme="dark"] span.hp-case-news__pill-2,
[data-theme="dark"] div.hp-demo__row-3 { background: var(--rv-success-wash) !important; }
[data-theme="dark"] a.hp-problem__btn,
[data-theme="dark"] a.hp-preview__btn,
[data-theme="dark"] div.hp-case-agency__row,
[data-theme="dark"] span.hp-bento-pirate__row-3,
[data-theme="dark"] a.hp-evidence__btn,
[data-theme="dark"] button.hp-demo__btn-2,
[data-theme="dark"] div.hp-final__card,
[data-theme="dark"] div.hp-how__card-3,
[data-theme="dark"] div.hp-bento-tools__card,
[data-theme="dark"] div.hp-problem__card-4 { background: var(--rv-surface-2) !important; box-shadow: inset 0 0 0 1px var(--rv-border) !important; }
[data-theme="dark"] span.hp-problem__label-8 { background: var(--rv-muted) !important; }
[data-theme="dark"] div.hp-shared__card,
[data-theme="dark"] div.hp-widget__anim-2,
[data-theme="dark"] div.hp-widget__anim-3,
[data-theme="dark"] div.hp-widget__anim-4,
[data-theme="dark"] button.hp-widget__btn,
[data-theme="dark"] div.hp-marquee__card,
[data-theme="dark"] div.hp-marquee__card-2,
[data-theme="dark"] div.hp-marquee__card-3,
[data-theme="dark"] div.hp-problem__card,
[data-theme="dark"] span.hp-problem__row-2,
[data-theme="dark"] div.hp-problem__card-2,
[data-theme="dark"] div.hp-problem__card-3,
[data-theme="dark"] span.hp-problem__row-6,
[data-theme="dark"] span.hp-problem__row-7,
[data-theme="dark"] span.hp-problem__row-8,
[data-theme="dark"] span.hp-problem__row-9,
[data-theme="dark"] span.hp-problem__row-10,
[data-theme="dark"] div.hp-problem__card-6,
[data-theme="dark"] div.hp-pain__card,
[data-theme="dark"] div.hp-pain__card-2,
[data-theme="dark"] div.hp-pain__card-3,
[data-theme="dark"] div.hp-pain__card-4,
[data-theme="dark"] div.hp-pain__card-5,
[data-theme="dark"] div.hp-pain__card-7,
[data-theme="dark"] div.hp-pain__card-8,
[data-theme="dark"] div.hp-how__card-2,
[data-theme="dark"] div.hp-how__card-4,
[data-theme="dark"] div.hp-how__anim-2,
[data-theme="dark"] div.hp-how__anim-4,
[data-theme="dark"] div.hp-how__anim-7,
[data-theme="dark"] span.hp-how__dot-3,
[data-theme="dark"] div.hp-preview__card,
[data-theme="dark"] div.hp-preview__row-3,
[data-theme="dark"] span.hp-preview__pill,
[data-theme="dark"] div.hp-case-agency__grid,
[data-theme="dark"] div.hp-case-creator__stack,
[data-theme="dark"] div.hp-case-creator__card-2,
[data-theme="dark"] div.hp-case-news__row,
[data-theme="dark"] div.hp-case-news__layer,
[data-theme="dark"] div.hp-case-news__layer-2,
[data-theme="dark"] div.hp-bento-pirate__card,
[data-theme="dark"] div.hp-testi__card,
[data-theme="dark"] a.hp-testi__btn,
[data-theme="dark"] div.hp-evidence__card,
[data-theme="dark"] div.hp-evidence__box,
[data-theme="dark"] div.hp-evidence__card-2,
[data-theme="dark"] span.hp-evidence__pill-2,
[data-theme="dark"] div.hp-faq__card,
[data-theme="dark"] input.hp-widget__input,
[data-theme="dark"] input.hp-demo__input,
[data-theme="dark"] button.hp-demo__btn,
[data-theme="dark"] div.hp-bento-number__card,
[data-theme="dark"] div.hp-demo__grid,
[data-theme="dark"] div.hp-case-news__tile,
[data-theme="dark"] span.hp-widget__strong,
[data-theme="dark"] div.hp-problem__row-3,
[data-theme="dark"] div.hp-problem__anim,
[data-theme="dark"] div.hp-problem__anim-2,
[data-theme="dark"] div.hp-problem__anim-3,
[data-theme="dark"] div.hp-problem__anim-4,
[data-theme="dark"] div.hp-problem__anim-5,
[data-theme="dark"] div.hp-problem__anim-6,
[data-theme="dark"] div.hp-problem__stack-5,
[data-theme="dark"] div.hp-bento-pirate__row,
[data-theme="dark"] span.hp-bento-pirate__pill,
[data-theme="dark"] div.hp-widget__card-3,
[data-theme="dark"] div.hp-how__stack-2,
[data-theme="dark"] div.hp-how__card,
[data-theme="dark"] div.hp-widget__card,
[data-theme="dark"] div.hp-widget__card-2 { border-color: var(--rv-border) !important; }
[data-theme="dark"] span.hp-widget__pill-3,
[data-theme="dark"] span.hp-pain__pill,
[data-theme="dark"] div.hp-pain__card-6,
[data-theme="dark"] span.hp-how__pill,
[data-theme="dark"] span.hp-how__row-5,
[data-theme="dark"] div.hp-how__anim-6,
[data-theme="dark"] span.hp-how__dot-2,
[data-theme="dark"] span.hp-preview__strong,
[data-theme="dark"] span.hp-evidence__row-2,
[data-theme="dark"] span.hp-demo__pill,
[data-theme="dark"] div.hp-hero__anim,
[data-theme="dark"] div.hp-hero__anim-2,
[data-theme="dark"] div.hp-hero__anim-3,
[data-theme="dark"] div.hp-hero__anim-4 { border-color: var(--rv-primary-pale) !important; }
[data-theme="dark"] span.hp-widget__pill-2,
[data-theme="dark"] div.hp-how__anim-5,
[data-theme="dark"] span.hp-how__dot,
[data-theme="dark"] span.hp-evidence__pill,
[data-theme="dark"] span.hp-demo__strong { border-color: var(--rv-success-pale) !important; }
[data-theme="dark"] span.hp-problem__row-4,
[data-theme="dark"] span.hp-problem__pill,
[data-theme="dark"] span.hp-pain__pill-2,
[data-theme="dark"] span.hp-pain__strong-7,
[data-theme="dark"] span.hp-case-creator__strong-2,
[data-theme="dark"] span.hp-case-news__pill,
[data-theme="dark"] div.hp-evidence__box-3 { border-color: var(--rv-danger-pale) !important; }
[data-theme="dark"] span.hp-case-news__layer-4 { border-color: var(--rv-surface) !important; }
[data-theme="dark"] span.hp-proof__strong-2,
[data-theme="dark"] input.hp-widget__input,
[data-theme="dark"] span.hp-widget__strong-2,
[data-theme="dark"] strong.hp-widget__box-4,
[data-theme="dark"] span.hp-marquee__strong,
[data-theme="dark"] span.hp-pain__strong-4,
[data-theme="dark"] span.hp-case-news__strong,
[data-theme="dark"] span.hp-bento-pirate__strong-2,
[data-theme="dark"] span.hp-bento-number__strong-2,
[data-theme="dark"] h2.hp-demo__title,
[data-theme="dark"] input.hp-demo__input,
[data-theme="dark"] button.hp-faq__btn,
[data-theme="dark"] a.hp-final__btn,
[data-theme="dark"] a.hp-bento-tools__btn { color: var(--rv-ink) !important; }
[data-theme="dark"] span.hp-marquee__label-4,
[data-theme="dark"] span.hp-preview__label,
[data-theme="dark"] span.hp-case-creator__label-2,
[data-theme="dark"] p.hp-testi__text,
[data-theme="dark"] span.hp-evidence__pill-2,
[data-theme="dark"] ul.hp-demo__list,
[data-theme="dark"] label.hp-demo__box { color: var(--rv-ink-soft) !important; }
[data-theme="dark"] p.hp-shared__text-2,
[data-theme="dark"] p.hp-shared__text,
[data-theme="dark"] p.hp-hero__text,
[data-theme="dark"] span.hp-proof__label,
[data-theme="dark"] span.hp-widget__label-3,
[data-theme="dark"] label.hp-widget__box-3,
[data-theme="dark"] p.hp-problem__text,
[data-theme="dark"] span.hp-problem__label-4,
[data-theme="dark"] p.hp-pain__text,
[data-theme="dark"] span.hp-pain__label-3,
[data-theme="dark"] p.hp-how__text,
[data-theme="dark"] p.hp-preview__text,
[data-theme="dark"] span.hp-case-creator__label,
[data-theme="dark"] span.hp-case-news__label,
[data-theme="dark"] span.hp-bento-pirate__label,
[data-theme="dark"] span.hp-bento-pirate__label-2,
[data-theme="dark"] span.hp-bento-number__label,
[data-theme="dark"] span.hp-bento-figure__eyebrow,
[data-theme="dark"] span.hp-testi__strong-2,
[data-theme="dark"] p.hp-evidence__text,
[data-theme="dark"] span.hp-evidence__label,
[data-theme="dark"] p.hp-demo__text,
[data-theme="dark"] button.hp-demo__btn,
[data-theme="dark"] div.hp-demo__box-2,
[data-theme="dark"] p.hp-demo__text-2,
[data-theme="dark"] div.hp-faq__box-2 { color: var(--rv-body) !important; }
[data-theme="dark"] div.hp-shared__label-2, [data-theme="dark"] span.hp-shared__label-2,
[data-theme="dark"] div.hp-widget__box-2,
[data-theme="dark"] span.hp-widget__eyebrow,
[data-theme="dark"] span.hp-widget__strong-3,
[data-theme="dark"] div.hp-widget__box-5,
[data-theme="dark"] span.hp-marquee__label,
[data-theme="dark"] span.hp-problem__eyebrow,
[data-theme="dark"] span.hp-problem__eyebrow-2,
[data-theme="dark"] span.hp-problem__row-6,
[data-theme="dark"] span.hp-problem__row-7,
[data-theme="dark"] span.hp-problem__row-8,
[data-theme="dark"] span.hp-problem__row-9,
[data-theme="dark"] span.hp-problem__row-10,
[data-theme="dark"] span.hp-problem__eyebrow-3,
[data-theme="dark"] span.hp-problem__strong-3,
[data-theme="dark"] span.hp-problem__label-6,
[data-theme="dark"] span.hp-problem__strong-6,
[data-theme="dark"] span.hp-problem__eyebrow-4,
[data-theme="dark"] span.hp-problem__strong-7,
[data-theme="dark"] span.hp-pain__eyebrow,
[data-theme="dark"] span.hp-pain__label-4,
[data-theme="dark"] span.hp-how__label,
[data-theme="dark"] span.hp-how__label-2,
[data-theme="dark"] span.hp-preview__pill,
[data-theme="dark"] div.hp-case-news__box,
[data-theme="dark"] span.hp-bento-number__label-2,
[data-theme="dark"] span.hp-testi__label-2,
[data-theme="dark"] a.hp-testi__btn,
[data-theme="dark"] span.hp-evidence__label-2,
[data-theme="dark"] span.hp-evidence__eyebrow,
[data-theme="dark"] span.hp-demo__label-2,
[data-theme="dark"] div.hp-marquee__box,
[data-theme="dark"] span.hp-marquee__label-3,
[data-theme="dark"] span.hp-problem__label,
[data-theme="dark"] span.hp-problem__label-3,
[data-theme="dark"] span.hp-problem__strong-4,
[data-theme="dark"] span.hp-problem__label-12,
[data-theme="dark"] span.hp-how__dot-3,
[data-theme="dark"] span.hp-how__strong-4,
[data-theme="dark"] span.hp-preview__eyebrow,
[data-theme="dark"] span.hp-case-creator__label-3,
[data-theme="dark"] span.hp-bento-pirate__pill,
[data-theme="dark"] span.hp-problem__label-14,
[data-theme="dark"] div.hp-final__box,
[data-theme="dark"] span.hp-bento-figure__label,
[data-theme="dark"] span.hp-bento-figure__strong-3,
[data-theme="dark"] span.hp-problem__label-13,
[data-theme="dark"] span.hp-problem__eyebrow-5 { color: var(--rv-muted-2) !important; }
[data-theme="dark"] span.hp-shared__label,
[data-theme="dark"] span.hp-shared__pill,
[data-theme="dark"] span.hp-widget__pill,
[data-theme="dark"] input.hp-widget__input-2,
[data-theme="dark"] span.hp-pain__strong-5,
[data-theme="dark"] span.hp-how__strong,
[data-theme="dark"] span.hp-how__strong-3,
[data-theme="dark"] div.hp-case-creator__row-2,
[data-theme="dark"] span.hp-bento-figure__big,
[data-theme="dark"] span.hp-demo__pill { color: var(--rv-primary) !important; }
[data-theme="dark"] span.hp-widget__pill-3,
[data-theme="dark"] span.hp-pain__pill,
[data-theme="dark"] span.hp-how__pill,
[data-theme="dark"] span.hp-how__dot-2,
[data-theme="dark"] span.hp-preview__strong { color: var(--rv-primary-bright) !important; }
[data-theme="dark"] span.hp-problem__strong-2,
[data-theme="dark"] span.hp-problem__strong-5,
[data-theme="dark"] span.hp-problem__pill,
[data-theme="dark"] span.hp-pain__pill-2,
[data-theme="dark"] span.hp-pain__strong-2,
[data-theme="dark"] span.hp-pain__eyebrow-2,
[data-theme="dark"] span.hp-pain__strong-6,
[data-theme="dark"] span.hp-pain__strong-7 { color: var(--rv-danger) !important; }
[data-theme="dark"] span.hp-widget__pill-2,
[data-theme="dark"] span.hp-pain__strong-3,
[data-theme="dark"] span.hp-how__dot,
[data-theme="dark"] span.hp-how__strong-2,
[data-theme="dark"] span.hp-bento-pirate__big-2,
[data-theme="dark"] span.hp-bento-figure__strong-2,
[data-theme="dark"] span.hp-demo__strong { color: var(--rv-success-deep) !important; }
[data-theme="dark"] span.hp-problem__row-4,
[data-theme="dark"] span.hp-problem__pill,
[data-theme="dark"] span.hp-pain__pill-2,
[data-theme="dark"] span.hp-pain__strong-7,
[data-theme="dark"] span.hp-case-creator__strong-2,
[data-theme="dark"] span.hp-case-news__pill { color: var(--rv-danger) !important; border-color: var(--rv-danger-pale) !important; }
[data-theme="dark"] span.hp-widget__pill-3,
[data-theme="dark"] span.hp-pain__pill,
[data-theme="dark"] span.hp-how__pill { color: var(--rv-primary) !important; border-color: var(--rv-primary-pale) !important; }

/* ---- media tiles (photo / avatar / icon backgrounds set per element) ---- */
.hp-proof__avatar { width:38px; height:38px; border-radius:999px; border:2.5px solid #fbfbfd; background-position:center; background-size:cover; background-repeat:no-repeat; }
.hp-proof__avatar-2 { width:38px; height:38px; border-radius:999px; border:2.5px solid #fbfbfd; background-position:center; background-size:cover; background-repeat:no-repeat; margin-left:-10px; }
.hp-problem__photo { width:38px; height:23px; border-radius:5px; flex-shrink:0; background-position:center; background-size:cover; background-repeat:no-repeat; filter:saturate(.55) opacity(.75); }
.hp-problem__icon { width:11px; height:11px; background-position:center; background-size:contain; background-repeat:no-repeat; opacity:.8; }
.hp-problem__photo-2 { width:46px; height:28px; border-radius:6px; flex-shrink:0; background-position:center; background-size:cover; background-repeat:no-repeat; position:relative; overflow:hidden; }
.hp-problem__photo-3 { position:absolute; bottom:2px; left:2px; width:13px; height:13px; border-radius:4px; background:rgba(10,10,16,.7); background-size:8px; background-position:center; background-repeat:no-repeat; }
.hp-pain__avatar { width:22px; height:22px; border-radius:999px; background-position:center; background-size:cover; background-repeat:no-repeat; flex-shrink:0; }
.hp-bento__avatar { width:56px; height:56px; border-radius:999px; flex-shrink:0; background-position:center; background-size:cover; background-repeat:no-repeat; border:3px solid #fff; box-shadow:0 8px 20px -8px rgba(22,22,29,.28); }

/* ---- marquee platform cards (icon url per card, hit/miss colour) ---- */
.hp-marquee__plat-icon { width:20px; height:20px; flex-shrink:0; background-position:center; background-size:contain; background-repeat:no-repeat; }
.hp-marquee__plat-result { font-size:12px; font-weight:700; opacity:0; animation:rv-fadein .25s cubic-bezier(.23,1,.32,1) .68s forwards; }
.hp-marquee__plat-result.is-hit { color:#6d5ce6; }
.hp-marquee__plat-result.is-miss { color:#8e8ea3; }

/* ---- audience tabs (.is-on = selected; home-v4.js toggles it) ---- */
.hp-problem__tab { display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;box-sizing:border-box;border-radius:18px;padding:18px 22px;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;transition:all .22s cubic-bezier(.23,1,.32,1); background:#fff; color:#16161d; border:1px solid #ececf4; }
.hp-problem__tab.is-on { background:#16161d; color:#fff; border:1px solid #16161d; box-shadow:0 14px 30px -12px rgba(22,22,29,.4); }
.hp-problem__tab-sub { font-size:13px; font-weight:500; color:#8e8ea3; }
.hp-problem__tab.is-on .hp-problem__tab-sub { color:#a3a3b8; }
.hp-problem__tab-arrow { flex-shrink:0;width:30px;height:30px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-size:14px;transition:all .22s cubic-bezier(.23,1,.32,1); background:#f0effa; color:#6d5ce6; }
.hp-problem__tab.is-on .hp-problem__tab-arrow { background:linear-gradient(120deg,#5850ec,#8b5cf6); color:#fff; }
[data-theme="dark"] .hp-problem__tab { background:var(--rv-surface); color:var(--rv-ink); border-color:var(--rv-border); }
[data-theme="dark"] .hp-problem__tab.is-on { background:var(--rv-surface-4); color:var(--rv-ink); border-color:var(--rv-primary-pale); }
[data-theme="dark"] .hp-problem__tab-sub { color:var(--rv-muted-2); }
[data-theme="dark"] .hp-problem__tab-arrow { background:var(--rv-surface-4); color:var(--rv-primary); }

/* ---- testimonials (avatar ramp + source icon set per quote) ---- */
.hp-testi__avatar { width:38px;height:38px;border-radius:999px;flex-shrink:0;background: background:var(--av-bg);color: var(--av-fg);display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;border:2px solid #fff;box-shadow:0 3px 10px -4px rgba(22,22,29,.3) }
.hp-testi__src-icon { width:13px; height:13px; flex-shrink:0; background-position:center; background-size:contain; background-repeat:no-repeat; }

/* ---- FAQ (home-v4.js animates the row height / icon rotation inline) ---- */
.hp-faq__icon { color:#6d5ce6; font-size:22px; flex-shrink:0; transition:transform .22s cubic-bezier(.23,1,.32,1); transform:rotate(0deg); }
.hp-faq__body { display:grid; grid-template-rows:0fr; transition:grid-template-rows .28s cubic-bezier(.23,1,.32,1); }

/* dark: media tiles */
[data-theme="dark"] .hp-proof__avatar { border-color: var(--rv-surface) !important; }
[data-theme="dark"] .hp-proof__avatar-2 { border-color: var(--rv-surface) !important; }
[data-theme="dark"] .hp-bento__avatar { border-color: var(--rv-surface) !important; }

/* ── dark: tinted gradient panels (the attribute-selector remap never covered gradients) ── */
[data-theme="dark"] .hp-hero__layer-3 { background: linear-gradient(0deg, var(--rv-page) 0%, transparent 22%); }
[data-theme="dark"] .hp-case-creator__stack { background: linear-gradient(135deg, var(--rv-surface-3), var(--rv-surface-4)); border-bottom-color: var(--rv-border); }
[data-theme="dark"] .hp-case-news__tile { background: radial-gradient(circle, var(--rv-surface-2) 0%, var(--rv-surface-4) 100%); border-color: var(--rv-border); }
[data-theme="dark"] .hp-bento-pirate__card { background: linear-gradient(170deg, var(--rv-surface), var(--rv-surface-2)); border-color: var(--rv-border); }
[data-theme="dark"] .hp-bento-number__card,
[data-theme="dark"] .hp-bento-figure__card,
[data-theme="dark"] .hp-demo__grid { background: linear-gradient(165deg, var(--rv-surface-2), var(--rv-primary-pale) 60%, var(--rv-surface-3)); border-color: var(--rv-border); }

/* ═══════════════════════════════════════════════════════════════════════════
   2026-09-14 — sections added with the database-driven copy deck
   (config/homepage_copy.php → home tool row). Hero eyebrow/trust line, search
   widget mode tabs, platform strip heading, "Two paths", how-it-works body +
   points, old-ways verdict sub-line, three-card bento.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ---- hero eyebrow + trust line ---- */
span.hp-hero__eyebrow, h1.hp-hero__eyebrow { display:inline-flex; align-self:flex-start; align-items:center; gap:8px; font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#5b4dd1; background:#f0effa; border:1px solid #ddd6fe; border-radius:999px; padding:6px 13px; animation:rv-up .6s cubic-bezier(.23,1,.32,1) both; }
div.hp-hero__trust { display:flex; flex-wrap:wrap; gap:8px 18px; animation:rv-up .6s cubic-bezier(.23,1,.32,1) .24s both; }
span.hp-hero__trust-item { display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:600; color:#5c5c70; }
span.hp-hero__trust-item svg { width:16px; height:16px; padding:2px; border-radius:999px; background:#e8f8f1; color:#00915f; flex-shrink:0; }

/* ---- platform strip heading + trailing note ---- */
div.hp-strip__head { display:flex; flex-direction:column; gap:12px; align-items:center; text-align:center; max-width:720px; padding-top:8px; }
h2.hp-strip__title { margin:0; font-family:'Plus Jakarta Sans',sans-serif; font-size:36px; font-weight:800; letter-spacing:-.03em; line-height:1.08; text-wrap:pretty; }
p.hp-strip__text { margin:0; font-size:17px; line-height:1.6; color:#5c5c70; text-wrap:pretty; }
div.hp-strip__more { text-align:center; margin-top:14px; font-size:14px; font-weight:800; letter-spacing:.04em; color:#8e8ea3; }

/* ---- Two paths ---- */
section.hp-paths__section { position:relative; z-index:1; max-width:1200px; margin:0 auto; padding:0 32px 112px; display:flex; flex-direction:column; gap:36px; }
div.hp-paths__grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
div.hp-paths__card { background:#fff; border:1px solid #ececf4; border-radius:26px; padding:34px 32px; display:flex; flex-direction:column; gap:16px; box-shadow:0 18px 46px -30px rgba(22,22,29,.18); transition:transform .3s cubic-bezier(.23,1,.32,1),box-shadow .3s; }
div.hp-paths__card:hover { transform:translateY(-4px); box-shadow:0 26px 56px -30px rgba(80,63,205,.28); }
span.hp-paths__icon { width:46px; height:46px; border-radius:14px; background:linear-gradient(120deg,#5850ec,#8b5cf6); color:#fff; display:inline-flex; align-items:center; justify-content:center; box-shadow:0 10px 22px -10px rgba(88,80,236,.6); }
h3.hp-paths__heading { margin:0; font-family:'Plus Jakarta Sans',sans-serif; font-size:26px; font-weight:800; letter-spacing:-.03em; line-height:1.15; }
p.hp-paths__text { margin:0; font-size:15.5px; line-height:1.6; color:#5c5c70; }
ul.hp-paths__list { list-style:none; margin:4px 0 0; padding:0; display:flex; flex-direction:column; gap:10px; }
li.hp-paths__item { display:flex; align-items:flex-start; gap:11px; font-size:15px; line-height:1.55; color:#40404f; }
a.hp-paths__btn { display:inline-flex; align-self:flex-start; align-items:center; gap:11px; margin-top:auto; padding:13px 11px 13px 22px; border-radius:999px; background:#16161d; color:#fff; font-size:15px; font-weight:700; transition:transform .18s cubic-bezier(.23,1,.32,1),box-shadow .18s; }
a.hp-paths__btn:hover { transform:translateY(-2px); box-shadow:0 14px 28px -14px rgba(22,22,29,.5); color:#fff; }

/* ---- how it works: body + closing points ---- */
p.hp-how__body { max-width:640px; }
ul.hp-how__points { list-style:none; margin:-8px 0 0; padding:24px 28px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 28px; background:#fafaff; border:1px solid #ececf4; border-radius:22px; }
li.hp-how__point { display:flex; align-items:flex-start; gap:11px; font-size:15px; line-height:1.55; color:#40404f; }

/* ---- old-ways verdict sub-line ---- */
span.hp-problem__verdict-sub { font-weight:400; color:#8e8ea3; }

/* ---- bento: pirate page · big number · plan card ---- */
div.hp-bento__grid { grid-template-columns:repeat(3,minmax(0,1fr)); align-items:stretch; }

/* ---- responsive ---- */
@media (max-width: 980px) {
    div.hp-paths__grid, ul.hp-how__points { grid-template-columns:1fr; }
    div.hp-bento__grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    section.hp-paths__section { padding:0 20px 72px; }
    h2.hp-strip__title { font-size:30px; }
}
@media (max-width: 640px) {
    div.hp-bento__grid { grid-template-columns:1fr; }
    div.hp-paths__card { padding:26px 22px; }
    h3.hp-paths__heading { font-size:22px; }
    h2.hp-strip__title { font-size:26px; }
    ul.hp-how__points { padding:18px 18px; }
}

/* ---- dark ---- */
[data-theme="dark"] span.hp-hero__eyebrow, [data-theme="dark"] h1.hp-hero__eyebrow { background:rgba(139,92,246,.16); border-color:rgba(139,92,246,.34); color:#c4b5fd; }
[data-theme="dark"] span.hp-hero__trust-item { color:var(--rv-muted, #a3a3b8); }
[data-theme="dark"] span.hp-hero__trust-item svg { background:rgba(52,211,153,.14); color:#34d399; }
[data-theme="dark"] p.hp-strip__text, [data-theme="dark"] p.hp-paths__text { color:var(--rv-muted, #a3a3b8); }
[data-theme="dark"] div.hp-strip__more, [data-theme="dark"] span.hp-problem__verdict-sub { color:#8e8ea3; }
[data-theme="dark"] div.hp-paths__card, [data-theme="dark"] ul.hp-how__points { background:var(--rv-surface, #16161d); border-color:var(--rv-border, #2c2c38); box-shadow:none; }
[data-theme="dark"] li.hp-paths__item, [data-theme="dark"] li.hp-how__point { color:#e8e8f2; }
[data-theme="dark"] a.hp-paths__btn { background:linear-gradient(120deg,#5850ec,#8b5cf6); }

/* ═══════════════════════════════════════════════════════════════════════════
   2026-09-14 — zero layout shift in the hero widget (owner: CLS).
   Every state the widget can reach is given its space at load: the left
   column is pinned to the top, the dropzone has one fixed height for both
   the mascot and the picked-file poster, and the mode picker + Save-to-
   Library row are rendered from the start (dimmed, inert) instead of being
   inserted after a file lands. home-v4.js toggles .is-waiting only.
   ═══════════════════════════════════════════════════════════════════════════ */
div.hp-hero__grid { align-items:start; }
div.hp-widget__card-3 { min-height:260px; box-sizing:border-box; justify-content:center; }
div.hp-widget__box, div.hp-widget__box-2 { max-width:100%; text-align:center; }
div.hp-widget__box { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
img.hp-widget__img-4.is-poster { width:auto; height:118px; max-width:100%; aspect-ratio:16/9; border-radius:12px; }
div.hp-widget__anim-5 { display:flex; animation:none; transition:opacity .25s; }
div.hp-widget__anim-5.is-waiting { opacity:.42; pointer-events:none; }
div.hp-widget__anim-5.is-waiting button.hp-widget__btn { cursor:default; }
label.hp-widget__box-3 { display:flex; transition:opacity .25s; }
label.hp-widget__box-3.is-waiting { opacity:.42; pointer-events:none; }
@media (max-width: 640px) {
    img.hp-widget__img-4.is-poster { height:96px; }   /* format line wraps to 2 lines on phones — keep the 260px zone */
}

/* ── 2026-09-14 compact widget (owner: no thumbnail, shorter tool section) ── */
div.hp-hero__grid { align-items:center; }             /* zero-shift is guaranteed above, so centring is safe again */
div.hp-widget__card-2 { padding:20px; gap:12px; }
div.hp-widget__card-3 { min-height:150px; padding:22px 20px; gap:7px; }
img.hp-widget__img-4 { width:42px; height:42px; }
input.hp-widget__input { padding:12px 15px; }
div.hp-widget__grid { gap:8px; }
button.hp-widget__btn { padding:12px; gap:6px; border-radius:14px; }
span.hp-widget__strong-2 { font-size:13.5px; }
span.hp-widget__label-3 { font-size:12px; line-height:1.4; }
span.hp-widget__pill-2, span.hp-widget__pill-3 { font-size:11.5px; padding:2px 8px; }
label.hp-widget__box-3 { font-size:12px; margin-top:0; }
button.hp-widget__btn-2 { padding:13px 20px; font-size:15px; }
div.hp-widget__box-5 { font-size:12px; }
@media (max-width: 640px) {
    div.hp-widget__card-3 { min-height:150px; }
}
/* a long file name must never widen the widget column (it re-wrapped the H1 and picker copy) */
div.hp-hero__grid { grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr); }
div.hp-widget__anim, div.hp-widget__card, div.hp-widget__card-2, div.hp-widget__card-3 { min-width:0; }
div.hp-widget__box { width:100%; }

/* ── Benefits (2026-09-14; old home page section on the v4 system) ── */
section.hp-benefits__section { position:relative; z-index:1; max-width:1200px; margin:0 auto; padding:0 32px 112px; display:flex; flex-direction:column; gap:40px; }
div.hp-benefits__stack { display:flex; flex-direction:column; gap:14px; align-items:center; text-align:center; max-width:720px; margin:0 auto; }
span.hp-benefits__eyebrow { font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#5b4dd1; background:#f0effa; border:1px solid #ddd6fe; border-radius:999px; padding:6px 13px; }
h2.hp-benefits__title { margin:0; font-family:'Plus Jakarta Sans',sans-serif; font-size:clamp(28px,3.4vw,42px); font-weight:800; letter-spacing:-.03em; line-height:1.08; text-wrap:pretty; }
p.hp-benefits__text { margin:0; font-size:17px; line-height:1.6; color:#5c5c70; text-wrap:pretty; }
div.hp-benefits__grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
div.hp-benefits__card { background:#fff; border:1px solid #ececf4; border-radius:22px; padding:28px 26px; display:flex; flex-direction:column; gap:12px; box-shadow:0 18px 46px -30px rgba(22,22,29,.18); transition:transform .3s cubic-bezier(.23,1,.32,1),box-shadow .3s,border-color .3s; }
div.hp-benefits__card:hover { transform:translateY(-4px); border-color:#ddd6fe; box-shadow:0 26px 56px -30px rgba(80,63,205,.28); }
span.hp-benefits__icon { width:46px; height:46px; border-radius:14px; display:inline-flex; align-items:center; justify-content:center; }
span.hp-benefits__icon svg { width:22px; height:22px; }
span.hp-benefits__icon--blue   { background:#eef0ff; color:#5850ec; }
span.hp-benefits__icon--green  { background:#e8f8f1; color:#00915f; }
span.hp-benefits__icon--orange { background:#fff4e6; color:#d97706; }
span.hp-benefits__icon--purple { background:#f0effa; color:#8b5cf6; }
span.hp-benefits__icon--teal   { background:#e6f7f5; color:#0d9488; }
span.hp-benefits__icon--pink   { background:#fdeef4; color:#db2777; }
h3.hp-benefits__heading { margin:4px 0 0; font-family:'Plus Jakarta Sans',sans-serif; font-size:19px; font-weight:800; letter-spacing:-.02em; line-height:1.2; color:#16161d; }
p.hp-benefits__body { margin:0; font-size:15px; line-height:1.6; color:#5c5c70; }
@media (max-width: 980px) {
    div.hp-benefits__grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    section.hp-benefits__section { padding:0 20px 72px; gap:28px; }
}
@media (max-width: 640px) {
    div.hp-benefits__grid { grid-template-columns:1fr; gap:14px; }
    div.hp-benefits__card { padding:22px 20px; }
}
[data-theme="dark"] span.hp-benefits__eyebrow { background:rgba(139,92,246,.16); border-color:rgba(139,92,246,.34); color:#c4b5fd; }
[data-theme="dark"] p.hp-benefits__text, [data-theme="dark"] p.hp-benefits__body { color:var(--rv-body, #b4b4c8); }
[data-theme="dark"] h3.hp-benefits__heading { color:var(--rv-ink, #f4f4fa); }
[data-theme="dark"] div.hp-benefits__card { background:var(--rv-surface, #14141f); border-color:var(--rv-border, #26263a); box-shadow:none; }
[data-theme="dark"] div.hp-benefits__card:hover { border-color:var(--rv-primary-pale, #2a2450); }
[data-theme="dark"] span.hp-benefits__icon--blue   { background:rgba(88,80,236,.18);  color:#a5b4fc; }
[data-theme="dark"] span.hp-benefits__icon--green  { background:rgba(52,211,153,.14); color:#34d399; }
[data-theme="dark"] span.hp-benefits__icon--orange { background:rgba(251,191,36,.14); color:#fbbf24; }
[data-theme="dark"] span.hp-benefits__icon--purple { background:rgba(139,92,246,.18); color:#c4b5fd; }
[data-theme="dark"] span.hp-benefits__icon--teal   { background:rgba(45,212,191,.14); color:#2dd4bf; }
[data-theme="dark"] span.hp-benefits__icon--pink   { background:rgba(244,114,182,.14); color:#f472b6; }
h1.hp-hero__eyebrow { margin:0; font-family:inherit; line-height:1.2; }
div.hp-hero__title { display:block; }
/* responsive-v4.css sizes every .hv-design h1 for phones — the eyebrow h1 must keep its 12px pill look */
.hv-design h1.hp-hero__eyebrow { font-size:12px !important; }

/* ── use-case tabs: no layout shift when switching (owner, 2026-09-14) ──
   All four panels are laid out in the SAME grid cell so the card is always as
   tall as the tallest panel; the inactive ones are hidden with visibility, not
   display:none (home-v4-states.css). */
div.hp-pain__card { display:grid; align-items:start; }
div.hp-pain__card > .hv-icppanel { grid-area:1 / 1; display:flex; visibility:hidden; opacity:0; pointer-events:none; transition:opacity .28s ease; }
div.hp-pain__card > .hv-icppanel.is-active,
div.hp-pain__card > .hv-icppanel[data-hv-icp="0"]:not(.is-hidden) { visibility:visible; opacity:1; pointer-events:auto; }

/* ── widget steps (2026-09-14): step 1 = drop zone + link, step 2 = file name + Basic/Deep picker.
   Both live in the SAME grid cell, so the card keeps the taller step's height at all times. ── */
div.hp-widget__steps { display:grid; min-width:0; }
div.hp-widget__step { grid-area:1 / 1; display:flex; flex-direction:column; gap:12px; min-width:0; visibility:hidden; opacity:0; pointer-events:none; transition:opacity .25s ease; }
div.hp-widget__step.is-on { visibility:visible; opacity:1; pointer-events:auto; }
div.hp-widget__file { display:flex; align-items:center; gap:10px; padding:11px 14px; border:1px solid #ddd6fe; background:#f0effa; border-radius:14px; min-width:0; }
span.hp-widget__file-ico { width:22px; height:22px; border-radius:999px; background:linear-gradient(120deg,#5850ec,#8b5cf6); color:#fff; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
span.hp-widget__file-name { flex:1; min-width:0; font-size:13.5px; font-weight:700; color:#16161d; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
button.hp-widget__file-change { flex-shrink:0; border:1px solid #ddd6fe; background:#fff; color:#5b4dd1; border-radius:999px; padding:5px 12px; font-family:'Plus Jakarta Sans',sans-serif; font-size:12px; font-weight:700; cursor:pointer; transition:background .16s,color .16s; }
button.hp-widget__file-change:hover { background:#5b4dd1; color:#fff; }
/* the picker no longer needs the dimmed "waiting" look — it only exists in step 2 */
div.hp-widget__anim-5.is-waiting, label.hp-widget__box-3.is-waiting { opacity:1; pointer-events:auto; }
[data-theme="dark"] div.hp-widget__file { background:rgba(139,92,246,.14); border-color:rgba(139,92,246,.34); }
[data-theme="dark"] span.hp-widget__file-name { color:#f4f4fa; }
[data-theme="dark"] button.hp-widget__file-change { background:var(--rv-surface-3, #1f1f30); border-color:rgba(139,92,246,.34); color:#c4b5fd; }
[data-theme="dark"] button.hp-widget__file-change:hover { background:#8b5cf6; color:#fff; }

/* ── Benefits, second pass (owner 09-14: "change the feel") — split header, numbered inset cards,
   gradient icon tiles, hover lifts the card to a white surface. Overrides the block above. ── */
div.hp-benefits__head { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:32px 64px; align-items:end; }
div.hp-benefits__stack { align-items:flex-start; text-align:left; max-width:none; margin:0; gap:16px; }
span.hp-benefits__eyebrow { display:inline-flex; align-items:center; gap:8px; padding:5px 13px 5px 6px; }
img.hp-benefits__mascot { width:22px; height:22px; border-radius:999px; background:#fff; object-fit:contain; padding:2px; }
h2.hp-benefits__title { font-size:clamp(30px,3.6vw,46px); }
p.hp-benefits__text { font-size:17px; max-width:460px; padding-bottom:6px; border-left:3px solid #ddd6fe; padding-left:18px; }
div.hp-benefits__grid { gap:16px; }
div.hp-benefits__card { position:relative; background:#fafaff; border:1px solid #ececf4; border-radius:24px; padding:28px 26px 26px; gap:14px; box-shadow:none; overflow:hidden; }
div.hp-benefits__card::after { content:""; position:absolute; inset:auto -40px -60px auto; width:180px; height:180px; border-radius:50%; background:radial-gradient(circle, rgba(139,92,246,.12), transparent 65%); opacity:0; transition:opacity .35s; pointer-events:none; }
div.hp-benefits__card:hover { background:#fff; border-color:#ddd6fe; transform:translateY(-5px); box-shadow:0 30px 60px -32px rgba(80,63,205,.35); }
div.hp-benefits__card:hover::after { opacity:1; }
span.hp-benefits__num { position:absolute; top:22px; right:24px; font-family:'Plus Jakarta Sans',sans-serif; font-size:13px; font-weight:800; letter-spacing:.08em; color:#c9c9d8; }
span.hp-benefits__icon { width:54px; height:54px; border-radius:17px; color:#fff; box-shadow:0 12px 24px -12px rgba(22,22,29,.35); transition:transform .3s cubic-bezier(.23,1,.32,1); }
div.hp-benefits__card:hover span.hp-benefits__icon { transform:translateY(-2px) rotate(-4deg); }
span.hp-benefits__icon svg { width:24px; height:24px; }
span.hp-benefits__icon--blue   { background:linear-gradient(135deg,#5850ec,#8b5cf6); }
span.hp-benefits__icon--green  { background:linear-gradient(135deg,#00915f,#34d399); }
span.hp-benefits__icon--orange { background:linear-gradient(135deg,#d97706,#fbbf24); }
span.hp-benefits__icon--purple { background:linear-gradient(135deg,#7c3aed,#c084fc); }
span.hp-benefits__icon--teal   { background:linear-gradient(135deg,#0d9488,#2dd4bf); }
span.hp-benefits__icon--pink   { background:linear-gradient(135deg,#db2777,#f472b6); }
h3.hp-benefits__heading { font-size:20px; margin-top:6px; }
p.hp-benefits__body { font-size:15px; color:#5c5c70; }
@media (max-width: 980px) {
    div.hp-benefits__head { grid-template-columns:1fr; gap:16px; align-items:start; }
    p.hp-benefits__text { max-width:none; }
}
[data-theme="dark"] div.hp-benefits__card { background:var(--rv-surface-2, #1a1a28); border-color:var(--rv-border, #26263a); }
[data-theme="dark"] div.hp-benefits__card:hover { background:var(--rv-surface-3, #1f1f30); border-color:var(--rv-primary-pale, #2a2450); box-shadow:0 30px 60px -32px rgba(0,0,0,.8); }
[data-theme="dark"] span.hp-benefits__num { color:#4a4a60; }
[data-theme="dark"] p.hp-benefits__text { border-left-color:rgba(139,92,246,.4); }
[data-theme="dark"] img.hp-benefits__mascot { background:var(--rv-surface-3, #1f1f30); }
[data-theme="dark"] span.hp-benefits__icon--blue, [data-theme="dark"] span.hp-benefits__icon--green, [data-theme="dark"] span.hp-benefits__icon--orange, [data-theme="dark"] span.hp-benefits__icon--purple, [data-theme="dark"] span.hp-benefits__icon--teal, [data-theme="dark"] span.hp-benefits__icon--pink { color:#fff; box-shadow:none; }
/* keep the gradient icon tiles in dark mode too (first-pass dark rule made them translucent) */
[data-theme="dark"] span.hp-benefits__icon--blue   { background:linear-gradient(135deg,#5850ec,#8b5cf6); }
[data-theme="dark"] span.hp-benefits__icon--green  { background:linear-gradient(135deg,#00915f,#34d399); }
[data-theme="dark"] span.hp-benefits__icon--orange { background:linear-gradient(135deg,#d97706,#fbbf24); }
[data-theme="dark"] span.hp-benefits__icon--purple { background:linear-gradient(135deg,#7c3aed,#c084fc); }
[data-theme="dark"] span.hp-benefits__icon--teal   { background:linear-gradient(135deg,#0d9488,#2dd4bf); }
[data-theme="dark"] span.hp-benefits__icon--pink   { background:linear-gradient(135deg,#db2777,#f472b6); }

/* ── 2026-09-14 contrast pass (site audit, CR < 3 on text) ── */
span.hp-problem__label-2 { color:#77778c; }
span.hp-problem__strong-6 { color:#77778c; }
span.hp-bento-number__label-2 { color:#6b6b80; }
span.hp-evidence__pill { color:#00915f; }
span.hp-demo__row-2 { color:#4c3fbf; }
[data-theme="dark"] span.hp-demo__row-2 { color:#4c3fbf; }

/* phones: the Basic/Deep cards sit side by side with title + tag only, so the reserved
   step-2 height stays close to step 1 (no tall empty gap under the drop zone). */
@media (max-width: 560px) {
    div.hp-widget__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px; }
    button.hp-widget__btn { padding: 11px 10px; gap: 6px; }
    span.hp-widget__label-3, span.hp-widget__row-5 { display: none; }
    span.hp-widget__strong-2 { font-size: 13px; }
    span.hp-widget__row-4 { flex-wrap: wrap; }
    span.hp-widget__pill-3 { margin-left: 0; }
    div.hp-widget__card-2 { padding: 16px; gap: 10px; }
    div.hp-widget__card-3 { min-height: 138px; padding: 18px 14px; }
    button.hp-widget__btn-2 { padding: 12px 14px; font-size: 14px; }
    div.hp-widget__file { padding: 9px 10px; }
    label.hp-widget__box-3 { font-size: 11.5px; }
}
/* phones: the widget footnote swaps between a 2-line and a 1-line message — reserve two lines so the card never shifts */
@media (max-width: 560px) { div.hp-widget__box-5 { min-height: 40px; } }   /* two 20px lines */

/* ── 2026-09-14 (owner): no empty band under the link field. Step 1 sits in the same grid cell as
   step 2 (the taller Basic/Deep picker), so the drop zone stretches to fill whatever height the
   cell reserves — the widget height itself does not change, so still zero layout shift. ── */
div.hp-widget__step[data-hv-step="1"] div.hp-widget__card-3 { flex:1 1 auto; }

/* ── CTA arrows removed (owner, 2026-09-15): these buttons were padded unevenly
   to leave room for the round → badge — even it out so the label is centred. ── */
a.hp-paths__btn, a.hp-problem__btn { padding:13px 22px; justify-content:center; }
a.hp-preview__btn { padding:14px 22px; justify-content:center; }
a.hp-bento-tools__btn { padding:13px 24px; justify-content:center; }
a.hp-evidence__btn { padding:14px 24px; justify-content:center; }
a.hp-final__btn { padding:15px 32px; justify-content:center; }
button.hp-widget__btn-2, button.hp-demo__btn-2 { justify-content:center; }

/* ── "Revideo" results card (Old ways vs Revideo), narrow columns (2026-09-15):
   at tablet / small-desktop widths the card is ~260-310px wide, "16 days after
   you" had no ellipsis and ran under the views pill, and the header line was
   cut mid-word. Every text line now truncates cleanly and the pill compacts. ── */
div.hp-problem__card-4 div.hp-problem__stack-3 { min-width:0; }
span.hp-problem__label-14 { overflow:hidden; text-overflow:ellipsis; }
div.hp-problem__row-13 div.hp-problem__stack-2 { flex:1 1 auto; }
span.hp-problem__label-13 { white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; line-height:1.35; }
span.hp-problem__pill-2 { flex-shrink:0; }
@media (min-width: 981px) and (max-width: 1280px), (max-width: 360px) {
    div.hp-problem__card-4 { padding:18px; }
    div.hp-problem__card-4 [class*="hp-problem__anim-"] { gap:9px; }
    div.hp-problem__card-4 div.hp-problem__photo-2 { width:40px; height:24px; }
    span.hp-problem__pill-3 { font-size:10.5px; padding:2px 7px; }
    span.hp-problem__strong-9 { font-size:12px; }
}

/* ── Mode cards on phones (2026-09-15): in the two-column grid the tags
   ("Free · no account", "Account required") were nowrap and wider than the
   card, so they ran out of it, and the Deep card's tag shared the title row,
   pushing "Deep search" onto a line below its radio. On phones both cards now
   read the same: radio + name on one row, the tag on its own line underneath,
   never wider than the card. Desktop layout is unchanged. ── */
@media (max-width: 560px) {
    div.hp-widget__grid > button.hp-widget__btn { min-width: 0; overflow: hidden; }
    span.hp-widget__row-3, span.hp-widget__row-4 { flex-wrap: wrap; align-items: center; column-gap: 8px; row-gap: 6px; min-width: 0; }
    span.hp-widget__row-3 span.hp-widget__strong-2,
    span.hp-widget__row-4 span.hp-widget__strong-2 { flex: 1 1 0; min-width: 0; line-height: 1.25; }
    span.hp-widget__row-4 span.hp-widget__pill-3 { flex: 0 1 auto; order: 3; margin-left: 0; }
    span.hp-widget__row-4::after { content: ''; order: 2; flex-basis: 100%; height: 0; }   /* line break before the tag */
    span.hp-widget__pill-2, span.hp-widget__pill-3 {
        max-width: 100%; box-sizing: border-box;
        white-space: normal; text-align: left; line-height: 1.3;
        font-size: 11px; padding: 3px 8px; letter-spacing: 0;
    }
}
@media (max-width: 360px) {
    span.hp-widget__pill-2, span.hp-widget__pill-3 { font-size: 10.5px; padding: 2px 7px; }
    span.hp-widget__row-3 span.hp-widget__strong-2, span.hp-widget__row-4 span.hp-widget__strong-2 { font-size: 12.5px; }
}

/* ── Use-cases panel on phones (2026-09-15): the panels share one grid cell,
   and an auto grid column sizes to the widest panel's min-content (the
   ORIGINAL / COPY bars in a row), so every panel was ~50px wider than the
   card and its text and inner cards ran past the right edge. The column is
   now clamped to the card, and inner rows may shrink / wrap. ── */
div.hp-pain__card { grid-template-columns: minmax(0, 1fr); }
div.hp-pain__card > .hv-icppanel, div.hp-pain__anim, div.hp-pain__anim > * { min-width: 0; max-width: 100%; box-sizing: border-box; }
@media (max-width: 760px) {
    div.hp-pain__card { padding: 20px; min-height: 0; border-radius: 20px; }
    div.hp-pain__anim { gap: 16px; }
    h3.hp-pain__heading { font-size: 22px; overflow-wrap: anywhere; }
    p.hp-pain__text { font-size: 15px; max-width: none; overflow-wrap: anywhere; }
    div.hp-pain__card-2, div.hp-pain__card-4, div.hp-pain__card-5, div.hp-pain__card-8 { padding: 14px; }
    div.hp-pain__card-3, div.hp-pain__card-6, div.hp-pain__card-7 { min-width: 0; flex-wrap: wrap; row-gap: 4px; }
    div.hp-pain__card-2 [class*="hp-shared__"] { min-width: 0; max-width: 100%; flex-wrap: wrap; row-gap: 6px; }
    span.hp-pain__label { min-width: 0; overflow-wrap: anywhere; }
    div.hp-pain__card-4 { gap: 12px; }
    div.hp-pain__stack-3 { min-width: 0; flex: 1 1 0; }
    span.hp-pain__strong-5, span.hp-pain__strong-6, span.hp-pain__eyebrow-2 { overflow-wrap: anywhere; }
    span.hp-pain__label-4 { overflow-wrap: anywhere; }
    span.hp-pain__strong-4 { flex-wrap: wrap; max-width: 100%; }
    span.hp-pain__pill { max-width: 100%; white-space: normal; letter-spacing: .05em; }
}

/* ── URL field on phones (2026-09-15): keep the field inside the card and
   let a long pasted link end in an ellipsis instead of stretching it. ── */
input.hp-widget__input { box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%; text-overflow: ellipsis; }
@media (max-width: 560px) {
    input.hp-widget__input { font-size: 16px; padding: 12px 14px; }   /* 16px stops iOS zooming the page on focus */
    div.hp-widget__card { transform: none !important; }
}


/* ── Discord (2026-09-22): pill under the hero search card + final-CTA button ── */
a.hp-discord {
    /* hung below the card, out of flow: the wrapper keeps its height, so the
       floating Instagram bubble (bottom-anchored) stays where it was */
    position: absolute; top: 100%; left: 50%; transform: translateX(-50%); z-index: 3; pointer-events: auto;
    display: inline-flex; align-items: center; gap: 12px; margin-top: 24px; width: max-content; max-width: 100%;
    padding: 8px 8px 8px 8px; border-radius: 999px; overflow: hidden;
    background: linear-gradient(120deg, #5865F2 0%, #6d5ce6 55%, #8b5cf6 100%);
    border: 1px solid rgba(255,255,255,.18);
    box-shadow: 0 18px 38px -16px rgba(88,101,242,.85), 0 0 0 6px rgba(88,101,242,.10);
    color: #fff; font-size: 15px; font-weight: 800; letter-spacing: -.01em; text-decoration: none;
    transition: transform .22s cubic-bezier(.23,1,.32,1), box-shadow .22s;
    animation: hp-discord-glow 2.8s ease-in-out infinite;
}
/* slow shine sweep across the pill */
a.hp-discord::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 35%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
    transform: skewX(-18deg); animation: hp-discord-shine 3.6s ease-in-out infinite; pointer-events: none;
}
a.hp-discord:hover { transform: translate(-50%, -2px); box-shadow: 0 22px 44px -16px rgba(88,101,242,.95), 0 0 0 7px rgba(88,101,242,.16); color: #fff; text-decoration: none; }
span.hp-discord__ico { width: 36px; height: 36px; border-radius: 999px; background: #fff; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 6px 14px -6px rgba(22,22,29,.35); }
span.hp-discord__ico img { width: 20px; height: 20px; display: block; }
span.hp-discord__txt { white-space: nowrap; }
span.hp-discord__sep { display: none; }
span.hp-discord__go {
    display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
    background: #fff; color: #5865F2; font-weight: 800; font-size: 13.5px;
    padding: 8px 14px; border-radius: 999px;
}
@keyframes hp-discord-glow { 0%, 100% { box-shadow: 0 18px 38px -16px rgba(88,101,242,.85), 0 0 0 6px rgba(88,101,242,.10); } 50% { box-shadow: 0 18px 38px -14px rgba(88,101,242,.95), 0 0 0 10px rgba(88,101,242,.06); } }
@keyframes hp-discord-shine { 0% { left: -40%; } 55%, 100% { left: 130%; } }
@media (prefers-reduced-motion: reduce) { a.hp-discord, a.hp-discord::after { animation: none; } }
div.hp-final__actions { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
div.hp-final__actions a.hp-final__btn { margin-top: 0; }
a.hp-final__discord {
    display: inline-flex; align-items: center; gap: 10px; padding: 15px 26px; border-radius: 999px;
    background: #5865F2; color: #fff; font-size: 17px; font-weight: 700; text-decoration: none;
    box-shadow: 0 14px 30px -14px rgba(88,101,242,.8);
    transition: transform .22s cubic-bezier(.23,1,.32,1), box-shadow .22s, background .2s;
}
a.hp-final__discord:hover { transform: translateY(-2px); background: #4752c4; color: #fff; text-decoration: none; }
a.hp-final__discord img { width: 18px; height: 18px; display: block; }
@media (max-width: 560px) {
    a.hp-discord { font-size: 13px; gap: 8px; }
    span.hp-discord__go { padding: 7px 11px; font-size: 12.5px; }
    div.hp-final__actions { flex-direction: column; width: 100%; }
    div.hp-final__actions a { justify-content: center; }
}

/* ── Discord pill spacing on small screens (owner, 2026-09-23) ──────────────
   The pill hangs out of flow (position:absolute; top:100%) so the floating
   app bubbles inside .hp-widget__anim keep their bottom-anchored places.
   Nothing reserved the space it occupies, so on a phone it landed on the
   "One search. Every platform at once." heading below. Reserve its height
   (24px offset + ~54px pill) on the wrapper instead of putting it back in
   flow, which would move those bubbles. */
@media (max-width: 900px) {
    div.hp-widget__anim {
        margin-bottom: 96px;
    }
}