/* /humanmail (HumanMail Agent) hero. Oct 27 restore (RESTORE-PRODUCTS-oct27): the pre-merge N25 styles are back (Amar 448f8ac generic-vs-Emi
   styles: 04-build/backups/oct27-restore-products/). Original header: "Written by Claude" vs "Rewritten by HumanMail Agent" for one buyer at a time (I type, then C type).
   Oct 28 rebuild (Amar's to-do: compare against a Claude email, highlight the signal and the human touch, witty I type vs data C type).
   Laid out at 1:1 inside the framed hero box (no scaling: every text 12px+, the Emi email 14px). Brand tokens only (.hxa in product-miia.css).
   Highlights: the SIGNAL line = gold 300 marker sweep; the HUMAN TOUCH line = gold underline draw; Claude's stock opener = slate strike.
   Motion is transform/opacity plus background-size on a few inline runs; .ec.rs and reduced motion switch every transition off.
   Responsive by container width (.ec is a size container), so the 580px laptop box, the 688px tablet box and the phone box each fit.
   Rollback: 04-build/backups/oct28-opus-emi-hero/public/v2/product-pages/anim/humanmail.css. */
.hxa[data-page="humanmail"] .hxa-stage { aspect-ratio: auto; }
.hxa[data-page="humanmail"] .hxa-stage > .canvas { position: relative; width: 100%; height: auto; transform: none !important; }
[data-page="humanmail"] .canvas { color: var(--ink); font-family: var(--f-body); }
[data-page="humanmail"] .ec { container-type: inline-size; position: relative; display: flex; flex-direction: column; gap: 12px; padding: 16px 16px 8px; }

/* Top: the two buyers as one segmented control (I type, C type) and the account */
[data-page="humanmail"] .ec-top { display: flex; align-items: center; gap: 12px; min-width: 0; }
[data-page="humanmail"] .ec-seg { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 999px; background: var(--mist); box-shadow: inset 0 0 0 1px var(--lav); }
[data-page="humanmail"] .ec-ind { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: var(--white); box-shadow: var(--sh-sm); transition: transform 420ms var(--ease-out); }
[data-page="humanmail"] .ec[data-b="1"] .ec-ind { transform: translateX(100%); }
[data-page="humanmail"] .ec-b { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 4px 12px 4px 6px; white-space: nowrap; font: 500 14px/20px var(--f-body); color: var(--slate); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: color 200ms ease; }
[data-page="humanmail"] .ec-b.is-on { color: var(--ink); }
[data-page="humanmail"] .ec-b b { font-weight: 700; }
[data-page="humanmail"] .ec-who { white-space: nowrap; }
[data-page="humanmail"] .ec-av { width: 24px; height: 24px; flex: none; }
[data-page="humanmail"] .ec-disc { margin-left: 4px; padding: 2px 8px; border-radius: 999px; background: var(--lav); color: var(--ink); font: 800 12px/16px var(--f-body); }
[data-page="humanmail"] .ec-acc { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; flex: none; font: 700 14px/20px var(--f-body); white-space: nowrap; }
[data-page="humanmail"] .ec-acc img { width: 16px; height: 16px; }

