/* ==========================================================================
   Holty shared chrome: header + Products panel + phone menu, language
   switcher, #demo band + AI strip, "Latest from our blog" row, footer,
   contact modal, skip link.

   ONE source for every page that the server renders through server/chrome.ts
   (homepage, product pages, About x7, blog). Loaded by <!-- @CHROME:HEAD -->
   as /assets/chrome.css, before the page's own <style>, so a page can still
   override a token. Pages must NOT restyle these components: delete the
   matching blocks from a ported design page instead (see the build CONTRACT).

   Ported from the redesign's product pages (overview/patient-app.html):
   "NAV (shared shell)", "NAV: Products dropdown", "Language switcher",
   "PRODUCTS MENU", the light-pass tile, "Mobile menu (phones)", "Final CTA
   band", the AI strip, "LATEST FROM BLOG", "Footer", plus the homepage's
   contact modal. Live fixes kept: --accent-text for small green text, the
   Safari-safe skip link, the Twemoji flag font, LinkedIn/Instagram icons.
   ========================================================================== */

/* Keyboard focus never lands under the fixed header (WCAG 2.4.11): reverse
   tabbing scrolled focused links and FAQ summaries flush to the top, behind the
   79-85px header. A scroll margin on the focused element only, so anchor jumps
   (#recover, the All-in-One map, #privacy) keep their designed positions. */
:where(main, footer) :focus { scroll-margin-top: calc(96px + env(safe-area-inset-top)); }

/* Metric-matched fallback for Inter. Arial (Arial Bold for 600-800) is scaled
   per weight to Inter's average glyph width and given Inter's ascent/descent, so
   text laid out before the Inter web font arrives keeps (almost) the same line
   breaks and the font swap does not push the hero CTA and mockups down (CLS).
   Every page font stack lists it right after 'Inter': server/chrome.ts adds it
   to the page CSS of chrome pages, the blog templates name it directly.
   Widths measured against the Google Fonts Inter on Latin and Cyrillic copy. */
@font-face { font-family: 'Inter Fallback'; font-style: normal; font-weight: 100 449; src: local('Arial'), local('ArialMT'); size-adjust: 107.4%; ascent-override: 90.20%; descent-override: 22.46%; line-gap-override: 0%; unicode-range: U+0000-04FF, U+2000-206F, U+20A0-20CF, U+2100-214F, U+2212; }
@font-face { font-family: 'Inter Fallback'; font-style: normal; font-weight: 450 549; src: local('Arial'), local('ArialMT'); size-adjust: 108.7%; ascent-override: 89.12%; descent-override: 22.19%; line-gap-override: 0%; unicode-range: U+0000-04FF, U+2000-206F, U+20A0-20CF, U+2100-214F, U+2212; }
@font-face { font-family: 'Inter Fallback'; font-style: normal; font-weight: 550 649; src: local('Arial Bold'), local('Arial-BoldMT'); size-adjust: 101.5%; ascent-override: 95.44%; descent-override: 23.76%; line-gap-override: 0%; unicode-range: U+0000-04FF, U+2000-206F, U+20A0-20CF, U+2100-214F, U+2212; }
@font-face { font-family: 'Inter Fallback'; font-style: normal; font-weight: 650 749; src: local('Arial Bold'), local('Arial-BoldMT'); size-adjust: 102.75%; ascent-override: 94.28%; descent-override: 23.47%; line-gap-override: 0%; unicode-range: U+0000-04FF, U+2000-206F, U+20A0-20CF, U+2100-214F, U+2212; }
@font-face { font-family: 'Inter Fallback'; font-style: normal; font-weight: 750 1000; src: local('Arial Bold'), local('Arial-BoldMT'); size-adjust: 104.3%; ascent-override: 92.88%; descent-override: 23.13%; line-gap-override: 0%; unicode-range: U+0000-04FF, U+2000-206F, U+20A0-20CF, U+2100-214F, U+2212; }

:root {
  --dark: #121624;
  --accent: #3FBA73;
  --accent-text: #177A45;
  --accent-hover: #2F8F58;
  --accent-light: #E8F8EF;
  --secondary: #46B4CD;
  --secondary-hover: #2F90A8;
  --secondary-text: #226E80;
  --secondary-light: #E5F4F9;
  --white: #FFFFFF;
  --gray-50: #FBFBFD;
  --gray-100: #F5F5F7;
  --gray-200: #E6E6EA;
  --separator: #D2D2D7;
  --gray-900: #121624;
  --gray-700: #121624;
  --gray-400: #121624;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 28px;
  --radius-hero: 32px;
  --shadow-soft: 0 1px 2px rgba(18,22,36,0.04), 0 10px 24px rgba(18,22,36,0.08), 0 30px 60px rgba(18,22,36,0.07);
  --shadow-layered: 0 1px 2px rgba(18,22,36,0.05), 0 12px 28px rgba(18,22,36,0.09), 0 36px 72px rgba(18,22,36,0.08);
  --shadow-minimal: 0 2px 10px rgba(18,22,36,0.06);
}

