/**
 * Tablet breakpoint band (769px–1023px)
 * Client UAT: ~820px width causes element overlap.
 * Desktop layout starts at 1024; mobile packing only applied ≤768,
 * so this mid band previously kept cramped desktop side-by-side rules.
 */

/* Local Noto Sans HK Light subset (啟動免疫機制) — localhost often fails Google Fonts @import */
@font-face {
  font-family: "Noto Sans HK";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/NotoSansHK-Light-title.woff2") format("woff2");
  unicode-range: U+514D, U+5236, U+52D5, U+555F, U+6A5F, U+75AB;
}

/* Did-you-know appearance: headline first, then video + copy + button together.
   Zero nth-child stagger so the second beat lands as one group. */
.dyk-title-seq.fadein-ele,
.dyk-title-seq.fadein-ele.scrolled,
.dyk-seq.fadein-ele,
.dyk-seq.fadein-ele.scrolled {
  transition-delay: 0s !important;
}

/* Optional hard-reveal mode (off by default via __frisoDykHardReveal) */
.did-you-know-chart-video.dyk-hard-reveal.dyk-chart-loading > div:first-child {
  opacity: 0;
  visibility: hidden;
}
.did-you-know-chart-video.dyk-hard-reveal.dyk-chart-ready > div:first-child {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.45s ease;
}

/* No spinning loader ball on the DYK chart */
.did-you-know-chart-video .canvas-loader,
#canvas-sequence-loader-a {
  display: none !important;
}

/*
 * Desktop logo rail: text left edge = the “F” inside the Friso logo mark
 * (not the blue logo tile). Nav padding 20px + centered max 1280 wrapper.
 * Logo asset: F starts ~21.6% into the image width; logo img is centered
 * in the nav logo column (text-align:center) → small extra nudge.
 */
@media screen and (min-width: 1024px) {
  body.friso-signature {
    --logo-rail-gutter: 20px;
    --logo-rail-max: 1280px;
    --logo-rail-width: calc(100% - (2 * var(--logo-rail-gutter)));
    --logo-rail-logo-col: 200px;
    --logo-rail-logo-width: 190px;
    --logo-rail-f-ratio: 0.216;
    --logo-rail-f-inset: calc(
      (var(--logo-rail-logo-col) - var(--logo-rail-logo-width)) / 2 +
        var(--logo-rail-logo-width) * var(--logo-rail-f-ratio)
    );
  }

  /* Keep nav gutters locked to the rail (overrides earlier crop shrinks) */
  body.friso-signature .navbar {
    padding-left: var(--logo-rail-gutter) !important;
    padding-right: var(--logo-rail-gutter) !important;
  }

  /* All left-aligned text sections: share F left (pad inside the rail) */
  .unbranded .friso-section-container-inner-wider,
  body.education .unbranded .friso-section-container-inner-wider,
  .unbranded #did-you-know .did-you-know-wrapper,
  body.education #did-you-know .did-you-know-wrapper,
  .unbranded .y-shape .trio-immune-content-wrapper,
  body.education .unbranded .y-shape .trio-immune-content-wrapper,
  /* 「寶寶抗體的來源」uses inner-full (1180) — pin to logo rail like other titles */
  .unbranded #source-of-antibodies > .friso-section-container-inner-full,
  body.education .unbranded #source-of-antibodies > .friso-section-container-inner-full,
  /* 「及時補充…抗體脆弱期」preserve section — same F left */
  .unbranded #preserve > .friso-section-container-inner-full,
  body.education .unbranded #preserve > .friso-section-container-inner-full {
    width: var(--logo-rail-width) !important;
    max-width: var(--logo-rail-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
    padding-left: var(--logo-rail-f-inset) !important;
  }

  /* Centered IgG bottom artboard — keep rail width only, no F pad */
  .unbranded .igG-benefits-subtitle,
  body.education .unbranded .igG-benefits-subtitle {
    width: var(--logo-rail-width) !important;
    max-width: var(--logo-rail-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  .unbranded #did-you-know.friso-section-container,
  body.education #did-you-know.friso-section-container {
    min-height: 100vh !important;
    min-height: 100dvh !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box;
    /* Clear fixed navbar; keep optical vertical center in remaining viewport */
    padding-top: 72px !important;
    padding-bottom: 2.5rem !important;
  }

  .unbranded #did-you-know .did-you-know-wrapper,
  body.education #did-you-know .did-you-know-wrapper {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    align-items: center;
  }

  .unbranded #did-you-know .did-you-know-wrapper-item:not(.did-you-know-wrapper-item-canvas),
  body.education #did-you-know .did-you-know-wrapper-item:not(.did-you-know-wrapper-item-canvas) {
    text-align: left !important;
  }

  .unbranded #did-you-know .did-you-know-title__img,
  .unbranded #did-you-know .did-you-know-content-description,
  body.education #did-you-know .did-you-know-title__img,
  body.education #did-you-know .did-you-know-content-description {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  .unbranded #did-you-know .did-you-know-title__img,
  body.education #did-you-know .did-you-know-title__img {
    left: auto !important;
    transform: none !important;
    width: auto !important;
    max-width: 100% !important;
    display: block !important;
  }

  .unbranded #antibody-vulnerable-period > .friso-section-container-inner-wider,
  body.education .unbranded #antibody-vulnerable-period > .friso-section-container-inner-wider {
    text-align: left !important;
  }

  .unbranded #antibody-vulnerable-period .antibody-vulnerable-period-wrapper-item-txt,
  body.education .unbranded #antibody-vulnerable-period .antibody-vulnerable-period-wrapper-item-txt {
    text-align: left !important;
    padding-left: 0 !important;
    --wrapperPaddingH: 0;
  }

  .unbranded #antibody-vulnerable-period .did-you-know-title__img--single-line,
  .unbranded #antibody-vulnerable-period .avp-content,
  body.education .unbranded #antibody-vulnerable-period .did-you-know-title__img--single-line,
  body.education .unbranded #antibody-vulnerable-period .avp-content {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  .unbranded #antibody-vulnerable-period .did-you-know-title__img--single-line,
  body.education .unbranded #antibody-vulnerable-period .did-you-know-title__img--single-line {
    left: auto !important;
    transform: none !important;
    width: auto !important;
    max-width: 100% !important;
    display: block !important;
  }

  .unbranded #source-of-antibodies .source-of-antibodies-wrapper-item-content,
  body.education .unbranded #source-of-antibodies .source-of-antibodies-wrapper-item-content {
    text-align: left !important;
    padding-left: 0 !important;
    --wrapperPaddingH: 0;
  }

  .unbranded #source-of-antibodies .did-you-know-title__img--single-line,
  body.education .unbranded #source-of-antibodies .did-you-know-title__img--single-line {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    left: auto !important;
    transform: none !important;
    width: auto !important;
    max-width: 100% !important;
    display: block !important;
  }

  /* baby-back.png: nudge left toward copy; keep clear of text */
  .unbranded #source-of-antibodies .source-of-antibodies-wrapper-item-img img,
  body.education .unbranded #source-of-antibodies .source-of-antibodies-wrapper-item-img img {
    transform-origin: bottom right;
    transform: translateX(-72px) scale(1.075);
  }

  .unbranded #preserve .preserve-wrapper-item-content,
  body.education .unbranded #preserve .preserve-wrapper-item-content {
    text-align: left !important;
    padding-left: 0 !important;
    --wrapperPaddingH: 0;
  }

  .unbranded #preserve .did-you-know-title__img--preserve,
  .unbranded #preserve .txt-normal,
  body.education .unbranded #preserve .did-you-know-title__img--preserve,
  body.education .unbranded #preserve .txt-normal {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    left: auto !important;
    transform: none !important;
    /* Do NOT force display:block — that overrides .mobile-only { display:none }
       and duplicates desktop + mobile body copy / titles. */
  }

  /* Desktop: only desktop copy/title; hide mobile variants */
  .unbranded #preserve .mobile-only,
  .unbranded #preserve .preserve-wrapper-content-mobile,
  .unbranded #preserve .preserve-title-seq.mobile-only,
  body.education .unbranded #preserve .mobile-only,
  body.education .unbranded #preserve .preserve-wrapper-content-mobile {
    display: none !important;
  }

  .unbranded #preserve .desktop-only,
  .unbranded #preserve .preserve-seq.desktop-only,
  body.education .unbranded #preserve .desktop-only {
    display: block !important;
  }

  .unbranded #preserve .did-you-know-title__img--preserve,
  body.education .unbranded #preserve .did-you-know-title__img--preserve {
    width: auto !important;
    max-width: 100% !important;
  }

  /* 「及時補充…抗體脆弱期」— full viewport band; content vertically centered */
  .unbranded #preserve.friso-section-container,
  body.education .unbranded #preserve.friso-section-container {
    min-height: 100vh !important;
    min-height: 100dvh !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box;
    /* Clear fixed navbar; optical vertical center in remaining viewport */
    padding-top: 72px !important;
    padding-bottom: 2.5rem !important;
    position: relative;
    z-index: 1;
  }

  .unbranded #preserve > .friso-section-container-inner-full,
  body.education .unbranded #preserve > .friso-section-container-inner-full {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    flex: 0 0 auto;
  }

  .unbranded #preserve .preserve-wrapper,
  body.education .unbranded #preserve .preserve-wrapper {
    align-items: flex-start;
  }

  .unbranded #preserve .preserve-wrapper-item-content,
  body.education .unbranded #preserve .preserve-wrapper-item-content {
    padding-top: 0 !important;
  }

  /* Section titles/copy flush to rail left (beat centered 90% text) */
  .unbranded .friso-section-container-inner-wider .did-you-know-title__img,
  .unbranded .friso-section-container-inner-wider .did-you-know-title__img--single-line,
  .unbranded .friso-section-container-inner-wider .did-you-know-title__img--subtitle,
  .unbranded .friso-section-container-inner-wider .txt-normal,
  .unbranded .friso-section-container-inner-wider h2,
  .unbranded .source-of-antibodies-wrapper-item-content,
  .unbranded .preserve-wrapper-item-content,
  body.education .unbranded .friso-section-container-inner-wider .did-you-know-title__img,
  body.education .unbranded .friso-section-container-inner-wider .did-you-know-title__img--single-line,
  body.education .unbranded .friso-section-container-inner-wider .did-you-know-title__img--subtitle,
  body.education .unbranded .friso-section-container-inner-wider .txt-normal,
  body.education .unbranded .source-of-antibodies-wrapper-item-content,
  body.education .unbranded .preserve-wrapper-item-content {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  /* 「兩大關鍵」body copy — center horizontally (not logo-rail left) */
  .unbranded #bioactive .bioactive-wrapper .txt-normal,
  .unbranded #bioactive .bioactive-wrapper .txt-normal.bioactive-seq,
  .unbranded #bioactive .bioactive-wrapper .txt-normal p,
  body.education .unbranded #bioactive .bioactive-wrapper .txt-normal,
  body.education .unbranded #bioactive .bioactive-wrapper .txt-normal p {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* -------------------------------------------------------------------------- */
@media screen and (min-width: 769px) and (max-width: 1023px) {
  #did-you-know {
    padding-top: 5em !important;
    padding-bottom: 2em !important;
  }

  .did-you-know-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center;
    gap: 1.5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .did-you-know-container .did-you-know-content {
    width: 88% !important;
    max-width: 640px;
    margin: 0 auto !important;
    text-align: center;
    padding-left: 0;
    flex: none !important;
  }

  .did-you-know-container .did-you-know-video {
    width: 88% !important;
    max-width: 640px;
    margin: 0 auto;
    flex: none !important;
    --chart-image-width: 100%;
  }

  .did-you-know-title__img {
    width: 100% !important;
    max-width: 100% !important;
    left: auto !important;
    transform: none !important;
  }

  /* Balls are desktop ornaments; at tablet they sit on top of chart/copy */
  .did-you-know-ball .did-you-know-ball-1,
  .did-you-know-ball .did-you-know-ball-2 {
    display: none !important;
  }
}

