/* The ONE product-page template (views/v2/product-miia.ejs), Krish review K-020 + K-007, Oct 19 (A1 CROSS-SITE).
   Loaded only by the seven template pages (/pi /vidar /humanmail /intent /signals /streams /enrichments), after the
   Webflow sheets and pm-clean.css, so every rule is scoped under body.pmt. Brand tokens only: gold #FFC61E, gold 300
   #FFE8A5, ink #110A33, lavender #DDD6FF (small chips only), mist #F6F4FF, cream #FFF4D2, slate #5B6478, white.
   Cabinet Grotesk Bold headings, Manrope body, 4px scale, 24px corners, pill buttons, fixed shadows. */
body.pmt { --ink: #110A33; --gold: #FFC61E; --gold3: #FFE8A5; --lav: #DDD6FF; --mist: #F6F4FF; --slate: #5B6478; --ease: cubic-bezier(.23, 1, .32, 1); }
.pmt-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- 1. Hero: LEFT title + one zing line + CTA pair, RIGHT the real product ----------
   Proportions = the old humantic.ai /miia hero AK picked (ak-refs/old-miia-hero-TEMPLATE.png): a big product name,
   a large type line under it, one line of copy, the CTAs; on the right a framed light box with one calm animation. */
html body.pmt .pmt-hero .miia-hero-lottie { border-radius: 24px; border: 1px solid #DDD6FF; background: rgba(255, 255, 255, .55); }
.pmt-mark { display: block; width: 56px; height: 56px; border-radius: 50%; box-shadow: 0 12px 32px -12px rgba(17, 10, 51, .22); }
/* Hero type (H1, type line, zing line, column width) now comes ONLY from hero-template.css, the same file /miia uses, so the 8 heroes cannot drift (AK Oct 20). */
.pmt-hero-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pmt-hero-points li { position: relative; padding-left: 28px; font-size: 16px; line-height: 1.45; color: var(--ink); }
.pmt-hero-points li::before { content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23110A33' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 12px no-repeat; }
.pmt-hero-points a { color: inherit; }
/* The standard CTA pair (K-007, K-058, K-273): one pill size everywhere, 48px tall, label on one line and never clipped. */
.pmt-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.pmt-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border-radius: 999px; font: 700 16px/1.2 Manrope, "Manrope Fallback", Arial, sans-serif; white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color .2s var(--ease), color .2s var(--ease), transform .16s var(--ease), box-shadow .2s var(--ease); }
html body .pmt-btn--gold, html body .pmt-btn--gold:visited { background: var(--gold); color: var(--ink); box-shadow: 0 2px 8px rgba(17, 10, 51, .08); }
html body .pmt-btn--gold:hover { background: var(--gold3); color: var(--ink); }
html body .pmt-btn--line, html body .pmt-btn--line:visited { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
html body .pmt-btn--line:hover { background: var(--ink); color: #fff; }
.pmt-btn:active { transform: scale(.96); }
.pmt-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
/* Right side: the animation box keeps its own look; a hero video sits in the same slot */
.pmt-hero-video { width: 100%; box-shadow: 0 32px 64px -24px rgba(17, 10, 51, .35); }
@media (max-width: 767px) {
  .pmt-mark { width: 48px; height: 48px; }
}

/* ---------- 3. Voices: the dark slider sits straight under the proof band ---------- */
html body.pmt .section_testimonials.home-tml { margin-top: 0; }

/* ---------- 4. Blocks: alternate mist and white so neighbours never blur together ---------- */
html body.pmt .pmt-tone-mist, html body.pmt .pmt-tone-mist > section { background-color: var(--mist); background-image: none; }
html body.pmt .pmt-tone-white, html body.pmt .pmt-tone-white > section { background-color: #fff; background-image: none; }
html body.pmt #comparison { padding-top: 56px !important; padding-bottom: 56px !important; }
@media (max-width: 767px) { html body.pmt #comparison { padding-top: 40px !important; padding-bottom: 40px !important; } }
/* one block rhythm (AK review): every block 56px top and bottom on desktop, 40px on phones */
html body.pmt .pmt-block > section { padding-top: 56px; padding-bottom: 56px; }
html body.pmt .pmt-block .section-header { margin-bottom: 28px; }
/* "Why it matters" column text: the Webflow sheet sets .6 opacity (slate on white = about 2.6:1); full opacity on all 7 pages (Krish round, A1) */
html body.pmt .miia-arch-card .arch-card-subtext { opacity: 1; color: var(--slate); }
@media (max-width: 767px) { html body.pmt .pmt-block > section { padding-top: 40px; padding-bottom: 40px; } }
.pmt-media { padding: 64px 24px; }
.pmt-wrap { max-width: 1120px; margin: 0 auto; }
.pmt-head { text-align: center; margin: 0 auto 32px; max-width: 760px; }
html body.pmt .pmt-head h2 { margin: 0; color: var(--ink); text-wrap: balance; }
.pmt-head p { margin: 12px 0 0; font-size: 18px; line-height: 1.5; color: var(--slate); text-wrap: pretty; }
.pmt-media-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: center; }
.pmt-media-grid.is-flip > .pmt-points { order: 2; }
.pmt-media-grid.is-solo { grid-template-columns: minmax(0, 1fr); max-width: 960px; margin: 0 auto; }
.pmt-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 24px; }
.pmt-points li { display: flex; align-items: flex-start; gap: 16px; }
.pmt-ic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--lav); color: var(--ink); }
.pmt-ic svg { width: 22px; height: 22px; }
.pmt-points b { display: block; font: 700 18px/1.3 "Cabinet Grotesk", Cabinetgrotesk, "Cabinet Fallback", Arial, sans-serif; color: var(--ink); }
.pmt-points li > span > span { display: block; margin-top: 4px; font-size: 15px; line-height: 1.5; color: var(--slate); text-wrap: pretty; }
.pmt-points a { color: var(--ink); }
.pmt-media-vis { min-width: 0; }
.pmt-media-vis > img { display: block; width: 100%; height: auto; border-radius: 24px; box-shadow: 0 12px 32px -12px rgba(17, 10, 51, .22); }
@media (max-width: 991px) { .pmt-media-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; } .pmt-media-grid.is-flip > .pmt-points { order: 0; } }
@media (max-width: 767px) { .pmt-media { padding: 40px 16px; } .pmt-head { margin-bottom: 24px; } .pmt-head p { font-size: 16px; } }

/* ---------- 5. FAQs (white) + 6. the mist closing band (partials/hx-close), then the ink footer ---------- */
html body.pmt section.hai-faq#faqs:not(.hai-faq--mist):not(.hai-faq--cream) { background: #fff; }
@media (prefers-reduced-motion: reduce) { .pmt-btn { transition: none; } }

/* MOBILE-B (Oct 21): less air around the "in action" media and points on phones */
@media (max-width: 767px) {
  .pmt-media { padding: 32px 16px; }
  .pmt-media-grid { gap: 20px; }
  .pmt-points { gap: 14px; }
  .pmt-points li { gap: 12px; }
  .pmt-ic { width: 40px; height: 40px; }
  .pmt-points b { font-size: 16px; }
  .pmt-points li > span > span { font-size: 14px; line-height: 1.4; margin-top: 2px; }
}

/* ===== ORIGINAL RATIOS (Oct 22): same section rhythm as the old /miia (60px bands, 32px under the heading); see the block at the end of pm-clean.css.
   Phones (<=767px) unchanged. Backup of the file before this block: 04-build/backups/oct22-sonnet-ratios/pm-template.css */
@media (min-width: 768px) {
  html body.pmt .pmt-block > section { padding-top: var(--hx-sec-y, 60px); padding-bottom: var(--hx-sec-y, 60px); }
  html body.pmt .pmt-block .section-header { margin-bottom: var(--hx-head-gap, 32px); }
  .pmt-media { padding-top: var(--hx-sec-y, 60px); padding-bottom: var(--hx-sec-y, 60px); }
  .pmt-head { margin-bottom: var(--hx-head-gap, 32px); }
  .pmt-head p { font-size: var(--hx-sub-size, 20px); line-height: var(--hx-sub-lh, 1.3); }
  .pmt-points li > span > span { font-size: var(--hx-body-size, 16px); line-height: var(--hx-body-lh, 1.5); }
}