/* Mobile foundation. Loaded after the existing stylesheets.
   Section layouts and navigation are adjusted in subsequent steps.
   Keep sizing rules on the page shell: slider tracks deliberately
   exceed the viewport and must not receive a global max-width rule. */
@media (max-width: 900px) {
  body > .body_pattern,
  .body_pattern > .index_page,
  .index_page > .main,
  .main > .content,
  .main > .content > #content {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
}

/* Step 2: navigation. Desktop keeps the existing menu. */
.mobile-menu-toggle { display: none; }
@media (max-width: 900px) {
  .header .header-inner, .header.scrolled-up .header-inner {
    height: 64px; padding: 0 18px;
  }
  .header.scrolled-up { top: 8px; width: calc(100% - 24px); border-radius: 12px; }
  .header .header-content-row { justify-content: space-between; }
  .header .impact { font-size: 27px; }
  .mobile-menu-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; padding: 0;
    color: #fff; background: #ffffff14; border: 1px solid #ffffff50;
    border-radius: 8px; font-size: 25px; line-height: 1; cursor: pointer;
  }
  .header.scrolled-up .mobile-menu-toggle {
    color: #005f73; background: #0097b010; border-color: #0097b045;
  }
  .mobile-menu-toggle:focus-visible, .header .menu a:focus-visible {
    outline: 2px solid #00c2a8; outline-offset: -3px;
  }
  .header .header-content-row .menu,
  .header.scrolled-up .header-content-row .menu {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    width: 100%; margin: 0; padding: 8px; box-sizing: border-box;
    transform: none; background: #fff; border: 1px solid #d8e5e8;
    border-radius: 12px; box-shadow: 0 12px 32px #0003;
    max-height: calc(100vh - 88px); max-height: calc(100dvh - 88px);
    overflow-y: auto; overscroll-behavior: contain;
  }
  .header.mobile-menu-open { background: #162d35; }
  .header.scrolled-up.mobile-menu-open { background: #fff; }
  .header.mobile-menu-open .header-content-row .menu { display: block; }
  .header .header-content-row .menu ul.menusm,
  .header.scrolled-up .header-content-row .menu ul.menusm {
    /* Override layout.css: .body_pattern .menu .menusm { display: none!important; } */
    display: flex !important; flex-direction: column; align-items: stretch; width: 100%;
  }
  .header .header-content-row .menu ul li.ms_top,
  .header.scrolled-up .header-content-row .menu ul li.ms_top {
    display: block; float: none; margin: 0; padding: 0; animation: none;
  }
  .header .menu a, .header .menu ul li a.ms_top {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 48px; box-sizing: border-box; padding: 12px 14px;
    color: #005f73 !important; font-size: 16px; line-height: 1.5;
    text-align: left;
  }
  .header .menu ul li a.ms_top span,
  .header.scrolled-up .menu ul li a.ms_top span {
    color: #005f73 !important; padding: 0; line-height: 1.5;
  }
  .header .menu ul li a.ms_top::after { display: none; }
  .header .menu .ms_dropdown { padding: 0; }
  .header .menu .ms_dropdown-menu,
  .header .menu .ms_dropdown:hover > .ms_dropdown-menu {
    display: none; position: static; min-width: 0; width: auto;
    margin: 0 0 4px 12px; padding: 0; border-left: 2px solid #d9eaed;
    border-radius: 0; background: #f4f9fa; box-shadow: none;
    opacity: 1; visibility: visible; transform: none; filter: none;
    transition: none;
  }
  .header .menu .ms_dropdown.is-mobile-expanded > .ms_dropdown-menu { display: block; }
  .header .menu .ms_dropdown-menu li {
    opacity: 1; transform: none; transition: none;
  }
  .header .menu .ms_arrow,
  .header .menu .ms_subdropdown:hover > a .ms_arrow {
    color: #005f73 !important; transform: none !important;
  }
  .header .menu .is-mobile-expanded > a .ms_arrow { transform: rotate(180deg) !important; }
}

/* Mobile header: centered logo, menu toggle on the left. */
@media (max-width: 900px) {
  .header .header-content-row { justify-content: center; }
  .header .header-logo { margin: 0; }
  .header .mobile-menu-toggle {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
  }
}

/* Step 3: mobile hero. Only the active slide occupies document space. */
.hs-mobile-product { display: none; }
@media (max-width: 900px) {
  #content .hs-wrapper {
    height: auto !important; min-height: 0; padding-top: 146px;
    background: #071a22;
  }
  #content .hs-track {
    display: block; width: 100%; height: auto;
    transform: none !important;
  }
  #content .hs-slide {
    display: none !important; width: 100%; height: auto; min-height: 0;
    padding: 28px 22px 36px; box-sizing: border-box;
  }
  #content .hs-slide.active { display: flex !important; }
  #content .hs-slide-split.active { flex-direction: column; padding: 0 !important; }
  #content .hs-split-left {
    flex: none; width: 100%; box-sizing: border-box;
    padding: 12px 22px 30px !important;
    background: #08141c !important;
  }
  #content .hs-split-left::before { display: none; }
  #content .hs-mobile-product {
    display: block; position: relative; z-index: 2;
    width: min(100%, 360px); height: 210px; object-fit: contain;
    margin: 0 auto 18px;
  }
  #content .hs-split-text { padding: 0; width: 100%; box-sizing: border-box; }
  #content .hs-title {
    font-size: clamp(1.8rem, 7vw, 2.7rem); line-height: 1.15;
    margin-bottom: 12px; overflow-wrap: break-word;
  }
  #content .hs-desc {
    font-size: .92rem; line-height: 1.75; max-width: none;
    margin: 0 0 18px; color: #e0e9ec;
  }
  #content .hs-btn { min-height: 44px; box-sizing: border-box; justify-content: center; }
  #content .hs-split-divider { display: none; }
  #content .hs-split-right {
    flex: none; width: 100%; padding: 18px;
    box-sizing: border-box; gap: 16px; background: #09232d;
  }
  #content .hs-block {
    flex: none; padding: 22px; gap: 12px; overflow: hidden;
    border: 1px solid #ffffff25; border-radius: 14px;
  }
  #content .hs-block--top { background: #0d303d; }
  #content .hs-block-inner { flex-direction: column; align-items: stretch; gap: 18px; }
  #content .hs-block-img {
    position: static; order: -1; transform: none;
    width: 100%; height: 155px; max-height: none; object-fit: contain;
  }
  #content .hs-block-text { gap: 12px; }
  #content .hs-block .hs-title {
    font-size: 1.65rem !important; line-height: 1.2 !important;
    margin: 0 !important;
  }
  #content .hs-block .hs-desc {
    display: block; -webkit-line-clamp: unset; max-height: none;
    overflow: visible; font-size: .9rem !important;
    margin: 0 !important; line-height: 1.75;
  }
  #content .hs-block .hs-btn { margin-top: 0; }
  #content .hs-block--bottom { padding-top: 170px; background: #091a23; }
  #content .hs-block--bottom .hs-block-bg {
    bottom: auto; height: 150px; background-size: cover; background-position: center;
  }
  #content .hs-block--bottom .hs-block-overlay { background: transparent; }
  #content .hs-slide-razberi { padding: 36px 20px 44px; }
  #content .hs-content-razberi { width: 100%; min-width: 0; }
  #content .hs-title-rz { font-size: clamp(2.15rem, 8vw, 3.5rem) !important; line-height: 1.12 !important; }
  #content .hs-tag-rz { letter-spacing: .08em !important; }
  #content .hs-rz-stats {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%; box-sizing: border-box; padding: 16px 8px;
  }
  #content .hs-rz-stat { min-width: 0; padding: 0 4px; }
  #content .hs-rz-stat-num { font-size: 1.6rem; }
  #content .hs-rz-stat-label { letter-spacing: .02em; font-size: .65rem; }
  #content .hs-rz-divider { display: none; }
  #content .hs-rz-glow, #content .cn-glow-orb { display: none; }
  #content .hs-slide-comnet { padding: 0; }
  #content .cn-content-panel {
    width: 100%; max-width: none; min-width: 0; height: auto;
    padding: 36px 24px 44px; border-left: 0;
  }
  #content .cn-tag { white-space: normal; line-height: 1.6; letter-spacing: .02em; }
  #content .cn-title { font-size: clamp(2.2rem, 9vw, 3.4rem); line-height: 1.1; }
  #content .cn-desc { font-size: .92rem; color: #d9e8f3; }
  #content .cn-feat { font-size: .85rem; letter-spacing: 0; }
  #content .cn-cta-note { line-height: 1.6; }
  #content .hs-arrow {
    top: 84px; width: 44px; height: 44px; transform: none;
    background: #153640; border-color: #ffffff45;
  }
  #content .hs-prev { left: 20px; }
  #content .hs-next { right: 20px; }
  #content .hs-dots { top: 84px; bottom: auto; height: 44px; gap: 2px; }
  #content .hs-dot, #content .hs-dot.active {
    position: relative; width: 44px; height: 44px; background: transparent;
    border-radius: 0;
  }
  #content .hs-dot::after {
    content: ''; position: absolute; top: 18px; left: 18px;
    width: 8px; height: 8px; border-radius: 50%; background: #ffffff70;
  }
  #content .hs-dot.active::after { background: #00c2a8; }
  #content .hs-arrow:focus-visible, #content .hs-dot:focus-visible,
  #content .hs-btn:focus-visible, #content .cn-btn:focus-visible {
    outline: 2px solid #fff; outline-offset: 3px;
  }
  #content .hs-progress { display: none; }
}

