/* Foodidu Business (/business/): laid out like a software company's site, in Foodidu's colours (sun yellow, brown ink, cream,
   leaf green) with Didu. Loaded after site.css on <body class="biz">. Headings use Readex Pro bold; Lalezar only on the table cards. */
.biz {
  --bz-bg: #FFF9EB; --bz-ink: #3A280D; --bz-ink-2: #6B522C; --bz-ink-3: #8A7350;
  --bz-pri: #543A14; --bz-pri-2: #3A280D; --bz-sun: #FFD15C; --bz-sun-2: #FFC533; --bz-sun-soft: #FFF1CC; --bz-sun-3: #FFE4A1;
  --bz-leaf: #4A7A1E; --bz-leaf-2: #7EB143; --bz-leaf-soft: #EAF3DC; --bz-peach: #FFE9D6;
  --bz-line: #EFDFBA; --bz-line-2: #E4CF9E;
  --cream: var(--bz-bg); --paper: #fff; --ink: var(--bz-pri); --ink-2: var(--bz-ink-2); --line: var(--bz-line); --line-2: var(--bz-line-2);
  --font-display: var(--font-body);
  background: var(--bz-bg); color: var(--bz-ink);
}
.biz h1, .biz h2, .biz h3 { font-family: var(--font-body); font-weight: 700; }
html[lang="en"] .biz h1, html[lang="en"] .biz h2 { letter-spacing: -.02em; }
.biz .btn-ink, .biz .btn-line { border-radius: 12px; box-shadow: none; }

/* buttons */
.bz-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 48px; padding: .7em 1.3em;
  border-radius: 12px; border: 1.5px solid transparent; font-weight: 700; font-size: 1rem; line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .18s, border-color .18s, transform .18s var(--ease), box-shadow .18s;
}
.bz-btn:active { transform: translateY(1px); }
.bz-btn .icon { width: 18px; height: 18px; }
.bz-btn[disabled] { opacity: .45; cursor: not-allowed; }
.bz-pri { background: var(--bz-pri); color: var(--bz-sun); box-shadow: 0 10px 22px -12px rgba(58, 40, 13, .8); }
.bz-pri:hover { background: var(--bz-pri-2); }
.bz-ghost { background: #fff; color: var(--bz-ink); border-color: var(--bz-line-2); }
.bz-ghost:hover { border-color: var(--bz-pri); }
.bz-sunbtn { background: var(--bz-sun); color: var(--bz-pri-2); }
.bz-sunbtn:hover { background: var(--bz-sun-2); }

/* header */
.biz .site-header::before, .biz .site-header.scrolled::before { background: rgba(255, 249, 235, .92); }
.biz .site-header { border-bottom-color: var(--bz-line); }
.bz-logo { display: inline-flex; align-items: center; gap: 8px; margin-inline-end: auto; flex: none; text-decoration: none; }
.bz-logo img { height: 42px; width: auto; }
.bz-logo span { padding: 4px 9px; border-radius: 8px; background: var(--bz-pri); color: var(--bz-sun); font-weight: 700; font-size: .78rem; line-height: 1.2; }
.biz .nav > a { color: var(--bz-ink-2); font-weight: 500; }
.biz .nav > a:hover { background: rgba(84, 58, 20, .07); color: var(--bz-ink); }
.biz .nav > a[aria-current="page"] { background: var(--bz-sun-soft); color: var(--bz-pri-2); }
.biz .lang { border: 1.5px solid var(--bz-line-2); min-height: 42px; }
.biz .lang:hover { background: var(--bz-pri); color: var(--bz-sun); border-color: var(--bz-pri); }
.biz .menu-btn { border: 1.5px solid var(--bz-line-2); border-radius: 12px; }
.biz .menu-btn[aria-expanded="true"] { background: var(--bz-pri); color: var(--bz-sun); }
.bz-head-cta { min-height: 42px; padding-block: .55em; }
@media (min-width: 1061px) and (max-width: 1260px) { .biz .nav > a { padding-inline: 9px; font-size: .92rem; } }
@media (max-width: 1060px) {
  .biz .nav > a, .biz .nav > a:hover { background: #fff; border: 1.5px solid var(--bz-line); border-radius: 14px; color: var(--bz-ink); }
  .biz .nav > a[aria-current="page"] { border-color: var(--bz-pri); }
  .biz .nav > a:nth-child(n) .nav-ic { background: var(--bz-sun-soft); color: var(--bz-pri); }
  .biz .nav-extra .bz-btn { width: 100%; }
}
/* the header shows Services / Free QR code / Plans on wide screens; the phone menu lists every service */
@media (min-width: 1061px) { .biz .nav .nav-svc { display: none; } }
@media (max-width: 1060px) { .biz .nav .nav-desk { display: none; } }
@media (max-width: 600px) { .bz-head-cta { display: none; } }
@media (max-width: 440px) { .biz .lang .lang-long { display: none; } .bz-logo img { height: 36px; } }

/* hero */
.bz-hero { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(28px, 5vw, 56px) clamp(48px, 7vw, 88px); }
.bz-hero::before {   /* faint grid + a sun glow */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(620px 420px at var(--glow-x, 82%) 35%, rgba(255, 209, 92, .45), transparent 70%),
    linear-gradient(var(--bz-line) 1px, transparent 1px) 0 0 / 44px 44px, linear-gradient(90deg, var(--bz-line) 1px, transparent 1px) 0 0 / 44px 44px;
  -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent); mask-image: linear-gradient(to bottom, #000 45%, transparent);
}
[dir="rtl"] .bz-hero::before { --glow-x: 18%; }
.bz-hero-in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
.bz-hero .crumbs { color: var(--bz-ink-3); }
.bz-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border: 1px solid var(--bz-line-2); border-radius: 999px; background: #fff; font-size: .88rem; font-weight: 600; color: var(--bz-ink-2); }
.bz-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bz-leaf-2); box-shadow: 0 0 0 4px rgba(126, 177, 67, .22); }
.bz-hero h1 { font-size: clamp(2.1rem, 4.4vw, 3.5rem); line-height: 1.12; margin-top: 18px; color: var(--bz-pri-2); }
[dir="rtl"] .bz-hero h1 { line-height: 1.35; }
.bz-lede { margin-top: 16px; font-size: 1.12rem; color: var(--bz-ink-2); max-width: 34em; }
.bz-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.bz-ticks { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 22px; }
.bz-ticks li { display: inline-flex; align-items: center; gap: 6px; font-size: .93rem; color: var(--bz-ink-2); }
.bz-ticks .icon, .bz-list .icon { color: var(--bz-leaf); }
.bz-ticks .icon { width: 18px; height: 18px; }
.bz-visual { position: relative; display: grid; place-items: center; }
.bz-didu { position: absolute; z-index: 4; pointer-events: none; filter: drop-shadow(0 10px 14px rgba(58, 40, 13, .25)); }
[dir="ltr"] .bz-didu.at-end, [dir="rtl"] .bz-didu.at-start, [dir="rtl"] .bz-toolband img { transform: scaleX(-1); }   /* Didu points to the right in the file */

/* the examples together in the landing hero */
.bz-stage { position: relative; width: 100%; max-width: 520px; min-height: 540px; display: grid; place-items: center; }
.bz-stage::before { content: ""; position: absolute; inset: 8% 6%; border-radius: 50%; background: radial-gradient(closest-side, var(--bz-sun-3), transparent); z-index: -1; }
.bz-stage .mock-phone { width: 270px; position: relative; z-index: 2; margin-inline-end: 80px; }
.bz-stage .mock-card { position: absolute; z-index: 3; width: 290px; bottom: 34px; inset-inline-start: 0; transform: rotate(-6deg); }
[dir="rtl"] .bz-stage .mock-card { transform: rotate(6deg); }
.bz-stage .mock-stand { position: absolute; z-index: 1; width: 170px; top: 26px; inset-inline-end: 0; transform: rotate(5deg); }
[dir="rtl"] .bz-stage .mock-stand { transform: rotate(-5deg); }
.bz-stage .bz-didu { width: 130px; bottom: -8px; inset-inline-end: 10px; }
/* the landing hero: the 30 s services explainer (static/js/biz-anim.js) */
.bz-anim { position: relative; width: 100%; max-width: 560px; }
.bz-anim canvas { display: block; width: 100%; height: auto; aspect-ratio: 1; }
.anim-btn { position: absolute; bottom: 6%; inset-inline-start: 2%; width: 44px; height: 44px; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--bz-pri); color: var(--bz-sun); box-shadow: 0 8px 18px -8px rgba(58, 40, 13, .7); opacity: .85; }
.anim-btn:hover, .anim-btn:focus-visible { opacity: 1; }
.anim-btn .icon { width: 20px; height: 20px; }
.anim-btn .i-pause, .anim-btn[aria-pressed="true"] .i-play { display: none; }
.anim-btn[aria-pressed="true"] .i-pause { display: block; }
/* a service page: one example, or the phone with the table stand */
.bz-duo { position: relative; width: 100%; max-width: 480px; display: grid; place-items: center; }
.bz-duo.n2 { min-height: 520px; }
.bz-duo.n2 .mock-phone { width: 270px; margin-inline-end: 70px; }
.bz-duo.n2 .mock-stand { position: absolute; width: 180px; bottom: 30px; inset-inline-end: 0; transform: rotate(5deg); }
[dir="rtl"] .bz-duo.n2 .mock-stand { transform: rotate(-5deg); }
.bz-duo .mock-card { width: min(100%, 380px); transform: rotate(-3deg); }
[dir="rtl"] .bz-duo .mock-card { transform: rotate(3deg); }
.bz-duo .mock-web { width: 100%; }
.bz-duo .bz-didu { width: 120px; bottom: -36px; inset-inline-start: -56px; }
@media (max-width: 900px) { .bz-duo .bz-didu { inset-inline-start: -6px; } }
.bz-duo.n2 .bz-didu { bottom: 0; }
.bz-duo.n-ticket { margin-bottom: 64px; }
.bz-duo.n-ticket .bz-didu { width: 110px; bottom: -84px; inset-inline-start: auto; inset-inline-end: -10px; }
@media (max-width: 900px) { .bz-duo.n-ticket .bz-didu { width: 96px; bottom: -76px; inset-inline-start: auto; inset-inline-end: 0; } }
.bz-ic-xl { width: 140px; height: 140px; border-radius: 32px; display: grid; place-items: center; background: var(--bz-sun-soft); color: var(--bz-pri); }
.bz-ic-xl .icon { width: 64px; height: 64px; }