/* -------------------------------------------------------------------------- */
@media screen and (min-width: 769px) and (max-width: 1023px) {
  .key-visual {
    --kv-title-top: 12vh;
    --kv-ball-container-width: 42vw;
    --kv-ball-container-min-width: 220px;
    --kv-ball-container-transfrom: translate(-8vw, -10%);
  }

  .key-visual-title,
  .friso-home-tagline-container.key-visual-title {
    width: min(70vw, 28rem);
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
  }

  .key-visual-title__img {
    max-height: 10vh;
    width: auto;
    max-width: 100%;
  }
}

/* -------------------------------------------------------------------------- */
@media screen and (min-width: 769px) and (max-width: 1023px) {
  :root {
    --igg-text-left-ball-right: 85%;
    --igg-text-left-ball-bottom: 110%;
    --igg-text-left-ball-width: 28%;
    --igg-ball-1-width: 28%;
    --igg-ball-1-top: -180%;
  }

  .igg-bottom-ball {
    display: none !important;
  }
}

/* -------------------------------------------------------------------------- */
@media screen and (min-width: 769px) and (max-width: 1023px) {
  .friso-section-container.smart .smart-immu-container .smart-immu-content {
    padding-left: 4vw;
    padding-right: 4vw;
  }

  .smart-immu-content-title h3 {
    font-size: clamp(4rem, 12vw, 7rem);
  }

  .smart-immu .y-ball {
    transform: scale(0.9);
    transform-origin: center center;
  }

  .friso-section-container.smart .gallery-container-ele .txt-normal {
    max-width: 42%;
  }
}

/* -------------------------------------------------------------------------- */
@media screen and (min-width: 769px) and (max-width: 1023px) {
  .farm-animation-overlay .friso-section-container-inner-wider {
    padding-left: 5vw;
    padding-right: 5vw;
  }

  .patented-technology-step-num-1 {
    width: 8vw;
    right: calc(100% + 12px);
  }
}