/* ACTpro uses the original hero image in the same card layout as V.Credential. */
@media (max-width: 900px) {
  #content .hs-slide-split.active { padding: 18px 18px 0 !important; background: #09232d; }
  #content .hs-split-left {
    position: relative; overflow: hidden;
    padding: 190px 22px 22px !important;
    border: 1px solid #ffffff25; border-radius: 14px;
    background: #091a23 !important;
  }
  #content .hs-split-left::before {
    content: ''; display: block; position: absolute;
    inset: 0 0 auto; height: 170px; z-index: 0;
    background: #060c10 url('../images/ActPro1500BG.png') center / cover no-repeat;
  }
  #content .hs-mobile-product { display: none; }
  #content .hs-split-right { padding: 16px 0 18px; }
}

/* Preserve the original cover scale, move the image down inside the card. */
@media (max-width: 900px) {
  #content .hs-split-left::before {
    background-size: cover;
    background-position: center calc(50% + 36px);
  }
}

/* Swipe carousel: natural slide height, dot controls below the content. */
@media (max-width: 900px) {
  /* Permit vertical page scroll and zoom, reserve horizontal swipes for Hero JS.
     Scoping to Hero avoids interfering with the promo coverflow. */
  #content .hs-wrapper, #content .hs-track {
    touch-action: pan-y pinch-zoom;
  }
  #content .hs-wrapper img { -webkit-user-drag: none; }
  #content .hs-wrapper {
    box-sizing: border-box;
    padding-top: 80px; padding-bottom: 64px;
    height: var(--hero-height, 1200px) !important;
    overflow: hidden;
  }
  #content .hs-track {
    display: flex; align-items: flex-start; width: 300%; height: auto;
    transform: translate3d(calc(var(--hero-slide-index, 0) * -33.3333333333%), 0, 0) !important;
    transition: transform .45s ease;
  }
  #content .hs-slide, #content .hs-slide.active {
    display: flex !important; flex: 0 0 33.3333333333%;
    width: 33.3333333333%; height: auto;
  }
  #content .hs-slide-split { flex-direction: column; padding: 18px 18px 0 !important; background: #09232d; }
  #content .hs-arrow { display: none; }
  #content .hs-dots { top: auto; bottom: 10px; }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  #content .hs-track { transition: none; }
}

/* Extend each mobile slide's backdrop behind the header and dot controls. */
@media (max-width: 900px) {
  #content .hs-bg-stage { display: none; }
  #content .hs-wrapper { background: #09232d; }
  #content .hs-wrapper[data-hero-slide="1"] {
    background:
      linear-gradient(#000d, #000d),
      url('../images/razberibg.jpg') center / cover no-repeat,
      #10070a;
  }
  #content .hs-wrapper[data-hero-slide="2"] {
    background:
      linear-gradient(135deg, rgba(0, 20, 55, .93), rgba(0, 5, 25, .98)),
      url('../images/comnetbg.png?v=p4-f7cb021bc7d0') center / cover no-repeat,
      #04112b;
  }
  #content .hs-slide-razberi .hs-img-wrap,
  #content .hs-slide-comnet .cn-bg-wrap { display: none; }
  #content .hs-slide-comnet .cn-content-panel {
    background: transparent; border-top: 0;
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
}

/* Step 4: Upcoming Event announcement for phone and tablet screens. */
@media (max-width: 900px) {
  #content .event-teaser__inner {
    grid-template-columns: 82px minmax(0, 1fr);
    align-items: start; gap: 20px;
    padding: 28px 20px;
  }
  #content .event-teaser__date {
    grid-row: 1; grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    justify-items: center; align-items: center;
    min-height: 118px; padding: 12px 8px 10px;
    box-shadow: 4px 4px 0 #eadbce;
  }
  #content .event-teaser .event-teaser__date > span {
    font-family: 'DM Sans', Arial, sans-serif !important;
    text-align: center; line-height: 1;
  }
  #content .event-teaser__day { grid-column: 1; grid-row: 1; font-size: 2.65rem; font-weight: 800; letter-spacing: -.04em; }
  #content .event-teaser__month { grid-column: 1; grid-row: 2; padding: 5px 0 0; font-size: .82rem; font-weight: 700; letter-spacing: .12em; }
  #content .event-teaser__year {
    grid-column: 1; grid-row: 3; width: 100%;
    box-sizing: border-box; margin-top: 10px; padding-top: 9px;
    font-size: .58rem; letter-spacing: .02em; white-space: nowrap;
  }
  #content .event-teaser__content { min-width: 0; }
  #content .event-teaser__eyebrow {
    align-items: flex-start; margin-bottom: 10px;
    font-size: .65rem; line-height: 1.6; letter-spacing: .06em;
  }
  #content .event-teaser__pulse { margin-top: 5px; }
  #content .event-teaser__title {
    font-size: clamp(1.3rem, 5.5vw, 1.8rem);
    line-height: 1.2; letter-spacing: -.025em;
    overflow-wrap: break-word;
  }
  #content .event-teaser__title span {
    margin-top: 8px; font-size: .84rem; line-height: 1.55;
  }
  #content .event-teaser__desc {
    flex-direction: column; align-items: flex-start;
    gap: 4px; margin-top: 12px; font-size: .75rem; line-height: 1.65;
  }
  #content .event-teaser__divider { display: none; }
  #content .event-teaser__scroll {
    grid-column: 1 / -1; width: 100%; min-width: 0;
    min-height: 52px; box-sizing: border-box;
  }
  #content .event-teaser__scroll-label { font-size: .75rem; }
}
@media (max-width: 360px) {
  #content .event-teaser__inner {
    grid-template-columns: 72px minmax(0, 1fr);
    padding: 24px 16px; gap: 18px 14px;
  }
  #content .event-teaser__day { font-size: 2.4rem; }
  #content .event-teaser__title { font-size: 1.25rem; }
}

/* Step 5: mobile promotion cards, details and countdown. */
@media (max-width: 900px) {
  #content .promo-coverflow__inner {
    grid-template-columns: minmax(0, 1fr); gap: 24px;
    padding: 30px 18px 38px;
  }
  #content .promo-coverflow__visual,
  #content .promo-coverflow__content { min-width: 0; width: 100%; }
  #content .promo-coverflow__visual { max-width: 480px; justify-self: center; }
  #content .promo-coverflow__visual-head { gap: 12px; }
  #content .promo-coverflow__mini-label { font-size: .7rem; letter-spacing: .12em; }
  #content .promo-coverflow__stage { height: 290px; touch-action: pan-y pinch-zoom; }
  #content .promo-coverflow__card {
    box-sizing: border-box; width: min(220px, 65vw); height: 238px;
    padding: 16px; border-width: 6px; border-radius: 20px;
    transform: translate3d(calc(-50% + (var(--promo-offset) * 132px)),
      calc(-50% + (var(--promo-abs) * 8px)), calc(32px - (var(--promo-abs) * 80px)))
      rotateY(calc(var(--promo-offset) * -10deg))
      rotateZ(calc(var(--promo-offset) * 1.5deg))
      scale(calc(1 - (var(--promo-abs) * .12)));
  }
  #content .promo-coverflow__img { width: 90%; height: 66%; }
  #content .promo-coverflow__card-name {
    white-space: normal; font-size: .73rem; line-height: 1.35;
    letter-spacing: .02em; bottom: 12px;
  }
  #content .promo-coverflow__discount {
    box-sizing: border-box; min-width: 48px; height: 30px;
    padding: 0 8px; top: 10px; right: 10px; font-size: .8rem;
  }
  #content .promo-coverflow__arrow { width: 44px; height: 44px; box-sizing: border-box; }
  #content .promo-coverflow__dots { height: 44px; gap: 4px; }
  #content .promo-coverflow__dot,
  #content .promo-coverflow__dot.is-active {
    position: relative; width: 44px; height: 44px; background: transparent;
  }
  #content .promo-coverflow__dot::after {
    content: ''; position: absolute; left: 9px; right: 9px; top: 19px;
    height: 5px; border-radius: 5px; background: #1a1a1a44;
  }
  #content .promo-coverflow__dot.is-active::after { background: #1a1a1a; }
  #content .promo-coverflow__hint { font-size: .65rem; color: #655021; }
  #content .promo-coverflow__content { align-items: center; }
  #content .promo-coverflow__tag { font-size: .75rem; letter-spacing: .08em; }
  #content .promo-coverflow__headline { text-align: center; line-height: 1.08; }
  #content .promo-coverflow__headline span,
  #content .promo-coverflow__headline strong { font-size: clamp(2rem, 9.5vw, 3.3rem); }
  #content .promo-coverflow__intro { text-align: center; font-size: .92rem; line-height: 1.75; }
  #content .promo-coverflow__countdown,
  #content .promo-coverflow__active-detail {
    width: 100%; max-width: 520px; min-width: 0; box-sizing: border-box;
  }
  #content .promo-coverflow__countdown { margin: 8px 0 22px; padding: 14px 12px; }
  #content .promo-coverflow__countdown-head { flex-wrap: wrap; gap: 6px; }
  #content .promo-coverflow__countdown-head span,
  #content .promo-coverflow__countdown-head strong { font-size: .58rem; letter-spacing: .04em; }
  #content .promo-coverflow__countdown-numbers {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px;
  }
  #content .promo-coverflow__time-sep { display: none; }
  #content .promo-coverflow__time-box {
    min-width: 0; min-height: 62px; padding: 8px 3px; box-sizing: border-box;
  }
  #content .promo-coverflow__time-box strong { font-size: 1.4rem; line-height: 1.1; }
  #content .promo-coverflow__time-box span { font-size: .55rem; }
  #content .promo-coverflow__active-detail { padding: 20px 18px; text-align: left; }
  #content .promo-coverflow__active-topline { flex-wrap: wrap; gap: 8px; letter-spacing: .06em; }
  #content .promo-coverflow__active-detail h3 {
    font-size: clamp(1.3rem, 5.5vw, 1.8rem); line-height: 1.25;
    letter-spacing: 0; overflow-wrap: break-word;
  }
  #content .promo-coverflow__active-detail > p { font-size: .9rem; line-height: 1.75; }
  #content .promo-coverflow__features { gap: 6px; }
  #content .promo-coverflow__features span {
    font-size: .75rem; line-height: 1.5; min-width: 0; max-width: 100%;
    box-sizing: border-box; padding: 7px 10px;
  }
  #content .promo-coverflow__cta {
    width: 100%; min-height: 48px; box-sizing: border-box;
    justify-content: space-between; font-size: .9rem;
  }
  #content .promo-coverflow__dot:focus-visible,
  #content .promo-coverflow__cta:focus-visible { outline: 3px solid #005f73; outline-offset: 2px; }
}

