/* Product pages built on the Agent Miia page (views/v2/product-miia.ejs). Everything else on these pages is /miia's
   own Webflow CSS; this file only adds the two things /miia draws with media files:
   1. the hero animation in Miia's animation box (board ports, see anim/run.js), and
   2. "The Humantic AI Difference" drawn in HTML instead of Miia's two diagram images, inside Miia's own
      before/after slider, scaled the same way the images scale. */

/* 1. Animation box */
.hxa { --gold:#FFC61E; --gold300:#FFE8A5; --violet:#341D99; --ink:#110A33; --lav:#DDD6FF; --mist:#F6F4FF; --cream:#FFF4D2; --slate:#5B6478; --white:#fff;
  --f-display:Cabinetgrotesk,"Cabinet Grotesk",Manrope,Arial,sans-serif; --f-body:Manrope,Arial,sans-serif;
  --ease-out:cubic-bezier(.23,1,.32,1); --ease-io:cubic-bezier(.77,0,.175,1); --ease-drawer:cubic-bezier(.32,.72,0,1); --r:24px;
  --sh-sm:0 2px 8px rgba(17,10,51,.08); --sh-md:0 12px 32px -12px rgba(17,10,51,.22); --sh-lg:0 32px 64px -24px rgba(17,10,51,.35);
  width:100%; overflow:hidden; }
.hxa-opt { position:relative; margin:0; }
.hxa-stage { position:relative; aspect-ratio:656 / 358; overflow:hidden; } /* the size of /miia's animation box */
.hxa-stage > .canvas { position:absolute; left:0; top:0; width:960px; height:600px; transform-origin:0 0; overflow:hidden; text-align:left; line-height:1.4; letter-spacing:normal; }
.hxa-stage h3, .hxa-stage p { letter-spacing:normal; }
/* "Sample data" caption on heroes that show a real brand (PLAN-OCT20 shared decisions; constants hero.sample). Outside the scaled
   canvas, so it is always 12px; each page CSS places it in a free corner. */
