/* ServiceBuddy brand layer: the single source of brand tokens for the site, console, demos and widgets.
   Source of truth: brand-kit/ (ServiceBuddy_Brand_Guidelines.pdf v2.0) · rules summarised in docs/brand.md.
   Load it LAST on every page so it wins over older per-page styles.

   Palette: Buddy Navy #0B1F3A (primary) · Signal Orange #FF7A1A (accent) · Cloud White #FFFFFF
            Blush Pink #FFB3C1 (micro-accent only) · Mist #E9ECF1 (neutral surface) · Sky Ink #B8C8E4 (secondary text on navy)
   Contrast: white on orange FAILS (2.6:1) → orange surfaces always carry NAVY text (6.3:1).
             Orange text on white only for large display text, eyebrows and highlights; body copy is navy.
   Type: Fredoka SemiBold for display (headings, numbers, buttons), Nunito for reading. Noto fills other scripts. */
:root {
  --sb-navy: #0B1F3A; --sb-orange: #FF7A1A; --sb-white: #FFFFFF; --sb-blush: #FFB3C1; --sb-mist: #E9ECF1; --sb-sky: #B8C8E4;
  --sb-navy-2: #13294d; --sb-orange-soft: #FFF1E6;
  --sb-display: "Fredoka", "Noto Sans Arabic", "Noto Sans Thai", "Noto Sans Devanagari", "Noto Sans SC", system-ui, sans-serif;
  --sb-body: "Nunito", "Noto Sans Arabic", "Noto Sans Thai", "Noto Sans Devanagari", "Noto Sans SC", system-ui, -apple-system, sans-serif;

  /* public site tokens (site.css) mapped onto the brand */
  --navy: var(--sb-navy); --navy-2: var(--sb-navy-2); --ink: var(--sb-navy);
  --saffron: var(--sb-orange); --coral: var(--sb-orange); --accent: var(--sb-orange);
  --grad: linear-gradient(135deg, #FF7A1A, #FF9545);
  --line: #E3E7EE; --paper-2: #F4F6F9;
  --serif: var(--sb-display); --sans: var(--sb-body);
}
html[lang="ar"] body, html[lang="th"] body, html[lang="hi"] body, html[lang="zh-hans"] body { font-family: var(--sb-body); }
h1, h2, h3, .page-title, .stats b, .kpi { font-family: var(--sb-display); font-weight: 600; letter-spacing: -.01em; }

/* logos: official artwork only (never rebuilt or retyped) */
.brand-logo { display: block; height: 34px; width: auto; }
.logo .brand-logo { height: 34px; } .logo.small .brand-logo { height: 28px; }
.brand-mark { width: 32px; height: 32px; flex: none; border-radius: 0; display: block; }

/* orange surfaces carry navy text (white on orange fails WCAG) */
.btn.lg, .hero .btn, .final .btn, .market-cta .btn, .final .btn, .slide:hover .slide-info .btn,
.demo-chat .dc-bar [data-handover], .demo-chat form .btn, .pager-mkt button.on, .mf-active, .bubble-a .retry,
.step span, a.tile:hover .tile-cta, .pc-ph, .sbg-btn, .pf-avatar { color: var(--sb-navy) !important; }
.btn.lg, .hero .btn, .final .btn, .market-cta .btn, .demo-chat form .btn, .sbg-btn { background: var(--sb-orange) !important; box-shadow: 0 8px 22px rgba(255,122,26,.25) !important; }
.btn.lg:hover, .hero .btn:hover, .final .btn:hover, .market-cta .btn:hover, .demo-chat form .btn:hover, .sbg-btn:hover { background: #FF8A33 !important; }
.btn, .sbg-btn { font-family: var(--sb-display); font-weight: 600; }

/* console (console.css) mapped onto the brand: navy for actions and links, orange for highlights */
.console-brand, body.console {
  --accent: var(--sb-navy); --accent-ink: #fff; --accent-soft: var(--sb-orange-soft); --side: var(--sb-navy); --side-ink: var(--sb-sky);
  --sans: var(--sb-body);
}
body.console .side-brand { display: block; padding: 6px 8px 14px; } body.console .side-brand .brand-logo { height: 30px; }
body.console .side-role { margin: -6px 8px 12px; font: 700 10.5px var(--sb-display); letter-spacing: .12em; text-transform: uppercase; color: var(--sb-orange); }
body.console .logo.ws { background: rgba(255,255,255,.06); border-radius: 12px; padding: 8px 10px; margin: 0 0 12px; }
body.console .auth .logo .brand-logo { height: 38px; margin-bottom: 4px; }
body.console .nav a.on { box-shadow: inset 3px 0 0 var(--sb-orange); }
body.console h1, body.console h2 { font-family: var(--sb-display); font-weight: 600; }
body.console .btn { font-family: var(--sb-display); font-weight: 600; }
.mascot-hero { display: block; margin: 0 auto 10px; width: 180px; height: auto; filter: drop-shadow(0 14px 26px rgba(11,31,58,.16)); }
body.console .ws-exit { display: inline-block; margin-top: 4px; font-size: 11.5px; color: var(--sb-sky); text-decoration: underline; }
/* one-click demo booking for signed-in guests */
.quick-book { display: flex; flex-direction: column; gap: 14px; }
.qb-who { display: flex; gap: 14px; align-items: center; padding: 14px; background: var(--paper-2); border-radius: 16px; }
.qb-who b { display: block; font-family: var(--sb-display); font-size: 18px; } .qb-who small { display: block; color: var(--ink-2); font-size: 13.5px; }
.qb-av { width: 54px; height: 54px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; flex: none; background: var(--sb-orange); color: var(--sb-navy); font: 600 22px var(--sb-display); }
.qb-av img { width: 100%; height: 100%; object-fit: cover; }
.qb-note { margin: 0; font-weight: 600; }
.qb-when { display: flex; flex-wrap: wrap; gap: 8px; }
.qb-when input { position: absolute; opacity: 0; }
.qb-when span { display: inline-block; padding: 9px 16px; border: 1.5px solid var(--line); border-radius: 999px; cursor: pointer; font-weight: 700; }
.qb-when input:checked + span { border-color: var(--sb-navy); background: var(--sb-navy); color: #fff; }
.qb-when input:focus-visible + span { outline: 3px solid var(--sb-orange); outline-offset: 2px; }
.qb-more summary { cursor: pointer; color: var(--ink-2); font-weight: 600; } .qb-more textarea { width: 100%; margin-top: 8px; }
.qb-done { margin: 0; padding: 14px; border-radius: 14px; background: #ecfdf3; color: #166534; font-weight: 700; }
.quick-book .btn.lg { align-self: flex-start; }
/* Meet Buddy: interactive 3D mascot (model-viewer loads only when the section scrolls into view) */
.meet-buddy { display: grid; grid-template-columns: minmax(260px, 420px) 1fr; gap: 36px; align-items: center; margin-bottom: 44px; }
.mb-stage { position: relative; aspect-ratio: 1; border-radius: 28px; overflow: hidden;
  background: radial-gradient(60% 55% at 50% 45%, rgba(255,122,26,.22), transparent 70%), linear-gradient(160deg, #0B1F3A, #13294d); }
.mb-stage model-viewer, .mb-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; --poster-color: transparent; background: transparent; }
.mb-poster { padding: 8%; } .mb-stage.ready .mb-poster { opacity: 0; transition: opacity .4s; }
.mb-hint { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); font: 600 12.5px var(--sb-body); color: var(--sb-sky);
  background: rgba(11,31,58,.6); padding: 5px 12px; border-radius: 999px; white-space: nowrap; }
.mb-copy h2 { margin-top: 0; } .mb-copy .btn { margin-top: 10px; }
@media (max-width: 860px) { .meet-buddy { grid-template-columns: 1fr; } .mb-stage { max-width: 420px; margin: 0 auto; width: 100%; } }

/* Solutions: 2 consumer + 6 enterprise packages */
.sol-group { margin-top: 28px; }
.sol-group-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.sol-group-head p { margin: 0; color: var(--ink-2); }
.sol-pill { font: 600 13px var(--sb-display); letter-spacing: .06em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; }
.sol-pill.consumer { background: var(--sb-orange); color: var(--sb-navy); } .sol-pill.enterprise { background: var(--sb-navy); color: #fff; }
.sol-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.sol-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 960px) { .sol-grid, .sol-grid.two { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .sol-grid, .sol-grid.two { grid-template-columns: 1fr; } }
.sol-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 22px; border-radius: 20px; background: var(--card, #fff);
  border: 1px solid var(--line); box-shadow: var(--shadow); color: var(--ink); text-decoration: none; transition: transform .15s, box-shadow .15s, border-color .15s; overflow: hidden; }
.sol-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: hsl(var(--h) 80% 55%); }
.sol-card.consumer { background: linear-gradient(180deg, #FFF6EE, #fff 60%); }
.sol-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--sb-orange); }
.sol-icon { font-size: 28px; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; background: hsl(var(--h) 80% 96%); }
.sol-card b { font: 600 20px/1.25 var(--sb-display); margin-top: 6px; }
.sol-card p { margin: 0; color: var(--ink-2); line-height: 1.5; flex: 1; }
.sol-meta { font-size: 13px; color: var(--muted); font-weight: 700; }
.sol-go { font-style: normal; font-weight: 700; color: var(--sb-navy); font-family: var(--sb-display); }
/* solution page */
.sol-hero { background: radial-gradient(700px 360px at 85% 0%, hsl(var(--h) 90% 92% / .8), transparent 70%); }
.sol-hero-in { display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px; align-items: start; }
@media (max-width: 900px) { .sol-hero-in { grid-template-columns: 1fr; } }
.sol-hero .eyebrow a { color: inherit; }
.sol-outcomes { list-style: none; padding: 0; margin: 18px 0 24px; display: grid; gap: 10px; }
.sol-outcomes li { position: relative; padding-inline-start: 32px; font-size: 17px; line-height: 1.5; }
.sol-outcomes li::before { content: "✓"; position: absolute; inset-inline-start: 0; top: 0; width: 22px; height: 22px; border-radius: 50%;
  background: var(--sb-orange); color: var(--sb-navy); font-weight: 800; font-size: 13px; display: grid; place-items: center; }
.sol-facts { background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 22px; box-shadow: var(--shadow); display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sol-facts b { display: block; font: 600 34px/1 var(--sb-display); color: var(--sb-navy); } .sol-facts span { color: var(--ink-2); font-size: 14px; }
.sol-facts .sol-data { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 12px; }
.sol-facts .sol-data span { font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 12px; color: var(--muted); }
.sol-facts .sol-data p { margin: 4px 0 0; }
.sol-stores { display: flex; flex-wrap: wrap; gap: 10px; }
.sol-store { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); }
.sol-store small { color: var(--muted); } .sol-store:hover { border-color: var(--sb-orange); }
/* home numbers: three meaningful facts only */
.wrap.stats { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1000px; }
@media (max-width: 720px) { .wrap.stats { grid-template-columns: 1fr; } }
.how-video { max-width: 920px; margin: 8px auto 28px; border-radius: 22px; overflow: hidden; background: var(--sb-navy); box-shadow: var(--shadow-lg); aspect-ratio: 16 / 9; }
.how-video video { width: 100%; height: 100%; display: block; object-fit: cover; }

/* demo videos: landscape 16:9, vertical reels in a phone-shaped frame */
.sb-video { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.sb-video-frame { border-radius: 22px; overflow: hidden; background: var(--sb-navy); box-shadow: var(--shadow-lg); aspect-ratio: 16 / 9; }
.sb-video.vertical .sb-video-frame { aspect-ratio: 9 / 16; border-radius: 28px; border: 6px solid var(--sb-navy); max-width: 320px; width: 100%; margin: 0 auto; }
.sb-video video { width: 100%; height: 100%; display: block; object-fit: cover; background: var(--sb-navy); }
.sb-video figcaption { text-align: center; } .sb-video figcaption b { display: block; font: 600 17px var(--sb-display); }
.sb-video figcaption span { color: var(--ink-2); font-size: 14px; }
.sb-video.vertical figcaption { max-width: 320px; margin: 0 auto; }
.sb-video-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; justify-items: center; align-items: start; }
.sb-video-row.single { grid-template-columns: minmax(0, 920px); justify-content: center; margin-top: 28px; }
.sb-video-row .sb-video:not(.vertical) { width: 100%; }
.how-video-wrap { max-width: 920px; margin: 8px auto 28px; }
.trust-with-video { display: grid; grid-template-columns: 300px 1fr; gap: 44px; align-items: center; }
.trust-with-video .trust { grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) { .trust-with-video { grid-template-columns: 1fr; } }
/* platform showcase */
.plat-layout { display: grid; grid-template-columns: 1fr 300px; gap: 36px; align-items: start; margin-top: 18px; }
.plat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.plat { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 18px; box-shadow: var(--shadow); }
.plat span { font-size: 24px; } .plat b { display: block; font: 600 17px var(--sb-display); margin: 6px 0 4px; color: var(--sb-navy); }
.plat p { margin: 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.5; }
@media (max-width: 1100px) { .plat-layout { grid-template-columns: 1fr; } .plat-video { max-width: 320px; margin: 0 auto; } }
@media (max-width: 820px) { .plat-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .plat-grid { grid-template-columns: 1fr; } }
/* the solutions heading is the home page's main heading, styled as a section title */
.sec-h1 { font-family: var(--sb-display); font-weight: 600; font-size: clamp(28px, 3.4vw, 42px); letter-spacing: -.015em; line-height: 1.12; margin: 0 0 12px; }
.sec-h1::after { content: ""; display: block; width: 56px; height: 4px; border-radius: 4px; margin-top: 12px; background: var(--grad); }
.sol-cta { display: flex; gap: 12px; flex-wrap: wrap; margin: 18px 0 6px; }

/* sales brochure downloads (solutions, book a demo) */
.brochures { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; justify-content: center; margin: 22px 0 0; }
.brochures-label { font-weight: 700; color: var(--sb-navy, #0B1F3A); }
.brochures a small { opacity: .7; font-weight: 500; margin-inline-start: 4px; }
.brochures.left { justify-content: flex-start; }