/* Product pages: Oct 19 clean pass (opus-product-pages). Loaded by /miia (views/webflow-miia.ejs) and the seven pages on
   its layout (views/v2/product-miia.ejs), Every rule is prefixed with "html body" because the Webflow stylesheet loads a second time in the header include; the prefix lets these rules win without !important. All eight share one density, one rhythm and one
   type scale. Brand tokens only: gold #FFC61E, gold 300 #FFE8A5, violet #341D99, ink #110A33, lavender #DDD6FF,
   mist #F6F4FF, cream #FFF4D2, slate #5B6478, white. Nothing here changes words. */

/* 0. The old FAQ embed carried this page-wide reset and every section was tuned under it. The FAQ is now the homepage
   hai-faq block, so the reset moves here unchanged to keep every other section exactly as it was. */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* 1. Type: desktop reads like 80% zoom (h1 60px, h2 36px from 1280px), page CSS only. */
html body h1, html body .miia-h1 { font-size: clamp(36px, 4.6vw, 60px); line-height: 1.04; letter-spacing: -.02em; }
html body h2 { font-size: clamp(26px, 2.8vw, 36px); line-height: 1.12; letter-spacing: -.01em; }
html body .miia-h1 .pm-type { display: block; margin-top: 10px; font-family: Cabinetgrotesk, "Cabinet Grotesk", Manrope, Arial, sans-serif; font-weight: 500;
  font-size: clamp(20px, 1.9vw, 26px); line-height: 1.2; letter-spacing: -.005em; text-wrap: balance; }
