/* =========================================================
   Zoie — landing page
   Built from Figma "Zoie Website" (Desktop - 5, 1440 wide).
   All px values below are taken from the Figma frame.
   ========================================================= */

:root {
  --purple: #9758d5;          /* legacy accent: still used by the calendar feature icons, as in Figma */
  --ink: #17191a;             /* rebrand (Oct 2026): charcoal replaces purple as the brand colour */
  --charcoal: #1b1d24;   /* a lighter, slightly cool charcoal for the hero and every dark section, in place of black (user's request, 2026-11-02) */
  --dark-rgb: 27, 29, 36;   /* the same, for fades */
  /* surfaces on the dark sections, lifted to suit the charcoal (the dark version below puts back the ones made for black) */
  --card: #25272f; --card-hover: #2a2c35; --card-2: #33363f; --card-btn: #30323a; --card-btn-hover: #393c45;
  --pill-btn: #2d2f37; --pill-btn-ring: #42454f; --pill-btn-hover: #363841; --soon: #7c7f89; --soon-ring: #363942;
  --faq-panel: #212329; --faq-item: #272930; --faq-hover: #2c2e36;
  /* the hero's purple + blue light on the other dark sections too (user's request, 2026-11-02): --glow falls from the top
     edge; --glow-in starts a little inside, for a dark section right under another, so there's no line where they meet */
  --glow: radial-gradient(90% 700px at 25% -100px, rgba(140, 71, 209, .26), transparent 60%), radial-gradient(90% 700px at 85% -50px, rgba(77, 124, 255, .2), transparent 60%);
  --glow-in: radial-gradient(55% 380px at 22% 420px, rgba(140, 71, 209, .2), transparent), radial-gradient(55% 380px at 82% 400px, rgba(77, 124, 255, .16), transparent);
  --ink-2: #272727;
  --glass: #c9cfd1;           /* grey glass cards on the light texture */
  /* Film grain generated in the browser (SVG fractal noise), so it stays crisp at any size / pixel density.
     Laid over the smooth background images with overlay blending (keeps the average colour unchanged). */
  --grain-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='0.72' intercept='0.1400'/%3E%3CfeFuncG type='linear' slope='0.72' intercept='0.1400'/%3E%3CfeFuncB type='linear' slope='0.72' intercept='0.1400'/%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23g%29'/%3E%3C/svg%3E");
  --grain-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='0.8' intercept='0.1000'/%3E%3CfeFuncG type='linear' slope='0.8' intercept='0.1000'/%3E%3CfeFuncB type='linear' slope='0.8' intercept='0.1000'/%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23g%29'/%3E%3C/svg%3E");
  --pjs: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;   /* rebrand: Inter everywhere (name kept so rules stay untouched) */
  --inter: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --dm: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --spring: cubic-bezier(.2, .9, .25, 1.05);
}

/* The dark version of the site (user's request, 2026-11-03): the original near-black behind every dark section, with
   the same purple + blue light, and the surfaces and black buttons as they were made for black. Shown with ?theme=dark
   (kept for the visit; ?theme=charcoal goes back), by the head script on every page */
.theme-dark {
  --charcoal: #030509; --dark-rgb: 3, 5, 9;
  --card: #191919; --card-hover: #1e1e1e; --card-2: #2b2b2b; --card-btn: #272727; --card-btn-hover: #303030;
  --pill-btn: #242424; --pill-btn-ring: #383838; --pill-btn-hover: #2e2e2e; --soon: #6f6f6f; --soon-ring: #2c2c2c;
  --faq-panel: #0f0f0f; --faq-item: #141414; --faq-hover: #191919;
}
/* dark version only: no subtext under the home headline (user's request, 2026-11-03); the buttons move up, with a
   little more room under the headline than the subtext had above it */
.theme-dark .hero--v2 .hero-sub { display: none; }
.theme-dark .hero--v2 .hero-ctas { margin-top: 36px; }
@media (max-width: 640px) { .theme-dark .hero--v2 .hero-ctas { margin-top: 38px; } }   /* a bit lower under the headline (user's request, 2026-11-03; was 26) */
/* dark version only, phones: smaller hero buttons to suit the smaller headline (user's request, 2026-11-03: "only in
   mobile"; they were half the row each, 48px tall): sized to their words, 42px tall, centred side by side */
