/* Light middle; header, hero, closing and footer stay dark through .dark */
:root {
  color-scheme: light;
  --bg: #f6f8fb; --panel: #ffffff; --panel-2: #e6f4eb; --line: #dde3ec; --rule: #e3e8ef;
  --fg: #1b263b; --strong: #0e1522; --muted: #4e5a6d; --quiet: #66728a; --ghost-line: #c5ccd8;
  --link: #1d7a3b; --link-hover: #15602d; --btn-bg: #1e8542; --btn-hover: #24a051; --btn-fg: #ffffff;
  --ink: #1b263b; --ink-muted: #59647c; --paper: #f1f4f8;
  --shadow: 0 8px 20px -14px rgba(14, 21, 34, .2);
  --r: 8px; --r-lg: 10px; --ease: cubic-bezier(.16, 1, .3, 1);
  --font: "Open Sans", "Open Sans Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
}
.dark {
  color-scheme: dark;
  --bg: #0e1522; --panel: #151f31; --panel-2: #1b263b; --line: #26334d; --rule: #1e2a40;
  --fg: #eef2f7; --strong: #ffffff; --muted: #aab4c5; --quiet: #9aa6bb; --ghost-line: #3a4866;
  --link: #5fd385; --link-hover: #8fe3aa;
  background: var(--bg); color: var(--fg);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
html.is-locked { overflow: hidden; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 16px/1.6 var(--font); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--link); }
a:hover { color: var(--link-hover); }
:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.icon { width: 20px; height: 20px; flex: none; fill: currentColor; }

.wrap { max-width: 1400px; margin-inline: auto; padding-inline: 40px; }
section { padding-block: clamp(48px, 6vw, 80px); }
.white { background: #ffffff; --panel: #f6f8fb; --paper: #eef2f6; }
.display { font-weight: 300; letter-spacing: -.025em; line-height: 1.04; text-wrap: balance; font-size: clamp(36px, 4.4vw, 60px); }
.display b { font-weight: 650; }
.lead { font-size: clamp(17px, 1.2vw + 12px, 20px); line-height: 1.55; color: var(--muted); }
.head { display: grid; gap: 18px; margin-bottom: 48px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 26px; border-radius: 8px; border: 1px solid transparent; font: 600 16px/1 var(--font); text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform .25s var(--ease), background-color .25s, border-color .25s; }
.btn:active { transform: scale(.98); }
.btn--primary { background: var(--btn-bg); color: var(--btn-fg); }
.btn--primary:hover { background: var(--btn-hover); color: var(--btn-fg); }
.btn--ghost { border-color: var(--line); color: var(--strong); background: var(--panel); }
.btn--ghost:hover { border-color: var(--btn-bg); color: var(--strong); }
.btn--sm { min-height: 42px; padding: 0 20px; font-size: 15px; }
.more { display: inline-flex; align-items: center; gap: 6px; color: var(--link); font-weight: 600; text-decoration: none; }
.more .icon { width: 18px; height: 18px; transition: transform .25s var(--ease); }
a:hover > .more .icon, .more:hover .icon { transform: translateX(4px); }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); }