/* ---------- example pictures (HTML mockups) ---------- */
.mock { margin: 0; font-size: 12px; line-height: 1.4; color: var(--bz-ink); }
.mock b { font-weight: 700; }
.m-logo { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--bz-sun); color: var(--bz-pri); }
.m-logo .icon { width: 18px; height: 18px; }
.m-th { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 10px; }
.m-th .icon { width: 22px; height: 22px; }
.m-burger { background: var(--bz-peach); color: #B4501C; } .m-pizza { background: var(--bz-sun-soft); color: #9A6A00; }
.m-drink { background: var(--bz-leaf-soft); color: var(--bz-leaf); } .m-cake { background: #FBE4EE; color: #BE185D; }
.m-btn { display: inline-block; background: var(--bz-pri); color: var(--bz-sun); border-radius: 9px; padding: 7px 13px; font-weight: 700; font-size: 12px; white-space: nowrap; }
/* phone with a QR menu */
.m-phone { border-radius: 40px; padding: 10px; background: var(--bz-pri-2); box-shadow: 0 34px 60px -26px rgba(58, 40, 13, .6), inset 0 0 0 1.5px #5C4422; }
.m-screen { position: relative; background: #fff; border-radius: 31px; padding: 30px 14px 16px; overflow: hidden; }
.m-screen::before { content: ""; position: absolute; top: 9px; left: 50%; width: 70px; height: 16px; margin-left: -35px; border-radius: 10px; background: var(--bz-pri-2); }
.m-top { display: flex; align-items: center; gap: 10px; }
.m-top b { display: block; font-size: 14px; }
.m-top small { display: flex; align-items: center; gap: 5px; color: var(--bz-leaf); font-size: 11px; font-weight: 600; }
.m-top small i { width: 6px; height: 6px; border-radius: 50%; background: var(--bz-leaf-2); }
.m-offer { display: flex; align-items: center; gap: 6px; margin: 14px 0 12px; padding: 9px 10px; border-radius: 12px; background: var(--bz-sun-soft); color: var(--bz-pri); font-weight: 600; }
.m-offer .icon { width: 16px; height: 16px; }
.m-chips { display: flex; gap: 6px; }
.m-chips span { padding: 5px 10px; border-radius: 999px; background: #F6EEDC; font-size: 11px; white-space: nowrap; }
.m-chips .on { background: var(--bz-pri); color: var(--bz-sun); }
.m-items { list-style: none; display: grid; gap: 8px; margin-top: 12px; }
.m-items li { display: flex; align-items: center; gap: 10px; padding: 8px; border: 1px solid var(--bz-line); border-radius: 14px; }
.m-items div { flex: 1; min-width: 0; }
.m-items b { display: block; font-size: 12.5px; }
.m-items small { display: block; color: var(--bz-ink-3); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-items em { font-style: normal; font-weight: 700; white-space: nowrap; }
/* loyalty card */
.m-card { position: relative; padding: 18px 18px 16px; border-radius: 22px; color: #FFF6E0; background: linear-gradient(135deg, #6B4A1C, #3A280D); box-shadow: 0 26px 50px -22px rgba(58, 40, 13, .7); }
.m-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(180px 120px at 90% 0%, rgba(255, 209, 92, .25), transparent 70%); pointer-events: none; }
.m-card-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.m-card-top span { font-size: 11px; opacity: .8; }
.m-card-top b { font-size: 15px; color: var(--bz-sun); }
.m-stamps { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 16px 0 14px; }
.m-stamps li { aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; border: 1.5px dashed rgba(255, 241, 204, .5); }
.m-stamps .on { background: var(--bz-sun); color: var(--bz-pri-2); border-color: transparent; }
.m-stamps .gift { background: var(--bz-leaf-2); color: #fff; border: 0; }
.m-stamps .icon { width: 55%; height: 55%; }
.m-card-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 11.5px; }
.m-card-foot span { opacity: .9; }
.m-card-foot b { font-size: 13px; white-space: nowrap; color: var(--bz-sun); }
.m-chip { position: absolute; z-index: 1; top: -12px; inset-inline-end: 16px; background: var(--bz-leaf-2); color: #fff; font-weight: 700; font-size: 12px; padding: 5px 11px; border-radius: 999px; box-shadow: 0 8px 18px -8px rgba(74, 122, 30, .9); }
/* table stand: a sun-yellow tent card, "Menu" up the side, the code in a framed window, Didu peeking at the bottom */
.m-tent { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px; padding: 14px 12px 34px 8px; border-radius: 18px 18px 8px 8px; background: var(--bz-sun); text-align: center; box-shadow: 0 22px 40px -20px rgba(58, 40, 13, .55); }
[dir="rtl"] .m-tent { padding: 14px 8px 34px 12px; }
.m-tent::after { content: ""; position: absolute; bottom: -10px; left: 14%; right: 14%; height: 10px; border-radius: 0 0 8px 8px; background: #D9B04A; }
.m-tent-side { writing-mode: vertical-rl; transform: rotate(180deg); font-family: "Lalezar", var(--font-body); font-size: 34px; line-height: 1; color: var(--bz-pri); align-self: center; }
.m-tent small { display: block; font-size: 10px; font-weight: 700; color: var(--bz-pri); }
.m-qr { position: relative; margin: 8px 4px; padding: 7px; border-radius: 12px; background: #fff; }
.m-qr img { width: 100%; border-radius: 4px; }
.m-qr i { position: absolute; width: 16px; height: 16px; border: 3px solid var(--bz-pri); }
.m-qr i:nth-of-type(1) { top: -5px; left: -5px; border-right: 0; border-bottom: 0; border-radius: 8px 0 0 0; }
.m-qr i:nth-of-type(2) { top: -5px; right: -5px; border-left: 0; border-bottom: 0; border-radius: 0 8px 0 0; }
.m-qr i:nth-of-type(3) { bottom: -5px; left: -5px; border-right: 0; border-top: 0; border-radius: 0 0 0 8px; }
.m-qr i:nth-of-type(4) { bottom: -5px; right: -5px; border-left: 0; border-top: 0; border-radius: 0 0 8px 0; }
.m-tent b { display: block; font-size: 11px; color: var(--bz-pri-2); }
.m-tent-name { display: block; margin-top: 2px; font-size: 10px; font-weight: 700; color: var(--bz-ink-2); }
.m-tent-didu { position: absolute; width: 38%; max-width: 90px; bottom: -22px; inset-inline-end: -22px; filter: drop-shadow(0 6px 8px rgba(58, 40, 13, .25)); }
/* ordering website */
.m-browser { border-radius: 16px; overflow: hidden; background: #fff; border: 1px solid var(--bz-line); box-shadow: 0 26px 50px -26px rgba(58, 40, 13, .5); }
.m-bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; background: #F6EEDC; border-bottom: 1px solid var(--bz-line); }
.m-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--bz-line-2); }
.m-bar span { flex: 1; margin-inline-start: 8px; background: #fff; border-radius: 8px; padding: 4px 10px; font-size: 11px; color: var(--bz-ink-3); direction: ltr; text-align: start; }
.m-page { padding: 14px; }
.m-hero { display: grid; gap: 10px; justify-items: start; padding: 16px; border-radius: 14px; background: linear-gradient(135deg, var(--bz-sun-soft), var(--bz-sun-3)); }
.m-hero b { font-size: 16px; line-height: 1.3; color: var(--bz-pri-2); }
.m-toggle { display: inline-flex; background: #fff; border-radius: 999px; padding: 3px; }
.m-toggle span { padding: 4px 12px; border-radius: 999px; font-size: 11px; }
.m-toggle .on { background: var(--bz-pri); color: var(--bz-sun); }
.m-tiles { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.m-tiles li { position: relative; border: 1px solid var(--bz-line); border-radius: 12px; padding: 8px; }
.m-tiles .m-th { width: 100%; height: 56px; }
.m-tiles b { display: block; margin-top: 6px; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-tiles em { font-style: normal; font-size: 11px; font-weight: 700; color: var(--bz-leaf); }
.m-tiles i { position: absolute; bottom: 8px; inset-inline-end: 8px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--bz-pri); color: var(--bz-sun); font-style: normal; font-size: 13px; line-height: 1; }
/* a restaurant on Google Maps (a generic map: no Google artwork) */
.m-maps { border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid var(--bz-line); box-shadow: 0 26px 50px -26px rgba(58, 40, 13, .5); }
.m-map { position: relative; height: 130px; overflow: hidden; background: #EEF3E6; }
.m-map::before { content: ""; position: absolute; top: 14px; left: 8%; width: 74px; height: 50px; border-radius: 14px; background: #D8EBC4; }
.m-map::after { content: ""; position: absolute; bottom: 10px; right: 10%; width: 90px; height: 34px; border-radius: 12px; background: #DCEAF6; }
.m-map i { position: absolute; background: #fff; }
.m-map .r1 { left: -10%; right: -10%; top: 58%; height: 14px; transform: rotate(-7deg); }
.m-map .r2 { top: -10%; bottom: -10%; left: 32%; width: 11px; transform: rotate(14deg); }
.m-map .r3 { top: -10%; bottom: -10%; left: 74%; width: 9px; background: var(--bz-sun-3); }
.m-pin { position: absolute; z-index: 1; left: 50%; top: 26px; margin-left: -22px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--bz-pri); color: var(--bz-sun); box-shadow: 0 0 0 8px rgba(84, 58, 20, .15); }
.m-pin .icon { width: 24px; height: 24px; }
.m-place { padding: 14px 16px 12px; }
.m-place b { display: block; font-size: 15px; }
.m-place > small { display: block; color: var(--bz-ink-3); font-size: 11.5px; }
.m-stars { display: flex; align-items: center; gap: 8px; margin: 2px 0; }
.m-stars span, .m-review span { color: #E8A317; letter-spacing: 1px; font-size: 13px; }
.m-stars small { color: var(--bz-leaf); font-weight: 700; font-size: 11px; }
.m-actions { display: flex; gap: 8px; margin-top: 10px; }
.m-actions span { padding: 5px 11px; border-radius: 999px; border: 1px solid var(--bz-line-2); color: var(--bz-pri); font-weight: 600; font-size: 11px; }
.m-review { display: flex; gap: 10px; margin: 0 16px 16px; padding: 10px 12px; border-radius: 12px; background: var(--bz-sun-soft); }
.m-avatar { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--bz-leaf-2); color: #fff; }
.m-avatar .icon { width: 15px; height: 15px; }
.m-review p { font-size: 11.5px; }
.bz-row-visual .mock-maps { width: min(100%, 380px); }
.bz-duo .mock-maps { width: min(100%, 400px); }

/* the restaurant's code on Foodidu, found from Google */
.m-serp { display: grid; gap: 12px; }
.m-search { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--bz-line); border-radius: 999px; padding: 10px 16px; font-size: 13px; color: var(--bz-ink-2); box-shadow: 0 12px 24px -16px rgba(58, 40, 13, .4); }
.m-search .icon { width: 18px; height: 18px; color: var(--bz-ink-3); }
.m-ticket { display: flex; background: #fff; border: 1px solid var(--bz-line); border-radius: 16px; overflow: hidden; box-shadow: 0 22px 44px -24px rgba(58, 40, 13, .5); }
.m-tk-l { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 14px; }
.m-tk-l small { display: block; font-size: 11px; font-weight: 700; color: var(--bz-leaf); }
.m-tk-l b { display: block; font-size: 14px; }
.m-tk-r { display: grid; gap: 8px; justify-items: center; align-content: center; padding: 14px; border-inline-start: 2px dashed var(--bz-line-2); background: var(--bz-sun-soft); }
.m-tk-r code { font-family: var(--font-body); font-weight: 700; font-size: 12px; padding: 5px 10px; border: 1.5px dashed var(--bz-pri); border-radius: 8px; color: var(--bz-pri); white-space: nowrap; background: #fff; }

/* ---------- sections ---------- */
.bz-sec { padding-block: clamp(56px, 8vw, 96px); }
.bz-alt { background: #fff; border-block: 1px solid var(--bz-line); }
.bz-head { max-width: 42em; margin-bottom: clamp(28px, 4vw, 44px); }
.bz-head h2, .bz-join-copy h2, .bz-about h2 { font-size: clamp(1.75rem, 3.4vw, 2.6rem); line-height: 1.18; color: var(--bz-pri-2); }
[dir="rtl"] .bz-head h2, [dir="rtl"] .bz-join-copy h2, [dir="rtl"] .bz-about h2 { line-height: 1.4; }
.bz-head p { margin-top: 12px; color: var(--bz-ink-2); font-size: 1.05rem; }
.bz-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 10px; color: var(--bz-leaf); font-weight: 700; font-size: .9rem; }
.bz-eyebrow::before { content: ""; width: 18px; height: 3px; border-radius: 2px; background: var(--bz-sun-2); }
.bz-ic { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: var(--bz-sun); color: var(--bz-pri); }
.bz-ic .icon { width: 24px; height: 24px; }
.bz-tag { display: inline-block; margin-bottom: 14px; padding: 4px 11px; border-radius: 999px; background: var(--bz-leaf-soft); color: var(--bz-leaf); font-weight: 700; font-size: .8rem; }
.bz-list { list-style: none; display: grid; gap: 10px; margin-top: 18px; }
.bz-list li { display: flex; align-items: flex-start; gap: 10px; }
.bz-list .icon { width: 20px; height: 20px; margin-top: 3px; }
.bz-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; font-weight: 700; color: var(--bz-pri); text-decoration: underline; text-decoration-color: var(--bz-sun-2); text-decoration-thickness: 3px; text-underline-offset: 5px; }
.bz-link:hover { text-decoration-color: var(--bz-pri); }
.bz-link .icon { width: 18px; height: 18px; }

/* section to section: numbered titles, scalloped edges, sections that rise in */
.bz-head h2, .bz-join-copy h2 { font-size: clamp(2rem, 4.4vw, 3.2rem); }
.bz-head h2::after, .bz-join-copy h2::after { content: ""; display: block; width: 140px; height: 18px; margin-top: 14px; background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 18'><path d='M4 11c9-8 18-8 27 0s18 8 27 0 18-8 27 0 18 8 27 0' fill='none' stroke='%23FFC533' stroke-width='5.5' stroke-linecap='round'/><circle cx='130' cy='11' r='4.5' fill='%23543A14'/></svg>") no-repeat 0 0 / contain; }   /* a drawn wave with a dot at its end */
[dir="rtl"] .bz-head h2::after, [dir="rtl"] .bz-join-copy h2::after { transform: scaleX(-1); }
.bz-eyebrow .n { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--bz-pri); color: var(--bz-sun); font-size: .9rem; }
.bz-eyebrow:has(.n)::before { display: none; }
.bz-alt { position: relative; border-block: 0; }
.bz-alt::before, .bz-alt::after { content: ""; position: absolute; left: 0; right: 0; height: 14px; z-index: 1; pointer-events: none; }
.bz-alt::before { top: 0; background: radial-gradient(circle at 12px 0, var(--bz-bg) 11px, transparent 11.5px) 0 0 / 24px 14px repeat-x; }
.bz-alt::after { bottom: -14px; background: radial-gradient(circle at 12px 0, #fff 11px, transparent 11.5px) 0 0 / 24px 14px repeat-x; }
@media (prefers-reduced-motion: no-preference) {
  .js-reveal .bz-sec > .wrap > *, .js-reveal .bz-row, .js-reveal .bz-steps > li, .js-reveal .bz-plans > li, .js-reveal .bz-feats > li, .js-reveal .bz-cards > li {
    opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
  .js-reveal .bz-sec.in > .wrap > *, .js-reveal .bz-row.in, .js-reveal .bz-sec.in .bz-steps > li, .js-reveal .bz-sec.in .bz-plans > li,
  .js-reveal .bz-sec.in .bz-feats > li, .js-reveal .bz-sec.in .bz-cards > li { opacity: 1; transform: none; }
  .js-reveal .bz-sec.in > .wrap > :nth-child(2), .js-reveal .bz-sec.in li:nth-child(2) { transition-delay: .1s; }
  .js-reveal .bz-sec.in > .wrap > :nth-child(3), .js-reveal .bz-sec.in li:nth-child(3) { transition-delay: .2s; }
  .js-reveal .bz-sec.in li:nth-child(4) { transition-delay: .3s; } .js-reveal .bz-sec.in li:nth-child(n+5) { transition-delay: .4s; }
}
@media print { .js-reveal .bz-sec > .wrap > *, .js-reveal .bz-row, .js-reveal .bz-sec li { opacity: 1 !important; transform: none !important; } }

/* the services at a glance, at the top of the services section */
.bz-glance { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 14px; margin-bottom: clamp(44px, 7vw, 80px); }
.bz-glance a { height: 100%; display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: 18px; border: 1px solid var(--bz-line); background: #fff; text-decoration: none; color: inherit; transition: border-color .18s, transform .18s var(--ease), box-shadow .18s; }
.bz-glance a:hover { border-color: var(--bz-pri); transform: translateY(-2px); box-shadow: 0 16px 30px -22px rgba(58, 40, 13, .6); }
.bz-glance .main a { background: var(--bz-sun-soft); border-color: var(--bz-sun-2); }
.bz-glance .bz-ic { flex: none; width: 48px; height: 48px; }
.bz-glance .main .bz-ic { background: var(--bz-pri); color: var(--bz-sun); }
.bz-glance .t { flex: 1; min-width: 0; }
.bz-glance b { display: block; font-size: 1.05rem; line-height: 1.3; color: var(--bz-pri-2); }
.bz-glance small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 3px; font-size: .84rem; line-height: 1.45; color: var(--bz-ink-3); }
.bz-glance .go { flex: none; width: 18px; height: 18px; color: var(--bz-ink-3); }
.bz-row { scroll-margin-top: 96px; }
@media (max-width: 560px) { .bz-glance { gap: 10px; } .bz-glance a { padding: 12px 14px; } }

/* services: copy + example picture, alternating sides */
.bz-rows { display: grid; gap: clamp(44px, 7vw, 88px); }
.bz-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.bz-row:nth-child(even) .bz-row-visual { order: -1; }
.bz-row-copy .bz-ic { margin-bottom: 16px; }
.bz-row-copy h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.25; color: var(--bz-pri-2); }
.bz-row-copy > p { margin-top: 10px; font-size: 1.05rem; color: var(--bz-ink-2); max-width: 32em; }
.bz-row-visual { position: relative; display: grid; place-items: center; min-height: 320px; padding: clamp(28px, 5vw, 52px); border-radius: 28px; background: var(--bz-sun-soft); }
.bz-row:nth-child(2) .bz-row-visual { background: var(--bz-leaf-soft); }
.bz-row:nth-child(3) .bz-row-visual { background: var(--bz-peach); }
.bz-row:nth-child(4) .bz-row-visual { background: #F6EEDC; }
.bz-row-visual .mock-card { width: min(100%, 340px); }
.bz-row-visual .mock-stand { width: min(100%, 210px); }
.bz-row-visual .mock-web { width: min(100%, 460px); }
.bz-row-visual .mock-ticket { width: min(100%, 440px); }

/* free QR tool band (landing, QR menu page) */
.bz-toolband { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 20px 28px; align-items: center; padding: clamp(22px, 4vw, 36px); border-radius: 24px; background: var(--bz-sun); }
.bz-toolband img { width: 110px; }
.bz-toolband h2 { font-size: clamp(1.35rem, 2.6vw, 1.9rem); color: var(--bz-pri-2); }
.bz-toolband p { margin-top: 6px; color: var(--bz-pri); }

/* numbered steps */
.bz-steps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.bz-steps li { padding: 26px; border-radius: 18px; border: 1px solid var(--bz-line); background: #fff; }
.bz-alt .bz-steps li { background: var(--bz-bg); }
.bz-num { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; margin-bottom: 16px; background: var(--bz-pri); color: var(--bz-sun); font-weight: 700; }
.bz-steps li:nth-child(2) .bz-num { background: var(--bz-leaf-2); color: #fff; }
.bz-steps li:nth-child(3) .bz-num { background: var(--bz-sun); color: var(--bz-pri-2); }
.bz-steps h3, .bz-feats h3 { font-size: 1.15rem; line-height: 1.35; }
.bz-steps p, .bz-feats p, .bz-cards p { margin-top: 6px; color: var(--bz-ink-2); font-size: .97rem; }

/* plans */
.bz-plans { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.bz-plan { position: relative; display: flex; flex-direction: column; padding: 28px 24px 24px; border-radius: 20px; border: 1px solid var(--bz-line); background: #fff; }
.bz-plan-main { border: 2px solid var(--bz-pri); background: #FFFCF3; box-shadow: 0 30px 60px -32px rgba(58, 40, 13, .5); }
.bz-plan .bz-tag { position: absolute; top: -13px; inset-inline-start: 22px; margin: 0; background: var(--bz-pri); color: var(--bz-sun); }
.bz-plan h3 { font-size: 1.1rem; color: var(--bz-ink-2); }
.bz-price { margin-top: 6px; font-size: 2rem; font-weight: 700; line-height: 1.2; color: var(--bz-pri-2); }
.bz-note { margin-top: 6px; color: var(--bz-ink-3); font-size: .93rem; min-height: 2.9em; }
.bz-plan .bz-list { margin: 20px 0 24px; padding-top: 20px; border-top: 1px dashed var(--bz-line-2); }
.bz-plan .bz-btn { margin-top: auto; width: 100%; }

/* application form */
.bz-join { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.bz-join-copy p { margin-top: 12px; color: var(--bz-ink-2); font-size: 1.05rem; }
.bz-join-copy .bz-ticks { flex-direction: column; gap: 10px; }
.bz-join-copy img { width: 150px; margin-top: 26px; }
.biz .form-card { background: #fff; border: 1px solid var(--bz-line); border-radius: 20px; box-shadow: 0 30px 60px -40px rgba(58, 40, 13, .45); padding: clamp(20px, 4vw, 36px); }
.bz-alt .form-card { background: var(--bz-bg); box-shadow: none; }
.bz-form-sub { margin-bottom: 18px; color: var(--bz-ink-3); font-size: .9rem; }
.biz .field input, .biz .field select, .biz .field textarea { border-radius: 10px; border-width: 1.5px; background: #fff; }
.checks { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.checks legend { font-weight: 700; font-size: .95rem; margin-bottom: 8px; padding: 0; }
.checks .check { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 10px; border: 1.5px solid var(--bz-line-2); background: #fff; font-weight: 500; cursor: pointer; }
.checks .check:has(input:checked) { border-color: var(--bz-pri); background: var(--bz-sun-soft); }
.checks .check:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.checks input { flex: none; width: 18px; height: 18px; min-height: 0; padding: 0; margin: 0; accent-color: var(--bz-pri); }

/* FAQ */
.bz-faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 5vw, 64px); align-items: start; }
.biz .faq details { border: 1px solid var(--bz-line); border-radius: 14px; }
.biz .faq details[open] { border-color: var(--bz-pri); }
.biz .faq summary { font-family: var(--font-body); font-weight: 600; }

/* about, features, other services, call to action */
.bz-about { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 5vw, 64px); align-items: start; }
.bz-about p { font-size: 1.08rem; color: var(--bz-ink-2); }
.bz-about p + p { margin-top: 14px; }
.bz-feats, .bz-cards { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 18px; }
.bz-feats li, .bz-cards li { position: relative; padding: 24px; border-radius: 18px; border: 1px solid var(--bz-line); background: var(--bz-bg); }
.bz-sec:not(.bz-alt) .bz-feats li, .bz-sec:not(.bz-alt) .bz-cards li { background: #fff; }
.bz-feats .bz-ic, .bz-cards .bz-ic { width: 40px; height: 40px; border-radius: 10px; margin-bottom: 14px; }
.bz-feats .bz-ic { background: var(--bz-leaf-soft); color: var(--bz-leaf); }
.bz-feats .bz-ic .icon, .bz-cards .bz-ic .icon { width: 20px; height: 20px; }
.bz-cards li { transition: border-color .18s, transform .18s var(--ease); }
.bz-cards li:has(a):hover { border-color: var(--bz-pri); transform: translateY(-2px); }
.bz-cards h3 { font-size: 1.15rem; }
.bz-cards h3 a { text-decoration: none; }
.bz-cards h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.bz-cta { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 24px; align-items: center;
  padding: clamp(28px, 5vw, 56px); border-radius: 24px; background: var(--bz-pri); color: #FFF6E0; }
.bz-cta::before { content: ""; position: absolute; z-index: -1; inset: 0; opacity: .08; background: url("/img/pattern.svg") center / 300px auto repeat; }
.bz-cta h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); color: var(--bz-sun); }
.bz-cta p { margin-top: 8px; color: #F3E6C8; max-width: 36em; }
.bz-cta img { width: 130px; }

/* footer */
.bz-foot { background: var(--bz-pri-2); color: #E9DCC0; padding: 56px 0 28px; }
.bz-foot-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
.bz-foot .bz-logo img { background: var(--bz-sun); padding: 6px 10px; border-radius: 12px; height: 54px; }
.bz-foot .bz-logo span { background: var(--bz-sun); color: var(--bz-pri-2); }
.bz-foot-brand p { margin-top: 14px; max-width: 30em; font-size: .95rem; }
.bz-foot h2 { font-size: .9rem; color: var(--bz-sun); margin-bottom: 12px; letter-spacing: 0; }
.bz-foot ul { list-style: none; display: grid; gap: 8px; }
.bz-foot a, .bz-foot button { color: #E9DCC0; text-decoration: none; background: none; border: 0; padding: 0; font-size: .95rem; }
.bz-foot a:hover, .bz-foot button:hover { color: #fff; text-decoration: underline; }
.bz-foot-bottom { margin-top: 36px; padding-top: 20px; border-top: 1px solid rgba(255, 241, 204, .15); font-size: .88rem; }

/* WhatsApp: next to the form, in the footer, a floating button, and under the QR tool's link field */
.bz-waghost { background: #fff; color: var(--bz-leaf); border-color: var(--bz-leaf-2); }
.bz-waghost:hover { border-color: var(--bz-leaf); background: var(--bz-leaf-soft); }
.bz-waghost .icon { width: 20px; height: 20px; }
.bz-head-wa { display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 0 12px; border-radius: 12px; text-decoration: none; font-weight: 700; font-size: .92rem; color: var(--bz-leaf); border: 1.5px solid var(--bz-leaf-2); background: #fff; white-space: nowrap; }
.bz-head-wa:hover { background: var(--bz-leaf-soft); }
.bz-head-wa .icon { width: 20px; height: 20px; }
.biz .nav-extra .bz-wa { margin-top: 0; }
@media (max-width: 1300px) { .bz-head-wa bdi { display: none; } .bz-head-wa { padding: 0 10px; } }
@media (max-width: 600px) { .bz-head-wa { display: none; } }   /* phones have the floating button */
.bz-wa { margin-top: 22px; background: var(--bz-leaf); color: #fff; }
.bz-wa:hover { background: #3F6A18; }
.bz-wa .icon, .bz-foot-wa .icon, .qr-nomenu .icon { width: 20px; height: 20px; }
.bz-foot-wa { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-weight: 700; color: var(--bz-sun) !important; }
.bz-float-wa { position: fixed; z-index: 60; bottom: 18px; inset-inline-end: 18px; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  background: var(--bz-leaf); color: #fff; box-shadow: 0 12px 26px -10px rgba(58, 40, 13, .6); transition: transform .18s var(--ease); }
.bz-float-wa:hover { transform: translateY(-2px) scale(1.04); }
.bz-float-wa .icon { width: 30px; height: 30px; }
.qr-nomenu { display: flex; gap: 8px; align-items: flex-start; margin-top: 6px; padding: 10px 12px; border-radius: 10px; background: var(--bz-leaf-soft); font-size: .9rem; color: var(--bz-ink); }
.qr-nomenu .icon { flex: none; margin-top: 2px; color: var(--bz-leaf); }
.qr-nomenu a { font-weight: 700; color: var(--bz-leaf); }
@media print { .bz-float-wa { display: none; } }

/* ---------- the free QR code tool (/business/qr-menu-generator/) ---------- */
.qr-head { padding-block: clamp(24px, 4vw, 44px) 8px; }
.qr-head h1 { font-size: clamp(2rem, 4vw, 3.1rem); line-height: 1.15; margin-top: 16px; color: var(--bz-pri-2); }
[dir="rtl"] .qr-head h1 { line-height: 1.35; }
.qr-tool { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: clamp(24px, 4vw, 48px); align-items: start; padding-block: 28px clamp(56px, 8vw, 88px); }
.qr-form { background: #fff; border: 1px solid var(--bz-line); border-radius: 22px; padding: clamp(20px, 3.5vw, 32px); box-shadow: 0 30px 60px -44px rgba(58, 40, 13, .5); display: grid; gap: 18px; }
#qr-url { direction: ltr; text-align: left; }
#qr-url[aria-invalid="true"] { border-color: #B42318; }
.qr-err { color: #B42318; font-weight: 600; font-size: .9rem; }
.qr-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.qr-opts { border: 0; margin: 0; padding: 0; }
.qr-opts legend { font-weight: 700; font-size: .95rem; margin-bottom: 8px; padding: 0; }
.qr-styles, .qr-colors { display: flex; flex-wrap: wrap; gap: 10px; }
.qr-styles label { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1.5px solid var(--bz-line-2); border-radius: 10px; cursor: pointer; font-weight: 500; }
.qr-styles label:has(input:checked) { border-color: var(--bz-pri); background: var(--bz-sun-soft); }
.qr-styles input { accent-color: var(--bz-pri); }
.qr-styles .sw { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--bz-line-2); }
.qr-colors label { position: relative; width: 38px; height: 38px; border-radius: 50%; cursor: pointer; box-shadow: inset 0 0 0 3px #fff; border: 2px solid transparent; }
.qr-colors label:has(input:checked) { border-color: var(--bz-pri); }
.qr-colors label:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.qr-colors input, .qr-styles input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.qr-check { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; cursor: pointer; }
.qr-check input { width: 18px; height: 18px; accent-color: var(--bz-pri); }
.qr-side { position: sticky; top: 92px; display: grid; gap: 14px; }
.qr-preview { position: relative; display: grid; place-items: center; padding: 22px; border-radius: 22px; background: repeating-linear-gradient(45deg, #FFF4D6, #FFF4D6 12px, #FFF9EB 12px, #FFF9EB 24px); border: 1px solid var(--bz-line); }
.qr-preview > span { position: absolute; top: 10px; inset-inline-start: 14px; font-size: .78rem; font-weight: 700; color: var(--bz-ink-3); }
.qr-card { width: 100%; max-width: 330px; filter: drop-shadow(0 18px 24px rgba(58, 40, 13, .22)); }
.qr-card svg, .qr-card img { width: 100%; height: auto; }
.qr-note { font-size: .92rem; color: var(--bz-ink-2); text-align: center; }
.qr-note.ok { color: var(--bz-leaf); font-weight: 600; }
.qr-actions { display: grid; gap: 10px; }
.qr-actions .row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.qr-private { display: flex; gap: 8px; align-items: flex-start; font-size: .86rem; color: var(--bz-ink-3); }
.qr-private .icon { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--bz-leaf); }
.qr-print { display: none; }
@media print {
  @page { size: A4; margin: 10mm; }
  body.biz { background: #fff; }
  body.biz > *:not(.qr-print) { display: none !important; }
  .qr-print { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8mm; justify-items: center; }
  .qr-print svg { width: 88mm; height: auto; break-inside: avoid; }
}

/* an icon beside its title (service rows, features, other services, tips) */
.bz-ttl { display: flex; align-items: center; gap: 14px; }
.bz-ttl .bz-ic { flex: none; margin: 0; }
.bz-ttl + p { margin-top: 10px; }
.bz-row-copy .bz-ttl .bz-ic { width: 52px; height: 52px; border-radius: 14px; }

/* a service page's guide: numbered steps or ideas */
.bz-guide { list-style: none; counter-reset: g; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.bz-guide li { counter-increment: g; position: relative; padding: 22px 22px 22px 76px; border-radius: 18px; border: 1px solid var(--bz-line); background: var(--bz-bg); }
[dir="rtl"] .bz-guide li { padding: 22px 76px 22px 22px; }
.bz-guide li::before { content: counter(g); position: absolute; top: 20px; inset-inline-start: 20px; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--bz-sun); color: var(--bz-pri-2); font-weight: 700; }
.bz-guide.two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
[dir="rtl"] .bz-guide li::before { content: counter(g, arabic-indic); }
.bz-guide h3 { font-size: 1.1rem; line-height: 1.35; }
.bz-guide p { margin-top: 6px; color: var(--bz-ink-2); font-size: .97rem; }
/* phones: the titles sit in the middle */
@media (max-width: 700px) {
  .bz-hero .crumbs ol { justify-content: center; }
  .bz-pill { align-self: center !important; }
  .bz-hero h1, .bz-lede, .qr-head h1 { text-align: center; }
  .bz-ticks { justify-content: center; }
  .bz-head, .bz-join-copy, .bz-about > h2, .bz-cta { text-align: center; margin-inline: auto; }
  .bz-head h2::after, .bz-join-copy h2::after { margin-inline: auto; }
  .bz-join-copy .bz-ticks { align-items: center; }
  .bz-join-copy img { margin-inline: auto; }
  .bz-row-copy { text-align: center; }
  .bz-row-copy .bz-tag { margin-inline: auto; }
  .bz-row-copy > p { margin-inline: auto; }
  .bz-row-copy .bz-ttl { justify-content: center; }
  .bz-row-copy .bz-list { width: fit-content; margin-inline: auto; text-align: start; }
  .bz-toolband { text-align: center; justify-items: center; grid-template-columns: minmax(0, 1fr); }
}

/* titles break into even lines */
.bz-hero h1, .bz-head h2, .bz-join-copy h2, .bz-row-copy h3, .bz-cta h2 { text-wrap: balance; }
/* the animation's scene title as text under it, on phones (static/js/biz-anim.js fills it) */
.anim-cap { display: none; }
@media (max-width: 700px) {
  .anim-cap { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; margin: 4px 16px 0; padding: 10px 16px; border-radius: 16px;
    background: #fff; border: 1px solid var(--bz-line); box-shadow: 0 10px 24px -18px rgba(58, 40, 13, .5); font-weight: 700; font-size: 1.15rem; line-height: 1.35; color: var(--bz-pri-2); text-align: center; }
  .anim-cap .n { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--bz-pri); color: var(--bz-sun); font-size: .95rem; }
  .anim-cap.final { background: var(--bz-leaf); border-color: var(--bz-leaf); color: #fff; }
  .anim-cap.swap { animation: capIn .45s var(--ease); }
  .bz-anim .anim-btn { top: 6px; bottom: auto; }   /* the top of the picture is free on phones (no title there) */
}
@keyframes capIn { from { opacity: 0; transform: translateY(8px); } }
/* phones: title, then the picture, then the text and buttons */
@media (max-width: 900px) {
  .bz-hero-in { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .bz-copy { display: contents; }
  .bz-hero .crumbs { order: 1; } .bz-pill { order: 2; align-self: flex-start; } .bz-hero h1 { order: 3; }
  .bz-visual { order: 4; margin-top: 18px; } .bz-lede { order: 5; } .bz-btns { order: 6; } .bz-ticks { order: 7; }
}

/* ---------- phones and tablets ---------- */
@media (max-width: 900px) {
  .bz-hero-in, .bz-row, .bz-join, .bz-faq, .bz-about, .qr-tool { grid-template-columns: minmax(0, 1fr); }
  .bz-row:nth-child(even) .bz-row-visual { order: 0; }
  .bz-steps, .bz-plans { grid-template-columns: minmax(0, 1fr); }
  .bz-note { min-height: 0; }
  .bz-foot-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .bz-foot-brand { grid-column: 1 / -1; }
  .qr-side { position: static; }
  .bz-toolband { grid-template-columns: auto minmax(0, 1fr); }
  .bz-toolband .bz-btn { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .bz-btns .bz-btn { flex: 1 1 auto; }
  .bz-stage { min-height: 470px; }
  .bz-stage .mock-phone, .bz-duo.n2 .mock-phone { width: 236px; margin-inline-end: 60px; }
  .bz-stage .mock-card { width: 238px; bottom: 16px; }
  .bz-stage .mock-stand, .bz-duo.n2 .mock-stand { width: 124px; }
  .bz-stage .mock-stand { top: 20px; }
  .bz-stage .bz-didu { width: 96px; }
  .bz-duo.n2 { min-height: 470px; }
  .bz-row-visual { min-height: 0; padding: 26px 18px; border-radius: 22px; }
  .bz-cta { grid-template-columns: minmax(0, 1fr); }
  .bz-cta img { display: none; }
  .bz-cta .bz-btn { width: 100%; }
  .bz-steps li { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; padding: 18px; }
  .bz-num { grid-row: span 2; margin: 0; }
  .bz-foot-grid { grid-template-columns: minmax(0, 1fr); }
  .qr-row { grid-template-columns: minmax(0, 1fr); }
  .bz-toolband img { width: 76px; }
}

/* ---------- the quick request in the hero: name, contact, phone ---------- */
.bz-quick { margin-top: 26px; padding: 18px; border-radius: 20px; background: #fff; border: 1px solid var(--bz-line); box-shadow: 0 24px 48px -34px rgba(58, 40, 13, .55); }
.bz-quick-t { font-weight: 700; color: var(--bz-pri-2); margin-bottom: 12px; }
.bz-quick-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.bz-quick .field input { min-height: 48px; padding: 10px 14px; }
.bz-quick .bz-btn { width: 100%; min-height: 48px; }
.bz-quick .form-status { margin-top: 12px; }
.bz-quick-alt { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 12px; font-size: .93rem; }
.bz-quick-alt a { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--bz-pri); text-underline-offset: 3px; }
.bz-quick-alt .bz-quick-wa { color: var(--bz-leaf); text-decoration: none; }
.bz-quick-wa .icon { width: 18px; height: 18px; }
@media (max-width: 900px) { .bz-quick { order: 6; margin-top: 20px; } }
@media (max-width: 520px) { .bz-quick-row { grid-template-columns: minmax(0, 1fr); } .bz-quick { padding: 14px; } }
@media (max-width: 700px) { .bz-quick-t { text-align: center; } .bz-quick-alt { justify-content: center; } }

/* ---------- the pages per kind of place, linked under the services at a glance ---------- */
.bz-glance:has(+ .bz-aud) { margin-bottom: 18px; }
.bz-aud { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: clamp(44px, 7vw, 80px); color: var(--bz-ink-2); font-weight: 600; }
.bz-aud a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--bz-line-2); background: #fff; color: var(--bz-pri-2); font-weight: 700; text-decoration: none; transition: border-color .18s; }
.bz-aud a:hover { border-color: var(--bz-pri); }
.bz-aud .icon { width: 18px; height: 18px; color: var(--bz-pri); }
@media (max-width: 700px) { .bz-aud { justify-content: center; } .bz-aud > span { width: 100%; text-align: center; } }

/* ---------- the newest features of a service: first on its page, and under its row on the landing page ---------- */
.bz-hl { margin-bottom: clamp(48px, 7vw, 80px); padding: clamp(20px, 3vw, 32px); border-radius: 24px; background: var(--bz-sun-soft); border: 1.5px solid var(--bz-sun-2); }
.bz-hl .bz-feats li { background: #fff; padding-top: 30px; }
.bz-hl .bz-tag { position: absolute; top: -12px; inset-inline-start: 20px; margin: 0; background: var(--bz-leaf); color: #fff; }
.bz-hl-cta { margin-top: 20px; }
.bz-hl-cta .bz-wa { margin-top: 0; }
@media (max-width: 700px) { .bz-hl-cta { text-align: center; } }
.bz-new { list-style: none; display: grid; justify-items: start; gap: 8px; margin-top: 16px; }
.bz-new li { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 14px; background: #fff; border: 1.5px solid var(--bz-sun-2); font-weight: 700; color: var(--bz-pri-2); }
.bz-new .icon { width: 18px; height: 18px; color: var(--bz-pri); }
.bz-new-tag { flex: none; padding: 2px 9px; border-radius: 999px; background: var(--bz-leaf); color: #fff; font-size: .75rem; }
@media (max-width: 700px) { .bz-new { width: fit-content; margin-inline: auto; text-align: start; } }
/* the phone picture: group order at the top, a suggestion under the first dish */
.m-group { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 999px; background: var(--bz-leaf-soft); color: var(--bz-leaf); font-size: 10px; font-weight: 700; white-space: nowrap; }
.m-group .icon { width: 12px; height: 12px; }
.m-items .m-up { border: 1.5px dashed var(--bz-leaf-2); background: var(--bz-leaf-soft); }
.m-up > .icon { flex: none; width: 30px; height: 30px; padding: 7px; border-radius: 10px; background: #fff; color: var(--bz-leaf); }
.m-up small { color: var(--bz-leaf); font-weight: 700; }
.m-up > span { flex: none; padding: 5px 10px; border-radius: 9px; background: var(--bz-leaf); color: #fff; font-weight: 700; font-size: 11px; }

/* ---------- guides for restaurant owners (/business/restaurant-marketing-plan/) ---------- */
.bz-goals { position: relative; width: min(100%, 460px); margin-inline: auto; padding: clamp(20px, 3vw, 32px); border-radius: 28px; background: var(--bz-sun-soft); border: 1.5px solid var(--bz-sun-2); }
.bz-goals ul { list-style: none; display: grid; gap: 12px; }
.bz-goals li { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 18px; background: #fff; border: 1px solid var(--bz-line); box-shadow: 0 14px 30px -24px rgba(58, 40, 13, .6); }
.bz-goals li .n { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--bz-pri); color: var(--bz-sun); font-weight: 700; font-size: .9rem; }
.bz-goals b { font-size: 1.08rem; color: var(--bz-pri-2); }
.bz-goals .bz-ic { flex: none; }
.bz-goals img { position: absolute; bottom: -34px; inset-inline-end: -14px; width: 104px; height: auto; }
.bz-toc { margin-bottom: clamp(36px, 5vw, 56px); padding: 18px 20px; border-radius: 18px; border: 1px solid var(--bz-line); background: #fff; }
.bz-toc b { display: block; margin-bottom: 8px; color: var(--bz-pri-2); }
.bz-toc ol { display: flex; flex-wrap: wrap; gap: 8px 22px; padding-inline-start: 18px; }
[dir="rtl"] .bz-toc ol { list-style: arabic-indic; }
.bz-toc a { color: var(--bz-pri); font-weight: 600; text-underline-offset: 3px; }
#numbers, #ideas, #plan, #phrases { scroll-margin-top: 80px; }
.bz-ideas { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 16px; }
.bz-ideas > li { display: flex; gap: 16px; padding: 22px; border-radius: 20px; background: #fff; border: 1px solid var(--bz-line); }
.bz-ideas .n { flex: none; width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: var(--bz-sun); color: var(--bz-pri-2); font-weight: 700; font-size: 1.05rem; }
.bz-ideas h3 { font-size: 1.12rem; line-height: 1.35; }
.bz-ideas p { margin-top: 6px; color: var(--bz-ink-2); }
.bz-ideas .tip { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: var(--bz-leaf-soft); color: #2F5310; font-size: .93rem; }
.bz-ideas .tip .icon { flex: none; width: 18px; height: 18px; margin-top: 2px; }
.bz-ideas .bz-link { display: inline-flex; margin-top: 12px; }
.bz-weeks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 16px; }
.bz-weeks article { padding: 22px; border-radius: 20px; background: #fff; border: 1.5px solid var(--bz-line-2); }
.bz-weeks h3 { font-size: 1.05rem; color: var(--bz-pri-2); padding-bottom: 12px; border-bottom: 2px dashed var(--bz-line-2); }
.bz-weeks ul { list-style: none; display: grid; gap: 12px; margin-top: 14px; }
.bz-weeks li { display: flex; gap: 10px; align-items: flex-start; color: var(--bz-ink-2); }
.bz-weeks .box { flex: none; width: 20px; height: 20px; margin-top: 3px; border-radius: 6px; border: 2px solid var(--bz-pri); }
.bz-print { margin-top: 22px; }
.bz-phrases { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 14px; }
.bz-phrases li { position: relative; padding: 20px 22px 20px 52px; border-radius: 18px; background: #fff; border: 1px solid var(--bz-line); font-weight: 600; color: var(--bz-pri-2); line-height: 1.6; }
[dir="rtl"] .bz-phrases li { padding: 20px 52px 20px 22px; }
.bz-phrases li::before { content: "“"; position: absolute; top: 6px; inset-inline-start: 16px; font-size: 2.6rem; line-height: 1; color: var(--bz-sun-2); font-family: Georgia, serif; }
[dir="rtl"] .bz-phrases li::before { content: "”"; }
.bz-more-link { margin-top: 18px; }
.bz-guideband { margin-top: clamp(40px, 6vw, 64px); }
@media (max-width: 700px) {
  .bz-toc ol { flex-direction: column; }
  .bz-print, .bz-more-link { text-align: center; }
  .bz-goals img { width: 84px; bottom: -28px; }
}
/* tables in the guides: menu sizes, and the empty sheet to print */
.bz-table-wrap { overflow-x: auto; border-radius: 18px; border: 1px solid var(--bz-line); background: #fff; }
.bz-table { width: 100%; border-collapse: collapse; font-size: .97rem; }
.bz-table th, .bz-table td { padding: 14px 16px; text-align: start; border-bottom: 1px solid var(--bz-line); vertical-align: top; }
.bz-table thead th { background: var(--bz-sun-soft); color: var(--bz-pri-2); font-weight: 700; white-space: nowrap; }
.bz-table tbody th { color: var(--bz-pri-2); white-space: nowrap; }
.bz-table tbody tr:last-child > * { border-bottom: 0; }
.bz-sheet td { height: 42px; border-inline-start: 1px solid var(--bz-line); }
.bz-sheet thead th + th { border-inline-start: 1px solid var(--bz-line-2); }
.bz-tnote { display: flex; gap: 8px; align-items: flex-start; margin-top: 14px; color: var(--bz-ink-2); font-size: .95rem; }
.bz-tnote .icon { flex: none; width: 18px; height: 18px; margin-top: 3px; color: var(--bz-leaf); }
.bz-example { margin-top: 18px; padding: 20px 22px; border-radius: 18px; background: var(--bz-sun-soft); border: 1.5px dashed var(--bz-sun-2); }
.bz-example h3 { font-size: 1.05rem; color: var(--bz-pri-2); }
.bz-example ul { margin-top: 8px; padding-inline-start: 20px; display: grid; gap: 6px; color: var(--bz-ink-2); }
/* "Print": only the section the button belongs to */
@media print {
  body.printing > :not(main), body.printing main > :not(.print-target), body.printing .bz-print { display: none !important; }
  body.printing .print-target { padding: 0 !important; background: #fff !important; }
  body.printing .bz-weeks { grid-template-columns: 1fr 1fr; }
  body.printing .bz-weeks article, body.printing tr { break-inside: avoid; }
  body.printing .bz-table-wrap { overflow: visible; }
}

/* the demo menu link (/business/menu-demo/) */
.bz-hl-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.bz-hl-note { margin-top: 10px; color: var(--bz-ink-2); font-size: .93rem; }
.bz-demo-link { display: flex; width: fit-content; margin-top: 14px; color: var(--bz-leaf); }
@media (max-width: 700px) { .bz-hl-cta { justify-content: center; } .bz-hl-note { text-align: center; } .bz-demo-link { margin-inline: auto; } }

/* ---------- our work: concept sites we built (static/business/work/), on the landing page and the service they show ---------- */
.fw-band { background: var(--bz-sun-soft); border-block: 1px solid var(--bz-line); }
.fw-case { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(26px, 4.5vw, 56px); align-items: center; }
.fw-shot { display: block; overflow: hidden; border-radius: 22px; background: #fff; box-shadow: 0 22px 40px -18px rgba(84, 58, 20, .38); transition: transform .45s var(--ease, ease); }
.fw-shot:hover { transform: translateY(-5px) rotate(-.6deg); }
.fw-shot img { display: block; width: 100%; height: auto; }
.fw-tag { display: inline-block; margin-bottom: 14px; padding: 6px 13px; border: 1px solid var(--bz-line-2); border-radius: 999px; background: #fff; color: var(--bz-pri); font-size: .85rem; font-weight: 700; }
/* examples of restaurant pages on Foodidu (the visibility page) */
.bz-ex li { padding: 0; }
.bz-ex a { display: flex; align-items: center; gap: 14px; height: 100%; padding: 18px 20px; color: inherit; text-decoration: none; border-radius: inherit; }
.bz-ex-logo { flex: none; display: grid; place-items: center; width: 64px; height: 64px; overflow: hidden; border-radius: 16px; border: 1px solid var(--bz-line); background: #fff; }
.bz-ex-logo img { width: 52px; height: 52px; object-fit: contain; }
.bz-ex .t { flex: 1; min-width: 0; }
.bz-ex b { display: block; font-size: 1.08rem; color: var(--bz-ink); }
.bz-ex small { display: block; margin-top: 4px; color: var(--bz-ink-2); font-size: .95rem; line-height: 1.5; }
.bz-ex .icon { flex: none; width: 20px; height: 20px; color: var(--bz-ink); transition: transform .2s; }
.bz-ex a:hover .icon { transform: translateX(4px); }
[dir="rtl"] .bz-ex a:hover .icon { transform: translateX(-4px) scaleX(-1); }
.fw-name { margin: 0 0 10px; font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.2; color: var(--bz-ink); }
.fw-case + .fw-case { margin-top: clamp(56px, 8vw, 100px); }
@media (min-width: 861px) { .fw-case--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); } .fw-case--flip > .fw-shot { order: 2; } }
.fw-copy > p:not(.fw-tag) { font-size: 1.05rem; line-height: 1.75; color: var(--bz-ink-2); }
.fw-copy .bz-list { margin-top: 16px; }
.fw-copy .bz-btns { margin-top: 22px; }
.fw-demo-link { display: flex; width: fit-content; margin-top: 12px; }
@media (max-width: 860px) { .fw-case { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) {
  .fw-copy { text-align: center; }
  .fw-copy .bz-list { width: fit-content; margin-inline: auto; text-align: start; }
  .fw-copy .bz-btns { justify-content: center; }
  .fw-demo-link { margin-inline: auto; }
}
@media (prefers-reduced-motion: reduce) { .fw-shot, .fw-shot:hover { transition: none; transform: none; } }

/* the service row that has a concept site: its screenshot instead of the drawn mock-up, and a demo button */
.fw-row-visual { padding: clamp(18px, 3vw, 34px); }
.fw-row-visual .fw-shot { width: 100%; }
.fw-row-cap { position: absolute; top: clamp(8px, 1.6vw, 18px); inset-inline-start: clamp(8px, 1.6vw, 18px); padding: 6px 12px; border-radius: 999px; background: var(--bz-pri); color: var(--bz-sun); font-weight: 700; font-size: .8rem; box-shadow: 0 8px 18px -10px rgba(58, 40, 13, .6); }
.fw-row-btn { display: flex; width: fit-content; margin-top: 22px; }
.fw-row-btn + .bz-link { display: flex; width: fit-content; margin-top: 14px; }
@media (max-width: 700px) { .fw-row-btn, .fw-row-btn + .bz-link { margin-inline: auto; } }

/* ==================== the bold look (inspired by the NILO concept site) ====================
   Big Lalezar headlines with an outline and a hard shadow, chunky borders and offset shadows, a sun hero with the food
   pattern, and on the landing page a turning "start free" sticker, a services marquee and a "free" burst. It restyles the
   rules above for every business page (body.bz-bold, set by layout(); not the bare demo menu). */
body.bz-bold {
  --v2-ink: #3A280D; --v2-cream: #FFF6DF; --v2-paper: #FFFCF3; --v2-sun: #FFD15C; --v2-sun-d: #F5B82E; --v2-sun-soft: #FFEFC2;
  --v2-leaf: #4A7A1E; --v2-leaf-soft: #E4F2D2; --v2-peach: #FFDCC8; --v2-pink: #FF9DAE;
  --v2-sh: 5px 5px 0 var(--v2-ink); --v2-sh-sm: 3px 3px 0 var(--v2-ink);
  --v2-bounce: cubic-bezier(.3, 1.6, .5, 1);
  --v2-display: "Lalezar", "Readex Pro", system-ui, sans-serif;   /* biz.css sets --font-display to Readex Pro */
  background: var(--v2-cream);
}


/* ---------- display type: headlines with an outline and a hard shadow ---------- */
body.bz-bold .bz-hero h1, body.bz-bold .bz-head h2, body.bz-bold .bz-join-copy h2, body.bz-bold .bz-cta h2, body.bz-bold .bz-toolband h2, body.bz-bold .bz-row-copy h3, body.bz-bold .bz-price {
  font-family: var(--v2-display); font-weight: 400; letter-spacing: 0;
}
body.bz-bold .bz-hero h1 {
  font-size: clamp(2.3rem, 4.4vw, 3.7rem); line-height: 1.06; color: var(--v2-cream);
  paint-order: stroke fill; -webkit-text-stroke: .04em var(--v2-ink); text-shadow: .045em .05em 0 var(--v2-ink);
  text-wrap: balance;
}
[dir="rtl"] body.bz-bold .bz-hero h1 { line-height: 1.32; }
body.bz-home .bz-hero h1 { font-size: clamp(2.8rem, 6.2vw, 5.4rem); line-height: 1.02; }
[dir="rtl"] body.bz-home .bz-hero h1 { line-height: 1.3; }
body.bz-bold .bz-head h2, body.bz-bold .bz-join-copy h2 { font-size: clamp(2.3rem, 4.8vw, 3.9rem); line-height: 1.06; color: var(--v2-ink); }
[dir="rtl"] body.bz-bold .bz-head h2, [dir="rtl"] body.bz-bold .bz-join-copy h2 { line-height: 1.32; }
body.bz-bold .bz-row-copy h3 { font-size: clamp(1.8rem, 3vw, 2.4rem); color: var(--v2-ink); }
body.bz-bold .bz-eyebrow { font-family: var(--v2-display); font-weight: 400; font-size: 1.2rem; color: var(--v2-ink); }
body.bz-bold .bz-eyebrow .n { width: 40px; height: 40px; font-size: 1.1rem; background: var(--v2-sun); color: var(--v2-ink); border: 2.5px solid var(--v2-ink); box-shadow: var(--v2-sh-sm); transform: rotate(-8deg); }

/* ---------- hero: the sun with the food pattern ---------- */
body.bz-bold .bz-hero { background: var(--v2-sun); border-bottom: 3px solid var(--v2-ink); padding-bottom: clamp(64px, 9vw, 110px); }
body.bz-bold .bz-hero::before { background: url("/img/pattern.svg") 0 0 / 187px 406px repeat; opacity: .2; -webkit-mask: none; mask: none; }
body.bz-bold .bz-hero .crumbs, body.bz-bold .bz-hero .crumbs a { color: var(--v2-ink); }
body.bz-bold .bz-pill { background: var(--v2-ink); color: var(--v2-sun); border: 0; box-shadow: var(--v2-sh-sm); font-weight: 700; letter-spacing: .02em; }
body.bz-bold .bz-pill .dot { background: var(--v2-sun); }
body.bz-bold .bz-lede { color: var(--v2-ink); font-weight: 500; }
body.bz-bold .bz-anim { border: 3px solid var(--v2-ink); border-radius: 30px; box-shadow: 9px 9px 0 var(--v2-ink); overflow: hidden; background: #fff; transform: rotate(1.2deg); }
body.bz-bold .bz-visual { position: relative; }
body.bz-bold .bz-ticks li { color: var(--v2-ink); font-weight: 600; }

/* the turning sticker on the video: "start free" */
.v2-ring { position: absolute; z-index: 4; inset-inline-start: -30px; bottom: -36px; width: clamp(112px, 11vw, 150px); aspect-ratio: 1; transition: transform .45s var(--v2-bounce); }
.v2-ring svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(4px 5px 0 var(--v2-ink)); }
.v2-ring .r-bg { fill: var(--v2-pink); stroke: var(--v2-ink); stroke-width: 4; }
.v2-ring .r-in { fill: var(--v2-paper); stroke: var(--v2-ink); stroke-width: 4; }
.v2-ring .r-t { font: 400 19px var(--v2-display); fill: var(--v2-ink); direction: ltr; }   /* text on a path only lays out left to right in Chrome */
html[lang="en"] .v2-ring .r-t { letter-spacing: 1px; }
.v2-ring .r-ar { fill: none; stroke: var(--v2-ink); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
[dir="rtl"] .v2-ring .r-ar { transform: scaleX(-1); }
.v2-ring .spin { animation: v2spin 18s linear infinite; }
.v2-ring:hover { transform: rotate(-10deg) scale(1.08); }
@keyframes v2spin { to { transform: rotate(360deg); } }

/* the marquee under the hero */
.v2-mq-wrap { position: relative; z-index: 3; overflow: hidden; margin-top: -34px; padding: 18px 0; }
.v2-marquee { width: 106%; margin-inline-start: -3%; background: var(--v2-ink); color: var(--v2-sun); transform: rotate(-2deg); border-block: 3px solid var(--v2-ink); }
.v2-mq-track { display: flex; width: max-content; padding: 14px 0 10px; font: 400 clamp(22px, 2.8vw, 36px)/1.25 var(--v2-display); animation: v2marq 42s linear infinite; }
.v2-mq-track span { display: inline-flex; align-items: center; gap: 26px; padding-inline-end: 26px; white-space: nowrap; }
.v2-mq-track i { width: .62em; height: .62em; background: var(--v2-pink); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
@keyframes v2marq { to { transform: translateX(-50%); } }
[dir="rtl"] .v2-mq-track { animation-name: v2marq-rtl; }
@keyframes v2marq-rtl { to { transform: translateX(50%); } }

/* ---------- buttons: chunky, with a hard shadow that presses in ---------- */
body.bz-bold .bz-btn { border: 2.5px solid var(--v2-ink); border-radius: 999px; box-shadow: 4px 4px 0 var(--v2-ink); font-weight: 700; transition: transform .15s ease, box-shadow .15s ease, background-color .2s; }
body.bz-bold .bz-btn:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--v2-ink); }
body.bz-bold .bz-btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--v2-ink); }
body.bz-bold .bz-pri { background: var(--v2-ink); color: var(--v2-sun); }
body.bz-bold .bz-pri:hover { background: var(--v2-ink); }
body.bz-bold .bz-ghost, body.bz-bold .bz-waghost { background: var(--v2-paper); color: var(--v2-ink); }
body.bz-bold .bz-sunbtn { background: var(--v2-sun); color: var(--v2-ink); }
body.bz-bold .bz-wa { background: var(--v2-leaf); color: #fff; }
body.bz-bold .bz-link { text-decoration-color: var(--v2-sun-d); text-decoration-thickness: 3px; }

/* ---------- cards: thick outlines and offset shadows ---------- */
body.bz-bold .bz-glance a, body.bz-bold .bz-steps li, body.bz-bold .bz-plan, body.bz-bold .bz-feats li, body.bz-bold .bz-cards li, body.bz-bold .biz .faq details, body.bz-bold .faq details,
body.bz-bold .form-card, body.bz-bold .bz-quick, body.bz-bold .bz-toolband, body.bz-bold .bz-cta, body.bz-bold .fw-shot, body.bz-bold .bz-row-visual, body.bz-bold .bz-aud a {
  border: 2.5px solid var(--v2-ink); box-shadow: var(--v2-sh);
}
body.bz-bold .bz-glance a { background: var(--v2-paper); transition: transform .2s var(--v2-bounce), box-shadow .2s; }
body.bz-bold .bz-glance a:hover { transform: translate(-2px, -3px) rotate(-.6deg); box-shadow: 7px 8px 0 var(--v2-ink); border-color: var(--v2-ink); }
body.bz-bold .bz-glance .main a { background: var(--v2-sun); }
body.bz-bold .bz-glance .bz-ic, body.bz-bold .bz-ttl .bz-ic { border: 2px solid var(--v2-ink); }
body.bz-bold .bz-row-visual { border-radius: 30px; }
body.bz-bold .bz-row:nth-child(odd) .bz-row-visual { transform: rotate(-1deg); }
body.bz-bold .bz-row:nth-child(even) .bz-row-visual { transform: rotate(1deg); }
body.bz-bold .bz-tag { background: var(--v2-ink); color: var(--v2-sun); transform: rotate(-3deg); box-shadow: var(--v2-sh-sm); }
body.bz-bold .bz-new li { border: 2px solid var(--v2-ink); box-shadow: var(--v2-sh-sm); }
body.bz-bold .bz-steps li { background: var(--v2-paper); }
body.bz-bold .bz-num { border: 2px solid var(--v2-ink); box-shadow: var(--v2-sh-sm); transform: rotate(-6deg); font-family: var(--v2-display); font-size: 1.3rem; font-weight: 400; }
body.bz-bold .bz-plan { background: var(--v2-paper); }
body.bz-bold .bz-plan-main { background: var(--v2-sun); transform: translateY(-8px) rotate(-.6deg); box-shadow: 8px 9px 0 var(--v2-ink); }
body.bz-bold .bz-price { font-size: 2.4rem; color: var(--v2-ink); }
body.bz-bold .bz-toolband { background: var(--v2-sun); }
body.bz-bold .bz-cta { background: var(--v2-ink); }
body.bz-bold .fw-band { background: var(--v2-peach); border-block: 3px solid var(--v2-ink); }
body.bz-bold .fw-tag { border: 2px solid var(--v2-ink); box-shadow: var(--v2-sh-sm); }
body.bz-bold .fw-name { font-family: var(--v2-display); font-weight: 400; font-size: clamp(1.8rem, 3.2vw, 2.6rem); line-height: 1.15; color: var(--v2-ink); }
[dir="rtl"] body.bz-bold .fw-name { line-height: 1.4; }
body.bz-bold .bz-aud a { box-shadow: var(--v2-sh-sm); }
body.bz-bold .faq details[open] { border-color: var(--v2-ink); background: var(--v2-paper); }

/* the burst on the free plan */
body.bz-bold .bz-plan { position: relative; }
.v2-burst { position: absolute; z-index: 2; top: -30px; inset-inline-end: -22px; width: 92px; aspect-ratio: 1; transform: rotate(10deg); }
.v2-burst svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(3px 4px 0 var(--v2-ink)); }
.v2-burst polygon { fill: var(--v2-pink); stroke: var(--v2-ink); stroke-width: 5; stroke-linejoin: round; }
.v2-burst text { font: 400 38px var(--v2-display); fill: var(--v2-ink); text-anchor: middle; }

/* ---------- sections ---------- */
body.bz-bold .bz-alt { background: var(--v2-sun-soft); }
body.bz-bold .bz-alt::before { background: radial-gradient(circle at 12px 0, var(--v2-cream) 11px, transparent 11.5px) 0 0 / 24px 14px repeat-x; }
body.bz-bold .bz-alt::after { background: radial-gradient(circle at 12px 0, var(--v2-sun-soft) 11px, transparent 11.5px) 0 0 / 24px 14px repeat-x; }

/* ---------- phones ---------- */
@media (max-width: 900px) {
  body.bz-bold .bz-anim { transform: none; box-shadow: 6px 6px 0 var(--v2-ink); }
  .v2-ring { width: 100px; inset-inline-start: auto; inset-inline-end: -6px; top: -30px; bottom: auto; }   /* phones: the top corner, clear of the caption and the pause button */
  body.bz-bold .bz-row:nth-child(n) .bz-row-visual { transform: none; }
  body.bz-bold .bz-plan-main { transform: none; }
}
@media (max-width: 560px) {
  body.bz-bold .bz-hero h1 { font-size: clamp(2rem, 8.6vw, 2.7rem); }
  body.bz-home .bz-hero h1 { font-size: clamp(2.4rem, 11vw, 3.2rem); }
  .v2-mq-track { font-size: 22px; }
  .v2-burst { width: 78px; top: -24px; inset-inline-end: -8px; }
}
@media (prefers-reduced-motion: reduce) {
  .v2-ring .spin, .v2-mq-track { animation: none; }
  .v2-ring, body.bz-bold .bz-glance a, body.bz-bold .bz-btn { transition: none; }
}

/* ---------- the bold look: the request forms (the full one at #join and the quick one in the hero) ---------- */
body.bz-bold .form-card { padding: clamp(22px, 4vw, 40px); border-radius: 28px; background: #fff; }
body.bz-bold .bz-form-sub { color: var(--v2-ink); font-weight: 600; }
body.bz-bold .form-grid { gap: 18px 16px; }
body.bz-bold .field label, body.bz-bold .checks legend { color: var(--v2-ink); font-weight: 700; }
body.bz-bold .field input, body.bz-bold .field select, body.bz-bold .field textarea {
  min-height: 54px; border: 2px solid var(--v2-ink); border-radius: 14px; background: var(--v2-paper); color: var(--v2-ink); font-weight: 500;
  transition: box-shadow .15s ease, transform .15s ease, background-color .15s;
}
body.bz-bold .field textarea { min-height: 130px; }
body.bz-bold .field input::placeholder, body.bz-bold .field textarea::placeholder { color: #A08A6A; }
body.bz-bold .field input:focus, body.bz-bold .field select:focus, body.bz-bold .field textarea:focus {
  outline: none; background: #fff; border-color: var(--v2-ink); box-shadow: 4px 4px 0 var(--v2-sun-d); transform: translate(-1px, -1px);
}
body.bz-bold .field input:user-invalid, body.bz-bold .field select:user-invalid { border-color: #C92A2A; box-shadow: 4px 4px 0 #F4B4B4; }
body.bz-bold .field select {
  appearance: none; -webkit-appearance: none; padding-inline-end: 46px; cursor: pointer;
  background: var(--v2-paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233A280D' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center / 18px;
}
[dir="rtl"] body.bz-bold .field select { background-position: left 16px center; }
/* the services: chunky chips that turn yellow when picked */
body.bz-bold .checks { gap: 10px; }
body.bz-bold .checks .check {
  gap: 9px; padding: 8px 14px; border: 2px solid var(--v2-ink); border-radius: 999px; background: var(--v2-paper); color: var(--v2-ink); font-weight: 600; font-size: .95rem;
  box-shadow: 3px 3px 0 var(--v2-ink); transition: transform .12s ease, box-shadow .12s ease, background-color .15s;
}
body.bz-bold .checks .check:hover { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--v2-ink); }
body.bz-bold .checks .check:has(input:checked) { background: var(--v2-sun); }
body.bz-bold .checks .check:has(input:focus-visible) { outline: 3px solid var(--v2-ink); outline-offset: 3px; }
body.bz-bold .checks input { width: 20px; height: 20px; accent-color: var(--v2-ink); }
/* sending */
body.bz-bold .form-foot { gap: 14px 18px; }
body.bz-bold .form-foot .bz-btn { min-height: 58px; padding-inline: 34px; font-size: 1.08rem; }
body.bz-bold .form-status { border: 2px solid var(--v2-ink); box-shadow: 3px 3px 0 var(--v2-ink); font-weight: 600; }
body.bz-bold .bz-quick .bz-btn { min-height: 54px; }
@media (max-width: 560px) { body.bz-bold .form-foot .bz-btn { width: 100%; } }
body.bz-bold .qr-form, body.bz-bold .qr-preview { border: 2.5px solid var(--v2-ink); box-shadow: var(--v2-sh); }   /* the free QR tool */

/* ---------- the bold look on phones: a tighter hero (the landing page's breadcrumbs go, the video box is smaller and centred,
   the sticker sits on the box's corner instead of over the headline) ---------- */
@media (max-width: 900px) {
  body.bz-bold .bz-hero { padding-top: 22px; }
  body.bz-home .bz-hero .crumbs { display: none; }
  body.bz-bold .bz-pill { margin-top: 4px; }
  body.bz-bold .bz-hero h1 { margin-top: 14px; }
  body.bz-bold .bz-visual { margin-top: 26px; }
  body.bz-bold .bz-anim { width: min(100%, 330px); margin-inline: auto; border-radius: 26px; box-shadow: 6px 6px 0 var(--v2-ink); }
  .v2-ring { width: 84px; top: -24px; inset-inline-end: max(-4px, calc(50% - 165px - 26px)); }
  body.bz-bold .bz-lede { margin-top: 26px; font-size: 1rem; line-height: 1.75; }
  body.bz-bold .bz-quick { margin-top: 22px; }
  body.bz-bold .bz-ticks { margin-top: 18px; }
}
@media (max-width: 380px) {
  body.bz-bold .bz-anim { width: 100%; }
  .v2-ring { width: 74px; inset-inline-end: -4px; }
}

/* ---------- the request form: optional fields say so, and the plan picked on a card shows as a chip ---------- */
.opt { margin-inline-start: 4px; padding: 1px 8px; border-radius: 999px; background: #F1E7D2; color: #7A6447; font-size: .74rem; font-weight: 600; vertical-align: 2px; }
.bz-chosen { display: flex; align-items: center; gap: 8px; width: fit-content; margin: 0 0 16px; padding: 6px 6px 6px 14px; border-radius: 999px; background: var(--bz-sun); color: var(--bz-pri-2); font-weight: 600; }
[dir="rtl"] .bz-chosen { padding: 6px 14px 6px 6px; }
.bz-chosen[hidden] { display: none; }
.bz-chosen button { width: 28px; height: 28px; border-radius: 50%; border: 0; background: var(--bz-pri-2); color: var(--bz-sun); font-size: 1.1rem; line-height: 1; cursor: pointer; }
body.bz-bold .bz-chosen { border: 2px solid var(--v2-ink); box-shadow: 3px 3px 0 var(--v2-ink); }
body.bz-bold .bz-form-sub b { color: var(--v2-leaf); }

/* ---------- Didu, everywhere on the bold pages ---------- */
@keyframes diduFloat { 50% { transform: translateY(-7px) rotate(-3deg); } }
@keyframes diduSway { 50% { transform: rotate(5deg); } }
/* the hero: Didu points at the video from its top corner (the sticker has the other corner) */
.v2-didu { position: absolute; z-index: 5; top: -54px; inset-inline-end: -26px; width: clamp(110px, 10vw, 150px); height: auto; filter: drop-shadow(3px 4px 0 rgba(58, 40, 13, .35)); animation: diduFloat 3.2s ease-in-out infinite; pointer-events: none; }
[dir="rtl"] .v2-didu { transform: scaleX(-1); animation-name: diduFloatR; }
@keyframes diduFloatR { 0%, 100% { transform: scaleX(-1); } 50% { transform: scaleX(-1) translateY(-7px) rotate(3deg); } }
/* the marquee: Didu between the services */
.v2-mq-track img { width: 1.15em; height: 1.15em; flex: none; }
/* the section heads of the landing page: a Didu for each */
body.bz-home :is(#services, #work, #plans, #faq) > .wrap { position: relative; }
body.bz-home :is(#services, #work, #plans, #faq) > .wrap::before {
  content: ""; position: absolute; z-index: 1; top: -6px; inset-inline-end: 0; width: clamp(96px, 10vw, 140px); aspect-ratio: 1;
  background: url("/img/mascot/didu-search.svg") center / contain no-repeat; animation: diduFloat 3.6s ease-in-out infinite; pointer-events: none;
}
body.bz-home #work > .wrap::before { background-image: url("/img/mascot/didu-point.svg"); }
body.bz-home #plans > .wrap::before { background-image: url("/img/mascot/didu-party.svg"); }
body.bz-home #faq > .wrap::before { background-image: url("/img/mascot/didu.svg"); }
/* the form: a bigger Didu that sways */
body.bz-bold .bz-join-copy img { width: clamp(150px, 16vw, 200px); height: auto; transform-origin: 50% 100%; animation: diduSway 2.8s ease-in-out infinite; }
/* the footer */
.bz-foot-didu { display: block; width: 110px; height: auto; margin-top: 18px; transform-origin: 50% 100%; animation: diduSway 3.4s ease-in-out infinite; }
@media (max-width: 900px) {
  .v2-didu { width: 86px; top: auto; bottom: -50px; inset-inline-end: auto; inset-inline-start: max(-8px, calc(50% - 165px - 40px)); }
  body.bz-home .bz-visual { margin-bottom: 44px; }   /* room for Didu under the video, clear of the text below */
  body.bz-home :is(#services, #work, #plans, #faq) > .wrap::before { position: static; display: block; width: 92px; margin: 0 auto 8px; }
}
@media (max-width: 700px) { .bz-foot-didu { margin-inline: auto; } }
@media (prefers-reduced-motion: reduce) {
  .v2-didu, body.bz-home :is(#services, #work, #plans, #faq) > .wrap::before, body.bz-bold .bz-join-copy img, .bz-foot-didu { animation: none; }
}