/* Phone layout for the product pages, About and the case studies — Figma "Section 4" (node 4229:3994, 390 wide).
   Everything sits behind max-width:760px so desktop is untouched. Pages are built from inline styles, so most rules need !important. */

.hm-why-m,.pm-dots,.pm-only,.pm-journey{display:none}

@media (max-width:760px){
  body{background:#fbfaf7}

  /* ---------- product hero: logo, headline, animated scene, intro, one button ---------- */
  header[data-m=hero]{display:flex!important;flex-direction:column;align-items:center;text-align:center;gap:20px!important;padding:48px 20px!important;
    background:linear-gradient(180deg,#f9fbfc 0%,#f3f6fb 60%,#fbf1f4 100%)}
  header[data-m=hero]>div:first-child{display:contents}
  header[data-m=hero]>div:first-child>img{order:1;height:30px!important;margin:0 auto}
  header[data-m=hero] h1{order:2;margin-top:0!important;font-size:40px!important;line-height:1.06!important;letter-spacing:-1px;color:#101116}
  header[data-m=hero]>div:last-child{order:3;width:100%;padding-top:8px}
  header[data-m=hero] [data-m=hero-vis]{width:100%!important;max-width:100%!important;margin:0 auto!important}
  header[data-m=hero]>div:first-child>p{order:4;margin-top:0!important;font-size:17px!important;line-height:1.5!important;color:#5e6270!important;max-width:none!important}
  header[data-m=hero]>div:first-child>div{order:5;width:100%;margin-top:0!important}
  header[data-m=hero]>div:first-child>div>a:first-child{width:100%;justify-content:center;padding:14px 22px!important;border-radius:12px!important;box-shadow:none!important}
  header[data-m=hero]>div:first-child>div>a:not(:first-child){display:none!important}

  /* ---------- section rhythm ---------- */
  .pm-video,#roles,#platform,#features,#modules,.pm-why,.pm-ways,#demo{margin-top:0!important}
  .pm-video{padding:64px 16px!important}
  .pm-only{display:block}
  .pm-video h2,.pm-why h2,.pm-ways h2{font-size:30px!important;line-height:1.1!important;letter-spacing:-.6px}
  #roles h2,#platform h2{font-size:28px!important;line-height:1.1!important;letter-spacing:-.56px}
  .pm-video button svg path{fill:#14151a}
  .pm-video>div:last-child{margin-top:16px!important;border-radius:16px!important}
  .pm-video button span span{width:60px!important;height:60px!important}
  .pm-video button svg{width:20px;height:22px}

  /* ---------- built for everyone: auto-advancing carousel, no tabs, picture first, no "Learn more" ---------- */
  #roles,#platform{padding:64px 0!important}
  #roles .lfc-tabs,#platform .lfc-tabs{display:none!important}
  #roles .lfc-view,#platform .lfc-view{margin-top:24px!important}
  .lfc-slide{display:flex!important;flex-direction:column;gap:24px!important;padding:26px 20px!important;border-radius:18px!important}
  .lfc-slide .ucon,.lfc-slide .lfc-shot{order:-1;width:100%!important;margin:0!important}
  .lfc-slide .lfc-copy{gap:0!important}
  .lfc-slide .lfc-more,.lfc-slide .lfc-list{display:none!important}
  .lfc-title{font-size:30px!important}
  .ucon{padding:18px 16px 0!important;border-radius:20px!important}
  .ucon-rows{gap:12px!important;margin-top:16px!important}
  .ucon-foot{margin:16px -16px 0!important;padding:12px 16px!important}
  .ucon-row{flex-wrap:wrap;row-gap:8px;padding:12px!important;gap:10px!important}
  .ucon-ico{width:36px!important;height:36px!important;border-radius:11px!important}
  .ucon-ico svg{width:18px;height:18px}
  .ucon-copy{flex:1 1 0;min-width:84px}
  .ucon-copy b{font-size:20px!important}
  .ucon-pill{margin-left:auto;font-size:11px!important;padding:5px 8px!important}

  /* ---------- TestGUARD: three ways (white cards, large pastel tiles) ---------- */
  .pm-ways{padding:64px 16px!important}
  .pm-ways [data-m=grid3]{display:flex!important;gap:12px!important;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:24px -16px 0!important;padding:8px 16px!important;align-items:stretch}
  .pm-ways [data-m=grid3]::-webkit-scrollbar{display:none}
  .pm-ways [data-m=grid3]>*{flex:none;width:300px;scroll-snap-align:start;scroll-margin-left:16px}
  .pm-dots{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:16px}
  .pm-dots i{width:6px;height:6px;border-radius:3px;background:#d5d8de;cursor:pointer;transition:width .25s,background .25s}
  .pm-dots i.on{width:20px;background:#14151a}

  /* ---------- key modules (UMS journey keeps its wheel; copy left aligned as in the design) ---------- */
  .lc-copy{text-align:left!important}
  #features .kmc-band,#modules .kmc-band{margin:0}
  #features:has(.kmc-band),#modules{padding:40px 16px!important}
  #modules+section{margin-top:0!important;padding:8px 16px 40px!important}

  /* ---------- UMS key modules: vertical timeline (Figma "Key modules — Option B · Timeline") ---------- */
  #features[data-life-root]{padding:0!important}
  #features [data-life-track]{display:none!important}
  .pm-journey{display:block;padding:64px 20px 56px;background:#fbfaf7}
  .pmj-eye{font:700 13px 'Hanken Grotesk',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#14151a}
  .pmj-h{font-family:'Bricolage Grotesque',sans-serif;font-size:30px;font-weight:700;line-height:1.08;letter-spacing:-.6px;color:#14151a;margin:16px 0 0}
  .pmj-sub{font-size:15px;line-height:1.5;color:#5e6270;margin:16px 0 0}
  .pmj-track{position:relative;margin-top:24px}
  .pmj-sticky{position:sticky;top:76px}
  .pmj-list{margin-top:0}
  .pmj-row{display:flex;gap:14px;cursor:pointer;-webkit-tap-highlight-color:transparent;outline:none}
  .pmj-rail{flex:none;width:36px;display:flex;flex-direction:column;align-items:center}
  .pmj-node{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#fff;border:1.5px solid #e3e1da;color:#b2b5be;transition:background .35s,color .35s,box-shadow .35s,border-color .35s}
  .pmj-line{flex:1 1 auto;width:2px;min-height:18px;background:#e6e3db;transition:background .35s}
  .pmj-row:last-child .pmj-line{display:none}
  .pmj-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:6px;padding:9px 0 18px}
  .pmj-row:last-child .pmj-body{padding-bottom:0}
  .pmj-head{display:flex;align-items:baseline;gap:8px}
  .pmj-ph{flex:none;font:700 11px 'Hanken Grotesk',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#9a9ea9;transition:color .35s}
  .pmj-t{font:600 14px/1.3 'Hanken Grotesk',sans-serif;color:#6b6f7d}
  .pmj-card{display:none;flex-direction:column;gap:10px;padding:16px;border-radius:18px;background:#fff;border:1.5px solid var(--bg);box-shadow:0 12px 28px rgba(20,26,41,.08)}
  .pmj-ct{font-family:'Bricolage Grotesque',sans-serif;font-size:20px;font-weight:700;line-height:1.15;letter-spacing:-.2px;color:#14151a}
  .pmj-cb{font-size:14px;line-height:1.5;color:#4b4f5c}
  .pmj-mods{display:flex;flex-wrap:wrap;gap:6px}
  .pmj-mods i{font-style:normal;font:600 11px 'Hanken Grotesk',sans-serif;color:var(--ink);background:var(--bg);padding:5px 10px;border-radius:100px}
  .pmj-who{display:flex;align-items:center;gap:6px;padding-top:2px;font-size:12px}
  .pmj-who img{width:26px;height:26px;border-radius:50%;object-fit:cover}
  .pmj-who span{font-weight:500;color:#6b6f7d}.pmj-who b{color:var(--ink)}
  .pmj-row.done .pmj-node{background:var(--bg);border-color:transparent;color:var(--ink)}
  .pmj-row.done .pmj-line{background:var(--ink)}
  .pmj-row.done .pmj-ph{color:var(--ink)}
  .pmj-row.done .pmj-t{color:#14151a}
  .pmj-row.on .pmj-node{background:var(--ink);border-color:transparent;color:#fff;box-shadow:0 0 0 5px color-mix(in srgb,var(--ink) 25%,transparent)}
  .pmj-row.on .pmj-ph{color:var(--ink)}
  .pmj-row.on .pmj-body{padding-top:4px}
  .pmj-row.on .pmj-t{display:none}
  .pmj-row.on .pmj-card{display:flex;animation:pmj-open .45s cubic-bezier(.2,.8,.2,1)}
  @keyframes pmj-open{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
  .pmj-hint{margin-top:16px;font:500 11px 'Inter',sans-serif;color:#9a9ea9}

  /* ---------- why: auto-scrolling strip instead of the stacked desktop cards ---------- */
  .pm-why{padding:64px 0 56px!important}
  .pm-why>div:first-child{padding:0 16px}
  .pm-why .wx-grid{display:none!important}
  .pm-why .hm-why-m{display:block;margin-top:16px}

  /* ---------- final call to action: two full-width buttons ---------- */
  #demo{padding:16px 16px 56px!important}
  #demo>div{padding:36px 24px!important;border-radius:30px!important}
  #demo>div>div[style*="absolute"],#demo>div>div:not([style*="relative"]){display:none}
  #demo h2{font-size:28px!important;line-height:1.1!important;letter-spacing:-.56px}
  #demo p{font-size:15px!important;line-height:1.5!important}
  #demo div:has(>a){flex-direction:column;gap:10px!important;margin-top:20px!important}
  #demo div:has(>a)>a{width:100%;justify-content:center;padding:14px 22px!important;border-radius:12px!important}

  /* ---------- footer (same as Home) ---------- */
  footer{margin-top:0!important}
  footer>div:first-child{padding:44px 20px 0!important}
  footer [data-m=foot]{grid-template-columns:1fr 1fr!important;gap:28px 16px!important}
  footer [data-m=foot]>div:first-child>img{display:none!important}
  footer [data-m=foot]>div:first-child p{max-width:none!important;margin-top:0!important}
  footer [data-m=foot]>div:first-child>div{margin-top:28px!important}
  footer [data-m=foot]>div:not(:first-child)>div:last-child{gap:10px!important;margin-top:10px!important}
  footer>div:first-child>div:nth-child(2){justify-content:flex-start!important;gap:10px!important;margin-top:28px!important}
  footer>div:first-child>div:nth-child(3){flex-direction:column;align-items:flex-start!important;gap:28px!important;border-top-color:rgba(255,255,255,.08)!important;margin-top:28px!important;padding:28px 0!important}
  footer>div:last-child svg{width:calc(100% - 40px)!important;margin:0 auto -1.6%!important}

  /* ---------- About (Figma "About — Mobile") ---------- */
  .pm-about .pg-wrap{padding:0 16px!important;margin-top:0!important}
  .pm-about .pg-wrap:not(.pg-hero){padding:56px 16px!important}
  .pm-about .pg-hero{display:flex!important;flex-direction:column;align-items:center;text-align:center;gap:18px!important;padding:48px 20px!important;
    background:linear-gradient(180deg,#f9fbfc 0%,#fbf1f4 100%)}
  .pm-about .pg-hero>div:first-child{display:contents}
  .pm-about .pg-hero .pg-eye{order:1;text-align:center!important}
  .pm-about .pg-hero .pg-h1{order:2;margin-top:0!important;font-size:40px!important;line-height:1.06!important;letter-spacing:-1px;color:#101116}
  .pm-about .pg-hero .pg-stats{order:3;width:100%;gap:10px!important;padding-top:4px}
  .pm-about .pg-hero .pg-lead{order:4;text-align:center;margin-top:0!important;font-size:15px!important;line-height:1.55!important;color:#5e6270!important}
  .pm-about .pg-hero>div:first-child>div:not(.pg-eye){order:5;width:100%;margin-top:0!important}
  .pm-about .pg-hero>div:first-child>div>a:first-child{width:100%;justify-content:center;padding:14px 22px!important;border-radius:12px!important;box-shadow:none!important}
  .pm-about .pg-hero>div:first-child>div>a:not(:first-child){display:none!important}
  .pm-about .pg-stat{padding:16px!important;border-radius:16px!important;text-align:left}
  .pm-about .pg-stat b{font-size:30px!important}
  .pm-about .pg-stat span{font-size:13px!important;margin-top:4px!important;line-height:1.35}
  .pm-about .pg-split{display:flex!important;flex-direction:column;gap:16px!important}
  .pm-about .pg-wrap>div[style*="center"],.pm-about .pg-eye{text-align:left!important}
  .pm-about .pg-h2{font-size:30px!important;line-height:1.1!important;letter-spacing:-.6px;margin-top:16px!important}
  .pm-about .pg-lead{font-size:15px!important;line-height:1.55!important}
  .pm-about .pg-grid4{grid-template-columns:minmax(0,1fr)!important;gap:12px!important;margin-top:20px!important}
  .pm-about .pg-card{padding:20px!important}
  .pm-about .pg-card .pg-tile{width:44px!important;height:44px!important;border-radius:12px!important}
  .pm-about .pg-card h3{font-size:20px!important;margin-top:10px!important}
  .pm-about .pg-card p{font-size:15px!important}
  .pm-about .pg-prod{padding:20px!important;gap:8px!important}
  .pm-about .pg-prod b{order:1;margin-top:0!important;font:600 11px 'Inter',sans-serif!important;letter-spacing:.06em;text-transform:uppercase;color:#8a8f9c}
  .pm-about .pg-prod img{order:0}
  .pm-about .pg-prod span{order:2;font-family:'Bricolage Grotesque',sans-serif;font-size:20px!important;font-weight:700;line-height:1.2!important;color:#14151a!important}
  .pm-about .pg-prod .pg-prod-go{order:3;font-size:15px!important}

  /* ---------- case study (Figma "Case study — Mobile (ODL template)") ---------- */
  /* hero: eyebrow, title, photo, lede, "Built with" logos */
  .pm-case main.cs{padding-top:0!important}
  .pm-case main.cs>.pg-wrap,.pm-case main.cs .pg-wrap{padding-left:16px!important;padding-right:16px!important}
  .pm-case .cs-hero{display:flex!important;flex-direction:column;align-items:stretch!important;gap:16px!important;padding:40px 4px 32px!important;margin:0!important}
  .pm-case .cs-hero>div{display:contents}
  .pm-case .cs-eye{order:0;margin:0!important;font:700 13px 'Hanken Grotesk',sans-serif!important;letter-spacing:.1em!important;color:#14151a!important;text-align:left!important}
  .pm-case .cs-h1{order:1;margin:0!important;font-size:36px!important;line-height:1.06!important;letter-spacing:-.025em!important;color:#101116!important;text-wrap:wrap}
  .pm-case .cs-photo{order:2;width:100%;aspect-ratio:350/262!important;border-radius:20px!important;box-shadow:none!important}
  .pm-case .cs-lede{order:3;margin:0!important;font-size:15px!important;line-height:1.55!important;color:#5e6270!important}
  .pm-case .cs-built{order:4;display:flex!important;align-items:center;justify-content:flex-start!important;margin:0!important;gap:10px!important;font:500 12px 'Inter',sans-serif!important;color:#8a8f9c!important}
  .pm-case .cs-built .pg-pchip{padding:0!important;border:0!important;background:none!important;box-shadow:none!important;height:auto!important}
  .pm-case .cs-built .pg-pchip img{width:56px!important;height:22px!important}
  /* at a glance: plain section label, white cards with coloured icon tiles */
  .pm-case .cs-glance{margin:0!important;padding:24px 0 56px!important;background:none!important;border-radius:0!important}
  .pm-case .cs-glance h2{font:700 13px 'Hanken Grotesk',sans-serif!important;letter-spacing:.1em!important;color:#14151a!important}
  .pm-case .cs-g{display:flex!important;flex-direction:column;gap:12px!important;margin-top:16px!important}
  .pm-case .cs-g-i{padding:20px!important;background:#fff!important;border:1px solid #eceae4;border-radius:18px!important;box-shadow:0 5px 12px rgba(36,51,77,.05)!important}
  .pm-case .cs-g-ic{width:44px!important;height:44px!important;border-radius:12px!important}
  .pm-case .cs-g-i:nth-child(1) .cs-g-ic{background:#fff1f5!important;color:#db487b!important}
  .pm-case .cs-g-i:nth-child(2) .cs-g-ic{background:#f1f7ff!important;color:#2877d7!important}
  .pm-case .cs-g-i:nth-child(3) .cs-g-ic{background:#f0fbf7!important;color:#12876a!important}
  .pm-case .cs-g-ic svg{display:none}
  .pm-case .cs-g-ic::before{content:"";width:20px;height:20px;background:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
  .pm-case .cs-g-i:nth-child(1) .cs-g-ic{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E")}
  .pm-case .cs-g-i:nth-child(2) .cs-g-ic{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5'/%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3C/svg%3E")}
  .pm-case .cs-g-i:nth-child(3) .cs-g-ic{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v16a2 2 0 0 0 2 2h16'/%3E%3Cpath d='m19 9-5 5-4-4-3 3'/%3E%3C/svg%3E")}
  .pm-case .cs-g-i h3{margin-top:10px!important;font-family:'Bricolage Grotesque',sans-serif!important;font-size:19px!important;font-weight:700;line-height:1.2!important;letter-spacing:-.01em;color:#14151a!important}
  .pm-case .cs-g-i p{margin-top:10px!important;font-size:15px!important;line-height:1.55!important;color:#4b4f5c!important}
  /* story: Figma spacing (24 top, 14 heading→text, 38 between sections, 56 before "Why") */
  .pm-case .cs-body{margin-top:24px!important;gap:64px!important}
  .pm-case .cs-sec h2{font-size:24px!important;line-height:1.1!important;letter-spacing:-.02em!important;margin:0!important}
  .pm-case .cs-sec p{margin-top:14px!important;font-size:15px!important;line-height:1.55!important;color:#4b4f5c!important}
  .pm-case .cs-sec+.cs-sec{margin-top:38px!important}
  .pm-case .cs-sec .cs-impact{margin-top:14px!important}
  .pm-case .cs-more{margin-top:64px!important}
  .pm-case .cs-more-h{margin:0!important}
  .pm-case .cs-more .cs-grid.cs-grid{margin-top:16px!important}
  .pm-case .cs-impact{display:flex!important;flex-direction:column;gap:10px!important;counter-reset:csi}
  .pm-case .cs-i{display:block!important;padding:16px 20px!important;background:#fff!important;border:1px solid #eceae4!important;border-radius:18px!important;box-shadow:0 5px 12px rgba(36,50,77,.05)}
  .pm-case .cs-i .cs-tick{display:none!important}
  .pm-case .cs-i>div::before{counter-increment:csi;content:"0" counter(csi);display:block;margin-bottom:6px;font:600 11px 'Inter',sans-serif;letter-spacing:.06em;color:#2877d7}
  .pm-case .cs-i h3{font-size:16px!important;margin:0!important}
  .pm-case .cs-i p{font-size:15px!important;line-height:1.55!important;margin-top:6px!important}
  .pm-case .cs-why{background:none!important;color:#14151a!important;padding:8px 0 0!important;border:0!important;box-shadow:none!important;text-align:left}
  .pm-case .cs-why::before,.pm-case .cs-why::after{display:none!important}
  .pm-case .cs-why .cs-why-l{color:#14151a!important;font-size:13px!important;font-weight:700;letter-spacing:.1em}
  .pm-case .cs-why blockquote{color:#14151a!important;font-family:'Bricolage Grotesque',sans-serif;font-size:24px!important;line-height:1.18!important;letter-spacing:-.36px;margin-top:10px!important}
  .pm-case .cs-why .cs-why-btn{display:none!important}
  .pm-case .cs-cta-card{display:flex!important;flex-direction:column;gap:14px!important;padding:24px!important;border-radius:22px!important;background:#14151a!important;border:0!important;box-shadow:none!important}
  .pm-case .cs-cta-card::before{content:"SEE IT FOR YOUR INSTITUTION";font:600 11px 'Inter',sans-serif;letter-spacing:.08em;color:#8fc1ff}
  .pm-case .cs-cta-card h2{color:#fff!important;font-size:24px!important;line-height:1.15!important;text-align:left!important;margin:0!important}
  .pm-case .cs-cta-proof{display:contents!important}
  .pm-case .cs-cta-av{order:1;justify-content:flex-start!important}
  .pm-case .cs-cta-av img{border-color:#14151a!important;width:36px!important;height:36px!important}
  .pm-case .cs-cta-card .cs-cta-btn{margin:0!important;padding:14px 22px!important;font-size:16px!important;line-height:21px!important}
  .pm-case .cs-cta-btn{order:2;width:100%;justify-content:center;background:#fff!important;color:#14151a!important;box-shadow:none!important;border-radius:12px!important}
  .pm-case .cs-cta-proof p{order:3;color:#a9aebb!important;font-size:12px!important;text-align:left!important;margin:0!important}
  .pm-case .cs-more .cs-grid{display:flex!important;gap:14px!important;overflow-x:auto;scroll-snap-type:x mandatory;margin:20px -16px 0!important;padding:0 16px 8px;scrollbar-width:none}
  .pm-case .cs-more .cs-grid::-webkit-scrollbar{display:none}
  .pm-case .cs-more .cs-card{flex:none;width:280px!important;scroll-snap-align:start;scroll-margin-left:16px}
  .pm-case .cs-more-h{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:space-between!important;text-align:left!important;gap:12px}
  .pm-case .cs-cta-card{text-align:left!important}
  .pm-case .cs-why blockquote::before,.pm-case .cs-why blockquote::after{display:none!important;content:none!important}
  .pm-case .cs-why blockquote{padding:0!important;border:0!important}
  .pm-case .cs-more-h .pg-h2{font-size:24px!important;margin:0!important}
  .pm-case .cs-all{color:#2877d7!important}

  /* ---------- the "why" cards (same card as Home's carousel) ---------- */
  .hmw-marq{overflow:hidden;padding:8px 0 16px}
  .hmw-track,.hmw-dup{display:flex;gap:14px;width:max-content}
  .hmw-track{animation:pm-marq 48s linear infinite}
  .hmw-marq:active .hmw-track{animation-play-state:paused}
  @keyframes pm-marq{to{transform:translateX(calc(-50% - 7px))}}
  .hmw-card{flex:none;width:300px;display:flex;flex-direction:column;background:#fff;border:1px solid #eceae4;border-radius:18px;overflow:hidden;box-shadow:0 5px 12px rgba(36,50,77,.05);text-align:left}
  .hmw-ill{position:relative;height:203px;flex:none;overflow:hidden;
    background-image:linear-gradient(#eef1f6 1px,transparent 1px),linear-gradient(90deg,#eef1f6 1px,transparent 1px);background-size:54px 54px;background-position:30px 40px}
  .hmw-win{position:absolute;left:14px;top:14px;right:14px;height:149px;overflow:hidden;padding:10px 12px 12px;border-radius:12px;background:#fcfdff;border:1px solid #edf0f5;box-shadow:0 4px 16px rgba(36,51,77,.08);
    font:400 10px/1.35 'Inter',sans-serif;color:#2b2e37;display:flex;flex-direction:column;gap:7px}
  .hmw-bar{display:flex;align-items:center;justify-content:space-between}
  .hmw-bar span{display:flex;gap:4px}.hmw-bar i{width:5px;height:5px;border-radius:50%;background:#dfe3ea}
  .hmw-bar small{font-size:8px;color:#646a78}
  .hmw-ui{display:flex;flex-direction:column;gap:7px}
  .hmw-head{display:flex;align-items:center;justify-content:space-between;gap:6px}
  .hmw-head b{font-size:11px;font-weight:500}
  .hmw-chip{font-style:normal;font-size:8px;font-weight:500;color:var(--a);background:var(--t);padding:2px 6px;border-radius:5px;white-space:nowrap}
  .hmw-row3{display:flex;gap:6px}
  .hmw-box{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:2px;padding:7px 8px;border-radius:7px;background:var(--t)}
  .hmw-box strong{font-size:12px;font-weight:600}
  .hmw-box span{font-size:7.5px;color:#646a78;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hmw-line{display:flex;justify-content:space-between;gap:6px;padding:5px 8px;border:1px solid #edf0f5;border-radius:6px;font-size:8.5px}
  .hmw-line span+span{font-size:8px;color:#646a78;white-space:nowrap}
  .hmw-tags{display:flex;flex-wrap:wrap;gap:5px}
  .hmw-tags span{padding:5px 7px;border-radius:6px;background:#fff;border:1px solid #edf0f5;font-size:8.5px}
  .hmw-field{display:flex;flex-direction:column;gap:1px;padding:5px 8px;border:1px solid #edf0f5;border-radius:6px}
  .hmw-field small{font-size:7px;color:#646a78}.hmw-field span{font-size:9px}
  .hmw-btn{padding:6px;border-radius:6px;background:var(--a);color:#fff;font-size:9px;font-weight:600;text-align:center}
  .hmw-bars{display:flex;align-items:flex-end;gap:6px;height:30px}
  .hmw-bars i{flex:1 1 0;border-radius:3px 3px 0 0;background:var(--t)}.hmw-bars i.hi{background:var(--a)}
  .hmw-sync{font-size:7.5px;color:#646a78;display:flex;align-items:center;gap:4px}
  .hmw-sync i{width:5px;height:5px;border-radius:50%;background:var(--a)}
  .hmw-hl{position:absolute;right:12px;top:137px;width:240px;display:flex;align-items:center;gap:8px;padding:8px 10px 8px 9px;border-radius:10px;background:#fcfdff;box-shadow:0 6px 18px rgba(36,51,77,.12);font-family:'Inter',sans-serif}
  .hmw-hl-ic{display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:7px;background:var(--t);color:var(--a)}
  .hmw-hl-t{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px}
  .hmw-hl-t b{font-size:9px;font-weight:500;color:var(--a)}
  .hmw-hl-t small{font-size:7.5px;color:#646a78}
  .hmw-hl>svg{flex:none;color:#646a78}
  .hmw-txt{display:flex;flex-direction:column;gap:8px;padding:6px 20px 24px}
  .hmw-txt h3{font-family:'Bricolage Grotesque',sans-serif;font-size:21px;font-weight:700;color:#14151a;margin:0}
  .hmw-txt p{font-family:'Hanken Grotesk',sans-serif;font-size:15px;line-height:1.5;color:#4b4f5c;margin:0}
  .pm-in .hmw-win{animation:pm-rise .7s cubic-bezier(.2,.8,.2,1) .12s backwards}
  .pm-in .hmw-hl{animation:pm-slide .6s cubic-bezier(.2,.8,.2,1) .4s backwards,pm-float 5s ease-in-out 1.1s infinite}
  .pm-in .hmw-bars i{transform-origin:bottom;animation:pm-grow .8s cubic-bezier(.2,.8,.2,1) .3s both}
  @keyframes pm-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
  @keyframes pm-slide{from{opacity:0;transform:translate(20px,6px)}to{opacity:1;transform:none}}
  @keyframes pm-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
  @keyframes pm-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
}
@media (max-width:760px) and (prefers-reduced-motion:reduce){
  .hmw-track{animation:none!important}.hmw-marq{overflow-x:auto}.hmw-dup{display:none!important}
  .pm-in .hmw-win,.pm-in .hmw-hl,.pm-in .hmw-bars i{animation:none!important}
}