/* The two emails */
[data-page="humanmail"] .ec-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: stretch; }
[data-page="humanmail"] .ec-mail { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 14px 16px; border-radius: 16px; text-wrap: pretty; }
[data-page="humanmail"] .ec-mail p { margin: 0; }
[data-page="humanmail"] .ec-cl { background: var(--mist); color: var(--slate); box-shadow: inset 0 0 0 1px var(--lav); font: 500 13px/19px var(--f-body); }
[data-page="humanmail"] .ec-emi { background: var(--white); color: var(--ink); box-shadow: var(--sh-md), inset 0 0 0 1.5px var(--gold); font: 500 14px/20px var(--f-body); }
[data-page="humanmail"] .ec-tag { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; max-width: 100%; margin-bottom: 2px; padding: 4px 10px 4px 4px; border-radius: 999px; background: var(--white); color: var(--ink); font: 700 12px/16px var(--f-body); box-shadow: inset 0 0 0 1px var(--lav); white-space: nowrap; }
[data-page="humanmail"] .ec-tag img { width: 16px; height: 16px; flex: none; }
[data-page="humanmail"] .ec-tag-emi { background: var(--lav); box-shadow: none; }
[data-page="humanmail"] .ec-tag-emi img { border-radius: 50%; }
[data-page="humanmail"] .ec-tag-emi .ec-sw { margin-left: -2px; }
[data-page="humanmail"] .ec-sub { display: block; font: 700 15px/20px var(--f-body); color: var(--ink); }
[data-page="humanmail"] .ec-cl .ec-sub { font-size: 14px; }
[data-page="humanmail"] .ec-sw { display: inline-grid; justify-items: start; }
[data-page="humanmail"] .ec-nm { grid-area: 1 / 1; opacity: 0; transition: opacity 180ms ease; }
[data-page="humanmail"] .ec-nm.is-on { opacity: 1; transition: opacity 400ms var(--ease-out) 150ms; }
[data-page="humanmail"] .ec-same { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--lav); font: 600 12px/16px var(--f-body); color: var(--slate); }

/* Claude's stock opener is struck through as HumanMail Agent rewrites it */
[data-page="humanmail"] .ec-op { background: linear-gradient(currentColor, currentColor) no-repeat 0 60% / 0% 1.5px; transition: background-size 520ms var(--ease-out); }
[data-page="humanmail"] .ec.st .ec-op { background-size: 100% 1.5px; }

/* HumanMail Agent's email: one buyer at a time, stacked in one cell so the box never changes height */
[data-page="humanmail"] .ec-alts { flex: 1; display: grid; }
[data-page="humanmail"] .ec-alt { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; opacity: 0; visibility: hidden; transition: opacity 180ms ease, visibility 0s linear 180ms; }
[data-page="humanmail"] .ec-alt.is-on { opacity: 1; visibility: visible; transition: opacity 200ms ease 160ms, visibility 0s; }
[data-page="humanmail"] .ec-l { transition: opacity 360ms var(--ease-out), transform 420ms var(--ease-out); }
[data-page="humanmail"] .ec-alt:not(.is-on) .ec-l { opacity: 0; transform: translateY(4px); transition-duration: 120ms; }
[data-page="humanmail"] .ec-alt.is-on .ec-l { transition-delay: calc(200ms + var(--i) * 60ms); }

/* The human touch (gold underline) and the signal (gold 300 marker) */
[data-page="humanmail"] .ec-h { padding-bottom: 2px; background: linear-gradient(var(--gold), var(--gold)) no-repeat 0 100% / 0% 3px; transition: background-size 640ms var(--ease-out); }
[data-page="humanmail"] .ec.ht .ec-alt.is-on .ec-h { background-size: 100% 3px; }
[data-page="humanmail"] .ec-m { padding: 1px 3px; margin: 0 -3px; border-radius: 4px; color: inherit; background: linear-gradient(var(--gold300), var(--gold300)) no-repeat 0 0 / 0% 100%; transition: background-size 560ms var(--ease-out); }
[data-page="humanmail"] .ec.sg .ec-alt.is-on .ec-m, [data-page="humanmail"] .ec.sg .ec-cl .ec-m { background-size: 100% 100%; }
/* Oct 26 PM (W2): Claude's email carries the SAME signal (Amar: Claude can find it too), marked the same way, in Claude's slate text */
[data-page="humanmail"] .ec-cl .ec-m { color: var(--ink); }

