/* Product-page HERO TEMPLATE (Krish review, AK Oct 19; built on /miia by A3). Spec: 04-build/feedback/krish-review-oct19/HERO-TEMPLATE.md.
   The old live humantic.ai/account-research-agent hero proportions (measured with getComputedStyle, Oct 19): H1 80/88 Cabinet Grotesk,
   subline 32/38.4 Manrope 500, one line 20/30, pill CTA 50px, a framed box on the right of 592 x 324 at 1280
   (aspect 592 / 324) with a thin lavender line. Phones: H1 40/44, subline 24/28.8, line 18/27, centred.
   Brand: ink #110A33 text, gold #FFC61E primary pill, white + violet-tint line for the box. No eyebrow.
   ONE SOURCE OF TRUTH (AK Oct 20): /miia (views/webflow-miia.ejs) AND the seven pages on views/v2/product-miia.ejs
   (/pi /humanmail /vidar /intent /signals /streams /enrichments) load this file and use the same classes, so H1, type line,
   zing line, column start and column width are identical everywhere. Do not set hero type anywhere else.
   Markup it styles (Webflow hero structure shared by /miia and views/v2/product-miia.ejs):
     section.section_miia-hero.hxh > .padding-global > .container-large > .miia_hero-component
       .miia-hrro-left  > h1.miia-h1 (Name<span class="pm-sep">: </span><span class="pm-type">Category subline</span>)
                        > p.hxh-line (one short line, <b> on the number)
                        > .hxh-ctas > a.button (Start free trial) + a.hxh-demo (Book a demo)
       .miia-hero-right > .hxh-box > (the product's one small animation) */
