/* =========================================================
   ELEA Tablet QC — isolated override layer
   Applies only to 761px–1200px. Desktop/laptop/mobile remain untouched.
   Target checks: 768x1024 / 820x1180 / 1024x1366.
   ========================================================= */
@media (min-width:761px) and (max-width:1200px){
  /* shared page width */
  .section-shell,.page-shell,.wrap,
  .main-learning-sync-head,
  .site-header .header-inner{
    width:calc(100% - 64px)!important;
    max-width:none!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  /* shared header: keep tablet contained without touching mobile fullscreen menu */
  .site-header{--dm-gutter:32px!important;--dm-header-h:82px!important}
  .site-header .header-inner{padding-inline:0!important}
  .site-header .header-tools{gap:18px!important}

  /* ======================================================
     MAIN
     ====================================================== */
  body:has(.hero) .hero{
    min-height:720px!important;
    height:100svh!important;
    max-height:900px!important;
  }
  body:has(.hero) .hero-inner{
    width:calc(100% - 64px)!important;
    max-width:none!important;
    margin:0 auto!important;
    padding:82px 0 0!important;
  }
  body:has(.hero) .hero-copy{max-width:78%!important;margin-top:-40px!important}
  body:has(.hero) .hero-copy h1{font-size:clamp(44px,5.6vw,60px)!important;line-height:1.24!important;white-space:normal!important}
  body:has(.hero) .hero-copy p{font-size:clamp(22px,2.8vw,30px)!important;line-height:1.5!important}
  body:has(.hero) .hero-video{width:100%!important;height:100%!important;object-fit:cover!important;object-position:right center!important}

  .overview{height:auto!important;min-height:760px!important;padding:88px 0!important}
  .overview-grid{grid-template-columns:minmax(0,.95fr) minmax(360px,1.05fr)!important;gap:36px!important}
  .overview-copy{padding-left:0!important}
  .overview-copy h2{font-size:clamp(38px,4.8vw,48px)!important}
  .elm-orbit{width:min(48vw,500px)!important;height:auto!important;aspect-ratio:1!important}

  .different{min-height:0!important;padding:88px 0!important}
  .different-grid{display:block!important}
  .different-title{position:static!important;max-width:620px!important}
  .different-title h2{font-size:45px!important}
  .different-cards{
    min-height:0!important;
    height:auto!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:54px 32px!important;
    margin-top:56px!important;
  }
  .diff-card,.card-data,.card-elm,.card-human{position:static!important;width:100%!important}
  .diff-card:last-child{grid-column:1/-1!important;width:min(52%,480px)!important;justify-self:center!important}
  .diff-card img{width:100%!important;height:auto!important;aspect-ratio:1/1!important;object-fit:cover!important}
  .diff-card h3{font-size:28px!important;margin-top:24px!important}

  .meet{height:auto!important;min-height:0!important;padding:88px 0!important}
  .meet-grid{height:auto!important;min-height:0!important;grid-template-columns:minmax(280px,.72fr) minmax(0,1.28fr)!important;gap:42px!important}
  .meet-copy h2{font-size:45px!important;margin-bottom:28px!important}
  .meet-copy>p:not(.eyebrow){font-size:18px!important;line-height:1.65!important}
  .meet-copy .under-link{margin-top:38px!important}
  .video-card{width:100%!important}

  .data-moat{padding:88px 0!important}
  .data-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:38px!important}
  .data-image{width:100%!important;height:auto!important}
  .data-copy h2{font-size:45px!important}
  .stats{margin-top:56px!important}
  .stat{min-height:150px!important;padding:26px 18px 0 24px!important}
  .stat strong{font-size:28px!important}
  .stat p{font-size:16px!important}

  .technology{padding:88px 0 96px!important}
  .technology-head{margin-bottom:48px!important}
  .technology-head h2{font-size:45px!important}
  .technology-panel{height:auto!important;min-height:420px!important}
  .technology-item{padding:32px 18px!important}
  .technology-item h3{font-size:26px!important;white-space:normal!important}
  .technology-item p{font-size:15px!important;white-space:normal!important}

  .learning{padding-top:88px!important}
  .learning-head{margin-bottom:48px!important}
  .learning-head h2{font-size:45px!important;margin-bottom:24px!important}
  .learning-head>p:last-child{font-size:18px!important;width:auto!important;max-width:760px!important}
  .learning-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;padding-bottom:0!important}
  .learning-card,.learning-card:first-child,.learning-card:last-child{
    min-height:440px!important;
    height:auto!important;
    padding:30px 30px 24px!important;
    border-bottom:1px solid #d9dee2!important;
  }
  .learning-card:nth-child(odd){border-left:1px solid #d9dee2!important}
  .learning-card:nth-child(even){border-right:1px solid #d9dee2!important}
  .learning-card h3{font-size:30px!important;margin-top:16px!important}
  .learning-card p{font-size:16px!important;margin-top:12px!important}
  .learning-card img{height:230px!important;margin-top:24px!important;object-fit:contain!important}

  .impact{padding:84px 0 90px!important}
  .impact-head h2{font-size:45px!important}
  .impact-head>p:last-child{font-size:18px!important;margin-top:22px!important}
  .impact-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:26px!important;margin-top:42px!important}
  .impact-card{min-height:0!important;padding:24px!important}
  .impact-card img{height:auto!important;aspect-ratio:16/10!important}

  .contact{height:auto!important;min-height:620px!important;padding:80px 0!important}
  .contact-inner{width:calc(100% - 64px)!important;max-width:none!important}
  .contact-inner h2{font-size:clamp(46px,6vw,60px)!important}
  .contact-inner>p:not(.eyebrow){font-size:19px!important}
  .mail-link{width:min(100%,680px)!important;margin-top:60px!important}

  /* ======================================================
     DATA MOAT PAGE
     ====================================================== */
  .section-pad{padding:88px 0!important}
  .why-child{height:auto!important;min-height:760px!important;padding:84px 0!important}
  .why-inner{height:auto!important;gap:48px!important;justify-content:center!important}
  .center-heading h2{font-size:45px!important}
  .light-copy{font-size:18px!important;margin-top:22px!important}
  .why-tabs{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:14px!important}
  .why-tab{min-height:220px!important;padding:26px 18px!important;border-radius:18px!important}
  .why-tab strong{font-size:clamp(22px,2.8vw,28px)!important;text-align:center!important}
  .why-tab span{font-size:20px!important;text-align:center!important}
  .why-tab small{font-size:15px!important;line-height:1.5!important;margin-top:24px!important;text-align:center!important}

  .language-grid{grid-template-columns:1fr!important;gap:42px!important}
  .language-intro{max-width:720px!important}
  .language-intro h2,.section-heading h2,.loop-copy h2{font-size:45px!important}
  .body-copy{font-size:18px!important;margin-top:22px!important}
  .data-row{min-height:160px!important;padding:28px 0!important;gap:28px!important}
  .data-row h3{font-size:26px!important;margin-bottom:12px!important}
  .data-row p{font-size:17px!important}
  .data-row>strong{font-size:clamp(42px,6vw,58px)!important;max-width:48%!important;line-height:1.04!important}

  .elm-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:28px!important;margin-top:34px!important}
  .accordion-item button{min-height:82px!important;padding:14px 16px!important}
  .accordion-item button span{font-size:20px!important}
  .accordion-item.active button span{font-size:23px!important}
  .accordion-panel p{font-size:16px!important;padding-inline:16px!important}
  .accordion-item.active .accordion-panel p{padding:0 16px 22px!important}
  .elm-image{height:400px!important;min-height:400px!important;max-height:400px!important}

  .loop-grid{grid-template-columns:1fr!important;gap:52px!important}
  .loop-visual{width:min(560px,76vw)!important;height:auto!important;aspect-ratio:1!important;margin:0 auto!important;transform:none!important}
  .loop-copy{max-width:760px!important;margin:0 auto!important;text-align:left!important}

  /* ======================================================
     DIGITAL HUMAN + LEARNING EXPERIENCE
     ====================================================== */
  body:has(.tech-section) .section,
  body:has(.main-learning-sync) .section{padding:84px 32px!important}
  .headline{font-size:45px!important}
  .desc{font-size:18px!important;line-height:1.6!important}
  .heading-block{margin-bottom:40px!important}

  /* Static KOR technology image + existing ENG construction both stay contained */
  .tech-section .tech-heading{margin-bottom:36px!important}
  .tech-static-visual{width:100%!important;max-width:100%!important}
  .tech-pc{transform:scale(.72)!important;transform-origin:top center!important;margin-bottom:-150px!important}

  /* ELM: use a flow layout on all tablets, preventing absolute overlap at 1001–1180 */
  .elm-section{height:auto!important;min-height:0!important;padding:84px 32px 68px!important;overflow:hidden!important}
  .elm-inner{height:auto!important;min-height:0!important;padding:0!important;width:calc(100% - 64px)!important;max-width:none!important;margin:0 auto!important}
  .elm-copy,.feature-list{width:100%!important;max-width:760px!important}
  .feature-list{gap:16px!important;margin-top:34px!important}
  .feature{padding:16px 22px!important;border-radius:16px!important}
  .feature img{width:44px!important;height:44px!important}
  .feature h4{font-size:21px!important}
  .feature p{font-size:16px!important}
  .elm-feature-connectors{display:none!important}
  .elm-visual-viewport{
    position:relative!important;
    right:auto!important;
    bottom:auto!important;
    width:min(650px,100%)!important;
    height:650px!important;
    margin:38px auto 0!important;
    overflow:hidden!important;
  }
  .elm-visual-viewport .elm-source-visual{
    width:700px!important;
    height:800px!important;
    transform:translate(-50%,-50%) scale(.74)!important;
  }

  .process{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:22px!important}
  .process .arrow{display:none!important}
  .process-card{padding:18px 18px 28px!important}
  .process-card .shot{height:auto!important;aspect-ratio:16/10!important;margin-bottom:22px!important}
  .process-card h3{font-size:25px!important}
  .process-card p{font-size:17px!important}

  .human-cards,.assess-cards,.report-cards{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:22px!important}
  .human-card,.assess-card,.report-card{border-radius:30px!important;padding:24px!important}
  .human-card .visual,.assess-card .visual{height:auto!important;aspect-ratio:16/10!important;border-radius:22px!important}
  .report-card .visual{height:360px!important;border-radius:18px!important}
  .human-card h3,.assess-card h3,.report-card h3{font-size:27px!important;margin-top:24px!important}
  .assess-card h4,.report-card h4{font-size:22px!important}
  .assess-card p,.report-card p{font-size:16px!important}

  .interaction-head{display:block!important}
  .interaction-head .desc{width:100%!important;text-align:left!important;max-width:760px!important}
  .interaction-box{height:auto!important;margin-top:38px!important;padding-bottom:34px!important}
  .tabs{display:flex!important;height:78px!important;gap:0!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch!important;scrollbar-width:none!important}
  .tabs::-webkit-scrollbar{display:none}
  .tab{flex:0 0 190px!important;font-size:17px!important;padding-inline:12px!important}
  .interaction-content{position:relative!important;top:auto!important;bottom:auto!important;left:auto!important;right:auto!important;display:grid!important;grid-template-columns:minmax(220px,.75fr) minmax(0,1.25fr)!important;gap:28px!important;align-items:center!important;padding:32px!important}
  .interaction-copy{position:relative!important;left:auto!important;right:auto!important;top:auto!important;margin:0!important;width:auto!important}
  .interaction-copy h3,.interaction-standard-copy h3{font-size:28px!important}
  .interaction-copy p,.interaction-standard-copy p{font-size:16px!important;line-height:1.55!important}
  .interaction-environment{width:100%!important;grid-template-columns:1fr!important;gap:20px!important}
  .interaction-img{position:relative!important;left:auto!important;right:auto!important;top:auto!important;margin:0!important;width:100%!important;height:auto!important;aspect-ratio:807/511!important;border-radius:24px!important}

  /* Learning Experience */
  .main-learning-sync{padding-top:84px!important}
  .main-learning-sync-head{margin-bottom:48px!important}
  .main-learning-sync-head h1{font-size:45px!important;margin-bottom:24px!important}
  .main-learning-sync-head>p:last-child{font-size:18px!important}
  .main-learning-sync-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;padding-bottom:0!important}
  .main-learning-sync-card,.main-learning-sync-card:first-child,.main-learning-sync-card:last-child{
    height:auto!important;min-height:430px!important;padding:30px 28px 24px!important;border-bottom:1px solid #D0D6E1!important;
  }
  .main-learning-sync-card h3{font-size:30px!important;margin-top:16px!important}
  .main-learning-sync-card p{font-size:16px!important;margin-top:12px!important}
  .main-learning-sync-card img{height:225px!important;margin-top:24px!important}

  .textbook-grid{grid-template-columns:1fr!important;gap:42px!important}
  .textbook-grid>.fade:first-child{max-width:760px!important}
  .textbook-exp .loop-stage{width:min(720px,100%)!important;max-width:100%!important;margin:0 auto!important;transform:scale(.82)!important;transform-origin:top center!important;margin-bottom:-110px!important}

  .flow-top{grid-template-columns:1fr!important;gap:34px!important}
  .flow-top>.fade:first-child{max-width:760px!important}
  .flow-image{width:100%!important;height:auto!important;aspect-ratio:16/10!important;border-radius:22px!important}
  .flow-caption h3{font-size:28px!important}
  .flow-caption p{font-size:17px!important}
  .flow-tabs{display:flex!important;height:auto!important;min-height:86px!important;overflow-x:auto!important;scrollbar-width:none!important;margin-top:28px!important}
  .flow-tabs::-webkit-scrollbar{display:none}
  .flow-tab{flex:0 0 180px!important;padding:12px 14px!important}
  .flow-tab span:last-child{font-size:16px!important}

  .mini-flow{height:auto!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:0!important;margin-top:42px!important}
  .mini-arrow{display:none!important}
  .mini-step{padding:18px 24px!important;border-bottom:1px solid var(--line)!important}
  .mini-step strong{font-size:18px!important}
  .mini-step span{font-size:14px!important}
  .closing{font-size:30px!important;margin-top:34px!important}
}