@media (max-width: 640px) {   /* phones: the dashboard picture 10% smaller, still running off the right edge (user's request, 2026-11-03; 15% first).
                                 Its box is no taller than the picture, so the fade always lands on the picture's cut bottom
                                 edge (on taller phones the box had grown past it and the hard edge showed), and the spare
                                 height is shared above and below it rather than all under the buttons */
  html.theme-dark .hero--v2.hero--icons-below .hm-shot { width: 90%; left: calc(10% + 10px); top: 0; }
  /* the spare height in three equal parts: above the headline (on top of its 48px), between the buttons and the
     picture (on top of 16px), and under the picture, so the headline and buttons move down with the smaller picture */
  html.theme-dark .hero--v2.hero--icons-below > .hm { max-height: calc(100vw * .6771 + 16px); padding-top: 16px; margin-top: auto; margin-bottom: auto; }
  html.theme-dark .hero--v2.hero--icons-below > .hero-inner { margin-top: auto; margin-bottom: 0; }
  html.theme-dark .hero--v2 .hm-view {
    -webkit-mask: linear-gradient(#000 calc(100% - 76px), transparent calc(100% - 3px));
            mask: linear-gradient(#000 calc(100% - 76px), transparent calc(100% - 3px));
  }
}
@media (max-width: 640px) {
  .theme-dark .hero--v2 .hero-ctas .btn--hero { flex: 0 0 auto; min-width: 158px; max-width: none; height: 42px; padding: 0 20px; gap: 8px; font-size: 14px; }
  .theme-dark .hero--v2 .btn--hero img { width: 11px; }
}
/* dark version only: the home headline 20% smaller at every size (user's request, 2026-11-03; phones: main.js fitHeroTitle) */
.theme-dark .hero--v2 .hero-title { font-size: 40px; line-height: 45px; }
@media (max-width: 1099px) { .theme-dark .hero--v2 .hero-title { font-size: clamp(25.6px, 4.32vw, 40px); line-height: 1.12; } }
/* dark version only: every section heading 20% smaller, at every size (user's request, 2026-11-03): the shared .h-38
   and the other pages' own section headings (cards' and steps' titles stay as they are) */
.theme-dark .h-38, .theme-dark .cmp-section-title, .theme-dark .cmp-channels-title { font-size: 30.4px; line-height: 36.8px; }   /* 38 / 46 */
.theme-dark .ch-pin.is-compact .channels-head h2 { font-size: 17.6px; line-height: 21.6px; }   /* 22 / 27, the pinned channels on tablets */
.theme-dark .cmp-final-title, .theme-dark .about-h2 { font-size: 36.8px; line-height: 41.6px; }   /* 46 / 52 */
.theme-dark .about-intro .about-h2 { font-size: 41.6px; line-height: 46.4px; }   /* 52 / 58 */
.theme-dark .p-calc-title { font-size: 37.6px; line-height: 39.2px; }   /* 47 / 49 */
.theme-dark .p-channels-title { font-size: 41.6px; line-height: 48px; }   /* 52 / 60 */
@media (max-width: 899px) { .theme-dark .p-channels-title { font-size: 33.6px; line-height: 40px; } }   /* 42 / 50 */
/* dark version only: the home page's section paragraphs (the text under each section heading, and the channels'
   lines) 10% smaller at every size (user's request, 2026-11-03); the How it works step lines keep the reference's size */
.theme-dark :is(.how .lead, .t-sub) { font-size: 14.4px; line-height: 21.6px; }   /* 16 / 24 */
.theme-dark :is(.channels-sub, .gcal-text, .int-text, .faq-sub, .faq-contact, .blog-sub, .ch-body) { font-size: 14.4px; line-height: 17.1px; }   /* 16 / 19 */
.theme-dark .ch-pin.is-compact .ch-body { font-size: 14.4px; line-height: 18px; }   /* 16 / 20 */
.theme-dark .ch-pin.is-compact .channels-sub { font-size: 14.4px; line-height: 17.1px; }   /* 16 / 19, pinned */
@media (max-width: 640px) { .theme-dark .ch-pin.is-compact .channels-sub { margin-top: 26.7px; } }   /* phones: 10px more under the channels' headline, 24px seen (user's request, 2026-11-03; the headline's 14px bottom margin set it before: margins overlap, and this one is x the .9 zoom) */
.theme-dark .mcp-text { font-size: 14.4px; line-height: 23.4px; }   /* 16 / 26 */
.theme-dark .cta-text { font-size: 12.6px; line-height: 15.3px; }   /* 14 / 17 */
@media (max-width: 640px) { .theme-dark .cta-text { font-size: 14.4px; line-height: 19.8px; } }   /* 16 / 22 */
@media (max-width: 640px) { .theme-dark .how .lead { display: none; } }   /* phones: no paragraph under How it works' heading (user's request, 2026-11-03; it was left-aligned just before) */
/* dark version only: "Your Front Desk. On Steroids." (was "AI Frontdesk on Steroids") over How it works' numbers, with more room above it (user's request,
   2026-11-03); the charcoal version doesn't show it */
.stats-title { display: none; }
.theme-dark .how .stats-title { display: block; margin: 128px 0 0; white-space: nowrap; }   /* one line (user's request, 2026-11-03); main.js fitStatsTitle shrinks it where it has no room */
.theme-dark .how .stats-title + .stats { margin-top: 56px; }
@media (max-width: 640px) {
  .theme-dark .how .stats-title { margin-top: 96px; }
  .theme-dark .how .stats-title + .stats { margin-top: 32px; }
}
/* dark version only: How it works' numbers as cards in the spirit of the user's reference (2026-11-03), not a copy:
   the words set left under the icon, and each icon square in its own colour, a soft tint with the icon drawn in that hue
   (violet, emerald, amber, blue). The squared icon and the headline above stay as they were, as the user asked. Phones
   first, then desktop too (same day): four cards in a row, two by two on tablets */
.theme-dark .how .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); justify-content: stretch; gap: 20px; }
.theme-dark .how .stat {
  flex-direction: column; align-items: flex-start; gap: 22px; padding: 26px 26px 28px; border-radius: 22px; text-align: start;
  background: #fff; box-shadow: 0 0 0 1px rgba(15, 23, 42, .07), 0 18px 32px -24px rgba(15, 23, 42, .4);
}
.theme-dark .how .stat-txt { align-items: flex-start; gap: 6px; }
.theme-dark .how .stat-ico {
  width: 52px; height: 52px; border-radius: 14px; color: var(--hue);
  background: linear-gradient(145deg, var(--tint-a), var(--tint-b)); box-shadow: inset 0 0 0 1px var(--ring);
}
.theme-dark .how .stat-ico svg { width: 25px; height: 25px; stroke-width: 2; }
.theme-dark .how .stat strong { font-size: 34px; line-height: 40px; letter-spacing: -.8px; }
.theme-dark .how .stat-txt > span { font-size: 15.5px; line-height: 21.5px; color: #555a66; white-space: normal; }
.theme-dark .how .stat:nth-child(1) { --hue: #6b46f2; --tint-a: #f4f0ff; --tint-b: #e5dcff; --ring: rgba(107, 70, 242, .14); }
.theme-dark .how .stat:nth-child(2) { --hue: #0f9b6c; --tint-a: #ebf9f2; --tint-b: #d3f2e3; --ring: rgba(15, 155, 108, .14); }
.theme-dark .how .stat:nth-child(3) { --hue: #c47406; --tint-a: #fff6e4; --tint-b: #ffe6bd; --ring: rgba(196, 116, 6, .16); }
.theme-dark .how .stat:nth-child(4) { --hue: #2a62ec; --tint-a: #edf3ff; --tint-b: #d9e6ff; --ring: rgba(42, 98, 236, .14); }
@media (max-width: 899px) {
  .theme-dark .how .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}
/* dark version only: a gray line under the cards, after the user's reference (2026-11-03) */
.stats-note { display: none; }
.theme-dark .how .stats-note { display: block; max-width: 34em; margin: 48px auto 0; font-size: 19px; line-height: 28px; color: #5f6474; text-align: center; text-wrap: pretty; }
@media (max-width: 640px) {
  .theme-dark .how .stats { gap: 12px; }
  .theme-dark .how .stat { gap: 16px; padding: 18px 18px 20px; border-radius: 20px; }
  .theme-dark .how .stat-txt { gap: 5px; }
  .theme-dark .how .stat-ico { width: 42px; height: 42px; border-radius: 12px; }
  .theme-dark .how .stat-ico svg { width: 21px; height: 21px; }
  .theme-dark .how .stat strong { font-size: 28px; line-height: 32px; letter-spacing: -.6px; }
  .theme-dark .how .stat-txt > span { font-size: 13px; line-height: 17.5px; }
  .theme-dark .how .stats-note { max-width: 330px; margin-top: 32px; font-size: 17.8px; line-height: 25.6px; }   /* x the paragraphs' .9 zoom: 16 / 23 seen, 29 under the cards; two even lines */
}
@media (max-width: 640px) { .theme-dark .feature-copy strong { font-size: 14.4px; line-height: 20px; } }   /* phones: the feature titles ("Works with your AI assistant", "Automatic bookings"…) 20% smaller (user's request, 2026-11-03; were 18 / 25) */
@media (max-width: 640px) {   /* phones: the FAQ on the same sizes (user's request, 2026-11-03): the questions as the feature titles (were 16px),
                                 "Got more questions?" as the other sub-headings, e.g. the channels' titles (was 28px, above the 24px headings) */
  .theme-dark .faq .faq-q { font-size: 14.4px; line-height: 18px; }
  .theme-dark .faq .faq-more { font-size: 19px; line-height: 23px; }
  .theme-dark .faq .faq-a p { padding-left: 26.7px; }   /* x the paragraphs' .9 zoom = 24px, so the answer lines up under its question again */
}
@media (max-width: 640px) {   /* phones: the channels' phone 20% smaller (user's request, 2026-11-03), centred; tucked up so its rim sits as far
                                 under the icon row as the paragraph sits above it, 21px (the rim is 25.73% of the width down the picture) */
  .theme-dark .ch-pin.is-compact .ch-phone {
    /* the top 75% of the phone shows, fading out at the bottom (user's request, 2026-11-03: "only 75% of the phone like
       before"); its rim stays 21px under the icons */
    --w: calc(min(100cqw, 400px) * .8); --tuck: calc(var(--w) * .2573 - 9px);
    width: var(--w); height: calc(100cqh + var(--tuck));
    -webkit-mask-image: linear-gradient(#000 calc(100% - 56px), transparent);
            mask-image: linear-gradient(#000 calc(100% - 56px), transparent);
  }
  /* the phone's row is as tall as that 75% (rim 9px down + .75 x its 1.5 x width body), less on short screens; the
     words follow right under it and any spare height goes below them */
  .theme-dark .ch-pin.is-compact .ch-stage { grid-template-rows: auto minmax(0, calc(9px + .9 * min(100vw - 32px, 400px))) auto; align-content: start; }
  /* and the whole block (heading to words) sits in the middle of the screen, the spare height split above and below it
     rather than all under the words (user's request, 2026-11-03: "too much space at the bottom"); auto margins, so a
     short screen simply gets no spare and nothing is pushed off */
  .theme-dark .ch-pin.is-compact .channels-head { margin-top: auto; }
  .theme-dark .ch-pin.is-compact .ch-stage-wrap { flex: 0 1 auto; margin-bottom: auto; }
}
@media (max-width: 640px) {   /* phones: the testimonials on the same sizes (user's request, 2026-11-03): the big numbers 20% smaller like the
                                 headings, the names as the feature titles, the small grey lines as the feature lines; the quotes already follow the paragraphs */
  .theme-dark .t-stat strong { font-size: 22.4px; line-height: 27.2px; }   /* 28 / 34 */
  .theme-dark .t-stat span { font-size: 12.15px; line-height: 17.1px; }   /* 13.5 / 19 */
  .theme-dark .t-who strong { font-size: 14.4px; line-height: 20px; }   /* 14.5 */
  .theme-dark .t-who span { font-size: 12.15px; line-height: 17px; }   /* 13 / 18 */
}
/* dark version only, phones: every paragraph 10% smaller again (user's request, 2026-11-03), on every page: body text,
   quotes, card and FAQ text, the feature lines and the footer's; not the small caps labels or the footer's column
   headings, and not the text drawn inside the preview scenes. zoom scales the text and its own spacing together */
@media (max-width: 640px) {
  .theme-dark :is(main, footer) :is(p, blockquote, .feature-copy > span):not(.trusted-kicker, .footer-h, .ch-label):not(:is(.mini, .hs-fit, .cal-scene, .ma-scene, .hm) *) { zoom: .9; }
}
/* dark version only: the integrations section's moving tiles are the 16 integrations from the grid below (their own strip,
   .tiles-track--dark, which main.js moves instead); on phones the phone and the tiles are smaller, so more tiles show
   (user's request, 2026-11-03; phone 207 → 152px wide, tiles 72 → 50px) */
.tiles-track.tiles-track--dark { display: none; }   /* (.tiles-track, later in the file, sets flex) */
.theme-dark .tiles-track.tiles-track--dark { display: flex; }
.theme-dark .tiles-track:has(+ .tiles-track--dark) { display: none; }
.tile--int img { width: 54%; }   /* the grid's 24px logos, sized to sit like the other tiles' */
@media (max-width: 640px) {
  .theme-dark .int-hero { height: 260px; }
  .theme-dark .int-phone { top: 47px; transform: scale(.44); }   /* 152 x 213, standing on the line */
  .theme-dark .tiles { top: 139px; height: 42px; }   /* level with the phone's middle, as before */
  .theme-dark .tiles-track { gap: 9px; }
  .theme-dark .tile { width: 42px; height: 42px; border-radius: 9.5px; }   /* a bit smaller again (user's request, 2026-11-03; was 50) */
  .theme-dark .int-line { top: 260px; }
}
/* dark version only, phones: twice the space between the home page's sections (user's request, 2026-11-03): each
   section's top and bottom padding doubled (the first screen keeps its fitted layout) */
@media (max-width: 640px) {
  .theme-dark .how, .theme-dark .gcal, .theme-dark .mcp, .theme-dark .testimonials, .theme-dark .faq { padding-top: 128px; padding-bottom: 128px; }
  .theme-dark .channels.is-scrub { padding-top: 64px; padding-bottom: 134px; }   /* 0 + the pinned heading's own 64, and 67 */
  .theme-dark .channels:not(.is-scrub) { padding-top: 194px; padding-bottom: 80px; }
  .theme-dark .integrations { padding-top: 88px; padding-bottom: 128px; }
  .theme-dark .blog { padding-top: 128px; }
  .theme-dark .footer--cta { margin-top: 144px; }
  .theme-dark .footer--cta .cta-card { padding-top: 104px; }
  .theme-dark .footer { padding-bottom: 64px; }
}
@media (max-width: 640px) {   /* phones: 30 → 24 */
  .theme-dark .h-38, .theme-dark .ch-pin.is-compact .channels-head h2 { font-size: 24px; line-height: 1.26; }
  .theme-dark .cmp-section-title, .theme-dark .cmp-channels-title, .theme-dark .p-calc-title, .theme-dark .p-channels-title { font-size: 24px; line-height: 30.4px; }
  .theme-dark .cmp-final-title, .theme-dark .about-h2, .theme-dark .about-intro .about-h2 { font-size: 24px; line-height: 28.8px; }
}
/* dark version only, phones: three times the space you see between a step's preview and the next number in How it
   works (user's request, 2026-11-03; it read as ~31px: the 22px gap plus the room above the digits) */
@media (max-width: 640px) { .theme-dark .tl { gap: 84px; } }
@media (max-width: 374px) { .theme-dark .tl { gap: 72px; } }
/* dark version only, phones and narrow tablets: each step's preview right under its title, the line of text under the
   preview (user's request, 2026-11-03; the preview came after the text). The words' wrapper steps aside so the title
   and the text can sit in different rows */
@media (max-width: 899px) {
  .theme-dark .tl-copy { display: contents; }
  .theme-dark .tl-title { grid-column: 3; grid-row: 1; }
  .theme-dark .tl-visual { grid-row: 2; width: 80%; }   /* 20% smaller (user's request, 2026-11-03); its scene scales to the width (main.js fitMinis) */
  .theme-dark .tl-text { grid-column: 2 / -1; grid-row: 3; max-width: none; margin-top: 18px; }
}
@media (max-width: 640px) {
  .theme-dark .tl-title { padding-top: 5px; }   /* level with the number, as the wrapper's padding did */
  .theme-dark .tl-text { margin-top: 14px; }
}
@media (max-width: 374px) {
  .theme-dark .tl-title { padding-top: 4px; }
  .theme-dark .tl-text { margin-top: 12px; }
}
/* dark version: How it works as in the user's reference (2026-11-03). Steps 1 and 2 have shorter lines (the charcoal
   version keeps its own, the dark ones sit next to them in the page); on phones the preview sits under the title,
   smaller, and the line under it is smaller too, set in a little from the number */
.tl-text--dark { display: none; }
.theme-dark .tl-text--dark { display: block; }
.theme-dark .tl-text:not(.tl-text--dark):has(+ .tl-text--dark) { display: none; }
@media (max-width: 640px) {
  .theme-dark .tl { gap: 98px; }   /* ~108px seen from the line's last letters to the next number */
  .theme-dark .tl-step { column-gap: 12px; }
  .theme-dark .tl-visual { grid-column: 3; width: 72%; margin-top: 17px; }   /* ~30px under the title's baseline */
  .theme-dark .tl-text { grid-column: 2 / -1; max-width: 270px; margin: 15px 0 0; margin-inline-start: 22px; font-size: 12.5px; line-height: 17.5px; }
  /* the step lines styled like the user's reference (2026-11-03): its darker, neutral slate grey and longer line, and 20%
     bigger than they were (15px x the paragraphs' .9 zoom = 13.5px seen, was 11.25) */
  .theme-dark .tl-text { max-width: 325px; font-size: 15px; line-height: 20.5px; color: #555a66; }
  /* the skills preview as in the reference: its full-size rows, so a little taller than the others (228 x 190) */
  .theme-dark .tl .tl-shot:has(.mx--skills) { aspect-ratio: 228 / 189; }
  .theme-dark .tl .tl-shot:has(.mx--skills) :is(.hs-fit, .mini) { height: 189px; }
  .theme-dark .tl .mx--skills { gap: 8px; padding: 10px 12px 11px; }
  .theme-dark .tl .mx--skills .mx-sk-head { gap: 10.5px; }
  .theme-dark .tl .mx--skills .mx-sk-head .mx-ico { width: 24px; height: 24px; border-radius: 6.5px; }
  .theme-dark .tl .mx--skills .mx-sk-head .mx-ico svg { width: 13px; height: 13px; }
  .theme-dark .tl .mx--skills .mx-sk-head b { font-size: 13.5px; line-height: 16px; }
  .theme-dark .tl .mx-sk-list { gap: 2.75px; }
  .theme-dark .tl .mx-sk { height: 25px; gap: 17px; padding: 0 12px 0 13px; }
  .theme-dark .tl .mx-sk svg { width: 14px; height: 14px; }
  .theme-dark .tl .mx-sk b { font-size: 10.2px; line-height: 12px; }
  .theme-dark .tl .mx-sk .mx-sk-ok { width: 12px; height: 12px; }
}
@media (max-width: 640px) {   /* phones: the progress line in the user's reference style (2026-11-03): a light grey track, filled with indigo
                                 fading to a soft lavender grey as you scroll; small circles on a white disc with a hairline
                                 ring, grey until the fill reaches them, then indigo (main.js marks them .is-reached) */
  .theme-dark .tl::before { background: #dcdce1; }
  .theme-dark .tl::after { background: linear-gradient(#4a2af5, #8c84d6 55%, #bebcca); }
  .theme-dark .tl-dot {
    width: 13.5px; height: 13.5px; margin-top: 12.25px; background: #a9aabc;   /* 50% larger (user's request, 2026-11-03; was 9px), same 24px white disc */
    box-shadow: 0 0 0 5.25px #fff, 0 0 0 6.25px rgba(23, 25, 26, .08), 0 4px 14px 4px rgba(23, 25, 26, .07);
    transition: background-color .35s var(--ease-out);
  }
  .theme-dark .tl-dot.is-reached { background: #4a2af5; }
}
@media (max-width: 374px) {
  .theme-dark .tl { gap: 85px; }
  .theme-dark .tl-dot { margin-top: 10.25px; }   /* centred where the 12px circle was */
  .theme-dark .tl-text { margin-top: 13px; font-size: 14.4px; line-height: 19.7px; }   /* 20% bigger too (was 12) */
}
/* dark version only, phones: the step numbers the same size as the titles beside them (user's request, 2026-11-03; were
   34 / 30px), on the title's line, the circle moved down to stay centred on them */
@media (max-width: 640px) {
  .theme-dark .tl-num { font-size: 18px; line-height: 24px; padding-top: 5px; }
  .theme-dark .tl-dot { margin-top: 10.25px; }
}
@media (max-width: 374px) {
  .theme-dark .tl-num { font-size: 17px; line-height: 22px; padding-top: 4px; }
  .theme-dark .tl-dot { margin-top: 8.25px; }
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; background: var(--charcoal); }   /* the page's canvas is the hero's dark: iPhone Safari tints its status bar and toolbar
   from it (white before, which showed as white strips around the dark header) and pull-to-refresh shows dark, not white;
   the body stays white and covers the whole page */
body {
  font-family: var(--pjs);
  font-size: 16px;
  line-height: 1.21;           /* Figma "auto" line height for Inter */
  color: #000;
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;            /* clip (not hidden) so position: sticky keeps working */
}
img, svg { display: block; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid #8a98a6; outline-offset: 3px; }

.wrap   { width: 1180px; margin-inline: auto; }                  /* x 130 → 1310 */
.wrap-n { width: 1035px; margin-left: calc(50% - 502px); }       /* x 218 → 1253 */
.center { text-align: center; }
.h-38   { font-size: 38px; line-height: 46px; font-weight: 700; }   /* both lines bold (user's request, 2026-11-02, after trying regular and a regular second line) */
.kern-w { margin-inline-start: -.03em; }   /* optical spacing: the slanted W leaves a wider-looking gap before it ("How Zoie Works") */
.lead   { font-size: 16px; line-height: 19px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center;
  height: 45px; border-radius: 25px;
  font-size: 14px; line-height: 17px; white-space: nowrap;
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), background-color .25s;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .45); }
.btn:active { transform: translateY(0); }
.btn--purple { background: var(--charcoal); color: #fff; }   /* class name kept; rebrand = black, now the site's charcoal (user's request, 2026-11-02) */
.btn--white  { background: #fff; color: #000; }
.btn-dot {
  flex: none; width: 33px; height: 33px; border-radius: 50%;
  display: grid; place-items: center;
  transition: transform .3s var(--ease-out);
}
.btn:hover .btn-dot { transform: translateX(2px); }
.btn-dot--white  { background: #fff; }
.btn-dot--purple { background: var(--charcoal); }
.btn-dot--grey   { background: #fff; box-shadow: 0 0 34px rgba(255, 255, 255, .39); }
.btn--nav, .btn--white { width: 157px; padding: 0 7px 0 26px; gap: 8px; justify-content: space-between; }
.btn--nav { width: auto; min-width: 125px; height: 35px; padding: 0 16px 0 18px; font-size: 13px; font-weight: 600; }   /* sized to its label, so the arrow keeps its 16px from the edge */
.btn--nav img, .btn--hero img { width: 12px; height: auto; transition: transform .3s var(--ease-out); }
.btn--nav:hover img, .btn--hero:hover img { transform: translateX(2px); }
.btn--outline  { width: 157px; justify-content: center; background: var(--charcoal); color: #fff; box-shadow: inset 0 0 0 1px #fff; }
.btn--outline:hover { box-shadow: inset 0 0 0 1px #fff, 0 10px 24px -10px rgba(0, 0, 0, .45); }
.btn--articles { width: auto; min-width: 168px; padding: 0 6px 0 20px; gap: 14px; }   /* sized to its label so the arrow circle stays inside */
.btn--contact  { width: 157px; padding: 0 7px 0 15px; justify-content: space-between; font-weight: 300; border-radius: 22.5px; }
/* rebrand "chrome" buttons: charcoal → grey → white sweep */
.btn--chrome { background: linear-gradient(90deg, #303132 0%, #515151 56%, #9a9a9a 86%, #d8d8d8 100%); color: #fff; }

/* =========================================================
   OFFER BAR — above the nav, copied from zoie.ai (user's request, 2026-11-02). It sits at the top of the page and
   scrolls away with it; the fixed nav starts just under it and rises with it to its usual place (a scroll-driven
   animation where the browser has them, main.js otherwise). --promo-h is the bar's height (measured by main.js, as
   the copy can wrap in other languages); closing the bar keeps it closed for the visit (head script + main.js)
   ========================================================= */
:root { --promo-h: 35px; }
.promo-off { --promo-h: 0px; }
.promo-off .promo { display: none; }
.promo {
  position: relative; z-index: 51;
  background: #141414; border-bottom: 1px solid rgba(255, 255, 255, .06);   /* zoie.ai's colour */
  font-family: var(--dm); color: rgba(255, 255, 255, .8);
}
.promo svg { flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.promo-link {   /* one centred line of text with the icons in it, so a wrapped line keeps the sparkle beside the words */
  display: block; max-width: 1280px; margin: 0 auto; padding: 8px 44px;
  font-size: 12px; line-height: 18px; font-weight: 500; text-align: center;
}
.promo-link b { font-weight: 700; color: #fff; }
.promo-spark { display: inline-block; width: 14px; height: 14px; margin-inline-end: 8px; vertical-align: -2.5px; color: #2eb867; }
.promo-arrow { display: inline-block; width: 12px; height: 12px; margin-inline-start: 8px; vertical-align: -1.5px; color: rgba(255, 255, 255, .5); transition: transform .25s var(--ease-out), color .2s; }
.promo-link:hover .promo-arrow { color: rgba(255, 255, 255, .8); transform: translateX(2px); }
[dir="rtl"] .promo-arrow { scale: -1 1; }
[dir="rtl"] .promo-link:hover .promo-arrow { transform: translateX(-2px); }
.promo-close {
  position: absolute; top: 50%; inset-inline-end: max(16px, calc(50% - 624px));
  width: 20px; height: 20px; margin-top: -10px; border-radius: 50%;
  display: grid; place-items: center; color: rgba(255, 255, 255, .3);
  transition: color .2s, background-color .2s;
}
.promo-close:hover { color: rgba(255, 255, 255, .6); background: rgba(255, 255, 255, .08); }
.promo-close svg { width: 12px; height: 12px; }
.site-header { translate: 0 var(--promo-y, var(--promo-h)); }
@supports (animation-timeline: scroll()) {
  .site-header { animation: promo-rise auto linear both; animation-timeline: scroll(root); animation-range: 0px var(--promo-h); }
  .promo-off .site-header { animation: none; }
}
@keyframes promo-rise { from { translate: 0 var(--promo-h); } to { translate: 0 0; } }
@media (max-width: 639px) {
  .promo-link { padding-block: 8px; padding-inline: 16px 36px; font-size: 11px; line-height: 16.5px; text-wrap: balance; }   /* the close button's room on one side only, so the English line fits a 390px phone */
  .promo-arrow { display: none; }
  .promo-close { inset-inline-end: 12px; }
}
@media (max-width: 389px) {
  .promo-link { padding-inline: 12px 30px; }
  .promo-spark { margin-inline-end: 6px; }   /* so the English line still fits on a 375px phone */
  .promo-close { inset-inline-end: 7px; }
}

/* =========================================================
   NAV — sticky, pill on scroll, hides on scroll down and
   slides back on scroll up (qarin.framer.website behaviour)
   ========================================================= */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 50;
  pointer-events: none;
}
.nav-shell {
  position: relative; pointer-events: auto;
  width: 1090px; height: 51px; margin: 12px auto 0; padding: 0 8px 0 26px;
  display: flex; align-items: center; border-radius: 999px;
  background: rgba(8, 10, 14, .62);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  backdrop-filter: blur(24px) saturate(1.3);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .075), 0 18px 40px -24px rgba(0, 0, 0, .8);
  transition: margin-top .5s var(--ease-out), background-color .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.is-scrolled .nav-shell { margin-top: 10px; background: rgba(8, 10, 14, .84); }
/* at the top of the page there is no pill behind the nav (user's request, 2026-10-28); it comes back once you scroll
   (or open the menu), as the nav stays fixed over the light sections */
.site-header:not(.is-scrolled) .nav-shell { background-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }

.nav-logo { flex: none; }
.nav-logo img { width: 76px; height: auto; }
.nav-links { display: flex; gap: 24px; margin-inline-start: 128px; color: rgba(236, 239, 245, .8); }
.nav-links a { position: relative; display: block; font-size: 13px; line-height: 16px; transition: color .2s; }
.nav-links a:hover { color: #fff; }
.nav-links a[aria-current="page"] { color: #fff; font-weight: 500; }
.nav-links a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 2px; border-radius: 2px;
  background: #fff; box-shadow: 0 0 10px rgba(255, 255, 255, .5);
}
.nav-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.lang-pill {
  height: 34px; padding: 0 13px 0 14px; border-radius: 999px; color: #fff;
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; line-height: 16px;
  background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
  transition: background-color .2s;
}
.lang-pill img { width: 15px; height: 15px; }
.lang-chev { margin-left: 2px; opacity: .8; }
.lang-pill:hover { background: rgba(255, 255, 255, .08); }
/* language menu (assets/i18n/i18n.js) */
.lang { position: relative; }
.lang-pill[aria-expanded="true"] { background: rgba(255, 255, 255, .1); }
.lang-pill[aria-expanded="true"] .lang-chev { transform: rotate(180deg); }
.lang-chev { transition: transform .25s var(--ease-out); }
.lang-menu {
  position: absolute; z-index: 60; top: calc(100% + 12px); right: 0; width: 210px; padding: 6px;
  display: grid; gap: 2px; border-radius: 16px; color: #fff;
  background: #0e1014;   /* solid: a blurred backdrop inside the (already blurred) nav let the page show through */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 24px 50px -20px rgba(0, 0, 0, .8);
  animation: lang-in .22s var(--ease-out);
}
.lang-menu[hidden] { display: none; }
@keyframes lang-in { from { opacity: 0; transform: translateY(-6px); } }
.lang-menu button {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; height: 38px; padding: 0 12px; border-radius: 10px;
  font-size: 14px; text-align: start; color: rgba(255, 255, 255, .86); transition: background-color .15s;
}
.lang-menu button span { font-size: 12px; color: rgba(255, 255, 255, .45); }
.lang-menu button b { font-weight: 500; }
.lang-menu button:hover, .lang-menu button:focus-visible { background: rgba(255, 255, 255, .08); outline: none; }
.lang-menu button[aria-checked="true"] { color: #fff; background: rgba(255, 255, 255, .1); }
.lang-menu button[aria-checked="true"] b::after { content: " ✓"; color: #aebcf6; }
/* phones: the languages sit in the mobile menu */
.mm-lang { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 8px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .08); }
.mm-lang button { height: 36px; border-radius: 10px; font-size: 13px; color: rgba(255, 255, 255, .78); background: rgba(255, 255, 255, .05); }
.mm-lang button[aria-checked="true"] { color: #000; background: #fff; }
/* while a translation is being applied, keep the English hidden (failsafe in the <head> script) */
.i18n-pending body { opacity: 0; }
.nav-burger { display: none; width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .12); position: relative; }
.nav-burger span { position: absolute; left: 11px; right: 11px; height: 1.5px; background: #fff; border-radius: 2px; transition: transform .3s var(--ease-out); }
.nav-burger span:first-child { top: 15px; }
.nav-burger span:last-child  { top: 22px; }
.nav-burger[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:last-child  { transform: translateY(-3.5px) rotate(-45deg); }
.mobile-menu {
  pointer-events: auto;
  margin: 14px 16px 0; padding: 10px; border-radius: 22px;
  background: rgba(18, 20, 22, .94); color: #fff; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 255, 255, .06);
  display: grid;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu a { padding: 12px 14px; border-radius: 12px; font-size: 16px; }
.mobile-menu a:hover { background: rgba(255, 255, 255, .08); }

/* =========================================================
   HERO
   ========================================================= */
.hero--v2 { --k: .7713; position: relative; overflow: clip; color: #fff;   /* --k: scene scale, set by main.js */
  /* the charcoal with a soft glow in the spirit of zoie.ai's header: purple from the top left, blue from the top right,
     a little purple low left (user's pick, "Purple + blue", 2026-11-02; was flat #030509, then indigo for a moment) */
  background:
    radial-gradient(90% 70% at 25% -10%, rgba(140, 71, 209, .26), transparent 60%),
    radial-gradient(90% 70% at 85% -5%, rgba(77, 124, 255, .2), transparent 60%),
    radial-gradient(60% 50% at 10% 80%, rgba(140, 71, 209, .1), transparent 70%),
    var(--charcoal);
}
.hero-inner { position: relative; z-index: 2; padding-top: 110px; text-align: center; }
.hero-title { font-size: 50px; line-height: 56px; font-weight: 600; letter-spacing: -.03em; }
.hero-title .grad, .hero-title .w.is-light { font-weight: 400; }   /* only the first line is bold (user's request, 2026-11-02); main.js marks the words that wrap below it */
.hero-title.is-3 { text-wrap: balance; }   /* phones: three even lines (main.js fitHeroTitle) */
.hero-title.is-3 br:not(.ht-br) { display: none; }
.hero-title.is-fit { white-space: nowrap; }   /* phones: two lines as on desktop, one size, fitted to the width (main.js fitHeroTitle) */
.hero-title.is-3 .grad { display: inline; }   /* so the gradient half can break across lines too (each word keeps its own gradient) */
.grad {   /* lavender → blue headline text (home + pricing) */
  display: inline-block; padding-bottom: .1em; margin-bottom: -.1em;   /* room for the descenders inside the clipped gradient */
  background: linear-gradient(90deg, #eef1f7 0%, #ccd3e7 36%, #b5c5ee 64%, #9cb9f5 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.grad.is-split { background: none; }
/* headings on white: the first part near-black, the rest in a slate-to-periwinkle gradient (user's reference, 2026-11-02) */
.grad--ink { background-image: linear-gradient(90deg, #8b90a2 0%, #7b85ad 40%, #6578dc 100%); }
.grad.grad--ink.is-split .w { background-image: linear-gradient(90deg, #8b90a2 0%, #7b85ad 40%, #6578dc 100%); }
.grad.is-split .w {
  background: linear-gradient(90deg, #eef1f7 0%, #ccd3e7 36%, #b5c5ee 64%, #9cb9f5 100%) var(--gx, 0) 0 / var(--gw, 100%) 100% no-repeat;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-bottom: .1em; margin-bottom: -.1em;
}
.hero-sub { margin-top: 18px; font-size: 14.7px; line-height: 22px; color: rgba(226, 230, 240, .74); }

/* the two calls to action, under the subtitle and above the tablet */
.hero-ctas { display: flex; justify-content: center; gap: 12px; margin-top: 30px; }
.btn--hero { min-width: 168px; height: 45px; padding: 0 26px; gap: 12px; justify-content: center; border-radius: 999px; font-size: 15px; font-weight: 600; }
.btn--glass {
  color: #fff; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.btn--glass:hover { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .32), 0 10px 24px -10px rgba(0, 0, 0, .45); }

/* ---- the scene: lit backdrop, desk and the tablet, drawn in the
        design's own 1703 x 924 coordinates and scaled by --k around the
        tablet's top centre (which sits 15px under the phone field) ---- */
.hv2-stage { position: relative; height: calc(593px * var(--k)); margin-top: 44px; }
.hv2-scene {
  position: absolute; left: 50%; top: -331px; width: 1703px; height: 924px; margin-left: -851.5px;
  transform-origin: 851.5px 331px; transform: scale(var(--k));
  pointer-events: none;
}
.hv2-wall, .hv2-desk { position: absolute; }
.hv2-wall { inset: 0; }
/* a dark sphere whose lower-right rim is lit from behind; everything in
   .hv2-light is centred on the sphere, so turning the box slides the light
   along the rim */
.hv2-wall span { position: absolute; border-radius: 50%; }
.hv2-light { position: absolute; left: 151px; top: -1031px; width: 1800px; height: 1800px; }
.hv2-halo {
  left: 0; top: 0; width: 1800px; height: 1800px;
  background: conic-gradient(from 0deg, transparent 0deg 50deg, rgba(150, 160, 178, .1) 88deg, rgba(185, 193, 208, .26) 124deg, rgba(150, 160, 178, .1) 158deg, transparent 196deg 360deg);
  -webkit-mask: radial-gradient(closest-side, #000 57%, rgba(0, 0, 0, .35) 72%, transparent 100%);
          mask: radial-gradient(closest-side, #000 57%, rgba(0, 0, 0, .35) 72%, transparent 100%);
}
.hv2-orb, .hv2-halo { display: none; }   /* no dark sphere or halo on the lit background: its outline showed as a faint circle (user's request, 2026-11-02); the lit edge stays */
.hv2-rim { left: 382px; top: 382px; width: 1036px; height: 1036px; }
.hv2-rim::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg 72deg, rgba(255, 255, 255, .22) 98deg, rgba(255, 255, 255, .62) 118deg, rgba(255, 255, 255, .85) 127deg, rgba(255, 255, 255, .42) 142deg, rgba(255, 255, 255, .1) 160deg, transparent 178deg 360deg);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 2.4px), #000 calc(100% - 1.3px), #000 calc(100% - .7px), transparent 100%);
          mask: radial-gradient(closest-side, transparent calc(100% - 2.4px), #000 calc(100% - 1.3px), #000 calc(100% - .7px), transparent 100%);
}
.hv2-rim--soft { filter: blur(14px); opacity: .6; }
.hv2-rim--soft::before {
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 34px), #000 calc(100% - 6px), #000 100%);
          mask: radial-gradient(closest-side, transparent calc(100% - 34px), #000 calc(100% - 6px), #000 100%);
}
.hv2-flare {   /* glint stretched along the rim where it is brightest */
  left: 1209px; top: 1188px; width: 220px; height: 34px; transform: rotate(-54deg);
  background: radial-gradient(closest-side, rgba(255, 255, 255, .55), rgba(255, 255, 255, .12) 50%, transparent 100%);
}
/* a second, larger sphere low behind the tablet: only the top-left of its
   lit rim shows, as a light line across the wall left of the tablet */
.hv2-horizon { left: -562px; top: 569px; width: 2256px; height: 2256px; }
.hv2-horizon::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from -40deg, transparent 0deg, rgba(255, 255, 255, .22) 12deg, rgba(255, 255, 255, .9) 21deg, #fff 25deg, rgba(255, 255, 255, .6) 35deg, transparent 50deg 360deg);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 2.4px), #000 calc(100% - 1.3px), #000 calc(100% - .5px), transparent 100%);
          mask: radial-gradient(closest-side, transparent calc(100% - 2.4px), #000 calc(100% - 1.3px), #000 calc(100% - .5px), transparent 100%);
}
.hv2-horizon--soft { filter: blur(16px); }
.hv2-horizon--soft::before {
  background: conic-gradient(from -40deg, transparent 0deg, rgba(196, 206, 226, .1) 12deg, rgba(210, 218, 234, .42) 22deg, rgba(196, 206, 226, .3) 35deg, transparent 50deg 360deg);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 46px), #000 calc(100% - 8px), #000 100%);
          mask: radial-gradient(closest-side, transparent calc(100% - 46px), #000 calc(100% - 8px), #000 100%);
}

/* no flat desk band under the tablet (it read as the backdrop being cut off): the dark wall runs on to the
   bottom of the header, lit by the glow pooling under the tablet, so the buttons and logos sit inside the scene */
.hv2-desk { left: -1400px; right: -1400px; top: 862px; height: 1400px; z-index: 1; }
.hv2-desk::before, .hv2-desk::after { content: ""; position: absolute; border-radius: 50%; }
.hv2-desk::before {   /* the tablet's backlight pooling below it */
  left: 1101.5px; top: -330px; width: 2300px; height: 980px;
  background: radial-gradient(closest-side, rgba(150, 158, 174, .17), rgba(150, 158, 174, .075) 42%, rgba(150, 158, 174, .025) 70%, transparent);
}
.hv2-desk::after {   /* a brighter core right under the tablet */
  left: 1651.5px; top: -120px; width: 1200px; height: 300px;
  background: radial-gradient(closest-side, rgba(185, 193, 208, .13), transparent);
}

/* the tablet: leans back 16deg on the desk (perspective measured from the design) */
.hv2-3d { position: absolute; z-index: 3; left: 0; top: 0; width: 1703px; height: 884px; perspective: 1930px; perspective-origin: 851.5px 884px; }
/* a thin dark frame with a fine light edge (it was a metallic iPad for a few hours on 2026-10-30; the user preferred this thin stroke) */
.hv2-device {
  position: absolute; left: 248.5px; top: 256.4px; width: 1206px; height: 627.6px; padding: 5px;
  border-radius: 26px; transform-origin: 50% 100%; transform: rotateX(16deg);
  background: linear-gradient(180deg, #1b1d21, #0b0c0f);
  pointer-events: auto;
}
.hv2-device img { width: 1196px; height: 617.6px; border-radius: 21px; }   /* hero-dashboard-2: 1743 x 900, the user's dashboard screenshot (2026-10-30, the second one), cut just above its third activity row and its page background carried 94px further right to fit the screen's shape */
.hv2-device::before {   /* backlight glow around the edges */
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  box-shadow: 0 0 10px 0 rgba(255, 255, 255, .12), -14px -6px 44px -8px rgba(236, 239, 245, .12), -40px -20px 120px -12px rgba(206, 214, 228, .07);
}
.hv2-device::after {   /* thin metal edge, brightest where the light hits it */
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, .42) 0%, rgba(255, 255, 255, .14) 4%, rgba(255, 255, 255, .06) 22%, rgba(255, 255, 255, .05) 78%, rgba(255, 255, 255, .12) 96%, rgba(255, 255, 255, .32) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
/* the same light on the tablet: it spills onto the top-right of the screen,
   a reflection sweeps across the glass, and a highlight runs round the edge */
.hv2-spill, .hv2-sheen { position: absolute; inset: 5px; border-radius: 21px; pointer-events: none; }
.hv2-spill {
  background: radial-gradient(55% 75% at 100% 0%, rgba(214, 226, 255, .16), transparent 62%), radial-gradient(35% 55% at 0% 8%, rgba(255, 255, 255, .06), transparent 60%);
  mix-blend-mode: screen;
}
.hv2-sheen { overflow: hidden; }
.hv2-sheen::before {
  content: ""; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 45%; opacity: 0;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, .02) 22%, rgba(255, 255, 255, .12) 47%, rgba(255, 255, 255, .04) 56%, transparent 78%);
  transform: skewX(-12deg);
}
.hv2-edge {
  position: absolute; inset: -.25px; border-radius: 26.25px; padding: .5px; overflow: hidden; pointer-events: none;   /* hairline (3px → 1px → .5px) */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.hv2-edge i {
  position: absolute; left: 50%; top: 50%; width: 1500px; height: 1500px; margin: -750px 0 0 -750px;
  background: conic-gradient(from 0deg, transparent 0deg 120deg, rgba(200, 214, 255, .16) 158deg, rgba(235, 240, 255, .3) 172deg, transparent 180deg 280deg, rgba(200, 214, 255, .22) 330deg, rgba(255, 255, 255, .5) 354deg, transparent 360deg);
  opacity: 0;
}

/* play button centred on the tablet's screen (main.js keeps it there as the tablet tilts) */
.hv2-stage .hv2-play { top: calc(277px * var(--k)); }
.motion .hv2-play { opacity: 0; transition: opacity .8s var(--ease-out) 1.5s, transform .35s var(--ease-out), box-shadow .35s var(--ease-out); }
.is-loaded .hv2-play { opacity: 1; }

/* "Watch Video" in the dashboard screenshot opens the demo video */

/* Play button on the dashboard + video popup */
.play-btn {
  position: absolute; z-index: 1; left: 50%; top: 50%;
  width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .94); color: #000;
  box-shadow: 0 0 0 10px rgba(255, 255, 255, .28), 0 22px 44px -14px rgba(0, 0, 0, .6);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.play-btn svg { margin-left: 5px; }   /* optical centre of the triangle */
.play-btn:hover { transform: scale(1.08); box-shadow: 0 0 0 14px rgba(255, 255, 255, .32), 0 26px 50px -14px rgba(0, 0, 0, .7); }
.play-btn:active { transform: scale(1.02); }
.play-ring { position: absolute; inset: -10px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .75); animation: play-ring 2.4s var(--ease-out) infinite; pointer-events: none; }
@keyframes play-ring { from { transform: scale(.9); opacity: .9; } to { transform: scale(1.55); opacity: 0; } }

.video-modal {
  width: min(1120px, calc(100vw - 48px)); max-width: none; max-height: none;
  margin: auto; padding: 0; border: 0; background: transparent; overflow: visible;
}
.video-modal::backdrop { background: rgba(12, 6, 24, .8); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.video-modal[open] { animation: vm-in .4s var(--ease-out); }
.video-modal[open]::backdrop { animation: vm-fade .3s ease-out; }
@keyframes vm-in { from { opacity: 0; transform: translateY(18px) scale(.97); } }
@keyframes vm-fade { from { opacity: 0; } }
.video-frame { aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: #000; box-shadow: 0 40px 90px -20px rgba(0, 0, 0, .7); }
.video-frame iframe, .video-frame video { display: block; width: 100%; height: 100%; border: 0; }
/* our own video is portrait (9:16): as tall as the screen allows, leaving room for the close button */
.video-modal.video-modal--tall { width: min(calc(100vw - 24px), calc((100vh - 140px) * 9 / 16), 486px); }
@supports (height: 100svh) { .video-modal.video-modal--tall { width: min(calc(100vw - 24px), calc((100svh - 140px) * 9 / 16), 486px); } }
.video-modal--tall .video-frame { aspect-ratio: 9 / 16; }
.video-frame video { object-fit: cover; background: #000; }
.video-close {
  position: absolute; top: -54px; right: 0; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; color: #fff; background: rgba(255, 255, 255, .14);
  transition: background-color .2s, transform .25s var(--ease-out);
}
.video-close:hover { background: rgba(255, 255, 255, .26); transform: rotate(90deg); }
html.modal-open { overflow: hidden; }
.motion .dash-tilt { will-change: transform; }

/* Hero intro (qarin.framer.website): per-word blur-in, then fade-up */
.motion .hero-bg { opacity: 0; transform: scale(1.035); transition: opacity 1.1s var(--ease-out), transform 1.6s var(--ease-out); }
.motion .w {
  display: inline-block; opacity: 0; filter: blur(10px); transform: translateY(14px);
  transition: opacity .8s var(--ease-out), filter .8s var(--ease-out), transform .9s var(--ease-out);
  transition-delay: calc(var(--base) + var(--i) * var(--step));
}
.motion .reveal { opacity: 0; transform: translateY(20px); transition: opacity .9s var(--ease-out), transform 1s var(--spring); transition-delay: var(--d, 0s); }
.motion .rise   { opacity: 0; transform: translateY(90px); transition: opacity 1.2s var(--ease-out), transform 1.5s var(--ease-out); transition-delay: .35s; }
.is-loaded .hero-bg, .is-loaded .reveal, .is-loaded .rise { opacity: 1; transform: none; }
.is-loaded .hero .w { opacity: 1; filter: blur(0); transform: none; }
.motion .hv2-wall { opacity: 0; transition: opacity 1.8s var(--ease-out) .25s; }
.motion .hv2-device img { filter: brightness(.35); transition: filter 1.4s var(--ease-out) 1s; }
.is-loaded .hv2-wall { opacity: 1; }
.is-loaded .hv2-device img { filter: none; }

/* living light: the rim light drifts and breathes; the tablet's backlight,
   screen glow and the light on the desk breathe with it (9s cycle) */
.motion .hv2-light { will-change: transform; animation: hv2-drift 9s ease-in-out infinite alternate; }
.motion .ch-hz-rim:not(.ch-hz-rim--soft), .motion .ch-glow { animation: hv2-breathe 9s ease-in-out infinite; }
.motion .hv2-device::before, .motion .hv2-spill, .motion .hv2-horizon { animation: hv2-breathe 9s ease-in-out infinite; }
.motion .hv2-edge i { opacity: 1; will-change: transform; animation: hv2-spin 18s linear infinite; }   /* one lap every 18s */
.motion .hv2-sheen::before { animation: hv2-sheen 9s cubic-bezier(.45, .05, .35, 1) 2.4s infinite; }
@keyframes hv2-drift {
  0%   { transform: rotate(-8deg); opacity: .78; }
  50%  { opacity: 1; }
  100% { transform: rotate(9deg); opacity: .84; }
}
@keyframes hv2-breathe { 0%, 100% { opacity: .62; } 50% { opacity: 1; } }
@keyframes hv2-spin { to { transform: rotate(1turn); } }
@keyframes hv2-sheen {
  0%   { transform: translateX(0) skewX(-12deg); opacity: 0; }
  6%   { opacity: 1; }
  32%  { opacity: 1; }
  40%, 100% { transform: translateX(380%) skewX(-12deg); opacity: 0; }
}

/* =========================================================
   TRUSTED BY
   ========================================================= */
.trusted { position: relative; z-index: 2; padding: calc(6px + 8px * var(--k, 1)) 0 30px; text-align: center; }   /* on the desk, under the tablet (it sat above it for a while on 2026-10-30) */
.trusted .logo-track img { height: 40px; width: auto; }   /* client lockups have a second line ("By Dr. ..."), so a little taller */
.trusted .ch-logo { display: flex; align-items: center; gap: 10px; height: 40px; font-size: 22px; font-weight: 600; letter-spacing: -.01em; color: #fff; white-space: nowrap; }   /* the channels Zoie answers on: a line icon + its name, greyed like the client logos were */
.trusted .ch-logo svg { flex: none; width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* label | divider | sliding logos */
.trusted-inner { display: flex; align-items: center; gap: 36px; width: 1180px; max-width: calc(100% - 64px); margin: 0 auto; text-align: left; }
.trusted-label { flex: none; white-space: nowrap; font-size: 15px; line-height: 23px; color: rgba(226, 230, 240, .78); }
.trusted-label b { font-weight: 500; color: #aebcf6; }

.trusted-div { flex: none; width: 1px; height: 52px; background: rgba(255, 255, 255, .14); }
.trusted .logo-row { flex: 1; min-width: 0; width: auto; margin: 0; }
.trusted .logo-row:not(.is-marquee) { height: auto; }   /* no motion: the logos sit still, wrapping onto a second line if they don't fit */
.trusted .logo-row:not(.is-marquee) .logo-track { flex-wrap: wrap; justify-content: center; gap: 16px 44px; }
.trusted .logo-row:not(.is-marquee) .logo-track li { margin-left: 0; }
.logo-row { width: 1180px; height: 44px; margin: 0 auto; }
.logo-track { display: flex; }
.logo-track li { flex: none; opacity: .4; transition: opacity .3s; }
.logo-track li:hover { opacity: .75; }
/* static layout = Figma x positions (130, 360, 588, 829, 1107) */
.logo-track li:nth-child(2) { margin-left: 61px; }
.logo-track li:nth-child(3) { margin-left: 55px; }
.logo-track li:nth-child(4) { margin-left: 56px; }
.logo-track li:nth-child(5) { margin-left: 86px; }

/* Marquee (main.js adds .is-marquee and a duplicate set of logos; -50% = exactly one set) */
.logo-row.is-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}
.is-marquee .logo-track { width: max-content; animation: logos 34s linear infinite; }
.is-marquee .logo-track li { margin-left: 0; padding-right: 64px; }
.is-marquee:hover .logo-track { animation-play-state: paused; }
@keyframes logos { to { transform: translateX(-50%); } }

/* =========================================================
   HOW ZOIE WORKS
   ========================================================= */
.how { padding: 78px 0 96px; background: #fff; }   /* plain white (user's request, 2026-10-28; was the grainy light texture); the space under the four numbers: 127, halved, then some back (user's requests, 2026-11-02) */
.how .stats { margin-top: 80px; }   /* and above them: 104, halved, then some back (the cards' shadows take part of it) */
.how .lead { max-width: 37em; margin: 18px auto 0; line-height: 24px; color: #5f6474; text-wrap: balance; }   /* two gray lines under the heading, as in the user's reference (2026-11-02) */
.how .h-38 { text-wrap: balance; }
.how .wrap > .h-38, .how .wrap > .lead { position: relative; left: 12.5px; }   /* Figma centres these 12.5px right of the page centre */
/* the four steps as a timeline (user's reference, 2026-10-28; it was stacking cards): a line down the left with a black
   circle at each step, the step number, headline and line, and the step's live preview (the .mini scenes below, drawn
   228 x 149, scaled to their column by main.js: --hs-k). main.js places the line from the first circle to the last and
   fills it in black as you scroll (--rail-*). The same lead, Sarah, runs through all four previews (her name tag
   over each was removed at the user's request) */
.tl { position: relative; display: grid; gap: 80px; max-width: 1100px; margin: 56px auto 0; }
.tl::before, .tl::after {   /* the line: a light track, filled in black as you scroll */
  content: ""; position: absolute; left: var(--rail-x, 15px); top: var(--rail-t, 0); width: 2px; margin-left: -1px; border-radius: 2px;
}
.tl::before { height: var(--rail-h, 0); background: #e4e6ea; }
.tl::after { height: var(--rail-fill, 0); background: #17191a; }
[dir="rtl"] .tl::before, [dir="rtl"] .tl::after { margin-left: 0; margin-right: -1px; }
.tl-step { position: relative; display: grid; grid-template-columns: 32px 92px minmax(0, 1fr) 500px; column-gap: 24px; align-items: start; }
.tl-dot {   /* black, with a soft halo so it sits on the line */
  position: relative; z-index: 1; grid-column: 1; justify-self: center; width: 14px; height: 14px; margin-top: 21px; border-radius: 50%;
  background: #17191a; box-shadow: 0 0 0 6px #fff, 0 0 0 7px rgba(23, 25, 26, .1), 0 6px 16px rgba(23, 25, 26, .25);
}
.tl-num { grid-column: 2; font-size: 56px; line-height: 56px; font-weight: 700; letter-spacing: -.03em; color: #8b92a3; font-variant-numeric: tabular-nums; }
/* the words laid out like the user's reference (2026-11-02): the title beside the number, wrapping to two lines,
   and a larger, lighter description under it */
.tl-copy { grid-column: 3; padding-top: 0; }
.tl-title { max-width: 11.5em; font-size: 30px; line-height: 40px; font-weight: 700; letter-spacing: -.02em; color: #0b0c0e; text-wrap: balance; }
.tl-text { max-width: 17em; margin-top: 14px; font-size: 22px; line-height: 31px; color: #6f7382; text-wrap: pretty; }
.tl-visual { grid-column: 4; }
.tl-shot, .fs-shot { position: relative; width: 100%; aspect-ratio: 228 / 149; }
:is(.tl-shot, .fs-shot) .hs-fit { position: absolute; left: 0; top: 0; width: 228px; height: 149px; transform: scale(var(--hs-k, 2)); transform-origin: 0 0; }
[dir="rtl"] :is(.tl-shot, .fs-shot) .hs-fit { left: auto; right: 0; transform-origin: 100% 0; }
:is(.tl, .fs) .mini { left: 0; top: 0; box-shadow: 0 1px 3px rgba(15, 23, 42, .06), 0 22px 40px -22px rgba(30, 41, 59, .32), inset 0 0 0 1px #e9edef; }
/* calmer previews (user: "less animated"): each plays through once when it comes into view and stays on the finished
   picture (iteration .9 stops the 8s loop at 90%, just before it empties), and the channel logos don't take turns */
:is(.tl, .fs) .mx.is-play :is(.mx-in, .mx-out, .mx-typing, .mx-reply, .mx-book, .mx-instant, .mx-booked, .mx-hv, .mx-active, .mx-in2, .mx-invite, .mx-top, .mx-react, .mx-ok, .mx-back, .mx-sent, .mx-silent, .mx-scan, .mx-ring-fg, .mx-num, .m-track i) { animation-duration: 4s !important; animation-iteration-count: .9 !important; }   /* twice as fast: each scene is done in about 3.6s (user's request; was 8s) */
:is(.tl, .fs) .mx :is(.mx-ava-ch img, .mx-ch) { animation: none !important; }
@media (max-width: 1219px) {
  .tl-step { grid-template-columns: 28px 72px minmax(0, 1fr) minmax(0, 1fr); column-gap: 20px; }
  .tl-num { font-size: 46px; line-height: 50px; }
  .tl-dot { margin-top: 18px; }
  .tl-title { font-size: 26px; line-height: 35px; }
  .tl-text { font-size: 19px; line-height: 27px; }
}
@media (max-width: 899px) {   /* the reference: number and words on top, the preview under them, the line down the left */
  .tl { gap: 56px; margin-top: 40px; }
  .tl-step { grid-template-columns: 24px 64px minmax(0, 1fr); column-gap: 14px; }
  .tl-visual { grid-column: 2 / -1; margin-top: 20px; }
  .tl-text { max-width: 22em; }
}
@media (max-width: 640px) {
  .tl { gap: 22px; }   /* phones: compact enough that two steps fit on one screen (user's request, 2026-11-02) */
  /* phones: the number beside the title and the words under the title, as in the reference (2026-11-02; the number
     sat on its own line before); the circle beside the number, the preview under the words */
  .tl-step { grid-template-columns: 18px 44px minmax(0, 1fr); column-gap: 14px; }
  .tl-dot { grid-row: 1; width: 12px; height: 12px; margin-top: 13px; box-shadow: 0 0 0 5px #fff, 0 0 0 6px rgba(23, 25, 26, .1), 0 5px 12px rgba(23, 25, 26, .25); }
  .tl-num { grid-column: 2; grid-row: 1; font-size: 34px; line-height: 38px; }
  .tl-copy { grid-column: 3; grid-row: 1; padding-top: 5px; margin-top: 0; }   /* the title's first line level with the number */
  .tl-title { max-width: none; font-size: 18px; line-height: 24px; }
  .tl-text { max-width: none; margin-top: 5px; font-size: 14.5px; line-height: 21px; }
  .tl-visual { grid-column: 2 / -1; grid-row: 2; margin-top: 12px; }   /* the preview from under the number to the edge (user's request, 2026-11-02) */
  /* and a little shorter (drawn 228 x 170, not 190), the rows inside tightened to suit, so two steps still fit on one screen */
  .tl .tl-shot { aspect-ratio: 228 / 170; }
  .tl .tl-shot .hs-fit, .tl .tl-shot .mini { height: 170px; }
  .tl .mx--chat { gap: 6px; }   /* a translation that wraps every line still fits */
  .tl .mx--skills { gap: 7px; }
  .tl .mx-sk-list { gap: 3px; }
  .tl .mx-sk { height: 21px; }
  .tl .mx-wf { height: 24px; }
  .tl .mx-wf-link { height: 13px; }
  .tl .mx--grow { gap: 6px; }
  .tl .mx-chart { height: 34px; }
}
@media (max-width: 374px) {   /* the narrowest phones (360px): a little smaller again, so two steps still fit */
  .tl { gap: 18px; }
  .tl-num { font-size: 30px; line-height: 34px; }
  .tl-dot { margin-top: 11px; }
  .tl-copy { padding-top: 4px; }
  .tl-title { font-size: 17px; line-height: 22px; }
  .tl-text { margin-top: 4px; font-size: 14px; line-height: 19.5px; }
  .tl-visual { margin-top: 10px; }
}
@media (min-width: 1220px) {   /* desktop: the four steps side by side, as in the user's reference (2026-11-02): the number with a blue dot beside
                                  it whose curve sweeps down to the next step (none after the fourth), the words, and the previews level under them */
  .tl { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; max-width: none; margin-top: 64px; }
  .tl::before, .tl::after { display: none; }   /* no line down the left */
  .tl-step { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr auto; column-gap: 0; }
  .tl-num { grid-column: 1; grid-row: 1; font-size: 48px; line-height: 52px; }
  .tl-dot {
    grid-column: 2; grid-row: 1; align-self: center; justify-self: start; width: 10px; height: 10px; margin: 0; margin-inline-start: 30px;
    background: #6479ee; box-shadow: 0 0 0 4px rgba(100, 121, 238, .14), 0 0 12px rgba(100, 121, 238, .55);
  }
  .tl-step::after {   /* the curve: level from the dot, then down into the gap before the next step */
    content: ""; position: absolute; left: 104px; top: 26px; width: calc(100% - 90px); height: 92px; pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3ClinearGradient id='g' x2='1'%3E%3Cstop stop-color='%23c3cbe4'/%3E%3Cstop offset='1' stop-color='%23e8ebf3'/%3E%3C/linearGradient%3E%3Cpath d='M0 1C50 1 68 50 100 99' fill='none' stroke='url(%23g)' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
    transition: clip-path 1s var(--ease-out);
  }
  .tl-step:last-child::after { display: none; }   /* no curve after the fourth step */
  [dir="rtl"] .tl-step::after { left: auto; right: 104px; transform: scaleX(-1); }
  .sr-on .tl-step:not(:has(.mini.is-play))::after { clip-path: inset(0 100% 0 0); }   /* each curve draws in once its step's preview starts */
  .tl-step:nth-child(2)::after { transition-delay: .15s; }
  .tl-step:nth-child(3)::after { transition-delay: .3s; }
  .tl-copy { grid-column: 1 / -1; grid-row: 2; margin-top: 18px; }
  .tl-title { max-width: 10em; font-size: 21px; line-height: 27px; text-wrap: wrap; }   /* "Keep the momentum / going": the reference's line breaks (balancing split them the other way) */
  .tl-text { max-width: none; margin-top: 10px; font-size: 15.5px; line-height: 23px; }
  .tl-visual { grid-column: 1 / -1; grid-row: 3; margin-top: 26px; }
}


/* How Zoie Works' four small scenes (getting started, 2026-10-29), drawn 228 x 149 like the others: the goals picked,
   Zoie learning the business from its website, the setup ticked off, Zoie live. Each plays once when it comes into
   view (.is-play, main.js section 16) and stays on its finished picture, which is also what reduced motion shows */
.hw-ico { flex: none; display: grid; place-items: center; width: 17px; height: 17px; border-radius: 5px; background: #fff; color: var(--acc); box-shadow: inset 0 0 0 1px #e3e7f0; }
.hw-ico svg, .hw-url svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.hw-opts, .hw-steps { display: grid; gap: 6px; }
.hw-opts { margin-top: 10px; }
.hw-opt, .hw-step { display: flex; align-items: center; gap: 7px; height: 26px; padding: 0 7px; border-radius: 7px; background: #f6f7fb; box-shadow: inset 0 0 0 1px #eceff4; }
.hw-opt b, .hw-step b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; line-height: 12px; font-weight: 600; color: var(--text); }
.hw-box { flex: none; display: grid; place-items: center; width: 13px; height: 13px; border-radius: 4px; box-shadow: inset 0 0 0 1.3px #c9cfdb; }
.hw-on { background: var(--acc-tint); box-shadow: inset 0 0 0 1.2px var(--acc); }
.hw-on .hw-box { background: var(--acc); box-shadow: none; }
.hw-box svg, .hw-st svg { width: 9px; height: 9px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.mx--biz { gap: 8px; }
.hw-url { display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 3px 0 8px; border-radius: 7px; box-shadow: inset 0 0 0 1px #e3e7ee; color: var(--muted); }
.hw-url span:not(.mx-zoie) { flex: 1; min-width: 0; font-size: 10px; line-height: 12px; color: var(--text); }
.hw-read small { display: block; font-size: 9px; line-height: 11px; color: var(--muted); }
.hw-track, .hw-prog { display: block; height: 5px; border-radius: 3px; background: #eef1f5; overflow: hidden; }
.hw-track { margin-top: 4px; }
.hw-track i, .hw-prog i { display: block; height: 100%; border-radius: inherit; background: var(--acc); transform-origin: 0 50%; }
[dir="rtl"] :is(.hw-track, .hw-prog) i { transform-origin: 100% 50%; }
.hw-prog i { background: var(--ok); }
.hw-chips { display: flex; gap: 5px; min-width: 0; }
.hw-chips span { height: 18px; padding: 0 7px; border-radius: 9px; background: #f1f4f9; font-size: 9px; line-height: 18px; font-weight: 500; color: var(--text); white-space: nowrap; }
.hw-done { align-self: flex-start; }
.mx--setup { gap: 8px; }
.hw-step { height: 24px; background: #fff; box-shadow: inset 0 0 0 1px #e9edf2; }
.hw-st { flex: none; display: grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; background: var(--ok); }
.mx--live { justify-content: space-between; }
.hw-live { display: inline-flex; align-items: center; gap: 4px; }
.hw-pulse { width: 5px; height: 5px; border-radius: 50%; background: var(--ok); }
.hw-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.hw-stats span { display: grid; gap: 2px; padding: 7px 8px; border-radius: 8px; background: #f6f7fb; }
.hw-stats b { font-size: 15px; line-height: 18px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.hw-stats small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 8.5px; line-height: 10px; color: var(--muted); }
.hw-note { align-self: flex-start; }
/* the plays: things arrive one after another, then everything stays */
.mx.is-play :is(.hw-opt, .hw-url, .hw-read, .hw-step, .hw-stats span) { animation: hw-in .45s var(--ease-out) both; }
.mx.is-play :is(.hw-opt, .hw-step, .hw-stats span):nth-child(2) { animation-delay: .1s; }
.mx.is-play :is(.hw-opt, .hw-step, .hw-stats span):nth-child(3) { animation-delay: .2s; }
.mx.is-play .hw-read { animation-delay: .15s; }
.mx--goals.is-play .hw-on { animation: hw-in .45s var(--ease-out) both, hw-pick .3s ease-out .9s both; }
.mx--goals.is-play .hw-on:nth-child(3) { animation-delay: .2s, 1.4s; }
.mx--goals.is-play .hw-on .hw-box { animation: hw-pop .4s var(--spring) .9s both; }
.mx--goals.is-play .hw-on:nth-child(3) .hw-box { animation-delay: 1.4s; }
.mx--biz.is-play .hw-track i { animation: hw-fill 1.6s ease-in-out .4s both; }
.mx--biz.is-play .hw-chips span { animation: hw-pop .4s var(--spring) both; }
.mx--biz.is-play .hw-chips span:nth-child(1) { animation-delay: .9s; }
.mx--biz.is-play .hw-chips span:nth-child(2) { animation-delay: 1.2s; }
.mx--biz.is-play .hw-chips span:nth-child(3) { animation-delay: 1.5s; }
.mx--biz.is-play .hw-done { animation: hw-pop .45s var(--spring) 2.1s both; }
.mx--setup.is-play .hw-prog i { animation: hw-fill 2s ease-in-out .5s both; }
.mx--setup.is-play .hw-st { animation: hw-pop .4s var(--spring) both; }
.mx--setup.is-play .hw-step:nth-child(1) .hw-st { animation-delay: .9s; }
.mx--setup.is-play .hw-step:nth-child(2) .hw-st { animation-delay: 1.6s; }
.mx--setup.is-play .hw-step:nth-child(3) .hw-st { animation-delay: 2.3s; }
.mx--setup.is-play .hw-all { animation: hw-pop .45s var(--spring) 2.6s both; }
.mx--live.is-play .hw-live { animation: hw-pop .45s var(--spring) .2s both; }
.mx--live.is-play .hw-pulse { animation: hw-pulse 1.2s ease-out .6s 3; }
.mx--live.is-play .hw-note { animation: hw-pop .45s var(--spring) 1.3s both; }
@keyframes hw-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes hw-pop { 0% { opacity: 0; transform: scale(.6); } 70% { opacity: 1; transform: scale(1.08); } 100% { opacity: 1; transform: none; } }
@keyframes hw-pick { from { background: #f6f7fb; box-shadow: inset 0 0 0 1px #eceff4; } }
@keyframes hw-fill { from { transform: scaleX(0); } }
@keyframes hw-pulse { 0% { box-shadow: 0 0 0 0 rgba(22, 163, 74, .5); } 100% { box-shadow: 0 0 0 6px rgba(22, 163, 74, 0); } }

/* Features: a card per feature that sticks below the nav, each one --step lower than the last, so they stack up as you
   scroll (user's request); the card underneath shrinks back a little as the next one covers it (main.js: --cover).
   The bottom margins (3, 2, 1, 0 steps) keep the stack staggered when the end of the section pushes it up */
.feat { padding: 110px 0 120px; background: #f4f5f7; }
.feat .lead { margin-top: 21px; }
.fs { --step: 16px; display: grid; gap: 40px; max-width: 1100px; margin: 56px auto 0; }
.fs-card {
  position: sticky; top: calc(96px + var(--i, 0) * var(--step)); margin-bottom: calc((3 - var(--i, 0)) * var(--step)); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: center;
  padding: 44px; border-radius: 28px; background: #fff; box-shadow: 0 0 0 1px #e7e9ee, 0 24px 48px -30px rgba(15, 23, 42, .25);
  transform: scale(calc(1 - var(--cover, 0) * .04)); transform-origin: 50% 0;
}
.fs-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #0f172a; opacity: calc(var(--cover, 0) * .05); pointer-events: none; }
.fs-tag { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: 99px; font-size: 13px; font-weight: 600; color: #2c3a8f; background: #eaeefe; }
.fs-tag svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fs-title { margin-top: 18px; font-size: 30px; line-height: 36px; font-weight: 700; letter-spacing: -.02em; color: #0b0c0e; }
.fs-text { margin-top: 14px; font-size: 16px; line-height: 25px; color: #5b6070; }
.fs-list { display: grid; gap: 12px; margin-top: 24px; }
.fs-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 15.5px; line-height: 22px; color: #1e2329; }
.fs-list svg { flex: none; width: 20px; height: 20px; padding: 4px; margin-top: 1px; border-radius: 50%; background: #dcfce7; fill: none; stroke: #15803d; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
/* the preview's panel: the compare pages' black logo panel (user's request), soft lights slowly drifting across it */
.fs-visual {
  position: relative; isolation: isolate; overflow: hidden; padding: 32px; border-radius: 20px;
  background: linear-gradient(160deg, #15171b 0%, #08090c 55%, #030406 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
}
.fs-visual::before {
  content: ""; position: absolute; inset: -40%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(28% 32% at 32% 30%, rgba(255, 255, 255, .13), transparent 70%),
    radial-gradient(30% 30% at 70% 62%, rgba(142, 160, 255, .14), transparent 70%),
    radial-gradient(36% 30% at 48% 88%, rgba(160, 170, 190, .09), transparent 70%);
}
.motion .fs-visual::before { animation: fs-drift 14s ease-in-out infinite alternate; }
.motion .fs-card:nth-child(even) .fs-visual::before { animation-duration: 17s; animation-direction: alternate-reverse; }   /* neighbours don't move in step */
@keyframes fs-drift {
  0%   { transform: translate(-8%, -5%) rotate(0deg); }
  50%  { transform: translate(6%, 4%) rotate(10deg); }
  100% { transform: translate(-2%, 8%) rotate(-8deg); }
}
.fs .mini { box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .9), inset 0 0 0 1px #e9edef; }   /* the compare page logo chips' shadow */
.feat .stats { margin-top: 96px; }
@media (max-width: 1219px) {
  .fs-card { gap: 40px; padding: 36px; }
  .fs-title { font-size: 26px; line-height: 32px; }
  .fs-visual { padding: 24px; }
}
@media (max-width: 899px) {   /* one column: the words, then the preview */
  .fs { --step: 12px; gap: 28px; margin-top: 40px; }
  .fs-card { top: calc(88px + var(--i, 0) * var(--step)); grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 28px; }
}
@media (max-width: 640px) {
  .fs { --step: 10px; gap: 20px; }
  .fs-card { top: calc(80px + var(--i, 0) * var(--step)); gap: 20px; padding: 22px 18px 18px; border-radius: 22px; }
  .fs-tag { height: 28px; font-size: 12.5px; }
  .fs-title { margin-top: 14px; font-size: 23px; line-height: 29px; }
  .fs-text { margin-top: 10px; font-size: 16px; line-height: 23px; }
  .fs-list { gap: 9px; margin-top: 16px; }
  .fs-list li { font-size: 15px; line-height: 21px; }
  .fs-visual { padding: 16px; border-radius: 16px; }
  .feat .stats { margin-top: 56px; }
}
/* ---- the channels between the buttons and the tablet: a widely spaced caps line over a row of icon tiles
        (the integrations section's charcoal tiles). On phones first (2026-11-02), then on every screen at the user's request;
        it replaces "One AI. Every Conversation." and the scrolling channel names that sat under the tablet ---- */
.hero--v2 > .trusted { margin-top: 34px; padding: 0; }
.hero--v2 .trusted-inner { justify-content: center; }
.hero--v2 .trusted-label, .hero--v2 .trusted-div, .hero--v2 .trusted .logo-row { display: none; }
.hero--v2 .trusted-kicker {
  display: block; margin: 0; padding-left: .27em; white-space: nowrap;   /* the padding balances the spacing after the last letter */
  font-size: 15px; line-height: 1.6; font-weight: 500; letter-spacing: .27em; text-transform: uppercase; color: #c9cbd0;
}
:is(:lang(ja), :lang(zh), :lang(ar)) .hero--v2 .trusted-kicker { letter-spacing: .08em; padding-left: .08em; }
.hm-tiles { display: flex; justify-content: center; gap: 14px; margin: 18px auto 0; padding: 0; list-style: none; position: relative; z-index: 2; }   /* above the scene's light lines, which showed through the tiles */
.hm-tiles .tile {   /* white glyphs on dark glass with a hairline edge, lit from the top (user's reference, 2026-11-02) */
  width: 44px; height: 44px; border-radius: 11px; color: #f1f2ef;
  background: linear-gradient(180deg, #2a2b2d, #222326 45%, #18191d);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), inset 0 1px 0 rgba(255, 255, 255, .12), 0 4px 12px rgba(0, 0, 0, .35);
}
.hm-tiles .tile svg { width: 22px; height: 22px; display: block; }   /* each icon's viewBox is cropped square around it, so all fill the same box, centred */
.hero--v2 > .hm-tiles + .hv2-stage { margin-top: 30px; }

/* version with the channels under the dashboard (home-icons-below.html, for review 2026-11-02) */
.hero--icons-below > .trusted { margin-top: calc(10px + 12px * var(--k, 1)); }
.hero--icons-below { padding-bottom: 44px; }   /* room under the tiles (a margin would slip out of the section); phones set their own below */

/* ---- phones: the dashboard close-up (.hm) in place of the whole scene (user's reference, 2026-10-30) ---- */
.hm { display: none; }
@media (max-width: 640px) {
  .hero--v2 > .hv2-stage, .hero--v2 > .hm-tiles + .hv2-stage { height: 0; margin: 0; }   /* the lit backdrop stays; the tablet, its desk light and play button give way to .hm */
  .hv2-stage .hv2-3d, .hv2-stage .hv2-desk, .hv2-stage .hv2-play { display: none; }
  /* order on phones: the buttons, then the backdrop's anchor, the caps line, the tiles and the close-up */
  .hero--v2 > .trusted { order: 1; }
  .hero--v2 > .hm-tiles { order: 2; }
  .hero--v2 > .hm { order: 3; }
  .hm-tiles { gap: 12px; margin: 14px 16px 4px; }
  .hm-tiles .tile { width: min(35px, calc((100vw - 74px) / 7)); height: auto; aspect-ratio: 1; border-radius: 8.5px; }   /* whole pixels, so the icons land on the pixel grid */
  .hm-tiles .tile svg { width: 17px; height: 17px; }
  .hero--v2 .trusted-kicker { font-size: min(13px, calc((100vw - 32px) / 20.5)); }   /* one line: "WORKS ACROSS CHANNELS" runs about 19.8 times the font size wide */
  :is(:lang(es), :lang(fr), :lang(de), :lang(pt)) .hero--v2 .trusted-kicker { font-size: min(13px, calc((100vw - 32px) / 27.5)); }   /* these run longer (about 27x) */
  :is(:lang(ja), :lang(zh), :lang(ar)) .hero--v2 .trusted-kicker { font-size: 13px; }
  .hm { display: flex; flex-direction: column; flex: 1 1 190px; max-height: 350px; min-height: 0; position: relative; z-index: 2; margin-top: 10px; }
  .hm-play {   /* see-through, so the dashboard reads under it (user's request; the white one covered the text) */
    position: absolute; z-index: 3; left: 50%; top: 60%; width: 46px; height: 46px; margin: -23px 0 0 -23px; padding: 0;
    display: grid; place-items: center; border-radius: 50%; cursor: pointer; color: #fff;
    background: rgba(8, 10, 16, .22); border: 1px solid rgba(255, 255, 255, .5); box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
  }
  .hm-play svg { margin-left: 2px; }
  .hm-play:active { background: rgba(8, 10, 16, .4); }
  .motion .hm-play { opacity: 0; transition: opacity .8s var(--ease-out) 1.4s, background .25s var(--ease-out); }   /* fades in after the close-up rises */
  .is-loaded .hm-play { opacity: 1; }
  .hm-view { position: relative; flex: 1 1 auto; min-height: 0; margin-top: 0; overflow: hidden; direction: ltr; }   /* the product UI reads left to right in every language */
  .hm-view {   /* the tablet fades out at the bottom (a mask, as the glow behind it is not one flat colour) */
    -webkit-mask: linear-gradient(#000 calc(100% - 64px), transparent calc(100% - 5px));
            mask: linear-gradient(#000 calc(100% - 64px), transparent calc(100% - 5px));
  }
  .hm-shot {   /* the user's render of the dashboard on an angled tablet (transparent around it); it runs off the right edge */
    position: absolute; left: 12px; top: 8px; width: 100%; height: auto; max-width: none;
    filter: drop-shadow(-14px 22px 40px rgba(0, 0, 0, .55));
  }
}

@media (prefers-reduced-motion: reduce) { .fs-card { transform: none; } .fs-card::after { opacity: 0; } }

.mini {
  position: absolute; left: 6px; top: 8px; width: 228px; height: 149px; padding: 12px;
  display: flex; flex-direction: column;
  background: #fff; border-radius: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, .07), inset 0 0 0 1px #e9edef;   /* outline keeps the preview distinct on the white card */
}
.mini--gap8 { gap: 8px; } .mini--gap7 { gap: 7px; } .mini--gap6 { gap: 6px; }
/* Preview colours: indigo-blue accent + green (success) + amber (attention), taken from the product dashboard */
.mini { --acc: #4b5fd6; --acc-tint: #eaeefe; --acc-ink: #2c3a8f; --ok: #16a34a; --ok-tint: #dcfce7; --ok-ink: #15803d; --warn-tint: #fef3c7; --warn-ink: #b45309; --text: #1e293b; --muted: #5b6478; }
.m-row { display: flex; align-items: center; gap: 6px; height: 25px; }
.m-row--end { justify-content: flex-end; }
.m-ava { flex: none; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, #ffd8b0, #f9b98a); }   /* the lead */
.m-ava--lg { width: 26px; height: 26px; background: linear-gradient(135deg, #fde68a, #f6c453); }
.m-bubble { padding: 6px 10px; font-size: 10px; line-height: 12px; white-space: nowrap; }
.m-row .m-bubble { min-width: 0; overflow: hidden; text-overflow: ellipsis; }   /* a long translation shortens the bubble instead of pushing the tag past the edge */
.m-row:has(.m-badge) { gap: 5px; }
.m-bubble--in  { background: #f1f4f9; color: var(--text); border-radius: 10px 10px 10px 2px; }
.m-bubble--out { background: linear-gradient(180deg, #5f73f2, var(--acc)); color: #fff; border-radius: 10px 10px 2px 10px; }   /* Zoie */
.m-badge { flex: none; height: 15px; padding: 2px 7px; border-radius: 8px; font-size: 9px; line-height: 11px; font-weight: 600; white-space: nowrap; }
.m-badge--instant { padding: 2px 6px; }
.m-badge--bold { font-weight: 700; }
.m-badge--green  { background: var(--ok-tint); color: var(--ok-ink); }
.m-badge--yellow { background: var(--warn-tint); color: var(--warn-ink); }
.m-head { display: flex; justify-content: space-between; align-items: center; height: 15px; }
.mini--gap6 .m-head { height: 16px; }
.m-h { font-size: 11px; line-height: 13px; font-weight: 700; color: var(--text); }
.m-navs { display: flex; gap: 4px; }
.m-nav { width: 16px; height: 16px; border-radius: 4px; background: var(--acc-tint); display: grid; place-items: center; }
.m-cal { display: flex; align-items: flex-start; gap: 4px; }
.m-cal span { width: 26px; text-align: center; font-size: 9px; line-height: 11px; }
.m-cal--days span { color: var(--muted); }
.m-cal--dates { height: 18px; }
.m-cal--dates span { color: var(--text); }
.m-cal--dates .is-on { height: 18px; line-height: 18px; border-radius: 5px; background: var(--acc); color: #fff; font-weight: 700; }
.m-pill { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 6px; font-size: 10px; line-height: 12px; font-weight: 600; white-space: nowrap; }
.m-pill--indigo { background: var(--acc-tint); color: var(--acc-ink); }
.m-pill--indigo .m-dot { background: var(--acc); }
.mini--gap6 .m-pill--indigo { background: var(--ok-tint); color: var(--ok-ink); }   /* "Booked by Zoie" = success */
.mini--gap6 .m-pill--indigo .m-dot { background: var(--ok); }
.m-pill--score b { font-weight: 700; }
.m-pill--green { gap: 5px; padding: 4px 8px; background: var(--ok-tint); color: var(--ok-ink); font-size: 9px; line-height: 11px; }
.m-pill--green .m-dot { background: var(--ok); }
.m-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; }
.m-grade { padding: 2px 5px; border-radius: 6px; background: var(--acc); color: #fff; font-size: 9px; line-height: 11px; font-weight: 700; }
.m-bars { display: flex; flex-direction: column; gap: 6px; }
.m-bar { display: flex; align-items: center; gap: 6px; height: 11px; }
.m-bl { width: 62px; font-size: 9px; line-height: 11px; color: var(--muted); }
.m-track { display: flex; width: 100px; height: 7px; border-radius: 4px; background: #eef1f5; }
.m-track i { height: 7px; border-radius: 4px; background: var(--acc); }
.m-bar:nth-child(2) .m-track i { background: #38bdf8; }
.m-bar:nth-child(3) .m-track i { background: #22c55e; }
.m-bv { font-size: 9px; line-height: 11px; font-weight: 600; color: var(--text); }
.m-person { display: flex; align-items: center; gap: 7px; height: 26px; }
.m-who { display: flex; flex-direction: column; gap: 2px; }
.m-who b { font-size: 10px; line-height: 12px; font-weight: 600; color: var(--text); }
.m-who small { font-size: 9px; line-height: 11px; color: var(--muted); }
.m-msg { display: flex; flex-direction: column; gap: 3px; padding: 7px 8px; border-radius: 8px; background: var(--acc-tint); }
.m-msg small { font-size: 9px; line-height: 11px; color: var(--muted); }
.m-msg span { font-size: 10px; line-height: 12px; color: var(--acc-ink); white-space: nowrap; }
.m-typing { display: inline-flex; align-items: center; gap: 3px; height: 12px; padding: 0 2px; }
.m-typing i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; animation: m-typing 1s ease-in-out infinite; }
.m-typing i:nth-child(2) { animation-delay: .15s; } .m-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes m-typing { 0%, 60%, 100% { opacity: .45; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
.m-cal--dates span { height: 18px; line-height: 18px; border-radius: 5px; transition: background-color .2s, color .2s; }
.m-cal--dates .is-scan { background: var(--acc-tint); }
.m-cal--dates .is-pop { animation: m-pop .45s var(--spring); }
@keyframes m-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.15); } 100% { transform: none; } }

/* ---------- the four previews as small live scenes (main.js section 16 adds .is-play / .is-live while on screen) ----------
   Each loops every 8s: 1. a message comes in on a channel, Zoie types and answers instantly; 2. Zoie scans the week, books the
   free slot and sends the invite; 3. the lead is scored (ring, bars, verdict); 4. a quiet lead gets a follow-up and replies.
   Without .is-play (reduced motion, no JS) each shows its finished state. */
.mx { gap: 10px; }
.mx-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.mx-row--end { justify-content: flex-end; }
.mx-row .m-bubble { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mx-ava {
  position: relative; flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  font-size: 7.5px; font-weight: 700; color: #9a4a12; background: linear-gradient(135deg, #ffd8b0, #f9b98a);
}
.mx-ava--b { width: 26px; height: 26px; font-size: 8.5px; color: #7a5a06; background: linear-gradient(135deg, #fde68a, #f6c453); }
.mx-ava-ch { position: absolute; right: -4px; bottom: -4px; width: 12px; height: 12px; }
.mx-ava-ch img { position: absolute; inset: 0; width: 12px; height: 12px; border-radius: 3px; box-shadow: 0 0 0 1.5px #fff; }
.mx-ava-ch img + img { opacity: 0; }
.mx-zoie, .mx-invite {   /* the lit charcoal of the site's icon tiles */
  flex: none; display: grid; place-items: center;
  background: radial-gradient(60% 130% at 35% 0%, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0) 72%), var(--ink-2);
  box-shadow: inset 0 -1.5px 0 #080808, inset 0 1px 0 rgba(255, 255, 255, .25), 0 3px 6px rgba(0, 0, 0, .15);
}
.mx-zoie { width: 20px; height: 20px; border-radius: 6px; }
.mx-zoie img { width: 11px; }
.mx-chs { display: flex; gap: 4px; }
.mx-ch { width: 15px; height: 15px; border-radius: 4px; }
.mx-slot { display: grid; justify-items: end; min-width: 0; }
.mx-slot--start { justify-items: start; }
.mx-slot > * { grid-area: 1 / 1; }
.mx-typing { opacity: 0; }
.mx-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.mx-instant { display: inline-flex; align-items: center; gap: 3px; height: 16px; }
.mx-instant svg { width: 9px; height: 9px; fill: currentColor; }
.mx-time { margin-inline-start: 2px; font-weight: 500; opacity: .8; }
.mx--chat { justify-content: space-between; }
.mx--chat .mx-foot { justify-content: space-between; }
/* 2. scheduling */
.mx--cal { gap: 6px; }
.mx-days { display: grid; grid-template-columns: repeat(5, 1fr); }
.mx-days span { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.mx-days small { font-size: 8px; line-height: 10px; color: var(--muted); }
.mx-days b { min-width: 18px; padding: 0 3px; border-radius: 4px; font-size: 9.5px; line-height: 12px; font-weight: 600; text-align: center; color: var(--text); }
.mx-days .is-today b { color: #fff; background: var(--acc); }
.mx-grid {   /* three free/busy rows, one column per day */
  position: relative; height: 42px; border-radius: 6px; box-shadow: inset 0 0 0 1px #eef1f5;
  background: repeating-linear-gradient(to bottom, transparent 0 13px, #eef1f5 13px 14px), repeating-linear-gradient(to right, transparent 0 39.8px, #eef1f5 39.8px 40.8px);
}
.mx-busy, .mx-scan, .mx-book { position: absolute; left: calc(var(--d) * 40.8px + 2px); top: calc(var(--r) * 14px + 2px); width: 36.8px; height: 10px; border-radius: 3px; }
.mx-busy { background: #e5e8ee; }
.mx-scan { opacity: 0; background: rgba(75, 95, 214, .14); box-shadow: inset 0 0 0 1.2px rgba(75, 95, 214, .75); }
.mx-book { display: grid; place-items: center; background: linear-gradient(180deg, #5f73f2, var(--acc)); box-shadow: 0 3px 6px -2px rgba(75, 95, 214, .7); }
.mx-book svg { width: 8px; height: 8px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; }
.mx--cal .mx-foot { justify-content: space-between; }
.m-pill--ok { background: var(--ok-tint); color: var(--ok-ink); }
.m-pill--ok .m-dot { background: var(--ok); }
.mx-invite { position: relative; width: 22px; height: 22px; border-radius: 6px; }
.mx-invite svg { width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mx-ok { position: absolute; top: -4px; right: -4px; display: grid; place-items: center; width: 11px; height: 11px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 1.5px #fff; }
.mx-ok svg { width: 7px; height: 7px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
/* 3. lead score */
.mx-score { display: flex; align-items: center; gap: 10px; }
.mx-ring { position: relative; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 60px; height: 60px; }
.mx-ring svg { position: absolute; inset: 0; width: 60px; height: 60px; transform: rotate(-90deg); fill: none; stroke-width: 6; stroke-linecap: round; }
.mx-ring-bg { stroke: #eef1f5; }
.mx-ring-fg { stroke: var(--acc); stroke-dasharray: 100; stroke-dashoffset: 15; }
.mx-num { --score: 85; counter-reset: score var(--score); font-size: 0; line-height: 0; }   /* the "85" in the markup is hidden; the counter shows */
.mx-num::before { content: counter(score); display: block; font-size: 19px; line-height: 1; font-weight: 700; letter-spacing: -.02em; color: var(--text); }   /* a block of its own, so it centres in the ring (it sat ~4px high on the zero-size line) */
.mx--score .m-bars { flex: 1; min-width: 0; gap: 8px; }
.mx--score .m-bl { flex: none; width: 57px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx--score .m-track { flex: 1; width: auto; }
.mx--score .m-track i { width: calc(var(--w) * 100%); transform-origin: 0 50%; }
.mx--score .m-bv { flex: none; width: 22px; text-align: end; }
.mx-top { gap: 6px; }
.mx-top svg { flex: none; width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.mx-top .m-grade { margin-inline-start: auto; }
@property --score { syntax: "<integer>"; inherits: false; initial-value: 0; }
/* 4. re-engagement */
.mx--re { gap: 6px; }
.mx-person { display: flex; align-items: center; gap: 7px; }
.mx-person .m-who { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mx-person .m-who b { font-size: 10px; line-height: 12px; font-weight: 600; color: var(--text); }
.mx-person .m-who small { font-size: 8.5px; line-height: 10px; color: var(--muted); white-space: nowrap; }
.mx-badges { display: grid; justify-items: end; margin-inline-start: auto; }
.mx-badges > * { grid-area: 1 / 1; }
.mx-silent { opacity: 0; }
.mx-sent { display: grid; gap: 3px; }
.mx-sent small { font-size: 8px; line-height: 10px; text-align: end; color: var(--muted); }
.mx-back .m-bubble, .mx-sent .m-bubble { max-width: 100%; }

/* the loops */
.mx--chat.is-play .mx-in, .mx--re.is-play .mx-sent { animation: mx-a10 8s infinite both; }
.mx--chat.is-play .mx-out { animation: mx-a18 8s infinite both; }
.mx--chat.is-play .mx-typing { animation: mx-typ 8s infinite both; }
.mx.is-play .mx-reply, .mx--cal.is-play .mx-book { animation: mx-a38 8s infinite both; }
.mx--re.is-play .mx-reply { animation-name: mx-a46; }
.mx--chat.is-play .mx-instant, .mx--cal.is-play .mx-booked, .mx--score.is-play .mx-hv, .mx--re.is-play .mx-active { animation: mx-a46 8s infinite both; }
.mx--re.is-play .mx-active { animation-name: mx-a54; }
.mx--chat.is-play .mx-in2, .mx--cal.is-play .mx-invite, .mx--score.is-play .mx-top, .mx--re.is-play .mx-react { animation: mx-a54 8s infinite both; }
.mx--re.is-play .mx-react { animation-name: mx-a62; }
.mx--cal.is-play .mx-ok { animation: mx-a62 8s infinite both; }
.mx--re.is-play .mx-back { animation: mx-a22 8s infinite both; }
.mx--re.is-play .mx-typing { animation: mx-typ2 8s infinite both; }
.mx--re.is-play .mx-silent { animation: mx-gone50 8s infinite both; }
.mx--cal.is-play .mx-scan { animation: mx-scan 8s infinite both; }
.mx--score.is-play .mx-ring-fg { animation: mx-ring 8s infinite both; }
.mx--score.is-play .mx-num { animation: mx-count 8s infinite both; }
.mx--score.is-play .m-track i { animation: mx-bar 8s infinite both; }
.mx--score.is-play .m-bar:nth-child(2) .m-track i { animation-delay: .25s; }
.mx--score.is-play .m-bar:nth-child(3) .m-track i { animation-delay: .5s; }
.mx--chat.is-play .mx-ava-ch img { animation: mx-cyc 24s infinite both; }
.mx--chat.is-play .mx-ch { animation: mx-cyc-hi 24s infinite both; }
.mx--chat.is-play :is(.mx-ava-ch img, .mx-ch):nth-child(2) { animation-delay: -16s; }   /* WhatsApp, then Instagram, then Messenger: one per loop */
.mx--chat.is-play :is(.mx-ava-ch img, .mx-ch):nth-child(3) { animation-delay: -8s; }
.mx:not(.is-live) *, .mx:not(.is-live) *::before { animation-play-state: paused !important; }
@keyframes mx-a10 { 0%, 5% { opacity: 0; transform: translateY(6px) scale(.97); } 11%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
@keyframes mx-a18 { 0%, 14% { opacity: 0; transform: translateY(6px) scale(.97); } 19%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
@keyframes mx-a22 { 0%, 20% { opacity: 0; transform: translateY(6px) scale(.97); } 25%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
@keyframes mx-a38 { 0%, 33% { opacity: 0; transform: scale(.8); } 37% { opacity: 1; transform: scale(1.06); } 40%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
@keyframes mx-a46 { 0%, 41% { opacity: 0; transform: scale(.8); } 45% { opacity: 1; transform: scale(1.06); } 48%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
@keyframes mx-a54 { 0%, 49% { opacity: 0; transform: translateY(5px) scale(.9); } 53% { opacity: 1; transform: scale(1.04); } 56%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
@keyframes mx-a62 { 0%, 57% { opacity: 0; transform: scale(.6); } 61% { opacity: 1; transform: scale(1.15); } 64%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
@keyframes mx-typ { 0%, 17% { opacity: 0; } 20%, 32% { opacity: 1; } 34%, 100% { opacity: 0; } }
@keyframes mx-typ2 { 0%, 23% { opacity: 0; } 26%, 40% { opacity: 1; } 42%, 100% { opacity: 0; } }
@keyframes mx-gone50 { 0%, 48% { opacity: 1; } 50%, 97% { opacity: 0; } 100% { opacity: 1; } }
@keyframes mx-scan {   /* free slots: Tue 9, Fri 9, Mon 11, then Wed 10 */
  0%, 7% { opacity: 0; transform: translate(-40.8px, -14px); }
  9%, 13% { opacity: 1; transform: translate(-40.8px, -14px); }
  16%, 20% { opacity: 1; transform: translate(81.6px, -14px); }
  23%, 27% { opacity: 1; transform: translate(-81.6px, 14px); }
  30%, 34% { opacity: 1; transform: none; }
  37%, 100% { opacity: 0; transform: none; }
}
@keyframes mx-ring { 0%, 8% { stroke-dashoffset: 100; } 36%, 90% { stroke-dashoffset: 15; } 97%, 100% { stroke-dashoffset: 100; } }
@keyframes mx-count { 0%, 8% { --score: 0; } 36%, 90% { --score: 85; } 97%, 100% { --score: 0; } }
@keyframes mx-bar { 0%, 10% { transform: scaleX(0); } 32%, 90% { transform: none; } 97%, 100% { transform: scaleX(0); } }
@keyframes mx-cyc { 0%, 32% { opacity: 1; } 34%, 98% { opacity: 0; } 100% { opacity: 1; } }
@keyframes mx-cyc-hi { 0%, 32% { opacity: 1; transform: scale(1.12); } 34%, 98% { opacity: .35; transform: none; } 100% { opacity: 1; transform: scale(1.12); } }

/* How it works, "From messages to meetings" (user's content, 2026-11-02): taller previews, so the qualifying chat and the
   time picker fit as in the reference; the chat and the follow-up spread down the same height */
.tl-shot { aspect-ratio: 228 / 190; }
.tl-shot .hs-fit, .tl .mini { height: 190px; }
.tl .mx--re { justify-content: space-between; }
.tl .mx--re .m-bubble { white-space: normal; text-wrap: balance; }   /* a longer translation of the follow-up wraps instead of being cut off */
.tl .mx--chat .mx-out { justify-content: flex-end; }   /* Zoie's reply on the right, as in the reference */
/* 2. qualifying: the lead's question, Zoie asks back, the lead picks an answer */
.mx--qual { gap: 10px; }
.mx-ava--jd { width: 24px; height: 24px; font-size: 8px; color: #fff; background: linear-gradient(135deg, #7487f6, #4b5fd6); }
.m-bubble--line { background: #fff; color: var(--text); border-radius: 10px 10px 10px 2px; box-shadow: inset 0 0 0 1px #e6e9ef; }
.mx--qual .m-bubble--line { padding: 6px 9px; font-size: 9px; line-height: 11.5px; white-space: normal; text-wrap: balance; }
.mx-ask { align-items: flex-start; }
.mx-q { padding: 3px 6px 0 2px; font-size: 9px; line-height: 11.5px; color: var(--text); transform-origin: 0 0; }
.mx-opts { display: grid; gap: 4px; margin-inline-start: 26px; }
.mx-opt, .mx-t {
  position: relative; display: grid; place-items: center; height: 19px; background: #fff; box-shadow: inset 0 0 0 1px #e6e9ef;
  font-size: 9px; line-height: 11px; font-weight: 500; color: var(--text); white-space: nowrap;
}
.mx-opt { border-radius: 9.5px; }
.mx-opt .mx-cursor { left: 69%; }
.mx-opt.is-pick, .mx-t.is-pick { background: #5b6ff0; color: #fff; box-shadow: 0 3px 8px -3px rgba(75, 95, 214, .7); }
.mx-cursor { position: absolute; left: 66%; top: 55%; width: 10px; height: 13.5px; fill: #fff; stroke: #1e293b; stroke-width: 1.3; stroke-linejoin: round; filter: drop-shadow(0 1px 1px rgba(15, 23, 42, .3)); }
/* 3. the time picker */
.mx--slots { gap: 7px; }
.mx-month { display: flex; align-items: center; gap: 3px; }
.mx-month small { margin-inline-end: 3px; font-size: 8.5px; line-height: 10px; color: var(--text); }
.mx-arw { display: grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: #f1f3f7; }
.mx-arw svg { width: 9px; height: 9px; fill: none; stroke: var(--text); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
[dir="rtl"] .mx-arw svg { transform: scaleX(-1); }
.mx-week { display: grid; grid-template-columns: repeat(5, 1fr); }
.mx-week span { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.mx-week small { font-size: 8px; line-height: 10px; color: var(--muted); }
.mx-week b { min-width: 20px; padding: 2px 3px; border-radius: 5px; font-size: 10.5px; line-height: 13px; font-weight: 600; text-align: center; color: var(--text); }
.mx-week .is-today small { color: var(--acc); }
.mx-week .is-today b { color: #fff; background: var(--acc); }
.mx-times { display: grid; gap: 4px; direction: ltr; }   /* "9:00 AM" stays in that order in Arabic */
.mx-t { height: 18px; }
.mx-t { border-radius: 6px; background: #fafbfc; }
.mx-booked2 { display: flex; align-items: center; gap: 7px; padding: 6px 8px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px #e9edf2, 0 2px 6px rgba(15, 23, 42, .05); }
.mx-check { flex: none; display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: var(--acc); }
.mx-check svg { width: 10px; height: 10px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.mx-booked2 .m-who { flex: 1; min-width: 0; }
.mx-booked2 .m-who b { font-size: 9.5px; line-height: 11px; font-weight: 700; color: var(--text); }
.mx-booked2 .m-who small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 8px; line-height: 10px; color: var(--muted); }
.mx-calico { flex: none; width: 13px; height: 13px; fill: none; stroke: var(--text); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* their loops: the question, Zoie typing then asking, the answers, the cursor picks one; the slots, the pick, booked */
.mx--qual.is-play .mx-in, .mx--slots.is-play .mx-week { animation: mx-a10 8s infinite both; }
.mx--qual.is-play .mx-ask, .mx--slots.is-play .mx-t { animation: mx-a18 8s infinite both; }
.mx--qual.is-play .mx-typing { animation: mx-typ 8s infinite both; }
.mx--qual.is-play .mx-opt { animation: mx-a46 8s infinite both; }
.mx--qual.is-play .mx-opt.is-pick { animation: mx-a46 8s infinite both, mx-pick 8s infinite both; }
.mx--slots.is-play .mx-t.is-pick { animation: mx-a18 8s infinite both, mx-pick 8s infinite both; }
.mx.is-play :is(.mx-opt, .mx-t):nth-child(2) { animation-delay: .1s; }
.mx.is-play :is(.mx-opt, .mx-t):nth-child(3) { animation-delay: .2s; }
.mx.is-play .mx-cursor { animation: mx-cur 8s infinite both; }
.mx--slots.is-play .mx-booked2 { animation: mx-a70 8s infinite both; }
:is(.tl, .fs) .mx.is-play :is(.mx-ask, .mx-opt, .mx-cursor, .mx-week, .mx-t, .mx-booked2) { animation-duration: 4s !important; animation-iteration-count: .9 !important; }   /* once, at the timeline's speed (see the .mx-in rule above) */
@keyframes mx-pick { 0%, 60% { background-color: #fff; color: var(--text); box-shadow: inset 0 0 0 1px #e6e9ef; } 64%, 100% { background-color: #5b6ff0; color: #fff; box-shadow: 0 3px 8px -3px rgba(75, 95, 214, .7); } }
@keyframes mx-cur { 0%, 50% { opacity: 0; transform: translate(24px, 14px); } 53% { opacity: 1; } 58% { opacity: 1; transform: none; } 60% { transform: scale(.8); } 63%, 100% { opacity: 1; transform: none; } }
@keyframes mx-a70 { 0%, 65% { opacity: 0; transform: translateY(5px) scale(.94); } 69% { opacity: 1; transform: scale(1.03); } 72%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
/* "Your business, always moving" (user's content, 2026-11-02): the chat's lines may wrap, two channel tiles drawn in ink;
   then the assistant's skills, a follow-up workflow, and the growth numbers */
.tl .mx--chat .m-bubble { white-space: normal; text-wrap: balance; }
.mx-ch--ink { display: grid; place-items: center; background: #17191a; }
.mx-ch--ink img { width: 9px; height: 9px; }
.mx-ico { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; background: #f1f3f8; color: var(--muted); }
.mx-ico svg, .mx-sk svg, .mx-wf svg, .mx-kpi > svg, .mx-insight-go { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mx-ico svg { width: 10px; height: 10px; }
.mx--skills { gap: 8px; }
.mx-sk-head { display: flex; align-items: center; gap: 7px; }
.mx-sk-head b { font-size: 10.5px; line-height: 13px; font-weight: 700; color: var(--text); }
.mx-sk-list { display: grid; gap: 4px; }
.mx-sk { display: flex; align-items: center; gap: 8px; height: 23px; padding: 0 9px; border-radius: 7px; background: #fff; box-shadow: inset 0 0 0 1px #e9ecf2; color: var(--muted); }
.mx-sk svg { flex: none; width: 11px; height: 11px; }
.mx-sk b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; line-height: 11px; font-weight: 500; color: var(--text); }
.mx-sk.is-on { background: #eef0fe; box-shadow: inset 0 0 0 1.2px #c9d0fa; color: var(--acc); }
.mx-sk.is-on b { color: var(--acc-ink); }
.mx-sk .mx-sk-ok { width: 10px; height: 10px; stroke-width: 2.6; }
.mx--flow { align-items: center; justify-content: center; gap: 0; }
.mx-wf { display: flex; align-items: center; gap: 7px; min-width: 112px; height: 26px; padding: 0 10px; border-radius: 7px; background: #fff; box-shadow: inset 0 0 0 1px #e6e9f0, 0 1px 2px rgba(15, 23, 42, .04); color: var(--muted); }
.mx-wf svg { flex: none; width: 11px; height: 11px; }
.mx-wf b { font-size: 9px; line-height: 11px; font-weight: 600; color: var(--text); white-space: nowrap; }
.mx-wf.is-hl { background: #f1f2ff; box-shadow: inset 0 0 0 1.2px #c9cffa; color: var(--acc); }
.mx-wf-play { flex: none; display: grid; place-items: center; width: 13px; height: 13px; border-radius: 4px; background: var(--acc); }
.mx-wf-play svg { width: 9px; height: 9px; fill: #fff; stroke: none; }
.mx-wf-link {   /* a short dotted joint: a dot at each end, a line between */
  position: relative; width: 1.5px; height: 16px; background: #c9cffa;
}
.mx-wf-link::before, .mx-wf-link::after { content: ""; position: absolute; left: -1.5px; width: 4.5px; height: 4.5px; border-radius: 50%; background: #9aa6f2; }
.mx-wf-link::before { top: -1px; } .mx-wf-link::after { bottom: -1px; }
.mx--grow { gap: 8px; }
.mx-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mx-kpi { display: flex; align-items: flex-start; gap: 6px; padding: 7px 8px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px #e9ecf2, 0 1px 3px rgba(15, 23, 42, .04); color: var(--muted); }
.mx-kpi > svg { flex: none; width: 11px; height: 11px; margin-top: 1px; }
.mx-kpi > span { min-width: 0; display: grid; gap: 2px; }
.mx-kpi small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 8px; line-height: 10px; color: var(--muted); }
.mx-kpi-n { display: flex; align-items: baseline; gap: 5px; }
.mx-kpi-n b { font-size: 15px; line-height: 17px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.mx-kpi-n em { display: inline-flex; align-items: center; gap: 1px; font-style: normal; font-size: 8px; line-height: 10px; font-weight: 600; color: var(--ok); }
.mx-kpi-n em svg { width: 7px; height: 7px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.mx-chart { display: block; width: 204px; height: 44px; overflow: visible; }
.mx-chart-line { fill: none; stroke: #7c6cf0; stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 100; }
[dir="rtl"] .mx-chart { transform: scaleX(-1); }
.mx-insight { display: flex; align-items: center; gap: 7px; padding: 7px 8px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px #e9ecf2, 0 1px 3px rgba(15, 23, 42, .04); }
.mx-insight-ico { flex: none; width: 12px; height: 12px; fill: #7c6cf0; }
.mx-insight-txt { flex: 1; min-width: 0; display: grid; gap: 1px; }
.mx-insight-txt b { font-size: 9.5px; line-height: 11px; font-weight: 700; color: var(--text); }
.mx-insight-txt small { font-size: 8px; line-height: 10px; color: var(--muted); }
.mx-insight-txt em { font-style: normal; color: var(--acc); }
.mx-insight-go { flex: none; width: 10px; height: 10px; color: var(--muted); }
[dir="rtl"] .mx-insight-go { transform: scaleX(-1); }
/* their loops: the skills come in and the first is switched on; the workflow builds down; the numbers, the line drawn, the insight */
.mx--skills.is-play .mx-sk-head, .mx--flow.is-play > *, .mx--grow.is-play .mx-kpi { animation: mx-a10 8s infinite both; }
.mx--skills.is-play .mx-sk { animation: mx-a18 8s infinite both; }
.mx--skills.is-play .mx-sk.is-on { animation: mx-a18 8s infinite both, mx-skon 8s infinite both; }
.mx--skills.is-play .mx-sk:nth-child(2) { animation-delay: .08s; } .mx--skills.is-play .mx-sk:nth-child(3) { animation-delay: .16s; }
.mx--skills.is-play .mx-sk:nth-child(4) { animation-delay: .24s; } .mx--skills.is-play .mx-sk:nth-child(5) { animation-delay: .32s; }
.mx--skills.is-play .mx-sk-ok { animation: mx-a62 8s infinite both; }
.mx--flow.is-play > :nth-child(2) { animation-delay: .2s; } .mx--flow.is-play > :nth-child(3) { animation-delay: .4s; }
.mx--flow.is-play > :nth-child(4) { animation-delay: .6s; } .mx--flow.is-play > :nth-child(5) { animation-delay: .8s; }
.mx--flow.is-play > :nth-child(6) { animation-delay: 1s; } .mx--flow.is-play > :nth-child(7) { animation-delay: 1.2s; }
.mx--grow.is-play .mx-kpi + .mx-kpi { animation-delay: .1s; }
.mx--grow.is-play .mx-chart-line { animation: mx-draw 8s infinite both; }
.mx--grow.is-play .mx-chart-fill { animation: mx-fadein 8s infinite both; }
.mx--grow.is-play .mx-insight { animation: mx-a54 8s infinite both; }
:is(.tl, .fs) .mx.is-play :is(.mx-sk-head, .mx-sk, .mx-sk-ok, .mx-wf, .mx-wf-link, .mx-kpi, .mx-chart-line, .mx-chart-fill, .mx-insight) { animation-duration: 4s !important; animation-iteration-count: .9 !important; }
@keyframes mx-skon { 0%, 52% { background-color: #fff; box-shadow: inset 0 0 0 1px #e9ecf2; color: var(--muted); } 57%, 100% { background-color: #eef0fe; box-shadow: inset 0 0 0 1.2px #c9d0fa; color: var(--acc); } }
@keyframes mx-draw { 0%, 18% { stroke-dashoffset: 100; } 46%, 100% { stroke-dashoffset: 0; } }
@keyframes mx-fadein { 0%, 30% { opacity: 0; } 48%, 100% { opacity: 1; } }

/* Stats: an icon tile, then the number and its label, straight on the light background */
.stats { margin-top: 104px; display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 28px 24px; }   /* columns sized to their content, spread across */
.stat { display: flex; align-items: center; gap: 20px; }
.stat-ico {
  flex: none; width: 64px; height: 64px; border-radius: 16px; display: grid; place-items: center;
  color: var(--ink); background: #fff;   /* brand charcoal icons */
  box-shadow: inset 0 0 0 1px #e6e8ec, 0 10px 24px -16px rgba(20, 24, 32, .35);
}
.stat-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.stat strong { font-size: 30px; line-height: 36px; font-weight: 700; letter-spacing: -.5px; color: #0b0c0e; white-space: nowrap; font-variant-numeric: tabular-nums; }   /* even digit widths while counting */
.stat-txt > span { font-size: 15.5px; line-height: 21px; color: #4a5054; white-space: nowrap; }

/* =========================================================
   CHANNELS — "One AI. Every platform"
   Static rows = the Figma frames (no-JS / reduced motion / mobile).
   main.js swaps them for a pinned stage that scrubs with scroll
   (az-lifelogx.webflow.io behaviour).
   ========================================================= */
.channels { position: relative; isolation: isolate; background: var(--charcoal); color: #fff; padding: 97px 0 149px; }
/* Backdrop in the hero's style, pinned to the screen while the section scrolls:
   the lit rim of a large sphere rising behind the phone like a horizon */
.ch-bg-wrap { position: absolute; inset: 0; z-index: -1; pointer-events: none; }   /* the backdrop can only stick inside the section */
.ch-bg { position: sticky; top: 0; height: 100vh; overflow: hidden; background: var(--glow); }   /* the light stays on screen while the section is pinned */
.ch-bg span { position: absolute; border-radius: 50%; }
.ch-hz-rim {
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-image: radial-gradient(closest-side, transparent calc(100% - 2.4px), #000 calc(100% - 1.3px), #000 calc(100% - .6px), transparent 100%);
          mask-image: radial-gradient(closest-side, transparent calc(100% - 2.4px), #000 calc(100% - 1.3px), #000 calc(100% - .6px), transparent 100%);
}
.ch-hz-rim--soft {   /* a soft band either side of the line, no blur filter needed */
  -webkit-mask-image: radial-gradient(closest-side, transparent calc(100% - 78px), #000 calc(100% - 28px), transparent 100%);
          mask-image: radial-gradient(closest-side, transparent calc(100% - 78px), #000 calc(100% - 28px), transparent 100%);
}
.ch-glow { left: 50%; top: 50%; width: 46vw; height: 84vh; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(190, 200, 222, .08), transparent); }
.ch-horizon, .ch-hz-rim { left: -60vw; top: 74vh; width: 220vw; height: 220vw; }
.ch-horizon { background: radial-gradient(closest-side, #1b1d24 0%, #1d2027 97.4%, #272b35 99.7%, rgba(39, 43, 53, 0) 100%); }
.theme-dark .ch-horizon { background: radial-gradient(closest-side, #030509 0%, #04070b 97.4%, #0b0f17 99.7%, rgba(11, 15, 23, 0) 100%); }
.ch-hz-rim { background: conic-gradient(from -50deg, transparent 0deg, rgba(255, 255, 255, .12) 18deg, rgba(255, 255, 255, .5) 42deg, rgba(255, 255, 255, .58) 52deg, rgba(255, 255, 255, .3) 72deg, transparent 100deg 360deg); }
.ch-hz-rim--soft { left: calc(-60vw - 28px); top: calc(74vh - 28px); width: calc(220vw + 56px); height: calc(220vw + 56px); opacity: .5; }
.channels-sub { width: 470px; margin: 23px auto 0; text-align: center; font-size: 16px; line-height: 19px; }   /* the same size as the calendar section's paragraph (user's request; was 14px) */
.ch-rows { margin-top: -27px; }
.ch-row { position: relative; width: 1180px; height: 651px; margin: 0 auto; }
.pills { position: absolute; left: 0; top: var(--pt); width: 395px; display: flex; flex-direction: column; gap: 11px; }
.pill {
  height: 65px; border-radius: 18px;
  display: flex; align-items: center; gap: 14px; padding-left: 52px;
  font-size: 24px; line-height: 29px; color: #fff;
  background: linear-gradient(180deg, #2a2b2d, #222326 45%, #18191d);   /* the hero's channel tiles: dark glass with a hairline edge, lit from the top (user's request, 2026-11-02; was the lit charcoal with a thick bottom edge) */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), inset 0 1px 0 rgba(255, 255, 255, .12), 0 8px 22px rgba(0, 0, 0, .45);
}
.pill img { margin-top: 1px; }
.ch-phone { position: absolute; left: 403px; top: 0; width: 374px; height: 733px; }
.ch-copy  { position: absolute; left: 791px; top: var(--tt); width: 399px; }
.ch-label { font-size: 14px; line-height: 17px; white-space: pre-wrap; }   /* keeps the spacing around the dots, wraps if a translation runs long */
.ch-title { margin-top: 19px; font-size: 28px; line-height: 34px; font-weight: 700; }
.ch-body  { margin-top: 19px; font-size: 16px; line-height: 19px; }

/* Scrub mode — heading + phone stage pinned together (desktop) */
.channels.is-scrub { padding-top: 0; padding-bottom: 67px; }
.channels.is-scrub .ch-rows { display: none; }
.ch-scroller { position: relative; }
.ch-pin { position: sticky; top: 0; height: 100vh; padding-top: 88px; }   /* clears the fixed nav pill (ends at 68px once scrolled) */
.ch-stage-wrap { height: calc(733px * var(--s, 1)); margin-top: calc(-27px * var(--s, 1)); }
.ch-stage {
  position: relative;
  width: 1180px; height: 733px; margin-left: calc(50% - 590px);   /* stays centred even when wider than the viewport */
  transform: scale(var(--s, 1)); transform-origin: 50% 0;
}
.ch-stage .pills { top: 189px; }

/* Desktop: phones and copies sit in full-size layers, so their Figma coordinates are unchanged */
.ch-stage .ch-phones, .ch-stage .ch-copies { position: absolute; inset: 0; pointer-events: none; }

/* Compact pinned stage (phones / tablets): heading → channel icons → phone → copy.
   The phone is shown near full width so its screen is readable; when the screen is too short
   for the whole mockup it is cropped from the bottom with a soft fade. */
.ch-pin.is-compact {
  display: flex; flex-direction: column;
  height: 100vh; height: 100dvh;
  padding: calc(env(safe-area-inset-top, 0px) + 64px) 0 calc(env(safe-area-inset-bottom, 0px) + 14px);   /* clears the fixed nav pill */
}
.ch-pin.is-compact .channels-head { flex: none; }
.ch-pin.is-compact .channels-head h2 { font-size: 22px; line-height: 27px; }
.ch-pin.is-compact .channels-sub { width: auto; max-width: 420px; margin: 8px auto 0; padding: 0 16px; font-size: 16px; line-height: 19px; }   /* 16px like the calendar paragraph (was 12.5px) */
.ch-pin.is-compact .ch-stage-wrap { flex: 1 1 auto; min-height: 0; height: auto; margin: 20px 16px 0; }   /* 20px above the channel icons, as below them */
.ch-pin.is-compact .ch-stage {
  width: auto; height: 100%; margin: 0; transform: none;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; row-gap: 12px;
}
.ch-pin.is-compact .pills { position: static; width: auto; flex-direction: row; justify-content: center; gap: 10px; }
.ch-pin.is-compact .pill {
  width: 36px; height: 36px; padding: 0; gap: 0; border-radius: 11px;
  justify-content: center; font-size: 0;
  transition: box-shadow .3s var(--ease-out);
}
.ch-pin.is-compact .pill span { display: none; }
.ch-pin.is-compact .pill img { width: 19px; height: 19px; margin: 0; }
.ch-pin.is-compact .pill { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), inset 0 1px 0 rgba(255, 255, 255, .12), 0 4px 12px rgba(0, 0, 0, .35); }
.ch-pin.is-compact .pill.is-current { box-shadow: 0 0 0 2px #000, 0 0 0 3.5px rgba(255, 255, 255, .85); }
.ch-pin.is-compact .ch-phones { position: relative; inset: auto; min-height: 0; container-type: size; }
.ch-pin.is-compact .ch-phone {
  /* tuck the mockups' empty top band under the icon row, leaving 20px between the icons and the highest floating
     app icon (the SMS mockup's); it used to tuck right up to them and the SMS icons overlapped the row (user's request) */
  --tuck: calc(min(100cqw, 400px) * .176 - 6px);
  left: 50%; top: calc(var(--tuck) * -1); translate: -50% 0;
  width: min(100cqw, 400px);
  height: min(calc(100cqh + var(--tuck)), calc(min(100cqw, 400px) * 1.96));   /* mockups are 374 × 733 */
  object-fit: cover; object-position: 50% 0;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 64px), transparent);
          mask-image: linear-gradient(#000 calc(100% - 64px), transparent);
}
.ch-pin.is-compact .ch-copies { position: relative; inset: auto; display: grid; }
.ch-pin.is-compact .ch-copy { position: relative; left: auto; top: auto; grid-area: 1 / 1; width: auto; max-width: 520px; margin: 0 auto; text-align: center; }
.ch-pin.is-compact .ch-label { font-size: 11px; line-height: 13px; letter-spacing: .3px; white-space: normal; }
.ch-pin.is-compact .ch-title { margin-top: 4px; font-size: 19px; line-height: 23px; }
.ch-pin.is-compact .ch-title br { display: none; }   /* one line where it fits (user's request); a longer title wraps on its own */
.ch-pin.is-compact .ch-title .grad { margin-inline-start: .25em; }   /* the space the line break used to make */
.ch-pin.is-compact .ch-body { margin-top: 5px; font-size: 16px; line-height: 20px; color: rgba(255, 255, 255, .86); }   /* 16px like the other paragraphs (user's request; was 13.5px) */
@media (max-height: 640px) { .ch-pin.is-compact .ch-body { display: none; } }   /* short phones: label + title only */
.ch-stage .pill, .ch-stage .ch-phone, .ch-stage .ch-copy { will-change: opacity, transform; }

/* =========================================================
   GOOGLE CALENDAR
   ========================================================= */
.gcal { height: 810px; overflow-x: clip; background: #fff; }   /* plain white, like How Zoie Works */
.gcal-wrap { position: relative; height: 100%; }
.gcal-copy { width: 540px; padding-top: 133px; }
.gcal-text { width: 516px; margin-top: 36px; font-size: 16px; line-height: 19px; }   /* 508 in Figma; browser Inter sets a hair wider */
.features { margin-top: 53px; }
.feature { display: flex; gap: 26px; }
.feature + .feature { margin-top: 26px; }
.feature:last-child { margin-top: 25px; }
.feature-icon {
  flex: none; width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center;
  background: linear-gradient(180deg, #2a2b2d, #222326 45%, #18191d);   /* same dark glass as the channel pills and the hero's channel tiles */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), inset 0 1px 0 rgba(255, 255, 255, .12), 0 6px 14px -4px rgba(15, 23, 42, .4);
}
.feature-copy { width: 332px; padding-top: 2px; display: flex; flex-direction: column; gap: 2px; }
.feature-copy strong { font-size: 18px; line-height: 25px; font-weight: 700; color: #09090f; }
.feature-copy span { font-size: 13.5px; line-height: 21px; color: #696579; }
.gcal-visual { position: absolute; left: 529px; top: 123px; width: 732px; height: 568px; }
/* ---------- the scheduling calendar as live HTML (was calendar-tools.webp) ----------
   Drawn at the picture's own 732 x 568 and scaled to its column (main.js section 21 sets --cal-k).
   Without .is-play (reduced motion, no JS) it shows the finished booking. */
.cal-fit { position: relative; width: 732px; height: 568px; }
.cal-scene { position: absolute; left: 0; top: 0; width: 732px; height: 568px; transform: scale(var(--cal-k, 1)); transform-origin: 0 0; direction: ltr; font-family: var(--inter); color: #17181c; }
.cs-win {
  position: absolute; left: 92px; top: 64px; width: 600px; height: 400px; border-radius: 22px; background: linear-gradient(#f6f7f8, #eceef0);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9), 0 0 0 1px rgba(16, 24, 40, .05), 0 40px 60px -30px rgba(16, 24, 40, .35), 0 12px 24px -12px rgba(16, 24, 40, .12);
}
.cs-dots { position: absolute; left: 18px; top: 13px; display: flex; gap: 6px; }
.cs-dots i { width: 9px; height: 9px; border-radius: 50%; background: #ff5f57; }
.cs-dots i:nth-child(2) { background: #febc2e; }
.cs-dots i:nth-child(3) { background: #28c840; }
.cs-panel { position: absolute; left: 10px; right: 10px; top: 34px; bottom: 12px; overflow: hidden; border-radius: 15px; background: #fbfbfc; box-shadow: 0 0 0 1px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04); }
.cs-bar { position: absolute; left: 12px; right: 12px; top: 0; height: 44px; display: flex; align-items: center; gap: 10px; }
.cs-logo { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: #1f2125; }
.cs-logo img { width: 14px; }
.cs-title { margin-right: 6px; font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.cs-btn, .cs-seg span, .cs-gear { display: grid; place-items: center; height: 22px; padding: 0 10px; border-radius: 7px; font-size: 9.5px; font-weight: 500; white-space: nowrap; }
.cs-btn, .cs-gear { background: #fff; box-shadow: inset 0 0 0 1px #dfe2e6; }
.cs-nav { flex: none; width: 22px; height: 11px; fill: none; stroke: #2a2c31; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cs-range { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.cs-range svg { width: 7px; height: 5px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.cs-seg { display: flex; gap: 3px; margin-left: auto; }
.cs-seg span { color: #3a3d44; background: #eceef1; }
.cs-seg .is-on { color: #fff; background: #1f2125; }
.cs-gear { width: 24px; padding: 0; }
.cs-gear svg { width: 12px; height: 12px; fill: none; stroke: #2a2c31; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cs-days { position: absolute; left: 34px; right: 0; top: 44px; height: 40px; display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid #eceef1; }
.cs-days span { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border-left: 1px solid #eceef1; }
.cs-days small { font-size: 7.5px; line-height: 9px; color: #5c6068; }
.cs-days b { min-width: 20px; padding: 0 3px; border-radius: 5px; font-size: 12px; line-height: 17px; font-weight: 600; text-align: center; }
.cs-days .is-today b { color: #fff; background: #1f2125; }
.cs-hours { position: absolute; left: 0; top: 84px; bottom: 0; width: 34px; }
.cs-hours span { position: absolute; right: 6px; top: calc(var(--t) * 30px + 3px); font-size: 7px; line-height: 8px; color: #6b7079; white-space: nowrap; }
.cs-body {   /* one row per hour from 9 AM (30px), one column per day */
  position: absolute; left: 34px; right: 0; top: 84px; bottom: 0;
  background: repeating-linear-gradient(to bottom, #eceef1 0 1px, transparent 1px 30px), repeating-linear-gradient(to right, #eceef1 0 1px, transparent 1px 109.2px);
}
.cs-ev, .cs-scan { position: absolute; left: calc(var(--d) * 109.2px + 3px); top: calc(var(--t) * 30px + 2px); width: 103.2px; height: 27px; border-radius: 6px; }
.cs-ev { display: flex; align-items: center; gap: 4px; padding: 0 6px 0 8px; background: #eef0f3; box-shadow: inset 2px 0 0 #c7ccd3, 0 1px 1.5px rgba(16, 24, 40, .06); }
.cs-ev > span, .cs-book > span { flex: 1; min-width: 0; display: grid; }
.cs-ev b, .cs-book b { overflow: hidden; font-size: 7.6px; line-height: 10px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.cs-ev i, .cs-book i { font-size: 6.6px; line-height: 9px; font-style: normal; color: #6b7079; white-space: nowrap; }
.cs-ico { flex: none; width: 9px; height: 9px; fill: none; stroke: #6b7079; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.cs-scan { opacity: 0; background: rgba(122, 140, 240, .12); box-shadow: inset 0 0 0 1.5px rgba(122, 140, 240, .75); }
.cs-book {   /* the call Zoie books: Wednesday, 2:30 PM */
  position: absolute; z-index: 2; left: calc(var(--d) * 109.2px - 1px); top: calc(var(--t) * 30px - 1px); width: 111.2px; height: 33px;
  display: flex; align-items: center; gap: 6px; padding: 0 9px; border-radius: 7px; color: #fff; background: #1f2125;
  box-shadow: 0 10px 18px -6px rgba(16, 24, 40, .45), 0 2px 4px rgba(16, 24, 40, .2);
}
.cs-book::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 2px rgba(122, 140, 240, .7); opacity: 0; }
.cs-book .cs-ico { width: 11px; height: 11px; stroke: #fff; }
.cs-book b { font-size: 8.4px; line-height: 11px; }
.cs-book i { font-size: 7.2px; color: rgba(255, 255, 255, .75); }
.cs-arrow { position: absolute; z-index: 3; left: 0; top: 0; width: 732px; height: 568px; overflow: visible; fill: none; stroke: #4b4f57; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cs-arrow-line { stroke-dasharray: 1 1; }
.cs-ai, .cs-toast, .cs-dock { position: absolute; background: rgba(250, 250, 251, .97); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9), 0 0 0 1px rgba(16, 24, 40, .05), 0 24px 40px -18px rgba(16, 24, 40, .35); }
.cs-ai { z-index: 4; left: 30px; top: 276px; width: 226px; height: 90px; display: flex; align-items: center; gap: 13px; padding: 0 14px; border-radius: 20px; transform: rotate(-2.5deg); }
.cs-ai-logo, .cs-dock-zoie { flex: none; display: grid; place-items: center; background: #1f2125; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 6px 12px -6px rgba(16, 24, 40, .5); }
.cs-ai-logo { width: 58px; height: 58px; border-radius: 16px; }
.cs-ai-logo img { width: 32px; }
.cs-ai-text { min-width: 0; display: grid; gap: 3px; }
.cs-ai-text > b { font-size: 14px; line-height: 18px; font-weight: 700; }
.cs-ai-find, .cs-ai-done { grid-area: 2 / 1; font-size: 10.5px; line-height: 14px; }
.cs-ai-find { color: #6b7079; opacity: 0; }
.cs-ai-done { display: flex; align-items: flex-start; gap: 5px; font-weight: 500; color: #15803d; }
.cs-ai-done svg { flex: none; width: 12px; height: 12px; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cs-toast { z-index: 5; left: 466px; top: 36px; width: 248px; height: 62px; display: flex; align-items: center; gap: 12px; padding: 0 14px; border-radius: 17px; transform: rotate(1.5deg); }
.cs-toast-ok { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #1f2125; }
.cs-toast-ok svg { width: 15px; height: 15px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cs-toast-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.cs-toast-text b, .cs-toast-text span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cs-toast-text b { font-size: 11.5px; line-height: 15px; font-weight: 600; }
.cs-toast-text span { font-size: 10px; line-height: 13px; color: #6b7079; }
.cs-x { flex: none; width: 12px; height: 12px; fill: none; stroke: #8a8f97; stroke-width: 1.6; stroke-linecap: round; }
.cs-dock { z-index: 4; left: 160px; top: 434px; width: 430px; height: 80px; display: flex; align-items: center; justify-content: center; gap: 11px; border-radius: 24px; background: rgba(241, 242, 244, .97); }
.cs-dock-zoie { width: 50px; height: 50px; border-radius: 14px; }
.cs-dock-zoie img { width: 27px; }
.cs-sync { flex: none; width: 26px; height: 26px; margin: 0 2px; fill: none; stroke: #34373d; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cs-app { position: relative; flex: none; width: 48px; height: 48px; }
.cs-app img { display: block; width: 48px; height: 48px; border-radius: 12px; box-shadow: 0 6px 12px -6px rgba(16, 24, 40, .35), 0 1px 2px rgba(16, 24, 40, .08); }
.cs-ok {   /* "synced" tick on each app */
  position: absolute; right: -4px; top: -4px; width: 15px; height: 15px; border-radius: 50%; transform: scale(0);
  background: #22c55e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3.6 8.4 2.9 2.9 5.9-6.4' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 9px no-repeat;
  box-shadow: 0 0 0 2px #f1f2f4;
}

/* the 10s loop, while the calendar is on screen: Zoie AI looks at free slots, draws the arrow, books the call,
   the notification comes in, the booking syncs to every connected app; then it all clears and starts again */
.cal-scene.is-play .cs-ai { animation: cs-ai 10s infinite both; }
.cal-scene.is-play .cs-ai-find { animation: cs-find 10s infinite both; }
.cal-scene.is-play .cs-ai-done { animation: cs-done 10s infinite both; }
.cal-scene.is-play .cs-dotdot i { animation: cs-dot 1.2s infinite both; }
.cal-scene.is-play .cs-dotdot i:nth-child(2) { animation-delay: .2s; }
.cal-scene.is-play .cs-dotdot i:nth-child(3) { animation-delay: .4s; }
.cal-scene.is-play .cs-scan { animation: cs-scan 10s infinite both; }
.cal-scene.is-play .cs-arrow-line { animation: cs-draw 10s infinite both; }
.cal-scene.is-play .cs-arrow-head { animation: cs-head 10s infinite both; }
.cal-scene.is-play .cs-book { animation: cs-book 10s infinite both; }
.cal-scene.is-play .cs-book::after { animation: cs-ring 10s infinite both; }
.cal-scene.is-play .cs-toast { animation: cs-toast 10s infinite both; }
.cal-scene.is-play .cs-toast-ok { animation: cs-pop 10s infinite both; }
.cal-scene.is-play .cs-sync { animation: cs-sync 10s infinite both; }
.cal-scene.is-play .cs-app { animation: cs-hop 10s calc(var(--i) * .14s) infinite both; }
.cal-scene.is-play .cs-ok { animation: cs-ok 10s calc(var(--i) * .14s) infinite both; }
.cal-scene:not(.is-live) *, .cal-scene:not(.is-live) *::after { animation-play-state: paused !important; }   /* off screen: hold */
@keyframes cs-ai { 0%, 4% { opacity: 0; transform: translate(-16px, 10px) rotate(-2.5deg); } 10%, 88% { opacity: 1; transform: rotate(-2.5deg); } 94%, 100% { opacity: 0; transform: translate(-10px, 6px) rotate(-2.5deg); } }
@keyframes cs-find { 0%, 35% { opacity: 1; } 38%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes cs-done { 0%, 36% { opacity: 0; transform: translateY(3px); } 40%, 94% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes cs-dot { 0%, 20%, 100% { opacity: .2; } 50% { opacity: 1; } }
@keyframes cs-scan {   /* free slots: Tue 11 AM, Thu 3 PM, Fri 1:30 PM, then Wed 2:30 PM */
  0%, 10% { opacity: 0; transform: translate(-109.2px, -105px); }
  12%, 15% { opacity: 1; transform: translate(-109.2px, -105px); }
  18%, 21% { opacity: 1; transform: translate(109.2px, 15px); }
  24%, 26% { opacity: 1; transform: translate(218.4px, -30px); }
  29%, 33% { opacity: 1; transform: none; }
  36%, 100% { opacity: 0; transform: none; }
}
@keyframes cs-draw { 0%, 25% { stroke-dashoffset: 1; opacity: 1; } 32%, 88% { stroke-dashoffset: 0; opacity: 1; } 93%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes cs-head { 0%, 31% { opacity: 0; } 33%, 88% { opacity: 1; } 93%, 100% { opacity: 0; } }
@keyframes cs-book { 0%, 32% { opacity: 0; transform: translateY(-8px) scale(.86); } 36% { opacity: 1; transform: scale(1.05); } 38.5%, 89% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: scale(.96); } }
@keyframes cs-ring { 0%, 36% { opacity: 0; transform: none; } 37% { opacity: 1; transform: none; } 46%, 100% { opacity: 0; transform: scale(1.18, 1.5); } }
@keyframes cs-toast { 0%, 40% { opacity: 0; transform: translate(26px, -12px) rotate(1.5deg); } 45%, 86% { opacity: 1; transform: rotate(1.5deg); } 91%, 100% { opacity: 0; transform: translate(12px, -8px) rotate(1.5deg); } }
@keyframes cs-pop { 0%, 43% { transform: scale(.4); } 47% { transform: scale(1.12); } 49%, 100% { transform: none; } }
@keyframes cs-sync { 0%, 47% { transform: none; } 54%, 100% { transform: rotate(180deg); } }   /* the two arrows look the same turned around, so the loop is seamless */
@keyframes cs-hop { 0%, 52% { transform: none; } 55% { transform: translateY(-7px); } 59%, 100% { transform: none; } }
@keyframes cs-ok { 0%, 55% { transform: scale(0); } 58% { transform: scale(1.2); } 60%, 87% { transform: none; } 91%, 100% { transform: scale(0); } }
.feature-icon { transition: box-shadow .3s; }
.feature-icon img { width: 24px; height: 24px; transition: transform .45s var(--spring); }   /* box and icon 25% smaller (user's request, 2026-11-02; were 65 and 32) */
.feature:hover .feature-icon { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), inset 0 1px 0 rgba(255, 255, 255, .16), 0 10px 22px -8px rgba(0, 0, 0, .45); }
.feature:hover .feature-icon img { transform: translateY(-2px) rotate(-8deg) scale(1.08); }

/* Scroll reveals (main.js adds .sr-on once it is watching, so nothing stays hidden if JS fails) */
.sr-on [data-sr] {
  opacity: 0;
  transition: opacity .9s var(--ease-out), transform 1s var(--ease-out), filter .9s var(--ease-out);
  transition-delay: var(--d, 0s);
}
.sr-on [data-sr="up"]    { transform: translateY(26px); }
.sr-on [data-sr="left"]  { transform: translateX(-28px); }
.sr-on [data-sr="right"] { transform: translateX(64px) scale(.96); filter: blur(6px); transition-duration: 1.1s, 1.4s, 1.1s; }
.sr-on [data-sr].in-view { opacity: 1; transform: none; filter: none; }
.sr-on .feature[data-sr] .feature-icon { opacity: 0; transform: scale(.5) rotate(-12deg); transition: opacity .4s var(--ease-out), transform .9s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s; transition-delay: calc(var(--d, 0s) + .12s), calc(var(--d, 0s) + .12s), 0s; }
.sr-on .feature[data-sr].in-view .feature-icon { opacity: 1; transform: none; }
.sr-on [data-split-view].in-view .w { opacity: 1; filter: blur(0); transform: none; }
/* the calendar keeps floating gently once it has arrived */
.sr-on .gcal-visual.in-view .cal-fit { animation: gcal-float 7s ease-in-out 1.6s infinite; }
@keyframes gcal-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* =========================================================
   MCP: connect Zoie to AI tools (black; the left side is a placeholder until the artwork is ready)
   ========================================================= */
.mcp { padding: 130px 0 80px; overflow-x: clip; color: #fff; background: var(--glow), var(--charcoal); }   /* less below: the lit arc of Integrations starts right after */
.mcp-wrap { display: grid; grid-template-columns: 560px minmax(0, 1fr); align-items: center; gap: 80px; }
/* the picture: Zoie in the middle, wired to ChatGPT, Claude, Gemini and Copilot. Drawn at 560 x 480 and scaled to its
   column (main.js section 22 sets --fit-k), on a slight tilt like a product render; light pulses run along the wires */
.mcp-fit { position: relative; width: 560px; height: 480px; }
.mcp-art { position: absolute; left: 0; top: 0; width: 560px; height: 480px; transform: scale(var(--fit-k, 1)); transform-origin: 0 0; direction: ltr; }
.mcp-art::before { content: ""; position: absolute; inset: 0; background: radial-gradient(42% 40% at 50% 50%, rgba(255, 255, 255, .07), transparent 72%); }   /* white, not violet (2026-10-28) */
.ma-plane { position: absolute; inset: 0; transform: perspective(1400px) rotateX(18deg) rotateZ(-5deg); }
.ma-wires { position: absolute; inset: 0; width: 560px; height: 480px; overflow: visible; fill: none; stroke: rgba(255, 255, 255, .22); stroke-width: 1.6; stroke-linecap: round; }
.ma-pulses path { stroke: #fff; stroke-width: 2.4; stroke-dasharray: .12 1; stroke-dashoffset: .12; opacity: 0; }
.ma-dots circle { fill: #e9ecf2; stroke: rgba(255, 255, 255, .14); stroke-width: 7; }
.ma-base {
  position: absolute; left: 168px; top: 150px; width: 224px; height: 180px; border-radius: 36px; background: rgba(255, 255, 255, .025);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), 0 0 90px rgba(255, 255, 255, .07);
}
.ma-base::after { content: ""; position: absolute; inset: 22px; border-radius: 28px; box-shadow: 0 14px 60px 8px rgba(255, 255, 255, .2); opacity: .7; }
.ma-chip {
  position: absolute; left: 188px; top: 170px; width: 184px; height: 140px; display: grid; place-items: center; border-radius: 28px;
  background: radial-gradient(70% 60% at 30% 0%, rgba(255, 255, 255, .12), transparent 70%), linear-gradient(160deg, #2a2b31, #121317);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 -4px 0 #050506, 0 0 0 1px rgba(255, 255, 255, .07), 0 24px 40px -12px rgba(0, 0, 0, .8);
}
.ma-chip img { width: 112px; height: auto; }
.ma-tile {
  position: absolute; width: 104px; height: 104px; display: grid; place-items: center; border-radius: 26px;
  background: radial-gradient(70% 60% at 30% 0%, rgba(255, 255, 255, .1), transparent 70%), linear-gradient(160deg, #24252b, #15161a);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .13), inset 0 -3px 0 #060607, 0 0 0 1px rgba(255, 255, 255, .06), 0 18px 30px -8px rgba(0, 0, 0, .7);
}
.ma-tile img { width: 54px; height: auto; }
.ma-tile svg { width: 54px; height: 54px; }
.ma-tile--tl { left: 43px; top: 60px; }
.ma-tile--bl { left: 43px; top: 316px; }
.ma-tile--tr { left: 413px; top: 60px; }
.ma-tile--br { left: 413px; top: 316px; }
.ma-wires > path { stroke-dasharray: 1 1; }   /* drawn in from the tile end (main.js arms it before it's on screen) */
/* build-in, the first time it scrolls into view: glow, then the Zoie chip, then each tile pops in and its wire draws into
   Zoie, lighting the dot at both ends; then the light pulses start. Hidden only while armed, so without JS it's all there */
.mcp-art.is-armed:not(.is-play) :is(.ma-base, .ma-chip, .ma-tile, .ma-dots circle) { opacity: 0; }
.mcp-art.is-armed:not(.is-play) .ma-wires > path { stroke-dashoffset: 1; }
.mcp-art.is-play .ma-base { animation: ma-fade .8s ease-out both; }
.mcp-art.is-play .ma-chip { animation: ma-pop .7s cubic-bezier(.34, 1.56, .64, 1) .15s both; }
.mcp-art.is-play .ma-tile { animation: ma-tile .7s cubic-bezier(.34, 1.56, .64, 1) var(--t) both; }
.ma-tile--tl { --t: .5s; }
.ma-tile--tr { --t: .65s; }
.ma-tile--bl { --t: .8s; }
.ma-tile--br { --t: .95s; }
.mcp-art.is-play .ma-wires > path { animation: ma-draw .7s cubic-bezier(.22, 1, .36, 1) var(--w) both; }
.ma-wires > path:nth-of-type(1) { --w: .85s; }   /* ChatGPT */
.ma-wires > path:nth-of-type(2) { --w: 1.15s; }  /* Claude */
.ma-wires > path:nth-of-type(3) { --w: 1s; }     /* Gemini */
.ma-wires > path:nth-of-type(4) { --w: 1.3s; }   /* Copilot */
.mcp-art.is-play .ma-dots circle { animation: ma-dot .45s cubic-bezier(.34, 1.56, .64, 1) var(--w) both; transform-box: fill-box; transform-origin: center; }
.ma-dots circle:nth-child(1) { --w: .85s; }  .ma-dots circle:nth-child(2) { --w: 1.5s; }
.ma-dots circle:nth-child(3) { --w: 1.15s; } .ma-dots circle:nth-child(4) { --w: 1.8s; }
.ma-dots circle:nth-child(5) { --w: 1s; }    .ma-dots circle:nth-child(6) { --w: 1.65s; }
.ma-dots circle:nth-child(7) { --w: 1.3s; }  .ma-dots circle:nth-child(8) { --w: 1.95s; }
.mcp-art.is-play .ma-pulses path { animation: ma-pulse 2.8s cubic-bezier(.45, 0, .55, 1) calc(2.2s + var(--p, 0s)) infinite; }
.ma-pulses path:nth-child(2) { --p: .7s; }
.ma-pulses path:nth-child(3) { --p: 1.4s; }
.ma-pulses path:nth-child(4) { --p: 2.1s; }
.mcp-art.is-play .ma-base::after { animation: ma-glow 4.2s ease-in-out .8s infinite; }
.mcp-art:not(.is-live) *, .mcp-art:not(.is-live) *::after { animation-play-state: paused !important; }
@keyframes ma-fade { from { opacity: 0; } }
@keyframes ma-pop { from { opacity: 0; transform: scale(.8); } }
@keyframes ma-tile { from { opacity: 0; transform: translateY(16px) scale(.7); } }
@keyframes ma-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes ma-dot { from { opacity: 0; transform: scale(0); } }
@keyframes ma-pulse { 0% { stroke-dashoffset: .12; opacity: 0; } 8% { opacity: 1; } 62% { stroke-dashoffset: -1; opacity: 1; } 63%, 100% { stroke-dashoffset: -1; opacity: 0; } }
@keyframes ma-glow { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.mcp-text { max-width: 500px; margin-top: 24px; font-size: 16px; line-height: 26px; color: rgba(226, 230, 240, .72); }
/* the list under it: the scheduling section's features on black; the tiles get a hairline so they read on the dark */
.mcp-features { margin-top: 40px; }
.mcp-features .feature-copy { width: auto; max-width: 340px; }   /* wraps on its own: the fixed line breaks left odd short lines in longer languages */
.mcp-features .feature-copy br { display: none; }
.features--dark .feature-copy strong { color: #fff; }
.features--dark .feature-copy span { color: rgba(226, 230, 240, .62); }
.features--dark .feature-icon, .features--dark .feature:hover .feature-icon {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), inset 0 1px 0 rgba(255, 255, 255, .12), 0 6px 16px rgba(0, 0, 0, .45);
}
@media (max-width: 1219px) {
  .mcp { padding: 100px 0 64px; }
  .mcp-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; }
  .mcp-fit { width: 100%; height: auto; aspect-ratio: 560 / 480; }
}
@media (max-width: 899px) {   /* stacked like the scheduling section: heading, picture, text */
  .mcp { padding: 80px 0 56px; }
  .mcp-wrap { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .mcp-copy { display: contents; }
  .mcp-title { order: 1; text-align: center; }
  .mcp-visual { order: 2; width: 100%; max-width: 560px; margin: 32px auto 0; }
  .mcp-text { order: 3; justify-self: center; max-width: 560px; margin-top: 28px; text-align: center; }
  .mcp-features { order: 4; justify-self: center; width: 100%; max-width: 440px; margin-top: 36px; }
}
@media (max-width: 640px) {
  .mcp { padding: 64px 0 40px; }
}

/* =========================================================
   INTEGRATIONS
   ========================================================= */
.integrations { position: relative; isolation: isolate; background: var(--glow-in), var(--charcoal); color: #fff; padding: 72px 0 149px; overflow-x: clip; }   /* room between the arc and the phone (user's request) */
/* a lit arc across the top, the same curved light as the hero and the channels section, so Integrations reads as a new
   scene after the (also black) MCP section: a thin rim of light on a huge ellipse, fading out to both sides, and a
   faint white glow under it; the phone stands in front of it (user's pick of three options, 2026-10-28) */
.integrations::before {
  content: ""; position: absolute; z-index: 1; top: 30px; left: 50%; width: 2400px; height: 1200px; margin-left: -1200px; border-radius: 50%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42), inset 0 18px 60px -30px rgba(255, 255, 255, .16);   /* white light (was lavender) */
  -webkit-mask: linear-gradient(90deg, transparent 18%, #000 40%, #000 60%, transparent 82%);
          mask: linear-gradient(90deg, transparent 18%, #000 40%, #000 60%, transparent 82%);
  pointer-events: none;
}
.integrations::after {
  content: ""; position: absolute; z-index: -1; top: -170px; left: 50%; width: 1100px; height: 440px; margin-left: -550px;   /* centred on the seam, so it fades in from above too (no straight edge) */
  background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, .06), transparent 72%); pointer-events: none;
}
@media (max-width: 899px) {   /* a smaller ellipse, so the arc still curves across a narrower screen */
  .integrations { padding-top: 56px; }
  .integrations::before { top: 24px; width: 1500px; height: 750px; margin-left: -750px; }
}
@media (max-width: 640px) {
  .integrations { padding-top: 44px; }
  .integrations::before { top: 20px; width: 1000px; height: 500px; margin-left: -500px; }
  .integrations::after { top: -110px; width: 700px; height: 300px; margin-left: -350px; }
}
.int-hero { position: relative; height: 554px; }
.tiles { position: absolute; top: 255px; left: 0; right: 0; height: 140px; }
.tiles-track { position: absolute; top: 0; left: calc(50% - 664px); display: flex; gap: 32px; }
.tiles-track.is-moving { animation: tiles var(--tile-dur, 46s) linear infinite; }
@keyframes tiles { to { transform: translateX(calc(-1 * var(--tile-set, 1376px))); } }   /* one set of 8 tiles; main.js measures it */
.tile {   /* colored brand logos on the site's dark charcoal tile (same lit-from-above look as the channel pills) */
  flex: none; width: 140px; height: 140px; border-radius: 24px; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(60% 130% at 35% 0%, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 72%), var(--ink-2);
  box-shadow: inset 0 -3px 0 #080808, inset 0 1px 0 rgba(255, 255, 255, .22);
}
.tile img { width: 70%; height: auto; }   /* sized relative to the tile (98px in a 140px tile), so icons stay centred at any tile size */
.tile--wa img { width: 64%; }   /* WhatsApp and Instagram on the same dark tile as the others, in their own colours (user's request, 2026-11-02; were a green tile and Instagram's gradient square) */
.tile--ig img { width: 60%; }
.tile--sheets img { width: 50.7%; }
.int-phone { position: absolute; z-index: 2; top: 71px; left: calc(50% - 172px); width: 345px; height: 483px; }
.int-screen { position: absolute; left: 32px; top: 83px; width: 279px; height: 335px; }
.int-line { position: absolute; top: 554px; left: calc(50% - 329px); width: 685px; height: 1px; background: rgba(255, 255, 255, .11); }
/* web only: the phone, the icon row and the arc above them are 25% smaller.
   Phones keep the sizes set in the max-width 640 rules. */
@media (min-width: 641px) {
  .int-hero { height: calc(554px * .75); }
  .tiles { top: calc(255px * .75); height: calc(140px * .75); }
  .tiles-track { left: calc(50% - 664px * .75); gap: calc(32px * .75); }
  .tile { width: calc(140px * .75); height: calc(140px * .75); border-radius: calc(24px * .75); }
  .int-phone { top: calc(71px * .75); left: calc(50% - 172px * .75); width: calc(345px * .75); height: calc(483px * .75); }
  .int-phone > img:first-child { width: 100%; height: 100%; }
  .int-screen { left: calc(32px * .75); top: calc(83px * .75); width: calc(279px * .75); height: calc(335px * .75); }
  .int-line { top: calc(554px * .75); left: calc(50% - 329px * .75); width: calc(685px * .75); }
}
@media (min-width: 900px) {
  .integrations::before { top: calc(30px * .75); width: calc(2400px * .75); height: calc(1200px * .75); margin-left: calc(-1200px * .75); }
  .integrations::after { top: calc(-170px * .75); width: calc(1100px * .75); height: calc(440px * .75); margin-left: calc(-550px * .75); }
}
@media (min-width: 641px) and (max-width: 899px) {
  .integrations::before { top: calc(24px * .75); width: calc(1500px * .75); height: calc(750px * .75); margin-left: calc(-750px * .75); }
  .integrations::after { top: calc(-170px * .75); width: calc(1100px * .75); height: calc(440px * .75); margin-left: calc(-550px * .75); }
}
.int-intro { width: 1180px; margin: 0 auto; }
.int-title { margin-top: 53px; }
.int-text { width: 895px; margin: 33px auto 0; }

.int-controls { display: flex; align-items: center; gap: 12px; height: 42px; margin-top: 58px; }
.int-search {
  flex: 1 1 auto; min-width: 0; height: 42px; padding: 0 18px;   /* takes what the filters leave (an MCP filter was added, 2026-11-02) */
  display: flex; align-items: center; gap: 12px;
  background: var(--card); border-radius: 17px; box-shadow: inset 0 0 0 1px var(--card-2);   /* surfaces lifted with the charcoal, in its cool tone */
  cursor: text; transition: box-shadow .2s;
}
.int-search:focus-within { box-shadow: inset 0 0 0 1px #4a4a4a; }
.int-search img { flex: none; width: 14px; height: 14px; padding: 1.3px; }
.int-search input {
  flex: 1; min-width: 0; height: 100%; background: none; border: 0; outline: 0;
  font-family: var(--inter); font-size: 12px; line-height: 15px; color: #e6e6e6;
}
.int-search input::placeholder { color: #555; opacity: 1; }
.int-search input::-webkit-search-cancel-button { filter: invert(1) opacity(.5); }
.int-cats { flex: none; display: flex; gap: 6px; }
.cat {
  height: 30px; border-radius: 30px; background: var(--card); color: #999;
  font-family: var(--inter); font-size: 11.5px; line-height: 14px;
  transition: background-color .2s, color .2s;
}
.cat:nth-child(1) { width: 42px; } .cat:nth-child(2) { width: 118px; } .cat:nth-child(3) { width: 110px; }
.cat:nth-child(4) { width: 84px; } .cat:nth-child(5) { width: 52px; }   /* All, Communication, Appointments, Marketing, MCP (Payments removed with Stripe, 2026-11-02) */
.cat:hover { color: #ddd; }
.cat.is-active { background: #fff; color: #111; }

.int-collection { position: relative; height: 436px; margin-top: 32px; overflow: hidden; }   /* two rows, the second fading out; "View all integrations" opens the rest in place (user's request, 2026-11-02; it used to go to the app's login) */
.int-grid { display: grid; grid-template-columns: repeat(3, 331px); gap: 16px; }
.int-card {
  min-height: 210px; padding: 20px; border-radius: 17px; background: var(--card);   /* min, not fixed: a longer (translated) line grows the row */
  display: flex; flex-direction: column;
  transition: background-color .25s;
}
.int-card:hover { background: var(--card-hover); }
.int-card[hidden] { display: none; }
.int-id { display: flex; justify-content: space-between; height: 40px; }
.int-logo { width: 40px; height: 40px; border-radius: 15px; background: var(--card-2); display: grid; place-items: center; }
.int-badge {
  height: 19px; padding: 0 8px; border-radius: 30px; background: var(--card-2); color: #999;
  display: flex; align-items: center; font-family: var(--inter); font-size: 9.5px; line-height: 11px;
}
.int-badge--new { background: #422a18; color: #f29a45; }
.int-card h3 { margin-top: 18px; font-family: var(--inter); font-size: 14px; line-height: 18px; font-weight: 600; color: #e6e6e6; }
.int-card p { min-height: 40px; margin: 6px 0 14px; font-family: var(--inter); font-size: 12px; line-height: 20px; color: #999; }
.int-connect {
  height: 34px; margin-top: auto; border-radius: 12px; background: var(--card-btn); color: #c9c9c9;
  display: grid; place-items: center; font-family: var(--inter); font-size: 12px; line-height: 15px;
  transition: background-color .2s, color .2s;
}
.int-connect:hover { background: var(--card-btn-hover); color: #fff; }
.int-fade {
  position: absolute; left: 0; right: 0; top: 226px; height: 210px; pointer-events: none;
  background: linear-gradient(180deg, rgba(var(--dark-rgb), 0) 0%, rgba(var(--dark-rgb), .14) 24%, rgba(var(--dark-rgb), .61) 52%, rgba(var(--dark-rgb), .97) 85%, var(--charcoal) 100%);   /* into the section's colour, with no box at the bottom */
}
.int-viewall {
  position: absolute; left: 418px; top: 378px; width: 188px; height: 42px;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  border-radius: 30px; background: var(--pill-btn); box-shadow: inset 0 0 0 1px var(--pill-btn-ring);
  font-family: var(--inter); font-size: 12px; line-height: 15px; color: #e6e6e6;
  transition: background-color .2s;
}
:root:not(:lang(en)) .int-viewall { width: auto; padding: 0 20px; left: 50%; translate: -50% 0; }   /* longer translated labels */
.int-viewall:hover { background: var(--pill-btn-hover); }
.int-collection.is-open, .int-collection.is-filtered { height: auto; overflow: visible; }
.int-collection.is-open :is(.int-fade, .int-viewall), .int-collection.is-filtered :is(.int-fade, .int-viewall) { display: none; }
.int-connect.is-soon, .int-connect.is-soon:hover { background: transparent; color: var(--soon); box-shadow: inset 0 0 0 1px var(--soon-ring); cursor: default; }   /* not live in the app yet, as its integrations page says */
.int-empty { padding: 40px 0; text-align: center; font-family: var(--inter); font-size: 13px; color: #777; }
.int-empty[hidden] { display: none; }

/* =========================================================
   TESTIMONIALS
   ========================================================= */
.testimonials { padding: 72px 0 96px; background: #fff; color: #000; }   /* plain white, like How Zoie Works */
.t-head { text-align: center; }
.t-sub { margin-top: 14px; font-size: 16px; line-height: 24px; color: #5f6474; }   /* gray like the other sections' intros */

/* bento grid (after herospark.framer.website): a wide card, a dark card and a light card per row; the second row is mirrored */
.t-grid { width: 1180px; max-width: calc(100% - 64px); margin: 56px auto 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }   /* minmax(0): a long translated stat can't widen a column */
.t-card {   /* white with a hairline edge and a soft shadow, like How it works' previews; smaller and lighter than before (user's comments, 2026-11-02) */
  display: flex; flex-direction: column; padding: 24px 24px 22px; border-radius: 16px;
  background: #fff; color: #0b0c0e; box-shadow: 0 1px 3px rgba(15, 23, 42, .06), 0 22px 40px -22px rgba(30, 41, 59, .32), inset 0 0 0 1px #e9edef;
}
.t-card--wide { grid-column: span 2; }
.t-card--dark {   /* the dark glass of the channel tiles and pills */
  color: #fff;
  background: linear-gradient(180deg, #2a2b2d, #222326 45%, #18191d);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), inset 0 1px 0 rgba(255, 255, 255, .12), 0 22px 40px -22px rgba(15, 23, 42, .55);
}
.t-stats { display: flex; gap: 36px; }
.t-stat strong { display: block; font-size: 30px; line-height: 36px; font-weight: 700; letter-spacing: -.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.t-stat span { display: block; max-width: 150px; margin-top: 4px; font-size: 13.5px; line-height: 19px; color: #5f6474; }
.t-card--dark .t-stat span { color: rgba(226, 230, 240, .72); }
.t-rating { display: flex; align-items: center; gap: 10px; height: 36px; }
.t-rating img { width: 88px; height: auto; }
.t-rating span { font-size: 16px; line-height: 1; font-weight: 600; }
.t-card blockquote { margin-top: auto; padding-top: 22px; font-size: 16px; line-height: 24px; font-weight: 500; }
.t-card--wide blockquote { max-width: 500px; }
.t-card figcaption { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.t-ava {
  flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; object-fit: cover;   /* placeholder photos for now */
  font-size: 15px; font-weight: 600; letter-spacing: .02em; color: var(--ink); background: #e4e7eb;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .05);
}
.t-card--dark .t-ava { color: #fff; background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.t-who strong { display: block; font-size: 14.5px; line-height: 20px; font-weight: 600; }
.t-who span { display: block; margin-top: 1px; font-size: 13px; line-height: 18px; color: #6b7280; }
.t-card--dark .t-who span { color: rgba(226, 230, 240, .62); }
.t-summary { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 36px; font-size: 15px; line-height: 20px; color: #4a5054; }
.t-summary b { font-weight: 600; color: #0b0c0e; }
.t-star { color: #f5b301; }
.t-avas { display: flex; margin-left: 6px; }
.t-avas .t-ava { width: 34px; height: 34px; font-size: 11px; box-shadow: 0 0 0 2px #fff; }
.t-avas .t-ava + .t-ava { margin-left: -5px; }

/* =========================================================
   FAQ
   ========================================================= */
.faq { height: 631px; padding-top: 70px; background: var(--glow), var(--charcoal); color: #fff; }
.faq-wrap { position: relative; height: 492px; }
.faq-side { padding-top: 38px; }
.faq-sub { margin-top: 19px; font-size: 16px; line-height: 19px; }
.faq-more { margin-top: 90px; font-size: 28px; line-height: 34px; font-weight: 700; }
.faq-contact { margin-top: 15px; font-size: 16px; line-height: 19px; }
.btn--contact { margin-top: 26px; }
.faq-panel { position: absolute; left: 483px; top: 0; width: 552px; padding: 13px 14px 24px 15px; border-radius: 18px; background: var(--faq-panel); }
.faq-item { border-radius: 18px; background: var(--faq-item); transition: background-color .25s; }
.faq-item + .faq-item { margin-top: 10px; }
.faq-item:not(.is-open):hover { background: var(--faq-hover); }
.faq-q {
  position: relative; width: 100%; padding: 18.5px 50px 18.5px 24px; text-align: left;
  font-size: 16px; line-height: 19px; font-weight: 500;
  transition: padding .4s var(--ease-out);
}
.faq-q img { position: absolute; right: 15px; top: 26px; transition: transform .4s var(--ease-out), top .4s var(--ease-out); }
.faq-item.is-open .faq-q { padding-top: 13px; padding-bottom: 0; }
.faq-item.is-open .faq-q img { top: 19px; transform: rotate(180deg); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease-out); }
.faq-a > div { overflow: hidden; }
.faq-a p { width: 426px; padding: 16px 0 17px 25px; font-size: 14px; line-height: 17px; opacity: 0; transition: opacity .3s; }
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.faq-item.is-open .faq-a p { opacity: 1; transition-delay: .1s; }

/* =========================================================
   BLOG
   ========================================================= */
.blog { padding-top: 75px; }
.blog-sub { margin-top: 22px; }
.blog-grid { display: grid; grid-template-columns: repeat(3, 330px); gap: 20px; margin-top: 44px; }
.post {
  position: relative; display: block; height: 445px; overflow: hidden;
  border-radius: 18px; background: linear-gradient(180deg, #f6effd 0%, #fafbfa 100%);
  box-shadow: inset 0 0 0 2px #e9e7fb;
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.post:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 2px #e2dcfa, 0 22px 44px -26px rgba(15, 23, 42, .35); }
.post-thumb { width: 330px; height: 165px; object-fit: cover; }
.post-cat { position: absolute; left: 20px; top: 185px; font-size: 12px; line-height: 15px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: #22c55e; }
.post-title { position: absolute; left: 20px; top: 212px; width: 290px; font-size: 16px; line-height: 19px; font-weight: 700; color: #0f172a; }
.post-excerpt {
  position: absolute; left: 20px; top: 284px; width: 290px;
  font-size: 14px; line-height: 17px; color: #64748b;
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
}
.post-meta { position: absolute; left: 20px; right: 20px; top: 392px; height: 26px; display: flex; align-items: flex-end; justify-content: space-between; }
.post-meta time { font-size: 14px; line-height: 17px; color: #94a3b8; }
.post-meta img { transition: transform .3s var(--ease-out); }
.post:hover .post-meta img { transform: translateX(3px); }
.blog-more { margin-top: 37px; }

/* =========================================================
   APP CTA
   ========================================================= */
.cta-wrap { position: relative; padding-top: 110px; margin-bottom: 62px; }
.cta-phone { position: absolute; z-index: 2; left: 630px; top: -39px; width: 527px; height: 470px; pointer-events: none; }   /* the two-phone image (user's, 2026-11-02): 1069 x 954 */
.cta-card {
  height: 332px; padding: 44px 0 0 47px; border-radius: 24px; color: #fff;
  background:   /* the hero's deep navy-black, with the same soft light from the top right */
    radial-gradient(70% 90% at 82% 0%, rgba(150, 160, 178, .14), transparent 70%),
    radial-gradient(55% 60% at 10% 100%, rgba(150, 160, 178, .05), transparent 70%),
    #030509;
}
.cta-text { width: 473px; margin-top: 12px; font-size: 14px; line-height: 17px; }
.cta-btns { display: flex; gap: 16px; margin-top: 40px; }
/* official App Store / Google Play badges (Apple and Google artwork, one per language: see data-lang-src) */
.store-badge { flex: none; display: block; border-radius: 8px; transition: transform .3s var(--ease-out); }
.store-badge img { display: block; width: auto; height: 48px; }
.store-badge:hover { transform: translateY(-2px); }

/* =========================================================
   FOOTER (rebuilt from the screenshot in the Figma file)
   ========================================================= */
.footer { padding-bottom: 40px; background: var(--glow), var(--charcoal); color: #fff; font-family: var(--dm); }
main:has(> .p-faq:last-child, > .nf:last-child, > .rg:last-child) + .footer { background: var(--glow-in), var(--charcoal); }   /* right under a dark section */
.footer-wrap { width: 1112px; margin: 0 auto; padding-top: 53px; }
.footer-top { display: flex; padding-bottom: 56px; }
.footer-brand { flex: none; width: 381px; }
.footer-logo { width: 79px; height: 23px; filter: invert(1); }
.footer-tag { margin-top: 10px; font-size: 12px; line-height: 16px; font-weight: 500; color: #dadada; }
.footer-tag span { margin: 0 6px; }
.footer-desc { width: 290px; margin-top: 18.5px; font-size: 13.5px; line-height: 21.7px; color: #9d9d9d; }
.footer-h { font-size: 12.2px; line-height: 16px; font-weight: 600; letter-spacing: 1.05px; color: #cecece; }
.footer-cols { display: flex; }
.footer-cols > div { width: 190.5px; display: flex; flex-direction: column; padding-top: 2px; }
.footer-cols > div:last-child { width: auto; }
.footer-cols .footer-h { margin-bottom: 15.5px; }
.footer-cols a { font-size: 13.5px; line-height: 18px; color: #b6b6b6; transition: color .2s; }
.footer-cols a + a { margin-top: 13px; }
.footer-cols a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .09); display: flex; justify-content: space-between; padding-top: 26px; font-size: 12.35px; line-height: 17px; color: #919191; }
.socials { display: flex; gap: 20px; }
.socials a { transition: color .2s; }
.socials a:hover { color: #fff; }

/* home page: the app CTA opens the footer, so the two read as one dark block.
   The phone rises on the right and is cut off by the divider above the links. */
.footer--cta {
  height: auto; margin-top: 110px; padding-bottom: 53px;
  background: var(--glow), var(--charcoal);
}
.footer-cta { position: relative; overflow-x: clip; clip-path: inset(-200px 0 0 0); font-family: var(--pjs); border-bottom: 1px solid rgba(255, 255, 255, .08); }   /* clips the sides and bottom, lets the phone rise above the top */
.footer--cta .cta-wrap { width: 1112px; height: 310px; margin: 0 auto; padding-top: 0; }
.footer--cta .cta-card { height: auto; padding: 58px 0 0; border-radius: 0; background: none; }
.footer--cta .cta-phone { left: 620px; top: auto; bottom: -46px; }   /* runs into the divider at the bottom and rises ~64px above the top edge (the image has ~66px of empty space on top) */

.chat-launcher {
  position: fixed; z-index: 40; right: 21px; bottom: 23px;
  width: 58px; height: 58px; border-radius: 50%; background: #2a64f6;
  display: grid; place-items: center;
  box-shadow: 0 10px 26px -8px rgba(42, 100, 246, .7);
  transition: transform .3s var(--ease-out);
}
.chat-launcher:hover { transform: scale(1.06); }

/* =========================================================
   RESPONSIVE (the Figma file is desktop-only; below 1220px
   the layout reflows instead of scaling)
   ========================================================= */
@media (max-width: 1219px) {
  .wrap, .int-intro, .logo-row { width: auto; margin-inline: 32px; }
  .wrap-n { width: auto; margin-inline: 32px; }
  .t-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* wide cards take a full row, the others pair up */
  .t-card--wide { grid-column: 1 / -1; }
  .nav-shell { width: auto; margin-inline: 32px; }
  .hero-inner { padding-inline: 32px; }
  .hero--v2 { --k: .7; }
  .logo-row { height: auto; }
  .trusted .logo-row { height: 44px; }   /* keeps the logos where the buttons' bottom margin expects them */
  .logo-row:not(.is-marquee) .logo-track { justify-content: space-between; flex-wrap: wrap; gap: 24px; }
  .logo-row:not(.is-marquee) .logo-track li { margin-left: 0; }
  .logo-track img { height: 34px; width: auto; }
  .is-marquee .logo-track li { padding-right: 48px; }
  .how .wrap > .h-38, .how .wrap > .lead { left: 0; }
  .stats { grid-template-columns: repeat(2, auto); justify-content: center; gap: 32px 72px; margin-top: 88px; }   /* 2 × 2, centred */
  .how .stats { margin-top: 64px; }
  .stat-txt > span { white-space: normal; }   /* longer translated labels wrap instead of widening the page */
  .ch-row { width: auto; height: auto; margin: 0 32px 72px; display: grid; justify-items: center; text-align: center; }
  .ch-row .pills { position: static; width: auto; flex-direction: row; justify-content: center; order: 1; }
  .ch-row .pill:not(:last-child) { display: none; }
  .ch-row .pill { padding: 0 30px 0 28px; }
  .ch-row .ch-phone { position: static; order: 2; width: min(374px, 78vw); height: auto; margin-top: -40px; }
  .ch-row .ch-copy { position: static; order: 3; width: auto; max-width: 520px; margin-top: -20px; }
  .ch-rows { margin-top: 48px; }
  .channels { padding-bottom: 40px; }
  .gcal { height: auto; padding: 80px 0; }
  .gcal-copy { width: auto; padding-top: 0; }
  .gcal-text { width: auto; max-width: 560px; }
  .gcal-visual { position: static; width: 100%; max-width: 732px; height: auto; margin: 40px auto 0; }
  .cal-fit { width: 100%; height: auto; aspect-ratio: 732 / 568; }
  /* stacked: heading, then the picture, then the paragraph and the list */
  .gcal-wrap { display: flex; flex-direction: column; }
  .gcal-copy { display: contents; }
  .gcal-copy .h-38 { order: 1; text-align: center; }
  .gcal-visual { order: 2; margin-top: 6px; }   /* the picture has its own empty band on top: ~24px from the heading (user's request; was ~50) */
  .gcal-text { order: 3; align-self: center; margin-top: -5px; text-align: center; }   /* the picture has its own space underneath: ~24px to the text (was ~41) */
  .features { order: 4; margin-top: 40px; }
  .int-text { width: auto; }
  .int-controls { height: auto; flex-wrap: wrap; }
  .int-search { flex: 1 1 320px; width: auto; }
  .int-cats { flex-wrap: wrap; }
  .int-grid { grid-template-columns: repeat(3, 1fr); }
  .int-viewall { left: 50%; translate: -50% 0; width: auto; padding: 0 22px; }
  .faq { height: auto; padding: 72px 0; }
  .faq-wrap { height: auto; display: grid; grid-template-columns: 1fr 552px; gap: 32px; }
  .faq-side { padding-top: 24px; }
  .faq-panel { position: static; width: auto; grid-column: 2; grid-row: 1 / span 2; }
  .faq-side, .faq-cta { grid-column: 1; }
  .faq-cta .faq-more { margin-top: 0; }
  .blog-grid { grid-template-columns: repeat(3, 1fr); }
  .post { height: auto; padding-bottom: 20px; }
  .post-thumb { width: 100%; height: auto; aspect-ratio: 2 / 1; }
  .post-cat, .post-title, .post-excerpt, .post-meta { position: static; width: auto; margin: 0 20px; }
  .post-cat { display: block; margin-top: 20px; }
  .post-title { margin-top: 12px; min-height: 60px; }
  .post-excerpt { margin-top: 12px; }
  .post-meta { margin-top: 18px; }
  .cta-wrap { padding-top: 0; margin-top: 110px; }
  .cta-phone { left: auto; right: 0; top: -150px; width: 46%; height: auto; }
  .cta-card { height: auto; padding: 44px 47px 48px; }
  .cta-text { width: auto; max-width: 473px; }
  .footer { height: auto; padding-bottom: 32px; }
  .footer--cta { margin-top: 96px; }
  .footer--cta .cta-wrap { width: auto; height: auto; margin: 0 32px; }   /* same side margins as the footer links */
  .footer--cta .cta-card { padding: 56px 0 60px; }
  .footer--cta .cta-phone { left: auto; right: -14px; top: auto; bottom: -36px; width: min(500px, 100% - 420px); height: auto; }   /* cut by the divider, rising above the top edge; the two-phone image (2026-11-02) keeps both phones on screen, clear of the text */
  .footer--cta .cta-text { max-width: 400px; }
  .footer--cta .cta-card .h-38 { max-width: 440px; }   /* a long translated heading (German) wraps before it reaches the phones */
  .footer-wrap { width: auto; margin-inline: 32px; }
  .footer-top { height: auto; flex-wrap: wrap; gap: 40px; padding-bottom: 48px; }
  .footer-cols { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(110px, 1fr)); gap: 32px 24px; }
  .footer-cols > div, .footer-cols > div:last-child { width: auto; }
}

@media (max-width: 1099px) {
  .nav-links { display: none; }
  .nav-burger { display: block; }
  .hero-title { font-size: clamp(32px, 5.4vw, 50px); line-height: 1.12; }
  .faq-wrap { grid-template-columns: 1fr; }
  .faq-panel { max-width: 640px; grid-column: auto; grid-row: auto; }
  .faq-side, .faq-cta { grid-column: auto; }
  .faq-cta { padding-top: 16px; text-align: center; }   /* sits under the questions, centred, once the layout stacks */
  .faq-side { text-align: center; }
  .faq-panel { margin-inline: auto; }   /* centred with the heading on tablets (max 640px wide) */
  .faq-a p { width: auto; padding-right: 24px; }
}

@media (max-width: 899px) {
  .int-grid { grid-template-columns: repeat(2, 1fr); }
  .blog-grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  /* phone rises out of the bottom of the card; background shows its full design (light edges) */
  .cta-wrap { --cta-phone-w: min(96vw, 440px); }
  .cta-card { background-size: 100% 100%; padding-bottom: calc(var(--cta-phone-w) * .8924 + 4px); }
  .cta-phone { left: 50%; right: auto; top: auto; bottom: 0; width: var(--cta-phone-w); height: auto; transform: translateX(-50%); }
  .cta-card { text-align: center; }
  .cta-text { margin-left: auto; margin-right: auto; }
  .cta-btns { justify-content: center; }
  .footer--cta .cta-card { padding: 64px 0 calc(var(--cta-phone-w) * .8924 + 4px); }
  .footer--cta .cta-phone { left: 50%; right: auto; top: auto; bottom: 0; width: var(--cta-phone-w); transform: translateX(-50%); }
  .footer-cta { clip-path: none; }
  .footer-cols { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .wrap, .wrap-n, .int-intro, .logo-row, .nav-shell, .footer-wrap { margin-inline: 16px; }
  .t-grid { grid-template-columns: minmax(0, 1fr); max-width: calc(100% - 32px); margin-top: 40px; gap: 14px; }
  .t-card { padding: 22px 20px 20px; border-radius: 16px; }
  .t-stats { gap: 28px; }
  .t-stat strong { font-size: 28px; line-height: 34px; }
  .t-card blockquote { padding-top: 18px; font-size: 15.5px; line-height: 23px; }
  .t-summary { flex-wrap: wrap; padding-inline: 16px; }
  .ch-row { margin-inline: 16px; }
  .nav-shell { height: 48px; margin: 12px 12px 0; padding: 0 6px 0 18px; }
  .is-scrolled .nav-shell { margin-top: 10px; }
  .nav-logo img { width: 64px; }
  .nav-actions { gap: 6px; }
  .btn--nav { width: auto; min-width: 113px; height: 31px; padding: 0 11px 0 12.5px; gap: 7px; font-size: 11.25px; }   /* 10% smaller on phones (user's request, 2026-11-02; was 125 x 34, 12.5px) */
  .btn--nav img { width: 11px; }
  .btn--nav span { translate: 0 .6px; }   /* at this size the label sat 0.6px above the arrow (measured): both now centred */
  .nav-burger { width: 32px; height: 32px; }
  .nav-burger span { left: 9px; right: 9px; }
  .nav-burger span:first-child { top: 12px; }
  .nav-burger span:last-child { top: 19px; }
  .lang-pill { display: none; }
  .hero-inner { padding: 94px 16px 0; }   /* 48px you can see between the menu's button and the headline's letters (user's requests, 2026-11-02 and 11-03: the line box and the pill's own padding added 14px more, so it read as 62); on shorter screens the dashboard close-up gives up the room, so the channel row stays on the first screen */
  .hero--v2 { --k: .33; }
  .hero-sub { font-size: 16px; line-height: 22px; }   /* phones: every subheader 16px (user's request) */
  .hero--v2 .hero-sub { margin-top: 17px; line-height: 1.375; text-wrap: balance; }   /* 7px more under the headline (user's request, 2026-11-02; was 10px) */   /* main.js fits its size to two lines (fitHeroSub) */   /* phones: the short subheader under the headline (user's request, 2026-11-02; hidden before) */
  .hero-ctas { gap: 10px; max-width: 400px; margin: 18px auto 0; }   /* the two buttons side by side, half the width each, so the dashboard gets the height (user's request, 2026-10-30; they were stacked) */
  .hero-ctas .btn--hero { flex: 1 1 0; min-width: 0; max-width: none; height: 48px; padding: 0 12px; gap: 8px; font-size: 15px; white-space: nowrap; }   /* (overrides the sizing further down) */
  .hv2-stage { margin-top: 40px; }   /* the same space above the dashboard as below it, to the logos (user's request) */
  .how { padding-bottom: 64px; }   /* half the space under the four numbers (user's request) */
  .how .stats { margin-top: 56px; }   /* phones keep theirs */
  .trusted .logo-track img { height: 26px; }
  .trusted .ch-logo { height: 26px; gap: 7px; font-size: 16px; }
  .trusted .ch-logo svg { width: 20px; height: 20px; stroke-width: 1.8; }
  .trusted-inner { flex-direction: column; gap: 14px; max-width: calc(100% - 32px); text-align: center; }   /* label above the logos */
  .trusted-label { width: auto; white-space: normal; font-size: 14px; line-height: 21px; }
  .trusted-div { display: none; }
  .trusted .logo-row { width: 100%; height: auto; flex: none; }
  .btn--hero { flex: 1 1 0; min-width: 0; max-width: 190px; padding: 0 14px; gap: 10px; font-size: 14.5px; }
  .play-btn { width: 58px; height: 58px; margin: -29px 0 0 -29px; box-shadow: 0 0 0 7px rgba(255, 255, 255, .28), 0 14px 30px -10px rgba(60, 20, 110, .6); }
  .play-btn svg { width: 18px; height: 20px; margin-left: 4px; }
  .video-modal { width: calc(100vw - 24px); }
  .video-close { top: -50px; }
  .h-38 { font-size: 30px; line-height: 1.26; }
  .ch-pin.is-compact .channels-head h2 { font-size: 30px; line-height: 1.26; }
  .cta-text { font-size: 16px; line-height: 22px; }   /* "One AI. Every platform…" the same size as the other headlines (user's request; was 22px) */
  .stats { grid-template-columns: repeat(2, 1fr); justify-content: stretch; gap: 28px 16px; margin-top: 56px; }
  .stat-txt > span { white-space: normal; }
  .stats { gap: 12px; }
  .stat {   /* centred tiles on phones, icon above the number */
    flex-direction: column; align-items: center; gap: 10px; padding: 20px 12px 18px; border-radius: 18px; text-align: center;
    background: rgba(255, 255, 255, .62); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), 0 0 0 1px rgba(15, 23, 42, .05), 0 14px 26px -20px rgba(15, 23, 42, .35);
  }
  .stat-txt { align-items: center; }
  .stat-ico { width: 44px; height: 44px; border-radius: 12px; }
  .stat-ico svg { width: 21px; height: 21px; }
  .stat strong { font-size: 24px; line-height: 30px; }
  .stat-txt > span { font-size: 13px; line-height: 17px; }
  .channels-sub { width: auto; padding-inline: 16px; }
  .ch-bg-wrap { display: none; }   /* phones: no lit sphere behind the channels */
  .pill { height: 52px; font-size: 19px; padding: 0 22px; gap: 10px; }
  .ch-title { font-size: 24px; line-height: 29px; }
  /* under the phone: title + text only; the small "SMS  •  INSTANT REPLIES  •  BOOKINGS" label made it crowded */
  .ch-label { display: none; }
  .ch-row .ch-title, .ch-pin.is-compact .ch-title { margin-top: 0; }
  .gcal-copy .h-38 br, .feature-copy br { display: none; }
  /* phones: heading, picture and paragraph centred (a left-aligned version was tried and dropped, 2026-10-28). The picture's
     drawing runs from 30 to 714 of its 732 units, so it's nudged 6 units left to sit in the middle */
  .cal-fit { translate: calc(var(--cal-k, 1) * -6px) 0; }
  .feature-copy { width: auto; }
  .int-cats { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .int-cats::-webkit-scrollbar { display: none; }
  .cat { flex: none; }
  .int-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }   /* 16 integrations: two compact columns */
  .int-collection { height: 520px; }
  .int-fade { top: 300px; height: 220px; }
  .int-viewall { top: auto; bottom: 18px; }
  .int-card { min-height: 0; padding: 14px 12px 12px; border-radius: 14px; }
  .int-id { height: 34px; }
  .int-id > img { width: 34px; height: 34px; }
  .int-logo { width: 34px; height: 34px; border-radius: 12px; }
  .int-logo img { width: 20px; height: 20px; object-fit: contain; }
  .int-badge { height: 17px; padding: 0 6px; font-size: 9px; }
  .int-card h3 { margin-top: 12px; font-size: 13px; line-height: 17px; }
  .int-card p { min-height: 0; margin: 4px 0 12px; font-size: 11.5px; line-height: 16px; }   /* in full: a clamp cut the longer translations short */
  .int-connect { height: 30px; border-radius: 10px; font-size: 11.5px; }
  .int-hero { height: 320px; }
  .int-phone { top: 30px; transform: scale(.6); transform-origin: 50% 0; }   /* 207 × 290 */
  .tiles { top: 146px; height: 72px; }
  .tiles-track { left: calc(50% - 340px); gap: 16px; }                    /* desktop layout × 0.51 */
  .tile { width: 72px; height: 72px; border-radius: 14px; }
  .int-line { top: 320px; left: 16px; right: 16px; width: auto; }
  .testimonials { padding: 56px 0 64px; }
  .faq-cta { padding-top: 8px; }
  .cta-card { padding: 36px 24px calc(var(--cta-phone-w) * .8924 + 4px); }
  .cta-btns { flex-wrap: wrap; gap: 12px; }
  .store-badge img { height: 42px; }   /* both badges still fit side by side on a 375px phone */
  .footer--cta { margin-top: 72px; }
  .footer--cta .cta-wrap { margin: 0 16px; }
  .footer--cta .cta-card { padding: 52px 0 calc(var(--cta-phone-w) * .8924 + 4px); }
  .footer-brand { width: 100%; }
  .footer-tag { line-height: 1.5; }
  .footer-bottom { flex-direction: column; gap: 14px; }
  .socials { flex-wrap: wrap; gap: 14px 20px; }
}

/* Phones: lighter on the graphics chip. Android Chrome dropped parts of the hero (black boxes, words
   blinking out) while scrolling with live blurs, the per-frame 3D tilt and the running edge light. */
@media (max-width: 640px) {
  .nav-shell, .is-scrolled .nav-shell { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(8, 10, 14, .92); }
  .btn--glass { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255, 255, 255, .07); }
  .motion .w { filter: none; }   /* words rise in without the blur */
  .motion .hv2-edge i { opacity: 0; animation: none; }
  .motion .hv2-sheen::before { animation: none; }
  /* the dark header fills the whole first screen with its content in the middle; the logos sit a little below the
     dashboard (user: "move the logos lower", then "too much above the logos": a fixed gap, not the spare height) */
  .hero--v2 { display: flex; flex-direction: column; justify-content: center; min-height: calc(100vh - var(--promo-h)); min-height: calc(100svh - var(--promo-h)); }   /* with the offer bar above it, the two together fill the first screen */
  .hero--v2 > .trusted { margin-top: 26px; }   /* under the buttons, above the channel tiles */
  .hero--v2 > .hm { margin-bottom: 18px; }   /* clear of the browser's bottom bar */
  .hero--icons-below > .hm { order: 1; margin-bottom: 0; }   /* this version: the close-up first, then the caps line and the tiles */
  .hero--icons-below > .trusted { order: 2; margin-top: 6px; }
  .hero--icons-below > .hm-tiles { order: 3; margin-bottom: 18px; }
  /* with the offer bar above (it takes ~34px of the first screen) the tablet keeps the height it had: the room comes
     from the gaps around it instead, and the menu sits a little closer under the bar (user's request, 2026-11-03).
     Closing the bar puts everything back as it was */
  html:not(.promo-off) .site-header:not(.is-scrolled) .nav-shell { margin-top: 6px; }
  html:not(.promo-off) .hero--v2 .hero-inner { padding-top: 88px; }   /* the same 48px you can see, from the button to the headline */
  .hero--icons-below > .hero-inner { margin-bottom: auto; }   /* on tall screens the spare height goes between the buttons and the tablet, not above the headline */
  html:not(.promo-off) .hero--icons-below > .hm { margin-top: 4px; }
  html:not(.promo-off) .hero--icons-below .hm-shot { top: 0; }   /* the tablet's top-left corner is empty space (it leans back) */
  html:not(.promo-off) .hero--icons-below > .trusted { margin-top: 2px; }
  html:not(.promo-off) .hero--icons-below > .hm-tiles { margin-bottom: 10px; }   /* still clear of the browser's bottom bar */
  /* newer iPhones: Safari's bottom bar floats over the page and 100svh stops above it, so the light section below showed
     through. The dark runs to the bottom of the screen; the padding keeps the content centred in the part above the bar */
  @supports (min-height: 100lvh) {
    .hero--v2 { min-height: calc(100lvh - var(--promo-h)); padding-bottom: calc(100lvh - 100svh); }
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* =========================================================
   OTHER LANGUAGES: fonts for the scripts Inter and DM Sans
   don't cover (Arabic from Google Fonts, loaded only on Arabic
   pages; Japanese and Chinese from the system)
   ========================================================= */
:root:lang(ar) {
  --pjs: "Inter", "Noto Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
  --inter: var(--pjs);
  --dm: "DM Sans", "Noto Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
}
:root:lang(ja) {
  --pjs: "Inter", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", Meiryo, system-ui, sans-serif;
  --inter: var(--pjs);
  --dm: "DM Sans", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", Meiryo, system-ui, sans-serif;
}
:root:lang(zh) {
  --pjs: "Inter", "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  --inter: var(--pjs);
  --dm: "DM Sans", "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
}
/* Translations run longer than the English these pills were sized for: let them grow (English keeps its exact sizes) */
:root:not(:lang(en)) .cat { width: auto; min-width: 42px; padding: 0 12px; }
:root:not(:lang(en)) .nav-links { gap: 20px; margin-inline-start: 48px; }
:root:not(:lang(en)) .nav-links a { white-space: nowrap; }
@media (max-width: 1219px) {   /* longer menu labels: switch to the burger menu sooner */
  :root:not(:lang(en)) .nav-links { display: none; }
  :root:not(:lang(en)) .nav-burger { display: block; }
}
/* Arabic letters join up, so tight tracking would pull words apart */
:lang(ar), :lang(ar) * { letter-spacing: 0 !important; }

/* =========================================================
   RIGHT-TO-LEFT (Arabic): text flips with dir="rtl"; elements
   placed at fixed left offsets are mirrored here
   ========================================================= */
[dir="rtl"] .gcal-visual { left: -81px; }                    /* calendar picture on the left, copy on the right */
[dir="rtl"] .footer--cta .cta-phone { left: -35px; }         /* footer phone on the left of the pitch */
[dir="rtl"] .wrap-n { margin-right: auto; }
[dir="rtl"] img[src*="arrow"] { scale: -1 1; }               /* arrows point the way Arabic reads */
[dir="rtl"] .trusted-inner { text-align: right; }
[dir="rtl"] .faq-q { padding: 18.5px 24px 18.5px 50px; text-align: right; }
[dir="rtl"] .faq-q img { right: auto; left: 15px; }
[dir="rtl"] .faq-a p { padding: 16px 25px 17px 0; }
@media (max-width: 1219px) {
  [dir="rtl"] .faq-a p { padding-left: 24px; }
  [dir="rtl"] .footer--cta .cta-phone { right: auto; left: -14px; }
}
@media (max-width: 640px) {
  [dir="rtl"] .footer--cta .cta-phone { left: 50%; }   /* centred under the pitch, as in English */
}

/* Try the agent — same demo as the main site, sitting under the hero buttons */
.try-agent { width: min(640px, 100%); margin: 22px auto 0; text-align: left; }
.try-agent[hidden] { display: none; }
.try-agent-label { margin: 0 0 8px; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: rgba(255,255,255,.72); }
.try-agent-row { display: flex; flex-wrap: wrap; gap: 8px; }
.try-agent-input { flex: 1 1 140px; min-width: 0; height: 46px; padding: 0 14px; border: 0; border-radius: 999px; background: rgba(255,255,255,.08); color: #fff; font: inherit; font-size: 15px; }
.try-agent-input::placeholder { color: rgba(255,255,255,.45); }
.try-agent-mode {
  flex: 0 0 auto; width: auto; field-sizing: content; padding-inline: 14px 26px; appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M1 1l3 3 3-3' fill='none' stroke='rgba(255,255,255,.7)' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 8px 5px;
}
.try-agent-phone { position: relative; flex: 1.4 1 200px; display: flex; align-items: center; gap: 4px; min-width: 0; height: 46px; padding: 0 14px 0 4px; border-radius: 999px; background: rgba(255,255,255,.08); }
.try-agent-dial { display: inline-flex; align-items: center; gap: 4px; flex: none; height: 34px; padding: 0 8px; border-radius: 999px; color: rgba(255,255,255,.78); font-size: 13px; }
.try-agent-dial:hover { background: rgba(255,255,255,.08); }
.try-agent-dial svg { flex: none; }
.try-agent-number { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: #fff; font: inherit; font-size: 15px; outline: none; }
.try-agent-number::placeholder { color: rgba(255,255,255,.45); }
.try-agent-countries { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; width: min(280px, 80vw); max-height: 260px; display: flex; flex-direction: column; padding: 8px; border-radius: 16px; background: #16181f; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 16px 40px rgba(0,0,0,.45); }
.try-agent-countries[hidden] { display: none; }
.try-agent-country-search { height: 34px; margin-bottom: 6px; padding: 0 10px; border: 0; border-radius: 10px; background: rgba(255,255,255,.06); color: #fff; font: inherit; font-size: 13px; }
.try-agent-country-list { overflow: auto; }
.try-agent-country { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 8px; border-radius: 8px; text-align: left; color: rgba(255,255,255,.82); font-size: 13px; }
.try-agent-country:hover, .try-agent-country.is-on { background: rgba(255,255,255,.08); }
.try-agent-country b { margin-left: auto; font-weight: 500; color: rgba(255,255,255,.45); }
.try-agent-consent { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0; font-size: 12.5px; line-height: 1.4; color: rgba(255,255,255,.62); }
.try-agent-status { margin: 8px 0 0; font-size: 14px; color: #fff; }
.try-agent-status.is-error { color: #ffb4b4; }