.hxa-note { position:absolute; right:12px; bottom:12px; z-index:2; margin:0; padding:2px 8px; border-radius:999px; background:rgba(255,255,255,.9); font:600 12px/16px Manrope,Arial,sans-serif; letter-spacing:normal; color:#5B6478; pointer-events:none; }
.hxa-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.hxa-pause { position:absolute; right:10px; bottom:10px; width:32px; height:32px; border:0; border-radius:50%; background:rgba(17,10,51,.72); color:#fff; display:grid; place-items:center; cursor:pointer; opacity:.85; transition:opacity .2s, transform .16s; }
.hxa-pause:hover { opacity:1; }
.hxa-pause::after { content:""; position:absolute; inset:-6px; } /* 44px hit area */
.hxa-pause:active { transform:scale(.96); }
.hxa-pause:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
.hxa-pause svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.hxa-pause .i-play { display:none; fill:currentColor; }
.hxa-pause[aria-pressed="true"] .i-play { display:block; } .hxa-pause[aria-pressed="true"] .i-pause { display:none; }
@media screen and (max-width:767px) { .miia-hero-lottie.hxa { width:100%; } .hxa-stage { aspect-ratio:358 / 248; } .hxa-pause { right:6px; bottom:6px; width:28px; height:28px; } .hxa-pause::after { content:""; position:absolute; inset:-8px; } }

/* 2. The Humantic AI Difference: two full-width flows (before / after) at Miia's diagram proportions (1328 x 500) */
.bas-wrapper.pm-bas { height:auto; aspect-ratio:1328 / 500; container-type:inline-size; }
.pm-diff { position:absolute; inset:0; width:100%; height:100%; }
.pm-diff.is-before { position:relative; background:#f4f4f4; }
.pm-diff.is-after { background:#f6f4ff; }
.pm-flow { height:100%; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); align-items:center; gap:3.2cqw; padding:0 3.6cqw; }
.pm-node { position:relative; display:flex; flex-direction:column; align-items:center; gap:.7cqw; padding:1.6cqw 1.2cqw; border-radius:1.2cqw; background:#fff; text-align:center; color:#110A33;
  box-shadow:0 .2cqw .8cqw rgba(17,10,51,.08); font-family:Manrope,Arial,sans-serif; }
.pm-node:not(:last-child)::after { content:""; position:absolute; top:50%; right:-3cqw; width:2.8cqw; height:.15cqw; background:#110A33; }
.pm-node:not(:last-child)::before { content:""; position:absolute; top:50%; right:-3cqw; width:.7cqw; height:.7cqw; border:solid #110A33; border-width:.15cqw .15cqw 0 0; transform:translate(-.05cqw,-50%) rotate(45deg); transform-origin:center; margin-top:.07cqw; }
.pm-ic svg { width:2.6cqw; height:2.6cqw; display:block; }
.pm-node b { font:600 1.3cqw/1.25 Manrope,Arial,sans-serif; }
.pm-node > span:not(.pm-ic) { font:400 1.05cqw/1.35 Manrope,Arial,sans-serif; color:#5B6478; }
.pm-node.is-dim { background:transparent; box-shadow:none; border:.12cqw dashed rgba(17,10,51,.3); color:#5B6478; }
.pm-diff.is-after .pm-node b { color:#341d99; }
.pm-node.is-out { align-self:stretch; justify-content:center; background:#ffe8a5; align-items:stretch; text-align:left; padding:1.6cqw; }
.pm-node.is-out b { color:#110A33 !important; font-size:1.4cqw; text-align:center; }
.pm-node ul { list-style:none; margin:.4cqw 0 0; padding:0; display:grid; gap:.5cqw; }
.pm-node li { background:#fff4d2; border-radius:.6cqw; padding:.6cqw .8cqw; font:500 1.02cqw/1.3 Manrope,Arial,sans-serif; }

/* "Why it matters" columns: /miia has five; a product with fewer facts keeps one row on desktop */
@media screen and (min-width:992px) { .miia_arch.pm-n { grid-template-columns:repeat(var(--n),minmax(0,1fr)); } }

/* No lone last words (AK's rule): balance the headings and quote lines, keep body copy from leaving an orphan */
.miia-quote-heading, .miis-tab-quote, .section-header h2, .result_main-heading, .miia-compare-h2, .miia-slider-header-middle,
.deals-h2, .miis-deal-quote, .tml-text, .arch-card-title, .mia-hero-h3, .sample-intro-h3 { text-wrap:balance; }
.hero-subtext, .miia-tab-card p, .arch-card-subtext, .miia-deal-item, .miis-ct-para, .wtpu-text { text-wrap:pretty; }

/* Body links between products: the text's own colour, underlined so they read as links */
.hero-subtext a, .miia-tab-card p a, .arch-card-subtext a, .wtpu-text a, .pm-node a { color:inherit; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
.hero-subtext a:hover, .miia-tab-card p a:hover, .arch-card-subtext a:hover, .wtpu-text a:hover, .pm-node a:hover { text-decoration-thickness:2px; }

/* Tablets and phones: /miia's diagram image shrinks to unreadable size; here each side becomes a readable column in its
   own half, so at the slider's starting point you read the two flows side by side, and the slider still works. */
@media screen and (max-width:991px) {
  .bas-wrapper.pm-bas { aspect-ratio:auto; display:grid; }
  .pm-bas > .pm-diff { grid-area:1 / 1; position:relative !important; inset:auto !important; height:auto !important; }
  .pm-flow { grid-auto-flow:row; grid-auto-rows:auto; width:50%; height:auto; gap:22px; padding:16px 10px 16px 10px; }
  .pm-diff.is-after .pm-flow { margin-left:50%; }
  .pm-node { gap:4px; padding:10px 8px; border-radius:10px; }
  .pm-node:not(:last-child)::after { top:auto; bottom:-18px; right:auto; left:50%; width:1.5px; height:14px; }
  .pm-node:not(:last-child)::before { top:auto; bottom:-18px; right:auto; left:50%; width:7px; height:7px; border-width:0 1.5px 1.5px 0; transform:translate(-50%,0) rotate(45deg); margin:0; }
  .pm-ic svg { width:22px; height:22px; }
  .pm-node b, .pm-node.is-out b { font-size:13px; line-height:1.3; }
  .pm-node > span:not(.pm-ic), .pm-node li { font-size:12px; line-height:1.35; }
  .pm-node li { padding:5px 6px; border-radius:6px; }
  .pm-node.is-out { padding:10px 8px; }
}
@media screen and (max-width:767px) {
  .wtpu-text a { padding:14px 13px; margin:-14px -13px; } /* 44px tap area for the slider pointer links; text unchanged */
}

/* 2. Oct 17 (AK: "make it smaller"). Same compact rules as the homepage testimonial slider (webflow-home.ejs, section.home-tml).
   Quotes, names, metrics and photos are unchanged. The portrait on these pages is .tml-client-mugshot. */
@media (min-width:992px){
  .section_testimonials.home-tml .tml-card{aspect-ratio:auto;height:560px}
  .section_testimonials.home-tml .tml-content-wrap{padding-top:1.5rem;padding-bottom:1.5rem}
  .section_testimonials.home-tml .tml-text{font-size:44px;line-height:1.15;padding-bottom:.15em;margin-bottom:calc(2rem - .15em)}
  .section_testimonials.home-tml .client-metric-flex{margin-top:1.5rem}
  .section_testimonials.home-tml .client-metric-wrap{padding:1rem 1.25rem}
  .section_testimonials.home-tml .tml-metric-value{font-size:48px}
  .section_testimonials.home-tml .tml-client-img,.section_testimonials.home-tml .tml-client-mugshot img{width:auto;max-width:100%;max-height:520px;margin-left:auto}
}
@media (min-width:768px) and (max-width:991px){
  .section_testimonials.home-tml .tml-card{aspect-ratio:auto;height:auto;min-height:480px}
  .section_testimonials.home-tml .tml-text{font-size:40px;line-height:1.15;padding-bottom:.15em;margin-bottom:calc(1.5rem - .15em)}
  .section_testimonials.home-tml .tml-metric-value{font-size:40px}
  .section_testimonials.home-tml .tml-client-img,.section_testimonials.home-tml .tml-client-mugshot img{width:auto;max-width:100%;max-height:440px;margin-left:auto}
}
@media (max-width:767px){
  .section_testimonials.home-tml .tml-card{aspect-ratio:auto;height:auto;min-height:0}
  .section_testimonials.home-tml .tml-text{font-size:28px;line-height:1.15;padding-bottom:.15em;margin-bottom:calc(1rem - .15em)}
  .section_testimonials.home-tml .tml-metric-value{font-size:28px}
  .section_testimonials.home-tml .tml-client-img,.section_testimonials.home-tml .tml-client-mugshot img{width:auto;max-width:100%;max-height:300px;margin-left:auto}
}

/* 3. Oct 17 (AK): "The Conversation Transformation" talk slide (.miia-card.is-2), about 40% shorter. Words unchanged.
   Side photos: hidden under 1280px, 60% of their size from 1280px. */
.section_miia-result .splide__slide.miia-card.is-2{padding-top:1.5rem;padding-bottom:1.5rem}
.section_miia-result .miia-card.is-2 .heading-wrapper{height:auto;margin-bottom:1rem;padding:0}
@media (max-width:767px){ .section_miia-result .miia-card.is-2 .miia-slider-content-center{margin-top:.5rem;margin-bottom:.5rem} }
.section_miia-result .miia-card.is-2 .miia-slider-component.slide-02{height:auto}
.section_miia-result .miia-card.is-2 .miia-slider-content-wrap{height:auto;margin-bottom:1rem;row-gap:.5rem}
.section_miia-result .miia-card.is-2 .miia-slider-label{padding-top:.5rem;padding-bottom:.5rem}
.section_miia-result .miia-card.is-2 .miia-slider-pointers{row-gap:.5rem}
.section_miia-result .miia-card.is-2 .miia-ct-avatar{max-width:2.75rem}
.section_miia-result .miia-card.is-2 .miia-ct-pointer{padding-top:0;padding-bottom:0}
.section_miia-result .miia-card.is-2 .miia-comp-quote{height:auto;min-height:0;padding:.875rem 1.5rem;row-gap:.5rem}
/* Type uniformity (Oct 2026): page headings follow the homepage. "body h1/h2/h3" outranks the Webflow element rules that load after this file. */
body h1, body .miia-h1 { font-size: clamp(38px, 6vw, 76px); line-height: 1.06; font-weight: 700; }
body h2 { font-size: clamp(27px, 3.4vw, 44px); line-height: 1.12; font-weight: 700; }
body h3 { font-size: 19px; line-height: 1.12; font-weight: 700; }
/* product-page FAQ questions use the homepage FAQ pattern (hai-faq: Manrope 600) */
body .sample-intro-h3, body .intro-h3 { font-family: Manrope, Arial, sans-serif !important; font-size: clamp(17px, 1rem + 0.2vw, 19px) !important; font-weight: 600 !important; line-height: 1.45 !important; }
@media (min-width:768px){
  .section_miia-result .miia-card.is-2 .miia-slider-header-middle{font-size:clamp(27px,3.4vw,44px);line-height:1.12}
  .section_miia-result .miia-card.is-2 .miia-quote-heading{font-size:19px;line-height:1.12}
}
@media (min-width:1280px){
  .section_miia-result .miia-card.is-2 .miiaslider-left-img{max-width:11.025rem}
  .section_miia-result .miia-card.is-2 .miiaslider-right-img{max-width:10.8rem}
}
@media (max-width:1279px){
  .section_miia-result .miia-card.is-2 .miiaslider-left-img,.section_miia-result .miia-card.is-2 .miiaslider-right-img{display:none}
}
section.section_miia-hero{padding-top:96px}
#comparison{padding-top:0}