/* Where each highlight came from: the signal (Buyer Signals) and the DISC cue + human touch (People Research Agent) */
[data-page="humanmail"] .ec-srcs { display: grid; gap: 4px; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--mist); }
[data-page="humanmail"] .ec-s { display: block; padding-left: 20px; text-indent: -20px; font: 500 12px/16px var(--f-body); color: var(--slate); opacity: 0; transform: translateY(4px); transition: opacity 320ms var(--ease-out), transform 420ms var(--ease-out); }
[data-page="humanmail"] .ec-s2 { transition-delay: 140ms; }
[data-page="humanmail"] .ec.sr .ec-s { opacity: 1; transform: none; }
[data-page="humanmail"] .ec-s img { width: 14px; height: 14px; border-radius: 4px; margin-right: 6px; vertical-align: -3px; }
[data-page="humanmail"] .ec-s b { color: var(--ink); font-weight: 800; }
[data-page="humanmail"] .ec-k-m { padding: 0 3px; border-radius: 4px; background: var(--gold300); }
[data-page="humanmail"] .ec-k-h { color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* Replies, one small line; the pause button sits at its right end (product-miia.css / pm-clean.css position it bottom-right) */
[data-page="humanmail"] .ec-reply { margin: 0; min-height: 40px; display: flex; align-items: center; padding-right: 56px; font: 500 12px/16px var(--f-body); color: var(--slate); text-wrap: pretty; }
.hxa[data-page="humanmail"] .hxa-pause:focus-visible { opacity: 1; outline: 2px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 2px var(--white); }
.hxa[data-page="humanmail"] .hxa-note { display: none; }

/* Container sizes: laptop box keeps everything; narrower boxes drop the roles, then stack the emails, then shorten the chips */
@container (max-width: 580px) {
  [data-page="humanmail"] .ec-role { display: none; }
}
@media (max-width: 767px) { [data-page="humanmail"] .ec { gap: 10px; padding: 12px 12px 4px; } }
@container (max-width: 500px) {
  [data-page="humanmail"] .ec-seg { flex: 1; }
  [data-page="humanmail"] .ec-acc { display: none; }
  [data-page="humanmail"] .ec-row { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  [data-page="humanmail"] .ec-p2 { display: none; }
  [data-page="humanmail"] .ec-mail { padding: 12px 14px; }
}
@container (max-width: 330px) {
  [data-page="humanmail"] .ec-dw { display: none; }
  [data-page="humanmail"] .ec-b { padding-right: 8px; }
}

/* Off while resetting, and under reduced motion (the finished frame, no movement) */
[data-page="humanmail"] .ec.rs, [data-page="humanmail"] .ec.rs * { transition: none !important; }
.hxa-reduced [data-page="humanmail"] .canvas, .hxa-reduced [data-page="humanmail"] .canvas * { transition: none !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) { [data-page="humanmail"] .canvas * { transition: none !important; } }

/* Oct 27 (AK consistency pass): the hero visual sits at the same height as the other product pages. This box shows its emails at 1:1
   (no scaling, text stays 12px+), so it is the tallest; the Webflow 30px padding above and below the right column is dropped here only,
   which keeps the whole hero (and its trial line) inside one screen at 1280x633. Desktop only. */
@media (min-width:992px){ .pmt-hero-right:has(.hxa[data-page="humanmail"]){ padding-top:0; padding-bottom:0; } }

/* Oct 27 restore (RESTORE-PRODUCTS-oct27): the N25 asset is ~30px taller than Amar's generic-vs-Emi box, so on laptops the box tightens
   its own rhythm (padding, line gaps, the reply row) to end with the left column, keeping the hero inside 1280x633. Text sizes unchanged. */
@media (min-width: 992px) {
  [data-page="humanmail"] .ec { gap: 10px; padding: 12px 14px 4px; }
  [data-page="humanmail"] .ec-mail { gap: 4px; padding: 12px 14px; }
  [data-page="humanmail"] .ec-srcs { padding-top: 6px; }
  [data-page="humanmail"] .ec-reply { min-height: 32px; }
}