/* Mobile order: campaign and countdown, coverflow, selected product details. */
.promo-coverflow__overview { display: contents; }
@media (max-width: 900px) {
  #content .promo-coverflow__content { display: contents; }
  #content .promo-coverflow__overview {
    display: flex; flex-direction: column; align-items: center;
    grid-column: 1; grid-row: 1; min-width: 0; width: 100%;
  }
  #content .promo-coverflow__visual { grid-column: 1; grid-row: 2; }
  #content .promo-coverflow__active-detail { grid-column: 1; grid-row: 3; justify-self: center; }
  #content .promo-coverflow__countdown { margin-bottom: 0; }
}

/* Step 6: mobile events and readable event details. */
@media (max-width: 900px) {
  #content .ref-events__shell { width: calc(100% - 24px); padding: 12px 0; }
  #content .ref-events__content { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  #content .ref-events__intro-panel { border-right: 0; border-bottom: 2px solid #fff; }
  #content .ref-events__intro-inner {
    box-sizing: border-box; height: auto; min-height: 0; padding: 28px 20px;
  }
  #content .ref-events__eyebrow { margin-bottom: 20px; line-height: 1.6; letter-spacing: .08em; }
  #content .ref-events__copy h2 { font-size: clamp(2.5rem, 11vw, 4.5rem); line-height: .98; }
  #content .ref-events__intro-text { margin-top: 20px; font-size: 1.125rem; line-height: 1.65; }
  #content .ref-events__upnext { margin-top: 24px; }
  #content .ref-events__actions { margin-top: 24px; padding-top: 0; transform: none; }
  #content .ref-events__mini-actions { margin-top: 0; display: flex; flex-wrap: wrap; gap: 10px; }
  #content .ref-events__mini-actions button { min-height: 44px; flex: 1 1 120px; }
  #content .ref-events__cards {
    min-height: 0; grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #content .ref-event-card {
    box-sizing: border-box; min-height: 230px; border-right: 0; border-bottom: 0;
  }
  #content .ref-event-card--green {
    grid-column: 1 / -1; min-height: 310px; border-bottom: 2px solid #fff;
  }
  #content .ref-event-card--cyan { border-right: 2px solid #fff; }
  #content .ref-event-card__badge { top: 12px; left: 10px; font-size: 11px; }
  #content .ref-event-card__label { box-sizing: border-box; min-height: 70px; padding: 12px 8px; }
  #content .ref-event-card__label strong { font-size: 15px; font-weight: 800; }
  #content .ref-event-card__label small { font-size: 12px; }
  #content .ref-event-card:focus-visible { outline: 3px solid #fff; outline-offset: -5px; }

  #impactEventModal {
    box-sizing: border-box; width: calc(100% - 24px); max-width: 600px;
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    overscroll-behavior: contain; scroll-padding-top: 64px;
  }
  #impactEventModal [hidden] { display: none !important; }
  #impactEventModal .impact-event-modal__close-rail { height: 60px; }
  #impactEventModal .impact-event-modal__panel { padding: 16px; }
  #impactEventModal .impact-event-modal__close {
    position: absolute; top: 28px; right: 16px; display: block;
    width: 44px; height: 44px; margin: 0; z-index: 5; background: #050505;
  }
  #impactEventModal .impact-event-modal__close:hover { background: #fff; }
  #impactEventModal .impact-event-modal__top { padding-right: 0; flex-wrap: wrap; gap: 12px; }
  #impactEventModal .impact-event-modal__hero {
    margin-top: 24px; grid-template-columns: minmax(0, 1fr); gap: 22px;
  }
  #impactEventModal .impact-event-modal__visual { min-height: 200px; }
  #impactEventModal .impact-event-modal__visual:not(.has-image) { min-height: 130px; }
  #impactEventModal .impact-event-modal__hero h3 {
    max-width: none; font-size: clamp(2rem, 9vw, 3.5rem); line-height: 1.05; overflow-wrap: anywhere;
  }
  #impactEventModal .impact-event-modal__subtitle { font-size: 18px; line-height: 1.6; }
  #impactEventModal .impact-event-modal__meta { margin-top: 24px; grid-template-columns: minmax(0, 1fr); }
  #impactEventModal .impact-event-modal__meta > div { min-height: 0; padding: 16px; }
  #impactEventModal .impact-event-modal__meta strong { margin-top: 8px; line-height: 1.5; }
  #impactEventModalTopics { grid-template-columns: minmax(0, 1fr); }
  #impactEventModal .impact-event-modal__topic { min-height: 48px; padding: 12px 0; border-right: 0; }
  #impactEventModal .impact-event-modal__topic span { font-size: 16px; line-height: 1.55; }
  #impactEventModal .impact-event-modal__coming { margin-top: 24px; padding: 28px 0; }
  #impactEventModal .impact-event-modal__coming > span { font-size: clamp(2.5rem, 12vw, 5rem); line-height: 1.05; }
  #impactEventModal .impact-event-modal__bottom { flex-direction: column; align-items: stretch; gap: 16px; }
  #impactEventModal .impact-event-modal__bottom-left { width: 100%; flex-direction: column; align-items: stretch; }
  #impactEventModal .impact-event-modal__register,
  #impactEventModal .impact-event-modal__bottom button { box-sizing: border-box; width: 100%; min-height: 48px; }
  #impactEventModal button:focus-visible,
  #impactEventModal a:focus-visible { outline: 3px solid #eaff00; outline-offset: 3px; }
}

/* Phase 5.1 — Keep IMPACT EVENTS together on narrow 320–359px screens. */
@media (max-width: 359px) {
  #content .ref-events__copy h2 {
    font-size: clamp(2.1rem, 10.8vw, 2.5rem);
  }
}

/* Step 7 — Blog / IoT Article: phone and tablet refinements.
   Scoped to seminar-article so desktop layouts remain unchanged. */
