/* The site header, shared by the landing and every sub-page (one file, so they stay identical).
   A liquid-glass capsule: brand mark with live liquid, section nav with a morphing pill,
   sun/moon toggle and the Buy capsule. Below 640px the nav and toggle move into a glass sheet. */
.top{
  --bg:#f5f5f7;--surface:#fff;--line:rgba(0,0,20,.10);--hair:rgba(0,0,20,.06);
  --text:#1d1d1f;--sub:#5f5f66;--faint:#86868b;
  --liquid-hi:#6cc6ff;--liquid:#3d63ff;--liquid-lo:#2a2fc2;
  --liquid-grad:linear-gradient(135deg,var(--liquid-hi),var(--liquid) 52%,var(--liquid-lo));
  --ease:cubic-bezier(.2,.8,.2,1);--spring:cubic-bezier(.34,1.36,.5,1);
  --g-tint:rgba(255,255,255,.62);--g-tint2:rgba(245,245,250,.48);--g-edge:rgba(255,255,255,.95);--g-edge2:rgba(255,255,255,.45);
  --g-inner:rgba(255,255,255,.7);--g-sheen:rgba(255,255,255,.55);--g-ring:rgba(0,0,30,.08);
  --g-shadow:0 1px 1px rgba(0,0,30,.04),0 10px 28px -8px rgba(0,0,40,.16),0 28px 56px -30px rgba(0,0,60,.22);
  --pill:rgba(61,99,255,.10);--pill-ring:rgba(61,99,255,.20);
  --m-glass1:rgba(255,255,255,.96);--m-glass2:#d9e2f6;--m-rim:rgba(42,48,66,.14);--m-back:#93b0ff;--m-back-o:.55;
  position:fixed;top:12px;left:0;right:0;z-index:40;display:flex;justify-content:center;padding:0 12px;pointer-events:none;
  max-width:none;margin:0;font-family:var(--sans);font-size:17px;line-height:1.5;color:var(--text)
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .top{
  --cta-bg:#f5f5f7;--cta-fg:#1d1d1f;--bg:#0b0b0e;--surface:#17171c;--line:rgba(255,255,255,.10);--hair:rgba(255,255,255,.07);
  --text:#f5f5f7;--sub:#a1a1a8;--faint:#8a8a92;
  --liquid-hi:#7fe0ff;--liquid:#5f7cff;--liquid-lo:#3a35d0;
  --g-tint:rgba(30,30,38,.62);--g-tint2:rgba(16,16,22,.5);--g-edge:rgba(255,255,255,.34);--g-edge2:rgba(255,255,255,.1);
  --g-inner:rgba(255,255,255,.12);--g-sheen:rgba(255,255,255,.12);--g-ring:rgba(255,255,255,.08);
  --g-shadow:0 1px 1px rgba(0,0,0,.3),0 12px 30px -8px rgba(0,0,0,.5),0 28px 56px -30px rgba(0,0,0,.6);
  --pill:rgba(125,151,255,.16);--pill-ring:rgba(125,151,255,.3);
  --m-glass1:rgba(255,255,255,.16);--m-glass2:rgba(28,36,64,.55);--m-rim:rgba(255,255,255,.32);--m-back:#7d97ff;--m-back-o:.45;
}}
:root[data-theme="dark"] .top{
  --cta-bg:#f5f5f7;--cta-fg:#1d1d1f;--bg:#0b0b0e;--surface:#17171c;--line:rgba(255,255,255,.10);--hair:rgba(255,255,255,.07);
  --text:#f5f5f7;--sub:#a1a1a8;--faint:#8a8a92;
  --liquid-hi:#7fe0ff;--liquid:#5f7cff;--liquid-lo:#3a35d0;
  --g-tint:rgba(30,30,38,.62);--g-tint2:rgba(16,16,22,.5);--g-edge:rgba(255,255,255,.34);--g-edge2:rgba(255,255,255,.1);
  --g-inner:rgba(255,255,255,.12);--g-sheen:rgba(255,255,255,.12);--g-ring:rgba(255,255,255,.08);
  --g-shadow:0 1px 1px rgba(0,0,0,.3),0 12px 30px -8px rgba(0,0,0,.5),0 28px 56px -30px rgba(0,0,0,.6);
  --pill:rgba(125,151,255,.16);--pill-ring:rgba(125,151,255,.3);
  --m-glass1:rgba(255,255,255,.16);--m-glass2:rgba(28,36,64,.55);--m-rim:rgba(255,255,255,.32);--m-back:#7d97ff;--m-back-o:.45;
}
.top a{text-decoration:none;color:inherit}
.top button{font:inherit;color:inherit;border:0;background:none;padding:0;margin:0}
.top a,.top button{cursor:pointer;-webkit-tap-highlight-color:transparent}
.top :focus-visible{outline:2px solid var(--liquid);outline-offset:2px;border-radius:12px}