/* -------------------------------------------------------------------------- */
/* Unbranded education — use MOBILE layout through tablet (769–1023)          */
/* Desktop min-width:769 rules otherwise keep side-by-side / absolute crop.   */
/* -------------------------------------------------------------------------- */
@media screen and (min-width: 769px) and (max-width: 1023px) {
  /* Same CSS vars as max-width:768 mobile block in revamp.css */
  .unbranded {
    --wrapperDirection: column-reverse;
    --wrapperItemTxtAlign: center;
    --wrapperPaddingH: 2rem;
    --did-you-know-wrapper-item-canvas-scale: scale(1);
    --unbranded-txt-large-font-size: 1.6rem;
    --soa-content-width: 0 0 100%;
    --soa-img-img-width: min(42vw, 300px);
    --soa-img-flex: 0 0 100%;
    --soa-img-width: 100%;
    --soa-wrapper-ai: center;
    --soa-content-pt: 0;
    --avp-item-width: 100%;
    --avp-wrapper-gap: 1rem;
    --ib-video-width: 70%;
    /* Keep point-out 組字 on-screen: -10% was clipped by overflow-x:hidden */
    --ib-txt-overlay-top: 12%;
    --ib-txt-overlay-right: 52%;
    --ib-txt-overlay-z: 20;
    --ib-kv-ball-l-w: 30vw;
    --ib-kv-ball-l-r: calc(100% - 20vw);
    --ib-kv-ball-r-w: 25vw;
    --ib-kv-ball-r-r: calc(100% - 16vw);
    --ib-kv-ball-tb: -50%;
    --ib-kv-ball-r-b: -25%;
    --ib-kv-ball-o: 0.5;
    --y-shape-1-txt-right: 68%;
    --y-shape-right-txt-left: 82%;
    --y-shape-1-txt-top: 35%;
    --y-shape-2-txt-btm: 82%;
    --y-shape-3-txt-top: 56%;
    --y-shape-bg-w: 160vw;
    --y-shape-1-dl-transform: skew(-20deg) translateX(-5px);
    --y-shape-1-dl-border-w: 1px 0 0 1px;
    --y-shape-2-3-dl-transform: skew(-20deg) translateX(-5px);
    --y-shape-txt-translate-y: 0%;
    /* CF desktop uses 400px; 100% made baby-hug-2 huge at ~841 tablet */
    --preserve-img-width: min(400px, 48vw);
    --preserve-content-pt: 0;
    --three-points-inner-display: none;
    --three-points-steps-h: auto;
    --three-points-txt-max-h: none;
    --three-points-wrapper-gap: 2rem;
  }

  /* Prefer mobile copy / titles (belt + suspenders; bundle already ≤1023) */
  .unbranded .desktop-only,
  .unbranded .desktop-br br {
    display: none !important;
  }
  .unbranded .mobile-only,
  .unbranded .mobile-br br {
    display: block !important;
  }

  /* Keep section content inside the viewport */
  .unbranded,
  .unbranded .friso-section-container,
  .unbranded .friso-section-container-inner-full,
  .unbranded .friso-section-container-inner-wider {
    max-width: 100% !important;
    overflow-x: hidden;
    box-sizing: border-box;
  }

  .unbranded .txt-normal,
  .unbranded .txt-body,
  .unbranded p,
  .unbranded .soa-seq,
  .unbranded .avp-content,
  .unbranded .y-shape-seq,
  .unbranded .bioactive-seq,
  .unbranded .preserve-seq {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .unbranded .did-you-know-wrapper {
    flex-direction: column !important;
    gap: 1.5rem;
    margin-top: 6vh !important;
  }

  .unbranded .did-you-know-wrapper-item-canvas {
    order: 2;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    transform: none !important;
  }

  .unbranded .did-you-know-wrapper-item:not(.did-you-know-wrapper-item-canvas) {
    display: contents;
  }

  .unbranded .did-you-know-wrapper-item:not(.did-you-know-wrapper-item-canvas) > div:nth-child(1) {
    order: 1;
  }

  .unbranded .did-you-know-wrapper-item:not(.did-you-know-wrapper-item-canvas) > div:nth-child(2) {
    order: 3;
  }

  .unbranded .did-you-know-wrapper-item:not(.did-you-know-wrapper-item-canvas) > div:nth-child(3) {
    order: 4;
  }

  /* 白色 point-out「天然活性免疫球蛋白IgG」— stay visible in tablet band (~939) */
  .unbranded .igG-benefits {
    overflow: visible !important;
  }

  .unbranded .igG-benefits .friso-section-container-inner-full {
    overflow: visible !important;
  }

  .unbranded .igG-benefits-core-video-text-overlay,
  .unbranded .igG-benefits-core-video-text-overlay.fadein-ele,
  .unbranded .igG-benefits-core-video-text-overlay.fadein-ele.scrolled {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    /* was -28% — nudge left a bit at tablet */
    transform: translateX(-40%) !important;
    z-index: 20 !important;
  }

  /* Match CloudFront: tablet titles use full-bleed 100vw (bundle rule) */
  .unbranded .did-you-know-title__img--igG-benefits,
  .unbranded .did-you-know-title__img--bioactive,
  .unbranded .did-you-know-title__img--preserve,
  .unbranded .did-you-know-title__img--subtitle,
  .unbranded #did-you-know .did-you-know-title__img,
  .unbranded .did-you-know-title__img--single-line,
  body.education .unbranded .did-you-know-title__img--igG-benefits {
    width: 100vw !important;
    max-width: 100vw !important;
    height: auto !important;
    max-height: none !important;
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Cancel desktop-only treatments that start at 769px */
  .unbranded .source-of-antibodies-wrapper-item-img img {
    transform: none !important;
    width: var(--soa-img-img-width) !important;
    max-width: 300px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }

  .unbranded .antibody-vulnerable-period-video {
    transform: none !important;
  }

  .unbranded .antibody-vulnerable-period-wrapper,
  .unbranded .source-of-antibodies-wrapper,
  .unbranded .preserve-wrapper {
    flex-direction: column-reverse !important;
    align-items: center !important;
  }

  .unbranded .antibody-vulnerable-period-wrapper-item,
  .unbranded .source-of-antibodies-wrapper-item-content,
  .unbranded .preserve-wrapper-item-content {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding-left: var(--wrapperPaddingH);
    padding-right: var(--wrapperPaddingH);
    box-sizing: border-box;
  }

  .unbranded .y-shape {
    margin-top: 4.5rem !important;
    border-bottom: 0 !important;
    overflow: visible !important;
    padding-bottom: 1.5rem;
  }

  .unbranded .y-shape.scrolled {
    border-bottom-color: transparent !important;
  }

  /* Stack title + copy above Y (no absolute overlap on ~810 tablet) */
  .unbranded .y-shape .trio-immune-content.y-shape-txt,
  .unbranded .y-shape-txt {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: 100%;
    max-width: 100%;
    padding-left: var(--wrapperPaddingH);
    padding-right: var(--wrapperPaddingH);
    box-sizing: border-box;
    margin: 0 auto 0.75rem;
    text-align: center !important;
  }

  /* Keep full Y in view — was 145–160vw and cropped at bottom */
  .unbranded .y-shape-bg-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible;
  }

  .unbranded .y-shape-bg-wrapper-bg {
    left: auto !important;
    width: min(100%, 720px) !important;
    max-width: 100% !important;
    transform: none !important;
    margin: 0 auto 0.5rem !important;
  }

  /* Subtitle above Y was oversized / overlapping the graphic */
  .unbranded .igG-benefits-subtitle {
    margin: 1.5rem auto 2.5rem !important;
  }

  /* Subtitle: CloudFront full-bleed on ≤1023 (no height lock) */
  .unbranded .igG-benefits-subtitle .did-you-know-title__img--subtitle {
    width: 100vw !important;
    max-width: 100vw !important;
    height: auto !important;
    max-height: none !important;
    margin-left: 0;
    margin-right: 0;
    display: block;
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  .unbranded .y-shape::after {
    background-position: center 300px;
    background-size: 150vw auto;
  }

  .unbranded .igG-benefits-kv-ball-left,
  .unbranded .igG-benefits-kv-ball-right {
    opacity: var(--ib-kv-ball-o, 0.5);
  }

  /* Prefer mobile title for video 1/2/3 (portrait Layout mp4s) */
  .unbranded .three-points-title-desktop,
  .unbranded .three-points-title-desktop.desktop-only {
    display: none !important;
  }

  .unbranded .three-points-title-mobile,
  .unbranded .three-points-title-mobile.mobile-only {
    display: block !important;
  }

  /*
   * Video 1/2/3 tablet: portrait mobile Layout + step webp overlays.
   */
  .unbranded .three-points-pin {
    background: #120b03;
  }

  .unbranded .three-points-video {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center;
    background: #120b03;
  }

  .unbranded .three-points-title-mobile {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box;
    top: max(6.5rem, 14vh) !important;
    z-index: 6 !important;
    text-align: center;
  }

  .unbranded .three-points-title-mobile.fadein-ele,
  .unbranded .three-points-title-mobile.fadein-ele.scrolled {
    transform: none !important;
  }

  /* CloudFront: title rail is 100vw; img fills it (no content-ratio scale) */
  .unbranded .three-points-title-mobile .three-points-title-text {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .unbranded .three-points-title-mobile img,
  .unbranded .three-points-title-mobile .three-points-title-img {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto;
  }

  .unbranded .three-points-cta {
    bottom: max(1.25rem, 8vh) !important;
    z-index: 6 !important;
  }

  .unbranded .three-points-cta .friso-rect-button {
    width: 155px;
  }

  /* Mobile/tablet mp4 has no burned-in 圖字 — show step webps above CTA */
  .unbranded .three-points-step-img,
  .unbranded .three-points-step-img.mobile-only {
    display: block !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    transform: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box;
    /* Extra gap above CTA (client: more space vs 觀看完整影片) */
    bottom: calc(max(1.25rem, 8vh) + 7.5rem) !important;
    z-index: 5 !important;
  }

  .unbranded .three-points-step-img img {
    display: block;
    width: min(100vw, 420px) !important;
    max-width: min(100vw, 420px) !important;
    height: auto !important;
    margin: 0 auto;
  }

  .unbranded .preserve-wrapper-item-img {
    width: var(--preserve-img-width);
    max-width: min(400px, 48vw);
    margin-left: auto;
    margin-right: auto;
  }

  .unbranded .preserve-wrapper-item-img img,
  .unbranded .preserve-wrapper-item-img img.mobile-only {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }

  .unbranded .bioactive-wrapper,
  .unbranded .gallery-container {
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* -------------------------------------------------------------------------- */
/* Unbranded UAT visual fixes                                                 */
/* -------------------------------------------------------------------------- */

/* Gallery spacing — match CloudFront: room above image + below image (caption) */
.unbranded .bioactive .bioactive-wrapper {
  margin-bottom: 0;
}
.unbranded .bioactive .bioactive-wrapper .txt-normal,
.unbranded #bioactive .bioactive-wrapper .txt-normal,
.unbranded #bioactive.gallery-scroll-pin .bioactive-wrapper .txt-normal {
  /* Gap above carousel */
  margin-top: 1em !important;
  margin-bottom: 2.2em !important;
  text-align: center !important;
}
.unbranded .bioactive .gallery-container {
  margin-top: 0;
  margin-bottom: 0;
}
.unbranded .bioactive .gallery-caption-container {
  margin-top: 1.5em;
  padding-top: 0;
}
.unbranded .bioactive .gallery-caption-ele {
  margin-top: 0;
  padding-top: 0;
}
.unbranded .bioactive .video-over-content {
  padding-bottom: 0.75rem;
}

/*
 * DYK CTA 「了解更多天然活性免疫球蛋白IgG」— match CloudFront sizing
 * (.friso-rect-button + .very-wide + .txt-label in education.bundle.css).
 * Do not shrink letter-spacing / font / padding vs CF.
 */
.unbranded .did-you-know-content-button.friso-rect-button.very-wide {
  white-space: nowrap !important;
  max-width: none !important;
  width: auto !important;
  min-width: 15em;
  letter-spacing: 0.3em !important;
  padding: 0.5em 1.3em !important;
  font-size: 1.1rem !important;
  line-height: 1.2;
  box-sizing: border-box;
}

@media screen and (min-width: 769px) {
  .unbranded .did-you-know-content-button.friso-rect-button.very-wide {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding-top: 0.55em !important;
    padding-bottom: 0.55em !important;
  }
}

@media screen and (max-width: 768px) {
  .unbranded .did-you-know-content-button.friso-rect-button.very-wide {
    font-size: 1.2rem !important;
  }

  /*
   * 「及時補充」body copy — 641–768 kept align-items:flex-start (only ≤640 was
   * centered), so the shrink-wrapped text sat left of the viewport.
   */
  .unbranded #preserve .preserve-wrapper,
  .unbranded .preserve-wrapper {
    align-items: center !important;
  }

  .unbranded #preserve .preserve-wrapper-item,
  .unbranded #preserve .preserve-wrapper-item-content,
  .unbranded #preserve .preserve-seq,
  .unbranded #preserve .preserve-wrapper-content-mobile,
  .unbranded .preserve-wrapper-item,
  .unbranded .preserve-wrapper-item-content,
  .unbranded .preserve-seq,
  .unbranded .preserve-wrapper-content-mobile {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .unbranded #preserve .preserve-title-seq,
  .unbranded #preserve .did-you-know-title__img--preserve {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }
}

/*
 * 641–768 × ~1080: push 「天然活性免疫球蛋白IgG為寶寶提供…」body copy down
 * (was sitting too tight under the title / above the baby image band).
 */
@media screen and (min-width: 641px) and (max-width: 768px) {
  .unbranded #preserve .preserve-wrapper-content-mobile,
  .unbranded #preserve .preserve-seq.preserve-wrapper-content-mobile,
  .unbranded .preserve-wrapper-content-mobile {
    margin-top: 2.75rem !important;
    padding-top: 0.5rem !important;
  }

  .unbranded #preserve .preserve-wrapper-item-content,
  .unbranded .preserve-wrapper-item-content {
    padding-top: 1.25rem !important;
  }
}

@media screen and (min-width: 641px) and (max-width: 768px) and (min-height: 1000px) {
  .unbranded #preserve .preserve-wrapper-content-mobile,
  .unbranded #preserve .preserve-seq.preserve-wrapper-content-mobile,
  .unbranded .preserve-wrapper-content-mobile {
    margin-top: 4rem !important;
  }
}

/* Preserve: never show both desktop + mobile body copy */
@media screen and (max-width: 1023px) {
  .unbranded #preserve .desktop-only,
  .unbranded #preserve .preserve-seq.desktop-only,
  .unbranded #preserve img.desktop-only,
  body.education .unbranded #preserve .desktop-only {
    display: none !important;
  }

  .unbranded #preserve .mobile-only,
  .unbranded #preserve .preserve-wrapper-content-mobile,
  .unbranded #preserve .preserve-seq.mobile-only,
  .unbranded #preserve img.mobile-only,
  body.education .unbranded #preserve .mobile-only,
  body.education .unbranded #preserve .preserve-wrapper-content-mobile {
    display: block !important;
  }
}

/* Video 1 dullness: replaced with client Layout_01 Desktop/Mobile exports
   (2026-09-06). Temporary CSS brightness lift removed. */

/* Brand ®: no extra gap before following text */
.sup-brand {
  margin-right: 0 !important;
}

/* -------------------------------------------------------------------------- */
/* Three-points video 1/2/3                                                   */
/* - ≤1023: mobile portrait Layout + mobile title                             */
/* - ≥1024: desktop 16:9 Layout + desktop title                               */
/* - title clears fixed navbar; CTA clears OneTrust banner band               */
/* -------------------------------------------------------------------------- */
.unbranded .three-points-pin {
  background: #120b03;
}

/* Soften bottom gradient — was dulling video 1 vs 2/3 */
.unbranded .three-points-pin::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3rem;
  background: linear-gradient(
    to top,
    rgba(18, 11, 3, 0.35) 0%,
    rgba(18, 11, 3, 0.12) 50%,
    rgba(18, 11, 3, 0) 100%
  );
  z-index: 4;
  pointer-events: none;
}

.unbranded .three-points-slide {
  z-index: 1;
}

.unbranded .three-points-video {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center;
  background: #120b03;
}

.unbranded .three-points-title-text {
  position: relative;
  z-index: 6;
  margin: 0;
  padding: 0;
  text-shadow: none;
}

/* Photo-text 「啟動免疫機制」— size like other 1920 / mobile SVG headlines */
.unbranded .three-points-title-img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

.unbranded .three-points-cta {
  z-index: 6 !important;
  transform: translateX(-50%) translateZ(0);
}

/* Phone + tablet: mobile title, portrait video, step webp overlays */
@media screen and (max-width: 1023px) {
  .unbranded .three-points-title-desktop,
  .unbranded .three-points-title-desktop.desktop-only {
    display: none !important;
  }

  .unbranded .three-points-title-mobile,
  .unbranded .three-points-title-mobile.mobile-only {
    display: block !important;
    z-index: 6 !important;
    /* Breathing space under fixed navbar */
    top: max(6.5rem, 14vh) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box;
    text-align: center;
  }

  .unbranded .three-points-title-mobile.fadein-ele,
  .unbranded .three-points-title-mobile.fadein-ele.scrolled {
    transform: none !important;
  }

  /* CloudFront: title rail is 100vw; img fills it (no content-ratio scale) */
  .unbranded .three-points-title-mobile .three-points-title-text {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .unbranded .three-points-title-mobile .three-points-title-img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  .unbranded .three-points-video {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center;
  }

  /* Mobile mp4 has no burned-in 圖字 — show step webps */
  .unbranded .three-points-step-img,
  .unbranded .three-points-step-img.mobile-only {
    display: block !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    transform: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box;
    /* Extra gap above CTA (client: more space vs 觀看完整影片) */
    bottom: calc(max(1.25rem, 8vh) + 7.5rem) !important;
    z-index: 5 !important;
  }

  .unbranded .three-points-step-img img {
    display: block;
    width: min(100vw, 420px) !important;
    max-width: min(100vw, 420px) !important;
    height: auto !important;
    margin: 0 auto;
  }

  /* While desktop mp4 is still loaded after resize, never show webp (double text) */
  .unbranded .three-points-pin[data-three-points-layout="desktop"] .three-points-step-img,
  .unbranded .three-points-pin[data-three-points-layout="desktop"] .three-points-step-img.mobile-only {
    display: none !important;
  }

  .unbranded .three-points-cta {
    bottom: max(1.25rem, 8vh) !important;
  }

  .unbranded .three-points-cta .friso-rect-button {
    width: 155px;
  }
}

@media screen and (min-width: 1024px) {
  .unbranded .three-points-title-mobile,
  .unbranded .three-points-title-mobile.mobile-only {
    display: none !important;
  }

  .unbranded .three-points-title-desktop,
  .unbranded .three-points-title-desktop.desktop-only {
    display: block !important;
    z-index: 6 !important;
    /* PPT8: move title lower toward video content (not tight under navbar) */
    top: clamp(8.5rem, 16vh, 11rem) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
    padding: 0;
    box-sizing: border-box;
    text-align: center;
    overflow: visible;
  }

  .unbranded .three-points-title-desktop.fadein-ele,
  .unbranded .three-points-title-desktop.fadein-ele.scrolled {
    transform: none !important;
  }

  /* Desktop photo-text — full-bleed like other 1920 headlines (not 420; that is mobile-only) */
  .unbranded .three-points-title-desktop .three-points-title-img {
    width: 1920px !important;
    max-width: none !important;
    height: auto;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
  }

  /* Desktop Layout mp4 already includes step copy */
  .unbranded .three-points-step-img {
    display: none !important;
  }

  /* Full-bleed video on wide desktops; title/CTA overlay on top */
  .unbranded .three-points-video {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center;
  }

  .unbranded .three-points-cta {
    /* Keep CTA inside the video, above the bottom edge */
    bottom: clamp(2.5rem, 7vh, 4.5rem) !important;
  }
}

/*
 * Tall desktop (viewport taller than 16:9) — PPT8 slide 2:
 * 不要crop圖片 → contain (full Layout frame)
 * 移下 → title/CTA sit inside the 16:9 video rect (not in letterbox)
 * Letterbox uses #120b03 to match pin (not pure black)
 */
@media screen and (min-width: 1024px) and (max-aspect-ratio: 16/9) {
  .unbranded .three-points-pin,
  .unbranded .three-points-video {
    background: #120b03 !important;
  }

  .unbranded .three-points-video {
    object-fit: contain !important;
    object-position: center center;
  }

  .unbranded .three-points-title-desktop,
  .unbranded .three-points-title-desktop.desktop-only {
    /* Inside video: letterbox top + larger inset so title sits lower */
    top: calc((100% - 100vw * 9 / 16) / 2 + clamp(4rem, 8vh, 6rem)) !important;
  }

  .unbranded .three-points-cta {
    /* 移下 into video frame above bottom letterbox */
    bottom: calc((100% - 100vw * 9 / 16) / 2 + 2.25rem) !important;
  }
}

/* -------------------------------------------------------------------------- */
/* Header: keep all nav + Signature CTA visible on mid widths                 */
/* Tablet desktop-nav: 992–1023 · Mid desktop: 1024–1199 · Full: ≥1200       */
/* -------------------------------------------------------------------------- */
@media screen and (min-width: 992px) and (max-width: 1199px) {
  body.friso-signature:not(.education) .navbar {
    padding-left: 20px;
    padding-right: 20px;
    overflow: visible;
  }

  body.friso-signature:not(.education) .navbar__wrapper {
    grid-template-columns: 160px minmax(0, 1fr) !important;
    gap: 16px !important;
    max-width: 100%;
  }

  body.friso-signature:not(.education) .navbar__logo {
    left: 0 !important;
    transform: none !important;
  }

  body.friso-signature:not(.education) .navbar__logo img {
    width: 150px !important;
  }

  body.friso-signature:not(.education) .navbar__menu {
    min-width: 0;
    overflow: visible;
    align-items: center;
  }

  /* Middle dropdowns — restore spacing (was crushed near 0) */
  body.friso-signature:not(.education) .navbar__menu-list.main {
    flex: 1 1 auto !important;
    width: 100%;
    min-width: 0;
    justify-content: flex-start !important;
    gap: clamp(1.25rem, 1.8vw, 2rem) !important;
  }

  body.friso-signature:not(.education) .navbar__menu-list.main > .navbar__menu-item {
    flex: 0 0 auto;
    text-align: left;
    min-width: 0;
    padding-right: 0.35em;
  }

  body.friso-signature:not(.education) .main .navbar__menu-item a {
    font-size: 14px;
    display: inline-block;
    max-width: 100%;
    text-align: left;
    white-space: nowrap;
  }

  /* Match desktop arrow clearance (navigation.css: right:-16px, pad 10px) */
  body.friso-signature .navbar .arrow-down,
  body.education .navbar .arrow-down {
    right: -16px !important;
    top: 4px !important;
  }

  body.friso-signature .navbar__menu-item:has(> a > .arrow-down),
  body.education .navbar__menu-item:has(> a > .arrow-down) {
    padding-right: 10px !important;
  }

  body.friso-signature:not(.education) .navbar__btn-cta-wrapper.desktop {
    display: flex !important;
    margin-left: 0.75rem !important;
    margin-right: 0 !important;
    flex-shrink: 0;
  }

  body.friso-signature:not(.education) .navbar .friso-rect-button {
    width: auto !important;
    min-width: 8.5rem;
    max-width: 10rem;
    padding: 0.45rem 0.65rem !important;
    font-size: 10px !important;
    line-height: 1.15;
    white-space: normal;
    box-sizing: border-box;
  }
}

@media screen and (min-width: 1024px) and (max-width: 1199px) {
  body.friso-signature:not(.education) .main .navbar__menu-item a {
    font-size: 14px;
  }

  body.friso-signature:not(.education) .navbar .friso-rect-button {
    min-width: 9rem;
    max-width: 10.5rem;
    font-size: 11px !important;
    padding: 0.5rem 0.75rem !important;
  }
}

/* -------------------------------------------------------------------------- */
/* ≥1024: y-shape title/copy left-align with logo rail (not 90%/1180)         */
/* -------------------------------------------------------------------------- */
@media screen and (min-width: 1024px) {
  /* Full viewport so the text rail can center like the logo band */
  .unbranded .y-shape .friso-section-container-inner-full {
    width: 100% !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Same logo rail as DYK / AVP / navbar */
  .unbranded .y-shape .trio-immune-content-wrapper {
    position: relative !important;
    text-align: left !important;
    box-sizing: border-box;
  }

  .unbranded .y-shape .trio-immune-content.y-shape-txt,
  .unbranded .y-shape-txt {
    left: var(--logo-rail-f-inset) !important;
    right: auto !important;
    width: auto !important;
    max-width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: left !important;
    box-sizing: border-box;
  }

  .unbranded .y-shape .y-shape-title-seq,
  .unbranded .y-shape .y-shape-title-seq h2,
  .unbranded .y-shape .y-shape-seq,
  .unbranded .y-shape .y-shape-seq p {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .unbranded .y-shape .did-you-know-title__img--single-line {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    left: auto !important;
    transform: none !important;
  }
}

/* Tablet narrow: keep stacked y-shape (no absolute overlay) */
@media screen and (min-width: 769px) and (max-width: 959px) {
  .unbranded .y-shape .trio-immune-content.y-shape-txt {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    padding-left: var(--wrapperPaddingH);
    padding-right: var(--wrapperPaddingH);
    text-align: center !important;
  }

  .unbranded .y-shape-bg-wrapper-bg {
    left: auto !important;
    width: min(92vw, 680px) !important;
    max-width: 100% !important;
    transform: none !important;
  }
}

/*
 * Large desktop: CF absolute text overlay on Y.
 */
@media screen and (min-width: 1280px) {
  .unbranded {
    --y-shape-1-txt-top: 47%;
    --y-shape-1-txt-right: 75.3%;
    --y-shape-1-dl-border-w: 1px 1px 0 0;
    --y-shape-right-txt-left: 73%;
    --y-shape-2-txt-btm: 83%;
    --y-shape-3-txt-top: 64%;
    --y-shape-bg-w: 100%;
    --y-shape-1-dl-transform: skew(40deg) translateX(10px);
    --y-shape-2-3-dl-transform: skew(-40deg) translateX(-10px);
    --y-shape-txt-translate-y: 60%;
  }

  .unbranded .y-shape-txt,
  .unbranded .y-shape .trio-immune-content.y-shape-txt {
    position: absolute !important;
    top: 0.5rem !important;
    left: var(--logo-rail-f-inset) !important;
    width: auto !important;
    max-width: 100%;
    transform: translateY(var(--y-shape-txt-translate-y)) translateX(0) !important;
    text-align: left !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box;
  }

  .unbranded .y-shape-bg-wrapper-bg {
    left: 47.5% !important;
    max-width: 1280px !important;
    width: var(--y-shape-bg-w) !important;
    transform: translateX(-50%) !important;
  }
}

/*
 * Mid desktop (~1024–1279): keep Y fully visible (no border-bottom crop),
 * but title/copy stay CF-aligned (left:0 in 1180 column) — absolute overlay.
 */
@media screen and (min-width: 1024px) and (max-width: 1279px) {
  .unbranded {
    --y-shape-bg-w: 100%;
    --y-shape-txt-translate-y: 60%;
  }

  .unbranded .y-shape {
    margin-top: 5rem !important;
    border-bottom: 0 !important;
    overflow: visible !important;
    padding-bottom: 2rem !important;
  }

  .unbranded .y-shape .trio-immune-content.y-shape-txt,
  .unbranded .y-shape-txt {
    position: absolute !important;
    top: 0.5rem !important;
    left: var(--logo-rail-f-inset) !important;
    width: auto !important;
    max-width: 100%;
    transform: translateY(var(--y-shape-txt-translate-y)) translateX(0) !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: left !important;
    box-sizing: border-box;
  }

  .unbranded .y-shape-bg-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible;
  }

  .unbranded .y-shape-bg-wrapper-bg {
    left: 50% !important;
    width: min(100%, 1100px) !important;
    max-width: min(1100px, 100%) !important;
    transform: translateX(-50%) !important;
    margin: 0 auto !important;
  }

  .unbranded .igG-benefits-subtitle {
    margin-bottom: 3rem !important;
  }
}

/* -------------------------------------------------------------------------- */
/* Bioactive gallery pin                                                      */
/* Deck: 圖要係中間 — center title + image + bottom caption in the viewport   */
/* -------------------------------------------------------------------------- */
.unbranded #bioactive.gallery-scroll-pin {
  position: relative;
  z-index: 3;
  background: transparent !important;
  box-sizing: border-box;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* Kill education gallery’s 10em padding that pushes caption off-screen */
  padding-top: 5.5rem !important;
  padding-bottom: 1.5rem !important;
  /* Must fill the viewport while pinned — otherwise content stays top-stuck */
  min-height: 100vh !important;
  min-height: 100dvh !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
}

/*
 * Tablet / phone (e.g. 751×723): flex-center + short viewport clips the
 * bioactive title under the hanging Friso logo. Start from the top with
 * enough padding to clear the navbar + logo.
 */
@media screen and (max-width: 1023px) {
  .unbranded #bioactive.gallery-scroll-pin {
    justify-content: flex-start !important;
    padding-top: max(7.75rem, 16vh) !important;
    padding-bottom: 1.25rem !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }

  .unbranded #bioactive.gallery-scroll-pin.gallery-pin-active {
    overflow-y: hidden !important;
  }

  .unbranded #bioactive.gallery-scroll-pin .bioactive-wrapper {
    margin-top: 0.25rem;
    margin-bottom: 0.5rem;
  }

  .unbranded #bioactive.gallery-scroll-pin .did-you-know-title__img--bioactive {
    display: block;
    position: relative;
    z-index: 2;
  }

  /* Tablet/phone: keep full 16:9 carousel image (no crop) */
  .unbranded #bioactive .poster-container-inner {
    padding-bottom: 56.25% !important;
    height: 0 !important;
    max-height: none !important;
    background-size: cover !important;
    background-position: center center !important;
  }
}

