/* OnMotion — onmotion.ai
   Tokens are the logo's: near-black navy, a teal → blue → violet ring, off-white type.
   Display: Manrope 800. Body: Inter. Timestamps: IBM Plex Mono.
   Two themes (dark by default), and a strict mobile budget: no animated blur, no
   backdrop-filter on cards, no parallax, no grain below 981px or on touch devices. */
:root{
  --ink:#020716; --navy:#0A1230; --navy-2:#111B44; --bg:var(--ink);
  --glass:rgba(255,255,255,.055); --glass-2:rgba(255,255,255,.09); --glass-solid:rgba(17,27,68,.72); --line:rgba(255,255,255,.12); --line-2:rgba(255,255,255,.22);
  --text:#EDEEF4; --muted:#A3AECB; --dim:#6F7A99; --on-primary:#04101a;
  --teal:#20D9A9; --blue:#3B7BFF; --violet:#8A5CFF; --amber:#FFB35C;
  --wa-in:#1F2C34; --wa-out:#005C4B; --wa-bg:#0B141A;
  /* 113-U: BUTTONS are one flat colour, never the ring gradient. Dennis,
     2026-09-22: "one still color, and it should swiftly change with a flowing
     water-inside animation as I'm moving the mouse to a different color as a
     contrast... only the buttons, please."
     The pair is chosen so the SAME dark label clears AA on both - during the
     wipe both colours are on screen at once, so a label that only passes on
     the base would become unreadable halfway through. Measured against
     --on-primary #04101a: blue 4.99:1, teal 10.56:1. */
  --btn:#3B7BFF; --btn-liquid:#20D9A9;
  --ring:linear-gradient(135deg,var(--teal),var(--blue) 50%,var(--violet));
  --sweep:linear-gradient(90deg,var(--teal) 0%,var(--blue) 35%,var(--violet) 65%,var(--teal) 100%);
  --aurora-1:rgba(59,123,255,.28); --aurora-2:rgba(138,92,255,.24); --aurora-3:rgba(32,217,169,.16);
  --display:"Manrope",Inter,system-ui,sans-serif; --body:Inter,system-ui,-apple-system,"Segoe UI",sans-serif; --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --r:22px; --r-s:14px; --max:1180px; --gutter:clamp(16px,4vw,40px);
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:dark;
}
html[data-theme="light"]{
  --bg:#F4F6FA; --navy:#FFFFFF; --navy-2:#EEF2FA;
  --glass:rgba(255,255,255,.62); --glass-2:rgba(255,255,255,.9); --glass-solid:rgba(255,255,255,.92); --line:rgba(14,26,51,.1); --line-2:rgba(14,26,51,.2);
  --text:#0E1A33; --muted:#3F4B66; --dim:#6F7A99; --on-primary:#04101a;
  --aurora-1:rgba(59,123,255,.18); --aurora-2:rgba(138,92,255,.14); --aurora-3:rgba(32,217,169,.14);
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html,body{overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--body);line-height:1.6;-webkit-font-smoothing:antialiased;transition:background .4s,color .4s}
a{color:inherit}
img,svg{display:block;max-width:100%}
h1,h2,h3{font-family:var(--display);letter-spacing:-.025em;line-height:1.05;margin:0}
h1{font-size:clamp(2.4rem,6.2vw,4.6rem);font-weight:800}
h2{font-size:clamp(1.8rem,4vw,3rem);font-weight:800}
h3{font-size:1.15rem;font-weight:700;letter-spacing:-.01em}
p{margin:0}
.lede{font-size:clamp(1.05rem,1.5vw,1.25rem);color:var(--muted);max-width:38rem}
.eyebrow{font:600 .78rem/1 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--teal);margin-bottom:14px}
html[data-theme="light"] .eyebrow,html[data-theme="light"] .langs b{color:#0B8F6E}
html[data-theme="light"] .split ul.checks li::before,html[data-theme="light"] .vs .card.with li::before{color:#0B8F6E}
.grad{background:var(--ring);-webkit-background-clip:text;background-clip:text;color:transparent}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:6px}
.only-light{display:none}
html[data-theme="light"] .only-light{display:block}
html[data-theme="light"] .only-dark{display:none}

/* ── aurora: pure gradients, no filter. Animated only on desktop with a real pointer. ── */
.aurora{position:fixed;inset:0;z-index:-2;overflow:hidden;background:var(--bg);pointer-events:none}
.aurora i{position:absolute;border-radius:50%;will-change:transform}
.aurora i:nth-child(1){width:70vmax;height:70vmax;left:-20vmax;top:-30vmax;background:radial-gradient(circle,var(--aurora-1) 0%,transparent 62%)}
.aurora i:nth-child(2){width:60vmax;height:60vmax;right:-22vmax;top:-6vmax;background:radial-gradient(circle,var(--aurora-2) 0%,transparent 62%)}
.aurora i:nth-child(3){width:56vmax;height:56vmax;left:22vmax;bottom:-30vmax;background:radial-gradient(circle,var(--aurora-3) 0%,transparent 62%)}
@media (hover:hover) and (min-width:981px){
  .aurora i:nth-child(1){animation:drift 30s var(--ease) infinite alternate}
  .aurora i:nth-child(2){animation:drift 38s var(--ease) infinite alternate-reverse}
  .aurora i:nth-child(3){animation:drift 44s var(--ease) infinite alternate}
}
@keyframes drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(5vw,4vw,0) scale(1.08)}}
.grain{display:none}
@media (hover:hover) and (min-width:981px){
  .grain{display:block;position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.3;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
  html[data-theme="light"] .grain{opacity:.12}
}

/* ── glass: real blur only where it is cheap (desktop, few elements); solid tint elsewhere ── */
.glass{background:var(--glass-solid);border:1px solid var(--line);border-radius:var(--r);position:relative;box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 24px 60px -30px rgba(0,0,0,.6)}
html[data-theme="light"] .glass{box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 24px 60px -34px rgba(14,26,51,.35)}
@media (hover:hover) and (min-width:981px){
  .glass{background:var(--glass);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%)}
}
/* the shine: a light band that sweeps left → right on hover */
.sweep{overflow:hidden}
.sweep::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:30%;transform:translate3d(-120%,0,0);background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);pointer-events:none;transition:transform 1.1s var(--ease)}
@media (hover:hover){.sweep:hover::after{transform:translate3d(520%,0,0)}}
.glass.lift{transition:transform .5s var(--ease),border-color .5s var(--ease),box-shadow .5s var(--ease)}
@media (hover:hover){.glass.lift:hover{transform:translateY(-4px);border-color:var(--line-2);box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 40px 90px -30px rgba(59,123,255,.35)}}

/* ── nav ─────────────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:50;padding:12px 0;transition:background .4s,border-color .4s}
.nav.solid{background:var(--glass-solid);border-bottom:1px solid var(--line)}
@media (hover:hover) and (min-width:981px){.nav.solid{background:rgba(2,7,22,.7);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}html[data-theme="light"] .nav.solid{background:rgba(244,246,250,.8)}}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;text-decoration:none}
.brand img{height:38px;width:auto}
.nav nav{display:flex;align-items:center;gap:6px}
.nav nav a{color:var(--muted);text-decoration:none;font-size:.95rem;padding:8px 12px;border-radius:999px;position:relative;transition:color .3s}
.nav nav a:not(.btn)::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:2px;border-radius:2px;background:var(--sweep);background-size:300% 100%;transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease),background-position .8s}
@media (hover:hover){.nav nav a:not(.btn):hover{color:var(--text)}.nav nav a:not(.btn):hover::after{transform:scaleX(1);background-position:100% 0}}
.nav nav a[aria-current]{color:var(--text)}.nav nav a[aria-current]:not(.btn)::after{transform:scaleX(1)}
.theme-btn{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:var(--glass-solid);color:var(--text);cursor:pointer;transition:border-color .3s,transform .3s}
.theme-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.theme-btn .moon{display:none}html[data-theme="light"] .theme-btn .moon{display:block}html[data-theme="light"] .theme-btn .sun{display:none}
@media (hover:hover){.theme-btn:hover{border-color:var(--line-2);transform:rotate(15deg)}}
.nav-right{display:flex;align-items:center;gap:8px}
.menu-btn{display:none;background:var(--glass-solid);border:1px solid var(--line);color:var(--text);border-radius:12px;width:42px;height:42px;font-size:1.2rem}

/* buttons: the colour sweeps left → right */
.btn{display:inline-flex;align-items:center;gap:10px;padding:13px 22px;border-radius:999px;border:1px solid transparent;font:600 .98rem var(--body);text-decoration:none;cursor:default;color:var(--text);position:relative;overflow:hidden;transform:translate3d(0,0,0);transition:transform .5s cubic-bezier(.22,.61,.36,1),box-shadow .5s cubic-bezier(.22,.61,.36,1),border-color .4s}
.btn.primary{background:var(--btn);color:var(--on-primary);box-shadow:0 10px 30px -12px rgba(59,123,255,.55);will-change:transform;backface-visibility:hidden}
/* 113-AQ (Dennis: "the same animation that we already have on the 24/7 section"):
   the fill is the ring sentences' sweep - the same stops (the button's blue, then
   teal, blue and violet: .ben h3's --text 0 40% becomes --btn here), the same
   1.6s on the same --ease, sliding left to right. It moves a 300%-wide gradient
   layer with transform (composited, so it never stutters) instead of animating
   background-position; its first third is the plain button blue, so at rest it
   is invisible, and on hover it lands on the last third, blue into violet. */
.btn.primary::before{content:"";position:absolute;top:0;bottom:0;left:0;width:300%;pointer-events:none;
  background:linear-gradient(90deg,var(--btn) 0 40%,var(--teal) 50%,var(--blue) 62%,var(--violet) 76%,var(--violet) 100%);
  transform:translate3d(0,0,0);transition:transform 1.6s var(--ease);will-change:transform}
.btn-label{position:relative;z-index:1;display:inline-flex;align-items:center;gap:10px}
@media (hover:hover){
  .btn.primary:hover{transform:translate3d(0,-2px,0);box-shadow:0 18px 40px -12px rgba(138,92,255,.55),0 0 0 1px rgba(255,255,255,.12) inset}
  .btn.primary:hover::before{transform:translate3d(-66.6667%,0,0)}
}
.btn.primary:focus-visible::before{transform:translate3d(-66.6667%,0,0)}
/* Reduced motion still gets the colour change, without the travel. */
@media (prefers-reduced-motion:reduce){
  .btn.primary::before{transition:none}
}
.btn.ghost{background:var(--glass-solid);border-color:var(--line);will-change:transform;backface-visibility:hidden}
@media (hover:hover){.btn.ghost:hover{border-color:var(--line-2);transform:translate3d(0,-2px,0);box-shadow:0 14px 34px -16px rgba(59,123,255,.35)}}
.btn.sm{padding:9px 16px;font-size:.9rem}
.btn:disabled{opacity:.6;cursor:default}