@media (max-width: 900px) {
  #content .seminar-article,
  #content .seminar-article * { box-sizing: border-box; }
  #content .seminar-article__container {
    width: calc(100% - 32px); max-width: 720px;
    min-width: 0; padding-top: 64px; padding-bottom: 84px;
  }
  #content .seminar-article__header,
  #content .seminar-article__intro,
  #content .seminar-article__feature,
  #content .seminar-article__ecosystem,
  #content .seminar-article__question,
  #content .seminar-article__seminar-cta,
  #content .seminar-article__seminar-copy,
  #content .seminar-article__ecosystem-body { min-width: 0; max-width: 100%; }
  #content .seminar-article__feature-grid,
  #content .seminar-article__ecosystem,
  #content .seminar-article__seminar-cta { grid-template-columns: minmax(0, 1fr); }
  #content .seminar-article__feature-grid { gap: 12px; margin-top: 16px; }
  #content .seminar-article__ecosystem,
  #content .seminar-article__question,
  #content .seminar-article__seminar-cta { margin-top: 12px; }
  #content .seminar-article__questions { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  #content .seminar-article__questions > span { transform: rotate(90deg); justify-self: center; }
  #content .seminar-article__seminar-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #content .seminar-article__footer-note { margin-top: 36px; }
}
@media (max-width: 640px) {
  #content .seminar-article__container {
    width: calc(100% - 28px); padding-top: 48px; padding-bottom: 68px;
  }
  #content .seminar-article__header h2 {
    font-size: clamp(2rem, 8.4vw, 3rem); line-height: 1.09;
    letter-spacing: -.035em; overflow-wrap: anywhere;
  }
  #content .seminar-article__subtitle { font-size: 17px; line-height: 1.6; }
  #content .seminar-article__system-row { margin-top: 18px; gap: 6px; }
  #content .seminar-article__system-row span {
    font-size: .69rem; min-height: 32px; padding: 6px 9px;
    overflow-wrap: anywhere;
  }
  #content .seminar-article__intro,
  #content .seminar-article__feature,
  #content .seminar-article__ecosystem,
  #content .seminar-article__question,
  #content .seminar-article__seminar-cta {
    padding: 22px 17px; border-radius: 0;
  }
  #content .seminar-article__intro { margin-top: 22px; }
  /* Phase 6.2 Revision B: deliberately bolder mobile hierarchy at 390px.
     Smoothly approach the UNCHANGED 641px rules; clamp narrow-screen growth.
     Feature 30 -> 23.2px, Ecosystem 36 -> 32px, Next Step 32 -> 27.2px,
     CTA 38 -> 32px, CTA subtitle 17 -> 15.36px between 390 and 640px. */
  #content #seminar-insight .seminar-article__feature h3 {
    font-size: clamp(23.2px, calc(40.608px - 2.72vw), 31px);
    line-height: 1.2;
    overflow-wrap: anywhere;
  }
  #content #seminar-insight .seminar-article__ecosystem h3 {
    font-size: clamp(32px, calc(42.24px - 1.6vw), 36.8px);
    line-height: 1.2;
    overflow-wrap: anywhere;
  }
  #content #seminar-insight .seminar-article__question h3 {
    font-size: clamp(27.2px, calc(39.488px - 1.92vw), 33px);
    line-height: 1.2;
    overflow-wrap: anywhere;
  }
  #content #seminar-insight .seminar-article__seminar-cta h3 {
    font-size: clamp(32px, calc(47.36px - 2.4vw), 39px);
    line-height: 1.2;
    overflow-wrap: anywhere;
  }
  #content #seminar-insight .seminar-article__seminar-cta h3 span {
    font-size: clamp(15.36px, calc(19.5584px - 0.656vw), 17.5px);
  }
  #content .seminar-article__intro p,
  #content .seminar-article__feature p,
  #content .seminar-article__ecosystem-body p,
  #content .seminar-article__question > p,
  #content .seminar-article__seminar-copy > p { font-size: .93rem; line-height: 1.75; overflow-wrap: anywhere; }
  #content .seminar-article__ecosystem { gap: 17px; }
  #content .seminar-article__ecosystem-map {
    grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 18px;
  }
  #content .seminar-article__ecosystem-map span {
    min-width: 0; min-height: 44px; padding: 9px 7px;
    font-size: .74rem; gap: 6px; overflow-wrap: anywhere;
  }
  #content .seminar-article__ecosystem-map i { flex: 0 0 16px; }
  #content .seminar-article__question-heading { align-items: flex-start; gap: 12px; margin-bottom: 17px; }
  #content .seminar-article__questions { margin-top: 16px; }
  #content .seminar-article__questions > div { min-width: 0; padding: 16px 14px; }
  #content .seminar-article__questions strong { overflow-wrap: anywhere; }
  #content .seminar-article__seminar-cta { gap: 20px; }
  #content .seminar-article__seminar-meta { grid-template-columns: minmax(0, 1fr); gap: 9px; }
  #content .seminar-article__seminar-meta > div { min-width: 0; padding: 17px; }
  #content .seminar-article__seminar-meta strong { overflow-wrap: anywhere; line-height: 1.14; }
  #content .seminar-article__footer-note { margin-top: 26px; }
  #content .seminar-article__footer-note p { overflow-wrap: anywhere; }
}

/* Step 10: final mobile/tablet overflow guards.
   Intentionally exclude slider/coverflow tracks, which need horizontal movement. */
@media (max-width: 900px) {
  #content .seminar-article img,
  #content .seminar-article svg,
  #content .impact-event-modal img,
  .prefooter .col img {
    max-width: 100%;
    height: auto;
  }
  #content .seminar-article__container,
  #content .seminar-article__feature,
  #content .seminar-article__ecosystem,
  #content .seminar-article__seminar-cta,
  .prefooter .prefooter-grid > .col {
    min-width: 0;
  }
  #content .seminar-article__container,
  .prefooter .prefooter-grid {
    overflow-wrap: anywhere;
  }
  #content .seminar-article a,
  .prefooter .address,
  .prefooter .contact-item span {
    overflow-wrap: anywhere;
  }
}

/* Hero refinement: ACTpro full-width, SiPass + VCredential in equal columns.
   Mobile/tablet only — preserve the original desktop composition. */
@media (max-width: 900px) {
  #content .hs-slide-split,
  #content .hs-slide-split.active {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-content: start;
    gap: 12px;
    padding: 14px 14px 20px !important;
  }
  #content .hs-slide-split .hs-split-left {
    width: 100%; min-width: 0;
    padding: 164px 18px 18px !important;
    border-radius: 12px;
  }
  #content .hs-slide-split .hs-split-left::before { height: 150px; }
  #content .hs-slide-split .hs-split-text { position: relative; min-width: 0; }
  #content .hs-slide-split .hs-split-text .hs-title {
    font-size: clamp(1.45rem, 5.8vw, 2rem);
    margin-bottom: 8px;
  }
  #content .hs-slide-split .hs-split-text .hs-desc {
    font-size: .82rem; line-height: 1.55; margin-bottom: 12px;
  }
  #content .hs-slide-split .hs-split-divider { display: none; }
  #content .hs-slide-split .hs-split-right {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px; width: 100%; min-width: 0;
    margin: 0; padding: 0 !important;
    background: transparent;
  }
  #content .hs-slide-split .hs-block {
    display: flex !important; flex-direction: column;
    align-items: stretch; justify-content: flex-end;
    box-sizing: border-box; width: 100%; min-width: 0;
    height: 290px; min-height: 0; padding: 120px 11px 12px !important;
    gap: 7px; border-radius: 12px;
  }
  #content .hs-slide-split .hs-block--top { position: relative; }
  #content .hs-slide-split .hs-block--top .hs-block-inner {
    display: contents;
  }
  #content .hs-slide-split .hs-block--top .hs-block-text {
    display: contents;
  }
  #content .hs-slide-split .hs-block--top .hs-block-img {
    display: block; position: absolute; z-index: 1;
    top: 9px; left: 10%; width: 80%; height: 99px;
    margin: 0; order: 0; max-height: none;
    object-fit: contain; transform: none;
  }
  #content .hs-slide-split .hs-block--bottom { position: relative; }
  #content .hs-slide-split .hs-block--bottom .hs-block-bg {
    inset: 0 0 auto; height: 113px;
    background-position: center; background-size: cover;
  }
  #content .hs-slide-split .hs-block .hs-title {
    position: relative; z-index: 2;
    font-size: clamp(.97rem, 3.4vw, 1.25rem) !important;
    line-height: 1.17 !important; overflow-wrap: anywhere;
    margin: 0 !important;
  }
  #content .hs-slide-split .hs-block .hs-desc {
    position: relative; z-index: 2;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
    line-clamp: 3; overflow: hidden;
    font-size: .69rem !important; line-height: 1.42 !important;
    margin: 0 !important;
  }
  #content .hs-slide-split .hs-block .hs-btn {
    position: relative; z-index: 2; width: 100%; min-width: 0;
    min-height: 38px; padding: 7px 5px;
    margin: 0; font-size: .71rem; white-space: normal;
  }
}
@media (max-width: 360px) {
  #content .hs-slide-split, #content .hs-slide-split.active {
    padding-inline: 10px !important;
  }
  #content .hs-slide-split .hs-split-right { gap: 8px; }
  #content .hs-slide-split .hs-block { padding-inline: 8px !important; }
}

/* Final mobile header refinement: perfectly center hamburger and close marks.
   CSS-drawn marks avoid Unicode glyph baseline offsets across phones. */
@media (max-width: 900px) {
  .header .mobile-menu-toggle {
    box-sizing: border-box;
    position: absolute;
    width: 44px;
    height: 44px;
    padding: 0;
    flex: 0 0 44px;
    align-items: center;
    justify-content: center;
  }
  .header .mobile-menu-toggle__icon {
    font-size: 0;
    line-height: 0;
  }
  .header .mobile-menu-toggle::before,
  .header .mobile-menu-toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transform-origin: center;
    transition: transform .18s ease, box-shadow .18s ease;
    pointer-events: none;
  }
  .header .mobile-menu-toggle::before {
    transform: translate(-50%, -50%);
    box-shadow: 0 -6px currentColor, 0 6px currentColor;
  }
  .header .mobile-menu-toggle::after { display: none; }
  .header .mobile-menu-toggle[aria-expanded="true"]::before {
    box-shadow: none;
    transform: translate(-50%, -50%) rotate(45deg);
  }
  .header .mobile-menu-toggle[aria-expanded="true"]::after {
    display: block;
    transform: translate(-50%, -50%) rotate(-45deg);
  }
}