/* Any short laptop height (incl. 1024×1020): top-align; nav clearance via padding */
@media screen and (max-height: 1020px) {
  .unbranded #bioactive.gallery-scroll-pin {
    justify-content: flex-start !important;
  }
}

/* Overflow: keep title at top (no JS translate — that felt jumpy) */
.unbranded #bioactive.gallery-scroll-pin.gallery-needs-center {
  justify-content: flex-start !important;
}

/* Desktop column width only — mobile/tablet use full-bleed below */
@media screen and (min-width: 1025px) {
  .unbranded #bioactive.gallery-scroll-pin > .friso-section-container-inner-full {
    flex: 0 0 auto;
    width: 90%;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    /* Allow GSAP y translate for step-2 whole-section reveal (dots were clipped) */
  }
}

.unbranded #bioactive.gallery-scroll-pin .bioactive-wrapper {
  margin-bottom: 0;
}

.unbranded #bioactive.gallery-scroll-pin .bioactive-wrapper .txt-normal {
  margin-top: 1em !important;
  margin-bottom: 2.2em !important;
}

/* Bottom caption: absolute inactive slides must not collapse height */
.unbranded #bioactive .gallery-caption-container {
  position: relative !important;
  width: 100% !important;
  margin-top: 1.5em !important;
  margin-bottom: 0 !important;
  min-height: 4.5rem;
}