/* ── hero ────────────────────────────────────────────────────── */
.hero{position:relative;padding:clamp(40px,8vh,100px) 0 clamp(40px,7vh,90px)}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,5vw,64px);align-items:center}
.hero h1{margin:14px 0 20px}
.hero .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
/* 113-AE (Dennis, 2026-09-23): the lead's phone and the co-pilot's phone are ONE size,
   on desktop and on a phone, one in front of the other. They share a slot origin (--x0,
   --top); the one behind is moved by --dx/--dy and dimmed. Pressing it swaps them. */
.stage{position:relative;--pw:248px;--dx:146px;--dy:34px;--top:118px;--ph:calc(var(--pw) * 2.1333);--x0:calc((100% - var(--pw) - var(--dx)) / 2);min-height:calc(var(--top) + var(--dy) + var(--ph) + 24px)}
.ring-bg{position:absolute;width:min(600px,112%);aspect-ratio:1;left:24%;top:52%;transform:translate(-50%,-50%);opacity:.5;pointer-events:none;will-change:transform}
.ring-bg.spin{animation:spin 80s linear infinite}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.layer{position:absolute}
.layer.crm{left:10%;top:-2%;width:min(520px,96%);z-index:1}
.layer.ph{top:var(--top);left:var(--x0);width:var(--pw)}
.layer.ph.is-front{z-index:3}
.layer.ph.is-back{z-index:2;transform:translate3d(var(--dx),var(--dy),0);cursor:pointer}
.layer.ph.is-back .phone *{pointer-events:none}
/* The hover lift moves the phone inside the layer, never the layer: the swap animates the
   layer's transform, and a CSS transition on the same property would outrank it. */