/* ================================================================
   Phase 2.1 — Hero heading typography (Home only)
   Brand names: DM Sans | product descriptors / display: Bebas Neue
   Scoped specificity beats the legacy #content universal font rule.
   Do not change slide grid, carousel transforms, or JS animations.
   TH/EN translation strings and dynamic font switching: Phase 7.
   ================================================================ */
#content .hs-wrapper .hs-slide-split .hs-title {
  font-family: 'Bebas Neue', 'DM Sans', sans-serif !important;
  line-height: 1.07;
  letter-spacing: .02em;
}
#content .hs-wrapper .hs-slide-split .hs-title .hs-title-brand {
  font-family: 'DM Sans', 'Noto Sans Thai', sans-serif !important;
  font-size: .84em;
  font-weight: 700;
  line-height: inherit;
  letter-spacing: -.015em;
  color: #fff;
  background: none;
  -webkit-text-fill-color: currentColor;
}
#content .hs-wrapper .hs-slide-split .hs-title .hs-title-descriptor {
  font-family: 'Bebas Neue', 'DM Sans', sans-serif !important;
  font-weight: 400;
  letter-spacing: .025em;
}

/* Preserve Razberi's animated gradient and the original centered H2. */
#content .hs-wrapper .hs-slide-razberi .hs-title-rz,
#content .hs-wrapper .hs-slide-razberi .hs-title-rz .hs-rz-span {
  font-family: 'Bebas Neue', 'DM Sans', sans-serif !important;
}
#content .hs-wrapper .hs-slide-razberi .hs-title-rz {
  line-height: 1.01 !important;
  letter-spacing: .03em !important;
}

/* Preserve Comnet's Network gradient and Solutions subheading. */
#content .hs-wrapper .hs-slide-comnet .cn-title,
#content .hs-wrapper .hs-slide-comnet .cn-title .cn-title-span,
#content .hs-wrapper .hs-slide-comnet .cn-title .cn-title-sub {
  font-family: 'Bebas Neue', 'DM Sans', sans-serif !important;
}
#content .hs-wrapper .hs-slide-comnet .cn-title {
  line-height: 1.01;
  letter-spacing: .03em;
}
#content .hs-wrapper .hs-slide-comnet .cn-title .cn-title-sub {
  letter-spacing: .15em;
}

/* Keep mobile heading sizes inside the existing card/grid layout. */
@media (max-width: 900px) {
  #content .hs-wrapper .hs-slide-split .hs-split-text .hs-title {
    line-height: 1.14;
  }
  #content .hs-wrapper .hs-slide-split .hs-block .hs-title {
    font-size: clamp(1.06rem, 3.65vw, 1.25rem) !important;
    line-height: 1.18 !important;
    overflow-wrap: normal;
  }
  #content .hs-wrapper .hs-slide-split .hs-block .hs-title .hs-title-brand {
    font-size: .9em;
    letter-spacing: -.025em;
  }
  #content .hs-wrapper .hs-slide-razberi .hs-title-rz {
    line-height: 1.12 !important;
  }
  #content .hs-wrapper .hs-slide-comnet .cn-title {
    line-height: 1.1;
  }
  #content .hs-wrapper .hs-slide-comnet .cn-title .cn-title-sub {
    letter-spacing: .1em;
  }
}


/* ================================================================
   Phase 2.2 — Hero subtitles & descriptions (Home only)
   Keep the 3-slide carousel, grid geometry, fixed dual-card height,
   imagery and transitions unchanged. Original TH copy is retained;
   the language-switcher and translated copy are scheduled for Phase 7.
   ================================================================ */
/* Slide 1: ACTpro lead copy + SiPass/VCredential card descriptions. */
#content .hs-wrapper .hs-slide-split .hs-split-text .hs-desc {
  font-size: 16px; /* 16px — ACTpro (all screens) */
  line-height: 1.72;
  letter-spacing: normal;
  color: rgba(245, 252, 255, .88);
}
#content .hs-wrapper .hs-slide-split .hs-block .hs-desc {
  font-size: 16px !important; /* 16px — SiPass / VCredential (all screens) */
  line-height: 1.6;
  letter-spacing: normal;
  color: rgba(242, 250, 252, .86);
}
/* Slide 2: Razberi eyebrow and centered technical description. */
#content .hs-wrapper .hs-slide-razberi .hs-tag-rz {
  font-family: 'DM Sans', 'Noto Sans Thai', sans-serif !important;
  font-size: .76rem !important;
  line-height: 1.45;
  letter-spacing: .09em !important;
}
#content .hs-wrapper .hs-slide-razberi .hs-desc-rz {
  font-size: 16px !important; /* 16px — Razberi (all screens) */
  line-height: 1.72 !important;
  letter-spacing: normal;
  color: rgba(255, 224, 224, .85) !important;
}
/* Slide 3: Comnet technology label and supporting paragraph. */
#content .hs-wrapper .hs-slide-comnet .cn-tag {
  font-family: 'DM Sans', 'Noto Sans Thai', sans-serif !important;
  font-size: .76rem;
  line-height: 1.45;
  letter-spacing: .045em;
}
#content .hs-wrapper .hs-slide-comnet .cn-desc {
  font-size: 16px; /* 16px — Comnet (all screens) */
  line-height: 1.72;
  letter-spacing: normal;
  color: rgba(218, 238, 255, .85);
}
/* Future English copy: scoped overrides become active only for lang=en. */
html:lang(en) #content .hs-wrapper .hs-slide .hs-desc,
html:lang(en) #content .hs-wrapper .hs-slide-comnet .cn-desc {
  font-family: 'DM Sans', 'Noto Sans Thai', sans-serif !important;
  line-height: 1.6;
}

@media (max-width: 900px) {
  #content .hs-wrapper .hs-slide-split .hs-split-text .hs-desc {
    font-size: 16px; /* 16px mobile — ACTpro */
    line-height: 1.65;
    text-align: left !important;
    text-justify: auto;
    word-break: normal;
    overflow-wrap: break-word;
  }
  /* Keep 290px split cards and their existing 3-line excerpt.
     Never change height, padding, flex or carousel controls here. */
  #content .hs-wrapper .hs-slide-split .hs-block .hs-desc {
    font-size: 16px !important; /* 16px mobile — SiPass / VCredential */
    line-height: 1.5 !important;
    letter-spacing: normal;
  }
  #content .hs-wrapper .hs-slide-razberi .hs-tag-rz {
    font-size: .73rem !important;
    letter-spacing: .055em !important;
  }
  #content .hs-wrapper .hs-slide-razberi .hs-desc-rz {
    font-size: 16px !important; /* 16px mobile — Razberi */
    line-height: 1.68 !important;
  }
  #content .hs-wrapper .hs-slide-comnet .cn-tag {
    font-size: .73rem;
    line-height: 1.5;
    letter-spacing: .02em;
    white-space: normal;
  }
  #content .hs-wrapper .hs-slide-comnet .cn-desc {
    font-size: 16px; /* 16px mobile — Comnet */
    line-height: 1.7;
  }
  html:lang(en) #content .hs-wrapper .hs-slide-split .hs-block .hs-desc {
    line-height: 1.45 !important;
  }
}

/* ================================================================
   Phase 2.3 — Slide 1 product card copy (Home only)
   Desktop: preserve the original SiPass / VCredential descriptions.
   <=900px: concise descriptions avoid clipping at 16px within the
   existing 290px paired cards; CTA still links to product details.
   Keep mobile 3-line clamp, geometry, carousel and animation.
   Desktop copy is unclamped so the original wording is fully readable.
   TH/EN translation dictionary remains part of Phase 7.
   ================================================================ */
#content .hs-wrapper .hs-slide-split .hs-block .hs-desc .hs-desc--compact {
  display: none;
}
@media (max-width: 900px) {
  #content .hs-wrapper .hs-slide-split .hs-block .hs-desc .hs-desc--full {
    display: none;
  }
  #content .hs-wrapper .hs-slide-split .hs-block .hs-desc .hs-desc--compact {
    display: inline;
  }
}
@media (min-width: 901px) {
  #content .hs-wrapper .hs-slide-split .hs-block .hs-desc {
    display: block;
    -webkit-line-clamp: unset;
    line-clamp: unset;
    max-height: none;
    overflow: visible;
  }
}


/* ===================================================================
   Phase 2.4 — Razberi title & statistics typography (Home only)
   Isolate changes to Slide 2. Keep the existing stats content, 16px
   descriptions, hero imagery, carousel mechanics and layout structure.
   Display headings use Bebas Neue; the Thai stat label remains legible.
   =================================================================== */