html body .section_miia-hero .hero-subtext { font-size: 18px; line-height: 1.55; max-width: 34rem; text-wrap: pretty; }
html body .miia-h1 .pm-sep { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* read as "Agent Pi: People Intelligence ..." */
html body .section_miia-hero .hm-label { display: none; } /* no eyebrows (AK) */
html body .section_miia-hero .hero-subtext a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
html body .section_miia-hero .hero-subtext a:hover { text-decoration-thickness: 2px; }

/* 2. Hero: tighter top, text block grouped (it was spread top to bottom of the animation box), logo line closer. */
html body .miia-hrro-left { justify-content: center; row-gap: 24px; }
html body section.section_miia-hero { padding-top: 88px; padding-bottom: 40px; }
html body .section_miia-hero .client-logos-wrap { margin-top: 40px; }
@media (max-width: 767px) {
  html body section.section_miia-hero { padding-top: 80px; padding-bottom: 24px; }
  html body .miia-hrro-left { row-gap: 12px; }
  html body .section_miia-hero .client-logos-wrap { margin-top: 24px; }
  html body .miia-h1 .pm-type { margin-top: 6px; }
}
/* Phone logo slider: same grey treatment as the desktop strip (the PNG marks were in full colour, one of them green). */
/* Oct 19 (A1, K-008): customer logos are never grey or faded; the strip is partials/hx-proof now. */
html body .splide__slide.clinet img { filter: none; opacity: 1; mix-blend-mode: normal; max-height: 40px; width: auto; }

/* 3. One section rhythm: 64px desktop, 40px phone. White neighbours (difference, why it matters, comparison) share less. */
html body .section_miia-tabs, html body .section_miia-difference, html body .section_miia-deals { padding-top: 64px; padding-bottom: 64px; }
html body .section_miia-tabs { background-image: none; background-color: #F6F4FF; padding-top: 32px; }
html body .section_miia-difference { padding-bottom: 32px; }
html body .section_miia-arch { padding-top: 32px; padding-bottom: 32px; background-color: #fff; }
html body #comparison { padding-bottom: 64px !important; }
html body .section_miia-deals { background-color: #FFF4D2; }
html body .section_miia-tabs .section-header, html body .section_miia-difference .section-header, html body .section_miia-deals .section-header { margin-bottom: 24px; }
@media (max-width: 767px) {
  html body .section_miia-tabs, html body .section_miia-difference, html body .section_miia-deals { padding-top: 40px; padding-bottom: 40px; }
  html body .section_miia-tabs { padding-top: 24px; }
  html body .section_miia-difference { padding-bottom: 24px; }
  html body .section_miia-arch { padding-top: 24px; padding-bottom: 24px; }
  html body #comparison { padding-bottom: 40px !important; }
}

/* 4. "Why it matters": the columns had a 132px gap between title and text plus dot textures. Now title, then text. */
html body .section_miia-arch .section-header.miia-arch { margin-bottom: 32px; }
html body .section_miia-difference .section-header.miia-arch { margin-bottom: 24px; }
html body .miia-arch-card, html body .miia-arch-card.is-yellow { row-gap: 8px; column-gap: 8px; background-image: none; padding: 4px 8px 4px 24px; justify-content: flex-start; }
html body .miia-arch-card .arch-card-title { font-size: 19px; line-height: 1.25; margin: 0; }
html body .miia-arch-card .arch-card-subtext { font-size: 15px; line-height: 1.55; color: #5B6478; margin: 0; }
html body .miia-arch-card .arch-card-subtext a { color: #110A33; }
@media (max-width: 767px) {
  html body .section_miia-arch .section-header.miia-arch { margin-bottom: 16px; }
  html body .miia-arch-card, html body .miia-arch-card.is-yellow { padding: 12px 0; }
}

/* 5. The Humantic AI Difference (seven product pages): the drawn flows sat in a 1328 x 500 box; 1328 x 400 fits them. */
@media (min-width: 992px) {
  html body .bas-wrapper.pm-bas { aspect-ratio: 1328 / 400; }
  html body .the-difference-header { margin-bottom: 12px; }
  html body .the-difference-header .the-diff-text { padding-top: 10px; padding-bottom: 10px; font-size: 17px; }
}
/* /miia keeps its architecture diagram images, a little smaller on wide screens */
@media (min-width: 1280px) { .section_miia-difference .hm-diff-component { max-width: 1180px; margin-left: auto; margin-right: auto; } }

/* 6. Stakes: shorter cards, no numbered decoration, one image size. */
@media (min-width: 992px) {
  html body .miia-deals-grid { max-width: 1180px; margin: 0 auto; }
  html body .miia-deal-card { padding-top: 32px; padding-bottom: 32px; }
  html body .miia-deal-card-middle { max-height: 340px; }
  html body .miia-deal-img { max-height: 340px; }
  html body .miia-deal-card-01, html body .miia-deal-card-03 { padding: 24px 28px; }
}
html body .miia-deal-list { list-style: none; padding-left: 0; margin: 12px 0 0; }
html body .miia-deal-item { position: relative; padding: 6px 0 6px 20px; color: #110A33; font-size: 16px; line-height: 1.45; }
html body .miia-deal-item::before { content: ""; position: absolute; left: 2px; top: 14px; width: 8px; height: 8px; border-radius: 50%; background: #FFC61E; }
html body .miis-deal-quote { font-size: 22px; line-height: 1.3; text-wrap: balance; }

/* 6a. The seven product pages drop /miia's stock photo (the same image sat on all eight pages): stakes and the
   opportunity now share one two-column card, /miia keeps its photo. */
html body .miia-deals-grid.pm-deals-2 { grid-template-columns: 1fr 1fr; max-width: 980px; margin: 0 auto; }
html body .pm-deals-2 .miia-deal-card { padding: 0; justify-content: stretch; }
html body .pm-deals-2 .miia-deal-card-01 { border-radius: 24px 0 0 24px; height: 100%; background: #fff; padding: 28px 32px; }
html body .pm-deals-2 .miia-deal-card-03 { border-radius: 0 24px 24px 0; height: 100%; background: #DDD6FF; padding: 28px 32px; justify-content: center; }
html body .pm-deals-2 .miis-deal-quote { font-size: 26px; line-height: 1.25; }
@media (max-width: 767px) {
  html body .miia-deals-grid.pm-deals-2 { grid-template-columns: 1fr; }
  html body .pm-deals-2 .miia-deal-card-01 { border-radius: 24px 24px 0 0; padding: 20px; }
  html body .pm-deals-2 .miia-deal-card-03 { border-radius: 0 0 24px 24px; padding: 20px; }
  html body .pm-deals-2 .miis-deal-quote { font-size: 21px; }
}

/* 6c. /miia plans on phones: the three plan cards stacked to about 3,000px. They now sit in a swipe row (one card
   plus a peek of the next), so the section is about one card tall. Words and links unchanged. */
@media (max-width: 767px) {
  html body .price_tab-grid { display: flex !important; align-items: flex-start; gap: 12px;
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; padding: 4px 4px 16px; scrollbar-width: thin; }
  html body .price_tab-grid > .price-tab-col { flex: 0 0 86%; scroll-snap-align: start; min-width: 0; }
  html body .price_tab-grid .price-card { justify-content: flex-start; }
}
/* Trust badges on phones: all five on one row instead of three and a lone two. */
@media (max-width: 767px) {
  html body .badges-wrapper.is-five { flex-wrap: nowrap; gap: 6px; padding-left: 8px; padding-right: 8px; }
  html body .badges-wrapper.is-five > * { flex: 1 1 0; max-width: none; }
  html body .badges-wrapper.is-five .badge-image, html body .badges-wrapper.is-five .badge-image.is-indiana, html body .badges-wrapper.is-five .badge-image.is-trust { height: 48px; }
  html body .badges-wrapper.is-five .text-block-4 { font-size: 12px; }
}

/* Phone and tablet tap targets: slider dots keep their look but get a 44px tall hit area; the email field in the
   "Three ways" block is 16px so iOS does not zoom; the animation pause button is 40px on phones. */
@media (max-width: 991px) {
  html body .splide__pagination__page { position: relative; }
  html body .splide__pagination__page::after { content: ""; position: absolute; left: -4px; right: -4px; top: 50%; height: 44px; transform: translateY(-50%); }
  html body input.cta-email { font-size: 16px; }
}
/* Oct 19: touch tablets wider than 991px (an iPad in landscape) get the same 44px tall dot area */
@media (pointer: coarse) and (min-width: 992px) {
  html body .splide__pagination__page { position: relative; }
  html body .splide__pagination__page::after { content: ""; position: absolute; left: -4px; right: -4px; top: 50%; height: 44px; transform: translateY(-50%); }
}
@media (max-width: 767px) {
  html body .hxa-pause { width: 40px; height: 40px; right: 8px; bottom: 8px; }
  html body .hxa-pause::after { inset: -2px; }
}

/* 6b. Top-performer slider: every slide heading on the h2 scale, every result line the same size. */
html body .section_miia-result .miia-card.is-2 .miia-slider-header-middle { font-size: clamp(26px, 2.8vw, 36px); line-height: 1.12; }
@media (min-width: 768px) { html body .section_miia-result .miia-quote-heading { font-size: 22px; line-height: 1.25; } }

/* 7. Tabs: the arc layout stays (it is Miia's); less air above and below it. */
html body .miia_tab-component .section-header { margin-bottom: 20px; }
html body .miia-tabs { margin-bottom: 16px; }
html body .button-group.is-center-miia { margin-top: 8px; }

/* 8. Testimonial slider: quote at 36px on desktop to match the h2 scale. */
@media (min-width: 992px) {
  html body .section_testimonials.home-tml .tml-card { height: 500px; }
  html body .section_testimonials.home-tml .tml-text { font-size: 36px; }
  html body .section_testimonials.home-tml .tml-metric-value { font-size: 40px; }
  html body .section_testimonials.home-tml .tml-client-mugshot img { max-height: 470px; }
}

/* 9. FAQ (homepage hai-faq pattern): a touch less air before the footer. */
html body section.hai-faq#faqs:not(.hai-faq--mist):not(.hai-faq--cream) { background: #fff; } /* Oct 20: faqTone mist / cream wins */

/* 9b. CTAs read as written ("Start free trial", "Book a demo"), matching the nav and footer, not Title Cased by CSS. */
html body .section_miia-hero .cta-text-01, html body .section_miia-hero .cta-text-02,
html body .section_miia-tabs .cta-text-01, html body .section_miia-tabs .cta-text-02,
html body .section_pricing .cta-text-01, html body .section_pricing .cta-text-02 { text-transform: none; }

/* 10. Wrapping: no lone last words. */
html body .miia-h1, html body .section-header h2, html body .miia-slider-header-middle, html body .result_main-heading, html body .miia-compare-h2, html body .deals-h2 { text-wrap: balance; }
html body .miia-deal-item, html body .arch-card-subtext, html body .miia-tab-card p, html body .hero-subtext { text-wrap: pretty; }

/* 11. SHARED TYPE TOKENS (AK Oct 20: "every heading, subheading and body must be the same size, weight, colour, style and font").
   ONE set, used by /miia and the seven template pages (the only pages that load this file). Change a value here and every
   section heading, sub-line, card heading and body line on those eight pages follows. The hero has its own token set in
   hero-template.css (80/32/20 on desktop, 40/24/18 on phones).
     H2 section heading : Cabinet Grotesk 700, 26 to 36px fluid, line-height 1.12, -0.01em, ink, centred, balanced
     Sub-line (under H2): Manrope 400, 18px (16px phones), line-height 1.55, slate, centred, max 40rem
     Card heading (H3)  : Cabinet Grotesk 700, 20px, line-height 1.25, ink
     Body               : Manrope 400, 16px, line-height 1.6, slate (ink when it is the main message)
   Not on the tokens by design: the FAQ question rows (homepage hai-faq pattern), the dark testimonial band (its own quote scale),
   the pull-quote headings inside /miia's tab arc. */
:root { --hx-font-head: Cabinetgrotesk, "Cabinet Grotesk", Manrope, Arial, sans-serif; --hx-font-body: Manrope, Arial, sans-serif;
  --hx-h2-size: clamp(26px, 2.8vw, 36px); --hx-h2-lh: 1.12; --hx-h2-ls: -.01em; --hx-h2-wt: 700;
  --hx-sub-size: 18px; --hx-sub-lh: 1.55; --hx-h3-size: 20px; --hx-h3-lh: 1.25; --hx-body-size: 16px; --hx-body-lh: 1.6;
  --hx-ink: #110A33; --hx-slate: #5B6478; }
@media (max-width: 767px) { :root { --hx-sub-size: 16px; --hx-h3-size: 19px; } }
/* H2 */
html body .section-header h2, html body .pmt-head h2, html body .hxb-h2w, html body .is_price-heading, html body section.hai-faq .hai-faq__h, html body .hxc-h2 {
  font-family: var(--hx-font-head); font-size: var(--hx-h2-size); line-height: var(--hx-h2-lh); letter-spacing: var(--hx-h2-ls); font-weight: var(--hx-h2-wt); color: var(--hx-ink); text-align: center; text-wrap: balance; }
/* Sub-line under an H2 */
html body .section-subtext, html body .section-subtext.is-arch-subtext, html body .hxb.hxb .hxb-sub, html body .pmt-head p {
  font-family: var(--hx-font-body); font-size: var(--hx-sub-size); line-height: var(--hx-sub-lh); font-weight: 400; color: var(--hx-slate); text-align: center; max-width: 40rem; margin-left: auto; margin-right: auto; text-wrap: pretty; }
/* Card heading */
html body .miia-arch-card .arch-card-title, html body .pmt-points b, html body .hxc-txt h3 {
  font-family: var(--hx-font-head); font-size: var(--hx-h3-size); line-height: var(--hx-h3-lh); font-weight: 700; letter-spacing: -.005em; color: var(--hx-ink); text-wrap: balance; }
/* Body */
html body .miia-arch-card .arch-card-subtext, html body .pmt-points li > span > span, html body .hxc-txt p, html body section.hai-faq .hai-faq__a p {
  font-family: var(--hx-font-body); font-size: var(--hx-body-size); line-height: var(--hx-body-lh); font-weight: 400; color: var(--hx-slate); text-wrap: pretty; }
html body .hxc-card--try .hxc-txt p { color: var(--hx-ink); }

/* 12. Boxed "Why ..." rows (Krish review Oct 20, O20-014 /miia, O20-023 /pi; same row on /humanmail and /enrichments):
   "text is floating in the air, put it in a box". One panel holds the whole row (not five separate cards): thin lavender
   dividers between the columns, title then line, full-strength slate text. White panel on a mist band, mist panel on a white
   band. Opt-in: class is-boxed (views/webflow-miia.ejs for /miia; constants arch.boxed for the template pages). */
html body .miia_arch.is-boxed { gap: 0; padding: 0; overflow: hidden; border: 1px solid #DDD6FF; border-radius: 24px; background: #fff; box-shadow: 0 2px 8px rgba(17,10,51,.08); }
html body .pmt-tone-white .miia_arch.is-boxed { background: #F6F4FF; box-shadow: none; }
html body .miia_arch.is-boxed .miia-arch-card, html body .miia_arch.is-boxed .miia-arch-card.is-yellow { gap: 8px; padding: 24px; border: 0; border-left: 1px solid #DDD6FF; background: none; }
html body .miia_arch.is-boxed .miia-arch-card:first-child { border-left: 0; }
/* Webflow pins the fifth card with an id rule (#w-node-..., span 2 on tablet); inside the box every card takes the next cell */
html body .miia_arch.is-boxed > .miia-arch-card { grid-area: auto !important; }
html body .miia_arch.is-boxed .arch-card-title { color: #110A33; }
html body .miia_arch.is-boxed .arch-card-subtext { opacity: 1; color: #5B6478; }
/* Tablet: one row per item inside the box (title left, line right), so five items never leave one alone on a row */
@media (min-width: 768px) and (max-width: 991px) {
  html body .miia_arch.is-boxed { grid-template-columns: minmax(0, 1fr); }
  html body .miia_arch.is-boxed .miia-arch-card, html body .miia_arch.is-boxed .miia-arch-card.is-yellow { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: baseline; gap: 16px; padding: 16px 24px; border-left: 0; border-top: 1px solid #DDD6FF; }
  html body .miia_arch.is-boxed .miia-arch-card:first-child { border-top: 0; }
}
/* Phones: stacked, title then line */
@media (max-width: 767px) {
  html body .miia_arch.is-boxed { grid-template-columns: minmax(0, 1fr); border-radius: 20px; }
  html body .miia_arch.is-boxed .miia-arch-card, html body .miia_arch.is-boxed .miia-arch-card.is-yellow { gap: 4px; padding: 16px 20px; border-left: 0; border-bottom: 0; border-top: 1px solid #DDD6FF; }
  html body .miia_arch.is-boxed .miia-arch-card:first-child { border-top: 0; }
}
/* MOBILE-B (Oct 21): "Why it matters" facts sit two to a row on phones (odd last one spans) */
@media (max-width: 767px) {
  html body .miia_arch.is-boxed { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html body .miia_arch.is-boxed .miia-arch-card, html body .miia_arch.is-boxed .miia-arch-card.is-yellow { gap: 2px; padding: 12px 14px; border-left: 0; border-top: 1px solid #DDD6FF; }
  html body .miia_arch.is-boxed .miia-arch-card:nth-child(odd) { border-right: 1px solid #DDD6FF; }
  html body .miia_arch.is-boxed .miia-arch-card:nth-child(-n+2) { border-top: 0; }
  html body .miia_arch.is-boxed .miia-arch-card:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: 0; }
  html body .miia_arch.is-boxed .arch-card-title { font-size: 16px; line-height: 1.25; }
  html body .miia_arch.is-boxed .arch-card-subtext { font-size: 13.5px; line-height: 1.4; }
}
@media (max-width: 359px) {
  html body .miia_arch.is-boxed { grid-template-columns: minmax(0, 1fr); }
  html body .miia_arch.is-boxed .miia-arch-card:nth-child(odd) { border-right: 0; }
  html body .miia_arch.is-boxed .miia-arch-card:nth-child(2) { border-top: 1px solid #DDD6FF; }
}

/* MOBILE-B (Oct 21): slightly tighter reading sizes on phones for the product pages (still 15px+ body) */
@media (max-width: 767px) {
  :root { --hx-sub-size: 15px; --hx-sub-lh: 1.45; --hx-body-size: 15px; --hx-body-lh: 1.5; --hx-h3-size: 18px; --hx-h2-size: 26px; }
}

/* ===== ORIGINAL PRODUCT-PAGE RATIOS (Oct 22, Amar: "same font sizes, ratios, spacing as the old site; it has to scale right with device") =====
   Source: old humantic.ai /miia (git HEAD views/webflow-miia.ejs + public/webflow/css/humantic.webflow.shared.*.css), measured live with
   getComputedStyle at 1280x720, 1440x900 and 1512x982. The old product page used FIXED rem sizes (no vw, no JS): H2 50/60 (500), section
   sub-line 20/26, card title 20/26, body 16/24, section padding 60px top and bottom, section header gap 32px, container 83rem (1328px).
   Tablet (768 to 991px) steps down to H2 40/48 and 48px sections; phones (<=767px) are NOT touched by this block (they keep the
   MOBILE-B values above). To also scale with the window and browser zoom, type is a clamp() whose top value is the old size and whose
   vw term reaches it at about 1280px; vertical padding is a vh-based clamp() with the old 60px as its top. Pure CSS: no JS, no scroll moves.
   Backup of the file before this block: 04-build/backups/oct22-sonnet-ratios/pm-clean.css */
@media (min-width: 768px) {
  :root {
    --hx-h2-size: clamp(40px, 3.9vw, 50px); --hx-h2-lh: 1.2; --hx-h2-ls: normal; --hx-h2-wt: 500;
    --hx-sub-size: clamp(18px, 1.56vw, 20px); --hx-sub-lh: 1.3;
    --hx-h3-size: 20px; --hx-h3-lh: 1.3;
    --hx-body-size: 16px; --hx-body-lh: 1.5;
    --hx-sec-y: var(--hx-frame-y, 64px);   /* Oct 28 (AK, normal scroll): the shared frame rhythm from shell.css, no vh (was clamp(44px, 8.4vh, 60px)) */
    --hx-head-gap: 32px;                    /* old .section-header margin-bottom 2rem */
  }
  /* H2: the shared token rule sets everything but the family and the h2s with their own rules */
  html body .section-header h2, html body .pmt-head h2, html body .hxb-h2w, html body .is_price-heading, html body .hxc-h2 { letter-spacing: var(--hx-h2-ls); }
  html body section.hai-faq.hai-faq .hai-faq__h.hai-faq__h { font-size: clamp(36px, 3.5vw, 45px) !important; line-height: 1.2 !important; font-weight: 500 !important; letter-spacing: normal !important; margin-bottom: var(--hx-head-gap) !important; } /* old FAQ H2 was 45px */
  html body .miia-arch-card .arch-card-title, html body .pmt-points b, html body .hxc-txt h3 { letter-spacing: normal; }
  /* Section rhythm: the old 60px top and bottom on every band (was 32 to 64 mixed) */
  html body .section_miia-tabs, html body .section_miia-difference, html body .section_miia-deals, html body .section_miia-arch,
  html body .section_miia-table, html body .section_pricing { padding-top: var(--hx-sec-y); padding-bottom: var(--hx-sec-y); }
  html body #comparison, html body.pmt #comparison, html body .pin + #comparison { padding-top: var(--hx-sec-y) !important; padding-bottom: var(--hx-sec-y) !important; }
  html body section.hai-faq.hai-faq.hai-faq { padding-top: 80px !important; padding-bottom: 80px !important; }  /* old FAQ band 80px (Oct 28: fixed, was a vh clamp for one-screen fitting) */
  html body .hxc { padding-top: var(--hx-sec-y); padding-bottom: var(--hx-sec-y); }
  /* Heading to content gap: the old .section-header margin-bottom (32px) */
  html body .section-header, html body .section_miia-tabs .section-header, html body .section_miia-difference .section-header,
  html body .section_miia-deals .section-header, html body .section_miia-arch .section-header.miia-arch,
  html body .section_miia-difference .section-header.miia-arch { margin-bottom: var(--hx-head-gap); }
  html body .section_miia-tabs .miia_tab-component .section-header { margin-bottom: 20px; } /* the tab arc keeps its own tighter head (section 7) */
  html body .hxb.hxb .hxb-sub { margin-bottom: var(--hx-head-gap); }
  /* Card text: old arch subtext 16/24 */
  html body .miia-arch-card .arch-card-subtext { line-height: var(--hx-body-lh); }
}
@media (min-width: 768px) and (max-width: 991px) {
  :root { --hx-h2-size: 40px; --hx-sub-size: 18px; --hx-sec-y: var(--hx-frame-y, 48px); --hx-head-gap: 28px; }  /* old tablet: H2 2.5rem, sections 3rem */
  html body section.hai-faq.hai-faq .hai-faq__h.hai-faq__h { font-size: 36px !important; }
}
/* Oct 28 (AK): normal scroll on every page. The Oct 22 rule that made every product-page section at least one screen tall
   (min-height:100vh, for slide paging) is removed: sections are as tall as their content, on the shared frame rhythm.
   Backup: 04-build/backups/oct28-opus-f1/public/v2/product-pages/pm-clean.css */

/* AK Nov 4 (also /miia, the Webflow page: section.section_miia-hero.is-a3): product heroes copy the home hero (views/hp2-hero-rep.ejs): a 1200px frame with 24px sides, the H1 at clamp(40px, 5.2vw, 72px)
   / 1.04 in 700, the line under it at clamp(18px, 1.6vw, 22px) / 1.45 in 600, words up to 560px wide; two even columns, and the right-hand
   visual in one standard box on every page (same width, same height), so no page runs wider or taller than another. */
html body :is(.pmt section.pmt-hero, section.section_miia-hero.is-a3) .padding-global { padding-left: 0; padding-right: 0; }
html body :is(.pmt section.pmt-hero, section.section_miia-hero.is-a3) .container-large { max-width: 1200px; margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; }
html body :is(.pmt section.pmt-hero, section.section_miia-hero.is-a3) .miia_hero-component { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 40px; align-items: center; }
html body :is(.pmt section.pmt-hero, section.section_miia-hero.is-a3) .miia-hrro-left { width: auto; max-width: none; }
html body :is(.pmt section.pmt-hero, section.section_miia-hero.is-a3) h1.miia-h1 { max-width: 560px; margin: 0; font-family: Cabinetgrotesk, "Cabinet Grotesk", Arial, sans-serif; font-size: clamp(40px, 5.2vw, 72px) !important; font-weight: 700; line-height: 1.04; letter-spacing: -.02em; text-wrap: balance; }
html body :is(.pmt section.pmt-hero, section.section_miia-hero.is-a3) .pmt-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html body :is(.pmt section.pmt-hero, section.section_miia-hero.is-a3) .hxh-line { max-width: 560px; margin: 0; font: 600 clamp(18px, 1.6vw, 22px)/1.45 Manrope, Arial, sans-serif !important; color: #110A33; text-wrap: pretty; }
html body :is(.pmt section.pmt-hero, section.section_miia-hero.is-a3) .miia-hero-right { width: 100%; max-width: none; }
html body :is(.pmt section.pmt-hero, section.section_miia-hero.is-a3) .miia-hero-right > .miia-hero-lottie, html body :is(.pmt section.pmt-hero, section.section_miia-hero.is-a3) .miia-hero-right > .pmt-hero-video { width: 100%; min-height: clamp(320px, 31vw, 440px); }
@media (max-width: 899px) {
  html body :is(.pmt section.pmt-hero, section.section_miia-hero.is-a3) .miia_hero-component { grid-template-columns: minmax(0, 1fr); }
  html body :is(.pmt section.pmt-hero, section.section_miia-hero.is-a3) h1.miia-h1, html body :is(.pmt section.pmt-hero, section.section_miia-hero.is-a3) .hxh-line { max-width: none; }
  html body :is(.pmt section.pmt-hero, section.section_miia-hero.is-a3) .miia-hero-right > .miia-hero-lottie, html body :is(.pmt section.pmt-hero, section.section_miia-hero.is-a3) .miia-hero-right > .pmt-hero-video { height: auto; min-height: 300px; }
}
/* AK Nov 4: /miia's hero visual (.hxh-box) sits in the same standard box as the other product pages */
html body section.section_miia-hero.is-a3 .miia-hero-right > .hxh-box { width: 100%; min-height: clamp(320px, 31vw, 440px); display: flex; align-items: center; justify-content: center; }
@media (max-width: 899px) { html body section.section_miia-hero.is-a3 .miia-hero-right > .hxh-box { min-height: 300px; } }
/* AK Nov 4 (round 2): the headline and the line under it never run past 3 lines (2 where they fit), and the customer logos stay in the
   first screen, as on the home page. So the words get the wider column (1.2 : .8), the visual a smaller box that also shrinks on short
   screens, and partials/hx-frame trims the hero padding (never pushes the logos out). */
@media (min-width: 900px) { html body :is(.pmt section.pmt-hero, section.section_miia-hero.is-a3) .miia_hero-component { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); } }
html body :is(.pmt section.pmt-hero, section.section_miia-hero.is-a3) h1.miia-h1, html body :is(.pmt section.pmt-hero, section.section_miia-hero.is-a3) .hxh-line { max-width: 680px; }
html body :is(.pmt section.pmt-hero, section.section_miia-hero.is-a3) .miia-hero-right > :is(.miia-hero-lottie, .pmt-hero-video, .hxh-box) { min-height: 0; height: clamp(260px, calc(100svh - 360px), 400px); }
@media (max-width: 899px) { html body :is(.pmt section.pmt-hero, section.section_miia-hero.is-a3) .miia-hero-right > :is(.miia-hero-lottie, .pmt-hero-video, .hxh-box) { height: auto; min-height: 280px; } }
/* AK Nov 4 (round 3): the "nowhere else" tiles stay inside the standard content width (1200px frame, 24px sides: 1152px), one even
   column per tile, centred (/miia had a 5-column grid with 4 tiles, leaving a gap on the right) */
@media (min-width: 992px) {
  html body .miia_arch.is-boxed { max-width: 1152px; margin-left: auto; margin-right: auto; grid-template-columns: repeat(var(--arch-n, 4), minmax(0, 1fr)); }
  html body .miia_arch.is-boxed:has(> :nth-child(3):last-child) { --arch-n: 3; }
  html body .miia_arch.is-boxed:has(> :nth-child(5)) { --arch-n: 5; }
  html body .miia_arch.is-boxed > .miia-arch-card { grid-column: auto !important; grid-row: auto !important; }
}

/* AK Nov 4 (round 4, Amar's standing rules): on desktop every section after the hero and its logo strip fills one screen, content centred;
   section headings get the full content width so they sit on one line */
@media (min-width: 900px) and (min-height: 600px) {
  /* Nov 5 hero fix: :not(section section) keeps this to page sections. The /pi hero animation's six dashboard cards are <section>s
     too, so without it each card became a 100svh-tall grid and the hero showed a blank white strip (same guard as start.css / solutions-hub.css). */
  html body:is(.pmt, .pm-miia) section:not(.pmt-hero):not(.section_miia-hero):not(.hxp):not(#proof):not(.hxcta):not(.tn):not(section section) { min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; box-sizing: border-box; }
  html body:is(.pmt, .pm-miia) section :is(.section-header, .pmt-head, .pd-head, .pjr__head) { max-width: 1152px !important; }
  html body:is(.pmt, .pm-miia) section :is(.section-header, .pmt-head, .pd-head, .pjr__head) h2 { max-width: none !important; }
}
/* AK Nov 4: a media block with points is two columns: the copy and its CTA on the left, the visual on the right */
html body .pmt-media-l { display: grid; gap: 20px; align-content: center; }
html body .pmt-media-l .pmt-points { margin: 0; }
html body .pmt-media-cta { margin: 4px 0 0; }
/* AK Nov 4 (round 5): the hero visual keeps its own shape (no forced square box with empty space under it); it is capped in height so
   the logos stay in the first screen, and a taller one is scaled to fit the cap (product-miia.ejs) */
html body :is(.pmt section.pmt-hero, section.section_miia-hero.is-a3) .miia-hero-right > :is(.miia-hero-lottie, .pmt-hero-video, .hxh-box) { height: auto !important; min-height: 0 !important; max-height: clamp(260px, calc(100svh - 360px), 440px); }
/* Nov 5 hero fix (/miia, Amar Nov 4 "it's cut off... has some empty space"): the /miia box still carried the old 592:324 ratio from
   hero-template.css, so in the narrower .8fr column it was 243px tall while the report card needs ~320px. The card was cut at the bottom,
   its tab bar collapsed to 0px and the box sat short with empty space around it. The box now takes the card's own height (under the cap above). */
html body section.section_miia-hero.is-a3 .miia-hero-right > .hxh-box { aspect-ratio: auto; max-width: none; }

/* Nov 5 hero restore (AK: "the hero animations are still broken"). Since Nov 4 (round 2: words 1.2 : visual .8 in a 1152px row) every
   product hero animation was scaled into a 445px box, so its words read at 7 to 9px; up to Nov 3 the same animations drew at about 1:1
   (canvas px = screen px, nothing under 12px). CHANGES AMAR'S HERO SPLIT, the smallest change that brings the words back to about 11px
   while keeping his rules (headline and line never past 3 lines, logos in the first screen, one box size on every product page):
   1. the hero frame lines up with the nav's inner edges (logo to last button: 1202px) instead of 1152px, so 25px more on each side;
   2. the words column is never narrower than the longest headline needs for 3 lines (Visitor ID: 620px at the 72px size), and the
      visual takes the rest, up to 560px (was a fixed .8 share). Same idea as Amar's Nov 5 role and Teams heroes (words 560px, visual
      the rest, about 536px).
   1440 and 1280: words 620px, visual 542px (was 667 / 445). Only from 1200px wide: below that his 1.2 : .8 split stays (a narrower
   words column there would push 2-line headlines to 3 and the logos under the fold), and phones and tablets are untouched.
   Trade-off: at 1280 the Account Research, HumanMail Agent and Buyer Signals headlines now take 3 lines (were 2); none takes more than 3.
   Backup: 04-build/backups/heroes-restore-nov05/public/v2/product-pages/pm-clean.css */
@media (min-width: 1200px) {
  html body :is(.pmt section.pmt-hero, section.section_miia-hero.is-a3) .container-large { max-width: 1250px; }
  html body :is(.pmt section.pmt-hero, section.section_miia-hero.is-a3) .miia_hero-component { grid-template-columns: minmax(620px, 1fr) minmax(0, 560px); }
}
/* Very short laptop windows (under 640px tall): the cap above drops to 260px, shorter than the /miia report card (it was cut 27px at
   the bottom at 1024x600; nothing scales it down, unlike the HumanMail Agent email). There the logos are under the fold anyway. */
@media (min-width: 900px) and (max-height: 640px) {
  html body section.section_miia-hero.is-a3 .miia-hero-right > .hxh-box { max-height: none; }
}
/* Nov 5 hero restore: Amar's round-5 height cap (above, so the logos stay in the first screen) also applied on phones and tablets,
   where nothing scales the animation down to fit it (the fit in product-miia.ejs runs from 900px). So under 900px the HumanMail Agent
   email, and on short phones the Buyer Signals, Data Streams, Intent Scoring and Context Enrich animations, were cut off at the bottom
   by 18 to 59px. Under 900px the hero visual keeps its own full height again, as it did up to Nov 3. */
@media (max-width: 899px) {
  html body :is(.pmt section.pmt-hero, section.section_miia-hero.is-a3) .miia-hero-right > :is(.miia-hero-lottie, .pmt-hero-video, .hxh-box) { max-height: none; }
}

/* Nov 5 (AK, Amar + Krish at 47:13): /miia "Account Research You Can't Get Anywhere Else" sits in a full-height white band, so the empty space
   around four small cards read as a gap. The content now sits in a brand panel (mist, hairline lavender border, 24px corners) on white, so the
   space around it reads as the frame. Content, copy and the four cards are unchanged. /miia only (body.pm-miia; the template pages keep their look). */
html body.pm-miia .section_miia-arch.miia-arch--top { background-color: #fff; }
html body.pm-miia .section_miia-arch.miia-arch--top > .padding-global { padding-left: 24px; padding-right: 24px; }
html body.pm-miia .section_miia-arch.miia-arch--top .container-large { box-sizing: border-box; max-width: 1200px; margin-left: auto; margin-right: auto; padding: 48px 40px 56px; border: 1px solid #DDD6FF; border-radius: 24px; background-color: #F6F4FF; }
@media (max-width: 899px) { html body.pm-miia .section_miia-arch.miia-arch--top .container-large { padding: 32px 20px 36px; } }
@media (max-width: 479px) { html body.pm-miia .section_miia-arch.miia-arch--top > .padding-global { padding-left: 16px; padding-right: 16px; } html body.pm-miia .section_miia-arch.miia-arch--top .container-large { padding: 28px 12px 28px; } }
/* Nov 5 late (AK, colours only): the outer box goes LIGHT YELLOW (brand cream #FFF4D2, which reads cleaner than gold 300 under the
   heading; a gold 300 hairline keeps its edge on the white band) and the 4 inner cards go LAVENDER #DDD6FF with ink text (slate on lavender
   is only about 4.4:1, so the lines are ink at 82%). The lines between the cards take the cream, so they read as four cards. Nothing else
   changes: sizes, spacing, copy and layout are as they were. */
html body.pm-miia .section_miia-arch.miia-arch--top .container-large { background-color: #FFF4D2; border-color: #FFE8A5; }
html body.pm-miia .section_miia-arch.miia-arch--top .miia_arch.is-boxed { background: #DDD6FF; border-color: #DDD6FF; }
html body.pm-miia .section_miia-arch.miia-arch--top .miia_arch.is-boxed .miia-arch-card,
html body.pm-miia .section_miia-arch.miia-arch--top .miia_arch.is-boxed .miia-arch-card.is-yellow { background: #DDD6FF; border-color: #FFF4D2; border-width: 2px; }   /* only the sides that already draw a divider show it */
html body.pm-miia .section_miia-arch.miia-arch--top .miia_arch.is-boxed .arch-card-title { color: #110A33; }
html body.pm-miia .section_miia-arch.miia-arch--top .miia_arch.is-boxed .arch-card-subtext { color: rgba(17,10,51,.82); }
html body.pm-miia .section_miia-arch.miia-arch--top .miia_arch.is-boxed .arch-card-subtext a { color: #110A33; }

/* Nov 6 (AK: "do it on all the product pages where this UI is there, colour changes only"): the same cream panel + lavender cards as
   /account-research-agent above, on every template product page whose "...You Can't Get Anywhere Else" section is the same boxed
   4-card row (People Research Agent, HumanMail Agent, Visitor ID, Intent Scoring, Buyer Signals, Context Enrich). Pages without that
   row (Data Streams) are untouched. Copy, card sizes and layout are unchanged. Backup: 04-build/backups/nov06-arch-colours/ */
html body.pmt .section_miia-arch:has(> .padding-global > .container-large > .miia_arch.is-boxed) { background-color: #fff; }
html body.pmt .section_miia-arch:has(> .padding-global > .container-large > .miia_arch.is-boxed) > .padding-global { padding-left: 24px; padding-right: 24px; }
html body.pmt .section_miia-arch:has(> .padding-global > .container-large > .miia_arch.is-boxed) .container-large { box-sizing: border-box; max-width: 1200px; margin-left: auto; margin-right: auto; padding: 48px 40px 56px; border: 1px solid #FFE8A5; border-radius: 24px; background-color: #FFF4D2; }
@media (max-width: 899px) { html body.pmt .section_miia-arch:has(> .padding-global > .container-large > .miia_arch.is-boxed) .container-large { padding: 32px 20px 36px; } }
@media (max-width: 479px) { html body.pmt .section_miia-arch:has(> .padding-global > .container-large > .miia_arch.is-boxed) > .padding-global { padding-left: 16px; padding-right: 16px; } html body.pmt .section_miia-arch:has(> .padding-global > .container-large > .miia_arch.is-boxed) .container-large { padding: 28px 12px 28px; } }
html body.pmt .section_miia-arch .miia_arch.is-boxed { background: #DDD6FF; border-color: #DDD6FF; }
html body.pmt .section_miia-arch .miia_arch.is-boxed .miia-arch-card,
html body.pmt .section_miia-arch .miia_arch.is-boxed .miia-arch-card.is-yellow { background: #DDD6FF; border-color: #FFF4D2; border-width: 2px; }
html body.pmt .section_miia-arch .miia_arch.is-boxed .arch-card-title { color: #110A33; }
html body.pmt .section_miia-arch .miia_arch.is-boxed .arch-card-subtext { color: rgba(17,10,51,.82); }
html body.pmt .section_miia-arch .miia_arch.is-boxed .arch-card-subtext a { color: #110A33; }

/* Nov 5 fix3 (AK: "the hero animations are STILL broken" on /people-research-agent, /visitor-id, /intent-scoring, /humanmail-agent).
   Root cause, seen on real short laptop windows (a 1366x768 or 1536x864 screen at 125% leaves the page about 600-700px of height):
   the frame above is capped at clamp(260px, 100svh - 360px, 440px), but the animation inside it kept its width-driven height (e.g. 310px
   for People Research Agent, 344px for Intent Scoring), so the bottom was cut, and the zoom in product-miia.ejs then shrank the already
   scaled drawing into the frame's top-left corner: 68-148px of empty frame on the right, 8px cut at the bottom, the pause disc floating
   off the card. ONE shared fit for every fixed-size hero animation (run.js marks them .hxa--fixed and passes the drawing's own aspect
   ratio as --hxa-ar): the frame takes the drawing's shape. Its height is still the same cap (logos stay in the first screen), its width
   is the cap times the drawing's ratio, never wider than the column, and it sits on the column's right edge (the nav's right edge).
   The drawing then fills the frame exactly at every size, like the Nov 3 heroes and /account-research-agent. Phones and tablets
   (under 900px) were already right and are untouched. Backup: 04-build/backups/heroes-fix3-nov05/ */
@media (min-width: 900px) {
  html body.pmt section.pmt-hero .miia-hero-right > .miia-hero-lottie.hxa.hxa--fixed {
    --hxa-cap: clamp(260px, calc(100svh - 360px), 440px);
    width: min(100%, calc((var(--hxa-cap) - 2px) * var(--hxa-ar) + 2px));
    max-height: none;
    margin-left: auto;
    margin-right: 0;
    overflow: hidden;
  }
}
/* Same pass: on very short windows (under 640px tall) the cap above drops to 260px and every drawing would shrink to about 0.7 (text near
   8px). There the logos are under the fold anyway, so the product heroes do what /account-research-agent already does at that height
   (block "Very short laptop windows" above): the visual keeps its full column size (cap 440px), text about 11-12px. */
@media (min-width: 900px) and (max-height: 640px) {
  html body.pmt section.pmt-hero .miia-hero-right > .miia-hero-lottie.hxa { max-height: 440px; }
  html body.pmt section.pmt-hero .miia-hero-right > .miia-hero-lottie.hxa.hxa--fixed { --hxa-cap: 440px; max-height: none; }
}
/* Same pass (review set, better-accessibility): the pause disc now sits on the white card on every product hero, where the shared gold focus
   ring (product-miia.css) is about 1.6:1 against white. Ink ring with a white gap, as /buyer-signals already uses (WCAG 2.4.11). */
html body.pmt section.pmt-hero .hxa-pause:focus-visible { opacity: 1; outline: 2px solid #110A33; outline-offset: 2px; box-shadow: 0 0 0 2px #fff; }

/* AK Nov 7: the "...You Can't Get Anywhere Else" heading on the template product pages (People Research Agent, Visitor ID, Intent Scoring,
   Buyer Signals, Context Enrich) rendered at the template's 40 to 50px in weight 500, lighter and larger than the same heading on
   /account-research-agent (views/webflow-miia.ejs sets 26 to 36px, 700, line-height 1.12, -0.01em from 768px up). Same values here, for this
   heading only, so the row reads the same on every product page. Phones already match (26px, 700). Backup: 04-build/backups/nov07-product-tours/ */
@media (min-width: 768px) {
  html body.pmt .section_miia-arch .section-header.miia-arch h2 { font-size: clamp(26px, 2.8vw, 36px); line-height: 1.12; letter-spacing: -.01em; font-weight: 700; }
}