/* the capsule: glass lives on ::before (so the mobile sheet can blur the page too), edge light on ::after */
.top .bar{pointer-events:auto;position:relative;isolation:isolate;display:flex;align-items:center;gap:10px;height:52px;padding:0 6px 0 12px;width:min(1040px,100%);border-radius:26px;
  transition:height .45s var(--ease),width .45s var(--ease),transform .45s var(--ease),padding .45s var(--ease)}
.top .bar::before,.top .sheet-glass{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:radial-gradient(160px 70px at var(--mx,30%) -10%,var(--g-sheen),transparent 70%),linear-gradient(180deg,var(--g-tint),var(--g-tint2));
  -webkit-backdrop-filter:blur(26px) saturate(1.9) brightness(1.03);backdrop-filter:blur(26px) saturate(1.9) brightness(1.03);
  box-shadow:inset 0 1px 0 var(--g-inner),inset 0 -1px 0 rgba(255,255,255,.04),0 0 0 .5px var(--g-ring),var(--g-shadow)}
.top .bar::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(165deg,var(--g-edge),transparent 32%,transparent 66%,var(--g-edge2));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}

/* brand: the mark's liquid rises and flows while hovered */
.top .brand{display:flex;align-items:center;gap:9px;min-height:44px;padding-right:4px;font-weight:600;font-size:17px;letter-spacing:-.015em;color:var(--text);flex:none}
.top .mark{width:36px;height:26px;flex:none;overflow:visible;transition:transform .5s var(--spring)}
.top .mark .s1{stop-color:var(--liquid-hi)}.top .mark .s2{stop-color:var(--liquid)}.top .mark .s3{stop-color:var(--liquid-lo)}
.top .mark .g1{stop-color:var(--m-glass1)}.top .mark .g2{stop-color:var(--m-glass2)}
.top .mark .m-rim{stroke:var(--m-rim);stroke-width:5}
.top .mark .m-back{fill:var(--m-back);opacity:var(--m-back-o)}
.top .mark .m-front{stroke:rgba(255,255,255,.75);stroke-width:4.4}
.top .mark .m-rise{transition:transform .9s var(--ease)}
.top .mark .m-flow{animation:mflow 2.8s linear infinite paused}
.top .mark .m-flow2{animation:mflow 4.2s linear infinite reverse paused}
@keyframes mflow{to{transform:translateX(-504px)}}
.top .brand:hover .mark,.top .brand:focus-visible .mark{transform:rotate(-4deg) scale(1.06)}
.top .brand:hover .m-rise,.top .brand:focus-visible .m-rise{transform:translateY(-34px)}
.top .brand:hover :is(.m-flow,.m-flow2),.top .brand:focus-visible :is(.m-flow,.m-flow2){animation-play-state:running}
.top .word{transition:opacity .3s,letter-spacing .45s var(--ease)}

/* nav: a liquid pill that stretches toward the next link and settles */
.top .sheet{display:contents}
.top .sheet-glass{display:none}
.top nav{position:relative;isolation:isolate;display:flex;gap:2px;margin-left:auto;font-size:14px}
.top nav a{position:relative;display:flex;align-items:center;min-height:36px;color:var(--sub);padding:0 12px;border-radius:999px;white-space:nowrap;transition:color .25s}
.top nav a:hover,.top nav a.is-hot,.top nav a[aria-current]{color:var(--text)}
.top .nav-ind{position:absolute;z-index:-1;top:0;bottom:0;left:var(--l,0);right:var(--r,100%);border-radius:999px;pointer-events:none;opacity:0;
  background:linear-gradient(180deg,rgba(255,255,255,.18),transparent),var(--pill);box-shadow:inset 0 0 0 1px var(--pill-ring),inset 0 1px 0 rgba(255,255,255,.35);
  transition:left .42s var(--ease),right .42s var(--ease),opacity .25s}
.top .nav-ind.to-r{transition:left .5s var(--ease) .06s,right .32s var(--ease),opacity .25s}
.top .nav-ind.to-l{transition:left .32s var(--ease),right .5s var(--ease) .06s,opacity .25s}
.top .nav-ind.on{opacity:1}
.top .nav-ind.snap{transition:opacity .25s}
.top .nav-ind.blob{animation:blob .55s var(--ease)}
@keyframes blob{0%{transform:scale(1,1)}35%{transform:scale(1,.8)}70%{transform:scale(1,1.06)}100%{transform:scale(1,1)}}
.top .nav-ind::after{content:"";position:absolute;left:50%;bottom:3px;width:14px;height:2px;margin-left:-7px;border-radius:2px;background:var(--liquid-grad);opacity:0;transform:scaleX(.3);transition:opacity .3s,transform .45s var(--spring)}
.top .nav-ind.cur::after{opacity:1;transform:none}