#content .hs-wrapper .hs-slide-razberi .hs-title-rz {
  font-family: 'Bebas Neue', 'DM Sans', sans-serif !important;
  font-size: clamp(44px, 4vw, 62px) !important;
  line-height: 1.05 !important;
  letter-spacing: .025em !important;
}
#content .hs-wrapper .hs-slide-razberi .hs-title-rz .hs-rz-span {
  font-family: 'Bebas Neue', 'DM Sans', sans-serif !important;
}
#content .hs-wrapper .hs-slide-razberi .hs-rz-stat-num {
  font-family: 'Bebas Neue', 'DM Sans', sans-serif !important;
  font-size: 32px;
  line-height: 1.05;
  letter-spacing: .015em;
  white-space: nowrap;
}
#content .hs-wrapper .hs-slide-razberi .hs-rz-stat-num .hs-rz-plus,
#content .hs-wrapper .hs-slide-razberi .hs-rz-stat-num .hs-rz-pct {
  font-size: .62em;
}
#content .hs-wrapper .hs-slide-razberi .hs-rz-stat-label {
  font-family: 'DM Sans', 'Noto Sans Thai', sans-serif !important;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: .015em;
  color: rgba(255, 219, 219, .82);
  text-align: center;
  overflow-wrap: normal;
}
html:lang(th) #content .hs-wrapper .hs-slide-razberi .hs-rz-stat:first-child .hs-rz-stat-label {
  font-family: 'Noto Sans Thai', sans-serif !important;
  letter-spacing: normal;
}
@media (max-width: 900px) {
  #content .hs-wrapper .hs-slide-razberi .hs-title-rz {
    font-size: clamp(34px, 9vw, 56px) !important;
    line-height: 1.10 !important;
    letter-spacing: .015em !important;
  }
  #content .hs-wrapper .hs-slide-razberi .hs-rz-stat-num {
    font-size: 28px;
  }
  #content .hs-wrapper .hs-slide-razberi .hs-rz-stat-label {
    font-size: 12px;
    line-height: 1.35;
    letter-spacing: 0;
  }
}


/* ====================================================================
   Phase 2.5 — Comnet Slide 3 heading & description typography (Home)
   The heading uses block-level spans; redundant <br> tags were removed
   in home.html to prevent a blank line before "Solutions".
   Preserve the gradient, 16px body copy, CTA, media and hero mechanics.
   ==================================================================== */
#content .hs-wrapper .hs-slide-comnet .cn-title {
  line-height: 1.06;
  letter-spacing: .025em;
}
#content .hs-wrapper .hs-slide-comnet .cn-title .cn-title-sub {
  font-size: .62em;
  line-height: 1.12;
  letter-spacing: .08em;
  margin-top: .12em;
  color: rgba(150, 220, 255, .82);
  -webkit-text-fill-color: rgba(150, 220, 255, .82);
}
#content .hs-wrapper .hs-slide-comnet .cn-desc {
  font-size: 16px;
  line-height: 1.72;
  letter-spacing: normal;
  text-align: left;
  text-justify: auto;
  word-break: normal;
  overflow-wrap: break-word;
}
@media (max-width: 900px) {
  #content .hs-wrapper .hs-slide-comnet .cn-title {
    font-size: clamp(2.35rem, 9vw, 3.4rem);
    line-height: 1.1;
    letter-spacing: .02em;
  }
  #content .hs-wrapper .hs-slide-comnet .cn-title .cn-title-sub {
    font-size: .62em;
    letter-spacing: .065em;
  }
  #content .hs-wrapper .hs-slide-comnet .cn-desc {
    font-size: 16px;
    line-height: 1.7;
  }
}

/* ====================================================================
   Phase 2.6 — Hero line breaks and spacing (all 3 slides)
   Scope: text rhythm only. Do not alter slide/grid dimensions, CTA
   styling, copy, font sizes, the 290px paired cards, or carousel logic.
   The existing deliberate brand/product and Razberi heading breaks stay.
   ==================================================================== */
/* Slide 1 — ACTpro: balanced heading-to-body-to-CTA spacing. */
#content .hs-wrapper .hs-slide-split .hs-split-text .hs-title {
  margin-bottom: 16px;
}
#content .hs-wrapper .hs-slide-split .hs-split-text .hs-desc {
  margin-bottom: 24px;
}
/* Keep SiPass/VCredential's original 7px flex gap in fixed-height cards. */

/* Slide 2 — Razberi: reduce oversized breaks around stats while
   keeping the two-line heading, 16px description and original stats. */
#content .hs-wrapper .hs-slide-razberi .hs-tag-rz {
  margin-bottom: 16px !important; /* existing tag margin uses !important */
}
#content .hs-wrapper .hs-slide-razberi .hs-title-rz {
  margin-bottom: 12px !important; /* existing title margin uses !important */
}
#content .hs-wrapper .hs-slide-razberi .hs-desc-rz {
  margin-bottom: 24px !important;
}
#content .hs-wrapper .hs-slide-razberi .hs-rz-stats {
  margin-bottom: 26px;
}

/* Slide 3 — Comnet: consistent vertical rhythm between label,
   title, decorative divider, copy, features and CTA. */
#content .hs-wrapper .hs-slide-comnet .cn-tag {
  margin-bottom: 18px;
}
#content .hs-wrapper .hs-slide-comnet .cn-divider {
  margin-top: 16px;
  margin-bottom: 16px;
}
#content .hs-wrapper .hs-slide-comnet .cn-desc {
  margin-bottom: 20px;
}
#content .hs-wrapper .hs-slide-comnet .cn-features {
  margin-bottom: 24px;
}

@media (max-width: 900px) {
  /* ACTpro: retain readable 16px Thai copy and intentional title break. */
  #content .hs-wrapper .hs-slide-split .hs-split-text .hs-title {
    margin-bottom: 10px;
  }
  #content .hs-wrapper .hs-slide-split .hs-split-text .hs-desc {
    margin-bottom: 16px;
  }
  /* Razberi spacing remains compact on narrow devices. */
  #content .hs-wrapper .hs-slide-razberi .hs-rz-stats {
    margin-bottom: 24px;
  }
}

/* ================================================================
   Phase 3.1 — Upcoming Event Teaser: eyebrow and heading only.
   Fonts/spacing are scoped to this teaser so the site's broad
   #content font override cannot replace the intended DM Sans.
   Keep the date, description, CTA, grid and motion unchanged.
   TH/EN content swapping is reserved for Phase 7.
   ================================================================ */
#content .event-teaser .event-teaser__content .event-teaser__eyebrow,
#content .event-teaser .event-teaser__content .event-teaser__title,
#content .event-teaser .event-teaser__content .event-teaser__title span {
  font-family: 'DM Sans', 'Noto Sans Thai', sans-serif !important;
}
#content .event-teaser .event-teaser__content .event-teaser__eyebrow {
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: .065em;
  overflow-wrap: break-word;
}
#content .event-teaser .event-teaser__content .event-teaser__title {
  font-size: clamp(32px, 2.4vw, 38px);
  font-weight: 900; /* Phase 3.1 refinement: stronger event name */
  line-height: 1.18;
  letter-spacing: -.025em;
  overflow-wrap: break-word;
  word-break: normal;
}
#content .event-teaser .event-teaser__content .event-teaser__title span {
  display: block;
  margin-top: 7px;
  font-size: clamp(16px, 1.4vw, 20px);
  font-weight: 800; /* stronger supporting title */
  line-height: 1.48;
  letter-spacing: normal;
}
@media (max-width: 900px) {
  #content .event-teaser .event-teaser__content .event-teaser__eyebrow {
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: .04em;
  }
  #content .event-teaser .event-teaser__content .event-teaser__title {
    font-size: clamp(27px, 3.4vw, 32px);
    line-height: 1.23;
    letter-spacing: -.018em;
  }
  #content .event-teaser .event-teaser__content .event-teaser__title span {
    font-size: 15px;
    line-height: 1.5;
  }
}
@media (max-width: 560px) {
  #content .event-teaser .event-teaser__content .event-teaser__title {
    font-size: clamp(22px, 6.15vw, 28px);
    line-height: 1.27;
    letter-spacing: -.01em;
  }
  #content .event-teaser .event-teaser__content .event-teaser__title span {
    margin-top: 7px;
    font-size: 15px;
    line-height: 1.5;
  }
}
@media (max-width: 360px) {
  #content .event-teaser .event-teaser__content .event-teaser__title {
    font-size: clamp(21.75px, 6.4vw, 23.5px);
  }
}


/* ================================================================
   Phase 3.2 — Upcoming Event Teaser: date and venue only.
   Preserve the event title/font weights approved in Phase 3.1.
   The site's general #content font override otherwise expands the
   desktop date badge, especially between 901 and 960px.
   Text is unchanged; the explicit <time> and venue span provide stable
   styling hooks for future TH/EN translation in Phase 7.
   ================================================================ */