.unbranded #bioactive .gallery-caption-ele {
  position: absolute;
  left: 0;
  top: 0;
  width: 100% !important;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.unbranded #bioactive .gallery-caption-ele.active {
  position: relative;
  opacity: 1;
  pointer-events: auto;
}

.unbranded #bioactive .gallery-indicator-container {
  position: relative !important;
  top: auto !important;
  margin: 1.25rem auto 0 !important;
  height: auto;
}

/* 1024+ desktop: pin at top; padding clears fixed navbar so 「兩大關鍵」stays fully visible */
@media screen and (min-width: 1024px) {
  /* Free-scroll (after pin): natural height + visible Y so indicator dots aren’t cropped */
  .unbranded #bioactive.gallery-scroll-pin {
    height: auto !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    justify-content: flex-start !important;
    align-items: center !important;
    /* Measured nav height from gallery-scroll-pin.js (+ breathing room) */
    padding-top: calc(var(--bioactive-nav-clearance, 72px) + 1.25rem) !important;
    padding-bottom: 2.5rem !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }

  /* Only while ScrollTrigger pin is active — clip + lock to viewport for step scrub */
  .unbranded #bioactive.gallery-scroll-pin.gallery-pin-active {
    height: 100vh !important;
    height: 100dvh !important;
    overflow-y: hidden !important;
  }
}

/* Mobile/tablet: lock bioactive layout while ScrollTrigger pin is active
 * (slide-3: 幅圖位置要fix — was free-scrolling inside the pin). */
@media screen and (max-width: 1023px) {
  .unbranded #bioactive.gallery-scroll-pin.gallery-pin-active {
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    box-sizing: border-box !important;
  }
}

@media screen and (min-width: 1024px) {
  .unbranded #bioactive.gallery-scroll-pin > .friso-section-container-inner-full {
    flex: 0 0 auto;
    margin-top: 0;
    margin-bottom: 0;
    width: 90%;
    max-width: 1280px;
    /* GSAP sets translateY on reveal — do not force transform:none */
  }

  .unbranded #bioactive.gallery-scroll-pin .bioactive-wrapper {
    margin-bottom: 0;
    flex-shrink: 0;
  }

  .unbranded #bioactive.gallery-scroll-pin .bioactive-title-seq,
  .unbranded #bioactive.gallery-scroll-pin .did-you-know-title__img--bioactive {
    position: relative;
    z-index: 2;
    overflow: visible !important;
  }

  .unbranded #bioactive.gallery-scroll-pin .bioactive-wrapper .txt-normal {
    margin-top: 0.75em !important;
    margin-bottom: 2.2em !important;
  }

  .unbranded #bioactive.gallery-scroll-pin .gallery-container {
    width: 100%;
    margin-top: 0;
    margin-left: auto;
    margin-right: auto;
    /* Prefer a readable carousel; short viewports may clip dots — JS reveal step scrolls them in */
    max-width: min(100%, calc((100vh - var(--bioactive-nav-clearance, 72px) - 9rem) * 16 / 9));
  }

  .unbranded #bioactive.gallery-scroll-pin .poster-container-inner {
    padding-bottom: 56.25% !important;
    height: 0 !important;
    max-height: none !important;
    background-size: cover !important;
    background-position: center center !important;
  }

  .unbranded #bioactive.gallery-scroll-pin .gallery-caption-container {
    margin-top: 1em !important;
    min-height: 3.75rem;
    padding-bottom: 0.25rem;
    flex-shrink: 0;
  }

  .unbranded #bioactive.gallery-scroll-pin .gallery-indicator-container {
    margin: 0.85rem auto 0.75rem !important;
    padding-bottom: 0.25rem;
    flex-shrink: 0;
    position: relative !important;
    top: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 2;
  }
}

/* Short height: keep nav clearance — shrink carousel instead of top padding */
@media screen and (min-width: 1024px) and (max-height: 900px) {
  .unbranded #bioactive.gallery-scroll-pin {
    padding-top: calc(var(--bioactive-nav-clearance, 72px) + 0.85rem) !important;
    padding-bottom: 1.5rem !important;
    justify-content: flex-start !important;
  }

  .unbranded #bioactive.gallery-scroll-pin .bioactive-wrapper .txt-normal {
    margin-top: 0.45em !important;
    margin-bottom: 2.2em !important;
    font-size: 0.92em;
  }

  .unbranded #bioactive.gallery-scroll-pin .gallery-container {
    max-width: min(100%, calc((100vh - var(--bioactive-nav-clearance, 72px) - 8rem) * 16 / 9));
  }

  .unbranded #bioactive.gallery-scroll-pin .gallery-caption-container {
    margin-top: 0.75em !important;
    min-height: 3.25rem;
  }

  .unbranded #bioactive.gallery-scroll-pin .gallery-indicator-container {
    margin: 0.65rem auto 0.5rem !important;
  }
}

@media screen and (min-width: 1024px) and (max-height: 760px) {
  .unbranded #bioactive.gallery-scroll-pin {
    padding-top: calc(var(--bioactive-nav-clearance, 72px) + 0.65rem) !important;
    padding-bottom: 1rem !important;
  }

  .unbranded #bioactive.gallery-scroll-pin .gallery-container {
    max-width: min(92%, calc((100vh - var(--bioactive-nav-clearance, 72px) - 7rem) * 16 / 9));
  }

  .unbranded #bioactive.gallery-scroll-pin .bioactive-wrapper .txt-normal {
    margin-bottom: 2.2em !important;
    font-size: 0.88em;
  }
}

