/* =========================================================
   ELEA tablet final pass — 761px to 1200px only.
   Mobile (<=760px) and desktop (>=1201px) remain untouched.
   ========================================================= */
@media (min-width:761px) and (max-width:1200px){
  html,body{
    width:100%;
    max-width:100%;
    overflow-x:hidden!important;
    overflow-x:clip!important;
  }
  body.is-lock{overflow:hidden!important;touch-action:none}
  body>main,body>section,.main-page,.elea-shared-footer{
    max-width:100%;
    overflow-x:clip;
  }

  .section-shell,.page-shell,.wrap,.main-learning-sync-head,
  .contact-inner,.elm-inner,.elea-footer-shell{
    width:calc(100% - 64px)!important;
    max-width:none!important;
    margin-left:auto!important;
    margin-right:auto!important;
    min-width:0!important;
  }

  .overview-grid>*,.different-grid>*,.meet-grid>*,.data-grid>*,
  .technology-columns>*,.learning-grid>*,.impact-grid>*,
  .intro-grid>*,.metrics-grid>*,.language-grid>*,.elm-grid>*,.loop-grid>*,
  .process>*,.human-cards>*,.interaction-content>*,
  .main-learning-sync-grid>*,.textbook-grid>*,.flow-top>*,
  .assess-cards>*,.report-cards>*,.mini-flow>*{
    min-width:0!important;
  }

  img,video,svg,canvas{max-width:100%}
  .video-card,.data-image,.technology-panel,.tech-static-visual,.tech-pc,
  .elm-image,.loop-visual,.process,.human-cards,.interaction-box,
  .main-learning-sync-grid,.textbook-exp .loop-stage,.flow-image,
  .assess-cards,.report-cards,.metrics-grid{
    max-width:100%!important;
  }
  html[lang="en"] .elm-section .elm-feature-connectors,
  html[lang="en"] .elm-section .elm-visual-viewport{
    transform:none!important;
  }
  .tabs,.flow-tabs{
    max-width:100%!important;
    overscroll-behavior-x:contain;
  }
  .mail-link{max-width:100%!important}
  .technology-item p,.feature p,.process-card p,.assess-card p,.report-card p,
  .data-row p,.accordion-panel p,.mini-step span{
    overflow-wrap:anywhere;
  }

  /* Tablet header: use the same full-screen menu interaction as mobile. */
  .shared-header-spacer{height:82px!important}
  .site-header,
  .site-header.is-light,
  .site-header.is-scrolled{
    position:fixed!important;
    top:0!important;
    left:0!important;
    right:0!important;
    width:100%!important;
    height:82px!important;
    z-index:10000!important;
    overflow:visible!important;
    transform:none!important;
  }
  .site-header .header-inner{
    width:100%!important;
    max-width:none!important;
    height:82px!important;
    margin:0!important;
    padding:0 32px!important;
    display:flex!important;
    align-items:center!important;
    background:transparent!important;
    position:relative!important;
    z-index:10003!important;
  }
  .site-header .brand{
    display:flex!important;
    align-items:center!important;
    min-width:0!important;
    position:relative!important;
    z-index:10004!important;
    opacity:1!important;
    visibility:visible!important;
  }
  .site-header .brand img{width:88px!important;height:auto!important}
  .site-header .header-tools{
    display:flex!important;
    align-items:center!important;
    margin-left:auto!important;
    gap:16px!important;
    position:relative!important;
    z-index:10004!important;
    opacity:1!important;
    visibility:visible!important;
  }
  .site-header .language-switch{
    display:flex!important;
    align-items:center!important;
    gap:7px!important;
    white-space:nowrap!important;
    opacity:1!important;
    visibility:visible!important;
  }
  body .site-header .mobile-toggle{
    display:block!important;
    position:relative!important;
    width:30px!important;
    height:28px!important;
    flex:0 0 30px!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    color:inherit!important;
    z-index:10005!important;
    opacity:1!important;
    visibility:visible!important;
  }
  body .site-header .mobile-toggle span{
    display:block!important;
    position:absolute!important;
    left:2px!important;
    width:26px!important;
    height:2px!important;
    border-radius:999px!important;
    background:currentColor!important;
    transition:transform .28s cubic-bezier(.22,1,.36,1),top .28s cubic-bezier(.22,1,.36,1),opacity .2s ease!important;
  }
  body .site-header .mobile-toggle span:nth-child(1){top:6px!important}
  body .site-header .mobile-toggle span:nth-child(2){top:13px!important}
  body .site-header .mobile-toggle span:nth-child(3){top:20px!important}
  body .site-header.menu-open .mobile-toggle span:nth-child(1){top:13px!important;transform:rotate(45deg)!important}
  body .site-header.menu-open .mobile-toggle span:nth-child(2){opacity:0!important;transform:scaleX(.25)!important}
  body .site-header.menu-open .mobile-toggle span:nth-child(3){top:13px!important;transform:rotate(-45deg)!important}

  body .site-header>.gnb,body .site-header .gnb{
    display:flex!important;
    position:fixed!important;
    z-index:10001!important;
    inset:0!important;
    width:100%!important;
    height:100dvh!important;
    min-height:100vh!important;
    max-height:none!important;
    margin:0!important;
    padding:126px 32px max(42px,env(safe-area-inset-bottom))!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    gap:0!important;
    background:#06151f!important;
    color:#fff!important;
    border:0!important;
    box-shadow:none!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain!important;
    white-space:normal!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transform:translateY(-14px)!important;
    transition:opacity .22s ease,transform .28s cubic-bezier(.22,1,.36,1),visibility .22s!important;
  }
  body .site-header>.gnb.is-open,body .site-header .gnb.is-open{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transform:translateY(0)!important;
  }
  body .site-header>.gnb a,body .site-header .gnb a{
    display:block!important;
    width:100%!important;
    margin:0!important;
    padding:22px 4px!important;
    border:0!important;
    border-bottom:1px solid rgba(255,255,255,.15)!important;
    color:#fff!important;
    font-size:clamp(28px,3.5vw,38px)!important;
    line-height:1.2!important;
    font-weight:700!important;
    white-space:normal!important;
  }
  body .site-header>.gnb a::after,body .site-header .gnb a::after{display:none!important}
  body .site-header>.gnb a.is-active,body .site-header .gnb a.is-active{color:#65e2e4!important}
  .site-header.menu-open,
  .site-header.is-light.menu-open,
  .site-header.is-scrolled.menu-open{
    background:#06151f!important;
    color:#fff!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  .site-header.menu-open .brand img{filter:brightness(0) invert(1)!important}
  .site-header.menu-open .language-switch,
  .site-header.menu-open .language-switch .lang-option{
    color:#fff!important;
    -webkit-text-fill-color:#fff!important;
    opacity:1!important;
  }
  .site-header.menu-open .language-switch .lang-option:not(.is-active){opacity:.48!important}
  .site-header.menu-open .language-switch .lang-separator{color:rgba(255,255,255,.45)!important}
  .site-header.menu-open .mobile-toggle{color:#fff!important;-webkit-text-fill-color:#fff!important}
  .site-header.menu-open .mobile-toggle span{background:#fff!important}

  /* Fluid tablet typography prevents long English/Korean headlines from escaping. */
  .overview-copy h2,.different-title h2,.meet-copy h2,.data-copy h2,
  .technology-head h2,.learning-head h2,.impact-head h2,.center-heading h2,
  .language-intro h2,.section-heading h2,.loop-copy h2,.headline,
  .main-learning-sync-head h1{
    font-size:clamp(36px,4.4vw,45px)!important;
    overflow-wrap:anywhere;
  }
  .contact-inner h2{font-size:clamp(40px,5.2vw,56px)!important;overflow-wrap:anywhere}
  .learning-card h3,.main-learning-sync-card h3{overflow-wrap:anywhere}

  /* Data Moat opening layout: two columns only when there is enough room. */
  .intro-media{width:100%!important;max-width:100%!important;height:auto!important;aspect-ratio:1/1!important}
  .intro-media img{width:100%!important;height:100%!important;object-fit:cover!important}
  .intro-copy{min-height:0!important}

  /* Tablet footer: remove absolute desktop columns that collide around 900–1200px. */
  .elea-shared-footer{height:auto!important;padding:48px 0 52px!important}
  .elea-shared-footer .footer-top{
    height:auto!important;
    min-height:104px!important;
    gap:28px!important;
    flex-wrap:wrap!important;
    padding:20px 0 26px!important;
  }
  .elea-shared-footer .footer-top nav{
    flex:1 1 440px!important;
    flex-wrap:wrap!important;
    justify-content:flex-end!important;
    gap:16px 26px!important;
    white-space:normal!important;
  }
  .elea-shared-footer .footer-main{
    position:relative!important;
    height:auto!important;
    min-height:0!important;
    display:grid!important;
    grid-template-columns:minmax(0,1.25fr) minmax(170px,.75fr) minmax(210px,242px)!important;
    gap:24px!important;
    align-items:start!important;
    padding-top:28px!important;
  }
  .elea-shared-footer .addr,
  .elea-shared-footer .policies,
  .elea-family-wrap{
    position:static!important;
    min-width:0!important;
    margin:0!important;
  }
  .elea-family-wrap{grid-column:3!important}
  .elea-shared-footer .policies a{width:auto!important;max-width:100%!important}
  .elea-family-wrap,.elea-family-toggle,.elea-family-menu{width:100%!important;max-width:242px!important}
  .elea-shared-footer .footer-bottom{margin-top:32px!important}

  /* Second tablet review: keep one 32px gutter, never section + wrapper double gutters. */
  body:has(.tech-section) .section,
  body:has(.main-learning-sync) .section,
  body:has(.textbook-exp) .section{
    padding-left:0!important;
    padding-right:0!important;
  }
  body:has(.tech-section) .section>.wrap,
  body:has(.main-learning-sync) .section>.wrap,
  body:has(.textbook-exp) .section>.wrap{
    width:calc(100% - 64px)!important;
    max-width:none!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  .elm-section{
    padding-left:0!important;
    padding-right:0!important;
  }

  /* MEET ELEA: text first, then a full-width 16:9 video stage on tablets. */
  .meet-grid{
    grid-template-columns:minmax(0,1fr)!important;
    gap:44px!important;
    align-items:start!important;
  }
  .meet-copy{width:100%!important;max-width:760px!important}
  .video-card,
  .video-card.meet-video-trigger{
    width:100%!important;
    max-width:none!important;
    height:auto!important;
    aspect-ratio:1080/611!important;
    margin:0!important;
    border-radius:20px!important;
  }
  .video-card>img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
  }
  .video-modal{z-index:12000!important;padding:32px!important}
  .video-modal-dialog{width:min(1120px,calc(100vw - 64px))!important;max-width:100%!important}
  .video-modal-frame{width:100%!important;aspect-ratio:16/9!important}

  /* Equal card rhythm: variable copy length must not move the artwork. */
  .learning-card,
  .main-learning-sync-card{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
  }
  .learning-card img,
  .main-learning-sync-card img{
    margin-top:auto!important;
  }
  .process-card,.human-card,.assess-card,.report-card{height:100%!important}

  /* The 806px desktop composition already fits the tablet container.
     Do not shrink it a second time with transform; that created excess whitespace. */
  .textbook-exp .loop-stage{
    transform:none!important;
    margin-bottom:0!important;
  }
}

@media (min-width:761px) and (max-width:1000px){
  .intro-grid{grid-template-columns:1fr!important;gap:42px!important}
  .intro-media{max-width:720px!important;margin:0 auto!important}
  .elea-shared-footer .footer-main{grid-template-columns:1fr 1fr!important}
  .elea-family-wrap{grid-column:1/-1!important;margin-top:4px!important}
}

@media (min-width:1001px) and (max-width:1200px){
  .intro-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:32px!important}
  .metrics-grid{grid-template-rows:repeat(2,minmax(150px,auto))!important}
  .different-cards{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:32px!important}
  .diff-card:last-child{grid-column:auto!important;width:100%!important;justify-self:stretch!important}
  .tabs,.flow-tabs{
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    overflow-x:hidden!important;
  }
  .tab,.flow-tab{min-width:0!important;width:auto!important;flex:auto!important}
}

@media (min-width:901px) and (max-width:1000px){
  .different-cards .diff-card:last-child{
    width:calc((100% - 32px)/2)!important;
    max-width:none!important;
  }
}