/* Header: logo, menu, sign in; below 1080px the menu opens under the top bar */
.site-header { position: sticky; top: 0; z-index: 20; background: var(--bg); border-bottom: 1px solid var(--rule); }
.site-header .wrap { display: flex; align-items: center; gap: clamp(20px, 2.4vw, 36px); min-height: 76px; }
.logo { display: inline-flex; color: var(--strong); }
.logo svg { width: 110px; height: 34px; }
.nav { display: flex; gap: clamp(16px, 1.9vw, 30px); flex: 1; }
.nav a { color: #c3cbd8; text-decoration: none; font-size: 15px; white-space: nowrap; }
.nav a:hover { color: var(--strong); }
.nav .btn { color: var(--fg); }
.nav__extra, .nav__signin { display: none; }
.header-end { display: flex; align-items: center; gap: 20px; margin-left: auto; }
.header-end > a:not(.btn) { color: var(--fg); text-decoration: none; font-size: 15px; font-weight: 600; }
.header-end .lang { color: var(--quiet); font-size: 14px; }
.menu-btn { display: none; width: 44px; height: 44px; place-items: center; border: 1px solid var(--ghost-line); border-radius: 8px; background: none; color: var(--fg); cursor: pointer; }
@media (max-width: 1080px) {
  .menu-btn { display: grid; }
  .header-end .lang { display: none; }
  .nav { position: fixed; inset: calc(env(safe-area-inset-top) + 77px) 0 0 0; z-index: 19; flex-direction: column; gap: 0; padding: 12px 24px 32px; background: var(--bg); overflow-y: auto; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .25s, transform .25s var(--ease), visibility .25s; }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav > a { padding: 16px 0; border-bottom: 1px solid var(--rule); font-size: 20px; color: var(--fg); }
  .nav__extra { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 24px; }
}
@media (max-width: 560px) { .site-header .wrap { gap: 12px; } .header-end { gap: 12px; } .header-end .btn { padding: 0 14px; } .logo svg { width: 88px; height: 28px; } }
/* On phones sign-in leaves the header and opens the menu */
@media (max-width: 480px) { .header-end .signin { display: none; } .nav__signin { display: block; padding: 4px 0 12px; } }

/* Hero: text left, photo right, a review card over the photo */
.hero, .closing { --bg: #141e30; --panel: #1c2840; --line: #2c3b5a; --ghost-line: #43537a; }
.check { list-style: none; padding: 0; display: grid; gap: 14px; max-width: 34em; }
.check li { display: flex; gap: 14px; align-items: flex-start; font-size: 17px; line-height: 1.55; color: var(--muted); }
.check strong { color: var(--fg); font-weight: 650; }
.check li::before { content: ""; flex: none; width: 22px; height: 22px; margin-top: 2px; border-radius: 999px; background: var(--btn-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M6.5 11.5l3 3 6-6.5' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 22px no-repeat; }
.hero .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 56px 64px; }
.hero__text { flex: 6 1 460px; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.hero h1 { font-size: clamp(36px, 3.9vw, 56px); line-height: 1.06; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 4px; }
.photo { flex: 5 1 380px; min-width: 0; position: relative; }
.photo__img { width: 100%; aspect-ratio: 1 / 1; max-height: 520px; object-fit: cover; border-radius: 10px; background: var(--panel); }
.say { position: absolute; left: -48px; bottom: 40px; width: min(380px, calc(100% - 32px)); display: grid; gap: 16px; padding: 22px 22px 18px; background: var(--paper); color: var(--ink); border-radius: 10px; box-shadow: 0 8px 20px -12px rgba(4, 8, 16, .3); }
/* Only the words fade while the quote changes, the card stays */
.say blockquote, .say__who { transition: opacity .3s; }
.say.is-swap blockquote, .say.is-swap .say__who { opacity: 0; }
.say blockquote { font-size: 17px; line-height: 1.55; font-weight: 500; }
.say__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.say__who { font-size: 13px; line-height: 1.45; color: var(--ink-muted); }
.say__who b { display: block; font-size: 15px; color: var(--ink); }
.say__nav { display: flex; gap: 8px; }
.say__btn { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 8px; border: 1px solid #c5ccd8; background: none; color: var(--ink); cursor: pointer; }
.say__btn:hover { border-color: var(--ink); }
.say__btn:first-child .icon { transform: scaleX(-1); }
.say__btn .icon { width: 18px; height: 18px; }
@media (max-width: 1100px) { .say { left: 16px; bottom: 16px; } }
@media (max-width: 720px) { .say { left: 12px; right: 12px; bottom: 12px; width: auto; gap: 10px; padding: 16px 16px 14px; } .say blockquote { font-size: 15px; line-height: 1.5; } .say__btn { width: 36px; height: 36px; } .photo__img { aspect-ratio: 4 / 5; max-height: none; } }

/* Integrations: logos only */
.logos { border-bottom: 1px solid var(--rule); }
.logos .wrap { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 24px 72px; padding-block: 34px; }
.logos a { display: inline-flex; align-items: center; height: 40px; text-decoration: none; opacity: .85; transition: opacity .2s; }
.logos a:hover { opacity: 1; }
.logos img { width: 140px; height: 40px; object-fit: contain; }
@media (max-width: 560px) { .logos .wrap { gap: 20px 36px; padding-block: 26px; } .logos a, .logos img { height: 30px; } .logos img { width: 105px; } .logos .logo-text { font-size: 28px !important; line-height: 30px; } }
.logos .logo-text { display: inline-block; max-width: 100%; font-size: 38px; line-height: 40px; font-weight: 800; letter-spacing: -.03em; color: var(--strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.logos .speedy { transform: skewX(-12deg); color: #c8102e; }

/* Paths: two photo cards */
.paths { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 640px) { .paths { grid-template-columns: 1fr; } }
@media (max-width: 1000px) { .path h3 { font-size: 24px; } .path__body { padding: 24px; } }
.path { display: flex; flex-direction: column; overflow: hidden; text-decoration: none; color: inherit; transition: border-color .25s; }
.path:hover { box-shadow: var(--shadow); border-color: var(--link); color: inherit; }
.path img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .6s var(--ease); }
.path:hover img { transform: scale(1.03); }
.path__body { position: relative; display: grid; gap: 12px; padding: 30px 32px 34px; background: var(--panel); }
.path__kicker { font-size: 13px; font-weight: 700; color: var(--link); text-transform: uppercase; letter-spacing: .06em; }
.path h3 { font-size: 30px; font-weight: 400; letter-spacing: -.01em; line-height: 1.2; color: var(--strong); }
.path p { font-size: 17px; color: var(--muted); }
.path .more { padding-top: 6px; }

/* Flow: the steps are tabs over one panel */
.flow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; position: relative; }
.flow::before { content: ""; position: absolute; top: 27px; left: 10%; right: 10%; height: 2px; background: var(--line); }
.flow::after { content: ""; position: absolute; top: 27px; left: 10%; height: 2px; width: calc(80% * var(--done, 0) / 4); background: var(--link); transition: width .5s var(--ease); }
/* How far the line reaches, set by the script as data-done */
.flow[data-done="1"] { --done: 1; }
.flow[data-done="2"] { --done: 2; }
.flow[data-done="3"] { --done: 3; }
.flow[data-done="4"] { --done: 4; }
.flow button { position: relative; z-index: 1; width: 100%; display: grid; justify-items: center; gap: 10px; padding: 0 0 6px; border: 0; background: none; color: var(--quiet); font: 600 15px/1.3 var(--font); cursor: pointer; }
.flow__dot { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 999px; background: var(--btn-bg); color: #ffffff; transition: box-shadow .3s, transform .3s var(--ease); }
.flow__dot .icon { width: 24px; height: 24px; }
.flow button:hover { color: var(--fg); }
.flow button:hover .flow__dot { transform: translateY(-2px); }
.flow button[aria-selected="true"] { color: var(--strong); }
.flow button[aria-selected="true"] .flow__dot { box-shadow: 0 0 0 6px rgba(31, 138, 69, .2); transform: scale(1.08); }
.flow__panel { margin-top: 32px; padding: 34px; display: grid; grid-template-columns: 1fr; gap: 8px 40px; align-items: start; }
.flow__panel h3 { font-size: 26px; font-weight: 600; color: var(--strong); }
.flow__panel p { color: var(--muted); font-size: 17px; max-width: none; }
.flow__panel .more { margin-top: 6px; justify-self: start; }
.flow__panel.is-in { animation: in .4s var(--ease); }
@keyframes in { from { opacity: 0; transform: translateY(8px); } }
@media (max-width: 860px) { .flow button { font-size: 13px; } .flow__dot { width: 48px; height: 48px; } .flow::before, .flow::after { top: 23px; } }
@media (max-width: 640px) {
  .flow { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px 0; }
  .flow::before, .flow::after { display: none; }
  .flow button { flex: 0 0 33.333%; font-size: 15px; }
  .flow__dot { width: 56px; height: 56px; }
}
@media (max-width: 860px) { .flow__panel { padding: 26px; } }

/* Highlights: a bento grid of 2/3 + 1/3, three thirds, 1/3 + 2/3; wide tiles put the text beside the animation */
.tiles-more { margin-top: 40px; display: flex; justify-content: center; }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.tile { display: grid; grid-template-rows: 230px 1fr; gap: 24px; padding: 12px 12px 28px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); transition: box-shadow .3s; }
.tile:hover { box-shadow: var(--shadow); }
.tile__art { position: relative; overflow: hidden; background: var(--paper); color: var(--ink); border-radius: var(--r); }
.tile__art > * { position: absolute; inset: 16px; }
.tile__art > svg { width: calc(100% - 32px); height: calc(100% - 32px); }
.tile__text { display: grid; align-content: start; gap: 10px; padding-inline: 16px; }
.tile h3 { font-size: 21px; font-weight: 600; line-height: 1.25; color: var(--strong); }
.tile p { color: var(--muted); }
.tile:is(:first-child, :last-child) { grid-column: span 2; grid-template-rows: minmax(300px, auto); grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); padding: 12px; }
.tile:is(:first-child, :last-child) .tile__text { order: -1; align-content: center; padding: 16px 8px 16px 28px; }
.tile:is(:first-child, :last-child) h3 { font-size: 28px; }
@media (max-width: 1000px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tile:last-child { grid-column: auto; grid-template-rows: 230px 1fr; grid-template-columns: none; padding: 12px 12px 28px; } .tile:last-child .tile__text { order: 0; align-content: start; padding: 0 16px; } .tile:last-child h3 { font-size: 21px; } }
@media (max-width: 640px) { .tiles { grid-template-columns: 1fr; } .tile:first-child { grid-column: auto; grid-template-rows: 230px 1fr; grid-template-columns: none; padding: 12px 12px 28px; } .tile:first-child .tile__text { order: 0; align-content: start; padding: 0 16px; } .tile:first-child h3 { font-size: 21px; } }
.art { width: 100%; height: 100%; overflow: visible; }
.art text { font: 600 11px var(--font); fill: #59647c; }
.art .big { font-size: 13px; font-weight: 700; fill: #1b263b; }
.art .small { font-size: 10px; }
.art .pill { font-size: 13px; font-weight: 700; }
.art .rack { fill: #e3e8ef; stroke: #cfd6e0; }
.art .aisle { fill: none; stroke: #9aa6bb; stroke-width: 2; stroke-dasharray: 4 6; }
.art .stop { fill: #ffffff; stroke: #1d7f3e; stroke-width: 2; }
.art .hit { fill: #2fae57; }
.art .walker { fill: #1b263b; stroke: #ffffff; stroke-width: 3; }
.art .frame { fill: none; stroke: #9aa6bb; stroke-width: 3; }
.art .cell { fill: #ffffff; stroke: #dde2ea; }
.art .box { fill: #d9c3a0; }
.art .seek { fill: none; stroke: #1f8a45; stroke-width: 2.5; }
.art .found { fill: rgba(47, 174, 87, .35); stroke: #1f8a45; stroke-width: 2.5; }
.art .wire { fill: none; stroke: #b9c2cf; stroke-width: 2; }
.art .node { fill: #ffffff; stroke: #dde2ea; }
.art .qty { font: 800 40px var(--font); fill: #1b263b; animation: qty 8s step-end infinite; }
/* The SVG animations' timings live here, as the CSP blocks SMIL changes to CSS properties */
.hit--1 { animation: hit1 9s linear infinite; }
.hit--2 { animation: hit2 9s linear infinite; }
.hit--3 { animation: hit3 9s linear infinite; }
.hit--4 { animation: hit4 9s linear infinite; }
.hit--5 { animation: hit5 9s linear infinite; }
@keyframes hit1 { 0%, 7.3% { opacity: 0; } 7.7%, 100% { opacity: 1; } }
@keyframes hit2 { 0%, 20.7% { opacity: 0; } 21.1%, 100% { opacity: 1; } }
@keyframes hit3 { 0%, 39.9% { opacity: 0; } 40.3%, 100% { opacity: 1; } }
@keyframes hit4 { 0%, 53.4% { opacity: 0; } 53.8%, 100% { opacity: 1; } }
@keyframes hit5 { 0%, 87.7% { opacity: 0; } 88.1%, 100% { opacity: 1; } }
.seek { animation: seek 4s step-end infinite; }
.found { animation: found 4s linear infinite; }
@keyframes seek { 0% { transform: translate(180px, 42px); } 15% { transform: translate(120px, -42px); } 30% { transform: translate(60px, 42px); } 45%, 100% { transform: none; } }
@keyframes found { 0%, 45% { opacity: 0; } 46%, 100% { opacity: 1; } }
.pk-drop--1 { animation: pkdrop1 6s linear infinite; }
.pk-drop--2 { animation: pkdrop2 6s linear infinite; }
.pk-drop--3 { animation: pkdrop3 6s linear infinite; }
.pk-lid { animation: pklid 6s linear infinite; }
.pk-tape { animation: pktape 6s linear infinite; }
.pk-label { animation: pklabel 6s linear infinite; }
@keyframes pkdrop1 { 0%, 4% { transform: none; } 16%, 97% { transform: translateY(136px); } 100% { transform: none; } }
@keyframes pkdrop2 { 0%, 16% { transform: none; } 28%, 97% { transform: translateY(130px); } 100% { transform: none; } }
@keyframes pkdrop3 { 0%, 28% { transform: none; } 40%, 97% { transform: translateY(140px); } 100% { transform: none; } }
@keyframes pklid { 0%, 52% { opacity: 0; } 53%, 95% { opacity: 1; } 100% { opacity: 0; } }
@keyframes pktape { 0%, 60% { opacity: 0; } 61%, 95% { opacity: 1; } 100% { opacity: 0; } }
@keyframes pklabel { 0%, 70% { opacity: 0; } 71%, 95% { opacity: 1; } 100% { opacity: 0; } }
.art .qty--1 { animation-delay: -6s; }
.art .qty--2 { animation-delay: -4s; }
.art .qty--3 { animation-delay: -2s; }
@keyframes qty { 0% { opacity: 1; } 25%, 100% { opacity: 0; } }
.lots { list-style: none; padding: 0; display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 8px; font-size: 14px; }
.lots li { display: flex; align-items: center; gap: 12px; padding: 0 14px; border-radius: 10px; background: #ffffff; color: #59647c; }
.lots b { color: #1b263b; font-weight: 700; }
.lots em { margin-left: auto; font-style: normal; font-size: 12px; font-weight: 700; color: #ffffff; background: var(--btn-bg); padding: 2px 10px; border-radius: 99px; }
.lots .is-next { box-shadow: inset 0 0 0 2px #2fae57; animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: inset 0 0 0 2px #2fae57, 0 0 0 4px rgba(47, 174, 87, .25); } }
.log { list-style: none; margin: 0; padding: 0; display: grid; grid-template-rows: repeat(5, minmax(0, 1fr)); gap: 6px; font-size: 13px; }
.log li { display: flex; align-items: center; gap: 10px; padding: 0 12px; border-radius: 10px; background: #ffffff; color: #1b263b; font-weight: 600; animation: logrow 8s calc(var(--i) * .9s) infinite both; }
.log time { color: #1d7f3e; font-weight: 700; font-variant-numeric: tabular-nums; }
.log span { margin-left: auto; color: #59647c; font-weight: 500; }
@keyframes logrow { 0% { opacity: 0; transform: translateY(6px); } 6%, 80% { opacity: 1; transform: none; } 90%, 100% { opacity: 0; } }

/* Plans: a switch between the two modes */
.plans-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 48px; }
.plans-head .head { margin: 0; }
.seg { display: inline-flex; padding: 4px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); }
.seg button { min-height: 42px; padding: 0 20px; border: 0; border-radius: 6px; background: none; color: var(--muted); font: 600 15px/1 var(--font); cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--btn-bg); color: #ffffff; }
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: 24px; }
.plans[hidden] { display: none; }
.plan { padding: 34px; display: grid; gap: 14px; align-content: start; }
.plan--default { border-color: var(--link); }
.plan__name { font-size: 22px; font-weight: 600; color: var(--strong); display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.plan__name small { font-size: 13px; color: var(--link); }
.plan__price { font-size: 44px; font-weight: 300; letter-spacing: -.02em; line-height: 1.1; color: var(--strong); }
.plan__price small { font-size: 15px; color: var(--quiet); letter-spacing: 0; }
.plan ul { padding: 14px 0 0; border-top: 1px solid var(--line); list-style: none; display: grid; gap: 8px; color: var(--muted); }
.trust { list-style: none; margin-top: 32px; padding: 20px 24px; display: flex; flex-wrap: wrap; gap: 12px 32px; border-radius: var(--r-lg); background: var(--panel); border: 1px solid var(--line); font-size: 15px; font-weight: 600; color: var(--fg); }
.trust li { display: flex; align-items: center; gap: 8px; }
.trust .icon { color: var(--btn-bg); }
.plans-foot { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }

/* Questions: equal columns of rows, the help search below */
.faq .head { margin-bottom: 0; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.faq__list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; align-items: start; }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; padding-block: 20px; font-weight: 600; font-size: 17px; color: var(--strong); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--link); }
.faq summary .icon { color: var(--link); margin-top: 3px; transition: transform .3s var(--ease); }
.faq details[open] summary .icon { transform: rotate(45deg); }
.faq details p { padding-bottom: 20px; color: var(--muted); }
@media (max-width: 760px) { .faq__list { grid-template-columns: 1fr; } }
.help { margin-top: 56px; padding: 34px; display: grid; gap: 18px; }
.help .lead { color: var(--fg); }
.search { display: flex; align-items: center; gap: 10px; max-width: 640px; padding: 6px 6px 6px 18px; border-radius: 10px; background: #ffffff; border: 1px solid var(--line); }
.search:focus-within { border-color: var(--link); }
.search__field { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.search .icon { flex: none; color: #66728a; }
.search input { flex: 1; min-width: 0; min-height: 40px; border: 0; background: none; color: #1b263b; font: 400 16px var(--font); outline: none; }
.search input::placeholder { color: #66728a; }
.hits { list-style: none; padding: 0; max-width: 640px; display: grid; gap: 2px; }
.hits[hidden] { display: none; }
.hits a { display: flex; justify-content: space-between; gap: 16px; padding: 10px 14px; border-radius: 10px; color: var(--fg); text-decoration: none; }
.hits a:hover { background: var(--panel-2); }
.hits small { flex: none; color: var(--quiet); }
.hits mark { background: none; color: var(--link); font-weight: 700; }
/* Suggestions float under the search box over the page, light on every background */
.search-box { position: relative; max-width: 640px; }
.hits--float { position: absolute; z-index: 30; top: 100%; left: 0; right: 0; max-width: none; margin-top: 6px; padding: 6px; border-radius: 10px; background: #ffffff; border: 1px solid #dde3ec; box-shadow: 0 16px 36px -18px rgba(14, 21, 34, .35); }
.hits--float a { color: #1b263b; }
.hits--float a:hover, .hits--float a:focus-visible { background: #e6f4eb; }
.hits--float small { color: #66728a; }
.hits--float mark { color: #1d7a3b; }
@media (max-width: 560px) { .search { flex-wrap: wrap; border-radius: var(--r); padding: 10px; } .search__field { flex-basis: 100%; padding: 0 12px; border-radius: 8px; background: #eef2f6; } .search .btn { width: 100%; } .help { padding: 24px; } }

/* Closing */
.closing .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 40px 64px; }
.start { width: 100%; height: auto; overflow: visible; }
.st-card { fill: #1b2740; stroke: #3d4f75; stroke-width: 2; }
.st-dot { fill: #24324f; stroke: #3d4f75; stroke-width: 2; }
.st-ring { fill: none; stroke: #5fd385; stroke-width: 4; stroke-linecap: round; }
.st-on { fill: #1f8a45; stroke: #5fd385; stroke-width: 2; }
.st-ic { fill: #ffffff; }
.st-t { font: 700 21px var(--font); fill: #eef2f7; }
.st-s { font: 400 16px var(--font); fill: #a9b4c8; }
/* Each step's ring fills, its picture moves in and its tick replaces the ring */
.st-ring--0 { animation: string0 12s linear infinite; }
.st-ring--1 { animation: string1 12s linear infinite; }
.st-ring--2 { animation: string2 12s linear infinite; }
.st-done--0 { animation: stdone0 12s linear infinite; }
.st-done--1 { animation: stdone1 12s linear infinite; }
.st-done--2 { animation: stdone2 12s linear infinite; }
.st-go--0 { animation: stgo0 12s ease-in-out infinite; }
.st-go--1 { animation: stgo1 12s ease-in-out infinite; }
.st-go--2 { animation: stgo2 12s ease-in-out infinite; }
@keyframes string0 { 0%, 2% { stroke-dashoffset: 100; } 18%, 100% { stroke-dashoffset: 0; } }
@keyframes string1 { 0%, 22% { stroke-dashoffset: 100; } 38%, 100% { stroke-dashoffset: 0; } }
@keyframes string2 { 0%, 42% { stroke-dashoffset: 100; } 58%, 100% { stroke-dashoffset: 0; } }
@keyframes stdone0 { 0%, 18% { opacity: 0; } 19%, 97% { opacity: 1; } 100% { opacity: 0; } }
@keyframes stdone1 { 0%, 38% { opacity: 0; } 39%, 97% { opacity: 1; } 100% { opacity: 0; } }
@keyframes stdone2 { 0%, 58% { opacity: 0; } 59%, 97% { opacity: 1; } 100% { opacity: 0; } }
@keyframes stgo0 { 0%, 4% { opacity: 0; transform: translateX(-70px); } 7% { opacity: 1; } 18%, 97% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes stgo1 { 0%, 24% { opacity: 0; transform: translateX(-70px); } 27% { opacity: 1; } 38%, 97% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes stgo2 { 0%, 44% { opacity: 0; transform: translateX(-70px); } 47% { opacity: 1; } 58%, 97% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.closing .display { font-size: clamp(36px, 4.4vw, 60px); }
.closing .actions { margin-top: 32px; }
@media (max-width: 860px) { .closing .wrap { grid-template-columns: 1fr; } .start { max-width: 520px; margin-inline: auto; } }
.closing .lead { margin-top: 24px; }

/* Footer */
.foot { border-top: 1px solid var(--rule); background: var(--bg); }
.foot__grid { padding-block: 64px 32px; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 36px; }
@media (max-width: 1000px) { .foot__grid { grid-template-columns: repeat(3, 1fr); } .foot__grid > div:first-child { grid-column: 1 / -1; } }
@media (max-width: 640px) { .foot__grid { grid-template-columns: 1fr 1fr; gap: 32px 20px; padding-top: 48px; } .foot__contact { grid-column: 1 / -1; } }
.foot__grid > div { display: grid; gap: 12px; align-content: start; }
.foot__grid p { font-size: 14px; color: var(--quiet); }
.foot__contact p { display: flex; align-items: center; gap: 10px; color: var(--quiet); }
.foot__contact p .icon { width: 18px; height: 18px; color: var(--link); }
.foot__contact .more { color: var(--link); font-weight: 600; margin-top: 4px; }
.foot h3 { font-size: 15px; font-weight: 700; color: var(--fg); }
.foot a, .foot button { color: var(--quiet); text-decoration: none; font: 400 14px var(--font); background: none; border: 0; padding: 0; text-align: left; cursor: pointer; }
.foot a:hover, .foot button:hover { color: var(--strong); }
.foot__bottom { display: flex; justify-content: space-between; gap: 16px; padding-block: 22px 34px; border-top: 1px solid var(--rule); font-size: 13px; color: #7a869c; }

@media (max-width: 1000px) { .wrap { padding-inline: 24px; } }
@media (max-width: 480px) { .wrap { padding-inline: 16px; } .path__body, .plan, .flow__panel { padding: 24px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; }  }

/* ---------- Inner pages ---------- */
.nav a[aria-current="page"] { color: var(--white, #ffffff); box-shadow: inset 0 -2px 0 var(--link); padding-bottom: 4px; }
.hero--page .hero__text { flex-basis: 520px; }
.hero--solo .hero__text { flex: 1 1 100%; max-width: none; }
.hero h1.display { font-size: clamp(34px, 3.6vw, 52px); }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; font-size: 14px; color: var(--quiet); }
.crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--line); }
.crumbs li { min-width: 0; overflow-wrap: anywhere; }
.crumbs a { color: var(--quiet); text-decoration: none; }
.crumbs a:hover { color: var(--link); }
.hero .photo__img--wide { aspect-ratio: 4 / 3; }

/* Feature rows: text on one side, the drawing on the other, sides alternate */
.rows { display: grid; gap: clamp(56px, 7vw, 96px); }
.row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 64px; align-items: center; }
.row:nth-child(even) .row__art { order: -1; }
.row__text { display: grid; gap: 14px; align-content: start; }
.row h2 { font-size: clamp(26px, 2.4vw, 34px); font-weight: 600; line-height: 1.2; letter-spacing: -.01em; color: var(--strong); }
.row .benefit { color: var(--link); font-weight: 600; font-size: 18px; }
.row p { color: var(--muted); font-size: 17px; }
.row__art { position: relative; height: 300px; border-radius: var(--r-lg); background: var(--paper); border: 1px solid var(--line); overflow: hidden; color: var(--ink); }
.row__art > * { position: absolute; inset: 28px; }
.row__art > svg { width: calc(100% - 56px); height: calc(100% - 56px); }
@media (max-width: 860px) { .row { grid-template-columns: 1fr; } .row:nth-child(even) .row__art { order: 0; } .row__art { height: 240px; } .row__art > * { inset: 18px; } .row__art > svg { width: calc(100% - 36px); height: calc(100% - 36px); } }
.ticks { list-style: none; padding: 0; display: grid; gap: 10px; }
.ticks li { display: flex; gap: 10px; align-items: flex-start; color: var(--fg); }
.ticks .icon { margin-top: 3px; color: var(--btn-bg); }

/* "Подходящо е за вас, ако…" */
.fit { display: grid; gap: 0; }
.fit .ticks { grid-template-columns: 1fr 1fr; gap: 20px 48px; }
.fit .ticks li { font-size: 17px; }
@media (max-width: 860px) { .fit .ticks { grid-template-columns: 1fr; } }

/* Small cards with an icon */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.card { display: grid; gap: 10px; align-content: start; padding: 28px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); }
.card__ic { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 999px; background: var(--btn-bg); color: #ffffff; margin-bottom: 6px; }
.card__ic .icon { width: 24px; height: 24px; }
.card h3 { font-size: 20px; font-weight: 600; color: var(--strong); }
.card p { color: var(--muted); }
@media (max-width: 1000px) { .cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .cards { grid-template-columns: 1fr; } }

/* "Не е точно за вас?" */
.other { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; padding: 32px 36px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); }
.other h2 { font-size: 24px; font-weight: 600; color: var(--strong); }
.other p { color: var(--muted); margin-top: 6px; max-width: 46em; }

/* Integrations */
.integrations { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.int { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: start; padding: 28px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); }
.int__logo { height: 40px; display: flex; align-items: center; }
.int__logo img { width: 140px; height: 40px; object-fit: contain; object-position: left center; }
.int__logo .logo-text { min-width: 0; font-size: 32px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; color: var(--strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Slanted, not italic, so the italic font is not downloaded for one word */
.int__logo .speedy { transform: skewX(-12deg); color: #c8102e; }
.int__logo--hero { justify-self: start; max-width: 100%; min-width: 0; height: auto; padding: 14px 20px; background: #fff; border-radius: var(--r-lg); }
.int__logo--hero img { width: 200px; height: 56px; object-position: center; }
.int__logo--hero .logo-text { font-size: 42px; }
.int h3 { font-size: 20px; font-weight: 600; color: var(--strong); display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.int h3 > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.int h3 small { flex: none; font-size: 13px; font-weight: 700; color: var(--link); }
.int h3 small.soon { color: var(--quiet); }
.int p { color: var(--muted); }
@media (max-width: 1000px) { .integrations { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .integrations { grid-template-columns: 1fr; } }
.table-box { overflow-x: auto; overflow-y: hidden; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); }
.table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 560px; }
.table th, .table td { padding: 14px 20px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.table thead th { font-size: 13px; font-weight: 700; color: var(--quiet); text-transform: uppercase; letter-spacing: .04em; }
.table tbody th { font-weight: 600; color: var(--strong); }
.table td { color: var(--muted); }
.table tr:last-child > * { border-bottom: 0; }
.table .yes { color: var(--link); font-weight: 700; }

/* Plans page */
.plan .btn { justify-self: start; margin-top: 8px; }
.plan ul li { display: flex; align-items: flex-start; gap: 10px; }
.plan ul .icon { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--link); }

/* Help center */
.help-hero .wrap { display: grid; gap: 24px; justify-items: start; }
.help-hero h1 { font-size: clamp(34px, 3.6vw, 52px); }
.help-hero form { width: 100%; max-width: 680px; display: grid; gap: 8px; }
.help-hero .search-box, .help-hero .search { max-width: none; }
.help-hero .search { padding: 8px 8px 8px 22px; }
.help-hero .search input { font-size: 17px; min-height: 46px; }
.cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 56px; }
.cat { display: grid; grid-template-rows: auto auto 1fr auto; gap: 10px; padding-top: 22px; border-top: 2px solid var(--line); }
.cat h2 { font-size: 20px; font-weight: 600; }
.cat h2 a { color: var(--strong); text-decoration: none; }
.cat h2 a:hover { color: var(--link); }
.cat p { color: var(--muted); font-size: 14px; }
.cat ul { list-style: none; padding: 0; display: grid; gap: 6px; font-size: 15px; }
.cat ul a { display: flex; gap: 10px; align-items: flex-start; color: var(--fg); font-weight: 500; text-decoration: none; }
.cat ul a:hover { color: var(--link); }
.cat > .more { font-size: 15px; }
@media (max-width: 1000px) { .cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cats { grid-template-columns: minmax(0, 1fr); } }
/* A category page: each section the full width, its articles in as many columns as fit */
.cats.cats--full { grid-template-columns: minmax(0, 1fr); gap: 40px; }
.cats--full .cat ul { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 8px 40px; }
.contact-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding: 32px 36px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); }
.contact-band h2 { font-size: 24px; font-weight: 600; color: var(--strong); }
.contact-band p { color: var(--muted); margin-top: 6px; }

/* Blog: the categories as filters, then the posts as cards, newest first */
.blog { display: grid; gap: 32px; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filters a { padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--fg); font-size: 15px; font-weight: 600; text-decoration: none; }
.filters a:hover { border-color: var(--btn-bg); color: var(--link); }
.filters a[aria-current="page"] { background: var(--btn-bg); border-color: var(--btn-bg); color: #ffffff; }
.posts { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.post { position: relative; display: grid; grid-template-rows: auto auto 1fr; overflow-wrap: anywhere; gap: 10px; padding: 24px 26px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); transition: box-shadow .3s, border-color .25s; }
.post:hover { box-shadow: var(--shadow); border-color: var(--btn-bg); }
.post__meta { font-size: 14px; color: var(--quiet); }
.post__meta span { color: var(--link); font-weight: 600; }
.post h2, .post h3 { font-size: 20px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.post h2 a, .post h3 a { color: var(--strong); text-decoration: none; }
.post h2 a::after, .post h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-lg); }
.post p:last-child { color: var(--muted); font-size: 15px; }
#blog .post { background: var(--bg); }
@media (max-width: 1000px) { .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .posts { grid-template-columns: minmax(0, 1fr); } .post { padding: 20px; } }
/* Help, blog and legal pages: the text takes whatever the shown side columns leave */
.doc-layout { display: flex; gap: 56px; align-items: flex-start; }
.doc-layout > .doc { flex: 1; min-width: 0; }
.doc-layout > aside { flex: 0 0 250px; position: sticky; top: 100px; max-height: calc(100vh - 120px); overflow-y: auto; }
.doc-layout > aside:has(.side) { flex-basis: 240px; }
.doc-layout--legal, .doc-layout--post { width: 80%; margin-inline: auto; }
.side, .toc { display: grid; gap: 4px; font-size: 14px; }
.side h2, .toc h2 { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--quiet); margin: 14px 0 6px; }
.side h2:first-child, .toc h2:first-child { margin-top: 0; }
.side a, .toc a { display: block; padding: 6px 10px; border-radius: 8px; color: var(--muted); text-decoration: none; }
.side a:hover, .toc a:hover { color: var(--link); background: var(--panel); }
.side a[aria-current="page"] { color: var(--strong); font-weight: 650; background: var(--panel); box-shadow: inset 2px 0 0 var(--btn-bg); border-radius: 0; }
.toc a { border-left: 2px solid var(--line); border-radius: 0; padding-left: 12px; }
.toc a.is-current { color: var(--strong); border-left-color: var(--btn-bg); }
/* An article image at full size over the page; the article's text is in article.css */
.zoom { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 24px; border: 0; background: rgba(14, 21, 34, .92); cursor: zoom-out; }
.zoom[open] { display: grid; place-items: center; }
.zoom::backdrop { background: transparent; }
.zoom img { max-width: 100%; max-height: calc(100vh - 48px); width: auto; height: auto; border-radius: var(--r); }
.zoom__close { position: fixed; top: 16px; right: 16px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .12); color: #ffffff; cursor: pointer; }
.zoom__close:hover { background: rgba(255, 255, 255, .24); }
.zoom__close .icon { width: 22px; height: 22px; }
.related { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.related h2 { margin-top: 0; font-size: 20px; }
.related ul { list-style: none; padding: 0; }
.related a { display: block; text-decoration: none; font-weight: 600; }
@media (max-width: 1100px) { .doc-layout:has(.side) > aside:has(.toc) { display: none; } }
@media (max-width: 860px) { .doc-layout { flex-direction: column; align-items: stretch; gap: 32px; } .doc-layout--legal, .doc-layout--post { width: auto; } .doc-layout > aside { flex: none; position: static; max-height: none; order: 2; } .doc-layout--legal > aside { order: -1; } .side { padding-top: 24px; border-top: 1px solid var(--line); } }

/* Contact */
.details { display: grid; grid-template-columns: max-content 1fr; gap: 10px 32px; font-size: 16px; }
.details dt { color: var(--quiet); }
.details dd { margin: 0; color: var(--fg); font-weight: 600; }
nav + .doc-layout { margin-top: 32px; }
.cards--2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 760px) { .cards--2 { grid-template-columns: 1fr; } }
.hero .crumbs { margin-bottom: 4px; }

/* Feature animations made of rows (lists, bars, switches) */
.art .on-dark { fill: #ffffff; }
.art.clip { overflow: hidden; }
.mini, .shelves { list-style: none; margin: 0; padding: 0; color: #1b263b; font-size: 14px; }
.mini { display: grid; grid-auto-rows: minmax(0, 1fr); gap: 8px; }
.mini > li { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 0 14px; border-radius: 10px; background: #ffffff; }
.mini b { font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini .muted { color: #59647c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini .end { margin-left: auto; }
.mini > .hd { background: none; padding: 0 4px; font-size: 12px; font-weight: 700; color: #59647c; text-transform: uppercase; letter-spacing: .04em; }
.mini > .total { background: #1b263b; color: #ffffff; }
.mini > .total .end { font-weight: 800; }
/* Each item's place in its animation, which staggers the items */
:is(.mini, .log, .shelves, .tiles6, .hub__lines, .deck) > :nth-child(1) { --i: 0; }
:is(.mini, .log, .shelves, .tiles6, .hub__lines, .deck) > :nth-child(2) { --i: 1; }
:is(.mini, .log, .shelves, .tiles6, .hub__lines, .deck) > :nth-child(3) { --i: 2; }
:is(.mini, .log, .shelves, .tiles6, .hub__lines, .deck) > :nth-child(4) { --i: 3; }
:is(.mini, .log, .shelves, .tiles6, .hub__lines, .deck) > :nth-child(5) { --i: 4; }
:is(.mini, .log, .shelves, .tiles6, .hub__lines, .deck) > :nth-child(6) { --i: 5; }
.mini > .hd ~ :nth-child(2) { --i: 0; }
.mini > .hd ~ :nth-child(3) { --i: 1; }
.mini > .hd ~ :nth-child(4) { --i: 2; }
.pill { flex: none; font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 99px; background: #e3e8ef; color: #59647c; white-space: nowrap; }
.pill--ok { background: #d4f0de; color: #1a7038; }
.pill--wait { background: #fdf0e3; color: #9a4a0b; }
.pill--bad { background: #fdecec; color: #b42318; }
.bar { flex: 1; min-width: 36px; height: 8px; border-radius: 99px; background: #e3e8ef; overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: inherit; background: #2fae57; transform-origin: left; animation: barfill 8s calc(var(--i) * 1s) infinite both; }
.bar--part i { --to: .7; }
@keyframes barfill { 0% { transform: scaleX(0); } 14%, 86% { transform: scaleX(var(--to, 1)); } 94%, 100% { transform: scaleX(0); } }
.tick-in { animation: tickin 8s calc(var(--i) * 1s + .9s) infinite both; }
@keyframes tickin { 0% { opacity: 0; transform: scale(.8); } 5%, 78% { opacity: 1; transform: none; } 86%, 100% { opacity: 0; } }
.a-in { animation: logrow 8s calc(var(--i) * .9s) infinite both; }
.cycle > li { animation: glowrow 10s calc(var(--i) * 2s) infinite; }
@keyframes glowrow { 0%, 18% { box-shadow: inset 0 0 0 2px #2fae57; background: #f0faf3; } 20%, 100% { box-shadow: none; background: #ffffff; } }
.avatar { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 999px; background: #1b263b; color: #ffffff; font-size: 12px; font-weight: 700; }
.shelves { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 8px; }
.shelves li { display: grid; place-content: center; justify-items: center; gap: 8px; border-radius: 10px; background: #ffffff; border: 1px solid #dde2ea; }
.roles .cols { margin-left: auto; display: grid; grid-template-columns: repeat(3, 58px); justify-items: center; }
.sw { width: 34px; height: 20px; border-radius: 99px; background: #cfd6e0; position: relative; }
.sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #ffffff; }
.sw.on { background: #2fae57; }
.sw.on::after { left: 16px; }
.sw.flip { animation: swbg 4s infinite; }
.sw.flip::after { animation: swknob 4s infinite; }
@keyframes swbg { 0%, 45% { background: #cfd6e0; } 50%, 95% { background: #2fae57; } }
@keyframes swknob { 0%, 45% { left: 2px; } 50%, 95% { left: 16px; } }
.announce, .awaiting { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 14px; }
.announce__card, .awaiting__item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 14px 16px; border-radius: 10px; background: #ffffff; color: #1b263b; font-size: 14px; }
.awaiting__item .pill { animation: pillpulse 2s ease-in-out infinite; }
@keyframes pillpulse { 50% { box-shadow: 0 0 0 4px rgba(154, 74, 11, .18); } }
@media (max-width: 480px) { .mini { font-size: 13px; } .mini > li { padding: 0 10px; gap: 8px; } .roles .cols { grid-template-columns: repeat(3, 54px); } }

/* Help pages sit closer to the header */
section.help-hero, section.tight { padding-block: clamp(36px, 4vw, 56px); }
section.tight-top { padding-top: 32px; }

/* Feature table: group rows */
.table--features td { width: 190px; text-align: center; }
.table--features thead th + th { text-align: center; }
.table .grp th { padding-top: 22px; font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--link); background: var(--bg); }
.table--features { min-width: 0; }
@media (max-width: 640px) { .table--features td { width: 64px; } .table--features thead th + th { font-size: 10px; letter-spacing: 0; } .table th, .table td { padding: 12px 10px; } .table--features tbody th { font-size: 14px; } }

/* The logo keeps its colour on hover */
.logo:hover { color: var(--strong); }

/* Heroes without a photo: the text takes the full width */
.hero--solo .lead { max-width: none; }

/* Button links carry an arrow */
.btn .icon { width: 18px; height: 18px; transition: transform .25s var(--ease); }
.btn:hover .icon { transform: translateX(3px); }
.cat:hover { border-top-color: var(--btn-bg); }
/* An article name too long for its line ends with an ellipsis; the link's title shows it whole */
.cat, .cat ul, .hits, .related, .related ul, .post { grid-template-columns: minmax(0, 1fr); }
.cat ul a span, .hits a span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side a, .related a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat ul a::before { content: ""; flex: none; width: 16px; height: 16px; margin-top: 4px; background: var(--link); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M213.66 82.34l-56-56A8 8 0 0 0 152 24H56a16 16 0 0 0-16 16v176a16 16 0 0 0 16 16h144a16 16 0 0 0 16-16V88a8 8 0 0 0-2.34-5.66ZM160 51.31 188.69 80H160ZM200 216H56V40h88v48a8 8 0 0 0 8 8h48Z'/%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 256 256'%3E%3Cpath d='M213.66 82.34l-56-56A8 8 0 0 0 152 24H56a16 16 0 0 0-16 16v176a16 16 0 0 0 16 16h144a16 16 0 0 0 16-16V88a8 8 0 0 0-2.34-5.66ZM160 51.31 188.69 80H160ZM200 216H56V40h88v48a8 8 0 0 0 8 8h48Z'/%3E%3C/svg%3E") center / contain no-repeat; }

/* Contact: details on the left, the form on the right */
.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 40px 72px; align-items: start; }
.contact__info { display: grid; gap: 32px; }
.contact__info .details { padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.contact__info .details a { text-decoration: none; }
.contact__help { display: flex; gap: 14px; align-items: flex-start; padding: 20px 22px; border-radius: 0 var(--r-lg) var(--r-lg) 0; background: #e6f4eb; color: #164f2a; font-size: 15px; }
.contact__help > .icon { width: 24px; height: 24px; margin-top: 1px; color: var(--btn-bg); }
.contact__help b { display: block; margin-bottom: 2px; }
.contact__help .more { margin-top: 8px; }
.form { padding: 36px; display: grid; gap: 20px; background: #ffffff; }
.form h2 { font-size: 24px; font-weight: 600; color: var(--strong); }
.field { display: grid; }
.form label { font-size: 14px; font-weight: 600; color: var(--strong); }
.field__label { display: grid; margin-bottom: 8px; }
.field__label small { font-size: 12px; font-weight: 500; color: var(--quiet); }
.form input:not([type="checkbox"]), .form select, .form textarea { width: 100%; min-height: 46px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: #ffffff; color: var(--fg); font: 400 16px/1.5 var(--font); }
.form textarea { resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--btn-bg); box-shadow: 0 0 0 3px rgba(31, 138, 69, .15); }
.form__check { display: flex; gap: 10px; align-items: flex-start; }
.form__check input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--btn-bg); flex: none; }
.form__check label { font-weight: 400; color: var(--muted); }
.form__note { color: var(--muted); }
.form__done { display: flex; gap: 10px; align-items: center; padding: 14px 16px; border-radius: 0 10px 10px 0; background: #e6f4eb; color: #164f2a; font-weight: 600; }
.form__done[hidden] { display: none; }
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; } .contact .form { order: -1; } }
@media (max-width: 480px) { .form { padding: 24px; } }
.contact__info .details, .about .details { grid-template-columns: 24px 1fr; gap: 16px 14px; align-items: start; }
.contact__info .details dt, .about .details dt { color: var(--btn-bg); padding-top: 1px; }
.contact__info .details dt .icon, .about .details dt .icon { width: 22px; height: 22px; }
.contact__info .details dd small, .about .details dd small { display: block; margin-top: 2px; font-size: 14px; font-weight: 500; color: var(--muted); }

/* Contact hero: a short exchange plays on the right */
.chat { flex: 1 1 340px; max-width: 460px; margin-left: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: center; min-height: 220px; }
.chat > * { grid-column: 1; width: max-content; max-width: 85%; }
.chat__msg { max-width: 85%; padding: 14px 18px; border-radius: 10px; font-size: 15px; line-height: 1.5; box-shadow: 0 8px 20px -12px rgba(4, 8, 16, .3); }
.chat__msg b { display: block; margin-bottom: 2px; font-size: 13px; }
.chat__msg--in { grid-row: 1; justify-self: start; background: #f4f6f9; color: #1b263b; border-bottom-left-radius: 6px; animation: chatin 5s both; }
.chat__msg--out { grid-row: 2; justify-self: end; background: var(--btn-bg); color: #ffffff; border-bottom-right-radius: 6px; animation: chatout 5s both; }
.chat__typing { grid-row: 2; justify-self: end; display: flex; gap: 5px; padding: 14px 18px; border-radius: 10px; background: var(--panel); animation: chattype 5s both; }
.chat__typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: dot 1s infinite; }
.chat__typing span:nth-child(2) { animation-delay: .15s; }
.chat__typing span:nth-child(3) { animation-delay: .3s; }
@keyframes chatin { 0%, 6% { opacity: 0; transform: translateY(10px); } 14%, 100% { opacity: 1; transform: none; } }
@keyframes chattype { 0%, 26% { opacity: 0; } 30%, 62% { opacity: 1; } 66%, 100% { opacity: 0; } }
@keyframes chatout { 0%, 64% { opacity: 0; transform: translateY(10px); } 74%, 100% { opacity: 1; transform: none; } }
@keyframes dot { 50% { transform: translateY(-4px); opacity: .5; } }
@media (max-width: 900px) { .chat { margin-left: 0; max-width: none; min-height: 0; } }
@media (prefers-reduced-motion: reduce) { .chat__msg { opacity: 1 !important; } .chat__typing { display: none; } }
.strip .trust { margin-top: 0; justify-content: center; }
.trust--table { justify-content: center; margin-top: 28px; }

/* The light box a hero animation sits in */
.feed { --panel: #ffffff; --bg: #eef2f6; --line: #dde3ec; --fg: #1b263b; --strong: #0e1522; --muted: #4e5a6d; flex: 1 1 360px; max-width: 460px; margin-left: auto; display: grid; gap: 16px; padding: 20px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 8px 20px -12px rgba(4, 8, 16, .3); }
@keyframes feedok { from { opacity: 0; transform: scale(.4); } }
@media (max-width: 900px) { .feed { margin-left: 0; max-width: none; } }

/* Plans hero: three plan cards dealt into a fan, then the default one lifts */
.deck { flex: 1 1 360px; max-width: 460px; margin-left: auto; position: relative; height: 270px; }
.deck__card { --k: calc(var(--i) - 1); position: absolute; left: 50%; top: 36px; width: 140px; margin-left: -70px; transform: translateX(calc(var(--k) * 96px)) rotate(calc(var(--k) * 8deg)); animation: deal .6s calc(.2s + var(--i) * .35s) cubic-bezier(.2, .8, .3, 1.1) both; }
.deck__face { position: relative; display: grid; justify-items: center; align-content: center; gap: 10px; height: 200px; padding: 18px; border-radius: 10px; background: #ffffff; color: #66728a; border: 1px solid #dde3ec; box-shadow: 0 8px 20px -12px rgba(4, 8, 16, .3); }
.deck__face i { width: 70%; height: 8px; border-radius: 999px; background: #e3e8ef; }
.deck__face i:last-of-type { width: 45%; }
.deck__big .icon { width: 64px; height: 64px; margin-bottom: 8px; }
.deck__card--pick { z-index: 1; }
.deck__card--pick .deck__face { transform: translateY(-18px); border: 2px solid var(--btn-bg); color: var(--btn-bg); animation: decklift .4s 1.6s both; }
.deck__card--pick .deck__face i { background: #cfe8d8; }
@keyframes deal { from { opacity: 0; transform: translate(0, 80px) rotate(0); } }
@keyframes decklift { from { transform: none; } }
@media (max-width: 900px) { .deck { margin-left: 0; max-width: none; } }
@media (max-width: 480px) { .deck { height: 250px; } .deck__card { width: 35vw; margin-left: -17.5vw; transform: translateX(calc(var(--k) * 23vw)) rotate(calc(var(--k) * 6deg)); } .deck__face { height: 180px; padding: 12px; } .deck__big .icon { width: 44px; height: 44px; } }

/* Register band at the end of every page but the homepage */
section.try { padding-block: 40px; background: var(--panel-2); border-top: 1px solid #cfe8d8; }
.try .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; }
.try p { font-size: 18px; line-height: 1.5; color: var(--muted); max-width: 40em; }
.try b { display: block; font-size: 22px; color: var(--strong); }
.try.is-waiting .wrap > * { opacity: 0; }
.try.is-in .wrap > * { animation: rise .7s var(--ease) both; }
.try .btn, .closing .btn--primary { box-shadow: 0 10px 24px -12px rgba(30, 133, 66, .7); animation: trypulse 3s ease-out infinite; }
.try.is-in .btn { animation: rise .7s var(--ease) .15s both, trypulse 3s ease-out .85s infinite; }
.try .btn:hover, .closing .btn--primary:hover { animation: none; }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } }
@keyframes trypulse { 0% { box-shadow: 0 10px 24px -12px rgba(30, 133, 66, .7), 0 0 0 0 rgba(30, 133, 66, .45); } 60%, 100% { box-shadow: 0 10px 24px -12px rgba(30, 133, 66, .7), 0 0 0 14px rgba(30, 133, 66, 0); } }

/* Integrations hero: shops and couriers connect, one sale changes the stock everywhere */
.hub { position: relative; height: 250px; --n: 52px; }
.hub__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hub__lines line { stroke: var(--btn-bg); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 400; animation: hubline .5s calc(.3s + var(--i) * .2s) both; }
.hub__node { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: var(--n); height: var(--n); margin: calc(var(--n) / -2) 0 0 calc(var(--n) / -2); display: grid; place-items: center; border-radius: 10px; background: #ffffff; border: 1px solid var(--line); color: var(--fg); animation: feedok .35s calc(.5s + var(--i) * .2s) both; }
.hub__node .icon { width: 26px; height: 26px; }
.hub__node--main { --n: 64px; background: var(--btn-bg); border-color: var(--btn-bg); color: #ffffff; z-index: 1; }
.hub__node--main .icon { width: 32px; height: 32px; }
.hub__count { position: absolute; top: -12px; right: -14px; min-width: 30px; height: 24px; padding: 0 7px; border-radius: 999px; background: var(--strong); color: #ffffff; font-size: 13px; display: grid; place-items: center; font-variant-numeric: tabular-nums; animation: hubflash .6s 3s both; }
.hub__count > * { grid-area: 1 / 1; text-decoration: none; }
.hub__count s { opacity: 0; animation: syncout .3s 3s both; }
.hub__count span { animation: syncin .3s 3s both; }
.hub__done { position: absolute; top: -10px; right: -10px; width: 24px !important; height: 24px !important; color: var(--btn-bg); background: #ffffff; border-radius: 50%; animation: feedok .3s 4.6s both; }
.hub__tok { position: absolute; left: calc(var(--x2) * 1%); top: calc(var(--y2) * 1%); width: 32px; height: 32px; margin: -16px 0 0 -16px; display: grid; place-items: center; border-radius: 50%; background: var(--strong); color: #ffffff; z-index: 2; opacity: 0; animation: hubtok .9s var(--d) ease-in-out both; }
.hub__tok .icon { width: 17px; height: 17px; }
/* Where each node and token sits on the hub, in percent, and when it starts */
.hub__node--main { --x: 50; --y: 50; --i: -1; }
.hub__node:nth-child(3) { --x: 12; --y: 18; --i: 0; }
.hub__node:nth-child(4) { --x: 12; --y: 50; --i: 1; }
.hub__node:nth-child(5) { --x: 12; --y: 82; --i: 2; }
.hub__node:nth-child(6) { --x: 88; --y: 30; --i: 3; }
.hub__node:nth-child(7) { --x: 88; --y: 70; --i: 4; }
.hub__tok:nth-child(8) { --x1: 12; --y1: 18; --x2: 50; --y2: 50; --d: 2.2s; }
.hub__tok:nth-child(9) { --x1: 50; --y1: 50; --x2: 88; --y2: 30; --d: 3.6s; }
@keyframes hubline { from { stroke-dashoffset: 400; } }
@keyframes hubtok { 0% { left: calc(var(--x1) * 1%); top: calc(var(--y1) * 1%); opacity: 0; } 15%, 85% { opacity: 1; } 100% { opacity: 0; } }
@keyframes hubflash { 40% { background: var(--btn-bg); transform: scale(1.25); } }
@keyframes syncout { from { opacity: 1; } }
@keyframes syncin { from { opacity: 0; } }

/* Features hero: six tiles, each showing one job */
.tiles6 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.t6 { position: relative; aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; border-radius: 10px; background: var(--bg); color: var(--fg); animation: feedrow .4s calc(.2s + var(--i) * .3s) both; --t: calc(.5s + var(--i) * .3s); }
.t6 .icon { width: 40%; height: 40%; }
.t6__beam { position: absolute; left: 22%; right: 22%; top: 50%; height: 2px; background: #2fae57; box-shadow: 0 0 8px #2fae57; opacity: 0; animation: t6beam 1s var(--t) ease-in-out both; }
.t6--scan .icon { animation: t6ok .3s calc(var(--t) + 1s) both; }
.t6__bar { position: absolute; left: 20%; right: 20%; bottom: 16%; height: 6px; border-radius: 999px; background: linear-gradient(var(--btn-bg), var(--btn-bg)) left / 70% 100% no-repeat, #d5dce6; animation: feedbar 1s var(--t) both; }
.t6__move { position: absolute; inset: 0; display: grid; place-items: center; }
.t6--back .t6__move { animation: t6back .8s var(--t) ease-out both; }
.t6__arc { position: absolute; top: 12%; right: 12%; width: 26%; height: 26%; color: var(--btn-bg); animation: feedok .3s calc(var(--t) + .7s) both; }
.t6__arc .icon { width: 100%; height: 100%; }
.t6--print .icon { position: relative; z-index: 1; }
.t6__paper { position: absolute; left: 38%; right: 38%; top: 60%; height: 22%; border-radius: 2px; background: #ffffff; border: 1px solid #c5ccd8; animation: t6paper .8s var(--t) ease-out both; }
.t6--go .t6__move { animation: t6go .9s var(--t) cubic-bezier(.3, .7, .3, 1) both; }
.t6__road { position: absolute; left: 14%; right: 14%; bottom: 22%; height: 2px; background: repeating-linear-gradient(90deg, #c5ccd8 0 6px, transparent 6px 11px); }
.t6__bars { display: flex; align-items: flex-end; gap: 6px; width: 46%; height: 46%; }
.t6__bars i { flex: 1; height: var(--h); border-radius: 3px 3px 0 0; background: var(--btn-bg); transform-origin: bottom; animation: t6grow .6s var(--t) both; }
.t6__bars i:nth-child(1) { --h: 40%; } .t6__bars i:nth-child(2) { --h: 65%; animation-delay: calc(var(--t) + .15s); } .t6__bars i:nth-child(3) { --h: 100%; animation-delay: calc(var(--t) + .3s); }
@keyframes t6beam { 0% { top: 25%; opacity: 1; } 50% { top: 75%; } 90% { opacity: 1; } 100% { top: 50%; opacity: 0; } }
@keyframes t6ok { 50% { color: #2fae57; transform: scale(1.12); } }
@keyframes t6back { from { transform: translateX(70%); opacity: 0; } }
@keyframes t6paper { from { transform: translateY(-100%); } }
@keyframes t6go { from { transform: translateX(-90%); opacity: 0; } }
@keyframes t6grow { from { transform: scaleY(0); } }
@media (max-width: 480px) { .hub { --n: 44px; height: 230px; } .hub__node--main { --n: 54px; } .tiles6 { gap: 8px; } }

/* About page */
.about__text { display: grid; gap: 16px; max-width: 44em; font-size: 18px; line-height: 1.65; color: var(--muted); }
.about .details { margin-bottom: 40px; }
.about .details a { text-decoration: none; }

/* Self-hosted Open Sans, one file per script */
/* Arial sized like Open Sans, so text keeps its place while the font loads */
@font-face { font-family: "Open Sans Fallback"; src: local("Arial"); size-adjust: 105.94%; ascent-override: 101.18%; descent-override: 27.73%; line-gap-override: 0%; }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 300 800; font-stretch: 75% 100%; font-display: swap; src: url("fonts/open-sans-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 300 800; font-stretch: 75% 100%; font-display: swap; src: url("fonts/open-sans-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Open Sans"; font-style: italic; font-weight: 300 800; font-stretch: 75% 100%; font-display: swap; src: url("fonts/open-sans-cyrillic-italic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Open Sans"; font-style: italic; font-weight: 300 800; font-stretch: 75% 100%; font-display: swap; src: url("fonts/open-sans-latin-italic.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* On narrow phones a long button label wraps instead of widening the page */
@media (max-width: 400px) { .btn { white-space: normal; text-align: center; line-height: 1.25; padding-block: 10px; } .site-header .btn, .site-header .signin { white-space: nowrap; } }

/* 404: search in the hero, the empty shelf location, links to the main pages */
.nf .nf__search { max-width: 560px; }
.nf-art { width: 100%; height: auto; }
.nf-art .nf-code { font: 800 26px var(--font); fill: #c5ccd8; letter-spacing: .04em; }
.nf-art .nf-q { font: 800 16px var(--font); fill: #e5484d; }
.nf-miss { animation: nfmiss 6s linear infinite; }
.nf-beam { animation: nfbeam 6s linear infinite; }
.nf-ask { animation: nfask 6s linear infinite; }
@keyframes nfmiss { 0%, 42% { opacity: 0; } 46%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes nfbeam { 0%, 36% { opacity: 0; } 40%, 88% { opacity: .28; } 92%, 100% { opacity: 0; } }
@keyframes nfask { 0%, 50% { opacity: 0; } 54%, 90% { opacity: 1; } 100% { opacity: 0; } }
.nf__links { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.nf__links a { height: 100%; display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; align-content: start; padding: 20px 22px; border-radius: var(--r-lg); background: var(--panel); border: 1px solid var(--line); color: var(--fg); text-decoration: none; transition: box-shadow .3s, border-color .25s; }
.nf__links a:hover { box-shadow: var(--shadow); border-color: var(--btn-bg); }
.nf__links .card__ic { grid-row: span 2; margin: 0; }
.nf__links b { color: var(--strong); font-size: 17px; }
.nf__links span:last-child { color: var(--muted); font-size: 15px; }

/* Other errors (400, 403, 500): the hero fills the screen under the logo */
.hero.error { min-height: calc(100vh - 72px); display: flex; align-items: center; }
.hero.error > .wrap { width: 100%; }
.error__code { font-size: 14px; color: var(--quiet); }

/* Skip link, shown only on keyboard focus */
.skip { position: absolute; left: 16px; top: -60px; z-index: 50; padding: 10px 16px; border-radius: 8px; background: var(--btn-bg); color: #ffffff; font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }

/* Alerts as in the app: above their field with the field red, a global one boxed; then the hidden field bots fill */
.field-alert { font-size: 13px; font-weight: 600; line-height: 1.4; }
.field-alert:empty { display: none; }
.field > .field-alert { margin-bottom: 4px; }
.form > .field-alert:not(.field-alert--global) { margin-bottom: -16px; }
.field-alert--error { color: #b42318; }
.field-alert--success { color: #1d7f3e; }
.field-alert--global { padding: 14px 16px; border-radius: 10px; border: 1px solid transparent; }
.field-alert--global.field-alert--error { background: #fdecec; border-color: rgba(217, 45, 32, .25); color: #8a1c1c; }
.field-alert--global.field-alert--success { background: #e6f4eb; border-color: rgba(29, 127, 62, .25); color: #164f2a; }
.form .field-alert--error + input, .form .field-alert--error + textarea { border-color: #d92d20; background: #fffafa; }
.form .field-alert--error + input:focus, .form .field-alert--error + textarea:focus { box-shadow: 0 0 0 3px rgba(217, 45, 32, .12); }
.form .field-alert--error + .form__check input { outline: 2px solid #d92d20; outline-offset: 2px; }
.form__captcha { min-height: 65px; }
.form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Full search results on the help search page */
.hits--page { max-width: 760px; margin-top: 16px; }
/* Search with no results: a magnifier sweeping empty shelves, then the help topics */
.no-hits { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 48px; align-items: center; max-width: 960px; }
.no-hits__text { display: grid; gap: 14px; justify-items: start; }
.no-hits__text h2 { font-size: clamp(24px, 2.4vw, 30px); font-weight: 600; line-height: 1.25; color: var(--strong); }
.no-hits__text p { color: var(--muted); font-size: 17px; }
.no-hits__text h3 { margin-top: 10px; font-size: 15px; font-weight: 600; color: var(--strong); }
.no-hits__topics { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.no-hits__topics a { display: inline-block; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--fg); font-size: 15px; font-weight: 600; text-decoration: none; }
.no-hits__topics a:hover { border-color: var(--btn-bg); color: var(--link); }
.no-hits__q { font: 800 16px var(--font); fill: #e5484d; }
.no-hits__lens { animation: nolens 5s ease-in-out infinite; }
.no-hits__ask { animation: noask 5s linear infinite; }
@keyframes nolens { 0%, 8% { transform: translate(0, 0); } 30% { transform: translate(70px, 6px); } 52%, 62% { transform: translate(140px, 0); } 92%, 100% { transform: translate(0, 0); } }
@keyframes noask { 0%, 56% { opacity: 0; } 62%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }
@media (max-width: 640px) { .no-hits { grid-template-columns: 1fr; gap: 24px; } .no-hits__art { max-width: 220px; } }
.hits--page a { padding: 14px 16px; border-bottom: 1px solid var(--rule); border-radius: 0; }

/* Cookie banner at the bottom, never over the content's first view */
.consent { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 40; max-width: 460px; display: grid; gap: 16px; padding: 24px; border-radius: var(--r-lg); background: var(--panel); color: var(--muted); border: 1px solid var(--line); box-shadow: 0 18px 40px -18px rgba(14, 21, 34, .35); font-size: 15px; line-height: 1.55; }
.consent[hidden], .consent__choices[hidden] { display: none; }
.consent a { font-weight: 600; }
.consent__choices { display: grid; gap: 10px; padding-top: 16px; border-top: 1px solid var(--rule); }
.consent__choices .form__check { align-items: center; color: var(--strong); font-weight: 600; cursor: pointer; }
.consent__choices .form__check input { margin-top: 0; }
.consent__choices .btn { justify-self: start; }
.consent__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.consent__actions .btn { flex: 1 1 auto; }
@media (min-width: 640px) { .consent { right: auto; left: 24px; bottom: 24px; } }