/* Zero-specificity reset for the chrome only, so it renders the same on a page
   that has no global reset. Every explicit rule below wins over it. */
:where(.site-nav, .site-footer, .contact-modal, .chrome-demo, .blog-latest, .skip-link) :where(*, *::before, *::after) { box-sizing: border-box; margin: 0; padding: 0; }
:where(.site-nav, .site-footer, .contact-modal, .chrome-demo, .blog-latest) { box-sizing: border-box; }
:where(.site-nav, .site-footer, .contact-modal, .chrome-demo, .blog-latest) :where(a, button) { -webkit-tap-highlight-color: rgba(0,0,0,0); }
:where(.site-nav, .site-footer) img { max-width: 100%; }

/* ── SKIP LINK (live Safari-safe version: clipped, not translated off-screen) ── */
.skip-link { position: absolute; top: 0; left: 0; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; background: var(--dark); color: #fff; text-decoration: none; font-weight: 600; font-size: 14px; z-index: 300; border-radius: 0 0 8px 0; }
.skip-link:focus { width: auto; height: auto; padding: 12px 20px; overflow: visible; clip: auto; clip-path: none; outline: 3px solid var(--accent); outline-offset: -3px; }
main#main:focus { outline: none; }

/* ── NAV (shared shell) ── */
.site-nav { position: fixed; top: 0; left: 0; width: 100%; z-index: 100; background: rgba(255,255,255,0.92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid rgba(0,0,0,0.04); padding: max(18px, calc(env(safe-area-inset-top) + 8px)) env(safe-area-inset-right) 18px env(safe-area-inset-left); font-family: inherit; line-height: 1.6; }
.site-nav .nav-inner { max-width: 1264px; margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 24px; }
.site-nav .logo { text-decoration: none; display: flex; align-items: center; justify-self: start; }
.site-nav .logo img { height: 24px; width: auto; display: block; }
.site-nav .nav-links { display: contents; }
.site-nav .nav-center { display: flex; gap: 8px; align-items: center; justify-content: center; }
.site-nav .nav-right { display: flex; gap: 8px; align-items: center; justify-self: end; }
.site-nav .nav-link { white-space: nowrap; text-decoration: none; font-size: 14px; font-weight: 500; color: var(--dark); padding: 8px 14px; border-radius: 8px; transition: background 0.15s, color 0.15s; }
.site-nav .nav-link:hover { background: var(--gray-50); color: var(--dark); }
.site-nav .nav-link.active { color: var(--accent-text); }
.site-nav .nav-cta { white-space: nowrap; flex-shrink: 0; background: linear-gradient(150deg, #54CB88 0%, #2F9E5B 100%); color: white; padding: 10px 24px; border-radius: 100px; text-decoration: none; font-weight: 600; font-size: 14px; transition: transform 0.2s, box-shadow 0.2s; margin-left: 8px; box-shadow: 0 6px 16px rgba(47,158,91,0.32), inset 0 1px 0 rgba(255,255,255,0.35); }
.site-nav .nav-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(47,158,91,0.42), inset 0 1px 0 rgba(255,255,255,0.4); }
/* RU labels are the longest; trim the inline nav spacing at desktop width only. */
@media (min-width: 1264px) {
  html[lang="ru"] .site-nav .nav-center { gap: 6px; }
  html[lang="ru"] .site-nav .nav-link { padding: 8px 11px; }
}

/* ── NAV: Products dropdown (open/close is JS-driven: .is-open) ── */
.nav-products { position: relative; display: inline-flex; }
.nav-trigger { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-family: inherit; font-size: 14px; font-weight: 500; color: var(--dark); background: transparent; border: 0; cursor: pointer; padding: 8px 14px; border-radius: 8px; transition: background 0.15s, color 0.15s; }
.nav-trigger:hover { background: var(--gray-50); }
.nav-trigger.active { color: var(--accent-text); }
.nav-trigger .nav-chevron { width: 9px; height: 6px; flex-shrink: 0; transition: transform 0.18s ease; }
.nav-products.is-open .nav-chevron { transform: rotate(180deg); }
.nav-panel { position: absolute; top: calc(100% + 14px); left: 50%; width: 660px; margin-left: -330px; padding: 8px; display: block; background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-md); box-shadow: var(--shadow-layered); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-6px); transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s; z-index: 120; }
/* Bridges the 14px gap so the pointer can travel from trigger to panel. */
.nav-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.nav-products.is-open .nav-panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); transition: opacity 0.18s ease, transform 0.18s ease; }
.nav-group-label { display: none; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.4px; color: var(--gray-400); padding: 12px 14px 6px; }
.nav-panel-row { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--radius-sm); text-decoration: none; transition: background 0.15s ease; }
.nav-panel-row:hover, .nav-panel-row[aria-current="page"] { background: var(--accent-light); }
.nav-panel-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--gray-100); color: var(--gray-700); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.15s ease, color 0.15s ease; }
.nav-panel-icon svg { width: 18px; height: 18px; }
.nav-panel-row:hover .nav-panel-icon, .nav-panel-row[aria-current="page"] .nav-panel-icon { background: var(--white); color: var(--accent); }
.nav-panel-name { display: block; font-size: 14px; font-weight: 600; color: var(--dark); letter-spacing: -0.01em; line-height: 1.6; transition: color 0.15s ease; }
.nav-panel-row:hover .nav-panel-name, .nav-panel-row[aria-current="page"] .nav-panel-name { color: var(--accent-text); }
.nav-panel-desc { display: block; font-size: 13.5px; color: var(--gray-700); line-height: 1.5; margin-top: 2px; text-wrap: pretty; }

