/* Yomit public landing (templates/landing.html).
   Base: reset, a11y helpers, header/footer, buttons, store badges, product-screen mocks; then the page layout.
   The layout stays left-to-right in every language; Hebrew/Arabic text gets dir="auto" on its own element only.
   System fonts only (Hebrew/Arabic glyphs come from the OS). */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--bg); line-height: 1.5; font-size: 17px; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
img, svg { display: block; }
bdi { unicode-bidi: isolate; }
:where([dir="auto"]) { text-align: left; }
:root {
  --font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, "Noto Sans", "Noto Sans Hebrew", "Noto Sans Arabic", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, "Liberation Mono", monospace;
  --focus: #11807A;
  /* product palette (the app itself) — mocks always use these */
  --p-ink: #2B3A4F; --p-muted: #5F6B7D; --p-bg: #F3F5F9; --p-line: #E3E8EF; --p-teal: #11807A; --p-teal-ink: #0E6B66; --p-teal-soft: #E2F3F1; --p-navy: #22314B;
}
/* monospace fonts have no Hebrew/Arabic glyphs: on he/ar pages mono labels fall back to the text font */
html:lang(he), html:lang(ar) { --mono: var(--font); }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 640px) { .wrap { padding: 0 18px; } }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: #fff; color: #111; padding: 10px 14px; border-radius: 8px; font-weight: 600; }
.skip:focus { top: 12px; }
.ico { width: 20px; height: 20px; flex: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: var(--btn-radius, 999px);
  font: 600 16px/1.1 var(--font); text-decoration: none; white-space: nowrap; border: 1.5px solid transparent; cursor: pointer; transition: background .15s, border-color .15s, transform .15s; text-align: center; }
.btn-primary { background: var(--acc); color: var(--acc-ink); }
.btn-primary:hover { background: var(--acc-hover, var(--acc)); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink); }
.cur { font-size: .5em; font-weight: 600; margin: 0 .04em; vertical-align: .35em; }
.btn-lg { min-height: 54px; padding: 0 28px; font-size: 17px; }

