@font-face{font-family:Inter;src:url('homepage-assets/InterVariable.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
:root{--blue:#004a6c;--ink:#202124;--muted:#667177;--line:#dce3e5;--sun:#f2b230;--water:#1f8fe0;--deep:#0e3a57;--foam:#f2f9fd;--mist:#dff0fb;--gutter:clamp(24px,5vw,80px);--header-h:80px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);background:#fff;font-family:Inter,Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer}
img{display:block;max-width:100%;height:auto}
figure,p,h1,h2,h3,ul,dl,dd{margin:0}
.eyebrow{font-size:12px;line-height:1.6;letter-spacing:.11em;font-weight:550;text-transform:uppercase;color:var(--muted)}
h1,h2{text-wrap:balance}
h1 em,h2 em,h3 em{font-family:Georgia,"Times New Roman",serif;font-style:italic;font-weight:400}
.text-link{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:14px;color:var(--blue);border-bottom:1px solid currentColor}
.text-link span{transition:transform .18s}
.text-link:hover span{transform:translateX(3px)}
a:focus-visible,button:focus-visible{outline:2px solid var(--blue);outline-offset:5px}
.skip-link{position:fixed;z-index:50;top:10px;left:10px;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip-link:focus{width:auto;height:auto;clip-path:none;background:white;padding:12px}
.pill{display:inline-flex;align-items:center;gap:10px;min-height:50px;padding:0 22px;border-radius:999px;font-size:15px;font-weight:560;white-space:nowrap}
.pill i{width:9px;height:9px;border-radius:50%}
.pill.sun{background:var(--ink);color:#fff}.pill.sun i{background:var(--sun);box-shadow:0 0 0 4px #f2b23040}
.pill.light{background:var(--water);color:#fff;box-shadow:0 10px 28px #1f8fe033}.pill.light i{background:#fff}

/* ---------- A day with Beneland ----------
   Without script or with reduced motion the moments stack as ordinary sections.
   With html.day-live, one stage sticks under the header and scrolling moves the clock. */
.day-scene{position:relative;padding:96px var(--gutter)}
.day-intro{display:flex;flex-direction:column;align-items:center;text-align:center;background:linear-gradient(180deg,#e7eef3,#fff)}
.day-intro .eyebrow b{color:var(--blue);font-weight:600}
.day-intro h1{margin-top:22px;font-size:clamp(44px,5.4vw,92px);line-height:.96;letter-spacing:-.058em;font-weight:620}
.day-intro h1 .m2{color:var(--water)}
.day-intro .lead{margin-top:28px;max-width:46ch;font-size:clamp(16px,1.3vw,20px);line-height:1.55;letter-spacing:-.01em;color:#46525a}
.day-cue{display:none}

.moment{display:grid;align-items:center;gap:clamp(20px,4vw,72px)}
.moment-sun{grid-template-columns:minmax(0,7fr) minmax(0,5fr);background:radial-gradient(circle at 30% 50%,#ffe7a0 0,#fff7df 30%,#fff 62%)}
.moment-light{grid-template-columns:minmax(0,5fr) minmax(0,7fr);background:linear-gradient(180deg,var(--mist),var(--foam))}
.moment .when{display:flex;gap:12px;align-items:center}
.moment-sun .when{color:#a8790f}.moment-light .when{color:#2f7fbf}
.moment .name{margin-top:18px;font-size:clamp(84px,9.6vw,164px);line-height:.8;letter-spacing:-.075em}
.moment-sun .name{font-weight:680}
.moment-light .name{font-family:Georgia,"Times New Roman",serif;font-style:italic;font-weight:400;letter-spacing:-.05em;color:var(--water)}
.moment .tagline{margin-top:24px;font-size:clamp(22px,2vw,32px);line-height:1.1;letter-spacing:-.035em;font-weight:540}
.moment-light .tagline{color:var(--deep);font-weight:430}
.moment ul{list-style:none;margin-top:26px;padding:0;display:grid;gap:10px;font-size:15px;line-height:1.45;color:#4b565c}
.moment-light ul{color:#3f6278}
.moment li{display:flex;gap:12px;align-items:baseline}
.moment li:before{content:"";flex:none;width:7px;height:7px;border-radius:50%;transform:translateY(-2px)}
.moment-sun li:before{background:var(--sun)}.moment-light li:before{background:var(--water)}
.moment .pill{margin-top:32px}
.moment-figure{position:relative;justify-self:center;width:100%}
.moment-sun .moment-figure{aspect-ratio:1;max-width:640px}
.moment-light .moment-figure{aspect-ratio:4/3;max-width:820px}
.moment-figure .poster{width:100%;height:100%;object-fit:contain}
.moment-figure canvas,.drag-chip,.sun-floor,.ripple{display:none}

.day-family{display:flex;flex-direction:column;align-items:center;text-align:center}
.day-family h2{margin-top:16px;font-size:clamp(40px,4.6vw,78px);line-height:.98;letter-spacing:-.055em;font-weight:620}
.day-family h2 em{color:var(--blue)}
.daymap{position:relative;width:min(1200px,100%);height:230px;margin-top:46px;--draw:1}
.daymap .line{position:absolute;left:0;right:0;top:50%;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--sun),#9fc9e9 70%,var(--deep));transform-origin:0 50%;transform:scaleX(var(--draw))}
.stop{position:absolute;top:50%;width:0}
.stop i{position:absolute;left:-7px;top:-7px;width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid #9aa6ad}
.stop.has-product i{border:0;background:var(--c);box-shadow:0 0 0 5px color-mix(in srgb,var(--c) 22%,transparent)}
.stop .label{position:absolute;left:0;transform:translateX(-50%);width:170px;display:flex;flex-direction:column;align-items:center;gap:6px}
.stop:nth-child(odd) .label{bottom:22px}.stop:nth-child(even) .label{top:22px}
.stop small{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.stop b{font-size:17px;line-height:1.15;letter-spacing:-.025em;font-weight:600}
.stop .who{display:inline-flex;align-items:center;min-height:26px;padding:4px 11px;border-radius:999px;font-size:12px;font-weight:600;background:#fff;box-shadow:0 4px 14px #0e3a5712}
.day-family .note{margin-top:24px;font-size:14px;color:var(--muted)}

.day-night{display:flex;flex-direction:column;align-items:center;text-align:center;padding-bottom:240px;color:#fff;background:linear-gradient(180deg,#0a2237 0%,#0e3a57 50%,#6f93ae 76%,#e7eef3 92%,#fff 100%)}
.day-night .eyebrow{color:#b9cddb}
.day-night h2{margin-top:20px;font-size:clamp(46px,5.8vw,100px);line-height:.98;letter-spacing:-.058em;font-weight:600}
.day-night h2 em{color:#ffe7a0}
.day-sky,.dayline{display:none}

/* Live day */
.day-live .day{height:640vh}
/* Clip the stage without creating a scroll container that focus/scrollIntoView can move. */
.day-live .day-stage{position:sticky;top:var(--header-h);height:calc(100vh - var(--header-h));height:calc(100svh - var(--header-h));overflow:clip;color:var(--fg,#202124);touch-action:pinch-zoom;
 background:linear-gradient(180deg,var(--sky-top,#e7eef3) 0%,var(--sky-bottom,#fff) 100%)}
.day-live .day-stage.allows-page-scroll{touch-action:pan-y pinch-zoom}
.day-live .day-sky{display:block;position:absolute;inset:0;pointer-events:none}
.day-live .day-scene{position:absolute;inset:0;padding:40px var(--gutter) 120px;background:none;opacity:0;pointer-events:none;will-change:opacity,transform}
.day-live .day-intro{opacity:1;pointer-events:auto}
.day-live .day-intro,.day-live .day-family,.day-live .day-night{justify-content:center}
.day-live .day-intro .eyebrow,.day-live .day-family .eyebrow,.day-live .stop small,.day-live .day-family .note{color:var(--fg-muted,#667177)}
.day-live .day-night{color:var(--fg,#fff)}.day-live .day-night .eyebrow{color:var(--fg-muted,#b9cddb)}.day-live .day-night h2 em{color:var(--em,#ffe7a0)}
.day-live .day-cue{display:inline-flex;margin:0;gap:12px;align-items:center;font-size:13px;color:var(--fg-muted,#667177)}
.day-cue i{position:relative;width:22px;height:34px;border-radius:12px;border:1.5px solid currentColor}
.day-cue i:after{content:"";position:absolute;left:50%;top:7px;width:3px;height:7px;margin-left:-1.5px;border-radius:2px;background:currentColor;animation:day-wheel 1.8s ease-in-out infinite}
.day-cue-mouse{flex:none;margin-inline:6px}
.day-cue-hand{flex:none;width:34px;height:36px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.day-cue-touch{display:none}
@media (pointer:coarse),(max-width:700px){
 .day-cue .day-cue-mouse,.day-cue-desktop{display:none}
 .day-cue-touch{display:inline}
 .day-cue-hand{order:-1}
}
@keyframes day-wheel{0%{transform:translateY(0);opacity:1}70%{transform:translateY(9px);opacity:0}100%{opacity:0}}
.day-live .moment-sun .moment-figure{max-width:calc(100svh - var(--header-h) - 170px)}
.day-live .moment-light .moment-figure{max-width:calc((100svh - var(--header-h) - 170px)*4/3)}
.day-live .moment-figure .poster{position:absolute;inset:0}
.day-live .moment-figure.has-frame .poster{display:none}
.day-live .moment-figure canvas{position:relative;display:block;width:100%;height:100%;touch-action:pan-y;outline:none}
/* Match the model's mouse-drag axis without switching system hand shapes. */
.day-live #sun-canvas{cursor:ew-resize}
.day-live #light-canvas{cursor:ns-resize}
.day-live .moment-figure canvas:focus-visible{box-shadow:0 0 0 3px #1f8fe055;border-radius:24px}
.day-live .sun-floor{display:block;position:absolute;left:30%;right:30%;bottom:5.5%;height:6%;border-radius:50%;background:radial-gradient(closest-side,#1f22262e,#1f222600)}
.day-live .ripple{display:block;position:absolute;left:50%;bottom:18%;width:64%;aspect-ratio:5/1;border-radius:50%;border:1.5px solid #1f8fe02e;opacity:0;animation:day-ripple 4.8s ease-out infinite}
.day-live .ripple+.ripple{animation-delay:-2.4s}
@keyframes day-ripple{0%{transform:translateX(-50%) scale(.55);opacity:0}20%{opacity:1}100%{transform:translateX(-50%) scale(1.15);opacity:0}}
.day-live .drag-chip{display:inline-flex;position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:max-content;max-width:calc(100% - 12px);white-space:nowrap;gap:8px;align-items:center;padding:9px 15px;border-radius:999px;background:#ffffffe0;color:var(--ink);font-size:13px;font-weight:560;box-shadow:0 8px 24px #0e3a5717;pointer-events:none;transition:opacity .4s}
.drag-chip svg{width:16px;height:16px}
.moment-figure.touched .drag-chip{opacity:0}
.motion-status{position:absolute;left:50%;bottom:0;transform:translateX(-50%);padding:9px 15px;border-radius:999px;background:#fffffff0;color:var(--ink);font-size:13px;white-space:nowrap}
.moment-figure.is-preparing .drag-chip{visibility:hidden}
.day-live .daymap{--draw:0}
.day-live .daymap.is-revealed{--draw:1}
.day-live .daymap.is-revealed .line{transition:transform .8s linear}
.day-live .stop{opacity:0;transform:translateY(8px)}
.day-live .daymap.is-revealed .stop{opacity:1;transform:translateY(0);transition:opacity .175s ease-out var(--reveal-delay),transform .175s ease-out var(--reveal-delay)}
.day-live .stop .who{background:#fff}

.day-glow{--glow-rgb:255 231 160;position:absolute;left:0;top:0;width:min(1200px,170vw);aspect-ratio:1;border-radius:50%;will-change:transform,opacity;
 background:radial-gradient(circle,rgb(var(--glow-rgb)) 0,rgb(var(--glow-rgb) / .62) 16%,rgb(var(--glow-rgb) / .22) 36%,rgb(var(--glow-rgb) / 0) 62%)}
.day-stars,.day-bubbles{position:absolute;inset:0;opacity:0}
.day-stars i{position:absolute;border-radius:50%;background:#fff;animation:day-twinkle 3.4s ease-in-out infinite}
@keyframes day-twinkle{50%{opacity:.2}}
.day-bubbles span{position:absolute;bottom:-90px;border-radius:50%;background:radial-gradient(circle at 32% 30%,#fff 0,#ffffffb8 20%,#d6ecfa70 58%,#fff0 72%);box-shadow:inset 0 0 0 1px #ffffffb0;animation:day-rise 11s linear infinite}
.day-stars:not(.is-active) i,.day-bubbles:not(.is-active) span,.moment-light:not(.is-active) .ripple{animation-play-state:paused}
@keyframes day-rise{0%{transform:translate(0,0);opacity:0}12%{opacity:1}50%{transform:translate(14px,-55vh)}100%{transform:translate(-8px,-112vh);opacity:0}}

.day-live .dayline{position:absolute;z-index:6;left:var(--gutter);right:var(--gutter);bottom:22px;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:30px;color:var(--fg,#202124)}
.day-start{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px 26px;margin-top:36px}
.day-now{display:flex;align-items:center;gap:16px}
.day-play{display:inline-flex;align-items:center;gap:9px;min-height:40px;padding:0 16px 0 13px;border:1.5px solid currentColor;border-radius:999px;background:transparent;color:inherit;font-size:13px;font-weight:580;white-space:nowrap}
.day-play svg{width:13px;height:13px;fill:currentColor;flex:none}
.day-play .pause,.day-play[aria-pressed="true"] .play{display:none}
.day-play[aria-pressed="true"] .pause{display:block}
.day-clock{display:flex;align-items:baseline;gap:10px;min-width:170px}
.day-clock time{font-size:24px;font-weight:560;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.day-clock span{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-muted,#667177)}
.day-track{position:relative;height:46px}
.day-track:before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:currentColor;opacity:.16}
.day-track .fill{position:absolute;left:0;top:50%;height:1px;width:calc(var(--p,0)*100%);background:currentColor;opacity:.5}
.day-mark{position:absolute;top:50%;width:28px;height:28px;transform:translate(-50%,-50%);border:0;padding:0;background:none;color:inherit;cursor:pointer}
.day-mark i{position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--c)}
.day-mark[aria-current="step"] i{outline:1px solid currentColor;outline-offset:4px}
.day-mark span{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:12px;font-weight:580;opacity:0;transition:opacity .25s}
.day-mark:hover span,.day-mark:focus-visible span,.day-mark.near span{opacity:1}
.day-indicator{position:absolute;top:50%;left:calc(var(--p,0)*100%);width:30px;height:30px;transform:translate(-50%,-50%);pointer-events:none}
.day-indicator svg{position:absolute;inset:0;transition:opacity .3s}

/* After the night: who makes it, and how to reach us. */
.after{padding:110px var(--gutter) 100px}
.after-grid{max-width:1440px;margin:0 auto;display:grid;grid-template-columns:7fr 5fr;gap:clamp(30px,5vw,90px);align-items:end}
.after h2{font-size:clamp(36px,3.8vw,64px);line-height:1;letter-spacing:-.055em;font-weight:620;max-width:13ch}
.after h2 em{color:var(--blue)}
.after .maker-copy p{margin-top:20px;max-width:46ch;font-size:15px;line-height:1.65;color:#4b565c}
.maker-facts{margin-top:34px;display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,64px)}
.maker-facts dt{font-size:28px;letter-spacing:-.04em;font-weight:560;color:var(--blue)}
.maker-facts dd{margin-top:6px;max-width:22ch;font-size:13px;line-height:1.5;color:var(--muted)}
.after .text-link{margin-top:28px}
.talk{border-radius:32px;padding:34px;background:var(--foam)}
.talk h2{font-size:clamp(26px,2.2vw,32px);line-height:1.08;letter-spacing:-.045em;font-weight:600;max-width:16ch}
.talk h2 em{color:var(--water)}
.talk p{margin-top:14px;font-size:14px;line-height:1.6;color:#3f6278;max-width:40ch}
.talk-actions{margin-top:24px;display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center}
.talk-actions .pill{background:var(--ink);color:#fff}
.talk-actions .text-link{color:var(--deep)}

@media (max-width:900px){
 .day-scene{padding:72px var(--gutter)}
 .moment{display:flex;flex-direction:column;align-items:stretch;gap:12px}
 .moment-light .moment-figure{order:-1}
 .moment .name{margin-top:8px;font-size:76px}
 .moment .tagline{margin-top:12px;font-size:21px}
 .moment ul{margin-top:14px;font-size:13px;gap:6px}
 .moment .pill{margin-top:16px;min-height:44px;font-size:14px}
 .daymap{height:auto;margin-top:28px;display:grid;gap:14px;justify-items:start;text-align:left;padding-left:26px}
 .daymap .line{left:6px;right:auto;top:0;bottom:0;width:2px;height:auto;transform-origin:50% 0;transform:scaleY(var(--draw));background:linear-gradient(180deg,var(--sun),#9fc9e9 70%,var(--deep))}
 .stop{position:relative;top:auto;left:auto!important;width:auto}
 .stop i{left:-27px;top:4px}
 .stop .label,.stop:nth-child(odd) .label,.stop:nth-child(even) .label{position:static;transform:none;width:auto;flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
 .stop b{font-size:15px}
 .day-family h2{font-size:38px}
 .day-live .day{height:560vh}
 .day-live .day-scene{padding:22px var(--gutter) 92px}
 .day-live .moment{justify-content:flex-start}
 .day-live .moment-figure,.day-live .moment-sun .moment-figure,.day-live .moment-light .moment-figure{flex:none;width:auto;max-width:100%;height:40svh}
 .day-live .drag-chip{font-size:12px;padding:7px 12px}
 .day-live .dayline{bottom:14px;gap:14px}
 .day-clock{min-width:0;flex-direction:column;gap:0}.day-clock time{font-size:18px}.day-clock span{font-size:10px}
 .day-mark span{display:none}
 .day-now{gap:10px}
 .day-play{width:40px;padding:0;justify-content:center}
 .day-play-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 .after{padding:80px var(--gutter)}
 .after-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.day-cue i:after,.day-stars i,.day-bubbles span,.ripple{animation:none}}

/* Keep the product link clear of the timeline on shorter phone screens. */
@media (max-width:900px) and (max-height:740px){
 .day-live .day-scene{padding-top:16px;padding-bottom:82px}
 .day-live .moment{gap:10px}
 .day-live .moment-figure,.day-live .moment-sun .moment-figure,.day-live .moment-light .moment-figure{height:clamp(140px,calc(100svh - 440px),30svh)}
 .day-live .moment .name{font-size:64px;margin-top:6px}
 .day-live .moment .tagline{font-size:20px;margin-top:10px}
 .day-live .moment ul{margin-top:12px;gap:5px}
 .day-live .moment .pill{margin-top:14px}
 .day-live .day-intro h1{font-size:38px;margin-top:18px}
 .day-live .day-intro .lead{font-size:15px;margin-top:20px}
 .day-live .day-start{margin-top:22px}
 .day-live .day-family h2{font-size:34px}
 .day-live .daymap{margin-top:22px;gap:12px}
}