/* PRODUCTS MENU: one 2-column list. All-in-One is the first row, marked by a green
   icon and a bold name (white row like the others, so it never looks like the
   current page). Descriptions wrap, never truncate. */
.nav-panel-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; min-width: 0; }
.nav-panel-row > span:last-child { min-width: 0; }
.nav-panel-row.is-aio .nav-panel-icon,
.nav-panel-row.is-aio:hover .nav-panel-icon,
.nav-panel-row.is-aio[aria-current="page"] .nav-panel-icon { background: linear-gradient(150deg, #54CB88 0%, #2F9E5B 100%); color: #fff; box-shadow: 0 6px 14px rgba(47,158,91,0.32), inset 0 1px 0 rgba(255,255,255,0.35); }
.nav-panel-row.is-aio .nav-panel-name { font-weight: 700; }

/* ── Language switcher (flag + code trigger, dropdown menu; no listbox role) ── */
@font-face { font-family: 'Twemoji Country Flags'; unicode-range: U+1F1E6-1F1FF; src: url('/assets/TwemojiCountryFlags.woff2') format('woff2'); font-display: swap; }
.lang-switch { position: relative; display: inline-flex; align-items: center; margin-left: 4px; font-family: inherit; }
.lang-switch-trigger { display: inline-flex; align-items: center; gap: 6px; background: var(--gray-100); border: 0; padding: 6px 10px 6px 12px; border-radius: 100px; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 700; color: #54565F; letter-spacing: 0.04em; transition: background 0.18s ease, color 0.18s ease; }
.lang-switch-trigger:hover { color: var(--dark); background: var(--gray-200); }
.lang-flag { display: inline-block; width: 18px; text-align: center; font-size: 14px; line-height: 1; font-family: 'Twemoji Country Flags', 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; }
.lang-chevron { width: 9px; height: 6px; margin-left: 2px; flex-shrink: 0; transition: transform 0.18s ease; }
.lang-switch[data-open="true"] .lang-chevron { transform: rotate(180deg); }
/* Closed: visibility hidden as well, so its 7 buttons are not invisible tab stops
   (visibility flips after the fade-out, and at once on open). */
.lang-switch-menu { position: absolute; top: calc(100% + 6px); right: 0; margin: 0; padding: 6px; list-style: none; background: var(--white); border: 1px solid var(--gray-200); border-radius: 12px; box-shadow: 0 8px 24px rgba(18, 22, 36, 0.10); min-width: 168px; z-index: 200; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-4px); transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s; }
.lang-switch[data-open="true"] .lang-switch-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); transition: opacity 0.18s ease, transform 0.18s ease; }
.lang-switch-menu li { margin: 0; }
.lang-switch-menu button { width: 100%; display: flex; align-items: center; gap: 10px; background: transparent; border: 0; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 500; color: var(--dark); text-align: left; letter-spacing: 0; transition: background 0.15s ease; }
.lang-switch-menu button:hover { background: var(--gray-50); }
.lang-switch-menu button[aria-pressed="true"] { background: var(--accent-light); color: var(--accent-text); font-weight: 600; }
.lang-switch-menu .lang-flag { font-size: 16px; }
.lang-switch-menu .lang-name { flex: 1; }

/* ── Burger + backdrop ── */
.nav-burger { display: none; background: transparent; border: 0; padding: 8px; cursor: pointer; border-radius: 8px; transition: background 0.15s; justify-self: end; }
.nav-burger:hover { background: var(--gray-50); }
.nav-burger span { display: block; width: 22px; height: 2px; background: var(--dark); border-radius: 2px; margin: 5px 0; transition: transform 0.25s ease, opacity 0.2s ease; transform-origin: center; }
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-backdrop { position: fixed; inset: 0; background: rgba(18,22,36,0.32); opacity: 0; pointer-events: none; transition: opacity 0.25s ease; z-index: 90; }
.nav-backdrop.open { opacity: 1; pointer-events: auto; }