/* ---------- header ---------- */
.hd { position: sticky; top: 0; z-index: 20; background: var(--hd-bg); color: var(--hd-ink, var(--ink)); }
.hd-in { display: flex; align-items: center; gap: 24px; min-height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: 20px; text-decoration: none; letter-spacing: -.01em; min-height: 44px; }
.brand .logo { width: 30px; height: 30px; }
.hd-nav { display: flex; gap: 4px; margin-left: 8px; }
.hd-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; text-decoration: none; font-size: 15px; font-weight: 500; opacity: .85; border-radius: 8px; }
.hd-nav a:hover { opacity: 1; }
.hd-act { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.hd .btn { min-height: 44px; font-size: 15px; padding: 0 18px; }
.lang { display: flex; border: 1px solid var(--hd-line, var(--line)); border-radius: 999px; padding: 3px; }
.lang a { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 36px; font: 600 13px/1 var(--font); text-decoration: none; border-radius: 999px; opacity: .75; letter-spacing: .02em; }
.lang a[aria-current] { background: var(--hd-ink, var(--ink)); color: var(--hd-bg-solid, #fff); opacity: 1; }
.lang-m { display: none; position: relative; }
.lang-m summary { list-style: none; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; min-width: 44px; padding: 0 8px; border-radius: 10px; border: 1px solid var(--hd-line, var(--line)); font: 600 13px/1 var(--font); cursor: pointer; }
.lang-m summary::-webkit-details-marker { display: none; }
.lang-m summary .ico { width: 16px; height: 16px; }
.lang-m-list { position: absolute; right: 0; top: 50px; background: #fff; color: #1d2633; border-radius: 12px; box-shadow: 0 12px 40px rgba(15, 23, 42, .18); padding: 6px; min-width: 150px; }
.lang-m-list a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 8px; text-decoration: none; }
.lang-m-list a[aria-current] { background: #EEF2F6; font-weight: 600; }
@media (max-width: 1080px) { .hd-nav { display: none; } }
@media (max-width: 760px) {
  .lang, .hd-login { display: none; }
  .lang-m { display: block; }
  .hd-in { gap: 8px; min-height: 60px; }
  .brand span { display: none; }
  .hd-act { gap: 8px; }
  .hd .hd-reg { padding: 0 14px; font-size: 14px; }
}

/* ---------- store badges (drawn in code for the mockup; production: official localized badge SVGs) ---------- */
.stores { display: flex; flex-wrap: wrap; gap: 10px; }
.store { display: inline-flex; align-items: center; gap: 9px; height: 48px; padding: 0 16px 0 12px; border-radius: 10px; background: #0B0F14; color: #fff; text-decoration: none; border: 1px solid rgba(255, 255, 255, .22); }
.store svg { width: 24px; height: 24px; }
.store span { display: flex; flex-direction: column; line-height: 1.05; }
.store small { font-size: 10px; letter-spacing: .02em; opacity: .85; }
.store b { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }

/* ---------- footer skeleton ---------- */
.ft { padding: 56px 0 28px; font-size: 15px; }
.ft-grid { display: grid; grid-template-columns: 1.5fr 1fr 1.3fr 1fr; gap: 32px; }
.ft h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 12px; opacity: .7; font-weight: 600; }
.ft li a, .ft-mail a { display: inline-flex; align-items: center; min-height: 36px; text-decoration: none; }
.ft li a:hover { text-decoration: underline; }
.ft-tag { margin: 12px 0 18px; max-width: 300px; opacity: .8; }
.ft-langs a[aria-current] { font-weight: 700; }
.ft-bottom { display: flex; justify-content: space-between; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); opacity: .7; font-size: 14px; }
@media (max-width: 860px) { .ft-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .ft-grid { grid-template-columns: 1fr; gap: 24px; } }

/* ---------- FAQ (details) — arrow stays on the right in every language ---------- */
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding: 12px 0; cursor: pointer; font-weight: 600; font-size: 18px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; width: 10px; height: 10px; flex: none; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-3px); transition: transform .2s; margin-right: 4px; }
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.faq details p { padding: 0 40px 20px 0; color: var(--muted); max-width: 760px; }

/* =========================================================
   Product-screen mocks — they look like the app (light), in every variant
   ========================================================= */
.m-phone, .m-web, .m-client, .m-pdf { font-family: var(--font); color: var(--p-ink); line-height: 1.35; text-align: left; }
.m-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.m-sub { font-size: 11px; color: var(--p-muted); margin-top: 4px; }
.m-num { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.m-delta { color: var(--p-teal-ink); font-weight: 700; font-style: normal; }
.m-bar { display: block; height: 7px; border-radius: 99px; background: #E6EBF1; overflow: hidden; margin-top: 7px; }
.m-bar i { display: block; height: 100%; border-radius: inherit; background: var(--chain, var(--p-teal)); }
.m-hot { box-shadow: 0 0 0 2px var(--chain, var(--p-teal)); }
.m-photo { display: block; border-radius: 8px; aspect-ratio: 4 / 3;
  background: radial-gradient(circle at 50% 42%, #fff 0 12%, #cfd6df 13% 17%, transparent 18%), linear-gradient(165deg, #A9B4C2, #6C7A8C); }
.m-photo-b { background: radial-gradient(circle at 38% 46%, #fff 0 11%, #cfd6df 12% 16%, transparent 17%), linear-gradient(165deg, #B9C2CE 0 55%, #8A97A7 55%); }
.m-note { font-size: 12px; background: var(--p-bg); border-radius: 10px; padding: 8px 10px; margin-top: 10px; }
.m-chip { font-size: 11px; font-weight: 600; background: var(--p-bg); border-radius: 99px; padding: 3px 10px; color: var(--p-muted); }

/* phone */
.m-phone { width: 236px; border-radius: 34px; padding: 9px; background: #18212E; box-shadow: 0 30px 60px -20px rgba(15, 23, 42, .45), inset 0 0 0 1.5px #3B4656; flex: none; }
.m-ph-scr { background: var(--p-bg); border-radius: 26px; padding: 12px 12px 14px; min-height: 440px; overflow: hidden; }
.m-ph-status { display: flex; justify-content: space-between; align-items: center; font-size: 11px; font-weight: 600; padding: 0 6px 8px; }
.m-ph-sig { display: flex; gap: 2px; align-items: flex-end; }
.m-ph-sig i { width: 3px; background: currentColor; border-radius: 1px; }
.m-ph-sig i:nth-child(1) { height: 5px; } .m-ph-sig i:nth-child(2) { height: 8px; } .m-ph-sig i:nth-child(3) { height: 11px; }
.m-ph-off { font-size: 10px; background: #FDECC8; color: #7A4B00; border-radius: 99px; padding: 2px 8px; }
.m-ph-head { background: linear-gradient(135deg, #22314B, #2C4A62); color: #fff; border-radius: 16px; padding: 12px 14px; }
.m-ph-head small { display: block; font-size: 11px; color: #B9C6D8; }
.m-ph-head b { display: block; font-size: 14px; margin-top: 2px; }
.m-ph-item { background: #fff; border-radius: 14px; padding: 11px 12px; margin-top: 10px; font-size: 13px; }
.m-ph-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
.m-ph-by { font-size: 10.5px; color: var(--p-muted); margin-top: 6px; padding: 0 2px; }
.m-ph-sent { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; min-height: 36px; border-radius: 99px; background: var(--p-teal-soft); color: var(--p-teal-ink); font-size: 12px; font-weight: 700; }
.m-ph-sent .ico { width: 15px; height: 15px; }
.m-ph-btn { display: flex; align-items: center; justify-content: center; min-height: 38px; margin-top: 10px; border-radius: 99px; background: var(--p-teal); color: #fff; font-size: 12.5px; font-weight: 700; }
.m-phone-sm { width: 214px; }
.m-phone-sm .m-ph-scr { min-height: 380px; }
.m-bubble { font-size: 12px; background: #fff; border-radius: 14px 14px 14px 4px; padding: 9px 11px; margin-top: 12px; max-width: 88%; }
.m-bubble.me { background: var(--p-teal-soft); }

/* web cabinet */
.m-web, .m-client { background: #fff; border-radius: 14px; box-shadow: 0 30px 70px -24px rgba(15, 23, 42, .4), 0 0 0 1px rgba(15, 23, 42, .06); overflow: hidden; }
.m-web-bar { display: flex; align-items: center; gap: 5px; height: 30px; padding: 0 12px; background: #EEF1F5; border-bottom: 1px solid var(--p-line); }
.m-web-bar i { width: 9px; height: 9px; border-radius: 50%; background: #CDD4DD; }
.m-web-bar span { margin-left: 10px; font-size: 10.5px; color: var(--p-muted); background: #fff; border-radius: 6px; padding: 2px 10px; }
.m-web-in { display: grid; grid-template-columns: 92px 1fr; min-height: 250px; }
@media (max-width: 640px) { .m-web-in { grid-template-columns: 1fr; } .m-web-side { display: none !important; } }
.m-web-side { background: #1E293B; color: #A9B6C8; padding: 12px 8px; font-size: 11px; display: flex; flex-direction: column; gap: 2px; }
.m-web-side .logo { width: 20px; height: 20px; color: #fff; margin: 0 0 10px 6px; }
.m-web-side span { padding: 6px 8px; border-radius: 6px; }
.m-web-side .on { background: rgba(255, 255, 255, .1); color: #fff; font-weight: 600; }
.m-web-main { padding: 14px 16px 16px; font-size: 12px; }
.m-web-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.m-web-h small { display: block; font-size: 11px; color: var(--p-muted); }
.m-web-h b { font-size: 15px; }
.m-tbl { display: grid; gap: 6px; }
.m-tr { display: grid; grid-template-columns: 1.7fr 1fr .9fr; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 10px; background: var(--p-bg); }
.m-th { background: none; padding: 0 10px; font-size: 10.5px; color: var(--p-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.m-tr small { display: block; font-size: 10.5px; color: var(--p-muted); margin-top: 2px; }
.m-tr.m-hot { background: #fff; }
.m-pc { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.m-pc .m-bar { flex: 1; margin: 0; }

/* client (Hebrew, view only) */
.m-client { width: 300px; flex: none; }
.m-cl-in { padding: 14px 16px 16px; font-size: 12.5px; }
.m-cl-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.m-cl-top b { font-size: 13px; }
.m-ro { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: #6B4A00; background: #FFF1CC; border-radius: 99px; padding: 3px 9px; }
.m-ro .ico { width: 13px; height: 13px; }
.m-cl-site { font-size: 15px; font-weight: 700; margin-top: 8px; }
.m-cl-lbl { display: block; font-size: 11px; color: var(--p-muted); margin-top: 10px; }
.m-cl-item { background: var(--p-bg); border-radius: 12px; padding: 11px 12px; margin-top: 6px; font-size: 13px; }
.m-tr-from { display: block; font-size: 10.5px; color: var(--p-muted); margin-top: 5px; }
.m-cl-btns { display: flex; gap: 6px; margin-top: 12px; }
.m-cl-btns span { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; border: 1px solid var(--p-line); border-radius: 8px; padding: 5px 10px; }
.m-cl-btns .ico { width: 14px; height: 14px; }
.m-client-sm { width: 280px; }

/* PDF */
.m-pdf { width: 280px; background: #fff; border-radius: 4px; padding: 18px 18px 16px; box-shadow: 0 24px 50px -20px rgba(15, 23, 42, .35), 0 0 0 1px rgba(15, 23, 42, .06); font-size: 11.5px; }
.m-pdf-h { border-bottom: 2px solid var(--p-ink); padding-bottom: 8px; margin-bottom: 8px; }
.m-pdf-h b { font-size: 14px; display: block; }
.m-pdf-h small { color: var(--p-muted); }
.m-pdf-row { display: grid; grid-template-columns: 1.6fr .7fr .9fr; gap: 6px; padding: 6px 4px; border-bottom: 1px solid var(--p-line); }
.m-pdf-th { font-weight: 700; font-size: 10px; text-transform: uppercase; color: var(--p-muted); }
.m-pdf-row.m-hot { box-shadow: none; background: var(--p-teal-soft); border-radius: 4px; }
.m-pdf-note { margin-top: 10px; font-style: italic; color: var(--p-muted); }
.m-pdf-ph { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }

/* order → task */
.m-order { display: flex; align-items: center; gap: 14px; }
.m-paper { position: relative; width: 170px; padding: 16px 14px; background: #FBFAF6; border-radius: 3px; transform: rotate(-4deg); box-shadow: 0 18px 30px -14px rgba(15, 23, 42, .35); flex: none; }
.m-paper b { display: block; font-size: 13px; margin-bottom: 10px; color: #333; }
.m-paper i { display: block; height: 5px; background: #D9D6CC; border-radius: 2px; margin: 7px 0; }
.m-paper i.s { width: 60%; }
.m-paper-t { display: grid; grid-template-columns: 2fr 1fr; gap: 0 8px; margin: 10px 0; padding: 6px 0; border-top: 1px solid #DDD9CE; border-bottom: 1px solid #DDD9CE; }
.m-cam { position: absolute; right: -14px; bottom: -14px; width: 40px; height: 40px; border-radius: 50%; background: var(--p-teal); color: #fff; display: flex; align-items: center; justify-content: center; transform: rotate(4deg); }
.m-order-arrow { color: var(--p-teal); }
.m-order-arrow .ico { width: 28px; height: 28px; }
.m-field { background: #fff; border-radius: 10px; padding: 7px 10px; margin-top: 7px; font-size: 11.5px; }
.m-field small { display: block; font-size: 10px; color: var(--p-muted); }

/* drawing */
.m-plan { width: 100%; height: auto; background: #fff; border-radius: 12px; margin-top: 10px; }
.m-plan .wall { fill: none; stroke: #8794A6; stroke-width: 2; }
.m-plan .corr { stroke: #DCE3EC; stroke-width: 14; }
.m-plan .done { fill: var(--p-teal); }
.m-plan .todo { fill: #fff; stroke: #8794A6; stroke-width: 2; }
.m-legend { display: flex; gap: 12px; font-size: 10.5px; color: var(--p-muted); margin-top: 8px; padding: 0 2px; }
.m-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; vertical-align: -1px; }
.m-legend .done { background: var(--p-teal); } .m-legend .todo { border: 2px solid #8794A6; }
.m-saved { display: flex; gap: 8px; align-items: center; margin-top: 10px; font-size: 11.5px; font-weight: 600; color: #6B4A00; background: #FFF4D6; border-radius: 12px; padding: 9px 10px; }
.m-saved .ico { width: 18px; height: 18px; }

/* chain thread (drawn by Y.chain) */
.chain-svg { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 3; overflow: visible; }
.chain-path { fill: none; stroke: var(--chain, var(--p-teal)); stroke-width: 2.5; stroke-linecap: round; }
.chain-dot { fill: var(--chain, var(--p-teal)); stroke: var(--chain-ring, #fff); stroke-width: 2.5; }
.chain-pulse { fill: var(--pulse, #FFB547); }

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

/* ===== page layout: calm Yomit palette + soft pulse along the chain ===== */
:root { --bg: #F3F5F9; --ink: #2B3A4F; --muted: #5A6678; --line: #D5DCE6; --card: #fff; --acc: #11807A; --acc-hover: #0E6B66; --acc-ink: #fff;
  --hd-bg: rgba(243, 245, 249, .88); --chain: #11807A; --grad: linear-gradient(135deg, #22314B, #2C4A62); }
.hd { backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid rgba(43, 58, 79, .08); }
.brand { color: var(--ink); }
/* app brand: wordmark "yomit" (#0A0E17 + teal square #00CFC8) on light, app icon tile in the footer */
.logo-word { height: 34px; width: auto; display: block; }
.ft-brand { gap: 12px; }
.logo-app { width: 44px; height: 44px; border-radius: 11px; display: block; box-shadow: 0 6px 14px -8px rgba(10, 14, 23, .6); }
.m-side-logo { display: block; width: 14px; height: 14px; border-radius: 3px; background: #00CFC8; margin: 0 auto 8px; padding: 0 !important; }
.btn-primary { box-shadow: 0 8px 20px -10px rgba(17, 128, 122, .7); }
.btn-ghost { background: #fff; border-color: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .08); }
.btn-ghost:hover { border-color: var(--line); }
section { padding: 112px 0; }
@media (max-width: 640px) { section { padding: 72px 0; } }
.kicker { display: inline-flex; font-size: 14px; font-weight: 600; color: var(--acc-hover); background: #E2F3F1; border-radius: 999px; padding: 6px 14px; }
.sh { max-width: 800px; margin-bottom: 48px; }
.sh-n { display: block; font: 600 14px/1 var(--font); color: var(--acc-hover); letter-spacing: .08em; margin-bottom: 14px; }
.sh h2 { font-size: 42px; line-height: 1.12; letter-spacing: -.022em; font-weight: 700; }
.sh-sub { font-size: 19px; color: var(--muted); margin-top: 16px; }
.note { font-size: 14px; color: var(--muted); margin-top: 18px; }
.card { background: var(--card); border-radius: 22px; box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 12px 32px -18px rgba(15, 23, 42, .18); }
@media (max-width: 640px) { .sh h2 { font-size: 30px; } .sh-sub { font-size: 17px; } .sh { margin-bottom: 32px; } }

/* thread + soft pulse (light palette) */
.chain-path { stroke: var(--chain); stroke-opacity: .55; stroke-width: 2; stroke-dasharray: 1 7; stroke-linecap: round; }
.chain-dot { fill: var(--chain); stroke: #fff; stroke-width: 2.5; }
.chain-pulse { fill: #11807A; }
.chain-halo { fill: rgba(17, 128, 122, .16); }

/* screens: fixed height so a language switch never changes the layout */
bdi { white-space: nowrap; }
.clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.m-note.clamp { padding-block: 0; border-block: 8px solid transparent; }
.m-lbl { display: block; font-size: 10.5px; color: var(--p-muted); margin-top: 10px; font-weight: 600; }
.scr-phone .m-ph-scr { height: 398px; min-height: 0; }
.scr-phone .m-ph-photos .m-photo { height: 58px; }
.scr-phone .m-ph-photos { margin-top: 5px; }
.scr-phone .m-ph-btn { margin-top: 12px; }
.scr-web .m-web-in { height: 268px; min-height: 0; }
.m-web-side span { display: flex; justify-content: center; padding: 7px 0; }
.m-web-side .ico { width: 17px; height: 17px; }
.scr-web .m-web-in { grid-template-columns: 52px 1fr; }
@media (max-width: 640px) { .scr-web .m-web-in { grid-template-columns: 1fr; height: auto; } }
.w-row { background: #fff; border-radius: 12px; padding: 10px 12px; font-size: 13px; }
.w-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 10px; }
.w-ph { display: flex; align-items: center; gap: 6px; }
.w-ph .m-photo { width: 42px; border-radius: 6px; }
.w-ph .m-lbl { margin: 0; }
.w-btn { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; color: #fff; background: #1D6F42; border-radius: 8px; padding: 6px 10px; white-space: nowrap; }
.w-btn .ico { width: 14px; height: 14px; }
.scr-web .m-web-main { background: var(--p-bg); }
.scr-client .m-cl-in { height: 262px; }
.m-cl-top small { font-size: 11px; color: var(--p-muted); font-weight: 600; }
.m-cl-btns span { color: var(--p-ink); }

/* hero */
.hero { padding: 24px 0 72px; }
.hero-top { display: grid; grid-template-columns: 1fr 1.15fr; gap: 56px; align-items: start; }
.hero h1 { font-size: 52px; line-height: 1.04; letter-spacing: -.03em; font-weight: 750; margin-top: 14px; }
.lead { font-size: 18px; color: var(--muted); }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.line { margin-top: 12px; font-size: 15px; font-weight: 500; }
.stage { position: relative; margin-top: 24px; padding: 20px 32px 18px; border-radius: 32px; background: radial-gradient(120% 90% at 50% 0%, #fff 0%, #EAF0F6 70%); box-shadow: inset 0 0 0 1px rgba(43, 58, 79, .06); }
.stage-row { display: grid; grid-template-columns: 236px 1fr 300px; gap: 48px; align-items: start; }
.node { margin: 0; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; position: relative; z-index: 1; min-width: 0; }
.node .m-web { width: 100%; }
.role { display: flex; gap: 10px; align-items: center; min-height: 26px; }
.role .num { width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: #fff; font: 700 13px/26px var(--font); text-align: center; flex: none; }
.role-t { font-size: 14.5px; }
.stage-cap { max-width: 820px; margin: 14px auto 0; text-align: center; font-size: 17px; font-weight: 600; position: relative; z-index: 1; }
.stage-cap[dir="auto"] { text-align: center; }
.hero-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 28px; }
.soft { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; color: var(--acc-hover); text-decoration: none; }
.soft .ico { transform: rotate(90deg); }
@media (max-width: 1080px) { .hero-top { grid-template-columns: 1fr; gap: 20px; } }
@media (max-width: 980px) { .stage-row { grid-template-columns: 1fr; gap: 34px; } .stage { padding: 24px 16px 22px 30px; } }
@media (max-width: 640px) {
  .hero { padding: 28px 0 56px; } .hero h1 { font-size: 38px; } .lead { font-size: 17px; }
  .cta .btn { flex: 1 1 100%; }
  .node .m-client, .node .m-web { width: 100%; }
  .stage { margin-top: 32px; border-radius: 24px; }
  .stage-cap, .stage-cap[dir="auto"] { text-align: left; font-size: 16px; }
}

/* 2 broken telephone — the pulse degrades on each hop */
.track { position: relative; height: 56px; margin-bottom: 18px; }
.track svg { width: 100%; height: 56px; }
.track .dot { position: absolute; top: 50%; left: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #11807A; box-shadow: 0 0 0 7px rgba(17, 128, 122, .15); animation: hop 5s linear infinite; }
@keyframes hop { 0% { left: 1%; background: #11807A; opacity: 0; } 5% { opacity: 1; } 35% { background: #4E8D88; } 60% { background: #8A94A3; box-shadow: 0 0 0 7px rgba(138, 148, 163, .15); } 90% { background: #B4473A; box-shadow: 0 0 0 7px rgba(180, 71, 58, .15); opacity: 1; } 100% { left: 99%; opacity: 0; } }
.pains { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.pain { padding: 22px; }
.pain .q { display: inline-block; font-size: 18px; font-weight: 700; padding: 10px 14px; border-radius: 16px 16px 16px 4px; background: #E2F3F1; color: var(--acc-hover); margin-bottom: 16px; }
.pain:nth-child(2) .q { background: #E9EEF4; color: #3F5068; }
.pain:nth-child(3) .q { background: #EEF0F3; color: #6A7587; letter-spacing: .01em; }
.pain:nth-child(4) .q { background: #FBEDEA; color: #9A3B2A; }
.pain .i { font: 600 13px/1 var(--font); color: var(--muted); margin-bottom: 10px; display: block; letter-spacing: .06em; }
.pain-out { margin-top: 36px; font-size: 24px; font-weight: 650; letter-spacing: -.01em; max-width: 840px; }
@media (max-width: 980px) { .pains { grid-template-columns: 1fr 1fr; } .track { display: none; } }
@media (max-width: 560px) { .pains { grid-template-columns: 1fr; } .pain-out { font-size: 20px; } }

/* 3 steps with the same pulse */
.steps-wrap { position: relative; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; position: relative; }
.step { padding: 26px; display: flex; flex-direction: column; position: relative; z-index: 1; }
.step .n { font: 700 13px/1 var(--font); color: var(--acc-hover); letter-spacing: .06em; }
.step h3 { font-size: 21px; margin: 10px 0 8px; }
.step p { color: var(--muted); font-size: 16px; }
.step .mini { margin-top: auto; }
.mini { margin-top: 20px; background: var(--p-bg); border-radius: 16px; padding: 14px; font-size: 13px; }
.mini-r b { font-size: 13px; }
.mini-o { display: block; color: var(--p-muted); font-size: 12px; margin-top: 2px; }
.mini-i { background: #fff; border-radius: 12px; padding: 10px 12px; margin-top: 10px; }
.mini-wrap { margin-top: auto; padding-top: 20px; }
.invite { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 28px; }
.invite p { background: #fff; border-radius: 16px; padding: 16px 18px; font-weight: 600; box-shadow: 0 1px 2px rgba(15, 23, 42, .05); }
@media (max-width: 980px) { .steps { grid-template-columns: 1fr; gap: 28px; } .steps-wrap { padding-left: 26px; } .invite { grid-template-columns: 1fr; } }

/* split */
.split { display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: center; }
.split.rev > :first-child { order: 2; }
.body { font-size: 18px; color: #3B4A60; }
@media (max-width: 980px) { .split { grid-template-columns: 1fr; gap: 40px; } .split.rev > :first-child { order: 0; } }

/* 4 table */
.lines { padding: 22px; }
.lines-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.lines-h b { font-size: 17px; } .lines-h small { display: block; color: var(--muted); font-size: 13px; }
.xls { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: #fff; background: #1D6F42; border-radius: 10px; padding: 7px 12px; white-space: nowrap; }
.xls .ico { width: 16px; height: 16px; }
.ln { display: grid; grid-template-columns: 44px 1.6fr .7fr .7fr 1fr; gap: 12px; align-items: center; padding: 10px 6px; border-top: 1px solid #EDF0F4; font-size: 14px; }
.ln.th { border: 0; font-size: 12px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; padding-top: 0; }
.ln .m-photo { width: 44px; }
.ln.hot { background: #E2F3F1; border-radius: 12px; border-color: transparent; }
.ln .m-bar { margin: 0; }
.pc { display: flex; align-items: center; gap: 8px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pc .m-bar { flex: 1; }
@media (max-width: 640px) { .ln { grid-template-columns: 36px 1fr auto; row-gap: 4px; } .ln .m-photo { width: 36px; grid-row: span 2; } .ln .c-plan, .ln.th { display: none; } .ln .pc { grid-column: 2 / 4; } }

/* 5 journal + screen */
.b5-vis { position: relative; min-height: 500px; }
.b5-vis .journal { position: absolute; left: 0; top: 0; }
.b5-vis .m-client { position: absolute; right: 0; top: 214px; width: 280px; }
.journal { width: 360px; background: #FFFEFB; border-radius: 4px; padding: 18px 20px 16px; box-shadow: 0 24px 50px -20px rgba(15, 23, 42, .35), 0 0 0 1px rgba(15, 23, 42, .06); font-size: 12px; color: var(--p-ink); transform: rotate(-2deg); position: relative; z-index: 1; }
.j-h { display: flex; gap: 12px; align-items: center; border-bottom: 2px solid var(--p-ink); padding-bottom: 10px; }
.j-logo { display: flex; align-items: center; justify-content: center; text-align: center; width: 70px; height: 44px; border: 1.5px dashed #9AA6B5; border-radius: 6px; font-size: 10.5px; color: var(--p-muted); flex: none; line-height: 1.2; padding: 2px; }
.j-h b { display: block; font-size: 14px; } .j-h small { color: var(--p-muted); }
.j-obj { font-weight: 700; margin: 10px 0 6px; }
.j-row { display: grid; grid-template-columns: 1.4fr .8fr 1fr; gap: 6px; padding: 6px 2px; border-bottom: 1px solid var(--p-line); min-height: 28px; }
.j-th { border-bottom: 1.5px solid var(--p-ink); min-height: 8px; padding: 2px; }
.j-note { margin-top: 10px; font-style: italic; color: var(--p-muted); }
.j-ph { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }
.b5-vis .m-client { z-index: 2; }
.b5-vis .scr-client .m-cl-in { height: auto; }
@media (max-width: 640px) { .b5-vis { min-height: 0; display: flex; flex-direction: column; } .b5-vis .journal, .b5-vis .m-client { position: static; width: 100%; } .journal { transform: none; } .b5-vis .m-client { margin-top: 18px; } }

/* 6 band */
.band { background: var(--grad); color: #fff; border-radius: 36px; padding: 72px 64px; }
.band .sh-n { color: #7FD8CF; } .band .sh-sub { color: #C3CEDD; }
.cards4 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.c4 { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); border-radius: 20px; padding: 22px; }
.c4 h3 { font-size: 18px; margin-bottom: 6px; } .c4 p { font-size: 15px; color: #C3CEDD; }
.band-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: center; }
.m-field.fi { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; }
.m-field.fi .ico { width: 16px; height: 16px; color: var(--p-teal); margin-top: 1px; }
@media (max-width: 1080px) { .band-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .band { padding: 44px 20px; border-radius: 26px; margin: 0 -6px; } .cards4 { grid-template-columns: 1fr; } .m-order { flex-direction: column; } .m-order-arrow { transform: rotate(90deg); } }

/* 7 offline table (from "Signal", light) */
.status { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 26px; }
.status h3 { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; margin-bottom: 10px; }
.status h3 .ico { width: 18px; height: 18px; }
.status ul { background: #fff; border-radius: 16px; box-shadow: 0 1px 2px rgba(15, 23, 42, .05); overflow: hidden; }
.status li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid #EEF1F5; font-size: 15px; }
.status li:first-child { border-top: 0; }
.status .ok h3, .status .ok li .ico { color: var(--acc); }
.status .on h3, .status .on li .ico { color: #8A6100; }
.status li .ico { width: 16px; height: 16px; }
.m-ph-offi .ico { width: 15px; height: 15px; color: #8A6100; }
.b7-vis { display: flex; justify-content: center; }
@media (max-width: 520px) { .status { grid-template-columns: 1fr; } }

/* 8 ERP */
.erp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.erp-core { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 16px; border-radius: 20px; background: var(--grad); color: #fff; font-weight: 650; font-size: 17px; }
.grp { padding: 24px; }
.grp-h { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.grp-h .ico { width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: #E2F3F1; color: var(--acc-hover); }
.grp-h h3 { font-size: 18px; white-space: nowrap; }
.grp li { font-size: 14.5px; color: var(--muted); padding: 6px 0; border-top: 1px solid #EEF1F5; }
@media (max-width: 980px) { .erp { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .erp { grid-template-columns: 1fr; } }

.grp-more { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 6px; font-size: 14px; font-weight: 600; color: var(--acc-hover); text-decoration: none; }
.grp-more .ico { width: 16px; height: 16px; }

/* 8a money and real costs */
.fin-top { display: grid; grid-template-columns: 1fr 1.3fr; gap: 48px; align-items: center; }
.fin-pain { font-style: italic; color: var(--muted); font-size: 15.5px; margin-top: 18px; border-left: 3px solid #CDE9E6; padding-left: 14px; }
.fin-vis { display: flex; gap: 16px; align-items: flex-end; }
.m-fin { flex: 1; min-width: 0; }
.m-fin .m-web-in { grid-template-columns: 52px 1fr; min-height: 0; }
.m-fin .m-web-main { background: var(--p-bg); }
.m-emp { flex: none; width: 210px; margin-bottom: -28px; }
.m-emp .m-ph-scr { min-height: 0; }
.f-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; }
.f-h b { font-size: 13px; }
.f-due { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: #6B4A00; background: #FFF1CC; border-radius: 99px; padding: 3px 9px; white-space: nowrap; }
.f-due .ico { width: 13px; height: 13px; }
.f-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 12px; padding: 4px 0; }
.f-l { min-width: 0; }
.f-a { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.f-bal { background: #fff; border-radius: 10px; padding: 8px 12px; font-size: 13px; }
.f-held { background: #fff; border-radius: 10px; padding: 6px 12px; margin-top: 8px; }
.f-held .f-row:not(.f-held-h) { color: var(--p-muted); font-size: 11.5px; padding: 2px 0 2px 10px; }
.f-held-h { font-weight: 600; }
.f-own { color: var(--acc-hover); font-size: 15px; font-weight: 700; padding: 10px 12px; margin-top: 8px; background: #E2F3F1; border-radius: 10px; }
.f-own .f-a { font-size: 18px; }
.f-chart { background: #fff; border-radius: 10px; padding: 8px 12px 6px; margin-top: 8px; }
.f-lbl { font-size: 11px; color: var(--p-muted); font-weight: 600; }
.f-chart svg { width: 100%; height: 64px; display: block; margin-top: 4px; }
.f-line { fill: none; stroke: var(--acc); stroke-width: 2; vector-effect: non-scaling-stroke; }
.f-area { fill: rgba(17, 128, 122, .08); }
.f-zero { stroke: #E3B4AC; stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.f-marks { position: relative; height: 18px; font-size: 10.5px; color: var(--p-muted); }
.f-marks span { position: absolute; top: 2px; transform: translateX(-50%); white-space: nowrap; }
.f-marks span:last-child { transform: translateX(-70%); }
.f-demo { display: block; text-align: right; font-size: 10px; color: var(--p-muted); margin-top: 6px; letter-spacing: .04em; }
.f-demo[dir="auto"] { text-align: right; }
.e-card { background: #fff; border-radius: 12px; padding: 8px 10px; margin-top: 10px; }
.e-card .f-row { flex-wrap: wrap; gap: 0 8px; font-size: 11.5px; }
.e-card .f-own { margin: 6px -4px 0; padding: 8px; font-size: 12px; }
.e-card .f-own .f-a { font-size: 15px; }
.e-bal { display: grid; gap: 6px; margin-top: 10px; font-size: 11.5px; }
.e-bal div { background: #fff; border-radius: 10px; padding: 7px 10px; }
.fin-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 44px; }
.fin-c { padding: 22px; }
.fin-c h3 { font-size: 17px; margin-bottom: 8px; }
.fin-c p { font-size: 14.5px; color: var(--muted); }
@media (max-width: 1080px) { .fin-top { grid-template-columns: 1fr; gap: 32px; } .fin-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) {
  .fin-vis { flex-direction: column; align-items: stretch; gap: 18px; }
  .m-fin, .m-emp { width: 100%; margin: 0; }
  .m-fin .m-web-in { grid-template-columns: 1fr; }
  .m-emp { max-width: 260px; align-self: center; }
  .fin-cards { grid-template-columns: 1fr; margin-top: 32px; }
}

/* 9 who */
.who { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.who-c { padding: 26px; }
.who-c .dev { font: 600 13px/1 var(--font); color: var(--acc-hover); }
.who-c h3 { font-size: 22px; margin: 8px 0 14px; }
.who-c li { display: flex; gap: 10px; padding: 8px 0; font-size: 15.5px; border-top: 1px solid #EEF1F5; }
.who-c li .ico { color: var(--acc); width: 18px; height: 18px; margin-top: 3px; }
.who-s { background: var(--p-bg); border-radius: 16px; padding: 14px; margin-bottom: 16px; font-size: 13px; color: var(--p-ink); }
.who-s small { display: block; font-size: 11px; color: var(--p-muted); font-weight: 600; }
.who-s .t { font-weight: 700; }
.who-s .w { background: #fff; border-radius: 12px; padding: 10px 12px; margin-top: 10px; }
@media (max-width: 980px) { .who { grid-template-columns: 1fr; } }

/* 10 */
.nots { display: grid; gap: 12px; }
.not { display: grid; grid-template-columns: 300px 1fr; gap: 24px; padding: 22px 26px; align-items: baseline; }
.not h3 { font-size: 19px; display: flex; gap: 10px; align-items: center; }
.not h3 .ico { color: #B4473A; width: 18px; height: 18px; flex: none; }
.not p { color: var(--muted); }
@media (max-width: 760px) { .not { grid-template-columns: 1fr; gap: 6px; } }

/* 11 price */
.price { padding: 56px; display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; }
.price h2 { font-size: 40px; line-height: 1.12; letter-spacing: -.02em; }
.amt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 26px; }
.amt .big { font-size: 76px; font-weight: 750; letter-spacing: -.03em; line-height: 1; white-space: nowrap; }
.amt .unit { font-size: 18px; font-weight: 600; }
.under { color: var(--muted); margin-top: 16px; font-size: 18px; }
.price .cta { margin-top: 26px; }
.tiers { width: 100%; border-collapse: collapse; font-size: 18px; }
.tiers th { text-align: left; font-size: 13px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; padding: 0 0 10px; }
.tiers td { padding: 16px 0; border-top: 1px solid #EDF0F4; font-variant-numeric: tabular-nums; }
.tiers td + td, .tiers th + th { text-align: right; font-weight: 700; }
.custom { display: flex; gap: 10px; align-items: flex-start; background: var(--bg); border-radius: 16px; padding: 14px 16px; margin-top: 18px; font-size: 15px; }
.custom .ico { color: var(--acc); margin-top: 2px; }
.pay { font-size: 15px; color: var(--muted); margin-top: 14px; }
@media (max-width: 980px) { .price { grid-template-columns: 1fr; padding: 32px 22px; gap: 32px; } .amt .big { font-size: 60px; } .price h2 { font-size: 30px; } }

/* 12 */
.faq { max-width: 860px; }
@media (max-width: 640px) { .faq summary { font-size: 16.5px; } }

/* 13 */
.final { background: var(--grad); color: #fff; border-radius: 36px; padding: 88px 64px; text-align: center; }
.final h2 { font-size: 48px; line-height: 1.1; letter-spacing: -.025em; max-width: 860px; margin: 0 auto; }
.final .inv { color: #C3CEDD; font-size: 18px; max-width: 680px; margin: 12px auto 0; }
.final [dir="auto"] { text-align: center; }
.final .cta { justify-content: center; margin-top: 32px; }
.final .btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); box-shadow: none; }
.final .stores { justify-content: center; margin-top: 20px; }
.final .mail { display: inline-flex; min-height: 44px; align-items: center; color: #9FE3DB; margin-top: 10px; font-weight: 600; }
@media (max-width: 640px) { .final { padding: 56px 20px; border-radius: 26px; margin: 0 -6px; } .final h2 { font-size: 32px; } .final .inv { font-size: 16.5px; } .final .cta .btn { flex: 1 1 100%; } }
.ft { background: #fff; margin-top: 112px; }
@media (max-width: 640px) { .ft { margin-top: 72px; } }

/* section spacing helpers (replace inline styles of the mockup) */
section.pt0 { padding-top: 0; }
section.p0 { padding: 0; }
.sh.sh-flush { margin-bottom: 0; }
.sh .fin-h2 { margin-top: 16px; }
.vis-center { display: flex; justify-content: center; }