/* sun/moon: the sun's core grows into a moon as a shadow slides over it, the rays fold away */
.top .theme{position:relative;width:36px;height:36px;border-radius:18px;display:inline-flex;align-items:center;justify-content:center;gap:10px;color:var(--sub);flex:none;transition:background .2s,color .2s}
.top .theme:hover{background:var(--hair);color:var(--text)}
.top .theme:active .tm{transform:scale(.88)}
.top .tm{width:20px;height:20px;flex:none;overflow:visible;transition:transform .5s var(--spring)}
.top .tm-core{transform-box:fill-box;transform-origin:center;transition:transform .55s var(--spring)}
.top .tm-bite{transform:translate(9px,-9px);transition:transform .55s var(--ease)}
.top .tm-rays{transform-box:fill-box;transform-origin:center;transition:transform .55s var(--spring),opacity .3s}
:root[data-theme="dark"] .top .tm{transform:rotate(-20deg)}
:root[data-theme="dark"] .top .tm-core{transform:scale(1.7)}
:root[data-theme="dark"] .top .tm-bite{transform:none}
:root[data-theme="dark"] .top .tm-rays{transform:rotate(-60deg) scale(.4);opacity:0}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .top .tm{transform:rotate(-20deg)}
  :root:not([data-theme="light"]) .top .tm-core{transform:scale(1.7)}
  :root:not([data-theme="light"]) .top .tm-bite{transform:none}
  :root:not([data-theme="light"]) .top .tm-rays{transform:rotate(-60deg) scale(.4);opacity:0}
}
.top .theme-l{display:none}

/* Buy: a glass capsule with the price on the left (old price struck above it) and the liquid button on the right */
.buy{display:inline-flex;align-items:center;height:40px;border-radius:20px;flex:none;
  transition:background .25s,box-shadow .25s,transform .2s var(--ease),height .45s var(--ease)}
.buy:active{transform:scale(.97)}
.buy-go{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:0;height:36px;padding:0 16px 0 14px;border-radius:18px;white-space:nowrap;
  background:var(--cta-bg,#1d1d1f);color:var(--cta-fg,#fff);font-size:14px;font-weight:600;letter-spacing:.005em;
  box-shadow:0 0 0 .5px rgba(0,0,0,.12),0 4px 12px -4px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.14);
  transition:filter .2s,box-shadow .3s,height .45s var(--ease)}
.buy-go::after{content:"";position:absolute;top:0;bottom:0;left:0;width:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent);transform:translateX(-155.56%) skewX(-20deg);will-change:transform;animation:buyshine 5s var(--ease) 1.8s infinite;pointer-events:none}
@keyframes buyshine{0%,64%{transform:translateX(-155.56%) skewX(-20deg)}100%{transform:translateX(288.89%) skewX(-20deg)}}
.buy-mac{width:12px;height:14px;margin:-2px 7px 0 0}
.buy-go b{font-weight:600;font-variant-numeric:tabular-nums}
.buy:hover .buy-go{filter:brightness(1.25)}

/* menu button (phones) */
.top .menu{display:none;position:relative;width:44px;height:44px;border-radius:22px;flex:none;color:var(--text)}
.top .menu:hover{background:var(--hair)}
.top .menu i{position:absolute;left:14px;width:16px;height:1.75px;border-radius:2px;background:currentColor;transition:transform .45s var(--spring),top .3s var(--ease)}
.top .menu i:first-child{top:18px}.top .menu i:last-child{top:24px}
.top.open .menu i:first-child{top:21px;transform:rotate(45deg)}
.top.open .menu i:last-child{top:21px;transform:rotate(-45deg)}

/* compact once the page moves on: only the height changes, a little denser glass */
.top.compact .bar{height:46px;transform:translateY(-4px)}
.top.compact .bar::before{--g-tint:color-mix(in srgb,var(--surface) 72%,transparent)}
.top.compact .buy{height:36px}
.top.compact .buy-go{height:32px}

/* in between: tighten before the nav runs out of room */
@media (max-width:860px) and (min-width:641px){
  .top .bar{gap:6px}
  .top nav a{padding:0 9px}
  .buy-go{padding:0 14px}
}
@media (max-width:720px) and (min-width:641px){.top .word{display:none}}

/* phones: logo + Buy + menu; the nav and the toggle open in a glass sheet */
@media (max-width:640px){
  .top{padding:0 10px}
  .top .bar{gap:6px;padding:0 4px 0 10px}
  .top.compact .bar{padding-left:10px}
  .top .menu{display:inline-flex}
  .top .buy{margin-left:auto}
  .top .sheet{display:flex;flex-direction:column;gap:4px;position:absolute;top:calc(100% + 8px);left:0;right:0;padding:8px;border-radius:24px;isolation:isolate;
    opacity:0;visibility:hidden;transform:translateY(-8px) scale(.97);transform-origin:top right;
    transition:opacity .2s,transform .35s var(--ease),visibility 0s .35s}
  .top .sheet-glass{display:block}
  .top.open .sheet{opacity:1;visibility:visible;transform:none;transition:opacity .2s,transform .45s var(--spring),visibility 0s}
  .top nav{flex-direction:column;margin:0;font-size:17px}
  .top nav a{min-height:48px;padding:0 16px;border-radius:16px;color:var(--text)}
  .top nav a:hover{background:var(--hair)}
  .top nav a[aria-current]{background:var(--pill);box-shadow:inset 0 0 0 1px var(--pill-ring)}
  .top .nav-ind{display:none}
  .top .theme{width:100%;height:48px;border-radius:16px;justify-content:space-between;padding:0 14px 0 16px;color:var(--text);border-top:0}
  .top .theme::before{content:"";position:absolute;left:16px;right:16px;top:-3px;height:1px;background:var(--hair)}
  .top .theme-l{display:block;font-size:17px;order:-1}
}
@media (max-width:400px){.buy-name{display:none}.buy-go{padding:0 14px 0 12px}}
@media (max-width:359px){.top .word{display:none}}

@media (prefers-reduced-motion:reduce){
  .top .bar,.top .bar *,.top .bar *::after{transition-duration:.01s!important;animation:none!important}
  .buy-go::after{display:none}
  .top .brand:hover .mark{transform:none}
}
@media (hover:none){.top .brand:hover .mark{transform:none}}

/* a slow liquid light circles the capsule rim; the Get pill glows blue */
@property --rim{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes rimspin{to{--rim:360deg}}
.top .bar::after{padding:1.5px;background:conic-gradient(from var(--rim),transparent 0 68%,var(--liquid-hi) 80%,var(--liquid) 88%,transparent 97%),linear-gradient(165deg,var(--g-edge),transparent 32%,transparent 66%,var(--g-edge2));animation:rimspin 7s linear infinite}
.buy-go{box-shadow:0 0 0 1px color-mix(in srgb,var(--liquid) 40%,transparent),0 6px 22px -4px color-mix(in srgb,var(--liquid) 85%,transparent),inset 0 1px 0 rgba(255,255,255,.14)}
.buy-go::after{background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);animation-duration:3.5s}
@media (prefers-reduced-motion:reduce){.top .bar::after{animation:none}}
.buy{position:relative}
/* seats-left badge on the Get pill, like an app badge */
.buy-left{position:absolute;top:-7px;right:-6px;padding:2px 7px;border-radius:10px;font-size:10.5px;font-weight:700;line-height:1.35;letter-spacing:.01em;color:#fff;white-space:nowrap;pointer-events:none;
  background:var(--liquid-grad);box-shadow:0 0 0 2px var(--bg),0 3px 8px -2px color-mix(in srgb,var(--liquid) 70%,transparent);animation:leftpop .6s var(--spring) 1s both}
.buy-left:empty,.launch-over .buy-left{display:none}
@keyframes leftpop{from{transform:scale(.4);opacity:0}}
@media (prefers-reduced-motion:reduce){.buy-left{animation:none}}

/* the wordmark: "Mac" is a small glass filled with the brand's liquid; the surface is a slow wave (still under reduced motion) */
.wm-mac{position:relative;display:inline-block;line-height:1;padding:.05em .06em .12em;margin:-.05em -.06em -.12em;color:color-mix(in srgb,var(--liquid) 34%,var(--text))}
.wm-mac::after{content:attr(data-t);content:attr(data-t) / "";position:absolute;left:.06em;top:.05em;white-space:nowrap;pointer-events:none;
  background:linear-gradient(180deg,var(--liquid-hi),var(--liquid) 50%,var(--liquid-lo));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14' preserveAspectRatio='none'%3E%3Cpath d='M0 7Q30 0 60 7T120 7V14H0Z'/%3E%3C/svg%3E") 0 .3em/1.1em .16em repeat-x,linear-gradient(#000,#000) 0 .42em/100% 100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14' preserveAspectRatio='none'%3E%3Cpath d='M0 7Q30 0 60 7T120 7V14H0Z'/%3E%3C/svg%3E") 0 .3em/1.1em .16em repeat-x,linear-gradient(#000,#000) 0 .42em/100% 100% no-repeat;
  animation:wm-wave 5s linear infinite}
@keyframes wm-wave{to{-webkit-mask-position:1.1em .3em,0 .42em;mask-position:1.1em .3em,0 .42em}}
@media (prefers-reduced-motion:reduce){.wm-mac::after{animation:none!important}}
.top .mark .m-rim{stroke:none}

/* Logo everywhere on the site: no outline around the drive mark (Albi, 5 Nov). */
.m-rim,.bm-rim,.cl-rim{stroke:none!important}