/* ── Drawer (<= 1263px): the burger replaces the inline nav ── */
@media (max-width: 1263px) {
  .site-nav .nav-inner { display: flex; justify-content: space-between; }
  .nav-burger { display: block; min-width: 44px; min-height: 44px; padding: 11px; }
  .site-nav .nav-links {
    position: absolute; top: 100%; left: 0; right: 0;
    display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 16px;
    background: #FFFFFF; -webkit-backdrop-filter: none; backdrop-filter: none; isolation: isolate;
    border-top: 1px solid var(--gray-200);
    box-shadow: 0 18px 36px rgba(18, 22, 36, 0.10), 0 2px 6px rgba(18, 22, 36, 0.04);
    transform: translateY(-12px); opacity: 0; visibility: hidden;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease, visibility 0s linear 0.25s;
  }
  .site-nav .nav-links.open { transform: translateY(0); opacity: 1; visibility: visible; transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease; }
  /* The tablet drawer (tile + 6 products + 3 links + language + CTA) is taller
     than a landscape tablet and the page behind it is scroll-locked: let it scroll. */
  .site-nav .nav-links { max-height: calc(100dvh - var(--nav-h, 80px)); overflow-y: auto; overscroll-behavior: contain; }
  .site-nav .nav-center, .site-nav .nav-right { display: flex; flex-direction: column; align-items: stretch; gap: 6px; justify-self: auto; }
  .site-nav .nav-right { margin-top: 8px; }
  .site-nav .nav-link { padding: 12px 14px; font-size: 15px; border-radius: 10px; }
  .lang-switch { align-self: flex-start; margin-left: 0; margin-top: 8px; }
  /* In the drawer the menu opens upward, over the product list: opening down it
     covered the Request Demo button and, laid out while closed, added a blank
     scroll tail under it. The <= 768 sheet below turns it into a chip row. */
  .lang-switch-menu { top: auto; bottom: calc(100% + 6px); right: auto; left: 0; min-width: 200px; max-width: calc(100vw - 48px); transform: translateY(4px); }
  /* Set by chrome.js only when the drawer has too little room above the switcher
     (a short drawer, e.g. no Products list): the menu then opens in the flow under
     the trigger, so the drawer grows instead of the menu covering Request Demo. */
  .lang-switch--down { flex-direction: column; align-items: flex-start; }
  .lang-switch--down .lang-switch-menu { position: static; margin-top: 6px; transform: none; }
  .lang-switch-trigger { min-height: 44px; padding: 10px 14px; }
  .site-nav .nav-cta { margin: 4px 0 0; padding: 14px 22px; font-size: 14px; text-align: center; justify-content: center; display: inline-flex; align-items: center; min-height: 44px; }
  /* The homepage design draws its drawer/sheet CTA 4px shorter (product pages: 14px). */
  .site-nav--home .nav-cta { padding: 12px 22px; }
  .nav-products { display: block; width: 100%; order: -1; }
  .nav-trigger { display: none; }
  .nav-group-label { display: block; }
  /* visibility: inherit, never visible: a visible child of the closed (hidden)
     drawer stays clickable and focusable, so the invisible tile and rows used to
     catch taps on the page below and sit in the Tab order. No own transition, so
     it shows and hides exactly with the drawer. */
  .nav-panel { position: static; width: auto; margin: 0; padding: 0 0 6px; flex-direction: column; gap: 4px; transform: none; opacity: 1; visibility: inherit; pointer-events: inherit; transition: none; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
  .nav-panel::before { display: none; }
  .nav-panel-row { padding: 10px 14px; }
  .nav-panel-list { grid-template-columns: 1fr; }
  /* Scroll lock. chrome.js sets html.cj-menu-lock as well: on a page whose html
     has overflow-x: hidden (About, every design page) the body's overflow no
     longer reaches the viewport, so locking the body alone let the page scroll. */
  body.menu-open, html.cj-menu-lock { overflow: hidden; }
  /* A language menu left open while the window crossed 1264px (rotation,
     resize) must not stay tappable inside the closed, invisible drawer. */
  .site-nav .nav-links:not(.open) .lang-switch-menu { visibility: hidden; pointer-events: none; }
}

/* ── Mobile menu (phones): full-height sheet under the header ── */
@media (max-width: 768px) {
  .site-nav .nav-inner { padding: 0 16px; }
  body.menu-open .site-nav { background: #fff; border-bottom-color: var(--gray-200); }
  body.menu-open .nav-backdrop { display: none; }
  .site-nav .nav-links { position: absolute; top: 100%; left: 0; right: 0; height: calc(100dvh - var(--nav-h, 80px)); width: 100%; display: flex; flex-direction: column; gap: 0; padding: 0; background: #fff; border-top: 0; box-shadow: none; overflow: hidden; }
  /* Centred like the design while it fits; `safe` keeps the top reachable when the
     list is taller than a short phone (plain `center` clips it out of the scroll area). */
  .site-nav .nav-center { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 8px 16px 24px; gap: 2px; justify-content: flex-start; justify-content: safe center; }
  .nav-group-label { padding: 12px 4px 10px; }
  .nav-products, .nav-panel, .nav-panel-list { min-width: 0; max-width: 100%; }
  .nav-panel { width: auto !important; left: auto !important; margin: 0 !important; padding: 0 0 12px; gap: 8px; display: flex; flex-direction: column; }
  .nav-panel-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .nav-panel-row { flex-direction: column; align-items: flex-start; gap: 10px; padding: 12px; min-height: 92px; border-radius: 14px; border: 1px solid var(--gray-200); background: #fff; }
  .nav-panel-row[aria-current="page"] { background: var(--accent-light); border-color: rgba(63,186,115,0.35); }
  .nav-panel-desc { display: none; }
  .nav-panel-name { font-size: 14px; line-height: 1.3; }
  .site-nav .nav-link { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 4px; font-size: 16px; font-weight: 600; border-radius: 0; border-top: 1px solid var(--gray-200); }
  .site-nav .nav-link::after { content: ""; width: 8px; height: 8px; border-right: 2px solid #6C6E77; border-top: 2px solid #6C6E77; transform: rotate(45deg); margin-right: 6px; }
  .site-nav .nav-link:hover { background: transparent; }
  .site-nav .nav-right { margin: 0; flex-shrink: 0; flex-direction: column; gap: 12px; padding: 14px 16px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--gray-200); background: #fff; }
  .lang-switch { margin: 0; align-self: stretch; }
  .lang-switch-trigger { display: none; }
  /* visibility: inherit (see .nav-panel above): hidden with the closed sheet. */
  .lang-switch-menu { position: static; display: flex !important; gap: 6px; overflow-x: auto; scrollbar-width: none; min-width: 0; max-width: none; margin: 0; padding: 0; background: transparent; border: 0; box-shadow: none; opacity: 1; visibility: inherit; transform: none; pointer-events: inherit; transition: none; }
  .lang-switch-menu::-webkit-scrollbar { display: none; }
  .lang-switch-menu li { flex-shrink: 0; }
  .lang-switch-menu button { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--gray-200); background: #fff; font-size: 13px; font-weight: 600; white-space: nowrap; }
  .lang-switch-menu button[aria-pressed="true"] { background: var(--dark); border-color: var(--dark); color: #fff; }
  .site-nav .nav-cta { width: 100%; min-height: 50px; margin: 0; font-size: 15px; }
  .js-menu .nav-links .nav-panel-row, .js-menu .nav-links .nav-link { opacity: 0; transform: translateY(8px); transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.16,1,0.3,1); }
  .js-menu .nav-links.open .nav-panel-row, .js-menu .nav-links.open .nav-link { opacity: 1; transform: none; transition-delay: calc(var(--mi, 0) * 35ms + 60ms); }
}
@media (max-width: 768px) and (prefers-reduced-motion: reduce) { .js-menu .nav-links * { transition: none !important; opacity: 1 !important; transform: none !important; } }

/* ── #demo band: Get started card ──
   Section padding comes from the page's own `section` rule (each design page
   has its own rhythm); the :where() fallback only applies when a page has none. */
:where(.chrome-demo) { padding: 112px 32px; }
:where(.chrome-demo > .container) { max-width: 1200px; margin: 0 auto; }
.pricing.chrome-demo { background: radial-gradient(120% 80% at 50% 0%, rgba(63,186,115,0.10) 0%, rgba(70,180,205,0.07) 45%, var(--gray-50) 90%); }
.chrome-demo .pricing-card { max-width: 600px; margin: 0 auto; text-align: center; background: linear-gradient(180deg, #ffffff 0%, #f9fbfe 100%); border: 1px solid var(--gray-200); border-radius: var(--radius-hero); padding: 48px 44px; box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,0.9); display: block; }
/* Soft card (homepage and Retention Engine, stamped by renderChromeDemo): how
   those two designs (and the live homepage) render it - gray-50 fill, 36px
   padding, flex column so the Book a Demo button spans the card. */
.chrome-demo--soft .pricing-card { background: var(--gray-50); padding: 36px; display: flex; flex-direction: column; }
.chrome-demo .pricing-eyebrow { display: block; font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--accent-text); margin-bottom: 14px; }
.chrome-demo h2 { text-align: center; font-size: clamp(28px, 4.2vw, 42px); margin-bottom: 4px; color: var(--dark); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; text-wrap: balance; }
.chrome-demo .pricing-lead { font-size: 16px; color: var(--gray-700); line-height: 1.6; max-width: 460px; margin: 12px auto 26px; }
/* No-lead card (AI Intake): same space above the button as cards with a lead line. */
.chrome-demo h2 + .pricing-cta { margin-top: 26px; }
/* The homepage design breaks its #demo headline naturally ("...on your / numbers?"), so no balancing there. */
.chrome-demo--home h2 { text-wrap: wrap; }
.chrome-demo .pricing-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: linear-gradient(150deg, #54CB88 0%, #2F9E5B 100%); color: white; padding: 17px 38px; border-radius: 100px; font-size: 16px; font-weight: 600; text-decoration: none; transition: all 0.3s; box-shadow: 0 8px 22px rgba(47,158,91,0.34), inset 0 1px 0 rgba(255,255,255,0.4); }
.chrome-demo .pricing-cta:hover { transform: translateY(-2px); box-shadow: 0 16px 44px rgba(47,158,91,0.45), inset 0 1px 0 rgba(255,255,255,0.45); }
.chrome-demo .pricing-contact { font-size: 14px; color: var(--gray-700); margin-top: 18px; }
.chrome-demo .pricing-contact a { color: var(--accent-text); font-weight: 600; text-decoration: none; }
.chrome-demo .pricing-contact a:hover { text-decoration: underline; }
/* Reveal: chrome.js adds .cj-rise only to a card that is still below the fold,
   so the card is never hidden without the script that shows it again. */
.chrome-demo .pricing-card.cj-rise { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease-out, transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
.chrome-demo .pricing-card.cj-rise.in-view { opacity: 1; transform: translateY(0); }

/* AI strip: "Find out what AI thinks about Holty" */
.ai-ask { max-width: 600px; margin: 40px auto 0; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.ai-ask-label { font-size: 16px; font-weight: 600; color: var(--dark); letter-spacing: -0.01em; margin: 0; }
.ai-ask-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.ai-ask-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 9px 18px 9px 14px; border: 1px solid var(--separator); border-radius: 999px; background: #fff; color: var(--dark); font-size: 15px; font-weight: 600; line-height: 1.6; text-decoration: none; white-space: nowrap; transition: border-color 0.15s ease, background 0.15s ease; }
.ai-ask-btn:hover { border-color: var(--dark); background: var(--gray-100); }
.ai-ask-btn:focus-visible { outline: 3px solid var(--accent-text); outline-offset: 2px; }
.ai-ask-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
@media (max-width: 768px) {
  :where(.chrome-demo) { padding: 72px 20px; }
  .chrome-demo .pricing-card { padding: 36px 24px; }
  /* Soft variant only (as in those designs): the radial band compresses into a
     harsh band on a tall phone layout, so it fades top-down instead. The other
     product pages keep the radial band, like their designs. */
  .pricing.chrome-demo--soft { background: linear-gradient(180deg, rgba(63,186,115,0.10) 0%, rgba(70,180,205,0.06) 38%, var(--gray-50) 75%); }
  .chrome-demo--soft .pricing-card { padding: 36px; }
  .ai-ask { margin-top: 32px; }
}
/* Homepage card, small phones only (the design's 480px block). */
@media (max-width: 480px) {
  .chrome-demo--home .pricing-card { padding: 32px 20px; }
}

/* ── LATEST FROM BLOG ── */
.blog-latest { background: var(--white); padding: 120px 0 100px; }
.blog-latest-inner { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.blog-latest-head { max-width: 720px; margin: 0 auto 56px; text-align: center; }
.blog-latest-head h2 { font-size: clamp(28px, 3.4vw, 40px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; color: var(--dark); margin-bottom: 18px; text-wrap: balance; }
.blog-latest-head p { font-size: 17px; color: var(--gray-700); line-height: 1.65; }
.blog-latest-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 48px; }
.blog-latest-grid .card { display: flex; flex-direction: column; text-decoration: none; color: inherit; border-radius: var(--radius-lg); background: var(--white); border: 1px solid var(--gray-200); overflow: hidden; transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s ease, border-color 0.3s ease; }
.blog-latest-grid .card:hover { transform: translateY(-4px); border-color: var(--separator); box-shadow: var(--shadow-soft); }
.blog-latest-grid .card-cover { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.blog-latest-grid .card .ph { aspect-ratio: 16 / 10; position: relative; background: repeating-linear-gradient(135deg, #eef1f5 0 12px, #e7ebf1 12px 24px); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.blog-latest-grid .card .ph span { font-family: inherit; font-size: 11px; letter-spacing: 0.04em; color: var(--gray-400); background: rgba(255,255,255,0.7); padding: 4px 10px; border-radius: 100px; }
.blog-latest-grid .card-body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.blog-latest-grid .card h3 { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; color: var(--dark); margin: 0; overflow-wrap: anywhere; hyphens: auto; }
.blog-latest-grid .card:hover h3 { color: var(--accent-hover); }
.blog-latest-grid .card p { font-size: 14px; color: var(--gray-700); line-height: 1.6; margin: 0; }
.blog-latest-grid .meta-row { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--gray-400); margin-top: auto; padding-top: 6px; }
.blog-latest-grid .meta-row .dot { width: 3px; height: 3px; border-radius: 50%; background: #6C6E77; }
.blog-latest-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; text-align: center; }
.blog-latest-cta a { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; background: linear-gradient(150deg, #54CB88 0%, #2F9E5B 100%); color: #fff; border: 1px solid transparent; border-radius: 100px; text-decoration: none; font-weight: 600; font-size: 15px; letter-spacing: 0.01em; transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease; box-shadow: 0 6px 16px rgba(47,158,91,0.32), inset 0 1px 0 rgba(255,255,255,0.35); }
.blog-latest-cta a:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(47,158,91,0.42), inset 0 1px 0 rgba(255,255,255,0.4); }
.blog-latest-cta a.alt { background: #fff; color: var(--dark); border-color: var(--gray-200); box-shadow: none; }
.blog-latest-cta a.alt:hover { background: #fff; border-color: var(--dark); box-shadow: none; }
.blog-latest-empty { text-align: center; color: var(--gray-400); font-size: 15px; padding: 48px 0; }
@media (max-width: 900px) {
  .blog-latest { padding: 80px 0 72px; }
  .blog-latest-inner { padding: 0 20px; }
  .blog-latest-grid { grid-template-columns: 1fr; gap: 20px; margin-bottom: 40px; }
  .blog-latest-head { margin-bottom: 40px; }
}

/* ── FOOTER (live structure: logo, Product / Contact columns, socials, legal) ── */
.site-footer { background: #0F172A; color: rgba(255,255,255,0.4); padding: 56px 0 0; border-top: 0.5px solid rgba(255,255,255,0.08); line-height: 1.6; }
.site-footer .footer-inner { max-width: 1264px; margin: 0 auto; padding: 0 32px; }
.site-footer .footer-cols { display: grid; grid-template-columns: 1.5fr 1.1fr 1fr 1.2fr; gap: 40px; padding-bottom: 48px; border-bottom: 0.5px solid rgba(255,255,255,0.08); }
.site-footer .footer-brand { display: flex; flex-direction: column; gap: 14px; }
.site-footer .footer-logo { align-self: flex-start; }
.site-footer .footer-logo img { height: 24px; width: auto; opacity: 0.95; display: block; }
.site-footer .footer-tagline { font-size: 14px; color: rgba(255,255,255,0.5); line-height: 1.55; margin: 0; }
.site-footer .footer-eu-badge { display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,0.06); border: 0.5px solid rgba(255,255,255,0.12); border-radius: 20px; padding: 5px 11px; font-size: 13px; color: rgba(255,255,255,0.55); font-weight: 500; align-self: flex-start; }
.site-footer .footer-eu-badge svg { width: 16px; height: 12px; flex-shrink: 0; }
.site-footer .footer-col-head { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.4px; color: #94A3B8; margin: 0 0 16px; }
.site-footer .footer-col-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; }
.site-footer .footer-col-links a { font-size: 14px; color: #CBD5E1; text-decoration: none; transition: color 0.2s; }
.site-footer .footer-col-links a:hover { color: #fff; }
/* All-in-One: the whole platform, set apart from the single products by its icon and weight (no underline, which reads as "current page"). */

.site-footer .footer-col-links .footer-aio a { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 600; }
.site-footer .footer-aio svg { width: 16px; height: 16px; color: #3FBA73; flex-shrink: 0; }
.site-footer .footer-col-links .footer-aio a:hover { color: #fff; opacity: 0.85; }
@media (max-width: 1100px) { .site-footer .footer-cols { grid-template-columns: 1fr 1fr 1fr; } .site-footer .footer-brand { grid-column: 1 / -1; } }
.site-footer .footer-contact-email { font-size: 15px; font-weight: 500; color: #fff; text-decoration: none; display: block; margin-bottom: 14px; transition: opacity 0.2s; overflow-wrap: anywhere; }
.site-footer .footer-contact-email:hover { opacity: 0.8; }
.site-footer .footer-contact-phone { font-size: 14px; color: #fff; margin: 0 0 4px; }
.site-footer .footer-contact-num { white-space: nowrap; }
.site-footer .footer-contact-office { font-size: 13px; color: #94A3B8; margin: 0 0 14px; }
.site-footer .footer-social { display: flex; align-items: center; gap: 10px; }
.site-footer .footer-social a { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 6px; background: rgba(255,255,255,0.07); color: #94A3B8; text-decoration: none; transition: background 0.2s, color 0.2s; }
.site-footer .footer-social a:hover { background: rgba(255,255,255,0.14); color: #fff; }
.site-footer .footer-social svg { width: 15px; height: 15px; }
.site-footer .footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 20px 0; }
.site-footer .footer-bottom-left { font-size: 13px; color: #94A3B8; line-height: 1.6; }
.site-footer .footer-legal-links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.site-footer .footer-legal-links a { font-size: 13px; color: #94A3B8; text-decoration: none; transition: color .2s; }
.site-footer .footer-legal-links a:hover { color: #fff; }
@media (max-width: 768px) {
  .site-footer { padding: 40px 0 0; }
  .site-footer .footer-inner { padding: 0 20px; }
  .site-footer .footer-cols { grid-template-columns: 1fr 1fr; gap: 32px 24px; padding-bottom: 32px; }
  .site-footer .footer-brand { grid-column: 1 / -1; }
  .site-footer .footer-bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
}
@media (max-width: 360px) {
  .site-footer .footer-cols { grid-template-columns: 1fr; }
}

/* ── CONTACT MODAL (homepage variant) ── */
.contact-modal { position: fixed; inset: 0; z-index: 400; display: none; align-items: center; justify-content: center; padding: 24px; line-height: 1.6; }
.contact-modal.open { display: flex; }
.contact-modal-backdrop { position: absolute; inset: 0; background: rgba(18, 22, 36, 0.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: modal-fade 0.25s ease-out; }
.contact-modal-card { position: relative; background: var(--white); border-radius: var(--radius-lg); width: 100%; max-width: 480px; padding: 28px 32px 32px; box-shadow: 0 24px 60px rgba(18,22,36,0.25); z-index: 1; animation: modal-pop 0.28s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-pop { from { opacity: 0; transform: translateY(12px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
.contact-modal-close { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; border: none; background: transparent; cursor: pointer; color: #54565F; display: flex; align-items: center; justify-content: center; border-radius: 8px; transition: background 0.2s, color 0.2s; }
.contact-modal-close:hover { background: var(--gray-100); color: var(--dark); }
.contact-modal-close svg { width: 18px; height: 18px; }
.contact-modal-title { font-size: 20px; font-weight: 700; color: var(--dark); margin: 0 0 8px; letter-spacing: -0.01em; padding-right: 40px; }
.contact-modal-lead { font-size: 14px; color: var(--gray-700); margin: 0 0 22px; line-height: 1.55; }
.contact-form { display: flex; flex-direction: column; gap: 14px; }
.contact-field { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.contact-field-label { display: block; font-size: 13px; font-weight: 600; color: var(--dark); }
.contact-field-label .req { color: var(--accent); margin-left: 2px; }
.contact-field-label .contact-field-optional { color: var(--gray-400); font-weight: 400; font-size: 13px; margin-left: 4px; }
.contact-field input { width: 100%; padding: 11px 14px; border: 1px solid var(--gray-200); border-radius: 10px; font-size: 16px; font-family: inherit; color: var(--dark); background: var(--white); transition: border-color 0.2s, box-shadow 0.2s; }
.contact-field input::placeholder { color: #6C6E77; }
.contact-field input:focus { outline: none; border-color: var(--secondary); box-shadow: 0 0 0 3px rgba(70,180,205,0.15); }
.contact-field input.invalid { border-color: #DC2626; }
.contact-field-hint { font-size: 13px; color: var(--gray-400); }
.contact-form-status { font-size: 13px; min-height: 18px; margin-top: 2px; }
.contact-form-status.success { color: var(--accent-text); font-weight: 600; }
.contact-form-status.error { color: #DC2626; font-weight: 500; }
.contact-form-actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 6px; }
.contact-cancel { min-height: 44px; padding: 11px 24px; border: 1px solid var(--gray-200); background: var(--white); color: var(--dark); border-radius: 100px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s; font-family: inherit; }
.contact-cancel:hover { background: var(--gray-100); }
.contact-submit { min-height: 44px; padding: 11px 28px; border: none; background: var(--secondary); color: white; border-radius: 100px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s; font-family: inherit; }
.contact-submit:hover:not(:disabled) { background: var(--secondary-hover); }
.contact-submit:disabled { opacity: 0.6; cursor: wait; }
body.modal-open, html.cj-modal-lock { overflow: hidden; }
/* With classic (always-shown) scrollbars, overflow: hidden on <html> removes the
   viewport scrollbar and the page and header jumped sideways by its width while
   the modal or the drawer was open. Keep the gutter reserved during the lock. */
html.cj-modal-lock, html.cj-menu-lock { scrollbar-gutter: stable; }
@media (max-width: 480px) {
  .contact-modal { padding: 0; align-items: stretch; }
  .contact-modal-card { border-radius: 0; max-width: none; padding: max(56px, calc(56px + env(safe-area-inset-top))) 24px max(24px, env(safe-area-inset-bottom)); height: 100%; overflow-y: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .site-nav *, .nav-backdrop, .contact-modal *, .chrome-demo *, .blog-latest-grid .card { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  .chrome-demo .pricing-card.cj-rise { opacity: 1; transform: none; transition: none; }
}

/* Japanese: break headings between phrases (bunsetsu), not inside a word such as
   バ|ックオフィス. Chrome/Edge 119+; other browsers keep their default breaking. */
:lang(ja) :is(h1, h2, h3, h4) { word-break: auto-phrase; }

/* Site text is dark (2026-10-12: the two gray text tokens now equal --dark). The
   pictured product screens keep their own grays: they are drawings of the app UI. */
[data-t-skip] { --gray-700: #54565F; --gray-400: #6C6E77; }