/* Homepage only. Keep the existing D1 Edu photograph, copy and statistics. */
[data-damu-carousel] { --carousel-duration: 6s; }
.dm-carousel-viewport { overflow:hidden; touch-action:pan-y pinch-zoom; outline-offset:-4px; cursor:grab; }
.dm-carousel-viewport:active { cursor:grabbing; }
.dm-carousel-track { display:flex; align-items:stretch; transition:transform .65s cubic-bezier(.22,.75,.18,1); will-change:transform; }
.dm-carousel-slide { position:relative; flex:0 0 100%; min-width:0; overflow:hidden; user-select:none; }
.dm-carousel-slide .damu-hero-background { inset:0 !important; }
.dm-carousel-slide [data-hero-pad] { height:100%; padding-bottom:24px !important; }
.dm-carousel-slide .damu-hero-art img { -webkit-user-drag:none; }
.dm-carousel-product { background:#fff; display:flex; align-items:center; }
.dm-carousel-copy { width:100%; max-width:1280px; margin:0 auto; padding:48px 32px; position:relative; z-index:1; pointer-events:none; }
.dm-carousel-copy > * { max-width:48%; }
.dm-carousel-kicker { color:#2c6bb3; font-size:14px; font-weight:600; letter-spacing:.22em; margin-bottom:22px; }
.dm-carousel-copy h2 { font-size:clamp(40px,3.65vw,54px); line-height:1.18; letter-spacing:.02em; color:#14223a; margin:0; }
.dm-carousel-copy p { font-size:17px; line-height:1.8; color:#52637b; margin:24px 0 30px; }
.dm-carousel-copy .dm-carousel-actions { display:flex; flex-wrap:wrap; gap:12px; pointer-events:auto; }
.dm-carousel-link { display:inline-flex; justify-content:center; align-items:center; min-height:46px; padding:10px 25px; border-radius:999px; background:#15243d; color:white; font-size:15px; font-weight:600; text-decoration:none; transition:background .2s; }
.dm-carousel-link:hover { background:#285d94; }
.dm-carousel-photo { position:absolute; height:90%; max-width:48%; width:auto; right:max(4%,calc((100vw - 1230px)/2)); top:50%; transform:translateY(-50%); object-fit:contain; mix-blend-mode:multiply; pointer-events:none; }
.dm-carousel-diy { background:#f4f7fb; }
.dm-carousel-zodiac { display:grid; grid-template-columns:repeat(4,88px); gap:12px; position:absolute; right:max(6%,calc((100vw - 1160px)/2)); top:50%; transform:translateY(-50%); }
.dm-carousel-zodiac span { height:88px; background:#fff; display:grid; place-items:center; border-radius:17px; color:#14223a; font-size:36px; font-weight:700; box-shadow:0 7px 22px rgba(20,34,58,.05); }
.dm-carousel-zodiac span:nth-child(3n) { background:#16273e; color:#fff; }
.dm-carousel-zodiac span:nth-child(5) { background:#b3262b; color:#fff; }
.dm-carousel-note { display:block; font-size:13px; color:#69768a; margin-top:16px; }
.dm-carousel-controls { max-width:1280px; margin:auto; padding:0 32px 18px; }
.dm-carousel-tabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; }
.dm-carousel-tab { position:relative; padding:17px 0 13px; background:transparent; border:0; border-top:2px solid #ccd7e3; text-align:left; cursor:pointer; font:inherit; color:#64748a; font-size:15px; font-weight:600; }
.dm-carousel-tab::before { content:''; position:absolute; left:0; top:-2px; width:100%; height:2px; background:#244d78; transform:scaleX(0); transform-origin:left; }
.dm-carousel-tab[aria-current=true] { color:#183452; }
.dm-carousel-tab[aria-current=true]::before { animation:dm-carousel-progress var(--carousel-duration) linear forwards; }
[data-carousel-paused=true] .dm-carousel-tab[aria-current=true]::before { animation-play-state:paused; }
.dm-carousel-tools { display:flex; align-items:center; justify-content:space-between; min-height:26px; gap:16px; color:#6d7f94; font-size:12px; }
.dm-carousel-pause { color:#526b85; background:none; border:1px solid #cad7e4; border-radius:999px; cursor:pointer; padding:4px 12px; font:inherit; }
.dm-carousel-stats { max-width:1280px; margin:auto; padding:0 32px; }
.dm-carousel-stats [data-stat-grid] { margin-top:0 !important; background:rgba(255,255,255,.82); }
.dm-carousel-tab:focus-visible,.dm-carousel-pause:focus-visible,.dm-carousel-link:focus-visible { outline:2px solid #2c6bb3; outline-offset:5px; }
@keyframes dm-carousel-progress { to { transform:scaleX(1); } }
@media(max-width:900px) {
  .dm-carousel-slide [data-hero-grid] { display:flex !important; flex-direction:column; gap:12px !important; align-items:stretch !important; }
  .dm-carousel-slide [data-hero-pad] { padding-top:32px !important; padding-bottom:16px !important; }
  .dm-carousel-slide .damu-hero-copy { max-width:100%; }
  .dm-carousel-product { align-items:stretch; flex-direction:column; }
  .dm-carousel-copy { padding:50px 32px 20px; }
  .dm-carousel-copy > * { max-width:100%; }
  .dm-carousel-copy h2 { font-size:40px; }
  .dm-carousel-copy p { font-size:16px; margin:18px 0 22px; }
  .dm-carousel-photo { position:relative; height:330px; width:100%; max-width:100%; right:auto; top:auto; transform:none; margin:auto 0 20px; }
  .dm-carousel-zodiac { position:relative; right:auto; top:auto; transform:none; margin:auto; padding:20px 0 32px; grid-template-columns:repeat(4,74px); gap:10px; }
  .dm-carousel-zodiac span { height:74px; font-size:30px; }
  .dm-carousel-tabs { gap:12px; }
  .dm-carousel-tab { font-size:13px; }
}
@media(max-width:600px) {
  .dm-carousel-copy,.dm-carousel-controls,.dm-carousel-stats { padding-left:20px; padding-right:20px; }
  .dm-carousel-slide [data-hero-pad] { padding-left:20px !important; padding-right:20px !important; }
  .dm-carousel-slide .damu-hero-art { height:230px; }
  .dm-carousel-slide .damu-hero-copy h1 { font-size:28px !important; margin-bottom:18px !important; }
  .dm-carousel-slide .damu-hero-copy > div:first-child { margin-bottom:18px !important; }
  .dm-carousel-slide .damu-hero-copy > p { font-size:15px !important; line-height:1.75 !important; margin-bottom:24px !important; }
  .dm-carousel-slide .damu-hero-background { background-size:auto 370px !important; background-position:67% bottom !important; }
  .dm-carousel-copy { padding-top:46px; }
  .dm-carousel-copy h2 { font-size:36px; }
  .dm-carousel-kicker { font-size:12px; margin-bottom:18px; }
  .dm-carousel-photo { height:280px; }
  .dm-carousel-tabs { gap:10px; }
  .dm-carousel-tab { font-size:12px; line-height:1.6; min-height:70px; }
  .dm-carousel-tools { gap:8px; font-size:11px; }
}
@media(prefers-reduced-motion:reduce) {
  .dm-carousel-track { transition:none; }
  .dm-carousel-tab[aria-current=true]::before { animation:none; transform:scaleX(1); }
}
