.home-countdowns { display:grid; gap:14px; padding-top:clamp(34px,5vw,66px); }
.flip-countdown { display:flex; justify-content:space-between; align-items:center; gap:30px; border:1px solid #dce5df; border-radius:15px; background:#f8faf8; padding:24px clamp(18px,3vw,36px); }
.flip-info { min-width:0; }
.flip-info p { font-size:11px; letter-spacing:.15em; color:#996f3a; font-weight:800; margin:0 0 9px; }
.flip-info h2 { font-size:clamp(18px,2vw,25px); color:#103b32; margin:0 0 9px; line-height:1.4; }
.flip-info time { font-size:12px; color:#61736b; }
.flip-clock { display:flex; align-items:center; gap:11px; flex:none; }
.flip-unit { display:grid; justify-items:center; gap:8px; }
.flip-digits { height:76px; color:#fff; font-size:clamp(25px,2.8vw,36px); font-weight:750; font-variant-numeric:tabular-nums; }
.flip-value { display:flex; height:100%; gap:2px; }
.flip-digit { position:relative; display:block; width:34px; height:100%; perspective:320px; isolation:isolate; filter:drop-shadow(0 2px 2px #0c332b13); }
.flip-static-top, .flip-static-bottom, .flip-moving-top, .flip-moving-bottom, .flip-hold-bottom { position:absolute; left:0; width:100%; height:50%; overflow:hidden; backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.flip-static-top, .flip-moving-top { top:0; background:#123b33; border-radius:7px 7px 1px 1px; transform-origin:bottom; border-bottom:1px solid #ffffff30; }
.flip-static-bottom, .flip-moving-bottom, .flip-hold-bottom { bottom:0; background:#17473d; border-radius:1px 1px 7px 7px; transform-origin:top; }
.flip-glyph { position:absolute; left:0; top:0; width:100%; height:200%; display:flex; justify-content:center; align-items:center; line-height:1; font-size:1em; }
.flip-static-bottom .flip-glyph, .flip-moving-bottom .flip-glyph, .flip-hold-bottom .flip-glyph { top:-100%; }
.flip-motion { position:absolute; inset:0; z-index:3; pointer-events:none; }
.flip-hold-bottom { z-index:0; animation:flip-hold .32s steps(1,end) both; }
.flip-moving-top { z-index:2; animation:flip-out .32s cubic-bezier(.38,.05,.8,.62) both; }
.flip-moving-bottom { z-index:1; animation:flip-in .32s .32s cubic-bezier(.15,.54,.24,1) both; }
.flip-label { font-size:12px; color:#61736b; }
.flip-countdown.is-complete { opacity:.78; }
@keyframes flip-hold { from { opacity:1; } to { opacity:0; } }
@keyframes flip-out { 0% { transform:rotateX(0); } 100% { transform:rotateX(-90deg); } }
@keyframes flip-in { 0% { transform:rotateX(90deg); } 100% { transform:rotateX(0); } }
@media(max-width:760px) { .flip-countdown { flex-direction:column; align-items:stretch; gap:20px; } .flip-clock { justify-content:center; gap:7px; } .flip-digits { height:68px; font-size:29px; } .flip-digit { width:29px; } }
@media(max-width:390px) { .flip-clock { gap:5px; } .flip-digits { height:56px; font-size:24px; } .flip-digit { width:24px; } }
@media(prefers-reduced-motion:reduce) { .flip-moving-top,.flip-moving-bottom { animation:none; display:none; } }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }