:root{
--primary:#E8460A;
--primary-deep:#B5350A; --primary-text:#C2410C;
--secondary:#EF1763;
--ink:#453B33;
--muted:#75665B;
--cream:#FFF9F2;
--cream2:#FFEEDD;
--line:rgba(232,70,10,.16);
}
*{box-sizing:border-box;}
body{
margin:0;font-family:'Jost',system-ui,sans-serif;color:var(--ink);
background:#FFFFFF;
background-image:
radial-gradient(rgba(34,22,9,.05) 1px, transparent 1px),
linear-gradient(rgba(34,22,9,.028) 1px, transparent 1px),
linear-gradient(90deg, rgba(34,22,9,.028) 1px, transparent 1px);
background-size:22px 22px, 88px 88px, 88px 88px;
background-position:0 0, 0 0, 0 0;
}
/* ---- scroll snapping ----
'proximity' rather than 'mandatory' on purpose: several sections here are taller
than the viewport, and mandatory snapping makes their lower half unreachable.
Proximity still lands you cleanly on a section start whenever a scroll ends near
one, which is what stops elements settling at odd half-scrolled positions.
The pinned problem section carries its own two snap points (see .snap-point) —
one per resting state — so it can only ever come to rest fully before or fully
after the reveal, never mid-sequence. */
/* Only ONE snap container. Declaring scroll-snap-type on html AND body makes body a
second, nested one; the scroller is html, so snap positions were being registered
against the wrong container and `scroll-snap-stop: always` had nothing to enforce —
which is how a fast flick could clear a whole pinned section. */
html{scroll-snap-type:y proximity;scroll-padding-top:0;}
/* scroll-snap-stop:always is what actually stops a fast flick skipping a section:
proximity snapping alone only tidies up where a scroll happens to end, while
'always' forbids the scroller from passing more than one snap position per gesture,
so each fling advances exactly one resting state instead of flying over several. */
.snap-sec{scroll-snap-align:start;scroll-snap-stop:always;}
.snap-point{position:absolute;left:0;width:100%;height:1px;pointer-events:none;
scroll-snap-align:start;scroll-snap-stop:always;}
a{color:inherit;text-decoration:none;}
a:hover{color:var(--primary-text);}
h1,h2,h3{font-family:'Jost',sans-serif;margin:0;}
p{margin:0;}
button{font-family:'Jost',sans-serif;cursor:pointer;border:none;}
/* accent text (headline emphasis + gradient words) is pinned to exactly these two
hex values rather than the broader --primary/--secondary brand vars */
.accent{background:linear-gradient(120deg,#FF7A29,#EF1763);-webkit-background-clip:text;background-clip:text;color:transparent;font-style:italic;}
.grad-text{background:linear-gradient(120deg,#FF7A29,#EF1763);-webkit-background-clip:text;background-clip:text;color:transparent;}
/* ---- the two button types: .btn-accent (gradient fill) and .btn-outline (white/
bordered) — .btn-primary/.btn-ghost are kept as aliases so existing markup still
works. Every button on the page (nav, hero, CTA section, the loading/"Completed"
pill) shares this exact 16px corner radius; only padding/font-size change per
size modifier (.btn-sm / default / .btn-lg), stacked as a second class. ---- */
.btn-primary, .btn-accent{
background:linear-gradient(90deg,#D64200 0%,#D64200 40%,#D73959 100%);
color:#fff;padding:14px 28px;border-radius:16px;font-weight:600;font-size:15px;
box-shadow:0 10px 24px -8px rgba(232,70,10,.5), 0 0 26px 2px rgba(239,23,99,.22);
transition:transform .2s ease, box-shadow .2s ease;
display:inline-flex;align-items:center;gap:8px;
}
.btn-primary:hover, .btn-accent:hover{transform:translateY(-2px);box-shadow:0 14px 28px -8px rgba(232,70,10,.6), 0 0 32px 4px rgba(239,23,99,.3);color:#fff;}
/* third, quieter type: near-black solid, used for the nav's demo button so the
gradient accent stays reserved for the page's primary calls to action */
.btn-dark{
background:#1A120A;color:#fff;padding:14px 28px;border-radius:16px;font-weight:600;font-size:15px;
box-shadow:0 8px 18px -8px rgba(20,15,10,.45);
transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
display:inline-flex;align-items:center;gap:8px;
}
.btn-dark:hover{background:#2A1D10;color:#fff;transform:translateY(-2px);box-shadow:0 12px 24px -8px rgba(20,15,10,.55);}
.nav-logo{display:flex;align-items:center;flex-shrink:0;}
.nav-logo svg{display:block;width:86px;height:auto;}
.btn-ghost, .btn-outline{
background:#fff;color:var(--ink);padding:14px 26px;border-radius:16px;font-weight:600;font-size:15px;
border:1.5px solid rgba(20,15,10,.1);box-shadow:0 4px 10px -6px rgba(20,15,10,.14);
transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
display:inline-flex;align-items:center;gap:8px;
}
.btn-ghost:hover, .btn-outline:hover{border-color:rgba(20,15,10,.2);transform:translateY(-2px);color:var(--ink);box-shadow:0 8px 16px -8px rgba(20,15,10,.18);}
/* size modifiers — stack alongside .btn-accent/.btn-primary/.btn-outline/.btn-ghost;
placed after them in source order so padding/font-size here win at equal specificity */
.btn-sm{padding:10px 18px;font-size:13.5px;gap:6px;}
.btn-lg{padding:19px 38px;font-size:17px;gap:10px;}
.card{background:#fff;border-radius:20px;border:1px solid var(--line);box-shadow:0 20px 45px -25px rgba(90,45,10,.35);}
@keyframes float1{0%,100%{transform:translateY(0) rotate(-3deg);}50%{transform:translateY(-16px) rotate(-1deg);}}
@keyframes float2{0%,100%{transform:translateY(0) rotate(2deg);}50%{transform:translateY(-22px) rotate(4deg);}}
@keyframes float3{0%,100%{transform:translateY(0) rotate(0deg);}50%{transform:translateY(-12px) rotate(-2deg);}}
@keyframes spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
@keyframes spinRev{from{transform:rotate(360deg);}to{transform:rotate(0deg);}}
@keyframes pulseDot{0%,100%{opacity:.35;transform:scale(1);}50%{opacity:1;transform:scale(1.35);}}
@keyframes glow{0%,100%{opacity:.5;}50%{opacity:1;}}
@keyframes barGrow{from{transform:scaleY(0);}to{transform:scaleY(1);}}
@keyframes chatBob{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}
.float-1{animation:float1 6s ease-in-out infinite;}
.float-2{animation:float2 7.5s ease-in-out infinite;}
.float-3{animation:float3 5.5s ease-in-out infinite;}
.ring{border-radius:50%;border:1.5px dashed var(--line);position:absolute;inset:0;}
.ring-spin{animation:spin 14s linear infinite;}
.ring-spin-rev{animation:spinRev 18s linear infinite;}
.ring-dot{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--primary);top:-4px;left:50%;margin-left:-4px;}
.badge-circle{
width:84px;height:84px;border-radius:50%;background:#fff;border:1px solid var(--line);
display:flex;align-items:center;justify-content:center;position:relative;margin:0 auto;
box-shadow:0 14px 30px -18px rgba(90,45,10,.4);
}
.pill{
background:#fff;border:1px solid var(--line);border-radius:100px;padding:8px 16px;
font-size:13px;font-weight:600;color:var(--primary-deep);box-shadow:0 12px 24px -16px rgba(90,45,10,.4);
display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
}
.dot{width:6px;height:6px;border-radius:50%;background:var(--secondary);animation:pulseDot 2.2s ease-in-out infinite;}
.browser-frame{background:#fff;border-radius:16px;overflow:hidden;border:1px solid var(--line);}
.browser-bar{height:26px;background:var(--cream2);display:flex;align-items:center;gap:5px;padding:0 10px;}
.browser-dot{width:7px;height:7px;border-radius:50%;}
.timeline-line{position:absolute;left:27px;top:8px;bottom:8px;width:1.5px;background:repeating-linear-gradient(to bottom,var(--primary) 0 6px,transparent 6px 12px);}
.num-badge{
width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#D64200 0%,#D64200 40%,#D73959 100%);
color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px;flex-shrink:0;
box-shadow:0 12px 22px -10px rgba(232,70,10,.6);z-index:1;
}
/* fixed rather than sticky — sticky is unreliable in this renderer, and the bar is
the first thing in the document anyway, so there is nothing for it to stick to */
.nav-wrap{
position:fixed;top:14px;left:0;right:0;z-index:40;
width:max-content;max-width:calc(100% - 64px);margin:0 auto;
border-radius:100px;background:rgba(255,255,255,.52);
-webkit-backdrop-filter:blur(22px) saturate(200%);backdrop-filter:blur(22px) saturate(200%);
box-shadow:0 10px 28px -16px rgba(20,15,10,.2), 0 0 0 1px rgba(255,255,255,.75) inset;
border:1px solid rgba(20,15,10,.06);
transform-origin:top center;
transition:transform .35s cubic-bezier(.22,1,.36,1), background .35s ease,
box-shadow .35s ease, backdrop-filter .35s ease;
}
/* once the page moves, the bar condenses to 85% and the white behind it thins out so
the content reads through the glass */
.nav-wrap.condensed{
transform:scale(.85);
background:rgba(255,255,255,.34);
-webkit-backdrop-filter:blur(30px) saturate(190%);backdrop-filter:blur(30px) saturate(190%);
box-shadow:0 12px 30px -18px rgba(20,15,10,.24), 0 0 0 1px rgba(255,255,255,.55) inset;
}
.nav-link{font-size:14px;font-weight:400;color:var(--muted);padding:6px 2px;white-space:nowrap;
transition:color .35s ease;}
.nav-link:hover{color:var(--ink);}
/* over the dark problem stage the bar inverts: smoked glass instead of white, white
links, and the demo button flips to a light pill so it still reads as the primary */
.nav-wrap.on-dark{
background:rgba(18,12,7,.34);
-webkit-backdrop-filter:blur(26px) saturate(150%);backdrop-filter:blur(26px) saturate(150%);
border-color:rgba(255,255,255,.14);
box-shadow:0 14px 34px -18px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.1) inset;
}
.nav-wrap.on-dark .nav-link{color:rgba(255,255,255,.68);}
.nav-wrap.on-dark .nav-link:hover{color:#fff;}
.nav-wrap.on-dark .btn-dark{background:#fff;color:var(--ink);box-shadow:0 8px 20px -10px rgba(0,0,0,.6);}
.nav-wrap.on-dark .btn-dark:hover{background:#fff;color:var(--ink);}
/* ---- FEATURES MEGA MENU ----
The trigger keeps a transparent bridge beneath it so the pointer can travel from
the bar down into the panel without crossing dead space and closing it. */
.nav-mega{position:relative;}
.nav-trigger{display:inline-flex;align-items:center;gap:5px;cursor:default;}
.nav-mega:hover .nav-trigger{color:var(--ink);}
.nav-mega:hover .nav-trigger svg{transform:rotate(180deg);}
.nav-trigger svg{transition:transform .3s ease;}
.mega-drop{
position:absolute;top:100%;left:50%;transform:translateX(-50%);padding-top:16px;
z-index:60;opacity:0;visibility:hidden;pointer-events:none;
transition:opacity .25s ease .45s, visibility 0s linear .7s;}
/* opens at once, but lingers ~0.5s after the pointer leaves, so a small slip does not close it */
.nav-mega:hover .mega-drop{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .2s ease 0s, visibility 0s linear 0s;}
.mega-panel{
width:1120px;max-width:calc(var(--vw, 1vw) * 94);padding:18px;border-radius:26px;
background:#FFFFFF;border:1px solid rgba(20,15,10,.07);
box-shadow:0 34px 68px -32px rgba(20,15,10,.42);
transform:translateY(-7px);transition:transform .32s cubic-bezier(.22,1,.36,1);}
.nav-mega:hover .mega-panel{transform:none;}
.mega-grid{display:grid;grid-template-columns:1fr 1fr;gap:3px;}
.mega-cols{display:grid;grid-template-columns:1fr 262px;gap:0;}
.mega-cols > .mega-grid{padding-right:16px;}
.mega-int{border-left:1px solid rgba(20,15,10,.08);padding:12px 6px 10px 26px;display:flex;flex-direction:column;}
.mi-label{font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--primary-text);}
.mi-lead{margin:10px 0 0;font-size:13.8px;line-height:1.45;color:var(--muted);}
.mi-tiles{display:grid;grid-template-columns:repeat(4,44px);gap:10px;margin-top:18px;}
.mi-tile{width:44px;height:44px;border-radius:12px;background:#fff;border:1px solid rgba(20,15,10,.07);
box-shadow:0 6px 12px -9px rgba(30,20,10,.45);display:flex;align-items:center;justify-content:center;overflow:hidden;}
.mi-tile img{width:28px;height:28px;object-fit:contain;display:block;}
.mi-tile img[alt="WhatsApp"],.mi-tile img[alt="Google Calendar"],.mi-tile img[alt="Instagram"]{width:36px;height:36px;}
.mi-tile.mi-fill{border:0;}
.mi-tile.mi-fill img{width:100%;height:100%;object-fit:cover;}
.mi-all{margin-top:auto;padding-top:20px;display:inline-flex;align-items:center;gap:7px;font-size:14.5px;font-weight:500;color:var(--ink);text-decoration:none;transition:gap .25s ease,color .25s ease;}
.mi-all span{color:var(--primary-text);}
.mi-all:hover{gap:11px;color:var(--primary-text);}
.mega-item{display:flex;gap:13px;align-items:flex-start;padding:12px 13px;border-radius:15px;
text-decoration:none;transition:background .22s ease;}
.mega-item:hover{background:rgba(232,70,10,.07);}
.mega-ico{width:38px;height:38px;border-radius:12px;flex-shrink:0;
display:flex;align-items:center;justify-content:center;
box-shadow:0 7px 14px -8px rgba(30,20,10,.65);}
.mega-tx b{display:block;font-size:16px;font-weight:500;color:var(--ink);letter-spacing:-.01em;}
.mega-tx i{display:block;font-style:normal;font-size:13.8px;line-height:1.45;color:var(--muted);
margin-top:3px;}
.nav-wrap.on-dark .mega-tx b{color:var(--ink);}
.to-top{
position:fixed;right:28px;bottom:28px;z-index:50;width:48px;height:48px;border-radius:50%;
display:flex;align-items:center;justify-content:center;border:0;cursor:pointer;color:#fff;
background:linear-gradient(120deg,#D64200 0%,#D64200 40%,#D73959 100%);
box-shadow:0 16px 34px -12px rgba(232,70,10,.6);
opacity:0;pointer-events:none;transform:translateY(10px);
transition:opacity .3s ease, transform .35s cubic-bezier(.22,1,.36,1);
}
.to-top.show{opacity:1;pointer-events:auto;transform:none;}
.to-top:hover{transform:translateY(-2px);}
.section-tag{
font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--secondary);
}
/* ---- Dashboard mockup ---- */
@keyframes badgeGlow{
0%,100%{box-shadow:0 0 0 0 rgba(232,70,10,0), 0 14px 28px -16px rgba(90,45,10,.45);}
50%{box-shadow:0 0 0 9px rgba(232,70,10,.14), 0 14px 28px -16px rgba(90,45,10,.45);}
}
.badge-glow{animation:badgeGlow 2.6s ease-in-out infinite;}
@keyframes cursorPath{
0%{transform:translate(0px,52px) scale(1);opacity:0;}
8%{opacity:1;}
32%{transform:translate(96px,-6px) scale(1);opacity:1;}
44%{transform:translate(112px,0px) scale(.82);opacity:1;}
50%{transform:translate(112px,0px) scale(1);opacity:1;}
72%{transform:translate(112px,0px) scale(1);opacity:1;}
86%{opacity:0;transform:translate(112px,0px) scale(1);}
100%{opacity:0;transform:translate(0px,52px) scale(1);}
}
@keyframes clickRing{
0%,42%{opacity:0;transform:scale(.35);}
46%{opacity:.55;transform:scale(.4);}
58%{opacity:0;transform:scale(1.9);}
100%{opacity:0;}
}
@keyframes publishPop{
0%,40%{opacity:0;transform:translateY(8px) scale(.92);}
47%{opacity:1;transform:translateY(0) scale(1);}
68%{opacity:1;transform:translateY(0) scale(1);}
78%{opacity:0;transform:translateY(-4px) scale(.96);}
100%{opacity:0;}
}
.publish-cursor{position:absolute;left:14px;top:2px;width:20px;height:20px;animation:cursorPath 6s ease-in-out infinite;z-index:3;}
.publish-ring{position:absolute;left:118px;top:8px;width:26px;height:26px;border-radius:50%;background:var(--secondary);animation:clickRing 6s ease-in-out infinite;z-index:2;}
.publish-tip{position:absolute;left:104px;top:-30px;animation:publishPop 6s ease-in-out infinite;z-index:4;}
/* ---- multiplayer agent cursors ---- */
.agent-cursor{position:absolute;display:flex;align-items:center;gap:6px;z-index:8;pointer-events:none;}
.agent-tag{font-size:10.5px;font-weight:700;color:#fff;padding:3px 9px 3px 7px;border-radius:100px 100px 100px 3px;white-space:nowrap;box-shadow:0 6px 14px -6px rgba(0,0,0,.4);}
@keyframes agentPath1{
0%{left:5%;top:10%;} 22%{left:62%;top:16%;} 45%{left:70%;top:58%;} 68%{left:24%;top:66%;} 86%{left:12%;top:34%;} 100%{left:5%;top:10%;}
}
@keyframes agentPath2{
0%{left:80%;top:72%;} 20%{left:30%;top:78%;} 42%{left:18%;top:30%;} 65%{left:55%;top:12%;} 85%{left:85%;top:40%;} 100%{left:80%;top:72%;}
}
@keyframes agentPath3{
0%{left:40%;top:88%;} 30%{left:8%;top:55%;} 55%{left:35%;top:20%;} 78%{left:75%;top:30%;} 92%{left:65%;top:80%;} 100%{left:40%;top:88%;}
}
.agent-1{animation:agentPath1 17s ease-in-out infinite;}
.agent-2{animation:agentPath2 21s ease-in-out infinite;animation-delay:-6s;}
.agent-3{animation:agentPath3 19s ease-in-out infinite;animation-delay:-11s;}
/* ---- use case cards ---- */
.usecase-card{
position:relative;background:rgba(255,255,255,.72);backdrop-filter:blur(10px);
border:1px solid rgba(20,15,10,.09);border-radius:20px;padding:22px 14px 18px;
text-align:center;box-shadow:0 18px 34px -26px rgba(20,15,10,.4);
display:flex;flex-direction:column;align-items:center;gap:12px;
}
.usecase-checkbox{position:absolute;left:12px;top:12px;width:15px;height:15px;border-radius:5px;border:1.5px solid rgba(20,15,10,.16);}
.usecase-icon-wrap{width:44px;height:44px;border-radius:13px;background:linear-gradient(160deg,#fff,var(--cream2));border:1px solid var(--line);display:flex;align-items:center;justify-content:center;}
.usecase-label{font-size:12.5px;font-weight:600;line-height:1.35;}
/* the six pills above the dashboard are its tabs — bigger, clickable, and the active
one carries the accent gradient */
.dash-tabs{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;margin-bottom:30px;position:relative;z-index:6;}
.use-pill{
display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--ink);
background:#fff;border:1px solid var(--line);border-radius:100px;padding:11px 20px 11px 16px;
box-shadow:0 8px 18px -14px rgba(20,15,10,.4);white-space:nowrap;flex-shrink:0;cursor:pointer;
transition:background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.use-pill svg{width:17px;height:17px;flex-shrink:0;transition:stroke .2s ease;}
.use-pill:hover{border-color:rgba(232,70,10,.45);transform:translateY(-1px);color:var(--ink);}
.use-pill.active{
background:linear-gradient(90deg,#D64200 0%,#D64200 40%,#D73959 100%);color:#fff;border-color:transparent;
box-shadow:0 10px 24px -8px rgba(232,70,10,.5), 0 0 26px 2px rgba(239,23,99,.22);
}
.use-pill.active svg{stroke:#fff;}
/* list rows used by the per-tab dashboard screens */
.dash-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid rgba(20,15,10,.06);}
.dash-row:last-child{border-bottom:none;}
.dash-row-main{display:flex;align-items:center;gap:9px;min-width:0;}
.dash-av{width:25px;height:25px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;color:#fff;flex-shrink:0;}
.dash-row b{display:block;font-size:11.5px;font-weight:700;color:var(--ink);line-height:1.25;}
.dash-row i{display:block;font-style:normal;font-size:9.5px;color:var(--muted);margin-top:1px;}
.dash-tag{font-size:9px;font-weight:700;padding:4px 9px;border-radius:100px;white-space:nowrap;flex-shrink:0;background:var(--cream2);color:var(--primary-deep);}
.dash-tag.green{background:#E4F4EC;color:#1F7A52;}
.dash-tag.pink{background:#FDE7F0;color:#C01059;}
.dash-tag.grey{background:#F1EEEA;color:#75665B;}
.dash-content-panel.swap{animation:dashSwap .4s ease both;}
@keyframes dashSwap{from{opacity:0;transform:translateY(9px);}to{opacity:1;transform:none;}}
.dash-crop{
position:relative;height:650px;overflow:hidden;border-radius:22px;
box-shadow:0 35px 70px -42px rgba(20,15,10,.22), 0 12px 28px -20px rgba(20,15,10,.14), 0 0 0 1px rgba(255,255,255,.7) inset;
}
.dash-fade{
position:absolute;left:0;right:0;bottom:0;height:150px;z-index:12;pointer-events:none;
background:linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 55%, rgba(255,255,255,.96) 100%);
-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
-webkit-mask-image:linear-gradient(to bottom, transparent 0%, black 65%);
mask-image:linear-gradient(to bottom, transparent 0%, black 65%);
}
.dash-shell{
border-radius:22px;position:relative;
background:#FAF9F6;
border:1px solid rgba(20,15,10,.08);
display:flex;min-height:420px;
}
.dash-content-panel{
flex:1;min-width:0;background:#FFFFFF;border-radius:20px 0 0 0;
box-shadow:inset 1px 1px 0 0 rgba(20,15,10,.08);
padding:20px 24px 24px;overflow:hidden;
}
.dash-sidebar{
width:78px;flex-shrink:0;background:transparent;
padding:16px 0 12px;display:flex;flex-direction:column;align-items:center;gap:2px;
}
.sb-logo{width:30px;height:30px;border-radius:9px;display:block;margin-bottom:8px;}
.sb-divider{width:36px;height:1px;background:linear-gradient(90deg,transparent,rgba(20,15,10,.14),transparent);margin:2px 0 8px;flex-shrink:0;}
.sb-item{display:flex;flex-direction:column;align-items:center;gap:3px;padding:3px 1px;width:74px;}
.sb-icon{width:38px;height:38px;border-radius:32%;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 6px rgba(0,0,0,.12), 0 4px 10px -4px rgba(0,0,0,.22);flex-shrink:0;}
.sb-label{font-size:8px;line-height:1;color:var(--muted);text-align:center;font-weight:400;}
.sb-avatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(160deg,var(--accent-start,#FF7A29),var(--secondary));color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;}
.dash-main{flex-grow:1;display:flex;flex-direction:column;min-width:0;}
.dash-topbar{position:relative;height:52px;flex-shrink:0;display:flex;align-items:center;gap:10px;padding:0 20px;}
.tb-pill{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px;border-radius:10px;border:none;background:#fff;box-shadow:inset 0 0 0 1px rgba(232,70,10,.22), 0 1px 2px rgba(0,0,0,.05);font-size:11.5px;font-weight:600;color:var(--ink);flex-shrink:0;}
.tb-island{display:inline-flex;align-items:center;gap:3px;height:34px;padding:0 7px;border-radius:17px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.05), 0 6px 16px -10px rgba(0,0,0,.2);}
.tb-icon-btn{width:27px;height:27px;border-radius:100px;border:none;background:transparent;display:flex;align-items:center;justify-content:center;color:var(--muted);position:relative;flex-shrink:0;}
.tb-divider{width:1px;height:16px;background:rgba(20,15,10,.1);flex-shrink:0;}
.tb-badge{position:absolute;top:-3px;right:-3px;background:var(--secondary);color:#fff;font-size:8px;font-weight:800;border-radius:100px;padding:1px 4px;line-height:1.3;}
.tb-right{margin-left:auto;display:flex;align-items:center;gap:7px;}
.tb-quickadd{display:inline-flex;align-items:center;height:30px;padding:0 11px;border-radius:10px;border:none;background:#fff;box-shadow:inset 0 0 0 1px rgba(20,15,10,.1), 0 1px 2px rgba(0,0,0,.05);font-size:11px;font-weight:600;color:var(--ink);}
.tb-tenant{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 10px;border-radius:10px;background:#fff;box-shadow:inset 0 0 0 1px rgba(20,15,10,.1), 0 1px 2px rgba(0,0,0,.05);font-size:10.5px;color:var(--muted);}
.glass-panel{background:#fff;border:1px solid rgba(20,15,10,.08);border-radius:14px;box-shadow:0 10px 26px -20px rgba(20,15,10,.3);}
.stat-card{padding:13px 15px;}
.stat-label{font-size:9.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);}
.stat-value{font-size:19px;font-weight:800;margin-top:5px;transition:color .3s ease;}
.stat-delta{font-size:10.5px;font-weight:700;margin-top:4px;display:flex;align-items:center;gap:3px;}
.spark{display:flex;align-items:flex-end;gap:2.5px;height:16px;margin-top:8px;}
.spark div{flex:1;background:var(--cream2);border-radius:2px 2px 0 0;}
.period-pill{font-size:10.5px;font-weight:700;padding:5px 10px;border-radius:100px;color:var(--muted);}
.period-pill.active{background:linear-gradient(120deg,#D64200 0%,#D64200 40%,#D73959 100%);color:#fff;}
.attn-box{padding:11px 13px;}
.attn-num{font-size:20px;font-weight:800;}
.attn-label{font-size:11px;font-weight:700;margin-top:2px;}
.attn-sub{font-size:9.5px;color:var(--muted);margin-top:2px;line-height:1.3;}
.legend-chip{display:flex;align-items:center;gap:5px;font-size:9.5px;font-weight:600;color:var(--muted);}
.legend-dot{width:7px;height:7px;border-radius:2px;}
.month-lbl{font-size:8.5px;color:var(--muted);text-align:center;flex:1;}
.funnel-chip{padding:8px 10px;border-radius:10px;background:var(--cream2);}
.funnel-pct{font-size:15px;font-weight:800;}
.funnel-lbl{font-size:9px;color:var(--muted);font-weight:600;}
.mini-row{display:flex;align-items:center;font-size:10.5px;padding:5px 0;border-bottom:1px solid rgba(20,15,10,.06);}
.mini-row:last-child{border-bottom:none;}
/* ---- whole-viewport fixed backdrop: no box, no edge — the entire screen's color
shifts while (and only while) the problem section occupies the viewport ---- */
/* a permanent opaque white base sits beneath the wash, so fading the wash out reveals
plain white — exactly what the opaque white-lerped gradient used to show — rather
than letting the body's dot grid appear only in the revealed state */
.page-white-layer{position:fixed;inset:0;z-index:0;pointer-events:none;background:#FFFFFF;
background-image:radial-gradient(rgba(69,59,51,.14) 1px, transparent 1px);
background-size:21px 21px;
-webkit-mask-image:radial-gradient(130% 95% at 50% 42%, rgba(0,0,0,.4) 0%,
rgba(0,0,0,.72) 48%, #000 100%);
mask-image:radial-gradient(130% 95% at 50% 42%, rgba(0,0,0,.4) 0%,
rgba(0,0,0,.72) 48%, #000 100%);}
/* hero: no dots — a plain white field with a very faint large grid instead. The dot
layers come back once the hero has scrolled away. */
.page-white-layer::after{content:"";position:absolute;inset:0;opacity:0;transition:opacity .45s ease;
background-color:#FCFAF8;
background-image:linear-gradient(rgba(232,70,10,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(232,70,10,.06) 1px,transparent 1px);
background-size:40px 40px;background-position:calc(50% + 20px) 0;
-webkit-mask-image:radial-gradient(ellipse 55% 50% at 50% 38%,rgba(0,0,0,.08) 0%,rgba(0,0,0,.45) 55%,#000 100%);
mask-image:radial-gradient(ellipse 55% 50% at 50% 38%,rgba(0,0,0,.08) 0%,rgba(0,0,0,.45) 55%,#000 100%);}
html.hero-zone .page-white-layer::after{opacity:1;}
html.hero-zone body{background-image:none;}
/* "100+ features" phase: a pale, muted orange behind the title, subtitle and orbits */
.page-white-layer::before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .8s ease;
background:radial-gradient(1200px 700px at 50% 45%, #F8E4D5 0%, #FAEDE3 55%, #FCF3EC 100%);}
html.p2-tint .page-white-layer::before{opacity:1;}
/* Circle + Option 2: warm off-white page instead of pure white (the feature cards section stays white) */
html:not(.hv-dash) body{background-color:#FCFAF8;}
html:not(.hv-dash) .page-white-layer{background-color:#FCFAF8;}
html:not(.hv-dash) .cmp-section::before{background:#FCFAF8;}
/* both ends of the wash are a time-based opacity transition rather than a
scroll-position ramp, so the backdrop is always fully white by the time the module
cards finish growing in, no matter how slowly you scroll */
.page-bg-layer{
position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0;
background:
radial-gradient(1100px 620px at 50% 44%, rgba(232,70,10,.17), transparent 68%),
radial-gradient(760px 520px at 84% 78%, rgba(239,23,99,.12), transparent 70%),
linear-gradient(152deg,#241B16 0%,#191310 58%,#1D1419 100%);
transition:opacity .5s ease;
}
.page-grain-layer{
position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0;mix-blend-mode:overlay;background-size:160px 160px;
transition:opacity .5s ease;
background-image:url("data:image/svg+xml;utf8,");
}
/* ---- KEY QUESTION + FOOTER ---- */
/* CTA and footer are one section with one wash behind both. It is built as a SOLID
block plus two overlays above it rather than one masked shape: a mask on a very tall
box spreads its fade over the whole height, which is why the footer text kept sitting
in the faded part and why leftover mask alpha showed as a line at the box's top edge.
- .close-bg solid colour, starts where the footer content starts
- ::before a fixed 380px feather, full width, transparent at its own top
- ::after the sun: extra warmth rising higher in the centre than at the sides */
.close-section{position:relative;z-index:1;}
.close-bg{
position:absolute;left:0;right:0;top:910px;bottom:0;z-index:0;
background:linear-gradient(180deg,#C84D09 0%, #D73C0F 24%, #E8121D 62%, #E5105B 100%);
}
.close-bg::before{
content:'';pointer-events:none;position:absolute;left:0;right:0;bottom:100%;height:380px;
background:linear-gradient(180deg,
rgba(200,77,9,0) 0%, rgba(200,77,9,.14) 34%, rgba(200,77,9,.42) 58%,
rgba(200,77,9,.78) 80%, #C84D09 100%);
}
/* The sun used to STOP at the solid block's top edge, so its ~50% of extra warmth
vanished in one pixel — that was the line across the footer. It now straddles the
junction: the ellipse is centred exactly on it, so the glow is continuous through it,
and a vertical mask dissolves the overspill away inside the solid block. */
.close-bg::after{
content:'';pointer-events:none;position:absolute;left:0;right:0;top:-660px;height:1080px;
background:radial-gradient(72% 660px at 50% 660px,
rgba(205,80,12,.5) 0%, rgba(205,80,12,.34) 40%,
rgba(205,80,12,.14) 66%, rgba(205,80,12,0) 88%);
-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 61%,rgba(0,0,0,.5) 80%,rgba(0,0,0,0) 100%);
mask-image:linear-gradient(180deg,#000 0%,#000 61%,rgba(0,0,0,.5) 80%,rgba(0,0,0,0) 100%);
}
.kq-section{position:relative;z-index:1;padding:120px 0 70px;text-align:center;}
.kq-pill{display:inline-flex;align-items:center;gap:8px;padding:8px 18px;border-radius:100px;
background:#fff;border:1px solid rgba(30,50,90,.1);font-size:13px;font-weight:600;color:var(--muted);
box-shadow:0 8px 18px -14px rgba(20,15,10,.4);}
.kq-q{margin-top:26px;font-size:54px;font-weight:400;line-height:1.14;
letter-spacing:-.005em;color:var(--ink);}
.kq-q b{font-weight:400;}
.kq-q span{font-weight:400;color:var(--muted);}
.kq-sub{margin:22px auto 0;max-width:560px;font-size:16.5px;line-height:1.62;color:var(--muted);}
.ft{position:relative;z-index:1;background:none;color:#fff;overflow:hidden;}
.ft-inner{max-width:1180px;margin:0 auto;padding:215px 32px 0;}
.ft-top{display:grid;grid-template-columns:1.2fr 1.15fr .7fr .7fr .8fr 1.25fr;gap:26px;}
.ft-logo svg{display:block;width:150px;height:auto;}
.ft-tag{margin-top:14px;font-size:15px;font-weight:600;line-height:1.45;color:#fff;max-width:210px;}
.ft-social{display:flex;gap:10px;margin-top:22px;}
.ft-social a{width:36px;height:36px;border-radius:12px;display:flex;align-items:center;justify-content:center;
background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.26);color:#fff;
transition:background .25s ease, transform .25s ease;}
.ft-social a:hover{background:rgba(255,255,255,.3);transform:translateY(-2px);}
.ft-col .ft-h{font-size:13px;font-weight:700;color:#fff;letter-spacing:.01em;}
.ft-col a,.ft-col .ft-linkbtn{display:block;margin-top:11px;font-size:14px;font-weight:600;color:#fff;}
.ft-col a:hover,.ft-col .ft-linkbtn:hover{color:#fff;text-decoration:underline;}
.ft-news .ft-h{font-size:13px;font-weight:700;color:#fff;}
.ft-field{margin-top:12px;padding:12px 16px;border-radius:100px;font-size:13.5px;
background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);color:rgba(255,255,255,.72);}
.ft-sub{margin-top:9px;padding:12px 16px;border-radius:100px;text-align:center;
background:#fff;color:var(--primary-text);font-size:13.5px;font-weight:700;cursor:pointer;
box-shadow:0 10px 22px -12px rgba(60,10,20,.5);}
/* the oversized wordmark bleeds past the container on purpose, like the reference */
.ft-mark{display:flex;align-items:center;margin-top:64px;padding:0 0 26px;}
.ft-mark svg{flex:1;min-width:0;height:auto;opacity:.97;}
.ft-legal{border-top:1px solid rgba(255,255,255,.22);padding:18px 32px 26px;
max-width:1180px;margin:0 auto;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
font-size:12.5px;color:#fff;}
@media (max-width: 860px){
.kq-q{font-size:32px;}
.ft-top{grid-template-columns:1fr 1fr;}
.ft-inner{padding-top:210px;}
}
/* ---- COMPARISON ----
Grid, not a
: the Eproma column is a raised card that has to bleed above and
below the rows, which a table cell cannot do. The spotlight is a grid item spanning
every row of column 2, so it stays aligned without any measuring. */
.cmp-section{position:relative;z-index:1;padding:90px 0 60px;}
/* the page's tile grid competes with the table's own rules, so it is covered here */
.cmp-section::before{
content:'';position:absolute;inset:-40px 0;z-index:0;pointer-events:none;background:#FFFFFF;
-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 60px,#000 calc(100% - 60px),transparent 100%);
mask-image:linear-gradient(180deg,transparent 0,#000 60px,#000 calc(100% - 60px),transparent 100%);
}
.cmp-section > *{position:relative;z-index:1;}
.cmp-wrap{position:relative;max-width:1080px;margin:40px auto 0;padding:22px 4px 8px;}
.cmp-table{position:relative;display:grid;grid-template-columns:1.75fr repeat(4,1fr);}
.cmp-table.hidden{display:none;}
/* The raised Eproma column. It was a grid ITEM spanning grid-row 1/-1, but every row
here is implicit, and -1 resolves to the last EXPLICIT line — so it collapsed into a
single floating box and stole a cell slot from the header, which is what pushed the
columns out of order. It is now absolutely positioned and sized off the track list
(1.75fr + 4 x 1fr = 5.75fr), so it spans the whole table and takes no slot. */
/* Above the cells (z-index 2), not below them: the feature column paints a translucent
glass background, and at a lower z-index the card's shadow was being covered wherever
a feature cell sat beside it — visible only in the gaps between. The Eproma cells
themselves are lifted to 3 so their content still reads on top of the card. */
.cmp-spot{
position:absolute;top:-18px;bottom:-18px;
left:calc(1.75 / 5.75 * 100%);width:calc(1 / 5.75 * 100%);
z-index:2;border-radius:22px;pointer-events:none;
background:#FFFFFF;
box-shadow:0 1px 2px rgba(88,62,50,.05), 0 26px 52px -24px rgba(232,70,10,.5),
0 0 0 1px rgba(232,70,10,.14);
}
.cmp-cell{position:relative;z-index:1;padding:9px 8px;display:flex;align-items:center;
justify-content:center;gap:6px;text-align:center;font-size:12.5px;}
.cmp-cell.alt{background:none;}
/* Row rules are drawn from cells rather than as borders, in TWO segments: one across
the feature column and one across the three competitor columns. A per-cell border
would restart the gradient in every column (five repeats per row), and a single
stretched rule would run straight through the Eproma card — which has to stay clean.
The competitor segment starts at .cs (1 track wide) and is stretched by 200% to cover
the remaining two. */
.cmp-cell.c0::after{
content:'';position:absolute;left:0;right:0;bottom:0;height:1px;pointer-events:none;
background:linear-gradient(90deg, rgba(255,122,41,.17) 0%, rgba(240,86,42,.13) 100%);}
.cmp-cell.cs::after{
content:'';position:absolute;left:0;right:-200%;bottom:0;height:1px;pointer-events:none;
background:linear-gradient(90deg, rgba(240,86,42,.13) 0%, rgba(239,23,99,.09) 55%,
rgba(239,23,99,0) 100%);}
/* feature column: minimal glass */
.cmp-cell.c0{justify-content:flex-start;text-align:left;padding-left:16px;padding-right:14px;
font-size:13px;font-weight:400;color:var(--ink);line-height:1.35;
background:rgba(255,255,255,.5);
-webkit-backdrop-filter:blur(10px) saturate(130%);backdrop-filter:blur(10px) saturate(130%);}
/* competitors stay transparent — the page shows through */
.cmp-cell.cx{background:transparent;color:var(--muted);}
.cmp-cell.head{padding-top:14px;padding-bottom:15px;
font-size:12.5px;font-weight:600;color:var(--ink);flex-direction:column;gap:2px;}
.cmp-cell.head .sub{font-size:10.5px;font-weight:400;color:var(--muted);}
.cmp-cell.head.brand{font-size:15px;}
.cmp-cell.head.brand .mark{background:linear-gradient(90deg,#FF7A29,#EF1763);
-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700;letter-spacing:.01em;}
.cmp-cell.head.brand .sub{color:var(--primary-deep);opacity:.75;}
/* section bands: the fill runs across the feature column and the three competitors and
skips the Eproma card, the same way the row rules do */
/* One FLAT colour across every cell of the band. Each cell was carrying its own slice
of a gradient, so the four segments started and ended at different values and the
joins showed as bands of slightly different orange. A single solid value cannot
mismatch. */
.cmp-cat, .cmp-gap.band, .cmp-gap.gb{background:rgba(255,122,41,.12);margin-top:10px;}
.cmp-cat{grid-column:1;z-index:1;padding:9px 16px;font-size:10.5px;font-weight:700;
letter-spacing:.14em;text-transform:uppercase;color:var(--primary-deep);
border-radius:9px 0 0 9px;}
.cmp-gap{z-index:1;}
.cmp-gap.band.ge{border-radius:0 9px 9px 0;}
/* marks */
.cmp-m{display:inline-flex;width:20px;height:20px;border-radius:50%;flex-shrink:0;
align-items:center;justify-content:center;font-size:11px;font-weight:800;line-height:1;}
.cmp-m.y{background:rgba(31,138,76,.13);color:#1F8A4C;}
.cmp-m.p{background:rgba(201,147,46,.16);color:#8A6318;}
.cmp-m.n{background:rgba(20,16,12,.1);color:#14100C;font-weight:800;font-size:15px;line-height:1;}
.cmp-m.q{background:rgba(43,127,214,.1);color:#2B7FD6;border:1px dashed rgba(43,127,214,.5);}
.cmp-cell.brand{z-index:3;}
.cmp-cell.brand .cmp-m.y{background:linear-gradient(140deg,#D64200 0%,#D64200 40%,#D73959 100%);color:#fff;
box-shadow:0 7px 14px -7px rgba(232,70,10,.9);}
.cmp-note{font-size:10.5px;color:var(--muted);white-space:nowrap;}
.cmp-cell.norule::after{display:none;}
.cmp-legend{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-top:20px;
font-size:12px;color:var(--muted);}
.cmp-legend span{display:inline-flex;align-items:center;gap:7px;}
.cmp-legend .cmp-m{width:17px;height:17px;font-size:10px;}
.cmp-actions{display:flex;justify-content:center;margin-top:22px;}
.cmp-num{font-weight:700;font-size:15px;color:var(--ink);}
.cmp-cell.brand .cmp-num{background:linear-gradient(90deg,#FF7A29,#EF1763);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:17px;}
.cmp-num.tbc{color:#64748B;font-weight:500;}
.hero-stats{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin:24px auto 0;}
.hero-stats .hs{display:inline-flex;align-items:center;gap:9px;padding:4px 15px 4px 4px;border-radius:999px;
background:rgba(255,255,255,.85);border:1px solid rgba(69,59,51,.09);color:var(--ink);font-size:13.5px;font-weight:500;
box-shadow:0 1px 2px rgba(40,30,20,.04),0 8px 18px -12px rgba(40,30,20,.22);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
.hero-stats .hs b{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:28px;padding:0 10px;
border-radius:999px;background:rgba(232,70,10,.08);color:var(--primary-text);font-weight:700;font-size:13.5px;letter-spacing:.01em;}
.hero-stats .hs:first-child b{background:linear-gradient(90deg,#D64200 0%,#D64200 40%,#D73959 100%);color:#fff;}
.hero-stats .hs i{font-style:normal;color:var(--muted);font-weight:400;margin-left:-3px;}
@media (max-width:860px){.hero-stats{justify-content:flex-start;gap:8px;margin-top:18px;}
.hero-stats .hs{font-size:12.5px;padding-right:12px;gap:7px;} .hero-stats .hs b{height:24px;font-size:12.5px;padding:0 8px;}}
.use-pill .tab-ico svg{width:12px;height:12px;stroke:#fff !important;}
.use-pill.active .tab-ico{box-shadow:0 0 0 1.5px rgba(255,255,255,.7);}
.ig-strip{max-width:860px;margin:48px auto 0;padding:0 32px;text-align:center;}
.ig-label{display:block;font-size:13px;font-weight:500;color:var(--muted);letter-spacing:.01em;margin-bottom:16px;}
.ig-viewport{overflow:hidden;padding:6px 0 18px;
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%);
mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%);}
.ig-track{display:flex;gap:20px;width:max-content;animation:igMove 38s linear infinite;}
.ig-strip:hover .ig-track{animation-play-state:paused;}
.ig-tile{width:60px;height:60px;border-radius:16px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
color:#fff;box-shadow:0 10px 20px -12px rgba(40,30,20,.45), inset 0 1px 0 rgba(255,255,255,.25);}
.ig-tile svg{stroke-width:2;}
@keyframes igMove{from{transform:translateX(0);}to{transform:translateX(calc(-50% - 10px));}}
@media (prefers-reduced-motion:reduce){.ig-track{animation:none;}}
@media (max-width:860px){.ig-strip{display:none;}}
.hero-sub b{font-weight:600;color:var(--ink);white-space:nowrap;}
.more-badge-row{display:flex;justify-content:center;margin:18px 0 26px;position:relative;z-index:3;}
.more-badge{display:inline-flex;align-items:center;gap:10px;padding:5px 16px 5px 5px;border-radius:999px;text-decoration:none;
color:var(--ink);font-size:14px;font-weight:500;
border:1px solid transparent;
background:linear-gradient(#fff,#fff) padding-box, linear-gradient(90deg,#FF7A29,#EF1763) border-box;
box-shadow:0 10px 24px -14px rgba(239,23,99,.55);transition:transform .2s ease, box-shadow .2s ease;}
.more-badge:hover{transform:translateY(-1px);color:var(--ink);box-shadow:0 14px 28px -14px rgba(239,23,99,.65);}
.more-badge .mb-plus{display:inline-flex;align-items:center;height:28px;padding:0 11px;border-radius:999px;color:#fff;font-weight:700;font-size:13.5px;
background:linear-gradient(90deg,#D64200 0%,#D64200 40%,#D73959 100%);}
.more-badge svg{color:var(--primary-text);transition:transform .2s ease;}
.more-badge:hover svg{transform:translateX(2px);}
.more-badge-m{display:none;}
.more-badge.is-static{cursor:default;padding-right:16px;}
.more-badge.is-static:hover{transform:none;color:var(--ink);box-shadow:0 10px 24px -14px rgba(239,23,99,.55);}
/* typing keyword (shown in Option 2 for review) */
.hero-h1 .hl.hl-b{display:none;}
html.hv-opt2 .hero-h1 .hl.hl-a, html:not(.hv-opt2):not(.hv-dash) .hero-h1 .hl.hl-a{display:none !important;}
html.hv-opt2 .hero-h1 .hl.hl-b{display:block;}
html:not(.hv-opt2):not(.hv-dash) .hero-h1 .hl.hl-b{display:block !important;white-space:nowrap !important;}
.ty-caret{display:inline-block;width:2px;height:.9em;margin-left:3px;vertical-align:-.08em;border-radius:1px;
background:linear-gradient(180deg,#FF7A29,#EF1763);animation:tyBlink 1s steps(1) infinite;}
@keyframes tyBlink{50%{opacity:0;}}
.hero-eyebrow{margin-top:26px;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
background:linear-gradient(90deg,#FF7A29,#EF1763);-webkit-background-clip:text;background-clip:text;color:transparent;}
.hero-eyebrow + .hero-h1{margin-top:12px;}
.hero-h1 .hl{display:block;white-space:nowrap;}
@media (max-width:860px){ .hero-h1 .hl{display:inline;white-space:normal;} }
/* ---- hero: price and risk-free row ------------------------------------------ */
.hero-price{display:inline-flex;align-items:baseline;gap:5px;margin-top:22px;padding:4px 4px 4px 12px;border-radius:999px;
background:#fff;border:1px solid rgba(232,70,10,.16);box-shadow:0 6px 16px -12px rgba(232,70,10,.45);}
.hero-price .hp-from,.hero-price .hp-per{font-size:12px;color:var(--muted);}
.hero-price b{font-size:15px;font-weight:600;color:var(--ink);letter-spacing:-.02em;line-height:1;}
.hero-price s{font-size:12px;color:#75665B;}
.hero-price .hp-off{align-self:center;margin-left:3px;padding:3px 8px;border-radius:999px;font-size:11px;font-weight:700;color:#fff;
background:linear-gradient(135deg,#D64200 0%,#D64200 40%,#D73959 100%);}
.hero-trust{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;margin:18px 0 0;padding:0;}
.hero-trust li{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:400;color:var(--muted);}
.hero-trust svg{flex:0 0 auto;width:20px;height:20px;padding:4px;box-sizing:border-box;border-radius:50%;color:#6E6259;background:rgba(20,16,12,.06);}
@media (max-width:860px){
.hero-price{margin-top:18px;}
.hero-trust{gap:8px 16px;margin-top:16px;justify-content:flex-start;}
.hero-trust li{font-size:12px;}
}
/* ---- hero option 2 (desktop review view) ------------------------------------ */
#heroOpt2{display:none;}
@media (min-width:861px){
/* Circle view: same compact layout as Option 2, with a slightly larger headline */
html:not(.hv-opt2):not(.hv-dash) #hero-copy{padding-top:108px !important;max-width:900px !important;}
html:not(.hv-opt2):not(.hv-dash) #hero-copy .glow-pill{transform:scale(.7);margin-bottom:-4px;}
html:not(.hv-opt2):not(.hv-dash) .hero-eyebrow{margin-top:6px;font-size:10.5px;}
html:not(.hv-opt2):not(.hv-dash) #hero-copy .hero-h1{font-size:48px !important;line-height:1.12 !important;}
html:not(.hv-opt2):not(.hv-dash) #hero-copy .hero-sub{font-size:15.5px !important;max-width:580px !important;margin-top:22px !important;}
html:not(.hv-opt2):not(.hv-dash) .hero-ctas{margin-top:22px !important;gap:10px !important;}
html:not(.hv-opt2):not(.hv-dash) .hero-ctas .btn-lg{padding:11px 20px !important;font-size:14.5px !important;border-radius:13px !important;}
html:not(.hv-opt2):not(.hv-dash) .hero-trust{margin-top:12px;}
html:not(.hv-opt2):not(.hv-dash) .hero-trust li{font-size:12px;}
html:not(.hv-opt2):not(.hv-dash) .ho-wrap{margin-top:8px !important;transform:scale(1.06);transform-origin:50% 0;margin-bottom:60px !important;}
/* Circle view: two columns, copy on the left, the visual on the right */
html:not(.hv-opt2):not(.hv-dash) #hero-copy{max-width:1280px !important;width:100%;box-sizing:border-box;margin:0 auto !important;
padding:150px 40px 0 !important;min-height:800px;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;text-align:left !important;}
html:not(.hv-opt2):not(.hv-dash) #hero-copy > *{max-width:500px;}
html:not(.hv-opt2):not(.hv-dash) #hero-copy .glow-pill{transform:scale(.8) !important;transform-origin:left center;margin:0 0 -2px !important;align-self:flex-start;}
html:not(.hv-opt2):not(.hv-dash) .hero-eyebrow{margin-top:8px !important;}
html:not(.hv-opt2):not(.hv-dash) #hero-copy .hero-h1{font-size:42px !important;line-height:1.1 !important;}
html:not(.hv-opt2):not(.hv-dash) #hero-copy .hero-h1 .hl:first-child{white-space:normal !important;display:inline !important;}
html:not(.hv-opt2):not(.hv-dash) #hero-copy .hero-sub{margin-left:0 !important;margin-right:0 !important;max-width:500px !important;}
html:not(.hv-opt2):not(.hv-dash) .hero-ctas{justify-content:flex-start !important;}
html:not(.hv-opt2):not(.hv-dash) .hero-trust{justify-content:flex-start !important;flex-direction:column;gap:6px !important;}
html:not(.hv-opt2):not(.hv-dash) .ho-stats{height:0;gap:0 !important;display:block !important;}
html:not(.hv-opt2):not(.hv-dash) .ho-stats .o2-stat{position:absolute;left:50%;transform:translateX(-50%);flex-direction:column;align-items:center;gap:2px;text-align:center;}
html:not(.hv-opt2):not(.hv-dash) .ho-stats .o2-stat:first-child{bottom:calc(var(--R,84px) + 22px);}
html:not(.hv-opt2):not(.hv-dash) .ho-stats .o2-stat:last-child{top:calc(var(--R,84px) + 22px);}
html:not(.hv-opt2):not(.hv-dash) .ho-stats .o2-stat > span{line-height:1.1;}
html:not(.hv-opt2):not(.hv-dash) .ho-stats .o2-sep{display:none !important;}
html:not(.hv-opt2):not(.hv-dash) #hero-copy .hero-h1 .hl-2{display:block;}
html:not(.hv-opt2):not(.hv-dash) .ho-stats .o2-stat b{font-size:40px !important;}
html:not(.hv-opt2):not(.hv-dash) .ho-stats .o2-stat > span{font-size:16px !important;}
html:not(.hv-opt2):not(.hv-dash) .ho-stats .o2-sep{height:26px !important;}
html:not(.hv-opt2):not(.hv-dash) .ho-wrap.on .ho-orb{transform:scale(.64);}
html:not(.hv-opt2):not(.hv-dash) .ho-halo{transform:scale(.68);animation:none;}
html:not(.hv-opt2):not(.hv-dash) .ho-wrap{position:absolute !important;top:142px;right:max(8px, calc(50% - 700px));left:auto !important;width:880px;max-width:none !important;padding:0 !important;
margin:0 !important;transform:scale(.946) !important;transform-origin:top right !important;}
/* Option 1 on big screens: everything ~13% larger, wider and centred in the viewport */
@media (min-width:1600px){
/* scaled with transform, not zoom, and sized from --vh/--vw (the real viewport): Safari
and Chrome disagree on how zoom treats viewport units, which broke this in Safari */
html:not(.hv-opt2):not(.hv-dash) #hero-copy{transform:scale(1.13);transform-origin:50% 0;max-width:1400px !important;
padding:calc(max(150px, (var(--vh, 1vh) * 100 - 700px) / 2) / 1.13) 40px 0 !important;min-height:calc(var(--vh, 1vh) * 100 / 1.13);
margin-bottom:calc(var(--vh, 1vh) * 100 - var(--vh, 1vh) * 100 / 1.13) !important;}
html:not(.hv-opt2):not(.hv-dash) .ho-wrap{top:calc(max(150px, (var(--vh, 1vh) * 100 - 700px) / 2) - 10px);
right:max(0px, calc((var(--vw, 1vw) * 100 - 1582px) / 2 - 40px));transform:scale(1.067) !important;}
}
/* Option 2 = the Circle hero with quieter text, so the visual leads */
html.hv-opt2 #dash-parallax-wrap{display:none !important;}
html.hv-opt2 #hero-copy{padding-top:108px !important;max-width:860px !important;}
html.hv-opt2 #hero-copy .glow-pill{transform:scale(.92);margin-bottom:6px;}
html.hv-opt2 .hero-eyebrow{display:none !important;}
html.hv-opt2 #hero-copy .hero-h1{font-size:37.4px !important;line-height:1.12 !important;margin-top:14px !important;}
html.hv-opt2 #hero-copy .hero-sub{font-size:15px !important;max-width:560px !important;margin-top:38px !important;}
html.hv-opt2 .hero-ctas{margin-top:20px !important;gap:10px !important;}
html.hv-opt2 .hero-ctas .btn-lg{padding:10px 18px !important;font-size:14px !important;border-radius:12px !important;}
html.hv-opt2 .hero-trust{margin-top:12px;}
html.hv-opt2 .hero-trust li{font-size:12px;}
html.hv-opt2 .ho-wrap{margin-top:-46px !important;transform:scale(1.06);transform-origin:50% 0;margin-bottom:60px !important;}
html.hv-opt2 .ho-stats .o2-stat b{font-size:48px !important;line-height:1 !important;}
html.hv-opt2 .ho-stats .o2-stat > span{font-size:17px !important;line-height:1.1 !important;}
html.hv-opt2 .ho-stats .o2-stat{gap:2px !important;}
html.hv-opt2 .ho-stats{transform:translateY(-18px);}
@media (min-width:1600px){
html.hv-opt2 #hero-copy{transform:scale(1.1);transform-origin:50% 0;margin-bottom:56px !important;}
html.hv-opt2 .ho-wrap{transform:scale(1.166);margin-bottom:130px !important;}
}
}
/* Safari: enlarge the hero with zoom instead of a scale transform. A scaled layer holding
the animated sphere and lines is re-rasterised every frame in Safari and shivers. */
@media (min-width:861px){
html.ep-saf.hv-opt2 .ho-wrap{transform:none !important;zoom:1.06;margin-bottom:24px !important;}
}
@media (min-width:1600px){
html.ep-saf.hv-opt2 #hero-copy{transform:none !important;zoom:1.1;margin-bottom:10px !important;}
html.ep-saf.hv-opt2 .ho-wrap{transform:none !important;zoom:1.166;margin-bottom:29px !important;}
}
.o2{max-width:1120px;margin:0 auto;padding:132px 32px 40px;text-align:center;position:relative;z-index:1;}
.o2-h1{margin:22px 0 0;font-size:62px;line-height:1.06;font-weight:400;letter-spacing:-.01em;color:var(--ink);}
.o2-sub{margin:22px auto 0;max-width:600px;font-size:19px;line-height:1.6;color:var(--muted);}
.o2-ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:32px;}
.o2-grid{display:grid;grid-template-columns:1fr 1.55fr 1fr;gap:18px;margin-top:60px;text-align:left;align-items:stretch;}
.o2-card{position:relative;padding:24px 24px 22px;border-radius:22px;background:rgba(255,255,255,.9);
border:1px solid rgba(69,59,51,.08);box-shadow:0 1px 2px rgba(30,20,10,.04),0 24px 48px -30px rgba(69,40,20,.35);}
.o2-tools{background:linear-gradient(180deg,#fff, #FFF6F0);border-color:rgba(232,70,10,.16);
box-shadow:0 1px 2px rgba(30,20,10,.04),0 30px 60px -30px rgba(232,70,10,.45);}
.o2-badge{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:13px;color:#fff;
background:linear-gradient(135deg,#D64200 0%,#D64200 40%,#D73959 100%);box-shadow:0 10px 20px -10px rgba(239,23,99,.7);}
.o2-card h3{margin:16px 0 0;font-size:21px;font-weight:600;color:var(--ink);letter-spacing:-.01em;}
.o2-card p{margin:8px 0 0;font-size:15px;line-height:1.55;color:var(--muted);}
.o2-list{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:8px;}
.o2-list li{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink);}
.o2-list svg{flex:0 0 auto;width:20px;height:20px;padding:4px;border-radius:50%;color:#14100C;background:rgba(20,16,12,.07);}
.o2-swap{display:flex;align-items:center;gap:14px;margin-top:18px;}
.o2-olds{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:7px;}
.o2-old{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;padding:9px 4px 7px;border-radius:12px;
background:rgba(69,59,51,.04);border:1px dashed rgba(69,59,51,.16);font-size:11px;color:var(--muted);opacity:.85;}
.o2-oi{display:flex;color:#9A8B80;}
.o2-old::after{content:"";position:absolute;left:14%;right:14%;top:50%;height:1.5px;background:rgba(232,70,10,.55);transform:rotate(-14deg);}
.o2-arrow{flex:0 0 auto;color:var(--primary-text);}
.o2-one{flex:0 0 112px;height:112px;border-radius:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
background:radial-gradient(circle at 50% 40%,#D64200,#D64200 70%);color:#fff;
box-shadow:0 0 0 6px rgba(255,255,255,.8),0 18px 40px -14px rgba(232,70,10,.75);}
.o2-one-mark{font-size:17px;letter-spacing:.06em;font-weight:500;}
.o2-one small{font-size:11.5px;font-weight:600;opacity:.9;}
.o2-stats{display:flex;justify-content:center;align-items:center;gap:44px;margin-top:44px;}
.o2-stat{display:flex;align-items:baseline;gap:12px;}
.o2-stat b{font-size:64px;font-weight:400;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;}
.o2-stat > span{font-size:19px;color:var(--muted);}
.o2-sep{width:1px;height:46px;background:rgba(69,59,51,.14);}
.ho-stats{margin:0;gap:28px;}
.ho-stats .o2-stat{gap:8px;}
.ho-stats .o2-stat b{font-size:44px;}
.ho-stats .o2-stat > span{font-size:15px;}
@media (min-width:861px){ .ho-stats .o2-stat{flex-direction:column !important;align-items:center !important;gap:6px !important;text-align:center;} .ho-stats .o2-stat > span{line-height:1.2;} .ho-stats .o2-stat > span{white-space:nowrap;} .ho-stats.o2-stats{align-items:flex-start !important;} }
.ho-stats .o2-sep{height:32px;}
/* ---- hero orbit (desktop) ---------------------------------------------------- */
html:not(.hv-dash) #dash-parallax-wrap{display:none !important;}
html.hv-dash .ho-wrap{display:none !important;}
.hv-switch{position:fixed;bottom:22px;left:28px;z-index:45;display:flex;gap:2px;padding:4px;border-radius:999px;
background:rgba(255,255,255,.88);border:1px solid rgba(69,59,51,.08);box-shadow:0 10px 24px -14px rgba(69,40,20,.35);
backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-family:inherit;}
.hv-switch button{border:0;background:transparent;cursor:pointer;height:32px;padding:0 14px;border-radius:999px;
font:inherit;font-size:13px;font-weight:600;color:var(--muted);transition:background .2s ease,color .2s ease;}
.hv-switch button:hover{color:var(--ink);}
.hv-switch button.on{color:#fff;background:linear-gradient(135deg,#D64200 0%,#D64200 40%,#D73959 100%);box-shadow:0 6px 14px -8px rgba(239,23,99,.7);}
.hv-switch .hv-lab{align-self:center;padding:0 8px 0 10px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);opacity:.75;}
@media (max-width:860px){ .hv-switch{display:none !important;} }
.ho-wrap{position:relative;max-width:1180px;height:680px;margin:26px auto 30px;padding:0 32px;box-sizing:border-box;}
/* light "lab" backdrop behind the diagram: a fine grid that glows warm around the core
and fades out towards the edges */
.ho-wrap{overflow-x:clip;}
.ho-bg{position:absolute;top:-40px;bottom:-20px;left:0;right:0;pointer-events:none;z-index:0;}
.ho-bg::after{content:"";position:absolute;inset:0;
background:radial-gradient(ellipse 34% 46% at 50% calc(var(--cy,50%) + 40px),rgba(255,122,41,.13),rgba(255,122,41,.05) 50%,rgba(255,122,41,0) 80%);}
.ho-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:1;}
.ho-lines path.ln{fill:none;stroke-width:1.1;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;
transition:stroke-dashoffset 1.1s cubic-bezier(.4,0,.2,1) var(--d,0s);}
.ho-wrap.on .ho-lines path.ln{stroke-dashoffset:0;}
.ho-lines path.ln{stroke-width:1.3;}
.ho-lines path.ln.lg{stroke-width:5;opacity:.14;}
.ho-lines circle.pulse{opacity:0;transition:opacity .4s ease 1.4s;}
.ho-wrap.on .ho-lines circle.pulse{opacity:1;}
.ho-halo{position:absolute;left:50%;top:var(--cy,50%);width:660px;height:660px;margin:-330px 0 0 -330px;border-radius:50%;pointer-events:none;
background:radial-gradient(closest-side,rgba(255,122,41,.40),rgba(255,138,52,.17) 55%,rgba(255,150,70,0) 100%);
animation:hoBreath 5s ease-in-out infinite;}
@keyframes hoBreath{0%,100%{transform:scale(.92);opacity:.85;}50%{transform:scale(1.06);opacity:1;}}
.ho-orb{position:absolute;left:50%;top:var(--cy,50%);width:260px;height:260px;margin:-130px 0 0 -130px;border-radius:50%;z-index:3;isolation:isolate;
box-shadow:0 0 34px 6px rgba(255,122,41,.45),0 0 90px 24px rgba(239,70,10,.18);
transform:scale(.6);opacity:0;transition:transform .9s cubic-bezier(.2,1.3,.4,1),opacity .5s ease;}
.ho-wrap.on .ho-orb{transform:scale(1);opacity:1;}
@keyframes hoFloat{0%,100%{translate:0 0;}50%{translate:0 -8px;}}
.ho-cv{position:absolute;left:50%;top:50%;width:440px;height:440px;margin:-220px 0 0 -220px;pointer-events:none;}
@keyframes hoTurn{from{transform:rotate(-8deg);}to{transform:rotate(8deg);}}
.ho-core{position:absolute;inset:0;border-radius:50%;
background:radial-gradient(circle at 50% 52%,#7A1A06 0%,#B92E08 30%,#E8460A 58%,#FF7A29 80%,#FFC08A 94%,#FFE2C4 100%);}
.ho-swirl{position:absolute;inset:0;border-radius:50%;animation:hoSpin 18s linear infinite;mix-blend-mode:screen;}
.ho-swirl i{position:absolute;inset:9%;border-radius:50%;border:2px solid rgba(255,226,190,.75);
box-shadow:0 0 12px 2px rgba(255,200,140,.7),inset 0 0 12px 2px rgba(255,200,140,.45);filter:blur(1.6px);
transform:rotate(var(--r)) rotateX(var(--x));animation:hoRing var(--s) ease-in-out infinite alternate;}
.ho-swirl i:nth-child(2n){border-color:rgba(255,160,120,.7);inset:14%;}
.ho-swirl i:nth-child(3n){border-width:1px;inset:5%;}
@keyframes hoSpin{to{transform:rotate(360deg);}}
@keyframes hoRing{from{transform:rotate(var(--r)) rotateX(var(--x));}to{transform:rotate(calc(var(--r) + 60deg)) rotateX(calc(var(--x) - 25deg));}}
.ho-shine{position:absolute;inset:0;border-radius:50%;pointer-events:none;
background:radial-gradient(circle at 34% 26%,rgba(255,255,255,.55),rgba(255,255,255,0) 32%),
radial-gradient(circle at 50% 50%,rgba(0,0,0,0) 62%,rgba(255,236,214,.55) 72%,rgba(255,236,214,0) 76%);}
.ho-card{position:absolute;z-index:2;display:flex;flex-direction:column;align-items:stretch;gap:8px;width:226px;box-sizing:border-box;padding:9px 9px 9px 10px;border-radius:18px;
background:rgba(255,255,255,.95);border:1px solid rgba(255,255,255,.9);
box-shadow:0 0 0 1px rgba(69,59,51,.05),0 2px 6px -2px rgba(69,40,20,.06),0 22px 44px -26px rgba(69,40,20,.28);
opacity:0;transition:opacity .5s ease var(--d,0s),transform .7s cubic-bezier(.2,1,.3,1) var(--d,0s),box-shadow .25s ease;}
.ho-card.ho-l{transform:translateX(-24px);} .ho-card.ho-r{transform:translateX(24px);}
.ho-wrap.on .ho-card{opacity:1;transform:none;}
.ho-card:hover{box-shadow:0 0 0 1px rgba(232,70,10,.1),0 2px 6px -2px rgba(69,40,20,.06),0 26px 48px -26px rgba(232,70,10,.38);}
.ho-ico{flex:0 0 30px;height:30px;border-radius:10px;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 14px -8px rgba(30,20,10,.5);}
.ho-tx{display:flex;flex-direction:column;min-width:0;text-align:left;}
.ho-tx b{font-size:13.5px;font-weight:500;letter-spacing:-.005em;color:var(--ink);line-height:1.2;}
.ho-tx small{font-size:11px;color:var(--muted);line-height:1.3;margin-top:1px;}
.ho-hd{display:flex;align-items:center;gap:9px;}
.ho-ico svg{width:15px;height:15px;}
.ho-ui{display:block;}
.hu-row{display:flex;align-items:center;gap:6px;height:30px;padding:0 5px 0 9px;border-radius:11px;border:0;background:rgba(69,59,51,.045);}
.hu-t{flex:1;min-width:0;font-size:11px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;}
.hu-ph{font-weight:500;color:var(--muted);}
.hu-av{flex:0 0 18px;height:18px;font-size:8px !important;border-radius:50%;color:#fff;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;}
.hu-chip{flex:0 0 auto;padding:2px 7px;border-radius:999px;font-size:9.5px;font-weight:700;}
.hu-btn{flex:0 0 auto;padding:4px 10px;border-radius:999px;color:#fff;font-size:10px;font-weight:700;}
.hu-send{flex:0 0 20px;height:20px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;}
.hu-tog{flex:0 0 26px;height:15px;border-radius:999px;position:relative;}
.hu-tog::after{content:"";position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);}
.hu-live{flex:0 0 7px;height:7px;border-radius:50%;background:#2E8A5A;box-shadow:0 0 0 3px rgba(46,138,90,.15);}
.hu-stats{display:grid;grid-template-columns:1fr 1fr;gap:6px;}
.hu-stats > span{display:flex;flex-direction:column;align-items:flex-start;padding:4px 9px;border-radius:11px;border:0;background:rgba(69,59,51,.045);}
.hu-stats small{font-size:9px;color:var(--muted);line-height:1.3;}
.hu-stats b{font-size:12px;font-weight:700;color:var(--ink);line-height:1.2;}
.hu-stats .up{font-style:normal;color:#2E8A5A;font-size:11px;}
.hu-seg{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;padding:3px;border-radius:11px;background:rgba(69,59,51,.05);}
.hu-seg span{padding:4px 0;border-radius:8px;font-size:10px;font-weight:600;color:var(--muted);text-align:center;}
.hu-seg span.on{color:#fff;}
.hu-bars{display:flex;align-items:flex-end;gap:4px;height:26px;padding:0 2px;}
.hu-bars i{flex:1;border-radius:4px 4px 2px 2px;background:rgba(108,162,151,.22);}
/* each card plays a tiny story: the task (hu-a), a tap, then the result an agent cares about (hu-b) */
.ho-ui{display:grid;grid-template-columns:minmax(0,1fr);}
.ho-ui > .hu-a, .ho-ui > .hu-b{grid-area:1/1;transition:opacity .8s ease,transform .9s cubic-bezier(.2,1,.3,1);will-change:opacity,transform;backface-visibility:hidden;-webkit-backface-visibility:hidden;}
.ho-card{contain:layout paint;backface-visibility:hidden;-webkit-backface-visibility:hidden;}
.ho-card.act .hu-btn,.ho-card.act .hu-send,.ho-card.act .hu-bars i.on{filter:none !important;}
.ho-ui > .hu-b{opacity:0;transform:translateY(8px);pointer-events:none;align-self:center;}
.ho-card.ben .hu-a{opacity:0;transform:translateY(-8px);}
.ho-card.ben .hu-b{opacity:1;transform:none;}
.hu-ben{display:flex;align-items:center;gap:8px;min-height:30px;padding:5px 9px;border-radius:11px;box-sizing:border-box;
background:linear-gradient(135deg,rgba(46,138,90,.10),rgba(46,138,90,.04));border:0;text-align:left;}
.hu-bi{flex:0 0 18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;background:#2E8A5A;box-shadow:0 0 0 3px rgba(46,138,90,.14);}
.hu-bt{font-size:11px;line-height:1.3;color:var(--ink);}
.hu-bt b{font-weight:700;}
.ho-card{transition:opacity .5s ease var(--d,0s),transform .7s cubic-bezier(.2,1,.3,1) var(--d,0s),box-shadow .8s ease;}
.ho-card.ben{box-shadow:0 0 0 1px rgba(69,59,51,.05),0 2px 6px -2px rgba(69,40,20,.06),0 22px 44px -26px rgba(69,40,20,.28);}
/* the "tap" just before the result appears */
.hu-btn,.hu-send,.hu-tog,.hu-seg span{transition:transform .18s ease,filter .18s ease;}
.ho-card.act .hu-btn,.ho-card.act .hu-send{transform:scale(.88);filter:brightness(1.12);}
.ho-card.act .hu-tog{transform:scale(1.12);}
.ho-card.act .hu-seg span:last-child{background:#CEA860;color:#fff;}
.ho-card.act .hu-seg span.on{background:transparent;color:var(--muted);}
.ho-card.act .hu-chip{transform:scale(1.08);}
.ho-card.act .hu-bars i.on{filter:brightness(1.15);}
.ho-dot{position:absolute;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:#fff;border:1.5px solid rgba(255,122,41,.6);}
.ho-l .ho-dot{right:-4px;} .ho-r .ho-dot{left:-4px;border-color:rgba(239,23,99,.55);}
/* integrations around the core: small white tiles, wired in with the same fading lines */
.ho-int{position:absolute;z-index:2;width:50px;height:50px;margin:-25px 0 0 -25px;opacity:0;transform:scale(.4);
transition:opacity .4s ease var(--d,0s),transform .6s cubic-bezier(.2,1.3,.4,1) var(--d,0s);}
.ho-wrap.on .ho-int{opacity:1;transform:scale(1);}
/* app-icon style: a frosted glass ring, a glossy tile and a soft glow in the brand's colour */
.ho-int{padding:0;}
.ho-int::before{content:"";position:absolute;inset:-6px;border-radius:21px;pointer-events:none;
background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.9);
box-shadow:0 14px 30px -14px var(--glow,rgba(30,20,10,.35)),0 2px 6px -2px rgba(30,20,10,.12);
backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
.ho-itile{position:relative;display:flex;align-items:center;justify-content:center;width:50px;height:50px;border-radius:15px;background-color:#fff;overflow:hidden;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.35),inset 0 -6px 12px -6px rgba(0,0,0,.18);}
.ho-itile::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
background:linear-gradient(170deg,rgba(255,255,255,.42) 0%,rgba(255,255,255,.08) 42%,rgba(255,255,255,0) 50%);}
.ho-itile svg{width:22px;height:22px;}
.ho-badge{position:absolute;left:0;right:0;top:0;margin:0;z-index:4;}
@media (max-width:860px){ .ho-wrap{display:none !important;} }
@media (max-width:860px){
.dash-tabs + .more-badge-row{display:none;}
.more-badge-m{display:flex;justify-content:flex-start;margin:14px 16px 0;}
}
/* "Built by agents, for agents": glassy pill on a soft brand wash, with a white highlight
that travels round its stroke */
@property --gpA{syntax:'';initial-value:0deg;inherits:false;}
.glow-pill{position:relative;display:inline-flex;align-items:center;gap:10px;margin:0 auto 24px;
padding:9px 20px 9px 16px;border-radius:999px;font-size:14.5px;font-weight:500;letter-spacing:.01em;color:#fff;
background:linear-gradient(100deg,#D64200 0%,#D64200 40%,#D73959 100%);
box-shadow:0 10px 26px -12px rgba(239,23,99,.65), inset 0 1px 0 rgba(255,255,255,.35);isolation:isolate;}
.glow-pill::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1.5px;z-index:-1;
background:conic-gradient(from var(--gpA), rgba(255,255,255,.25) 0deg, rgba(255,255,255,.25) 250deg,
rgba(255,255,255,1) 310deg, rgba(255,255,255,.25) 360deg);
-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite:xor;mask-composite:exclude;
animation:gpSpin 3.6s linear infinite;}
.glow-pill::after{content:'';position:absolute;inset:1.5px;border-radius:inherit;z-index:-1;pointer-events:none;
background:radial-gradient(60% 120% at 50% 120%, rgba(255,255,255,.28), rgba(255,255,255,0) 70%),
linear-gradient(rgba(255,255,255,.08),rgba(255,255,255,0));}
.glow-pill .gp-spark{color:#fff;animation:gpTwinkle 2.4s ease-in-out infinite;}
@keyframes gpSpin{to{--gpA:360deg;}}
@keyframes gpTwinkle{0%,100%{opacity:.75;transform:scale(.9) rotate(0deg);}50%{opacity:1;transform:scale(1.08) rotate(12deg);}}
@media (prefers-reduced-motion:reduce){.glow-pill::before,.glow-pill .gp-spark{animation:none;}}
@media (max-width:860px){.glow-pill{margin:0 0 18px;font-size:13px;padding:8px 16px 8px 13px;}}
.pr-offer{font-weight:500;opacity:.8;font-size:.92em;}
.tab-ico{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:7px;flex-shrink:0;box-shadow:0 2px 5px -2px rgba(40,30,20,.35), inset 0 1px 0 rgba(255,255,255,.25);}
.cmp-source{text-align:center;font-size:11px;color:var(--muted);margin:10px 0 0;}
@media (max-width: 860px){
.cmp-wrap{padding-left:16px;padding-right:16px;}
.cmp-table{grid-template-columns:1.5fr repeat(4,1fr);font-size:11px;}
.cmp-cell.c0{font-size:11.5px;padding-left:10px;}
.cmp-spot{left:calc(1.5 / 5.5 * 100%);width:calc(1 / 5.5 * 100%);}
}
/* ---- ONE SYSTEM (hub + modules) ----
Placeholder composition: Eproma at the centre, every module orbiting it, with
dotted spokes showing that each one runs off the same record. */
/* overflow-x:clip, not hidden: the full-bleed stage is 100vw, which is wider than the
content box once a scrollbar is present, and that overflow was turning the section
into its own scroll container. `clip` removes the overflow without creating one, and
unlike `hidden` it leaves the vertical axis visible so the hover cards still show. */
/* the "Everything your agency needs" hub only appears in the Circle view */
html:not(.hv-dash) #agency{display:none !important;}
.hub-section{position:relative;z-index:1;padding:120px 0 60px;overflow-x:clip;}
/* full-bleed: the fan reaches the page edges rather than stopping at the text column */
.hub-stage{position:relative;width:calc(var(--vw, 1vw) * 100);margin-left:calc(50% - calc(var(--vw, 1vw) * 50));
height:560px;margin-top:34px;}
.hub-section .fx-inner{overflow:visible;}
/* the fanned strings: one gradient per side, anchored in user space so the fade runs
from the centre outward regardless of which path it is painting */
/* the strings are revealed by opening a clip from the centre outward, so the draw-on
costs nothing from the dash animation that is already running on every path */
.hub-strings{position:absolute;inset:0;width:100%;height:100%;overflow:visible;
clip-path:inset(0 50% 0 50%);
transition:clip-path .8s cubic-bezier(.22,1,.36,1) .12s;}
.hub-stage.in .hub-strings{clip-path:inset(0 0 0 0);}
/* preserveAspectRatio is none so the fan always spans the full width and the chips'
percentage positions land exactly on the curves; non-scaling-stroke keeps the line
weight even though the viewBox is being stretched horizontally */
.hub-str{fill:none;stroke-width:1.2;stroke-linecap:round;vector-effect:non-scaling-stroke;
stroke-dasharray:2.5 7;animation:hubFlow 13s linear infinite;}
@keyframes hubFlow{to{stroke-dashoffset:-190;}}
/* the glow behind the mark, same warmth the section already carries */
.hub-glow{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
width:760px;height:520px;border-radius:50%;pointer-events:none;
background:radial-gradient(closest-side, rgba(255,122,41,.28), rgba(239,23,99,.1) 52%, rgba(239,23,99,0) 78%);
filter:blur(12px);opacity:0;transition:opacity .6s ease;}
.hub-stage.in .hub-glow{opacity:1;}
.hub-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;
width:167px;height:167px;border-radius:50%;background:#fff;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
border:1px solid rgba(232,70,10,.2);
box-shadow:0 1px 2px rgba(88,62,50,.06), 0 26px 54px -24px rgba(232,70,10,.6),
0 0 0 9px rgba(255,255,255,.72), 0 0 0 10px rgba(232,70,10,.1);
opacity:0;transform:translate(-50%,-50%) scale(.35);
transition:opacity .3s ease, transform .55s cubic-bezier(.22,1.15,.36,1);}
.hub-stage.in .hub-core{opacity:1;transform:translate(-50%,-50%) scale(1);}
.hub-core svg{display:block;width:97px;height:auto;}
.hub-core span{font-size:8px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
color:var(--primary-deep);}
/* Module tiles riding the strings, in the sidebar's own colours.
Three nested elements on purpose: a browser will not TRANSITION a property that an
animation is also driving, so with the bob and the hover scale both on transform the
growth snapped instead of easing. Positioning, bobbing and scaling now each own their
own element and never touch the same property. */
.hub-chip{position:absolute;transform:translate(-50%,-50%);z-index:2;}
.hub-bob{display:block;animation:hubBob 7s ease-in-out infinite;}
@keyframes hubBob{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}
.hub-tile{
display:flex;align-items:center;justify-content:center;
width:62px;height:62px;border-radius:19px;
box-shadow:0 12px 26px -10px rgba(30,20,10,.55), 0 0 0 6px rgba(255,255,255,.72);
opacity:0;transform:scale(.3);
transition:transform .5s cubic-bezier(.16,.84,.34,1), box-shadow .6s ease, opacity .35s ease;}
.hub-stage.in .hub-tile{opacity:1;transform:scale(1);}
/* The hidden start state only applies once the script has armed the stage. If the
script never runs, or the page is re-rendered and the classes are lost, the section
simply shows, fully drawn, instead of staying blank. */
.hub-stage:not(.hub-armed) .hub-strings{clip-path:inset(0 0 0 0);transition:none;}
.hub-stage:not(.hub-armed) .hub-glow{opacity:1;transition:none;}
.hub-stage:not(.hub-armed) .hub-core{opacity:1;transform:translate(-50%,-50%) scale(1);transition:none;}
.hub-stage:not(.hub-armed) .hub-tile{opacity:1;transform:scale(1);}
/* The section is ALWAYS drawn. The entrance is a one-off animation that plays when the
script adds .in, with backwards fill only, so nothing can ever be left hidden if the
script, the observer or a re-render misbehaves. */
.hub-section .hub-stage .hub-strings{clip-path:inset(0 0 0 0);transition:none;}
.hub-section .hub-stage .hub-glow{opacity:1;transition:none;}
.hub-section .hub-stage .hub-core{opacity:1;transform:translate(-50%,-50%) scale(1);transition:none;}
.hub-section .hub-stage .hub-tile{opacity:1;transform:scale(1);transition:transform .5s cubic-bezier(.16,.84,.34,1), box-shadow .6s ease;}
.hub-section .hub-stage.in .hub-strings{animation:hubStrIn .8s cubic-bezier(.22,1,.36,1) .12s backwards;}
.hub-section .hub-stage.in .hub-glow{animation:hubFadeIn .6s ease backwards;}
.hub-section .hub-stage.in .hub-core{animation:hubCoreIn .55s cubic-bezier(.22,1.15,.36,1) backwards;}
.hub-section .hub-stage.in .hub-tile{animation:hubTileIn .5s cubic-bezier(.16,.84,.34,1) var(--d, .3s) backwards;}
/* waiting to be seen: set by the script only, so without it the section just shows */
.hub-section .hub-stage.hub-wait:not(.in) .hub-strings{clip-path:inset(0 50% 0 50%);}
.hub-section .hub-stage.hub-wait:not(.in) .hub-glow{opacity:0;}
.hub-section .hub-stage.hub-wait:not(.in) .hub-core{opacity:0;transform:translate(-50%,-50%) scale(.35);}
.hub-section .hub-stage.hub-wait:not(.in) .hub-tile{opacity:0;transform:scale(.3);}
.hub-section .hub-stage.in .hub-tile{animation-duration:.6s;animation-timing-function:cubic-bezier(.2,1.25,.4,1);}
@keyframes hubStrIn{from{clip-path:inset(0 50% 0 50%);}}
@keyframes hubFadeIn{from{opacity:0;}}
@keyframes hubCoreIn{from{opacity:0;transform:translate(-50%,-50%) scale(.35);}}
@keyframes hubTileIn{from{opacity:0;transform:scale(.3);}}
.hub-chip:hover{transform:translate(-50%,-50%) scale(1.09);animation-play-state:paused;}
.hub-tile.hub-tile-int{width:66px;height:66px;border-radius:19px;background:#fff;
border:1px solid rgba(69,59,51,.08);
box-shadow:0 10px 22px -12px rgba(30,20,10,.45), 0 0 0 5px rgba(255,255,255,.6);}
.hub-tile.hub-tile-int.hub-logo{overflow:hidden;border-color:rgba(69,59,51,.06);}
.hub-stage .hub-int:hover .hub-tile{box-shadow:0 16px 30px -12px rgba(30,20,10,.45), 0 0 0 6px rgba(255,255,255,.8);}
@media (max-width:860px){.hub-int{display:none !important;}}
/* hover preview: a couple of real components from that module, in the same glass
language as the feature showcase */
.hub-chip{cursor:default;}
.hub-chip:hover{z-index:6;}
.hub-chip:hover .hub-bob{animation-play-state:paused;}
.hub-stage .hub-chip:hover .hub-tile{transform:scale(1.2);
box-shadow:0 18px 34px -10px rgba(30,20,10,.5), 0 0 0 7px rgba(255,255,255,.8);}
/* always above the tile */
.hub-pop{
position:absolute;left:50%;bottom:calc(100% + 16px);transform:translateX(-50%) translateY(10px);
width:252px;display:flex;flex-direction:column;gap:9px;pointer-events:none;
opacity:0;visibility:hidden;
transition:opacity .4s ease .06s, transform .55s cubic-bezier(.22,1,.36,1) .06s;}
.hub-chip:hover .hub-pop{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
.hub-pop.pl{left:-6px;transform:translateY(6px);}
.hub-chip:hover .hub-pop.pl{transform:translateY(0);}
.hub-pop.pl{transform:translateY(10px);}
.hub-pop.pr{left:auto;right:-6px;transform:translateY(10px);}
.hub-chip:hover .hub-pop.pr{transform:translateY(0);}
.hub-card{
border-radius:14px;padding:11px 12px;text-align:left;
background:rgba(255,255,255,.82);
border:1px solid rgba(255,255,255,.95);
-webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);
box-shadow:0 1px 2px rgba(88,62,50,.06), 0 18px 34px -20px rgba(88,62,50,.45),
0 0 0 .5px rgba(88,62,50,.05);}
.hub-card + .hub-card{margin-top:0;}
.hub-row{display:flex;align-items:center;gap:8px;}
.hub-row + .hub-row{margin-top:7px;}
.hub-kpi{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.hub-kpi > div{border-radius:9px;padding:7px 8px;background:rgba(30,50,90,.04);}
.hub-bars{display:flex;align-items:flex-end;gap:4px;height:34px;margin-top:8px;}
.hub-bars i{flex:1;border-radius:3px 3px 0 0;background:rgba(30,50,90,.14);display:block;}
.hub-bars i.hi{background:linear-gradient(180deg,#FF7A29,#EF1763);}
.hub-track{height:6px;border-radius:100px;background:rgba(30,50,90,.1);overflow:hidden;flex:1;}
.hub-track i{display:block;height:100%;border-radius:100px;background:linear-gradient(90deg,#FF7A29,#EF1763);}
@media (max-width: 860px){ .hub-pop{display:none;} }
@media (max-width: 860px){
.hub-stage{height:auto;width:100%;margin-left:0;display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center;}
.hub-strings, .hub-glow{display:none;}
.hub-core{position:static;transform:none;width:100%;height:auto;padding:26px 0;border-radius:24px;box-shadow:none;}
.hub-chip{position:static !important;transform:none !important;}
.hub-bob{animation:none !important;}
.hub-tile{opacity:1 !important;transform:none !important;}
.hub-core{opacity:1 !important;transform:none !important;}
}
/* ---- FAQ ---- */
.faq-section{position:relative;z-index:1;padding:110px 0 30px;}
.faq-list{max-width:820px;margin:44px auto 0;display:flex;flex-direction:column;gap:10px;}
.faq-item{border-radius:16px;background:rgba(255,255,255,.86);
border:1px solid rgba(30,50,90,.07);overflow:hidden;
transition:border-color .3s ease, box-shadow .3s ease;}
.faq-item.on{border-color:rgba(232,70,10,.35);
box-shadow:0 1px 2px rgba(88,62,50,.05), 0 18px 34px -26px rgba(88,62,50,.45);}
.faq-q{display:flex;align-items:center;gap:14px;padding:18px 20px;cursor:pointer;
font-size:16.5px;font-weight:400;letter-spacing:-.005em;color:var(--ink);}
.faq-q .chev{margin-left:auto;flex-shrink:0;transition:transform .35s cubic-bezier(.22,1,.36,1);}
.faq-item.on .faq-q .chev{transform:rotate(45deg);}
.faq-item.on .faq-q .chev path{stroke:url(#faqGrad);}
/* the answer stays in the DOM and only collapses, so nothing re-renders on toggle */
.faq-a{max-height:0;opacity:0;overflow:hidden;padding:0 20px;
font-size:14.5px;line-height:1.68;color:var(--muted);
transition:max-height .45s cubic-bezier(.22,1,.36,1), opacity .3s ease, padding .45s ease;}
.faq-item.on .faq-a{max-height:420px;opacity:1;padding:0 20px 20px;}
@media (max-width: 860px){
.ag-grid{grid-template-columns:1fr;}
}
/* ---- NUMBERS / ANALYTICS ----
Accordion on the left, a live app frame on the right. Tech register: mono-ish
uppercase micro-labels, tabular figures, a hairline grid inside the frame. */
.st-section{position:relative;z-index:1;padding:90px 0;}
.st-grid{display:grid;grid-template-columns:.78fr 1.22fr;gap:30px;margin-top:46px;align-items:start;}
.st-rail{display:flex;flex-direction:column;gap:10px;}
/* Active state is a soft tint, nothing else: no rule, no side bar, no drop shadow.
The selection is carried by colour — label and icon go brand orange — which is
quieter than an outlined card and keeps the rail reading as one list. */
.st-item{position:relative;text-align:left;padding:15px 17px;border-radius:16px;cursor:pointer;
background:transparent;border:0;
display:flex;gap:13px;align-items:flex-start;
transition:background .3s ease;}
.st-item:hover{background:rgba(30,50,90,.04);}
.st-item.on{background:rgba(255,122,41,.09);}
.st-item.on:hover{background:rgba(255,122,41,.11);}
.st-ico{width:26px;height:26px;flex-shrink:0;display:flex;align-items:center;
justify-content:center;background:none;}
.st-ico svg{stroke:#8494ad;transition:stroke .3s ease;}
.st-item.on .st-ico svg{stroke:var(--primary);}
.st-item b{display:block;font-size:15px;font-weight:500;letter-spacing:-.01em;color:var(--ink);
transition:color .3s ease;}
.st-item.on b{color:var(--primary-text);}
/* the copy stays in the DOM and is only collapsed, so nothing re-renders on expand */
.st-item i{display:block;font-style:normal;font-size:13.5px;line-height:1.55;color:var(--muted);
max-height:0;opacity:0;overflow:hidden;
transition:max-height .45s cubic-bezier(.22,1,.36,1), opacity .35s ease, margin-top .45s ease;}
.st-item.on i{max-height:90px;opacity:1;margin-top:6px;}
.st-app{position:relative;border-radius:20px;overflow:hidden;
background:#FBFCFE;border:1px solid rgba(30,50,90,.1);
box-shadow:0 40px 80px -52px rgba(88,62,50,.5), 0 2px 6px -3px rgba(88,62,50,.12);}
.st-chrome{display:flex;align-items:center;gap:10px;padding:11px 14px;
border-bottom:1px solid rgba(30,50,90,.07);background:rgba(240,244,250,.6);}
.st-crumb{display:inline-flex;align-items:center;gap:8px;padding:5px 12px;border-radius:100px;
background:#fff;border:1px solid rgba(30,50,90,.09);
font-size:10.5px;font-weight:700;color:#41597f;letter-spacing:.02em;}
.st-main{display:flex;min-height:436px;}
.st-side{width:52px;flex-shrink:0;border-right:1px solid rgba(30,50,90,.07);
display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 0;
background:rgba(240,244,250,.4);}
.st-sbtn{width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;
transition:background .3s ease;}
.st-sbtn svg{stroke:#9aa8bf;transition:stroke .3s ease;}
.st-sbtn.on{background:linear-gradient(140deg,#FF7A29,#EF1763);box-shadow:0 9px 18px -10px rgba(232,70,10,.9);}
.st-sbtn.on svg{stroke:#fff;}
.st-stage{position:relative;flex:1;min-width:0;padding:18px 20px 20px;
background-image:radial-gradient(circle, rgba(40,70,120,.07) .7px, transparent 1px);
background-size:13px 13px;}
.st-screen{display:none;}
.st-screen.on{display:block;animation:fxFade .45s ease both;}
.st-hd{display:flex;align-items:center;gap:10px;}
.st-hd{flex-wrap:nowrap;min-width:0;}
.st-hd h4{font-size:14px;font-weight:800;letter-spacing:-.01em;color:var(--ink);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
.st-hd .st-tag{white-space:nowrap;flex-shrink:0;}
/* the period control and the date range never wrap onto a second row */
.st-hd .st-seg{flex-shrink:0;}
.st-hd .st-seg span{font-size:9.5px;padding:4px 8px;}
.st-hd .st-sub{white-space:nowrap;flex-shrink:0;font-size:9.5px;}
.st-tag{font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#8494ad;}
.st-live{font-size:8.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
padding:3px 8px;border-radius:100px;background:rgba(31,138,76,.12);color:#1F8A4C;}
.st-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:14px;}
.st-tile{border-radius:12px;padding:11px 12px;background:#fff;border:1px solid rgba(30,50,90,.08);}
.st-tile span{display:block;font-size:8.5px;font-weight:800;letter-spacing:.11em;
text-transform:uppercase;color:#64748B;}
.st-tile b{display:block;font-size:19px;font-weight:800;letter-spacing:-.02em;color:var(--ink);
margin-top:5px;font-variant-numeric:tabular-nums;}
.st-tile em{display:block;font-style:normal;font-size:10px;font-weight:700;margin-top:3px;color:#18733F;}
.st-tile em.down{color:#C2410C;}
.st-tbl{margin-top:12px;border-radius:12px;overflow:hidden;background:#fff;
border:1px solid rgba(30,50,90,.08);}
.st-row{display:flex;align-items:center;gap:10px;padding:9px 12px;
border-top:1px solid rgba(30,50,90,.06);font-size:11.5px;color:var(--ink);}
.st-row:first-child{border-top:none;}
.st-row.head{font-size:8.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:#64748B;
background:rgba(240,244,250,.6);}
.st-row .g{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.st-row .n{width:84px;text-align:right;font-weight:700;font-variant-numeric:tabular-nums;flex-shrink:0;}
.st-badge{font-size:9px;font-weight:800;padding:3px 8px;border-radius:100px;white-space:nowrap;}
.st-badge.ok{background:rgba(31,138,76,.12);color:#1F8A4C;}
.st-badge.warn{background:rgba(201,147,46,.16);color:#8A6318;}
.st-badge.bad{background:rgba(232,70,10,.13);color:#C2410C;}
.st-bars{display:flex;align-items:flex-end;gap:6px;height:74px;margin-top:12px;}
.st-bars i{flex:1;border-radius:4px 4px 0 0;background:rgba(30,50,90,.12);display:block;}
.st-bars i.hi{background:linear-gradient(180deg,#FF7A29,#EF1763);}
.st-fun{display:flex;flex-direction:column;gap:9px;margin-top:14px;}
.st-fstep{display:flex;align-items:center;gap:11px;}
.st-fstep .lbl{width:78px;flex-shrink:0;font-size:10.5px;font-weight:700;color:var(--muted);}
.st-ftrack{flex:1;height:22px;border-radius:7px;background:rgba(30,50,90,.06);overflow:hidden;}
.st-ftrack i{display:block;height:100%;border-radius:7px;background:linear-gradient(90deg,#FF7A29,#EF1763);}
.st-fstep .v{width:74px;text-align:right;font-size:11px;font-weight:800;color:var(--ink);
font-variant-numeric:tabular-nums;flex-shrink:0;}
.st-note{display:flex;align-items:center;gap:8px;margin-top:14px;padding-top:12px;
border-top:1px dashed rgba(30,50,90,.14);font-size:11px;color:var(--muted);}
/* analytics screens — same component vocabulary as the real back office */
.st-side.dash-sidebar{width:82px;border-right:1px solid rgba(30,50,90,.07);
background:rgba(240,244,250,.45);padding-top:12px;}
.st-sb-logo{display:block;margin-bottom:6px;}
.st-sb-logo svg{display:block;width:56px;height:auto;}
.sb-item.active{position:relative;}
.sb-item.active .sb-label{color:var(--ink);font-weight:700;}
.sb-item.active .sb-icon{box-shadow:0 3px 6px rgba(0,0,0,.12), 0 8px 16px -6px rgba(232,70,10,.5),
0 0 0 2px rgba(255,255,255,.9), 0 0 0 3.5px rgba(232,70,10,.35);}
.st-sub{font-size:10px;color:#64748B;line-height:1.35;margin-top:4px;display:block;}
.st-seg{display:inline-flex;gap:2px;background:rgba(30,50,90,.05);border-radius:9px;padding:2px;}
.st-seg span{font-size:10px;font-weight:700;padding:4px 9px;border-radius:7px;color:#8494ad;}
.st-seg span.on{background:#fff;color:var(--primary-deep);box-shadow:0 1px 2px rgba(88,62,50,.12);}
.st-chip{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:700;
padding:4px 9px;border-radius:100px;background:rgba(30,50,90,.05);color:#7d8ca6;}
.st-chip.on{background:var(--ink);color:#fff;}
.st-lead{display:flex;align-items:center;gap:9px;padding:8px 0;border-top:1px solid rgba(30,50,90,.06);}
.st-lead:first-of-type{border-top:none;}
.st-av{width:26px;height:26px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;
justify-content:center;font-size:9px;font-weight:800;color:#fff;
background:linear-gradient(140deg,#FF7A29,#EF1763);}
.st-reply{font-size:10px;font-weight:700;padding:4px 10px;border-radius:8px;background:#fff;
border:1px solid rgba(30,50,90,.12);color:var(--ink);}
.st-conv{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px;}
.st-conv > div{border-radius:10px;padding:9px 10px;background:rgba(30,50,90,.04);}
.st-conv b{display:block;font-size:17px;font-weight:800;color:var(--ink);letter-spacing:-.02em;}
.st-conv span{display:block;font-size:9px;color:#64748B;margin-top:3px;line-height:1.3;}
.st-conv i{display:block;height:4px;border-radius:100px;background:rgba(30,50,90,.1);margin-top:7px;}
.st-donut{width:112px;height:112px;border-radius:50%;flex-shrink:0;position:relative;
display:flex;align-items:center;justify-content:center;
background:conic-gradient(#E8460A 0 33%, #C9932E 33% 66%, #EF1763 66% 100%);}
.st-donut i{position:absolute;inset:19px;border-radius:50%;background:#fff;}
.st-donut b{position:relative;z-index:1;font-size:19px;font-weight:800;color:var(--ink);}
.st-key{display:flex;align-items:center;gap:8px;font-size:11.5px;padding:5px 0;}
.st-key em{width:9px;height:9px;border-radius:50%;flex-shrink:0;}
.st-dots{display:flex;gap:3px;margin-top:7px;}
.st-dots i{width:6px;height:6px;border-radius:50%;background:rgba(30,50,90,.12);display:block;}
.st-dots i.on{background:#E8460A;}
.st-zone{display:flex;align-items:center;gap:10px;padding:7px 0;font-size:11.5px;
border-top:1px solid rgba(30,50,90,.06);}
.st-zone:first-of-type{border-top:none;}
.st-meter{height:5px;border-radius:100px;background:rgba(30,50,90,.09);overflow:hidden;flex:1;}
.st-meter i{display:block;height:100%;border-radius:100px;background:#7E9B4F;}
.st-foot{font-size:10px;color:#64748B;margin-top:10px;line-height:1.45;}
@media (max-width: 860px){
.st-grid{grid-template-columns:1fr;}
.st-tiles{grid-template-columns:repeat(2,1fr);}
.st-side{display:none;}
}
/* ---- AI FEATURES ----
A pinned rail: four steps on the left, one stage on the right whose scene swaps
as scroll crosses each band. Same surface language as the feature showcase —
blue-grey field, glass panels, brand gradient only on whatever is "primary". */
.ai-section{position:relative;z-index:1;min-height:calc(var(--vh, 1vh) * 560);}
/* The section used to paint its own masked backdrop, which meant a visible blurred
band where the mask feathered. It now works like the problem stage: a fixed,
full-viewport layer whose OPACITY is toggled, so the page simply changes colour with
no edge anywhere. Being fixed, it is also naturally still while the content is pinned. */
.ai-dark-layer{
position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0;
transition:opacity .25s ease;
background-color:#120C08;
background-image:
radial-gradient(760px 520px at 22% 26%, rgba(255,122,41,.22), transparent 66%),
radial-gradient(680px 520px at 80% 74%, rgba(239,23,99,.16), transparent 68%),
radial-gradient(900px 700px at 50% 50%, rgba(255,138,45,.09), transparent 72%),
radial-gradient(780px 560px at 50% 46%, rgba(18,12,8,.86) 0%, rgba(18,12,8,.6) 46%, rgba(18,12,8,0) 80%),
linear-gradient(to right, rgba(255,160,90,.09) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255,160,90,.09) 1px, transparent 1px);
background-size:100% 100%, 100% 100%, 100% 100%, 100% 100%, 68px 68px, 68px 68px;
}
/* the stage is hidden until the dark wash is actually up — its type is near-white, so
a single frame of it over the light page reads as invisible text (or worse, a ghost) */
/* desktop: the dark field belongs to the section itself (fixed attachment keeps the glow
still while the content is pinned), so the browser clips it natively at scroll speed —
no script-driven edge lagging a frame behind the page */
@media (min-width:861px){
.ai-section{
background-color:#120C08;
background-image:
radial-gradient(760px 520px at 22% 26%, rgba(255,122,41,.22), transparent 66%),
radial-gradient(680px 520px at 80% 74%, rgba(239,23,99,.16), transparent 68%),
radial-gradient(900px 700px at 50% 50%, rgba(255,138,45,.09), transparent 72%),
radial-gradient(780px 560px at 50% 46%, rgba(18,12,8,.86) 0%, rgba(18,12,8,.6) 46%, rgba(18,12,8,0) 80%),
linear-gradient(to right, rgba(255,160,90,.09) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255,160,90,.09) 1px, transparent 1px);
background-size:100% 100%, 100% 100%, 100% 100%, 100% 100%, 68px 68px, 68px 68px;
background-attachment:fixed;}
.ai-dark-layer{opacity:0 !important;clip-path:none !important;}
}
/* Performance: the three pinned stages are held by the browser itself (sticky) instead
of being swapped between absolute and fixed from a scroll handler, which always ran a
frame behind the page and made the pinned content judder. overflow-x:clip (not hidden)
on the page root keeps sideways overflow cut off without breaking sticky. */
.page-root{overflow-x:clip !important;}
/* with the root no longer a scroll container, its .snap-sec children would start snapping
for the first time (they never did before) — keep the scroll free, as it always behaved */
html{scroll-snap-type:none !important;}
@media (min-width:861px){
.ai-pin, .fxi-section:not(.fxi-static) .fxi-pin, .problem2-pin-inner{position:sticky !important;top:0 !important;}
/* the section below no longer slides up over the end of the AI stage */
.ai-section{margin-bottom:0 !important;}
}
/* ---- performance pass ----
backdrop blur is recomputed every frame anything behind it moves, so it stays only on
the floating bars; drifting dot fields (background-position = a repaint per frame),
film-grain blend layers and the marching connector dashes are dropped; and every
animation in a section that is off screen is paused */
*:not(.nav-wrap):not(.hv-switch):not(.lang-btn), *::before, *::after{-webkit-backdrop-filter:none !important;backdrop-filter:none !important;}
.fx-card::before, .fx-dots{display:none !important;} /* fine dot texture: costly to draw on every card, barely visible */
.page-grain-layer, .fxi-wash::after{display:none !important;}
.of-line{animation:none !important;}
.is-off, .is-off *, .is-off *::before, .is-off *::after{animation-play-state:paused !important;}
/* ---- "100+ features" orbit: small feature icons between the modules ---- */
.po-feat .po-in{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--primary-text);
border:1px solid rgba(232,70,10,.18);box-shadow:0 0 0 4px rgba(255,255,255,.35),0 8px 16px -10px rgba(232,70,10,.6);
pointer-events:auto;cursor:default;transition:scale .25s ease, box-shadow .25s ease;}
.po-feat .po-in svg{width:15px;height:15px;stroke:currentColor;}
.po-feat:hover{z-index:30;}
.po-feat:hover .po-in{scale:1.18;box-shadow:0 0 0 5px rgba(232,70,10,.12),0 10px 20px -10px rgba(232,70,10,.7);}
.pf-tip{position:absolute;left:50%;bottom:calc(100% + 12px);transform:translateX(-50%) translateY(6px);width:200px;padding:10px 12px;
border-radius:14px;background:#fff;border:1px solid rgba(20,15,10,.07);box-shadow:0 18px 36px -18px rgba(69,40,20,.45);
text-align:left;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease, transform .25s ease, visibility .2s;}
.pf-tip b{display:block;font-size:13px;font-weight:600;color:var(--ink);}
.pf-tip i{display:block;font-style:normal;font-size:12px;line-height:1.45;color:var(--muted);margin-top:3px;}
.pf-go{display:inline-flex;align-items:center;gap:5px;margin-top:8px;font-size:12.5px;font-weight:500;color:var(--primary-text) !important;text-decoration:none;transition:gap .2s ease;}
.pf-go:hover{gap:8px;text-decoration:underline;text-underline-offset:3px;}
.po-feat:hover .pf-tip{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);pointer-events:auto;}
.pf-tip::after{content:'';position:absolute;left:0;right:0;top:100%;height:14px;}
/* the hovered feature (and its ring) sits above every other icon */
.p2-orbit:has(.po-feat:hover) .po-tilt{z-index:10;}
.p2-orbit:has(.po-feat:hover) .po-spin-o{z-index:10;}
.po-t.po-feat:hover{z-index:40;}
.h2o .po-feat .pf-tip{display:none;}
#hvSwitch{display:none !important;}
/* "100+ features. One app." — short and punchy */
.problem2-title-cards{font-size:64px !important;font-weight:500 !important;letter-spacing:-.025em !important;line-height:1.02 !important;}
@media (min-width:861px) and (max-height:920px){ .problem2-title-cards{font-size:56px !important;} }
@media (max-width:860px){ .problem2-title-cards{font-size:46px !important;} }
/* ---- Option 1 hero: the orbit, with "100+ features" above and "50+ integrations" below ---- */
.h2o{display:none;}
@media (min-width:861px){
html:not(.hv-opt2):not(.hv-dash) #heroOrbit{display:none !important;}
html:not(.hv-opt2):not(.hv-dash) .h2o{display:flex;flex-direction:column;align-items:center;position:absolute;z-index:2;
top:128px;right:max(48px, calc(50% - 672px));width:900px;transform:scale(.76);transform-origin:top right;}
.h2o-stat{display:flex;align-items:baseline;gap:10px;line-height:1;}
.h2o-stat b{font-size:44px;font-weight:400;letter-spacing:-.01em;}
.h2o-stat span{font-size:17px;color:var(--muted);}
.h2o-stage{position:relative;width:100%;height:620px;margin:0;}
.h2o .p2-orbit.hero-orb{display:block !important;position:absolute;left:50%;top:50%;opacity:1 !important;transform:none !important;transition:none !important;pointer-events:none;}
.h2o .po-name{position:absolute;left:0;top:36px;transform:translateX(-50%);white-space:nowrap;font-size:12.5px;font-weight:500;color:var(--ink);
letter-spacing:.005em;pointer-events:none;text-shadow:0 1px 0 rgba(255,255,255,.8);}
.h2o .h2o-stat{display:none;}
.h2o .po-ring-o{width:856px !important;height:548px !important;}
.h2o .po-ring-i{width:568px !important;height:364px !important;}
.h2o-badges{top:60px !important;}
/* left column: a touch larger, and the three ticks on one line */
html:not(.hv-opt2):not(.hv-dash) #hero-copy > *{max-width:540px;}
html:not(.hv-opt2):not(.hv-dash) #hero-copy .hero-eyebrow{font-size:11.3px !important;margin-top:9px !important;}
html:not(.hv-opt2):not(.hv-dash) #hero-copy .hero-h1{font-size:45.4px !important;line-height:1.1 !important;margin-top:13px !important;}
html:not(.hv-opt2):not(.hv-dash) #hero-copy .hero-sub{font-size:16.7px !important;max-width:540px !important;}
html:not(.hv-opt2):not(.hv-dash) .hero-ctas{margin-top:24px !important;gap:11px !important;}
html:not(.hv-opt2):not(.hv-dash) .hero-ctas .btn-lg{font-size:15.7px !important;padding:12px 22px !important;border-radius:14px !important;}
html:not(.hv-opt2):not(.hv-dash) .hero-trust li{font-size:13px !important;}
html:not(.hv-opt2):not(.hv-dash) .hero-trust{flex-direction:row !important;flex-wrap:wrap;gap:8px 18px !important;max-width:none !important;margin-top:20px !important;}
html:not(.hv-opt2):not(.hv-dash) #hero-copy .hero-sub{margin-top:34px !important;}
html:not(.hv-opt2):not(.hv-dash) #hero-copy .glow-pill{transform:scale(.713) !important;transform-origin:left center;margin-bottom:-6px !important;}
.h2o .p2-orbit, .h2o .p2-orbit *{pointer-events:none !important;}
.h2o .po-pop{display:none !important;}
.h2o-badges{position:absolute;left:0;top:50px;transform:translateX(-50%);z-index:30;display:flex;gap:8px;white-space:nowrap;}
.h2o-badges{align-items:center;gap:8px !important;}
.h2o-badges span{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:999px;background:#fff;
border:1px solid rgba(69,59,51,.08);box-shadow:0 1px 2px rgba(30,20,10,.04),0 12px 26px -18px rgba(69,40,20,.35);
font-size:12.5px;color:var(--muted);}
.h2o-badges b{font-size:15px;font-weight:500;letter-spacing:-.01em;color:var(--ink);}
.h2o-badges i{width:6px;height:6px;border-radius:50%;background:#FF7A29;}
.h2o-badges span:last-child i{background:#EF1763;}
}
@media (min-width:1600px){
html:not(.hv-opt2):not(.hv-dash) .h2o{top:calc(max(150px, (var(--vh, 1vh) * 100 - 700px) / 2) - 30px);right:max(0px, calc((var(--vw, 1vw) * 100 - 1582px) / 2 + 40px));transform:scale(.9);}
}
/* feature cards are simply there — no fade/slide-in per card while scrolling */
.fx-card{opacity:1 !important;transform:none !important;transition:background .25s ease !important;}
/* hero cards: only the result, in a softer green */
.ho-card .hu-a{display:none !important;}
.ho-card .hu-b{opacity:1 !important;transform:none !important;transition:none !important;}
.ho-card .hu-bi{background:#6FB08C !important;box-shadow:0 0 0 3px rgba(111,176,140,.14) !important;}
.ho-card .hu-ben{background:linear-gradient(135deg,rgba(111,176,140,.10),rgba(111,176,140,.04)) !important;}
/* problem section: the scattered-apps scene arrives with the title, in one go */
.problem2-pin-inner.lit .loading-btn-wrap{opacity:1;transform:translate(-50%,-50%);}
.problem2-pin-inner.lit .oldapp-card{opacity:1;transform:translateY(0) scale(1);}
.problem2-pin-inner.lit .oldflow-svg{opacity:1;}
.problem2-pin-inner.lit .oldflow-badges{opacity:1;}
/* feature cards: their looping details only move while the card is hovered */
.fx-section .fx-card:not(.fx-live) *, .fx-section .fx-card:not(.fx-live) *::before, .fx-section .fx-card:not(.fx-live) *::after,
.bk-section:not(.fx-live) *, .bk-section:not(.fx-live) *::before, .bk-section:not(.fx-live) *::after{animation-play-state:paused !important;}
/* "100+ features": the title lands first, the visual fades in after it */
.problem2-pin-inner.past-transform .problem2-title-cards, .problem2-pin-inner.past-transform .problem2-sub-cards{transition-delay:0s !important;transition-duration:.45s !important;}
.problem2-pin-inner.past-cards .mod-card{transition-delay:.85s !important;}
.problem2-pin-inner.past-cards .mod-connectors-svg path{transition-delay:.95s !important;}
.problem2-pin-inner.past-cards .p2-strip{transition:opacity .6s ease 1s !important;}
.problem2-pin-inner.past-cards .p2-orbit{transition:opacity .9s ease .85s,transform 1.1s cubic-bezier(.2,1,.3,1) .85s !important;}
.mod-connectors-svg circle.mc-dot, .mod-connectors-svg circle.mc-glow{transition-delay:1.5s !important;}
/* AI section: a small carousel indicator, one dot per scene */
.ai-dots{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);display:flex;gap:8px;align-items:center;z-index:3;
padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);}
.ai-dots i{display:block;width:6px;height:6px;border-radius:999px;background:rgba(255,255,255,.3);transition:width .35s ease,background .35s ease;}
.ai-dots i.on{width:22px;background:linear-gradient(90deg,#FF7A29,#EF1763);}
@media (max-width:860px){ .ai-dots{display:none;} }
.ai-pin{opacity:0;visibility:hidden;transition:opacity .25s ease;}
.ai-pin.lit{opacity:1;visibility:visible;}
.ai-pin{position:absolute;top:0;left:0;width:100%;min-height:calc(var(--vh, 1vh) * 100);z-index:1;
display:flex;align-items:center;justify-content:center;padding:118px 32px 64px;}
.ai-inner{max-width:1180px;width:100%;margin:0 auto;}
.ai-body{position:relative;max-width:1240px;margin:46px auto 0;display:flex;justify-content:center;}
/* one feature at a time: the stage sits dead centre and the copy stands beside it,
alternating sides as you scroll so the text visibly crosses the card */
.ai-copy{position:absolute;top:50%;width:348px;opacity:0;visibility:hidden;
transform:translateY(-50%) translateX(var(--from,0));
transition:opacity .45s ease, transform .6s cubic-bezier(.22,1,.36,1);}
.ai-copy.on{opacity:1;visibility:visible;transform:translateY(-50%) translateX(0);}
.ai-copy.side-l{right:calc(50% + 226px);text-align:right;--from:-30px;}
.ai-copy.side-r{left:calc(50% + 226px);text-align:left;--from:30px;}
.ai-copy b{display:block;font-size:29px;font-weight:400;letter-spacing:-.005em;
line-height:1.18;color:var(--ink);}
.ai-copy i{display:block;font-style:normal;font-size:14.5px;line-height:1.6;
color:var(--muted);margin-top:12px;}
.ai-ico{width:46px;height:46px;border-radius:15px;display:flex;align-items:center;
justify-content:center;margin-bottom:16px;
background:linear-gradient(140deg,#FF7A29,#EF1763);
box-shadow:0 12px 24px -12px rgba(232,70,10,.85);}
.ai-copy.side-l .ai-ico{margin-left:auto;}
.ai-ico svg{stroke:#fff;}
.ai-stage{--tint:#EAF0F8; --glow:rgba(88,62,50,.3);
position:relative;border-radius:24px;overflow:hidden;height:372px;width:392px;max-width:100%;
box-shadow:0 30px 60px -40px rgba(88,62,50,.45);
background:linear-gradient(180deg, var(--tint) 0%, #FFFFFF 62%);
border:1px solid rgba(30,50,90,.07);}
/* every scene stays in the DOM; only the active one paints, so the shared panel
geometry lines up between states and the swap reads as a morph */
.ai-scene{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .45s ease;}
.ai-scene.on{opacity:1;visibility:visible;}
.ai-type{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;width:0;}
.ai-scene.on .ai-type{animation:aiType 1s steps(30) .15s forwards;}
@keyframes aiType{to{width:100%;}}
.ai-rise{opacity:0;transform:translateY(9px);}
.ai-scene.on .ai-rise{animation:aiRise .55s cubic-bezier(.22,1,.36,1) forwards;}
@keyframes aiRise{to{opacity:1;transform:none;}}
.ai-grow{transform:scaleX(0);transform-origin:left;}
.ai-scene.on .ai-grow{animation:aiGrow .9s cubic-bezier(.22,1,.36,1) forwards;}
@keyframes aiGrow{to{transform:scaleX(1);}}
.ai-cur{position:absolute;width:18px;height:18px;z-index:8;pointer-events:none;
filter:drop-shadow(0 4px 7px rgba(40,25,10,.45));}
.ai-cur svg{display:block;width:100%;height:100%;}
.ai-scene.on .ai-cur{animation:aiTap .6s ease .85s;}
@keyframes aiTap{0%,100%{transform:scale(1);}45%{transform:scale(.72);}}
/* the sources the AI reads from, as glass tiles scattered over the stage — same
material as the panels, just smaller and tilted */
.ai-logo{position:absolute;z-index:4;width:58px;height:58px;border-radius:19px;
display:flex;align-items:center;justify-content:center;
background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.95);
-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
box-shadow:0 1px 2px rgba(88,62,50,.06), 0 20px 34px -20px rgba(88,62,50,.75),
0 0 0 .5px rgba(88,62,50,.05);
animation:aiLogoBob 8s ease-in-out infinite;}
.ai-logo img{width:28px;height:28px;object-fit:contain;display:block;}
.ai-logo::before{content:'';position:absolute;inset:-7px;border-radius:26px;z-index:-1;
background:rgba(255,255,255,.4);border:1px solid rgba(255,255,255,.7);
-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);}
@keyframes aiLogoBob{0%,100%{transform:translateY(0) var(--tilt,rotate(0deg));}
50%{transform:translateY(-5px) var(--tilt,rotate(0deg));}}
.ai-chip{display:flex;align-items:center;gap:7px;padding:6px 9px;border-radius:9px;
background:rgba(30,50,90,.05);border:1px solid rgba(255,255,255,.8);}
.ai-arrow{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;}
@media (max-width: 860px){
.ai-section{min-height:0 !important;}
.ai-pin{position:static !important;min-height:0 !important;padding:56px 20px !important;
opacity:1 !important;visibility:visible !important;}
.ai-body{display:block;margin-top:26px;}
.ai-copy{position:static;opacity:1;visibility:visible;width:auto;text-align:left !important;
transform:none;margin-bottom:18px;}
.ai-copy.side-l .ai-ico{margin-left:0;}
.ai-stage{height:300px;width:100%;}
}
/* ---- AI FEATURES · DARK ----
The section switches to a warm near-black and everything inside it is re-skinned:
glass goes from white-on-light to light-on-dark, hairlines invert, and the brand
orange becomes emissive. Scoped entirely under .ai-section, so nothing else on the
page is touched and the component structure is unchanged. */
.ai-section .fx-title{color:#FFF6EE;}
.ai-section .fx-sub{color:rgba(255,236,222,.62);}
.ai-section .fx-eyebrow{
background:rgba(255,236,222,.07);border-color:rgba(255,190,140,.22);
color:rgba(255,236,222,.8);box-shadow:none;
-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);}
.ai-copy b{color:#FFF6EE;}
.ai-copy i{color:rgba(255,236,222,.6);}
.ai-ico{box-shadow:0 12px 28px -10px rgba(232,70,10,.95), 0 0 24px -2px rgba(255,122,41,.5);}
/* the stage: dark glass with a lit rim */
.ai-stage{
background:linear-gradient(180deg, rgba(255,255,255,.075) 0%, rgba(255,255,255,.03) 62%);
border:1px solid rgba(255,170,110,.2);
-webkit-backdrop-filter:blur(18px) saturate(130%);backdrop-filter:blur(18px) saturate(130%);
box-shadow:0 0 0 1px rgba(255,255,255,.04) inset, 0 30px 70px -30px rgba(0,0,0,.85),
0 0 70px -14px rgba(255,122,41,.32);
}
.ai-stage .fx-dots{
background-image:radial-gradient(circle, rgba(255,190,140,.16) .7px, transparent 1px);
}
.ai-stage .fx-blob{opacity:.85;filter:blur(46px);}
/* panels: translucent light on dark, hairline lit warm, shadow replaced by a glow */
/* a heavier blur AND a darker own-fill: a panel sitting over another has to obscure
it, otherwise both sets of text read through each other */
.ai-stage .fx-panel, .ai-stage .fx-sheet{
background:rgba(38,26,19,.78);
border:1px solid rgba(255,190,140,.22);
-webkit-backdrop-filter:blur(26px) saturate(150%);backdrop-filter:blur(26px) saturate(150%);
box-shadow:0 1px 0 rgba(255,255,255,.08) inset, 0 18px 34px -20px rgba(0,0,0,.9),
0 0 26px -10px rgba(255,122,41,.45);
}
/* the outer frosted rim is dropped on dark: two panels near each other each drew a
second outline and the pair read as overlapping frames */
.ai-stage .fx-panel::before, .ai-stage .fx-sheet::before{display:none;}
.ai-stage .fx-nm{color:#FFF3E9;}
.ai-stage .fx-mu{color:rgba(255,236,222,.55);}
.ai-stage .fx-lab{color:rgba(255,200,160,.5);}
.ai-stage .fx-line{background:rgba(255,222,200,.16);}
.ai-stage .fx-pill{
background:rgba(255,236,222,.08);color:rgba(255,240,230,.82);
border:1px solid rgba(255,190,140,.2);}
.ai-stage .fx-pill.brand{
background:linear-gradient(90deg,#D64200 0%,#D64200 40%,#D73959 100%);color:#fff;border-color:transparent;
box-shadow:0 0 20px -4px rgba(255,122,41,.85);}
.ai-stage .fx-btn{box-shadow:0 8px 18px -8px rgba(232,70,10,.9), 0 0 26px -4px rgba(255,122,41,.8);}
.ai-stage .fx-seg{background:rgba(255,236,222,.06);border:1px solid rgba(255,190,140,.18);}
.ai-stage .fx-seg span{color:rgba(255,236,222,.55);}
.ai-stage .fx-seg span.on{box-shadow:0 6px 16px -6px rgba(232,70,10,.95), 0 0 20px -4px rgba(255,122,41,.7);}
.ai-stage .ai-chip{
background:rgba(255,236,222,.06);border:1px solid rgba(255,190,140,.18);}
.ai-stage .fx-ph{box-shadow:0 0 22px -8px rgba(255,122,41,.7);}
/* the typed query sits in a lit trough, like the reference's search field */
.ai-stage .ai-type{color:#FFF3E9;}
/* scenes carry a few inline ink colours; on dark they all read as white */
.ai-stage [style*="var(--ink)"]{color:#FFF3E9 !important;}
.ai-trough{background:rgba(255,236,222,.07);border:1px solid rgba(255,190,140,.2);
box-shadow:0 0 22px -10px rgba(255,122,41,.7) inset;}
.ai-trough span{color:#FFF3E9;}
/* ---- ADD PROPERTIES (click tabs) ---- */
.ap-section{position:relative;z-index:1;padding:96px 0 90px;}
.ap-tabs{display:flex;gap:9px;justify-content:center;margin-top:36px;flex-wrap:wrap;}
.ap-panels{position:relative;margin-top:34px;}
.ap-panel{display:none;}
.ap-panel.on{display:grid;grid-template-columns:.82fr 1.18fr;gap:36px;align-items:center;
animation:fxFade .5s ease both;}
.ap-panel h3{font-size:30px;font-weight:400;letter-spacing:.005em;
line-height:1.14;color:var(--ink);}
.ap-panel p{font-size:15.5px;line-height:1.62;color:var(--muted);margin-top:14px;}
.ap-art{--tint:#EAF0F8; --glow:rgba(88,62,50,.3);
position:relative;border-radius:22px;overflow:hidden;height:300px;
background:linear-gradient(180deg, var(--tint) 0%, #FFFFFF 62%);
border:1px solid rgba(30,50,90,.07);}
.ap-steps{display:flex;align-items:center;gap:7px;}
.ap-num{width:19px;height:19px;border-radius:50%;display:flex;align-items:center;justify-content:center;
font-size:9px;font-weight:800;color:#8494ad;background:rgba(30,50,90,.08);}
.ap-num.on{background:linear-gradient(140deg,#D64200 0%,#D64200 40%,#D73959 100%);color:#fff;}
@media (max-width: 860px){
.ap-panel.on{grid-template-columns:1fr;gap:24px;}
.ap-panel h3{font-size:24px;}
}
/* ---- BULK ACTIONS ----
Art on the left, copy on the right. The band tells one story end to end: tick a
few listings, the action bar rises, hit Send WhatsApp and the chat slides in
already carrying the shortlist. */
.bk-section{position:relative;z-index:1;padding:90px 0;}
.bk-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:52px;align-items:center;}
.bk-section .fx-head{max-width:none;margin:0;text-align:left;}
.bk-section .fx-title{font-size:38px;}
.bk-section .fx-sub{margin-left:0;max-width:460px;}
.bk-art{--tint:#EAF0F8; --glow:rgba(88,62,50,.3);
position:relative;height:312px;border-radius:22px;overflow:hidden;
background:linear-gradient(180deg, var(--tint) 0%, #FFFFFF 62%);
border:1px solid rgba(120,70,40,.07);}
.bk-cards{position:absolute;left:0;right:0;top:18px;z-index:2;
display:flex;gap:11px;justify-content:center;}
.bk-cards .fx-mini{position:relative;flex:0 0 140px;padding:7px;
transition:box-shadow .35s ease;}
.bk-cards .fx-mini.sel{box-shadow:0 0 0 2px var(--primary), 0 14px 26px -16px rgba(232,70,10,.8);}
.bk-chk{position:absolute;left:12px;top:12px;z-index:3;width:16px;height:16px;border-radius:5px;
display:flex;align-items:center;justify-content:center;
background:rgba(255,255,255,.92);border:1px solid rgba(120,70,40,.16);
transition:background .3s ease, border-color .3s ease;}
.bk-chk svg{width:10px;height:10px;opacity:0;transition:opacity .25s ease;}
.bk-chk.on{background:linear-gradient(140deg,#FF7A29,#EF1763);border-color:transparent;
box-shadow:0 6px 12px -6px rgba(232,70,10,.9);}
.bk-chk.on svg{opacity:1;}
/* the bar is not there until something is selected — that is the whole point of it */
.bk-bar{left:18px;right:18px;bottom:16px;padding:10px 12px 11px;
opacity:0;transform:translateY(130%);
transition:opacity .35s ease, transform .5s cubic-bezier(.22,1,.36,1);}
.bk-bar.on{opacity:1;transform:none;}
.bk-head{display:flex;align-items:center;gap:10px;}
.bk-count{font-size:11.5px;font-weight:800;color:var(--ink);}
.bk-link{font-size:10.5px;font-weight:700;color:#7d8ca6;text-decoration:underline;
text-underline-offset:2px;}
.bk-acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px;}
.bk-act{font-size:10.5px;font-weight:700;color:var(--ink);padding:6px 11px;border-radius:100px;
background:#fff;border:1px solid rgba(120,70,40,.1);box-shadow:0 1px 2px rgba(88,62,50,.04);
transition:background .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease;}
.bk-act.hot{background:#25D366;color:#fff;border-color:transparent;
box-shadow:0 8px 18px -8px rgba(37,211,102,.95);}
/* the chat, sliding in over the right-hand side */
.bk-wa{position:absolute;right:14px;top:14px;bottom:14px;width:210px;z-index:7;
border-radius:22px;overflow:hidden;display:flex;flex-direction:column;
background:rgba(236,229,221,.66);
-webkit-backdrop-filter:blur(24px) saturate(165%);backdrop-filter:blur(24px) saturate(165%);
border:1px solid rgba(255,255,255,.8);
box-shadow:0 26px 50px -22px rgba(88,62,50,.6), 0 0 0 1px rgba(255,255,255,.5) inset;
opacity:0;transform:translateX(112%);
transition:opacity .35s ease, transform .6s cubic-bezier(.22,1,.36,1);}
.bk-wa.on{opacity:1;transform:none;}
.bk-wa-top{display:flex;align-items:center;gap:8px;padding:10px 11px;
background:rgba(18,140,126,.86);
-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
border-bottom:1px solid rgba(255,255,255,.22);}
.bk-wa-top img{width:22px;height:22px;border-radius:8px;display:block;flex-shrink:0;
box-shadow:0 2px 6px -2px rgba(0,0,0,.4);}
.bk-wa-top b{display:block;font-size:10.5px;font-weight:800;color:#fff;}
.bk-wa-top i{display:block;font-style:normal;font-size:8.5px;font-weight:600;
color:rgba(255,255,255,.75);margin-top:1px;}
.bk-wa-body{flex:1;padding:10px;display:flex;align-items:flex-start;justify-content:flex-end;}
.bk-wa-msg{width:100%;border-radius:16px 16px 5px 16px;padding:9px 10px 7px;
background:rgba(220,248,198,.82);
-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
border:1px solid rgba(255,255,255,.6);
box-shadow:0 6px 14px -10px rgba(88,62,50,.5);
opacity:0;transform:translateY(7px);
transition:opacity .3s ease .22s, transform .4s cubic-bezier(.22,1,.36,1) .22s;}
.bk-wa.on .bk-wa-msg{opacity:1;transform:none;}
.bk-wa-msg .hd{display:block;font-size:10px;font-weight:800;color:#12321f;margin-bottom:6px;}
.bk-wa-row{display:flex;align-items:center;gap:6px;margin-top:4px;}
.bk-wa-row i{width:18px;height:18px;border-radius:7px;flex-shrink:0;display:block;
box-shadow:0 0 0 1px rgba(255,255,255,.5);}
.bk-wa-row b{font-size:9.5px;font-weight:800;color:#12321f;}
.bk-wa-row u{font-size:9px;font-weight:600;color:#4d6b57;text-decoration:none;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bk-wa-msg .lnk{display:block;margin-top:7px;font-size:9px;font-weight:700;color:#1565C0;
text-decoration:underline;text-underline-offset:2px;}
.bk-wa-msg .tm{display:block;text-align:right;margin-top:4px;font-size:8px;font-weight:700;
color:#6b8a76;}
@media (max-width: 860px){
.bk-grid{grid-template-columns:1fr;gap:26px;}
.bk-section .fx-title{font-size:30px;}
.bk-art{height:auto;padding:16px;}
.bk-cards{position:static;flex-wrap:wrap;}
.bk-cards .fx-mini{flex:1 1 140px;}
.bk-bar{position:static;margin-top:14px;opacity:1;transform:none;}
.bk-wa{position:static;width:auto;margin-top:14px;opacity:1;transform:none;height:220px;}
#bkCur{display:none;}
}
/* ---- WEBSITE (static) ---- */
.ws-section{position:relative;z-index:1;padding:90px 0;overflow:hidden;}
.ws-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center;}
.ws-list{display:flex;flex-direction:column;gap:20px;margin-top:30px;}
.ws-item{display:flex;gap:14px;align-items:flex-start;}
.ws-ico{width:34px;height:34px;border-radius:11px;flex-shrink:0;display:flex;align-items:center;
justify-content:center;background:linear-gradient(140deg,#FF7A29,#EF1763);
box-shadow:0 10px 20px -11px rgba(232,70,10,.85);}
.ws-item b{display:block;font-size:15px;font-weight:500;color:var(--ink);letter-spacing:-.01em;}
.ws-item span{display:block;font-size:13.5px;line-height:1.5;color:var(--muted);margin-top:3px;}
/* the icon holder is itself a , so the rule above was overriding its display:flex
(.ws-item span beats .ws-ico on specificity) and dropping every glyph into the
tile's top-left corner. Re-stated here with the element in the selector. */
.ws-item .ws-ico{display:flex;align-items:center;justify-content:center;margin-top:0;}
.ws-item .ws-ico svg{display:block;}
.ws-shot{--tint:#EAF0F8; --glow:rgba(88,62,50,.3);
position:relative;border-radius:24px 0 0 24px;overflow:hidden;height:470px;
margin-right:calc(50% - calc(var(--vw, 1vw) * 50));
background:linear-gradient(180deg, var(--tint) 0%, #FFFFFF 58%);
border:1px solid rgba(30,50,90,.07);border-right:none;
box-shadow:0 40px 80px -50px rgba(88,62,50,.5);}
.ws-meter{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:11px;}
@media (max-width: 860px){
.ws-grid{grid-template-columns:1fr;gap:30px;}
.ws-shot{margin-right:0;border-radius:20px;border-right:1px solid rgba(30,50,90,.07);height:340px;}
}
/* ---- FEATURES INTRO ----
A pinned statement that fills in word by word as you scroll, then releases and lets
the cards below come up. Words are threshold-toggled, so a slow scroll can never
park one half-lit. */
/* The colour is painted ON the section, not on a fixed overlay that fades. A fade is
decoupled from geometry — it left a screen of white text on white. Here the orange
ends exactly at the section's own bottom edge, so the statement is on orange for
every pixel of its travel, and the features section (opaque) cuts it with a hard
line. background-attachment:fixed keeps the gradient viewport-locked so it still
reads as a fixed backdrop rather than a panel sliding past. */
.fxi-section{position:relative;z-index:1;min-height:calc(var(--vh, 1vh) * 200);}
/* Back to a fixed, full-viewport layer cross-faded by opacity — that is what made the
top hand-off soft, with no edge anywhere. The hard edge at the bottom is not drawn
here at all: the features section below is opaque and slides up over this layer, so
the cut happens at scroll speed. Soft in, hard out, one mechanism each. */
.fxi-wash{
position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0;
transition:opacity .38s ease;
background:
radial-gradient(1000px 680px at 12% 6%, rgba(255,176,86,.5), transparent 64%),
radial-gradient(780px 600px at 92% 94%, rgba(239,23,99,.42), transparent 66%),
linear-gradient(142deg,#FF8A34 0%, #F86A2C 30%, #F4472F 62%, #EF1763 100%);}
.fxi-wash::after{
content:'';position:absolute;inset:0;opacity:.3;mix-blend-mode:overlay;
background-image:url("data:image/svg+xml;utf8,");
background-size:180px 180px;}
/* always visible — it simply scrolls away with its section; the trailing viewport a
pinned block always carries is closed up below, so the cards follow straight after
the last word */
.fxi-pin{position:absolute;top:0;left:0;width:100%;min-height:calc(var(--vh, 1vh) * 100);z-index:1;
display:flex;align-items:center;padding:90px 0;}
.fxi-section.fxi-static{min-height:0 !important;
background:radial-gradient(1000px 680px at 12% 6%, rgba(255,176,86,.5), transparent 64%),
radial-gradient(780px 600px at 92% 94%, rgba(239,23,99,.42), transparent 66%),
linear-gradient(142deg,#FF8A34 0%, #F86A2C 30%, #F4472F 62%, #EF1763 100%);}
.fxi-section.fxi-static .fxi-pin{position:relative !important;min-height:720px;}
.fxi-section.fxi-static + .fx-section, .fxi-section.fxi-static + .problem2-section{margin-top:0 !important;}
.fxi-ints{margin-top:56px;overflow:hidden;padding:24px 0 48px;margin-bottom:-24px;
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%);
mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%);}
.fxi-track{display:flex;gap:24px;width:max-content;animation:fxiMove 40s linear infinite;}
.fxi-ints:hover .fxi-track{animation-play-state:paused;}
.fxi-tile{width:80px;height:80px;border-radius:23px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
background:#fff;border:1px solid rgba(255,255,255,.6);box-shadow:0 10px 22px -12px rgba(90,20,10,.45);}
.fxi-tile.fxi-logo{overflow:hidden;}
@keyframes fxiMove{from{transform:translateX(0);}to{transform:translateX(calc(-50% - var(--fxg,24px) / 2));}}
.fxi-cs{position:relative;overflow:visible !important;}
.fxi-cs .cs-badge{position:absolute;left:50%;bottom:-9px;transform:translateX(-50%);white-space:nowrap;font-style:normal;
font-size:10px;font-weight:600;letter-spacing:.02em;line-height:1;padding:4px 8px;border-radius:100px;color:#fff;
background:#1A120A;box-shadow:0 4px 10px -4px rgba(0,0,0,.45);}
@media (max-width:860px){ .fxi-cs .cs-badge{font-size:8px;padding:3px 6px;bottom:-8px;} }
.fxi-track-r{margin-top:18px;animation-direction:reverse !important;animation-duration:46s !important;}
@media (prefers-reduced-motion:reduce){.fxi-track{animation:none;}}
@media (max-width:860px){.fxi-ints{margin-top:32px;} .fxi-tile{width:52px;height:52px;border-radius:15px;} .fxi-track{gap:14px;--fxg:14px;} .fxi-track-r{margin-top:12px;}}
/* desktop pin: copy sits in the upper part, the icon strip sits low, 32px clear of where
the white cards slide over the orange */
@media (min-width:861px){
.fxi-section:not(.fxi-static) .fxi-pin{align-items:center;padding-top:60px;padding-bottom:calc(var(--vh, 1vh) * 12 + 32px);}
.fxi-section:not(.fxi-static) + .fx-section, .fxi-section:not(.fxi-static) + .problem2-section{margin-top:calc(var(--vh, 1vh) * -12);}
}
.fxi-title{
max-width:1060px;text-align:left;font-size:55px;font-weight:400;line-height:1.16;
letter-spacing:-.01em;color:var(--ink);}
/* four fixed lines on desktop; on phones the lines flow normally */
.fxi-title .ln{display:block;white-space:nowrap;}
@media (max-width:860px){ .fxi-title .ln{display:inline;white-space:normal;} }
.fxi-title .w{color:rgba(255,255,255,.26);transition:color .45s ease;}
.fxi-title .w.on{color:rgba(255,255,255,.95);}
.fxi-title .w.hot.on{color:#FFFFFF;font-weight:500;}
@media (max-width: 860px){
/* The wash is a fixed full-viewport layer that the pin sequence fades in and out.
Switching it to position:absolute here gave it the page as its containing block,
so inset:0 stretched the orange behind every section below. Off the viewport
there is nothing to pin, so the gradient simply belongs to the section. */
.fxi-section{min-height:0 !important;position:relative;
background:
radial-gradient(1000px 680px at 12% 6%, rgba(255,176,86,.5), transparent 64%),
radial-gradient(780px 600px at 92% 94%, rgba(239,23,99,.42), transparent 66%),
linear-gradient(142deg,#FF8A34 0%, #F86A2C 30%, #F4472F 62%, #EF1763 100%);}
.fxi-wash{display:none !important;}
.fxi-pin{position:static !important;min-height:0 !important;padding:60px 0;
opacity:1 !important;visibility:visible !important;}
.fxi-title{font-size:30px;}
.fx-section{margin-top:0 !important;}
.fxi-title .w{color:#fff !important;}
}
/* ---- FEATURE SHOWCASE ----
One continuous gradient surface per card (tint at the top melting into white), a
drifting fine dot field, glassy panels with colour-matched shadows, and a gradient
cursor that plays out a real agent task on every card. */
/* The pinned statement is vertically centred in a 100vh box, so once it releases the
lower half of that box is empty — that was the gap. It is closed with a STATIC pull,
not a per-frame margin: writing layout on every scroll tick is what made this stretch
stutter and catch. */
.fx-section{position:relative;z-index:1;padding:40px 0 24px;margin-top:calc(var(--vh, 1vh) * -32);background:#FFFFFF;}
.fx-inner{max-width:1180px;margin:0 auto;padding:0 32px;}
.fx-head{max-width:720px;margin:0 auto;text-align:center;}
/* A pill, not a letter-spaced caption: it reads as a label ON the page rather than
shouting at the heading below it. */
.fx-eyebrow{display:inline-flex;align-items:center;gap:10px;
padding:9px 18px 9px 14px;border-radius:100px;
background:#fff;border:1px solid rgba(120,70,40,.09);
box-shadow:0 1px 2px rgba(88,62,50,.05), 0 12px 24px -18px rgba(88,62,50,.6);
font-size:13px;font-weight:700;letter-spacing:0;text-transform:none;color:#75665B;}
.fx-eyebrow .sep{width:9px;height:9px;border-radius:50%;flex-shrink:0;
background:linear-gradient(140deg,#FF7A29,#EF1763);}
.fx-title{font-size:46px;font-weight:400;letter-spacing:.005em;
line-height:1.1;color:var(--ink);margin-top:16px;}
.fx-sub{font-size:16.5px;line-height:1.62;color:var(--muted);margin:18px auto 0;max-width:620px;}
.fx-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:56px;}
.fx-card{
/* one palette across every card: a blue-grey field, with the brand gradient reserved
for the pieces that carry the primary */
--tint:#EAF0F8; --glow:rgba(88,62,50,.3);
/* One flat field for the whole card, no outline. The old gradient ran to white by
56%, which put a horizon exactly where the art ends and the copy begins and split
the card in two. A single fill lets the panels read as floating ON the card, and
the copy as sitting on the same surface. */
position:relative;border-radius:24px;overflow:hidden;
background:#FAFBFE;
border:0;
opacity:0;transform:translateY(24px);
transition:opacity .6s ease, transform .7s cubic-bezier(.22,1,.36,1), background .35s ease;
}
.fx-card.in{opacity:1;transform:none;}
.fx-card:hover{background:#F5F7FC;}
/* The dot field belongs to the CARD, not to the art box. Inside .fx-art it was clipped
at that box's lower edge, and the clip — not the fill — was the line across the card.
Here it spans the whole card and fades out on the card's own bottom edge, so the copy
sits on the same textured surface as the panels. */
.fx-card::before{
content:'';position:absolute;inset:-40px;z-index:0;pointer-events:none;
background-image:radial-gradient(circle, rgba(120,70,40,.16) .7px, transparent 1px);
background-size:11px 11px;
-webkit-mask-image:linear-gradient(180deg,#000 0%, rgba(0,0,0,.45) 58%, rgba(0,0,0,.1) 100%);
mask-image:linear-gradient(180deg,#000 0%, rgba(0,0,0,.45) 58%, rgba(0,0,0,.1) 100%);
animation:fxDrift 34s linear infinite;
}
.fx-card .fx-dots{display:none;}
.fx-card.wide{grid-column:1 / -1;}
.fx-copy{position:relative;z-index:3;padding:14px 28px 26px;}
.fx-copy h3{font-size:19px;font-weight:400;letter-spacing:-.01em;color:var(--ink);}
.fx-copy p{font-size:14px;line-height:1.62;color:var(--muted);margin-top:8px;}
/* the stage the little interface pieces live on — no divider, the gradient carries through */
.fx-art{position:relative;height:248px;overflow:hidden;}
/* fine dots, drifting slowly like the hero mesh but much smaller */
.fx-dots{
position:absolute;inset:-40px;pointer-events:none;
background-image:radial-gradient(circle, rgba(120,70,40,.18) .7px, transparent 1px);
background-size:11px 11px;
-webkit-mask-image:linear-gradient(180deg,#000 0%, rgba(0,0,0,.5) 70%, rgba(0,0,0,.3) 100%);
mask-image:linear-gradient(180deg,#000 0%, rgba(0,0,0,.5) 70%, rgba(0,0,0,.3) 100%);
animation:fxDrift 34s linear infinite;
}
@keyframes fxDrift{to{background-position:132px 88px;}}
/* soft coloured light behind the panels */
/* The blobs sit inside .fx-art, which clips to keep the panels in their box — and a
42px blur meeting that clip is a razor-straight cut, which was the line across the
card. The radial mask takes each blob to zero alpha at its OWN edge, so there is
nothing left with any opacity by the time the clip happens. */
.fx-blob{position:absolute;border-radius:50%;filter:blur(42px);opacity:.5;pointer-events:none;
-webkit-mask-image:radial-gradient(closest-side, #000 42%, rgba(0,0,0,.55) 74%, transparent 100%);
mask-image:radial-gradient(closest-side, #000 42%, rgba(0,0,0,.55) 74%, transparent 100%);}
.fx-panel{
position:absolute;z-index:2;border-radius:14px;
background:rgba(255,255,255,.82);
border:1px solid rgba(255,255,255,.95);
-webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);
box-shadow:0 1px 2px rgba(88,62,50,.06), 0 18px 34px -20px var(--glow), 0 0 0 .5px rgba(88,62,50,.05);
}
/* the frosted rim that sits just outside each component */
.fx-panel::before,.fx-sheet::before{
content:'';position:absolute;inset:-7px;border-radius:21px;z-index:-1;
background:rgba(255,255,255,.4);border:1px solid rgba(255,255,255,.72);
-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);
}
.fx-ph{border-radius:9px;background:linear-gradient(150deg,#FF9A5B,#EF5C8A);transition:background .55s ease;}
.fx-line{height:6px;border-radius:100px;background:rgba(120,70,40,.1);}
.fx-lab{font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#8d9cb5;}
.fx-nm{font-size:11px;font-weight:700;color:var(--ink);}
.fx-mu{font-size:10px;font-weight:600;color:var(--muted);}
.fx-pill{display:inline-flex;align-items:center;gap:5px;font-size:9px;font-weight:700;padding:4px 9px;
border-radius:100px;white-space:nowrap;background:rgba(226,234,247,.92);color:#41597f;
border:1px solid rgba(255,255,255,.85);transition:background .4s ease, color .4s ease;}
/* the brand gradient marks whatever is currently "primary" on a card */
.fx-pill.brand{background:linear-gradient(90deg,#D64200 0%,#D64200 40%,#D73959 100%);color:#fff;border-color:transparent;}
.fx-av{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;
font-size:8.5px;font-weight:800;color:#fff;flex-shrink:0;background:linear-gradient(140deg,#FF7A29,#EF1763);}
.fx-seg{display:flex;gap:3px;background:rgba(120,70,40,.055);border-radius:9px;padding:3px;
border:1px solid rgba(255,255,255,.7);}
.fx-seg span{flex:1;text-align:center;font-size:8.5px;font-weight:700;padding:5px 6px;border-radius:7px;
color:#7d8ca6;transition:background .35s ease, color .35s ease, box-shadow .35s ease;}
.fx-seg span.on{background:linear-gradient(90deg,#D64200 0%,#D64200 40%,#D73959 100%);color:#fff;
box-shadow:0 6px 14px -7px rgba(232,70,10,.9);}
.fx-ring{width:54px;height:54px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;
justify-content:center;font-size:15px;font-weight:800;color:var(--secondary);position:relative;
background:conic-gradient(#FF7A29 0 calc(var(--v,68) * .5%), #EF1763 calc(var(--v,68) * .5%) calc(var(--v,68) * 1%), rgba(120,70,40,.1) calc(var(--v,68) * 1%) 100%);}
.fx-ring i{position:absolute;inset:6px;border-radius:50%;background:#fff;}
.fx-ring b{position:relative;z-index:1;}
.fx-page{display:none;animation:fxFade .45s ease both;}
.fx-page.on{display:block;}
@keyframes fxFade{from{opacity:0;transform:translateY(5px);}to{opacity:1;transform:none;}}
.fx-sheet{position:absolute;z-index:2;border-radius:13px;padding:11px;
background:rgba(255,255,255,.84);border:1px solid rgba(255,255,255,.95);
-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
box-shadow:0 16px 32px -18px var(--glow);
transition:transform .55s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, opacity .45s ease;}
.fx-sheet.front{z-index:4;box-shadow:0 22px 44px -18px var(--glow), 0 0 0 1px rgba(255,255,255,.9);}
/* ---- the three views ----
Cards, a stage board and a list, all built from the same mini-listing: photo,
price, location, fact icons, ref + stage. The board chip that gets dragged is a
clone of the one in the column, so the move reads as the same object. */
.fx-card[data-fx="5"] .fx-art, .fx-card[data-fx="6"] .fx-art{height:300px;}
.fx-fact{display:inline-flex;align-items:center;gap:2px;}
.fx-fact svg{width:9px;height:9px;flex-shrink:0;}
.fx-fact i{font-style:normal;font-size:8.5px;font-weight:800;color:#55606f;}
.fx-facts{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;overflow:hidden;}
.fx-facts.tiny{gap:5px;}
.fx-mini{flex:1;min-width:0;border-radius:10px;padding:6px;background:#fff;
border:1px solid rgba(120,70,40,.07);box-shadow:0 8px 16px -12px rgba(88,62,50,.7);}
.fx-mini-ph{height:40px;border-radius:7px;}
.fx-mini-pr{font-size:11.5px;font-weight:800;letter-spacing:-.01em;color:var(--ink);margin-top:6px;}
.fx-mini-sub{font-size:8.5px;font-weight:600;color:var(--muted);margin-top:1px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.fx-mini .fx-facts{margin-top:5px;}
.fx-mini-ft{display:flex;align-items:center;justify-content:space-between;gap:4px;
margin-top:6px;padding-top:5px;border-top:1px solid rgba(120,70,40,.07);}
.fx-mini-ft > span:first-child{font-size:8px;font-weight:800;color:#64748B;}
.fx-mini-ft .fx-pill{font-size:8px;padding:3px 6px;}
.fx-col{flex:1;min-width:0;border-radius:10px;padding:6px;
background:rgba(120,70,40,.05);border:1px solid rgba(255,255,255,.7);}
.fx-colh{display:flex;align-items:center;justify-content:space-between;gap:4px;height:14px;}
.fx-colh b{font-size:8px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#7d8ca6;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.fx-colh i{font-style:normal;font-size:8px;font-weight:800;color:#64748B;
background:rgba(255,255,255,.9);border-radius:100px;padding:1px 5px;}
.fx-chip{box-sizing:border-box;height:78px;border-radius:9px;padding:5px;margin-top:5px;background:#fff;
border:1px solid rgba(120,70,40,.07);box-shadow:0 7px 13px -10px rgba(88,62,50,.75);}
.fx-chip-ph{height:20px;border-radius:5px;}
.fx-chip .t{display:block;font-size:10px;font-weight:800;color:var(--ink);margin-top:3px;}
.fx-chip .s{display:block;font-size:8px;font-weight:600;color:var(--muted);margin-top:1px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.fx-chip .fx-facts{margin-top:4px;}
.fx-chip.slot{visibility:hidden;}
/* same duration and curve as the cursor, so the card stays under the pointer for the
whole travel instead of arriving after it */
.fx-chip.drag{position:absolute;left:6px;top:25px;width:115px;margin:0;z-index:6;
box-shadow:0 8px 15px -11px rgba(88,62,50,.8);
transition:transform .85s cubic-bezier(.4,0,.2,1), box-shadow .22s ease;}
.fx-chip.drag.moved{transform:translate(134px,83px);}
.fx-chip.drag.lift{transform:scale(1.05) rotate(-2.5deg);
box-shadow:0 22px 32px -14px rgba(88,62,50,.85), 0 0 0 1px rgba(232,70,10,.35);}
.fx-chip.drag.lift.moved{transform:translate(134px,83px) scale(1.05) rotate(-2.5deg);}
.fx-drop{box-sizing:border-box;height:78px;margin-top:5px;border-radius:9px;opacity:0;
border:1px dashed rgba(232,70,10,.45);background:rgba(255,122,41,.07);
transition:opacity .35s ease;}
.fx-drop.on{opacity:1;}
.fx-lrow{display:flex;align-items:center;gap:8px;padding:7px 2px;
border-top:1px solid rgba(120,70,40,.07);}
.fx-lrow:first-child{border-top:0;}
.fx-lref{width:50px;flex-shrink:0;font-size:8.5px;font-weight:800;color:var(--primary-text);}
.fx-lrow .fx-pill{font-size:8px;padding:3px 7px;}
.fx-lrow .fx-mu{font-size:8.5px;}
.fx-bars{display:flex;align-items:flex-end;gap:5px;height:52px;}
.fx-bars i{flex:1;border-radius:3px 3px 0 0;background:rgba(120,70,40,.12);display:block;
transition:height .6s cubic-bezier(.22,1,.36,1), background .4s ease;}
.fx-bars i.on{background:linear-gradient(180deg,#FF7A29,#EF1763);}
.fx-btn{display:inline-flex;align-items:center;gap:6px;font-size:9.5px;font-weight:800;color:#fff;
padding:6px 12px;border-radius:9px;background:linear-gradient(90deg,#D64200 0%,#D64200 40%,#D73959 100%);
box-shadow:0 8px 16px -8px rgba(232,70,10,.9);transition:transform .25s ease;}
.fx-btn.press{transform:scale(.93);}
/* the gradient cursor that performs each card's task */
.fx-cursor{position:absolute;width:18px;height:18px;z-index:8;pointer-events:none;left:50%;top:50%;
filter:drop-shadow(0 4px 7px rgba(40,25,10,.45));
transition:left .85s cubic-bezier(.4,0,.2,1), top .85s cubic-bezier(.4,0,.2,1),
transform .18s ease;}
.fx-cursor.grab{transform:scale(.76);}
.fx-cursor svg{display:block;width:100%;height:100%;}
.fx-cursor.tap{animation:fxTap .5s ease;}
@keyframes fxTap{0%,100%{transform:scale(1);}42%{transform:scale(.74);}}
.fx-wide{display:grid;grid-template-columns:.88fr 1.12fr;align-items:center;}
.fx-wide .fx-copy{padding:38px 12px 38px 34px;}
.fx-wide .fx-art{height:272px;}
@media (max-width: 860px){
.fx-grid{grid-template-columns:1fr;}
.fx-wide{grid-template-columns:1fr;}
.fx-wide .fx-copy{padding:24px 26px 2px;}
.fx-wide .fx-art{height:236px;}
.fx-title{font-size:30px;}
.fx-section{padding:64px 0 56px;}
}
/* ---- problem section: pinned scroll sequence ----
#problem2Section is a tall scroll-room element; #problem2PinInner is switched
between position:absolute (before/after the pin range) and position:fixed
(while inside it) by JS, driven by scroll progress — the same JS-driven
technique already proven for the page background layer above (CSS
position:sticky is unreliable in this render environment). Reveal timing is
threshold classes (past-hero / past-transform / past-cards) added to
#problem2PinInner as progress crosses each band, each with its own CSS
transition, rather than per-frame interpolation — simpler and more robust. */
.problem2-section{position:relative;z-index:1;min-height:calc(var(--vh, 1vh) * 330);}
/* the features simply follow the Eproma reveal instead of sliding up over it */
.problem2-section + .fx-section{margin-top:0 !important;padding-top:96px;}
.problem2-pin-inner{
position:absolute;top:0;left:0;width:100%;min-height:calc(var(--vh, 1vh) * 100);
display:flex;align-items:center;justify-content:center;padding:126px 32px 56px;z-index:1;
/* invisible until the section genuinely owns the viewport: its title can then never
be caught sitting over the dissolving dashboard, and it clears again on the way out */
opacity:0;visibility:hidden;transition:opacity .28s ease;
}
.problem2-pin-inner.lit{opacity:1;visibility:visible;}
.problem2-inner{position:relative;z-index:1;max-width:1240px;margin:0 auto;width:100%;display:flex;flex-direction:column;align-items:center;}
@media (min-width:861px) and (min-height:921px){ .problem2-pin-inner{padding-top:84px;} .problem2-inner{margin-top:-56px;} }
/* "100+ features": title sits higher so the orbit below it can be bigger */
@media (min-width:861px){ .problem2-pin-inner .problem2-title-stack, .problem2-pin-inner .problem2-sub-stack{transition:translate .5s cubic-bezier(.2,1,.3,1);} .problem2-pin-inner.past-cards .problem2-title-stack, .problem2-pin-inner.past-cards .problem2-sub-stack{translate:0 -44px;} }
@media (min-width:861px) and (max-height:920px){ .problem2-pin-inner.past-cards .problem2-title-stack, .problem2-pin-inner.past-cards .problem2-sub-stack{translate:0 -60px;} }
/* laptop-height screens (13-inch): titles 15% smaller and clear of the nav */
@media (min-width:861px) and (max-height:920px){
.problem2-pin-inner{padding-top:132px;}
.problem2-title, .problem2-title-cards{font-size:49px;}
.problem2-title-brand{font-size:39px;}
.problem2-sub, .problem2-sub-cards, .problem2-sub-brand{font-size:15.5px;}
}
.problem2-row{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;}
.problem2-copy{max-width:820px;position:relative;}
.problem2-title-stack{position:relative;display:grid;}
.problem2-title-stack>*{grid-area:1/1;transition:opacity .5s ease, transform .5s ease, color .4s ease;}
.problem2-title{font-size:58px;font-weight:400;letter-spacing:.005em;line-height:.98;color:var(--ink);}
.problem2-title-brand{font-size:46px;font-weight:800;letter-spacing:-.01em;line-height:1.1;color:#fff;opacity:0;transform:translateY(10px);}
/* the line only breaks once the heading no longer fits on one */
.brk-sm{display:none;}
@media (max-width: 860px){ .brk-sm{display:inline;} }
.problem2-title, .problem2-title-cards{text-wrap:balance;}
.problem2-title-cards{font-size:58px;font-weight:400;letter-spacing:.005em;line-height:.98;color:var(--ink);opacity:0;transform:translateY(10px);}
.problem2-pin-inner.past-transform .problem2-title{opacity:0;transform:translateY(-10px);}
/* the brand-only "Eproma." title is intentionally never shown — it used to be its
own resting frame that a slow scroll would dwell on. The hero title now
crossfades straight into the cards title instead. */
.problem2-pin-inner.past-transform .problem2-title-cards{opacity:1;transform:translateY(0);transition-delay:.28s;}
.problem2-sub-stack{position:relative;display:grid;margin-top:20px;}
.problem2-sub-stack>*{grid-area:1/1;transition:opacity .5s ease, transform .5s ease, color .4s ease;}
.problem2-sub{font-size:17px;color:var(--muted);max-width:520px;line-height:1.45;margin:0 auto;}
.problem2-sub-brand{font-size:17px;color:rgba(255,255,255,.85);max-width:440px;line-height:1.5;margin:0 auto;opacity:0;transform:translateY(8px);}
.problem2-sub-cards{font-size:17px;color:var(--muted);max-width:560px;line-height:1.45;margin:0 auto;opacity:0;transform:translateY(8px);}
.problem2-pin-inner.past-transform .problem2-sub{opacity:0;transform:translateY(-8px);}
.problem2-pin-inner.past-transform .problem2-sub-cards{opacity:1;transform:translateY(0);transition-delay:.34s;}
/* the button sits at one constant spot — the true center of the constellation box —
through hero, transform and cards stages, so it never has to "travel" to meet the
cards; only its own look (spinner -> completed pill) changes at each stage */
.loading-btn-wrap{
position:absolute;left:50%;top:50%;transform:translate(-50%,-42%);z-index:5;opacity:0;
transition:opacity .7s ease, transform .6s cubic-bezier(.22,1,.36,1);
}
.problem2-pin-inner.past-hero .loading-btn-wrap{opacity:1;transform:translate(-50%,-50%);}
.loading-btn{
position:relative;display:inline-flex;align-items:center;gap:14px;background:#fff;color:var(--ink);
font-size:17px;font-weight:700;padding:19px 38px;border-radius:16px;
box-shadow:0 30px 54px -22px rgba(30,20,10,.28);border:1px solid var(--line);
-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
transition:background .55s ease, box-shadow .55s ease, border-color .45s ease,
padding .55s cubic-bezier(.22,1,.36,1);
}
/* completed state: exactly the same crisp, tight glow as .btn-accent (not the big
soft halo it had before) so the two read as the same button style */
/* completed state: the button surface disappears entirely and the Eproma wordmark
stands on its own, in its own gradient — no plate, no pill, no shadow behind it */
.problem2-pin-inner.past-transform .loading-btn{
background:none;border-color:transparent;box-shadow:none;
}
.loading-btn .spin-ring{
width:22px;height:22px;border-radius:50%;border:3px solid var(--cream2);
border-top-color:var(--primary);border-right-color:var(--secondary);
animation:spin .85s linear infinite;flex-shrink:0;
transition:opacity .4s ease, transform .4s cubic-bezier(.4,0,1,1);
}
.loading-btn .check-ring{
width:22px;height:22px;border-radius:50%;flex-shrink:0;position:absolute;left:36px;top:50%;
opacity:0;transform:translateY(-50%) scale(.25) rotate(-90deg);
transition:opacity .45s ease .12s, transform .55s cubic-bezier(.34,1.56,.64,1) .12s;
background:linear-gradient(90deg,#FF7A29,#EF1763);
display:flex;align-items:center;justify-content:center;
}
/* the spinner shrinks + spins itself away right as the checkmark springs in with a
slight bouncy overshoot — reads as one shape morphing into the other, not a flat
crossfade */
.problem2-pin-inner.past-transform .loading-btn .spin-ring{opacity:0;transform:scale(0) rotate(90deg);}
.problem2-pin-inner.past-transform .loading-btn .check-ring{opacity:1;transform:translateY(-50%) scale(1) rotate(0deg);}
/* the button must hug whichever label is showing — "Completed" is much shorter
than "Loading listings…" — so only the CURRENTLY-ACTIVE label stays in normal
flow (sizing the button); the other is pulled out with position:absolute so it
stops contributing to the width, and the two swap roles on past-transform */
.btn-label{position:relative;display:inline-flex;}
/* the two labels cross-dissolve with a slight scale so the pill's text doesn't just
blink over to the wordmark: the old label shrinks away as the mark grows up into it */
.btn-label>*{white-space:nowrap;transform-origin:center;
transition:opacity .34s ease, transform .5s cubic-bezier(.22,1,.36,1), filter .34s ease;}
.btn-label-done{
opacity:0;color:#fff;font-weight:800;position:absolute;left:0;top:0;
transform:scale(.72);filter:blur(3px);
}
/* the wordmark alone — nothing behind it */
.btn-logo-plate{display:block;}
.btn-logo{display:block;width:252px;height:auto;}
.problem2-pin-inner.past-transform .loading-btn{padding:0;gap:0;}
/* the spinner leaves the flow so the mark is centred on the button, not offset by it */
.problem2-pin-inner.past-transform .loading-btn .spin-ring{position:absolute;left:16px;}
.problem2-pin-inner.past-transform .loading-btn .check-ring{opacity:0;transform:translateY(-50%) scale(.4);}
.problem2-pin-inner.past-transform .btn-label-loading{
opacity:0;position:absolute;left:0;top:0;transform:scale(.8);filter:blur(3px);
}
.problem2-pin-inner.past-transform .btn-label-done{
opacity:1;position:static;transform:scale(1);filter:blur(0);
transition-delay:.12s;
}
/* now a child of #modConstellation (not #problem2Inner) so it shares the exact
same 540px coordinate box as the button — that mismatch was why the button
looked off-center from the error-card cluster before */
.problem2-stage{position:absolute;inset:0;pointer-events:none;z-index:4;}
/* each floating card is a small, believable slice of one of the disconnected tools an
agent juggles — white UI fragments over the dark backdrop, tilted just enough to
read as scattered rather than messy */
.oldapp-card{
position:absolute;width:218px;border-radius:16px;padding:13px 14px;
display:flex;flex-direction:column;gap:10px;text-align:left;
background-color:rgba(40,31,28,.58);
background-image:
radial-gradient(circle at 10px 10px, rgba(255,255,255,.3) .9px, transparent 1.6px),
radial-gradient(circle at calc(100% - 10px) 10px, rgba(255,255,255,.3) .9px, transparent 1.6px),
radial-gradient(circle at 10px calc(100% - 10px), rgba(255,255,255,.3) .9px, transparent 1.6px),
radial-gradient(circle at calc(100% - 10px) calc(100% - 10px), rgba(255,255,255,.3) .9px, transparent 1.6px);
-webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%);
box-shadow:0 1px 0 rgba(255,255,255,.08) inset, 0 26px 54px -28px rgba(0,0,0,.85);
border:1px solid rgba(255,255,255,.13);opacity:0;
transform:translateY(42px) scale(.9);
transition:opacity .7s ease, transform .7s cubic-bezier(.22,1.4,.44,1);
pointer-events:auto;
}
.problem2-pin-inner.past-hero .oldapp-card{opacity:1;transform:translateY(0) scale(1);}
.problem2-pin-inner.past-transform .oldapp-card{
opacity:0;transition:opacity .5s ease, transform .75s cubic-bezier(.4,0,1,1);
transform:translateY(0) scale(.8) translateX(var(--push,0));
}
.oa-head{display:flex;align-items:center;gap:9px;}
.oa-icon{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 12px -5px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.1);}
.oa-name{font-size:11.5px;font-weight:700;color:rgba(255,255,255,.94);line-height:1.2;}
.oa-meta{font-size:9.5px;color:rgba(255,255,255,.44);font-weight:500;margin-top:1px;line-height:1.25;}
.oa-rows{display:flex;flex-direction:column;gap:5px;}
.oa-row{display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid rgba(255,255,255,.11);border-radius:8px;padding:5px 8px;font-size:9.5px;font-weight:700;color:rgba(255,255,255,.9);background:rgba(255,255,255,.045);}
.oa-row .m{color:rgba(255,255,255,.5);font-weight:600;}
.oa-bar{height:5px;border-radius:100px;background:rgba(255,255,255,.13);overflow:hidden;}
.oa-bar i{display:block;height:100%;border-radius:100px;background:linear-gradient(90deg,#FF7A29,#EF1763);}
.oa-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:3px;}
.oa-cell{height:12px;border-radius:3px;background:rgba(255,255,255,.08);}
.oa-cell.hi{background:rgba(255,138,26,.22);box-shadow:inset 0 0 0 1px rgba(255,138,26,.5);}
.oa-av{width:19px;height:19px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:800;color:#fff;flex-shrink:0;}
.oa-sign{height:26px;border-radius:7px;border:1px dashed rgba(255,255,255,.22);display:flex;align-items:center;padding:0 9px;font-size:9px;font-weight:600;color:rgba(255,255,255,.4);}
.oa-state{display:flex;align-items:center;gap:6px;font-size:9.5px;font-weight:700;color:rgba(255,255,255,.55);}
.oa-state .d{width:6px;height:6px;border-radius:50%;background:#C9932E;flex-shrink:0;animation:pulseDot 2.2s ease-in-out infinite;}
.oa-state.sync .d{background:#2B7FD6;}
.oa-state.attn{color:#FF9A7A;}
.oa-state.attn .d{background:#FF7A5E;}
/* the flow layer: every tool reaches toward the middle, and every line stops short of
it — the work is always in transit and never lands */
.oldflow-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;overflow:visible;opacity:0;transition:opacity .7s ease .15s;}
.problem2-pin-inner.past-hero .oldflow-svg{opacity:1;}
.problem2-pin-inner.past-transform .oldflow-svg{opacity:0;transition:opacity .3s ease;}
.of-line{fill:none;stroke:rgba(255,255,255,.26);stroke-width:1.5;stroke-dasharray:1.5 7;stroke-linecap:round;animation:ofMarch 2.1s linear infinite;}
@keyframes ofMarch{to{stroke-dashoffset:-25.5;}}
/* the connection states ride on the curves as small grey badges */
.oldflow-badges{position:absolute;inset:0;pointer-events:none;z-index:2;opacity:0;transition:opacity .7s ease .2s;}
.problem2-pin-inner.past-hero .oldflow-badges{opacity:1;}
.problem2-pin-inner.past-transform .oldflow-badges{opacity:0;transition:opacity .3s ease;}
.of-badge{
position:absolute;transform:translate(-50%,-50%);white-space:nowrap;
display:inline-flex;align-items:center;gap:6px;
background:rgba(48,39,35,.82);border:1px solid rgba(255,255,255,.14);
color:rgba(255,255,255,.84);font-size:10px;font-weight:700;letter-spacing:.035em;text-transform:uppercase;
padding:5px 10px;border-radius:100px;box-shadow:0 10px 20px -12px rgba(0,0,0,.9);
-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.of-badge .bd{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.55);flex-shrink:0;animation:pulseDot 2.2s ease-in-out infinite;}
/* ---- module constellation: the "completed" button sits at the true center, cards
flank it in two columns, and a connector line runs from each card's inner edge
to the button's center — coordinates are measured in JS (see
_layoutModConnectors) and stay valid because the card entrance uses scale only
(no translateY), so each card's own center point never moves. ---- */
.mod-constellation{position:relative;width:100%;max-width:1040px;height:540px;margin-top:6px;}
/* ---- "100+ features" orbit (Circle / Option 2 views) ------------------------------ */
.p2-orbit{display:none;}
@media (min-width:861px){
html.hv-opt2 #modConstellation .mod-connectors-svg,
html.hv-opt2 #modConstellation .mod-col{opacity:0 !important;visibility:hidden !important;}
html.hv-opt2 .p2-orbit{display:block;}
}
.p2-orbit{position:absolute;left:50%;top:var(--p2top, calc(50% + 38px));width:0;height:0;z-index:3;pointer-events:none;
opacity:0;transform:translateY(2%) scale(.86);transition:opacity .9s ease .2s,transform 1.1s cubic-bezier(.2,1,.3,1) .2s;}
.problem2-pin-inner.past-cards .p2-orbit{opacity:1;transform:translateY(0) scale(var(--p2fit, 1));}
.po-ring{position:absolute;left:50%;top:50%;border-radius:50%;transform:translate(-50%,-50%);
border:1.5px solid rgba(232,70,10,.18);box-shadow:inset 0 0 40px rgba(255,122,41,.06);}
.po-ring-o{width:700px;height:700px;}
.po-ring-i{width:456px;height:456px;border-style:dashed;border-color:rgba(232,70,10,.2);}
/* the Eproma mark at the centre: bigger than the orbit icons, same glass frame, warmer glow */
/* the wordmark button hands over to the E mark only once the orbit appears; the loading state stays */
@media (min-width:861px){ html.hv-opt2 .problem2-pin-inner.past-cards #modConstellation .loading-btn-wrap{opacity:0 !important;transition:opacity .4s ease !important;} }
.po-core{position:absolute;left:0;top:-10px;width:92px;height:92px;transform:translate(-50%,-50%);border-radius:26px;
display:flex;align-items:center;justify-content:center;
background:linear-gradient(150deg,#FF9F45 0%,#F97B1D 50%,#E8590C 100%);
box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -8px 16px -8px rgba(120,30,0,.35),
0 0 0 8px rgba(255,255,255,.35),0 0 0 9px rgba(255,255,255,.6),
0 22px 44px -16px rgba(232,70,10,.7),0 0 60px 6px rgba(255,122,41,.28);}
.po-core::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
background:linear-gradient(170deg,rgba(255,255,255,.35) 0%,rgba(255,255,255,0) 48%);}
.po-core svg{width:78%;height:78%;}
/* hover a module on the orbit: everything stops and a preview of that module opens */
.po-mod .po-in{pointer-events:auto;cursor:default;transition:box-shadow .3s ease, scale .3s ease;}
.p2-orbit:has(.po-mod:hover) .po-spin,
.p2-orbit:has(.po-mod:hover) .po-in{animation-play-state:paused;}
.po-t.po-mod:hover{z-index:20;}
/* keep the open preview above the inner ring, the E mark and the label */
.po-tilt{z-index:1;} .po-core,.po-label{z-index:2;}
.po-spin-o{z-index:1;} .po-spin-i{z-index:2;}
.p2-orbit:has(.po-mod:hover) .po-tilt{z-index:10;}
.p2-orbit:has(.po-mod:hover) .po-spin-o{z-index:10;}
.po-pop .hub-card{background:rgba(255,255,255,.96);}
.po-mod:hover .po-in{scale:1.15;}
.po-pop{left:50%;width:252px;bottom:auto;top:auto;transform:translateX(-50%) translateY(8px);text-align:left;}
.po-pop.up{bottom:calc(100% + 18px);}
.po-pop.down{top:calc(100% + 18px);}
.po-mod:hover .po-pop{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
.po-mod.po-linger .po-pop{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);pointer-events:auto;}
.po-feat.po-linger .pf-tip{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);pointer-events:auto;}
.po-t.po-linger{z-index:40 !important;}
.p2-orbit:has(.po-linger) .po-tilt, .p2-orbit:has(.po-linger) .po-spin-o{z-index:10 !important;}
.p2-orbit:has(.po-linger) .po-core, .p2-orbit:has(.po-linger) .po-label{z-index:2;}
/* dashboard view: integrations scattered around the wordmark */
.p2-cloud{display:none;}
@media (min-width:861px){ html.hv-dash .p2-cloud{display:block;} }
.p2-cloud{position:absolute;left:50%;top:50%;width:0;height:0;z-index:4;pointer-events:none;}
.pc-t{position:absolute;width:0;height:0;opacity:0;transform:scale(.5);
transition:opacity .5s ease, transform .7s cubic-bezier(.2,1.3,.4,1);}
.pc-t:nth-child(odd){transition-delay:.9s;} .pc-t:nth-child(even){transition-delay:1.05s;}
.pc-t > .po-in{position:absolute;left:0;top:0;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;}
.problem2-pin-inner.past-cards .pc-t{opacity:1;transform:scale(1);}
.pc-label{position:absolute;left:0;top:44px;transform:translateX(-50%);white-space:nowrap;font-size:14px;color:var(--muted);
opacity:0;transition:opacity .6s ease 1.2s;}
.pc-label b{font-size:16px;font-weight:600;margin-right:2px;}
.problem2-pin-inner.past-cards .pc-label{opacity:1;}
/* icons glide along the ellipse in JS at equal spacing (see "orbit glide") */
.po-tilt{transform:none !important;}
.po-ring-o{width:700px !important;height:448px !important;}
.po-ring-i{width:456px !important;height:292px !important;}
.po-spin-o,.po-spin-i,.po-spin .po-in{animation:none !important;}
.po-t{will-change:transform;}
/* website preview in the orbit: a clean, minimal agency site */
.po-pop-wide{width:236px;}
.ws-pv{padding:9px;}
.wsp-site{border-radius:8px;overflow:hidden;box-shadow:0 0 0 1px rgba(20,15,10,.08);background:#fff;}
.wsp-bar{display:flex;align-items:center;gap:3px;padding:4px 6px;background:#F5F4F2;}
.wsp-bar span{width:4px;height:4px;border-radius:50%;background:#D4CFCA;}
.wsp-bar em{margin-left:5px;font-style:normal;font-size:7.5px;color:#75665B;background:#fff;border-radius:3px;padding:1px 5px;flex:1;}
.wsp-nav{display:flex;align-items:center;gap:7px;padding:5px 8px;font-size:6.5px;color:#6E6259;}
.wsp-nav b{margin-right:auto;font-size:7.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#2A241F;}
.wsp-hero{margin:0 6px;border-radius:5px;padding:14px 10px 12px;text-align:left;color:#fff;
background:linear-gradient(90deg,rgba(25,20,16,.62),rgba(25,20,16,.1)),linear-gradient(160deg,#C9B8A3 0%,#9C8A74 45%,#6F7F86 100%);}
.wsp-hero small{display:block;font-size:6px;letter-spacing:.14em;text-transform:uppercase;opacity:.85;}
.wsp-hero strong{display:block;margin-top:3px;font-size:11px;line-height:1.15;font-weight:500;}
.wsp-hero u{display:inline-block;margin-top:7px;text-decoration:none;font-size:6.5px;font-weight:600;color:#2A241F;background:#fff;padding:3px 8px;border-radius:999px;}
.wsp-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:5px 6px 6px;}
.wsp-cards i{height:22px;border-radius:4px;background:linear-gradient(160deg,#E8E2DA,#D6CCC0);}
.wsp-foot{display:flex;align-items:center;gap:5px;margin-top:8px;font-size:9px;color:#6E6259;}
.wsp-ai{font-size:7px;font-weight:700;color:#fff;padding:1px 4px;border-radius:4px;background:linear-gradient(135deg,#D64200 0%,#D64200 40%,#D73959 100%);}
.wsp-foot b{margin-left:auto;font-size:8.5px;font-weight:600;color:#fff;padding:3px 9px;border-radius:999px;background:linear-gradient(135deg,#D64200 0%,#D64200 40%,#D73959 100%);}
/* links from feature cards and orbit previews to the module pages */
/* explore buttons are lined up at the bottom of each card by script (see "align explore buttons") */
.fx-mod{display:inline-flex;margin-top:16px;text-decoration:none;}
.fx-mod-tag{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted);}
.fx-mod-tag i{width:8px;height:8px;border-radius:3px;}
.fx-mod-go{display:inline-flex;align-items:center;gap:6px;padding:2px 0;font-size:14px;font-weight:600;color:var(--primary-text);
background-image:linear-gradient(90deg,var(--primary) 0%,var(--primary) 50%,#FF7A29 62%,#EF1763 100%);background-size:200% 100%;background-position:0 0;
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;transition:background-position .45s ease;}
.fx-mod-go svg{transition:transform .25s ease,color .3s ease;}
.fx-mod:hover .fx-mod-go{background-position:100% 0;}
.fx-mod:hover .fx-mod-go svg{transform:translateX(4px);color:#EF1763;}
.po-mod .po-in{cursor:pointer;}
.po-pop{pointer-events:none;}
.po-mod:hover .po-pop{pointer-events:auto;}
.po-pop::before{content:"";position:absolute;left:0;right:0;height:22px;}
.po-pop.up::before{bottom:-22px;} .po-pop.down::before{top:-22px;}
.po-go{align-self:flex-start;display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:999px;
font-size:11.5px;font-weight:600;color:#fff;text-decoration:none;
background:linear-gradient(135deg,#D64200 0%,#D64200 40%,#D73959 100%);box-shadow:0 8px 16px -10px rgba(239,23,99,.8);}
.po-pop a.po-go, .po-pop a.po-go:hover, .po-pop a.po-go:visited{color:#fff !important;}
.po-go:hover{filter:brightness(1.06);}
/* circle view: a row of the top integrations under the Eproma wordmark */
.p2-strip{display:none;}
@media (min-width:861px){ html:not(.hv-dash):not(.hv-opt2) .p2-strip{display:flex;} }
.p2-strip{position:absolute;left:50%;top:calc(50% + 172px);transform:translateX(-50%);z-index:4;flex-direction:column;align-items:center;gap:10px;
opacity:0;transition:opacity .2s ease 0s;pointer-events:none;}
.problem2-pin-inner.past-cards .p2-strip{opacity:1;transition:opacity .6s ease .9s;}
.pst-row{display:flex;gap:13px;padding:10px 16px;border-radius:20px;background:rgba(255,255,255,.55);
border:1px solid rgba(255,255,255,.85);box-shadow:0 14px 30px -18px rgba(120,60,20,.35);
-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);}
.pst-t > .po-in{width:42px !important;height:42px !important;border-radius:12px !important;background-size:80% !important;display:flex;align-items:center;justify-content:center;
box-shadow:0 0 0 1px rgba(20,15,10,.06),0 6px 12px -8px rgba(30,20,10,.4) !important;}
.pst-t > .po-in svg{width:19px;height:19px;}
html:not(.hv-dash):not(.hv-opt2) .page-white-layer::before{opacity:0 !important;}
.pst-label{font-size:13px;color:var(--muted);}
.pst-label b{font-size:15px;font-weight:600;margin-right:2px;}
/* orbit preview: one card holding everything, with a quiet text link */
.po-pop{padding:10px;border-radius:16px;background:#fff;
border:1px solid rgba(20,15,10,.07);box-shadow:0 1px 2px rgba(30,20,10,.05),0 22px 44px -22px rgba(69,40,20,.35);gap:6px !important;}
.po-pop .hub-card{background:rgba(20,15,10,.03) !important;border:0 !important;box-shadow:none !important;
-webkit-backdrop-filter:none !important;backdrop-filter:none !important;padding:9px 10px;border-radius:10px;}
.po-pop .ws-pv{background:none !important;padding:0 !important;}
.po-pop a.po-go, .po-pop a.po-go:hover, .po-pop a.po-go:visited{color:var(--primary-text) !important;}
.po-go{background:none !important;box-shadow:none !important;padding:4px 2px 0 !important;font-size:12px !important;font-weight:400 !important;}
.po-go:hover{filter:none !important;text-decoration:underline;text-underline-offset:3px;}
.po-label{position:absolute;left:0;top:58px;transform:translateX(-50%);white-space:nowrap;font-size:14px;color:var(--muted);letter-spacing:.01em;}
.po-label b{font-size:16px;font-weight:600;margin-right:2px;}
@media (min-width:861px){ html.hv-opt2 #modConstellation .btn-logo{width:202px;} }
.po-spin{position:absolute;left:0;top:0;width:0;height:0;}
/* the orbits are flattened into wide ellipses so they wrap the wordmark and fit the screen;
each tile scales itself back so icons stay round and upright */
.po-tilt{position:absolute;left:0;top:0;width:0;height:0;transform:scaleY(.64);}
.po-spin-o{animation:poSpin 70s linear infinite;}
.po-spin-i{animation:poSpin 50s linear infinite reverse;}
@keyframes poSpin{to{transform:rotate(360deg);}}
.po-t{position:absolute;width:0;height:0;}
.po-t > .po-in{position:absolute;left:0;top:0;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;}
/* keep every icon upright while its ring turns */
.po-spin-o .po-in{animation:poUpO 70s linear infinite;}
.po-spin-i .po-in{animation:poUpI 50s linear infinite;}
@keyframes poUpO{from{transform:translate(-50%,-50%) rotate(0deg) scaleY(1.5625);}to{transform:translate(-50%,-50%) rotate(-360deg) scaleY(1.5625);}}
@keyframes poUpI{from{transform:translate(-50%,-50%) rotate(0deg) scaleY(1.5625);}to{transform:translate(-50%,-50%) rotate(360deg) scaleY(1.5625);}}
/* glass frame: a frosted white rim, a thin bright edge and a soft glow in the tile's own colour */
.po-mod .po-in{width:54px;height:54px;border-radius:17px;
box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 0 0 6px rgba(255,255,255,.3),0 0 0 7px rgba(255,255,255,.55),0 16px 30px -14px var(--glow,rgba(30,20,10,.45));}
.po-int .po-in{border-radius:14px;background-color:#fff;
box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 0 0 5px rgba(255,255,255,.3),0 0 0 6px rgba(255,255,255,.55),0 12px 24px -12px var(--glow,rgba(30,20,10,.35));}
.po-big .po-in{width:46px;height:46px;}
.po-portal .po-in{width:51px;height:51px;border-radius:15px;}
.po-sm .po-in{width:34px;height:34px;border-radius:11px;}
.po-sm .po-in svg{width:17px !important;height:17px !important;}
.po-int .po-in svg{width:22px;height:22px;}
.mod-connectors-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;overflow:visible;}
/* paths are authored button -> card (see _layoutModConnectors), and --plen is set
inline per-path to its measured length; stroke-dasharray/dashoffset default to
that full length (fully retracted), so animating dashoffset to 0 "draws" the line
outward from the button toward each card rather than just fading it in */
.mod-connectors-svg path{
fill:none;stroke:rgba(255,154,31,.55);stroke-width:1.6;stroke-linecap:round;opacity:0;
stroke-dasharray:var(--plen,1000);stroke-dashoffset:var(--plen,1000);
transition:opacity .4s ease, stroke-dashoffset 1s cubic-bezier(.22,1,.36,1);
}
.mod-connectors-svg circle.mc-dot{fill:rgba(255,138,26,.75);opacity:0;transition:opacity .9s ease 1.25s;}
.mod-connectors-svg circle.mc-glow{fill:#FFC27A;opacity:0;filter:drop-shadow(0 0 5px rgba(255,154,31,.9));transition:opacity .5s ease 1.25s;}
.mod-connectors-svg circle.mc-glow-out{fill:#FF8A3D;filter:drop-shadow(0 0 6px rgba(239,23,99,.7));}
/* green "process completed" check — sits at the widget's top corner, well clear of the
connector's landing dot on the inner edge. It pops in with a glow burst that settles,
and once lit it stays lit for good. */
.mod-check{
position:absolute;top:-9px;right:-9px;width:22px;height:22px;border-radius:50%;
background:linear-gradient(140deg,#34C776,#179A51);
display:flex;align-items:center;justify-content:center;z-index:4;pointer-events:none;
opacity:0;transform:scale(.2);
}
/* left-column widgets carry it on their top-left corner, so on both sides the check
sits on the column's outer edge, away from the connectors */
.mod-check.at-left{right:auto;left:-9px;}
.mod-check svg{width:11px;height:11px;display:block;}
.mod-check.lit{animation:checkPop .8s cubic-bezier(.34,1.56,.64,1) both;}
@keyframes checkPop{
0%{opacity:0;transform:scale(.2);box-shadow:0 0 0 0 rgba(52,199,118,0);}
50%{opacity:1;transform:scale(1.2);box-shadow:0 0 24px 9px rgba(52,199,118,.95);}
100%{opacity:1;transform:scale(1);box-shadow:0 0 0 3px rgba(23,154,81,.14), 0 0 11px 2px rgba(52,199,118,.6);}
}
.problem2-pin-inner.past-cards .mod-connectors-svg path{opacity:1;stroke-dashoffset:0;transition-delay:.45s;}
.problem2-pin-inner.past-cards .mod-connectors-svg circle.mc-dot,
.problem2-pin-inner.past-cards .mod-connectors-svg circle.mc-glow{opacity:1;}
.mod-col{position:absolute;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:13px;width:266px;z-index:2;}
.mod-col-left{left:0;}
.mod-col-right{right:0;}
/* desktop: the module columns sit wide, out at the sides of the centred title, and are
lifted (by --colLift, set in JS) so they use the height beside the title too */
@media (min-width:861px){
.mod-constellation{max-width:1240px;height:460px;}
.problem2-stage{inset:-150px 0;}
/* the problem cards are drawn larger; they grow outward so each connector still
meets the card's inner edge */
.oldapp-card{scale:1.3;}
.oldapp-card[style*="left:"]{transform-origin:100% 50%;margin-left:12px;}
.oldapp-card[style*="right:"]{transform-origin:0 50%;margin-right:12px;}
.mod-col{transform:translateY(calc(-50% - var(--colLift, 0px)));}
}
/* same glass language as the feature showcase: translucent fill, bright hairline,
colour-matched shadow and a frosted rim sitting just outside the card */
.mod-card{
position:relative;z-index:1;border-radius:22px;padding:14px 16px;
background:rgba(255,255,255,.9);
border:1px solid rgba(30,45,75,.06);
-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
box-shadow:0 1px 2px rgba(88,62,50,.06), 0 14px 28px -20px rgba(88,62,50,.34),
0 8px 18px -14px rgba(232,70,10,.16);
display:flex;flex-direction:column;gap:9px;text-align:left;
opacity:0;transform:scale(.32);transform-origin:center;
transition:opacity .5s ease, transform .6s cubic-bezier(.22,1,.36,1);
}
.problem2-pin-inner.past-cards .mod-card{opacity:1;transform:scale(1);}
/* stagger each row's pop-in — nth-child counts within each column, so left/right
cards on the same row grow in together, top row first */
.mod-card:nth-child(1){transition-delay:.38s;}
.mod-card:nth-child(2){transition-delay:.48s;}
.mod-card:nth-child(3){transition-delay:.58s;}
.mod-card:nth-child(4){transition-delay:.68s;}
.mod-card:nth-child(5){transition-delay:.78s;}
.mod-head{display:flex;align-items:center;gap:10px;}
.mod-icon{width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 10px -4px rgba(0,0,0,.28);}
.mod-headtext{min-width:0;}
.mod-title{font-size:13px;font-weight:700;color:#453B33;line-height:1.2;}
.mod-sub{font-size:10.5px;color:#9b8a7c;font-weight:500;line-height:1.25;margin-top:1px;}
.mod-widget{margin-top:1px;}
/* real, shadcn-style mini components — one per module, matching the reference exactly */
.mod-stats{display:flex;gap:8px;}
.mod-stat{flex:1;background:rgba(255,255,255,.7);border:1px solid rgba(30,50,90,.09);border-radius:9px;padding:7px 10px;}
.mod-stat .lbl{display:block;font-size:9px;color:#9b8a7c;font-weight:600;margin-bottom:2px;}
.mod-stat .val{display:flex;align-items:center;gap:4px;font-size:13px;font-weight:800;color:#453B33;}
.mod-stat .val svg{flex-shrink:0;}
.mod-row-card{display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid rgba(30,15,10,.09);border-radius:9px;padding:7px 10px;}
.mod-contact{display:flex;align-items:center;gap:7px;min-width:0;}
.mod-contact .av{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:700;color:#fff;flex-shrink:0;}
.mod-contact .nm{font-size:10.5px;font-weight:600;color:#453B33;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mod-badge{font-size:9px;font-weight:700;padding:3px 8px;border-radius:100px;flex-shrink:0;white-space:nowrap;}
.mod-badge.pink{background:#FCE7EE;color:#C81E63;}
.mod-badge.green{background:#E3F5EA;color:#1F8A4C;}
.mod-property-nm{font-size:10.5px;font-weight:600;color:#453B33;}
.mod-switch{width:30px;height:17px;border-radius:100px;position:relative;flex-shrink:0;background:#FF9A1F;}
.mod-switch::after{content:'';position:absolute;top:2px;right:2px;width:13px;height:13px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);}
.mod-tabs{display:flex;gap:3px;background:#F5F1EC;border-radius:9px;padding:3px;}
.mod-tab{flex:1;text-align:center;font-size:9.5px;font-weight:700;padding:5px 4px;border-radius:6px;color:#8a7565;}
.mod-tab.active{background:#C9932E;color:#fff;box-shadow:0 3px 7px -2px rgba(201,147,46,.55);}
.mod-file-nm{font-size:10px;font-weight:600;color:#453B33;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mod-btn{font-size:9.5px;font-weight:700;padding:5px 10px;border-radius:7px;color:#fff;flex-shrink:0;white-space:nowrap;}
.mod-status-row{display:flex;align-items:center;gap:7px;border:1px solid rgba(30,50,90,.09);border-radius:9px;padding:7px 10px;}
.mod-status-row .dot2{width:7px;height:7px;border-radius:50%;background:#1F8A4C;flex-shrink:0;}
.mod-status-row .url{font-size:10px;font-weight:600;color:#453B33;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mod-input-row{display:flex;align-items:center;gap:6px;border:1px solid rgba(30,50,90,.1);border-radius:100px;padding:5px 6px 5px 12px;}
.mod-input-row .ph{font-size:10px;color:#9b8a7c;font-weight:500;flex:1;}
.mod-send{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:#1E4FA8;}
.mod-stat-header{display:flex;align-items:center;justify-content:space-between;}
.mod-stat-header .lbl{font-size:10px;font-weight:600;color:#453B33;}
.mod-barchart{display:flex;align-items:flex-end;gap:4px;height:30px;margin-top:6px;}
.mod-barchart i{flex:1;border-radius:3px 3px 0 0;display:block;background:#DCE8E4;}
.mod-barchart i.hi{background:#1F8A4C;}
.mod-barlabels{display:flex;gap:4px;margin-top:3px;}
.mod-barlabels span{flex:1;text-align:center;font-size:7.5px;color:#9b8a7c;font-weight:600;}
@media (max-width: 860px){
/* no snapping on phones — the pin/scroll-jack sequence is bypassed here anyway,
and snap fights momentum scrolling on touch */
html{scroll-snap-type:none !important;}
.snap-point{display:none !important;}
.nav-links{display:none !important;}
.features-grid{grid-template-columns:repeat(2,1fr) !important;}
.showcase-grid{grid-template-columns:1fr !important;}
.dash-widgets{display:none !important;}
.dash-tabs{display:none !important;} /* the dashboard they drive is hidden here */
.dash-stats-grid{grid-template-columns:repeat(2,1fr) !important;}
.usecase-grid{grid-template-columns:repeat(2,1fr) !important;}
/* mobile: skip the scroll-jacked pin/morph sequence entirely — show the
already-"completed" brand state statically, stacked, no scroll-scrub */
.problem2-section{min-height:0 !important;}
.problem2-pin-inner{position:static !important;top:auto !important;min-height:0 !important;padding:56px 20px !important;
opacity:1 !important;visibility:visible !important;}
.problem2-inner{display:block;}
.problem2-row{flex-direction:column;align-items:center;text-align:center;}
.problem2-title{display:none;}
.problem2-sub{display:none;}
.problem2-title-brand{display:none !important;}
.problem2-sub-brand{display:none !important;}
.problem2-title-cards{position:static !important;opacity:1 !important;transform:none !important;font-size:30px;}
.problem2-sub-cards{position:static !important;opacity:1 !important;transform:none !important;margin-top:10px;}
.problem2-stage{display:none !important;}
.loading-btn-wrap{position:static !important;opacity:1 !important;transform:none !important;margin:26px auto 0 !important;display:flex;justify-content:center;}
.loading-btn .spin-ring{display:none;}
.loading-btn .check-ring{opacity:1 !important;transform:scale(1) !important;position:static !important;}
.btn-label-loading{display:none;}
.btn-label-done{opacity:1 !important;position:static !important;}
.loading-btn{padding:15px 16px !important;}
.loading-btn{background:linear-gradient(90deg,#FF7A29,#EF1763) !important;border-color:transparent !important;box-shadow:0 10px 24px -8px rgba(232,70,10,.5), 0 0 26px 2px rgba(239,23,99,.22) !important;}
.mod-constellation{height:auto !important;padding-top:0 !important;}
.mod-connectors-svg{display:none !important;}
.mod-col{position:static !important;transform:none !important;width:100% !important;margin-top:18px;}
.mod-card{opacity:1 !important;transform:none !important;}
}
/* ---- footer language switcher ----
Real links (aria-current on this page's language) rather than styled divs, so it is reachable by Tab
and announced as a list. The active pill is solid white on the orange ground —
white-on-orange text at this size would not clear 4.5:1 on its own. */
.ft-lang{margin-left:auto;display:flex;align-items:center;gap:2px;
padding:2px 2px 2px 8px;border-radius:100px;
background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);}
.ft-lang > svg{flex-shrink:0;margin-right:4px;opacity:.9;}
.ft-lang a{appearance:none;-webkit-appearance:none;border:0;cursor:pointer;
font-family:inherit;padding:3px 9px;border-radius:100px;font-size:10.5px;font-weight:600;
letter-spacing:.03em;background:transparent;color:#fff;
transition:background .25s ease, color .25s ease;}
.ft-lang a:hover{background:rgba(255,255,255,.2);color:#fff;}
.ft-lang a[aria-current="true"]{background:#fff;color:var(--primary-text);
box-shadow:0 5px 11px -8px rgba(60,10,20,.55);}
/* ---- PRICING ----
One plan, so no tier row: a single card split into the price and what the price
buys, with the ways to grow it underneath as add-ons. Faking three columns when
there is one product reads as padding; this reads as confidence. */
.pr-section{position:relative;z-index:1;padding:58px 0 8px;}
.pr-toggle{display:inline-flex;align-items:center;gap:4px;margin:20px auto 0;padding:4px;
border-radius:100px;background:#FFFFFF;border:1px solid rgba(30,50,90,.08);
box-shadow:0 18px 44px -30px rgba(88,62,50,.26);}
.pr-toggle button{appearance:none;-webkit-appearance:none;border:0;cursor:pointer;
font-family:inherit;padding:9px 18px;border-radius:100px;font-size:13.5px;font-weight:500;
background:transparent;color:var(--muted);display:inline-flex;align-items:center;gap:9px;
transition:background .3s ease, color .3s ease;}
.pr-toggle button:hover{color:var(--ink);}
.pr-toggle button[aria-pressed="true"]{background:var(--ink);color:#fff;font-weight:600;}
.pr-save{padding:3px 9px;border-radius:100px;font-size:11.5px;font-weight:600;
background:rgba(46,123,110,.14);color:#2E7B6E;}
.pr-toggle button[aria-pressed="true"] .pr-save{background:rgba(255,255,255,.2);color:#fff;}
.pr-card::before{content:'';position:absolute;left:14%;right:14%;top:0;height:1px;z-index:2;
background:linear-gradient(90deg, transparent, rgba(232,70,10,.5), rgba(239,23,99,.42), transparent);}
.pr-card{position:relative;max-width:820px;margin:26px auto 0;border-radius:22px;
background:#FFFFFF;border:1px solid rgba(30,50,90,.07);overflow:hidden;
box-shadow:0 48px 110px -70px rgba(88,62,50,.32);
display:grid;grid-template-columns:1.02fr 1fr;}
.pr-banner{display:flex;align-items:center;gap:18px;max-width:820px;margin:26px auto 0;padding:22px 30px;border-radius:22px;color:#fff;
background:linear-gradient(100deg,#D64200 0%,#D64200 40%,#D73959 100%);box-shadow:0 30px 60px -38px rgba(232,70,10,.75);}
.pr-banner[hidden]{display:none;}
.pr-banner + .pr-card{margin-top:14px;}
.prb-ico{flex-shrink:0;width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;
background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);}
.prb-ico svg{width:20px;height:20px;}
.prb-txt{flex:1;display:flex;flex-direction:column;gap:3px;line-height:1.3;}
.prb-txt b{font-size:21px;font-weight:600;letter-spacing:-.01em;}
.prb-txt span{font-size:14.5px;color:rgba(255,255,255,.85);}
.prb-year{flex-shrink:0;display:flex;align-items:baseline;gap:8px;white-space:nowrap;}
.prb-year s{font-size:16px;color:rgba(255,255,255,.65);}
.prb-year b{font-size:30px;font-weight:600;letter-spacing:-.02em;}
.prb-year span{font-size:14px;color:rgba(255,255,255,.8);}
@media (max-width:640px){
.pr-banner{gap:12px;padding:16px 16px 18px;flex-wrap:wrap;border-radius:18px;margin-top:20px;}
.prb-ico{width:38px;height:38px;border-radius:12px;}
.prb-txt{flex-basis:calc(100% - 52px);}
.prb-txt b{font-size:17px;} .prb-txt span{font-size:13px;}
.prb-year{margin-left:50px;} .prb-year b{font-size:24px;}
}
.pr-left{padding:26px 28px 24px;display:flex;flex-direction:column;
justify-content:center;align-items:flex-start;}
.pr-name{display:inline-flex;align-items:center;gap:8px;padding:6px 13px;border-radius:100px;
font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--primary-text);
background:rgba(232,70,10,.07);border:1px solid rgba(232,70,10,.16);}
.pr-amt{display:flex;align-items:baseline;gap:8px;margin-top:15px;}
.pr-amt s{font-size:17px;color:#75665B;text-decoration-thickness:1.5px;
font-variant-numeric:tabular-nums;margin-left:2px;transition:opacity .25s ease;}
.pr-amt s.off{opacity:0;}
.pr-amt b{font-size:46px;font-weight:400;letter-spacing:-.045em;line-height:1;color:var(--ink);
font-variant-numeric:tabular-nums;}
.pr-amt span{font-size:16px;color:var(--muted);}
.pr-note{margin:9px 0 0;font-size:13px;line-height:1.5;color:var(--muted);min-height:39px;}
.pr-note b{font-weight:600;color:var(--ink);}
.pr-cta{display:inline-flex;align-items:center;gap:9px;margin-top:14px;padding:12px 22px;
border-radius:100px;font-size:14px;font-weight:600;color:#fff;
background:linear-gradient(94deg,#D64200 0%,#D64200 40%,#D73959 100%);
box-shadow:0 22px 48px -30px rgba(232,70,10,.5);
transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease;}
.pr-cta:hover{color:#fff;transform:translateY(-2px);box-shadow:0 26px 54px -30px rgba(232,70,10,.6);}
/* A strip, not a notice box. The old version was three lines of body copy in a
padded card, which gave a launch date the weight of a paragraph. */
.pr-trial{display:inline-flex;gap:8px;align-items:center;margin-top:16px;
padding:7px 14px 7px 11px;border-radius:100px;
background:#F7F4F1;
border:1px solid rgba(20,15,10,.06);}
.pr-trial .dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;
background:linear-gradient(140deg,#FF7A29,#EF1763);
box-shadow:0 0 0 0 rgba(232,70,10,.45);animation:prPulse 2.6s ease-out infinite;}
@keyframes prPulse{
0%{box-shadow:0 0 0 0 rgba(232,70,10,.4);}
70%{box-shadow:0 0 0 7px rgba(232,70,10,0);}
100%{box-shadow:0 0 0 0 rgba(232,70,10,0);}}
.pr-trial span{font-size:12.5px;line-height:1.35;color:var(--muted);letter-spacing:-.005em;}
.pr-trial span b{font-weight:600;color:var(--ink);}
.pr-trial span i{font-style:normal;color:var(--muted);}
.pr-right{padding:26px 28px 24px;background:#FAFBFE;
border-left:1px solid rgba(30,50,90,.06);}
.pr-inc{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
color:#75665B;}
.pr-list{margin-top:13px;display:flex;flex-direction:column;gap:10px;}
.pr-li{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;line-height:1.45;color:var(--ink);}
.pr-li svg{flex-shrink:0;margin-top:3px;}
.pr-li i{display:block;font-style:normal;font-size:12px;color:var(--muted);margin-top:1px;}
.pr-addons{max-width:440px;margin:20px auto 0;text-align:center;}
.pr-ah{display:flex;flex-direction:column;align-items:center;gap:4px;}
.pr-ah b{font-size:16px;font-weight:500;color:var(--ink);}
.pr-ah span{font-size:13px;line-height:1.5;color:var(--muted);max-width:360px;}
.pr-arow{display:flex;flex-direction:column;gap:8px;margin-top:13px;}
.pr-add{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:14px;
background:#FFFFFF;border:1px solid rgba(30,50,90,.07);text-align:left;
box-shadow:0 16px 32px -22px rgba(88,62,50,.3);}
.pr-aic{width:32px;height:32px;border-radius:10px;flex-shrink:0;display:flex;
align-items:center;justify-content:center;background:#FAFBFE;
border:1px solid rgba(20,15,10,.06);}
.pr-atx b{display:block;font-size:14.5px;font-weight:500;color:var(--ink);}
.pr-atx i{display:block;font-style:normal;font-size:12.5px;color:var(--muted);margin-top:1px;}
.pr-apr{margin-left:auto;flex-shrink:0;text-align:right;}
.pr-apr b{display:block;font-size:16px;font-weight:500;letter-spacing:-.02em;color:var(--ink);
font-variant-numeric:tabular-nums;}
.pr-apr i{display:block;font-style:normal;font-size:11.5px;color:var(--muted);}
@media (max-width: 860px){
.pr-card{grid-template-columns:1fr;}
.pr-right{border-left:0;border-top:1px solid rgba(30,50,90,.07);}
.pr-amt b{font-size:40px;}
}
/* ============================================================================
PHONE (<= 640px)
The 860px block above already bypasses the scroll-jacked pins. This layer is
about what a phone actually shows: one column, a carousel where a grid would
squash, and type that steps down rather than wrapping into towers.
============================================================================ */
@media (max-width: 860px){
.fx-inner{padding:0 16px;}
.fx-title{font-size:27px;line-height:1.15;}
.fx-sub{font-size:15px;line-height:1.55;}
.fx-eyebrow{font-size:12px;padding:7px 14px 7px 11px;}
/* ---- PROBLEM / SOLUTION ------------------------------------------------
Both states show, one under the other, each as headline → sub → a column
of cards on a connector spine. The desktop SVG draws card-to-hub curves
from measured positions, which means nothing in one column; the spine is
the same idea rebuilt for a vertical stack. The state chips already live
inside each card, so the badges come along for free. */
.problem2-pin-inner{padding:48px 16px 40px !important;}
/* The desktop morph cross-fades three titles and three subs inside one grid cell,
and the hub pill sits at the centre of the constellation. Flattened to a phone
both states have to read as two separate blocks, in reading order, which means
leaves from two different parents have to interleave. `display:contents` lifts
them all into one flex column on .problem2-inner so `order` can do that. */
.problem2-inner{display:flex;flex-direction:column;align-items:stretch;}
.problem2-row, .problem2-copy,
.problem2-title-stack, .problem2-sub-stack,
.mod-constellation{display:contents !important;}
.p2-dark{order:1;margin:-48px -16px 0;padding:60px 16px 44px;
background:
radial-gradient(1100px 620px at 50% 44%, rgba(232,70,10,.17), transparent 68%),
radial-gradient(760px 520px at 84% 78%, rgba(239,23,99,.12), transparent 70%),
linear-gradient(152deg,#241B16 0%,#191310 58%,#1D1419 100%);}
.problem2-title-cards{order:5;}
.problem2-sub-cards{order:6;}
.lb-clone{order:7;}
/* the brand-only interstitial state has no job in a static stack */
.problem2-title-brand, .problem2-sub-brand,
.mod-connectors-svg{display:none !important;}
.problem2-title, .problem2-title-cards{display:block !important;position:static !important;
grid-area:auto !important;opacity:1 !important;transform:none !important;
font-size:30px;line-height:1.14;text-align:center;}
.problem2-sub, .problem2-sub-cards{display:block !important;position:static !important;
grid-area:auto !important;opacity:1 !important;transform:none !important;
font-size:15px;line-height:1.55;margin:12px auto 0;max-width:34ch;text-align:center;}
.problem2-title-cards{margin-top:52px;}
.problem2-stage{margin-bottom:0 !important;}
/* the stage returns, static, as a single column on a spine */
.problem2-stage{display:block !important;position:static !important;
pointer-events:auto;margin-top:26px;}
.oldflow-svg, .oldflow-badges{display:none !important;}
.problem2-stage::before{content:'';position:absolute;left:50%;top:0;
height:var(--spine,0px);width:2px;margin-left:-1px;z-index:0;
background:repeating-linear-gradient(180deg,
rgba(255,255,255,.3) 0 6px, transparent 6px 13px);}
.problem2-stage{position:relative !important;}
.problem2-stage{display:grid !important;grid-template-columns:1fr 1fr;
gap:0;align-items:stretch;min-width:0;max-width:none;margin:26px -16px 0 !important;}
.oldapp-card{position:relative !important;left:auto !important;right:auto !important;
top:auto !important;width:auto !important;max-width:none;margin:0;min-width:0;
transform:none !important;opacity:1 !important;transition-delay:0s !important;
z-index:1;padding:11px 12px;}
.oldapp-card{padding:11px 13px !important;}
.oa-head b, .oa-head span, .oa-name{font-size:12.5px !important;}
.oa-meta{font-size:10.5px !important;}
.oa-state{font-size:10.5px !important;margin-top:8px !important;}
.oa-row{font-size:11px !important;}
.oa-icon{width:28px !important;height:28px !important;}
.oa-icon svg{width:14px !important;height:14px !important;}
/* the hub pill rides above each stack and names what that stack adds up to.
There is one pill in the markup serving both labels, so JS clones it for the
solution half; the original stays on the waiting label here, the clone on the
logo — the 860px block forces the finished label on both, hence the overrides. */
.loading-btn-wrap{position:static !important;margin:0 auto 18px !important;
left:auto !important;top:auto !important;transform:none !important;
display:flex;justify-content:center;}
.loading-btn{font-size:13px !important;}
.loading-btn-wrap .btn-label-loading{display:inline !important;}
.loading-btn-wrap .btn-label-done{display:none !important;}
.loading-btn-wrap .check-ring{display:none !important;}
.loading-btn-wrap .spin-ring{display:inline-flex !important;}
.loading-btn-wrap .loading-btn{padding:12px 18px !important;
background:rgba(255,255,255,.2) !important;color:#FFFFFF !important;
border-color:rgba(255,255,255,.42) !important;box-shadow:none !important;}
.lb-clone{margin:4px auto 16px !important;}
.lb-clone .btn-label-loading{display:none !important;}
.lb-clone .btn-label-done{display:inline-flex !important;}
.lb-clone .spin-ring{display:none !important;}
.lb-clone .check-ring{display:inline-flex !important;}
/* the logo fills with a pink→gold gradient, which disappears on the accent pill
the desktop uses — on a white pill it keeps its contrast */
.lb-clone .loading-btn{width:auto !important;padding:13px 20px !important;
background:#FFFFFF !important;border-color:rgba(255,255,255,.9) !important;
color:var(--ink) !important;
box-shadow:0 16px 34px -18px rgba(90,30,10,.55) !important;}
.lb-clone .loading-btn::before, .lb-clone .loading-btn::after{display:none !important;}
.lb-clone .check-ring{width:20px;height:20px;margin-right:2px;
background:linear-gradient(140deg,#FF7A29,#EF1763) !important;border-radius:50%;}
.lb-clone .btn-label, .lb-clone .btn-logo-plate{width:auto !important;
padding:0 !important;background:none !important;box-shadow:none !important;}
.lb-clone .btn-logo{height:15px !important;width:auto !important;display:block;}
/* the connected state: module cards in one column, no constellation geometry */
.mod-card{margin:0 auto 10px !important;width:100% !important;max-width:300px !important;}
/* ---- FEATURES: a carousel, not a grid -------------------------------- */
.fx-section{padding:48px 0 36px;}
.fx-grid{display:flex;align-items:flex-start;justify-content:flex-start;
grid-template-columns:none;gap:12px;margin-top:30px;
overflow-x:auto;scroll-snap-type:x mandatory;
-webkit-overflow-scrolling:touch;scrollbar-width:none;
/* bleed to the screen edges so the next card peeks past the gutter */
margin-left:-16px;margin-right:-16px;padding:4px 16px 14px;}
.fx-grid::-webkit-scrollbar{display:none;}
.fx-grid > *{flex:0 0 80%;scroll-snap-align:start;opacity:1 !important;transform:none !important;}
.fx-wide{flex:0 0 92% !important;}
.fx-card{border-radius:18px;}
.fx-copy{padding:16px 18px 20px;}
.fx-card h3{font-size:18px;}
.fx-card p{font-size:13.5px;line-height:1.5;}
.fx-card .fx-tag{font-size:11px;}
/* ---- BUILT WITH AI: title above, visual centred ----------------------- */
.ai-pin{padding:48px 16px !important;}
/* Same reason as the problem block: a fixed layer faded against scroll position
leaves the dark ground standing over the next section (property import read as
black) or drops out early. The section carries its own background here. */
.ai-section{position:relative;
background-color:#120C08;
background-image:
radial-gradient(760px 520px at 22% 26%, rgba(255,122,41,.22), transparent 66%),
radial-gradient(680px 520px at 80% 74%, rgba(239,23,99,.16), transparent 68%),
radial-gradient(900px 700px at 50% 50%, rgba(255,138,45,.09), transparent 72%),
radial-gradient(780px 560px at 50% 46%, rgba(18,12,8,.86) 0%, rgba(18,12,8,.6) 46%, rgba(18,12,8,0) 80%),
linear-gradient(to right, rgba(255,160,90,.09) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255,160,90,.09) 1px, transparent 1px);
background-size:100% 100%, 100% 100%, 100% 100%, 100% 100%, 68px 68px, 68px 68px;}
.ai-dark-layer{opacity:0 !important;}
.ai-head{text-align:center !important;max-width:none !important;margin:0 auto !important;}
.ai-section .fx-title{font-size:26px;}
.ai-section .fx-sub{font-size:14.5px;margin-left:auto;margin-right:auto;}
/* The desktop sequence pins one stage and alternates the copy left and right of it.
Flattened, the stage goes to the top and sticks while the four steps scroll under
it — the scroll handler still swaps the active scene, so the visual keeps pace
with whichever step you are reading, and the muted steps keep the section short. */
.ai-row{display:block !important;}
.ai-body{display:flex !important;flex-direction:column;}
/* ---- TABBED SECTIONS: tabs stay, panel stacks ------------------------- */
.ap-section, .bk-section, .ws-section{padding-left:0;padding-right:0;}
.ap-tabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;
margin-left:-16px;margin-right:-16px;padding:0 16px 4px;justify-content:flex-start;}
.ap-tabs::-webkit-scrollbar{display:none;}
.use-pill{flex:0 0 auto;font-size:12.5px;padding:9px 14px;}
.ap-panel.on{grid-template-columns:1fr;gap:18px;}
.ap-panel h3{font-size:20px;}
.ap-panel p{font-size:14px;}
.bk-grid{grid-template-columns:1fr;gap:18px;}
.bk-section .fx-title{font-size:24px;}
.ws-grid{grid-template-columns:1fr;gap:20px;}
.ws-section .fx-title{font-size:26px !important;}
.ws-item b{font-size:14px;}
.ws-item p{font-size:13px;}
/* ---- ANALYTICS: the rail becomes a horizontal tab strip --------------- */
.st-section{padding:48px 0;}
.st-grid{grid-template-columns:1fr;gap:16px;margin-top:26px;}
.st-rail{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:7px;
overflow:visible;margin-left:0;margin-right:0;padding:0;}
.st-rail::-webkit-scrollbar{display:none;}
.st-item{flex:0 0 auto;padding:6px 9px;border-radius:100px;
background:#fff;border:1px solid rgba(30,50,90,.09);align-items:center;gap:4px;}
.st-item .st-ico{width:15px;height:15px;}
.st-item .st-ico svg{width:13px;height:13px;}
.st-item.on{border-color:rgba(232,70,10,.35);}
/* the rail's descriptions are , and as pills there is no room for them */
.st-item p, .st-item .st-desc, .st-item i{display:none !important;}
.st-item b, .st-item strong{font-size:10.5px;white-space:nowrap;}
.st-tiles{grid-template-columns:repeat(2,1fr);}
/* ---- COMPARISON, PRICING, FAQ, HUB, CTA, FOOTER ----------------------- */
.cmp-section{padding:48px 0 36px;}
.cmp-table{font-size:10px;}
.cmp-cell.c0{font-size:10.5px;}
.pr-section{padding:44px 0 6px;}
.pr-card{margin-top:20px;}
.pr-left, .pr-right{padding:22px 20px;}
.pr-amt b{font-size:38px;}
.pr-addons{max-width:none;}
.faq-section{padding:48px 0 20px;}
.faq-q{font-size:15px;padding:15px 16px;}
.faq-item.on .faq-a{padding:0 16px 16px;}
.faq-a{font-size:13.5px;}
.hub-section{padding:56px 0 30px;}
.kq-section{padding:56px 0 36px !important;}
.kq-q{font-size:26px !important;}
.ft-inner{padding:120px 16px 0;}
/* junction sits just above the Eproma mark: the closing question stays on the
light page, the mark and its tagline on full colour. The glow that feathers
the junction is cut down to match, or it tints the question from below. */
.close-bg{top:525px;}
.close-bg::after{top:-230px;height:460px;
background:radial-gradient(85% 230px at 50% 230px,
rgba(205,80,12,.42) 0%, rgba(205,80,12,.22) 45%, rgba(205,80,12,0) 88%);}
.ft-top{grid-template-columns:1fr;gap:26px;}
.ft-mark{margin-top:36px;}
.ft-legal{flex-direction:column;align-items:flex-start;gap:12px;padding:16px 20px 22px;}
/* Product and Company sit side by side; Legal and the newsletter run full width */
.ft-top{grid-template-columns:1fr 1fr;gap:26px 18px;}
.ft-top > div:nth-child(1), .ft-news{grid-column:1 / -1;}
.ft-col a,.ft-col .ft-linkbtn{font-size:13.5px;margin-top:9px;}
.ft-lang{margin-left:0;}
.to-top{right:16px;bottom:16px;width:44px;height:44px;}
/* ---- carousel scrub bars: the track has to read on a dark ground too ---- */
.ai-section .fx-rail{background:rgba(255,236,222,.14);}
/* ---- WHY EPROMA: a real horizontal table, scrolled sideways -------------
The highlight behind the Eproma column is placed as a percentage of the grid,
which only lands while the columns actually divide the width in those ratios.
Squeezed below their min-content size they stop doing that and the highlight
drifts off the column — so the table gets explicit widths and room to scroll. */
.cmp-section{padding:40px 0 30px;}
.cmp-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
margin:26px -16px 0 !important;padding:22px 16px 26px !important;}
.cmp-wrap::-webkit-scrollbar{display:none;}
.cmp-table{width:706px;grid-template-columns:186px 136px repeat(3,128px);
font-size:11px;}
.cmp-spot{left:186px;width:136px;top:-14px;bottom:-14px;border-radius:18px;}
.cmp-cell{padding:9px 7px;}
.cmp-cell.c0{font-size:11.5px;padding-left:4px;padding-right:12px;}
.cmp-cell.head{padding-top:12px;padding-bottom:13px;font-size:12px;}
.cmp-cell.head.brand{font-size:15px;}
.cmp-cell.head .sub{font-size:10px;}
.cmp-legend{flex-wrap:wrap;justify-content:center;gap:10px 14px;font-size:11px;}
/* ---- ONE PLATFORM: the constellation, not a tile grid ------------------- */
.hub-section{padding:39px 0 21px;}
.hub-stage{display:block !important;position:relative !important;width:100% !important;
height:392px !important;margin-left:0 !important;margin-top:22px !important;}
.hub-strings{display:block !important;}
.hub-glow{display:block !important;width:300px;height:300px;}
.hub-chip{position:absolute !important;transform:translate(-50%,-50%) !important;}
.hub-tile{width:38px !important;height:38px !important;border-radius:12px !important;
box-shadow:0 8px 18px -8px rgba(30,20,10,.5), 0 0 0 4px rgba(255,255,255,.72) !important;}
.hub-tile svg{width:17px !important;height:17px !important;}
.hub-core{position:absolute !important;left:50% !important;top:50% !important;
transform:translate(-50%,-50%) !important;width:112px !important;height:112px !important;
padding:0 !important;border-radius:50% !important;gap:4px !important;
border:1px solid rgba(232,70,10,.2) !important;
box-shadow:0 1px 2px rgba(88,62,50,.06), 0 18px 38px -18px rgba(232,70,10,.6),
0 0 0 7px rgba(255,255,255,.72), 0 0 0 8px rgba(232,70,10,.1) !important;}
.hub-core svg{width:66px !important;}
/* the chips are placed as percentages of a 1280px stage; at 390 the horizontal
spread compresses while the tiles keep their size, and these two collide */
/* the desktop placement is hand-tuned for a 1280px stage and reads lopsided once
compressed, so the right-hand arc is simply the left one mirrored */
.hub-chip[title="Website"]{left:84.07% !important;top:17.65% !important;}
.hub-chip[title="Publication"]{left:74.71% !important;top:40% !important;}
.hub-chip[title="Communication"]{left:87.98% !important;top:54.48% !important;}
.hub-chip[title="Statistics"]{left:72.28% !important;top:60.26% !important;}
.hub-chip[title="Settings"]{left:82.25% !important;top:80.33% !important;}
.hub-core span{font-size:6.5px !important;}
/* ---- section rhythm: roughly 30% tighter throughout -------------------- */
#hero-copy{padding-top:92px !important;}
#dash-parallax-wrap{padding:26px 0 7px !important;}
.problem2-pin-inner{padding:34px 16px 28px !important;}
.p2-dark{margin-top:-34px;padding:42px 16px 31px;}
/* the gap above is padding, not margin, so a jump to this heading lands clear of the nav */
.problem2-title-cards{margin-top:0 !important;padding-top:44px;}
.fxi-pin{padding:42px 0 !important;}
.fx-section{padding:34px 0 25px;}
.ai-pin{padding:34px 16px !important;}
.ap-section{padding-bottom:46px;}
.bk-section, .ws-section{padding-top:34px;padding-bottom:34px;}
.st-section{padding:34px 0;}
.pr-section{padding:31px 0 4px;}
.faq-section{padding:68px 0 14px;}
.kq-section{padding:39px 0 25px !important;}
.fx-head{margin-bottom:0;}
/* ---- PROBLEM / SOLUTION as a ruled grid --------------------------------
Each widget sits in its own cell rather than its own card. The rules are
gradients, not borders: the centre line fades out at both ends, and every
horizontal rule fades from the centre toward the screen edge. */
.problem2-stage::before, .p2-mods::before{content:'';position:absolute;left:50%;
top:0;bottom:0;height:auto !important;width:1px;margin-left:0;z-index:0;
background:linear-gradient(180deg, transparent, var(--rule) 12%, var(--rule) 88%, transparent) !important;}
.problem2-stage{--rule:rgba(255,255,255,.085);}
.p2-mods{--rule:#F0F1F8;}
.problem2-stage::before, .p2-mods::before{width:1px !important;margin-left:0 !important;}
/* an odd module out takes the full row, and the centre line stops above it */
.p2-mods::before{bottom:var(--lb,0px) !important;
background:linear-gradient(180deg, transparent, var(--rule) 12%, var(--rule) 100%) !important;}
/* a small concave four-point star sits on every crossing of the centre line,
so the cells read as rounded where they meet */
.problem2-stage .oldapp-card.c-l:not(.c-last)::after,
.p2-mods .mod-card.c-l:not(.c-last)::after{content:'' !important;display:block !important;
position:absolute !important;right:-9px !important;left:auto !important;top:auto !important;
bottom:-9px !important;width:18px !important;height:18px !important;z-index:3;
border:0 !important;border-radius:0 !important;opacity:1 !important;transform:none !important;
background:var(--star) !important;
-webkit-mask:radial-gradient(circle at 0 0, transparent 8.6px, #000 9px),
radial-gradient(circle at 100% 0, transparent 8.6px, #000 9px),
radial-gradient(circle at 0 100%, transparent 8.6px, #000 9px),
radial-gradient(circle at 100% 100%, transparent 8.6px, #000 9px);
-webkit-mask-composite:source-in;
mask:radial-gradient(circle at 0 0, transparent 8.6px, #000 9px),
radial-gradient(circle at 100% 0, transparent 8.6px, #000 9px),
radial-gradient(circle at 0 100%, transparent 8.6px, #000 9px),
radial-gradient(circle at 100% 100%, transparent 8.6px, #000 9px);
mask-composite:intersect;}
.problem2-stage{--star:rgba(255,255,255,.16);}
.p2-mods{--star:#E8EAF4;}
.oldapp-card, .mod-card{overflow:visible !important;}
.p2-mods .mod-card.c-wide{grid-column:1 / -1;padding-right:16px !important;}
.mod-check{display:none !important;}
.oldapp-card, .mod-card{background:none !important;border:0 !important;
border-radius:0 !important;box-shadow:none !important;
-webkit-backdrop-filter:none !important;backdrop-filter:none !important;
padding:18px 14px 18px 16px !important;margin:0 !important;}
.oldapp-card::before, .oldapp-card::after{display:none !important;}
.oldapp-card:nth-child(even of .oldapp-card), .mod-card:nth-child(even){padding-left:14px !important;padding-right:16px !important;}
.problem2-stage .oldapp-card, .p2-mods .mod-card{
background-color:transparent !important;background-repeat:no-repeat !important;background-size:100% 1px !important;
background-position:left bottom !important;}
/* left column: rule grows toward the centre; right column: away from it */
.problem2-stage .oldapp-card.c-l, .p2-mods .mod-card.c-l{
background-image:linear-gradient(90deg, transparent, var(--rule)) !important;}
.problem2-stage .oldapp-card.c-r, .p2-mods .mod-card.c-r{
background-image:linear-gradient(90deg, var(--rule), transparent) !important;}
.problem2-stage .oldapp-card.c-last, .p2-mods .mod-card.c-last{background-image:none !important;}
.oa-head b, .oa-head span, .oa-name{font-size:12px !important;}
.oa-meta{font-size:10px !important;line-height:1.3 !important;}
.oa-row{font-size:10.5px !important;}
.oa-state{font-size:10px !important;}
.mod-title{font-size:12.5px !important;}
.mod-sub{font-size:10.5px !important;}
.mod-widget{font-size:10.5px !important;}
.mod-stats{gap:6px !important;}
.kq-section .kq-cta, .kq-section > div:has(> a){display:flex !important;flex-direction:column !important;
align-items:stretch !important;gap:10px !important;padding:0 16px;}
.kq-section a[class*="btn"]{width:100% !important;box-sizing:border-box;justify-content:center;
height:52px !important;display:inline-flex !important;align-items:center;margin:0 !important;}
/* generic scroll reveal */
.rv{opacity:0;transform:translateY(16px);
transition:opacity .55s ease, transform .65s cubic-bezier(.22,1,.36,1);}
.rv.in{opacity:1;transform:none;}
/* ---- HERO DASHBOARD: frame and bottom blend --------------------------- */
/* The frame's hairline is a white inset shadow, which is invisible on a white
page — hence "no stroke in the corners". And rather than laying a white blur
over the mock, the panel's own bottom is masked away, so there is no edge to
see: it simply stops existing into the page colour. */
.dash-crop{border-radius:12px !important;
border:1px solid rgba(20,15,10,.1);
box-shadow:0 18px 36px -26px rgba(20,15,10,.3) !important;
-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 58%,rgba(0,0,0,.55) 82%,transparent 100%);
mask-image:linear-gradient(180deg,#000 0%,#000 58%,rgba(0,0,0,.55) 82%,transparent 100%);}
.dash-shell{border-radius:11px;}
.dash-fade{display:none !important;}
/* ---- BOTH CARD STACKS arrive as they are scrolled to ------------------ */
.oldapp-card, .mod-card{opacity:0 !important;transform:translateY(26px) scale(.96) !important;
transition:opacity .55s ease, transform .7s cubic-bezier(.22,1,.36,1) !important;}
.oldapp-card.in-view, .mod-card.in-view{opacity:1 !important;transform:none !important;}
.oldapp-card.c-r, .mod-card.c-r{transition-delay:.12s !important;}
@media (prefers-reduced-motion: reduce){
.oldapp-card, .mod-card{opacity:1 !important;transform:none !important;transition:none !important;}
}
/* ---- ONE PLATFORM: the mark, then the thread down through the modules -- */
.lb-clone .loading-btn{background:none !important;border:0 !important;
box-shadow:none !important;padding:0 !important;width:auto !important;}
.lb-clone .check-ring, .lb-clone .spin-ring{display:none !important;}
.lb-clone .btn-logo{height:21px !important;}
.lb-clone{position:relative;margin:24px auto 16px !important;
opacity:1 !important;transform:none !important;transition:none !important;}
.lb-clone *{opacity:1 !important;transition:none !important;}
/* both module columns share one two-column grid, with the thread running down
its centre the way the error stack above does */
/* a flex item's min-width is auto, so without this the grid is pushed wider than
the column by the cards' own min-content width */
.p2-mods{order:8;position:relative;display:grid;grid-template-columns:1fr 1fr;
gap:0;align-items:stretch;min-width:0;max-width:none;margin:6px -16px 0;}
.p2-mods::before{content:'';position:absolute;left:50%;top:0;
height:var(--spine,0px);width:2px;margin-left:-1px;z-index:0;
background:repeating-linear-gradient(180deg,
rgba(30,50,90,.26) 0 6px, transparent 6px 13px);}
.mod-col{display:contents;}
.mod-card{position:relative;z-index:1;margin:0 !important;min-width:0;
width:auto !important;max-width:none !important;padding:12px 14px !important;
background:#FFFFFF !important;}
.mod-card *{min-width:0;}
.mod-title{font-size:13.5px !important;}
.mod-sub{font-size:11.5px !important;line-height:1.35 !important;}
.mod-icon{width:30px !important;height:30px !important;border-radius:9px !important;}
.mod-icon svg{width:15px !important;height:15px !important;}
.mod-widget{font-size:11px !important;margin-top:8px !important;}
/* ---- FEATURES INTRO: taller, and lit word by word on scroll ----------- */
.fxi-section{min-height:0 !important;}
.fxi-pin{padding:96px 0 !important;min-height:calc(var(--vh, 1vh) * 78);display:flex;align-items:center;}
.fxi-title{font-size:28px !important;line-height:1.2 !important;}
.fxi-title .w{color:rgba(255,255,255,.24) !important;
transition:color .45s ease !important;}
.fxi-title .w.on{color:rgba(255,255,255,.95) !important;}
.fxi-title .w.hot.on{color:#FFFFFF !important;}
/* ---- HERO DASHBOARD ---------------------------------------------------- */
/* The 860px block hides the mock outright. It is the hero's proof shot, so it
stays — scaled to a size the UI is still legible at and swiped sideways,
rather than squeezed to a third of its width and unreadable. The parallax
writes a transform inline, which has nothing to track without the scroll pin. */
/* the headline, its subtitle and both buttons own the first screen; the tab row
and its components begin below the fold */
#hero-copy{padding:112px 16px 0 !important;text-align:left !important;}
#hero-copy .pill{margin:0 0 18px !important;}
#hero-copy > p{margin-left:0 !important;margin-right:0 !important;max-width:none !important;}
/* module grid: three columns of hairline-ruled cells, edge to edge */
.hm-grid{display:grid !important;grid-template-columns:repeat(3,1fr);
grid-auto-rows:124px;margin-top:34px;margin-bottom:64px;position:relative;z-index:1;}
/* the rules are one masked layer rather than cell borders, so they can be at
full strength in the middle of the grid and dissolve toward every edge */
.hm-grid{--hl:#F0F1F8;}
.hm-grid::before{content:'';position:absolute;inset:0;pointer-events:none;
background:
linear-gradient(to bottom, var(--hl) 1px, transparent 1px) 0 0 / 100% 124px repeat-y,
linear-gradient(to right, var(--hl) 1px, transparent 1px) -1px 0 / 33.3334% calc(100% - 124px) repeat-x,
linear-gradient(var(--hl), var(--hl)) 33.3334% 100% / 1px 124px no-repeat;
-webkit-mask-image:radial-gradient(ellipse 66% 64% at 50% 52%, #000 34%, transparent 100%);
mask-image:radial-gradient(ellipse 66% 64% at 50% 52%, #000 34%, transparent 100%);}
.hm-cell{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
gap:9px;padding:22px 6px 12px;text-align:center;text-decoration:none;
position:relative;}
.hm-ico{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;
justify-content:center;box-shadow:0 10px 18px -12px rgba(30,20,10,.55);}
.hm-ico svg{width:20px;height:20px;}
.hm-cell b{font-size:14px;font-weight:500;color:var(--ink);letter-spacing:-.01em;}
.hm-cell i{font-style:normal;font-size:11px;line-height:1.3;color:var(--muted);
margin-top:-5px;}
.hm-cell.hm-all{grid-column:span 2;align-items:flex-start;
justify-content:center;text-align:left;padding:16px 20px;}
.hm-cell.hm-all b{font-size:15px;}
.hm-cell.hm-all span{font-size:13px;font-weight:500;color:var(--primary-text);}
#hero-copy h1{font-size:34px !important;line-height:1.12 !important;}
.hero-eyebrow{margin-top:20px;font-size:11.5px;}
#hero-copy > p{font-size:14.5px !important;line-height:1.45 !important;margin-top:18px !important;}
#dash-parallax-wrap{display:none !important;}
/* ---- hero component stacks ------------------------------------------- */
.dash-crop{display:none !important;}
/* the base rule that hides this everywhere else sits later in the sheet */
.hx-stack{display:none !important;}
.hx-g{display:none;}
.hx-g.on{display:block;animation:hxIn .5s cubic-bezier(.22,1,.36,1) both;}
@keyframes hxIn{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
.hx-card{position:relative;display:flex;align-items:center;gap:11px;
padding:14px 15px;border-radius:17px;background:#FFFFFF;
border:1px solid rgba(20,15,10,.06);
box-shadow:0 26px 50px -30px rgba(30,20,10,.45), 0 2px 6px -4px rgba(30,20,10,.18);}
.hx-card.col{flex-direction:column;align-items:stretch;gap:7px;}
/* a loose stack: each card sits slightly over the one above and off to one side */
.hx-a{width:88%;z-index:3;}
.hx-b{width:84%;margin:-14px 0 0 auto;z-index:2;}
.hx-c{width:76%;margin:-14px auto 0 10%;z-index:1;}
.hx-lab{font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
color:var(--muted);white-space:nowrap;}
.hx-big{font-size:30px;font-weight:400;letter-spacing:-.03em;color:var(--ink);
line-height:1;margin-left:auto;}
.hx-mid{font-size:21px;font-weight:400;letter-spacing:-.02em;color:var(--ink);
line-height:1;margin-left:auto;}
.hx-up{font-size:11px;font-weight:600;color:#1F8A4C;width:100%;}
.hx-card.col .hx-big, .hx-card.col .hx-mid{margin-left:0;}
.hx-av{width:30px;height:30px;border-radius:50%;flex-shrink:0;color:#fff;
font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;}
.hx-thumb{width:38px;height:38px;border-radius:11px;flex-shrink:0;}
.hx-tx{flex:1;min-width:0;}
.hx-tx b{display:block;font-size:13px;font-weight:600;color:var(--ink);
letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hx-tx i{display:block;font-style:normal;font-size:11px;color:var(--muted);
margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hx-chip{flex-shrink:0;font-size:11.5px;font-weight:600;color:var(--ink);
padding:5px 10px;border-radius:100px;background:rgba(30,50,90,.05);}
.hx-chip.pink{color:#D6116B;background:rgba(239,23,99,.09);}
.hx-chip.grad{color:#fff;background:linear-gradient(94deg,#D64200 0%,#D64200 40%,#D73959 100%);
box-shadow:0 8px 16px -8px rgba(232,70,10,.8);}
.hx-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.hx-dot.green{background:#1F8A4C;box-shadow:0 0 0 4px rgba(31,138,76,.12);}
.hx-dot.blue{background:#2B7FD6;box-shadow:0 0 0 4px rgba(43,127,214,.12);}
.hx-row{display:flex;align-items:baseline;justify-content:space-between;}
.hx-row b{font-size:13px;font-weight:600;color:var(--ink);}
.hx-row i{font-style:normal;font-size:11.5px;color:var(--muted);}
.hx-bar{display:block;height:6px;border-radius:6px;background:rgba(30,50,90,.08);
overflow:hidden;}
.hx-bar i{display:block;height:100%;border-radius:6px;
background:linear-gradient(90deg,#FF7A29,#EF1763);}
.hx-chrome{display:flex;align-items:center;gap:5px;}
.hx-chrome i{width:6px;height:6px;border-radius:50%;background:rgba(30,50,90,.16);}
.hx-chrome em{margin-left:6px;font-style:normal;font-size:11px;color:var(--muted);
background:rgba(30,50,90,.05);padding:4px 9px;border-radius:100px;}
.hx-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;}
.hx-tiles i{display:block;height:46px;border-radius:10px;}
.hx-seg{display:flex;gap:3px;padding:3px;border-radius:100px;
background:rgba(30,50,90,.05);}
.hx-seg i{flex:1;text-align:center;font-style:normal;font-size:11.5px;font-weight:600;
color:var(--muted);padding:7px 0;border-radius:100px;}
.hx-seg i.on{color:#fff;background:linear-gradient(94deg,#D64200 0%,#D64200 40%,#D73959 100%);
box-shadow:0 8px 16px -9px rgba(232,70,10,.9);}
.hx-num{flex-shrink:0;font-size:19px;font-weight:500;color:var(--primary-text);
letter-spacing:-.02em;}
.hx-num em{font-style:normal;font-size:13px;color:var(--muted);}
.hx-file{flex-shrink:0;width:34px;height:34px;border-radius:10px;display:flex;
align-items:center;justify-content:center;font-size:9px;font-weight:700;
letter-spacing:.04em;color:#D6116B;background:rgba(239,23,99,.09);}
.hx-file.doc{color:#2B7FD6;background:rgba(43,127,214,.09);}
.dash-tabs{display:flex !important;flex-wrap:wrap !important;gap:6px;
overflow:visible;margin:0 0 30px !important;padding:0 16px;
justify-content:center;}
.dash-tabs .use-pill{flex:0 0 auto;font-size:11px;padding:7px 11px;
white-space:nowrap;gap:5px;}
.dash-tabs .use-pill svg{width:12px;height:12px;}
.dash-widgets{display:block !important;transform:none !important;opacity:1 !important;
filter:none !important;}
.dash-crop{overflow:hidden !important;height:auto !important;margin:0 16px;}
.dash-shell{width:1116px;flex:0 0 auto;}
/* ---- HERO ------------------------------------------------------------- */
#hero-copy{padding:104px 16px 0 !important;}
#hero-copy h1{font-size:39px !important;line-height:1.06 !important;
letter-spacing:0 !important;}
#hero-copy > p{font-size:15.5px !important;margin-top:16px !important;}
#hero-copy .pill{margin-bottom:18px !important;font-size:12px;}
/* one column of full-width buttons, both capped at a 48px tap target */
#hero-copy div:has(> .btn-lg){flex-direction:column !important;gap:10px !important;
margin-top:24px !important;align-items:stretch !important;}
#hero-copy .btn-lg{width:100% !important;height:48px !important;padding:0 18px !important;
display:inline-flex !important;align-items:center;justify-content:center;
font-size:15px !important;box-sizing:border-box;}
/* ---- PROBLEM / SOLUTION spacing + colour ------------------------------ */
/* The wash is lit for the problem half and off by the time the solution half
is read, so only the first pair sits on dark — the second keeps its ink. */
.problem2-title{color:#FFFFFF !important;}
.problem2-sub{color:rgba(255,255,255,.9) !important;}
.loading-btn-wrap{margin:30px auto 24px !important;}
.lb-clone{margin:30px auto 24px !important;}
/* ---- FEATURES: taller cards + a visible scrub bar --------------------- */
.fx-art{min-height:220px;}
.fx-copy{padding:18px 18px 24px;min-height:150px;}
.fx-rail{position:relative;height:3px;border-radius:3px;margin:14px 16px 0;
background:rgba(120,70,40,.1);overflow:hidden;}
.fx-rail i{position:absolute;left:0;top:0;bottom:0;border-radius:3px;
background:linear-gradient(90deg,#FF7A29,#EF1763);
transform-origin:left center;transition:transform .12s linear;}
/* ---- BUILT WITH AI: one card per topic, swiped sideways --------------- */
/* Each scene is moved inside its own step by JS, so a step is a self-contained
card: visual on top, copy underneath. The shared stage is then empty. */
.ai-body > .ai-stage{display:none !important;}
/* a centred flex scroller splits its overflow across both sides, which puts the
first card off to the left where no scroll position can reach it */
.ai-body{display:flex !important;flex-direction:row !important;align-items:stretch;
justify-content:flex-start !important;
gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
-webkit-overflow-scrolling:touch;
margin:26px -16px 0 !important;padding:4px 16px 14px;
scroll-padding-left:16px;overflow-anchor:none;}
.ai-body::-webkit-scrollbar{display:none;}
.ai-copy{flex:0 0 80% !important;scroll-snap-align:start;opacity:1 !important;
position:static !important;transform:none !important;margin:0 !important;
display:flex;flex-direction:column;text-align:left !important;
border-radius:20px;overflow:hidden;padding:0 0 20px !important;
background:rgba(255,236,222,.05);border:1px solid rgba(255,190,140,.16);}
/* height comes from the zoomed scene inside, or the wrapper keeps the unscaled
370px and leaves a gap under the artwork */
/* the stage brings its own framed panel, which sat a few pixels inside the card's
outline and doubled the corner — on a card the card is the frame */
.ai-stage-m, .ai-stage-m .ai-scene{border:0 !important;background:none !important;
box-shadow:none !important;border-radius:0 !important;
-webkit-backdrop-filter:none !important;backdrop-filter:none !important;}
.ai-stage-m::before, .ai-stage-m::after{display:none !important;}
.ai-stage-m{order:-1;position:relative;height:auto;overflow:hidden;margin:0 0 14px;}
.ai-stage-m .ai-scene{position:relative !important;height:370px;opacity:1 !important;
visibility:visible !important;transform:none !important;}
.ai-ico{width:34px !important;height:34px !important;border-radius:10px !important;
margin:0 18px 10px !important;}
.ai-ico svg{width:16px;height:16px;}
.ai-copy b{font-size:16px !important;line-height:1.25;padding:0 18px;}
.ai-copy i{font-size:13px !important;line-height:1.5;display:block;
margin-top:6px;padding:0 18px;}
/* ---- PROPERTY IMPORT: three tabs, one row ----------------------------- */
.ap-tabs{overflow:visible;margin-left:0;margin-right:0;padding:0 0 4px;
justify-content:center;gap:6px;}
.ap-tabs .use-pill{flex:1 1 0;min-width:0;justify-content:center;text-align:center;
font-size:11px;padding:9px 6px;white-space:nowrap;}
/* ---- BULK ACTIONS: copy first, visual under it ------------------------ */
.bk-grid{display:flex !important;flex-direction:column;}
.bk-grid > .bk-copy, .bk-grid > div:not(.bk-art){order:1;}
.bk-art{order:2;}
/* ---- PRICING ---------------------------------------------------------- */
.pr-card{display:block !important;margin-top:20px;border-radius:18px;}
.pr-left{padding:22px 18px 20px !important;}
.pr-right{padding:20px 18px 22px !important;}
.pr-amt b{font-size:38px !important;}
.pr-amt s{font-size:15px !important;}
.pr-toggle{margin-top:16px;}
.pr-toggle button{font-size:13px;padding:9px 14px;}
.pr-cta{width:100%;justify-content:center;height:48px;}
.pr-trial{font-size:12.5px;}
.pr-addons{margin-top:16px;}
.pr-arow{gap:8px;}
.pr-add{padding:11px 14px;}
.pr-section{padding:44px 0 4px;}
}
.hx-stack{display:none;}
/* ---- SECTION INDEX (desktop) ----
Neutral mid-grey pills read on both the light and the dark sections; only the
active one takes the brand gradient. Absent over the hero. */
.toc{position:fixed;right:22px;top:50%;z-index:35;display:flex;flex-direction:column;
align-items:flex-end;gap:4px;transform:translateY(-50%) translateX(10px);
opacity:0;pointer-events:none;transition:opacity .35s ease, transform .45s cubic-bezier(.22,1,.36,1);}
.toc.show{opacity:1;pointer-events:auto;transform:translateY(-50%);}
.toc a{position:relative;display:flex;align-items:center;justify-content:flex-end;
padding:5px 2px 5px 14px;text-decoration:none;}
.toc i{display:block;width:5px;height:5px;border-radius:50%;
background:rgba(140,140,150,.5);
transition:transform .3s cubic-bezier(.22,1,.36,1), background .3s ease;}
.toc a:hover i{background:rgba(140,140,150,.95);transform:scale(1.3);}
.toc a.on i{transform:scale(1.7);background:linear-gradient(180deg,#FF7A29,#EF1763);}
.toc span{position:absolute;right:18px;top:50%;white-space:nowrap;
padding:5px 11px;border-radius:100px;font-size:12px;font-weight:500;color:var(--ink);
background:#FFFFFF;border:1px solid rgba(20,15,10,.07);
box-shadow:0 12px 26px -16px rgba(20,15,10,.45);
opacity:0;transform:translate(6px,-50%);pointer-events:none;
transition:opacity .2s ease, transform .25s ease;}
.toc a:hover span, .toc a:focus-visible span{opacity:1;transform:translate(0,-50%);}
@media (max-width: 860px){ .toc{display:none;} }
.hm-grid{display:none;}
/* ---- MOBILE NAV -------------------------------------------------------- */
.nav-burger{display:none;}
@media (max-width: 860px){
.nav-wrap{width:auto !important;max-width:none !important;margin:0 16px !important;
transition:opacity .16s ease, transform .35s cubic-bezier(.22,1,.36,1),
background .35s ease, box-shadow .35s ease;}
.nav-wrap.nav-hidden{opacity:0;pointer-events:none;}
.nav-wrap > nav{width:100%;padding:8px 10px 8px 18px !important;gap:12px !important;
justify-content:space-between;box-sizing:border-box;}
.nav-wrap .btn-dark.btn-sm{display:inline-flex;align-items:center;flex-shrink:0;
margin-left:auto;font-size:12.5px;padding:10px 15px;white-space:nowrap;}
.nav-wrap .nav-logo svg{height:16px;width:auto;}
.nav-burger{display:flex;flex-direction:column;justify-content:center;gap:5px;
width:42px;height:42px;padding:0 11px;border:0;border-radius:50%;cursor:pointer;
background:transparent;flex-shrink:0;}
.nav-burger span{display:block;height:2px;width:100%;border-radius:2px;
background:var(--ink);transform-origin:center;
transition:transform .3s cubic-bezier(.22,1,.36,1);}
.nav-wrap.on-dark .nav-burger span{background:#FFF6EE;}
.nav-burger.on span:nth-child(1){transform:translateY(3.5px) rotate(45deg);}
.nav-burger.on span:nth-child(2){transform:translateY(-3.5px) rotate(-45deg);}
/* The panel is the header, grown. It starts at the nav pill's exact box — same
inset, same height, same 100px radius — and opens out to fill the screen, so
there is no second element appearing over the first. */
.m-menu{position:fixed;top:14px;left:16px;right:16px;z-index:130;
height:58px;border-radius:100px;background:#FFFFFF;overflow:hidden;
display:flex;flex-direction:column;
box-shadow:0 10px 28px -16px rgba(20,15,10,.2), 0 0 0 1px rgba(20,15,10,.05);
transition:height .42s cubic-bezier(.22,1,.36,1),
border-radius .42s cubic-bezier(.22,1,.36,1), box-shadow .42s ease;}
.m-menu.on{height:calc(calc(var(--vh, 1vh) * 100) - 28px);border-radius:26px;
box-shadow:0 40px 80px -40px rgba(20,15,10,.3), 0 0 0 1px rgba(20,15,10,.05);}
.m-menu[hidden]{display:none;}
.m-menu-head{flex-shrink:0;display:flex;align-items:center;gap:10px;height:58px;
padding:8px 10px 8px 18px;box-sizing:border-box;}
.m-logo{display:flex;align-items:center;}
.m-logo[hidden]{display:none;}
.m-logo svg{display:block;height:17px;width:auto;}
.m-back{width:38px;height:38px;flex-shrink:0;display:flex;align-items:center;
justify-content:center;border-radius:50%;cursor:pointer;color:var(--ink);
background:rgba(20,15,10,.04);border:1px solid rgba(20,15,10,.08);}
.m-back[hidden]{display:none;}
.m-title{flex:1;font-size:17px;font-weight:500;color:var(--ink);letter-spacing:-.01em;}
.m-title[hidden]{display:none;}
.m-close{margin-left:auto;}
.m-panes{flex:1;min-height:0;overflow-y:auto;padding:10px 18px 28px;
opacity:0;transition:opacity .2s ease .14s;}
.m-menu.on .m-panes{opacity:1;}
.m-pane[hidden]{display:none;}
.m-row{display:flex;align-items:center;gap:13px;width:100%;
padding:16px 2px;border:0;background:none;cursor:pointer;text-align:left;
color:var(--ink);font-size:21px;font-weight:400;font-family:inherit;
letter-spacing:-.01em;text-decoration:none;}
.m-row-more{justify-content:space-between;}
.m-row-more svg{color:var(--muted);width:19px;height:19px;}
.m-row-ico{width:36px;height:36px;flex-shrink:0;border-radius:11px;
display:flex;align-items:center;justify-content:center;}
.m-row-ico svg{width:19px;height:19px;}
.m-row-sub{align-items:flex-start;padding:12px 2px;}
.m-row-tx b{display:block;font-size:17px;font-weight:500;}
.m-row-tx i{display:block;font-style:normal;font-size:13px;line-height:1.45;
color:var(--muted);margin-top:3px;}
.m-menu-cta{display:flex;align-items:center;justify-content:center;height:50px;
margin-top:24px;border-radius:100px;text-decoration:none;font-size:16px;
color:#FFFFFF;background:linear-gradient(94deg,#D64200 0%,#D64200 40%,#D73959 100%);
box-shadow:0 14px 30px -14px rgba(232,70,10,.6);}
}
/* ---- mobile menu: full page ---- */
@media (max-width: 860px){
.m-menu{transition:height .42s cubic-bezier(.22,1,.36,1), top .42s cubic-bezier(.22,1,.36,1),
left .42s cubic-bezier(.22,1,.36,1), right .42s cubic-bezier(.22,1,.36,1),
border-radius .42s cubic-bezier(.22,1,.36,1), box-shadow .42s ease !important;}
.m-menu.on{top:0 !important;left:0 !important;right:0 !important;height:calc(var(--vh, 1vh) * 100) !important;
height:100dvh !important;border-radius:0 !important;box-shadow:none !important;}
/* the head keeps the nav bar's own inset so the logo and the X do not move */
.m-menu.on .m-menu-head{margin:14px 16px 0;}
.m-panes{display:flex;flex-direction:column;padding:34px 34px 30px !important;}
.m-pane{display:flex;flex-direction:column;flex:1;}
.m-pane[hidden]{display:none !important;}
.m-row{font-size:34px !important;line-height:1.15 !important;padding:9px 0 !important;
color:#1E1612 !important;letter-spacing:-.02em !important;}
.m-row-more svg{width:24px !important;height:24px !important;color:#1E1612 !important;}
.m-row-sub{padding:11px 0 !important;}
.m-row-tx b{font-size:19px !important;color:#1E1612;}
.m-row-tx i{font-size:13.5px !important;}
.m-title{font-size:19px !important;color:#1E1612 !important;}
.m-menu-cta{margin-top:auto !important;height:54px !important;font-size:17px !important;}
}
@media (max-width: 860px){
.kq-section > div:has(> a), .kq-section div:has(> a.btn-lg){display:flex !important;flex-direction:column !important;
align-items:stretch !important;gap:10px !important;}
.kq-section a.btn-lg{width:100% !important;box-sizing:border-box;justify-content:center;
height:52px !important;display:inline-flex !important;align-items:center;margin:0 !important;}
}
/* ---- TABLET (641–860px) ----
The tablet uses the phone layout, scaled up as a whole (the script sets `zoom` and
these two variables). --tp is the extra inset, in layout pixels, that turns the
phone's 16px gutter into a 48px one on screen; anything with its own full-width
background is pulled back out by the same amount so colour still reaches the edges. */
:root{--tp:0px;--z:1;}
@media (min-width: 641px) and (max-width: 860px){
/* the inset goes on the page's own root, not on body: the root clips its overflow,
and only padding inside that box leaves room for the full-bleed sections */
.page-root, .mp{padding-left:var(--tp) !important;padding-right:var(--tp) !important;box-sizing:border-box;}
.fxi-section, .ai-section, .close-section, .fx-section, .mp-foot, .mp-band, .ws-band{
margin-left:calc(var(--tp) * -1) !important;margin-right:calc(var(--tp) * -1) !important;
padding-left:var(--tp) !important;padding-right:var(--tp) !important;}
.p2-dark{margin-left:calc((16px + var(--tp)) * -1) !important;margin-right:calc((16px + var(--tp)) * -1) !important;
padding-left:calc(16px + var(--tp)) !important;padding-right:calc(16px + var(--tp)) !important;}
.nav-wrap{margin-left:calc(16px + var(--tp)) !important;margin-right:calc(16px + var(--tp)) !important;}
.m-menu.on{height:calc(var(--vh, 1vh) * 100) !important;}
}
/* ---- language dropdown (header) ---- */
.lang-dd{position:relative;flex-shrink:0;}
.lang-btn{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 10px 0 11px;border-radius:999px;cursor:pointer;
font:inherit;font-size:13.5px;font-weight:600;color:var(--ink);background:transparent;border:1px solid rgba(69,59,51,.12);transition:border-color .15s ease, background .15s ease;}
.lang-btn:hover,.lang-dd.open .lang-btn{border-color:rgba(232,70,10,.4);background:rgba(232,70,10,.04);}
.lang-btn svg{color:var(--muted);} .lang-dd.open .lang-chev{transform:rotate(180deg);}
.lang-chev{transition:transform .2s ease;}
.lang-menu{position:absolute;right:0;top:calc(100% + 10px);min-width:184px;margin:0;padding:6px;list-style:none;z-index:60;
background:#fff;border-radius:16px;border:1px solid rgba(69,59,51,.08);
box-shadow:0 1px 2px rgba(88,62,50,.05),0 24px 48px -20px rgba(40,30,20,.35);
opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s ease, transform .18s ease, visibility .18s;}
.lang-dd.open .lang-menu{opacity:1;visibility:visible;transform:translateY(0);}
.lang-menu a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;font-size:14px;color:var(--ink);cursor:pointer;}
.lang-menu a:hover,.lang-menu a:focus-visible{background:rgba(232,70,10,.06);}
.lang-code{display:inline-flex;align-items:center;justify-content:center;width:28px;height:22px;border-radius:7px;font-size:11px;font-weight:700;
color:var(--muted);background:rgba(69,59,51,.06);}
.lang-menu a[aria-current="true"]{font-weight:600;}
.lang-menu a[aria-current="true"] .lang-code{color:#fff;background:linear-gradient(90deg,#D64200 0%,#D64200 40%,#D73959 100%);}
.lang-ok{margin-left:auto;color:var(--primary-text);opacity:0;}
.lang-menu a[aria-current="true"] .lang-ok{opacity:1;}
.lang-dd.lang-float{position:fixed;top:22px;right:28px;z-index:45;}
.lang-float .lang-btn{height:40px;padding:0 12px 0 13px;background:rgba(255,255,255,.88);border-color:rgba(69,59,51,.08);
-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 1px 2px rgba(88,62,50,.05),0 10px 24px -14px rgba(40,30,20,.35);}
.lang-float .lang-btn:hover,.lang-float.open .lang-btn{background:#fff;}
.m-lang{display:none;}
@media (max-width:860px){
.lang-dd{display:none;}
.m-lang{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;}
.m-lang a{font:inherit;font-size:14px;font-weight:500;color:var(--ink);height:38px;padding:0 14px;border-radius:999px;cursor:pointer;
background:#fff;border:1px solid rgba(69,59,51,.14);}
.m-lang a[aria-current="true"]{color:#fff;border-color:transparent;background:linear-gradient(90deg,#D64200 0%,#D64200 40%,#D73959 100%);}
}
.ft-mail{display:inline-flex !important;align-items:center;gap:9px;margin-top:12px !important;font-size:15px !important;font-weight:600;color:#fff !important;}
.ft-mail:hover{text-decoration:underline;}
/* compact header (desktop) */
@media (min-width:861px){
.nav-wrap > nav:first-child{padding:5px 5px 5px 20px !important;}
.nav-wrap .btn-dark.btn-sm{padding:7px 14px;font-size:12.5px;}
}
/* ---- cookie banner: equal-weight Accept / Reject, a Customise panel, nothing pre-ticked ---- */
.ck{position:fixed;left:50%;bottom:20px;z-index:90;width:min(720px, calc(100% - 32px));transform:translate(-50%,16px);
opacity:0;pointer-events:none;transition:opacity .35s ease, transform .45s cubic-bezier(.22,1,.36,1);
background:#FFFFFF;border:1px solid rgba(20,15,10,.08);border-radius:20px;padding:18px 20px;
box-shadow:0 2px 6px -2px rgba(30,20,10,.08),0 28px 56px -28px rgba(69,40,20,.45);
font-family:'Jost',system-ui,sans-serif;color:var(--ink,#453B33);box-sizing:border-box;}
.ck.on{opacity:1;pointer-events:auto;transform:translate(-50%,0);}
.ck-row{display:flex;align-items:center;gap:18px;}
.ck-ico{flex:0 0 38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;
background:linear-gradient(140deg,#FF7A29,#EF1763);box-shadow:0 8px 16px -10px rgba(239,23,99,.8);}
.ck-tx{flex:1;min-width:0;}
.ck-tx b{display:block;font-size:14.5px;font-weight:600;color:var(--ink,#453B33);}
.ck-tx p{margin:3px 0 0;font-size:13px;line-height:1.5;color:var(--muted,#75665B);}
.ck-tx a{color:var(--primary,#E8460A);text-decoration:underline;text-underline-offset:2px;}
.ck-btns{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.ck-b{font:inherit;font-size:13px;font-weight:500;line-height:1;padding:9px 15px;border-radius:999px;cursor:pointer;white-space:nowrap;
border:1px solid rgba(20,15,10,.14);background:#fff;color:var(--ink,#453B33);transition:border-color .2s ease, background .2s ease, transform .2s ease;}
.ck-b:hover{border-color:rgba(232,70,10,.45);}
.ck-b:focus-visible{outline:2px solid #E8460A;outline-offset:2px;}
.ck-b.pri{border-color:transparent;color:#fff;background:linear-gradient(94deg,#D64200 0%,#D64200 40%,#D73959 100%);box-shadow:0 8px 16px -10px rgba(232,70,10,.9);}
.ck-b.pri:hover{transform:translateY(-1px);}
.ck-link{font:inherit;font-size:13px;font-weight:500;background:none;border:0;padding:6px 4px;cursor:pointer;color:var(--ink,#453B33);
text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(69,59,51,.35);}
.ck-link:hover{color:var(--primary,#E8460A);}
.ck-prefs{display:none;margin-top:14px;padding-top:14px;border-top:1px solid rgba(20,15,10,.07);}
.ck.custom .ck-prefs{display:block;}
.ck-opt{display:flex;align-items:center;gap:14px;padding:8px 0;}
.ck-opt div{flex:1;min-width:0;}
.ck-opt b{display:block;font-size:13.5px;font-weight:500;color:var(--ink,#453B33);}
.ck-opt span{display:block;font-size:12.5px;color:var(--muted,#75665B);margin-top:1px;}
.ck-sw{position:relative;flex:0 0 36px;height:20px;border-radius:999px;background:rgba(69,59,51,.18);border:0;cursor:pointer;padding:0;transition:background .2s ease;}
.ck-sw::after{content:'';position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .2s ease;}
.ck-sw[aria-checked="true"]{background:linear-gradient(94deg,#FF7A29,#EF1763);}
.ck-sw[aria-checked="true"]::after{transform:translateX(16px);}
.ck-sw:disabled{opacity:.55;cursor:not-allowed;}
.ck-sw:focus-visible{outline:2px solid #E8460A;outline-offset:2px;}
.ck-save{display:flex;justify-content:flex-end;gap:8px;margin-top:8px;}
@media (max-width:860px){
.ck{bottom:12px;padding:16px;border-radius:18px;}
.ck-row{flex-direction:column;align-items:stretch;gap:12px;}
.ck-ico{display:none;}
.ck-btns{flex-wrap:wrap;}
.ck-btns .ck-b{flex:1;}
}
/* the language pill is the same height as the header bar and condenses with it */
.lang-dd.lang-float{top:16px !important;}
.lang-float .lang-btn{height:37px !important;padding:0 11px 0 12px !important;font-size:13px;gap:5px;transform-origin:top right;
transition:transform .35s cubic-bezier(.22,1,.36,1), background .25s ease, border-color .25s ease;}
.lang-float .lang-btn svg{width:13px;height:13px;}
html:has(.nav-wrap.condensed) .lang-float .lang-btn{transform:scale(.85);}
/* =================== PHONE LAYOUT (desktop untouched) =================== */
.hm-top{display:none;}
@media (max-width:860px){
/* hero: the headline always on three lines */
#hero-copy .hero-h1{font-size:clamp(20px, 6.7vw, 34px) !important;line-height:1.14 !important;}
#hero-copy .hero-h1 .hl:first-child{display:block !important;white-space:nowrap !important;}
#hero-copy .hero-h1 .hl-2{display:block !important;}
#hero-copy .hero-h1 .hl.hl-b{display:block !important;white-space:nowrap !important;}
/* the sphere under the copy, then the counters, then the module grid */
.hm-top{display:flex;flex-direction:column;align-items:center;margin:34px 0 6px;}
.hm-orb{position:relative;width:220px;height:200px;}
.hm-orb .ho-orb{position:absolute !important;left:50% !important;top:50% !important;margin:0 !important;
transform:translate(-50%,-50%) scale(.56) !important;opacity:1 !important;}
.hm-stats{display:flex;align-items:center;gap:16px;margin-top:6px;}
.hm-stats span{display:inline-flex;align-items:baseline;gap:6px;font-size:14px;color:var(--muted);}
.hm-stats span{flex-direction:column;align-items:center;gap:5px;text-align:center;line-height:1.15;}
.hm-stats span:last-of-type{max-width:190px;}
.h2o-stat{flex-direction:column;align-items:center;gap:6px !important;text-align:center;}
.hm-stats b{font-size:28px;font-weight:400;letter-spacing:-.02em;}
.hm-stats i{width:1px;height:22px;background:rgba(69,59,51,.14);}
.hm-grid{grid-template-columns:1fr 1fr !important;}
.hm-cell{align-items:flex-start !important;text-align:left !important;padding-bottom:16px !important;}
.problem2-inner .lb-clone{display:none !important;}
.hm-ico{flex:0 0 40px !important;height:40px !important;width:40px !important;}
.hm-grid{grid-auto-rows:auto !important;column-gap:12px;}
.hm-grid::before{display:none !important;}
.hm-cell{gap:7px !important;padding:16px 4px 16px !important;border-bottom:1px solid #F0F1F8;}
.hm-cell i{margin-top:-4px !important;}
.hm-ok{display:flex;align-items:flex-start;gap:5px;margin-top:8px;padding:5px 8px;border-radius:9px;
background:rgba(111,176,140,.10);font-size:11px;line-height:1.3;color:var(--ink);text-align:left;}
.hm-ok svg{flex:0 0 auto;margin-top:2px;color:#4E9A72;}
.hm-ok b{font-weight:600;}
/* orange intro: the paragraph wraps inside the screen and lights up word by word */
.fxi-pin .fx-inner{width:100% !important;max-width:100% !important;min-width:0 !important;}
.fxi-title{max-width:100% !important;font-size:27px !important;line-height:1.25 !important;}
.fxi-title .ln{display:inline !important;white-space:normal !important;}
/* "100+ features": the orbit, a little smaller */
.problem2-inner .p2-orbit{display:block !important;position:relative !important;left:auto !important;top:auto !important;
width:0 !important;height:0 !important;align-self:center;order:7;margin:168px auto 176px !important;
opacity:1 !important;transform:scale(.44) !important;transition:none !important;pointer-events:none;}
.problem2-inner .p2-orbit *{pointer-events:none !important;}
.problem2-inner .p2-orbit .po-pop, .problem2-inner .p2-orbit .pf-tip{display:none !important;}
/* …and the modules as a swipeable row of equal, compact cards */
.p2-mods{display:flex !important;grid-template-columns:none !important;gap:10px !important;overflow-x:auto;overscroll-behavior-x:contain;
scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
margin:4px -16px 0 !important;padding:6px 16px 18px !important;align-items:stretch !important;}
.p2-mods::-webkit-scrollbar{display:none;}
.p2-mods::before, .p2-mods .mod-card::after{display:none !important;}
.p2-mods .mod-card{flex:0 0 74%;scroll-snap-align:center;opacity:1 !important;transform:none !important;
background:#fff !important;background-image:none !important;border:1px solid rgba(30,45,75,.07) !important;border-radius:18px !important;
box-shadow:0 1px 2px rgba(88,62,50,.05),0 14px 28px -22px rgba(88,62,50,.4) !important;
padding:13px 14px !important;gap:8px !important;}
.p2-mods .mod-card.c-wide{grid-column:auto;}
/* footer: tighter */
.ft-inner{padding-top:72px !important;}
.ft-top{gap:20px 18px !important;}
.ft-col a,.ft-col .ft-linkbtn{margin-top:7px !important;}
.ft-tag{margin-top:10px !important;}
.ft-social{margin-top:14px !important;}
.ft-mark{margin-top:22px !important;padding-bottom:16px !important;}
}
.mod-go{display:none;}
@media (max-width:860px){
.more-badge-m{display:none !important;}
#hero-copy .hero-eyebrow{display:none !important;}
#hero-copy .glow-pill{transform:scale(.88);transform-origin:left center;margin-bottom:4px !important;}
.hm-stats{gap:14px !important;}
/* hero: compact, so the counters, sphere and first modules show on load */
#hero-copy{padding-top:88px !important;}
#hero-copy .glow-pill{margin-bottom:10px !important;}
#hero-copy > p{margin-top:22px !important;}
#hero-copy .hero-ctas{margin-top:16px !important;}
#hero-copy .hero-trust{margin-top:10px !important;}
.hm-top{margin:18px 0 0 !important;}
.hm-stats{order:-1;margin:0 0 -6px !important;gap:18px !important;}
.hm-stats b{font-size:31px !important;}
.hm-stats span{font-size:15px !important;}
.hm-stats i{height:30px !important;}
.hm-orb{height:170px !important;}
.hm-grid{margin:0 6px 56px !important;}
/* 100+ features cards: warm, soft, with a link to the module */
.p2-mods .mod-card{background:#FFF8F2 !important;border-color:rgba(232,110,60,.12) !important;
box-shadow:0 1px 2px rgba(120,60,30,.05),0 14px 28px -22px rgba(150,70,30,.38) !important;}
.p2-mods .mod-card .mod-go{display:inline-flex;align-items:center;gap:5px;margin-top:auto;padding-top:4px;font-size:13px;font-weight:500;color:var(--primary-text);text-decoration:none;}
}
@media (max-width:860px){
/* 20px side margins on phones */
#hero-copy, .fx-inner, .ft-inner, .problem2-pin-inner{padding-left:20px !important;padding-right:20px !important;}
.ft-legal{padding-left:20px !important;padding-right:20px !important;}
.hm-grid{margin-left:20px !important;margin-right:20px !important;}
.hm-top{position:relative;z-index:3;}
.p2-mods{margin-left:calc((20px + var(--tp)) * -1) !important;margin-right:calc((20px + var(--tp)) * -1) !important;padding-left:calc(20px + var(--tp)) !important;padding-right:calc(20px + var(--tp)) !important;scroll-padding:0 calc(20px + var(--tp));}
/* counters in the full brand gradient, as on desktop */
.hm-stats b{font-weight:500 !important;background:linear-gradient(94deg,#FF7A29,#EF1763) !important;-webkit-background-clip:text !important;background-clip:text !important;color:transparent !important;-webkit-text-fill-color:transparent !important;opacity:1 !important;}
/* warm module cards: no blue-grey lines, flat buttons, soft shadow only */
.p2-mods .mod-card{box-shadow:0 10px 26px -20px rgba(150,70,30,.28) !important;}
.p2-mods .mod-card *{box-shadow:none !important;}
.p2-mods .mod-stat, .p2-mods .mod-widget{background:#fff !important;border-color:rgba(200,110,60,.14) !important;}
.p2-mods .mod-btn{background:linear-gradient(94deg,#FF7A29,#EF1763) !important;}
.p2-mods .mod-send{background:linear-gradient(94deg,#FF7A29,#EF1763) !important;}
}
@media (max-width:860px){
.hm-n{font-style:normal;font-variant-numeric:tabular-nums;}
#hero-copy .glow-pill{transform:scale(.74) !important;margin-bottom:0 !important;}
/* compact module grid */
.hm-grid{column-gap:10px !important;margin-bottom:40px !important;}
.hm-cell{gap:4px !important;padding:12px 2px 12px !important;}
.hm-ico{flex:0 0 34px !important;width:34px !important;height:34px !important;border-radius:10px !important;}
.hm-ico svg{width:17px !important;height:17px !important;}
.hm-cell b{font-size:13.5px !important;}
.hm-cell i{margin-top:-3px !important;font-size:10.5px !important;}
.hm-ok{margin-top:5px !important;padding:4px 7px !important;font-size:10.5px !important;}
.hm-top{margin-top:12px !important;}
.hm-orb{height:160px !important;}
/* problem section: dark band edge to edge */
.p2-dark{margin-left:calc((20px + var(--tp)) * -1) !important;margin-right:calc((20px + var(--tp)) * -1) !important;padding-left:calc(20px + var(--tp)) !important;padding-right:calc(20px + var(--tp)) !important;}
/* 100+ features cards: a touch lighter than the warm background, no blue rules */
.p2-mods .mod-card.c-l, .p2-mods .mod-card.c-r, .p2-mods .mod-card{background:#FFFBF8 !important;background-image:none !important;border-color:rgba(214,130,80,.11) !important;}
.p2-mods .mod-card .mod-stats{background:transparent !important;border:0 !important;padding:0 !important;gap:8px !important;}
.p2-mods .mod-card .mod-stat{background:#FFFFFF !important;}
}
@media (max-width:860px){
.hm-ok{font-size:9.5px !important;line-height:1.3 !important;}
.hm-ok b, .hm-cell .hm-ok b{font-size:inherit !important;font-weight:600;letter-spacing:0;}
.hm-stats{margin-bottom:24px !important;}
.hm-top{margin-top:20px !important;}
.hm-orb{margin-top:6px;}
#hero-copy .hero-trust{display:flex !important;flex-direction:row !important;flex-wrap:nowrap !important;gap:8px !important;justify-content:space-between;margin-bottom:8px !important;}
#hero-copy .hero-trust li{font-size:10.5px !important;white-space:nowrap;gap:4px !important;letter-spacing:-.01em;}
#hero-copy .hero-trust li svg{width:15px !important;height:15px !important;padding:3px !important;flex:0 0 15px;}
#hero-copy .hero-trust{gap:6px !important;}
}
.mod-card.mod-m-only{display:none !important;}
@media (max-width:860px){ .p2-mods .mod-card.mod-m-only{display:flex !important;} }
@media (max-width:860px){ .hm-cell{border-bottom-color:#F1E7E0 !important;} .p2-mods{--rule:#F1E7E0 !important;--star:#EBDDD3 !important;} .hm-stats i{background:rgba(160,110,80,.2) !important;} }
@media (max-width:860px){
/* hero module grid: ruled cells with a centre line and a soft star at each crossing (like the module pages) */
.hm-grid{column-gap:0 !important;--gl:#EEE3DA;}
.hm-cell{border-bottom:0 !important;padding:16px 14px 16px 0 !important;
background:linear-gradient(90deg,transparent,var(--gl)) left bottom / 100% 1px no-repeat;}
.hm-cell:nth-child(even){padding:16px 0 16px 14px !important;background:linear-gradient(90deg,var(--gl),transparent) left bottom / 100% 1px no-repeat;}
.hm-cell:nth-child(odd){box-shadow:inset -1px 0 0 var(--gl);}
.hm-cell:last-child{background:none !important;}
.hm-cell:last-child:nth-child(odd){box-shadow:none;background:linear-gradient(180deg,var(--gl) 30%,transparent 90%) right top / 1px 100% no-repeat !important;}
.hm-cell:nth-child(odd):not(:last-child)::after{content:'';position:absolute;right:-9px;bottom:-9px;width:18px;height:18px;z-index:2;
background:var(--gl);
-webkit-mask:radial-gradient(circle at 0 0, transparent 7.6px, #000 8.1px),radial-gradient(circle at 100% 0, transparent 7.6px, #000 8.1px),
radial-gradient(circle at 0 100%, transparent 7.6px, #000 8.1px),radial-gradient(circle at 100% 100%, transparent 7.6px, #000 8.1px);
-webkit-mask-composite:source-in;
mask:radial-gradient(circle at 0 0, transparent 7.6px, #000 8.1px),radial-gradient(circle at 100% 0, transparent 7.6px, #000 8.1px),
radial-gradient(circle at 0 100%, transparent 7.6px, #000 8.1px),radial-gradient(circle at 100% 100%, transparent 7.6px, #000 8.1px);
mask-composite:intersect;}
.hm-cell:first-child{box-shadow:none !important;
background:linear-gradient(90deg,transparent,var(--gl)) left bottom / 100% 1px no-repeat,
linear-gradient(180deg,transparent 18%,var(--gl) 70%) right top / 1px 100% no-repeat !important;}
}
/* feature cards: a soft warm field instead of blue-grey */
.fx-card{background:#FDFBF9 !important;--tint:#F8F0EA;--glow:rgba(190,110,60,.18);}
.fx-card:hover{background:#FCF7F3 !important;}
/* every feature card the same height, with the link pinned to the bottom */
.fx-grid{grid-auto-rows:1fr;align-items:stretch !important;}
.fx-card{display:flex !important;flex-direction:column;height:auto;}
.fx-card .fx-copy{flex:1;display:flex;flex-direction:column;}
.fx-card .fx-copy > .fx-mod{margin-top:auto;padding-top:26px;}
@media (max-width:860px){ .fx-grid{grid-auto-rows:auto;align-items:stretch !important;} .fx-grid > .fx-card{align-self:stretch;min-height:387px;} }
/* analytics mock: a lighter, warm drop shadow */
.st-app{box-shadow:0 34px 70px -56px rgba(88,62,50,.32),0 2px 6px -3px rgba(88,62,50,.08) !important;}
@media (min-width:641px) and (max-width:860px){ .p2-mods .mod-card{flex-basis:56% !important;} .problem2-inner .p2-orbit{transform:scale(.62) !important;margin:220px auto 232px !important;} }
/* phones and tablets: "100+ features" left of the blob, "50+ integrations" right of it,
each label under its number */
@media (max-width:860px){
.hm-top{flex-direction:column !important;justify-content:center !important;align-items:center !important;}
.hm-stats{display:contents !important;}
.hm-stats i{display:none !important;}
.hm-stats span{order:2;flex:0 0 auto;margin-top:6px;min-width:0;display:flex !important;flex-direction:column !important;align-items:center !important;
gap:3px !important;line-height:1.1;text-align:center;}
.hm-stats span:last-of-type{order:2;}
.hm-orb{order:1;flex:0 0 auto;width:170px !important;margin-top:0 !important;}
}
@media (max-width:400px){ .hm-orb{width:150px !important;} }
/* tablets: counters 15% larger */
@media (min-width:641px) and (max-width:860px){
.hm-stats b{font-size:35.6px !important;}
.hm-stats span{font-size:17.3px !important;}
.hm-stats i{height:34px !important;}
}
/* larger phones (439–640px): ticks 15% larger, more room above the counters */
@media (min-width:439px) and (max-width:640px){
#hero-copy .hero-trust li{font-size:12.1px !important;}
#hero-copy .hero-trust li svg{width:17px !important;height:17px !important;flex:0 0 17px;}
.hm-top{margin-top:36px !important;}
}
/* very small phones (≤ 374px): counters and ticks scale down so nothing is clipped */
@media (max-width:374px){
.hm-stats{gap:10px !important;}
.hm-stats b{font-size:26px !important;}
.hm-stats span{font-size:13px !important;}
#hero-copy .hero-trust li{font-size:9.5px !important;}
}
/* small phones: a compact cookie banner that leaves most of the page visible */
@media (max-width:480px){
.ck{padding:12px 14px !important;bottom:10px !important;border-radius:16px !important;}
.ck-tx b{font-size:13.5px !important;}
.ck-tx p{font-size:12px !important;line-height:1.4 !important;}
.ck-btns{gap:6px !important;}
.ck-b{padding:8px 10px !important;font-size:12.5px !important;}
.ck-link{font-size:12.5px !important;}
}
.ho-wrap, #hero-copy{position:relative;z-index:1;}
/* ---- hero cards: frosted glass, still easy to read ---------------------------- */
.ho-card{
background:linear-gradient(155deg,rgba(255,255,255,.86) 0%,rgba(255,255,255,.66) 100%) !important;
border:1px solid rgba(255,255,255,.9) !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(255,255,255,.25),
0 1px 2px rgba(120,60,30,.06),0 18px 40px -22px rgba(150,70,30,.32) !important;
-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);}
.ho-card .hu-row{background:rgba(255,255,255,.55) !important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.7);}
/* Safari re-blurs the backdrop on every frame the lines move: give it a slightly
more solid card instead of a live blur */
html.ep-saf .ho-card{-webkit-backdrop-filter:none;backdrop-filter:none;
background:linear-gradient(155deg,rgba(255,255,255,.92) 0%,rgba(255,250,246,.78) 100%) !important;}
/* ==== i18n:css ==== longer words in German / Icelandic / Spanish break nicely and never push the layout */
html[lang="de"] body, html[lang="is"] body, html[lang="es"] body{-webkit-hyphens:auto;hyphens:auto;}
html:not([lang="en"]) h1, html:not([lang="en"]) h2, html:not([lang="en"]) h3, html:not([lang="en"]) h4,
html:not([lang="en"]) p, html:not([lang="en"]) li, html:not([lang="en"]) a, html:not([lang="en"]) button, html:not([lang="en"]) span{overflow-wrap:break-word;}
html:not([lang="en"]) #hero-copy .hero-h1 .hl, html:not([lang="en"]) #hero-copy .hero-h1 .hl-2{white-space:normal !important;}
html:not([lang="en"]) .ap-tabs .use-pill{white-space:normal !important;line-height:1.2;}
html:not([lang="en"]) .st-hd h4{min-width:0;white-space:normal;line-height:1.2;}
html:not([lang="en"]) .mod-file-nm{white-space:normal;overflow-wrap:anywhere;}
@media (max-width:860px){
html:not([lang="en"]) #hero-copy .hero-trust{flex-wrap:wrap !important;justify-content:center !important;row-gap:6px !important;column-gap:12px !important;}
html:not([lang="en"]) #hero-copy .hero-trust li{white-space:normal !important;}
}
html:not([lang="en"]) b, html:not([lang="en"]) strong{overflow-wrap:anywhere;}
/* orange intro: translated lines are longer, so the words flow freely and wrap to the screen */
html:not([lang="en"]) .fxi-title .ln{display:inline !important;white-space:normal !important;}
/* mobile menu: "Try for free" under "Book a demo" */
.m-menu-cta.m-menu-cta2{margin-top:10px !important;color:var(--ink) !important;background:#fff !important;border:1px solid rgba(20,15,10,.12);box-shadow:0 8px 18px -14px rgba(20,15,10,.35) !important;}
/* footer: link columns start level with the tagline; "Get in touch" sits on the right, stronger */
@media (min-width:861px){
.ft-top{align-items:start;}
.ft-top{grid-template-columns:minmax(210px,1fr) auto auto auto auto auto !important;column-gap:clamp(30px,4.4vw,68px) !important;}
.ft-top > div:first-child{padding-right:clamp(0px,1vw,16px);}
html[lang="en"] .ft-top .ft-col a,html[lang="en"] .ft-top .ft-col .ft-linkbtn{white-space:nowrap;}
.ft-top > *{min-width:0;}
.ft-news{justify-self:end;display:flex;flex-direction:column;align-items:flex-end;text-align:right;}
.ft-news .ft-h{font-size:24px !important;line-height:1.1;font-weight:700;color:#fff !important;letter-spacing:-.01em;margin:0 !important;}
.ft-news .ft-mail{margin-top:14px !important;font-size:17px !important;font-weight:700;}
.ft-news .ft-mail svg{width:18px;height:18px;}
}
@media (max-width:860px){
.ft-news .ft-h{font-size:22px !important;font-weight:700;color:#fff !important;margin:0 !important;}
.ft-news .ft-mail{margin-top:8px !important;font-size:16px !important;font-weight:700;}
}
/* footer language switch, right side of the bottom row */
.ft-legal{align-items:center;}
.ft-lang{display:flex;gap:4px;padding:3px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);}
.ft-lang a{font:inherit;font-size:12px;font-weight:600;letter-spacing:.04em;color:#fff;background:transparent;border:0;
height:26px;min-width:34px;padding:0 9px;border-radius:999px;cursor:pointer;transition:background .2s,color .2s;}
.ft-lang a:hover{background:rgba(255,255,255,.16);}
.ft-lang a[aria-current="true"]{background:#fff;color:#C2410C;}
@media (max-width:860px){ .ft-legal{flex-direction:row !important;align-items:center !important;justify-content:space-between !important;flex-wrap:wrap;} }
/* ==== i18n:css-end ==== */
/* ---- site additions over the 20.10 export ----
Phones and tablets: the round back-to-top button sits over the right end of the footer's
last row, where the language switcher is; keep that row clear of it. */
@media (max-width:860px){
.ft-legal{padding-right:76px !important;}
}
/* Spanish, German, Icelandic: the headline never splits a word ("rá-pido"), the typed one least of all */
html:not([lang="en"]) #hero-copy .hero-h1{-webkit-hyphens:manual;hyphens:manual;}