#content .event-teaser .event-teaser__date {
  column-gap: 2px;
}
#content .event-teaser .event-teaser__date > span {
  font-family: 'DM Sans', 'Noto Sans Thai', sans-serif !important;
  text-align: center;
  line-height: 1.05;
}
#content .event-teaser .event-teaser__date .event-teaser__day {
  font-size: 50px;
  font-weight: 800;
  letter-spacing: -.045em;
}
#content .event-teaser .event-teaser__date .event-teaser__month {
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: .025em;
}
#content .event-teaser .event-teaser__date .event-teaser__year {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .025em;
  white-space: nowrap;
}
#content .event-teaser .event-teaser__content .event-teaser__desc {
  font-family: 'DM Sans', 'Noto Sans Thai', sans-serif !important;
  text-align: left;
  line-height: 1.55;
}
#content .event-teaser .event-teaser__desc .event-teaser__when {
  color: #51555d;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
}
#content .event-teaser .event-teaser__desc .event-teaser__venue {
  color: #923823;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .035em;
  overflow-wrap: normal;
}
@media (min-width: 901px) and (max-width: 960px) {
  #content .event-teaser .event-teaser__date {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    justify-items: center;
    align-content: center;
    padding: 12px 10px;
  }
  #content .event-teaser .event-teaser__date .event-teaser__day,
  #content .event-teaser .event-teaser__date .event-teaser__month,
  #content .event-teaser .event-teaser__date .event-teaser__year {
    grid-column: 1;
  }
  #content .event-teaser .event-teaser__date .event-teaser__month {
    padding: 4px 0 0;
  }
  #content .event-teaser .event-teaser__date .event-teaser__year {
    width: 100%;
    box-sizing: border-box;
    padding-top: 7px;
    margin-top: 7px;
    font-size: 9px;
    letter-spacing: 0;
  }
}
@media (max-width: 900px) {
  #content .event-teaser .event-teaser__date .event-teaser__day {
    font-size: 42.4px;
  }
  #content .event-teaser .event-teaser__date .event-teaser__month {
    font-size: 13px;
    letter-spacing: .04em;
  }
  #content .event-teaser .event-teaser__date .event-teaser__year {
    font-size: 9px;
    letter-spacing: 0;
    width: 100%;
  }
  #content .event-teaser .event-teaser__desc .event-teaser__when {
    font-size: 12px;
  }
  #content .event-teaser .event-teaser__desc .event-teaser__venue {
    font-size: 12px;
    line-height: 1.55;
  }
}
@media (max-width: 360px) {
  #content .event-teaser .event-teaser__date .event-teaser__day {
    font-size: 38.4px;
  }
  #content .event-teaser .event-teaser__date .event-teaser__year {
    font-size: 8.5px;
  }
}

/* ================================================================
   Phase 3.3 — Upcoming Event Teaser: copy and CTA spacing only.
   Keep Phase 3.1 font weights (900/800), Phase 3.2 date/venue
   typography, event copy, hero, and all JavaScript unchanged.
   ================================================================ */
@media (min-width: 961px) {
  /* Bring the date badge, event copy and CTA into a tighter rhythm. */
  #content .event-teaser .event-teaser__inner {
    column-gap: clamp(24px, 2.4vw, 34px);
  }
}
@media (min-width: 901px) and (max-width: 960px) {
  #content .event-teaser .event-teaser__inner {
    column-gap: 24px;
    row-gap: 20px;
  }
}
#content .event-teaser .event-teaser__content .event-teaser__eyebrow {
  margin-bottom: 12px;
}
#content .event-teaser .event-teaser__content .event-teaser__title span {
  margin-top: 8px;
}
#content .event-teaser .event-teaser__content .event-teaser__desc {
  margin-top: 15px;
  column-gap: 8px;
  row-gap: 5px;
}
#content .event-teaser .event-teaser__scroll {
  gap: 12px;
  padding: 8px 10px 8px 18px;
}
@media (max-width: 900px) {
  #content .event-teaser .event-teaser__inner {
    column-gap: 18px;
    row-gap: 22px;
  }
  #content .event-teaser .event-teaser__content .event-teaser__eyebrow {
    margin-bottom: 10px;
  }
  #content .event-teaser .event-teaser__content .event-teaser__desc {
    margin-top: 13px;
    row-gap: 5px;
  }
  #content .event-teaser .event-teaser__scroll {
    gap: 12px;
    padding: 8px 12px 8px 18px;
  }
}
@media (max-width: 360px) {
  #content .event-teaser .event-teaser__inner {
    column-gap: 14px;
    row-gap: 20px;
  }
}

/* ================================================================
   Phase 3.4 — Mobile event teaser line breaks (<=560px).
   Balance long event/venue labels to avoid an isolated final word
   at 320px, without changing the approved font sizes, weights,
   date card geometry, CTA, hero carousel, or animation.
   Older browsers without text-wrap: balance retain natural wrapping.
   ================================================================ */
@media (max-width: 560px) {
  #content .event-teaser .event-teaser__content .event-teaser__title,
  #content .event-teaser .event-teaser__content .event-teaser__title span,
  #content .event-teaser .event-teaser__desc .event-teaser__venue {
    text-wrap: balance;
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
  }
}

/* ================================================================
   Phase 4.1 Revision B — October Promotion larger label/headline.
   Self-hosted Luckiest Guy regular (400) for ELEVATE / ENTRANCE.
   Increased label/heading sizes only; colors, stroke, shadows,
   coverflow, JS, countdown and approved breakpoints are unchanged.
   ================================================================ */
#content .promo-coverflow .promo-coverflow__content .promo-coverflow__tag {
  font-family: 'DM Sans', 'Noto Sans Thai', sans-serif !important;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: .075em;
  white-space: nowrap;
}
#content .promo-coverflow .promo-coverflow__content .promo-coverflow__headline span,
#content .promo-coverflow .promo-coverflow__content .promo-coverflow__headline strong {
  font-family: 'Luckiest Guy', 'Bebas Neue', sans-serif !important;
  font-weight: 400;
  font-size: clamp(52px, 5.9vw, 80px);
  line-height: 1.02;
  letter-spacing: .01em;
  overflow-wrap: normal;
  word-break: normal;
}
@media (max-width: 900px) {
  #content .promo-coverflow .promo-coverflow__content .promo-coverflow__tag {
    font-size: 15px;
    letter-spacing: .065em;
  }
  #content .promo-coverflow .promo-coverflow__content .promo-coverflow__headline span,
  #content .promo-coverflow .promo-coverflow__content .promo-coverflow__headline strong {
    font-size: clamp(42px, 10.6vw, 60px);
    line-height: 1.04;
    letter-spacing: .01em;
  }
}

/* ================================================================
   Phase 4.2 — October Promotion subtitle & campaign description.
   Preserve approved Luckiest Guy headline and October label; adjust
   only the existing Thai intro copy and inline campaign highlights.
   No copy changes, HTML/JS changes, or Coverflow geometry changes.
   ================================================================ */
#content .promo-coverflow .promo-coverflow__content .promo-coverflow__intro {
  font-family: 'Noto Sans Thai', 'DM Sans', sans-serif !important;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: 0;
  text-align: left;
  text-wrap: pretty;
  word-break: normal;
  overflow-wrap: break-word;
  max-width: 520px;
  margin: 15px 0 20px;
}
/* Keep the established teal accent, but use a real loaded Thai weight. */
#content .promo-coverflow .promo-coverflow__content .promo-coverflow__intro b {
  font-weight: 700;
}
/* The numeric 13% uses the existing DM Sans 800, giving the offer
   stronger emphasis without changing the words or adding HTML. */
#content .promo-coverflow .promo-coverflow__content .promo-coverflow__intro b:last-of-type {
  font-family: 'DM Sans', 'Noto Sans Thai', sans-serif !important;
  font-size: 1.12em;
  font-weight: 800;
  letter-spacing: 0;
}
@media (max-width: 980px) {
  #content .promo-coverflow .promo-coverflow__content .promo-coverflow__intro {
    text-align: center;
  }
}
@media (max-width: 900px) {
  #content .promo-coverflow .promo-coverflow__content .promo-coverflow__intro {
    font-size: 20px;
    line-height: 1.8;
    margin: 14px 0 18px;
  }
}


/* ================================================================
   Phase 4.3 — October Promotion countdown & caption typography.
   Keep approved Luckiest Guy heading, 20px Thai promotion intro,
   product coverflow, 4 time units, and JS countdown behavior intact.
   Use the same breakpoint as the existing mobile countdown grid.
   ================================================================ */
#content .promo-coverflow .promo-coverflow__countdown-head span,
#content .promo-coverflow .promo-coverflow__countdown-head strong {
  font-family: 'DM Sans', 'Noto Sans Thai', sans-serif !important;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: .075em;
}
#content .promo-coverflow .promo-coverflow__countdown-head strong {
  color: #005f73;
}
#content .promo-coverflow .promo-coverflow__countdown-head {
  margin-bottom: 12px;
}
#content .promo-coverflow .promo-coverflow__time-box strong {
  font-family: 'Bebas Neue', 'DM Sans', sans-serif !important;
  font-size: 34px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .035em;
  font-variant-numeric: tabular-nums;
}
#content .promo-coverflow .promo-coverflow__time-box span {
  font-family: 'DM Sans', 'Noto Sans Thai', sans-serif !important;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .045em;
  color: rgba(26, 26, 26, .72);
  margin-top: 4px;
}
/* In the 4-column mobile grid, larger numerals remain legible at 320px. */
@media (max-width: 900px) {
  #content .promo-coverflow .promo-coverflow__countdown-head span,
  #content .promo-coverflow .promo-coverflow__countdown-head strong {
    font-size: 11px;
    letter-spacing: .045em;
  }
  #content .promo-coverflow .promo-coverflow__time-box strong {
    font-size: 28px;
  }
  #content .promo-coverflow .promo-coverflow__time-box span {
    font-size: 10px;
    letter-spacing: .035em;
  }
}


