/* Unleap — ficha técnica: papel, tinta, un solo azul */
:root {
  --bone: #F6F6F3;
  --wash: #EDEDE9;
  --paper: #FFFFFF;
  --ink: #0B0C1A;
  --ink-2: #2B2D3A;
  --ash: #5F626C;
  --line: #E4E4E0;
  --line-2: #D4D4CF;
  --blue: #292FDD;
  --blue-600: #2126C2;
  --blue-50: #EEF0FD;
  --night: #0E0F1C;
  --night-line: #2A2D42;
  --night-text: #B4B7C8;
  --wa: #0F7A3F;
  --bad: #B3261E;
  --stage: #EFEEEA;

  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, monospace;

  --r-sm: 6px; --r: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px;
  --sh-1: 0 1px 2px rgb(11 12 26 / .05);
  --sh-2: 0 1px 2px rgb(11 12 26 / .04), 0 10px 24px -14px rgb(11 12 26 / .18);
  --sh-3: 0 1px 2px rgb(11 12 26 / .05), 0 2px 6px -2px rgb(11 12 26 / .05), 0 32px 64px -32px rgb(11 12 26 / .32);

  --max: 1280px;
  --gutter: 20px;
  --sec: clamp(88px, 10vw, 144px);
  --ease: cubic-bezier(.2, .8, .2, 1);
  interpolate-size: allow-keywords;
}
@media (min-width: 768px) { :root { --gutter: 32px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; scrollbar-color: #B1B3BC var(--bone); }
body { margin: 0; background: var(--bone); color: var(--ink); font: 400 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "ss01", "cv11"; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, ul, ol, dl, dd, blockquote, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
[hidden] { display: none !important; }
::selection { background: var(--blue); color: #fff; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
input { caret-color: var(--blue); }
a, button, summary { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; z-index: 99; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: var(--r-sm); }
.in { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.micro { font-size: 12px; line-height: 1.4; color: var(--ash); }
.ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.brand { display: block; width: 22px; height: 22px; background: var(--c, var(--ink)); -webkit-mask: var(--src) center / contain no-repeat; mask: var(--src) center / contain no-repeat; flex: none; }

/* Product stage: flat wash, dot field that fades toward the center. */
.sim, .stage2 { background: var(--stage); }
.sim::before, .stage2::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(rgb(11 12 26 / .2) 1px, transparent 1.4px); background-size: 16px 16px;
  -webkit-mask: radial-gradient(ellipse 75% 70% at 55% 50%, transparent 35%, #000 100%); mask: radial-gradient(ellipse 75% 70% at 55% 50%, transparent 35%, #000 100%);
}

/* Selection frame: hairline box with corner handles and a status label, around floating UI. */
.hx::after {
  --h: var(--ink);
  content: ""; position: absolute; inset: -9px; z-index: 3; pointer-events: none;
  border: 1px solid rgb(11 12 26 / .16);
  background: linear-gradient(var(--h), var(--h)) left top / 5px 5px, linear-gradient(var(--h), var(--h)) right top / 5px 5px,
    linear-gradient(var(--h), var(--h)) left bottom / 5px 5px, linear-gradient(var(--h), var(--h)) right bottom / 5px 5px;
  background-repeat: no-repeat; background-origin: border-box; background-clip: border-box;
}
.hx::before { content: attr(data-label); position: absolute; left: -9px; bottom: calc(100% + 18px); font: 500 10.5px/1 var(--sans); letter-spacing: .09em; text-transform: uppercase; color: var(--ash); white-space: nowrap; }

/* ---------- Buttons ---------- */
.b { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 20px; border-radius: var(--r-sm); border: 1px solid transparent; font: 500 15px/1.3 var(--sans); letter-spacing: -.005em; white-space: nowrap; cursor: pointer; transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease); }
.b:active { transform: translateY(1px); }
.b-p { background: var(--blue); color: #fff; box-shadow: inset 0 1px 0 rgb(255 255 255 / .16), 0 1px 2px rgb(33 38 194 / .35), 0 4px 12px -6px rgb(41 47 221 / .5); }
.b-p:hover { background: var(--blue-600); }
.b-o { color: var(--ink); background: #E8E8E3; }
.b-o:hover { background: #DEDED8; }
.lnk { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; text-decoration: underline; text-decoration-color: var(--line-2); text-decoration-thickness: 1px; text-underline-offset: 5px; transition: text-decoration-color .2s var(--ease); }
.lnk:hover { text-decoration-color: currentColor; }
.lnk .ic { width: 14px; height: 14px; transition: transform .2s var(--ease); }
.lnk:hover .ic { transform: translateX(2px); }

/* ---------- Top ---------- */
.bar { position: relative; z-index: 41; background: var(--ink); color: #D9DAE3; font-size: 13.5px; text-align: center; padding: 9px var(--gutter); }
.bar a { color: #fff; font-weight: 500; text-decoration: underline; text-decoration-color: rgb(255 255 255 / .4); text-underline-offset: 3px; margin-left: 6px; }
.bar a:hover { text-decoration-color: #fff; }
.nav { position: sticky; top: 0; z-index: 40; background: rgb(246 246 243 / .82); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); border-bottom: 1px solid var(--line); }
.nav .in { position: relative; display: flex; align-items: center; gap: 24px; min-height: 68px; }
.nav .logo img { width: 92px; height: auto; }
.links { display: none; gap: 2px; margin-left: 16px; margin-right: auto; font-size: 14.5px; }
.links a { padding: 8px 12px; border-radius: var(--r-sm); color: var(--ink-2); transition: background-color .2s var(--ease), color .2s var(--ease); }
.links a:hover { background: rgb(11 12 26 / .05); color: var(--ink); }
.nav .acts { display: flex; gap: 8px; margin-left: auto; }
.nav .b { min-height: 40px; padding: 8px 14px; font-size: 14px; }
.nav .b-o { display: none; }
.menu-toggle { display: none; }
@media (min-width: 960px) { .links { display: flex; } .nav .acts { margin-left: 0; } .nav .b-o { display: inline-flex; } }

/* ---------- Hero ---------- */
.hero { padding-top: clamp(56px, 8vw, 112px); }
.hero > .in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 64px; }
.hero h1 { grid-column: 1 / -1; font-weight: 400; font-size: clamp(48px, 8.2vw, 116px); line-height: .98; letter-spacing: -.047em; max-width: 16ch; text-wrap: balance; margin-bottom: 48px; }
.hero .sub { grid-column: 1; grid-row: 2 / span 2; max-width: 40ch; font-size: clamp(18px, 1.7vw, 21px); line-height: 1.5; color: var(--ash); }
.ask { grid-column: 2; align-self: start; display: flex; gap: 6px; width: 100%; max-width: 560px; justify-self: end; padding: 6px; background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--r-md); box-shadow: var(--sh-2); transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.ask:focus-within { border-color: var(--blue); box-shadow: 0 0 0 4px rgb(41 47 221 / .12), var(--sh-2); }
.ask input { flex: 1; min-width: 0; border: 0; background: none; padding: 0 14px; font: 400 16px var(--sans); color: var(--ink); outline: 0; }
.ask input::placeholder { color: #8A8C96; }
.ask .b { min-height: 46px; }
.hero-note { grid-column: 2; justify-self: end; width: 100%; max-width: 560px; margin-top: 14px; padding-left: 8px; font-size: 13.5px; line-height: 1.5; color: var(--ash); }
.hero-note b { font-weight: 500; color: var(--ink); }

/* ---------- Hero simulation (synthetic data) ---------- */
:root { --odoo: #714B67; --odoo-bg: #F9FAFB; --o-line: #DEE2E6; --o-text: #374151; --o-muted: #6B7280; }
.sim { position: relative; grid-column: 1 / -1; margin-top: 72px; height: 680px; border-radius: var(--r-xl); overflow: hidden; isolation: isolate; }
.wires { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; overflow: visible; pointer-events: none; }
.wires path { fill: none; stroke: var(--blue); stroke-width: 1.5; stroke-dasharray: 4 6; opacity: 0; transition: opacity .5s var(--ease); }
.wires .pulse { fill: var(--blue); opacity: 0; offset-distance: 0%; }
.sim.s2 #w1, .sim.s4 #w2 { opacity: .9; }
@media (prefers-reduced-motion: no-preference) {
  .sim:not(.s7) .wires path { animation: dash 1s linear infinite; }
  .sim.s2:not(.s4) .p1 { animation: travel 1.2s var(--ease) infinite; }
  .sim.s4:not(.s6) .p2 { animation: travel 1.2s var(--ease) infinite; }
}
@keyframes dash { to { stroke-dashoffset: -20; } }
@keyframes travel { 0% { offset-distance: 0%; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }

/* reveal keys: .kN shows at step sN */
.sim .k1, .sim .k2, .sim .k3, .sim .k4, .sim .k5a, .sim .k5b, .sim .k5c, .sim .k6, .sim .k7 { opacity: 0; transform: translateY(8px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
.sim.s1 .k1, .sim.s2 .k2, .sim.s3 .k3, .sim.s4 .k4, .sim.s5 .k5a, .sim.s5 .k5b, .sim.s5 .k5c, .sim.s6 .k6, .sim.s7 .k7 { opacity: 1; transform: none; }
.sim.s5 .k5b { transition-delay: .2s; } .sim.s5 .k5c { transition-delay: .4s; }

/* WhatsApp phone */
.phone { position: absolute; z-index: 2; left: 48px; top: 76px; width: 292px; border-radius: var(--r-md); background: #fff; border: 1px solid var(--line); font-size: 13.5px; line-height: 1.42; box-shadow: var(--sh-3); }
.ph-h { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--r-md) var(--r-md) 0 0; background: #F7F6F3; border-bottom: 1px solid #ECEAE5; }
.ph-h b { display: block; font-weight: 500; font-size: 13.5px; line-height: 1.2; }
.ph-h small { color: var(--ash); font-size: 12px; }
.ph-h .brand { margin-left: auto; width: 20px; height: 20px; }
.av { width: 32px; height: 32px; border-radius: 50%; background: #D8E4DA; color: #2C4A35; display: grid; place-items: center; font-size: 11.5px; font-weight: 500; flex: none; }
.ph-b { padding: 14px 12px 16px; border-radius: 0 0 var(--r-md) var(--r-md); background: #EFEAE2; display: grid; gap: 8px; min-height: 230px; align-content: start; }
.bub { max-width: 90%; padding: 8px 10px 5px; background: #fff; border-radius: 3px 10px 10px 10px; box-shadow: 0 1px .5px rgb(11 12 26 / .1); }
.bub time { display: block; text-align: right; font-size: 11px; color: #5E626E; margin-top: 2px; }
.bub.out { justify-self: end; background: #D9FDD3; border-radius: 10px 3px 10px 10px; padding: 5px 5px 4px; }
.bub.out > time { padding-right: 4px; }
.doc { display: flex; align-items: center; gap: 9px; padding: 8px; margin-bottom: 4px; border-radius: 7px; background: rgb(255 255 255 / .7); }
.pdf { width: 28px; height: 34px; flex: none; border-radius: 3px; background: #D93A3F; color: #fff; font-size: 8.5px; font-weight: 600; display: grid; place-items: end center; padding-bottom: 5px; }
.doc b { display: block; font-weight: 500; font-size: 13px; }
.doc small { font-size: 11.5px; color: var(--ash); }

/* Agent card */
.agent { position: absolute; z-index: 2; left: 48px; top: 470px; width: 292px; padding: 16px 18px; border-radius: 4px; background: rgb(255 255 255 / .86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--line); color: var(--ink); font-size: 13px; box-shadow: var(--sh-2); }
.ag-h { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.ag-h b { font-weight: 500; white-space: nowrap; }
.ag-st { position: relative; flex: 1; min-width: 0; height: 16px; overflow: hidden; color: var(--ash); font-size: 12px; }
.ag-st em { position: absolute; inset: 0; font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transform: translateY(8px); transition: opacity .35s var(--ease), transform .35s var(--ease); }
.sim.s2:not(.s3) .x1, .sim.s3:not(.s4) .x2, .sim.s4:not(.s7) .x3, .sim.s7 .x4 { opacity: 1; transform: none; }
.sim.s7 .x4 { color: #1E9E5A; font-weight: 500; }
.ag-cur { position: absolute; z-index: 6; left: 72%; top: 72%; display: flex; align-items: flex-start; opacity: 0; pointer-events: none; transition: left .9s var(--ease), top .9s var(--ease), opacity .3s; }
.ag-cur svg { width: 18px; height: 18px; fill: var(--blue); stroke: #fff; stroke-width: 1.3; stroke-linejoin: round; filter: drop-shadow(0 2px 3px rgb(11 12 26 / .25)); }
.ag-cur span { margin: 14px 0 0 -2px; padding: 3px 8px; border-radius: 4px; background: var(--blue); color: #fff; font-size: 11px; font-weight: 500; white-space: nowrap; box-shadow: 0 4px 10px -4px rgb(41 47 221 / .6); }
.sim.s4 .ag-cur { opacity: 1; left: 36%; top: 60%; }
.sim.s5 .ag-cur { left: 48%; top: 70%; }
.sim.s6 .ag-cur { left: 64%; top: 86%; }
.sim.s7 .ag-cur { left: 10%; top: 17%; }
@media (max-width: 599px) { .ag-cur { display: none; } }
.ag-h .brand { width: 15px; height: 15px; --c: var(--ink) !important; }
.ag-h .dot { margin-left: auto; width: 8px; height: 8px; border-radius: 50%; background: #C9CAD1; transition: background-color .3s; }
.sim.s2:not(.s5) .ag-h .dot { background: var(--blue); box-shadow: 0 0 0 4px rgb(41 47 221 / .15); }
.sim.s5 .ag-h .dot { background: #1E9E5A; }
.ag-l { display: grid; gap: 9px; }
.ag-l li { display: flex; align-items: center; gap: 10px; color: var(--ink-2); }
.tick { width: 16px; height: 16px; flex: none; border-radius: 50%; border: 1.5px solid #5B5E78; position: relative; }
.tick::after { content: ""; position: absolute; left: 4.5px; top: 2px; width: 4px; height: 7px; border: solid #fff; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); }
.ag-l .tick { background: #1E9E5A; border-color: #1E9E5A; }

.toast { position: absolute; z-index: 4; right: 48px; top: 40px; display: flex; align-items: center; gap: 12px; padding: 14px 18px 14px 14px; border-radius: 4px; background: rgb(255 255 255 / .9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--line); box-shadow: var(--sh-3); font-size: 13px; line-height: 1.35; }
.toast b { display: block; font-weight: 500; }
.toast small { display: block; margin-top: 2px; color: var(--ash); font-size: 12px; font-variant-numeric: tabular-nums; }
@media (max-width: 899px) { .toast { display: none; } }

/* Odoo window */
.odoo { position: absolute; z-index: 2; left: 404px; right: -24px; top: 56px; bottom: -1px; background: var(--odoo-bg); border: 1px solid var(--line); border-bottom: 0; border-radius: var(--r-md) var(--r-md) 0 0; overflow: hidden; font-size: 13px; color: var(--o-text); box-shadow: var(--sh-3); }
.o-nav { display: flex; align-items: center; gap: 18px; height: 42px; padding: 0 16px; background: var(--odoo); color: rgb(255 255 255 / .85); font-size: 13px; white-space: nowrap; overflow: hidden; }
.o-nav b { color: #fff; font-weight: 500; font-size: 14px; }
.o-co { margin-left: auto; }
.o-grid { display: grid; grid-template-columns: repeat(3, 3px); gap: 2.5px; }
.o-grid i { width: 3px; height: 3px; border-radius: 1px; background: #fff; }
.o-cp { padding: 10px 16px; background: #fff; border-bottom: 1px solid var(--o-line); }
.o-bc { font-size: 15px; color: var(--odoo); }
.o-bc b { color: var(--o-text); font-weight: 500; }
.o-row { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.o-btn { display: inline-flex; align-items: center; height: 28px; padding: 0 11px; border-radius: 4px; background: #E7E9ED; color: var(--o-text); font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.o-btn.pri { background: var(--odoo); color: #fff; transition: background-color .2s; }
.sim.s7 .o-btn.pri { background: #5A3B52; }
.o-status { display: flex; margin-left: auto; font-size: 12px; }
.st { position: relative; padding: 5px 16px 5px 18px; background: #fff; color: var(--o-muted); border: 1px solid var(--o-line); margin-left: -1px; white-space: nowrap; clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%, 8px 50%); transition: background-color .35s var(--ease), color .35s var(--ease); }
.st1 { clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%); padding-left: 12px; border-radius: 4px 0 0 4px; }
.sim .st1 { background: #E6DDE4; color: var(--odoo); }
.sim.s7 .st1 { background: #fff; color: var(--o-muted); }
.sim.s7 .st2 { background: #E6DDE4; color: var(--odoo); }
.o-body { display: grid; grid-template-columns: minmax(0, 1fr) 250px; height: calc(100% - 128px); }
.o-sheet { margin: 14px 0 0 16px; padding: 18px 22px; background: #fff; border: 1px solid var(--o-line); border-bottom: 0; }
.o-title { font-weight: 500; font-size: 24px; color: #111827; letter-spacing: -.01em; }
.o-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; margin: 14px 0 16px; }
.o-fields div { display: grid; grid-template-columns: 96px 1fr; gap: 8px; }
.o-fields span { color: var(--o-muted); }
.o-fields b { font-weight: 500; color: #111827; }
.o-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--o-line); }
.o-tabs span { padding: 7px 12px; color: var(--o-muted); border: 1px solid transparent; border-bottom: 0; border-radius: 4px 4px 0 0; margin-bottom: -1px; }
.o-tabs .on { color: #111827; background: #fff; border-color: var(--o-line); }
.o-lines { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.o-lines th { text-align: left; font-weight: 500; font-size: 12px; padding: 8px 6px; border-bottom: 1px solid var(--o-line); color: #111827; }
.o-lines td { padding: 9px 6px; border-bottom: 1px solid #EEF0F3; }
.o-lines .n { text-align: right; white-space: nowrap; }
.o-lines em { font-style: normal; font-size: 11px; padding: 2px 6px; border-radius: 10px; background: #EEF0F3; }
.o-tot { width: 260px; margin: 14px 0 0 auto; font-variant-numeric: tabular-nums; }
.o-tot div { display: flex; justify-content: space-between; padding: 3px 6px; }
.o-tot dt { color: var(--o-muted); }
.o-tot .t { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--o-line); font-size: 15px; }
.o-tot .t dt, .o-tot .t dd { color: #111827; font-weight: 500; }
.o-chat { padding: 14px 14px 0; border-left: 1px solid var(--o-line); margin-left: 16px; background: #fff; font-size: 12.5px; }
.oc-tabs { display: flex; gap: 6px; }
.oc-tabs span { padding: 5px 9px; border-radius: 4px; background: #E7E9ED; font-weight: 500; }
.oc-tabs span:first-child { background: var(--odoo); color: #fff; }
.oc-day { margin: 16px 0 10px; text-align: center; font-size: 11.5px; color: var(--o-muted); }
.oc-m { display: flex; gap: 9px; margin-bottom: 14px; }
.oc-m b { font-weight: 500; color: #111827; }
.oc-m small { color: var(--o-muted); }
.oc-m p { margin-top: 2px; color: var(--o-text); line-height: 1.4; }
.oc-av { width: 28px; height: 28px; flex: none; border-radius: 4px; display: grid; place-items: center; font-size: 10.5px; font-weight: 600; color: #fff; }
.oc-av.s { background: #3B6FB6; } .oc-av.a { background: var(--ink); }

.demo-footer { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 0 0; }
.demo-footer p { font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.demo-footer p span { display: block; font-size: 12.5px; color: var(--ash); margin-top: 2px; }
.replay { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--paper); box-shadow: var(--sh-1); font: 500 13.5px/1.4 var(--sans); color: var(--ink); cursor: pointer; transition: border-color .2s var(--ease), opacity .2s; }
.replay:hover { border-color: var(--ink); }
.replay:disabled { opacity: .5; cursor: wait; }
.replay .ic { width: 12px; height: 12px; fill: currentColor; stroke: none; }

@media (max-width: 1100px) { .o-body { grid-template-columns: 1fr; } .o-chat { display: none; } }

/* Proof row */
.proof { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; margin-top: 48px; border-top: 1px solid var(--ink); }
.proof li { padding: 22px 16px 24px 0; }
.proof li:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--line); }
.proof li:nth-child(n+3) { border-top: 1px solid var(--line); }
.proof b { display: block; font-weight: 400; font-size: clamp(26px, 2.8vw, 36px); letter-spacing: -.035em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.proof span { display: block; margin-top: 8px; font-size: 14px; line-height: 1.45; color: var(--ash); }
@media (min-width: 900px) {
  .proof { grid-template-columns: repeat(4, 1fr); }
  .proof li { padding: 24px 24px 8px; border-left: 1px solid var(--line); }
  .proof li:first-child { padding-left: 0; border-left: 0; }
  .proof li:nth-child(n+3) { border-top: 0; }
}

/* ---------- Sections ---------- */
.sec { padding: var(--sec) 0; }
.sec + .sec { padding-top: 0; }
.sec-h { display: grid; gap: 20px; margin-bottom: clamp(40px, 5vw, 64px); }
.sec-h h2 { font-weight: 400; font-size: clamp(32px, 4vw, 54px); line-height: 1.06; letter-spacing: -.032em; max-width: 32ch; text-wrap: balance; }
.sec-h h2 span { display: block; color: var(--ash); }
.final h2 { font-weight: 400; font-size: clamp(36px, 4.8vw, 62px); line-height: 1.02; letter-spacing: -.035em; max-width: 18ch; text-wrap: balance; }
.sec-h p { max-width: 44ch; font-size: 18px; line-height: 1.55; color: var(--ash); text-wrap: pretty; }
@media (min-width: 900px) { .sec-h.row { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: end; } .sec-h.row > :last-child { justify-self: start; } }

.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px; }
.stmt { font-size: 22px; line-height: 1.32; letter-spacing: -.02em; text-wrap: pretty; }
.stmt span { color: var(--ash); }

.ok { position: relative; width: 22px; height: 22px; flex: none; border-radius: 50%; background: var(--blue); }
.ok::after { content: ""; position: absolute; left: 8px; top: 4.5px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* ---------- Pains ---------- */
.sector-context { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.sector-context li { min-width: 0; display: flex; align-items: center; gap: 16px; padding: 10px 18px 10px 10px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); }
.sector-context b { display: block; font-size: 15.5px; line-height: 1.35; font-weight: 500; }
.sector-context small { display: block; margin-top: 3px; color: var(--ash); font-size: 13.5px; line-height: 1.45; }
.pains { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.pains > * { min-width: 0; }
@media (min-width: 900px) { .pains { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pain { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 32px 32px 0; overflow: hidden; background: var(--wash); border: 0; isolation: isolate; }
.pain::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgb(41 47 221 / .26) 1px, transparent 1.4px); background-size: 14px 14px; -webkit-mask: radial-gradient(circle at 100% 0, #000, transparent 58%); mask: radial-gradient(circle at 100% 0, #000, transparent 58%); }
.pain .stmt { max-width: 26ch; font-size: 24px; }

/* App window bleeding off the bottom of each card */
.pain .vis { position: relative; display: grid; align-content: start; height: 236px; margin-top: 36px; padding: 58px 22px 20px; border: 1px solid var(--line); border-bottom: 0; border-radius: var(--r-md) var(--r-md) 0 0; background: var(--paper); box-shadow: var(--sh-3); font-size: 13.5px; overflow: hidden; transition: transform .5s var(--ease); }
.pain:hover .vis { transform: translateY(-6px); }
.pain .vis::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 40px; border-bottom: 1px solid var(--line);
  background: radial-gradient(circle at 20px 20px, #DADAD6 4px, transparent 4.5px), radial-gradient(circle at 34px 20px, #DADAD6 4px, transparent 4.5px), radial-gradient(circle at 48px 20px, #DADAD6 4px, transparent 4.5px), #FAFAF8; }
.pain .vis::after { content: attr(data-title); position: absolute; top: 0; left: 66px; height: 40px; display: flex; align-items: center; font-size: 12px; font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.badge { position: absolute; top: 9px; right: 12px; z-index: 1; display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 999px; background: var(--blue-50); color: var(--blue); font-size: 11.5px; font-weight: 500; white-space: nowrap; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.bad-b { background: #FCECEA; color: var(--bad); }

/* 1 · WhatsApp thread */
.chat { gap: 7px; }
.chat .m { justify-self: start; display: flex; align-items: end; gap: 10px; max-width: 88%; padding: 7px 11px 6px; border-radius: 4px 12px 12px 12px; background: var(--bone); font-size: 13px; line-height: 1.35; }
.chat .m time { font-size: 10.5px; color: var(--ash); font-variant-numeric: tabular-nums; white-space: nowrap; }
.chat .me { justify-self: end; border-radius: 12px 4px 12px 12px; background: var(--blue); color: #fff; }
.chat .me time { color: rgb(255 255 255 / .72); }
.typing { justify-self: start; display: inline-flex; gap: 4px; padding: 10px 12px; border-radius: 4px 12px 12px 12px; background: var(--bone); }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: #A3A5AE; }

/* 2 · Stock mismatch */
.cmp { grid-template-columns: 1fr auto auto; column-gap: 0; font-variant-numeric: tabular-nums; }
.cmp > span:not(.badge):not(.scan) { padding: 11px 0; border-bottom: 1px solid var(--line); }
.cmp > .h { padding-top: 0; color: var(--ash); font-size: 12px; }
.cmp .n { padding-left: 28px !important; text-align: right; }
.cmp .bad { color: var(--bad); font-weight: 500; }
.scan { position: absolute; left: 0; right: 0; top: 64px; height: 2px; background: linear-gradient(90deg, transparent, var(--blue) 30%, var(--blue) 70%, transparent); opacity: 0; pointer-events: none; }

/* 3 · Unanswered enquiries */
.views { display: flex; align-items: end; gap: 10px; height: 116px; border-bottom: 1px solid var(--line-2); }
.views i { position: relative; flex: 1; height: var(--h); border-radius: 4px 4px 0 0; background: #B9BCF6; overflow: hidden; transform-origin: bottom; }
.views i:last-child { background: var(--blue); }
.views i::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--r); background: repeating-linear-gradient(135deg, #C8443B 0 3px, #EFB8B2 3px 6px); transform-origin: top; }
.views-l { display: flex; gap: 18px; margin-top: 12px; font-size: 12px; color: var(--ash); }
.views-l span { display: inline-flex; align-items: center; gap: 6px; }
.lg-ok, .lg-bad { width: 8px; height: 8px; border-radius: 2px; background: #B9BCF6; }
.lg-bad { background: repeating-linear-gradient(135deg, #C8443B 0 2px, #EFB8B2 2px 4px); }

/* 4 · Orders waiting in the inbox */
.inbox { gap: 8px; min-width: 0; }
.inbox div { min-width: 0; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--bone); }
.inbox div::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); }
.inbox div span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.inbox small { color: var(--ash); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* One orchestrated play per card, when it scrolls into view */
@media (prefers-reduced-motion: no-preference) {
  .js .pain:not(.play) :is(.a1, .a2, .a3, .a4, .views i) { opacity: 0; }
  .pain.play .a1 { animation: rise .55s var(--ease) .15s both; }
  .pain.play .a2 { animation: rise .55s var(--ease) .75s both; }
  .pain.play .a3 { animation: rise .55s var(--ease) 1.35s both; }
  .pain.play .a4 { animation: rise .55s var(--ease) 1.95s both; }
  .pain.play .views i { animation: grow .8s var(--ease) both; }
  .pain.play .views i:nth-child(2) { animation-delay: .08s; } .pain.play .views i:nth-child(3) { animation-delay: .16s; }
  .pain.play .views i:nth-child(4) { animation-delay: .24s; } .pain.play .views i:nth-child(5) { animation-delay: .32s; }
  .pain.play .views i:nth-child(6) { animation-delay: .4s; }
  .pain.play .views i::after { animation: grow .7s var(--ease) 1s both; }
  .pain.play .scan { animation: scan 1.8s var(--ease) .5s both; }
  .pain.play .cmp .bad { animation: flag 1.2s ease .9s both; }
  .pain.play .typing i { animation: blink 1.2s ease-in-out 2.4s infinite; }
  .pain.play .typing i:nth-child(2) { animation-delay: 2.55s; } .pain.play .typing i:nth-child(3) { animation-delay: 2.7s; }
  .pain.play .badge::before { animation: beat 1.6s ease-in-out 2.6s infinite; }
}
@keyframes rise { from { opacity: 0; transform: translateY(10px) scale(.98); } }
@keyframes grow { from { transform: scaleY(0); } }
@keyframes scan { 0% { opacity: 0; top: 64px; } 15%, 85% { opacity: 1; } 100% { opacity: 0; top: 150px; } }
@keyframes flag { from { color: var(--ink); } }
@keyframes blink { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-2px); } }
@keyframes beat { 50% { opacity: .3; } }

/* ---------- Showcase tabs ---------- */
.show { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px 24px; }
.show-switcher { grid-row: span 2; display: flex; flex-direction: column; justify-content: space-between; min-width: 0; }
.tabs { display: grid; gap: 6px; }
.tabs button { position: relative; display: grid; grid-template-columns: 28px 1fr; gap: 6px 14px; align-content: start; padding: 22px 20px; text-align: left; border: 1px solid transparent; border-radius: var(--r-md); background: transparent; color: var(--ink); font: inherit; cursor: pointer; transition: border-color .2s var(--ease), background-color .2s var(--ease), box-shadow .2s var(--ease); }
.tabs button::before { content: ""; position: absolute; left: -1px; top: 18px; bottom: 18px; width: 2px; border-radius: 2px; background: var(--blue); transform: scaleY(0); transition: transform .3s var(--ease); }
.tabs button b { font-weight: 500; font-size: 17px; line-height: 1.3; letter-spacing: -.01em; }
.tabs button span { grid-column: 2; color: var(--ash); font-size: 14px; line-height: 1.5; }
.tabs .ic { width: 22px; height: 22px; margin-top: 1px; color: var(--ash); transition: color .2s var(--ease); }
.tabs button:hover { background: rgb(11 12 26 / .03); }
.tabs button[aria-selected="true"] { border-color: var(--line); background: var(--paper); box-shadow: var(--sh-2); }
.tabs button[aria-selected="true"]::before { transform: none; }
.tabs button[aria-selected="true"] .ic { color: var(--blue); }
.show-assurance { padding: 24px 20px; font-size: 14px; line-height: 1.6; color: var(--ash); }
.show-assurance b { font-weight: 500; color: var(--ink); }
.stage2 { position: relative; min-width: 0; height: 500px; border-radius: var(--r-xl); border: 1px solid var(--line); overflow: hidden; isolation: isolate; }
.pane { position: absolute; inset: 0; z-index: 1; padding: 40px 40px 0; }
#p3 { padding-top: 64px; }
.pane.on > * { animation: up .6s var(--ease) both; }
@keyframes up { from { opacity: 0; transform: translateY(14px); } }
.show-footer { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.show-footer .lnk { font-size: 14.5px; min-height: 44px; }
.sim-cap2 { font-size: 12.5px; color: var(--ash); }

/* pane 1: client catalog */
.browser { height: 100%; background: #fff; border: 1px solid var(--line); border-bottom: 0; border-radius: var(--r-md) var(--r-md) 0 0; overflow: hidden; font-size: 13px; box-shadow: var(--sh-3); }
.br-h { display: flex; align-items: center; gap: 14px; height: 40px; padding: 0 14px; background: #F4F4F2; border-bottom: 1px solid var(--line); }
.dots { display: flex; gap: 6px; }
.dots i { width: 10px; height: 10px; border-radius: 50%; background: #DADAD6; }
.url { margin: 0 auto; padding: 4px 14px; border-radius: var(--r-sm); background: #fff; color: var(--ash); font-size: 12px; }
.site-nav { display: flex; align-items: center; gap: 16px; height: 52px; padding: 0 20px; border-bottom: 1px solid var(--line); background: #1C2A36; color: #C9D3DC; }
.site-nav b { color: #fff; font-weight: 600; letter-spacing: .04em; margin-right: 12px; }
.stage2 .site-nav span:not(.cart) { display: none; }
.cart { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--r-sm); background: #F28C28; color: #1C2A36; font-weight: 500; }
.cnt { position: relative; display: inline-grid; width: 20px; height: 20px; border-radius: 50%; background: #1C2A36; color: #fff; font-style: normal; font-size: 11.5px; overflow: hidden; }
.cnt i { grid-area: 1 / 1; display: grid; place-items: center; font-style: normal; transition: transform .4s var(--ease); }
.cnt i:last-child { transform: translateY(100%); }
.site-b { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 16px; padding: 20px; }
.filters { display: grid; gap: 4px; align-content: start; }
.filters li { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: var(--r-sm); color: #3B4652; }
.filters .on { background: #EEF2F5; color: #1C2A36; font-weight: 500; }
.filters .f-h { margin-top: 10px; color: var(--ash); font-size: 12px; }
.filters li i { width: 13px; height: 13px; border: 1.5px solid #9AA6B1; border-radius: 3px; }
.filters li i.x { background: #1C2A36; border-color: #1C2A36; }
.prods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.prod { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 16px; min-height: 280px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.code { font: 400 18px/1.4 var(--mono); color: #3B4652; padding: 18px 0 22px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.prod b { font-weight: 500; color: #1C2A36; }
.prod small { color: var(--ash); font-size: 12px; }
.stock { margin-top: 6px; align-self: flex-start; padding: 2px 8px; border-radius: 10px; background: #E5F4EA; color: #17663A; font-size: 11.5px; }
.stock.low { background: #FFF1DD; color: #8A5300; }
.add { margin-top: auto; display: grid; padding: 10px 8px; border-radius: var(--r-sm); background: #F28C28; color: #1C2A36; font-weight: 500; text-align: center; font-size: 12.5px; overflow: hidden; }
.add.done { background: #1C2A36; color: #fff; }
.add.sw em { grid-area: 1 / 1; font-style: normal; transition: transform .4s var(--ease), opacity .4s; }
.add.sw em:last-child { transform: translateY(120%); opacity: 0; }
.pane.on .pick .add.sw { animation: tobtn .01s linear 1.6s forwards; }
@keyframes tobtn { to { background: #1C2A36; color: #fff; } }
@media (prefers-reduced-motion: no-preference) {
  .pane.on .pick .add.sw em:first-child { animation: outup .4s var(--ease) 1.6s forwards; }
  .pane.on .pick .add.sw em:last-child { animation: inup .4s var(--ease) 1.6s forwards; }
  .pane.on .cnt i:first-child { animation: outup .4s var(--ease) 1.8s forwards; }
  .pane.on .cnt i:last-child { animation: inup .4s var(--ease) 1.8s forwards; }
  .pane.on .pick { animation: press .5s var(--ease) 1.4s; }
}
@keyframes outup { to { transform: translateY(-120%); opacity: 0; } }
@keyframes inup { to { transform: none; opacity: 1; } }
@keyframes press { 50% { transform: scale(.98); } }

/* pane 2: Odoo CRM kanban */
.odoo2 { height: 100%; background: var(--odoo-bg); border: 1px solid var(--line); border-bottom: 0; border-radius: var(--r-md) var(--r-md) 0 0; overflow: hidden; font-size: 13px; color: var(--o-text); box-shadow: var(--sh-3); }
.kb { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 16px; }
.col p { display: flex; justify-content: space-between; margin-bottom: 10px; font-weight: 500; color: #111827; font-size: 14px; }
.col p em { font-style: normal; color: var(--o-muted); font-weight: 400; }
.kc { position: relative; display: grid; gap: 3px; padding: 12px; margin-bottom: 8px; background: #fff; border: 1px solid var(--o-line); border-radius: var(--r-sm); }
.kc b { font-weight: 500; color: #111827; }
.kc small { color: var(--o-muted); }
.kc .src, .kc .amt { justify-self: start; margin-top: 4px; padding: 2px 8px; border-radius: 10px; font-size: 11.5px; background: #EEF0FF; color: var(--blue); }
.kc .src.w { background: #E4F6EA; color: #17663A; }
.kc .src.m { background: #FDECEC; color: #A1281F; }
.kc .amt { background: #EEF0F3; color: var(--o-text); font-variant-numeric: tabular-nums; }
.kc.won .amt { background: #E5F4EA; color: #17663A; }
.kc-new { border-color: var(--blue); box-shadow: 0 0 0 3px rgb(41 47 221 / .12); }
.kc .by { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 11.5px; font-weight: 500; color: var(--blue); }
.kc .by::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
@media (prefers-reduced-motion: no-preference) { .pane.on .kc-new { animation: drop .6s var(--ease) 1s both; } }
@keyframes drop { from { opacity: 0; transform: translateY(-16px) scale(.97); } }

/* pane 3: agent working an order */
.agent2 { display: grid; grid-template-columns: 1fr 1.2fr; gap: 16px; align-items: start; align-content: start; height: 100%; }
.mail { position: relative; padding: 20px; border-radius: 4px; background: #fff; border: 1px solid var(--line); font-size: 14px; box-shadow: var(--sh-2); }
.mail b { display: block; margin-top: 6px; font-weight: 500; font-size: 17px; }
.mail small { color: var(--ash); }
.att { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 10px; border-radius: var(--r); background: var(--bone); }
.steps2 { padding: 20px; border-radius: var(--r-md); background: var(--ink); color: #fff; display: grid; gap: 14px; font-size: 14.5px; box-shadow: var(--sh-3); }
.steps2 li { display: flex; align-items: center; gap: 12px; }
.steps2 li small { margin-left: auto; color: #8A8DA3; font-size: 12px; font-variant-numeric: tabular-nums; }
.steps2 .tick { width: 20px; height: 20px; background: #3DD68C; border-color: #3DD68C; }
.steps2 .tick::after { left: 6px; top: 3px; width: 5px; height: 9px; border-color: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
  .pane.on .steps2 li { animation: up .5s var(--ease) backwards; }
  .pane.on .steps2 li:nth-child(1) { animation-delay: .6s; } .pane.on .steps2 li:nth-child(2) { animation-delay: 1.4s; } .pane.on .steps2 li:nth-child(3) { animation-delay: 2.2s; } .pane.on .steps2 li:nth-child(4) { animation-delay: 3s; }
}
.agent-result { grid-column: 1 / -1; overflow: hidden; border-radius: var(--r-md); background: #fff; box-shadow: var(--sh-3); }
.agent-result .o-nav { justify-content: space-between; }
.agent-result .o-nav > span { padding: 3px 8px; border: 1px solid rgb(255 255 255 / .4); border-radius: 4px; font-size: 11px; }
.result-body { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 22px 24px; font-size: 14px; }
.result-body b { font-weight: 500; }
.result-body span { display: block; margin-top: 6px; color: var(--ash); font-size: 12px; }
.result-body dl { display: grid; gap: 12px; }
.result-body dl > div { display: flex; justify-content: space-between; gap: 16px; }
.result-body dt { color: var(--ash); font-size: 12px; }
.result-body dd { font-size: 12px; font-weight: 500; }

/* ---------- Plans: datasheets ---------- */
.plans { display: grid; gap: 12px; }
@media (min-width: 1100px) { .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
.plan { display: flex; flex-direction: column; min-width: 0; padding: 0; overflow: hidden; border-color: var(--line-2); transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.plan > * { min-width: 0; }
.plan:hover, .plan:focus-within { border-color: #B9BAB5; box-shadow: var(--sh-2); }
.plan-top { padding: 26px 28px 24px; background: var(--bone); border-bottom: 1px solid var(--line); }
.plan-heading { display: flex; align-items: start; justify-content: space-between; gap: 20px; }
.plan-heading h3 { font-weight: 500; font-size: 23px; letter-spacing: -.025em; line-height: 1.2; overflow-wrap: anywhere; }
.plan-heading .ic { width: 24px; height: 24px; color: var(--ash); }
.plan .for { margin-top: 6px; font-size: 15px; color: var(--ash); }
.plan-time { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 13px; color: var(--ink-2); }
.plan-time::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); }
.plan-body { display: flex; flex-direction: column; flex: 1; padding: 28px; }
.plan .price { font-size: clamp(48px, 4.4vw, 60px); font-weight: 400; letter-spacing: -.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.plan .price small { font-size: 15px; letter-spacing: 0; color: var(--ash); margin-left: 8px; }
.plan .mo { margin-top: 12px; font-size: 16px; font-weight: 500; color: var(--ink); }
.plan dl { margin: 28px 0; border-top: 1px solid var(--ink); }
.plan dl div { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; line-height: 1.45; }
.plan dt { color: var(--ash); flex: none; }
.plan dd { text-align: right; max-width: 72%; overflow-wrap: anywhere; }
.plan .acts { margin-top: auto; display: grid; gap: 16px; }
.plan .acts .b { width: 100%; }
.plan .acts .lnk { justify-self: center; font-size: 14px; }
.plan:hover .b-o, .plan:focus-within .b-o { background: var(--ink); color: #fff; }
.fine { margin-top: 16px; font-size: 13.5px; color: var(--ash); }

/* ---------- Clients + case ---------- */

.case-feature { position: relative; margin-top: 48px; padding: clamp(28px, 4.5vw, 56px); border-radius: var(--r-xl); background: var(--night); color: #fff; overflow: hidden; isolation: isolate; }
.case-feature::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgb(255 255 255 / .07) 1px, transparent 1.3px); background-size: 20px 20px; -webkit-mask: linear-gradient(200deg, #000, transparent 55%); mask: linear-gradient(200deg, #000, transparent 55%); }
.case-heading { display: flex; justify-content: space-between; align-items: end; gap: 40px; padding-bottom: 36px; border-bottom: 1px solid var(--night-line); }
.case-heading h3 { font-size: 30px; line-height: 1.15; font-weight: 500; letter-spacing: -.02em; }
.case-heading p { margin-top: 8px; max-width: 36ch; font-size: 15px; color: var(--night-text); }
.case-main-stat { flex: none; text-align: right; }
.case-main-stat b { display: block; font-size: clamp(48px, 6vw, 76px); line-height: 1; font-weight: 400; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.case-main-stat span { display: block; max-width: 30ch; margin: 12px 0 0 auto; font-size: 14px; line-height: 1.5; color: var(--night-text); }
.quote { display: grid; gap: 40px; margin-top: 40px; }
@media (min-width: 900px) { .quote { grid-template-columns: 2fr 1fr; gap: 72px; align-items: end; } }
.quote blockquote p { font-size: clamp(24px, 2.7vw, 34px); line-height: 1.24; letter-spacing: -.022em; text-indent: -.42em; text-wrap: pretty; }
.quote figcaption { display: flex; align-items: center; gap: 14px; margin-top: 32px; font-size: 14px; line-height: 1.5; }
.quote figcaption img { width: 44px; height: 44px; border-radius: 50%; }
.quote figcaption b { font-weight: 500; color: #fff; }
.quote figcaption span { color: var(--night-text); }
.figs { border-top: 1px solid var(--night-line); }
.figs div { padding: 18px 0; border-bottom: 1px solid var(--night-line); }
.figs b { display: block; font-weight: 400; font-size: 30px; letter-spacing: -.03em; line-height: 1.1; color: #fff; font-variant-numeric: tabular-nums; }
.figs span { display: block; margin-top: 4px; font-size: 14px; color: var(--night-text); }

/* ---------- Process (a real sequence) ---------- */
.steps { display: grid; counter-reset: s; border-top: 1px solid var(--ink); }
.steps li { counter-increment: s; display: grid; grid-template-columns: 56px 1fr; gap: 0 8px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.steps li::before { content: counter(s, decimal-leading-zero); font: 400 13px/1.9 var(--mono); color: var(--ash); grid-row: span 3; font-variant-numeric: tabular-nums; }
.steps h3 { font-weight: 500; font-size: 19px; letter-spacing: -.015em; line-height: 1.3; }
.steps p { margin-top: 8px; color: var(--ash); font-size: 15px; line-height: 1.55; max-width: 34ch; }
.split { margin-top: 20px; max-width: 280px; }
.split .bar2 { display: flex; gap: 3px; height: 8px; }
.split i { border-radius: 2px; }
.split i:first-child { width: 30%; background: var(--line-2); }
.split i:last-child { flex: 1; background: var(--blue); }
.split .lg { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12.5px; color: var(--ash); font-variant-numeric: tabular-nums; }
@media (min-width: 900px) {
  .steps { grid-template-columns: repeat(4, 1fr); border-top: 0; }
  .steps li { position: relative; display: block; padding: 0 32px 0 0; border: 0; }
  .steps li::before { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 28px; background: var(--paper); border: 1px solid var(--line-2); border-radius: 50%; line-height: 1; }
  .steps li:not(:last-child)::after { content: ""; position: absolute; top: 20px; left: 52px; right: 12px; height: 2px; margin-top: -.5px; background: linear-gradient(var(--blue), var(--blue)) 0 0 / 100% 100% no-repeat, var(--line-2); }
  .js .steps:not(.play) li::after { background-size: 0 100%; }
  .steps.play li::after { animation: fillx .9s var(--ease) both; }
  .steps.play li:nth-child(2)::after { animation-delay: .9s; } .steps.play li:nth-child(3)::after { animation-delay: 1.8s; }
  .steps li:first-child::before { background: var(--ink); border-color: var(--ink); color: #fff; }
}

/* ---------- Team ---------- */
.team { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
@media (min-width: 900px) { .team { grid-template-columns: 1fr 1fr 2fr; gap: 16px; } }
.person { padding: 28px; }
.photo { width: 64px; height: 64px; border-radius: 50%; background: var(--bone); border: 1px solid var(--line); display: grid; place-items: center; font-size: 22px; letter-spacing: -.02em; color: var(--ink-2); }
.person figcaption { padding: 28px 0 0; }
.person b { display: block; font-weight: 500; font-size: 18px; letter-spacing: -.01em; }
.person span { display: block; margin-top: 4px; font-size: 14.5px; line-height: 1.5; color: var(--ash); }
.team-note { grid-column: 1 / -1; display: flex; flex-direction: column; justify-content: space-between; gap: 28px; background: var(--ink); border-color: var(--ink); color: #fff; }
.team-note .stmt { font-size: 26px; }
.team-note .stmt span { color: var(--night-text); }
.team-note .acts { display: flex; flex-wrap: wrap; gap: 10px; }
.team-note .acts .b { flex: 1; }
.team-note .b-o { background: transparent; border-color: #45485E; color: #fff; box-shadow: none; }
.team-note .b-o:hover { border-color: #fff; }
@media (min-width: 900px) { .team-note { grid-column: auto; } }

/* ---------- FAQ: hairline list ---------- */
.faq-wrap { display: grid; gap: 32px; }
@media (min-width: 900px) { .faq-wrap { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; } .faq-wrap .sec-h { position: sticky; top: 112px; align-self: start; } }
.faq { border-top: 1px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--line-2); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; min-height: 76px; padding: 20px 0; cursor: pointer; list-style: none; font-size: 18px; line-height: 1.4; letter-spacing: -.012em; transition: color .2s var(--ease); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--blue); }
.faq summary .ic { width: 30px; height: 30px; padding: 7px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--paper); transition: transform .3s var(--ease), background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.faq details[open] summary .ic { transform: rotate(45deg); background: var(--ink); border-color: var(--ink); color: #fff; }
.faq details p { padding: 0 56px 26px 0; color: var(--ash); max-width: 62ch; font-size: 16.5px; line-height: 1.65; }
.faq details::details-content { block-size: 0; overflow: hidden; transition: block-size .35s var(--ease), content-visibility .35s allow-discrete; }
.faq details[open]::details-content { block-size: auto; }

/* ---------- Final CTA ---------- */
.final { padding: var(--sec) 0; background: var(--wash); border-top: 1px solid var(--line-2); }
.final-in { display: grid; gap: 48px; }
@media (min-width: 980px) { .final-in { grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; } }
.final .lede { margin-top: 24px; color: var(--ash); font-size: 18px; max-width: 38ch; }
.final ol { margin-top: 40px; border-top: 1px solid var(--ink); counter-reset: f; max-width: 480px; }
.final ol li { display: flex; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--line-2); counter-increment: f; font-size: 16px; }
.final ol li::before { content: counter(f, decimal-leading-zero); font: 400 12.5px/2 var(--mono); color: var(--ash); }
.form { display: grid; gap: 22px; padding: 36px; border-radius: var(--r-xl); background: var(--paper); border: 1px solid var(--line); box-shadow: var(--sh-3); }
.form-heading h3 { font-size: 24px; font-weight: 500; line-height: 1.25; letter-spacing: -.02em; }
.form-heading p { margin-top: 6px; font-size: 14.5px; color: var(--ash); }
.field { display: grid; gap: 8px; }
.field > label, .field > legend { padding: 0; font-size: 14px; font-weight: 500; color: var(--ink-2); }
.field input:not([type=radio]) { height: 50px; padding: 0 14px; width: 100%; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--paper); font: 400 16px var(--sans); color: var(--ink); box-shadow: inset 0 1px 2px rgb(11 12 26 / .04); transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.field input:not([type=radio]):hover { border-color: #B9BAB5; }
.field input:not([type=radio]):focus { outline: 0; border-color: var(--blue); box-shadow: 0 0 0 4px rgb(41 47 221 / .12); }
.field input:not([type=radio])::placeholder { color: #8A8C96; }
.field input:not([type=radio]):user-invalid, .tried .field input:not([type=radio]):invalid { border-color: var(--bad); }
.field .err { display: none; font-size: 13.5px; color: var(--bad); }
.field input:user-invalid + .err, .tried .field input:invalid + .err { display: block; }
.tried fieldset:has(:invalid) > .err { display: block; margin-top: 4px; }
.two { display: grid; gap: 16px; }
@media (min-width: 600px) { .two { grid-template-columns: 1fr 1fr; } }
fieldset.field { border: 0; margin: 0; padding: 0; min-width: 0; }
.opts { display: grid; gap: 8px; margin-top: 4px; }
@media (min-width: 600px) { .opts { grid-template-columns: 1fr 1fr; } }
.opt { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--r); cursor: pointer; font-size: 14.5px; line-height: 1.3; transition: border-color .2s var(--ease), background-color .2s var(--ease), box-shadow .2s var(--ease); }
.opt:hover { border-color: #B9BAB5; }
.opt input { appearance: none; -webkit-appearance: none; margin: 0; width: 18px; height: 18px; flex: none; border-radius: 50%; border: 1.5px solid #9C9EA6; display: grid; place-items: center; transition: border-color .2s var(--ease); }
.opt input::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); transform: scale(0); transition: transform .2s var(--ease); }
.opt input:checked { border-color: var(--blue); }
.opt input:checked::before { transform: scale(1); }
.opt:has(input:checked) { border-color: var(--blue); background: var(--blue-50); box-shadow: inset 0 0 0 1px var(--blue); }
.opt:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; }
.tried .opts:has(:invalid) .opt { border-color: var(--bad); }
.form .b-p { min-height: 52px; width: 100%; margin-top: 4px; font-size: 16px; }
.form-note { font-size: 13.5px; line-height: 1.6; color: var(--ash); text-align: center; }
.form-status { font-size: 15px; line-height: 1.5; font-weight: 500; }
.form-status:empty { display: none; }

/* ---------- Footer ---------- */
.foot { background: var(--bone); color: var(--ash); border-top: 1px solid var(--line); padding: 64px 0 112px; font-size: 14.5px; }
.foot-in { display: grid; gap: 40px; }
.foot-brand img { width: 98px; height: auto; margin-bottom: 18px; }
.foot-brand p { max-width: 32ch; line-height: 1.6; }
.foot-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.foot h4 { margin: 0 0 14px; font-size: 13px; font-weight: 500; color: var(--ink); }
.foot li + li { margin-top: 8px; }
.foot a { color: var(--ash); transition: color .2s var(--ease); }
.foot a:hover { color: var(--ink); }
.credits { margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ash); }
.credits a { text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 900px) { .foot { padding-bottom: 48px; } .foot-in { grid-template-columns: 1fr 1.4fr; } .foot-cols { grid-template-columns: repeat(3, 1fr); } }

/* Sticky WhatsApp (phones) */
.sticky { position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: rgb(246 246 243 / .9); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); border-top: 1px solid var(--line); }
.sticky .b { width: 100%; min-height: 48px; }
.sticky .b:not(.b-p) { background: var(--wa); color: #fff; box-shadow: inset 0 1px 0 rgb(255 255 255 / .16), 0 4px 12px -6px rgb(15 122 63 / .6); }
@media (min-width: 960px) { .sticky { display: none; } }

/* ================= Responsive ================= */
@media (max-width: 1099px) {
  .show { grid-template-columns: minmax(0, 1fr); }
  .show-switcher { grid-row: auto; }
  .tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tabs button { padding: 18px 16px; }
  .tabs button::before { left: 18px; right: 18px; top: auto; bottom: -1px; width: auto; height: 2px; transform: scaleX(0); }
  .tabs button[aria-selected="true"]::before { transform: none; }
  .tabs button b { font-size: 16px; }
  .show-assurance { display: none; }
  .hero > .in { column-gap: 32px; }
  .hero .ask { flex-direction: column; }
  .hero .ask input { min-height: 44px; }
  .sector-context li { flex-direction: column; align-items: start; padding: 10px 10px 16px; }
  .sector-context li > span { padding: 0 6px; }
}
@media (max-width: 959px) {
  .nav .in { gap: 12px; min-height: 64px; }
  .nav .logo img { width: 86px; }
  .nav .b { padding-inline: 12px; font-size: 13.5px; }
  .js .menu-toggle { display: inline-grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; padding: 0; border: 1px solid var(--line-2); border-radius: var(--r); color: var(--ink); background: var(--paper); cursor: pointer; }
  .js .links { position: absolute; top: calc(100% + 8px); left: var(--gutter); right: var(--gutter); margin: 0; padding: 8px; display: none; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper); box-shadow: var(--sh-3); }
  .js .nav.menu-open .links { display: grid; }
  .links a { min-height: 44px; display: flex; align-items: center; }
  html:not(.js) .links { display: flex; flex-wrap: wrap; margin: 0; }
  html:not(.js) .nav .in { height: auto; flex-wrap: wrap; padding-block: 12px; }
}
@media (max-width: 899px) {
  .hero > .in { display: block; }
  .hero h1 { margin-bottom: 24px; font-size: clamp(44px, 8vw, 72px); max-width: 15ch; }
  .hero .sub { max-width: 44ch; }
  .hero .ask { margin-top: 28px; flex-direction: row; max-width: none; }
  .hero-note { max-width: none; }
  .sim { height: auto; margin-top: 40px; padding: 60px 28px 0; display: grid; gap: 56px; }
  .phone, .agent, .odoo { position: relative; inset: auto; width: auto; }
  .phone, .agent { max-width: 360px; }
  .odoo { margin-right: -36px; height: 500px; }
  .o-hide, .o-nav span:not(.o-co), .o-status .st3 { display: none; }
  .o-fields { grid-template-columns: 1fr; }
  .o-sheet { margin: 14px 12px 0 10px; padding: 16px; }
  .o-tot { max-width: 100%; }
  .demo-footer { gap: 16px; }
  .stage2 { height: 520px; }
  .pane { padding: 24px 20px 0; }
  .site-b { grid-template-columns: 1fr; padding: 16px; }
  .filters { display: none; }
  .prods { grid-template-columns: 1fr 1fr; }
  .prod:nth-child(3) { display: none; }
  .kb { grid-template-columns: repeat(3, 72%); overflow: hidden; }
  .agent2 { grid-template-columns: 1fr; grid-template-rows: max-content max-content; gap: 12px; }
  .show-footer { flex-wrap: wrap; }
  .team .team-note { grid-column: 1 / -1; }
  .form { padding: 28px; }
  .case-heading { flex-direction: column; align-items: start; gap: 24px; }
  .case-main-stat { text-align: left; }
  .case-main-stat span { margin-left: 0; }
}
@media (max-width: 767px) {
  .sector-context { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .sector-context li { flex-direction: row; align-items: center; padding: 8px 16px 8px 8px; }
  .sector-context li > span { padding: 0; }
}
@media (max-width: 599px) {
  :root { --gutter: 20px; }
  body { font-size: 17px; }
  .bar { font-size: 12.5px; line-height: 1.5; }
  .hero h1 { font-size: clamp(40px, 11.4vw, 60px); max-width: none; text-wrap: initial; }
  .hero .ask { flex-direction: column; }
  .hero .ask input { min-height: 48px; }
  .hero .sub { font-size: 18px; }
  .sim { padding: 56px 22px 0; gap: 52px; border-radius: var(--r-lg); }
  .sim .phone, .sim .agent { max-width: none; }
  .sim .odoo { height: 440px; margin-right: -24px; }
  .sim .o-status { display: none; }
  .sim .o-fields div:nth-child(2) { display: none; }
  .sim .o-lines { font-size: 11px; }
  .sim .o-tabs span:nth-child(2) { display: none; }
  .sim .o-lines th, .sim .o-lines td { padding-inline: 4px; }
  .sim .o-tot { width: 100%; font-size: 12px; }
  .sim .o-sheet { padding: 16px 10px; margin-left: 0; margin-right: 12px; }
  .sim .o-fields div { grid-template-columns: 64px 1fr; }
  .demo-footer { align-items: start; }
  .demo-footer p { font-size: 13px; }
  .demo-footer .replay { font-size: 12.5px; }
  .proof { margin-top: 36px; }
  .partners > div { gap: 10px; }
  .partners img { height: 24px; max-width: 105px; }
  .tabs { gap: 6px; }
  .tabs button { grid-template-columns: 1fr; padding: 14px 10px; gap: 8px; }
  .tabs button::before { left: 10px; right: 10px; }
  .tabs .ic { width: 20px; height: 20px; }
  .tabs button b { font-size: 13.5px; line-height: 1.35; }
  .tabs button span { display: none; }
  .stage2 { border-radius: var(--r-lg); }
  .pane { padding: 20px 14px 0; }
  .site-nav { padding: 0 12px; gap: 6px; }
  .site-nav b { font-size: 10px; margin: 0; letter-spacing: 0; }
  .cart { font-size: 10px; padding: 6px; gap: 4px; }
  .url { font-size: 10px; padding: 4px; }
  .dots { gap: 4px; }
  .dots i { width: 6px; height: 6px; }
  .site-b { padding: 12px; }
  .prods { gap: 8px; }
  .prod { padding: 10px; }
  .code { font-size: 14px; }
  .prod b { font-size: 12px; }
  .prod small { font-size: 11px; }
  .add { font-size: 11px; padding: 10px 6px; }
  .kb { grid-template-columns: 1fr; overflow-y: auto; height: 420px; }
  .agent2 { gap: 14px; }
  .stage2:has(#p3:not([hidden])) { height: 620px; }
  .result-body { grid-template-columns: 1fr; gap: 16px; padding: 16px; }
  .mail { padding: 16px; font-size: 12.5px; }
  .mail b { font-size: 16px; }
  .steps2 { padding: 16px; font-size: 12.5px; line-height: 1.5; }
  .steps2 li small { display: none; }
  .stmt { font-size: 20px; }
  .pain { padding: 24px 22px 0; }
  .pain .stmt { font-size: 21px; }
  .pain .vis { height: 226px; margin-top: 28px; padding: 54px 16px 16px; }
  .pain .vis::after { display: none; }
  .cmp { font-size: 12.5px; }
  .cmp .n { padding-left: 14px !important; }
  .inbox { font-size: 12.5px; }
  .plan-top { padding: 22px 22px 20px; }
  .plan-body { padding: 22px; }
  .plan dl div { font-size: 14px; }

  .team { grid-template-columns: 1fr; }
  .person { display: flex; align-items: center; gap: 18px; padding: 20px; }
  .photo { flex-shrink: 0; width: 56px; height: 56px; font-size: 19px; }
  .person figcaption { padding: 0; }
  .team-note .stmt { font-size: 22px; }
  .team-note .acts { flex-direction: column; }
  .faq summary { font-size: 16.5px; gap: 16px; }
  .faq details p { padding-right: 0; }
  .form { padding: 22px; }
  .form .opts { grid-template-columns: 1fr; }
  .foot a { display: inline-flex; align-items: center; min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@keyframes fillx { from { background-size: 0 100%; } }
.num { font-style: normal; font-variant-numeric: tabular-nums; }


/* ================= Apple-style finish ================= */
.b { border-radius: 980px; }
.ask { border-radius: 999px; padding: 6px 6px 6px 10px; }
.ask .b { padding-inline: 22px; }
@media (max-width: 1099px) { .hero .ask { border-radius: 22px; } }
.hero h1 { font-weight: 500; letter-spacing: -.055em; }
.sec-h h2 { font-weight: 500; letter-spacing: -.04em; }
.sec-h h2 span { color: var(--ash); }
.final h2 { font-weight: 500; letter-spacing: -.04em; }
.tabs button, .opt, .field input:not([type=radio]) { border-radius: 14px; }
.plan, .pain, .faq-wrap .faq, .card { border-radius: 22px; }
.sim, .stage2, .case-feature { border-radius: 28px; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .stage2, .case-feature, .plans { animation: rise-in linear both; animation-timeline: view(); animation-range: entry 0% cover 28%; }
    .sim { animation: scale-in linear both; animation-timeline: view(); animation-range: entry 10% cover 30%; }
  }
}
@keyframes rise-in { from { opacity: .35; transform: translateY(40px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes scale-in { from { transform: scale(.95); } to { transform: none; } }

/* ================= v2: shorter home, logo strip, flow row, pricing, subpages ================= */
:root { --sec: clamp(56px, 6vw, 88px); }
.sec-h { margin-bottom: clamp(28px, 3.5vw, 44px); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* Logo strip: same weight for every logo */
.clients { padding: 40px 0 0; }
.clients-t { margin-bottom: 20px; font-size: 14px; color: var(--ash); }
.clients-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 24px; align-items: center; justify-items: center; }
.clients-row img { height: 30px; width: auto; max-width: 120px; object-fit: contain; filter: brightness(0); opacity: .7; }
@media (min-width: 900px) { .clients-row { display: flex; justify-content: space-between; } }

/* Sector tiles: icons instead of photos */
.sector-context li { padding: 14px 18px; }
.sector-context .ic { width: 28px; height: 28px; flex: none; color: var(--blue); }
@media (max-width: 899px) { .sector-context li { padding: 12px 16px; } }
.pain { padding: 24px 24px 0; }
.pain .vis { margin-top: 24px; height: 210px; }

/* Flow: one row of four steps */
.flow { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); counter-reset: none; }
@media (min-width: 700px) { .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .flow { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
.flow li { padding: 24px; background: var(--paper); border: 1px solid var(--line); border-radius: 22px; }
.fl-i { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 18px; border-radius: 12px; background: var(--blue-50); color: var(--blue); }
.fl-i .ic { width: 26px; height: 26px; }
.flow h3 { font-weight: 500; font-size: 20px; letter-spacing: -.02em; line-height: 1.25; }
.flow p { margin-top: 8px; font-size: 15.5px; line-height: 1.55; color: var(--ash); }

/* Pricing: monthly first, bundle featured */
.plans { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .plans { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } }
.plan { position: relative; }
.plan-top { padding: 22px 22px 20px; }
.plan-body { padding: 22px; }
.plan-heading h3 { font-size: 21px; }
.plan .price { font-size: clamp(38px, 3.4vw, 48px); }
.plan .price small { font-size: 16px; margin-left: 4px; }
.plan .mo { margin-top: 10px; font-size: 15.5px; font-weight: 500; color: var(--ink-2); }
.plan .commit { margin-top: 6px; font-size: 14px; line-height: 1.45; color: var(--ash); }
.plan dl { margin: 20px 0; }
.plan.featured { border: 2px solid var(--blue); box-shadow: var(--sh-2); }
.plan .tag { position: absolute; z-index: 2; top: 0; right: 20px; padding: 4px 12px; border-radius: 0 0 8px 8px; background: var(--blue); color: #fff; font-size: 12.5px; font-weight: 500; }
.plan.featured .plan-top { background: var(--blue-50); }
.plan:hover .b-p, .plan:focus-within .b-p { background: var(--blue-600); color: #fff; }

/* Case */
.case-more { margin-top: 20px; }
.case-feature { margin-top: 0; }

/* How we work + why */
.why2 { display: grid; gap: 0 32px; margin-top: 40px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .why2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .why2 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.why2 li { padding: 22px 0; border-top: 1px solid var(--ink); }
.why2 h3 { font-weight: 500; font-size: 18px; letter-spacing: -.015em; }
.why2 p { margin-top: 8px; font-size: 15.5px; line-height: 1.55; color: var(--ash); }

/* Contrast (WCAG AA) and mobile body size */
.proof span, .demo-footer p span, .plan .for, .plan dt, .fine, .form-note, .foot, .foot a, .credits { color: var(--ash); }
.ask input::placeholder, .field input:not([type=radio])::placeholder { color: #6B6E78; }
@media (max-width: 599px) {
  .proof span, .plan dl div, .step p, .steps p, .sector-context small, .flow p, .why2 p { font-size: 16px; }
  .nav .acts { display: none; }
}
@media (min-width: 600px) and (max-width: 959px) { .nav .b-o { display: none; } }

/* ----- Subpages ----- */
.page-h { padding: clamp(40px, 6vw, 80px) 0 0; }
.crumbs { margin-bottom: 20px; font-size: 14px; color: var(--ash); }
.crumbs a { text-decoration: underline; text-underline-offset: 3px; }
.page-h h1 { font-weight: 500; font-size: clamp(34px, 5.2vw, 64px); line-height: 1.04; letter-spacing: -.045em; max-width: 22ch; text-wrap: balance; }
.answer { max-width: 62ch; margin-top: 24px; font-size: 18px; line-height: 1.5; color: var(--ink); }
.page-h .acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.prose { max-width: 70ch; }
.prose p { font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.prose p + p { margin-top: 14px; }
.facts { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); margin-top: 8px; }
@media (min-width: 760px) { .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.facts li { padding: 22px; background: var(--paper); border: 1px solid var(--line); border-radius: 22px; }
.facts b { display: block; font-weight: 500; font-size: 28px; letter-spacing: -.03em; line-height: 1.1; }
.facts span { display: block; margin-top: 6px; font-size: 15px; color: var(--ash); }
.page-cta { padding: var(--sec) 0; background: var(--ink); color: #fff; }
.page-cta h2 { font-weight: 500; font-size: clamp(28px, 4vw, 46px); line-height: 1.08; letter-spacing: -.035em; max-width: 24ch; }
.page-cta p { margin-top: 14px; max-width: 48ch; color: var(--night-text); font-size: 17px; }
.page-cta .acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.page-cta .b-o { background: transparent; border-color: #45485E; color: #fff; box-shadow: none; }
.table-wrap { overflow-x: auto; }
.ptable { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15.5px; }
.ptable th, .ptable td { padding: 14px 12px; text-align: left; border-bottom: 1px solid var(--line); }
.ptable th { font-weight: 500; color: var(--ash); font-size: 14px; }
.ptable td:first-child { font-weight: 500; }
.ptable .n { text-align: right; font-variant-numeric: tabular-nums; }
.sec.pad-t { padding-top: var(--sec); }
.faq-page { max-width: 780px; }
.plans.one { grid-template-columns: minmax(0, 1fr); max-width: 440px; }

/* Compact rhythm: home <= 8 screens on desktop */
:root { --sec: clamp(40px, 4.5vw, 64px); }
.sim { margin-top: 40px; }
.proof { margin-top: 28px; }
.proof li { padding-top: 16px; padding-bottom: 16px; }
.pain { padding: 22px 22px 0; }
.pain .stmt { font-size: 21px; }
.pain .vis { height: 170px; margin-top: 16px; }
.stage2 { height: 440px; }
.team { gap: 12px; }
.person { padding: 20px; }
.person figcaption { padding-top: 16px; }
.final { padding: var(--sec) 0; }
.final ol { margin-top: 24px; }
.foot { padding-top: 40px; }
.credits { margin-top: 28px; }
.hero { padding-top: clamp(36px, 5vw, 64px); }
.hero h1 { font-size: clamp(44px, 7vw, 96px); }
.case-feature { padding: clamp(24px, 3.5vw, 40px); }
.case-heading { padding-bottom: 24px; }
.quote { margin-top: 28px; }
.case-main-stat b { font-size: clamp(44px, 5vw, 60px); }
.sector-context { margin-bottom: 16px; }
.step-ch { display: none; }
@media (min-width: 900px) {
  .sim { height: 600px; }
  .agent { top: 400px; }
  .phone { top: 56px; }
  .stage2 { height: 400px; }
  .plan .for { display: none; }
  .plan dl { margin: 14px 0; }
  .plan dl div { padding: 9px 0; }
  .plan-time { margin-top: 10px; }
  .steps li { padding: 16px 0; }
  .why2 { margin-top: 24px; }
  .why2 li { padding: 16px 0; }
  .final-in { gap: 40px; }
  .form { padding: 28px; }
}
@media (min-width: 900px) {
  .sim { height: 680px; }
  .agent { top: 470px; }
  .phone { top: 76px; }
}
.sec-h { gap: 12px; }
.sec-h h2 { font-size: clamp(30px, 3.4vw, 46px); }
.hero h1 { font-size: clamp(44px, 6.4vw, 84px); }
@media (min-width: 900px) {
  .person { display: flex; align-items: center; gap: 16px; }
  .person figcaption { padding: 0; }
  .photo { flex: none; }
  .team-note { gap: 16px; }
}
.steps p { max-width: none; padding-right: 16px; }
.faq-page { max-width: var(--max); }
.faq-page .faq { max-width: 780px; }

/* ================= Pain cards v3: four across, tall, purpose-built mini illustrations ================= */
@media (min-width: 1200px) { .pains { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 900px) and (max-width: 1199px) { .pains { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pain { padding: 24px 22px 0; min-height: 520px; }
.pain .stmt { font-size: 20px; line-height: 1.3; max-width: none; }
.pv { position: relative; display: flex; flex-direction: column; gap: 10px; margin-top: 24px; padding: 16px; border: 1px solid var(--line); border-bottom: 0; border-radius: var(--r-md) var(--r-md) 0 0; background: var(--paper); box-shadow: var(--sh-3); font-size: 13.5px; min-height: 300px; flex: 1; min-width: 0; }
.pain:hover .pv { transform: translateY(-4px); }
.pv { transition: transform .3s var(--ease); }
.pv-h { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.pv-h b { font-weight: 500; font-size: 13.5px; }
.pv-h .brand { width: 18px; height: 18px; }
.pv-h .chip-b, .pv-h .pv-sub { margin-left: auto; }
.pv-sub { font-size: 12px; color: var(--ash); }
.chip-b { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; background: var(--blue-50); color: var(--blue); font-size: 11.5px; font-weight: 500; white-space: nowrap; }
.chip-b.bad { background: #FCECEA; color: var(--bad); }
.pv-alert { display: flex; align-items: center; gap: 8px; margin-top: auto; padding: 10px 12px; border-radius: var(--r-sm); background: #FCECEA; color: var(--bad); font-size: 12.5px; font-weight: 500; line-height: 1.3; }
.pv-alert .ic { width: 16px; height: 16px; flex: none; }
.pv-note { font-size: 13px; line-height: 1.4; color: var(--ink-2); }
/* 1 chat */
.pv .m { align-self: flex-start; display: flex; flex-wrap: wrap; align-items: end; gap: 4px 10px; max-width: 92%; padding: 8px 11px 6px; border-radius: 4px 12px 12px 12px; background: var(--bone); line-height: 1.35; }
.pv .m time { margin-left: auto; font-size: 10.5px; color: var(--ash); font-variant-numeric: tabular-nums; }
.pv .m.me { align-self: flex-end; align-items: center; border-radius: 12px 4px 12px 12px; background: var(--blue); color: #fff; }
.pv .m.me time { color: rgb(255 255 255 / .75); }
.file { display: grid; place-items: center; width: 26px; height: 30px; border-radius: 4px; background: #1F7A44; color: #fff; font-size: 8.5px; font-weight: 600; }
.pv .m.me > span:nth-child(2) { flex: 1; min-width: 0; overflow-wrap: anywhere; }
/* 2 stock bars */
.bar-row { display: grid; grid-template-columns: 62px 1fr 32px; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ash); }
.bar-row b { text-align: right; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.bar-row b.bad { color: var(--bad); }
.track { height: 22px; border-radius: 5px; background: var(--bone); overflow: hidden; }
.track i { display: block; height: 100%; width: var(--w); border-radius: 5px; background: #B9BCF6; transform-origin: left; }
.track i.bad { background: repeating-linear-gradient(135deg, #C8443B 0 3px, #EFB8B2 3px 6px); }
/* 3 donut */
.donut { align-self: center; display: grid; place-items: center; width: 150px; height: 150px; margin: 6px 0; border-radius: 50%; background: conic-gradient(#C8443B 0 58%, #B9BCF6 58% 100%); }
.donut > div { display: grid; place-items: center; align-content: center; width: 104px; height: 104px; border-radius: 50%; background: var(--paper); }
.donut b { font-weight: 400; font-size: 30px; letter-spacing: -.03em; line-height: 1; }
.donut small { font-size: 11.5px; color: var(--ash); }
.dl { display: grid; gap: 8px; margin-top: auto; }
.dl li { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-2); }
.dl b { margin-left: auto; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.dl i { width: 10px; height: 10px; border-radius: 3px; background: #B9BCF6; }
.dl i.no { background: #C8443B; }
/* 4 mails */
.mails { display: grid; gap: 8px; }
.mails li { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: var(--r-sm); background: var(--bone); min-width: 0; }
.mails .ic { width: 16px; height: 16px; flex: none; color: var(--ash); }
.mails li > span { flex: 1; min-width: 0; }
.mails b { display: block; font-weight: 500; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mails small { display: block; font-size: 11.5px; color: var(--ash); }
.mails em { font-style: normal; font-size: 11px; font-weight: 500; padding: 2px 7px; border-radius: 999px; background: #FDECEC; color: var(--bad); }
@media (max-width: 899px) { .pain { min-height: 0; } .pv { min-height: 280px; } }
.pv-prod { margin-top: 4px; font-size: 13px; font-weight: 500; }

/* ================= Hero flow map v3: loose system logos -> agent -> outputs ================= */
.fm { position: relative; grid-column: 1 / -1; margin-top: 40px; display: grid; gap: 28px; align-items: center; padding: 32px 24px; border-radius: 28px; background: var(--stage); border: 1px solid var(--line); overflow: hidden; isolation: isolate; }
.fm::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(rgb(11 12 26 / .2) 1px, transparent 1.4px); background-size: 16px 16px; -webkit-mask: radial-gradient(ellipse 75% 70% at 50% 50%, transparent 30%, #000 100%); mask: radial-gradient(ellipse 75% 70% at 50% 50%, transparent 30%, #000 100%); }
.fm-wires { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; overflow: visible; pointer-events: none; }
.fm > :not(.fm-wires) { position: relative; z-index: 1; }
.fm-w { fill: none; stroke: var(--blue); stroke-width: 1.2; opacity: .13; transition: opacity .3s var(--ease), stroke-width .3s var(--ease); }
.fm-w.on { opacity: .9; stroke-width: 2; stroke-dasharray: 5 6; }
.fm-w.hot { opacity: 1; stroke-width: 2.5; }
@media (prefers-reduced-motion: no-preference) { .fm-w.on { animation: dash 1s linear infinite; } }
.fm-pk { fill: var(--blue); filter: drop-shadow(0 0 6px rgb(41 47 221 / .8)); }
.fm-t { margin-bottom: 14px; font-size: 14px; font-weight: 500; color: var(--ink-2); }
.fm-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; justify-items: center; }
.fm-row { position: relative; display: grid; place-items: center; width: 100%; max-width: 64px; aspect-ratio: 1; padding: 0; border: 1px solid var(--line-2); border-radius: 16px; background: var(--paper); cursor: pointer; box-shadow: var(--sh-1); transition: transform .25s cubic-bezier(.16, 1, .3, 1), border-color .2s var(--ease), box-shadow .25s var(--ease), background-color .2s var(--ease); }
.fm-row .brand { width: 28px; height: 28px; }
.fm-row:hover { transform: translateY(-3px) scale(1.08); box-shadow: var(--sh-2); border-color: #B9BAB5; }
.fm-row:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.fm-row.on { transform: scale(1.12); border-color: var(--blue); background: var(--blue-50); box-shadow: 0 0 0 4px rgb(41 47 221 / .14), 0 10px 22px -10px rgb(41 47 221 / .6); }
.fm-ic { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 10px; background: var(--paper); border: 1px solid var(--line-2); transition: background-color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease); }
.fm-ic .ic { width: 20px; height: 20px; color: var(--ink-2); }
.fm-ic .brand { width: 20px; height: 20px; }
.fm-hub { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.fm-logo { position: relative; width: 112px; height: 112px; border-radius: 28px; box-shadow: 0 18px 40px -14px rgb(41 47 221 / .6); transition: transform .4s var(--ease); }
.fm-logo img { width: 100%; height: 100%; border-radius: 28px; }
.fm-logo::before, .fm-logo::after { content: ""; position: absolute; inset: -10px; border-radius: 38px; border: 2px solid var(--blue); opacity: .18; }
.fm-logo::after { opacity: 0; }
.fm.working .fm-logo { transform: scale(1.05); }
.fm.working .fm-logo::before { opacity: .45; }
@media (prefers-reduced-motion: no-preference) { .fm.working .fm-logo::after { animation: ring 1.4s var(--ease) infinite; } }
@keyframes ring { 0% { inset: -10px; opacity: .55; } 100% { inset: -30px; opacity: 0; } }
.fm-meta { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.fm-agent { font-size: 16px; font-weight: 500; }
.fm-status { min-height: 22px; padding: 3px 12px; border-radius: 999px; background: var(--blue-50); color: var(--blue); font-size: 13px; font-weight: 500; }
.fm-sub { max-width: 28ch; min-height: 38px; font-size: 13px; line-height: 1.45; color: var(--ash); }
.fm-chips { display: flex; gap: 12px; }
.fm-chip { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12.5px; color: var(--ink-2); cursor: default; }
.fm-chip .fm-ic { width: 40px; height: 40px; border-radius: 12px; }
.fm-chip.lit .fm-ic { border-color: var(--blue); background: var(--blue-50); transform: translateY(-3px) scale(1.08); box-shadow: 0 6px 16px -6px rgb(41 47 221 / .5); }
.fm-out { display: grid; gap: 12px; }
.fm-o { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; background: rgb(255 255 255 / .9); border: 1px solid var(--line); box-shadow: var(--sh-2); transition: opacity .4s var(--ease), transform .4s var(--ease), border-color .3s var(--ease); }
.fm-o:hover { transform: translateX(-3px); border-color: var(--blue); }
.fm-o .fm-ic { width: 44px; height: 44px; background: var(--blue-50); border-color: transparent; }
.fm-o .fm-ic .ic { color: var(--blue); width: 22px; height: 22px; }
.fm-o b { display: block; font-size: 17px; font-weight: 500; letter-spacing: -.015em; }
.fm-o small { display: block; margin-top: 2px; font-size: 14px; color: var(--ash); }
.fm-ck { margin-left: auto; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #1F9D55; color: #fff; transform: scale(0); transition: transform .4s cubic-bezier(.3, 1.6, .5, 1); }
.fm-ck .ic { width: 14px; height: 14px; stroke-width: 3; }
.fm-o.done .fm-ck { transform: scale(1); }
.fm-o.wait { opacity: .45; }
.fm-cap { grid-column: 1 / -1; margin-top: 14px; font-size: 14.5px; color: var(--ash); }
@media (min-width: 900px) {
  .fm { grid-template-columns: minmax(0, 330px) 1fr minmax(0, 390px); min-height: 500px; padding: 40px 48px; gap: 0; }
  .fm-hub { justify-self: center; align-self: stretch; justify-content: center; }
  .fm-logo { width: 132px; height: 132px; }
  .fm-chips { position: absolute; bottom: calc(50% + 66px + 22px); left: 50%; transform: translateX(-50%); }
  .fm-meta { position: absolute; top: calc(50% + 66px + 22px); left: 50%; transform: translateX(-50%); width: 260px; }
}
@media (max-width: 899px) {
  .fm-hub { gap: 12px; }
  .fm-hub::before { content: ""; order: -2; width: 2px; height: 18px; background: var(--blue); opacity: .3; }
  .fm-hub::after { content: ""; order: 99; width: 2px; height: 18px; background: var(--blue); opacity: .3; }
  .fm-chips { order: -1; }
}
.fm-list li { display: grid; justify-items: center; }
.fm-row { width: 100%; max-width: 62px; min-width: 52px; }
.fm-row .brand.wide { width: 44px; height: 24px; }

/* v4: mesh between systems, five links into the hub, no labels */
.fm-list { gap: 22px; }
.fm-m { fill: none; stroke: var(--blue); stroke-width: 1.3; opacity: .2; }
.fm-h { opacity: .35; stroke-width: 1.6; }
.fm-r { opacity: 0; }
.fm-r.on { opacity: .95; }
.fm-row::after { content: attr(data-n); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translate(-50%, 4px); padding: 4px 9px; border-radius: 8px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 500; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s var(--ease), transform .15s var(--ease); z-index: 3; }
.fm-row:hover::after, .fm-row:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
@media (min-width: 900px) { .fm { min-height: 470px; } .fm-chips { bottom: calc(50% + 66px + 18px); } }

/* v5: taller map, results cards (sales / response time / savings) */
.fm-list { row-gap: 34px; column-gap: 22px; }
@media (min-width: 900px) {
  .fm { min-height: 640px; padding: 56px 48px; grid-template-columns: minmax(0, 330px) 1fr minmax(0, 420px); }
  .fm-chips { bottom: calc(50% + 66px + 22px); }
}
.fm-out { gap: 14px; }
.fm-o { display: block; padding: 16px 18px 18px; }
.fm-oh { display: flex; align-items: center; gap: 10px; }
.fm-oh b { font-size: 15px; font-weight: 500; letter-spacing: -.01em; }
.fm-o .fm-ic { width: 34px; height: 34px; }
.fm-o .fm-ic .ic { width: 18px; height: 18px; }
.fm-big { display: flex; align-items: baseline; gap: 8px; margin-top: 12px; }
.fm-big .fm-n { font-size: 34px; font-weight: 500; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.fm-big small { margin: 0; font-size: 14px; color: var(--ash); }
.fm-cp { margin-top: 6px; font-size: 14px; line-height: 1.45; color: var(--ash); }
.fm-cp b { font-weight: 500; color: var(--ink); }
.fm-spark { width: 100%; height: 44px; margin-top: 10px; overflow: visible; }
.fm-spark path { fill: none; stroke: var(--blue); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.fm-o .draw { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.2s var(--ease); }
.fm-o.done .draw { stroke-dashoffset: 0; }
.fm-cmp { display: grid; grid-template-columns: 78px 1fr auto; align-items: center; gap: 10px; margin-top: 10px; font-size: 13px; color: var(--ash); }
.fm-cmp em { font-style: normal; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.fm-bar { height: 10px; border-radius: 5px; background: var(--bone); overflow: hidden; }
.fm-bar i { display: block; height: 100%; width: var(--w); border-radius: 5px; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease) .2s; }
.fm-bar i.bad { background: repeating-linear-gradient(135deg, #C8443B 0 3px, #EFB8B2 3px 6px); }
.fm-o.done .fm-bar i { transform: scaleX(1); }
.fm-o.wait .fm-big, .fm-o.wait .fm-cp { opacity: .5; }
.fm-o .fm-cp b { display: inline; font-size: inherit; }
.fm-cmp { grid-template-columns: 96px 1fr auto; }

/* v6: compact, visual results */
@property --p { syntax: "<number>"; inherits: false; initial-value: 0; }
.fm-out { gap: 12px; }
.fm-o { display: grid; grid-template-columns: 84px 1fr; align-items: center; gap: 16px; padding: 14px 16px; }
.fm-o .fm-ck { position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; }
.fm-o .fm-ck .ic { width: 12px; height: 12px; }
.fm-vis { display: grid; place-items: center; height: 64px; border-radius: 12px; background: var(--blue-50); overflow: hidden; }
.fm-spark { width: 100%; height: 100%; display: block; margin: 0; }
.fm-spark .area { fill: rgb(41 47 221 / .14); stroke: none; opacity: 0; transition: opacity .8s var(--ease) .5s; }
.fm-o.done .fm-spark .area { opacity: 1; }
.fm-spark .draw { stroke-width: 2.5; }
.fm-vbars { display: flex; align-items: flex-end; gap: 10px; height: 46px; }
.fm-vbars i { display: block; width: 22px; height: var(--h); min-height: 4px; border-radius: 5px 5px 2px 2px; background: var(--blue); transform: scaleY(0); transform-origin: bottom; transition: transform .9s var(--ease) .2s; }
.fm-vbars i.bad { background: repeating-linear-gradient(135deg, #C8443B 0 3px, #EFB8B2 3px 6px); }
.fm-o.done .fm-vbars i { transform: scaleY(1); }
.fm-ring { --p: 0; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: conic-gradient(var(--blue) calc(var(--p) * 1%), #D9DBF7 0); transition: --p 1.2s var(--ease) .2s; }
.fm-o.done .fm-ring { --p: 70; }
.fm-ring b { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--blue-50); font-size: 11.5px; font-weight: 600; color: var(--blue); }
.fm-tx { min-width: 0; padding-right: 14px; }
.fm-o .fm-big { margin: 0; }
.fm-o .fm-big .fm-n { font-size: 26px; }
.fm-lb { margin-top: 4px; font-size: 13px; line-height: 1.35; color: var(--ash); }
@media (min-width: 900px) { .fm { min-height: 560px; grid-template-columns: minmax(0, 330px) 1fr minmax(0, 360px); } }

/* v7: logo on a glass card */
.fm-logo { width: 136px; height: 136px; display: grid; place-items: center; border-radius: 34px; background: linear-gradient(145deg, rgb(255 255 255 / .78), rgb(255 255 255 / .34)); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); border: 1px solid rgb(255 255 255 / .9); box-shadow: 0 28px 56px -24px rgb(41 47 221 / .5), 0 2px 6px rgb(11 12 26 / .06), inset 0 1px 0 rgb(255 255 255 / 1), inset 0 -1px 0 rgb(41 47 221 / .08); transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.fm-logo img { width: 72px; height: 72px; border-radius: 20px; box-shadow: 0 10px 24px -8px rgb(41 47 221 / .7); }
.fm-logo::before { content: ""; position: absolute; inset: -34px; z-index: -1; border: 0; border-radius: 50%; background: radial-gradient(closest-side, rgb(41 47 221 / .32), rgb(41 47 221 / 0)); opacity: .55; transition: opacity .5s var(--ease), transform .5s var(--ease); }
.fm-logo::after { content: ""; position: absolute; inset: 0; border-radius: 34px; border: 1.5px solid rgb(255 255 255 / .95); box-shadow: 0 0 24px rgb(41 47 221 / .35); opacity: 0; }
.fm.working .fm-logo { transform: scale(1.05); box-shadow: 0 34px 64px -22px rgb(41 47 221 / .7), 0 2px 6px rgb(11 12 26 / .06), inset 0 1px 0 #fff, inset 0 -1px 0 rgb(41 47 221 / .1); }
.fm.working .fm-logo::before { opacity: 1; transform: scale(1.15); }
@media (prefers-reduced-motion: no-preference) { .fm.working .fm-logo::after { animation: glass-ring 1.4s var(--ease) infinite; } }
@keyframes glass-ring { 0% { inset: 0; opacity: .9; } 100% { inset: -22px; opacity: 0; border-radius: 52px; } }
@media (min-width: 900px) {
  .fm-logo { width: 176px; height: 176px; border-radius: 42px; }
  .fm-logo img { width: 96px; height: 96px; border-radius: 26px; }
  .fm-logo::after { border-radius: 42px; }
  .fm-chips { bottom: calc(50% + 88px + 22px); }
}

/* v8: tighter glass card, bigger icon */
.fm-logo { width: 112px; height: 112px; border-radius: 30px; }
.fm-logo img { width: 84px; height: 84px; border-radius: 22px; }
.fm-logo::after { border-radius: 30px; }
@media (min-width: 900px) {
  .fm-logo { width: 128px; height: 128px; border-radius: 34px; }
  .fm-logo img { width: 100px; height: 100px; border-radius: 26px; }
  .fm-logo::after { border-radius: 34px; }
  .fm-chips { bottom: calc(50% + 64px + 22px); }
}

/* Clients marquee */
.clients { padding: 36px 0 8px; }
.mq { display: flex; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.mq-track { display: flex; flex: none; align-items: center; min-width: 100%; justify-content: space-around; }
.mq-track li { display: grid; place-items: center; height: 72px; padding: 0 clamp(24px, 3.2vw, 48px); }
.mq-track img { width: auto; height: 32px; max-width: none; opacity: .9; transition: opacity .2s var(--ease), transform .2s var(--ease); }
.mq-track img:hover { opacity: 1; transform: scale(1.06); }
.lg-shopsmith { height: 52px !important; }
.lg-fial { height: 48px !important; filter: brightness(0); opacity: .75 !important; }
.lg-charliemotors { height: 38px !important; }
.lg-xonicweb { height: 22px !important; }
.lg-aureofy { height: 28px !important; }
.lg-achalay { height: 34px !important; }
.lg-rotundo { height: 30px !important; }
.lg-itone { height: 36px !important; }
@media (prefers-reduced-motion: no-preference) {
  .mq-track { animation: mq 45s linear infinite; }
  .mq:hover .mq-track { animation-play-state: paused; }
}
@keyframes mq { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .mq { overflow-x: auto; } .mq-track[aria-hidden] { display: none; } }
.mq-track img { filter: grayscale(1) contrast(1.1); opacity: .6; transition: filter .25s var(--ease), opacity .25s var(--ease), transform .25s var(--ease); }
.mq-track img:hover { filter: none; opacity: 1; transform: scale(1.08); }
.lg-fial { filter: brightness(0) !important; opacity: .6 !important; }
.mq-track img.lg-fial:hover { filter: brightness(0) !important; opacity: 1 !important; }
.mq-track img { filter: grayscale(1) brightness(.5) contrast(1.8); opacity: .85; }
.mq-track img:hover { filter: none; opacity: 1; }
.lg-fial { opacity: .85 !important; }

/* Hero badges + glass client card */
.hero .sub { grid-row: 2; }
.badges { grid-column: 1; grid-row: 3; align-self: start; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.badges li { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 14px 6px 12px; border-radius: 999px; background: rgb(255 255 255 / .7); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--line-2); font-size: 13px; font-weight: 500; color: var(--ink-2); }
.badges img { height: 18px; width: auto; }
.badges .brand.wide { width: 34px; height: 18px; }
@media (max-width: 899px) { .badges { grid-column: 1 / -1; grid-row: auto; } }
.clients { position: relative; padding: 40px 0 8px; }
.clients::before { content: ""; position: absolute; left: 10%; right: 10%; top: 50%; height: 120px; z-index: -1; background: radial-gradient(closest-side, rgb(41 47 221 / .16), transparent); filter: blur(24px); }
.mq-card { padding: 14px 0; border-radius: 28px; background: linear-gradient(145deg, rgb(255 255 255 / .75), rgb(255 255 255 / .35)); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); border: 1px solid rgb(255 255 255 / .95); box-shadow: 0 24px 48px -28px rgb(41 47 221 / .35), 0 1px 3px rgb(11 12 26 / .05), inset 0 1px 0 #fff; overflow: hidden; }
.mq { -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.badges .brand.wide { width: 44px; height: 24px; }
.badges { margin-top: 18px; }

/* Partners lockup (as on unleap.dev) + plain client carousel */
.partners { grid-column: 1; grid-row: 3; align-self: start; display: flex; align-items: center; gap: 24px; margin-top: 28px; }
.pt { display: grid; gap: 8px; }
.pt img { height: 34px; width: auto; filter: brightness(0); }
.pt small { font-size: 13px; font-weight: 500; line-height: 1.2; color: var(--ink-2); }
.pt-div { width: 1px; align-self: stretch; background: var(--line-2); }
@media (max-width: 899px) { .partners { grid-column: 1 / -1; grid-row: auto; margin-top: 20px; gap: 18px; } .pt img { height: 28px; } .pt small { font-size: 12px; } }
.clients::before { display: none; }
.mq-card { all: unset; }

/* logos: solid black, optically balanced sizes (h = sqrt(A / aspect)) */
.mq-track img { filter: grayscale(1) brightness(.52) contrast(100); opacity: 1; }
.mq-track img:hover { filter: none; opacity: 1; }
.mq-track img.lg-fial { filter: brightness(0) !important; opacity: 1 !important; }
.mq-track img.lg-fial:hover { filter: brightness(0) !important; }
.mq-track img.lg-shopsmith { height: 46px !important; }
.mq-track img.lg-rotundo { height: 30px !important; }
.mq-track img.lg-pluszero { height: 36px !important; }
.mq-track img.lg-aureofy { height: 30px !important; }
.mq-track img.lg-itone { height: 36px !important; }
.mq-track img.lg-virtualit { height: 32px !important; }
.mq-track img.lg-odooscale { height: 32px !important; }
.mq-track img.lg-charliemotors { height: 37px !important; }
.mq-track img.lg-achalay { height: 35px !important; }
.mq-track img.lg-xonicweb { height: 22px !important; }
.mq-track img.lg-fial { height: 46px !important; }
.mq-track img { filter: grayscale(1) brightness(.4) contrast(100); }
.mq-track img.lg-shopsmith, .mq-track img.lg-itone, .mq-track img.lg-achalay, .mq-track img.lg-odooscale, .mq-track img.lg-virtualit { filter: grayscale(1) brightness(.52) contrast(100); }
.mq-track img:hover, .mq-track img.lg-shopsmith:hover, .mq-track img.lg-itone:hover, .mq-track img.lg-achalay:hover, .mq-track img.lg-odooscale:hover, .mq-track img.lg-virtualit:hover { filter: none; }

/* v3 gray -> colour, smooth */
.pt img { filter: none; }
.mq-track img, .mq-track img[class] { filter: grayscale(1) brightness(.58) contrast(1.5); opacity: .7; transition: filter .45s var(--ease), opacity .45s var(--ease), transform .45s var(--ease); }
.mq-track img:hover, .mq-track img[class]:hover { filter: grayscale(0) brightness(1) contrast(1); opacity: 1; transform: scale(1.06); }
.mq-track img.lg-fial { filter: brightness(0) !important; opacity: .6 !important; }
.mq-track img.lg-fial:hover { filter: brightness(0) !important; opacity: .95 !important; }
.clients .mq { width: min(calc(100% - 2 * var(--gutter)), calc(var(--max) - 2 * var(--gutter))); margin-inline: auto; -webkit-mask: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent); mask: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent); }

/* ================= Hero v2: headline left, order -> quote visual right, wired into the map ================= */
.hero > .in { position: relative; }
.hv-wire { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; overflow: visible; pointer-events: none; }
.hv-w { fill: none; stroke: var(--blue); stroke-width: 1.8; stroke-dasharray: 5 6; opacity: .75; }
@media (prefers-reduced-motion: no-preference) { .hv-w { animation: dash 1s linear infinite; } }
.hv-end { fill: var(--blue); }
.hv { position: relative; margin-bottom: 28px; }
.hv-wa, .hv-q { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--sh-3); }
.hv-wa { overflow: hidden; }
.hv-h { display: flex; align-items: center; gap: 10px; padding: 11px 14px; background: #F7F6F3; border-bottom: 1px solid #ECEAE5; }
.hv-h b { display: block; font-size: 13.5px; font-weight: 500; line-height: 1.2; }
.hv-h small { font-size: 12px; color: var(--ash); }
.hv-h .brand { margin-left: auto; width: 20px; height: 20px; }
.hv-av { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%; background: #D8E4DA; color: #2C4A35; font-size: 11.5px; font-weight: 500; }
.hv-bd { padding: 14px; background: #EFEAE2; }
.hv-b { max-width: 92%; padding: 8px 11px 5px; border-radius: 3px 12px 12px 12px; background: #fff; box-shadow: 0 1px .5px rgb(11 12 26 / .1); font-size: 14px; line-height: 1.42; }
.hv-b time { display: block; text-align: right; margin-top: 2px; font-size: 11px; color: #5E626E; }
.hv-q { padding: 16px 18px 14px; }
.hv-qh { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.hv-qh b { font-size: 14.5px; font-weight: 500; }
.hv-st { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 999px; background: #E7F6EC; color: #1B7A43; font-size: 11.5px; font-weight: 500; white-space: nowrap; }
.hv-st i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.hv-rows li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid #EEF0F3; font-size: 13px; color: var(--ink-2); }
.hv-rows em { font-style: normal; font-variant-numeric: tabular-nums; color: var(--ink); }
.hv-t { display: flex; justify-content: space-between; align-items: baseline; padding-top: 12px; font-size: 13px; color: var(--ash); }
.hv-t b { font-size: 22px; font-weight: 500; letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.hv-mark { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: linear-gradient(145deg, rgb(255 255 255 / .85), rgb(255 255 255 / .5)); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid #fff; box-shadow: 0 12px 28px -10px rgb(41 47 221 / .55); }
.hv-mark img { width: 38px; height: 38px; border-radius: 10px; }
.hv .k1, .hv .k2, .hv .k3, .hv .k4 { opacity: 0; transform: translateY(10px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.hv.s1 .k1, .hv.s2 .k2, .hv.s3 .k3, .hv.s4 .k4 { opacity: 1; transform: none; }
.hv.s2:not(.s3) .hv-mark { animation: hvpulse 1s ease-in-out infinite; }
@keyframes hvpulse { 50% { box-shadow: 0 0 0 10px rgb(41 47 221 / .12), 0 12px 28px -10px rgb(41 47 221 / .55); } }
@media (min-width: 900px) {
  .hero > .in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hero h1 { grid-column: 1; grid-row: 1 / span 2; max-width: none; margin: 0; font-size: clamp(48px, 5.6vw, 80px); align-self: start; }
  .hv { grid-column: 2; grid-row: 1; height: 300px; }
  .hv-wa { position: absolute; left: 0; top: 0; width: 64%; }
  .hv-q { position: absolute; right: 0; bottom: 0; width: 70%; }
  .hv-mark { position: absolute; left: 47%; top: 38%; z-index: 2; }
  .hv .hv-mark.k2 { transform: translate(-50%, -50%) translateY(10px); }
  .hv.s2 .hv-mark.k2 { transform: translate(-50%, -50%); }
  .ask { grid-row: 2; }
  .hero-note { grid-row: 3; }
  .partners { grid-row: 3; margin-top: 8px; }
}
@media (max-width: 899px) {
  .hv-wire { display: none; }
  .hv { display: grid; gap: 14px; margin: 24px 0 8px; }
  .hv-mark { display: none; }
}
/* carousel: 50% faster */
@media (prefers-reduced-motion: no-preference) { .mq-track { animation-duration: 30s; } }
@media (min-width: 900px) {
  .hv { height: 350px; }
  .hv-wa { width: 60%; }
  .hv-q { width: 70%; }
}
@media (min-width: 900px) { .hv { height: 368px; } }

/* ================= Hero v3: compact visual, wire runs behind the e-mail field ================= */
.hv-wire { z-index: 1; }
.hv { display: flex; align-items: center; justify-content: center; gap: 10px; height: auto; margin-bottom: 26px; }
.hv-wa { display: flex; align-items: center; gap: 10px; flex: 1.05; min-width: 0; padding: 12px 14px; background: #EFEAE2; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--sh-2); position: static; width: auto; }
.hv-wa .brand { margin-left: auto; width: 18px; height: 18px; align-self: flex-start; }
.hv-av { width: 30px; height: 30px; font-size: 11px; }
.hv-b { max-width: none; padding: 0; background: none; box-shadow: none; border-radius: 0; font-size: 12.5px; line-height: 1.35; color: var(--ink-2); }
.hv-b b { display: block; font-size: 13px; font-weight: 500; color: var(--ink); }
.hv-b time { display: none; }
.hv-arrow { flex: none; width: 34px; height: 10px; fill: none; stroke: var(--blue); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hv-q { position: static; width: auto; flex: .95; min-width: 0; padding: 12px 16px; }
.hv-qh { padding: 0 0 6px; border: 0; }
.hv-qh b { font-size: 13px; color: var(--ash); font-weight: 500; }
.hv-t { display: grid; gap: 6px; }
.hv-t b { font-size: 24px; font-weight: 500; letter-spacing: -.035em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.hv .hv-t.k4 { display: grid; }
@media (min-width: 900px) {
  .hv { grid-column: 2; grid-row: 1; align-self: end; height: auto; }
  .hv-wa, .hv-q { position: static; }
  .hero h1 { grid-row: 1 / span 2; }
  .ask { position: relative; z-index: 2; grid-row: 2; }
  .hero-foot { grid-column: 1; grid-row: 3; align-self: start; }
  .hero-foot .hero-note { max-width: none; padding: 0; margin: 4px 0 0; }
  .hero-foot .partners { margin-top: 22px; }
}
.hero-foot .hero-note { grid-column: auto; grid-row: auto; justify-self: start; }
.hero-foot .partners { grid-column: auto; grid-row: auto; }
@media (max-width: 899px) { .hv { flex-direction: column; align-items: stretch; } .hv-arrow { transform: rotate(90deg); align-self: center; } .hero-foot { margin-top: 18px; } }
@media (min-width: 900px) {
  .hero-foot { display: contents; }
  .hero-foot .hero-note { grid-column: 2; grid-row: 3; align-self: start; justify-self: start; width: 100%; max-width: 560px; margin: 14px 0 0; padding-left: 8px; }
  .hero-foot .partners { grid-column: 1; grid-row: 3; align-self: start; margin-top: 14px; }
}
@media (min-width: 900px) { .hero-foot .hero-note { align-self: center; margin-top: 14px; } }

/* Hero v4: right stack bottom-aligned with the badges; wire runs behind the field and the container */
.hv-wire { z-index: 0; }
.hv { z-index: 2; }
.fm { z-index: 1; }
.ask-wrap { position: relative; z-index: 2; }
.ask-wrap .hero-note { margin: 8px 0 0; padding: 0; text-align: right; max-width: none; width: auto; }
@media (min-width: 900px) {
  .hero > .in { grid-template-rows: 1fr auto auto; }
  .hero h1 { grid-row: 1 / span 2; }
  .hv { grid-row: 2; align-self: end; }
  .ask-wrap { grid-column: 2; grid-row: 3; align-self: end; justify-self: end; width: 100%; max-width: 560px; }
  .ask-wrap .ask { grid-row: auto; max-width: none; }
  .hero-foot .partners { grid-column: 1; grid-row: 3; align-self: end; margin-top: 0; }
}
@media (max-width: 899px) { .ask-wrap { margin-top: 24px; } .ask-wrap .hero-note { text-align: left; } }

/* Hero v5: richer simulation (chat -> Unleap steps -> Odoo quote), more air under the headline, note nudged by the field radius */
.hv { display: grid; grid-template-columns: minmax(0, 1.05fr) auto minmax(0, 1.2fr); align-items: center; gap: 40px; margin-bottom: 34px; }
.hv-wa, .hv-q { display: block; flex: none; padding: 0; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--sh-3); overflow: hidden; }
.hv-wa { background: #EFEAE2; }
.hv-wh { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #F7F6F3; border-bottom: 1px solid #ECEAE5; }
.hv-wh b { display: block; font-size: 13px; font-weight: 500; line-height: 1.2; }
.hv-wh small { font-size: 11.5px; color: #1B7A43; }
.hv-wh .brand { margin-left: auto; width: 18px; height: 18px; }
.hv-wb { padding: 14px 12px 16px; }
.hv-wa .hv-b { display: block; max-width: 94%; padding: 8px 11px 5px; border-radius: 3px 12px 12px 12px; background: #fff; box-shadow: 0 1px .5px rgb(11 12 26 / .12); font-size: 13.5px; line-height: 1.4; color: var(--ink); }
.hv-wa .hv-b time { display: block; text-align: right; margin-top: 2px; font-size: 10.5px; color: #5E626E; }
.hv-ai { position: relative; display: grid; justify-items: start; gap: 12px; }
.hv-ai::before, .hv-ai::after { content: ""; position: absolute; top: 26px; width: 26px; border-top: 1.8px dashed var(--blue); }
.hv-ai::before { right: 100%; margin-right: 6px; }
.hv-ai::after { left: 100%; margin-left: 6px; }
.hv .hv-ai .hv-mark { position: static; display: grid; width: 52px; height: 52px; transform: none; }
.hv-steps { display: grid; gap: 7px; }
.hv-steps li { position: relative; padding-left: 22px; font-size: 12.5px; line-height: 1.2; color: var(--ash); white-space: nowrap; opacity: .45; transition: opacity .4s var(--ease), color .4s var(--ease); }
.hv-steps li::before { content: ""; position: absolute; left: 0; top: -1px; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid #B8BAC4; box-sizing: border-box; transition: background .3s, border-color .3s; }
.hv-steps li::after { content: ""; position: absolute; left: 4.5px; top: 2.5px; width: 4px; height: 7px; border: solid #fff; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg) scale(0); transition: transform .3s var(--ease); }
.hv.s2 .hv-steps li { opacity: 1; color: var(--ink); transition-delay: calc(var(--i) * .45s); }
.hv.s2 .hv-steps li::before { background: var(--blue); border-color: var(--blue); transition-delay: calc(var(--i) * .45s); }
.hv.s2 .hv-steps li::after { transform: rotate(45deg) scale(1); transition-delay: calc(var(--i) * .45s + .1s); }
.hv-q { background: var(--paper); padding: 14px 16px 14px; }
.hv-qh { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 0 8px; border-bottom: 1px solid var(--line); }
.hv-qh b { font-size: 13px; font-weight: 500; color: var(--ink); }
.hv-od { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 500; color: #714B67; }
.hv-od .brand { width: 14px; height: 14px; }
.hv-q .hv-rows li { padding: 6px 0; font-size: 12.5px; }
.hv-ft { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 10px; }
.hv-ft b { font-size: 24px; font-weight: 500; letter-spacing: -.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.hv .hv-ft.k4 { display: flex; }
.hv-st { margin-left: auto; }
@media (min-width: 900px) {
  .hero h1 { margin-bottom: 56px; }
  .hv { margin-bottom: 40px; }
}
.ask-wrap .hero-note { padding-right: 36px; }
@media (max-width: 899px) {
  .hv { grid-template-columns: 1fr; gap: 22px; }
  .hv-ai::before, .hv-ai::after { display: none; }
  .hv-ai { grid-template-columns: auto 1fr; align-items: center; gap: 14px; }
  .hv .hv-ai .hv-mark { display: grid; }
  .ask-wrap .hero-note { padding-right: 0; }
}

/* Hero v5b: narrow-column layout: chat + Unleap steps stacked, quote on the right */
@media (min-width: 900px) {
  .hv { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); grid-template-rows: auto auto; gap: 18px 30px; align-items: stretch; }
  .hv-wa { grid-column: 1; grid-row: 1; }
  .hv-ai { grid-column: 1; grid-row: 2; grid-template-columns: auto 1fr; align-items: center; gap: 14px; padding: 12px 14px; background: linear-gradient(145deg, #fff, rgb(255 255 255 / .8)); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--sh-2); }
  .hv-ai::before { display: none; }
  .hv-ai::after { top: 50%; left: 100%; width: 30px; margin-left: 0; }
  .hv-q { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .hv-ft { flex-wrap: wrap; row-gap: 8px; }
  .hv-ft b { white-space: nowrap; font-size: 23px; }
}

/* Hero v5c: tighter */
@media (min-width: 900px) {
  .hero h1 { margin-bottom: 24px; }
  .hv { gap: 12px 28px; margin-bottom: 26px; }
}
.hv-wh { padding: 7px 12px; }
.hv-wh small { display: none; }
.hv-wb { padding: 9px 10px 10px; }
.hv-wa .hv-b { font-size: 13px; line-height: 1.35; padding: 6px 10px 4px; }
.hv-ai { padding: 9px 12px; }
.hv-steps { gap: 4px; }
.hv-q { padding: 10px 14px; }
.hv-q .hv-rows li { padding: 4px 0; }
.hv-ft { padding-top: 8px; }
.hv-ft b { font-size: 21px; }

/* Hero v6: AI orb (12 satellites in a wave around the Unleap mark) */
.hv-orb { position: relative; display: grid; place-items: center; width: 72px; height: 72px; flex: none; }
.hv-orb::before { content: ""; position: absolute; inset: -10px; border-radius: 50%; background: radial-gradient(circle, rgb(41 47 221 / .28), rgb(41 47 221 / 0) 68%); }
.hv-ring { position: absolute; inset: 0; }
.hv-ring i { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: var(--blue); opacity: .3; transform: rotate(calc(var(--a) * 30deg)) translateY(-31px); }
.hv-orb b { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(145deg, #fff, #E4E6FF); border: 1px solid #fff; box-shadow: 0 8px 22px -6px rgb(41 47 221 / .55), inset 0 -3px 8px rgb(41 47 221 / .12); }
.hv-orb img { width: 28px; height: 28px; border-radius: 8px; }
.hv.s3 .hv-ring i { opacity: .9; }
@media (prefers-reduced-motion: no-preference) {
  .hv-orb::before { animation: orbglow 2.2s ease-in-out infinite; }
  .hv-ring { animation: orbspin 7s linear infinite; }
  .hv.s2:not(.s3) .hv-ring { animation-duration: 2.6s; }
  .hv.s2:not(.s3) .hv-ring i { animation: orbwave 1.2s ease-in-out infinite; animation-delay: calc(var(--a) * -.1s); }
  .hv.s2:not(.s3) .hv-orb b { animation: orbcore 1.2s ease-in-out infinite; }
  .hv.s3 .hv-orb b { animation: orbcore 3s ease-in-out infinite; }
}
@keyframes orbspin { to { transform: rotate(360deg); } }
@keyframes orbwave { 0%, 100% { opacity: .25; scale: .7; } 40% { opacity: 1; scale: 1.7; } }
@keyframes orbglow { 50% { transform: scale(1.18); opacity: .7; } }
@keyframes orbcore { 50% { transform: scale(1.07); } }
.hv-ai { background: linear-gradient(135deg, #fff 40%, #EEF0FF); }

/* Hero v7: one story - agent panel + WhatsApp chat that gets answered with the quote */
.hero h1 .acc { color: var(--blue); }
.mq-track img.lg-shopsmith, .mq-track img.lg-odooscale, .mq-track img.lg-achalay { filter: grayscale(1) brightness(.42) contrast(1.4); }
.mq-track img.lg-shopsmith:hover, .mq-track img.lg-odooscale:hover, .mq-track img.lg-achalay:hover { filter: none; }
.hv { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 0; align-items: center; margin-bottom: 26px; }
.hv-ai { grid-column: 1; grid-row: 1; position: relative; z-index: 2; margin-right: -28px; display: grid; justify-items: center; gap: 10px; padding: 14px 14px 12px; background: linear-gradient(160deg, #fff 35%, #EEF0FF); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--sh-3); }
.hv-ai::before, .hv-ai::after { display: none; }
.hv-steps { justify-self: stretch; gap: 5px; }
.hv-steps li { display: flex; justify-content: space-between; gap: 8px; }
.hv-steps li em { font-style: normal; font-size: 11px; color: var(--ash); font-variant-numeric: tabular-nums; }
.hv-wa { grid-column: 2; grid-row: 1; background: #EFEAE2; }
.hv-wh small { display: block; color: var(--ash); font-size: 11px; }
.hv-wb { display: grid; gap: 8px; padding: 10px 10px 12px 40px; }
.hv-wa .hv-b { margin: 0; max-width: 88%; }
.hv-out { display: grid; justify-items: end; }
.hv-out > * { grid-area: 1 / 1; }
.hv-typing { display: flex; gap: 4px; align-self: start; padding: 10px 12px; border-radius: 12px 3px 12px 12px; background: #D9FDD3; box-shadow: 0 1px .5px rgb(11 12 26 / .12); opacity: 0; transition: opacity .3s; }
.hv-typing i { width: 6px; height: 6px; border-radius: 50%; background: #5E8A63; }
.hv.s2:not(.s3) .hv-typing { opacity: 1; }
@media (prefers-reduced-motion: no-preference) { .hv.s2:not(.s3) .hv-typing i { animation: hvdot 1s ease-in-out infinite; } .hv-typing i:nth-child(2) { animation-delay: .15s; } .hv-typing i:nth-child(3) { animation-delay: .3s; } }
@keyframes hvdot { 40% { transform: translateY(-4px); opacity: .5; } }
.hv-reply { width: 100%; padding: 8px 11px 9px; border-radius: 12px 3px 12px 12px; background: #D9FDD3; box-shadow: 0 1px .5px rgb(11 12 26 / .12); }
.hv-rh { display: flex; justify-content: space-between; align-items: center; padding-bottom: 5px; border-bottom: 1px solid rgb(11 12 26 / .1); font-size: 12px; }
.hv-rh b { font-weight: 500; }
.hv-rh span { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 500; color: #714B67; }
.hv-rh .brand { width: 12px; height: 12px; }
.hv-reply .hv-rows li { padding: 3px 0; border: 0; font-size: 12px; color: var(--ink); }
.hv-reply .hv-ft { padding-top: 5px; border-top: 1px solid rgb(11 12 26 / .1); }
.hv-reply .hv-ft b { font-size: 19px; }
.hv-reply .hv-st { background: #fff; }
@media (max-width: 899px) {
  .hv { grid-template-columns: 1fr; gap: 14px; }
  .hv-ai { grid-column: 1; margin-right: 0; grid-template-columns: auto 1fr; align-items: center; }
  .hv-wa { grid-column: 1; grid-row: 2; }
  .hv-wb { padding-left: 10px; }
}
.mq-track img.lg-shopsmith { height: 56px !important; }

/* Hero v8: logo-less orb + 3 caption slides (no checklist) */
.hv-ai { gap: 8px; padding: 16px 14px 12px; }
.hv-orb { width: 88px; height: 88px; }
.hv-orb::before { display: none; }
.hv-halo { position: absolute; inset: -14px; border-radius: 50%; background: radial-gradient(circle, rgb(41 47 221 / .32), rgb(110 120 255 / .12) 55%, transparent 72%); }
.hv-ring { inset: 4px; }
.hv-ring i { width: 5px; height: 5px; margin: -2.5px; background: #5A60F5; transform: rotate(calc(var(--a) * 30deg)) translateY(-40px); }
.hv-core { position: relative; width: 50px; height: 50px; border-radius: 50%; background: radial-gradient(circle at 32% 26%, #C9CCFF 0, #6B72FF 32%, #292FDD 62%, #151A9E 100%); box-shadow: 0 10px 26px -6px rgb(41 47 221 / .7), inset 0 -6px 12px rgb(11 12 90 / .45), inset 0 3px 6px rgb(255 255 255 / .55); }
.hv-core::before { content: ""; position: absolute; inset: -5px; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 55%, rgb(120 200 255 / .9) 80%, transparent 100%); -webkit-mask: radial-gradient(circle, transparent 60%, #000 62%, #000 72%, transparent 74%); mask: radial-gradient(circle, transparent 60%, #000 62%, #000 72%, transparent 74%); }
.hv-core::after { content: ""; position: absolute; left: 20%; top: 14%; width: 34%; height: 22%; border-radius: 50%; background: rgb(255 255 255 / .7); filter: blur(3px); }
.hv.s3 .hv-ring i { opacity: .85; }
.hv-cap { display: grid; justify-items: center; text-align: center; min-height: 36px; width: 100%; }
.hv-sl { grid-area: 1 / 1; display: grid; gap: 1px; font-size: 12.5px; font-weight: 500; line-height: 1.25; color: var(--ink); opacity: 0; }
.hv-sl small { font-size: 10.5px; font-weight: 400; color: var(--blue); letter-spacing: .02em; }
.hv-pg { display: flex; gap: 5px; }
.hv-pg i { width: 16px; height: 3px; border-radius: 2px; background: #D4D6F5; }
@media (prefers-reduced-motion: no-preference) {
  .hv-core { animation: orbcore 2s ease-in-out infinite; }
  .hv-core::before { animation: orbspin 1.6s linear infinite; }
  .hv-halo { animation: orbglow 2.4s ease-in-out infinite; }
  .hv.s2 .hv-sl { animation: slout .8s both; animation-delay: calc(var(--i) * .8s); }
  .hv.s2 .hv-sl:last-child { animation-name: slin; }
  .hv.s2 .hv-pg i { animation: pgon .3s both; animation-delay: calc(var(--i) * .8s); }
}
@media (prefers-reduced-motion: reduce) { .hv-sl:last-child { opacity: 1; } .hv-pg i { background: var(--blue); } }
@keyframes slout { 0% { opacity: 0; transform: translateY(6px); } 15%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes slin { 0% { opacity: 0; transform: translateY(6px); } 15%, 100% { opacity: 1; transform: none; } }
@keyframes pgon { to { background: var(--blue); } }

.person .photo { width: 96px; height: 96px; object-fit: cover; border: 0; padding: 0; }
@media (max-width: 640px) { .person .photo { width: 72px; height: 72px; } }

/* Hero simulation v12: WhatsApp -> Odoo -> ARCA invoice, each in its product's own chrome and type.
   Base styles are each step's END state; [data-s] animations play from the start state, so nothing rewinds while a step fades out. */
.hs { position: relative; z-index: 2; margin-bottom: 26px; }
@media (min-width: 900px) { .hs { grid-column: 2; grid-row: 2; align-self: end; justify-self: end; width: 100%; max-width: 440px; } }
.hs-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--sh-3); overflow: hidden; }
.hs-body { --io: 14px; position: relative; height: 324px; }
.sl { position: absolute; inset: 0; display: flex; flex-direction: column; opacity: 0; transform: translateY(8px); transition: opacity .4s var(--ease), transform .4s var(--ease); pointer-events: none; }
.hs[data-s="1"] .sl1, .hs[data-s="2"] .sl2, .hs[data-s="3"] .sl3 { opacity: 1; transform: none; }
.sl .ic { width: 18px; height: 18px; }
@keyframes hspop { from { opacity: 0; transform: translateY(8px); } }
@keyframes hsfade { from { opacity: 0; } to { opacity: 1; } }

/* 1 · WhatsApp Web */
.wa { --lift: 59px; background: #EFEAE2 radial-gradient(rgb(17 27 33 / .05) 1px, transparent 1.3px) 0 0 / 14px 14px; color: #111B21; font: 400 13.5px/1.38 "Segoe UI", "Helvetica Neue", Helvetica, "Lucida Grande", Arial, sans-serif; }
.wa-h, .wa-in { display: flex; align-items: center; gap: 16px; flex: none; height: 50px; padding: 0 var(--io); background: #F0F2F5; color: #54656F; }
.wa-av { display: grid; place-items: center; width: 34px; height: 34px; margin-right: -4px; border-radius: 50%; background: #DFE5E7; color: #54656F; font-size: 12px; font-weight: 600; flex: none; }
.wa-n { display: grid; flex: 1; min-width: 0; line-height: 1.3; color: #111B21; }
.wa-n b { font-size: 15px; font-weight: 400; }
.wa-n small { font-size: 12.5px; color: #5d6d77; }
.wa-b { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 3px; padding: 8px var(--io) 10px; overflow: hidden; }
.wa-day { align-self: center; margin-bottom: 8px; padding: 4px 10px; border-radius: 7px; background: #fff; font-size: 12px; color: #54656F; box-shadow: 0 1px .5px rgb(11 20 26 / .13); }
.wa .bub { position: relative; max-width: 86%; margin: 0 0 0 8px; padding: 6px 8px 8px 9px; border-radius: 0 7.5px 7.5px 7.5px; background: #fff; box-shadow: 0 1px .5px rgb(11 20 26 / .13); }
.wa .bub::before { content: ""; position: absolute; top: 0; left: -8px; width: 8px; height: 13px; background: inherit; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.wa .bub::after { content: ""; display: inline-block; width: 44px; } /* reserves the time's slot on the last line, as WhatsApp does */
.wa .bub time { position: absolute; right: 7px; bottom: 3px; display: flex; align-items: center; gap: 3px; margin: 0; font-size: 11px; line-height: 15px; color: #667781; }
.wa .b2 { border-radius: 7.5px; }
.wa .b2::before { display: none; }
.wa .bub.out { align-self: flex-end; margin: 8px 8px 0 0; border-radius: 7.5px 0 7.5px 7.5px; background: #D9FDD3; }
.wa .bub.out::before { left: auto; right: -8px; clip-path: polygon(0 0, 100% 0, 0 100%); }
.wa .bub.out::after { width: 62px; }
.wa-tk { width: 16px; height: 16px; flex: none; fill: none; stroke: #53BDEB; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wa .bub mark { padding: 0 1px; border-radius: 3px; color: inherit; background: linear-gradient(rgb(41 47 221 / .16), rgb(41 47 221 / .16)) 0 100% / 100% 100% no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.wa-in span { flex: 1; display: flex; align-items: center; height: 36px; padding: 0 12px; border-radius: 8px; background: #fff; font-size: 13.5px; color: #667781; }
@keyframes wamark { from { background-size: 0 100%; } }
@keyframes walift { from { translate: 0 var(--lift); } }
@keyframes watk { from { stroke: #8696A0; } }
.hs[data-s="1"] .wa-day { animation: walift .4s var(--ease) 2.4s both; }
.hs[data-s="1"] .b1 { animation: hspop .45s var(--ease) .1s both, walift .4s var(--ease) 2.4s both; }
.hs[data-s="1"] .b2 { animation: hspop .45s var(--ease) .45s both, walift .4s var(--ease) 2.4s both; }
.hs[data-s="1"] .wa .bub mark { animation: wamark .5s var(--ease) both; animation-delay: calc(.8s + var(--k, 0) * .35s); }
.hs[data-s="1"] .b1 mark:nth-of-type(2) { --k: 1; }
.hs[data-s="1"] .b1 mark:nth-of-type(3) { --k: 2; }
.hs[data-s="1"] .b2 mark { --k: 3; }
.hs[data-s="1"] .b3 { animation: hspop .4s var(--ease) 2.45s both; }
.hs[data-s="1"] .b3 .wa-tk { animation: watk .2s 3s both; }

/* 2 · Odoo sales order: one header row, roomy lines with product photos, one total */
.od { background: #fff; color: #374151; font: 400 13px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Noto Sans", Arial, sans-serif; }
.od-nav, .od-hd { display: flex; align-items: center; flex: none; padding: 0 var(--io); }
.od-nav { gap: 14px; height: 34px; background: #714B67; color: #fff; }
.od-nav .ic { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.od-nav b { font-weight: 600; }
.od-nav span { opacity: .85; white-space: nowrap; }
.od-av { display: grid; place-items: center; width: 22px; height: 22px; margin-left: auto; border-radius: 4px; background: #017E84; font-size: 9.5px; font-style: normal; font-weight: 600; }
.od-hd { gap: 8px; height: 44px; border-bottom: 1px solid #E5E7EB; }
.od-btn { display: inline-grid; align-items: center; height: 28px; padding: 0 12px; border-radius: 4px; background: #714B67; color: #fff; font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.od-btn i { grid-area: 1 / 1; font-style: normal; text-align: center; }
.od-btn i:first-child { opacity: 0; }
.od-st { display: flex; margin: 0 0 0 auto; padding: 0; list-style: none; }
.od-st li { display: flex; align-items: center; height: 28px; margin-left: -5px; padding: 0 12px 0 16px; background: #F3F4F6; color: #6B7280; font-size: 12px; font-weight: 500; white-space: nowrap; clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 50%, calc(100% - 7px) 100%, 0 100%, 7px 50%); }
.od-st li:first-child { padding-left: 11px; clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 50%, calc(100% - 7px) 100%, 0 100%); }
.od-st .s3 { background: #E6F2F3; color: #017E84; }
.od-sh { flex: 1; display: flex; flex-direction: column; padding: 10px var(--io) 12px; }
.od-ti { margin: 0; font-size: 19px; font-weight: 500; line-height: 1.2; color: #111827; }
.od-cl { margin: 2px 0 8px; color: #6B7280; }
.od-cl u { text-decoration: none; color: #017E84; }
.od-l { margin: 0; padding: 0; list-style: none; }
.od-l li { display: flex; align-items: center; gap: 12px; padding: 5px 0; border-top: 1px solid #EEF0F3; }
.od-l img { width: 36px; height: 36px; flex: none; border-radius: 6px; object-fit: cover; box-shadow: 0 0 0 1px rgb(17 24 39 / .06); }
.od-l p { display: grid; flex: 1; min-width: 0; margin: 0; line-height: 1.3; }
.od-l b { overflow: hidden; font-weight: 500; color: #111827; text-overflow: ellipsis; white-space: nowrap; }
.od-l small { font-size: 12px; color: #6B7280; font-variant-numeric: tabular-nums; }
.od-l span { font-variant-numeric: tabular-nums; color: #111827; }
.od-tot { display: flex; align-items: baseline; justify-content: space-between; margin: auto 0 0; padding-top: 8px; border-top: 1px solid #D1D5DB; }
.od-tot span { font-weight: 600; color: #111827; }
.od-tot small { margin-left: 6px; font-size: 12px; font-weight: 400; color: #6B7280; }
.od-tot b { font-size: 17px; font-weight: 700; color: #111827; font-variant-numeric: tabular-nums; }
@keyframes odon { from { background: #F3F4F6; color: #6B7280; } to { background: #E6F2F3; color: #017E84; } }
@keyframes odpress { 50% { transform: scale(.94); } }
.hs[data-s="2"] .od-l li { animation: hspop .4s var(--ease) both; }
.hs[data-s="2"] .od-l li:nth-child(1) { animation-delay: .3s; }
.hs[data-s="2"] .od-l li:nth-child(2) { animation-delay: .6s; }
.hs[data-s="2"] .od-l li:nth-child(3) { animation-delay: .9s; }
.hs[data-s="2"] .od-tot { animation: hspop .4s var(--ease) 1.2s both; }
.hs[data-s="2"] .od-btn { animation: odpress .3s var(--ease) 1.8s; }
.hs[data-s="2"] .od-btn i:first-child { animation: hsfade .2s 2s both reverse; }
.hs[data-s="2"] .od-btn i + i { animation: hsfade .2s 2s both; }
.hs[data-s="2"] .od-st .s1 { animation: odon .25s 2s both reverse; }
.hs[data-s="2"] .od-st .s3 { animation: odon .25s 2s both; }

/* 3 · ARCA invoice in a PDF viewer, then the WhatsApp delivery */
.pdfv { background: #525659; }
.pdf-bar { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; flex: none; height: 34px; padding: 0 var(--io); background: #323639; color: #F1F3F4; font: 400 12.5px/1 Roboto, "Segoe UI", system-ui, sans-serif; box-shadow: 0 1px 3px rgb(0 0 0 / .4); }
.pdf-bar .ic { width: 16px; height: 16px; }
.pdf-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdf-pg { padding: 4px 7px; border-radius: 2px; background: #191B1C; font-size: 11.5px; }
.pdf-v { position: relative; flex: 1; overflow: hidden; }
.arca { position: absolute; left: var(--io); right: var(--io); top: 12px; padding: 10px; background: #fff; box-shadow: 0 2px 6px rgb(0 0 0 / .35); color: #000; font: 400 7.5px/1.35 Arial, Helvetica, sans-serif; transform: translateY(calc(-100% + 266px)); }
.arca p { margin: 0; }
.ar-or { padding: 2px 0; border: 1px solid #000; font-size: 9px; font-weight: 700; text-align: center; }
.ar-top { position: relative; display: grid; grid-template-columns: 1fr 1fr; border: 1px solid #000; border-top: 0; }
.ar-l, .ar-r { padding: 5px 6px 6px; }
.ar-l { padding-right: 22px; border-right: 1px solid #000; }
.ar-r { padding-left: 24px; }
.ar-big { display: block; margin: 3px 0 6px; font-size: 13px; line-height: 1.1; }
.ar-l .ar-big { text-align: center; }
.ar-c { position: absolute; left: 50%; top: -1px; width: 34px; translate: -50% 0; padding: 1px 0 2px; border: 1px solid #000; background: #fff; text-align: center; }
.ar-c b { display: block; font-size: 22px; line-height: 1.05; }
.ar-c small { display: block; font-size: 6px; font-weight: 700; }
.ar-box { margin-top: 4px; padding: 4px 6px; border: 1px solid #000; }
.ar-box p + p { margin-top: 2px; }
.ar-t { width: 100%; margin-top: 4px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ar-t th { padding: 2px; border: 1px solid #000; background: #CCC; font-size: 6.5px; font-weight: 700; line-height: 1.15; text-align: center; }
.ar-t td { padding: 2px 3px; text-align: right; white-space: nowrap; }
.ar-t td:nth-child(-n+2) { text-align: left; }
.ar-t td:nth-child(2) { white-space: normal; }
.ar-t td:nth-child(4) { text-align: center; }
.ar-tot { display: grid; grid-template-columns: 1fr auto; gap: 12px; margin-top: 36px; padding: 6px; }
.ar-tot dl { margin: 0; }
.ar-tot div { display: flex; justify-content: space-between; gap: 6px; padding: 1px 3px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ar-tot dd { margin: 0; }
.ar-ot .h { background: #CCC; font-weight: 700; }
.ar-ot div { white-space: normal; }
.ar-tt dt { flex: 1; font-weight: 700; text-align: right; }
.ar-tt dd { min-width: 42px; font-weight: 700; text-align: right; }
.ar-tt .tt { margin-top: 2px; font-size: 9px; }
.ar-ft { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; margin-top: 8px; }
.ar-qr { display: block; width: 52px; height: 52px; }
.ar-ft p { display: grid; gap: 1px; }
.ar-logo { font-size: 15px; font-weight: 800; color: #0B6AA8; }
.ar-ft small { font-size: 6px; font-style: italic; }
.ar-cae { text-align: right; }
.wa-toast { position: absolute; z-index: 2; top: 44px; left: calc(var(--io) - 8px); right: calc(var(--io) - 8px); display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px rgb(0 0 0 / .06), 0 12px 28px -8px rgb(0 0 0 / .5); color: #111B21; font: 400 12px/1.3 "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; }
.wa-toast .brand { width: 22px; height: 22px; }
.wa-toast p { display: grid; flex: 1; min-width: 0; margin: 0; }
.wa-toast b { font-size: 12.5px; font-weight: 600; }
.wa-toast small { overflow: hidden; font-size: 11.5px; color: #667781; text-overflow: ellipsis; white-space: nowrap; }
@keyframes arscroll { from { transform: none; } }
@keyframes watoast { from { opacity: 0; transform: translateY(-10px) scale(.97); } }
@media (prefers-reduced-motion: no-preference) {
  .hs[data-s="3"] .arca { animation: arscroll 2.4s var(--ease) .7s both; }
  .hs[data-s="3"] .wa-toast { animation: watoast .45s var(--ease) 3.3s both; }
  .hs[data-s="3"] .wa-toast .wa-tk { animation: watk .2s 3.9s both; }
}

/* the agent orb */
#orb { display: block; }
.hs-orb { position: absolute; z-index: 3; left: -74px; top: calc(50% - 56px); display: grid; justify-items: center; gap: 4px; width: 104px; padding: 12px 8px; border: 1px solid #fff; border-radius: 22px; background: rgb(255 255 255 / .72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 18px 40px -14px rgb(41 47 221 / .35), var(--sh-3); }
.hs-orb #orb { width: 52px; height: 52px; }
.hs-lab { display: grid; justify-items: center; width: 100%; font-size: 13px; font-weight: 500; color: var(--ink); text-align: center; }
/* label rolls up to the next word; the active word carries a light sweep while the agent works */
.hs-lab i { grid-area: 1 / 1; font-style: normal; line-height: 1.2; opacity: 0; transform: translateY(70%); transition: opacity .3s var(--ease), transform .45s var(--ease); background: linear-gradient(90deg, var(--ink) 0 38%, #8E92F5 50%, var(--ink) 62% 100%) 0 0 / 250% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hs[data-s="1"] .hs-lab i:nth-child(1), .hs[data-s="2"] .hs-lab i:nth-child(2), .hs[data-s="3"] .hs-lab i:nth-child(3) { opacity: 1; transform: none; }
.hs[data-s="2"] .hs-lab i:nth-child(1), .hs[data-s="3"] .hs-lab i:nth-child(-n+2) { transform: translateY(-70%); }
@keyframes hsshim { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: no-preference) { .hs-lab i { animation: hsshim 1.6s linear infinite; } }
@media (max-width: 899px) {
  .hs-orb { position: relative; left: 0; top: 0; display: flex; align-items: center; gap: 10px; width: auto; margin: 0 0 12px; padding: 8px 14px 8px 10px; border-radius: 999px; justify-self: start; }
  .hs-orb #orb { width: 40px; height: 40px; }
  .hs-lab { justify-items: start; text-align: left; }
}
@media (max-width: 560px) { .od-nav span:last-of-type { display: none; } }

/* hero v12b: orb straddles the card's edge; badges sit beside the card, not below it, so the title isn't stranded */
@media (min-width: 900px) {
  .hs-body { --io: 40px; } /* symmetric gutters, like WhatsApp's chat column, Odoo's sheet and a PDF page; the orb straddles the left one */
  .hero { padding-top: clamp(28px, 3.5vw, 48px); }
  .hero > .in { grid-template-rows: auto 1fr auto; }
  .hero h1 { grid-row: 1; align-self: start; }
  .hs { grid-row: 1 / span 2; }
  .hero .sub { grid-column: 1; grid-row: 2; align-self: start; margin-top: 0; max-width: 34ch; }
}
@media (max-width: 899px) { .hero .sub { margin-bottom: 24px; } }
@media (min-width: 900px) {
  .hero-foot .partners { grid-row: 3; align-self: center; margin-top: 0; }
  .hs { margin-bottom: 18px; }
}

/* ================= v13: premium pass — artifacts over icons, one authored moment per section ================= */

/* Browser surfaces */
html { accent-color: var(--blue); }
body { font-variant-numeric: tabular-nums; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--bone); }
::-webkit-scrollbar-thumb { border: 3px solid var(--bone); border-radius: 8px; background: #C3C4CB; }
::-webkit-scrollbar-thumb:hover { background: #A2A4AE; }

/* Scroll entrance: finishes while the block enters, so nothing above the fold ever sits half-faded */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .stage2, .case-feature, .plans { animation: rise-in linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
  }
}
@keyframes rise-in { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } }

/* ---------- Flow: one order travelling through four steps ---------- */
.flow-w { position: relative; }
.flow li { display: flex; flex-direction: column; padding: 12px 12px 24px; }
.flow li > h3, .flow li > p { padding: 0 12px; }
.fl-a { position: relative; display: grid; align-content: center; gap: 8px; height: 140px; margin-bottom: 22px; padding: 16px; border-radius: 14px; background: var(--stage); overflow: hidden; font-size: 13px; line-height: 1.35; }
.fl-a::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgb(11 12 26 / .13) 1px, transparent 1.3px); background-size: 14px 14px; -webkit-mask: linear-gradient(#000, transparent 85%); mask: linear-gradient(#000, transparent 85%); pointer-events: none; }
.fl-a > * { position: relative; }
.flow .fl-a p { margin: 0; padding: 0; font-size: 13px; line-height: 1.35; color: var(--ink); }
.flow .fl-a .fa-ok { font-size: 12.5px; color: var(--wa); }
.flow .fl-a .fa-leg, .flow .fl-a .fa-lbl p { font-size: 12px; color: var(--ash); }
.fa-bub { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; align-items: start; padding: 9px 11px; border-radius: 0 10px 10px 10px; background: #fff; box-shadow: 0 1px .5px rgb(11 20 26 / .13); }
.fa-bub .brand { width: 16px; height: 16px; grid-row: span 2; margin-top: 1px; }
.fa-bub time { justify-self: end; font-size: 11px; color: #667781; }
.fa-ok { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--wa); font-weight: 500; }
.fa-ok .ic { width: 15px; height: 15px; stroke-width: 2.2; }
.fa-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 10px; }
.fa-row b { white-space: nowrap; }
.fa-row b { font-weight: 500; }
.fa-row span { font-size: 12px; color: var(--ash); white-space: nowrap; }
.fa-bar { height: 10px; border-radius: 6px; background: #DDDCD6; overflow: hidden; }
.fa-bar i { display: block; width: 33%; height: 100%; border-radius: inherit; background: var(--blue); }
.fa-leg { display: flex; justify-content: space-between; font-size: 12px; color: var(--ash); }
.fa-leg span { display: inline-flex; align-items: center; gap: 6px; }
.fa-leg .k { width: 8px; height: 8px; border-radius: 2px; background: var(--blue); }
.fa-lbl { display: grid; gap: 6px; justify-self: center; width: min(100%, 210px); padding: 10px 12px; border-radius: 4px; background: #fff; box-shadow: 0 1px 2px rgb(11 12 26 / .12), 0 8px 18px -10px rgb(11 12 26 / .35); rotate: -2deg; }
.fa-lbl p { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--ash); }
.fa-lbl b { font: 500 13px/1.2 var(--mono); color: var(--ink); }
.fa-bc { width: 100%; height: 26px; fill: var(--ink); }
.fa-scan { position: absolute; left: 22%; right: 22%; top: 50%; height: 2px; border-radius: 2px; background: #E5484D; box-shadow: 0 0 10px 2px rgb(229 72 77 / .45); opacity: 0; }

/* the rail: four stops, one packet (desktop row only) */
.fl-track { display: none; }
@media (min-width: 1100px) {
  .flow-w { padding-top: 34px; }
  .fl-track { display: block; position: absolute; top: 8px; left: 12.5%; right: 12.5%; height: 2px; background: repeating-linear-gradient(90deg, rgb(41 47 221 / .45) 0 5px, transparent 5px 11px); }
  .fl-track::before { content: ""; position: absolute; inset: -4px -5px; background: radial-gradient(circle at 5px 5px, var(--blue) 4px, transparent 4.5px) 0 0 / calc((100% - 10px) / 3) 10px repeat-x; }
  .fl-pk { position: absolute; top: -6px; left: -7px; width: 14px; height: 14px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 5px rgb(41 47 221 / .16), 0 4px 10px rgb(41 47 221 / .45); }
}

@media (prefers-reduced-motion: no-preference) {
  .js .flow-w:not(.play) .fl-a > *, .js .flow-w:not(.play) .fl-pk { opacity: 0; }
  .flow li:nth-child(1) { --d: .2s; } .flow li:nth-child(2) { --d: 1.9s; } .flow li:nth-child(3) { --d: 3.6s; } .flow li:nth-child(4) { --d: 5.3s; }
  .flow-w.play .fl-a > * { animation: hspop .5s var(--ease) both; animation-delay: var(--d); }
  .flow-w.play .fl-a > :nth-child(2) { animation-delay: calc(var(--d) + .35s); }
  .flow-w.play .fl-a > :nth-child(3) { animation-delay: calc(var(--d) + .6s); }
  .flow-w.play .fa-bar i { animation: fabar .9s var(--ease) both; animation-delay: calc(var(--d) + .3s); }
  .flow-w.play .fa-scan { animation: fascan 1.1s ease-in-out both; animation-delay: calc(var(--d) + .4s); }
  .flow-w.play .fl-pk { animation: flpk 5.8s cubic-bezier(.65, 0, .35, 1) .1s both; }
  .flow-w.play li { animation: flcard .8s var(--ease) both; animation-delay: var(--d); }
}
@keyframes hspop { from { opacity: 0; transform: translateY(8px); } }
@keyframes fabar { from { width: 0; } }
@keyframes fascan { 0% { opacity: 0; transform: translateY(-34px); } 15%, 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(30px); } }
@keyframes flpk { 0%, 4% { left: -7px; } 28%, 33% { left: calc(33.333% - 7px); } 58%, 63% { left: calc(66.666% - 7px); } 90%, 100% { left: calc(100% - 7px); } }
@keyframes flcard { 0% { border-color: var(--line); } 30% { border-color: rgb(41 47 221 / .55); box-shadow: var(--sh-2); } 100% { border-color: var(--line); box-shadow: none; } }

/* ---------- Service pages: copy left, the product working on the right ---------- */
.answer { margin-top: 22px; padding: 0; border: 0; background: none; border-radius: 0; font-size: clamp(17px, 1.5vw, 19px); line-height: 1.55; color: var(--ink-2); }
.ph-shot { margin-top: 40px; height: 380px; }
.ph-shot .pane { padding: 28px 28px 0; }
@media (min-width: 1000px) {
  .page-h.has-vis > .in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: center; }
  .page-h.has-vis h1 { font-size: clamp(36px, 3.7vw, 54px); max-width: 18ch; }
  .ph-shot { margin-top: 0; height: 440px; }
  .ph-shot .pane { padding: 36px 36px 0; }
}
@media (max-width: 599px) { .ph-shot { height: 340px; margin-inline: calc(var(--gutter) * -1); border-radius: 0; border-inline: 0; } .ph-shot .pane { padding: 20px 16px 0; } }
.ph-shot .agent2 { grid-template-columns: 1fr; gap: 12px; }
.ph-shot .agent2 .agent-result { display: none; }

/* Facts: one spec strip, not three cards */
.facts { gap: 0; padding: 0; background: var(--paper); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; }
.facts li { padding: 24px 28px; background: none; border: 0; border-radius: 0; }
.facts li + li { border-top: 1px solid var(--line); }
@media (min-width: 760px) { .facts li + li { border-top: 0; border-left: 1px solid var(--line); } }
.facts b { font-size: clamp(30px, 3vw, 40px); letter-spacing: -.035em; }
.facts li:first-child b { color: var(--blue); }
.facts span { margin-top: 8px; }

/* Prose: the first paragraph states the job */
.prose p:first-child { font-size: clamp(20px, 2vw, 24px); line-height: 1.4; letter-spacing: -.015em; color: var(--ink); text-wrap: pretty; }
.prose p:first-child + p { margin-top: 24px; }

/* Price beside its explanation */
.price-sec .price-copy h2 { font-weight: 500; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.08; letter-spacing: -.035em; max-width: 14ch; }
.pay { display: flex; gap: 12px; margin: 28px 0 24px; }
.pay li { flex: 1; max-width: 180px; padding: 16px 18px; border-radius: 14px; background: var(--paper); border: 1px solid var(--line); }
.pay b { display: block; font-weight: 500; font-size: 30px; letter-spacing: -.03em; line-height: 1; }
.pay li:last-child b { color: var(--blue); }
.pay span { display: block; margin-top: 6px; font-size: 14px; color: var(--ash); }
.price-sec .fine { max-width: 40ch; }
@media (min-width: 900px) {
  .price-sec > .in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 56px; align-items: center; }
  .price-sec .plans.one { max-width: none; }
}
@media (max-width: 899px) { .price-sec .price-copy { margin-bottom: 28px; } }

/* Case teaser: the logo, the number, the client's words */
.case-mini { display: grid; gap: 18px 28px; padding: clamp(24px, 3vw, 36px); border-radius: 22px; background: var(--paper); border: 1px solid var(--line); transition: border-color .2s var(--ease), box-shadow .3s var(--ease); }
.case-mini:hover { border-color: var(--line-2); box-shadow: var(--sh-2); }
.case-mini img { width: 56px; height: 56px; border-radius: 12px; }
.cm-n b { display: block; font-weight: 500; font-size: clamp(40px, 5vw, 64px); line-height: 1; letter-spacing: -.045em; color: var(--blue); }
.cm-n span { display: block; margin-top: 8px; font-size: 16px; color: var(--ash); max-width: 30ch; }
.case-mini .stmt span { display: block; margin-top: 10px; font-size: 15px; letter-spacing: 0; }
.case-mini .lnk { justify-self: start; }
.case-mini:hover .lnk { text-decoration-color: currentColor; }
.case-mini:hover .lnk .ic { transform: translateX(2px); }
@media (min-width: 900px) { .case-mini { grid-template-columns: 56px minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; } .case-mini .lnk { grid-column: 3; } }

/* Closing block: every system wired into one team */
.page-cta { position: relative; overflow: hidden; }
.page-cta > .in { display: grid; gap: 40px; align-items: center; }
.cta-map { display: none; }
@media (min-width: 900px) {
  .page-cta > .in { grid-template-columns: minmax(0, 1fr) 360px; }
  .cta-map { display: block; position: relative; grid-column: 2; grid-row: 1; width: 360px; height: 240px; }
  .cta-copy { grid-row: 1; }
}
.cta-map svg { position: absolute; inset: 0; overflow: visible; }
.cta-map path { fill: none; stroke: #6A6FF0; stroke-width: 1.6; stroke-dasharray: 4 6; opacity: .7; }
.cm-t, .cm-hub { position: absolute; display: grid; place-items: center; border-radius: 12px; background: #fff; box-shadow: 0 10px 24px -12px rgb(0 0 0 / .6); }
.cm-t { left: 0; width: 44px; height: 44px; }
.cm-t .brand { width: 22px; height: 22px; }
.cm-hub { left: 276px; top: 88px; width: 64px; height: 64px; border-radius: 16px; background: none; box-shadow: 0 16px 32px -12px rgb(0 0 0 / .7); }
.cm-hub img { width: 64px; height: 64px; }
@media (prefers-reduced-motion: no-preference) { .cta-map path { animation: dash 1.1s linear infinite; } }
.ph-shot .prod:nth-child(3) { display: none; }
@media (min-width: 1000px) { .ph-shot .prods { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Pricing: headers and prices line up across cards whatever the title length */
@media (min-width: 760px) {
  .plan { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; }
  .plans.one .plan { grid-row: auto; grid-template-rows: auto 1fr; }
}
.plan .price { font-feature-settings: "tnum"; }
.plan.featured .price { color: var(--blue); }
.plan .acts .b-p { transition: background-color .2s var(--ease), box-shadow .3s var(--ease), transform .2s var(--ease); }
.plan:hover .acts .b-p { box-shadow: inset 0 1px 0 rgb(255 255 255 / .16), 0 10px 22px -10px rgb(41 47 221 / .7); }

/* Case page: the client's words carry the page */
.quote-xl { position: relative; max-width: 920px; padding: clamp(28px, 4vw, 48px) 0 0 clamp(0px, 5vw, 64px); border-top: 1px solid var(--ink); }
.quote-xl blockquote { font-size: clamp(24px, 2.8vw, 36px); line-height: 1.25; letter-spacing: -.025em; text-wrap: pretty; text-indent: -.42em; }
.quote-xl figcaption { display: flex; align-items: center; gap: 14px; margin-top: 28px; font-size: 15px; color: var(--ash); }
.quote-xl figcaption img { border-radius: 50%; }
.quote-xl figcaption b { display: block; font-weight: 500; color: var(--ink); }
.ph-shot .hx::before, .ph-shot .hx::after { display: none; }

/* ---------- Service pages: "Cómo funciona" as four screens ---------- */
.feat-lead { max-width: 62ch; margin-top: 20px; font-size: 18px; line-height: 1.55; color: var(--ink-2); }
.feat { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .feat { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .feat { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
.feat li { display: flex; flex-direction: column; padding: 12px 12px 24px; background: var(--paper); border: 1px solid var(--line); border-radius: 22px; transition: border-color .25s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease); }
.feat li:hover { border-color: var(--line-2); box-shadow: var(--sh-2); transform: translateY(-2px); }
.feat li > h3 { padding: 0 12px; font-weight: 500; font-size: 19px; letter-spacing: -.02em; line-height: 1.25; }
.feat li > p { padding: 0 12px; margin-top: 8px; font-size: 15.5px; line-height: 1.55; color: var(--ash); }
.feat .fl-a { height: 172px; }
.feat .fl-a p { margin: 0; padding: 0; font-size: 13px; line-height: 1.35; color: var(--ink); }
.feat .fl-a .fa-ok { font-size: 12.5px; color: var(--wa); }
.feat .fl-a .dim { color: var(--ash); font-size: 12px; }
.sim-note { margin-top: 14px; font-size: 13px; color: var(--ash); }

.fa-chip { justify-self: start; padding: 2px 9px; border-radius: 999px; background: #E3F4E8; color: #17663A; font-size: 11.5px; font-weight: 500; }
.fa-spec { display: grid; grid-template-columns: 56px 1fr; gap: 8px 12px; align-items: center; padding: 12px; border-radius: 12px; background: #fff; box-shadow: var(--sh-1), 0 6px 16px -10px rgb(11 12 26 / .3); }
.fa-spec img { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; }
.fa-spec b { font: 500 12px/1.2 var(--mono); color: var(--ash); }
.fa-spec dl { grid-column: 1 / -1; margin: 0; border-top: 1px solid var(--line); }
.fa-spec dl div { display: flex; justify-content: space-between; padding: 4px 0; font-size: 12px; border-bottom: 1px solid var(--line); }
.fa-spec dt { color: var(--ash); }
.fa-spec dd { margin: 0; }
.fa-spec .fa-chip { grid-column: 1 / -1; }
.fa-cart { display: grid; gap: 6px; }
.fa-cart p { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; background: #fff; box-shadow: var(--sh-1); }
.fa-cart img { width: 28px; height: 28px; border-radius: 6px; object-fit: cover; }
.fa-cart span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fa-cart b { font-weight: 500; }
.fa-send { display: flex; align-items: center; justify-content: center; gap: 8px; height: 34px; margin-top: 2px; border-radius: 10px; background: #1F8A4C; color: #fff; font-size: 12.5px; font-weight: 500; }
.fa-send .brand { width: 16px; height: 16px; }
.fa-serp { padding: 12px 14px; border-radius: 12px; background: #fff; box-shadow: var(--sh-1), 0 6px 16px -10px rgb(11 12 26 / .3); font-family: Arial, Helvetica, sans-serif; }
.fa-serp .u { font-size: 11.5px; color: #4D5156; }
.fa-serp .t { margin: 3px 0; font-size: 15px; line-height: 1.3; color: #1A0DAB; }
.fa-serp .d { font-size: 12px; line-height: 1.45; color: #4D5156; }
.fa-link { display: flex; align-items: center; }
.fa-node { display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 10px; background: #fff; box-shadow: var(--sh-1), 0 6px 14px -10px rgb(11 12 26 / .35); font-size: 12px; font-weight: 500; white-space: nowrap; }
.fa-node .brand { width: 14px; height: 14px; }
.fa-node i:not(.brand) { padding: 1px 4px; border-radius: 3px; background: #1D6F42; color: #fff; font: 600 9px/1.4 var(--sans); font-style: normal; }
.fa-node.xl { color: var(--ash); text-decoration: line-through; text-decoration-color: var(--bad); }
.fa-wire { flex: 1; min-width: 18px; height: 2px; margin: 0 6px; background: repeating-linear-gradient(90deg, var(--blue) 0 4px, transparent 4px 9px); background-size: 9px 2px; }
.fa-cmp { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px 10px; font-size: 12px; color: var(--ash); }
.fa-cmp b { font-weight: 500; color: var(--ink); }
.fa-cmp .fa-bar { height: 8px; }
.fa-code { margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--night); color: #D7D9E6; font: 400 10.5px/1.6 var(--mono); white-space: pre; overflow: hidden; }
.fa-code .k { color: #9EA3FF; }
.fa-code .s { color: #7FD8A6; }
.fa-doc { padding: 12px 14px; border-radius: 10px; background: #fff; box-shadow: var(--sh-1), 0 6px 16px -10px rgb(11 12 26 / .3); display: grid; gap: 6px; }
.fa-doc .h { display: flex; align-items: center; gap: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--line); font-weight: 500; }
.fa-doc .h i { padding: 2px 5px; border-radius: 3px; background: #D93A3F; color: #fff; font: 600 9px/1.3 var(--sans); font-style: normal; }
.fa-doc .h span { margin-left: auto; font-weight: 400; font-size: 11.5px; color: var(--ash); }
.fa-doc mark { padding: 0 2px; border-radius: 3px; color: inherit; background: linear-gradient(rgb(41 47 221 / .16), rgb(41 47 221 / .16)) 0 0 / 100% 100% no-repeat; }
.fa-map { display: grid; gap: 6px; }
.feat .fa-map p { display: grid; grid-template-columns: 1fr 14px auto; align-items: center; gap: 6px; padding: 7px 9px; border-radius: 8px; background: #fff; box-shadow: var(--sh-1); font-size: 12px; }
.fa-map span { color: var(--ash); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fa-map .ic { width: 14px; height: 14px; color: var(--blue); }
.fa-map b { font-weight: 500; font-size: 11.5px; white-space: nowrap; }
.fa-draft { display: grid; gap: 6px; padding: 12px 14px; border-radius: 12px; background: #fff; box-shadow: var(--sh-1), 0 6px 16px -10px rgb(11 12 26 / .3); }
.fa-draft p { display: flex; justify-content: space-between; align-items: center; }
.fa-draft .st { padding: 1px 8px; border-radius: 999px; background: #EEF0F3; color: var(--ash); font-size: 11px; }
.fa-draft .tot { padding-top: 6px; border-top: 1px solid var(--line); }
.fa-draft .tot b { font-weight: 600; }
.fa-btn { justify-self: start; padding: 5px 12px; border-radius: 6px; background: #714B67; color: #fff; font-size: 12px; font-weight: 500; }
.fa-alert { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: #FFF6E5; border: 1px solid #F3D9A4; }
.fa-alert .ic { width: 18px; height: 18px; color: #B26A00; margin-top: 1px; }
.fa-alert p { display: grid; gap: 2px; }
.fa-alert b { font-weight: 500; }
.fa-alert span { font-size: 12px; color: #7A5A1F; }

/* the systems it connects to */
.conn { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 28px; padding: 18px 22px; border-radius: 18px; background: var(--paper); border: 1px solid var(--line); }
.conn > p { font-size: 15px; font-weight: 500; }
.conn ul { display: flex; flex-wrap: wrap; gap: 8px; }
.conn li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border-radius: 999px; background: var(--bone); font-size: 14px; }
.conn .brand { width: 18px; height: 18px; }

@media (prefers-reduced-motion: no-preference) {
  .js .feat:not(.play) li { opacity: 0; transform: translateY(16px); }
  .feat li:nth-child(1) { --d: 0s; } .feat li:nth-child(2) { --d: .12s; } .feat li:nth-child(3) { --d: .24s; } .feat li:nth-child(4) { --d: .36s; }
  .feat.play li { animation: hspop .7s var(--ease) both; animation-delay: var(--d); }
  .feat.play .fl-a > * { animation: hspop .5s var(--ease) both; animation-delay: calc(var(--d) + .35s); }
  .feat.play .fl-a > :nth-child(2) { animation-delay: calc(var(--d) + .55s); }
  .feat.play .fl-a > :nth-child(3) { animation-delay: calc(var(--d) + .75s); }
  .feat.play .fa-map p, .feat.play .fa-cart p, .feat.play .fa-doc p:not(.h) { animation: hspop .4s var(--ease) both; }
  .feat.play .fa-map p:nth-child(1), .feat.play .fa-cart p:nth-child(1), .feat.play .fa-doc p:nth-child(2) { animation-delay: calc(var(--d) + .6s); }
  .feat.play .fa-map p:nth-child(2), .feat.play .fa-cart p:nth-child(2), .feat.play .fa-doc p:nth-child(3) { animation-delay: calc(var(--d) + .9s); }
  .feat.play .fa-map p:nth-child(3), .feat.play .fa-doc p:nth-child(4) { animation-delay: calc(var(--d) + 1.2s); }
  .feat.play .fa-doc mark { animation: wamark .6s var(--ease) both; animation-delay: calc(var(--d) + 1.4s); }
  .feat.play .fa-bar i { animation: fabar .9s var(--ease) both; animation-delay: calc(var(--d) + .6s); }
  .fa-wire { animation: fawire .8s linear infinite; }
  .feat.play .fa-alert { animation: hspop .5s var(--ease) both, faalert 2.4s ease-in-out calc(var(--d) + 1s) 2; animation-delay: calc(var(--d) + .4s), calc(var(--d) + 1s); }
}
@keyframes wamark { from { background-size: 0 100%; } }
@keyframes fawire { to { background-position: 9px 0; } }
@keyframes faalert { 50% { border-color: #E2A33C; box-shadow: 0 6px 18px -10px rgb(178 106 0 / .55); } }

/* ---------- /precios hero: when you pay ---------- */
.pay-tl { position: relative; margin-top: 40px; padding: 28px; border-radius: 28px; background: var(--paper); border: 1px solid var(--line); box-shadow: var(--sh-3); }
@media (min-width: 1000px) { .pay-tl { margin-top: 0; } }
.pt-h { font-size: 15px; font-weight: 500; color: var(--ash); }
.pay-tl ol { position: relative; display: grid; gap: 22px; margin-top: 24px; }
.pay-tl ol::before { content: ""; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 2px; background: repeating-linear-gradient(var(--blue) 0 5px, transparent 5px 11px); opacity: .5; }
.pay-tl li { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; padding-left: 40px; }
.pay-tl li::before { content: ""; position: absolute; left: 4px; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--paper); border: 2px solid var(--blue); }
.pay-tl li:nth-child(2)::before { background: var(--blue); }
.pay-tl b { font-weight: 500; font-size: clamp(28px, 2.8vw, 38px); line-height: 1; letter-spacing: -.035em; }
.pay-tl li:nth-child(2) b { color: var(--blue); }
.pay-tl li:nth-child(3) b { font-size: clamp(22px, 2vw, 26px); }
.pay-tl span { grid-column: 1; font-size: 15px; color: var(--ink-2); }
.pay-tl small { grid-column: 2; grid-row: 1 / span 2; align-self: center; padding: 4px 10px; border-radius: 999px; background: var(--bone); font-size: 12.5px; color: var(--ash); white-space: nowrap; }
@media (max-width: 520px) { .pay-tl small { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 6px; } }
@media (prefers-reduced-motion: no-preference) {
  .pay-tl.play li { animation: hspop .6s var(--ease) both; }
  .pay-tl.play li:nth-child(2) { animation-delay: .35s; } .pay-tl.play li:nth-child(3) { animation-delay: .7s; }
}

/* ---------- Case hero: the 72 hours ---------- */
.meter72 { margin-top: 40px; padding: 28px; border-radius: 28px; background: var(--night); color: #fff; box-shadow: var(--sh-3); }
@media (min-width: 1000px) { .meter72 { margin-top: 0; } }
.m-h { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--night-text); }
.m-h img { border-radius: 50%; }
.m-n { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin-top: 26px; }
.m-n b { font-weight: 500; font-size: clamp(48px, 6vw, 80px); line-height: 1; letter-spacing: -.045em; }
.m-n span { font-size: 17px; color: var(--night-text); }
.m-ruler { position: relative; height: 10px; margin: 28px 0 46px; border-radius: 6px; background: #22253A; }
.m-fill { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, #4F55F0, var(--blue)); transform-origin: left; }
.m-ruler span { position: absolute; top: 18px; translate: -50% 0; white-space: nowrap; font-size: 12.5px; color: var(--night-text); }
.m-ruler span:first-of-type { translate: 0 0; } .m-ruler span:last-of-type { translate: -100% 0; }
.m-ruler span::before { content: ""; position: absolute; left: 50%; top: -12px; width: 1px; height: 6px; background: #3A3E58; }
.m-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.m-tags li { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--night-line); font-size: 13.5px; color: #D9DBE7; }
@media (prefers-reduced-motion: no-preference) {
  .js .meter72:not(.play) .m-fill { transform: scaleX(0); }
  .meter72.play .m-fill { animation: mfill 1.3s cubic-bezier(.33, 1, .68, 1) both; }
}
@keyframes mfill { from { transform: scaleX(0); } }

/* ================= v14: each service page tells its story in its own format ================= */
.ok-t { color: var(--wa); }
.calc-q h2, .diag-copy h2, .cs-copy h2, .own-copy h2 { font-weight: 400; font-size: clamp(32px, 4vw, 52px); line-height: 1.06; letter-spacing: -.032em; text-wrap: balance; }
.diag-copy h2 span { display: block; color: var(--ash); }
.diag-copy p:not(.sim-note), .own-copy p, .cs-copy p { margin-top: 20px; max-width: 44ch; font-size: 18px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }

/* Agentes: the hours, from the visitor's own numbers */
.calc { display: grid; gap: 40px; }
@media (min-width: 900px) { .calc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; } }
.calc-q h2 { max-width: 16ch; margin-bottom: 32px; }
.rg { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 4px 12px; padding: 18px 0 10px; border-top: 1px solid var(--line); cursor: pointer; }
.rg span { font-size: 16px; color: var(--ink-2); }
.rg output { font-weight: 500; font-size: 30px; line-height: 1; letter-spacing: -.03em; }
.rg input { grid-column: 1 / -1; width: 100%; height: 28px; margin: 4px 0 0; cursor: pointer; }
.calc-a { padding: clamp(24px, 3.4vw, 44px); border-radius: 28px; background: var(--night); color: #fff; box-shadow: var(--sh-3); }
.ca-n b { display: block; font-weight: 500; font-size: clamp(80px, 10vw, 136px); line-height: .9; letter-spacing: -.055em; }
.ca-n span { display: block; margin-top: 14px; max-width: 24ch; font-size: 17px; color: var(--night-text); }
.ca-bars { display: grid; gap: 14px; margin-top: 36px; }
.ca-bars p { display: grid; grid-template-columns: 104px minmax(0, 1fr) 52px; align-items: center; gap: 14px; font-size: 14px; color: var(--night-text); }
.ca-bars b { font-weight: 500; color: #fff; text-align: right; }
.cb { display: block; height: 12px; border-radius: 6px; background: #22253A; overflow: hidden; }
.cb i { display: block; height: 100%; border-radius: inherit; background: #5A5E78; transition: width .5s var(--ease); }
.cb.ag i { background: #7B80F4; }
.ca-f { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--night-line); font-size: 15px; color: #D9DBE7; }

/* Agentes: one run of the agent, timestamped */
.feat.rail { position: relative; grid-template-columns: minmax(0, 1fr); gap: 0; }
.feat.rail li:not(:last-child)::after { content: ""; position: absolute; left: 7px; top: 22px; bottom: 4px; width: 2px; background: repeating-linear-gradient(var(--blue) 0 5px, transparent 5px 11px); opacity: .45; }
.feat.rail li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); padding: 0 0 48px 40px; background: none; border: 0; border-radius: 0; }
.feat.rail li:hover { box-shadow: none; transform: none; }
.feat.rail li::before { content: ""; position: absolute; left: 0; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--bone); border: 2px solid var(--blue); }
.feat.rail li:last-child::before { background: var(--blue); }
.feat.rail .t { font: 500 13px/1.4 var(--mono); color: var(--blue); }
.feat.rail li > h3 { margin-top: 8px; padding: 0; font-size: clamp(20px, 2vw, 26px); }
.feat.rail li > p { padding: 0; max-width: 40ch; font-size: 16px; }
.feat.rail .fl-a { order: 4; height: auto; margin: 20px 0 0; padding: 32px 24px; }
.feat.rail .fl-a > * { width: min(100%, 400px); justify-self: center; }
@media (min-width: 900px) {
  .feat.rail li { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: auto auto 1fr; column-gap: 64px; padding-bottom: 32px; }
  .feat.rail .fl-a { order: 0; grid-column: 2; grid-row: 1 / span 3; margin: 0; }
  .feat.rail .t, .feat.rail li > h3, .feat.rail li > p { grid-column: 1; }
}

/* Agentes: who does what */
.who { display: grid; gap: 0; }
@media (min-width: 1000px) { .who { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); } .who-mid { align-self: center; } }
.who-c { padding: clamp(24px, 3vw, 36px); border-radius: 24px; }
.who-c.ag { background: var(--night); color: #fff; }
.who-c.tm { background: var(--paper); border: 1px solid var(--line); }
.who-h { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; font-size: 21px; font-weight: 500; letter-spacing: -.02em; }
.who-c li { display: flex; gap: 12px; padding: 13px 0; border-top: 1px solid var(--line); font-size: 16px; line-height: 1.45; }
.who-c.ag li { border-color: var(--night-line); color: #D9DBE7; }
.who-c li .ic { width: 18px; height: 18px; margin-top: 2px; color: var(--blue); }
.who-c.ag li .ic { color: #8A8EF5; }
.who-mid { display: flex; flex-direction: column; align-items: center; }
.who-mid .fa-wire { flex: none; width: 2px; min-width: 0; height: 22px; margin: 0; background: repeating-linear-gradient(var(--blue) 0 4px, transparent 4px 9px); animation: none; }
@media (min-width: 1000px) { .who-mid { flex-direction: row; } .who-mid .fa-wire { width: 24px; height: 2px; background: repeating-linear-gradient(90deg, var(--blue) 0 4px, transparent 4px 9px); } }
.av { display: inline-flex; }
.av i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--paper); background: var(--blue-50); color: var(--blue); font: 600 11px/1 var(--sans); font-style: normal; }
.av i + i { margin-left: -8px; background: #E3F4E8; color: #17663A; }
.av i + i + i { background: #FFF3DC; color: #8A5300; }

/* Odoo: the symptoms, ticked by the visitor */
.sym-w { display: grid; gap: 20px; }
@media (min-width: 900px) { .sym-w { grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; align-items: start; } .sym-r { position: sticky; top: 112px; } }
.sym-l { display: grid; gap: 10px; }
@media (min-width: 640px) { .sym-l { grid-template-columns: 1fr 1fr; } }
.sym-l label { display: flex; gap: 14px; align-items: flex-start; height: 100%; padding: 20px; border-radius: 16px; background: var(--paper); border: 1px solid var(--line); font-size: 17px; line-height: 1.4; cursor: pointer; transition: border-color .2s var(--ease), background-color .2s var(--ease), box-shadow .2s var(--ease); }
.sym-l label:hover { border-color: var(--line-2); }
.sym-l label:has(input:checked) { border-color: var(--blue); background: var(--blue-50); box-shadow: inset 0 0 0 1px var(--blue); }
.sym-l label:has(:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; }
.sym-l input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; cursor: pointer; }
.sym-r { display: grid; justify-items: center; gap: 20px; padding: 32px 28px; border-radius: 24px; background: var(--night); color: #fff; text-align: center; }
@property --k { syntax: "<number>"; inherits: true; initial-value: 0; }
.ring { display: grid; place-items: center; width: 176px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, var(--night) 80%, transparent 81%), repeating-conic-gradient(var(--night) 0 2.5deg, transparent 2.5deg 60deg), conic-gradient(#8A8EF5 calc(var(--k) * 60deg), #262940 0); transition: --k .5s var(--ease); }
.ring b { display: block; font-weight: 500; font-size: 56px; line-height: 1; letter-spacing: -.04em; }
.ring span { font-size: 14px; color: var(--night-text); }
.sr-m { min-height: 3em; max-width: 26ch; font-size: 16.5px; line-height: 1.45; color: #D9DBE7; }

/* Odoo: how it works is the diagnosis report */
.diag-w { display: grid; gap: 40px; }
@media (min-width: 1000px) { .diag-w { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 72px; align-items: start; } .diag-copy { position: sticky; top: 112px; } }
.diag-copy .sim-note { margin-top: 20px; }
.diag { padding: clamp(24px, 3.4vw, 44px); border-radius: 6px; background: #fff; box-shadow: 0 0 0 1px var(--line), 10px 10px 0 -1px #fff, 10px 10px 0 0 var(--line), var(--sh-3); }
.diag header { display: flex; align-items: center; gap: 14px; padding-bottom: 18px; border-bottom: 2px solid var(--ink); }
.diag header b { display: block; font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.diag header span { font-size: 13px; color: var(--ash); }
.dg-s { margin: 20px 0 4px; font-size: 15px; color: var(--ink-2); }
.diag ol { counter-reset: d; }
.diag li { counter-increment: d; position: relative; padding: 20px 0 20px 44px; border-bottom: 1px solid var(--line); }
.diag li::before { content: counter(d); position: absolute; left: 0; top: 18px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: #fff; font: 500 13px/1 var(--sans); }
.dg-h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 12px; }
.dg-h b { font-weight: 500; font-size: 17px; letter-spacing: -.01em; }
.imp { padding: 2px 10px; border-radius: 999px; background: #FFF3DC; color: #8A5300; font-size: 12px; font-weight: 500; white-space: nowrap; }
.imp.hi { background: #FDECEA; color: var(--bad); }
.diag li > p:not(.dg-fix) { margin-top: 6px; font-size: 14.5px; line-height: 1.5; color: var(--ash); }
.dg-c { height: 6px; margin-top: 14px; border-radius: 3px; background: var(--wash); overflow: hidden; }
.dg-c i { display: block; height: 100%; border-radius: inherit; background: var(--bad); }
.diag li:nth-child(3) .dg-c i { background: #D98A00; }
.dg-fix { display: flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 13.5px; font-weight: 500; color: var(--wa); }
.dg-fix .ic { width: 16px; height: 16px; }
.diag footer { margin-top: 20px; font-size: 14px; color: var(--ash); }

/* Odoo: the code, as it lives in the client's repository */
.code-sec { padding: var(--sec) 0; background: var(--night); color: #fff; }
.code-sec > .in { display: grid; gap: 40px; }
@media (min-width: 1000px) { .code-sec > .in { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 64px; align-items: center; } }
.cs-copy h2 { max-width: 12ch; }
.cs-copy p { color: var(--night-text); }
.ide { border-radius: 14px; background: #15172A; border: 1px solid var(--night-line); overflow: hidden; box-shadow: 0 40px 80px -40px rgb(0 0 0 / .8); }
.ide-h { display: flex; align-items: center; gap: 14px; height: 40px; padding: 0 14px; border-bottom: 1px solid var(--night-line); font: 400 12.5px var(--mono); color: var(--night-text); }
.ide-h .dots i { background: #33374F; }
.ide-b { display: grid; grid-template-columns: 168px minmax(0, 1fr); }
.ide-t { padding: 14px 0; border-right: 1px solid var(--night-line); font: 400 12.5px/2 var(--mono); color: var(--night-text); }
.ide-t li { padding: 0 14px; white-space: nowrap; }
.ide-t .l1 { padding-left: 28px; } .ide-t .l2 { padding-left: 42px; } .ide-t .l3 { padding-left: 56px; }
.ide-t .d { color: #8B8FA8; }
.ide-t .on { background: rgb(123 128 244 / .16); color: #fff; box-shadow: inset 2px 0 #8A8EF5; }
.ide-c { margin: 0; padding: 14px 0; counter-reset: ln; font: 400 13px/2 var(--mono); color: #D7D9E6; white-space: normal; overflow-x: auto; }
.ide-c > span { display: block; padding-right: 16px; white-space: pre; counter-increment: ln; }
.ide-c > span::before { content: counter(ln); display: inline-block; width: 40px; margin-right: 18px; text-align: right; color: #4A4E68; }
.ide-c > span:nth-child(n+9):nth-child(-n+11) { background: rgb(127 216 166 / .07); box-shadow: inset 2px 0 #7FD8A6; }
.ide-c .k { color: #A9ADFF; }
.ide-c .s { color: #7FD8A6; }
@media (max-width: 640px) { .ide-t { display: none; } .ide-b { grid-template-columns: minmax(0, 1fr); } .ide-c { font-size: 11.5px; } .ide-c > span::before { width: 24px; margin-right: 12px; } }

/* Odoo: the process as a schedule */
.gantt { border-top: 1px solid var(--ink); }
.g-row { display: grid; gap: 12px; padding: 20px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 900px) { .g-row { grid-template-columns: 300px minmax(0, 1fr); gap: 40px; align-items: center; } }
.g-hd { padding: 12px 0; }
@media (max-width: 899px) { .g-hd > span { display: none; } }
.g-l h3 { font-weight: 500; font-size: 18px; letter-spacing: -.015em; }
.g-l p { margin-top: 4px; max-width: 36ch; font-size: 14.5px; color: var(--ash); }
.g-tr { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); height: 40px; background: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 20%); }
.g-hd .g-tr { height: auto; background: none; }
.g-hd .g-tr span { padding-left: 8px; border-left: 1px solid var(--line); font-size: 12.5px; color: var(--ash); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-b { position: absolute; top: 6px; bottom: 6px; left: var(--a); width: var(--w); display: flex; align-items: center; padding: 0 12px; border-radius: 8px; background: var(--ink); color: #fff; font-size: 12.5px; font-style: normal; white-space: nowrap; overflow: hidden; }
.g-b.out { overflow: visible; padding: 0; }
.g-b.out span { position: absolute; left: calc(100% + 10px); color: var(--ink-2); }
.g-b.grow { background: linear-gradient(90deg, var(--blue) 66.6%, #A9ACF2 66.6%); }
.g-b.on { border-radius: 8px 0 0 8px; background: repeating-linear-gradient(-45deg, #DFE1FB 0 6px, var(--blue-50) 6px 12px); color: var(--blue); font-weight: 500; -webkit-mask: linear-gradient(90deg, #000 55%, transparent); mask: linear-gradient(90deg, #000 55%, transparent); }

/* Web: one product page, annotated */
.anat { display: grid; gap: 40px; }
@media (min-width: 1100px) { .anat { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 64px; align-items: center; } }
.an-shot { position: relative; padding-bottom: 64px; }
.an-shot .browser { height: auto; border-bottom: 1px solid var(--line); border-radius: var(--r-md); }
.an-pg { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 12px 28px; padding: 18px 28px 36px; }
.an-bc { grid-column: 1 / -1; font-size: 12px; color: var(--ash); }
.an-img { aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--bone); }
.an-img img { width: 100%; height: 100%; object-fit: cover; }
.an-info { display: grid; align-content: start; gap: 10px; }
.an-code { font: 500 12px/1 var(--mono); color: var(--ash); }
.an-t { font-size: 22px; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; color: #1C2A36; }
.an-spec { position: relative; margin: 4px 0 0; border-top: 1px solid var(--line); }
.an-spec div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.an-spec dt { color: var(--ash); }
.an-spec dd { margin: 0; }
.an-buy { position: relative; display: flex; gap: 8px; margin-top: 6px; }
.qty { display: inline-flex; align-items: center; gap: 12px; height: 38px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 8px; font-size: 14px; }
.qty i { font-style: normal; color: var(--ash); }
.an-add { flex: 1; display: grid; place-items: center; height: 38px; border-radius: 8px; background: #1C2A36; color: #fff; font-size: 13.5px; font-weight: 500; white-space: nowrap; }
.an-wa { display: flex; align-items: center; justify-content: center; gap: 8px; height: 38px; border: 1px solid #BFE3CC; border-radius: 8px; color: #17733F; font-size: 13.5px; font-weight: 500; }
.an-wa .brand { width: 16px; height: 16px; }
.pin { position: absolute; z-index: 3; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--blue); color: #fff; font: 600 13px/1 var(--sans); font-style: normal; box-shadow: 0 0 0 4px rgb(41 47 221 / .18), 0 6px 14px -6px rgb(41 47 221 / .7); transition: transform .25s var(--ease); }
.an-spec .pin, .an-buy .pin { right: -12px; top: -13px; }
.an-sat .pin { left: -12px; top: -12px; }
.an-sat { position: absolute; z-index: 2; }
.an-sat.serp { left: -20px; bottom: 0; width: min(360px, 62%); }
.an-sat.crm { right: -20px; top: -30px; padding: 12px; border-radius: 14px; background: rgb(255 255 255 / .92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: var(--sh-3); }
.an-sat .fa-ok { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12.5px; color: var(--wa); }
.an-sat .fa-ok .ic { width: 14px; height: 14px; }
.an-legend li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 4px 16px; padding: 18px 0; border-top: 1px solid var(--line); }
.an-legend .pin { position: static; grid-row: span 2; box-shadow: none; }
.an-legend h3 { font-weight: 500; font-size: 18px; letter-spacing: -.015em; }
.an-legend p { font-size: 15px; line-height: 1.5; color: var(--ash); }
.anat:has(.an-legend li:nth-child(1):hover) .an-shot [data-n="1"], .anat:has(.an-legend li:nth-child(2):hover) .an-shot [data-n="2"],
.anat:has(.an-legend li:nth-child(3):hover) .an-shot [data-n="3"], .anat:has(.an-legend li:nth-child(4):hover) .an-shot [data-n="4"] { transform: scale(1.3); }
@media (max-width: 699px) {
  .an-shot { padding-bottom: 0; }
  .an-shot .site-nav span:not(.cart) { display: none; }
  .an-pg { grid-template-columns: minmax(0, 1fr); padding: 14px 16px 22px; }
  .an-img { aspect-ratio: 16 / 9; }
  .an-sat { position: relative; inset: auto; width: auto; margin: 14px 0 0 12px; }
  .an-sat.serp { left: auto; bottom: auto; width: auto; }
  .an-sat.crm { right: auto; top: auto; }
}

/* Web: what stays in the client's name */
.own { display: grid; gap: 40px; }
@media (min-width: 900px) { .own { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: center; } }
.own-cards { display: grid; gap: 14px; }
@media (min-width: 600px) { .own-cards { grid-template-columns: 1fr 1fr; } .oc:nth-child(2) { translate: 0 32px; } }
.oc { padding: 22px; border-radius: 20px; background: var(--paper); border: 1px solid var(--line); box-shadow: var(--sh-2); }
.oc-h { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ash); }
.oc-h .ic { width: 16px; height: 16px; }
.oc > b { display: block; margin: 14px 0 16px; font: 500 15px/1.3 var(--mono); overflow-wrap: anywhere; }
.oc dl { margin: 0; }
.oc dl div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13px; }
.oc dt { color: var(--ash); }
.oc dd { margin: 0; text-align: right; }

/* Web: three weeks on a calendar */
.cal { display: grid; gap: 32px; }
@media (min-width: 900px) { .cal { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 64px; align-items: center; } }
.cal-g { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; padding: clamp(16px, 2.4vw, 28px); border-radius: 24px; background: var(--paper); border: 1px solid var(--line); box-shadow: var(--sh-2); }
.cal-g span { padding-bottom: 4px; font-size: 13px; color: var(--ash); }
.cal-g i { position: relative; aspect-ratio: 1.2; padding: 8px 10px; border-radius: 12px; font: 500 13px/1 var(--sans); font-style: normal; }
.cal-g .ph1, .cal-k .ph1::before { background: var(--wash); }
.cal-g .ph2, .cal-k .ph2::before { background: var(--blue-50); }
.cal-g .ph2 { color: var(--blue); }
.cal-g .ph3, .cal-k .ph3::before { background: #C9CCF7; }
.cal-g .ph4, .cal-k .ph4::before { background: var(--blue); }
.cal-g .ph4 { color: #fff; }
.cal-g .ph4::after { content: "Online"; position: absolute; left: 10px; bottom: 8px; font-size: 11.5px; }
.cal-k li { position: relative; padding: 14px 0 14px 28px; border-top: 1px solid var(--line); }
.cal-k li::before { content: ""; position: absolute; left: 0; top: 19px; width: 14px; height: 14px; border-radius: 4px; }
.cal-k h3 { font-weight: 500; font-size: 17px; letter-spacing: -.01em; }
.cal-k p { margin-top: 4px; font-size: 14.5px; color: var(--ash); }

@media (prefers-reduced-motion: no-preference) {
  .js .who:not(.play) > *, .js .diag:not(.play) li, .js .own-cards:not(.play) .oc { opacity: 0; }
  .who.play > * { animation: hspop .6s var(--ease) both; }
  .who.play > :nth-child(2) { animation-delay: .3s; } .who.play > :nth-child(3) { animation-delay: .6s; }
  .diag.play li { animation: hspop .5s var(--ease) both; }
  .diag.play li:nth-child(2) { animation-delay: .25s; } .diag.play li:nth-child(3) { animation-delay: .5s; }
  .diag.play .dg-c i { animation: fabar 1s var(--ease) both; animation-delay: .4s; }
  .diag.play li:nth-child(2) .dg-c i { animation-delay: .65s; } .diag.play li:nth-child(3) .dg-c i { animation-delay: .9s; }
  .js .gantt:not(.play) .g-b { width: 0; }
  .gantt.play .g-b { animation: gw .8s var(--ease) both; animation-delay: calc(var(--i) * .35s); }
  .js .an-shot:not(.play) .pin { scale: 0; }
  .an-shot.play .pin { animation: pinin .45s cubic-bezier(.16, 1, .3, 1) both; }
  .an-shot.play [data-n="2"] { animation-delay: .15s; } .an-shot.play [data-n="3"] { animation-delay: .3s; } .an-shot.play [data-n="4"] { animation-delay: .45s; }
  .an-shot.play .an-sat { animation: hspop .6s var(--ease) both; animation-delay: .2s; }
  .own-cards.play .oc { animation: hspop .6s var(--ease) both; }
  .own-cards.play .oc:nth-child(2) { animation-delay: .2s; }
  .js .cal:not(.play) .cal-g i { opacity: 0; }
  .cal.play .cal-g i { animation: hspop .4s var(--ease) both; animation-delay: calc(var(--i) * 60ms); }
}
@keyframes gw { from { width: 0; } }
@keyframes pinin { from { scale: 0; } }

/* ---------- Nov 2026 pass: self-hosted type, the form on every page, new pages, shorter mobile home ---------- */
@font-face { font-family: "Geist"; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/assets/fonts/geist.woff2) format("woff2"); }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/geist-mono.woff2) format("woff2"); }

.links a[aria-current="page"] { color: var(--ink); font-weight: 500; }
.links .lang { color: var(--ash); }
@media (min-width: 960px) { .links .lang { margin-left: 8px; padding-left: 20px; border-left: 1px solid var(--line-2); border-radius: 0; } .links .lang:hover { background: none; } }
.form-note a, .legal a { text-decoration: underline; text-underline-offset: 3px; }
.form.sent > :not(.form-status) { display: none; }
.form.sent .form-status { font-size: 20px; line-height: 1.4; letter-spacing: -.015em; padding: 24px 0; }
.fm-note { grid-column: 1 / -1; margin-top: 12px; font-size: 13px; color: var(--ash); }

.cases { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
.cases li { display: flex; flex-direction: column; gap: 10px; padding: 28px; }
.cases h3 { font-weight: 500; font-size: 22px; line-height: 1.2; letter-spacing: -.02em; }
.cases p { font-size: 16px; line-height: 1.55; color: var(--ash); }
.cases .cs-tag { font-size: 13.5px; font-weight: 500; color: var(--blue); }
.cases .cs-res { display: flex; gap: 8px; margin-top: auto; padding-top: 8px; font-weight: 500; color: var(--wa); }
.cs-res .ic, .ticks .ic { flex-shrink: 0; width: 18px; height: 18px; margin-top: 3px; }
.cases .lnk { margin-top: auto; align-self: flex-start; }
@media (min-width: 760px) { .cases { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1000px) { .cases.demos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.ticks { display: grid; gap: 12px; margin-top: 18px; }
.ticks li { display: flex; gap: 10px; font-size: 16.5px; line-height: 1.5; color: var(--ink-2); }
.ticks .ic { color: var(--blue); }
.ticks.big { margin-top: 0; }
.ticks.big li { font-size: 18px; }
.cols2 { display: grid; gap: 12px; }
.cols2 .card { padding: 28px; }
.cols2 h3 { font-weight: 500; font-size: 22px; letter-spacing: -.02em; }
@media (min-width: 800px) { .cols2 { grid-template-columns: 1fr 1fr; gap: 16px; } .ticks.big { grid-template-columns: 1fr 1fr; gap: 16px 48px; } }
.ptable td { vertical-align: top; }
.legal h2 { margin-top: 36px; font-weight: 500; font-size: 22px; letter-spacing: -.02em; }
.legal h2:first-child { margin-top: 0; }
.legal h2 + p { margin-top: 10px; }
.quote-xl figcaption span { max-width: 44ch; }

/* phone: the ask comes before the picture, and the long stacks become swipeable rows */
@media (max-width: 899px) {
  .hero > .in { display: flex; flex-direction: column; }
  .hero .ask-wrap { order: 1; }
  .hero .hs { order: 2; margin-top: 28px; }
  .hero-foot { order: 3; }
  .hero .fm { order: 4; }
  .fm-note { order: 5; }
}
@media (max-width: 699px) {
  .pains, .flow { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .pains::-webkit-scrollbar, .flow::-webkit-scrollbar { display: none; }
  .pains > *, .flow > li { flex: 0 0 86%; scroll-snap-align: start; }
  .fm-list li:nth-child(n+9) { display: none; }
}
.ptable.fit { min-width: 0; }
@media (max-width: 480px) { .ptable.fit th, .ptable.fit td { padding: 12px 6px; font-size: 14.5px; } }
@media (max-width: 899px) { .hero .ask-wrap { margin-top: 0; } }
/* team: LinkedIn and direct email under each person */
.person .p-links { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 10px; font-size: 13.5px; }
.person .p-links a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2); overflow-wrap: anywhere; }
.byline { margin-top: 10px; font-size: 13.5px; color: var(--ash); }
/* FAQ list without rounded top edge */
.faq-wrap .faq { border-radius: 0; }
/* process rail: a short-viewport rule (padding: 16px 0) pushed the circles down while the connector stayed at top:20px */
@media (min-width: 900px) { .steps li { padding: 0 32px 0 0; } }
/* team: co-founder cards stacked and roomier on desktop */
.person .role { display: block; margin-top: 4px; font-style: normal; font-size: 12.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--blue); }
@media (min-width: 900px) {
  .person { display: block; padding: 24px 28px; }
  .person .photo { width: 88px; height: 88px; margin-bottom: 16px; }
  .person figcaption { padding: 0; }
  .person b { font-size: 20px; }
  .person .p-links { margin-top: 12px; flex-direction: column; gap: 4px; }
}

/* en-home (US English home) */
.brand.mail { --src: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2'/%3E%3Cpath d='m3 6 9 7 9-7'/%3E%3C/svg%3E"); }
.brand.xls { --src: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 3h16a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1Zm1 2v4h6V5Zm8 0v4h6V5Zm-8 6v4h6v-4Zm8 0v4h6v-4Zm-8 6v2h6v-2Zm8 0v2h6v-2Z'/%3E%3C/svg%3E"); }
.em { background: #fff; color: #242424; font: 400 13px/1.42 "Segoe UI", system-ui, -apple-system, Arial, sans-serif; }
.em-bar { display: flex; align-items: center; gap: 10px; flex: none; height: 34px; padding: 0 var(--io); background: #0F6CBD; color: #fff; font-size: 12.5px; }
.em-bar .ic { width: 16px; height: 16px; }
.em-bar b { font-weight: 600; }
.em-bar span { min-width: 0; margin-left: auto; overflow: hidden; opacity: .85; text-overflow: ellipsis; white-space: nowrap; }
.em-sub { margin: 0; padding: 12px var(--io) 8px; font-size: 15px; font-weight: 600; line-height: 1.3; color: #111; }
.em-from { display: flex; align-items: center; gap: 10px; padding: 0 var(--io) 10px; border-bottom: 1px solid #EDEBE9; }
.em-av { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%; background: #C7E0F4; color: #0F548C; font-size: 12px; font-weight: 600; }
.em-from p { display: grid; min-width: 0; margin: 0; line-height: 1.3; }
.em-from b { overflow: hidden; font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.em-from small { font-size: 11.5px; color: #616161; }
.em-msg { margin: 0; padding: 10px var(--io) 0; }
.em-msg mark { padding: 0 1px; border-radius: 3px; color: inherit; background: linear-gradient(rgb(41 47 221 / .16), rgb(41 47 221 / .16)) 0 100% / 100% 100% no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.em-att { display: flex; align-items: center; gap: 10px; align-self: flex-start; margin: 12px var(--io) 0; padding: 7px 14px 7px 8px; border: 1px solid #E1DFDD; border-radius: 6px; }
.em-pdf { display: grid; place-items: center; width: 26px; height: 30px; border-radius: 4px; background: #C4314B; color: #fff; font-size: 8.5px; font-weight: 600; }
.em-att p { display: grid; margin: 0; line-height: 1.3; }
.em-att b { font-size: 12.5px; font-weight: 600; }
.em-att small { font-size: 11px; color: #616161; }
.hs[data-s="1"] .em-msg { animation: hspop .45s var(--ease) .1s both; }
.hs[data-s="1"] .em-msg mark { animation: wamark .5s var(--ease) both; animation-delay: calc(.8s + var(--k, 0) * .35s); }
.hs[data-s="1"] .em-msg mark:nth-of-type(2) { --k: 1; }
.hs[data-s="1"] .em-msg mark:nth-of-type(3) { --k: 2; }
.hs[data-s="1"] .em-msg mark:nth-of-type(4) { --k: 3; }
.hs[data-s="1"] .em-att { animation: hspop .4s var(--ease) 2.3s both; }
.inv { position: absolute; left: var(--io); right: var(--io); top: 12px; padding: 14px 14px 12px; background: #fff; box-shadow: 0 2px 6px rgb(0 0 0 / .35); color: #1F2937; font: 400 8px/1.4 Arial, Helvetica, sans-serif; }
.inv p { margin: 0; }
.inv small { display: block; font-size: 6.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6B7280; }
.inv-top { display: flex; justify-content: space-between; gap: 10px; padding-bottom: 8px; border-bottom: 2px solid #1F2937; }
.inv-co { display: block; margin-bottom: 2px; font-size: 10.5px; color: #111; }
.inv-r { text-align: right; }
.inv-big { display: block; margin-bottom: 2px; font-size: 15px; letter-spacing: .06em; color: #111; }
.inv-to { display: grid; grid-template-columns: 1.4fr 1fr; gap: 10px; margin: 8px 0; }
.inv-to p + small { margin-top: 3px; }
.inv-t { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.inv-t th { padding: 3px; background: #F3F4F6; font-size: 7px; text-align: right; }
.inv-t td { padding: 3px; border-bottom: 1px solid #E5E7EB; text-align: right; white-space: nowrap; }
.inv-t :is(th, td):nth-child(-n+2) { text-align: left; }
.inv-t td:nth-child(2) { white-space: normal; }
.inv-tt { width: 66%; margin: 8px 0 0 auto; font-variant-numeric: tabular-nums; }
.inv-tt div { display: flex; justify-content: space-between; gap: 8px; padding: 1px 3px; }
.inv-tt dd { margin: 0; }
.inv-tt .tt { margin-top: 3px; padding-top: 4px; border-top: 1px solid #1F2937; font-size: 9.5px; font-weight: 700; }
.inv-ft { margin-top: 10px !important; font-size: 7px; color: #6B7280; }
@media (prefers-reduced-motion: no-preference) { .hs[data-s="3"] .inv { animation: hspop .5s var(--ease) .2s both; } }

/* ---------- 2026-11 premium pass: global layer ---------- */
/* Headings and short copy never break into a lonely last word. */
h1, h2, h3, h4, summary, figcaption, dt, .lede, .stmt, .sec-h p, .feat-lead, .tag, .b { text-wrap: balance; }
p, li, dd, blockquote { text-wrap: pretty; }
/* Tighter rhythm: fewer dead bands between sections. */
:root { --sec: clamp(72px, 8vw, 120px); }

/* .dk: Unleap night section. Flips the tokens so every component inside reads on navy. No glows, no gradients. */
.dk {
  --bone: #0E0F1C; --wash: #15172A; --paper: #171a2e; --stage: #13152A;
  --ink: #F3F3F6; --ink-2: #D4D6E0; --ash: #9A9DB2; --line: #23263B; --line-2: #33364E;
  background: var(--night); color: var(--ink); padding: var(--sec) 0;
}
.sec + .dk, .dk + .sec, .dk + .final { padding-top: var(--sec); }
.dk .b-o { background: rgb(255 255 255 / .08); color: #fff; }
.dk .b-o:hover { background: rgb(255 255 255 / .14); }
.dk ::selection { background: #fff; color: var(--night); }
.dk :focus-visible { outline-color: #fff; }
/* Subtle blueprint grid: the "ficha técnica" paper, inverted. */
.dk.grid { background-image: linear-gradient(rgb(255 255 255 / .035) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .035) 1px, transparent 1px); background-size: 48px 48px; background-position: center top; }

/* == home (agent A) == */
/* #planta: isometric warehouse, the order travels office → racks → packing → dock. Static frame = finished state. */
.plant { display: grid; gap: 32px; margin-top: 48px; align-items: center; }
@media (min-width: 1000px) { .plant { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 56px; } }
.plant-fig { margin: 0; }
.plant-svg { display: block; width: 100%; height: auto; }
.plant-svg .lane { fill: none; stroke: #292FDD; stroke-width: 2; stroke-dasharray: 6 7; stroke-linecap: round; opacity: .85; }
.plant-svg .ps circle { fill: #292FDD; stroke: #6166F3; stroke-width: 1.5; }
.plant-svg .ps text { fill: #fff; font: 600 13px/1 var(--sans); text-anchor: middle; }
.plant-svg .pk { transform: translate(313px, 387px); }
.plant-steps { display: grid; gap: 0; counter-reset: ps; }
@media (min-width: 600px) and (max-width: 999px) { .plant-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; } }
.plant-steps li { counter-increment: ps; display: grid; grid-template-columns: 28px 1fr; gap: 4px 16px; padding: 20px 0; border-top: 1px solid var(--line-2); }
.plant-steps li::before { content: counter(ps); grid-row: span 2; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--blue); color: #fff; font-size: 13px; font-weight: 600; }
.plant-steps li:first-child { border-top: 0; }
.plant-steps h3 { font-weight: 500; font-size: 18px; letter-spacing: -.015em; line-height: 1.3; }
.plant-steps p { color: var(--ash); font-size: 15px; line-height: 1.5; max-width: 34ch; }
@media (prefers-reduced-motion: no-preference) {
  .js .plant:not(.play) .pk { opacity: 0; }
  .js .plant:not(.play) .ps circle, .js .plant:not(.play) .plant-steps li::before { fill: var(--wash); background: var(--line-2); }
  .plant.play .pk { animation: pk-run 6.4s cubic-bezier(.45, 0, .25, 1) both; }
  .plant.play .ps circle { animation: ps-on .4s var(--ease) both; }
  .plant.play .plant-steps li::before { animation: ps-li .4s var(--ease) both; }
  .js .plant:not(.play) .plant-steps li { opacity: .3; }
  .plant.play .plant-steps li { animation: ps-row .6s var(--ease) both; }
  .plant.play .ps1 circle, .plant.play .plant-steps li:nth-child(1), .plant.play .plant-steps li:nth-child(1)::before { animation-delay: .3s; }
  .plant.play .ps2 circle, .plant.play .plant-steps li:nth-child(2), .plant.play .plant-steps li:nth-child(2)::before { animation-delay: 1.9s; }
  .plant.play .ps3 circle, .plant.play .plant-steps li:nth-child(3), .plant.play .plant-steps li:nth-child(3)::before { animation-delay: 3.3s; }
  .plant.play .ps4 circle, .plant.play .plant-steps li:nth-child(4), .plant.play .plant-steps li:nth-child(4)::before { animation-delay: 5.5s; }
}
@keyframes pk-run {
  0% { transform: translate(-37px, 40px); opacity: 0; }
  5%, 11% { transform: translate(-37px, 59px); opacity: 1; }
  20% { transform: translate(-55px, 119px); }
  30%, 34% { transform: translate(93px, 204px); }
  42% { transform: translate(44px, 232px); }
  52%, 62% { transform: translate(153px, 295px); }
  86%, 100% { transform: translate(313px, 387px); opacity: 1; }
}

@keyframes ps-row { from { opacity: .3; } to { opacity: 1; } }
@keyframes ps-on { from { fill: var(--wash); } to { fill: #292FDD; } }
@keyframes ps-li { from { background: var(--line-2); } to { background: var(--blue); } }

/* Showcase: tabs always on top, no void under a short tab column. */
.show { grid-template-columns: minmax(0, 1fr); }
.show-switcher { grid-row: auto; }
.tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tabs button { padding: 18px 20px; }
.tabs button::before { left: 20px; right: 20px; top: auto; bottom: -1px; width: auto; height: 2px; transform: scaleX(0); }
.tabs button[aria-selected="true"]::before { transform: none; }

/* #como on navy */
.dk .steps li:first-child::before { background: #fff; border-color: #fff; color: var(--night); }
.dk .why2 li { border-top-color: var(--line-2); }
.dk .steps { border-top-color: var(--line-2); }
/* == /home == */

/* == odoo + web (agent B) == */
/* /odoo symptoms: one icon per box, blue once ticked */
.sym-l label .ic { width: 22px; height: 22px; color: var(--ash); transition: color .2s var(--ease); }
.sym-l label:has(input:checked) .ic { color: var(--blue); }

/* /odoo code: back to paper, so the navy is kept for the price band; the editor stays dark as product UI */
.code-sec { background: var(--wash); color: var(--ink); border-block: 1px solid var(--line); }
.code-sec .cs-copy p { color: var(--ink-2); }

/* /odoo diagnosis: the ordered warehouse under the short copy (also /en/odoo-support) */
.diag-art { margin: 28px 0 0; }
.diag-art img { display: block; width: 100%; max-width: 460px; height: auto; }
.diag-art figcaption { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 15px; color: var(--ink-2); }
.diag-art figcaption .ic { color: var(--blue); }
.fix-w { display: grid; gap: 28px; }
.fix-w .diag-art { margin: 0; }
@media (min-width: 900px) { .fix-w { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 56px; align-items: center; } }

/* price: payment rail beside the plan card (navy on /odoo, /web, /en/odoo-support) */
.ptl { position: relative; display: grid; gap: 26px; margin: 32px 0 28px; padding-left: 30px; }
.ptl::before { content: ""; position: absolute; left: 5px; top: 10px; bottom: 34px; width: 2px; background: var(--line-2); transform-origin: top; }
.ptl li { position: relative; display: grid; gap: 4px; }
.ptl li::before { content: ""; position: absolute; left: -30px; top: 7px; width: 12px; height: 12px; border-radius: 50%; background: var(--bone); box-shadow: inset 0 0 0 2px var(--ash); }
.ptl li:nth-child(2)::before { background: var(--blue); box-shadow: none; }
.ptl b { font-weight: 500; font-size: clamp(26px, 2.6vw, 34px); line-height: 1; letter-spacing: -.03em; }
.ptl li:nth-child(2) b { color: var(--blue); }
.ptl span { font-size: 17px; color: var(--ink); }
.ptl small { font-size: 14px; color: var(--ash); }
/* wide enough: the rail runs across, three stops filling the column */
@media (min-width: 600px) {
  .ptl { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 40px 0 32px; padding: 34px 0 0; }
  .ptl::before { left: 6px; right: calc(33.33% - 2px); top: 5px; bottom: auto; width: auto; height: 2px; transform-origin: left; }
  .ptl li::before { left: 0; top: -34px; }
}
@media (prefers-reduced-motion: no-preference) {
  .ptl::before { transition: transform 1.1s var(--ease); }
  .ptl:not(.play)::before { transform: scaleY(0); }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 600px) { .ptl:not(.play)::before { transform: scaleX(0); } }
.price-sec.dk .ptl li:nth-child(2) b { color: #A9ACFF; }
.price-sec.dk .ptl li:nth-child(2)::before { background: #A9ACFF; }
.price-sec.dk .fine { color: var(--ash); }
.price-sec.dk .fine .lnk { color: var(--ink); }

/* FAQ beside a short aside, so the right half is never empty */
.faq-split .sec-h > p { max-width: 28ch; }
.faq-split .sec-h > .b { justify-self: start; }
@media (min-width: 960px) {
  .faq-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 720px); gap: 72px; align-items: start; }
  .faq-split .sec-h { position: sticky; top: 112px; margin-bottom: 0; }
}

/* /web: one request, catalog → quote → inbox */
.wf-fig { max-width: 980px; margin: 0 auto clamp(28px, 4vw, 48px); }
.wf-fig img { display: block; width: 100%; height: auto; }
.wf-fig ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 8px; text-align: center; }
.wf-fig b { display: block; font-weight: 500; font-size: 18px; letter-spacing: -.01em; }
.wf-fig span { display: block; max-width: 24ch; margin: 4px auto 0; font-size: 15px; line-height: 1.4; color: var(--ash); }
@media (max-width: 599px) { .wf-fig ol { gap: 8px; } .wf-fig b { font-size: 15px; } .wf-fig span { font-size: 13px; } }
/* == /odoo + web == */

/* == agentes + casos (agent C) == */
/* Isometric scenes (tools/iso.mjs): flat four-tone solids, top lightest, left mid, right darkest. */
.iso { display: block; width: 100%; height: auto; overflow: visible; }
.iso path { stroke: rgb(14 15 28 / .16); stroke-width: .4; stroke-linejoin: round; }
.iso g > .t { fill: var(--t); } .iso g > .l { fill: var(--l); } .iso g > .r { fill: var(--r); }
.iso .st { --t: #E8EAF0; --l: #C6CAD5; --r: #A2A8B6; }
.iso .dk2 { --t: #5E6375; --l: #40445A; --r: #2C2F40; }
.iso .pa { --t: #FFFFFF; --l: #E8E9EF; --r: #D0D3DC; }
.iso .wd { --t: #EBDDC2; --l: #D4BF9A; --r: #B79F78; }
.iso .bl { --t: #6267F2; --l: #292FDD; --r: #1D22A8; }
.iso .fl { --t: #EEF0F4; --l: #DFE2E9; --r: #D2D6DE; }
.iso .sc, .iso .slot, .iso .pn { fill: #1A1D31; }
.iso .sl { fill: rgb(255 255 255 / .5); stroke: none; }
.iso .belt, .iso .cable { fill: #2C2F40; }
.iso .pdf { fill: #D9474C; } .iso .led { fill: #3CCB8E; } .iso .led2, .iso .q, .iso .tot, .iso .bk { fill: #6267F2; }
.iso .od { fill: #9A7A92; } .iso .bar { fill: #7A8099; } .iso .tile { fill: #E8EAF0; } .iso .lb { fill: #fff; }
.iso .bd { fill: #D5D9E1; } .iso .gl { fill: #A9BBDD; } .iso .stripe { fill: #E3B341; } .iso .tp { fill: #C29E62; }
.dk .iso .fl { --t: #1F2238; --l: #191B30; --r: #141629; }
.dk .iso path { stroke: rgb(0 0 0 / .3); }
/* the documents riding the belts: one direction, one meaning (order in, quote out) */
@media (prefers-reduced-motion: no-preference) {
  .play .mv { animation: isoIn 3.2s cubic-bezier(.45, 0, .55, 1) infinite; }
  .play .mv-out { animation-name: isoOut; animation-delay: 1.6s; }
  .play .mv-plant { animation-name: isoPlant; animation-duration: 5s; }
}
@keyframes isoIn { 0% { transform: translate(0, 0); opacity: 0; } 12%, 80% { opacity: 1; } 100% { transform: translate(41.6px, 24px); opacity: 0; } }
@keyframes isoOut { 0% { transform: translate(0, 0); opacity: 0; } 12%, 80% { opacity: 1; } 100% { transform: translate(29.4px, 17px); opacity: 0; } }
@keyframes isoPlant { 0% { transform: translate(0, 0); opacity: 0; } 8%, 88% { opacity: 1; } 100% { transform: translate(84px, 48.5px); opacity: 0; } }
.ag-scene, .ss-scene, .cs-plant { margin: 0; }

/* /agentes-ia: calculator on navy */
.page-h + .calc-sec, .cs-hero + .ss-band { margin-top: clamp(56px, 7vw, 96px); }
.calc-sec .calc-a { background: rgb(255 255 255 / .04); border: 1px solid var(--line-2); box-shadow: none; }
.calc-sec .rg span { color: var(--ink-2); }
.calc-sec .fine { color: var(--ash); }
.calc-sec input[type=range] { accent-color: #8A8EF5; }
/* "Cómo funciona": the copy beside the scene, no empty right half */
.ag-head { display: grid; gap: 24px; margin-bottom: clamp(32px, 4vw, 56px); }
.ag-head .sec-h { margin-bottom: 0; align-content: center; }
.ag-head .feat-lead { max-width: 38ch; }
.ag-scene { max-width: 560px; }
@media (min-width: 900px) { .ag-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 56px; align-items: center; } .ag-scene { justify-self: end; width: 100%; } }
/* rail: copy centred on its screen, not stuck to the top of a tall card */
@media (min-width: 900px) {
  .ag-how .feat.rail .fl-a { padding: 22px 24px; }
  .ag-how .feat.rail li { grid-template-rows: 1fr auto auto auto 1fr; }
  .ag-how .feat.rail .fl-a { grid-row: 1 / -1; }
  .ag-how .feat.rail .t { grid-row: 2; } .ag-how .feat.rail li > h3 { grid-row: 3; } .ag-how .feat.rail li > p { grid-row: 4; }
  .ag-how .feat.rail li::before { top: calc(50% - 62px); }
  .ag-how .feat.rail li:not(:last-child)::after { top: calc(50% - 42px); bottom: calc(-50% + 46px); }
}

/* /casos hero */
.cs-plant { max-width: 620px; justify-self: center; width: 100%; }
@media (max-width: 899px) { .cs-plant { margin-top: 32px; } }
/* /casos: ShopSmith results band */
.ss-w { display: grid; gap: 40px; align-items: center; }
.ss-who { display: flex; align-items: center; gap: 14px; font-size: 15px; color: var(--ash); }
.ss-who img { border-radius: 50%; background: #fff; }
.ss-who b { display: block; font-weight: 500; font-size: 17px; color: var(--ink); }
.ss-n { margin-top: 28px; font-weight: 400; }
.ss-n b { display: block; font-weight: 500; font-size: clamp(56px, 8vw, 104px); line-height: .95; letter-spacing: -.05em; color: #fff; }
.ss-n span { display: block; margin-top: 12px; max-width: 26ch; font-size: clamp(19px, 1.8vw, 23px); line-height: 1.3; letter-spacing: -.015em; color: var(--ink-2); }
.ss-band .m-tags { margin-top: 24px; }
.ss-q { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line-2); max-width: 44ch; font-size: 18px; line-height: 1.45; color: var(--ink); }
.ss-q span { display: block; margin-top: 8px; font-size: 14.5px; color: var(--ash); }
.ss-band .b { margin-top: 28px; }
@media (min-width: 900px) { .ss-w { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 64px; } }
/* /casos: every project gets its scene; 2 wide + 3 narrow, no orphan card */
.cs-grid { gap: 14px; }
.cs-grid li { padding: 0 24px 26px; overflow: hidden; }
.cs-art { margin: 0 -24px 6px; padding: 22px 28px 10px; background: var(--wash); border-bottom: 1px solid var(--line); }
.cs-art .iso { max-height: 168px; margin: 0 auto; }
@media (min-width: 720px) { .cs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cs-grid li:last-child { grid-column: 1 / -1; } }
@media (min-width: 1040px) {
  .cs-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .cs-grid li { grid-column: span 2; } .cs-grid li:nth-child(-n+2) { grid-column: span 3; } .cs-grid li:last-child { grid-column: span 2; }
  .cs-grid li:nth-child(-n+2) .iso { max-height: 200px; }
}
/* /casos/shopsmith: scene beside "Qué hicimos" */
.ss-what { display: grid; gap: 32px; align-items: center; }
.ss-what .ss-scene { max-width: 520px; }
@media (min-width: 900px) { .ss-what { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; } }
.dk .quote-xl { border-top-color: var(--line-2); }
.dk .quote-xl figcaption img { background: #fff; }
/* == /agentes + casos == */

/* == precios + guias (agent D) == */
/* /precios: isometric spot art on each plan */
.pr-plans .plan-art { display: block; width: auto; height: 92px; margin: -4px 0 14px -6px; }
.pr-plans .plan .tag { z-index: 1; }
.pr-tb .ptable td, .pr-tb .ptable th { border-color: var(--line-2); }
.pr-tb .ptable td.n:last-child { font-weight: 500; color: #fff; }
.pr-tb .ptable tr:first-child td { color: #fff; }

/* FAQ: heading left, answers right, so the page keeps its width instead of leaving a void */
@media (min-width: 1000px) {
  .gd-faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 56px; align-items: start; }
  .gd-faq .sec-h { position: sticky; top: 96px; margin-bottom: 0; }
}

/* Guides: hero diagram + split layout */
.gd-h .answer { max-width: 54ch; }
.gd { margin: 40px 0 0; padding: 28px; border-radius: 28px; background: var(--paper); border: 1px solid var(--line); box-shadow: var(--sh-3); }
@media (min-width: 1000px) { .gd { margin-top: 0; } }
.gd figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; }
.gd figcaption span { font-size: 14.5px; color: var(--ash); }
.gd figcaption b { font-weight: 500; font-size: clamp(26px, 2.6vw, 34px); letter-spacing: -.035em; line-height: 1.1; }
.gd-note { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13.5px; line-height: 1.5; color: var(--ash); }

.gd-bar { display: flex; gap: 3px; height: 56px; margin-top: 22px; border-radius: 14px; overflow: hidden; }
.gd-bar i { width: var(--w); transform-origin: left; }
.gd-cost .t0 { --c: var(--blue); }
.gd-cost .t1 { --c: #9EA2B4; }
.gd-cost .t2 { --c: repeating-linear-gradient(-45deg, #C4C7D3 0 3px, transparent 3px 7px); }
.gd-bar i, .gd-cost li::before { background: var(--c); }
.gd-cost ul { display: grid; gap: 12px; margin-top: 22px; }
.gd-cost li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; font-size: 15px; }
.gd-cost li::before { content: ""; width: 12px; height: 12px; border-radius: 3px; transform: translateY(1px); }
.gd-cost li.t2::before { box-shadow: inset 0 0 0 1px #C4C7D3; }
.gd-cost li span { color: var(--ink-2); }
.gd-cost li b { font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: no-preference) {
  .gd-cost.play .gd-bar i { animation: gdgrow 1s var(--ease) both; }
  .gd-cost.play .gd-bar i + i { animation-delay: .25s; }
  .gd-cost.play .gd-bar i + i + i { animation-delay: .5s; }
}
@keyframes gdgrow { from { transform: scaleX(0); } }

.gd-cap table { width: 100%; margin-top: 16px; border-collapse: collapse; font-size: 15px; }
.gd-cap th, .gd-cap td { padding: 11px 6px; border-bottom: 1px solid var(--line); text-align: center; }
.gd-cap tbody tr:last-child > * { border-bottom: 0; }
.gd-cap thead th { font-weight: 500; font-size: 14px; color: var(--ash); }
.gd-cap tbody th { text-align: left; font-weight: 400; color: var(--ink-2); padding-left: 0; }
.gd-cap td b { font-weight: 500; white-space: nowrap; }
.gd-cap td { width: 26%; }
.lv { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--blue); vertical-align: middle; }
.lv2 { background: var(--blue); }
.lv1 { background: linear-gradient(90deg, var(--blue) 50%, transparent 50%); }
.lv0 { border-color: var(--line-2); }
.gd-key { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ash); }
.gd-key span { display: inline-flex; align-items: center; gap: 7px; }
.gd-key .lv { width: 11px; height: 11px; border-width: 1.5px; }

.gd-flow { display: grid; gap: 22px; }
.gf { position: relative; border-radius: 16px; padding: 16px 18px; font-size: 14.5px; line-height: 1.45; }
.gf + .gf::before { content: ""; position: absolute; left: 32px; top: -22px; height: 22px; border-left: 2px dashed var(--line-2); }
.gf-h { font-size: 12.5px; color: var(--ash); margin-bottom: 6px; }
.gf-msg { background: var(--wash); max-width: 92%; border-bottom-left-radius: 4px; }
.gf-msg p + p { margin-top: 4px; }
.gf-map { border: 1px solid var(--line); background: var(--bone); font: 400 12.5px/1.5 var(--mono); }
.gf-map p { display: grid; grid-template-columns: minmax(0, 1fr) 16px minmax(0, 1fr); gap: 8px; align-items: center; padding: 5px 0; }
.gf-map p + p { border-top: 1px dashed var(--line-2); }
.gf-map span { color: var(--ash); }
.gf-map b { font-weight: 500; color: var(--ink); }
.gf-map .ic { width: 16px; height: 16px; fill: none; stroke: var(--blue); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.gf-doc { border: 1px solid var(--line); background: var(--paper); box-shadow: 0 1px 2px rgb(11 12 26 / .05), 0 12px 24px -16px rgb(11 12 26 / .25); }
.gf-doc .gf-h { display: flex; gap: 10px; align-items: center; font-size: 15px; color: var(--ink); }
.gf-doc .gf-h em { font-style: normal; font-size: 12px; padding: 2px 9px; border-radius: 999px; background: var(--blue-50); color: var(--blue); }
.gf-tot { display: flex; justify-content: space-between; align-items: baseline; color: var(--ash); }
.gf-tot b { font-size: 22px; font-weight: 500; letter-spacing: -.02em; color: var(--ink); }
.gf-flag { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13px; color: #8A5A00; }
.gf-flag::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: #D99A00; vertical-align: 1px; }
@media (prefers-reduced-motion: no-preference) {
  .gd-flow.play .gf { animation: hspop .6s var(--ease) both; }
  .gd-flow.play .gf:nth-child(2) { animation-delay: .5s; }
  .gd-flow.play .gf:nth-child(3) { animation-delay: 1s; }
}

.gd-split { display: grid; gap: 16px; }
.gd-split .ticks { margin-top: 0; }
.gd-split .prose p:first-child { margin-top: 0; }
.gd-aside { padding: 28px; }
.gd-aside h3 { font-weight: 500; font-size: 22px; letter-spacing: -.02em; }
.gd-aside p { margin-top: 12px; color: var(--ink-2); line-height: 1.55; }
.gd-aside .lnk { display: inline-flex; margin-top: 16px; }
.gd-price { font-size: 17px; }
.gd-price b { font-weight: 500; font-size: 30px; letter-spacing: -.03em; color: var(--blue); }
@media (min-width: 900px) { .gd-split { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 48px; align-items: start; } }

@media (max-width: 599px) {
  .gd { padding: 20px; border-radius: 22px; }
  .gd-cost li { grid-template-columns: 12px minmax(0, 1fr); row-gap: 2px; }
  .gd-cost li b { grid-column: 2; }
  .gf-map p { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .gf-map .ic { display: none; }
  .gd-cap table { font-size: 14px; }
  .gd-cap td b { white-space: normal; font-size: 13px; }
}
@media (min-width: 1100px) { .gd-st .cases { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.gd-cap th, .gd-cap td { padding-block: 10px; }
.gd-cap td { width: 22%; }

/* privacy: no dead band between the lead and the text */
.sec:has(> .in > .legal) { padding-top: clamp(32px, 4vw, 48px); }
.legal h2 { text-wrap: balance; }

/* dark bands on these pages: accents that read on navy */
.dk .ticks .ic { color: #A9ACF7; }
.dk .cases .cs-tag { color: #A9ACF7; }

/* Final diagnostic band: navy, with the form as a light card on top. Back to light right after another dark band */
.final {
  --bone: #0E0F1C; --wash: #15172A; --paper: #171a2e; --ink: #F3F3F6; --ink-2: #D4D6E0; --ash: #9A9DB2; --line: #23263B; --line-2: #33364E;
  background-color: var(--night); background-size: 48px 48px; background-position: center top;
  background-image: linear-gradient(rgb(255 255 255 / .035) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .035) 1px, transparent 1px);
  color: var(--ink); border-top: 0;
}
.final :focus-visible { outline-color: #fff; }
.final .form, .dk + .final {
  --bone: #F6F6F3; --wash: #EDEDE9; --paper: #FFFFFF; --ink: #0B0C1A; --ink-2: #2B2D3A; --ash: #5F626C; --line: #E4E4E0; --line-2: #D4D4CF;
  color: var(--ink);
}
.final .form :focus-visible { outline-color: var(--blue); }
.final .form { box-shadow: 0 40px 80px -40px rgb(0 0 0 / .6); border-color: transparent; }
.dk + .final { background: var(--wash); background-image: none; border-top: 1px solid var(--line-2); }
.dk + .final :focus-visible { outline-color: var(--blue); }
.final .lede { color: var(--ink-2); }
@media (min-width: 980px) { .final-in { align-items: center; } }
/* == /precios + guias == */

/* ---- Web: "Cómo funciona" storefront demo. Static frame = finished product page; .live scripts the whole flow ---- */
.an-shot .browser { position: relative; }
.an-shot .sf-search { display: flex; align-items: center; gap: 8px; flex: 1; max-width: 220px; height: 32px; margin-left: 8px; padding: 0 12px; border-radius: 8px; background: rgb(255 255 255 / .1); color: #C9D3DC; font-size: 12.5px; white-space: nowrap; overflow: hidden; }
.sf-search .ic { width: 14px; height: 14px; }
.sf-search em { font-style: normal; }
.sf-q { color: #fff; }
.sf-q:not(:empty) ~ .sf-ph { display: none; }
.sf-dd, .sf-cart, .sf-toast, .sf-fly, .sf-cur, .sf-list { display: none; }
.an-gal { display: grid; gap: 8px; align-content: start; }
.an-th { display: flex; gap: 8px; }
.an-th i { width: 44px; height: 44px; border-radius: 8px; background: var(--bone) url(/assets/img/products/valvula.webp) center / cover; opacity: .75; }
.an-th i:nth-child(2) { background-size: 230%; background-position: 20% 30%; }
.an-th i:nth-child(3) { background-size: 230%; background-position: 85% 70%; }
.an-th i.on { opacity: 1; outline: 2px solid #1C2A36; outline-offset: 1px; }
.an-spec .ok-t { display: inline-flex; align-items: center; gap: 7px; }
.sf-dot { width: 7px; height: 7px; border-radius: 50%; background: #1BA35B; }
.an-add { position: relative; overflow: hidden; display: grid; transition: background-color .35s var(--ease), transform .2s var(--ease); }
.an-add b { grid-area: 1 / 1; display: flex; align-items: center; justify-content: center; gap: 7px; font-weight: 500; transition: transform .45s var(--ease); }
.an-add .a2 { transform: translateY(125%); }
.an-add .ic { width: 15px; height: 15px; stroke-width: 2.2; }
.qty b { min-width: 24px; text-align: center; font-weight: 500; font-variant-numeric: tabular-nums; }
.sf-score { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; padding: 10px 16px 8px; border-radius: 12px; background: #fff; box-shadow: var(--sh-1), 0 6px 16px -10px rgb(11 12 26 / .3); }
.sf-score span { position: relative; display: grid; justify-items: center; gap: 3px; width: 64px; }
.sf-score svg { width: 38px; height: 38px; transform: rotate(-90deg); fill: none; stroke-width: 3.4; }
.sf-score .bg { stroke: #DDF1E4; }
.sf-score .fg { stroke: #0F7A3F; stroke-linecap: round; stroke-dasharray: var(--v) 100; }
.sf-score b { position: absolute; top: 11px; font: 600 12px/1 var(--sans); color: #0F7A3F; }
.sf-score small { font-size: 10.5px; color: var(--ash); }
.an-shot { padding-bottom: 150px; }
@media (max-width: 699px) { .an-shot { padding-bottom: 0; } .an-th, .sf-dd { display: none !important; } }
.an-sat.crm .fa-wire { position: relative; overflow: visible; }

/* live */
.an-shot.live .an-sat { animation: none; opacity: 0; transform: translateY(14px) scale(.97); transition: opacity .6s var(--ease), transform .6s var(--ease); pointer-events: none; }
.anat:is([data-s="3"], [data-s="4"]) .an-shot.live .serp, .anat[data-s="4"] .an-shot.live .crm { opacity: 1; transform: none; }
.an-shot.live .pin { animation: none; scale: 0; transition: scale .45s var(--ease); }
.anat:is([data-s="1"], [data-s="2"], [data-s="3"], [data-s="4"]) .an-shot.live [data-n="1"], .anat:is([data-s="2"], [data-s="3"], [data-s="4"]) .an-shot.live [data-n="2"],
.anat:is([data-s="3"], [data-s="4"]) .an-shot.live [data-n="3"], .anat[data-s="4"] .an-shot.live [data-n="4"] { scale: 1; }
.an-shot.live .sf-dd, .an-shot.live .sf-cart, .an-shot.live .sf-toast, .an-shot.live .sf-fly, .an-shot.live .sf-cur, .an-shot.live .sf-list { display: block; }
.an-shot.live .sf-body { position: relative; }
.an-shot.live .sf-list { position: absolute; inset: 0; z-index: 1; padding: 18px 28px; background: #fff; transition: opacity .45s var(--ease); }
.an-shot.live.pg-in .sf-list { opacity: 0; pointer-events: none; }
.sf-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 10px; }
.sf-grid p { display: grid; gap: 3px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; font-size: 12.5px; }
.sf-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; background: var(--bone); margin-bottom: 4px; }
.sf-grid b { font-weight: 600; color: #1C2A36; }
.sf-grid span { font: 500 11px/1 var(--mono); color: var(--ash); }
.an-shot.live.dd-open .sf-q::after { content: ""; display: inline-block; width: 1px; height: 13px; margin-left: 1px; vertical-align: -2px; background: #fff; animation: sfblink 1s steps(1) infinite; }
.an-shot.live .sf-dd { position: absolute; z-index: 7; top: 88px; right: 132px; width: 270px; padding: 6px; border-radius: 12px; background: #fff; box-shadow: var(--sh-3); border: 1px solid var(--line); opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity .3s var(--ease), transform .3s var(--ease); }
.an-shot.live.dd-open .sf-dd { opacity: 1; transform: none; }
.sf-dd p { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px; font: 500 11px/1.3 var(--mono); color: var(--ash); transition: background-color .2s, transform .2s; }
.sf-dd p:first-child { background: var(--bone); }
.sf-dd img { width: 32px; height: 32px; border-radius: 6px; object-fit: cover; }
.sf-dd b { display: block; font: 600 12.5px/1.3 var(--sans); color: #1C2A36; }
.sf-dd em { font: 500 11px/1 var(--sans); font-style: normal; }
.an-shot.live .an-pg { opacity: 0; transition: opacity .5s var(--ease) .1s; }
.an-shot.live.pg-in .an-pg { opacity: 1; }
.an-shot.live .an-img img { transform: scale(1.14); transition: transform 1.8s var(--ease); }
.an-shot.live.pg-in .an-img img { transform: none; }
.an-shot.live :is(.an-code, .an-t, .an-buy, .an-wa, .an-th) { opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.an-shot.live.pg-in :is(.an-code, .an-t, .an-buy, .an-wa, .an-th) { opacity: 1; transform: none; transition-delay: .25s; }
.an-shot.live.pg-in .an-buy { transition-delay: .75s; }
.an-shot.live.pg-in .an-wa { transition-delay: .85s; }
.an-shot.live .an-spec div { opacity: 0; transform: translateX(12px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.an-shot.live.pg-in .an-spec div { opacity: 1; transform: none; transition-delay: calc(.35s + var(--i) * .09s); }
.an-shot.live.added .an-add { background: #0F7A3F; }
.an-shot.live.added .an-add .a1 { transform: translateY(-125%); }
.an-shot.live.added .an-add .a2 { transform: none; }
.an-shot .tap { transform: scale(.95); }
.an-shot.live .cnt { transition: transform .3s var(--ease); }
.sf-n { transform: none !important; }
.an-shot.live.bump .cnt { animation: sfbump .45s var(--ease); }
.an-shot.live .sf-cur { position: absolute; left: 0; top: 0; z-index: 9; width: 22px; height: 22px; margin: -3px 0 0 -3px; opacity: 0; pointer-events: none; transition: transform 1s cubic-bezier(.45, 0, .2, 1), opacity .3s, scale .15s; filter: drop-shadow(0 2px 3px rgb(11 12 26 / .35)); }
.sf-cur path { fill: #fff; stroke: #1C2A36; stroke-width: 1.3; stroke-linejoin: round; }
.an-shot.live.cur-on .sf-cur { opacity: 1; }
.an-shot.live .sf-cur.off { opacity: 0; }
.an-shot.live .sf-cur.press { scale: .82; }
.an-shot.live .sf-fly { position: absolute; left: 0; top: 0; z-index: 8; width: 40px; height: 40px; border-radius: 8px; object-fit: cover; opacity: 0; pointer-events: none; box-shadow: 0 8px 20px -6px rgb(11 12 26 / .5); }
.an-shot.live .sf-cart { position: absolute; z-index: 6; top: 92px; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 10px; width: min(250px, 48%); padding: 14px; background: #fff; border-left: 1px solid var(--line); box-shadow: -22px 0 32px -22px rgb(11 12 26 / .4); transform: translateX(105%); transition: transform .6s var(--ease); }
.an-shot.live.cart-open .sf-cart { transform: none; }
.sf-ch { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.sf-ch b { font-size: 14px; font-weight: 600; color: #1C2A36; }
.sf-ch span { font-size: 12px; color: var(--ash); opacity: 0; transition: opacity .3s; }
.an-shot.sf2 .sf-ch span { opacity: 1; }
.sf-cr { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 12.5px; color: #1C2A36; }
.sf-cr img { width: 36px; height: 36px; border-radius: 6px; object-fit: cover; background: var(--bone); }
.sf-cr b { font-weight: 600; font-variant-numeric: tabular-nums; }
.sf-cr.r2 { opacity: 0; transform: translateX(16px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.an-shot.sf2 .sf-cr.r2 { opacity: 1; transform: none; }
.sf-send { display: flex; align-items: center; justify-content: center; gap: 8px; height: 36px; margin-top: auto; border-radius: 8px; background: #1C2A36; color: #fff; font-size: 13px; font-weight: 500; transition: background-color .3s, transform .2s; }
.sf-send.wa { margin-top: 0; background: #fff; border: 1px solid var(--line-2); color: var(--ink); }
.sf-send .brand, .sf-send .ic { width: 16px; height: 16px; }
.an-shot.live.sent .sf-send:not(.wa) { background: #0F7A3F; }
.an-shot.live .sf-toast { position: absolute; z-index: 9; left: 50%; top: 100px; display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; background: #0F7A3F; color: #fff; font-size: 12.5px; font-weight: 500; white-space: nowrap; box-shadow: var(--sh-3); opacity: 0; transform: translate(-50%, -14px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.an-shot.live.sent .sf-toast { opacity: 1; transform: translate(-50%, 0); }
.sf-toast .ic { width: 14px; height: 14px; stroke: #fff; stroke-width: 2.2; }
.an-shot.live .sf-score .fg { stroke-dasharray: 0 100; transition: stroke-dasharray 1.2s var(--ease) .35s; }
.anat:is([data-s="3"], [data-s="4"]) .an-shot.live .sf-score .fg { stroke-dasharray: var(--v) 100; }
.anat[data-s="4"] .an-sat.crm .fa-wire::after { content: ""; position: absolute; top: -3px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px rgb(41 47 221 / .18); animation: sfwire 1.1s linear infinite; }
.anat[data-s] .an-legend li { opacity: .32; transition: opacity .5s var(--ease); }
.anat[data-s="1"] .an-legend li:nth-child(-n+1), .anat[data-s="2"] .an-legend li:nth-child(-n+2), .anat[data-s="3"] .an-legend li:nth-child(-n+3), .anat[data-s="4"] .an-legend li { opacity: 1; }
@media (prefers-reduced-motion: no-preference) { .sf-dot { animation: sfpulse 1.8s ease-out infinite; } }
@keyframes sfblink { 50% { opacity: 0; } }
@keyframes sfbump { 40% { transform: scale(1.5); } }
@keyframes sfpulse { 0% { box-shadow: 0 0 0 0 rgb(27 163 91 / .5); } 80%, 100% { box-shadow: 0 0 0 7px rgb(27 163 91 / 0); } }
@keyframes sfwire { from { left: 0; } to { left: calc(100% - 8px); } }
.an-shot.live .browser { transition: opacity .5s var(--ease); }
.an-shot.live.out .browser, .an-shot.live.out .an-sat { opacity: 0 !important; }
.an-shot.snap *, .an-shot.snap *::before, .an-shot.snap *::after { transition: none !important; animation: none !important; }

/* ---- Odoo: "Cómo funciona", the diagnostic as a short story. Static frame = everything solved; .live plays scan, findings, fixes, weeks ---- */
.diag .dg-r { padding: 16px 0 16px 44px; }
.diag .dg-r::before { top: 15px; transition: background-color .4s var(--ease); }
.diag header { flex-wrap: wrap; }
.dg-pill { margin-left: auto; display: grid; }
.dg-pill em { grid-area: 1 / 1; justify-self: end; padding: 5px 12px; border-radius: 999px; font-style: normal; font-size: 12.5px; font-weight: 500; white-space: nowrap; transition: opacity .35s var(--ease), transform .35s var(--ease); }
.dg-pill .sc { display: none; background: var(--wash); color: var(--ink-2); }
.dg-pill .fd { background: #FDECEA; color: var(--bad); }
.dg-pill .fd b { display: inline; font-size: inherit; font-weight: 600; }
.dg-scan { display: none; height: 3px; background: var(--wash); }
.dg-scan i { display: block; width: 0; height: 100%; background: var(--blue); transition: width 2.2s cubic-bezier(.4, 0, .2, 1); }
.dg-body { display: grid; grid-template-rows: 1fr; }
.dg-body > div { min-height: 0; overflow: hidden; }
.dg-v { padding-top: 10px; }
.dg-v p { display: flex; align-items: baseline; gap: 8px; }
.dg-v p b { font: 500 28px/1 var(--sans); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.dg-v p span { font-size: 14px; color: var(--ash); }
.dg-sq { display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); gap: 3px; margin-top: 10px; }
.dg-sq i { height: 8px; border-radius: 2px; background: var(--wash); transition: background-color .5s var(--ease); }
.dg-sq .bad { background: var(--bad); }
.diag:not(.live) .dg-sq .bad { background: #1BA35B; }
.bar { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: center; gap: 10px; margin-top: 6px; font-size: 13px; color: var(--ash); }
.bar i { display: block; width: var(--w); height: 24px; border-radius: 6px; background: var(--bad); transition: width 1.1s var(--ease); }
.bar.nw i { background: var(--blue); }
.bar b { display: block; padding-left: 9px; font: 600 12px/24px var(--sans); color: #fff; white-space: nowrap; }
.dg-v.v3 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dg-v .chip { padding: 6px 12px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--bone); font-size: 13px; font-weight: 500; transition: opacity .5s var(--ease), background-color .5s, color .5s; }
.dg-v .chip.x { border-color: #F3C6C0; background: #FDECEA; color: var(--bad); }
.dg-v .arr { width: 34px; height: 2px; background: repeating-linear-gradient(90deg, var(--bad) 0 4px, transparent 4px 8px); transition: opacity .4s; }
.diag:not(.live) .dg-v .arr { display: none; }
.diag:not(.live) .dg-v .chip.x { opacity: .4; text-decoration: line-through; }
.dg-v.v3 em { display: flex; align-items: center; gap: 6px; margin-left: auto; font-style: normal; font-size: 13px; font-weight: 500; color: var(--wa); transition: opacity .5s var(--ease); }
.dg-v.v3 em .ic { width: 15px; height: 15px; }
.dg-rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }
.dg-rail span { font-size: 12px; color: var(--ash); }
.dg-rail i { position: relative; display: block; height: 4px; margin-bottom: 6px; border-radius: 2px; background: var(--wash); overflow: hidden; }
.dg-rail i::after { content: ""; position: absolute; inset: 0; background: #1BA35B; }

/* live */
.diag.live { transition: opacity .45s var(--ease); }
.diag.live.out { opacity: 0; }
.diag.snap *, .diag.snap *::before, .diag.snap *::after { transition: none !important; animation: none !important; }
.diag.live li { animation: none; }
.diag.live .dg-ol { min-height: 300px; }
.diag.live .dg-scan { display: block; }
.diag.live .dg-pill .sc { display: block; }
.diag.live .dg-pill .fd { opacity: 0; transform: scale(.9); }
.diag.live.is-found .dg-pill .fd { opacity: 1; transform: none; }
.diag.live.is-found .dg-pill .sc { opacity: 0; transform: scale(.9); }
.diag.live .dg-pill .sc::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--blue); animation: dgblink 1s ease-in-out infinite; }
.diag.live.is-scan .dg-scan i, .diag.live.is-found .dg-scan i { width: 100%; }
.diag.live.is-found .dg-scan i { background: var(--bad); }
.diag.live .dg-r { opacity: .35; transition: opacity .5s var(--ease); }
.diag.live .dg-r:is(.is-act, .is-fix, .is-ok) { opacity: 1; }
.diag.live .dg-body { grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease); }
.diag.live .dg-r:is(.is-act, .is-fix):not(.is-ok) .dg-body { grid-template-rows: 1fr; }
.diag.live .dg-r.is-act::before { background: var(--blue); }
.diag.live .dg-r.is-ok::before { content: "✓"; background: #1BA35B; }
.diag.live .dg-fix { max-height: 0; margin-top: 0; overflow: hidden; opacity: 0; transition: max-height .4s var(--ease), margin .4s var(--ease), opacity .4s var(--ease); }
.diag.live .dg-r.is-ok .dg-fix { max-height: 24px; margin-top: 6px; opacity: 1; }
.diag.live .dg-r.is-ok .imp { opacity: .45; }
.diag.live .dg-sq .bad { background: var(--wash); }
.diag.live .dg-r:is(.act, .fix) .dg-sq .bad { background: var(--bad); }
.diag.live .dg-r.is-fix .dg-sq .bad { background: #1BA35B; }
.diag.live .bar:not(.nw) i { width: 0; }
.diag.live .bar.nw i { width: 0; }
.diag.live .dg-r:is(.is-act, .is-fix, .is-ok) .bar:not(.nw) i { width: var(--w); }
.diag.live .dg-r:is(.is-fix, .is-ok) .bar.nw i { width: var(--w); }
.diag.live .dg-r:is(.is-fix, .is-ok) .bar:not(.nw) i { background: #C9CDD6; }
.diag.live .dg-v.v3 em { opacity: 0; }
.diag.live .dg-r:is(.is-fix, .is-ok) .dg-v.v3 em { opacity: 1; }
.diag.live .dg-r:is(.is-fix, .is-ok) .chip.x { opacity: .4; text-decoration: line-through; background: var(--bone); color: var(--ash); border-color: var(--line-2); }
.diag.live .dg-r:is(.is-fix, .is-ok) .arr { opacity: 0; }
.diag.live .dg-rail i::after { transform: scaleX(0); transform-origin: left; background: var(--blue); transition: transform 3.4s linear, background-color .3s; }
.diag.live .dg-rail .is-on i::after { transform: none; }
.diag.live .dg-rail .is-ok i::after { background: #1BA35B; }
.diag.live footer { opacity: 0; transform: translateY(6px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.diag.live.is-done footer { opacity: 1; transform: none; color: var(--ink); font-weight: 500; }
@keyframes dgblink { 50% { opacity: .25; } }

/* Odoo: warehouse scene reacts to the diagnostic steps */
.diag-art .wh-svg { display: block; width: 100%; max-width: 460px; height: auto; }
.diag-art.live .mk { opacity: 0; transform: scale(.3); transition: opacity .35s var(--ease), transform .45s var(--ease); }
.diag-art .mk circle { fill: var(--bad); transition: fill .4s; }
.diag-art .mk rect { fill: var(--blue); }
.diag-art .mk text { fill: #fff; font: 700 10px/1 var(--sans); text-anchor: middle; dominant-baseline: central; transition: opacity .3s; }
.diag-art .mk .t2 { opacity: 0; }
.diag-art .mk.m2 text { font-size: 10.5px; }
.diag-art:not(.live) .mk { display: none; }
.diag-art.a1 .m1, .diag-art.a2 .m2, .diag-art.a3 .m3 { opacity: 1; transform: none; }
.diag-art.f1 .m1 circle, .diag-art.f3 .m3 circle { fill: #1BA35B; }
.diag-art.f1 .m1 .t1, .diag-art.f3 .m3 .t1 { opacity: 0; }
.diag-art.f1 .m1 .t2, .diag-art.f3 .m3 .t2 { opacity: 1; }
.diag-art.a3 .m3 { transition-delay: 1.6s; }
.diag-art.live .mon { transition: filter .5s var(--ease); }
.diag-art.a2 .mon, .diag-art.f2 .mon { filter: drop-shadow(0 0 7px rgb(41 47 221 / .55)); }
@media (prefers-reduced-motion: no-preference) {
  .diag-art.a1 .mm { animation: whbob 1.1s ease-in-out infinite; }
  .diag-art.a1 .mm:nth-of-type(2n) { animation-delay: .25s; }
  .diag-art.a2 .pill { animation: whpill .9s ease-in-out infinite; animation-delay: calc(var(--i) * .22s); }
  .diag-art.a3 .go { animation: whship 1.5s cubic-bezier(.5, 0, .3, 1) forwards; animation-delay: calc(var(--i) * .45s + .2s); }
}
@keyframes whbob { 50% { transform: translateY(-3px); } }
@keyframes whpill { 50% { opacity: .25; } }
@keyframes whship { to { transform: translate(95px, 55px); opacity: 0; } }
.diag-art.k3 .go { opacity: 0; }
.diag-art:is(.k2, .k3) .mon { filter: drop-shadow(0 0 7px rgb(41 47 221 / .4)); }

/* Integrations strip: infinite marquee */
.conn { flex-wrap: nowrap; overflow: hidden; }
.conn > p { flex: none; }
.conn-m { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.conn-t { display: flex; width: max-content; }
.conn-t ul { display: flex; flex-wrap: nowrap; flex: none; gap: 8px; padding-right: 8px; }
.conn-t li { white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
  .conn-t { animation: connm 48s linear infinite; }
  .conn:hover .conn-t { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) { .conn-m { overflow-x: auto; } .conn-t ul[aria-hidden] { display: none; } }
@media (max-width: 699px) { .conn { flex-wrap: wrap; } .conn-m { flex: 1 1 100%; } }
@keyframes connm { to { transform: translateX(-50%); } }