/* Breathing space so 「及時補充」 headline does not overlap pinned bricks */
.unbranded #preserve.friso-section-container,
.unbranded [name="preserve"] > .friso-section-container {
  padding-top: clamp(3rem, 8vh, 6rem);
  position: relative;
  z-index: 1;
}

.unbranded #preserve .preserve-title-seq,
.unbranded #preserve .did-you-know-title__img--preserve {
  position: relative;
  z-index: 2;
}

/*
 * Title sizes — match CloudFront (d14j587… education.bundle.css).
 * Do not invent height locks / content-ratio artboard scales here.
 */
@media screen and (max-width: 1023px) {
  .unbranded .did-you-know-title__img,
  .unbranded .did-you-know-title__img--single-line,
  .unbranded .did-you-know-title__img--igG-benefits,
  .unbranded .did-you-know-title__img--bioactive,
  .unbranded .did-you-know-title__img--preserve,
  .unbranded .did-you-know-title__img--subtitle,
  .unbranded #did-you-know .did-you-know-title__img,
  .unbranded .igG-benefits-subtitle .did-you-know-title__img--subtitle {
    width: 100vw !important;
    max-width: 100vw !important;
    height: auto !important;
    max-height: none !important;
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    aspect-ratio: auto !important;
  }

  /*
   * Beat education.bundle (min-width:769) width:1920px on IgG title —
   * that rule was cropping the mobile SVG left/right below 1024 and
   * mis-aligning it vs other 100vw headlines.
   */
  body.education .unbranded .did-you-know-title__img--igG-benefits,
  .unbranded .igG-benefits .did-you-know-title__img--igG-benefits {
    width: 100vw !important;
    max-width: 100vw !important;
    height: auto !important;
    max-height: none !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin-top: 1.25rem !important;
    margin-bottom: 0.5rem !important;
    display: block !important;
  }

  body.education .unbranded .igG-benefits > .igghead .friso-section-container-inner-full,
  body.education .unbranded .igG-benefits > .igghead h2,
  body.education .unbranded .igG-benefits > .igghead picture {
    overflow: visible !important;
    max-width: 100% !important;
  }

  .unbranded .three-points-title-mobile .three-points-title-text {
    width: 100% !important;
    max-width: 100% !important;
  }

  .unbranded .three-points-title-mobile img,
  .unbranded .three-points-title-mobile .three-points-title-img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }
}

@media screen and (min-width: 1024px) {
  /* CF: single-line / DYK use max-height ~32px, not a forced 36px height */
  .unbranded #did-you-know .did-you-know-title__img,
  .unbranded .did-you-know-title__img--single-line,
  .unbranded .y-shape .did-you-know-title__img--single-line {
    height: auto !important;
    max-height: 32px !important;
    width: auto !important;
    max-width: 100% !important;
    left: auto !important;
    transform: none !important;
  }

  /*
   * Desktop subtitle 「有助主動出擊 精準擊退威脅」— 1920×29.5 artboard
   * (01FRC…-09.svg) with large L/R pads; full-bleed like photo titles.
   */
  .unbranded .igG-benefits-subtitle .did-you-know-title__img--subtitle,
  .unbranded .did-you-know-title__img--igG-benefits,
  .unbranded .did-you-know-title__img--bioactive {
    width: 100vw !important;
    max-width: 1920px !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: block;
  }

  .unbranded .did-you-know-title__img--preserve {
    max-width: 100% !important;
    max-height: 80px !important;
    height: auto !important;
    width: auto !important;
    left: auto !important;
    transform: none !important;
  }

  .unbranded .three-points-title-desktop .three-points-title-img {
    width: 1920px !important;
    max-width: none !important;
    height: auto !important;
  }
}

@media screen and (min-width: 1025px) {
  .unbranded .igG-benefits-subtitle .did-you-know-title__img--subtitle,
  .unbranded .did-you-know-title__img--igG-benefits,
  .unbranded .did-you-know-title__img--bioactive {
    width: 1920px !important;
    max-width: none !important;
  }
}

/*
 * ~1024–1200: 「特有優勢」+「兩大關鍵」desktop SVGs (1920×73.91) have large
 * L/R empty pads. Scale artboard so the glyph band fits in the viewport —
 * MUST clip at 100vw (not the 90% inner). Path bbox ≈ 1019/1920 ≈ 0.531.
 */
@media screen and (min-width: 1024px) and (max-width: 1200px) {
  .unbranded {
    /* Leave ~3vw side air so ends aren’t flush-cropped */
    --photo-title-text-target: min(94vw, 1040px);
    --photo-title-content-ratio: 0.531;
    --photo-title-artboard: calc(
      var(--photo-title-text-target) / var(--photo-title-content-ratio)
    );
  }

  /* Title lives inside .bioactive-wrapper — don’t clip the 100vw breakout */
  .unbranded #bioactive .bioactive-wrapper {
    overflow-x: visible !important;
  }

  .unbranded .igghead h2,
  .unbranded #bioactive .bioactive-title-seq {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    max-width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    box-sizing: border-box;
  }

  /* Bioactive only — overflow-x:hidden + overflow-y:visible collapses to clip
     (CSS gotcha) and was shearing 「特有優勢」on the IgG title. */
  .unbranded #bioactive .bioactive-title-seq {
    overflow-x: hidden;
    overflow-y: visible;
  }

  .unbranded .igghead h2,
  .unbranded .igghead picture {
    overflow: visible !important;
    line-height: normal !important;
    height: auto !important;
    max-height: none !important;
  }

  .unbranded .did-you-know-title__img--igG-benefits,
  .unbranded .did-you-know-title__img--bioactive {
    width: var(--photo-title-artboard) !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: 1920 / 73.91;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
    position: relative !important;
    flex-shrink: 0;
    overflow: visible !important;
  }
}

/*
 * IgG ball — 4 layouts only:
 *  1) Mobile ≤768                          → education.bundle (untouched)
 *  2) Tablet mobile-layout 769–1023        → block above (untouched)
 *  3) Tablet desktop-layout 1024–1199      → this block
 *  4) Desktop ≥1200                        → pin + short-height below (unchanged look)
 */