/* ================================================================
   Phase 4.3 Compact Revision — secondary mini countdown.
   Limit card width to ~half of product detail panel and shrink the
   number tiles while preserving all four time units and live JS IDs.
   Do not affect promotion headline, intro, coverflow, or Hero carousel.
   ================================================================ */
#content .promo-coverflow .promo-coverflow__countdown {
  box-sizing: border-box;
  width: min(100%, 280px);
  max-width: 280px;
  min-width: 0;
  margin: 10px 0 18px;
  padding: 9px 11px 10px;
  border-radius: 12px;
  box-shadow: 0 3px 0 rgba(26, 26, 26, .88),
              inset 0 1px 0 rgba(255, 255, 255, .22);
}
#content .promo-coverflow .promo-coverflow__countdown-head {
  flex-wrap: nowrap;
  gap: 5px;
  margin-bottom: 6px;
}
#content .promo-coverflow .promo-coverflow__countdown-head span,
#content .promo-coverflow .promo-coverflow__countdown-head strong {
  font-size: 9px;
  line-height: 1.3;
  letter-spacing: .025em;
  white-space: nowrap;
}
#content .promo-coverflow .promo-coverflow__countdown-numbers {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  width: 100%;
}
#content .promo-coverflow .promo-coverflow__time-sep { display: none; }
#content .promo-coverflow .promo-coverflow__time-box {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 5px 2px 4px;
  border-width: 1.5px;
  border-radius: 7px;
  box-shadow: 0 2px 0 #1a1a1a;
}
#content .promo-coverflow .promo-coverflow__time-box strong {
  font-size: 22px;
  line-height: 1;
}
#content .promo-coverflow .promo-coverflow__time-box span {
  font-size: 9px;
  line-height: 1.1;
  letter-spacing: .025em;
  margin-top: 2px;
}
@media (max-width: 900px) {
  #content .promo-coverflow .promo-coverflow__countdown {
    width: min(100%, 260px);
    max-width: 260px;
    margin: 9px auto 0;
    padding: 8px 9px 9px;
  }
  #content .promo-coverflow .promo-coverflow__countdown-head span,
  #content .promo-coverflow .promo-coverflow__countdown-head strong {
    font-size: 8px;
  }
  #content .promo-coverflow .promo-coverflow__time-box {
    min-height: 40px;
    padding: 4px 1px;
  }
  #content .promo-coverflow .promo-coverflow__time-box strong {
    font-size: 20px;
  }
  #content .promo-coverflow .promo-coverflow__time-box span {
    font-size: 9px;
  }
}


/* ================================================================
   Phase 4.4 — October Promotion product typography.
   Only style existing product card labels, selected product details,
   and the existing 13% discount badges. No actual price is in the
   product data; do not synthesize one. Preserve card geometry,
   coverflow transforms, features, countdown, and JS interactions.
   ================================================================ */
/* Short product name inside each rotating coverflow card. */
#content .promo-coverflow .promo-coverflow__card .promo-coverflow__card-name {
  font-family: 'Bebas Neue', 'DM Sans', sans-serif !important;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: .045em;
  white-space: normal;
  overflow-wrap: normal;
  text-align: center;
}
/* Discount amount is the only pricing-related information provided. */
#content .promo-coverflow .promo-coverflow__card .promo-coverflow__discount {
  font-family: 'Bebas Neue', 'DM Sans', sans-serif !important;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .035em;
}
/* Selected product's category/offer row. */
#content .promo-coverflow .promo-coverflow__active-detail .promo-coverflow__active-topline {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: .075em;
}
#content .promo-coverflow .promo-coverflow__active-detail .promo-coverflow__active-topline strong {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: .03em;
}
/* Selected title, description and their breathing room. */
#content .promo-coverflow .promo-coverflow__active-detail #promoCoverflowTitle {
  font-family: 'Bebas Neue', 'DM Sans', sans-serif !important;
  font-size: clamp(32px, 2.5vw, 38px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: .025em;
  overflow-wrap: break-word;
}
#content .promo-coverflow .promo-coverflow__active-detail > #promoCoverflowDesc {
  font-family: 'Noto Sans Thai', 'DM Sans', sans-serif !important;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0;
  text-align: left;
  text-wrap: pretty;
  word-break: normal;
  overflow-wrap: break-word;
  margin: 9px 0 13px;
}
@media (max-width: 900px) {
  #content .promo-coverflow .promo-coverflow__card .promo-coverflow__card-name {
    font-size: 13px;
    line-height: 1.2;
    letter-spacing: .025em;
  }
  #content .promo-coverflow .promo-coverflow__card .promo-coverflow__discount {
    font-size: 14px;
  }
  #content .promo-coverflow .promo-coverflow__active-detail #promoCoverflowTitle {
    font-size: clamp(23px, 5.6vw, 28px);
    line-height: 1.18;
    letter-spacing: .01em;
  }
  #content .promo-coverflow .promo-coverflow__active-detail > #promoCoverflowDesc {
    font-size: 16px;
    line-height: 1.7;
    margin: 9px 0 13px;
  }
}

/* Phase 4.6 — Featured Product title only: modest mobile increase.
   Keep Coverflow card names, desktop/tablet typography and layout unchanged. */
@media (max-width: 560px) {
  #content .promo-coverflow .promo-coverflow__active-detail #promoCoverflowTitle {
    font-size: 28px;
  }
}


/* Phase 6.3 Extended — tablet/mobile body type and paragraph rhythm.
   Existing line-height, text width, colors and special component spacing stay unchanged. */
@media (max-width: 900px) {
#content #seminar-insight .seminar-article__intro > p,
#content #seminar-insight .seminar-article__feature > p:not(.seminar-article__feature-label),
#content #seminar-insight .seminar-article__ecosystem-body > p,
#content #seminar-insight .seminar-article__question > p,
#content #seminar-insight .seminar-article__seminar-copy > p:not(.seminar-article__seminar-label):not(.seminar-article__closing) {
  font-size: 17px;
}
}
@media (min-width: 641px) and (max-width: 900px) {
#content #seminar-insight .seminar-article__intro > p + p,
#content #seminar-insight .seminar-article__feature > p:not(.seminar-article__feature-label) + p:not(.seminar-article__feature-label),
#content #seminar-insight .seminar-article__ecosystem-body > p + p,
#content #seminar-insight .seminar-article__seminar-copy > p:not(.seminar-article__seminar-label):not(.seminar-article__closing) + p:not(.seminar-article__seminar-label):not(.seminar-article__closing) {
  margin-top: 20px;
}
}
@media (max-width: 640px) {
#content #seminar-insight .seminar-article__intro > p + p,
#content #seminar-insight .seminar-article__feature > p:not(.seminar-article__feature-label) + p:not(.seminar-article__feature-label),
#content #seminar-insight .seminar-article__ecosystem-body > p + p,
#content #seminar-insight .seminar-article__seminar-copy > p:not(.seminar-article__seminar-label):not(.seminar-article__closing) + p:not(.seminar-article__seminar-label):not(.seminar-article__closing) {
  margin-top: 22px;
}
}


/* Phase 9 Pre-close — Slide 1 only: SiPass (Card 2) and
   VCredential (Card 3) description left alignment.
   Preserve ACTpro, Razberi, ComNet and all existing card geometry. */
#content .hs-wrapper .hs-slide-split .hs-block--top .hs-desc,
#content .hs-wrapper .hs-slide-split .hs-block--bottom .hs-desc {
  text-align: left !important;
  text-justify: auto;
}

/* Phase 9 Pre-close — Seminar-only product/technology showcase note.
   A low-profile accent between event description and topics; no modal reflow.
   Hidden on exhibition/coming-soon modals, even against ancestor CSS. */
#content #impactEventModal .impact-event-modal__showcase[hidden] {
  display: none !important;
}
#content #impactEventModal[data-event="seminar"] .impact-event-modal__showcase {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  box-sizing: border-box;
  max-width: 860px;
  margin-top: 20px;
  padding: 15px 19px;
  border-left: 3px solid #DFFF57;
  background: rgba(223, 255, 87, 0.055);
}
#content #impactEventModal[data-event="seminar"] .impact-event-modal__showcase-mark {
  flex: 0 0 auto;
  color: #DFFF57;
  font-family: 'DM Sans', sans-serif;
  font-size: 19px;
  line-height: 1.5;
}
#content #impactEventModal[data-event="seminar"] .impact-event-modal__showcase p {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 0;
  color: rgba(255, 255, 255, .88);
  font-family: 'Noto Sans Thai', 'DM Sans', sans-serif !important;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: normal;
  text-align: left !important;
  overflow-wrap: break-word;
}
html:lang(en) #content #impactEventModal[data-event="seminar"] .impact-event-modal__showcase p {
  font-family: 'DM Sans', 'Noto Sans Thai', sans-serif !important;
  line-height: 1.65;
}
@media (max-width: 640px) {
  #content #impactEventModal[data-event="seminar"] .impact-event-modal__showcase {
    margin-top: 18px;
    padding: 13px 14px;
    gap: 10px;
  }
  #content #impactEventModal[data-event="seminar"] .impact-event-modal__showcase p {
    font-size: 15px;
    line-height: 1.75;
  }
}