.ph .phone{transition:translate .35s var(--ease)}
@media (hover:hover){.layer.ph.is-back:hover .phone{translate:0 -6px}}
.ph .shade{position:absolute;inset:0;border-radius:inherit;background:rgba(2,7,22,.42);opacity:0;pointer-events:none;z-index:5;transition:opacity .45s var(--ease)}
.ph.is-back .shade{opacity:1}
@media (hover:hover){.ph.is-back:hover .shade{opacity:.55}}
/* the language pills belong to the lead's chat: shown only while it is in front */
.layer.lead .lang-pills{transition:opacity .3s var(--ease),visibility 0s}
.layer.lead.is-back .lang-pills{opacity:0;visibility:hidden;transition:opacity .2s var(--ease),visibility 0s .2s}
/* the chip that swaps them sits on the visible strip of the phone behind */
.swap-btn{position:absolute;z-index:4;left:calc(var(--x0) + var(--pw) + var(--dx) / 2);top:calc(var(--top) + var(--dy) + var(--ph) * .5);transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:7px;padding:9px 14px 9px 11px;border-radius:999px;border:1px solid var(--line-2);background:var(--glass-solid);color:var(--text);font:600 .76rem/1 var(--body);white-space:nowrap;cursor:pointer;box-shadow:0 14px 34px -12px rgba(0,0,0,.65);transition:border-color .3s,box-shadow .3s}
.swap-btn svg{width:15px;height:15px;flex:none;fill:none;stroke:var(--teal);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
html[data-theme="light"] .swap-btn svg{stroke:#0B8F6E}
@media (hover:hover){.swap-btn:hover,.stage:has(.ph.is-back:hover) .swap-btn{border-color:rgba(32,217,169,.6);box-shadow:0 14px 34px -12px rgba(32,217,169,.45)}}
/* the co-pilot's alert landed while it was behind: a dot and a short nudge */
.swap-btn.ping{border-color:rgba(32,217,169,.6);animation:nudge 1.1s var(--ease) 3}
.swap-btn.ping::after{content:"";position:absolute;top:-3px;right:-2px;width:10px;height:10px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 3px var(--bg),0 0 12px rgba(32,217,169,.8)}
@keyframes nudge{0%,100%{transform:translate(-50%,-50%) scale(1)}45%{transform:translate(-50%,-50%) scale(1.09)}}
/* WhatsApp-style centred notes in the co-pilot's chat */
.wa .sys{align-self:center;flex:none;padding:4px 9px;border-radius:8px;background:rgba(17,27,33,.82);color:#aebac1;font:500 .6rem/1.3 var(--body);text-align:center}
.wa .sys[hidden]{display:none}

/* ── phone v2 ────────────────────────────────────────────────── */
.phone{width:100%;aspect-ratio:9/19.2;border-radius:44px;background:#0b0d12;position:relative;
  box-shadow:0 0 0 1.5px rgba(255,255,255,.16),0 0 0 4px #14171f,0 30px 70px -18px rgba(0,0,0,.8),0 0 60px -20px rgba(59,123,255,.35);transform:rotateY(-6deg) rotateX(2deg)}
.phone::before{content:"";position:absolute;left:-3px;top:22%;width:2px;height:8%;border-radius:2px;background:#2a2f3a}
.phone::after{content:"";position:absolute;right:-3px;top:26%;width:2px;height:14%;border-radius:2px;background:#2a2f3a}
.phone .notch{position:absolute;left:50%;top:18px;transform:translateX(-50%);width:32%;height:20px;border-radius:12px;background:#000;z-index:4}
.wa{position:absolute;inset:7px;border-radius:38px;overflow:hidden;background:var(--wa-bg);display:flex;flex-direction:column;font-size:.74rem}
.wa::before{content:"9:41";position:absolute;top:11px;left:22px;font:600 .62rem var(--body);color:#fff;z-index:3;line-height:20px}
.wa::after{content:"";position:absolute;top:17px;right:22px;width:16px;height:8px;border:1px solid rgba(255,255,255,.75);border-radius:3px;z-index:3;box-shadow:inset 0 0 0 1px #0b141a,inset 11px 0 0 #fff}
.wa .top{display:flex;align-items:center;gap:8px;padding:40px 12px 10px;background:#1F2C34;border-bottom:1px solid rgba(255,255,255,.06)}
.wa .avatar{width:26px;height:26px;border-radius:50%;background:var(--ring);flex:none}
.wa .top b{display:block;font-size:.78rem;color:#fff}.wa .top small{color:#8696a0;font-size:.62rem}
.wa .thread{flex:1;padding:12px 10px;display:flex;flex-direction:column;gap:6px;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;background-image:radial-gradient(rgba(255,255,255,.035) 1px,transparent 1px);background-size:14px 14px;color:#e9edef}
.msg{max-width:84%;flex:none;padding:7px 9px 5px;border-radius:12px;line-height:1.35;font-size:.72rem;position:relative;display:none;opacity:0;transform:translateY(10px) scale(.985);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.msg.in{align-self:flex-start;background:var(--wa-in);border-top-left-radius:4px}
.msg.out{align-self:flex-end;background:var(--wa-out);border-top-right-radius:4px}
.msg.mounted{display:block}
.msg.show{display:block;opacity:1;transform:none}
.msg time{display:block;text-align:right;font:500 .55rem var(--mono);color:#8696a0;margin-top:3px}
.msg time{display:flex;justify-content:flex-end;align-items:center;gap:4px}
.msg.out time::after{content:"";width:1.4em;height:.95em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11' fill='none' stroke='%2353BDEB' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 6l3 3 6-7'/%3E%3Cpath d='M6 6l3 3 6-7'/%3E%3C/svg%3E") no-repeat center/contain}
.msg.card{padding:0;overflow:hidden;background:var(--wa-out);max-width:90%}
.msg.card .cap{white-space:pre-line}
.msg.card .cta{display:flex;align-items:center;justify-content:center;gap:6px;border-top:1px solid rgba(255,255,255,.12);padding:9px 8px;color:#53BDEB;font:600 .74rem var(--body);cursor:pointer;user-select:none}
.msg.card .cta::before{content:"";width:12px;height:12px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2353BDEB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpath d='M15 3h6v6M10 14L21 3'/%3E%3C/svg%3E") no-repeat center/contain}
@media (hover:hover){.msg.card .cta:hover{background:rgba(255,255,255,.06)}}
.msg.card img{width:100%;height:92px;min-height:92px;object-fit:cover;display:block;flex:none}
.msg.card .cap{padding:6px 9px 5px}
.typing{align-self:flex-start;flex:none;background:var(--wa-in);border-radius:12px;padding:8px 10px;display:none;gap:3px}
.typing.show{display:flex}
.typing i{width:5px;height:5px;border-radius:50%;background:#8696a0;animation:blink 1s infinite}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.25}40%{opacity:1}}
.wa .bar{display:flex;align-items:center;gap:8px;padding:8px 10px 16px;background:#1F2C34}
.wa .bar .field{flex:1;height:28px;border-radius:14px;background:#2A3942}
.wa .bar .send{width:28px;height:28px;border-radius:50%;background:#00A884;display:grid;place-items:center;flex:none}
.wa .bar .send::before{content:"";width:0;height:0;border-left:9px solid #fff;border-top:5px solid transparent;border-bottom:5px solid transparent;margin-left:2px}

/* CRM card */
.crm{border-radius:16px;overflow:hidden;overflow-x:auto;font-size:.72rem;transform:rotateY(-6deg) rotateX(4deg);transform-origin:center top}
.crm .bar{display:flex;gap:6px;align-items:center;padding:10px 12px;border-bottom:1px solid var(--line);color:var(--dim);font-size:.7rem}
.crm .bar i{width:8px;height:8px;border-radius:50%;background:var(--line-2)}
.crm table{width:100%;border-collapse:collapse}
.crm th{font:600 .58rem var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);text-align:left;padding:8px 10px}
.crm td{padding:8px 10px;border-top:1px solid var(--line);white-space:nowrap}
.crm tr.hi td{background:rgba(32,217,169,.07)}
.pill{display:inline-block;padding:2px 8px;border-radius:999px;font-size:.62rem;font-weight:600;border:1px solid var(--line)}
.pill.ok{color:var(--teal);border-color:rgba(32,217,169,.35);background:rgba(32,217,169,.08)}
.pill.warm{color:var(--amber);border-color:rgba(255,179,92,.35);background:rgba(255,179,92,.08)}
.pill.cool{color:#5F8CFF;border-color:rgba(59,123,255,.35);background:rgba(59,123,255,.1)}
html[data-theme="light"] .pill.ok{color:#0B8F6E}

/* ── sections ────────────────────────────────────────────────── */
section.block{padding:clamp(56px,9vh,120px) 0;position:relative}
.head{max-width:44rem;margin-bottom:clamp(28px,4vw,48px)}
.head h2{margin-bottom:14px}
.grid{display:grid;gap:18px}
.grid.c2{grid-template-columns:repeat(2,1fr)}
.grid.c3{grid-template-columns:repeat(3,1fr)}
.card{padding:26px}
.card h3{margin-bottom:8px}
.card p{color:var(--muted);font-size:.98rem}

/* 23:40. 113-AE (Dennis, 2026-09-23): the section said 23:40 twice, a big numeral and
   again in the headline. Now there is one, inside the headline, in the numeral's
   style: 25% smaller than the old numeral (clamp(3rem,9vw,7rem) x .75) and still
   larger than the headline it sits in (h2 is clamp(1.8rem,4vw,3rem)). */
.clock{font:600 clamp(2.25rem,6.75vw,5.25rem)/1 var(--mono);letter-spacing:-.04em;color:var(--amber);text-shadow:0 0 44px rgba(255,179,92,.35)}
.nowrap{white-space:nowrap}
.vs{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:34px}
.vs .card{display:flex;flex-direction:column;gap:12px}
.vs .card ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.vs .card li{display:flex;gap:10px;align-items:flex-start;color:var(--muted)}
.vs .card li::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;margin-top:9px;background:var(--dim)}
.vs .card.with li::before{background:var(--teal);box-shadow:0 0 12px rgba(32,217,169,.7)}
.vs .card.with{border-color:rgba(32,217,169,.35)}
/* 113-AE: "With OnMotion" rows carry an icon for what the row means instead of a dot;
   "Without" keeps its grey dots. One stroke weight, the teal of the card's border. */
.vs .card.with li::before{display:none}
.vs .ic{flex:none;width:20px;height:20px;margin-top:3px;fill:none;stroke:var(--teal);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 5px rgba(32,217,169,.45))}
html[data-theme="light"] .vs .ic{stroke:#0B8F6E;filter:none}
.tag{align-self:flex-start;padding:4px 10px;border-radius:999px;font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--line);color:var(--dim)}
.card.with .tag{color:var(--teal);border-color:rgba(32,217,169,.35)}

/* steps timeline */
.steps{position:relative;display:grid;grid-template-columns:repeat(7,1fr);gap:10px;margin-top:10px}
.steps::before{content:"";position:absolute;left:4%;right:4%;top:23px;height:2px;background:linear-gradient(90deg,var(--teal),var(--blue),var(--violet));opacity:.35}
.step{position:relative;padding-top:58px}
.step .dot{position:absolute;left:50%;top:14px;transform:translateX(-50%);width:20px;height:20px;border-radius:50%;background:var(--navy);border:2px solid var(--line-2);transition:background .5s,box-shadow .5s,border-color .5s}
.step.on .dot{background:var(--ring);border-color:transparent;box-shadow:0 0 22px rgba(32,217,169,.6)}
.step h3{font-size:.95rem;text-align:center}
.step p{text-align:center;color:var(--muted);font-size:.85rem;margin-top:6px}

/* ── benefits: the orbit. Six statements around the ring, no cards. ── */
.orbit{display:grid;grid-template-columns:1fr minmax(240px,320px) 1fr;gap:clamp(20px,4vw,56px);align-items:center;margin-top:10px}
.orbit .col{display:grid;gap:clamp(22px,4vh,44px)}
.orbit .col.left{text-align:right}
.orbit .core{position:relative;aspect-ratio:1;display:grid;place-items:center}
.orbit .core canvas{position:absolute;inset:0;width:100%;height:100%;will-change:transform}
.orbit .core canvas.spin{animation:spin2 60s linear infinite}
@keyframes spin2{to{transform:rotate(360deg)}}
.orbit .core .num{font:800 clamp(2rem,4.4vw,3.2rem)/1 var(--display);letter-spacing:-.04em;background:var(--ring);-webkit-background-clip:text;background-clip:text;color:transparent;text-align:center;position:relative}
.orbit .core .num small{display:block;font:600 .72rem var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--dim);-webkit-text-fill-color:var(--dim);margin-top:8px}
.ben{position:relative;padding:6px 0}
.ben h3{font-size:clamp(1.3rem,2.1vw,1.7rem);letter-spacing:-.02em;line-height:1.2;display:inline-block;padding:0 .04em .14em 0;margin-bottom:-.14em;background:linear-gradient(90deg,var(--text) 0 40%,var(--teal) 50%,var(--blue) 62%,var(--violet) 76%,var(--violet) 100%);background-size:300% 100%;background-position:0 0;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-position 1.6s var(--ease)}
.ben p{color:var(--muted);font-size:1rem;max-width:26rem;margin-top:8px}
.orbit .col.left .ben p{margin-left:auto}
.ben::after{content:"";position:absolute;bottom:-11px;left:0;width:100%;height:1px;background:linear-gradient(90deg,var(--line-2),transparent);transform:scaleX(0);transform-origin:left;transition:transform 1.2s var(--ease)}
.orbit .col.left .ben::after{background:linear-gradient(90deg,transparent,var(--line-2));transform-origin:right}
@media (hover:hover){.ben:hover h3{background-position:100% 0}.ben:hover::after{transform:scaleX(1)}}

/* feature split rows */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,70px);align-items:center;padding-top:clamp(40px,6vh,80px);padding-bottom:clamp(40px,6vh,80px)}
.split.flip .visual{order:-1}
.split h2{margin-bottom:14px}
.split ul.checks{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:12px}
.split ul.checks li{display:flex;gap:12px;color:var(--muted)}
.split ul.checks li::before{content:"✓";color:var(--teal);font-weight:700;flex:none}
.visual{position:relative;min-height:340px;display:grid;place-items:center}
.visual .phone{width:min(250px,80%);transform:rotateY(-8deg) rotateX(3deg)}
.visual .glow{position:absolute;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(59,123,255,.32),transparent 62%);z-index:-1}
.langs{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.langs .glass{padding:10px 14px;border-radius:12px;font-size:.9rem}
.langs b{display:block;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--teal)}

/* control panel mock */
.inbox{width:100%;border-radius:16px;overflow:hidden;font-size:.78rem}
.inbox .row{display:flex;gap:10px;align-items:center;padding:10px 12px;border-top:1px solid var(--line)}
.inbox .row:first-child{border-top:0;background:rgba(127,127,127,.06)}
.inbox .av{width:28px;height:28px;border-radius:50%;background:var(--glass-2);border:1px solid var(--line);flex:none}
.inbox .row b{display:block}.inbox .row small{color:var(--dim)}
.inbox .row .pill{margin-left:auto}
.inbox .takeover{margin:12px;padding:12px;border-radius:12px;background:rgba(32,217,169,.08);border:1px solid rgba(32,217,169,.3);display:flex;justify-content:space-between;align-items:center;gap:10px}

/* go-live */
.golive{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.golive .card{position:relative;padding-top:30px;overflow:visible}
.golive .card::after{display:none}
.golive .n{position:absolute;top:-16px;left:22px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font:800 .9rem var(--display);background:var(--navy-2);border:1px solid var(--line-2)}
.golive .card.done .n{background:var(--ring);color:#04101a;border-color:transparent}

/* form: three quiet steps under one bar */
.demo .glass{padding:clamp(24px,4vw,44px);max-width:760px;margin:0 auto}
.demo form{margin-top:18px}
.stepper{margin:0 0 22px}
.stepper .bar{height:8px;border-radius:99px;background:var(--glass-2);overflow:hidden;border:1px solid var(--line)}
.stepper .bar i{display:block;height:100%;width:20%;background:var(--ring);border-radius:99px;transition:width .9s var(--ease)}
.stepper .stepline{display:block;margin-top:8px;color:var(--dim);font-size:.85rem}
.demo fieldset{border:0;margin:0;padding:0;min-width:0}
.demo .step{display:grid;gap:14px;opacity:0;transform:translateX(24px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.demo .step.on{opacity:1;transform:none}
.demo .step[hidden]{display:none}
.demo .step,.demo .greet,.demo .note{text-align:left}
.demo .step.leaving{opacity:0;transform:translateX(-24px)}
.demo label{display:grid;gap:6px;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);font-weight:600}
.demo label .opt{text-transform:none;letter-spacing:0;font-weight:500;color:var(--dim)}
.demo input,.demo textarea{width:100%;padding:15px 16px;border-radius:14px;border:1px solid var(--line);background:var(--navy);color:var(--text);font:400 1.05rem var(--body);transition:border-color .3s,box-shadow .3s}
.demo input:focus,.demo textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 4px rgba(32,217,169,.15)}
.demo input.bad{border-color:var(--amber);box-shadow:0 0 0 4px rgba(255,179,92,.15)}
.demo textarea{min-height:120px;resize:vertical}
.demo .greet{font:700 1.15rem var(--display);letter-spacing:-.01em;color:var(--text)}
.demo .actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:6px}
.demo .actions.final{flex-direction:column;align-items:stretch}
.demo .actions.final .btn.ghost{align-self:flex-start}
.demo .btn.big{width:100%;justify-content:center;padding:20px 28px;font-size:1.25rem;border-radius:18px}
.demo .note{color:var(--dim);font-size:.85rem}
.demo .msg-err{padding:14px 16px;border-radius:12px;display:none}
.demo .msg-err{background:rgba(255,179,92,.1);border:1px solid rgba(255,179,92,.35)}
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}

/* try it */
.preview-tag{display:inline-block;padding:2px 9px;border-radius:999px;font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;border:1px solid rgba(255,179,92,.4);color:var(--amber);margin:0 6px;vertical-align:middle}
.try-grid{display:grid;grid-template-columns:320px 1fr;gap:clamp(20px,4vw,48px);align-items:start}
.try-phone .phone{width:100%;transform:none;aspect-ratio:9/18}
#try .wa .thread{scroll-behavior:smooth}
#try .msg.in{white-space:pre-wrap}
.chips{display:flex;gap:6px;padding:6px 10px;overflow-x:auto;background:#111b21;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;border:1px solid rgba(255,255,255,.14);background:#1F2C34;color:#e9edef;border-radius:999px;padding:6px 10px;font:500 .68rem var(--body);cursor:pointer;transition:background .2s}
@media (hover:hover){.chip:hover{background:#2A3942}}
#try .wa .bar input{flex:1;height:30px;border-radius:15px;background:#2A3942;border:0;color:#e9edef;padding:0 12px;font:400 .78rem var(--body);min-width:0}
#try .wa .bar input:focus{outline:1px solid var(--teal)}
#try .send-btn{border:0;cursor:pointer;padding:0}
#try .send-btn:disabled{opacity:.5}
.try-side{display:grid;gap:14px}
.crm-live{padding:0;overflow:hidden}
.crm-live .bar{display:flex;gap:6px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line);color:var(--dim);font-size:.75rem}
.crm-live .bar i{width:8px;height:8px;border-radius:50%;background:var(--line-2)}
.crm-live dl{margin:0;display:grid;grid-template-columns:repeat(3,1fr)}
.crm-live dl>div{padding:12px 14px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.crm-live dl>div:nth-child(3n){border-right:0}
.crm-live dt{font:600 .62rem var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-bottom:4px}
.crm-live dd{margin:0;font-weight:600;color:var(--dim);transition:color .4s,text-shadow .4s}
.crm-live dd.filled{color:var(--text);text-shadow:0 0 18px rgba(32,217,169,.45)}
.agent-alert{display:flex;gap:12px;align-items:center;padding:14px 16px;opacity:.45;transform:translateY(6px);transition:opacity .6s var(--ease),transform .6s var(--ease),border-color .6s}
.agent-alert.show{opacity:1;transform:none;border-color:rgba(32,217,169,.45);box-shadow:0 20px 60px -20px rgba(32,217,169,.35)}
.agent-alert .av{width:36px;height:36px;border-radius:50%;background:var(--ring);flex:none}
.agent-alert small{display:block;color:var(--dim);font-size:.72rem}
.agent-alert b{display:block}
.agent-alert p{color:var(--muted);font-size:.9rem}
.try-status{color:var(--muted);font-size:.95rem;min-height:1.4em}
.try-actions{display:flex;gap:10px;flex-wrap:wrap}

/* footer */
footer{padding:48px 0 40px;border-top:1px solid var(--line);margin-top:40px}
footer .wrap{display:grid;grid-template-columns:auto 1fr auto;gap:20px 32px;align-items:center;color:var(--dim);font-size:.9rem}
footer .lockup img{height:64px;width:auto}
footer a{color:var(--muted);text-decoration:none;margin-right:16px}
@media (hover:hover){footer a:hover{color:var(--text)}}
/* 113-AE (Dennis): the four page links are one row that never breaks, "Data deletion"
   included; the email is its own row under them. The row cannot wrap, so the grid
   gives its column at least the row's width and the copyright makes room instead. */
footer .foot-links{display:grid;gap:6px;justify-items:start}
footer .foot-row{white-space:nowrap}
footer .foot-row a:last-child{margin-right:0}
@media (max-width:1100px){footer .wrap{grid-template-columns:auto 1fr}footer .wrap>span:last-child{grid-column:1/-1}}

/* legal */
.legal-page{padding:40px 0 60px}
.legal-page .wrap{max-width:880px}
.legal-doc{background:var(--glass-solid);border:1px solid var(--line);border-radius:var(--r);padding:clamp(28px,4vw,52px)}
.legal-doc h1{font-size:2.2rem;margin-bottom:.4rem}
.legal-doc h2{font-size:1.4rem;margin:2.2rem 0 .7rem}
.legal-doc h3{font-size:1.05rem;margin:1.4rem 0 .4rem}
.legal-doc p{margin:0 0 1rem;color:var(--muted)}
.legal-doc a{color:var(--teal)}
html[data-theme="light"] .legal-doc a{color:#0B8F6E}
.legal-doc .meta{color:var(--dim);font-size:.9rem;margin-bottom:2rem}
.legal-doc ul,.legal-doc ol{padding-left:1.2rem;margin:0 0 1rem;color:var(--muted)}
.legal-doc li{margin:.35rem 0}
.legal-doc table{border-collapse:collapse;width:100%;font-size:.93rem;margin:.5rem 0 1.25rem;color:var(--muted)}
.legal-doc th,.legal-doc td{border:1px solid var(--line);padding:.5rem .6rem;text-align:left;vertical-align:top}
.legal-doc th{background:rgba(127,127,127,.08);color:var(--text)}
.legal-doc .note{background:rgba(59,123,255,.1);border-left:3px solid var(--blue);padding:.85rem 1rem;border-radius:6px;font-size:.93rem}
.legal-doc code{background:rgba(127,127,127,.15);padding:.05rem .3rem;border-radius:4px}
.legal-doc strong{font-weight:650;color:var(--text)}

/* reveal */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}.reveal.d5{transition-delay:.4s}.reveal.d6{transition-delay:.48s}

/* responsive */
@media (max-width:980px){
  .hero .wrap{grid-template-columns:1fr}
  .stage{--pw:240px;--dx:142px;--top:150px;margin-top:10px}
  .layer.crm{left:4%;width:92%}
  .grid.c3{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:repeat(4,1fr)}.steps::before{display:none}
  .split,.split.flip{grid-template-columns:1fr}.split.flip .visual{order:0}
  .visual{min-height:0;padding:10px 0}
  .visual .glow{width:60%}
  .golive{grid-template-columns:1fr}
  .orbit{grid-template-columns:1fr;gap:28px}
  .orbit .col.left{text-align:left}.orbit .col.left .ben p{margin-left:0}.orbit .col.left .ben::after{transform-origin:left;background:linear-gradient(90deg,var(--line-2),transparent)}
  /* 113-AE: the 24/7 ring was 87px on every phone and tablet. A grid item with auto
     margins shrinks to its content, and the ring's content is only the words (the
     canvas is absolute), so the ring collapsed to the width of "ON YOUR NUMBER" and
     the words ran over its dots. width:100% gives it back its size; the words sit
     inside the innermost ring of dots. */
  .orbit .core{width:100%;max-width:320px;margin:8px auto}
  .orbit .core .num{font-size:2.6rem}
  .orbit .core .num small{font-size:.66rem;letter-spacing:.16em}
  .try-grid{grid-template-columns:300px 1fr}
  .ring-bg{width:min(520px,110%);left:22%;top:50%}
}
@media (max-width:640px){
  .nav nav{display:none}.nav nav.open{display:flex;position:absolute;left:var(--gutter);right:var(--gutter);top:64px;flex-direction:column;align-items:stretch;padding:10px;background:var(--navy);border:1px solid var(--line);border-radius:16px;z-index:60}
  .menu-btn{display:block}
  .brand img{height:32px}
  .grid.c2,.grid.c3,.vs{grid-template-columns:1fr}
  .demo .actions .btn.primary:not(.big){width:100%;justify-content:center}
  .demo input,.demo textarea{font-size:16px}
  .steps{grid-template-columns:1fr 1fr}
  /* the pair fills the column: the front phone on the left edge, the one behind
     ending on the right edge (--sw is the column's width) */
  .stage{--sw:calc(100vw - 2 * var(--gutter));--pw:min(214px,calc(var(--sw) * .62));--dx:calc(var(--sw) - var(--pw));--dy:28px;--top:14px}
  .layer.crm{display:none}
  .phone,.visual .phone{transform:none}
  .crm{transform:none}
  .clock{font-size:2.4rem}
  .try-grid{grid-template-columns:1fr}.try-phone{width:100%;max-width:340px;margin:0 auto}.crm-live dl{grid-template-columns:1fr 1fr}.crm-live dl>div:nth-child(3n){border-right:1px solid var(--line)}.crm-live dl>div:nth-child(2n){border-right:0}
  footer .wrap{grid-template-columns:1fr}
  footer .lockup img{height:52px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}.msg{display:block;opacity:1;transform:none}.layer.crm{transform:none!important}
  .wa .wait-dots{display:none}
}

/* only things you can press get the hand */
a.btn,button.btn,.btn[href],.chip,.theme-btn,.menu-btn,.lang-pills button{cursor:pointer}
.wa .thread::-webkit-scrollbar{display:none}
.wa .thread>.spacer{margin-top:auto;flex:none}

/* language pills above a phone */
.lang-pills{display:flex;gap:6px;justify-content:center;margin:0 auto 12px;flex-wrap:wrap}
.lang-pills button{border:1px solid var(--line);background:var(--glass-solid);color:var(--muted);border-radius:999px;padding:6px 12px;font:600 .76rem var(--body);letter-spacing:.06em;transition:color .3s,border-color .3s,background .3s,transform .3s}
.lang-pills button.on{color:var(--on-primary);background:var(--btn);border-color:transparent}
@media (hover:hover){.lang-pills button:not(.on):hover{color:var(--text);border-color:var(--line-2);transform:translateY(-1px)}}
.visual{grid-template-rows:auto auto}
.visual .phone-wrap{display:grid;justify-items:center;width:100%}
.visual .phone-wrap .phone{width:min(250px,80%)}
.msg.fade{opacity:0;transform:translateY(-6px) scale(.985)}
/* mobile alignment pass */
@media (max-width:640px){
  .head,.lede{text-align:left}
  .step h3,.step p{text-align:left}.step{padding-top:0;padding-left:34px}.step .dot{left:0;top:4px;transform:none}
  .steps{grid-template-columns:1fr;gap:18px}
  .vs .card h3{font-size:1.1rem}
  .golive .n{left:18px}
  .ben h3{font-size:1.3rem}
  .ring-bg{width:min(440px,115%);left:50%;top:74%}
  .orbit .core{max-width:340px}
}

.layer.lead{display:flex;flex-direction:column}
.layer.lead .lang-pills{order:2;margin:14px auto 0}

/* the in-phone flow: what "View photos & book" opens */
.flow{position:absolute;inset:0;z-index:6;background:#0B141A;color:#e9edef;display:flex;flex-direction:column;transform:translateY(100%);transition:transform .5s var(--ease);font-size:.72rem}
.flow.open{transform:none}
.flow .fhead{display:flex;align-items:center;justify-content:space-between;padding:40px 12px 10px;background:#1F2C34;border-bottom:1px solid rgba(255,255,255,.06)}
.flow .fhead b{font-size:.8rem;color:#fff}
.flow .fhead button{background:none;border:0;color:#8696a0;font-size:1.1rem;line-height:1;cursor:pointer;padding:4px}
/* grid-auto-rows:max-content (113-AE, Dennis: "I just see the three blue dots"): the
   sheet is a fixed-height grid that scrolls. When its content is taller than the
   sheet, an auto row whose item clips its overflow (the photo strip, .galwrap) is
   sized to that item's MINIMUM, which for a clipping box is zero - so on the hero's
   smaller phones the photo row collapsed to 0px and only the dots showed (measured
   at 375px: strip 186x0; on desktop it was 5px short, 113 of 118). Every row now
   keeps its full height and the sheet scrolls instead. */
.flow .fbody{flex:1;overflow-y:auto;scrollbar-width:none;padding:10px 10px 14px;display:grid;gap:10px;align-content:start;grid-auto-rows:max-content}
.flow .fbody::-webkit-scrollbar{display:none}
.flow .galwrap{position:relative;overflow:hidden;border-radius:10px;touch-action:pan-y}
.flow .gal{display:flex;will-change:transform;transition:transform .55s cubic-bezier(.22,.61,.36,1)}
.flow .gal.dragging{transition:none}
.flow .garrow{position:absolute;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:50%;border:0;background:rgba(0,0,0,.55);color:#fff;font-size:1.1rem;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0 0 2px}
.flow .garrow.prev{left:6px}.flow .garrow.next{right:6px}
@media (hover:hover){.flow .garrow:hover{background:rgba(0,0,0,.8)}}
.flow .gal img{flex:none;width:100%;height:118px;object-fit:cover;display:block;user-select:none;-webkit-user-drag:none}
.flow .dots{display:flex;gap:4px;justify-content:center;margin-top:-4px}
.flow .dots i{width:5px;height:5px;border-radius:50%;background:#3b4a54}.flow .dots i.on{background:#53BDEB}
.flow h4{margin:0;font:700 .84rem var(--body);color:#fff}
.flow .facts{color:#aebac1;line-height:1.5}
.flow .sect{font:600 .62rem var(--body);letter-spacing:.1em;text-transform:uppercase;color:#8696a0;margin-top:4px}
.flow .days,.flow .slots{display:flex;flex-wrap:wrap;gap:6px}
.flow .days button,.flow .slots button{border:1px solid rgba(255,255,255,.16);background:#1F2C34;color:#e9edef;border-radius:999px;padding:6px 10px;font:500 .7rem var(--body);cursor:pointer}
.flow .days button.on,.flow .slots button.on{background:#00A884;border-color:#00A884;color:#fff}
.flow .ffoot{padding:10px 10px 16px;background:#1F2C34;border-top:1px solid rgba(255,255,255,.06)}
.flow .ffoot button{width:100%;border:0;border-radius:10px;padding:11px;background:#00A884;color:#fff;font:600 .78rem var(--body);cursor:pointer}
.flow .ffoot button:disabled{opacity:.45;cursor:default}

/* the CRM mock-up: rows fill green from the left, a click opens the record */
.crm-live-mock{position:relative;overflow:hidden;transition:min-height .45s var(--ease)}
.crm-live-mock.showing{min-height:460px}
.crm-live-mock .bar .hint{color:var(--dim);font-weight:500}
.crm-live-mock tbody tr{cursor:pointer;outline:none;background-image:linear-gradient(90deg,rgba(32,217,169,.24),rgba(32,217,169,.08));background-repeat:no-repeat;background-size:0% 100%;transition:background-size .55s var(--ease)}
.crm-live-mock tbody tr:hover,.crm-live-mock tbody tr:focus-visible{background-size:100% 100%}
.crm-live-mock tr.hi td{background:transparent}
.crm-live-mock td:last-child{white-space:normal;min-width:120px}
.crm-live-mock{display:flex;flex-direction:column;height:100%}
.crm-live-mock table{flex:none}
.crm-live-mock .foot{margin-top:auto;padding:12px 14px;border-top:1px solid var(--line);color:var(--dim);font-size:.72rem;display:flex;justify-content:space-between;gap:10px}
#crm .split{align-items:stretch;grid-template-columns:.86fr 1.14fr}
#crm .visual{align-self:stretch}
#crm .visual>.crm-live-mock{flex:1;height:auto}
#crm .visual{min-height:0;display:flex;align-items:stretch}
#crm .crm-live-mock td{white-space:normal;vertical-align:middle}
#crm .crm-live-mock .pill{white-space:nowrap}
#crm .crm-live-mock td,#crm .crm-live-mock th{padding:11px 9px}
#crm .crm-live-mock{font-size:.78rem}
.record{position:absolute;inset:0;z-index:5;background:var(--navy);display:flex;flex-direction:column;transform:translateY(12px);opacity:0;pointer-events:none;transition:opacity .4s var(--ease),transform .4s var(--ease);font-size:.8rem}
.record.open{opacity:1;transform:none;pointer-events:auto}
.record .rhead{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line)}
.record .rhead b{font:700 1rem var(--display);letter-spacing:-.01em}
.record .rhead .pill{margin-left:auto}
.record .rhead button{background:none;border:0;color:var(--dim);font-size:1.1rem;cursor:pointer;padding:2px 6px}
.record .rbody{flex:1;overflow-y:auto;scrollbar-width:none;padding:12px 14px;display:grid;gap:12px;align-content:start}
.record .rbody::-webkit-scrollbar{display:none}
.record .kv{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.record .kv div{background:rgba(127,127,127,.08);border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.record .kv dt{font:600 .58rem var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin:0 0 3px}
.record .kv dd{margin:0;font-weight:600;color:var(--text)}
.record .sect{font:600 .62rem var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.record .profile{display:flex;flex-wrap:wrap;gap:6px}
.record .profile span{border:1px solid var(--line);border-radius:999px;padding:4px 9px;color:var(--muted);font-size:.74rem}
.record .matches{display:grid;gap:8px}
.record .match{display:grid;grid-template-columns:54px 1fr auto;gap:10px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:8px;background:rgba(127,127,127,.06)}
.record .match img{width:54px;height:40px;object-fit:cover;border-radius:8px}
.record .match b{display:block;font-size:.8rem}
.record .match small{color:var(--dim);display:block}
.record .match .when{font:500 .66rem var(--mono);color:var(--teal);text-align:right;white-space:nowrap}
.record .rfoot{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 14px;border-top:1px solid var(--line)}
.record .rfoot small{color:var(--dim)}
@media (max-width:640px){.record .kv{grid-template-columns:1fr 1fr}.record .match{grid-template-columns:44px 1fr}.record .match .when{grid-column:2;text-align:left}}

/* 113-W: the Try-it phone was ZERO wide on every phone. `.try-phone` is a grid
   item with auto margins, which makes it shrink to fit its content; its content
   is `.phone`, sized at 100% of `.try-phone`. Each waited on the other and both
   resolved to 0x0 - the whole live demo was a dot on mobile. The explicit
   width:100% above breaks the circle. Found from Dennis's own phone screenshot,
   2026-09-23; a desktop check could never have shown it. */

/* ══ 113-AG ═══════════════════════════════════════════════════════════════════
   The language switcher, the Marevo Estates logo, the Getting-started
   cards, the Try-it phone on a phone, the CRM section on a phone, and what
   Hebrew (right to left) needs from this sheet. */

/* A remembered language: the page is hidden for the moment its words load
   (i18n.js shows it again, and gives up waiting after three seconds). A switch
   fades the content out and back so it changes language rather than flickers. */
html.i18n-wait body{opacity:0}
main,footer,.nav nav{transition:opacity .17s var(--ease)}
html.i18n-swap main,html.i18n-swap footer,html.i18n-swap .nav nav{opacity:0}

/* ── the switcher: a globe in the header, and a row in the phone menu ── */
.lang-menu{position:relative}
.lang-btn{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 11px 0 10px;border-radius:12px;border:1px solid var(--line);background:var(--glass-solid);color:var(--text);font:600 .78rem/1 var(--body);letter-spacing:.06em;cursor:pointer;transition:border-color .3s}
.lang-btn svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s}
@media (hover:hover){.lang-btn:hover{border-color:var(--line-2)}.lang-btn:hover svg{stroke:var(--teal)}}
.lang-menu.open .lang-btn{border-color:rgba(32,217,169,.5)}
.lang-list{position:absolute;top:calc(100% + 8px);inset-inline-end:0;z-index:70;min-width:196px;padding:6px;border-radius:16px;border:1px solid var(--line-2);background:var(--navy);box-shadow:0 24px 60px -20px rgba(0,0,0,.7);display:grid;gap:2px;opacity:0;transform:translate3d(0,-6px,0) scale(.98);transform-origin:top right;transition:opacity .18s var(--ease),transform .18s var(--ease)}
html[dir="rtl"] .lang-list{transform-origin:top left}
html[data-theme="light"] .lang-list{background:#fff;box-shadow:0 24px 60px -24px rgba(14,26,51,.35)}
.lang-list[hidden]{display:none}
.lang-menu.open .lang-list{opacity:1;transform:none}
.lang-list button{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border:0;border-radius:11px;background:transparent;color:var(--text);font:500 .95rem var(--body);text-align:start;cursor:pointer}
.lang-list button b{width:30px;flex:none;font:600 .72rem var(--mono);letter-spacing:.06em;color:var(--dim)}
.lang-list button span{flex:1}
.lang-list button[aria-checked="true"]{background:rgba(32,217,169,.1)}
.lang-list button[aria-checked="true"] b{color:var(--teal)}
.lang-list button[aria-checked="true"]::after{content:"";width:16px;height:16px;flex:none;background:var(--teal);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.4l2.9 2.9 6-6.6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.4l2.9 2.9 6-6.6'/%3E%3C/svg%3E") center/contain no-repeat}
html[data-theme="light"] .lang-list button[aria-checked="true"] b{color:#0B8F6E}
html[data-theme="light"] .lang-list button[aria-checked="true"]::after{background:#0B8F6E}
@media (hover:hover){.lang-list button:hover{background:var(--glass-2)}}
.lang-list button:focus-visible{outline:2px solid var(--teal);outline-offset:-2px}
.nav-langs{display:none}
/* The links fold into the menu button whenever they do not fit on one line
   (site.js measures it and sets .fold), in every language, at every width. With
   the globe beside the theme button, Greek at 768px broke "Κλείστε ένα demo" onto
   three lines, and Russian at 1024px broke "Как это работает" onto two. Nothing in
   the row may wrap, so "does not fit" is simply "wider than the bar". A folded
   menu opens as a panel under the button; on a phone it spans the width. */
.nav nav a{white-space:nowrap}
/* The logo never gives way: an image with max-width:100% has no minimum width,
   so in a tight bar it was the logo that shrank (to nothing, in Greek at 768px)
   instead of the bar being measured as full. */
.nav .brand{flex:none}
.nav.fold nav{display:none}
.nav.fold .menu-btn{display:block}
.nav nav.open{display:flex;position:absolute;inset-inline-start:auto;inset-inline-end:var(--gutter);width:min(340px,calc(100% - 2 * var(--gutter)));top:64px;flex-direction:column;align-items:stretch;padding:10px;background:var(--navy);border:1px solid var(--line);border-radius:16px;z-index:60;box-shadow:0 24px 60px -24px rgba(0,0,0,.6)}
.nav nav.open .nav-langs{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px;padding-top:10px;border-top:1px solid var(--line)}
.nav-langs button{padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:transparent;color:var(--muted);font:500 .92rem var(--body);cursor:pointer}
.nav-langs button[aria-pressed="true"]{color:var(--on-primary);background:var(--btn);border-color:transparent;font-weight:600}
@media (max-width:640px){
  .nav nav.open{inset-inline-start:var(--gutter);width:auto}
  .lang-btn{padding:0 9px;gap:5px}
}
/* The footer's page links are one unbroken row (113-AE), which in Russian is wider
   than a phone ("Конфиденциальность", "Удаление данных"): the last link was cut off
   at the screen's edge. On a phone the row may wrap, and only when it must. */
@media (max-width:640px){
  footer .foot-row{white-space:normal;display:flex;flex-wrap:wrap;gap:6px 16px}
  footer .foot-row a,html[dir="rtl"] footer .foot-row a{margin:0}
}
/* the smallest phones: the globe alone, so the logo and three buttons still fit */
@media (max-width:360px){.lang-btn .lang-code{display:none}.lang-btn{padding:0 10px}}

/* ── Marevo Estates: one logo wherever the demo agency appears ── */
.wa .avatar.bh,#how .sn-notes .sn-note>i,.bh-mark{background:#06304c url("/assets/blue-harbour-96.webp") center/cover no-repeat;background-image:image-set(url("/assets/blue-harbour-96.webp") 1x,url("/assets/blue-harbour-192.webp") 2x)}
.wa .avatar.bh{box-shadow:0 0 0 1px rgba(255,255,255,.14)}
.bh-mark{display:inline-block;width:16px;height:16px;border-radius:50%;margin-inline-end:6px;vertical-align:-3px;flex:none}
#how .sn-notes .sn-note>i{border-radius:50%}

/* ── Try it, on a phone: the phone is about 80% of the screen and centred, so a
      thumb beside it still scrolls the page (Dennis, 2026-09-24) ── */
@media (max-width:640px){
  .try-phone{width:80%;width:min(80vw,340px);max-width:340px;margin:0 auto}
  #try .wa .bar{gap:6px;padding:8px 8px 14px}
  #try .wa .bar input{padding:0 10px}
}

/* ── the CRM section on a phone (Dennis, 2026-09-24: "only on the mobile looks
      awful"). `#crm .split` set two columns with an id, which outranked the
      one-column rule every other split takes below 981px, so on a phone the copy
      was squeezed into a strip beside a clipped table. Now it stacks, and on a
      phone each client is a small card: name and stage, then what they want, then
      what happens next. A tap still opens the record. ── */
@media (max-width:980px){#crm .split{grid-template-columns:1fr;align-items:start}}
.crm-live-mock .hint .h-touch{display:none}
@media (hover:none){.crm-live-mock .hint .h-fine{display:none}.crm-live-mock .hint .h-touch{display:inline}}
@media (max-width:640px){
  #crm .crm-live-mock{font-size:.8rem;min-width:0}
  #crm .crm-live-mock thead{display:none}
  #crm .crm-live-mock table,#crm .crm-live-mock tbody{display:block;width:100%}
  #crm .crm-live-mock tbody tr{display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:center;column-gap:8px;row-gap:5px;padding:13px 14px;border-top:1px solid var(--line)}
  #crm .crm-live-mock tbody tr:first-child{border-top:0}
  #crm .crm-live-mock td{display:block;padding:0;border:0;min-width:0;white-space:nowrap}
  /* The line under the name sets the columns: the name spans the first two and the
     stage sits in the last, so neither pushes a gap into "Buy · €350,000 · Limassol"
     and a long stage ("Просмотр назначен") never narrows the area under it. */
  #crm .crm-live-mock td:nth-child(1){grid-column:1/3;grid-row:1;font:700 .98rem var(--display);letter-spacing:-.01em;color:var(--text)}
  #crm .crm-live-mock td:nth-child(5){grid-column:3;grid-row:1;justify-self:end}
  #crm .crm-live-mock td:nth-child(2),#crm .crm-live-mock td:nth-child(3),#crm .crm-live-mock td:nth-child(4){grid-row:2;color:var(--muted);font-size:.8rem}
  #crm .crm-live-mock td:nth-child(2){grid-column:1}
  #crm .crm-live-mock td:nth-child(3){grid-column:2}
  #crm .crm-live-mock td:nth-child(4){grid-column:3;overflow:hidden;text-overflow:ellipsis}
  #crm .crm-live-mock td:nth-child(3)::before,#crm .crm-live-mock td:nth-child(4)::before{content:"·";margin-inline-end:8px;color:var(--dim)}
  #crm .crm-live-mock td:nth-child(6){grid-column:1/-1;grid-row:3;display:flex;align-items:center;gap:7px;color:var(--dim);font-size:.76rem;white-space:normal}
  #crm .crm-live-mock td:nth-child(6)::before{content:"";width:13px;height:13px;flex:none;background:var(--teal);-webkit-mask: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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;mask: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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat}
  html[dir="rtl"] #crm .crm-live-mock td:nth-child(6)::before{transform:scaleX(-1)}
  #crm .crm-live-mock td:last-child{min-width:0}
  #crm .crm-live-mock .foot{flex-wrap:wrap}
  #crm .crm-live-mock.showing{min-height:520px}
}

/* ── Hebrew: the page reads right to left. Rules above that name a side are
      mirrored here; the phones and chats keep their own frame, like a WhatsApp
      screenshot, and each bubble takes its own text's direction. ── */
html[dir="rtl"] .nav nav a:not(.btn)::after{transform-origin:right}
html[dir="rtl"] .crm th{text-align:right}
html[dir="rtl"] .orbit .col.left{text-align:left}
html[dir="rtl"] .orbit .col.left .ben p{margin-left:0;margin-right:auto}
html[dir="rtl"] .ben::after{background:linear-gradient(270deg,var(--line-2),transparent);transform-origin:right}
html[dir="rtl"] .orbit .col.left .ben::after{background:linear-gradient(270deg,transparent,var(--line-2));transform-origin:left}
html[dir="rtl"] .demo .step,html[dir="rtl"] .demo .greet,html[dir="rtl"] .demo .note{text-align:right}
html[dir="rtl"] .demo .step{transform:translateX(-24px)}
html[dir="rtl"] .demo .step.on{transform:none}
html[dir="rtl"] .demo .step.leaving{transform:translateX(24px)}
html[dir="rtl"] footer a{margin-right:0;margin-left:16px}
html[dir="rtl"] footer .foot-row a:last-child{margin-left:0}
html[dir="rtl"] .inbox .row .pill,html[dir="rtl"] .record .rhead .pill{margin-left:0;margin-right:auto}
html[dir="rtl"] .record .match .when{text-align:left}
html[dir="rtl"] .crm-live dl>div{border-right:0;border-left:1px solid var(--line)}
html[dir="rtl"] .crm-live dl>div:nth-child(3n),html[dir="rtl"] #try .crm-live dl>div.wide{border-left:0}
html[dir="rtl"] .swap-btn svg{transform:scaleX(-1)}
/* the company line is one English phrase: kept in its own order, not reshuffled by the page's direction */
html[dir="rtl"] footer .wrap>span:last-child{direction:ltr;unicode-bidi:isolate;text-align:right}
@media (max-width:980px){html[dir="rtl"] .orbit .col.left{text-align:right}html[dir="rtl"] .orbit .col.left .ben p{margin-right:0}}
@media (max-width:640px){
  html[dir="rtl"] .head,html[dir="rtl"] .lede{text-align:right}
  html[dir="rtl"] .crm-live dl>div:nth-child(3n){border-left:1px solid var(--line)}
  html[dir="rtl"] .crm-live dl>div:nth-child(2n){border-left:0}
  html[dir="rtl"] .record .match .when{text-align:right}
}
/* The phones are pictures of a phone: they keep their own left-to-right frame. */
html[dir="rtl"] .phone,html[dir="rtl"] .lang-pills{direction:ltr}
/* The legal text is English and stays left to right; the note above it is the reader's. */
.legal-doc .legal-lang{margin:0 0 1.6rem;padding:.8rem 1rem;border-radius:10px;border:1px solid rgba(32,217,169,.35);background:rgba(32,217,169,.08);color:var(--text);font-size:.95rem}

/* 113-X: a unique WhatsApp wallpaper per phone - generated by walls/gen.py.
   Dennis, 2026-09-23: 'a nice, repetitive background, but every background is
   supposed to be a bit different with the color palette of our website... not
   so dark... only the background on WhatsApp on the devices.' ONLY the chat
   wallpaper changes: bubbles, text, header and input are untouched. Every base
   is measured lighter than the old #0B141A AND kept clearly distinct from both
   bubble colours, because no text sits on the wallpaper itself - the bubbles
   carry all of it, so they must still read as cards on top of it. */
.wa[data-wall="1"]{background:#586daf}
.wa[data-wall="1"] .thread{background-color:#586daf;background-image:radial-gradient(120% 70% at 20% 15%,rgba(59,123,255,.22),transparent 60%),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2296%22 height=%2296%22 viewBox=%220 0 96 96%22%3E%3Cg fill=%22none%22 stroke=%22%23aaf1de%22 color=%22%23aaf1de%22 stroke-width=%221.4%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 opacity=%220.34%22%3E%3Cg transform=%22translate(8 8) rotate(-8 12 12) scale(1)%22%3E%3Cpath d=%22M3 11 12 4l9 7v9H3z%22/%3E%3Cpath d=%22M10 20v-5h4v5%22/%3E%3C/g%3E%3Cg transform=%22translate(56 20) rotate(20 12 12) scale(0.9)%22%3E%3Ccircle cx=%227%22 cy=%2212%22 r=%224%22/%3E%3Cpath d=%22M11 12h10M17 12v3M20 12v2%22/%3E%3C/g%3E%3Cg transform=%22translate(28 58) rotate(0 12 12) scale(0.9)%22%3E%3Cpath d=%22M12 21s-6-5.5-6-10a6 6 0 0 1 12 0c0 4.5-6 10-6 10z%22/%3E%3Ccircle cx=%2212%22 cy=%2211%22 r=%222%22/%3E%3C/g%3E%3Cg transform=%22translate(70 66) rotate(0 12 12) scale(0.6)%22%3E%3Cpath d=%22M12 3v6M12 15v6M3 12h6M15 12h6%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");background-size:auto,96px 96px;background-repeat:no-repeat,repeat}
.wa[data-wall="2"]{background:#46758a}
.wa[data-wall="2"] .thread{background-color:#46758a;background-image:radial-gradient(120% 70% at 80% 20%,rgba(32,217,169,.22),transparent 60%),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2288%22 height=%2288%22 viewBox=%220 0 88 88%22%3E%3Cg fill=%22none%22 stroke=%22%23aaf1de%22 color=%22%23aaf1de%22 stroke-width=%221.4%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 opacity=%220.3%22%3E%3Cg transform=%22translate(6 8) rotate(-6 12 12) scale(1)%22%3E%3Cpath d=%22M4 5h16v11H9l-5 4z%22/%3E%3C/g%3E%3Cg transform=%22translate(52 14) rotate(0 12 12) scale(0.85)%22%3E%3Cpath d=%22M3 13l4 4 6-8M11 17l6-8%22/%3E%3C/g%3E%3Cg transform=%22translate(40 52) rotate(10 12 12) scale(0.8)%22%3E%3Cpath d=%22M4 5h16v11H9l-5 4z%22/%3E%3C/g%3E%3Cg transform=%22translate(8 60) rotate(0 12 12) scale(0.55)%22%3E%3Cpath d=%22M12 3v6M12 15v6M3 12h6M15 12h6%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");background-size:auto,88px 88px;background-repeat:no-repeat,repeat}
.wa[data-wall="3"]{background:#6e67ac}
.wa[data-wall="3"] .thread{background-color:#6e67ac;background-image:radial-gradient(120% 70% at 50% 0%,rgba(138,92,255,.22),transparent 60%),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2280%22 height=%2280%22 viewBox=%220 0 80 80%22%3E%3Cg fill=%22none%22 stroke=%22%23d3c1ff%22 color=%22%23d3c1ff%22 stroke-width=%221.4%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 opacity=%220.32%22%3E%3Cg transform=%22translate(8 8) rotate(0 12 12) scale(0.9)%22%3E%3Cpath d=%22M12 3v6M12 15v6M3 12h6M15 12h6%22/%3E%3C/g%3E%3Cg transform=%22translate(46 10) rotate(0 12 12) scale(0.8)%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%228%22 stroke-dasharray=%222 3%22/%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%223%22/%3E%3C/g%3E%3Cg transform=%22translate(30 46) rotate(45 12 12) scale(0.7)%22%3E%3Cpath d=%22M12 3v6M12 15v6M3 12h6M15 12h6%22/%3E%3C/g%3E%3Cg transform=%22translate(58 52) rotate(0 12 12) scale(0.6)%22%3E%3Cpath d=%22M12 3l7 9-7 9-7-9z%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");background-size:auto,80px 80px;background-repeat:no-repeat,repeat}
.wa[data-wall="4"]{background:#3b7694}
.wa[data-wall="4"] .thread{background-color:#3b7694;background-image:radial-gradient(120% 70% at 15% 85%,rgba(32,217,169,.22),transparent 60%),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2292%22 height=%2292%22 viewBox=%220 0 92 92%22%3E%3Cg fill=%22none%22 stroke=%22%23b5cdff%22 color=%22%23b5cdff%22 stroke-width=%221.4%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 opacity=%220.3%22%3E%3Cg transform=%22translate(10 10) rotate(-10 12 12) scale(0.95)%22%3E%3Cpath d=%22M6 16V11a6 6 0 0 1 12 0v5l2 2H4z%22/%3E%3Cpath d=%22M10 20a2 2 0 0 0 4 0%22/%3E%3C/g%3E%3Cg transform=%22translate(54 18) rotate(0 12 12) scale(0.8)%22%3E%3Crect x=%224%22 y=%224%22 width=%2216%22 height=%2216%22 rx=%223%22/%3E%3Cpath d=%22M8 12l3 3 5-6%22/%3E%3C/g%3E%3Cg transform=%22translate(28 56) rotate(0 12 12) scale(0.8)%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%228%22/%3E%3Cpath d=%22M12 7v5l3 2%22/%3E%3C/g%3E%3Cg transform=%22translate(68 64) rotate(0 12 12) scale(0.5)%22%3E%3Cpath d=%22M12 3v6M12 15v6M3 12h6M15 12h6%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");background-size:auto,92px 92px;background-repeat:no-repeat,repeat}
.wa[data-wall="5"]{background:#4c6db8}
.wa[data-wall="5"] .thread{background-color:#4c6db8;background-image:radial-gradient(120% 70% at 85% 80%,rgba(59,123,255,.22),transparent 60%),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22100%22 height=%22100%22 viewBox=%220 0 100 100%22%3E%3Cg fill=%22none%22 stroke=%22%23aaf1de%22 color=%22%23aaf1de%22 stroke-width=%221.4%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 opacity=%220.3%22%3E%3Cg transform=%22translate(4 10) rotate(0 12 12) scale(1.2)%22%3E%3Cpath d=%22M2 12c3-4 5-4 8 0s5 4 8 0 3-4 4-2%22/%3E%3C/g%3E%3Cg transform=%22translate(60 6) rotate(0 12 12) scale(0.85)%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%224%22/%3E%3Cpath d=%22M12 2v3M12 19v3M2 12h3M19 12h3%22/%3E%3C/g%3E%3Cg transform=%22translate(30 56) rotate(0 12 12) scale(1.1)%22%3E%3Cpath d=%22M2 12c3-4 5-4 8 0s5 4 8 0 3-4 4-2%22/%3E%3C/g%3E%3Cg transform=%22translate(70 60) rotate(6 12 12) scale(0.7)%22%3E%3Cpath d=%22M3 11 12 4l9 7v9H3z%22/%3E%3Cpath d=%22M10 20v-5h4v5%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");background-size:auto,100px 100px;background-repeat:no-repeat,repeat}
.wa[data-wall="6"]{background:#7c63a7}
.wa[data-wall="6"] .thread{background-color:#7c63a7;background-image:radial-gradient(120% 70% at 80% 10%,rgba(255,179,92,.22),transparent 60%),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2290%22 height=%2290%22 viewBox=%220 0 90 90%22%3E%3Cg fill=%22none%22 stroke=%22%23ffe2c1%22 color=%22%23ffe2c1%22 stroke-width=%221.4%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 opacity=%220.3%22%3E%3Cg transform=%22translate(8 8) rotate(-6 12 12) scale(0.95)%22%3E%3Crect x=%224%22 y=%225%22 width=%2216%22 height=%2215%22 rx=%222%22/%3E%3Cpath d=%22M4 10h16M9 3v4M15 3v4%22/%3E%3C/g%3E%3Cg transform=%22translate(54 14) rotate(0 12 12) scale(0.85)%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%228%22/%3E%3Cpath d=%22M12 7v5l3 2%22/%3E%3C/g%3E%3Cg transform=%22translate(26 54) rotate(8 12 12) scale(0.75)%22%3E%3Crect x=%224%22 y=%224%22 width=%2216%22 height=%2216%22 rx=%223%22/%3E%3Cpath d=%22M8 12l3 3 5-6%22/%3E%3C/g%3E%3Cg transform=%22translate(66 62) rotate(0 12 12) scale(0.5)%22%3E%3Cpath d=%22M12 3v6M12 15v6M3 12h6M15 12h6%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");background-size:auto,90px 90px;background-repeat:no-repeat,repeat}
.wa[data-wall="7"]{background:#3f797d}
.wa[data-wall="7"] .thread{background-color:#3f797d;background-image:radial-gradient(120% 70% at 20% 30%,rgba(32,217,169,.22),transparent 60%),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2296%22 height=%2296%22 viewBox=%220 0 96 96%22%3E%3Cg fill=%22none%22 stroke=%22%23aaf1de%22 color=%22%23aaf1de%22 stroke-width=%221.4%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 opacity=%220.34%22%3E%3Cg transform=%22translate(6 6) rotate(-10 12 12) scale(1.1)%22%3E%3Ctext x=%2212%22 y=%2217%22 text-anchor=%22middle%22 font-family=%22Georgia,serif%22 font-size=%2215%22 fill=%22currentColor%22 stroke=%22none%22%3EA%3C/text%3E%3C/g%3E%3Cg transform=%22translate(52 10) rotate(8 12 12) scale(1.1)%22%3E%3Ctext x=%2212%22 y=%2217%22 text-anchor=%22middle%22 font-family=%22Georgia,serif%22 font-size=%2215%22 fill=%22currentColor%22 stroke=%22none%22%3E%CE%A9%3C/text%3E%3C/g%3E%3Cg transform=%22translate(22 54) rotate(6 12 12) scale(1.1)%22%3E%3Ctext x=%2212%22 y=%2217%22 text-anchor=%22middle%22 font-family=%22Georgia,serif%22 font-size=%2215%22 fill=%22currentColor%22 stroke=%22none%22%3E%D0%AF%3C/text%3E%3C/g%3E%3Cg transform=%22translate(64 58) rotate(-6 12 12) scale(1.1)%22%3E%3Ctext x=%2212%22 y=%2217%22 text-anchor=%22middle%22 font-family=%22Georgia,serif%22 font-size=%2215%22 fill=%22currentColor%22 stroke=%22none%22%3E%D7%90%3C/text%3E%3C/g%3E%3C/g%3E%3C/svg%3E");background-size:auto,96px 96px;background-repeat:no-repeat,repeat}
.wa[data-wall="8"]{background:#546fa6}
.wa[data-wall="8"] .thread{background-color:#546fa6;background-image:radial-gradient(120% 70% at 70% 90%,rgba(138,92,255,.22),transparent 60%),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2294%22 height=%2294%22 viewBox=%220 0 94 94%22%3E%3Cg fill=%22none%22 stroke=%22%23b5cdff%22 color=%22%23b5cdff%22 stroke-width=%221.4%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 opacity=%220.3%22%3E%3Cg transform=%22translate(8 8) rotate(0 12 12) scale(1)%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%228%22 stroke-dasharray=%222 3%22/%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%223%22/%3E%3C/g%3E%3Cg transform=%22translate(56 16) rotate(0 12 12) scale(0.85)%22%3E%3Cpath d=%22M3 18V8M3 14h18v4M21 14v-3a3 3 0 0 0-3-3H10v6%22/%3E%3C/g%3E%3Cg transform=%22translate(30 56) rotate(0 12 12) scale(0.75)%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%228%22 stroke-dasharray=%222 3%22/%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%223%22/%3E%3C/g%3E%3Cg transform=%22translate(70 64) rotate(0 12 12) scale(0.5)%22%3E%3Cpath d=%22M12 3l7 9-7 9-7-9z%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");background-size:auto,94px 94px;background-repeat:no-repeat,repeat}

/* ════ 113-AK (Dennis, 2026-09-24) ═══════════════════════════════════════ */

/* The co-pilot phone waits with three moving dots, never a line of text that
   reads as though nothing is working. Hidden under reduced motion, where every
   message is already on screen (see the reduced-motion block above). */
.wa .wait-dots{align-self:flex-start;flex:none;display:flex;gap:3px;background:var(--wa-in);border-radius:12px;border-top-left-radius:4px;padding:8px 10px}
.wa .wait-dots[hidden]{display:none}
.wa .wait-dots i{width:5px;height:5px;border-radius:50%;background:#8696a0;animation:blink 1s infinite}
.wa .wait-dots i:nth-child(2){animation-delay:.2s}.wa .wait-dots i:nth-child(3){animation-delay:.4s}
/* The Try-it agent card waits the same way. */
.agent-alert .wait-dots{display:inline-flex;gap:4px;padding:7px 10px;margin-top:4px;border-radius:10px;background:var(--glass-2);border:1px solid var(--line)}
.agent-alert .wait-dots i{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:blink 1s infinite}
.agent-alert .wait-dots i:nth-child(2){animation-delay:.2s}.agent-alert .wait-dots i:nth-child(3){animation-delay:.4s}
@media (prefers-reduced-motion:reduce){.wa .wait-dots{display:none}}
.demo .save-note{margin:-4px 0 0;font-size:.8rem}
/* 113-AP: step 1's button stands alone and the reply line sits under it (Dennis);
   the gaps shrink so the card keeps its height. */
.demo .step[data-step="1"]{gap:9px}
.demo .actions.first{flex-direction:column;align-items:flex-start;gap:5px;margin-top:0}
.demo .actions.first + .save-note{margin-top:-9px}
.demo .save-note[hidden]{display:none}
.demo .phone-err{margin:2px 0 0;color:var(--amber);font-size:.88rem}
html[data-theme="light"] .demo .phone-err{color:#A15C00}
.demo .phone-err[hidden]{display:none}

/* "Who answers?": the two nights as timed rows, the way the brochure tells them.
   The time sits on the left of each moment (the right, in Hebrew: the grid
   follows the page's direction); the last row is the ending, in red without
   OnMotion and in green with it. The labels are a step larger and carry the
   same two colours. */
.vs-tl .card{gap:14px}
.vs-tl .tag{font-size:.84rem;padding:6px 14px;letter-spacing:.07em}
.vs-tl .without .tag{color:#FF8A8A;border-color:rgba(255,107,107,.45);background:rgba(255,107,107,.08)}
.vs-tl .with .tag{background:rgba(32,217,169,.08)}
.vs-tl .without{border-color:rgba(255,107,107,.22)}
.vs-tl .tl{list-style:none;margin:2px 0 0;padding:0;display:grid}
.vs-tl .card .tl li{display:grid;grid-template-columns:5em minmax(0,1fr);gap:14px;align-items:baseline;padding:13px 0;border-top:1px solid var(--line);color:var(--muted)}
.vs-tl .card .tl li::before{display:none}
.vs-tl .tl-when{font:600 .8rem/1.4 var(--mono);color:var(--dim);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
/* A word label ("Later", "מאוחר יותר") may wrap inside its column; a time never does (no spaces). */
.vs-tl .with .tl-when{color:var(--teal)}
.vs-tl .tl-end .tl-what{font-weight:700}
.vs-tl .without .tl-end .tl-what{color:#FF8A8A}
.vs-tl .with .tl-end .tl-what{color:var(--teal)}
html[data-theme="light"] .vs-tl .without .tag{color:#B42318;border-color:rgba(180,35,24,.35);background:rgba(180,35,24,.06)}
html[data-theme="light"] .vs-tl .without{border-color:rgba(180,35,24,.18)}
html[data-theme="light"] .vs-tl .with .tag{color:#0B8F6E;border-color:rgba(11,143,110,.35);background:rgba(11,143,110,.07)}
html[data-theme="light"] .vs-tl .with{border-color:rgba(11,143,110,.3)}
html[data-theme="light"] .vs-tl .without .tl-end .tl-what{color:#B42318}
html[data-theme="light"] .vs-tl .with .tl-when,html[data-theme="light"] .vs-tl .with .tl-end .tl-what{color:#0B8F6E}
@media (max-width:640px){
  .vs-tl .card .tl li{grid-template-columns:4.4em minmax(0,1fr);gap:10px;padding:11px 0;font-size:.95rem}
}

/* "After the first reply": each card with the icon of what it does, in the
   journey's icon tile. */
.fu-grid .card{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px;align-content:start}
.fu-grid .card>h3,.fu-grid .card>p{grid-column:2}
.fu-ic{grid-row:1/3;display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--glass-solid);border:1px solid var(--line-2);box-shadow:0 10px 26px -14px rgba(59,123,255,.55)}
.fu-ic svg{width:24px;height:24px;fill:none;stroke:url(#ic-grad);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:640px){.fu-ic{width:40px;height:40px;border-radius:12px}.fu-ic svg{width:21px;height:21px}.fu-grid .card{column-gap:14px}}

/* ── Book a demo ─────────────────────────────────────────────────────────── */
/* The bar waits for step 2, then slides in already part-way along. */
.demo .stepper[hidden]{display:none}
.demo .stepper.appear{animation:om-stepper-in .5s var(--ease)}
@keyframes om-stepper-in{from{opacity:0;transform:translate3d(0,-6px,0)}to{opacity:1;transform:none}}

/* The phone: a country-code button beside the number, one row. The list opens
   under the whole row, as wide as it, so it fits a phone too. */
.demo .phone-field{display:grid;gap:6px}
.demo .tel-row{position:relative;display:flex;gap:8px;align-items:stretch}
.demo .tel-row>input{flex:1;min-width:0}
.demo .tel-row>.cc{display:flex;flex:none}
.cc-btn{flex:none;display:inline-flex;align-items:center;gap:7px;padding:0 12px 0 14px;border-radius:14px;border:1px solid var(--line);background:var(--navy);color:var(--text);font:500 1.05rem var(--body);cursor:pointer;transition:border-color .3s,box-shadow .3s}
.cc-btn:focus-visible,.cc.open .cc-btn{outline:none;border-color:var(--teal);box-shadow:0 0 0 4px rgba(32,217,169,.15)}
@media (hover:hover){.cc-btn:hover{border-color:var(--line-2)}}
.cc-flag{font-size:1.3rem;line-height:1;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
/* 113-AO: a system with no flag emoji (Windows) gets the site's own flag font.
   The class is only set there, so no other system downloads it. */
@font-face{font-family:"Twemoji Country Flags";src:url("/assets/fonts/TwemojiCountryFlags.woff2") format("woff2");unicode-range:U+1F1E6-1F1FF,U+1F3F4,U+E0062-E0063,U+E0065,U+E0067,U+E006C,U+E006E,U+E0073-E0074,U+E0077,U+E007F;font-display:swap}
.flag-font .cc-flag{font-family:"Twemoji Country Flags","Segoe UI Emoji",sans-serif}
/* A system that draws no flag emoji (Windows) gets the country's two-letter code
   in a small badge instead of two stray letters - and no font from anyone else. */
.cc-flag.code{display:inline-grid;place-items:center;min-width:2.1em;height:1.45em;padding:0 4px;border-radius:5px;border:1px solid var(--line-2);font:600 .66rem/1 var(--mono);letter-spacing:.04em;color:var(--muted);background:var(--glass-2)}
.cc-dial{font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
.cc-chev{width:16px;height:16px;fill:none;stroke:var(--dim);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--ease)}
.cc.open .cc-chev{transform:rotate(180deg)}
.cc-pop{margin-top:4px;padding:8px;border-radius:18px;border:1px solid var(--line-2);background:var(--navy);box-shadow:0 30px 70px -24px rgba(0,0,0,.7);animation:om-pop-in .22s var(--ease)}
html[data-theme="light"] .cc-pop{background:#fff;box-shadow:0 30px 70px -28px rgba(14,26,51,.4)}
@keyframes om-pop-in{from{opacity:0;transform:translate3d(0,-6px,0)}to{opacity:1;transform:none}}
.cc-pop[hidden]{display:none}
.cc-search-wrap{position:relative}
.cc-search-wrap svg{position:absolute;inset-inline-start:12px;top:50%;width:17px;height:17px;transform:translateY(-50%);fill:none;stroke:var(--dim);stroke-width:2;stroke-linecap:round;pointer-events:none}
.demo .cc-search{padding:11px 12px;padding-inline-start:38px;border-radius:12px;font-size:16px;background:var(--glass-2)}
.cc-list{list-style:none;margin:8px 0 0;padding:0;max-height:min(300px,46vh);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.cc-list li{display:grid;grid-template-columns:auto minmax(0,1fr) auto 18px;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;cursor:pointer;color:var(--text);font-size:.95rem}
.cc-list li .cc-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-list li .cc-code{color:var(--dim);font:500 .85rem var(--mono);font-variant-numeric:tabular-nums}
.cc-list li.act{background:var(--glass-2)}
.cc-list li[aria-selected="true"]{background:rgba(32,217,169,.12);box-shadow:inset 0 0 0 1px rgba(32,217,169,.4)}
.cc-list li[aria-selected="true"]::after{content:"";width:16px;height:16px;background:var(--teal);-webkit-mask: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.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat;mask: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.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat}
html[data-theme="light"] .cc-list li[aria-selected="true"]{background:rgba(11,143,110,.08);box-shadow:inset 0 0 0 1px rgba(11,143,110,.35)}
html[data-theme="light"] .cc-list li[aria-selected="true"]::after{background:#0B8F6E}
.cc-empty{margin:10px 6px 6px;color:var(--dim);font-size:.9rem}
.cc-empty[hidden]{display:none}
@media (max-width:640px){.cc-btn{padding:0 8px 0 10px;gap:5px;font-size:1rem}.cc-flag{font-size:1.15rem}.cc-chev{width:14px;height:14px}}

/* Sent: the form folds away and the thank-you draws its check. */
.demo-form.folding{opacity:0;transform:translate3d(0,-10px,0) scale(.99);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.demo-done{display:grid;justify-items:center;gap:10px;text-align:center;padding:26px 0 8px}
.demo-done[hidden]{display:none}
.demo-done:focus{outline:none}
.done-check{width:88px;height:88px;fill:none;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 18px rgba(32,217,169,.35))}
.done-check .dc-ring{stroke:url(#ic-grad);stroke-width:3.5;stroke-dasharray:100;stroke-dashoffset:100;transform-box:fill-box;transform-origin:center;transform:rotate(-90deg);transition:stroke-dashoffset .8s var(--ease)}
.done-check .dc-tick{stroke:var(--teal);stroke-width:5;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset .45s var(--ease) .6s}
.demo-done.on .dc-ring,.demo-done.on .dc-tick{stroke-dashoffset:0}
.demo-done h3,.demo-done p{opacity:0;transform:translate3d(0,8px,0);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.demo-done h3{margin-top:8px;font:800 clamp(1.8rem,3.6vw,2.5rem)/1.1 var(--display);letter-spacing:-.02em;transition-delay:.35s}
.demo-done .done-line{font:600 clamp(1.1rem,1.8vw,1.35rem)/1.4 var(--display);color:var(--text);max-width:34rem;text-wrap:balance;transition-delay:.5s}
.demo .demo-done .note{text-align:center;transition-delay:.65s}
.demo-done.on h3,.demo-done.on p{opacity:1;transform:none}
html[data-theme="light"] .done-check .dc-tick{stroke:#0B8F6E}
/* 113-AS: where OnMotion or its co-pilot speaks, the avatar is the real ring mark
   (circle only, WebP) - never the plain gradient. The agency's own avatar (.bh) keeps its logo. */
.wa .avatar:not(.bh),.agent-alert .av{background:url("/assets/onmotion-ring.webp") center/contain no-repeat}