/* --- 3) Tablet (desktop layout): one ball + label recipe for 1024–1199 --- */
@media screen and (min-width: 1024px) and (max-width: 1199px) {
  body.education .unbranded {
    --ib-video-width: 40%;
    --ib-core-boost: 1.78;
    --ib-core-max: 280px;
    --ib-diagonal-h: 50px;
    --ib-diagonal-tx: 16px;
    --ib-ball-vh-max: calc(100dvh - 15rem);
    --ib-kv-ball-size: calc(var(--ib-core-max) * var(--ib-core-boost) / 2.7);
    --ib-kv-ball-l-w: var(--ib-kv-ball-size);
    --ib-kv-ball-r-w: calc(var(--ib-kv-ball-size) * 1.035);
    --ib-kv-ball-l-r: calc(100% - (var(--ib-kv-ball-size) * 0.85));
    --ib-kv-ball-r-r: calc(100% - (var(--ib-kv-ball-r-w) * 0.5));
    --ib-kv-ball-tb: 10%;
    --ib-kv-ball-r-b: -6%;
    --ib-kv-ball-o: 0.4;
  }

  .unbranded .igG-benefits,
  body.education .unbranded .igG-benefits {
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding-top: 4.75rem !important;
    padding-bottom: 0.5rem !important;
  }

  .unbranded .igG-benefits > .igghead,
  .unbranded .igG-benefits > .igghead.autoH,
  body.education .unbranded .igG-benefits > .igghead,
  body.education .unbranded .igG-benefits > .igghead.autoH {
    flex: 0 0 auto !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    height: auto !important;
  }

  .unbranded .igG-benefits > .igghead h2,
  .unbranded .igG-benefits > .igghead picture,
  body.education .unbranded .igG-benefits > .igghead h2,
  body.education .unbranded .igG-benefits > .igghead picture {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .unbranded .did-you-know-title__img--igG-benefits,
  body.education .unbranded .did-you-know-title__img--igG-benefits {
    width: 1920px !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: 1920 / 73.91;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    margin-top: 0.35rem !important;
    margin-bottom: -1rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow: visible !important;
    z-index: 4 !important;
    display: block !important;
    flex-shrink: 0 !important;
  }

  .unbranded .igG-benefits > .igG-benefits-kv,
  .unbranded .igG-benefits > .igG-benefits-kv.autoH,
  body.education .unbranded .igG-benefits > .igG-benefits-kv,
  body.education .unbranded .igG-benefits > .igG-benefits-kv.autoH {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    margin-top: -0.5rem !important;
    margin-bottom: -0.75rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
  }

  body.education .unbranded .igG-benefits-kv-wrapper,
  .unbranded .igG-benefits-kv-wrapper {
    overflow: visible !important;
  }

  body.education .unbranded .igG-benefits-kv-ball-left,
  body.education .unbranded .igG-benefits-kv-ball-right,
  .unbranded .igG-benefits-kv-ball-left,
  .unbranded .igG-benefits-kv-ball-right {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 5 !important;
  }

  body.education .unbranded .igG-benefits-core-video-wrapper,
  .unbranded .igG-benefits-core-video-wrapper {
    width: min(
      calc(var(--ib-core-max) * var(--ib-core-boost)),
      calc(var(--ib-video-width) * var(--ib-core-boost)),
      var(--ib-ball-vh-max, 100vh),
      100%
    ) !important;
    max-width: 100% !important;
    max-height: min(100%, var(--ib-ball-vh-max, 100vh)) !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    position: relative !important;
  }

  body.education .unbranded .igG-benefits-core-video.core-video-container,
  .unbranded .igG-benefits-core-video.core-video-container {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    position: relative !important;
    z-index: 10 !important;
  }

  /* Label: tip-on-rim ratios for mid ball (not desktop 130/142) */
  body.education .unbranded .igG-benefits-core-video-text-overlay,
  body.education .unbranded .igG-benefits-core-video-text-overlay.fadein-ele,
  body.education .unbranded .igG-benefits-core-video-text-overlay.fadein-ele.scrolled,
  .unbranded .igG-benefits-core-video-text-overlay,
  .unbranded .igG-benefits-core-video-text-overlay.fadein-ele,
  .unbranded .igG-benefits-core-video-text-overlay.fadein-ele.scrolled {
    top: 26% !important;
    right: 100% !important;
    left: auto !important;
    transform: none !important;
    z-index: auto !important;
  }

  body.education .unbranded .igG-benefits-core-video-text-overlay .text-overlay,
  .unbranded .igG-benefits-core-video-text-overlay .text-overlay {
    position: relative !important;
    z-index: 20 !important;
    transform: translateX(70px) !important;
  }

  body.education .unbranded .igG-benefits-core-video-text-overlay .diagonal-line,
  .unbranded .igG-benefits-core-video-text-overlay .diagonal-line {
    width: 115% !important;
    height: var(--ib-diagonal-h) !important;
    position: relative !important;
    z-index: 1 !important;
    transform: skewX(40deg) translateX(90px) !important;
    margin-top: 0.45rem !important;
  }

  .unbranded .igG-benefits > .igG-benefits-subtitle,
  body.education .unbranded .igG-benefits > .igG-benefits-subtitle {
    flex: 0 0 auto !important;
    margin: 0 auto !important;
    margin-top: -0.25rem !important;
    padding-bottom: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    overflow: visible !important;
    display: flex !important;
    justify-content: center !important;
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 5 !important;
  }

  .unbranded .igG-benefits-subtitle .did-you-know-title__img--subtitle,
  body.education .unbranded .igG-benefits-subtitle .did-you-know-title__img--subtitle {
    width: 1920px !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: 1920 / 29.5;
    margin: 0 auto !important;
    display: block !important;
  }
}

/* --- 4) Desktop ≥1200: same pin + short-height shrinks as before --- */
@media screen and (min-width: 1200px) {
  body.education .unbranded .igG-benefits-core-video-wrapper,
  .unbranded .igG-benefits-core-video-wrapper {
    width: min(
      calc(var(--ib-core-max) * var(--ib-core-boost)),
      calc(var(--ib-video-width) * var(--ib-core-boost)),
      var(--ib-ball-vh-max, 100vh)
    ) !important;
    max-width: 100% !important;
    max-height: var(--ib-ball-vh-max, 100vh) !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    position: relative !important;
  }

  body.education .unbranded .igG-benefits-core-video.core-video-container,
  .unbranded .igG-benefits-core-video.core-video-container {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    position: relative !important;
    z-index: 10 !important;
  }

  body.education .unbranded .igG-benefits-core-video-text-overlay,
  body.education .unbranded .igG-benefits-core-video-text-overlay.fadein-ele,
  body.education .unbranded .igG-benefits-core-video-text-overlay.fadein-ele.scrolled,
  .unbranded .igG-benefits-core-video-text-overlay,
  .unbranded .igG-benefits-core-video-text-overlay.fadein-ele,
  .unbranded .igG-benefits-core-video-text-overlay.fadein-ele.scrolled {
    top: 28% !important;
    right: 100% !important;
    left: auto !important;
    transform: none !important;
    z-index: auto !important;
  }

  body.education .unbranded .igG-benefits-core-video-text-overlay .text-overlay,
  .unbranded .igG-benefits-core-video-text-overlay .text-overlay {
    position: relative !important;
    z-index: 20 !important;
    transform: translateX(130px) !important;
  }

  body.education .unbranded .igG-benefits-core-video-text-overlay .diagonal-line,
  .unbranded .igG-benefits-core-video-text-overlay .diagonal-line {
    width: 115% !important;
    height: var(--ib-diagonal-h) !important;
    position: relative !important;
    z-index: 1 !important;
    transform: skewX(40deg) translateX(142px) !important;
    margin-top: 0.5rem !important;
  }
}

/* Desktop short: preserve previous ≥1024 short-height look, scoped to ≥1200 */
@media screen and (min-width: 1200px) and (max-height: 889px) {
  body.education .unbranded {
    --ib-video-width: 40%;
    --ib-core-boost: 1.78;
    --ib-core-max: 320px;
    --ib-diagonal-h: 58px;
    --ib-diagonal-tx: 16px;
    --ib-ball-vh-max: calc(100dvh - 17.5rem);
    --ib-kv-ball-size: calc(var(--ib-core-max) * var(--ib-core-boost) / 2.7);
    --ib-kv-ball-l-w: var(--ib-kv-ball-size);
    --ib-kv-ball-r-w: calc(var(--ib-kv-ball-size) * 1.035);
    --ib-kv-ball-l-r: calc(100% - (var(--ib-kv-ball-size) * 0.85));
    --ib-kv-ball-r-r: calc(100% - (var(--ib-kv-ball-r-w) * 0.5));
    --ib-kv-ball-tb: 10%;
    --ib-kv-ball-r-b: -6%;
    --ib-kv-ball-o: 0.4;
  }

  body.education .unbranded .igG-benefits-core-video-wrapper,
  .unbranded .igG-benefits-core-video-wrapper {
    width: min(
      calc(var(--ib-core-max) * var(--ib-core-boost)),
      calc(var(--ib-video-width) * var(--ib-core-boost)),
      var(--ib-ball-vh-max, 100vh),
      100%
    ) !important;
    max-height: min(100%, var(--ib-ball-vh-max, 100vh)) !important;
  }

  body.education .unbranded .igG-benefits-core-video-text-overlay .text-overlay,
  .unbranded .igG-benefits-core-video-text-overlay .text-overlay {
    transform: translateX(85px) !important;
  }

  body.education .unbranded .igG-benefits-core-video-text-overlay .diagonal-line,
  .unbranded .igG-benefits-core-video-text-overlay .diagonal-line {
    transform: skewX(40deg) translateX(95px) !important;
  }
}

@media screen and (min-width: 1200px) and (max-height: 800px) {
  body.education .unbranded {
    --ib-ball-vh-max: calc(100dvh - 16rem);
    --ib-core-max: 280px;
    --ib-diagonal-h: 48px;
  }
}

@media screen and (min-width: 1200px) and (max-height: 720px) {
  body.education .unbranded {
    --ib-ball-vh-max: calc(100dvh - 15.25rem);
    --ib-core-max: 240px;
    --ib-diagonal-h: 42px;
  }

  body.education .unbranded .igG-benefits-core-video-text-overlay .text-overlay,
  .unbranded .igG-benefits-core-video-text-overlay .text-overlay {
    transform: translateX(55px) !important;
  }

  body.education .unbranded .igG-benefits-core-video-text-overlay .diagonal-line,
  .unbranded .igG-benefits-core-video-text-overlay .diagonal-line {
    transform: skewX(40deg) translateX(65px) !important;
  }
}

/*
 * Narrow desktop nav (992–1200): keep Signature CTA on-screen without
 * crushing dropdown gaps (default gap is 40px — restore breathing room).
 */
@media screen and (min-width: 992px) and (max-width: 1200px) {
  body.friso-signature {
    --logo-rail-logo-col: 168px;
    --logo-rail-logo-width: 156px;
  }

  body.friso-signature .navbar {
    padding-left: 20px !important;
    padding-right: 20px !important;
    overflow: visible !important;
  }

  body.friso-signature .navbar__wrapper {
    grid-template-columns: 168px minmax(0, 1fr) !important;
    gap: 16px !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  body.friso-signature .navbar__logo img {
    width: 156px !important;
  }

  body.friso-signature .navbar__menu {
    min-width: 0 !important;
    width: 100% !important;
    overflow: visible !important;
  }

  body.friso-signature .navbar__menu-list.main {
    gap: clamp(1.75rem, 2.4vw, 2.5rem) !important; /* closer to desktop 40px; room for -16px arrow */
    flex: 1 1 auto !important;
    min-width: 0 !important;
    justify-content: flex-start !important;
  }

  body.friso-signature .navbar__menu-list.main > .navbar__menu-item {
    flex: 0 0 auto !important;
    padding-right: 0 !important;
  }

  /* Desktop arrow clearance — must beat main > item selector above */
  body.friso-signature .navbar__menu-list.main > .navbar__menu-item:has(> a > .arrow-down),
  body.education .navbar__menu-list.main > .navbar__menu-item:has(> a > .arrow-down) {
    padding-right: 10px !important;
  }

  body.friso-signature .main .navbar__menu-item a {
    font-size: 14px !important;
    white-space: nowrap !important;
  }

  body.friso-signature .navbar .arrow-down,
  body.education .navbar .arrow-down {
    right: -16px !important;
    top: 4px !important;
  }

  body.friso-signature .navbar__menu-item:has(> a > .arrow-down),
  body.education .navbar__menu-item:has(> a > .arrow-down),
  body.friso-signature .navbar__menu-list.main > .navbar__menu-item:has(> a > .arrow-down) {
    padding-right: 10px !important;
  }

  body.friso-signature .navbar .friso-rect-button,
  body.friso-signature .navbar__btn-cta-wrapper .friso-rect-button,
  body.education .navbar .friso-rect-button,
  body.education .navbar__btn-cta-wrapper .friso-rect-button {
    width: 148px !important;
    max-width: 148px !important;
    font-size: 11px !important;
    padding-left: 0.55em !important;
    padding-right: 0.55em !important;
    padding-top: 0.55em !important;
    padding-bottom: 0.55em !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
  }

  body.friso-signature .navbar__btn-cta-wrapper.desktop {
    flex-shrink: 0 !important;
    margin-left: 0.75rem !important;
  }
}

/* 1080 and below: slightly tighter type/logo, keep ≥18px menu gaps */
@media screen and (min-width: 992px) and (max-width: 1080px) {
  body.friso-signature {
    --logo-rail-logo-col: 148px;
    --logo-rail-logo-width: 140px;
  }

  body.friso-signature .navbar__wrapper {
    grid-template-columns: 148px minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  body.friso-signature .navbar__logo img {
    width: 140px !important;
  }

  body.friso-signature .navbar__menu-list.main {
    gap: clamp(1.125rem, 1.6vw, 1.5rem) !important; /* ~18–24px */
  }

  body.friso-signature .main .navbar__menu-item a {
    font-size: 13px !important;
  }

  body.friso-signature .navbar .friso-rect-button,
  body.friso-signature .navbar__btn-cta-wrapper .friso-rect-button,
  body.education .navbar .friso-rect-button,
  body.education .navbar__btn-cta-wrapper .friso-rect-button {
    width: 136px !important;
    max-width: 136px !important;
    font-size: 10.5px !important;
    padding-left: 0.45em !important;
    padding-right: 0.45em !important;
  }
}

/*
 * Exact 1024 band: still keep readable menu spacing (≥16px).
 */
@media screen and (min-width: 1024px) and (max-width: 1024px) {
  body.friso-signature {
    --logo-rail-logo-col: 136px;
    --logo-rail-logo-width: 128px;
  }

  body.friso-signature .navbar {
    padding-left: 20px !important;
    padding-right: 20px !important;
    overflow: visible !important;
  }

  body.friso-signature .navbar__wrapper {
    grid-template-columns: 136px minmax(0, 1fr) !important;
    gap: 10px !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  body.friso-signature .navbar__logo img {
    width: 128px !important;
  }

  body.friso-signature .navbar__menu-list.main {
    gap: 1rem !important; /* 16px */
    min-width: 0 !important;
  }

  body.friso-signature .main .navbar__menu-item a {
    font-size: 12.5px !important;
  }

  body.friso-signature .navbar .friso-rect-button,
  body.friso-signature .navbar__btn-cta-wrapper .friso-rect-button,
  body.education .navbar .friso-rect-button,
  body.education .navbar__btn-cta-wrapper .friso-rect-button {
    width: 128px !important;
    max-width: 128px !important;
    font-size: 10px !important;
    padding-left: 0.4em !important;
    padding-right: 0.4em !important;
    padding-top: 0.45em !important;
    padding-bottom: 0.45em !important;
    flex-shrink: 0 !important;
  }
}

/* Kill horizontal scroll on 兩大關鍵 — section clips; inner must NOT clip title breakout */
.unbranded #bioactive.friso-section-container.gallery,
.unbranded #bioactive.gallery-scroll-pin {
  overflow-x: hidden !important;
  max-width: 100%;
}

.unbranded #bioactive.gallery-scroll-pin > .friso-section-container-inner-full {
  /* visible so 100vw title isn’t cropped to the 90% column */
  overflow-x: visible !important;
  max-width: 100%;
}

.unbranded #bioactive .gallery-container,
.unbranded #bioactive .gallery-container-inner {
  overflow-x: hidden !important;
}

/* Gallery image rail: clip sideways slide spill; keep Y visible for caption */
@media screen and (min-width: 769px) {
  .unbranded #bioactive.gallery-scroll-pin {
    overflow-x: hidden !important;
  }

  .unbranded #bioactive.gallery-scroll-pin > .friso-section-container-inner-full {
    overflow-x: visible !important;
  }

  /* Wrapper must NOT clip the full-bleed title; only the gallery rail clips */
  .unbranded #bioactive .bioactive-wrapper {
    overflow-x: visible !important;
  }

  .unbranded #bioactive .gallery-container,
  .unbranded #bioactive .gallery-container-inner {
    overflow-x: hidden !important;
  }
}

