/*
 * lets.co.il — the brand page. Ink and lime, from the brand board: ink 60%, white 30%, lime 10%.
 * Lime only ever sits on ink, or carries ink text; never lime text on white.
 * The still screens reuse the product's own components (assets/lets/components.css).
 */

/* ---------------------------------------------------------------- base */
:root {
  --ground: #f6f6f7;
  --ink: #0b0b0c;
  --ink-soft: #3a3a40;
  --ink-2: #141416;   /* raised surfaces on ink */
  --ink-3: #1d1d21;
  --muted: #5f5f67;   /* 5.9:1 on --ground */
  --on-ink: #a9a9b2;  /* secondary text on ink, 8.4:1 */
  --lime: #e2ff78;
  --coral: #ff7a5c;
  --sun: #ffb547;
  --card: #ececef;
  --line: #e2e2e6;
  --page: 1120px;
  --gutter: 32px;
  color-scheme: light;
}
@media (max-width: 760px) { :root { --gutter: 20px; } }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; scrollbar-color: #9a9aa2 var(--ground); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body.lets-site { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--lsp-font); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.lets-site *, .lets-site *::before, .lets-site *::after { box-sizing: border-box; }
.lets-site ::selection { background: var(--lime); color: var(--ink); }
:where(.lets-site) img { max-width: 100%; display: block; }
:where(.lets-site) a { color: inherit; }
:where(.lets-site) :where(h1, h2, h3, h4) { margin: 0; font-weight: 500; }
:where(.lets-site) :where(p) { margin: 0; }
.lets-site [hidden] { display: none !important; }
.lets-site a.ls-btn { text-decoration: none; }
.lets-site :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 8px; }
.hero :focus-visible, .tech :focus-visible, .finale :focus-visible, .sh :focus-visible, .menu :focus-visible { outline-color: var(--lime); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; inset-inline-start: 16px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 999px; background: var(--lime); color: var(--ink); text-decoration: none; font-weight: 500; }
.skip:focus { top: 12px; }
.ico { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* the one button shape */
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 40px; padding: 0 20px; border: 0; border-radius: 999px; font: inherit; font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform 140ms var(--lsp-ease-out), background-color 180ms ease, box-shadow 180ms ease, color 180ms ease; }
.pill:active { transform: scale(.97); }
.pill--lg { height: 48px; padding: 0 26px; font-size: 15px; }
.pill--dark { background: var(--ink); color: #fff; }
.pill--light { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--lsp-gray-300); }
.pill--lime { background: var(--lime); color: var(--ink); }
.pill--ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .28); }
@media (hover: hover) and (pointer: fine) {
  .pill--dark:hover { background: #26262a; }
  .pill--light:hover { box-shadow: inset 0 0 0 1px var(--lsp-gray-500); }
  .pill--lime:hover { background: #ecff9e; box-shadow: 0 0 0 6px rgb(226 255 120 / .14); }
  .pill--ghost:hover { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .7); }
}
.pill__logo { width: 20px; height: 20px; flex: none; }
.pill__logo--woo { width: 64px; height: 64px; margin: -20px 0 -20px -12px; }

/* platform chips: the platforms' own marks, quiet */
.plat-chip { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 34px; padding: 0 18px; overflow: hidden; border-radius: 999px; background: rgb(255 255 255 / .07); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1); color: #fff; font-size: 13px; font-weight: 500; }
.plat-chip svg { width: 16px; height: 16px; }
.plat-chip--woo svg { width: 76px; height: 76px; margin: -21px 0; flex: none; }
.plat-chip--light { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }

/* ---------------------------------------------------------------- header (ink, always) */
:root { --sh-h: 84px; }
@media (max-width: 760px) { :root { --sh-h: 68px; } }
/* fixed at one height; only its trial button changes as the page moves */
body.lets-site { padding-top: var(--sh-h); }
.sh { position: fixed; inset: 0 0 auto; z-index: 50; background: rgb(11 11 12 / .94); backdrop-filter: saturate(1.6) blur(18px); -webkit-backdrop-filter: saturate(1.6) blur(18px); color: #fff; transition: box-shadow 200ms ease; }
.sh.is-scrolled { box-shadow: 0 1px 0 rgb(255 255 255 / .08); }
.sh__in { max-width: var(--page); margin: 0 auto; padding: 0 var(--gutter); height: var(--sh-h); display: flex; align-items: center; gap: 24px; }
.sh__logo { display: inline-flex; color: #fff; text-decoration: none; }
.sh__logo svg { height: 21px; width: auto; display: block; }
.sh__end .pill, .sh__end .burger { transition: height 360ms var(--lsp-ease-out), width 360ms var(--lsp-ease-out), background-color 180ms ease, box-shadow 180ms ease, color 180ms ease; }
.sh__cta { height: 42px; padding: 0 20px; }
.sh__end { margin-inline-start: auto; display: flex; align-items: center; gap: 10px; }
@media (max-width: 760px) { .sh__logo svg { height: 19px; } .sh__cta { height: 38px; padding: 0 16px; font-size: 14px; } }
@media (max-width: 360px) { .sh__cta { display: none; } }

/* the burger: two lines that become an x */
.burger { position: relative; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgb(255 255 255 / .08); color: #fff; cursor: pointer; flex: none; transition: background-color 180ms ease; }
.burger i { position: absolute; left: 12px; right: 12px; height: 1.6px; border-radius: 2px; background: currentColor; transition: transform 320ms var(--lsp-ease-out); }
.burger i:first-child { top: 16px; }
.burger i:last-child { top: 22px; right: 17px; }
.burger--x i:first-child { transform: translateY(3px) rotate(45deg); }
.burger--x i:last-child { right: 12px; transform: translateY(-3px) rotate(-45deg); }
@media (hover: hover) and (pointer: fine) { .burger:hover { background: rgb(255 255 255 / .16); } .burger:not(.burger--x):hover i:last-child { right: 12px; } }

/* ---------------------------------------------------------------- the menu: a side drawer from the burger */
.menu { position: fixed; inset: 0 0 0 auto; width: min(400px, 100%); height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--ink); color: #fff; overflow: auto; overscroll-behavior: contain; box-shadow: -30px 0 80px -20px rgb(0 0 0 / .5); }
.menu::backdrop { background: rgb(11 11 12 / .45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.menu[open] { display: flex; flex-direction: column; animation: menu-in 460ms var(--lsp-ease-drawer); }
.menu[open]::backdrop { animation: menu-fade 360ms ease; }
@keyframes menu-in { from { transform: translateX(100%); } }
@keyframes menu-fade { from { opacity: 0; } }
.menu__bar { position: relative; display: flex; align-items: center; justify-content: flex-end; height: 72px; padding: 0 20px 0 28px; flex: none; }
.menu__bar .menu__label { margin: 0; }
.menu__in { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; padding: 8px 28px 28px; }
.menu__nav { display: grid; }
.menu__nav a { display: grid; gap: 2px; padding: 13px 0; border-bottom: 1px solid rgb(255 255 255 / .08); text-decoration: none; color: #fff; }
.menu__nav span { display: flex; align-items: center; justify-content: space-between; font-size: 22px; letter-spacing: -.02em; font-weight: 500; transition: color 200ms ease; }
.menu__nav span::after { content: ""; width: 13px; height: 13px; flex: none; background: currentColor; opacity: 0; transform: translate(-6px, 6px); transition: opacity 220ms ease, transform 320ms var(--lsp-ease-out);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M2 12L11.5 2.5M4 2.5H11.5V10'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M2 12L11.5 2.5M4 2.5H11.5V10'/%3E%3C/svg%3E") center / contain no-repeat; }
.menu__nav small { font-size: 13px; color: var(--on-ink); }
@media (hover: hover) and (pointer: fine) { .menu__nav a:hover span { color: var(--lime); } .menu__nav a:hover span::after { opacity: 1; transform: none; } }
.menu__nav a:focus-visible span { color: var(--lime); }
.menu[open] .menu__nav a { animation: menu-link 520ms var(--lsp-ease-out) both; animation-delay: calc(140ms + var(--i) * 45ms); }
@keyframes menu-link { from { opacity: 0; transform: translateX(18px); } }
.menu__aside { display: grid; gap: 22px; }
.menu[open] .menu__aside { animation: menu-link 520ms var(--lsp-ease-out) 420ms both; }
.menu__cta { width: 100%; }
.menu__label { font-size: 12.5px; color: var(--on-ink); margin-bottom: 8px; }
.menu__plats { display: flex; flex-wrap: wrap; gap: 8px; }
.menu__mail { font-size: 16px; text-decoration: none; color: #fff; border-bottom: 1px solid rgb(255 255 255 / .25); padding-bottom: 2px; }
.menu__mail:hover { border-color: var(--lime); }
.menu__legal { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; padding-top: 18px; border-top: 1px solid rgb(255 255 255 / .08); }
.menu__legal a { color: var(--on-ink); text-decoration: none; }
.menu__legal a:hover { color: #fff; }
@media (prefers-reduced-motion: reduce) { .menu[open], .menu[open]::backdrop, .menu[open] .menu__nav a, .menu[open] .menu__aside { animation: none; } }
@media (max-width: 480px) { .menu { width: 100%; box-shadow: none; } .menu__bar { height: 64px; } }

/* ---------------------------------------------------------------- hero (ink) */
/* the hero is exactly the first screen: the phones fill what's left and are cut by its bottom edge */
.hero { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; overflow: hidden; background: var(--ink); color: #fff; margin-top: calc(-1 * var(--sh-h)); padding: calc(var(--sh-h) + clamp(36px, 9vh, 104px)) var(--gutter) 0; height: 100vh; height: 100svh; min-height: 640px; max-height: 1040px; }
/* the lime glow under the phones: big, breathing slowly, with a second light drifting across it */
.hero__glow { position: absolute; left: 50%; bottom: -46%; width: min(1700px, 240%); aspect-ratio: 1.5; translate: -50% 0; border-radius: 50%; background: radial-gradient(closest-side, rgb(226 255 120 / .3), rgb(226 255 120 / .1) 50%, transparent); pointer-events: none; animation: glow-breathe 9s ease-in-out infinite alternate; }
.hero__glow::before { content: ""; position: absolute; left: 22%; top: 8%; width: 56%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgb(226 255 120 / .2), transparent); animation: glow-drift 13s ease-in-out infinite alternate; }
@keyframes glow-breathe { from { transform: scale(.88); opacity: .75; } to { transform: scale(1.1); opacity: 1; } }
@keyframes glow-drift { from { transform: translateX(-26%) scale(.9); } to { transform: translateX(26%) scale(1.15); } }
@media (prefers-reduced-motion: reduce) { .hero__glow, .hero__glow::before { animation: none; } }
.hero > :not(.hero__glow) { position: relative; }
.hero__title { font-size: clamp(38px, 5.4vw, 74px); line-height: 1.02; letter-spacing: -.045em; text-wrap: balance; max-width: 22ch; }
.hero__title em, .finale .chapter__title em { font-style: normal; color: var(--lime); }
.hero__title em { display: inline-block; margin-top: .06em; }
.hero__lede { margin-top: 32px; max-width: 54ch; font-size: clamp(16px, 1.25vw, 18px); line-height: 1.6; color: var(--on-ink); text-wrap: balance; }
.hero__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 44px; }
.hero__on { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; margin-top: 32px; font-size: 13px; color: var(--on-ink); }
.hero__plats { display: inline-flex; gap: 8px; }
.hero__devices { position: relative; width: min(700px, 100%); flex: 1 1 auto; min-height: 150px; margin-top: clamp(36px, 7vh, 72px); }
.device { position: absolute; top: 0; width: clamp(220px, 24vw, 270px); aspect-ratio: 9 / 18.5; border-radius: 44px; padding: 10px; background: #1c1c1f; box-shadow: 0 50px 100px -30px rgb(0 0 0 / .8), 0 0 0 1px rgb(255 255 255 / .14), inset 0 0 0 1.5px #3a3a40; transition: transform 600ms var(--lsp-ease-out); }
.device--left { inset-inline-start: 6%; transform: rotate(-6deg); z-index: 2; }
.device--right { inset-inline-end: 6%; transform: rotate(5deg) translateY(36px); }
.device__screen { position: relative; height: 100%; border-radius: 35px; background: #fff; color: var(--ink); overflow: hidden; padding: 30px 16px 16px; text-align: start; font-size: 13px; }
.scr-field--dock { position: absolute; inset-inline: 12px; top: 74%; margin: 0; }
.scr-ph { color: var(--muted); font-size: 13px; }
.scr-all { margin-top: 10px; height: 36px; border-radius: 999px; display: grid; place-items: center; font-size: 12px; font-weight: 500; box-shadow: inset 0 0 0 1px var(--lsp-gray-200); }
.device__screen .ls-you { margin: 10px 0 8px; }
.device__screen .ls-you__bubble { font-size: 12.5px; padding: 8px 12px; }
.scr-tab { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 999px; background: var(--lsp-gray-50); font-size: 12px; font-weight: 500; }
.scr-tab .ls-mark { --s: 11px; }
.scr-answer { font-size: 12.5px; line-height: 1.55; color: var(--ink); }
.device__screen .ls-picks { margin-top: 8px; gap: 0; }
.device__screen .ls-pick { grid-template-columns: 50px minmax(0, 1fr); gap: 10px; padding: 8px; margin-inline: -8px; }
.device__screen .ls-pick__media { width: 50px; height: 50px; }
.device__screen .ls-pick__media::after { width: 18px; height: 18px; font-size: 10px; }
.device__screen .ls-pick__media img { object-fit: cover; padding: 0; mix-blend-mode: normal; border-radius: 10px; }
.device__screen .ls-pick__title { font-size: 12px; }
.device__screen .ls-pick__why { font-size: 11px; }
.device__screen .ls-pick__row { margin-top: 6px; }
.lets-site .ls-btn--sm { --h: 28px; padding-inline: 10px; font-size: 11px; }
.device__screen .ls-price { font-size: 12px; }
.scr-title { font-size: 20px; font-weight: 500; letter-spacing: -.02em; margin: 2px 2px 12px; }
.scr-field { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 999px; background: var(--lsp-gray-50); font-size: 14px; color: var(--ink); margin-bottom: 10px; }
.scr-field .ls-icon { width: 16px; height: 16px; color: var(--muted); }
.scr-field--focus { background: #fff; box-shadow: inset 0 0 0 1.5px var(--ink); }
.caret { width: 1.5px; height: 16px; background: var(--ink); margin-inline-start: -6px; animation: caret 1.1s steps(2) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.device__screen .ls-sec__title { padding: 6px 2px; font-size: 11px; }
.device__screen .ls-prow { padding: 6px 2px; gap: 10px; }
.device__screen .ls-prow__img { width: 42px; height: 42px; object-fit: cover; padding: 0; mix-blend-mode: normal; }
.device__screen .ls-prow__title { font-size: 12.5px; }

/* ---------------------------------------------------------------- chapters */
.chapter { max-width: var(--page); margin: 0 auto; padding: 136px var(--gutter) 0; text-align: center; }
.chapter__title { font-size: clamp(32px, 3.6vw, 48px); line-height: 1.06; letter-spacing: -.035em; color: var(--ink); text-wrap: balance; }
.chapter__lede { margin: 18px auto 0; font-size: 16px; line-height: 1.55; color: var(--muted); max-width: 56ch; text-wrap: balance; }
.js [data-reveal] { transition: filter 800ms var(--lsp-ease-out), transform 800ms var(--lsp-ease-out), opacity 800ms ease; }
.js [data-reveal]:not(.is-in) { filter: blur(6px); transform: translateY(10px); opacity: .4; }
@media (prefers-reduced-motion: reduce) { .js [data-reveal]:not(.is-in) { filter: none; transform: none; opacity: 1; } }

/* ---------------------------------------------------------------- typical search vs Lets */
.vs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 16px; margin-top: 48px; text-align: start; align-items: stretch; }
.vs__side { margin: 0; border-radius: 24px; padding: 22px; display: grid; align-content: start; gap: 18px; }
.vs__side figcaption { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; }
.vs__side--generic { background: var(--card); }
.vs__side--generic figcaption { color: var(--muted); }
.gen { border-radius: 6px; background: #fff; padding: 20px; font-family: Arial, Helvetica, sans-serif; color: #555; box-shadow: 0 0 0 1px #d6d6d6; min-height: 250px; }
.gen__field { display: flex; border: 1px solid #bdbdbd; border-radius: 3px; overflow: hidden; font-size: 14px; }
.gen__field span:first-child { flex: 1; padding: 10px 12px; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gen__btn { padding: 10px 14px; background: #e6e6e6; border-inline-start: 1px solid #bdbdbd; color: #444; }
.gen__none { margin-top: 22px; font-size: 15px; color: #333; }
.gen__hint { margin-top: 6px; font-size: 13px; color: #777; }
.gen__ghost { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 26px; }
.gen__ghost i { aspect-ratio: 1; border-radius: 3px; background: repeating-linear-gradient(45deg, #f2f2f2 0 8px, #f7f7f7 8px 16px); }
.vs__side--lets { background: var(--ink); color: #fff; }
.vs__side--lets figcaption .ls-mark { --s: 14px; color: var(--lime); }
.vs__drawer { border-radius: 18px; background: #fff; color: var(--ink); padding: 20px; display: grid; gap: 10px; min-height: 250px; align-content: start; }
.vs__drawer .ls-you { margin: 0; }
.vs__answer { font-size: 14px; line-height: 1.5; }
.vs__drawer .scr-pick { grid-template-columns: 52px minmax(0, 1fr) auto; padding: 8px; border-radius: 14px; background: var(--lsp-gray-50); }
.vs__drawer .scr-pick img { width: 52px; height: 52px; }

.vt { margin-top: 16px; border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px var(--line); text-align: start; overflow: hidden; }
.vt__row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: 24px; align-items: center; padding: 14px 24px; border-top: 1px solid var(--line); font-size: 14px; }
.vt__row--head { border-top: 0; padding-block: 12px; font-size: 12.5px; color: var(--muted); background: var(--lsp-gray-25); }
.vt__q { display: grid; gap: 2px; font-weight: 500; }
.vt__q s { text-decoration-color: var(--coral); text-decoration-thickness: 2px; }
.vt__q small { font-size: 12.5px; font-weight: 400; color: var(--muted); }
.vt__no { display: flex; align-items: center; gap: 10px; color: var(--muted); }
.vt__no::before { content: ""; width: 20px; height: 20px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--lsp-gray-300); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a9aa2' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M8 8l8 8M16 8l-8 8'/%3E%3C/svg%3E") center / 12px no-repeat; }
.vt__yes { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.vt__yes::before, .ticks li::before { content: ""; width: 20px; height: 20px; flex: none; border-radius: 50%; background: var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b0b0c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5 10 16.5l8-9'/%3E%3C/svg%3E") center / 13px no-repeat; }

/* ---------------------------------------------------------------- four outcomes: editorial rows */
.outcomes { margin-top: 48px; display: grid; text-align: start; border-top: 1px solid var(--line); }
.outcome { display: grid; grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1.15fr); gap: 28px; align-items: start; padding: 32px 0; border-bottom: 1px solid var(--line); }
.outcome h3 { font-size: clamp(22px, 2vw, 26px); letter-spacing: -.03em; line-height: 1.08; }
.outcome__lead p { margin-top: 8px; font-size: 16px; line-height: 1.45; color: var(--muted); }
.ticks { list-style: none; margin: 0; padding: 2px 0 0; display: grid; gap: 11px; }
.ticks li { display: flex; gap: 12px; font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); }
.ticks li::before { margin-top: 1px; }

/* brand tiles: ink with a white icon */
.tile { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; flex: none; background: var(--ink); color: #fff; }
.tile .ico { width: 24px; height: 24px; stroke-width: 1.6; }
.tile--lg { width: 56px; height: 56px; border-radius: 16px; }
.tile--lg .ico { width: 28px; height: 28px; stroke-width: 1.6; }

/* ---------------------------------------------------------------- feature cards and their quiet demos */
.cards { display: grid; gap: 16px; margin-top: 48px; text-align: center; }
.cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card { border-radius: 24px; background: var(--card); padding: 24px 24px 28px; display: grid; justify-items: center; align-content: start; gap: 10px; }
.card h3 { font-size: 19px; letter-spacing: -.02em; margin-top: 14px; }
.card p { font-size: 14px; color: var(--muted); line-height: 1.5; max-width: 34ch; }
.card__scene { width: 100%; max-width: 290px; min-height: 214px; padding: 18px; border-radius: 20px; background: #fff; box-shadow: 0 10px 30px -18px rgb(11 11 12 / .25); text-align: start; display: grid; align-content: center; gap: 8px; font-size: 13px; }
.card__scene .ls-you { margin: 0 0 4px; }
.card__scene .ls-you__bubble { font-size: 12.5px; padding: 7px 12px; }
.scr-row { display: flex; justify-content: space-between; align-items: center; height: 34px; padding: 0 12px; border-radius: 10px; background: var(--lsp-gray-50); font-size: 13px; }
.scr-row span { color: var(--muted); font-size: 12px; }
.scr-row s { color: var(--muted); margin-inline-end: 4px; }
.scr-pick { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; align-items: center; }
.scr-pick img { width: 56px; height: 70px; object-fit: cover; border-radius: 10px; }
.scr-pick b { display: block; font-weight: 500; font-size: 13px; }
.scr-pick span:not(.ls-btn) { font-size: 12px; color: var(--muted); line-height: 1.4; }
.scr-pick .ls-btn--primary { color: #fff; }
.scr-pick .ls-btn--secondary { color: var(--ink); }
.scr-photo { width: 84px; height: 60px; object-fit: cover; border-radius: 12px; }
.scr-seen { font-size: 12.5px; }
.scr-seen b { font-weight: 600; }
.scr-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.scr-tags .ls-tag { height: 26px; padding-inline: 10px; font-size: 12px; }
.scr-src { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.scr-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.scr-chips .ls-chip { height: 28px; padding-inline: 10px; font-size: 12px; }
.scr-exact { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px; border-radius: 14px; box-shadow: inset 0 0 0 1.5px var(--ink); }
.scr-exact img { width: 52px; height: 52px; object-fit: cover; border-radius: 10px; }
.scr-exact b { display: block; font-weight: 500; font-size: 13px; }
.scr-exact span { font-size: 12px; color: var(--muted); }
.scr-ctx { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px 0 4px; border-radius: 999px; background: var(--lsp-gray-50); font-size: 12.5px; font-weight: 500; width: max-content; }
.scr-ctx img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.scr-points { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; font-size: 12.5px; }
.scr-points li { position: relative; padding-inline-start: 16px; }
.scr-points li::before { content: ""; position: absolute; inset-inline-start: 2px; top: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--ink); }
.type { display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: bottom; max-width: 24ch; }
/* the demo plays only while its card is on screen; it loops quietly, and stands still for reduced motion */
.js [data-play] .demo { opacity: 0; }
.js [data-play].is-in .demo { animation: demo-in 6.4s var(--lsp-ease-out) infinite; animation-delay: calc(var(--d, 0) * 260ms + 120ms); }
.js [data-play].is-in .type { animation: typing 6.4s steps(var(--n, 6), end) infinite; }
@keyframes demo-in { 0% { opacity: 0; filter: blur(5px); transform: translateY(4px); } 9% { opacity: 1; filter: blur(0); transform: none; } 84% { opacity: 1; filter: blur(0); } 94%, 100% { opacity: 0; filter: blur(3px); } }
@keyframes typing { 0% { max-width: 0; } 14%, 92% { max-width: 24ch; } 100% { max-width: 0; } }
@media (prefers-reduced-motion: reduce) {
  .js [data-play] .demo { opacity: 1; animation: none !important; }
  .js [data-play] .type { animation: none !important; max-width: none; }
}

/* the drawer's two phones */
.card--tall { padding: 36px 28px 0; overflow: hidden; gap: 8px; display: flex; flex-direction: column; align-items: center; }
.card--tall .card__device { flex: 1 0 auto; min-height: 270px; margin-bottom: -12px; }
.card--tall h3 { margin-top: 0; font-size: 22px; }
.card__device { width: min(320px, 92%); margin-top: 36px; padding: 22px 18px 28px; border-radius: 36px 36px 0 0; background: #fff; box-shadow: 0 0 0 10px var(--ink), 0 30px 60px -20px rgb(11 11 12 / .4); text-align: start; min-height: 250px; }
.scr-cmp { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 12.5px; }
.scr-cmp th, .scr-cmp td { text-align: start; padding: 9px 4px; border-top: 1px solid var(--lsp-gray-200); }
.scr-cmp thead td { border-top: 0; }
.scr-cmp thead img { width: 100%; aspect-ratio: 1.35; object-fit: cover; border-radius: 10px; }
.scr-cmp th { color: var(--muted); font-weight: 400; width: 34%; }
.card__device--looks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-top: 26px; }
.look { display: grid; justify-items: center; align-content: center; gap: 14px; padding: 22px 10px; border-radius: 18px; background: var(--lsp-gray-50); }
.look .ls-mark { --s: 28px; }
.look__aa { font-family: Georgia, "Times New Roman", serif; font-size: 30px; line-height: 28px; color: #7a2e1f; }
.look__btn { height: 32px; padding: 0 14px; display: inline-flex; align-items: center; font-size: 12px; font-weight: 500; white-space: nowrap; }
@media (max-width: 400px) { .look__btn { padding: 0 10px; font-size: 11px; } }
.look--ours .look__btn { border-radius: 999px; background: var(--ink); color: #fff; }
.look--store .look__btn { border-radius: 4px; background: #7a2e1f; color: #fff; font-family: Georgia, serif; }
.look__name { font-size: 12px; color: var(--muted); }

.sub-title { margin-top: 88px; font-size: clamp(22px, 2vw, 26px); letter-spacing: -.025em; }
.inside { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px 28px; }
.inside li { display: grid; justify-items: center; align-content: start; gap: 8px; text-align: center; }
.inside .tile { margin-bottom: 8px; }
.inside b { font-weight: 500; font-size: 15.5px; }
.inside span:not(.tile) { font-size: 13.5px; line-height: 1.5; color: var(--muted); max-width: 26ch; }

/* ---------------------------------------------------------------- the control room (merchant panel) */
.pm { margin-top: 40px; display: grid; justify-items: center; }
.pm__tabs { display: flex; gap: 4px; padding: 5px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--line); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.pm__tabs::-webkit-scrollbar { display: none; }
.pm__tab { position: relative; height: 38px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; font: inherit; font-size: 14px; font-weight: 500; color: var(--muted); cursor: pointer; white-space: nowrap; overflow: hidden; transition: color 180ms ease, background-color 180ms ease; }
.pm__tab[aria-selected="true"] { background: var(--ink); color: #fff; }
@media (hover: hover) and (pointer: fine) { .pm__tab[aria-selected="false"]:hover { color: var(--ink); background: var(--lsp-gray-50); } }

.win { width: 100%; margin-top: 28px; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px rgb(11 11 12 / .06), 0 50px 100px -40px rgb(11 11 12 / .35), 0 18px 36px -24px rgb(11 11 12 / .18); overflow: hidden; text-align: start; }
.win__bar { display: flex; align-items: center; gap: 7px; height: 44px; padding: 0 18px; background: var(--lsp-gray-50); border-bottom: 1px solid var(--line); }
.win__bar i { width: 11px; height: 11px; border-radius: 50%; background: var(--lsp-gray-300); }
.win__bar span { margin-inline: auto; font-size: 12.5px; color: var(--muted); transform: translateX(-24px); }
.win__body { display: grid; grid-template-columns: 200px minmax(0, 1fr); min-height: 500px; }
.pm__side { display: grid; align-content: start; gap: 2px; padding: 20px 14px; background: var(--lsp-gray-25); border-inline-end: 1px solid var(--line); font-size: 14px; color: var(--ink-soft); }
.pm__brand { display: flex; align-items: center; gap: 8px; padding: 0 10px 18px; font-size: 16px; }
.pm__brand .ls-mark { --s: 16px; }
.pm__side > span { display: flex; align-items: center; justify-content: space-between; height: 38px; padding: 0 12px; border-radius: 10px; transition: background-color 220ms ease, color 220ms ease; }
.pm__side > span.is-on { background: var(--ink); color: #fff; }
.pm__side em { font-style: normal; font-size: 11.5px; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--coral); color: var(--ink); display: grid; place-items: center; font-weight: 500; }
.pm__pane { padding: 28px 30px 32px; display: grid; gap: 16px; align-content: start; animation: pane-in 460ms var(--lsp-ease-out); }
@keyframes pane-in { from { opacity: 0; transform: translateY(6px); filter: blur(4px); } }
@media (prefers-reduced-motion: reduce) { .pm__pane { animation: none; } }
.pm__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 4px; }
.pm__head h3 { font-size: 22px; letter-spacing: -.025em; }
.pm__head p { font-size: 13.5px; color: var(--muted); margin-top: 2px; }
.pm__range { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--lsp-gray-50); font-size: 12.5px; }
.pm__range > * { padding: 6px 12px; border-radius: 999px; color: var(--muted); }
.pm__range b { background: #fff; color: var(--ink); font-weight: 500; box-shadow: 0 1px 2px rgb(11 11 12 / .08); }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.kpis--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpi { display: grid; gap: 4px; padding: 16px 18px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--line); }
.kpi span { font-size: 12.5px; color: var(--muted); }
.kpi b { font-size: 22px; font-weight: 500; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kpi .up { justify-self: start; font-style: normal; font-size: 11.5px; font-weight: 500; height: 22px; padding: 0 8px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--ink); display: inline-flex; align-items: center; }
.kpi .up::before { content: "▲"; font-size: 8px; margin-inline-end: 4px; }
.pm__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pm__card { padding: 18px 20px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--line); display: grid; gap: 10px; align-content: start; }
.pm__card h4 { font-size: 15px; letter-spacing: -.01em; }
.pm__h4-gap { margin-top: 10px; }
.todo { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-soft); }
.todo b { color: var(--ink); font-weight: 500; }
.dot { width: 10px; height: 10px; border-radius: 50%; }
.dot--coral { background: var(--coral); }
.dot--sun { background: var(--sun); }
.mini { height: 30px; padding: 0 14px; border-radius: 999px; background: var(--lsp-gray-50); font-size: 12.5px; font-weight: 500; display: inline-flex; align-items: center; justify-self: start; }
.mini--ink { background: var(--ink); color: #fff; }
.bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.bars li { display: grid; grid-template-columns: 76px minmax(0, 1fr) 40px; gap: 12px; align-items: center; font-size: 13.5px; }
.bars i { height: 8px; border-radius: 999px; background: var(--lsp-gray-100); position: relative; overflow: hidden; }
.bars i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: inherit; background: var(--ink); animation: bar-in 900ms var(--lsp-ease-out) both; }
@keyframes bar-in { from { width: 0; } }
@media (prefers-reduced-motion: reduce) { .bars i::after { animation: none; } }
.bars b { font-weight: 500; text-align: end; font-variant-numeric: tabular-nums; }
.miss { list-style: none; margin: 0; padding: 0; display: grid; }
.miss li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.miss li:first-child { border-top: 0; }
.cnt { font-style: normal; min-width: 28px; height: 22px; padding: 0 8px; border-radius: 999px; display: grid; place-items: center; font-size: 12px; font-weight: 500; box-shadow: inset 0 0 0 1px var(--ink); }
.cnt--coral { background: var(--coral); color: var(--ink); box-shadow: none; }
.cnt--sun { background: var(--sun); color: var(--ink); box-shadow: none; }
.src { list-style: none; margin: 0; padding: 0; display: grid; }
.src li { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.src li:first-child { border-top: 0; }
.src__ok { grid-row: span 2; width: 22px; height: 22px; border-radius: 50%; background: var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b0b0c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5 10 16.5l8-9'/%3E%3C/svg%3E") center / 13px no-repeat; }
.src b { font-weight: 500; }
.src em { font-style: normal; font-size: 12.5px; color: var(--muted); }
.pm__field { padding: 11px 14px; border-radius: 12px; background: var(--lsp-gray-50); font-size: 13.5px; }
.pm__field--area { min-height: 70px; line-height: 1.5; }
.lead { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.lead:first-child { border-top: 0; padding-top: 0; }
.av { width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-weight: 500; }
.lead p { display: grid; min-width: 0; }
.lead p b { font-weight: 500; }
.lead p span { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch { font-style: normal; font-size: 12px; height: 24px; padding: 0 10px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--lsp-gray-300); display: inline-flex; align-items: center; white-space: nowrap; }
.lead time { font-size: 12px; color: var(--muted); min-width: 60px; text-align: end; }
.shots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.shots img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; }
.seg { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 999px; background: var(--lsp-gray-50); font-size: 13px; text-align: center; }
.seg > * { padding: 7px 10px; border-radius: 999px; color: var(--muted); }
.seg b { background: var(--ink); color: #fff; font-weight: 500; }
.set { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.set b { font-weight: 500; font-size: 13px; }
.sw { position: relative; width: 38px; height: 22px; flex: none; border-radius: 999px; background: var(--lsp-gray-300); }
.sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform 200ms ease; }
.sw.is-on { background: var(--ink); }
.sw.is-on::after { transform: translateX(16px); }
.pm__caps { list-style: none; margin: 28px 0 0; padding: 0; max-width: 62ch; font-size: 16px; line-height: 1.55; color: var(--muted); min-height: 3.2em; }
.pm__caps b { color: var(--ink); font-weight: 500; }
.pm__fine { margin-top: 14px; font-size: 13px; color: var(--muted); }

/* ---------------------------------------------------------------- the technology (ink band) */
.tech { margin-top: 136px; background: var(--ink); color: #fff; padding: 120px var(--gutter) 128px; }
.tech__in { max-width: var(--page); margin: 0 auto; display: grid; justify-items: center; text-align: center; }
.tech .chapter__title { color: #fff; }
.tech .chapter__lede { color: var(--on-ink); }
.tech-grid { list-style: none; margin: 48px 0 0; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; text-align: start; }
.tech-grid li { border-radius: 20px; background: var(--ink-2); padding: 22px 22px 26px; display: grid; align-content: start; gap: 8px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .07); transition: box-shadow 260ms ease; }
@media (hover: hover) and (pointer: fine) { .tech-grid li:hover { box-shadow: inset 0 0 0 1px rgb(226 255 120 / .35); } }
.tech-grid b { font-weight: 500; font-size: 16px; letter-spacing: -.01em; margin-top: 10px; }
.tech-grid span:not([class]) { font-size: 13.5px; line-height: 1.55; color: var(--on-ink); }
.io { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 7px 0 14px; border-radius: 999px; background: var(--ink-3); font-size: 14px; width: max-content; max-width: 100%; }
.io[dir="rtl"] { padding: 0 16px 0 8px; }
.io__in { color: #d2d2d7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.io__in s { text-decoration-color: #fff; text-decoration-thickness: 2px; }
.io__to { width: 12px; height: 12px; flex: none; stroke: #8f8f97; fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.io__to--rtl { transform: scaleX(-1); }
.io__out { height: 32px; padding: 0 12px; border-radius: 999px; background: #fff; color: var(--ink); display: inline-flex; align-items: center; font-weight: 500; white-space: nowrap; }
.io--icon { width: 46px; padding: 0; justify-content: center; background: var(--lime); color: var(--ink); border-radius: 16px; }
.io--icon .ico { width: 22px; height: 22px; stroke-width: 1.7; }

/* ---------------------------------------------------------------- install: three steps */
.steps { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; text-align: start; counter-reset: none; }
.step { position: relative; border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px var(--line); padding: 26px 26px 28px; display: grid; align-content: start; gap: 10px; }
.step__n { width: 38px; height: 38px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-size: 15px; font-weight: 500; margin-bottom: 10px; }
.step h3 { font-size: 19px; letter-spacing: -.02em; }
.step p { font-size: 14px; line-height: 1.55; color: var(--muted); }
.step__plats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.points { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.points li { display: grid; justify-items: center; align-content: start; gap: 8px; text-align: center; }
.points .ico { width: 30px; height: 30px; stroke-width: 1.4; color: var(--ink); margin-bottom: 6px; }
.points b { font-weight: 500; font-size: 15px; }
.points span { font-size: 13.5px; color: var(--muted); max-width: 22ch; }

/* ---------------------------------------------------------------- questions: heading on the left, an accordion on the right */
.faq { max-width: var(--page); margin: 136px auto 0; padding: 0 var(--gutter); display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; align-items: start; }
.faq__head { position: sticky; top: calc(var(--sh-h) + 32px); }
.faq__head .chapter__lede { margin: 18px 0 0; }
.faq__mail { display: inline-block; margin-top: 22px; font-size: 15px; font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--ink); padding-bottom: 2px; }
.faq__list { margin-top: -22px; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 0; font-size: 17px; font-weight: 500; letter-spacing: -.01em; cursor: pointer; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: ""; width: 32px; height: 32px; flex: none; border-radius: 50%; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b0b0c' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M12 4.5v15M4.5 12h15'/%3E%3C/svg%3E") center / 20px no-repeat; box-shadow: inset 0 0 0 1px var(--line); transition: transform 300ms var(--lsp-ease-out), background-color 200ms ease; }
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item p { padding: 0 56px 24px 0; font-size: 15px; line-height: 1.65; color: var(--ink-soft); max-width: 62ch; }
.faq__item p a { color: var(--ink); }
.faq__item[open] p { animation: faq-in 380ms var(--lsp-ease-out); }
@keyframes faq-in { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .faq__item[open] p { animation: none; } .faq__item summary::after { transition: none; } }
@media (max-width: 900px) {
  .faq { grid-template-columns: minmax(0, 1fr); gap: 36px; margin-top: 112px; }
  .faq__head { position: static; text-align: center; }
  .faq__head .chapter__lede { margin-inline: auto; }
  .faq__item summary { font-size: 16px; padding: 18px 0; }
  .faq__item p { padding-right: 0; }
}

/* ---------------------------------------------------------------- finale (ink) */
.finale { position: relative; margin-top: 136px; padding: 128px var(--gutter) 120px; display: grid; justify-items: center; text-align: center; background: var(--ink); color: #fff; overflow: hidden; }
.finale::before { content: ""; position: absolute; left: 50%; top: 100%; width: min(1000px, 160%); aspect-ratio: 1.4; translate: -50% -55%; border-radius: 50%; background: radial-gradient(closest-side, rgb(226 255 120 / .16), transparent); pointer-events: none; }
.finale > * { position: relative; }
.finale .chapter__title { color: #fff; font-size: clamp(34px, 4.4vw, 58px); max-width: 18ch; }
.finale .chapter__lede { color: var(--on-ink); }
.finale__mark { --s: 40px; color: var(--lime); margin-bottom: 36px; }
.finale__mark.is-in { animation: ls-hourglass 1.8s var(--lsp-ease-in-out) 2; }
.finale__mark.is-in i { animation: ls-sand 1.8s var(--lsp-ease-in-out) 2; }
.finale__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 40px; }
.finale__help { margin-top: 24px; font-size: 14px; color: var(--on-ink); }
.finale__help a { color: #fff; }

/* ---------------------------------------------------------------- footer (ink, continues the finale): copyright left, links right */
.sf { padding: 28px 0 32px; background: var(--ink); color: var(--on-ink); border-top: 1px solid rgb(255 255 255 / .08); }
.sf__in { max-width: var(--page); margin: 0 auto; padding: 0 var(--gutter); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 32px; }
.sf__fine { font-size: 13px; }
.sf__links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 24px; font-size: 13px; }
.sf__links a { color: var(--on-ink); text-decoration: none; transition: color 160ms ease; }
.sf__links a:hover { color: #fff; }

/* ---------------------------------------------------------------- cookie note */
.cookie { position: fixed; z-index: 60; inset-inline-start: 20px; bottom: 20px; max-width: 400px; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px 14px 14px 18px; border-radius: 22px; background: #fff; color: var(--ink); box-shadow: 0 0 0 1px rgb(11 11 12 / .06), var(--lsp-shadow-lg); opacity: 0; transform: translateY(16px); transition: opacity 360ms ease, transform 460ms var(--lsp-ease-out); }
.cookie.is-in { opacity: 1; transform: none; }
.cookie__icon { width: 30px; height: 30px; fill: currentColor; }
.cookie__text { font-size: 13.5px; line-height: 1.45; color: var(--ink-soft); }
.cookie__text a { color: var(--ink); }
.cookie__ok { height: 38px; padding: 0 18px; font-size: 14px; }
@media (max-width: 480px) { .cookie { inset-inline: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); max-width: none; } }
@media (prefers-reduced-motion: reduce) { .cookie { transition: none; } }

/* ---------------------------------------------------------------- legal pages */
.legal { max-width: 760px; margin: 0 auto; padding: 88px var(--gutter) 120px; }
.legal__head { padding-bottom: 36px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.legal h1 { font-size: clamp(34px, 4.2vw, 50px); letter-spacing: -.045em; line-height: 1; }
.legal__meta { margin-top: 16px; font-size: 14px; color: var(--muted); }
.legal__intro { margin-top: 20px; font-size: 17px; line-height: 1.55; color: var(--ink-soft); text-wrap: pretty; }
.legal section { padding-top: 40px; }
.legal h2 { font-size: 19px; letter-spacing: -.015em; margin-bottom: 12px; }
.legal p, .legal li { font-size: 15px; color: var(--ink-soft); line-height: 1.7; }
.legal p + p { margin-top: 12px; }
.legal ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.legal li { position: relative; padding-inline-start: 22px; }
.legal li::before { content: ""; position: absolute; inset-inline-start: 2px; top: .72em; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }
.legal li b { color: var(--ink); font-weight: 500; }
.legal a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.legal-page .sh { position: fixed; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1000px) {
  .tech-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inside { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .outcome { grid-template-columns: 72px minmax(0, 1fr); }
  .outcome .ticks { grid-column: 2; }
  .win__body { grid-template-columns: minmax(0, 1fr); }
  .pm__side { display: none; }
  .steps { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; }
}
@media (max-width: 900px) {
  .cards--3 { grid-template-columns: minmax(0, 1fr); max-width: 440px; margin-inline: auto; }
  .points { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 20px; }
  .vs { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .hero { padding-top: calc(var(--sh-h) + 56px); }
  .hero__devices { margin-top: 40px; }
  .device { width: 210px; border-radius: 36px; }
  .device__screen { border-radius: 30px; }
  .device--left { inset-inline-start: calc(50% - 190px); }
  .device--right { inset-inline-end: calc(50% - 190px); }
  .hero__ctas { width: 100%; }
  .hero__ctas .pill { flex: 1 1 100%; }
  .chapter { padding-top: 112px; }
  .chapter__lede { font-size: 17px; }
  .chapter__title br, .chapter__lede br { display: none; }
  .vs__side { padding: 18px; border-radius: 24px; }
  .vs__drawer .scr-pick { grid-template-columns: 48px minmax(0, 1fr); }
  .vs__drawer .scr-pick .ls-btn { grid-column: 2; justify-self: start; }
  .vt__row--head { display: none; }
  .vt__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 16px; padding: 18px 20px; }
  .vt__q { grid-column: 1 / -1; }
  .vt__no, .vt__yes { font-size: 14px; align-items: flex-start; }
  .outcomes { margin-top: 48px; }
  .outcome { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 32px 0; }
  .outcome .ticks { grid-column: auto; }
  .tile--lg { width: 60px; height: 60px; border-radius: 18px; }
  .tile--lg .ico { width: 30px; height: 30px; }
  .cards--2 { grid-template-columns: minmax(0, 1fr); max-width: 440px; margin-inline: auto; }
  .inside { gap: 36px 16px; }
  .sub-title { margin-top: 80px; }
  .pm__tabs { justify-content: flex-start; width: calc(100% + 2 * var(--gutter)); margin-inline: calc(-1 * var(--gutter)); border-radius: 0; box-shadow: none; background: transparent; padding: 0 var(--gutter); }
  .pm__tab { flex: none; height: 40px; padding: 0 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
  .pm__tab[aria-selected="true"] { box-shadow: none; }
  .win { margin-top: 20px; border-radius: 18px; }
  .win__body { min-height: 0; }
  .pm__pane { padding: 20px 16px 22px; }
  .pm__head { flex-direction: column; align-items: flex-start; }
  .pm__head h3 { font-size: 22px; }
  .kpis, .kpis--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .kpi { padding: 12px 14px; }
  .kpi b { font-size: 21px; }
  .pm__grid { grid-template-columns: minmax(0, 1fr); }
  .todo { grid-template-columns: 10px minmax(0, 1fr); }
  .todo .mini { grid-column: 2; }
  .lead { grid-template-columns: 36px minmax(0, 1fr); }
  .lead .ch, .lead time { grid-column: 2; justify-self: start; text-align: start; }
  .lead time { margin-top: -8px; }
  .pm__caps { font-size: 16px; min-height: 4.8em; }
  .tech { margin-top: 112px; padding: 100px var(--gutter) 110px; }
  .tech-grid { grid-template-columns: minmax(0, 1fr); }
  .steps { margin-top: 48px; }
  .finale { margin-top: 112px; padding: 110px var(--gutter) 100px; }
  .finale__ctas { width: 100%; }
  .finale__ctas .pill { flex: 1 1 100%; }
  .sf__in { flex-direction: column-reverse; align-items: flex-start; }
  .sf__links { justify-content: flex-start; }
  .legal { padding-top: 56px; }
}

:root { --ink-deep: var(--ink); }
/* ---------------------------------------------------------------- start a free trial (dialog) */
.trial { width: min(460px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: 28px; background: #fff; color: var(--ink); box-shadow: var(--lsp-shadow-lg); overflow: auto; overscroll-behavior: contain; }
.trial::backdrop { background: rgb(11 11 12 / .34); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.trial[open] { animation: trial-in 280ms var(--lsp-ease-out); }
.trial[open]::backdrop { animation: trial-fade 280ms ease; }
@keyframes trial-in { from { opacity: 0; filter: blur(6px); transform: translateY(8px) scale(.98); } to { opacity: 1; filter: none; transform: none; } }
@keyframes trial-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .trial[open], .trial[open]::backdrop { animation: none; } }
.trial__form, .trial__done { position: relative; display: grid; gap: 16px; padding: 36px 32px 28px; }
.trial__done { justify-items: center; text-align: center; padding-top: 44px; }
.trial__x { position: absolute; top: 14px; inset-inline-end: 14px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--lsp-gray-50); color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.trial__x .ico { width: 18px; height: 18px; }
.trial__mark { --s: 26px; color: var(--ink); }
.trial__title { font-size: 28px; letter-spacing: -.025em; line-height: 1.1; outline: none; }
.trial__lede { margin-top: -6px; font-size: 15px; line-height: 1.5; color: var(--muted); }
.trial__lede b { color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }
.trial__platforms { margin: 4px 0 0; padding: 0; border: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.trial__platforms legend { padding: 0; margin-bottom: 8px; font-size: 13px; color: var(--muted); }
.plat { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; box-shadow: inset 0 0 0 1.5px var(--lsp-gray-300); cursor: pointer; transition: box-shadow 160ms ease; }
.plat input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.plat__logo { width: 40px; height: 40px; border-radius: 12px; background: var(--lsp-gray-50); color: var(--lsp-gray-400); display: grid; place-items: center; flex: none; transition: background-color 160ms ease, color 160ms ease; }
.plat__logo svg { width: 22px; height: 22px; }
.plat__name { display: grid; font-size: 15px; font-weight: 500; line-height: 1.2; }
.plat__name small { font-size: 12px; font-weight: 400; color: var(--muted); }
.plat:has(input:checked) { box-shadow: inset 0 0 0 2px var(--ink); }
.plat:has(input:checked) .plat__logo { background: var(--ink-deep); color: #fff; }
.plat:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .plat:hover { box-shadow: inset 0 0 0 1.5px var(--lsp-gray-500); } .plat:has(input:checked):hover { box-shadow: inset 0 0 0 2px var(--ink); } }
.trial__field { display: grid; gap: 6px; font-size: 13px; color: var(--muted); }
.trial__field input { height: 50px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--lsp-gray-50); font: inherit; font-size: 16px; color: var(--ink); outline: none; transition: background-color 160ms ease, box-shadow 160ms ease; }
.trial__field input:focus { background: #fff; box-shadow: inset 0 0 0 1.5px var(--ink); }
.trial__field input[aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px var(--ink), 0 0 0 3px #ff7a5c; }
.trial__hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }
.trial__err { padding: 10px 14px; border-radius: 12px; background: #ff7a5c; color: var(--ink-deep); font-size: 14px; }
.trial__go { width: 100%; margin-top: 4px; gap: 10px; }
.trial__go .ls-mark { --s: 16px; color: #fff; }
.trial__fine { font-size: 12.5px; line-height: 1.5; color: var(--muted); text-align: center; }
.trial__fine a { color: var(--ink); }
.trial__ok { width: 64px; height: 64px; border-radius: 50%; background: var(--lime); color: var(--ink-deep); display: grid; place-items: center; }
.trial__ok .ico { width: 30px; height: 30px; stroke-width: 2.2; }
.trial__done .pill { margin-top: 8px; }
@media (max-width: 480px) {
  .trial { width: 100%; max-width: none; margin: auto 0 0; border-radius: 28px 28px 0 0; max-height: 92dvh; }
  .trial[open] { animation-name: trial-up; }
  @keyframes trial-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
  .trial__form, .trial__done { padding: 32px 20px calc(24px + env(safe-area-inset-bottom, 0px)); }
}
.lets-site .trial__title:focus-visible { outline: none; }
.plat input[value="wordpress"] ~ .plat__logo svg { width: 32px; height: 32px; }
html.menu-open { overflow: hidden; }
.lets-site .menu__title:focus { outline: none; }
/* the header's trial button: a white outline at the top of the page, lime once the page moves */
.sh:not(.is-scrolled) .sh__cta { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .7); }
@media (hover: hover) and (pointer: fine) { .sh:not(.is-scrolled) .sh__cta:hover { background: rgb(255 255 255 / .08); box-shadow: inset 0 0 0 1px #fff; } }
.ticks li > span b { color: var(--ink); font-weight: 500; }
/* lime buttons carry Endless's thin diagonal arrow (mirrored for LTR), which lifts on hover */
.pill--lime:not(.cookie__ok)::after { content: ""; width: 12px; height: 12px; flex: none; margin-inline: 2px -2px; background: currentColor; transition: transform 260ms var(--lsp-ease-out);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M2 12L11.5 2.5M4 2.5H11.5V10'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M2 12L11.5 2.5M4 2.5H11.5V10'/%3E%3C/svg%3E") center / contain no-repeat; }
@media (hover: hover) and (pointer: fine) { .pill--lime:not(.cookie__ok):hover::after { transform: translate(2px, -2px); } }
.scr-ctx img[src*="amber-perfume"] { object-position: 14% 60%; }

/* ---------------------------------------------------------------- pricing */
.pill--outline { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
@media (hover: hover) and (pointer: fine) { .pill--outline:hover { background: var(--ink); color: #fff; } }
.pr-hero { position: relative; overflow: hidden; margin-top: calc(-1 * var(--sh-h)); padding: calc(var(--sh-h) + 96px) var(--gutter) 220px; background: var(--ink); color: #fff; text-align: center; display: grid; justify-items: center; }
.pr-hero > :not(.hero__glow) { position: relative; }
.pr-hero .hero__glow { bottom: -70%; }
.pr-hero__title { font-size: clamp(36px, 5vw, 66px); line-height: 1.03; letter-spacing: -.045em; }
.pr-hero__title em { font-style: normal; color: var(--lime); }
.pr-hero__lede { margin-top: 24px; max-width: 60ch; font-size: clamp(15px, 1.2vw, 17px); line-height: 1.6; color: var(--on-ink); text-wrap: balance; }
.pr-hero__note { margin-top: 18px; font-size: 13px; color: var(--on-ink); }
.pr-plans { position: relative; max-width: var(--page); margin: -150px auto 0; padding: 0 var(--gutter); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.pr-card { position: relative; display: flex; flex-direction: column; border-radius: 28px; background: #fff; padding: 32px 28px 30px; box-shadow: 0 0 0 1px var(--line), 0 30px 60px -36px rgb(11 11 12 / .35); }
.pr-card__name { font-size: 20px; letter-spacing: -.015em; }
.pr-card__for { margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--muted); min-height: 3em; }
.pr-card__price { display: flex; align-items: baseline; gap: 8px; margin-top: 22px; }
.pr-card__price b { font-size: 52px; font-weight: 500; letter-spacing: -.045em; line-height: 1; }
.pr-card__price span { font-size: 14px; color: var(--muted); }
.pr-card__cta { margin-top: 22px; width: 100%; }
.pr-limits { list-style: none; margin: 26px 0 0; padding: 18px 0; display: grid; gap: 9px; border-block: 1px solid var(--line); font-size: 14.5px; color: var(--ink-soft); }
.pr-limits b { color: var(--ink); font-weight: 500; }
.pr-card__plus { margin-top: 20px; font-size: 13px; font-weight: 500; }
.pr-card__list { margin-top: 14px; }
.pr-card__list li { font-size: 14px; }
.pr-card > .pr-card__list:first-of-type { margin-top: 20px; }
.pr-card--best { background: var(--ink); color: #fff; box-shadow: 0 40px 80px -36px rgb(11 11 12 / .6); }
.pr-card--best .pr-card__for, .pr-card--best .pr-card__price span { color: var(--on-ink); }
.pr-card--best .pr-limits { border-color: rgb(255 255 255 / .12); color: #d2d2d7; }
.pr-card--best .pr-limits b, .pr-card--best .pr-card__plus { color: #fff; }
.pr-card--best .ticks li { color: #d2d2d7; }
.pr-card__badge { position: absolute; top: 28px; inset-inline-end: 24px; height: 28px; padding: 0 12px; border-radius: 999px; background: var(--lime); color: var(--ink); font-size: 12.5px; font-weight: 500; display: inline-flex; align-items: center; }
.pr-ent { max-width: calc(var(--page) - 2 * var(--gutter)); margin: 16px auto 0; padding: 28px 32px; border-radius: 28px; background: var(--card); display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.pr-ent h2 { font-size: 20px; letter-spacing: -.015em; }
.pr-ent p { margin-top: 6px; font-size: 14.5px; line-height: 1.55; color: var(--muted); max-width: 70ch; }
.pr-table { margin-top: 48px; border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px var(--line); text-align: start; overflow: hidden; }
.pr-row { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); align-items: stretch; border-top: 1px solid var(--line); font-size: 14px; }
.pr-row > * { padding: 13px 20px; display: flex; align-items: center; }
.pr-row [role="rowheader"] { color: var(--ink-soft); }
.pr-row--head { border-top: 0; font-weight: 500; font-size: 15px; }
.pr-row .is-best { background: rgb(226 255 120 / .16); }
.pr-row--head .is-best { background: var(--lime); }
.pr-group { padding: 22px 20px 8px; border-top: 1px solid var(--line); font-size: 12.5px; font-weight: 500; letter-spacing: .02em; color: var(--muted); }
.pr-row .y, .pr-row .n { font-size: 0; }
.pr-row .y::before, .pr-row .n::before { content: ""; display: block; width: 20px; height: 20px; border-radius: 50%; }
.pr-row .y::before { background: var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b0b0c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5 10 16.5l8-9'/%3E%3C/svg%3E") center / 13px no-repeat; }
.pr-row .n::before { width: 12px; height: 1.5px; border-radius: 2px; margin-inline-start: 4px; background: var(--lsp-gray-300); }
.pricing .faq { margin-top: 120px; }
.pricing .finale { margin-top: 120px; }
@media (max-width: 1000px) {
  .pr-plans { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
  .pr-card__for { min-height: 0; }
  .pr-ent { max-width: min(520px, calc(100% - 2 * var(--gutter))); flex-direction: column; align-items: flex-start; }
}
@media (max-width: 760px) {
  .pr-hero { padding: calc(var(--sh-h) + 56px) var(--gutter) 190px; }
  .pr-hero__lede br { display: none; }
  .pr-ent { padding: 24px 22px; }
  .pr-table { margin-inline: calc(-1 * var(--gutter) + 8px); border-radius: 18px; }
  .pr-row { grid-template-columns: minmax(0, 1.25fr) repeat(3, minmax(0, .8fr)); font-size: 12.5px; }
  .pr-row > * { padding: 11px 8px; }
  .pr-row [role="rowheader"] { padding-inline-start: 14px; }
  .pr-row--head { font-size: 12.5px; }
  .pr-group { padding-inline: 14px; }
}

/* ---------------------------------------------------------------- mobile pass */
/* the generic search mock never pushes its card past the screen */
.gen__field span:first-child { min-width: 0; }
.vs__side { min-width: 0; grid-template-columns: minmax(0, 1fr); }
/* comfortable tap targets for the small links */
.sh__logo { padding-block: 10px; }
.sf__links a, .menu__legal a { display: inline-flex; align-items: center; min-height: 40px; }
.faq__mail, .finale__help a, .menu__mail { display: inline-block; padding-block: 8px; }
.faq__mail { padding-bottom: 4px; }
.points b, .inside b, .step h3, .outcome h3, .card h3 { text-wrap: balance; }
@media (max-width: 760px) {
  /* hero phones: a little smaller, and no floating field over the picks */
  .device { width: 196px; border-radius: 34px; padding: 8px; }
  .device__screen { border-radius: 27px; padding: 24px 12px 12px; }
  .device--left { inset-inline-start: calc(50% - 178px); }
  .device--right { inset-inline-end: calc(50% - 178px); }
  .scr-field--dock { display: none; }
  /* the technology cards, tighter */
  .tech-grid { gap: 10px; }
  .tech-grid li { padding: 18px 18px 20px; gap: 6px; }
  .tech-grid b { margin-top: 6px; }
  /* the panel tabs scroll sideways: a soft edge says so */
  .pm__tabs { -webkit-mask: linear-gradient(90deg, #000 85%, transparent); mask: linear-gradient(90deg, #000 85%, transparent); }
}

/* ---------------------------------------------------------------- mobile pass 2 */
.tech-grid--facts { margin-top: 16px; }
.dots { display: none; }
@media (max-width: 760px) {
  /* less air above the chapters */
  .chapter { padding-top: 76px; }
  .tech { margin-top: 76px; padding: 72px var(--gutter) 76px; }
  .faq { margin-top: 76px; }
  .finale { margin-top: 76px; padding: 84px var(--gutter) 80px; }
  .cards, .vs, .outcomes, .steps, .pm { margin-top: 36px; }
  .tech-grid { margin-top: 36px; }
  .sub-title { margin-top: 64px; }
  .points { margin-top: 48px; }
  .pricing .faq, .pricing .finale { margin-top: 76px; }

  /* the what-shoppers-type table is for wide screens */
  .vt { display: none; }

  /* one field: a carousel, one card and the next peeking in */
  .cards--3[data-carousel] { display: flex; max-width: none; gap: 12px; margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 4px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; overscroll-behavior-x: contain; }
  .cards--3[data-carousel]::-webkit-scrollbar { display: none; }
  .cards--3[data-carousel] > .card { flex: 0 0 84%; scroll-snap-align: start; }
  .dots { display: flex; justify-content: center; gap: 6px; margin-top: 18px; }
  .dots i { width: 6px; height: 6px; border-radius: 999px; background: var(--lsp-gray-300); transition: width 260ms var(--lsp-ease-out), background-color 200ms ease; }
  .dots i.is-on { width: 20px; background: var(--ink); }

  /* the engine: the six examples stack up as you scroll */
  .tech-grid:not(.tech-grid--facts) { gap: 14px; }
  .tech-grid:not(.tech-grid--facts) li { position: sticky; top: calc(var(--sh-h) + 14px); min-height: 176px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08), 0 -18px 30px -12px rgb(0 0 0 / .7); }
  .tech-grid:not(.tech-grid--facts) li:nth-child(2) { top: calc(var(--sh-h) + 22px); }
  .tech-grid:not(.tech-grid--facts) li:nth-child(3) { top: calc(var(--sh-h) + 30px); }
  .tech-grid:not(.tech-grid--facts) li:nth-child(4) { top: calc(var(--sh-h) + 38px); }
  .tech-grid:not(.tech-grid--facts) li:nth-child(5) { top: calc(var(--sh-h) + 46px); }
  .tech-grid:not(.tech-grid--facts) li:nth-child(6) { top: calc(var(--sh-h) + 54px); }
  /* and the three facts become a short list */
  .tech-grid--facts { margin-top: 28px; gap: 0; }
  .tech-grid--facts li { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; padding: 16px 0; border-radius: 0; background: none; box-shadow: none; border-top: 1px solid rgb(255 255 255 / .08); }
  .tech-grid--facts .io--icon { grid-row: span 2; width: 40px; height: 40px; border-radius: 12px; }
  .tech-grid--facts .io--icon .ico { width: 20px; height: 20px; }
  .tech-grid--facts b { margin-top: 0; font-size: 15px; }
  .tech-grid--facts span:not([class]) { font-size: 13px; }
}
/* the menu fits a phone without scrolling */
@media (max-width: 480px) {
  .menu__in { gap: 20px; padding-bottom: 20px; }
  .menu__nav a { padding: 10px 0; gap: 0; }
  .menu__nav span { font-size: 20px; }
  .menu__nav small { display: none; }
  .menu__aside { gap: 14px; }
  .menu__legal { padding-top: 10px; }
  .menu__legal a { min-height: 34px; }
  .menu__mail { padding-block: 4px; }
}
/* mobile: tighter still */
@media (max-width: 760px) {
  .chapter { padding-top: 52px; }
  .tech { margin-top: 52px; padding: 56px var(--gutter) 60px; }
  .faq, .pricing .faq { margin-top: 52px; }
  .finale, .pricing .finale { margin-top: 52px; padding: 64px var(--gutter) 64px; }
  .chapter__lede { margin-top: 14px; }
  .cards, .vs, .outcomes, .steps, .pm, .tech-grid, .pr-table { margin-top: 28px; }
  .sub-title { margin-top: 52px; }
  .inside { margin-top: 28px; }
  .points { margin-top: 40px; }
  .finale__mark { margin-bottom: 24px; }
  .finale__ctas { margin-top: 28px; }
}
@media (max-width: 760px) {
  .outcome { justify-items: center; }
  .outcome__lead { text-align: center; }
  .outcome .ticks { justify-self: stretch; }
}
/* mobile: the Lets card slides up over the typical search as you scroll */
@media (max-width: 760px) {
  .vs { gap: 14px; }
  .vs__side { position: sticky; top: calc(var(--sh-h) + 14px); }
  .vs__side--lets { top: calc(var(--sh-h) + 26px); z-index: 1; box-shadow: 0 -20px 36px -14px rgb(11 11 12 / .45); }
}
/* mobile: the drawer's two phone cards stack the same way */
@media (max-width: 760px) {
  .cards--2 { gap: 14px; }
  .cards--2 > .card { position: sticky; top: calc(var(--sh-h) + 14px); }
  .cards--2 > .card + .card { top: calc(var(--sh-h) + 26px); z-index: 1; box-shadow: 0 -20px 36px -14px rgb(11 11 12 / .35); }
}
@media (max-width: 760px) { .tech-grid--facts li:first-child { border-top: 0; padding-top: 4px; } }

/* ---------------------------------------------------------------- the grid (after shapes.co): thin lines behind a section's heading, fading out at every edge */
.hero, .pr-hero, .tech, .finale, #compare, #panel, #install { position: relative; isolation: isolate; }
.hero::before, .pr-hero::before, .tech::before, .finale::after, #compare::before, #panel::before, #install::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: 0 0 auto; height: var(--grid-h, 640px);
  background-image: linear-gradient(to right, var(--grid-line) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid-cell, 78px) var(--grid-cell, 78px); background-position: center -1px;
  -webkit-mask: radial-gradient(ellipse 58% 62% at 50% 46%, #000 20%, transparent 72%);
          mask: radial-gradient(ellipse 58% 62% at 50% 46%, #000 20%, transparent 72%);
}
#compare, #panel, #install { --grid-line: rgb(11 11 12 / .12); --grid-h: 560px; }
.hero, .pr-hero, .tech, .finale { --grid-line: rgb(255 255 255 / .12); }
.hero { --grid-h: 78%; }
.pr-hero { --grid-h: 100%; }
.tech { --grid-h: 600px; }
.finale { --grid-h: 100%; }
.finale::after { top: 0; }
@media (max-width: 760px) {
  .hero::before, .pr-hero::before, .tech::before, .finale::after, #compare::before, #panel::before, #install::before { --grid-cell: 52px; -webkit-mask: radial-gradient(ellipse 80% 60% at 50% 44%, #000 20%, transparent 74%); mask: radial-gradient(ellipse 80% 60% at 50% 44%, #000 20%, transparent 74%); }
  #compare, #panel, #install { --grid-h: 420px; }
}
#compare .chapter__lede { max-width: 64ch; }
/* the grid lives only on the ink sections */
#compare::before, #panel::before, #install::before { content: none; }

/* ---------------------------------------------------------------- blog */
.bl-hero { position: relative; isolation: isolate; overflow: hidden; margin-top: calc(-1 * var(--sh-h)); padding: calc(var(--sh-h) + 88px) var(--gutter) 88px; background: var(--ink); color: #fff; text-align: center; display: grid; justify-items: center; --grid-line: rgb(255 255 255 / .12); --grid-h: 100%; }
.bl-hero::before { content: ""; position: absolute; z-index: -1; pointer-events: none; inset: 0; background-image: linear-gradient(to right, var(--grid-line) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px); background-size: 78px 78px; background-position: center -1px; -webkit-mask: radial-gradient(ellipse 58% 62% at 50% 46%, #000 20%, transparent 72%); mask: radial-gradient(ellipse 58% 62% at 50% 46%, #000 20%, transparent 72%); }
.bl-hero > :not(.hero__glow) { position: relative; }
.bl-hero .hero__glow { bottom: -90%; opacity: .7; }
.bl-hero__title { font-size: clamp(36px, 5vw, 64px); line-height: 1.04; letter-spacing: -.045em; max-width: 20ch; text-wrap: balance; }
.bl-hero__title em { font-style: normal; color: var(--lime); }
.bl-hero__title--post { font-size: clamp(32px, 4.2vw, 54px); max-width: 24ch; }
.bl-hero__lede { margin-top: 20px; max-width: 60ch; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.6; color: var(--on-ink); text-wrap: balance; }
.bl-cats { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 32px; }
.bl-cats a { height: 38px; padding: 0 16px; border-radius: 999px; display: inline-flex; align-items: center; font-size: 14px; font-weight: 500; text-decoration: none; color: #fff; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .22); transition: background-color 180ms ease, color 180ms ease; }
.bl-cats a[aria-current] { background: #fff; color: var(--ink); box-shadow: none; }
@media (hover: hover) and (pointer: fine) { .bl-cats a:not([aria-current]):hover { box-shadow: inset 0 0 0 1px #fff; } }
.bl-crumbs { display: flex; gap: 8px; font-size: 13px; color: var(--on-ink); margin-bottom: 20px; }
.bl-crumbs a { color: var(--on-ink); text-decoration: none; }
.bl-crumbs a:hover { color: #fff; }
.bl-list { max-width: var(--page); margin: 56px auto 0; padding: 0 var(--gutter); }
.bl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.bl-card { position: relative; display: flex; flex-direction: column; border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px var(--line); overflow: hidden; transition: box-shadow 220ms ease, transform 300ms var(--lsp-ease-out); }
@media (hover: hover) and (pointer: fine) { .bl-card:hover { box-shadow: 0 0 0 1px var(--line), 0 24px 50px -30px rgb(11 11 12 / .35); transform: translateY(-2px); } }
.bl-card__media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.bl-card__body { display: flex; flex-direction: column; gap: 10px; padding: 24px 24px 22px; flex: 1; }
.bl-chip { align-self: flex-start; height: 26px; padding: 0 10px; border-radius: 999px; display: inline-flex; align-items: center; font-size: 12px; font-weight: 500; background: var(--lsp-gray-50); color: var(--ink-soft); }
.bl-card__title { font-size: 20px; line-height: 1.25; letter-spacing: -.015em; text-wrap: balance; }
.bl-card__title a { text-decoration: none; color: inherit; }
.bl-card__title a::after { content: ""; position: absolute; inset: 0; }
.bl-card__dek { font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.bl-card .bl-meta { margin-top: auto; padding-top: 10px; }
.bl-card--lead { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr); background: var(--card); box-shadow: none; }
.bl-card--lead:has(.bl-card__media) { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.bl-card--lead .bl-card__body { padding: 40px 40px 34px; justify-content: center; }
.bl-card--lead .bl-card__title { font-size: clamp(26px, 2.6vw, 36px); letter-spacing: -.03em; max-width: 26ch; }
.bl-card--lead .bl-card__dek { font-size: 16px; max-width: 62ch; }
.bl-card--ink { background: var(--ink); color: #fff; box-shadow: none; }
.bl-card--ink .bl-card__dek, .bl-card--ink .bl-meta { color: var(--on-ink); }
.bl-card--ink .bl-chip { background: var(--lime); color: var(--ink); }
.bl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 13px; color: var(--muted); }
.bl-meta b { color: inherit; font-weight: 500; }
.bl-meta--hero { justify-content: center; margin-top: 26px; color: var(--on-ink); }
.bl-meta--hero b { color: #fff; }
.bl-av { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex: none; }
.bl-av--initials { display: inline-grid; place-items: center; background: var(--ink); color: var(--lime); font-size: 11px; font-weight: 500; letter-spacing: .02em; }
.bl-meta--hero .bl-av--initials, .bl-card--ink .bl-av--initials { background: var(--lime); color: var(--ink); }
.bl-av--lg { width: 64px; height: 64px; font-size: 20px; }
.bl-pages { display: flex; justify-content: center; gap: 6px; margin-top: 40px; }
.bl-pages .page-numbers { min-width: 40px; height: 40px; padding: 0 14px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; text-decoration: none; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.bl-pages .current { background: var(--ink); color: #fff; box-shadow: none; }
.bl-empty { text-align: center; color: var(--muted); padding: 40px 0; }

/* a post */
.post__wrap { max-width: var(--page); margin: 64px auto 0; padding: 0 var(--gutter); display: grid; grid-template-columns: 220px minmax(0, 720px); justify-content: center; gap: 64px; align-items: start; }
.post__wrap:not(:has(.post__toc)) { grid-template-columns: minmax(0, 720px); }
.post__toc { position: sticky; top: calc(var(--sh-h) + 28px); font-size: 13.5px; }
.post__toc summary { list-style: none; font-weight: 500; margin-bottom: 12px; cursor: default; }
.post__toc summary::-webkit-details-marker { display: none; }
.post__toc ol { list-style: none; margin: 0; padding: 0 0 0 12px; display: grid; gap: 10px; border-left: 1px solid var(--line); }
.post__toc a { color: var(--muted); text-decoration: none; line-height: 1.4; display: block; }
.post__toc a:hover { color: var(--ink); }
.post__cover { margin: 0 0 36px; }
.post__cover img { border-radius: 20px; width: 100%; }
.prose { font-size: 17px; line-height: 1.75; color: var(--ink-soft); min-width: 0; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { margin-top: 2.2em; font-size: clamp(24px, 2.2vw, 30px); line-height: 1.2; letter-spacing: -.025em; color: var(--ink); scroll-margin-top: calc(var(--sh-h) + 20px); text-wrap: balance; }
.prose h3 { margin-top: 1.8em; font-size: 20px; line-height: 1.3; letter-spacing: -.015em; color: var(--ink); }
.prose h2 + *, .prose h3 + * { margin-top: .6em; }
.prose p, .prose li { text-wrap: pretty; }
.prose a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose strong, .prose b { color: var(--ink); font-weight: 500; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: .45em; }
.prose ul li::marker { color: var(--ink); }
.prose blockquote { margin: 1.6em 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--lime); font-size: 19px; line-height: 1.6; color: var(--ink); }
.prose code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .88em; padding: 2px 6px; border-radius: 6px; background: var(--lsp-gray-100); color: var(--ink); }
.prose pre { padding: 18px 20px; border-radius: 14px; background: var(--ink); color: #e6e6ea; overflow-x: auto; font-size: 14px; line-height: 1.6; }
.prose pre code { background: none; padding: 0; color: inherit; }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; display: block; overflow-x: auto; }
.prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { color: var(--ink); font-weight: 500; }
.prose img { border-radius: 16px; }
.prose figure { margin: 1.8em 0; }
.prose figcaption { margin-top: 8px; font-size: 13px; color: var(--muted); text-align: center; }
.prose .key { padding: 20px 22px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.prose .key > :first-child { margin-top: 0; }
.post__author { display: flex; gap: 18px; align-items: flex-start; margin-top: 56px !important; padding: 24px; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.post__author p { margin: 0; font-size: 15px; line-height: 1.6; }
.post__author-name { color: var(--ink); font-weight: 500; font-size: 16px !important; margin-bottom: 4px !important; }
.post__author-name span { color: var(--muted); font-weight: 400; font-size: 14px; margin-left: 6px; }
.post__cta { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 16px !important; padding: 22px 24px; border-radius: 22px; background: var(--ink); color: var(--on-ink); }
.post__cta p { margin: 0; font-size: 15px; line-height: 1.55; }
.post__cta b { color: #fff; }
.bl-related { max-width: var(--page); margin: 96px auto 0; padding: 0 var(--gutter); }
.bl-related h2 { font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -.025em; margin-bottom: 28px; }
.blog-page .sf { margin-top: 120px; }
@media (max-width: 1000px) {
  .bl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .post__wrap { grid-template-columns: minmax(0, 720px); gap: 0; }
  .post__toc { position: static; margin-bottom: 28px; padding: 16px 18px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
  .post__toc summary { cursor: pointer; margin-bottom: 0; display: flex; justify-content: space-between; }
  .post__toc summary::after { content: "+"; font-weight: 400; }
  .post__toc details[open] summary::after { content: "−"; }
  .post__toc details[open] ol { margin-top: 12px; }
}
@media (max-width: 760px) {
  .bl-hero { padding: calc(var(--sh-h) + 48px) var(--gutter) 52px; }
  .bl-hero::before { background-size: 52px 52px; }
  .bl-list { margin-top: 28px; }
  .bl-grid, .bl-card--lead:has(.bl-card__media) { grid-template-columns: minmax(0, 1fr); }
  .bl-card--lead .bl-card__body { padding: 26px 22px 22px; }
  .post__wrap { margin-top: 32px; }
  .prose { font-size: 16px; }
  .post__cta { flex-direction: column; align-items: flex-start; }
  .bl-related { margin-top: 64px; }
  .blog-page .sf { margin-top: 72px; }
}

/* the short Woo mark, in whatever colour surrounds it */
.woo-mark { display: inline-block; height: .95em; aspect-ratio: 800 / 207; background: currentColor; -webkit-mask: url("../img/brand/woo.png") center / contain no-repeat; mask: url("../img/brand/woo.png") center / contain no-repeat; flex: none; }
.plat-chip--woo .woo-mark { height: 13px; }
.plat-chip--woo { gap: 0; }
.pill__woo { height: 13px; }
.plat__logo .woo-mark { height: 11px; }

/* ---------------------------------------------------------------- blog: the calls to action */
.prose .post__mid { margin: 2.4em 0 0; padding: 22px 24px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px var(--line); display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.prose .post__mid p { margin: 0; font-size: 15.5px; line-height: 1.55; }
.post__mid .pill { flex: none; text-decoration: none; }
.prose .post__lead { position: relative; isolation: isolate; overflow: hidden; margin-top: 56px; padding: 40px 36px 34px; border-radius: 28px; background: var(--ink); color: var(--on-ink); }
.post__lead::before { content: ""; position: absolute; z-index: -1; left: 50%; bottom: -60%; width: 140%; aspect-ratio: 1.6; translate: -50% 0; border-radius: 50%; background: radial-gradient(closest-side, rgb(226 255 120 / .2), transparent); pointer-events: none; }
.prose .post__lead h2 { margin: 0; color: #fff; font-size: clamp(26px, 2.6vw, 34px); }
.post__lead h2 em { font-style: normal; color: var(--lime); }
.prose .post__lead-lede { margin-top: 12px; font-size: 15.5px; line-height: 1.6; color: var(--on-ink); max-width: 56ch; }
.plead { margin-top: 24px; display: grid; gap: 14px; }
.lead__plats { margin: 0; padding: 0; border: 0; display: flex; gap: 8px; }
.lead__plats label { position: relative; cursor: pointer; }
.lead__plats input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.lead__plats label > span { height: 40px; padding: 0 16px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: #fff; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .25); transition: background-color 180ms ease, color 180ms ease; }
.lead__plats svg { width: 16px; height: 16px; fill: currentColor; }
.lead__plats .woo-mark { height: 13px; }
.lead__plats input:checked + span { background: #fff; color: var(--ink); box-shadow: none; }
.lead__plats input:focus-visible + span { outline: 2px solid var(--lime); outline-offset: 3px; }
.lead__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 10px; }
.lead__field input { width: 100%; height: 52px; padding: 0 18px; border: 0; border-radius: 999px; background: rgb(255 255 255 / .08); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14); font: inherit; font-size: 16px; color: #fff; outline: none; transition: box-shadow 160ms ease, background-color 160ms ease; }
.lead__field input::placeholder { color: #8f8f97; }
.lead__field input:focus { background: rgb(255 255 255 / .12); box-shadow: inset 0 0 0 1.5px var(--lime); }
.plead .pill--lg { height: 52px; }
.lead__err { margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--coral); color: var(--ink); font-size: 14px; }
.prose .lead__fine { margin: 0; font-size: 12.5px; color: #8f8f97; }
.lead__fine a { color: var(--on-ink) !important; }
.lead__done { margin-top: 22px; padding: 18px 20px; border-radius: 16px; background: var(--lime); color: var(--ink); outline: none; }
.prose .lead__done p { margin: 0; font-size: 15.5px; color: var(--ink); }
.post__author .bl-av--lg { width: 72px; height: 72px; }
@media (max-width: 760px) {
  .prose .post__mid { flex-direction: column; align-items: flex-start; }
  .prose .post__lead { padding: 30px 22px 26px; border-radius: 24px; }
  .lead__row { grid-template-columns: minmax(0, 1fr); }
  .plead .pill--lg { width: 100%; }
}

/* blog: updates signup and closing invitation */
.bl-news { max-width: calc(var(--page) - 2 * var(--gutter)); margin: 96px auto 0; padding: 36px 40px; border-radius: 28px; background: #fff; box-shadow: 0 0 0 1px var(--line); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 32px; align-items: center; }
.bl-news h2 { font-size: clamp(24px, 2.4vw, 30px); letter-spacing: -.025em; }
.bl-news__text p { margin-top: 8px; font-size: 15px; line-height: 1.6; color: var(--muted); max-width: 46ch; }
.bl-news__form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.bl-news__form input[type="email"] { height: 52px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--lsp-gray-50); box-shadow: inset 0 0 0 1px var(--line); font: inherit; font-size: 16px; color: var(--ink); outline: none; }
.bl-news__form input[type="email"]:focus { background: #fff; box-shadow: inset 0 0 0 1.5px var(--ink); }
.bl-news__form .pill--lg { height: 52px; }
.bl-news__msg { grid-column: 1 / -1; margin: 0; font-size: 14px; color: var(--ink); padding: 8px 14px; border-radius: 12px; background: var(--coral); }
.bl-news__msg.is-ok { background: var(--lime); }
.blog-page .bl-finale { margin-top: 96px; }
.blog-page .bl-finale + .sf, .blog-page main:has(.bl-finale) + .sf { margin-top: 0; }
@media (max-width: 760px) {
  .bl-news { margin-top: 56px; padding: 26px 22px; grid-template-columns: minmax(0, 1fr); gap: 18px; text-align: center; }
  .bl-news__text p { margin-inline: auto; }
  .bl-news__form { grid-template-columns: minmax(0, 1fr); }
  .blog-page .bl-finale { margin-top: 56px; }
}
.bl-pages:empty { display: none; }
/* covers: always the whole 16:9 image */
.bl-card__media img { height: auto !important; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.bl-card--lead .bl-card__media { display: flex; align-items: center; background: var(--ink); }
/* the lead card's cover fills its whole column (the cover's content sits on its left) */
.bl-card--lead:has(.bl-card__media) { align-items: stretch; }
.bl-card--lead .bl-card__media { display: block; min-height: 100%; }
.bl-card--lead .bl-card__media img { height: 100% !important; min-height: 100%; aspect-ratio: auto; object-fit: cover; object-position: 40% center; }
@media (max-width: 760px) { .bl-card--lead .bl-card__media img { height: auto !important; aspect-ratio: 16 / 9; } }

/* ---------------------------------------------------------------- post building blocks (written into the post's HTML) */
/* <div class="takeaways"><p class="takeaways__title">Key takeaways</p><ul>…</ul></div> */
.prose .takeaways { padding: 24px 26px; border-radius: 22px; background: var(--ink); color: #d2d2d7; }
.prose .takeaways__title { margin: 0 0 12px; font-size: 13px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--lime); }
.prose .takeaways ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.prose .takeaways li { position: relative; padding-left: 30px; font-size: 16px; line-height: 1.55; color: #fff; }
.prose .takeaways li::before { content: ""; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b0b0c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5 10 16.5l8-9'/%3E%3C/svg%3E") center / 12px no-repeat; }
/* live examples: <div class="ex"><p class="ex__row"><span class="ex__in">snekers</span><span class="ex__out">Sneakers</span></p>…<p class="ex__note">…</p></div> */
.prose .ex { margin: 1.6em 0; padding: 20px; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px var(--line); display: grid; gap: 10px; }
.prose .ex__row { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 15px; }
.prose .ex__in { display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border-radius: 999px; background: var(--lsp-gray-50); color: var(--ink-soft); }
.prose .ex__in s { text-decoration-color: var(--coral); text-decoration-thickness: 2px; }
.prose .ex__out { display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 500; }
.prose .ex__out--none { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1px var(--lsp-gray-300); font-weight: 400; }
.prose .ex__in + .ex__out::before, .prose .ex__in + .ex__out--none::before { content: ""; width: 12px; height: 12px; margin-right: 10px; margin-left: -4px; background: currentColor; opacity: .7; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M2 12L11.5 2.5M4 2.5H11.5V10'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M2 12L11.5 2.5M4 2.5H11.5V10'/%3E%3C/svg%3E") center / contain no-repeat; }
.prose .ex__label { margin: 0; font-size: 12.5px; font-weight: 500; color: var(--muted); }
.prose .ex__note { margin: 4px 0 0; font-size: 14px; color: var(--muted); }
/* a quiet product note: <aside class="in-lets"><p><b>In Lets:</b> …</p></aside> */
.prose .in-lets { margin: 1.6em 0; padding: 16px 20px 16px 52px; border-radius: 18px; background: rgb(226 255 120 / .28); position: relative; }
.prose .in-lets::before { content: ""; position: absolute; left: 18px; top: 18px; width: 20px; height: 20px; background: var(--ink); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 225 225'%3E%3Cpath d='m0,225c0-62.13,50.37-112.5,112.5-112.5s112.5,50.37,112.5,112.5H0Z'/%3E%3Cpath d='m225,0c0,62.13-50.37,112.5-112.5,112.5S0,62.13,0,0h225Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 225 225'%3E%3Cpath d='m0,225c0-62.13,50.37-112.5,112.5-112.5s112.5,50.37,112.5,112.5H0Z'/%3E%3Cpath d='m225,0c0,62.13-50.37,112.5-112.5,112.5S0,62.13,0,0h225Z'/%3E%3C/svg%3E") center / contain no-repeat; }
.prose .in-lets p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink); }
/* sources: <h2>Sources</h2><ol class="sources"><li><a href="…">Title</a>, Publisher</li></ol> */
.prose .sources { padding-left: 1.2em; font-size: 14px; line-height: 1.6; color: var(--muted); }
.prose .sources li + li { margin-top: .5em; }
.prose .sources a { color: var(--ink-soft); word-break: break-word; }
/* card byline: the same two lines on every card */
.bl-meta--card { flex-wrap: nowrap; gap: 10px; }
.bl-meta--card .bl-av { width: 34px; height: 34px; }
.bl-meta__who { display: grid; gap: 1px; line-height: 1.3; min-width: 0; }
.bl-meta__who b { color: var(--ink); font-weight: 500; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bl-meta__who > span { font-size: 12.5px; white-space: nowrap; }
.bl-card--ink .bl-meta__who b { color: #fff; }
/* cards: one rhythm inside every card */
.bl-card__body { padding: 28px 28px 26px; gap: 14px; }
.bl-card__title { margin-top: 2px; }
.bl-card__dek { margin-bottom: 6px; }
.bl-card .bl-meta { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); }
.bl-card--ink .bl-meta { border-top-color: rgb(255 255 255 / .1); }
.bl-card--lead .bl-card__body { padding: 44px 44px 38px; gap: 16px; }
.bl-card--lead .bl-meta { border-top: 0; padding-top: 8px; margin-top: 0; }
.bl-grid { gap: 20px; }
@media (max-width: 760px) { .bl-card__body { padding: 24px 22px 22px; } .bl-card--lead .bl-card__body { padding: 28px 24px 26px; } .bl-grid { gap: 16px; } }
/* the post's main image, rising out of the ink header */
.post--img .bl-hero--post { padding-bottom: 200px; }
.post__hero-img { position: relative; z-index: 2; max-width: 1040px; margin: -150px auto 0; padding: 0 var(--gutter); }
.post__hero-img img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 28px; box-shadow: 0 40px 80px -40px rgb(11 11 12 / .55); display: block; }
.post--img .post__wrap { margin-top: 56px; }
@media (max-width: 760px) {
  .post--img .bl-hero--post { padding-bottom: 96px; }
  .post__hero-img { margin-top: -64px; }
  .post__hero-img img { border-radius: 18px; }
  .post--img .post__wrap { margin-top: 32px; }
}
/* the header is see-through at the top of an ink page, and fills in once the page moves */
.sh { transition: background-color 280ms ease, box-shadow 200ms ease, -webkit-backdrop-filter 280ms ease, backdrop-filter 280ms ease; }
body:not(.legal-page) .sh:not(.is-scrolled) { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ---------------------------------------------------------------- pricing: four cards, a five-column table */
.pr-plans { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; max-width: calc(var(--page) + 120px); }
.pr-card { padding: 28px 22px 26px; }
.pr-card__for { font-size: 13.5px; min-height: 4.5em; }
.pr-card__price b { font-size: 44px; }
.pr-card__badge { top: 24px; inset-inline-end: 18px; height: 26px; font-size: 12px; }
.pr-limits { font-size: 14px; }
.pr-card__list li { font-size: 13.5px; }
.pr-ent { max-width: calc(var(--page) + 120px - 2 * var(--gutter)); }
.pr-ent h2 { display: flex; align-items: baseline; gap: 12px; }
.pr-ent__price { font-size: 15px; font-weight: 400; color: var(--muted); }
.pr-table-wrap { margin-top: 48px; border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px var(--line); overflow-x: auto; overscroll-behavior-x: contain; }
.pr-table-wrap .pr-table { margin-top: 0; box-shadow: none; border-radius: 0; min-width: 820px; overflow: visible; }
.pr-row { grid-template-columns: minmax(200px, 1.6fr) repeat(5, minmax(0, 1fr)); }
.pr-row:nth-child(2) { font-weight: 500; }
@media (max-width: 1100px) { .pr-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; } }
@media (max-width: 1000px) { .pr-ent { max-width: min(820px, calc(100% - 2 * var(--gutter))); } }
@media (max-width: 760px) {
  .pr-plans { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
  .pr-card__for { min-height: 0; }
  .pr-table-wrap { margin-inline: 0; border-radius: 18px; }
  .pr-table-wrap .pr-table { min-width: 640px; }
  .pr-row { grid-template-columns: 150px repeat(5, minmax(92px, 1fr)); font-size: 12.5px; }
  /* the first column stays put while the rest scrolls */
  .pr-row > :first-child, .pr-group > span { position: sticky; left: 0; z-index: 1; background: #fff; }
  .pr-row > :first-child { box-shadow: 1px 0 0 var(--line); }
  .pr-group { padding: 0; }
  .pr-group > span { display: inline-block; padding: 18px 14px 6px; }
}

/* keep reading: the covers too */
.bl-related .bl-card__media img { height: auto !important; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
@media (max-width: 760px) {
  .pr-table-wrap .pr-table { min-width: 0; width: max-content; }
  .pr-row { grid-template-columns: 140px repeat(5, 96px); }
  .pr-row > * { min-width: 0; overflow-wrap: anywhere; }
}
.pr-table-wrap .pr-table { margin: 0 !important; }

/* ---------------------------------------------------------------- home: from the blog */
.bl-strip { text-align: start; }
.bl-strip__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.bl-strip .chapter__title em { font-style: normal; background: var(--ink); color: var(--lime); padding: 0 .18em; border-radius: .18em; }
.bl-strip .chapter__lede { margin: 14px 0 0; }
.bl-strip__all { flex: none; }
.bl-strip__track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 44px; }
.bl-strip .bl-card__media img { height: auto !important; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.bl-strip .bl-card__title { font-size: 18px; }
@media (max-width: 760px) {
  .bl-strip__head { flex-direction: column; align-items: flex-start; gap: 18px; }
  .bl-strip__track { display: flex; gap: 12px; margin: 28px calc(-1 * var(--gutter)) 0; padding: 0 var(--gutter) 4px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; overscroll-behavior-x: contain; }
  .bl-strip__track::-webkit-scrollbar { display: none; }
  .bl-strip__track > .bl-card { flex: 0 0 84%; scroll-snap-align: start; }
}
.faq__head { position: static; }
/* the menu fits any screen without scrolling: one line per link, sizes follow the screen height */
.menu__nav small { display: none; }
.menu__nav a { padding: clamp(7px, 1.35vh, 12px) 0; gap: 0; }
.menu__nav span { font-size: clamp(18px, 2.7vh, 22px); }
.menu__in { gap: clamp(14px, 3vh, 32px); padding-top: 0; padding-bottom: clamp(14px, 2.6vh, 28px); }
.menu__bar { height: clamp(56px, 8vh, 72px); }
.menu__aside { gap: clamp(10px, 1.8vh, 18px); }
.menu__cta.pill--lg { height: clamp(44px, 6vh, 52px); }
.menu__label { margin-bottom: 4px; }
.menu__mail { padding-block: 2px; }
.menu__legal { padding-top: clamp(8px, 1.4vh, 14px); }
.menu__legal a { min-height: 32px; }
@media (max-height: 720px) {
  .menu__nav a { padding: 6px 0; }
  .menu__nav span { font-size: 18px; }
  .menu__in { gap: 12px; padding-bottom: 12px; }
  .menu__aside { gap: 8px; }
  .menu__legal { padding-top: 6px; }
}

/* ---------------------------------------------------------------- 404 */
.nf { position: relative; isolation: isolate; overflow: hidden; margin-top: calc(-1 * var(--sh-h)); padding: calc(var(--sh-h) + 96px) var(--gutter) 120px; background: var(--ink); color: #fff; text-align: center; display: grid; justify-items: center; --grid-line: rgb(255 255 255 / .12); }
.nf::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; background-image: linear-gradient(to right, var(--grid-line) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px); background-size: 78px 78px; background-position: center -1px; -webkit-mask: radial-gradient(ellipse 58% 62% at 50% 46%, #000 20%, transparent 72%); mask: radial-gradient(ellipse 58% 62% at 50% 46%, #000 20%, transparent 72%); }
.nf > :not(.hero__glow) { position: relative; }
.nf .hero__glow { bottom: -60%; }
.nf__code { font-size: clamp(110px, 18vw, 220px); line-height: .9; font-weight: 500; letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1.5px rgb(255 255 255 / .28); }
.nf__title { margin-top: 18px; font-size: clamp(32px, 4.4vw, 56px); line-height: 1.05; letter-spacing: -.04em; text-wrap: balance; }
.nf__title em { font-style: normal; color: var(--lime); }
.nf__io { margin-top: 30px; display: inline-flex; align-items: center; gap: 12px; height: 54px; padding: 0 8px 0 20px; border-radius: 999px; background: var(--ink-3); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08); font-size: 15px; max-width: 100%; }
.nf__io .io__in { max-width: 32ch; }
.nf__none { height: 38px; padding: 0 16px; border-radius: 999px; display: inline-flex; align-items: center; color: var(--on-ink); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .2); white-space: nowrap; }
.nf__lede { margin-top: 24px; max-width: 52ch; font-size: 16px; line-height: 1.6; color: var(--on-ink); text-wrap: balance; }
.nf__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }
.nf__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 22px; margin-top: 28px; font-size: 14px; }
.nf__links a { color: var(--on-ink); text-decoration: none; min-height: 40px; display: inline-flex; align-items: center; }
.nf__links a:hover { color: #fff; }
.nf__posts { max-width: var(--page); margin: 88px auto 0; padding: 0 var(--gutter); }
.nf__posts h2 { font-size: clamp(22px, 2.2vw, 28px); letter-spacing: -.025em; margin-bottom: 24px; }
.nf__posts .bl-card__media img { height: auto !important; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.nf-page .sf { margin-top: 110px; }
@media (max-width: 760px) {
  .nf { padding: calc(var(--sh-h) + 56px) var(--gutter) 72px; }
  .nf__ctas { width: 100%; }
  .nf__ctas .pill { flex: 1 1 100%; }
  .nf__posts { margin-top: 56px; }
  .nf-page .sf { margin-top: 64px; }
}

/* platform logos: Shopify's full mark and Woo's, always together, always in the colour around them */
.shop-mark { display: inline-block; height: 1.25em; aspect-ratio: 1600 / 456; background: currentColor; -webkit-mask: url("../img/brand/shopify.png") center / contain no-repeat; mask: url("../img/brand/shopify.png") center / contain no-repeat; flex: none; }
.plat-chip .shop-mark { height: 17px; }
.plat-chip { gap: 0; }
.plat-chip .woo-mark { height: 13px; }
.pill__shop { height: 19px; margin-inline-start: 2px; }
.pill__woo { height: 13px; margin-inline-start: 2px; }
.lead__plats .shop-mark { height: 17px; }
/* the trial dialog: the two logos as the choices */
.plat { justify-content: center; min-height: 64px; color: var(--lsp-gray-500); }
.plat__mark { display: inline-flex; align-items: center; }
.plat .shop-mark { height: 24px; }
.plat .woo-mark { height: 17px; }
.plat:has(input:checked) { color: var(--ink); }

/* ---------------------------------------------------------------- hero, right phone: a store page whose search opens Lets from the side */
.scr-store { padding: 0 !important; background: #faf9f7 !important; }
.mini-head { display: flex; align-items: center; justify-content: space-between; height: 64px; padding: 22px 16px 0; border-bottom: 1px solid #ecebe8; }
.mini-logo { font-family: Georgia, "Times New Roman", serif; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; color: #1d1d20; }
.mini-launch { position: relative; width: 32px; height: 32px; display: grid; place-items: center; color: #0b0b0c; border-radius: 50%; }
.mini-launch svg { width: 20px; height: 20px; }
.mini-tap { position: absolute; inset: 0; border-radius: 50%; background: rgb(11 11 12 / .14); transform: scale(0); opacity: 0; }
.mini-banner { position: relative; margin: 12px 12px 0; height: 120px; border-radius: 14px; overflow: hidden; }
.mini-banner img { width: 100%; height: 100%; object-fit: cover; }
.mini-banner span { position: absolute; left: 12px; bottom: 10px; padding: 4px 10px; border-radius: 999px; background: #fff; font-size: 11px; font-weight: 500; color: #1d1d20; }
.mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px; }
.mini-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; }
.mini-grid i { display: block; height: 6px; border-radius: 3px; background: #e7e5e1; margin-top: 7px; width: 80%; }
.mini-grid i + i { width: 45%; margin-top: 5px; }
.mini-scrim { position: absolute; inset: 0; background: rgb(11 11 12 / .32); opacity: 0; }
.mini-drawer { position: absolute; top: 0; right: 0; bottom: 0; width: 86%; padding: 30px 12px 12px; background: #fff; border-radius: 22px 0 0 22px; box-shadow: -20px 0 40px -18px rgb(0 0 0 / .45); transform: translateX(104%); }
.mini-drawer .scr-field { margin-bottom: 8px; }
.mini-type { display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: bottom; max-width: 0; }
/* the loop: page → tap on the magnifier → drawer slides in → "san" → results → drawer slides away */
.js .scr-store .mini-tap { animation: mini-tap 8s var(--lsp-ease-out) infinite; }
.js .scr-store .mini-scrim { animation: mini-scrim 8s ease infinite; }
.js .scr-store .mini-drawer { animation: mini-drawer 8s var(--lsp-ease-drawer) infinite; }
.js .scr-store .mini-type { animation: mini-type 8s steps(3, end) infinite; }
.js .scr-store .mini-in { animation: mini-in 8s var(--lsp-ease-out) infinite; animation-delay: calc(var(--k) * 90ms); }
@keyframes mini-tap { 0%, 12% { transform: scale(0); opacity: 0; } 14% { transform: scale(.4); opacity: 1; } 22% { transform: scale(1.6); opacity: 0; } 100% { opacity: 0; } }
@keyframes mini-scrim { 0%, 16% { opacity: 0; } 24%, 88% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes mini-drawer { 0%, 16% { transform: translateX(104%); } 27%, 88% { transform: none; } 97%, 100% { transform: translateX(104%); } }
@keyframes mini-type { 0%, 30% { max-width: 0; } 38%, 100% { max-width: 3ch; } }
@keyframes mini-in { 0%, 40% { opacity: 0; transform: translateY(6px); } 46%, 100% { opacity: 1; transform: none; } }
.scr-store .mini-in { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .js .scr-store .mini-tap, .js .scr-store .mini-scrim, .js .scr-store .mini-drawer, .js .scr-store .mini-type, .js .scr-store .mini-in { animation: none !important; }
  .scr-store .mini-scrim { opacity: 1; }
  .scr-store .mini-drawer { transform: none; }
  .scr-store .mini-type { max-width: 3ch; }
}

/* ---------------------------------------------------------------- hero, right phone v2: the drawer is open, and the whole search plays inside it */
.js .scr-store .mini-scrim, .js .scr-store .mini-drawer { animation: none !important; }
.scr-store .mini-scrim { opacity: 1; }
.scr-store .mini-drawer { transform: none; padding: 26px 11px 12px; display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.mini-launch svg { width: 21px; height: 21px; }
.md-top { display: flex; align-items: center; justify-content: space-between; }
.md-top .scr-tab { height: 26px; font-size: 11.5px; }
.md-x { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--lsp-gray-50); font-size: 14px; color: var(--ink-soft); line-height: 1; }
.md-field { position: relative; margin: 0; height: 38px; font-size: 13px; }
.md-field .md-cam { width: 16px; height: 16px; margin-inline-start: auto; stroke: var(--muted); fill: none; stroke-width: 1.6; }
.md-q { display: none; white-space: nowrap; overflow: hidden; vertical-align: bottom; max-width: 0; }
.md-chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px 0 3px; border-radius: 999px; background: var(--lsp-gray-50); font-size: 11.5px; font-weight: 500; white-space: nowrap; }
.md-q3 { align-items: center; }
.md-q3 img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; }
.md-stage { position: relative; flex: 1; min-height: 0; }
.md-st { position: absolute; inset: 0; display: grid; align-content: start; gap: 6px; opacity: 0; font-size: 12px; }
.md-st .scr-chips .ls-chip { height: 24px; padding-inline: 9px; font-size: 11px; }
.md-st .ls-sec__title { padding: 4px 2px 0; font-size: 10.5px; }
.md-st .ls-prow { padding: 4px 2px; gap: 9px; }
.md-st .ls-prow__img { width: 38px; height: 38px; object-fit: cover; padding: 0; mix-blend-mode: normal; border-radius: 9px; }
.md-st .ls-prow__title { font-size: 11.5px; }
.md-st .ls-price { font-size: 11px; }
.md-st .ls-you { margin: 0; }
.md-st .ls-you__bubble { font-size: 11.5px; padding: 7px 11px; }
.md-think { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--muted); }
.md-think .ls-mark { --s: 11px; }
.md-answer { font-size: 11.5px; line-height: 1.5; color: var(--ink); }
.md-pick { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px; border-radius: 12px; background: var(--lsp-gray-50); }
.md-pick img { width: 40px; height: 40px; border-radius: 9px; object-fit: cover; }
.md-pick b { display: block; font-size: 11.5px; font-weight: 500; }
.md-pick span { display: block; font-size: 10.5px; color: var(--muted); line-height: 1.35; }
.md-pick em { font-style: normal; font-size: 11px; font-weight: 500; }
.md-pick .ls-btn--sm { --h: 24px; padding-inline: 9px; font-size: 10.5px; color: #fff; }
.md-photo { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 10px; align-items: center; }
.md-photo img { width: 54px; height: 54px; border-radius: 12px; object-fit: cover; }
.md-photo p { font-size: 11.5px; line-height: 1.45; }
.md-st .scr-tags .ls-tag { height: 22px; padding-inline: 8px; font-size: 10.5px; }

/* the loop: three scenes of four seconds — typing, asking, a photo */
.js .md-q1 { display: inline-block; animation: md-q1 12s steps(3, end) infinite; }
.js .md-q2 { display: inline-block; animation: md-q2 12s steps(24, end) infinite; }
.js .md-q3 { display: inline-flex; animation: md-q3 12s ease infinite; }
@keyframes md-q1 { 0% { max-width: 0; } 6%, 31% { max-width: 3ch; } 31.01%, 100% { max-width: 0; } }
@keyframes md-q2 { 0%, 33.3% { max-width: 0; } 45%, 64% { max-width: 26ch; } 64.01%, 100% { max-width: 0; } }
@keyframes md-q3 { 0%, 66.6% { max-width: 0; opacity: 0; } 69%, 97% { max-width: 80px; opacity: 1; } 99%, 100% { max-width: 0; opacity: 0; } }
.js .md-st1 { animation: md-st1 12s var(--lsp-ease-out) infinite; }
.js .md-st2 { animation: md-st2 12s var(--lsp-ease-out) infinite; }
.js .md-st3 { animation: md-st3 12s var(--lsp-ease-out) infinite; }
@keyframes md-st1 { 0%, 7% { opacity: 0; transform: translateY(6px); } 10%, 30% { opacity: 1; transform: none; } 33%, 100% { opacity: 0; } }
@keyframes md-st2 { 0%, 46% { opacity: 0; transform: translateY(6px); } 48%, 63% { opacity: 1; transform: none; } 66%, 100% { opacity: 0; } }
@keyframes md-st3 { 0%, 70% { opacity: 0; transform: translateY(6px); } 73%, 96% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }
/* inside the answer: thinking first, then the answer and the picks */
.js .md-st2 .md-think { animation: md-think 12s ease infinite; }
.js .md-st2 .md-answer, .js .md-st2 .md-pick { animation: md-ans 12s var(--lsp-ease-out) infinite; }
.js .md-st2 .md-pick + .md-pick { animation-delay: .2s; }
@keyframes md-think { 0%, 48% { opacity: 1; max-height: 20px; } 53%, 100% { opacity: 0; max-height: 0; } }
@keyframes md-ans { 0%, 53% { opacity: 0; transform: translateY(5px); } 56%, 100% { opacity: 1; transform: none; } }
.md-think { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .js .md-q, .js .md-st, .js .md-st2 .md-think, .js .md-st2 .md-answer, .js .md-st2 .md-pick { animation: none !important; }
  .js .md-q1 { max-width: 3ch; }
  .js .md-q2, .js .md-q3 { display: none; }
  .js .md-st1 { opacity: 1; }
}

/* the two phones, a little closer */
.hero__devices { width: min(620px, 100%); }
.device--left { inset-inline-start: 4%; }
.device--right { inset-inline-end: 4%; }
@media (max-width: 760px) { .device--left { inset-inline-start: calc(50% - 175px); } .device--right { inset-inline-end: calc(50% - 175px); } }
/* the hidden queries take no room: each one gives back the field's gap */
.md-field .md-q { margin-inline-end: -8px; }
.md-field .caret { margin-inline-start: 1px; }
html { scroll-padding-top: var(--sh-h); }
/* the right phone tucks slightly behind the left one */
.hero__devices { width: min(540px, 100%); }
.device--left { box-shadow: 0 50px 100px -30px rgb(0 0 0 / .8), 18px 0 40px -18px rgb(0 0 0 / .55), 0 0 0 1px rgb(255 255 255 / .14), inset 0 0 0 1.5px #3a3a40; }
/* strike-throughs on light ground: ink, not coral */
.vt__q s, .prose .ex__in s { text-decoration-color: var(--ink); }
/* see-through buttons and chips on ink frost what's behind them, so the grid doesn't run through */
.pill--ghost, .plat-chip:not(.plat-chip--light), .bl-cats a:not([aria-current]), .sh:not(.is-scrolled) .sh__cta, .nf__io, .lead__plats label > span, .burger {
  -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2);
}
.pill--ghost, .bl-cats a:not([aria-current]), .sh:not(.is-scrolled) .sh__cta { background-color: rgb(255 255 255 / .04); }
.plat-chip:not(.plat-chip--light) { background-color: rgb(255 255 255 / .06); }
/* a little of our glow on the ink areas that had none */
.tech { overflow: clip; }
.tech::after { content: ""; position: absolute; z-index: -1; left: 50%; top: 38%; width: min(1300px, 180%); aspect-ratio: 1.6; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgb(226 255 120 / .16), rgb(226 255 120 / .05) 55%, transparent); pointer-events: none; }
.vs__side--lets { background: radial-gradient(120% 70% at 70% 105%, rgb(226 255 120 / .2), transparent 60%), var(--ink); }
.pr-card--best { background: radial-gradient(140% 55% at 50% 108%, rgb(226 255 120 / .2), transparent 62%), var(--ink); }
.vs__side--lets { background: radial-gradient(130% 85% at 72% 108%, rgb(226 255 120 / .36), rgb(226 255 120 / .1) 45%, transparent 70%), var(--ink); }
.pr-card--best { background: radial-gradient(150% 65% at 50% 110%, rgb(226 255 120 / .32), rgb(226 255 120 / .08) 45%, transparent 70%), var(--ink); }
/* "In Lets" note: the mark sits on the first line of text, centred to it */
.prose .in-lets { display: flex; align-items: flex-start; gap: 12px; padding: 16px 20px; }
.prose .in-lets::before { position: static; flex: none; width: 17px; height: 17px; margin-top: calc((15px * 1.6 - 17px) / 2); }
.prose .in-lets p { margin: 0; }
/* the shared closing section sits flush on the footer, after whatever the page ends with */
.finale--site { margin-top: 120px; }
.legal-page .finale--site { margin-top: 40px; }
.blog-page .sf, .nf-page .sf, .legal-page .sf { margin-top: 0; }
.finale--site + .sf { margin-top: 0; }
@media (max-width: 760px) { .finale--site { margin-top: 64px; } .legal-page .finale--site { margin-top: 24px; } }
/* sections whose space sits outside them (the FAQ) land with room under the header */
.faq { scroll-margin-top: 56px; }
@media (max-width: 760px) { .faq { scroll-margin-top: 32px; } }
/* every jump from the menu lands the same way: the section's heading the same distance under the header */
:root { --land: 56px; }
.chapter { scroll-margin-top: calc(var(--land) - 136px); }
.tech { scroll-margin-top: calc(var(--land) - 120px); }
.faq { scroll-margin-top: var(--land); }
@media (max-width: 760px) {
  :root { --land: 32px; }
  .chapter { scroll-margin-top: calc(var(--land) - 52px); }
  .tech { scroll-margin-top: calc(var(--land) - 56px); }
}

/* ---------------------------------------------------------------- for agencies */
.ag-hero { position: relative; isolation: isolate; overflow: hidden; margin-top: calc(-1 * var(--sh-h)); padding: calc(var(--sh-h) + 104px) var(--gutter) 112px; background: var(--ink); color: #fff; text-align: center; display: grid; justify-items: center; --grid-line: rgb(255 255 255 / .12); }
.ag-hero::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; background-image: linear-gradient(to right, var(--grid-line) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px); background-size: 78px 78px; background-position: center -1px; -webkit-mask: radial-gradient(ellipse 58% 62% at 50% 46%, #000 20%, transparent 72%); mask: radial-gradient(ellipse 58% 62% at 50% 46%, #000 20%, transparent 72%); }
.ag-hero > :not(.hero__glow) { position: relative; }
.ag-hero .hero__glow { bottom: -75%; }
.ag-hero__title { font-size: clamp(34px, 4.8vw, 64px); line-height: 1.04; letter-spacing: -.045em; text-wrap: balance; max-width: 22ch; }
.ag-hero__title em, .ag-form .chapter__title em { font-style: normal; color: var(--lime); }
.ag-hero__lede { margin-top: 24px; max-width: 58ch; font-size: clamp(15px, 1.25vw, 18px); line-height: 1.6; color: var(--on-ink); text-wrap: balance; }
.ag-points { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; text-align: start; }
.ag-points li { display: grid; align-content: start; gap: 10px; padding: 26px 24px 28px; border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.ag-points .tile { margin-bottom: 6px; }
.ag-points b { font-size: 17px; font-weight: 500; letter-spacing: -.01em; }
.ag-points span:not(.tile) { font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.ag-get { margin-top: 44px; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 40px; align-items: center; text-align: start; }
.ag-get .ticks li { font-size: 15.5px; }
.ag-get .ticks b { color: var(--ink); font-weight: 500; }
.ag-people { display: grid; gap: 14px; }
.ag-people figure { margin: 0; display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.ag-people img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.ag-people figcaption { display: grid; gap: 2px; }
.ag-people b { font-weight: 500; font-size: 16px; }
.ag-people span { font-size: 13.5px; color: var(--muted); }
.ag-form { position: relative; isolation: isolate; overflow: hidden; margin-top: 120px; padding: 110px var(--gutter) 110px; background: var(--ink); color: #fff; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: start; }
.ag-form > * { position: relative; }
.ag-form .hero__glow { position: absolute; bottom: -90%; }
.ag-form__head, .ag-form__form, .ag-done { max-width: 560px; }
.ag-form__head { justify-self: end; width: 100%; }
.ag-form .chapter__title { color: #fff; }
.ag-form .chapter__lede { margin: 16px 0 0; color: var(--on-ink); }
.ag-form__form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ag-field { display: grid; gap: 6px; font-size: 13px; color: var(--on-ink); }
.ag-field small { font-size: 12px; color: #8f8f97; }
.ag-field--wide, .ag-builds, .ag-form .lead__err, .ag-send { grid-column: 1 / -1; }
.ag-field input, .ag-field textarea { width: 100%; padding: 14px 18px; border: 0; border-radius: 16px; background: rgb(255 255 255 / .07); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14); font: inherit; font-size: 16px; color: #fff; outline: none; resize: vertical; transition: box-shadow 160ms ease, background-color 160ms ease; }
.ag-field input { height: 50px; border-radius: 999px; padding-block: 0; }
.ag-field input::placeholder, .ag-field textarea::placeholder { color: #8f8f97; }
.ag-field input:focus, .ag-field textarea:focus { background: rgb(255 255 255 / .1); box-shadow: inset 0 0 0 1.5px var(--lime); }
.ag-builds { margin: 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ag-builds legend { padding: 0; margin-bottom: 8px; font-size: 13px; color: var(--on-ink); }
.ag-builds label { position: relative; cursor: pointer; }
.ag-builds input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ag-builds span { height: 40px; padding: 0 16px; border-radius: 999px; display: inline-flex; align-items: center; font-size: 14px; font-weight: 500; color: #fff; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .25); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: background-color 160ms ease, color 160ms ease; }
.ag-builds input:checked + span { background: #fff; color: var(--ink); box-shadow: none; }
.ag-builds input:focus-visible + span { outline: 2px solid var(--lime); outline-offset: 3px; }
.ag-send { justify-self: start; margin-top: 6px; }
.ag-done { padding: 22px 24px; border-radius: 20px; background: var(--lime); color: var(--ink); outline: none; font-size: 16px; }
.ag-done b { font-weight: 500; }
.agencies-page .sf { margin-top: 0; }
/* home: the strip that points studios to their page */
.ag-strip { max-width: calc(var(--page) - 2 * var(--gutter)); margin: 96px auto 0; padding: 30px 34px; border-radius: 28px; background: #fff; box-shadow: 0 0 0 1px var(--line); display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.ag-strip h2 { font-size: clamp(22px, 2.2vw, 28px); letter-spacing: -.025em; }
.ag-strip p { margin-top: 8px; font-size: 15px; line-height: 1.6; color: var(--muted); max-width: 62ch; }
.ag-strip .pill { flex: none; }
@media (max-width: 1000px) { .ag-points { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ag-get { grid-template-columns: minmax(0, 1fr); } .ag-form { grid-template-columns: minmax(0, 1fr); } .ag-form__head { justify-self: start; } }
@media (max-width: 760px) {
  .ag-hero { padding: calc(var(--sh-h) + 56px) var(--gutter) 64px; }
  .ag-points { grid-template-columns: minmax(0, 1fr); margin-top: 28px; }
  .ag-form { margin-top: 64px; padding: 64px var(--gutter); gap: 28px; }
  .ag-form__form { grid-template-columns: minmax(0, 1fr); }
  .ag-send { width: 100%; }
  .ag-strip { margin: 56px var(--gutter) 0; max-width: none; flex-direction: column; align-items: flex-start; padding: 24px 22px; }
}
/* agencies: the illustration rises out of the ink hero */
.ag-hero { padding-bottom: 230px; }
.ag-hero-img { position: relative; z-index: 2; max-width: 1080px; margin: -180px auto 0; padding: 0 var(--gutter); }
.ag-hero-img img { width: 100%; height: auto; aspect-ratio: 1600 / 893; object-fit: cover; border-radius: 28px; box-shadow: 0 0 0 1px rgb(255 255 255 / .08), 0 50px 100px -40px rgb(11 11 12 / .6); display: block; }
.agencies #why { padding-top: 104px; }
@media (max-width: 760px) {
  .ag-hero { padding-bottom: 110px; }
  .ag-hero-img { margin-top: -76px; }
  .ag-hero-img img { border-radius: 18px; }
  .agencies #why { padding-top: 52px; }
}
@media (max-width: 480px) { .ag-hero__title { font-size: 28px; } }
.ag-team__mark { width: 56px; height: 56px; flex: none; border-radius: 50%; background: var(--ink); display: grid; place-items: center; }
.ag-team__mark .ls-mark { --s: 22px; color: #fff; }
.ag-team.is-in .ls-mark, .ag-people:hover .ag-team .ls-mark { animation: ls-hourglass 1.8s var(--lsp-ease-in-out) 1; }
@media (prefers-reduced-motion: reduce) { .ag-team .ls-mark { animation: none !important; } }

/* ---------------------------------------------------------------- the language toggle: EN | עב */
.lang { display: inline-flex; align-items: center; gap: 2px; height: 36px; padding: 3px; border-radius: 999px; background: rgb(255 255 255 / .08); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.lang a { min-width: 36px; height: 30px; padding: 0 10px; border-radius: 999px; display: inline-grid; place-items: center; font-size: 12.5px; font-weight: 500; letter-spacing: .02em; color: var(--on-ink); text-decoration: none; transition: background-color 180ms ease, color 180ms ease; }
.lang a[lang="he"] { font-size: 13.5px; letter-spacing: 0; }
.lang a[aria-current] { background: #fff; color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .lang a:not([aria-current]):hover { color: #fff; } }
.lang--menu { display: none; margin-inline-end: auto; }
@media (max-width: 560px) { .sh__end .lang { display: none; } .lang--menu { display: inline-flex; } .menu__bar { justify-content: space-between; } }

/* ---------------------------------------------------------------- right to left (Hebrew) */
[dir="rtl"] .menu { inset: 0 auto 0 0; box-shadow: 30px 0 80px -20px rgb(0 0 0 / .5); }
[dir="rtl"] .menu[open] { animation-name: menu-in-rtl; }
@keyframes menu-in-rtl { from { transform: translateX(-100%); } }
[dir="rtl"] .menu[open] .menu__nav a { animation-name: menu-link-rtl; }
@keyframes menu-link-rtl { from { opacity: 0; transform: translateX(-18px); } }
/* arrows point the way the reading goes */
[dir="rtl"] .pill--lime:not(.cookie__ok)::after, [dir="rtl"] .menu__nav span::after, [dir="rtl"] .io__to { transform: scaleX(-1); }
@media (hover: hover) and (pointer: fine) { [dir="rtl"] .pill--lime:not(.cookie__ok):hover::after { transform: scaleX(-1) translate(2px, -2px); } }
[dir="rtl"] .menu__nav span::after { transform: scaleX(-1) translate(-6px, 6px); }
@media (hover: hover) and (pointer: fine) { [dir="rtl"] .menu__nav a:hover span::after { transform: scaleX(-1); } }
[dir="rtl"] .win__bar span { transform: translateX(24px); }
[dir="rtl"] .sw::after { left: auto; right: 3px; }
[dir="rtl"] .sw.is-on::after { transform: translateX(-16px); }
[dir="rtl"] .faq__item p { padding: 0 0 24px 56px; }
@media (max-width: 760px) { [dir="rtl"] .faq__item p { padding-left: 0; } [dir="rtl"] .pm__tabs { -webkit-mask: linear-gradient(270deg, #000 85%, transparent); mask: linear-gradient(270deg, #000 85%, transparent); } }
@media (max-width: 760px) { [dir="rtl"] .pr-row > :first-child, [dir="rtl"] .pr-group > span { left: auto; right: 0; } }
/* the hero phones mirror: each still leans outward, and the store's drawer opens from the left */
[dir="rtl"] .device--left { transform: rotate(6deg); }
[dir="rtl"] .device--right { transform: rotate(-5deg) translateY(36px); }
[dir="rtl"] .mini-banner span { left: auto; right: 12px; }
[dir="rtl"] .mini-drawer { right: auto; left: 0; border-radius: 0 22px 22px 0; box-shadow: 20px 0 40px -18px rgb(0 0 0 / .45); }
[dir="rtl"] .device--left { box-shadow: 0 50px 100px -30px rgb(0 0 0 / .8), -18px 0 40px -18px rgb(0 0 0 / .55), 0 0 0 1px rgb(255 255 255 / .14), inset 0 0 0 1.5px #3a3a40; }
/* Hebrew reads best a touch looser */
[lang="he"] body.lets-site { letter-spacing: 0; }
[lang="he"] .hero__title, [lang="he"] .chapter__title { letter-spacing: -.025em; }
/* the header keeps its English layout in Hebrew: logo on the left, toggle, button and menu on the right */
[dir="rtl"] .sh__in, [dir="rtl"] .menu__bar { direction: ltr; }
[dir="rtl"] .sh__cta { direction: rtl; }
[dir="rtl"] .sh .pill--lime:not(.cookie__ok)::after { transform: none; }
@media (hover: hover) and (pointer: fine) { [dir="rtl"] .sh .pill--lime:not(.cookie__ok):hover::after { transform: translate(2px, -2px); } }
/* so the menu slides in from the right, as in English */
[dir="rtl"] .menu { inset: 0 0 0 auto; box-shadow: -30px 0 80px -20px rgb(0 0 0 / .5); }
[dir="rtl"] .menu[open] { animation-name: menu-in; }

/* ---------------------------------------------------------------- Hebrew headings: a touch smaller, more air between lines */
[lang="he"] .hero__title { font-size: clamp(36px, 5vw, 66px); line-height: 1.12; letter-spacing: -.02em; }
[lang="he"] .chapter__title { font-size: clamp(28px, 3.2vw, 42px); line-height: 1.2; letter-spacing: -.015em; }
[lang="he"] .finale .chapter__title { font-size: clamp(30px, 3.8vw, 50px); }
[lang="he"] .pr-hero__title, [lang="he"] .ag-hero__title, [lang="he"] .bl-hero__title { font-size: clamp(32px, 4.2vw, 56px); line-height: 1.14; letter-spacing: -.02em; }
[lang="he"] .legal h1 { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.15; letter-spacing: -.02em; }
[lang="he"] .outcome h3, [lang="he"] .card h3, [lang="he"] .step h3, [lang="he"] .sub-title, [lang="he"] .ag-strip h2, [lang="he"] .bl-news h2 { line-height: 1.3; letter-spacing: -.01em; }
[lang="he"] .chapter__lede, [lang="he"] .hero__lede { line-height: 1.7; }
@media (max-width: 480px) { [lang="he"] .hero__title { font-size: 32px; } }
[dir="rtl"] .hero__on { flex-direction: row-reverse; }

/* ---------------------------------------------------------------- "Let's talk": floating chat button, bottom left */
.talk { position: fixed; z-index: 58; left: 20px; bottom: calc(20px + var(--talk-lift, 0px) + env(safe-area-inset-bottom, 0px)); transition: bottom 360ms var(--lsp-ease-out); }
.talk__btn { position: relative; width: 58px; height: 58px; border: 0; border-radius: 50%; background: var(--lime); color: var(--ink); display: grid; place-items: center; cursor: pointer; box-shadow: 0 10px 26px -12px rgb(11 11 12 / .35); transition: transform 200ms var(--lsp-ease-out), box-shadow 200ms ease; -webkit-tap-highlight-color: transparent; }
.talk__btn:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) { .talk__btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgb(11 11 12 / .4); } }
.talk__btn svg { position: absolute; width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 300ms var(--lsp-ease-out), opacity 200ms ease; }
.talk__close { opacity: 0; transform: rotate(-90deg) scale(.6); }
.talk__btn .talk__chat { width: 29px; height: 29px; }
.talk.is-open .talk__chat { opacity: 0; transform: rotate(90deg) scale(.6); }
.talk.is-open .talk__close { opacity: 1; transform: none; }
.lets-site .talk__btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 50%; }
.talk__card { position: absolute; left: 0; bottom: 72px; width: min(340px, calc(100vw - 40px)); padding: 22px 20px 20px; border-radius: 24px; background: #fff; color: var(--ink); box-shadow: 0 0 0 1px rgb(11 11 12 / .06), var(--lsp-shadow-lg); opacity: 0; transform: translateY(8px) scale(.97); transform-origin: 0 100%; transition: opacity 200ms ease, transform 280ms var(--lsp-ease-out); }
.talk__card.is-in { opacity: 1; transform: none; }
.talk__x { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--lsp-gray-50); color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.talk__x .ico { width: 15px; height: 15px; }
.talk__title { font-size: 22px; letter-spacing: -.02em; padding-right: 36px; }
.talk__lede { margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.talk__form { display: grid; gap: 8px; margin-top: 16px; }
.talk__field input, .talk__field textarea { width: 100%; padding: 12px 16px; border: 0; border-radius: 14px; background: var(--lsp-gray-50); font: inherit; font-size: 16px; color: var(--ink); outline: none; resize: none; transition: box-shadow 160ms ease, background-color 160ms ease; }
.talk__field input { height: 46px; border-radius: 999px; padding-block: 0; }
.talk__field input:focus, .talk__field textarea:focus { background: #fff; box-shadow: inset 0 0 0 1.5px var(--ink); }
.talk__err { margin: 0; padding: 9px 12px; border-radius: 12px; background: var(--coral); color: var(--ink); font-size: 13.5px; }
.talk__send { width: 100%; height: 46px; margin-top: 4px; }
.talk__done { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 14px; border-radius: 16px; background: var(--lime); outline: none; }
.talk__done p { font-size: 14.5px; line-height: 1.45; }
.talk__done b { font-weight: 500; }
.talk__ok { width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--ink); color: var(--lime); display: grid; place-items: center; }
.talk__ok .ico { width: 17px; height: 17px; stroke-width: 2.2; }
[dir="rtl"] .talk__x { right: auto; left: 12px; }
[dir="rtl"] .talk__title { padding-right: 0; padding-left: 36px; }
@media (max-width: 480px) { .talk { left: 14px; } .talk__btn { width: 54px; height: 54px; } .talk__card { width: calc(100vw - 28px); } }
@media (prefers-reduced-motion: reduce) { .talk, .talk__btn, .talk__btn svg, .talk__card { transition: none; } }
.menu[open] ~ .talk, html.menu-open .talk { visibility: hidden; }

/* the menu's foot: centred, the email small under the button */
.menu__aside { text-align: center; }
.menu__aside > div { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 6px; }
.menu__aside .menu__label { margin: 0; font-size: 13.5px; }
.menu__aside .menu__label::after { content: ":"; }
.menu__mail { font-size: 13.5px; color: var(--on-ink); border-bottom-color: rgb(255 255 255 / .18); }
.menu__mail:hover { color: #fff; }
.menu__legal { justify-content: center; }