/* ===== Yusr site: shared components added on top of base.css ===== */

/* ---- product menu (desktop) ---- */
.nav nav{align-items:center}
.menu-wrap{position:relative}
.menu-btn{all:unset;cursor:pointer;font-size:14px;color:var(--ink-2);display:inline-flex;align-items:center;gap:6px;min-height:44px}
.menu-btn:hover,.menu-btn[aria-expanded="true"]{color:var(--ink)}
.menu-btn:focus-visible{outline:2px solid var(--moss);outline-offset:4px;border-radius:6px}
.menu-btn svg{width:10px;height:10px;stroke:currentColor;fill:none;stroke-width:1.6;transition:transform .25s var(--ease)}
.menu-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.menu{position:absolute;top:calc(100% + 6px);inset-inline-start:-24px;width:min(720px,90vw);background:var(--card);border:1px solid var(--line);border-radius:20px;box-shadow:0 30px 70px -30px rgba(13,40,32,.35);padding:12px;display:grid;grid-template-columns:1fr 1fr;gap:4px;opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .2s,transform .25s var(--ease);z-index:60}
.menu.open{opacity:1;transform:none;pointer-events:auto}
.menu a{display:flex;gap:14px;padding:14px;border-radius:14px;transition:background-color .2s}
.menu a:hover,.menu a[aria-current="page"]{background:var(--sand)}
.menu .mi{width:36px;height:36px;border-radius:10px;background:var(--night);display:grid;place-items:center;flex:none}
.menu .mi svg{width:18px;height:18px;fill:none;stroke:#CFE3D6;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.menu b{display:block;font-weight:500;font-size:14.5px;color:var(--ink)}
.menu span{display:block;font-size:13px;color:var(--ink-3);line-height:1.4;margin-top:2px}
.menu .foot{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;margin-top:4px;padding:12px 14px;border-top:1px solid var(--line);font-size:13px;color:var(--ink-2)}
.menu .foot a{padding:0;display:inline;color:var(--ink);font-weight:500}
.menu .foot a:hover{background:none;text-decoration:underline}

/* ---- mobile menu ---- */
.burger{all:unset;display:none;cursor:pointer;width:44px;height:44px;place-items:center}
.burger svg{width:22px;height:22px;stroke:var(--ink);stroke-width:1.5;fill:none}
@media (max-width:900px){.burger{display:grid}.nav .right .btn{display:none}}
.sheet{position:fixed;inset:calc(64px + env(safe-area-inset-top,0px)) 0 0 0;z-index:49;background:var(--paper);padding:20px var(--gut) calc(32px + env(safe-area-inset-bottom,0px));overflow:auto;display:flex;flex-direction:column;gap:2px}
.sheet a{display:flex;align-items:center;min-height:52px;font-size:20px;letter-spacing:-.02em;border-bottom:1px solid var(--line)}
.sheet .sub{font-size:16px;color:var(--ink-2);padding-inline-start:14px;min-height:46px}
.sheet .btn{margin-top:20px;font-size:16px;min-height:52px;border-bottom:0}

/* ---- the scroll story (home) ---- */
.story{position:relative;height:460vh}
.story .pin{position:sticky;top:calc(64px + env(safe-area-inset-top,0px));height:calc(100vh - 64px);display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(24px,4vw,64px);align-items:center}
.story .steps{display:flex;flex-direction:column;gap:6px}
.st{padding:18px 0 18px 22px;border-inline-start:2px solid var(--line);transition:border-color .4s,opacity .4s;opacity:.38;cursor:pointer}
.st.on{border-color:var(--moss);opacity:1}
.st .eyebrow{display:block}
.st h3{font-size:clamp(22px,2.2vw,30px);letter-spacing:-.03em;line-height:1.1;margin-top:8px}
.st p{color:var(--ink-2);margin-top:8px;font-size:15.5px;max-width:28em;display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.st.on p{grid-template-rows:1fr}
.st p span{overflow:hidden}
.stage2{position:relative;height:min(620px,calc(100vh - 140px));border-radius:var(--r-plate);overflow:hidden;background:var(--night);isolation:isolate}
.prog{position:absolute;top:18px;inset-inline:18px;height:2px;background:rgba(234,240,234,.14);border-radius:2px;z-index:3}
.prog i{position:absolute;inset:0 auto 0 0;width:var(--p,0%);background:#9CC4AE;border-radius:2px}
[dir="rtl"] .prog i{inset:0 0 0 auto}
@media (max-width:960px){
  .story{height:auto}
  .story .pin{position:relative;top:0;height:auto;grid-template-columns:1fr}
  .st{opacity:1;border-color:var(--moss)}
  .st p{grid-template-rows:1fr}
  .stage2{height:520px}
}

/* stage actors */
.actor{position:absolute;transition:transform .8s var(--ease),opacity .6s var(--ease),filter .6s;will-change:transform,opacity}
.card-w{background:#F7F5F0;color:#14231F;border-radius:14px;box-shadow:0 18px 44px -18px rgba(0,0,0,.55);font-size:13.5px;line-height:1.4}
.src{display:flex;align-items:center;gap:8px;padding:10px 12px;width:250px}
.src svg{width:18px;height:18px;flex:none;fill:none;stroke:#14231F;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.src small{display:block;font:500 10px var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:#6F7E77}
.hubm{width:88px;height:88px;border-radius:26px;background:#F4F1EB;display:grid;place-items:center;box-shadow:0 0 0 10px rgba(156,196,174,.12),0 0 0 22px rgba(156,196,174,.06)}
.hubm svg{width:52px;height:auto;fill:#0D3B3B}
.wire{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.wire path{fill:none;stroke:rgba(156,196,174,.35);stroke-width:1.2;stroke-dasharray:4 6;transition:opacity .6s}
.pane{width:min(420px,78%);padding:14px}
.pane .row{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-top:1px solid rgba(20,35,31,.08)}
.pane .row:first-of-type{border-top:0}
.pane .k{font:500 10px var(--f-mono);letter-spacing:.07em;text-transform:uppercase;color:#6F7E77;width:84px;flex:none;padding-top:2px}
.pane .v{flex:1}
.chip{display:inline-flex;align-items:center;gap:6px;font:500 10.5px var(--f-mono);letter-spacing:.06em;text-transform:uppercase;padding:5px 8px;border-radius:999px;background:#E3EEDC;color:#0D3B3B}
.chip.gold{background:#F3E9C9;color:#7A5A12}
.chip.grey{background:#E9ECE8;color:#4A5C55}
.vbar{display:inline-flex;gap:2px;align-items:center;height:16px;vertical-align:middle}
.vbar i{width:2px;border-radius:2px;background:#2D5A4A;opacity:.6}

/* ---- pillars (home) ---- */

/* ---- feature pages ---- */
.crumb{display:flex;gap:8px;align-items:center;font-size:13.5px;color:var(--ink-3);justify-content:center}
.crumb a:hover{color:var(--ink)}
.fhero{text-align:center;padding-block:clamp(56px,8vw,104px) clamp(36px,4vw,56px)}
.fhero h1{font-size:clamp(42px,6.2vw,86px);line-height:1;letter-spacing:-.045em;margin-top:20px}
.fhero p{font-size:clamp(17px,1.5vw,19px);color:var(--ink-2);max-width:38em;margin:24px auto 0}
.fhero .ctas{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:32px}
.subnav{position:sticky;top:calc(64px + env(safe-area-inset-top,0px));z-index:40;background:color-mix(in srgb,var(--paper) 90%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line);margin-top:clamp(48px,6vw,80px)}
.subnav .wrap{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.subnav .wrap::-webkit-scrollbar{display:none}
.subnav a{flex:none;display:inline-flex;align-items:center;min-height:52px;padding:0 14px;font-size:14px;color:var(--ink-3);border-bottom:2px solid transparent;transition:color .2s,border-color .2s}
.subnav a:hover{color:var(--ink)}
.subnav a.on{color:var(--ink);border-bottom-color:var(--moss)}
.blk{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(28px,5vw,80px);align-items:center;padding-block:clamp(72px,9vw,128px);border-bottom:1px solid var(--line);scroll-margin-top:130px}
.blk.flip .txt{order:2}
@media (max-width:960px){.blk{grid-template-columns:1fr}.blk.flip .txt{order:0}}
.blk h2{font-size:clamp(30px,3.4vw,46px);line-height:1.05;letter-spacing:-.035em;margin-top:14px}
.blk .txt>p{color:var(--ink-2);margin-top:16px;font-size:17px;max-width:30em}
.blk ul.pts{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:12px}
.blk ul.pts li{display:grid;grid-template-columns:20px 1fr;gap:12px;font-size:15.5px}
.blk ul.pts li svg{width:18px;height:18px;margin-top:3px;fill:none;stroke:var(--moss);stroke-width:1.8}
.blk ul.pts b{font-weight:500}
.blk ul.pts span{color:var(--ink-2)}
.vis{position:relative;border-radius:var(--r-plate);overflow:hidden;background:var(--night);aspect-ratio:5/4;isolation:isolate;display:grid;place-items:center;padding:clamp(18px,3vw,40px)}
.vis.light{background:var(--sand)}
.vis .shotc{width:100%;border-radius:12px;overflow:hidden;box-shadow:0 26px 60px -24px rgba(0,0,0,.55);aspect-ratio:16/11;background:#E9F1EC}
.vis .shotc img{width:170%;max-width:none;height:auto;transform-origin:0 0}
.mini{width:min(420px,100%)}
.mini .card-w{padding:14px}
.mini .card-w+.card-w{margin-top:10px}
.bub2{max-width:86%;padding:9px 12px;border-radius:14px;font-size:13.5px;line-height:1.45;margin-top:8px;width:fit-content}
.bub2.in{background:#fff;border:1px solid rgba(20,35,31,.08);border-end-start-radius:5px}
.bub2.out{background:#DCEBD8;border-end-end-radius:5px;margin-inline-start:auto}
.bub2 small{display:block;font:500 9.5px var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:#6F7E77;margin-top:3px}
.seq>*{opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.seq.play>*{opacity:1;transform:none}
.seq.play>*:nth-child(2){transition-delay:.7s}.seq.play>*:nth-child(3){transition-delay:1.4s}.seq.play>*:nth-child(4){transition-delay:2.1s}.seq.play>*:nth-child(5){transition-delay:2.8s}.seq.play>*:nth-child(6){transition-delay:3.5s}
.spec{width:100%;border-collapse:collapse;font-size:15px}
.spec th{text-align:start;font:500 11px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);padding:0 16px 14px 0;border-bottom:1px solid var(--line-2)}
.spec td{padding:18px 16px 18px 0;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink-2)}
.spec td:first-child{color:var(--ink);font-weight:500;width:28%}
.spec td:last-child{width:130px;padding-inline-end:0}
.specwrap{overflow-x:auto}
.related{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.related a{border-radius:var(--r-card);border:1px solid var(--line);background:var(--card);padding:22px;display:flex;flex-direction:column;gap:8px;min-height:150px;transition:transform .3s var(--ease),border-color .3s}
.related a:hover{transform:translateY(-3px);border-color:var(--line-2)}
.related b{font-weight:500;font-size:18px;letter-spacing:-.015em}
.related span{color:var(--ink-2);font-size:14.5px}
.related em{margin-top:auto;font-style:normal;font-size:14px;font-weight:500;display:inline-flex;gap:8px}
@media (max-width:860px){.related{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.seq>*{opacity:1;transform:none;transition:none}.actor{transition:none}}

[hidden]{display:none!important}
@media (min-width:901px){.sheet{display:none!important}}
.pane{font-size:15px;padding:18px 20px}
.pane .k{width:96px;font-size:10.5px}
.pane .row{padding:12px 0}
.mini{width:min(470px,100%)}
.bub2{font-size:14.5px}
.vis .pane{font-size:15px}
@media (max-width:960px){.story .stage2{order:-1;height:440px}.story .pin{gap:20px}}

/* ===== Icon system: Phosphor (the same family as the Yusr app), one quiet style ===== */
:root{--icon:#0D3B3B;--icon-tile:#EEF3EE;--icon-tile-line:rgba(13,59,59,.12)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--icon:#A9CDBA;--icon-tile:rgba(169,205,186,.08);--icon-tile-line:rgba(169,205,186,.16)}}
:root[data-theme="dark"]{--icon:#A9CDBA;--icon-tile:rgba(169,205,186,.08);--icon-tile-line:rgba(169,205,186,.16)}
svg use{pointer-events:none}
.ia{width:14px;height:14px;display:inline-block;vertical-align:-2px;color:currentColor}
.arr{display:inline-flex;align-items:center}

/* logo: the real Y mark + wordmark, as in the product */
.logo{gap:9px}
.logo .mk{width:26px;height:26px;display:block}
.logo .mk-d{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .nav .logo .mk-l{display:none}:root:not([data-theme="light"]) .nav .logo .mk-d{display:block}}
:root[data-theme="dark"] .nav .logo .mk-l{display:none}:root[data-theme="dark"] .nav .logo .mk-d{display:block}
.wordm{font:700 15px/1 "Space Grotesk",var(--f-sans);letter-spacing:.18em;padding-top:1px}

/* menu tiles: light, with a green icon (no heavy black blocks) */
.menu .mi{background:var(--icon-tile);border:1px solid var(--icon-tile-line);color:var(--icon)}
.menu .mi svg{width:19px;height:19px;color:var(--icon)}
.menu-btn svg{width:11px;height:11px;fill:currentColor;stroke:none}
.burger svg{width:22px;height:22px;color:var(--ink);fill:currentColor;stroke:none}

/* pillars */

/* lists: a plain check in brand green */
.blk ul.pts li svg,.acc .body li svg{width:17px;height:17px;color:var(--moss);margin-top:3px}
.blk ul.pts li{grid-template-columns:18px 1fr}

/* integrations */
.ic svg{width:28px;height:28px;color:var(--ink)}
.ic .wm{font:600 19px/28px var(--f-sans);letter-spacing:-.025em;color:var(--ink)}
.ic.soon svg,.ic.soon .wm{opacity:.42}

/* trust + setup + story */
.tgrid svg{width:24px;height:24px;color:#A9CDBA}
.chan svg{width:20px;height:20px;color:#14231F}
.src svg{width:19px;height:19px;color:#14231F}
.fb svg{width:19px;height:19px;color:#fff}
.hubm img{width:54px;height:54px}
.chat .h .av{background:#F4F1EB;border:1px solid rgba(20,35,31,.1)}
.chat .h .av img{width:20px;height:20px}
.av2{width:28px;height:28px;border-radius:50%;background:#F4F1EB;border:1px solid rgba(20,35,31,.1);display:inline-grid;place-items:center;flex:none}
.av2 img{width:18px;height:18px}

/* file and photo chips inside demo messages (no emoji) */
.att{display:inline-flex;align-items:center;gap:10px;min-width:200px}
.att .ai{width:34px;height:34px;border-radius:9px;background:#EEF3EE;border:1px solid rgba(13,59,59,.12);display:grid;place-items:center;flex:none}
.att .ai svg{width:18px;height:18px;color:#0D3B3B}
.att b{display:block;font-weight:500;font-size:13.5px;line-height:1.3}
.att small{display:block;font:500 10px var(--f-mono);letter-spacing:.05em;text-transform:uppercase;color:#6F7E77;margin-top:2px}
.fbot{align-items:center}

/* ===== FAQ ===== */
.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,5vw,80px);align-items:start}
@media (max-width:900px){.faq-grid{grid-template-columns:1fr}}
.faq-h{font-size:clamp(30px,3.4vw,46px);line-height:1.05;letter-spacing:-.035em;margin-top:14px}
.faq-sub{color:var(--ink-2);margin-top:16px;font-size:16px}
.sel{user-select:all;color:var(--ink);font-weight:500}
.faq-list{border-top:1px solid var(--line-2)}
.faq-it{border-bottom:1px solid var(--line-2)}
.faq-it summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;font-size:18px;font-weight:500;letter-spacing:-.015em}
.faq-it summary::-webkit-details-marker{display:none}
.faq-it summary:focus-visible{outline:2px solid var(--moss);outline-offset:4px;border-radius:6px}
.faq-it .pm{width:14px;height:14px;position:relative;flex:none;color:var(--ink-3)}
.faq-it .pm::before,.faq-it .pm::after{content:"";position:absolute;inset:6px 0 auto;height:1.5px;background:currentColor;transition:transform .3s var(--ease)}
.faq-it .pm::after{transform:rotate(90deg)}
.faq-it[open] .pm::after{transform:rotate(0)}
.faq-it p{color:var(--ink-2);padding:0 0 24px;max-width:40em;font-size:16px}

/* ===== footer contact ===== */
.contact{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:22px 0 0;font-size:14px}
.contact dt{font:500 10.5px/20px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--on-night-2)}
.contact dd{margin:0;color:#EAF0EA;font-weight:400}

/* setup demo: WhatsApp is its own step */
.chan em.opt{color:#6F7E77}
.chan em.opt::before{border-style:dashed}

/* ===== pricing ===== */
.concept{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;background:var(--sand);border-radius:var(--r-card);padding:20px 24px;margin-top:8px}
.concept p{font-size:16px;color:var(--ink);margin-top:6px}
.cdemo{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.cbub{font-size:12.5px;padding:5px 10px;border-radius:12px;background:var(--card);border:1px solid var(--line)}
.cbub.o{background:#DCEBD8;border-color:transparent;color:#14231F}
.ccount{font:500 11px var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--emerald);margin-inline-start:6px}
:root[data-theme="dark"] .ccount{color:#9CC4AE}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ccount{color:#9CC4AE}}
.cycle{display:flex;flex-wrap:wrap;gap:4px;width:fit-content;margin:36px auto 24px;padding:4px;border-radius:999px;border:1px solid var(--line-2);background:var(--card)}
.cycle button{all:unset;cursor:pointer;min-height:40px;padding:0 16px;border-radius:999px;font-size:14px;color:var(--ink-2);display:inline-flex;align-items:center;gap:6px}
.cycle button em{font-style:normal;font:500 11px var(--f-mono);color:var(--moss)}
.cycle button[aria-checked="true"]{background:var(--btn);color:var(--btn-ink)}
.cycle button[aria-checked="true"] em{color:inherit;opacity:.8}
.cycle button:focus-visible{outline:2px solid var(--moss);outline-offset:2px}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:stretch}
@media (max-width:1100px){.plans{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.plans{grid-template-columns:1fr}}
.plan{border-radius:var(--r-card);background:var(--card);border:1px solid var(--line);padding:26px;display:flex;flex-direction:column;gap:14px;min-width:0}
.plan.hi{background:var(--night);color:var(--on-night);border-color:transparent}
.plan .ph{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.plan h3{font-size:20px}
.plan .ph span{font-size:13px;color:var(--ink-3)}
.plan.hi .ph span{color:var(--on-night-2)}
.plan .amt{display:flex;align-items:baseline;gap:2px;margin-top:8px;font-variant-numeric:tabular-nums}
.plan .num{font-size:44px;font-weight:500;letter-spacing:-.04em;line-height:1}
.plan .cur{font-size:20px;align-self:flex-start;margin-top:4px}
.plan .per{font-size:14px;color:var(--ink-3);margin-inline-start:4px}
.plan.hi .per{color:var(--on-night-2)}
.plan .bill{font-size:13.5px;color:var(--ink-3);margin-top:-6px;min-height:20px}
.plan.hi .bill{color:var(--on-night-2)}
.plan .btn{width:100%;margin-top:6px}
.plan.hi .btn.dark{background:#F4F1EB;color:#14231F}
.plan ul{list-style:none;padding:16px 0 0;margin:0;border-top:1px solid var(--line);display:grid;gap:10px;font-size:14.5px}
.plan.hi ul{border-color:rgba(234,240,234,.14)}
.plan li{display:grid;grid-template-columns:18px 1fr;gap:10px}
.plan li svg{width:16px;height:16px;color:var(--moss);margin-top:3px}
.cmp td,.cmp th{text-align:center}
.cmp td:first-child,.cmp th:first-child{text-align:start}
.cmp td:last-child{width:auto}
.cmp td svg{width:17px;height:17px;color:var(--moss);vertical-align:-3px}
.cmp tbody tr:hover{background:var(--sand)}
.note{font-size:13.5px;color:var(--ink-3)}

/* ===== solutions menu ===== */

/* ===== solution pages ===== */
.asks{border-radius:var(--r-card);background:var(--sand);padding:22px 24px}
.ask-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.ask{font-size:15px;padding:9px 14px;border-radius:16px;border-end-start-radius:5px;background:var(--card);border:1px solid var(--line)}
.blk .more{margin-top:18px}
.setup-steps{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,5vw,80px);align-items:start}
@media (max-width:900px){.setup-steps{grid-template-columns:1fr}}
.setup-steps ol{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-2)}
.setup-steps li{display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line-2);font-size:17px}
.setup-steps .sn{width:32px;height:32px;border-radius:50%;background:var(--icon-tile);border:1px solid var(--icon-tile-line);color:var(--icon);display:grid;place-items:center;font:500 13px var(--f-mono)}

/* ===== about / contact ===== */
.facts-t td:first-child{width:26%}
.facts-t td:last-child{width:auto}
.prose p{color:var(--ink-2);font-size:17px;max-width:38em}
.prose p+p{margin-top:16px}
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}
.cbox{border-radius:var(--r-card);background:var(--card);border:1px solid var(--line);padding:24px;display:flex;flex-direction:column;gap:10px}
.cbox .big{font-size:20px;letter-spacing:-.01em;margin-top:6px}
.cbox p{color:var(--ink-2);font-size:15px}
.cbox address{font-style:normal;font-size:16px;line-height:1.6;margin-top:6px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
h2.eyebrow{font-size:11.5px;letter-spacing:.12em}

/* ===== Scene: conversation + what Yusr does ===== */
.shero{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,4vw,64px);align-items:center;padding-block:clamp(48px,6vw,88px) clamp(32px,4vw,56px)}
@media (max-width:1000px){.shero{grid-template-columns:1fr}}
.shero .crumb{justify-content:flex-start}
.shero h1{font-size:clamp(40px,5.2vw,72px);line-height:1;letter-spacing:-.045em;margin-top:18px}
.shero p.lede{font-size:clamp(17px,1.4vw,19px);color:var(--ink-2);margin-top:20px;max-width:34em}
.shero .ctas{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
.shero .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:26px}
.shero .tags span{font-size:12.5px;padding:5px 10px;border-radius:999px;border:1px solid var(--line-2);color:var(--ink-2)}
.scene-plate{position:relative;border-radius:var(--r-plate);overflow:hidden;background:var(--night);isolation:isolate;padding:clamp(14px,2.4vw,28px)}
.scene{display:grid;grid-template-columns:1.05fr .95fr;gap:12px;transition:opacity .45s}
.scene.fade{opacity:0}
@media (max-width:640px){.scene{grid-template-columns:1fr}}
.sc-chat,.sc-log{background:#F7F5F0;color:#14231F;border-radius:16px;box-shadow:0 24px 50px -24px rgba(0,0,0,.6);display:flex;flex-direction:column;min-width:0}
.sc-head{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid rgba(20,35,31,.08)}
.sc-head .av2{width:30px;height:30px}
.sc-head b{display:block;font-size:13.5px}
.sc-status{display:block;font-size:11.5px;color:#4E8F5E}
.sc-head svg.ch{width:18px;height:18px;margin-inline-start:auto;color:#14231F}
.sc-msgs{height:330px;overflow:hidden;padding:12px;display:flex;flex-direction:column;justify-content:flex-end;gap:7px}
.scb{max-width:88%;padding:8px 11px;border-radius:13px;font-size:13.5px;line-height:1.42;animation:pop .45s var(--ease) both}
.scb.in{align-self:flex-start;background:#fff;border:1px solid rgba(20,35,31,.08);border-end-start-radius:4px}
.scb.out{align-self:flex-end;background:#DCEBD8;border-end-end-radius:4px}
.scb small{display:block;font:500 9.5px var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:#6F7E77;margin-top:3px}
.scb.typing{display:inline-flex;gap:4px;padding:11px 12px}
.scb.typing i{width:6px;height:6px;border-radius:50%;background:#2D5A4A;opacity:.35;animation:blink 1.1s infinite}
.scb.typing i:nth-child(2){animation-delay:.18s}.scb.typing i:nth-child(3){animation-delay:.36s}
@keyframes blink{50%{opacity:1}}
.sc-log .sc-head b{font-size:12.5px}
.sc-count{margin-inline-start:auto;font:500 11px var(--f-mono);color:#0D3B3B;background:#E3EEDC;border-radius:999px;padding:3px 8px}
.sc-log ol{list-style:none;margin:0;padding:10px 12px;display:flex;flex-direction:column;gap:6px;height:330px;overflow:hidden}
.sc-log li{display:grid;grid-template-columns:26px 1fr auto;gap:10px;align-items:start;padding:9px 10px;border-radius:10px;background:#fff;border:1px solid rgba(20,35,31,.07);animation:slidein .5s var(--ease) both}
.sc-log li b{display:block;font-size:12.5px;font-weight:600}
.sc-log li em{display:block;font-style:normal;font-size:12px;color:#5E7068;margin-top:2px}
.sc-ico{width:26px;height:26px;border-radius:8px;background:#EEF3EE;display:grid;place-items:center}
.sc-ico svg{width:15px;height:15px;color:#0D3B3B}
.sc-t{font:500 10px var(--f-mono);color:#9AA8A1;padding-top:3px}
@keyframes slidein{from{opacity:0;transform:translateX(10px)}}
@media (prefers-reduced-motion:reduce){.scb,.sc-log li{animation:none}}
.scene-cap{margin-top:12px;text-align:center}

/* ===== Mega menu ===== */
.nav .wrap{position:relative}
.menu-wrap.mw-mega{position:static}
.menu.mega{left:var(--gut);right:var(--gut);inset-inline-start:var(--gut);width:auto;top:calc(100% - 4px);display:grid;grid-template-columns:1.55fr 1fr 1fr;gap:6px 18px;padding:18px 18px 0}
.mg-col{display:flex;flex-direction:column;gap:2px;min-width:0}
.mg-col.two{display:grid;grid-template-columns:1fr 1fr;gap:2px 6px;align-content:start}
.mg-col.two .mg-h{grid-column:1/-1}
.mg-h{font:500 10.5px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);padding:6px 10px 8px}
.menu.mega a{padding:9px 10px;gap:12px;align-items:center}
.menu.mega .mi{width:32px;height:32px;border-radius:9px}
.menu.mega .mi svg{width:17px;height:17px}
.menu.mega b{font-size:14px}
.menu.mega a span span{font-size:12.5px}
.mg-side{display:flex;flex-direction:column;gap:10px}
.mg-col.ch{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.mg-col.ch .mg-h{grid-column:1/-1}
.menu.mega .mg-feat{display:flex;flex-direction:column;gap:6px;background:var(--night);color:var(--on-night);border-radius:16px;padding:16px;margin-top:4px}
.menu.mega .mg-feat:hover{background:var(--night-2)}
.mg-feat b{color:#EAF0EA!important;font-size:15px!important}
.mg-feat>span:last-child{color:var(--on-night-2)!important;font-size:13px}
.mg-chat{display:flex;flex-direction:column;gap:5px;margin:4px 0 8px}
.mg-chat span{font-size:12px!important;padding:6px 9px;border-radius:10px;width:fit-content;max-width:90%}
.mg-chat .in{background:#F7F5F0;color:#14231F!important}
.mg-chat .out{background:#DCEBD8;color:#14231F!important;margin-inline-start:auto}
.mg-foot{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);margin-top:8px;padding:12px 10px 14px;font-size:13.5px;color:var(--ink-2)}
.menu.mega .mg-foot a{display:inline;padding:0;color:var(--ink);font-weight:500}
.menu.mega .mg-foot a:hover{background:none;text-decoration:underline}
@media (max-width:1180px){.menu.mega{grid-template-columns:1fr 1fr}.mg-side{grid-column:1/-1;flex-direction:row}.mg-side>*{flex:1}}

/* ===== Solutions hub ===== */
.hub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:1000px){.hub-grid{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.hub-grid{grid-template-columns:1fr}}
.hub-card{display:flex;flex-direction:column;gap:8px;border-radius:var(--r-card);border:1px solid var(--line);background:var(--card);padding:22px;min-height:180px;transition:transform .3s var(--ease),border-color .3s}
.hub-card:hover{transform:translateY(-3px);border-color:var(--line-2)}
.hub-card .mi{width:40px;height:40px;border-radius:11px;background:var(--icon-tile);border:1px solid var(--icon-tile-line);color:var(--icon);display:grid;place-items:center;margin-bottom:6px}
.hub-card .mi svg{width:20px;height:20px}
.hub-card b{font-size:18px;font-weight:500;letter-spacing:-.015em}
.hub-card>span:not(.mi){color:var(--ink-2);font-size:14.5px}
.hub-card em{margin-top:auto;font-style:normal;font-size:14px;font-weight:500;display:inline-flex;gap:8px}
.hub-card:hover .arr{transform:translateX(3px)}
.acc .all-ind{display:inline-flex;margin-top:22px}

/* See it in Yusr: numbered steps beside real app screens */
.gd-grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.5fr);gap:clamp(20px,4vw,56px);align-items:start}
.gd-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.gd-s{all:unset;box-sizing:border-box;display:flex;gap:14px;width:100%;padding:14px 16px;border-radius:14px;cursor:pointer;color:var(--ink-3);transition:background .3s var(--ease),color .3s var(--ease)}
.gd-s .n{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font:500 12px var(--f-mono);border:1px solid var(--line-2);color:var(--ink-3);transition:inherit}
.gd-s .t{display:flex;flex-direction:column;gap:4px;min-width:0}
.gd-s b{font-weight:500;font-size:16.5px;color:inherit;letter-spacing:-.01em}
.gd-s .t span{font-size:14.5px;line-height:1.5;color:var(--ink-2);display:none}
.gd-s:hover{color:var(--ink)}
.gd-s.on{background:var(--card);color:var(--ink);box-shadow:0 0 0 1px var(--line),0 10px 30px -18px rgba(20,35,31,.35)}
.gd-s.on .n{background:var(--emerald);border-color:var(--emerald);color:var(--paper)}
.gd-s.on .t span{display:block}
.gd-s:focus-visible{outline:2px solid var(--moss);outline-offset:2px}
.gd-frame{margin:0;position:sticky;top:96px;border-radius:16px;overflow:hidden;background:#E4EFE9;box-shadow:0 0 0 1px var(--line),0 40px 80px -40px rgba(11,42,34,.45)}
.gd-bar{display:flex;align-items:center;gap:6px;height:32px;padding-inline:14px;background:#D8E6DF;border-bottom:1px solid rgba(20,35,31,.08)}
.gd-bar i{width:9px;height:9px;border-radius:50%;background:rgba(20,35,31,.18)}
.gd-bar span{margin-inline:auto;font:500 11px var(--f-mono);color:rgba(20,35,31,.55);letter-spacing:.02em}
.gd-bar em{font-style:normal;color:rgba(20,35,31,.8)}
.gd-view{all:unset;display:block;position:relative;width:100%;aspect-ratio:16/10;cursor:zoom-in;background:#E4EFE9}
.gd-view:focus-visible{outline:2px solid var(--moss);outline-offset:-4px}
.gd-i{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top left;opacity:0;transform:scale(1.015);transition:opacity .45s var(--ease),transform .6s var(--ease)}
.gd-i.tall,.gd-i[src*="ag-doctor"],.gd-i[src*="in-webhooks"]{object-fit:contain;object-position:center;padding:3% 6%;box-sizing:border-box}
.gd-i.on{opacity:1;transform:none}
.gd-frame figcaption{padding:11px 16px;font-size:12.5px;color:#4A5C55;background:#E4EFE9;border-top:1px solid rgba(20,35,31,.06)}
@media (max-width:900px){
  .gd-grid{grid-template-columns:1fr}
  .gd-frame{position:relative;top:0;order:-1}
  .gd-steps{flex-direction:row;overflow-x:auto;gap:8px;padding-bottom:6px;scroll-snap-type:x mandatory}
  .gd-steps li{flex:0 0 min(80%,300px);scroll-snap-align:start}
  .gd-s{height:100%;align-items:flex-start;box-shadow:0 0 0 1px var(--line)}
  .gd-s .t span{display:block}
}
@media (prefers-reduced-motion:reduce){.gd-i{transition:none;transform:none}}
.gd-lb{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:clamp(12px,3vw,40px);background:rgba(8,20,16,.82);cursor:zoom-out;border:0;margin:0;max-width:none;max-height:none;width:100%;height:100%}
.gd-lb::backdrop{background:rgba(8,20,16,.82)}
.gd-lb img{max-width:min(1600px,100%);max-height:calc(100vh - 2*clamp(12px,3vw,40px));object-fit:contain;border-radius:12px;box-shadow:0 30px 80px rgba(0,0,0,.5);background:#E4EFE9}
@media (max-width:560px){
  .cycle{display:grid;grid-template-columns:1fr 1fr;width:100%;border-radius:18px;box-sizing:border-box}
  .cycle button{justify-content:center;border-radius:14px;padding:0 10px}
  .specwrap table th:first-child,.specwrap table td:first-child{position:sticky;left:0;z-index:1;background:var(--paper);box-shadow:1px 0 0 var(--line)}
  .specwrap table{min-width:560px}
}
@media (max-width:560px){
  .specwrap table.spec:not(.cmp){min-width:0}
  .spec:not(.cmp),.spec:not(.cmp) tbody,.spec:not(.cmp) tr,.spec:not(.cmp) td{display:block;width:auto!important}
  .spec:not(.cmp) thead{display:none}
  .spec:not(.cmp) tr{padding:14px 0;border-bottom:1px solid var(--line)}
  .spec:not(.cmp) td{border:0;padding:0}
  .spec:not(.cmp) td:first-child{position:static;box-shadow:none;background:none;margin-bottom:4px;color:var(--ink);font-weight:500}
  .spec:not(.cmp) td:nth-child(3){margin-top:8px}
  .facts-t td:first-child{font:500 11px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
}

/* ===== Home hero v2 ("Connect any ___") and Freedom, approved 2026-10-08 ===== */

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.nfacts{display:flex;flex-wrap:wrap;gap:8px 22px;margin:36px 0 0;padding:0;list-style:none;font-size:13.5px;color:var(--ink-3)}
.nfacts li{display:flex;align-items:center;gap:9px}
.nfacts li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--moss)}
.nfacts b{color:var(--ink);font-weight:500}

@keyframes nflow{to{stroke-dashoffset:-64}}

@keyframes nspin{to{transform:rotate(360deg)}}

.v1 .bub{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);width:150px;height:62px;border-radius:16px;border-end-start-radius:5px;background:var(--card);box-shadow:0 0 0 1px var(--line),0 10px 24px -14px rgba(20,35,31,.3)}
.v1 .ly{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:4px;opacity:0;animation:ncyc4 10s infinite}
.v1 .ly:nth-child(2),.v1 .kind span:nth-child(2){animation-delay:2.5s}.v1 .ly:nth-child(3),.v1 .kind span:nth-child(3){animation-delay:5s}.v1 .ly:nth-child(4),.v1 .kind span:nth-child(4){animation-delay:7.5s}
@keyframes ncyc4{0%{opacity:0;transform:translateY(6px)}4%,22%{opacity:1;transform:none}26%,100%{opacity:0;transform:translateY(-6px)}}
.v1 .lines{flex-direction:column;align-items:flex-start;padding:0 16px;gap:7px}
.v1 .lines i{display:block;height:6px;border-radius:4px;background:var(--line-2)}

.v1 .photo i{display:block;width:118px;height:42px;border-radius:9px;background:linear-gradient(135deg,#C9D8CF,#9DB8A9);position:relative}
.v1 .photo i::after{content:"";position:absolute;left:14px;bottom:8px;width:34px;height:20px;background:#6E9650;clip-path:polygon(0 100%,45% 20%,100% 100%)}
.v1 .pdf{gap:10px;font:500 12px var(--f-mono);color:var(--ink-2)}
.v1 .pdf b{display:grid;place-items:center;width:30px;height:38px;border-radius:5px;background:#C84840;color:#fff;font:600 8.5px var(--f-mono)}
.v1 .kind{position:absolute;bottom:12px;left:0;right:0;height:14px;text-align:center;font:500 10.5px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.v1 .kind span{position:absolute;inset-inline:0;opacity:0;animation:ncyc4 10s infinite}
.v2 svg{position:absolute;inset:0;width:100%;height:100%}
.v2 .in{fill:none;stroke:var(--line-2);stroke-width:1.2}

@keyframes ndraw{0%{stroke-dashoffset:140}18%{stroke-dashoffset:0}40%{stroke-dashoffset:0;opacity:1}55%,100%{stroke-dashoffset:0;opacity:0}}
.v2 .src{fill:var(--card);stroke:var(--line-2)}
.v2 .hub{fill:var(--emerald)}

@keyframes ncyc3{0%{opacity:0}5%,30%{opacity:1}36%,100%{opacity:0}}
.v3 .q,.v3 .a{position:absolute;padding:7px 12px;border-radius:13px;font-size:13.5px;white-space:nowrap}
.v3 .q{top:18px;inset-inline-start:16px;background:var(--card);box-shadow:0 0 0 1px var(--line)}
.v3 .a{bottom:18px;inset-inline-end:16px;background:#0D3B3B;color:#F4F1EB}
.v4 .g{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);display:grid;grid-template-columns:repeat(4,20px);gap:7px}
.v4 .g i{display:block;width:20px;height:20px;border-radius:7px;background:var(--emerald);opacity:0;transform:scale(.4);animation:ngrow 8s infinite}
@keyframes ngrow{0%{opacity:0;transform:scale(.4)}8%,70%{opacity:1;transform:none}80%,100%{opacity:0;transform:scale(.4)}}
.v4 .g i.one{animation:none;opacity:1;transform:none}
.v4 .cnt{position:absolute;bottom:10px;inset-inline:0;text-align:center;font:500 10.5px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}

@media (prefers-reduced-motion:reduce){
  
  .v1 .ly:first-child,.v1 .kind span:first-child{opacity:1}
  
  .v4 .g i{opacity:1;transform:none}
}

/* ===== Home hero, option 3 ("Answer any message") ===== */
.o3 svg.i{width:1em;height:1em;flex:none;fill:currentColor}
/* option 3 */
.o3{padding:clamp(28px,6vw,72px) 0 clamp(40px,6vw,80px)}
.o3 .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(24px,4vw,64px);align-items:center}
.o3 h1{font-weight:500;font-size:clamp(36px,4.3vw,62px);line-height:1.04;letter-spacing:-.035em;margin:18px 0 0}
.o3 h1 .l1{white-space:nowrap}.o3 h1 .l2{display:block;color:var(--ink-2);font-weight:400}
.o3 .rot{display:inline-block;position:relative;vertical-align:bottom;color:var(--emerald);transition:width .55s var(--ease);height:1.08em;overflow:hidden}
.o3 .rot span{position:absolute;inset-inline-start:0;top:0;white-space:nowrap;transform:translateY(105%);opacity:0;transition:transform .55s var(--ease),opacity .4s var(--ease)}
.o3 .rot span.on{transform:none;opacity:1}.o3 .rot span.out{transform:translateY(-105%);opacity:0}
.o3 .rot::after{content:"";position:absolute;inset-inline:0;bottom:.06em;height:2px;background:currentColor;opacity:.25}
.o3 .ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

@keyframes o3cy{0%{opacity:0;transform:translateY(14px)}2%,24%{opacity:1;transform:none}26.5%,100%{opacity:0;transform:translateY(-10px)}}

@media (max-width:560px){.o3 h1{font-size:34px}.o3 h1 .l1{white-space:normal}}
@media (max-width:900px){.o3 .wrap{grid-template-columns:minmax(0,1fr)}}

:root[data-theme="dark"] .o3 .rot{color:#7FC4A6}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .o3 .rot{color:#7FC4A6}}

/* ---- art direction: artwork behind product screens ---- */

.cta-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.plate.cta::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(70% 70% at 50% 50%,rgba(6,20,18,.62) 0%,rgba(6,20,18,.35) 60%,rgba(6,20,18,.15) 100%)}
.hstack{display:flex;flex-direction:column;gap:28px;margin-top:clamp(64px,8vw,110px)}
.hstack .sc{position:sticky;top:84px;min-height:540px;border-radius:var(--r-plate);overflow:hidden;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);color:#fff;box-shadow:0 -24px 60px -30px rgba(0,0,0,.45);isolation:isolate}
.hstack .sc:nth-child(2){top:100px}.hstack .sc:nth-child(3){top:116px}
.hstack .sc-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hstack .shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(6,20,18,.84) 0%,rgba(6,20,18,.55) 42%,rgba(6,20,18,0) 75%)}
.hstack .lightc{color:#14231F}.hstack .lightc .shade{background:linear-gradient(90deg,rgba(247,245,240,.95) 0%,rgba(247,245,240,.72) 42%,rgba(247,245,240,0) 75%)}
.hstack .txt{padding:clamp(40px,5vw,72px) clamp(24px,4vw,56px);display:flex;flex-direction:column;justify-content:center;gap:16px;align-items:flex-start}
.hstack .txt .eyebrow{color:inherit;opacity:.75}
.hstack h2{font-size:clamp(30px,3.4vw,46px);line-height:1.05;letter-spacing:-.03em;font-weight:500;margin:0}
.hstack p{opacity:.85;max-width:42ch;margin:0}
.hstack .shot{align-self:center;margin:40px 40px 40px 0;border-radius:14px;overflow:hidden;box-shadow:0 30px 70px -25px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.2)}
.hstack .shot img{display:block;width:100%;height:auto}
/* Plain cards: the artwork is kept for the hero, the first card and the closing banner (owner, 2026-10-09) */
.hstack .plain{background:#EDF2EC;box-shadow:0 -24px 60px -34px rgba(11,42,34,.35),0 0 0 1px rgba(20,35,31,.07)}
.hstack .plain.alt{background:#F7F5F0}
.hstack .plain .shot{box-shadow:0 30px 60px -30px rgba(11,42,34,.35),0 0 0 1px rgba(20,35,31,.08)}
/* Proof: customer logos under the hero, one story before the closing banner */

/* Hero: one readable moment instead of the whole inbox at a small size */

@keyframes o5ui2{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}

@media (max-width:900px){
  
  .hstack .sc{grid-template-columns:1fr;min-height:0;position:relative;top:auto!important}
  .hstack .txt{padding:36px 22px 8px}
  .hstack .shot{margin:16px 18px 24px}
  .hstack .shade{background:linear-gradient(180deg,rgba(6,20,18,.86) 0%,rgba(6,20,18,.55) 55%,rgba(6,20,18,.2) 100%)}
  .hstack .lightc .shade{background:linear-gradient(180deg,rgba(247,245,240,.95) 0%,rgba(247,245,240,.72) 55%,rgba(247,245,240,.2) 100%)}
}

/* ---- art bands on inner pages (build/art.py, assets/art.js) ---- */
.art-band{margin-top:clamp(28px,4vw,56px)}
.ab-v{position:relative;border-radius:var(--r-plate);overflow:hidden;isolation:isolate}
.ab-v.dark{background:radial-gradient(120% 120% at 70% 20%,#123F38 0%,#0B2523 55%,#06110F 100%);color:#E9E2CF}
.ab-globe{display:block;width:100%;height:clamp(320px,38vw,480px)}
.ab-cap{position:absolute;inset-inline-start:clamp(18px,3vw,36px);bottom:clamp(16px,3vw,32px);max-width:34ch;display:flex;flex-direction:column;gap:6px}
.ab-cap .eyebrow{color:#7FC4A6}.ab-cap p{margin:0;color:#E9E2CF;font-size:15px}
.ab-flow{display:block;width:100%;height:auto}
.ab-v.pattern{background:#0D3B3B;color:#fff;min-height:clamp(320px,34vw,420px);display:grid;place-items:center;text-align:center}
.ab-geo{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.ab-mid{display:flex;flex-direction:column;align-items:center;gap:16px;padding:48px 20px}
.ab-mid .eyebrow{color:#7FC4A6}
.ab-mid h2{font-size:clamp(28px,3.4vw,46px);line-height:1.06;letter-spacing:-.03em;font-weight:500;margin:0;max-width:18ch}
.ab-v.pebbles{background:#F7F5F0;aspect-ratio:16/6}
.ab-v.pebbles img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:75% 45%}
.ab-v.dots{padding:clamp(18px,3vw,32px);padding-top:clamp(86px,9vw,110px)}
.ab-dots{display:block;width:100%;height:auto}
.ab-k{position:absolute;top:clamp(18px,3vw,28px);inset-inline-start:clamp(18px,3vw,32px);display:flex;flex-direction:column;color:#fff}
.ab-k b{font-size:clamp(36px,4vw,52px);font-weight:400;letter-spacing:-.03em;line-height:1}.ab-k span{font-size:13px;color:#7FC4A6}
.ab-ph{position:absolute;top:16px;inset-inline-end:16px;font:500 11px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.1);color:#E9E2CF}
.ab-layers{display:flex;flex-direction:column}
.ab-layers .ly{position:sticky;top:84px;display:grid;grid-template-columns:60px 180px 1fr;gap:16px;align-items:center;padding:clamp(26px,3vw,38px) clamp(20px,3vw,32px);border-radius:22px;background:var(--c);color:var(--t);margin-top:-14px;box-shadow:0 -14px 30px -18px rgba(0,0,0,.35)}
.ab-layers .ly:first-child{margin-top:0}
.ab-layers .ly:nth-child(2){top:98px}.ab-layers .ly:nth-child(3){top:112px}.ab-layers .ly:nth-child(4){top:126px}
.ab-layers .n{font:500 12px var(--f-mono);letter-spacing:.1em;opacity:.75}
.ab-layers b{font-size:clamp(22px,2.2vw,28px);font-weight:400;letter-spacing:-.02em}
.ab-layers span:last-child{opacity:.85}
.ab-covers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.ab-cov{display:flex;flex-direction:column;gap:12px;color:inherit;text-decoration:none}
.ab-cov .art{position:relative;display:block;border-radius:18px;overflow:hidden;aspect-ratio:16/10}
.ab-cov .art>img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.ab-cov:hover .art>img{transform:scale(1.05)}
.ab-cov .lk{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:10px;color:#fff;font-size:clamp(17px,1.7vw,22px);font-weight:500;letter-spacing:-.01em;text-align:center;padding:12px}
.ab-cov .lk img{width:26px;height:26px;filter:brightness(0) invert(1)}
.ab-cov .lk.ink{color:#0D3B3B}.ab-cov .lk.ink img{filter:none}
.ab-cov .t{font-size:17px;line-height:1.3;letter-spacing:-.01em}
@media (max-width:900px){
  .ab-covers{grid-template-columns:1fr 1fr}
  .ab-layers .ly{grid-template-columns:40px 1fr;top:72px!important}
  .ab-layers .ly span:last-child{grid-column:1/-1}
  .ab-v.pebbles{aspect-ratio:4/3}
}
@media (max-width:520px){.ab-covers{grid-template-columns:1fr}}
.ab-flow{direction:ltr}

/* ---- hero option 5: centered, product rising out of the artwork (Cohere layout) ---- */

@keyframes o5art{from{transform:scale(1.06)}to{transform:none}}
@keyframes o5ui{from{transform:translate(-50%,46px)}to{transform:translate(-50%,0)}}
@keyframes o5uir{from{transform:translate(50%,46px)}to{transform:translate(50%,0)}}

/* ---- integrations page ---- */
.int-hero{padding-top:clamp(28px,5vw,64px);text-align:center}
.ih-t{max-width:860px;margin:0 auto}
.ih-t h1{font-size:clamp(42px,6.2vw,88px);line-height:1;letter-spacing:-.04em;font-weight:500;margin:16px 0 0}
.ih-t p{max-width:56ch;margin:20px auto 0;color:var(--ink-2);font-size:18px}
.ih-t .ctas{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:30px}
.ih-v{position:relative;margin:clamp(28px,4vw,48px) auto 0;border-radius:var(--r-plate);overflow:hidden;background:radial-gradient(120% 120% at 50% 40%,#123F38 0%,#0B2523 55%,#06110F 100%)}
.hub{display:block;width:100%;height:auto}
.hub .orb{fill:none;stroke:rgba(127,196,166,.18);stroke-width:1;stroke-dasharray:2 6}
.hub .sp{stroke:rgba(127,196,166,.22);stroke-width:1}
.hub .sp.paid{stroke:rgba(212,175,55,.28)}.hub .sp.soon{stroke:rgba(233,226,207,.12);stroke-dasharray:3 5}
.hub .pl.live{fill:#7FC4A6}.hub .pl.paid{fill:#D4AF37}
.hub .core{fill:#0D3B3B;stroke:#7FC4A6;stroke-width:1.4}
.hub .corel{fill:#fff;font:600 13px var(--f-sans);letter-spacing:.2em}
.hub .halo{transform-origin:500px 300px;animation:halo 4s ease-in-out infinite}
.hub .nd rect{filter:drop-shadow(0 8px 14px rgba(0,0,0,.35))}
.hub .nd .ndi{color:#fff;fill:#fff}
.hub .nd.soon{opacity:.55}
.hub .nd{transition:transform .4s var(--ease)}
@keyframes halo{50%{transform:scale(1.18);opacity:.6}}
.ih-stats{list-style:none;margin:clamp(20px,3vw,32px) auto 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));max-width:900px;border-top:1px solid var(--line)}
.ih-stats li{display:flex;flex-direction:column;gap:2px;padding:18px 10px}
.ih-stats b{font-size:clamp(28px,3vw,40px);font-weight:500;letter-spacing:-.03em;line-height:1}
.ih-stats span{color:var(--ink-3);font-size:13.5px}
.ft-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.ft-card{display:flex;flex-direction:column;border-radius:22px;overflow:hidden;background:var(--card);box-shadow:0 0 0 1px var(--line);color:inherit;text-decoration:none;transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.ft-card:hover{transform:translateY(-4px);box-shadow:0 0 0 1px var(--line),0 30px 60px -30px rgba(11,42,34,.45)}
.ft-art{position:relative;display:block;aspect-ratio:16/10;overflow:hidden}
.ft-art>img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.ft-card:hover .ft-art>img{transform:scale(1.06)}
.ft-tiles{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:14px}
.ft-t{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:36%;aspect-ratio:1;border-radius:16px;background:rgba(255,255,255,.14);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);color:#fff;font-size:13px;text-align:center;padding:8px}
.ft-t b{font-weight:500}
.ft-tiles i{flex:1;max-width:60px;height:1px;background:rgba(255,255,255,.85);position:relative;overflow:visible}
.ft-tiles i::after{content:"";position:absolute;top:-3px;left:0;width:7px;height:7px;border-radius:50%;background:#fff;animation:ftp 2.4s var(--ease) infinite}
@keyframes ftp{from{left:0;opacity:0}20%{opacity:1}80%{opacity:1}to{left:calc(100% - 7px);opacity:0}}
.ft-body{display:flex;flex-direction:column;gap:8px;padding:20px 22px 22px}
.ft-body>b{font-size:20px;font-weight:500;letter-spacing:-.015em}
.ft-body>span{color:var(--ink-2);font-size:15px}
.ft-more{display:inline-flex;align-items:center;gap:6px;color:var(--ink)!important;font-weight:500;margin-top:4px}
.ft-more .ia{width:14px;height:14px;transition:transform .35s var(--ease)}
.ft-card:hover .ft-more .ia{transform:translateX(4px)}
[dir="rtl"] .ft-card:hover .ft-more .ia{transform:translateX(-4px) scaleX(-1)}
.it-logo{display:grid;place-items:center;flex:none;border-radius:13px;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 8px 18px -10px rgba(0,0,0,.45);transition:transform .45s var(--ease)}
.it-logo svg{fill:currentColor}
.it-logo.md{width:46px;height:46px}.it-logo.md svg{width:24px;height:24px}
.it-logo.sm{width:40px;height:40px;border-radius:11px}.it-logo.sm svg{width:21px;height:21px}
.dir-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:22px}
.dir-head h2{margin:8px 0 0}
.dir-tools{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.dir-tabs{display:inline-flex;padding:4px;border-radius:999px;background:var(--sand);gap:2px}
.dir-tabs button{all:unset;cursor:pointer;padding:8px 16px;border-radius:999px;font-size:14px;color:var(--ink-2);transition:background .25s,color .25s}
.dir-tabs button[aria-selected="true"]{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.dir-tabs button:focus-visible{outline:2px solid var(--emerald)}
.dir-search{display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;background:var(--card);box-shadow:0 0 0 1px var(--line);min-width:240px}
.dir-search .ia{width:16px;height:16px;color:var(--ink-3)}
.dir-search input{all:unset;flex:1;min-width:0;width:100%;font-size:14px;color:var(--ink)}
.dir-search:focus-within{box-shadow:0 0 0 2px var(--emerald)}
.it-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.it-card{display:flex;flex-direction:column;gap:10px;padding:20px;border-radius:20px;background:var(--card);box-shadow:0 0 0 1px var(--line);color:inherit;text-decoration:none;min-height:220px;transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.it-card[hidden]{display:none}
a.it-card:hover{transform:translateY(-4px);box-shadow:0 0 0 1px var(--line),0 24px 50px -28px rgba(11,42,34,.4)}
a.it-card:hover .it-logo{transform:scale(1.08) rotate(-3deg)}
.it-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:6px}
.it-st{font:500 10.5px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;padding:4px 9px;border-radius:999px;background:rgba(122,160,90,.14);color:#3E6B2F}
.it-st.paid{background:rgba(212,175,55,.16);color:#8A6412}.it-st.soon{background:var(--sand);color:var(--ink-3)}
.it-name{font-size:18px;font-weight:500;letter-spacing:-.01em}
.it-desc{color:var(--ink-2);font-size:14.5px;line-height:1.45;flex:1}
.it-how{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:12px;border-top:1px solid var(--line);font:500 11.5px var(--f-mono);letter-spacing:.04em;color:var(--ink-3)}
.it-how .ia{width:14px;height:14px;color:var(--ink);transition:transform .35s var(--ease)}
a.it-card:hover .it-how .ia{transform:translateX(4px)}
[dir="rtl"] .it-how .ia{transform:scaleX(-1)}[dir="rtl"] a.it-card:hover .it-how .ia{transform:translateX(-4px) scaleX(-1)}
.it-card.soon .it-logo{filter:saturate(.6);opacity:.85}
.dir-empty{margin-top:18px;color:var(--ink-2)}
.dev-band{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(24px,4vw,56px);align-items:center;padding:clamp(28px,4vw,56px);border-radius:var(--r-plate);background:#0B2523;color:#E9E2CF;overflow:hidden;position:relative;isolation:isolate}
.dev-band::before{content:"";position:absolute;inset:0;z-index:-1;background:url(/media/art/contour-dark.webp) center/cover;opacity:.55}
.dev-t .eyebrow{color:#7FC4A6}
.dev-t h2{color:#fff;margin:10px 0 0}
.dev-t p{color:#A9BDB2;margin:16px 0 0;max-width:46ch}
.dev-pts{list-style:none;padding:0;margin:18px 0 26px;display:grid;gap:8px}
.dev-pts li{display:flex;gap:10px;align-items:center;color:#E9E2CF;font-size:15px}
.dev-pts li::before{content:"";width:6px;height:6px;border-radius:50%;background:#D4AF37;flex:none}
.dev-code{border-radius:16px;background:rgba(6,17,15,.86);box-shadow:0 0 0 1px rgba(127,196,166,.18),0 30px 60px -30px rgba(0,0,0,.6);overflow:hidden;direction:ltr;text-align:left}
.dc-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:1px solid rgba(127,196,166,.14)}
.dc-bar i{width:9px;height:9px;border-radius:50%;background:rgba(233,226,207,.18)}
.dc-bar span{margin-inline-start:auto;font:500 11px var(--f-mono);color:#7FC4A6}
.dev-code pre{margin:0;padding:18px 20px;overflow:auto;font:500 13px/1.7 var(--f-mono);color:#E9E2CF}
.dev-code .k{color:#D4AF37}.dev-code .c{color:#77857E}.dev-code .s{color:#7FC4A6}.dev-code .v{color:#E9C46A}.dev-code .n{color:#9ED9C4}
.req{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:clamp(24px,3vw,36px);border-radius:22px;background:var(--sand)}
.req h2{margin:0;font-size:clamp(24px,2.6vw,34px)}
.req p{margin:8px 0 0;color:var(--ink-2)}
@media (prefers-reduced-motion:reduce){.hub .halo,.ft-tiles i::after{animation:none}}
@media (max-width:1100px){.it-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){
  .ft-grid{grid-template-columns:1fr}
  .it-grid{grid-template-columns:1fr 1fr}
  .dev-band{grid-template-columns:1fr}
  .ih-stats{grid-template-columns:1fr 1fr}
  .dir-search{min-width:0;flex:1}
  .dir-tools{width:100%}
  .dir-tabs{overflow:auto;max-width:100%}
}
@media (max-width:520px){.it-grid{grid-template-columns:1fr}.it-card{min-height:0}}
[dir="rtl"] .ft-more .ia{transform:scaleX(-1)}

/* Book a demo */
.bk-wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr);gap:20px;align-items:start}
.bk-info{display:flex;flex-direction:column;gap:22px;padding:28px;border-radius:22px;background:var(--sand)}
.bk-host{display:flex;align-items:center;gap:14px}.bk-host img{width:44px;height:44px;padding:9px;border-radius:12px;background:var(--card);box-shadow:0 0 0 1px var(--line)}
.bk-host b{display:block;font-size:17px;font-weight:500}.bk-host span{font-size:14px;color:var(--ink-2)}
.bk-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px;border-top:1px solid var(--line);padding-top:20px}
.bk-list li{display:flex;flex-direction:column;gap:3px}.bk-list b{font-weight:500}.bk-list span{color:var(--ink-2);font-size:14.5px}
.bk-alt{margin:0;font-size:14px;color:var(--ink-2)}
.bk-box{border-radius:22px;background:var(--card);box-shadow:0 0 0 1px var(--line),0 30px 60px -40px rgba(11,42,34,.35);overflow:hidden}
.cal-live{width:100%;min-height:620px}

.bk-cal{padding:26px;border-inline-end:1px solid var(--line)}
.bk-mhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.bk-mhead b{font-size:17px;font-weight:500}
.bk-mhead button{all:unset;cursor:pointer;width:34px;height:34px;display:inline-grid;place-items:center;border-radius:999px;font-size:20px;color:var(--ink)}
.bk-mhead button:hover{background:var(--sand)}.bk-mhead button:disabled{opacity:.3;cursor:default;background:none}
.bk-mhead button:focus-visible{outline:2px solid var(--emerald)}
[dir="rtl"] .bk-mhead span{display:flex;flex-direction:row-reverse}
.bk-wk,.bk-days{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center}
.bk-wk span{font:500 11px var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);padding-bottom:8px}
.bk-days button{all:unset;box-sizing:border-box;cursor:pointer;aspect-ratio:1;display:grid;place-items:center;border-radius:12px;font-size:15px;font-variant-numeric:tabular-nums;background:rgba(127,196,166,.16);color:var(--ink);font-weight:500;transition:background .2s,transform .2s var(--ease)}
.bk-days button:hover{background:rgba(127,196,166,.32)}.bk-days button:active{transform:scale(.94)}
.bk-days button:disabled{background:none;color:var(--ink-3);font-weight:400;cursor:default;opacity:.55}
.bk-days button.today{box-shadow:inset 0 0 0 1.5px var(--emerald)}
.bk-days button[aria-pressed="true"]{background:var(--btn);color:var(--btn-ink)}
.bk-days button:focus-visible,.bk-slots button:focus-visible{outline:2px solid var(--emerald);outline-offset:2px}
.bk-tz{margin:16px 0 0;font-size:13px;color:var(--ink-3)}
.bk-side{padding:26px;display:flex;flex-direction:column}
.bk-pane{display:none;flex-direction:column;gap:14px;animation:bkIn .45s var(--ease)}

@keyframes bkIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.bk-hint{margin:0;color:var(--ink-2)}
.bk-slots{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;max-height:340px;overflow:auto;padding:2px}
.bk-slots button{all:unset;box-sizing:border-box;cursor:pointer;text-align:center;padding:11px 8px;border-radius:12px;box-shadow:inset 0 0 0 1px var(--line-2);font-weight:500;font-variant-numeric:tabular-nums;transition:background .2s,box-shadow .2s}
.bk-slots button:hover{box-shadow:inset 0 0 0 1.5px var(--emerald);background:rgba(127,196,166,.1)}
.bk-form label{display:flex;flex-direction:column;gap:6px;font-size:13.5px;color:var(--ink-2)}
.bk-form .opt{color:var(--ink-3)}
.bk-form input,.bk-form textarea{font:inherit;font-size:15px;color:var(--ink);background:var(--paper);border:1px solid var(--line-2);border-radius:12px;padding:10px 12px;resize:vertical}
.bk-form input:focus,.bk-form textarea:focus{outline:2px solid var(--emerald);outline-offset:0;border-color:transparent}
.bk-row{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:4px}
.bk-done{align-items:flex-start}.bk-done svg{width:44px;height:44px;fill:none;stroke:var(--emerald);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.bk-done b{font-size:22px;font-weight:500}.bk-done p{margin:0;color:var(--ink-2)}
.bk-note{font-size:13px;color:var(--ink-3)!important;padding:8px 12px;border-radius:10px;background:var(--sand)}
.cbox .btn{align-self:flex-start;margin-top:12px}
@media (max-width:900px){.bk-wrap{grid-template-columns:1fr}.bk-box{order:-1}}
@media (max-width:640px){.bk-cal{border-inline-end:0;border-bottom:1px solid var(--line);padding:18px}.bk-side{padding:18px}.bk-days{gap:3px}.bk-days button{border-radius:10px;font-size:14px}}
@media (prefers-reduced-motion:reduce){.bk-pane{animation:none}}

/* Home: what it handles (six wh) */

/* the little previews */

.mail{gap:10px}

.mail .from{margin-top:auto;font:500 11.5px var(--f-mono);color:var(--ink-3)}
.order{gap:0}
.order .or{display:flex;justify-content:space-between;gap:10px;padding:9px 2px;border-bottom:1px dashed var(--line-2)}
.order .or b{font-weight:500;font-variant-numeric:tabular-nums}

.book .day{flex:none;display:flex;flex-direction:column;align-items:center;width:46px;padding:6px 0;border-radius:10px;background:var(--sand)}
.book .day span{font:500 10.5px var(--f-mono);text-transform:uppercase;color:var(--ink-3)}.book .day b{font-size:20px;font-weight:600}
.book .slot b{display:block;font-weight:600}.book .slot span{color:var(--ink-2)}

.voice .in{align-self:flex-start;background:var(--card);box-shadow:0 0 0 1px var(--line)}
.voice .out{align-self:flex-end;background:#0D3B3B;color:#EEF3EE}
.voice .pl{flex:none;width:0;height:0;border-block:6px solid transparent;border-inline-start:9px solid currentColor}
[dir="rtl"] .voice .pl{transform:scaleX(-1)}
.voice .wv{display:flex;align-items:center;gap:2px;height:22px}
.voice .wv i{width:2.5px;border-radius:2px;background:currentColor;opacity:.55;animation:jw 1.6s ease-in-out infinite;transform-origin:center}
.voice .wv i:nth-child(3n){animation-delay:-.4s}.voice .wv i:nth-child(3n+1){animation-delay:-.9s}
@keyframes jw{50%{transform:scaleY(.55)}}
.voice .t{font:500 11px var(--f-mono);opacity:.7}
.voice .tr{align-self:flex-start;font-size:12.5px;font-style:italic;color:var(--ink-2);padding-inline-start:4px}

@media (prefers-reduced-motion:reduce){.voice .wv i{animation:none}}

/* what it handles: scenes */

@keyframes whTyp{0%{opacity:0;max-height:0;padding-block:0;margin-block:-4px}12%,80%{opacity:1;max-height:30px;padding-block:10px;margin-block:0}100%{opacity:0;max-height:0;padding-block:0;margin-block:-4px}}
@keyframes whDot{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-3px);opacity:1}}

@keyframes whOk{0%{transform:scale(.8)}60%{transform:scale(1.06)}100%{transform:none}}

.book .m{max-width:82%;padding:8px 12px;border-radius:14px;align-self:flex-start;background:var(--card);box-shadow:0 0 0 1px var(--line);border-end-start-radius:4px}

/* Home: works with */
.wk{padding-block:clamp(64px,8vw,112px);overflow:hidden}
.wk-head{text-align:center;max-width:760px;margin:0 auto}
.wk-head h2{font-weight:500;font-size:clamp(28px,3.4vw,44px);letter-spacing:-.03em;line-height:1.08;margin:14px 0 0;text-wrap:balance}
.wk-rows{display:flex;flex-direction:column;gap:12px;margin-top:44px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.wk-row{display:flex;direction:ltr}
.wk-track{display:flex;width:max-content;animation:wkMove 170s linear infinite}
.wk-row.rev .wk-track{animation-direction:reverse;animation-duration:150s}
.wk-rows:hover .wk-track{animation-play-state:paused}
.wk-set{display:flex;gap:12px;padding-inline-end:12px}
@keyframes wkMove{to{transform:translateX(-50%)}}
.wk-p{display:inline-flex;align-items:center;gap:10px;padding:12px 18px 12px 14px;border-radius:999px;background:var(--card);box-shadow:0 0 0 1px var(--line);font-size:15px;font-weight:500;white-space:nowrap;color:var(--ink)}
.wk-p svg{width:22px;height:22px;fill:currentColor;flex:none}
.wk-cred{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:44px}
.wk-c{display:flex;gap:14px;align-items:flex-start;padding:20px;border-radius:18px;background:var(--sand)}
.wk-c b{display:block;font-weight:500;font-size:16px;margin-bottom:4px}
.wk-c span{color:var(--ink-2);font-size:14.5px;line-height:1.45}
.wk-ci{flex:none;display:flex;align-items:center;justify-content:center;gap:4px;width:48px;height:48px;border-radius:14px;background:var(--card);box-shadow:0 0 0 1px var(--line);color:var(--ink)}
.wk-ci.two{width:64px}
.wk-ci svg{width:24px;height:24px;fill:currentColor}.wk-ci.two svg{width:20px;height:20px}
.wk-c.meta{background:linear-gradient(135deg,rgba(4,103,223,.1),rgba(4,103,223,.03));box-shadow:inset 0 0 0 1px rgba(4,103,223,.22)}
.wk-all{display:flex;align-items:center;justify-content:center;gap:6px;width:max-content;margin:28px auto 0;font-weight:500;font-size:15px}
.wk-all .ia{width:15px;height:15px;transition:transform .35s var(--ease)}.wk-all:hover .ia{transform:translateX(4px)}
[dir="rtl"] .wk-all .ia{transform:scaleX(-1)}[dir="rtl"] .wk-all:hover .ia{transform:translateX(-4px) scaleX(-1)}
@media (max-width:900px){.wk-cred{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.wk-x{display:none}.wk-track{animation:none}.wk-row{justify-content:center}.wk-set+.wk-set{display:none}.wk-set{flex-wrap:wrap;justify-content:center;width:min(100%,1100px);padding-inline:16px}.wk-rows{-webkit-mask-image:none;mask-image:none}}

/* AI assistants and API */
.dv-hero .ctas{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.dv-logos{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 10px;margin-top:30px;font-size:14.5px;color:var(--ink-2)}
.dv-logos svg{width:20px;height:20px;fill:currentColor}.dv-logos span:not(.dv-c){margin-inline-end:10px}
.dv-c{display:inline-flex;color:var(--ink)}.dv-more{color:var(--ink-3)}
.dv-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center}
.dv-split h2{font-weight:500;font-size:clamp(30px,3.6vw,46px);letter-spacing:-.03em;line-height:1.06;margin:14px 0 0;text-wrap:balance}
.dv-lead{color:var(--ink-2);font-size:17px;margin:16px 0 0}
.dv-steps{list-style:none;counter-reset:s;margin:28px 0 0;padding:0;display:flex;flex-direction:column;gap:18px}
.dv-steps li{counter-increment:s;display:grid;grid-template-columns:34px 1fr;column-gap:14px;row-gap:4px}
.dv-steps li::before{content:counter(s);grid-row:span 3;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--sand);font:500 13px var(--f-mono)}
.dv-steps b{font-weight:500}.dv-steps span{color:var(--ink-2);font-size:15px}
.dv-url{justify-self:start;margin-top:4px;padding:8px 12px;border-radius:10px;background:var(--card);box-shadow:0 0 0 1px var(--line);font:500 14px var(--f-mono);direction:ltr}
.dv-chat{margin:0;padding:20px;border-radius:24px;background:var(--card);box-shadow:0 0 0 1px var(--line),0 40px 80px -50px rgba(11,42,34,.5);display:flex;flex-direction:column;gap:12px;font-size:14.5px}
.dv-ch{display:flex;align-items:center;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.dv-av{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:rgba(217,119,87,.12)}.dv-av svg{width:18px;height:18px;fill:currentColor}
.dv-ch b{font-weight:500}
.dv-yz{margin-inline-start:auto;display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;background:var(--sand);font-size:12.5px;color:var(--ink-2)}.dv-yz img{width:13px}
.dv-msg{padding:11px 14px;border-radius:16px;line-height:1.5}
.dv-msg.me{align-self:flex-end;max-width:85%;background:var(--sand)}
.dv-msg.ai p{margin:0}.dv-msg.ai ul{margin:8px 0;padding-inline-start:18px;display:flex;flex-direction:column;gap:6px}.dv-msg.ai{padding-inline:2px}
.dv-tool{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;font:500 12px var(--f-mono);color:var(--ink-3)}
.dv-tool svg{width:14px;height:14px;fill:#1F6F5E}
.dv-chat figcaption{font:500 11px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);align-self:flex-end}
.dv-cans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:64px}
.dv-can{padding:24px;border-radius:20px;background:var(--card);box-shadow:0 0 0 1px var(--line)}
.dv-can b{display:block;font-size:19px;font-weight:500;margin-top:16px}
.dv-sc{display:inline-block;margin-top:6px;font:500 11px var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.dv-can ul{margin:16px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.dv-can li{display:flex;gap:10px;color:var(--ink-2);font-size:15px}
.dv-can li::before{content:"";flex:none;width:6px;height:6px;margin-top:8px;border-radius:50%;background:#7FC4A6}
.dv-i{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--sand)}.dv-i svg{width:20px;height:20px;fill:currentColor}
.dv-asks{margin-top:16px;padding:22px 24px;border-radius:20px;background:var(--sand)}
.dv-asks ul{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0;padding:0;list-style:none}
.dv-asks li{padding:9px 14px;border-radius:999px;background:var(--card);box-shadow:0 0 0 1px var(--line);font-size:14.5px}
.dv-safe{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:48px;padding-top:36px;border-top:1px solid var(--line)}
.dv-safe>div{display:flex;flex-direction:column;gap:6px}
.dv-safe b{font-weight:500;margin-top:8px}.dv-safe span:last-child{color:var(--ink-2);font-size:14.5px}
.dv-dev{padding:clamp(28px,4vw,52px);border-radius:28px;background:var(--sand)}
.dv-cols{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(24px,4vw,48px);margin-top:36px}
.dv-cols h3{font-size:21px;font-weight:500;margin:0}
.dv-sm{color:var(--ink-2);font-size:15px;margin:8px 0 16px}
.dv-code{margin:0 0 16px;padding:16px 18px;border-radius:14px;background:#0B1A16;color:#E9E2CF;font:500 13px/1.7 var(--f-mono);overflow:auto;direction:ltr;text-align:left}
.dv-code .c{color:#77857E}
.dv-tw{overflow-x:auto;border-radius:14px;background:var(--card);box-shadow:0 0 0 1px var(--line)}
.dv-t{width:100%;border-collapse:collapse;font-size:14px}
.dv-t td{padding:10px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
.dv-t tr:last-child td{border-bottom:0}
.dv-t td:nth-child(2){direction:ltr;text-align:start}
.dv-t code,.dv-ev code{font:500 12.5px var(--f-mono);white-space:nowrap}
.dv-t td:last-child{color:var(--ink-2)}
.dv-m{display:inline-block;min-width:46px;text-align:center;padding:3px 6px;border-radius:6px;font:600 10.5px var(--f-mono)}
.dv-m.get{background:rgba(127,196,166,.22);color:#1F6F5E}.dv-m.post{background:rgba(212,175,55,.2);color:#8A6412}.dv-m.patch{background:rgba(66,133,244,.15);color:#2B5FB8}
.dv-ev{list-style:none;margin:0;padding:0;border-radius:14px;background:var(--card);box-shadow:0 0 0 1px var(--line)}
.dv-ev li{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:11px 14px;border-bottom:1px solid var(--line);font-size:14px}
.dv-ev li:last-child{border-bottom:0}.dv-ev span{color:var(--ink-2);text-align:end}
.dv-ev code{direction:ltr}
.dv-cols code:not(.dv-t code){font:500 13px var(--f-mono)}
a.wk-c{color:inherit;text-decoration:none;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}a.wk-c:hover{transform:translateY(-3px);box-shadow:0 20px 40px -26px rgba(11,42,34,.35)}
:root[data-theme="dark"] .dv-m.get{color:#7FC4A6}:root[data-theme="dark"] .dv-m.post{color:#E9C46A}:root[data-theme="dark"] .dv-m.patch{color:#8AB4F8}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .dv-m.get{color:#7FC4A6}:root:not([data-theme="light"]) .dv-m.post{color:#E9C46A}:root:not([data-theme="light"]) .dv-m.patch{color:#8AB4F8}}
@media (max-width:980px){.dv-split,.dv-cols,.dv-cans{grid-template-columns:minmax(0,1fr)}.dv-safe{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.dv-safe{grid-template-columns:1fr}}
@media (max-width:520px){.dv-ev li{flex-direction:column;align-items:flex-start;gap:2px}.dv-ev span{text-align:start}.dv-url{font-size:12.5px}}
/* AI assistants and API: backgrounds */
.dv-hero{padding-top:clamp(16px,2vw,28px)}
.dv-stage{position:relative;overflow:hidden;border-radius:32px;background:#06201C;isolation:isolate;box-shadow:0 50px 100px -60px rgba(6,32,28,.8)}
.dv-stage .dv-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;opacity:.9;animation:dvPan 40s ease-in-out infinite alternate}
@keyframes dvPan{from{transform:scale(1.06) translate(0,0)}to{transform:scale(1.14) translate(-2%,1.5%)}}
.dv-stage::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 60% 70% at 50% 45%,rgba(6,32,28,.82),rgba(6,32,28,.35) 70%,rgba(6,32,28,.15)),linear-gradient(180deg,rgba(6,32,28,.2),rgba(6,32,28,.6))}
.dv-net{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.dv-in{text-align:center;padding:clamp(56px,8vw,112px) clamp(20px,4vw,48px) clamp(48px,6vw,80px);color:#EEF3EE}
.dv-in .crumb{justify-content:center;color:rgba(238,243,238,.6)}
.dv-in .crumb span{color:inherit}
.dv-in h1{font-weight:500;font-size:clamp(38px,6vw,84px);letter-spacing:-.04em;line-height:1.02;margin:18px auto 0;max-width:15ch;text-wrap:balance;color:#fff}
.dv-in>p{max-width:620px;margin:22px auto 0;font-size:18px;color:rgba(238,243,238,.78)}
.dv-in .btn.dark{background:#F4F1EB;color:#14231F}
.dv-in .btn.line{border-color:rgba(255,255,255,.3);color:#fff}.dv-in .btn.line:hover{background:rgba(255,255,255,.08)}
.dv-in .dv-logos{color:rgba(238,243,238,.72)}.dv-in .dv-logos .dv-c{color:#fff}.dv-in .dv-more{color:rgba(238,243,238,.5)}
.dv-in .dv-logos svg[style*="currentColor"]{color:#fff}
.dv-in .dv-logos{display:inline-flex;margin-top:34px;padding:10px 18px;border-radius:999px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.dv-frame{position:relative;border-radius:28px;overflow:hidden;padding:clamp(18px,3vw,40px);isolation:isolate}
.dv-frame>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;transition:transform 1.4s var(--ease)}
.dv-frame:hover>img{transform:scale(1.05)}
.dv-frame .dv-chat{box-shadow:0 0 0 1px rgba(255,255,255,.4),0 40px 80px -40px rgba(0,0,0,.6);background:color-mix(in srgb,var(--card) 92%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.dv-dev{position:relative;overflow:hidden;isolation:isolate;background:#0B2523;color:#EEF3EE}
.dv-dev>.dv-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;opacity:.6}
.dv-dev .sec-head h2,.dv-dev h3{color:#fff}.dv-dev .sec-head p,.dv-dev .dv-sm{color:rgba(238,243,238,.74)}
.dv-dev .eyebrow{color:#9ED9C4}.dv-dev .dv-sm code{color:#E9C46A}
.dv-dev .dv-tw,.dv-dev .dv-ev{background:rgba(9,26,22,.72);box-shadow:inset 0 0 0 1px rgba(127,196,166,.2);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.dv-dev .dv-t td,.dv-dev .dv-ev li{border-color:rgba(127,196,166,.14);color:#EEF3EE}
.dv-dev .dv-t td:last-child,.dv-dev .dv-ev span{color:rgba(238,243,238,.7)}
.dv-dev .dv-m.get{color:#9ED9C4}.dv-dev .dv-m.post{color:#E9C46A}.dv-dev .dv-m.patch{color:#8AB4F8}
.dv-dev .dv-code{box-shadow:inset 0 0 0 1px rgba(127,196,166,.2)}
@media (prefers-reduced-motion:reduce){.dv-stage .dv-bg{animation:none}.dv-frame>img{transition:none}}
@media (max-width:520px){.dv-in .dv-logos{border-radius:18px;padding:12px 14px;gap:8px}.dv-in .dv-logos span:not(.dv-c){margin-inline-end:6px}.dv-in .dv-more{flex-basis:100%;text-align:center}}

/* Art stage on every page's opening section (built by build/stage.py) */
.stg-o{padding-top:clamp(16px,2vw,28px)}
.stg-in{position:relative;color:#EEF3EE}
.stg-fhero .stg-in{padding:clamp(56px,8vw,112px) clamp(20px,4vw,56px) clamp(48px,6vw,84px)}
.stg-shero .stg-in{padding:clamp(40px,5vw,72px) clamp(20px,4vw,56px)}
.stg-int-hero .stg-in{padding:clamp(48px,6vw,88px) clamp(16px,3vw,40px) clamp(24px,3vw,40px)}
.stg-shero::after,.stg-int-hero::after{background:linear-gradient(90deg,rgba(6,32,28,.9),rgba(6,32,28,.55) 55%,rgba(6,32,28,.35))}
[dir="rtl"] .stg-shero::after{background:linear-gradient(270deg,rgba(6,32,28,.9),rgba(6,32,28,.55) 55%,rgba(6,32,28,.35))}
.stg-int-hero::after{background:radial-gradient(ellipse 70% 60% at 50% 30%,rgba(6,32,28,.85),rgba(6,32,28,.45))}
.stg-in h1{color:#fff}
.stg-in .crumb,.stg-in .crumb a,.stg-in .crumb span{color:rgba(238,243,238,.62)}
.stg-in .crumb a:hover{color:#fff}
.stg-in>p,.stg-in>div>p.lede,.stg-in .lede,.stg-in .ih-t>p{color:rgba(238,243,238,.8)}
.stg-in>.eyebrow,.stg-in>div>.eyebrow,.stg-in .ih-t>.eyebrow{color:#9ED9C4}
.stg-in .ctas .btn.dark{background:#F4F1EB;color:#14231F}
.stg-in .ctas .btn.line{border-color:rgba(255,255,255,.3);color:#fff}
.stg-in .ctas .btn.line:hover{background:rgba(255,255,255,.08)}
.stg-in .tags span{border-color:rgba(255,255,255,.22);color:rgba(238,243,238,.78);background:rgba(255,255,255,.05)}
/* the split hero's own plate becomes a frosted panel on the stage instead of a second dark plate */
.stg-in .scene-plate{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.stg-in .scene-plate>canvas.dunes{display:none}
.stg-in .hub{filter:drop-shadow(0 30px 60px rgba(0,0,0,.35))}
.stg-o{padding-bottom:clamp(20px,2.4vw,32px)}
.stg-in .ih-v{background:none;margin-top:clamp(12px,2vw,24px)}
/* footer credentials */
.ftrust{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;margin-top:36px}
.ftrust .ftb{display:inline-flex;align-items:center;gap:10px;padding:9px 14px 9px 11px;border-radius:12px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.ftrust svg{width:22px;height:22px;fill:currentColor;flex:none}
.ftrust .ftb>span{display:flex;flex-direction:column;line-height:1.15}
.ftrust small{font:500 9.5px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:rgba(234,240,234,.55)}
.ftrust b{font-size:13.5px;font-weight:500;color:#EAF0EA}
@media (max-width:640px){.ftrust{justify-content:flex-start}}
.ftrust{margin-bottom:24px}

/* Home: try it yourself */
.ty{padding-block:clamp(56px,7vw,96px)}

@keyframes tyIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes tyDot{0%,60%,100%{opacity:.4;transform:none}30%{opacity:1;transform:translateY(-3px)}}

/* Home: heading for the product stack */
.hs-head{padding-top:clamp(40px,5vw,72px);max-width:720px}
.hs-head h2{font-weight:500;font-size:clamp(30px,3.6vw,46px);letter-spacing:-.03em;line-height:1.06;margin:14px 0 0;text-wrap:balance}
.hs-head p{color:var(--ink-2);font-size:17px;margin:14px 0 0}
/* 404 */
.nf-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.nf-l{display:flex;flex-direction:column;gap:6px;padding:20px;border-radius:18px;background:var(--card);box-shadow:0 0 0 1px var(--line);color:inherit;text-decoration:none;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.nf-l:hover{transform:translateY(-3px);box-shadow:0 0 0 1px var(--line),0 20px 40px -26px rgba(11,42,34,.35)}
.nf-l b{font-weight:500;font-size:17px}.nf-l span{color:var(--ink-2);font-size:14.5px}
@media (max-width:900px){.nf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.nf-grid{grid-template-columns:minmax(0,1fr)}}
/* pricing comparison on phones: keep the row names in view while swiping */
.cmp-hint{display:none}
@media (max-width:760px){
  .cmp-hint{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:13px;color:var(--ink-3)}
  .cmp-hint::after{content:"→";font-size:16px}[dir="rtl"] .cmp-hint::after{content:"←"}
  .spec.cmp th:first-child,.spec.cmp td:first-child{position:sticky;inset-inline-start:0;z-index:1;background:var(--paper);min-width:118px;max-width:132px;box-shadow:1px 0 0 var(--line)}
  [dir="rtl"] .spec.cmp th:first-child,[dir="rtl"] .spec.cmp td:first-child{box-shadow:-1px 0 0 var(--line)}
}
.hs-head{max-width:1312px}.hs-head>*{max-width:720px}

/* Home: steps, industries, pricing line */

.hp-price{padding-block:clamp(56px,7vw,96px)}

.hp-pb{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center;padding:clamp(28px,4vw,48px);border-radius:28px;background:var(--sand)}
.hp-pb h2{font-weight:500;font-size:clamp(28px,3.2vw,42px);letter-spacing:-.03em;line-height:1.08;margin:14px 0 0;text-wrap:balance}
.hp-pb p{color:var(--ink-2);font-size:16.5px;margin:14px 0 0}
.hp-acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}

@media (max-width:1000px){.hp-pb{grid-template-columns:minmax(0,1fr)}}

/* hero: the real dashboard rising out of the art plate (2026-10-10) */

.wk-x{display:contents}@media (prefers-reduced-motion:reduce){.wk-x{display:none}}
.hp-pb.one{display:block;text-align:center;padding:clamp(40px,6vw,80px) clamp(24px,4vw,48px)}.hp-pb.one h2{max-width:16ch;margin-inline:auto}.hp-pb.one p{max-width:52ch;margin-inline:auto}.hp-pb.one .hp-acts{justify-content:center}
.wk-x,.wk-set+.wk-set{-webkit-user-select:none;user-select:none}
/* Home, image-led (2026-10-10): jobs stage, photo steps, industries split */
.shc{padding:clamp(72px,9vw,120px) 0 clamp(48px,6vw,96px);scroll-margin-top:80px}
.shc-head{max-width:760px}
.shc-head h2{font-weight:500;font-size:clamp(34px,4.4vw,60px);letter-spacing:-.035em;line-height:1.02;margin:14px 0 0;text-wrap:balance}
.shc-head p{color:var(--ink-2);font-size:18px;line-height:1.5;margin:18px 0 0;max-width:600px}

.jt{display:flex;flex-direction:column;border-radius:24px;background:var(--card);box-shadow:0 0 0 1px var(--line);overflow:hidden;color:inherit;text-decoration:none;transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.jt:hover{transform:translateY(-4px);box-shadow:0 0 0 1px var(--line),0 34px 64px -36px rgba(11,42,34,.45)}
.jt:focus-visible{outline:2px solid var(--emerald);outline-offset:3px}
.jt-art{position:relative;margin:0;aspect-ratio:5/4;display:grid;place-items:center;overflow:hidden;background:url(/media/art/contour-light.webp) center/cover,linear-gradient(160deg,#E4EFEA,#F1ECE0);background-blend-mode:multiply}
.jt:nth-child(even) .jt-art{background:url(/media/art/contour-light.webp) center/cover,linear-gradient(160deg,#F1ECE0,#E2EEE8);background-blend-mode:multiply}
[data-theme="dark"] .jt .jt-art,[data-theme="dark"] .jt:nth-child(even) .jt-art{background:url(/media/art/contour-dark.webp) center/cover}

.jx{width:86%;border-radius:18px;background:var(--card);box-shadow:0 30px 60px -32px rgba(11,42,34,.45),0 0 0 1px var(--line);overflow:hidden;font-size:14px;line-height:1.4;transition:transform .6s var(--ease)}
.jt:hover .jx{transform:translateY(-4px) scale(1.01)}
.jx-h{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--line);background:var(--paper)}
.jx-h svg{width:18px;height:18px;flex:none;fill:currentColor}
.jx-h b{font-weight:600;font-size:13px}.jx-h span{margin-inline-start:auto;font-size:12px;color:var(--ink-3)}
.jx-bd{display:flex;flex-direction:column;gap:8px;padding:14px}
.jx-b{margin:0;max-width:92%;padding:9px 12px;border-radius:14px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);align-self:flex-start;text-wrap:pretty}
.jx-b.out{align-self:flex-end;background:#0D3B3B;color:#fff;box-shadow:none}
.jx-ok{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;margin-top:4px;padding:6px 11px;border-radius:999px;background:#DCEFE6;color:#0D3B3B;font-weight:600;font-size:12.5px}
.jx-ok svg{width:14px;height:14px;fill:#1F6F5E}
.jx-rc{display:grid;gap:0;font-size:13.5px}.jx-rc div{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px dashed var(--line)}
.jx-rc .t{border:0;font-weight:600}.jx-rc b{font-weight:500;font-variant-numeric:tabular-nums}.jx-rc .t b{font-weight:600}
.jx-sl{display:flex;align-items:center;gap:12px;padding:10px;border-radius:14px;box-shadow:inset 0 0 0 1px var(--line)}
.jx-sl .d{display:grid;place-items:center;width:46px;height:46px;border-radius:10px;background:var(--sand);font-size:18px;font-weight:600;line-height:1}
.jx-sl .d small{font-size:9.5px;font-weight:500;color:var(--ink-3);letter-spacing:.06em}
.jx-sl b{display:block;font-weight:600}.jx-sl small{color:var(--ink-2);font-size:12.5px}
.jx-cm{display:flex;gap:10px;align-items:flex-start}.jx-cm.r{padding-inline-start:20px}
.jx-cm .a{display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;background:#E9C46A;font-size:11px;font-weight:600;color:#5A4410}
.jx-cm .a.y{background:#0D3B3B}.jx-cm .a img{width:14px;height:14px}
.jx-cm b{display:block;font-weight:600;font-size:13px}
.jx-ml{padding-bottom:8px;border-bottom:1px solid var(--line)}.jx-ml b{display:block;font-weight:600}.jx-ml span{color:var(--ink-2)}
.jx-vn{display:flex;align-items:center;gap:10px;align-self:flex-start;padding:8px 12px;border-radius:999px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line)}
.jx-vn.out{align-self:flex-end;background:#0D3B3B;color:#fff;box-shadow:none}
.jx-vn .pl{width:0;height:0;border-block:6px solid transparent;border-inline-start:9px solid currentColor;flex:none}
.jx-vn .wv{display:flex;align-items:center;gap:2px;height:20px}.jx-vn .wv i{width:2px;border-radius:2px;background:currentColor;opacity:.6}
.jx-vn .tm{font:500 11.5px var(--f-mono);opacity:.75}
.jx-tr{margin:0;font-size:15px;color:var(--ink);text-align:right;align-self:flex-start}
[dir="rtl"] .jx-tr{align-self:flex-start}
.jx [data-s]{transition:opacity .5s var(--ease),transform .5s var(--ease);transition-delay:calc(var(--s) * .55s + .1s)}
.jx.arm [data-s]{opacity:0;transform:translateY(8px);transition:none}
.jx.play .jx-ok{animation:jxPop .5s calc(var(--s) * .55s + .1s) var(--ease) both}
@keyframes jxPop{0%{opacity:0;transform:scale(.85)}70%{transform:scale(1.04)}100%{opacity:1;transform:none}}
.jt-tx{padding:20px 24px 24px}
.jt-l{display:block;font:500 11px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.jt-tx h3{margin:8px 0 0;font-size:22px;font-weight:500;letter-spacing:-.02em;line-height:1.2}
.jt-tx p{margin:6px 0 0;color:var(--ink-2);font-size:15px;line-height:1.45}
.shc-go{display:inline-flex;align-items:center;gap:6px;margin-top:18px;font-weight:500;font-size:15px;color:var(--ink);text-decoration:none}
.shc-go .ia{width:15px;height:15px;transition:transform .35s var(--ease)}
.shc-go:hover .ia{transform:translateX(4px)}
[dir="rtl"] .shc-go .ia{transform:scaleX(-1)}
[dir="rtl"] .shc-go:hover .ia{transform:translateX(-4px) scaleX(-1)}

.inds{padding-block:clamp(48px,6vw,96px)}

.in-tabs{display:flex;gap:4px;flex-wrap:wrap;margin-top:44px;padding:5px;border-radius:999px;background:var(--sand);width:max-content;max-width:100%}
.in-tab{all:unset;cursor:pointer;padding:10px 18px;border-radius:999px;font-size:15px;color:var(--ink-2);transition:background .3s,color .3s,box-shadow .3s;white-space:nowrap}
.in-tab:hover{color:var(--ink)}
.in-tab.on{background:var(--card);color:var(--ink);box-shadow:0 1px 2px rgba(11,42,34,.12),0 0 0 1px var(--line)}
.in-tab:focus-visible{outline:2px solid var(--emerald);outline-offset:2px}
.in-box{display:grid;margin-top:20px}
.in-panel{grid-area:1/1;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);border-radius:28px;overflow:hidden;background:var(--card);box-shadow:0 0 0 1px var(--line);opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility 0s .5s}
.in-panel.on{opacity:1;visibility:visible;transition:opacity .5s var(--ease)}
.in-art{margin:0;min-height:460px;position:relative;background:#0D3B3B;overflow:hidden}
.in-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.in-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,59,59,0) 55%,rgba(13,59,59,.28));pointer-events:none}
.in-art img{filter:saturate(.88) contrast(1.04);transform:scale(1.04);transition:transform 1.4s var(--ease)}
.in-panel.on .in-art img{transform:scale(1)}

.in-tx{padding:clamp(28px,3.4vw,48px);display:flex;flex-direction:column;justify-content:center}
.in-tx h3{font-weight:500;font-size:clamp(26px,2.6vw,34px);letter-spacing:-.03em;line-height:1.1;margin:12px 0 0;text-wrap:balance}
.in-tx p{color:var(--ink-2);font-size:16px;line-height:1.55;margin:14px 0 0}
.in-tx ul{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:10px}
.in-tx li{display:flex;gap:10px;align-items:flex-start;font-size:15.5px}
.in-tx li svg{width:18px;height:18px;flex:none;margin-top:2px;fill:#1F6F5E}
.cr-l{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:14px}.cr-l li{display:flex;gap:16px;align-items:center;padding:12px;border-radius:16px;background:var(--card);box-shadow:0 0 0 1px var(--line)}.cr-l img{width:120px;height:80px;object-fit:cover;border-radius:10px;flex:none}.cr-l b{display:block;font-weight:500}.cr-l span{color:var(--ink-2);font-size:14px}
@media (max-width:1000px){
  
  
  .in-panel{grid-template-columns:minmax(0,1fr)}
  .in-art{min-height:0;aspect-ratio:16/10}
  .in-tx{justify-content:flex-start}
  .in-tabs{width:auto;border-radius:18px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.in-tabs::-webkit-scrollbar{display:none}
}
@media (max-width:620px){
  
  .jt-art{aspect-ratio:4/3.2}
  
}
@media (prefers-reduced-motion:reduce){.jt,.jx,.jx [data-s],.in-panel{transition:none}}
/* end: Home, image-led */

/* Product menu: a real screen of each product instead of a generic glyph */
.menu .mi.shot{width:64px;height:40px;padding:0;border-radius:8px;overflow:hidden;background:var(--sand);border:1px solid var(--line)}
.menu .mi.shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:left top}

/* Home: one statement for every business (replaces the per-industry tabs) */
.allb{max-width:820px;margin:clamp(72px,9vw,128px) auto;text-align:center;display:flex;flex-direction:column;align-items:center}
.allb h2{font-weight:500;font-size:clamp(30px,3.8vw,52px);letter-spacing:-.035em;line-height:1.04;margin:14px 0 0;text-wrap:balance}
.allb p{margin:18px 0 26px;color:var(--ink-2);font-size:clamp(16px,1.4vw,18.5px);line-height:1.55;max-width:640px;text-wrap:pretty}

/* Brand tiles with no published mark (e.g. Zid) and non-brand tiles (API) are typographic, never a pictogram */
.it-logo .wmk,.nd-wm{font:700 13px/1 var(--f-sans);letter-spacing:-.01em;color:#fff}
.it-logo .wmk.mono{font:600 12px/1 var(--f-mono)}

/* Cards that lost their decorative glyph tile: the title leads */
.dv-can>b:first-child,.dv-safe b:first-child{margin-top:0}
.tgrid div>b:first-child{margin-top:0}

/* ── React pages in the site's design (legal pages, API docs: SiteShell) ──────────────────────
   The app's Tailwind colours and this site both name --ink, --line and --card (the app as RGB
   triplets for rgb(var(--x) / a), the site as colours). The chrome gets the site's colours; the
   page content (.tw-tokens) gets triplets of the same palette, so Tailwind classes inside it
   render in the site's colours too. */
.site-shell{--ink:#14231F;--line:rgba(20,35,31,.1);--card:#FFFFFF;background:var(--paper);color:var(--ink);font:400 16px/1.55 var(--f-sans);min-height:100vh;-webkit-font-smoothing:antialiased}
.site-shell .tw-tokens{--canvas:247 245 240;--card:255 255 255;--ink:20 35 31;--muted:74 92 85;--line:224 224 219;--primary:13 59 59;--primary-press:10 48 48;--primary-tint:238 234 225;--primary-foreground:255 255 255;color:rgb(var(--ink))}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .site-shell{--ink:#ECEFE8;--line:rgba(236,239,232,.09);--card:#17251F}
  :root:not([data-theme="light"]) .site-shell .tw-tokens{--canvas:14 23 20;--card:23 37 31;--ink:236 239 232;--muted:170 182 175;--line:34 42 39;--primary:127 196 166;--primary-press:150 210 184;--primary-tint:19 32 28;--primary-foreground:14 23 20}
}
:root[data-theme="dark"] .site-shell{--ink:#ECEFE8;--line:rgba(236,239,232,.09);--card:#17251F}
:root[data-theme="dark"] .site-shell .tw-tokens{--canvas:14 23 20;--card:23 37 31;--ink:236 239 232;--muted:170 182 175;--line:34 42 39;--primary:127 196 166;--primary-press:150 210 184;--primary-tint:19 32 28;--primary-foreground:14 23 20}

/* The app's globals give headings (and .font-display/.font-sans) its own faces; here the site's
   face wins, Latin and Arabic alike (the Arabic sheet retunes --f-sans). */
.site-shell.site-shell :is(h1,h2,h3,h4,.font-display,.font-sans){font-family:var(--f-sans)}

/* Legal pages: a statement hero, then one readable column (contents list beside it when present) */
.lg-hero{padding-block:clamp(56px,8vw,112px) clamp(32px,4vw,52px);border-bottom:1px solid rgb(var(--line))}
.lg-hero h1{font-weight:500;font-size:clamp(38px,5.4vw,72px);letter-spacing:-.035em;line-height:1.02;margin:16px 0 0;text-wrap:balance;max-width:16ch}
.lg-hero p{max-width:640px;margin:22px 0 0;color:rgb(var(--muted));font-size:clamp(16px,1.4vw,18.5px);line-height:1.6;text-wrap:pretty}
.lg-upd{display:block;margin-top:20px;font:500 12px/1 var(--f-mono);letter-spacing:.06em;color:var(--ink-3)}
.lg-grid{display:grid;grid-template-columns:200px minmax(0,1fr);gap:clamp(32px,6vw,88px);padding-block:clamp(36px,4vw,56px) clamp(72px,9vw,128px)}
.lg-grid.solo{grid-template-columns:minmax(0,1fr)}
.lg-toc{position:sticky;top:96px;align-self:start;display:flex;flex-direction:column;border-inline-start:1px solid rgb(var(--line));padding-inline-start:16px}
.lg-toc a{font-size:13px;line-height:1.4;color:var(--ink-3);padding:6px 0;transition:color .2s}
.lg-toc a:hover{color:rgb(var(--ink))}
.lg-body{max-width:760px}
.lg-sec{padding-block:36px;border-bottom:1px solid rgb(var(--line));scroll-margin-top:88px}
.lg-sec:first-child{padding-top:0}
.lg-sec:last-of-type{border-bottom:0}
.lg-n{display:block;margin-bottom:10px;font:500 12px/1 var(--f-mono);color:var(--ink-3)}
.lg-sec h2{font-weight:500;font-size:clamp(22px,2.2vw,28px);letter-spacing:-.02em;line-height:1.2;margin:0}
.lg-prose{margin-top:16px;color:rgb(var(--muted));font-size:16px;line-height:1.7;display:flex;flex-direction:column;gap:14px}
.lg-prose a{color:rgb(var(--ink));font-weight:500;text-decoration:underline;text-decoration-color:rgb(var(--line));text-underline-offset:3px}
.lg-prose a:hover{text-decoration-color:currentColor}
.lg-prose strong{color:rgb(var(--ink));font-weight:500}
.lg-prose ul,.lg-prose ol{margin:0}
.lg-prose li::marker{color:var(--ink-3)}
.lg-prose .rounded-xl{border-radius:var(--r-card)}
.lg-foot{margin:8px 0 0;padding-top:24px;border-top:1px solid rgb(var(--line));color:rgb(var(--muted));font-size:14.5px}
@media (max-width:900px){.lg-grid{grid-template-columns:minmax(0,1fr)}.lg-toc{display:none}}
[dir="rtl"] .lg-hero h1,[dir="rtl"] .lg-sec h2{letter-spacing:0;line-height:1.3}

/* The YUSR wordmark keeps its tracking in Arabic too (the Arabic sheet zeroes letter-spacing) */
[dir="rtl"] .wordm{letter-spacing:.18em!important}