/*
 * Desktop (≥1025): active slide is title-width / height-capped — NOT full-bleed.
 * Inactive slides must peek beside it (translate 90% / scale 0.6). Do not clip the
 * gallery rail; section overflow-x:hidden still stops page-level sideways scroll.
 */
@media screen and (min-width: 1025px) {
  .unbranded #bioactive .gallery-container,
  .unbranded #bioactive .gallery-container-inner,
  .unbranded #bioactive.gallery-scroll-pin .gallery-container,
  .unbranded #bioactive.gallery-scroll-pin .gallery-container-inner {
    overflow-x: visible !important;
    overflow-y: visible !important;
  }
}

/*
 * Mobile + tablet (+ iPad 1024 CSS px): carousel image edge-to-edge (100vw),
 * same full-bleed as mobile titles. Desktop title-matching starts at 1025+.
 * Section itself stays overflow-x:hidden so 100vw breakout cannot scroll sideways.
 */
@media screen and (max-width: 1024px) {
  .unbranded #bioactive.friso-section-container.gallery,
  .unbranded #bioactive.gallery-scroll-pin {
    overflow-x: hidden !important;
  }

  .unbranded #bioactive.gallery-scroll-pin > .friso-section-container-inner-full {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow-x: hidden !important;
  }

  .unbranded #bioactive .gallery-container,
  .unbranded .bioactive .gallery-container,
  .unbranded #bioactive.gallery-scroll-pin .gallery-container {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box;
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }

  .unbranded #bioactive .gallery-container-inner,
  .unbranded #bioactive .gallery-container-ele,
  .unbranded #bioactive .gallery-container-ele.active,
  .unbranded #bioactive .poster-container,
  .unbranded #bioactive .poster-container-inner {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
  }

  .unbranded #bioactive .gallery-container-inner {
    overflow-x: hidden !important;
  }

  .unbranded #bioactive .poster-container-inner {
    background-size: cover !important;
    background-position: center center !important;
  }
}

/* Desktop only: carousel = title glyph ink − 1em (slightly inside title) */
@media screen and (min-width: 1025px) {
  .unbranded #bioactive {
    /* SVG PhotoText glyph band on 1920 artboard ≈ 1005.6 */
    --bioactive-title-ink: 1005.6px;
  }

  .unbranded #bioactive .gallery-container,
  .unbranded .bioactive .gallery-container,
  .unbranded #bioactive.gallery-scroll-pin .gallery-container {
    width: calc(var(--bioactive-title-ink) - 1em);
    max-width: calc(var(--bioactive-title-ink) - 1em);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }
}

/* Narrow desktop: title artboard is scaled — match its glyph target */
@media screen and (min-width: 1025px) and (max-width: 1200px) {
  .unbranded #bioactive {
    --bioactive-title-ink: min(94vw, 1040px);
  }
}

@media screen and (min-width: 1024px) and (min-height: 1021px) {
  .unbranded #bioactive.gallery-scroll-pin {
    justify-content: flex-start !important;
    padding-top: calc(var(--bioactive-nav-clearance, 72px) + 1.5rem) !important;
  }

  .unbranded #bioactive.gallery-scroll-pin .gallery-container {
    margin-left: auto;
    margin-right: auto;
  }
}

@media screen and (min-width: 1024px) and (max-width: 1279px) {
  .unbranded .y-shape {
    overflow: visible !important;
    border-bottom: 0 !important;
  }

  .unbranded .y-shape-bg-wrapper,
  .unbranded .y-shape-bg-wrapper-bg {
    overflow: visible !important;
  }
}

/* footer-ref-num-align
 * 1-line → flex + align-items center ([n] vertical center)
 * 2+ lines (.is-multiline) → CSS table, [n] top-aligned
 * .footer-ref-body keeps text+em/i in one cell (no split columns)
 */
body.friso-signature.education .friso-section-container.footer .super li,
body.friso-signature .friso-section-container.footer .super li {
  position: relative !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  width: 100% !important;
  border: 0 !important;
  padding-left: 0 !important;
  text-indent: 0 !important;
  text-align: left !important;
}

body.friso-signature.education .friso-section-container.footer .super li:before,
body.friso-signature.education .friso-section-container.footer .super li::before,
body.friso-signature .friso-section-container.footer .super li:before,
body.friso-signature .friso-section-container.footer .super li::before {
  content: "[" counter(item) "]" !important;
  counter-increment: item;
  display: block !important;
  flex: 0 0 2.35em !important;
  position: static !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  width: 2.35em !important;
  min-width: 2.35em !important;
  max-width: 2.35em !important;
  padding: 0 0.35em 0 0 !important;
  margin: 0 !important;
  white-space: nowrap !important;
  text-align: left !important;
  line-height: inherit !important;
  font-family: inherit !important;
  font-size: inherit !important;
  align-self: center !important;
}

body.friso-signature.education .friso-section-container.footer .super li .footer-ref-body,
body.friso-signature .friso-section-container.footer .super li .footer-ref-body {
  display: block !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  text-align: left !important;
  text-align-last: left !important;
  align-self: center !important;
}

/* 2+ lines: table row, [n] top */
body.friso-signature.education .friso-section-container.footer .super li.is-multiline,
body.friso-signature .friso-section-container.footer .super li.is-multiline {
  display: table !important;
  table-layout: fixed !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  align-items: unset !important;
  flex-direction: unset !important;
  flex-wrap: unset !important;
  justify-content: unset !important;
  gap: 0 !important;
}

body.friso-signature.education .friso-section-container.footer .super li.is-multiline:before,
body.friso-signature.education .friso-section-container.footer .super li.is-multiline::before,
body.friso-signature .friso-section-container.footer .super li.is-multiline:before,
body.friso-signature .friso-section-container.footer .super li.is-multiline::before {
  display: table-cell !important;
  vertical-align: top !important;
  flex: none !important;
  align-self: unset !important;
  width: 2.35em !important;
  min-width: 2.35em !important;
  max-width: 2.35em !important;
}

body.friso-signature.education .friso-section-container.footer .super li.is-multiline .footer-ref-body,
body.friso-signature .friso-section-container.footer .super li.is-multiline .footer-ref-body {
  display: table-cell !important;
  vertical-align: top !important;
  flex: none !important;
  align-self: unset !important;
  width: auto !important;
}

body.friso-signature.education .friso-section-container.footer .super li em,
body.friso-signature.education .friso-section-container.footer .super li i,
body.friso-signature .friso-section-container.footer .super li em,
body.friso-signature .friso-section-container.footer .super li i,
body.friso-signature.education .friso-section-container.footer .super li .footer-ref-body em,
body.friso-signature .friso-section-container.footer .super li .footer-ref-body em,
body.friso-signature.education .friso-section-container.footer .super li .footer-ref-body i,
body.friso-signature .friso-section-container.footer .super li .footer-ref-body i {
  display: inline !important;
  text-align: left !important;
  text-align-last: left !important;
  flex: none !important;
  min-width: 0 !important;
  width: auto !important;
}

/* Click-to-load YouTube host — same footprint as iframe once revealed */
.unbranded .antibody-vulnerable-period-video-host {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.unbranded .antibody-vulnerable-period-video-host[hidden] {
  display: none !important;
}
.unbranded .antibody-vulnerable-period-video-host .antibody-vulnerable-period-video-iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}