/* Landscape / large tablets: preserve two-column rhythm without desktop overflow. */
@media (min-width:901px) and (max-width:1200px){
  .data-moat .stats,
  section.data-moat .stats{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    column-gap:35px!important;
    width:100%!important;
  }
  .data-moat .stat,
  section.data-moat .stat{
    min-width:0!important;
    margin-right:0!important;
  }
  .data-moat .stat-wide,
  section.data-moat .stat-wide{
    grid-column:1 / 2!important;
    width:100%!important;
  }
  .metrics-grid{column-gap:35px!important;}
  .metric-card{min-width:0!important;margin-right:0!important;}
}

/* Portrait tablets: prefer single-column safety where two columns become cramped. */
@media (min-width:761px) and (max-width:900px){
  .data-moat .stats,
  section.data-moat .stats{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    column-gap:28px!important;
    width:100%!important;
  }
  .data-moat .stat,
  section.data-moat .stat{min-width:0!important;margin-right:0!important;}
  .data-moat .stat-wide,
  section.data-moat .stat-wide{grid-column:1 / 2!important;width:100%!important;}
  .metrics-grid{column-gap:28px!important;}
  .metric-card{min-width:0!important;margin-right:0!important;}
  .overview-grid{grid-template-columns:1fr!important}
  .elm-orbit{justify-self:center!important;width:min(520px,76vw)!important}

  .different-cards{grid-template-columns:1fr!important}
  .diff-card,.diff-card:last-child{grid-column:auto!important;width:min(560px,100%)!important;justify-self:center!important}

  .meet-grid,.data-grid{grid-template-columns:1fr!important}
  .video-card,.data-image{width:min(720px,100%)!important;margin:0 auto!important}

  .impact-grid{grid-template-columns:1fr!important}

  .why-tabs{grid-template-columns:1fr!important}
  .why-tab{min-height:180px!important}

  .elm-grid{grid-template-columns:1fr!important}
  .elm-image{height:auto!important;min-height:0!important;max-height:none!important;aspect-ratio:16/10!important}

  .human-cards,.assess-cards,.report-cards{grid-template-columns:1fr!important}
  .interaction-content{grid-template-columns:1fr!important}
  .interaction-copy{max-width:680px!important}
  .interaction-img{max-width:760px!important;margin:0 auto!important}
}

/* Short tablet landscape: trim vertical whitespace only inside tablet scope. */
@media (min-width:761px) and (max-width:1200px) and (max-height:820px){
  body:has(.hero) .hero{min-height:650px!important;max-height:760px!important}
  body:has(.hero) .hero-copy{margin-top:-18px!important}
  .overview{min-height:680px!important;padding:68px 0!important}
  .section-pad,
  body:has(.tech-section) .section,
  body:has(.main-learning-sync) .section{padding-top:72px!important;padding-bottom:72px!important}
  .meet,.data-moat,.technology,.impact{padding-top:72px!important;padding-bottom:72px!important}
}