/* VAULT · the marketing page · 4 · Day one (9 Nov 2026; board 10, screen 4). The field of three years on the left, the count and
   the bars on the right; m-dayone.js draws the field and the flights on two canvases and rolls the count. Phone: the field above. */
.d1{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,348px);gap:clamp(40px,5vw,76px);align-items:start}
.d1-f{position:relative;height:480px;min-width:0}
.d1-cv{position:absolute;inset:0;width:100%;height:100%;display:block}
.d1-fx{position:absolute;left:0;top:-120px;width:100%;height:calc(100% + 120px);display:block;pointer-events:none;z-index:3}
.d1-ax{position:absolute;left:0;right:0;bottom:0;height:14px;font:500 11px/14px var(--mono);letter-spacing:.16em;color:var(--f)}
.d1-yr{position:absolute;bottom:0;white-space:nowrap}
.d1-yr:before{content:"";position:absolute;left:0;bottom:calc(100% + 9px);width:1px;height:7px;background:rgba(255,255,255,.16)}
.d1-yr.d1-now{color:var(--t);transform:translateX(-50%);letter-spacing:.2em;padding-left:.2em}
.d1-yr.d1-now:before{left:50%;height:10px;background:rgba(255,255,255,.5)}

.d1-r{position:relative;z-index:1;min-width:0}
.d1-num{padding-top:6px}
.d1-n{display:flex;font-size:150px;font-weight:600;letter-spacing:-.06em;line-height:.9;font-variant-numeric:tabular-nums;color:rgba(245,245,247,.16);transition:color .8s var(--ease)}
.d1-n.lit{color:var(--t)}
.d1-dg{position:relative;display:inline-block;padding:.14em .1em;margin:-.14em -.1em;white-space:nowrap;            /* a soft odometer window */
 -webkit-mask-image:linear-gradient(180deg,transparent,#000 17%,#000 83%,transparent);mask-image:linear-gradient(180deg,transparent,#000 17%,#000 83%,transparent)}
.d1-dg b{display:block;font-weight:inherit}
.d1-dg b.out{position:absolute;left:.1em;top:.14em}
.d1-num small{display:block;margin-top:18px;font-size:16px;line-height:1.45;color:var(--m);letter-spacing:-.005em;max-width:21em}
.d1-bars{margin-top:32px}
.d1-bar{display:grid;grid-template-columns:128px minmax(0,1fr) 26px;align-items:center;gap:12px;height:40px;font-size:14px}
.d1-bl{color:var(--f);transition:color .7s var(--ease);white-space:nowrap}
.d1-bar.on .d1-bl{color:rgba(245,245,247,.88)}
.d1-bt{position:relative;display:flex;align-items:center;gap:3px;height:9px}
.d1-bt:before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.08),rgba(255,255,255,.02))}
.d1-bt i{position:relative;flex:none;width:15px;height:9px;border-radius:3px;background:var(--c);opacity:0;transform:scale(.3)}
.d1-bt i.on{opacity:1;transform:none;box-shadow:0 0 10px var(--c),0 0 2px var(--c)}
.d1-bt i.red{box-shadow:0 0 0 1.5px #000,0 0 0 2.5px #ff453a,0 0 12px rgba(255,69,58,.8)}
.d1-bc{font-weight:600;text-align:right;color:rgba(245,245,247,.2);font-variant-numeric:tabular-nums;transition:color .5s var(--ease)}
.d1-bar.on .d1-bc{color:var(--t)}

/* tablet: the field across, the count and the bars side by side beneath it */
@media (max-width:1080px){
 .d1{grid-template-columns:minmax(0,1fr);gap:30px}
 .d1-f{height:370px}
 .d1-r{display:grid;grid-template-columns:auto minmax(0,380px);justify-content:space-between;align-items:end;column-gap:48px}
 .d1-bars{margin-top:0}
}
/* phone: the field above, the count, then the bars */
@media (max-width:640px){
 .d1{gap:22px}
 .d1-f{height:330px}
 .d1-r{display:block}
 .d1-n{font-size:112px}
 .d1-num small{font-size:15px;margin-top:14px}
 .d1-bars{margin-top:26px}
 .d1-bar{grid-template-columns:116px minmax(0,1fr) 24px;gap:10px;height:36px;font-size:13.5px}
 .d1-ax{font-size:10px;letter-spacing:.12em}
}