html body section.section_miia-hero.hxh { padding-top:112px; padding-bottom:48px; }
html body .section_miia-hero.hxh .miia_hero-component { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:40px; row-gap:32px; align-items:center; }
html body .section_miia-hero.hxh .miia-hrro-left { display:flex; flex-direction:column; align-items:stretch; justify-content:center; row-gap:0; }
html body .section_miia-hero.hxh .miia-hrro-left .flex-v-12 { margin:0; }  /* Webflow adds 24px under the H1 wrapper on phones; the product pages have no wrapper, so the gap to the line is the same 16px on all 8 pages */
html body .section_miia-hero.hxh .miia-h1 { margin:0; font-family:Cabinetgrotesk, "Cabinet Grotesk", Manrope, Arial, sans-serif; font-size:80px; line-height:88px; font-weight:500; letter-spacing:normal; color:#110A33; text-wrap:balance; }
html body .section_miia-hero.hxh .miia-h1 .pm-type { display:block; margin-top:0; font-family:Manrope, Arial, sans-serif; font-size:32px; line-height:38.4px; font-weight:500; letter-spacing:normal; color:#110A33; text-wrap:balance; }
html body .section_miia-hero.hxh .hxh-line { margin:24px 0 0; max-width:32rem; font:400 20px/30px Manrope, Arial, sans-serif; color:#110A33; text-wrap:balance; }
html body .section_miia-hero.hxh .hxh-line b { font-weight:800; white-space:nowrap; }
html body .section_miia-hero.hxh .hxh-line a { color:inherit; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
html body .section_miia-hero.hxh .hxh-line a:hover { text-decoration-thickness:2px; }
html body .section_miia-hero.hxh .pmt-hero-points { margin-top:16px; max-width:32rem; }
.hxh-ctas .pmt-btn { min-height:50px; }
.hxh-ctas { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:32px; }
.hxh-ctas .button { margin:0; }
.hxh-demo { display:inline-flex; align-items:center; justify-content:center; min-height:50px; padding:0 24px; border-radius:999px; border:1.5px solid #110A33; color:#110A33; background:#fff;
  font:700 16px/1 Manrope, Arial, sans-serif; text-decoration:none; white-space:nowrap; transition:background-color .16s ease, transform .16s cubic-bezier(.23,1,.32,1); }
@media (hover:hover) and (pointer:fine) { .hxh-demo:hover { background:#F6F4FF; } }
.hxh-demo:active { transform:scale(.97); }
.hxh-demo:focus-visible { outline:2px solid #110A33; outline-offset:3px; }
/* The framed box (old hero proportions). Each product puts ONE small, calm, product-true animation inside. */
.hxh-box { position:relative; width:100%; aspect-ratio:592 / 324; display:grid; grid-template-columns:minmax(0,1fr); place-items:center; padding:24px; border-radius:24px;
  border:1px solid rgba(52,29,153,.22); background:rgba(255,255,255,.45); overflow:hidden; }
/* .hxh-note (box caption) removed on /miia, AK Oct 19; kept here only for pages that still need a label */
.hxh-note { position:absolute; left:20px; bottom:12px; margin:0; font:500 12px/1.3 Manrope, Arial, sans-serif; color:#5B6478; }
/* Tablet: one column, box under the words, still left-aligned like the old page */
@media (max-width:991px) {
  html body .section_miia-hero.hxh .miia_hero-component { grid-template-columns:minmax(0,1fr); }
  .hxh-box { aspect-ratio:auto; min-height:340px; }
}
/* Phones: the old phone sizes, centred */
@media (max-width:767px) {
  html body section.section_miia-hero.hxh { padding-top:96px; padding-bottom:32px; }
  html body .section_miia-hero.hxh .miia-hrro-left { align-items:stretch; text-align:center; }
  html body .section_miia-hero.hxh .miia-h1 { font-size:40px; line-height:44px; }
  html body .section_miia-hero.hxh .miia-h1 .pm-type { font-size:24px; line-height:28.8px; margin-top:4px; }
  html body .section_miia-hero.hxh .hxh-line { margin-top:16px; font-size:18px; line-height:27px; }
  .hxh-ctas { flex-direction:column; align-items:stretch; width:100%; margin-top:24px; }
  .hxh-ctas .button, .hxh-demo, .hxh-ctas .pmt-btn { width:100%; flex:0 0 auto; }
  .hxh-box { min-height:300px; padding:16px 16px 36px; border-radius:20px; }
  .hxh-note { left:16px; bottom:10px; }
}
@media (max-width:359px) { html body .section_miia-hero.hxh .miia-h1 { font-size:36px; line-height:40px; } html body .section_miia-hero.hxh .miia-h1 .pm-type { font-size:21px; line-height:26px; } }
/* MOBILE-B (Oct 21): shorter product hero on phones. The two CTAs share one row; the animation box is untouched. */
@media (max-width:767px) {
  html body section.section_miia-hero.hxh { padding-top:92px; padding-bottom:24px; }
  html body .section_miia-hero.hxh .miia_hero-component { row-gap:20px; }
  html body .section_miia-hero.hxh .hxh-line { margin-top:12px; }
  .hxh-ctas { flex-direction:row; flex-wrap:nowrap; align-items:stretch; gap:8px; margin-top:16px; }
  .hxh-ctas .button, .hxh-demo, .hxh-ctas .pmt-btn { width:auto; flex:1 1 0; min-width:0; padding-left:12px; padding-right:12px; justify-content:center; text-align:center; }
}
@media (max-width:359px) {
  .hxh-ctas { flex-direction:column; }
  .hxh-ctas .button, .hxh-demo, .hxh-ctas .pmt-btn { width:100%; flex:0 0 auto; }
}

/* MOBILE-B (Oct 21): the small pause disc on every product animation gets a 44px touch area (the disc itself does not move or grow) */
@media (max-width: 767px) {
  .hxa-pause::after { content: ""; position: absolute; inset: -8px; }
}
/* Oct 22: the two hero buttons share the phone row equally on every product page (/account-research-agent's older .button rules made one
   take the whole row and crushed "Book a demo"). Below 360px they stack, as before. */
@media (min-width:360px) and (max-width:767px) {
  html body .hxh-ctas > a, html body .hxh-ctas > button { flex:1 1 0 !important; width:auto !important; min-width:0 !important; max-width:none !important; white-space:nowrap; }
}

/* ===== ORIGINAL HERO RATIOS (Oct 22). The old /miia hero had 148px above and 60px below. V2 keeps its own compact 112 / 48 on purpose: shell.js
   (the one-time "fit", classes hx-fold / hx-fold-hero) pads the hero and the logo strip so they end exactly on the first screen's bottom edge
   (about 199px above and 117px below at 1280x720), which is the old proportion scaled to the visitor's real window and zoom. A taller CSS
   padding here pushes the hero over the shell's 82% threshold, the fit then runs twice and the hero ends below the fold, so it is not changed.
   What this block adds: the framed box is capped by window height, so on a short window it can never push the hero past one screen.
   Desktop only (>=992px). Backup of the file before this block: 04-build/backups/oct22-sonnet-ratios/hero-template.css */
@media (min-width: 992px) {
  .hxh-box { max-width: min(100%, calc((100vh - 260px) * 592 / 324)); margin-inline: auto; }
  @supports (height: 100dvh) { .hxh-box { max-width: min(100%, calc((100dvh - 260px) * 592 / 324)); } }
}
/* Oct 22 (AK): every product page hero matches /miia exactly (the reference page). Desktop: the text column starts at the
   same height as /miia instead of being centred against the visual, and the gold "Start free trial" carries the same ink
   arrow circle as /miia's button. Phones: same arrow circle, same button sizes. */
@media (min-width:992px){
  .pmt-hero-left{align-self:flex-start!important;justify-content:flex-start!important}
}
.hxh-ctas .pmt-btn--gold{display:inline-flex!important;align-items:center;gap:10px;padding-left:7px!important;padding-right:16px!important}
.hxh-ctas .pmt-btn--gold::before{content:"";flex:none;width:36px;height:36px;border-radius:50%;background:#110A33 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFC61E' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/16px no-repeat}
/* Oct 22: on phones the hero is centred, so the trial note and its links centre too (they were left-aligned under centred text). */
@media (max-width:767px){
  .hxh .hx-hnote,.pmt-hero-left .hx-hnote,.miia_hero-component .hx-hnote{text-align:center!important;justify-content:center!important;margin-left:auto;margin-right:auto}
}
/* AK Oct 24: more room under the nav (the H1 sat 22px under it) and the text column centred against the visual (it sat 30px
   above it), on every template product page. Replaces the Oct 22 top-aligned text column above. */
@media (min-width:992px){
  html body section.section_miia-hero.hxh { padding-top:150px; }
  html body .section_miia-hero.hxh .miia_hero-component { align-items:center; }
  .pmt-hero-left{align-self:center!important;justify-content:center!important}
}
@media (min-width:768px) and (max-width:991px){ html body section.section_miia-hero.hxh { padding-top:128px; } }
@media (max-width:767px){ html body section.section_miia-hero.hxh { padding-top:112px; } }